From d4106b41f7ea74d469afbcdca3a853c295ad2e51 Mon Sep 17 00:00:00 2001
From: botvid <asdf@qwertyist.se>
Date: Mon, 10 Feb 2025 16:33:32 +0100
Subject: [PATCH] =?UTF-8?q?snyggt=20error-f=C3=A4lt=20i=20importrutan?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

stolt
---
 src/components/import/import.svelte           | 27 +++++++++++++++-
 src/lib/components/ui/scroll-area/index.ts    | 10 ++++++
 .../scroll-area/scroll-area-scrollbar.svelte  | 27 ++++++++++++++++
 .../ui/scroll-area/scroll-area.svelte         | 32 +++++++++++++++++++
 4 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/ui/scroll-area/index.ts
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area.svelte

diff --git a/src/components/import/import.svelte b/src/components/import/import.svelte
index 1682684..452b73b 100644
--- a/src/components/import/import.svelte
+++ b/src/components/import/import.svelte
@@ -16,6 +16,8 @@
 	import { importDefaultShortforms, importShortforms } from '../../db/import';
 	import { createShortformList, type List } from '../../db/main';
 
+	import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
+	  
 	$: form = {
 		textarea: '',
 		name: '',
@@ -24,6 +26,17 @@
 	let importing = false;
 	let progress = 0;
 	const handleImport = async () => {
+		importState.errors = []
+		if (form.textarea == "") {
+			console.error("no name error")
+			importState.errors.push("Importfältet är tomt")
+			return
+		}
+		if (form.name == "") {
+			console.error("no name error")
+			importState.errors.push("Du måste döpa förkortningslistan till något")
+			return
+		}
 		importing = true;
 		const l: List = { name: form.name, type: form.type ? 1 : 0, updated: new Date() };
 		const listid = await createShortformList(l);
@@ -81,7 +94,19 @@ förkn=förkortningen
 				<Label>Prioritera lista</Label>
 				<Switch bind:checked={form.type} />
 			</div>
-			<p class="leading-7 [&:not(:first-child)]:mt-2">{importState.errors}</p>
+
+			{#if importState.errors.length > 0}
+			<ScrollArea class="max-h-48 rounded-md">
+			<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
+			  <p class="font-bold">Fel vid import</p>
+			  <ul class="p-6">
+				{#each importState.errors as error}
+					<li class="list-disc">{error}</li>
+				{/each}
+			  </ul>
+			</div>
+			</ScrollArea>
+			{/if}
 		</form>
 	</Card.Content>
 	<Card.Footer class="flex justify-between">
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..71b3328
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "vertical";
+	export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+>
+	<slot />
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..e8e368c
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.Props & {
+		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Content>
+			<slot />
+		</ScrollAreaPrimitive.Content>
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>