src/components/import/import.svelte

@@ -16,8 +16,6 @@
 	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: '',
@@ -26,17 +24,6 @@
 	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);
@@ -71,7 +58,7 @@
 		<Card.Title>Importera förkortningar</Card.Title>
 		<Card.Description>Nån annan hjälptext.</Card.Description>
 	</Card.Header>
-	<Card.Content class="mx-auto">
+	<Card.Content>
 		<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>
@@ -94,19 +81,7 @@ 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

@@ -1,10 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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,6 +1,5 @@
 <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";
@@ -21,11 +20,6 @@
 
 <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>-->