From 9a8938979c3db4e9d9a6781c833c714691f88042 Mon Sep 17 00:00:00 2001
From: botvid <asdf@qwertyist.se>
Date: Mon, 10 Feb 2025 22:14:06 +0100
Subject: [PATCH] =?UTF-8?q?kan=20=C3=A4ndra=20befintliga=20f=C3=B6rkortnin?=
 =?UTF-8?q?gar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                          |  22 ++++
 package.json                               |   2 +
 src/components/create.svelte               | 144 +++++++++++++++++++++
 src/components/import/import.svelte        |   7 +-
 src/components/textarea.svelte             |  55 +++-----
 src/db/main.ts                             |   5 +
 src/lib/components/ui/sonner/index.ts      |   1 +
 src/lib/components/ui/sonner/sonner.svelte |  20 +++
 src/lib/stores.svelte.ts                   |  16 ++-
 src/modules/keyboard.ts                    |  15 +++
 src/routes/+page.svelte                    |  29 ++++-
 11 files changed, 269 insertions(+), 47 deletions(-)
 create mode 100644 src/components/create.svelte
 create mode 100644 src/lib/components/ui/sonner/index.ts
 create mode 100644 src/lib/components/ui/sonner/sonner.svelte

diff --git a/package-lock.json b/package-lock.json
index 1049339..583cd26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,11 +36,13 @@
 				"eslint-plugin-svelte": "^2.46.1",
 				"formsnap": "^1.0.1",
 				"globals": "^15.14.0",
+				"mode-watcher": "^0.5.1",
 				"prettier": "^3.4.2",
 				"prettier-plugin-svelte": "^3.3.3",
 				"prettier-plugin-tailwindcss": "^0.6.10",
 				"svelte": "^5.0.0",
 				"svelte-check": "^4.0.0",
+				"svelte-sonner": "^0.3.28",
 				"sveltekit-superforms": "^2.23.1",
 				"tailwind-merge": "^3.0.1",
 				"tailwind-variants": "^0.3.1",
@@ -6270,6 +6272,16 @@
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
+		"node_modules/mode-watcher": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.5.1.tgz",
+			"integrity": "sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0-next.1"
+			}
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -7744,6 +7756,16 @@
 				"svelte": "^5.0.0"
 			}
 		},
+		"node_modules/svelte-sonner": {
+			"version": "0.3.28",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.28.tgz",
+			"integrity": "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
+			}
+		},
 		"node_modules/sveltekit-superforms": {
 			"version": "2.23.1",
 			"resolved": "https://registry.npmjs.org/sveltekit-superforms/-/sveltekit-superforms-2.23.1.tgz",
diff --git a/package.json b/package.json
index 36e6cf1..3eddb38 100644
--- a/package.json
+++ b/package.json
@@ -37,11 +37,13 @@
 		"eslint-plugin-svelte": "^2.46.1",
 		"formsnap": "^1.0.1",
 		"globals": "^15.14.0",
+		"mode-watcher": "^0.5.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.10",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"svelte-sonner": "^0.3.28",
 		"sveltekit-superforms": "^2.23.1",
 		"tailwind-merge": "^3.0.1",
 		"tailwind-variants": "^0.3.1",
diff --git a/src/components/create.svelte b/src/components/create.svelte
new file mode 100644
index 0000000..1d7e7ed
--- /dev/null
+++ b/src/components/create.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { appState, shortforms, importState } from '$lib/stores.svelte';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Input } from '$lib/components/ui/input';
+	import * as Select from '$lib/components/ui/select';
+	import { Label } from '$lib/components/ui/label';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import { Progress } from '$lib/components/ui/progress';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Separator } from '$lib/components/ui/separator';
+	import { db, createShortform, type List, type Shortform } from '../db/main';
+	import { cacheShortforms } from "../modules/shortforms";
+	import { liveQuery } from "dexie";
+
+	import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
+
+	$: abbForm = {
+		shortform: "",
+		phrase: "", 
+		target: "",
+		errors: [],
+	};
+
+	let importing = false;
+	let progress = 0;
+	const handleCreate = async (e) => {
+//		abbForm.errors = []
+		e.preventDefault()
+    
+    /*
+	    id?: number;
+	    listid: number;
+	    shortform: string;
+	    phrase: string;
+	    used: Date;
+	    uses: number;
+	    remind: number, // negative if disabled
+	    updated: Date;
+    */
+		const sf = {
+			listid: abbForm.target.value,
+			shortform: abbForm.shortform, 
+			phrase: abbForm.phrase, 
+			used: new Date(0),
+			uses: 0,
+			remind: 0,
+			updated: Date.now(),
+		}
+		appState.open = ""
+		db.shortforms.where({listid: sf.listid, shortform: sf.shortform}).first()
+		.then(existing => {
+			sf.id = existing.id
+			db.shortforms.put(sf).then(result => {
+				shortforms.cache = cacheShortforms([sf.listid]);
+			cancelCreate()
+			})
+		})
+	};
+	const cancelCreate = () => {
+		abbForm.shortform = ""
+		abbForm.phrase = ""
+		abbForm.target = {}
+		abbForm.errors = []
+		appState.open = ""
+	};
+
+	const onSelectedChange = (v) => {
+		console.log(v)
+		abbForm.target = v
+	}
+	let selectedLists = []
+
+	onMount(() => {
+		db.lists.get(shortforms.standardList).then(l => {
+			selectedLists.push({ value: l.id, label: l.name })
+			abbForm.target = { value: l.id, label: l.name }
+		})
+		console.log("fokusera på input och mata med medhavd data")
+		const el = document.getElementById("shortformEl")
+		el.focus()
+		
+		
+	});
+
+</script>
+
+<Card.Root class="mx-auto w-[490px]">
+	<Card.Header>
+		<Card.Title>Lägg till förkortning</Card.Title>
+		<Card.Description></Card.Description>
+	</Card.Header>
+	<Card.Content class="mx-auto">
+		<form class="grid gap-4 py-4" method="post" enctype="multipart/form-data" on:submit={handleCreate}>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label>Förkortning</Label>
+				<Input id="shortformEl" bind:value={abbForm.shortform} focus placeholder="" class="w-[290px]" />
+			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label>Text</Label>
+				<Input id="phraseEl" bind:value={abbForm.phrase} placeholder="" class="w-[290px]" />
+			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label>Mål</Label>
+				<Select.Root selected={abbForm.target} onSelectedChange={onSelectedChange}>
+					<Select.Trigger class="w-[290px]">
+						  <Select.Value placeholder="Ingen lista vald" />
+					</Select.Trigger>
+
+					<Select.Content>
+					{#each selectedLists as list}
+						<Select.Item 
+							value={list.id}
+							label={list.name}
+						>{list.name}</Select.Item>
+					{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+			{#if abbForm.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 abbForms.errors as error}
+					<li class="list-disc">{error}</li>
+				{/each}
+			  </ul>
+			</div>
+			</ScrollArea>
+			{/if}
+			<button type="submit" class="hidden" />
+		</form>
+	</Card.Content>
+	<!--
+	<Card.Footer class="flex justify-between">
+		<Button on:click={cancelCreate} variant="outline">Avbryt</Button>
+		<Button on:click={handleCreate}>Importera</Button>
+	</Card.Footer>
+	-->
+</Card.Root>
+
diff --git a/src/components/import/import.svelte b/src/components/import/import.svelte
index 452b73b..52638bb 100644
--- a/src/components/import/import.svelte
+++ b/src/components/import/import.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import { importState } from '$lib/stores.svelte';
+	import { appState, importState } from '$lib/stores.svelte';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Input } from '$lib/components/ui/input';
 	import * as Select from '$lib/components/ui/select';
@@ -52,7 +52,8 @@
 	const cancelImport = () => {
 		importState.data = '';
 		importState.errors = [];
-		goto('/');
+		importState.name = "";
+		appState.open = ""
 	};
 	const importDefaultList = () => {
 		importState.data = '';
@@ -66,7 +67,7 @@
 	});
 </script>
 
-<Card.Root class="w-[490px]">
+<Card.Root class="mx-auto w-[490px]">
 	<Card.Header>
 		<Card.Title>Importera förkortningar</Card.Title>
 		<Card.Description>Nån annan hjälptext.</Card.Description>
diff --git a/src/components/textarea.svelte b/src/components/textarea.svelte
index b751382..2499e98 100644
--- a/src/components/textarea.svelte
+++ b/src/components/textarea.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { appState, shortforms, textSettings } from '$lib/stores.svelte';
+	let { ref = $bindable() } = $props();
+
+	import { appState, shortforms, initShortformState, textSettings } from '$lib/stores.svelte';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 
@@ -10,24 +12,17 @@
 	  import { liveQuery } from "dexie";
 
 	import * as Select from "$lib/components/ui/select/index.js";
-	
-	$: styles = {
+
+	let styles = $derived({
 		"text-bg": "#333333",
 		"text-fg": "#baff00",
 		"text-font": textSettings.font,
-		"text-size": textSettings.size + "px",
-	}
+		"text-size": textSettings.size + "px"
+		})
 
-	$: cssVarStyles = Object.entries(styles)
-		.map(([key, value]) => `--${key}:${value}`)
-		.join(';');
-
-	$: standardLists = liveQuery( async () => { 
-			return await db.lists.toArray()
-		}
-	)
 	let selectedStandardList = {}
 	const selectedStandardListChanged = (v) => {
+		shortforms.standardList = v.value
 		shortforms.cache = cacheShortforms([Number(v.value)]);
 	}
 	let state = {
@@ -38,6 +33,7 @@
 	let textarea: HTMLTextAreaElement;
 
 	onMount(() => {
+		initShortformState()
 		shortforms.cache = cacheShortforms([890324]);
 		if (browser) {
 			let t = document.getElementById('doc') as HTMLTextAreaElement;
@@ -45,12 +41,20 @@
 				textarea = t;
 				setTimeout(() => {
 					textarea.focus();
-					console.log('focus the textarea');
 				}, 25);
 			}
 		}
+
 	});
 
+	const standardLists = $derived(liveQuery( async () => { 
+		return await db.lists.toArray()
+	}))
+	let css = Object.entries(styles)
+			.map(([key, value]) => `--${key}:${value}`)
+			.join(';')
+	const cssVarStyles = $derived({css})
+
 	const expand = (e: InputEvent) => {
 		const expander = e.data as string;
 		// console.log("expander:", expander);
@@ -90,16 +94,11 @@
 		if (e.inputType == 'insertText') {
 		}
 	};
-	/* const hotkeyHandler = (e: KeyboardEvent) => {
-		if (e.key == 'F4') {
-			state.textarea.value = '';
-		}
-	};
-	*/
 </script>
 
 <div class="docContainer h-full flex flex-col" role="application" id="docContainer">
 	<textarea 
+		bind:this={ref}
 		style="
 			font-size:{textSettings.size}px;
 			font-family:{textSettings.font};
@@ -112,22 +111,6 @@
 		on:beforeinput={input} 
 		bind:value={appState.text}
 	></textarea>
-	<Select.Root
-		selected={selectedStandardList}
-		onSelectedChange={selectedStandardListChanged}
-		class="flex-none"
-	>
-		<Select.Trigger>
-			<Select.Value placeholder="Välj standardlista" />
-		</Select.Trigger>
-		<Select.Content>
-			<Select.Group>
-				{#each $standardLists as list}
-					<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
-				{/each}
-			</Select.Group>
-		</Select.Content>
-	</Select.Root>
 </div>
 
 <style lang="postcss">
diff --git a/src/db/main.ts b/src/db/main.ts
index 1ffd344..6dec233 100644
--- a/src/db/main.ts
+++ b/src/db/main.ts
@@ -58,6 +58,11 @@ export async function createShortformList(l: List): number {
 
 }
 
+export async function createShortform(sf: Shortform): number {
+    return await db.lists.add(sf)
+
+}
+
 export async function deleteShortformList(id: number) {
     await db.shortforms.where("listid").equals(id).delete()
     await db.lists.where("id").equals(id).delete()
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 0000000..1ad9f4a
--- /dev/null
+++ b/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..7d5b2f1
--- /dev/null
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...$$restProps}
+/>
diff --git a/src/lib/stores.svelte.ts b/src/lib/stores.svelte.ts
index 1263263..223d1ea 100644
--- a/src/lib/stores.svelte.ts
+++ b/src/lib/stores.svelte.ts
@@ -35,7 +35,21 @@ let selectedColor = 0;
 export const shortforms = $state({ standardList: "", subjectLists: [], cache: new Map() })
 export const importState = $state({ data: "", errors: [] })
 export const textSettings = $state({ font: "Arial", size: 30, colors: colorSetting, padding: 0, lineheight: 1 })
-export const appState = $state({ text: "", menuOpen: false })
+export const appState = $state({ text: "", menuOpen: false, open: "" })
+
+import { toast } from "svelte-sonner";
+import { db } from "../db/main"
+
+export const initShortformState = async () => {
+	const lists = await db.lists.toArray()
+	if (shortforms.standardList == "") {
+		if (lists.length > 0) {
+			console.log("Väljer en av standardlistorna")
+			shortforms.standardList = lists[0].id
+			toast("Ingen standardlista vald. Väljer " + lists[0].name)
+		}
+	}
+}
 
 export const selectNextColor = () => {
 	selectedColor += 1
diff --git a/src/modules/keyboard.ts b/src/modules/keyboard.ts
index 2310f46..75c93a9 100644
--- a/src/modules/keyboard.ts
+++ b/src/modules/keyboard.ts
@@ -126,6 +126,13 @@ hotkeys.set("F8", {
 	}
 })
 
+hotkeys.set("F2", {
+	action: (e) => {
+		e.preventDefault()
+		appState.open = "create"
+	}
+})
+
 hotkeys.set("F11", {
 	action: (e) => {
 		e.preventDefault()
@@ -152,3 +159,11 @@ hotkeys.set("F12", {
 		goto("/import")
 	}
 })
+
+hotkeys.set("Escape", {
+	action: (e) => {
+		e.preventDefault()
+		console.log("Close stuff")
+		appState.open = ""
+	}
+})
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6b25c53..c18b601 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
 	import Textarea from '../components/textarea.svelte';
 	import Import from '../components/import/import.svelte';
+	import Create from '../components/create.svelte';
 	import Dashboard from '../components/dashboard.svelte';
 	import { db, deleteShortformList, type Shortform } from '../db/main';
 	import Menu from "../components/menu.svelte";
 	import { Button } from '$lib/components/ui/button';
+	import { appState } from '$lib/stores.svelte'
+	let loaded = false
+	$effect(() => {
+		appState.open
+		if (loaded) {
+			if (appState.open == "") {
+				textarea.focus()
+			}
+		}
+		loaded = true
 
+	})
 	import { hotkeys } from '../modules/keyboard';
 	let showDashboard: boolean = false;
-
+	import { Toaster } from "$lib/components/ui/sonner";
 	const handleHotkeys = (e: KeyboardEvent) => {
 		hotkeys.get(e.key)?.action(e);
 	};
+	let textarea = null
 
 </script>
 <svelte:head>
@@ -20,15 +33,17 @@
 <svelte:window on:keydown={handleHotkeys} />
 
 <div class="h-dvh w-full overflow-hidden" role="application">
-	<div class="h-full">
-
-<!--		<div class="flex items-center justify-center p-24">
-			<Import />
+	{#if appState.open == "create"}
+		<div class="fixed flex top-0 right-0 left-0 z-50 justify-center items-center align-middle w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+			<Create />
 		</div>
-		-->
+	{/if}
+	<div class="h-full">
 		<Menu />
-		<Textarea />
+		<Textarea bind:ref={textarea} />
 	<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
 	</div>
 	<!--<Dashboard open={showDashboard} />-->
 </div>
+
+<Toaster />