snyggt error-fält i importrutan

stolt

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);
@@ -58,7 +71,7 @@
 		<Card.Title>Importera förkortningar</Card.Title>
 		<Card.Description>Nån annan hjälptext.</Card.Description>
 	</Card.Header>
-	<Card.Content>
+	<Card.Content class="mx-auto">
 		<form class="grid gap-4 py-4" method="post" enctype="multipart/form-data">
 			<div class="grid grid-cols-4 items-center gap-4">
 				<Label>Förkortningar</Label>
@@ -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">

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,
+};

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>

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>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Textarea from '../components/textarea.svelte';
+	import Import from '../components/import/import.svelte';
 	import Dashboard from '../components/dashboard.svelte';
 	import { db, deleteShortformList, type Shortform } from '../db/main';
 	import Menu from "../components/menu.svelte";
@@ -20,6 +21,11 @@
 
 <div class="h-dvh w-full overflow-hidden" role="application">
 	<div class="h-full">
+
+<!--		<div class="flex items-center justify-center p-24">
+			<Import />
+		</div>
+		-->
 		<Menu />
 		<Textarea />
 	<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->