valda förkortningslistor i dashboard med genväg

lägg till knapp för dashboard i menyn

src/components/dashboard.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
+	import { db } from '../db/main';
 	import { importState } from '$lib/stores.svelte';
 	import * as Accordion from '$lib/components/ui/accordion';
 	import AccordionItem from '$lib/components/ui/accordion/accordion-item.svelte';
@@ -12,9 +13,15 @@
 	import { Badge } from '$lib/components/ui/badge';
 	import { Separator } from '$lib/components/ui/separator';
 	import Import from './import/import.svelte';
-	let {open} = $props();
+	let { open } = $props();
+
+	import { appState, shortforms } from '$lib/stores.svelte';
 
 	import default_shortforms from '../db/shortforms.se.json';
+	import { onMount } from 'svelte';
+	const openListSelection = () => {
+		appState.open = 'selectLists';
+	};
 	const importDefaultList = () => {
 		importState.data = '';
 		importState.errors = [];
@@ -24,6 +31,35 @@
 		console.log('goto import');
 		goto('/import');
 	};
+	const exampleShortformImport = `förk=förkortning
+förkr=förkortningar
+förka=förkorta
+förkar=förkortar`;
+	let standardList = $state(0);
+	var subjectList = $state(0);
+	onMount(() => {
+		db.lists
+			.toArray()
+			.then((lists) => {
+				console.log(lists);
+				standardList = lists.filter((l) => {
+					return l.id == shortforms.standardList;
+				})[0];
+				if (standardList == undefined) {
+					standardList = { name: 'Ingen vald' };
+				}
+				subjectList = lists.filter((l) => {
+					return l.id == shortforms.subjectList;
+				})[0];
+				if (subjectList == undefined) {
+					subjectList = { name: 'Ingen vald' };
+				}
+				console.log($state.snapshot(subjectList));
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	});
 </script>
 
 <Dialog.Root closeFocus="textarea#doc.textarea" bind:open closeOnOutsideClick={false}>
@@ -37,30 +73,37 @@
 				sätt.</Dialog.Description
 			>
 		</Dialog.Header>
+		<div class="grid grid-cols-3 gap-6">
+			<div class="text-sm">Standardlista: {standardList.name}</div>
+			<div class="text-sm">Ämneslista: {subjectList.name}</div>
+			<div class="text-sm">
+				<a href="#" on:click={openListSelection}><Badge>Välj förkortningslistor</Badge></a>
+			</div>
+		</div>
 		<Accordion.Root class="w-full">
 			<Accordion.Item value="import">
 				<Accordion.Trigger>Importera förkortningar</Accordion.Trigger>
 				<Accordion.Content>
 					<p class="leading-7 [&:not(:first-child)]:mt-6">
-						Skrivert kan bara importera och exportera förkortningslistor i läsbart textformat.<br />
-						Det finns ett verktyg för att konvertera listor och export-filer mellan olika format här:
+						Skrivert kan importera förkortningslistor i läsbart textformat.<br />
+					</p>
+					<pre>{exampleShortformImport}</pre>
+					<!-- Det finns ett verktyg för att konvertera listor och export-filer mellan olika format här:
 						<br />
 						<a href="https://qwertyist.se/tools/shortforms/" target="_blank"
 							><Badge variant="secondary">qwertyist.se/förkortingar/</Badge></a
 						>
-					</p>
-					<Separator class="my-4" />
+						-->
 					<p class="leading-7 [&:not(:first-child)]:mt-6">
-						Vill du inte importera en egen lista så kan du använda programmets baslista som i den
-						här versionen av programmet har {default_shortforms.shortforms.length} förkortningar.<br
-						/>
+						<a href="/import"><Badge>Importera förkortningar</Badge></a>
+					</p>
+					<p class="leading-7 [&:not(:first-child)]:mt-6">
+						Du kan också använda programmets baslista som i den här versionen av programmet har {default_shortforms
+							.shortforms.length} förkortningar.<br />
 						<a href="/import" on:click={importDefaultList}
 							><Badge variant="secondary">Importera baslista</Badge></a
 						>
 					</p>
-					<p class="leading-7 [&:not(:first-child)]:mt-6">
-						<a href="/import"><Badge>Importera förkortningar</Badge></a>
-					</p>
 				</Accordion.Content>
 			</Accordion.Item>
 			<Accordion.Item value="settings">

src/components/menu.svelte

@@ -21,6 +21,14 @@
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content class="w-56">
 		<DropdownMenu.Label>Inställningar</DropdownMenu.Label>
+		<DropdownMenu.Item
+			on:click={() => {
+				appState.open = 'dashboard';
+			}}
+		>
+			Dashboard
+			<DropdownMenu.Shortcut>F10</DropdownMenu.Shortcut>
+		</DropdownMenu.Item>
 		<DropdownMenu.Separator />
 		<DropdownMenu.Group>
 			<DropdownMenu.Item

src/routes/+page.svelte

@@ -10,11 +10,17 @@
 	import { appState } from '$lib/stores.svelte';
 	let loaded = false;
 	$effect(() => {
+		console.log(appState.open);
 		appState.open;
 		if (loaded) {
 			if (appState.open == '') {
 				textarea.focus();
 			}
+			if (appState.open == 'selectLists') {
+				console.log('should close dashboard');
+				showDashboard = false;
+				return;
+			}
 			if (appState.open == 'dashboard') {
 				console.log('should open dashboard');
 				showDashboard = true;
@@ -23,12 +29,16 @@
 		loaded = true;
 	});
 	import { hotkeys } from '../modules/keyboard';
-	let showDashboard: boolean = true;
+	var showDashboard = $state(0);
 	import { Toaster } from '$lib/components/ui/sonner';
+	import { onMount } from 'svelte';
 	const handleHotkeys = (e: KeyboardEvent) => {
 		hotkeys.get(e.key)?.action(e);
 	};
 	let textarea = null;
+	onMount(() => {
+		appState.open = 'dashboard';
+	});
 </script>
 
 <svelte:head>
@@ -55,7 +65,7 @@
 	<div class="h-full">
 		<Textarea bind:ref={textarea} />
 		<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
-		<!-- <Dashboard open={showDashboard} />-->
+		<Dashboard open={showDashboard} />
 	</div>
 </div>