ändra hur valda listor sparas, öppna och stäng debug med home

src/components/create.svelte

@@ -21,13 +21,13 @@
 	$: abbForm = {
 		shortform: '',
 		phrase: '',
-		target: '',
+		target: { value: -1 },
 		errors: []
 	};
 
 	let importing = false;
 	let progress = 0;
-	const handleCreate = async (e: Any) => {
+	const handleCreate = async (e: Event) => {
 		//		abbForm.errors = []
 		e.preventDefault();
 
@@ -41,7 +41,8 @@
 	    remind: number, // negative if disabled
 	    updated: Date;
     */
-		const sf = {
+		var sf = {
+			id: null,
 			listid: abbForm.target.value,
 			shortform: abbForm.shortform.replace(/\s/g, '').toLowerCase(),
 			phrase: abbForm.phrase.trim(),
@@ -56,11 +57,13 @@
 			.equals([sf.listid, sf.shortform])
 			.first()
 			.then((existing) => {
-				sf.id = existing.id;
-				db.shortforms.put(sf).then((result) => {
-					cacheShortform(sf);
-					appState.open = '';
-				});
+				if (existing?.id) {
+					sf.id = Number(existing.id);
+					db.shortforms.put(sf).then((result) => {
+						cacheShortform(sf);
+						appState.open = '';
+					});
+				}
 			})
 			.catch(() => {
 				db.shortforms.put(sf).then((result) => {
@@ -81,17 +84,18 @@
 	};
 
 	const onSelectedChange = (v) => {
-		// console.log(v);
+		console.log(typeof v, v);
 		abbForm.target = v;
 	};
+
 	$: selectedLists = {
-		standard: {},
-		subject: {}
+		standard: { label: '', value: -1 },
+		subject: { label: '', value: -1 }
 	};
 	let show = false;
 
 	db.lists
-		.get(shortforms.standardList)
+		.get(shortforms.standardList.id)
 		.then((l) => {
 			if (l) {
 				selectedLists.standard = { value: l.id, label: l.name };
@@ -104,7 +108,7 @@
 			console.error('db.lists.get (standard)', err);
 		});
 	db.lists
-		.get(shortforms.subjectList)
+		.get(shortforms.subjectList.id)
 		.then((l) => {
 			if (l) {
 				selectedLists.subject = { value: l.id, label: l.name };
@@ -159,13 +163,7 @@
 			>
 				<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]"
-					/>
+					<Input id="shortformEl" bind:value={abbForm.shortform} placeholder="" class="w-[290px]" />
 				</div>
 				<div class="grid grid-cols-4 items-center gap-4">
 					<Label>Text</Label>
@@ -221,7 +219,7 @@
 						>
 							<p class="font-bold">Fel vid import</p>
 							<ul class="p-6">
-								{#each abbForms.errors as error}
+								{#each abbForm.errors as error}
 									<li class="list-disc">{error}</li>
 								{/each}
 							</ul>

src/components/listselector.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { onMount } from 'svelte';
 	import { clickOutside } from 'svelte-outside';
 	import * as Card from '$lib/components/ui/card/index';
@@ -9,22 +9,30 @@
 	import { appState, shortforms } from '$lib/stores.svelte';
 	import { cacheShortforms } from '../modules/shortforms';
 
-	const onSelectedStandardListChange = (e) => {
-		console.log('onSelectedStandardListChange', e);
-		shortforms.standardList = e.value;
-		cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
+	interface listOption {
+		value: number;
+		label: string;
+		disabled: boolean;
+	}
+
+	const onSelectedStandardListChange = (e: listOption) => {
+		console.log('onSelectedStandardListChange', typeof e, e);
+		shortforms.standardList.id = e.value;
+		shortforms.standardList.name = e.label;
+		cacheShortforms([Number(shortforms.standardList.id), Number(shortforms.subjectList.id)]);
 	};
 
 	const onSelectedSubjectListChange = (e) => {
 		if (e.value == 0) {
 			listSelectorForm.subject = { value: '', label: '' };
-			shortforms.subjectList = '';
-			cacheShortforms([Number(shortforms.standardList)]);
+			shortforms.subjectList = { name: '', id: -1 };
+			cacheShortforms([Number(shortforms.standardList.id)]);
 			return;
 		}
 		console.log('onSelectedSubjectListChange', e);
-		shortforms.subjectList = e.value;
-		cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
+		shortforms.subjectList.id = e.value;
+		shortforms.subjectList.name = e.label;
+		cacheShortforms([Number(shortforms.standardList.id), Number(shortforms.subjectList.id)]);
 	};
 
 	const onSubmit = (e) => {
@@ -37,22 +45,22 @@
 		subject: {}
 	};
 
-	const getListFromId = (lists, id) => {
-		return lists.filter((l) => l.id == id)[0];
-	};
-
 	let standardLists = [];
-	let subjectLists = [];
+	$: subjectLists = [];
 	let show = false;
 	onMount(async () => {
 		//console.log($state.snapshot(shortforms));
 		db.lists.toArray().then((lists) => {
 			standardLists = lists.filter((l) => l.type == 0);
 			subjectLists = lists.filter((l) => l.type == 1);
-			const standard = getListFromId(standardLists, shortforms.standardList);
-			listSelectorForm.standard = { value: standard.id, label: standard.name };
-			const subject = getListFromId(subjectLists, shortforms.subjectList);
-			listSelectorForm.subject = { value: subject.id, label: subject.name };
+			listSelectorForm.standard = {
+				value: shortforms.standardList.id,
+				label: shortforms.standardList.name
+			};
+			listSelectorForm.subject = {
+				value: shortforms.subjectList.id,
+				label: shortforms.subjectList.name
+			};
 			console.log(listSelectorForm);
 		});
 

src/components/textarea.svelte

@@ -13,18 +13,8 @@
 
 	import * as Select from '$lib/components/ui/select/index.js';
 
-	let styles = $derived({
-		'text-bg': '#333333',
-		'text-fg': '#baff00',
-		'text-font': textSettings.font,
-		'text-size': textSettings.size + 'px'
-	});
-
 	let selectedStandardList = {};
-	const selectedStandardListChanged = (v) => {
-		shortforms.standardList = v.value;
-		shortforms.cache = cacheShortforms([Number(v.value)]);
-	};
+
 	let state = {
 		capitalizeNext: true,
 		currentWord: ''
@@ -51,10 +41,6 @@
 			return await db.lists.toArray();
 		})
 	);
-	let css = Object.entries(styles)
-		.map(([key, value]) => `--${key}:${value}`)
-		.join(';');
-	const cssVarStyles = $derived({ css });
 
 	const expand = (e: InputEvent) => {
 		let expander = e.data as string;

src/lib/stores.svelte.ts

@@ -32,10 +32,10 @@ const colorThemes = [
 
 let selectedColor = 0;
 
-export const shortforms = $state({ standardList: "", subjectList: "", cache: new Map() })
+export const shortforms = $state({ standardList: { name: "", id: -1 }, subjectList: { name: "", id: -1 }, 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, open: "" })
+export const appState = $state({ debug: true, menuOpen: false, open: "", text: "", })
 
 import { toast } from "svelte-sonner";
 import { db } from "../db/main"
@@ -43,12 +43,14 @@ import { cacheShortforms } from "../modules/shortforms"
 
 export const initShortformState = async () => {
 	const lists = await db.lists.toArray()
-	if (shortforms.standardList == "") {
+	if (shortforms.standardList.id == -1) {
 		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)
-			shortforms.cache = cacheShortforms([shortforms.standardList]);
+			if (lists[0]?.id) {
+				shortforms.standardList.id = lists[0].id
+				shortforms.standardList.name = lists[0].name
+				toast("Ingen standardlista vald. Väljer " + lists[0].name)
+				shortforms.cache = cacheShortforms([shortforms.standardList.id]);
+			}
 		}
 	}
 }
@@ -68,7 +70,6 @@ export const toggleMenuOpen = (force = undefined) => {
 
 
 export const incTextSize = () => {
-	console.log(textSettings.size)
 	if (textSettings.size < 200) {
 		textSettings.size += 5
 		return

src/modules/keyboard.ts

@@ -84,12 +84,10 @@ defaultExpanders.set(";", {
 	fullstop: false,
 });
 
-hotkeys.set("F1", {
+hotkeys.set("Home", {
 	action: (e) => {
 		e.preventDefault()
-		console.log("Open dashboard")
-		appState.open = "dashboard"
-
+		appState.debug = !appState.debug;
 	}
 })
 

src/routes/+page.svelte

@@ -7,13 +7,13 @@
 	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';
+	import { appState, shortforms } from '$lib/stores.svelte';
 	let loaded = false;
 	$effect(() => {
 		console.log(appState.open);
 		appState.open;
 		if (loaded) {
-			if (appState.open == '') {
+			if (appState.open == '' && textarea != undefined) {
 				textarea.focus();
 			}
 			if (appState.open == 'selectLists') {
@@ -27,18 +27,22 @@
 			}
 		}
 		loaded = true;
+		debugState = JSON.stringify(appState, null, 4);
+		debugShortforms = JSON.stringify(shortforms, null, 4);
 	});
 	import { hotkeys } from '../modules/keyboard';
-	var showDashboard = $state(0);
+	var showDashboard = $state(true);
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { onMount } from 'svelte';
 	const handleHotkeys = (e: KeyboardEvent) => {
 		hotkeys.get(e.key)?.action(e);
 	};
-	let textarea = null;
+	let textarea: HTMLTextAreaElement | undefined = $state();
 	onMount(() => {
 		appState.open = 'dashboard';
 	});
+	var debugState = $state();
+	var debugShortforms = $state();
 </script>
 
 <svelte:head>
@@ -47,6 +51,13 @@
 <svelte:window on:keydown={handleHotkeys} />
 
 <div class="h-dvh w-full overflow-hidden" role="application">
+	{#if appState.debug}
+		<div>
+			hello appState: {debugState}
+			<br />
+			shortforms: {debugShortforms}
+		</div>
+	{/if}
 	{#if appState.open == 'create'}
 		<div
 			class="fixed left-0 right-0 top-0 z-50 flex h-[calc(100%-1rem)] max-h-full w-full items-center justify-center align-middle md:inset-0"
@@ -68,5 +79,4 @@
 		<Dashboard open={showDashboard} />
 	</div>
 </div>
-
 <Toaster />