nån slags ruta för att konfigurera kortkommandon

ska flytta in relevant från "src/modules/keyboards.ts"

src/components/hotkeys.svelte

@@ -0,0 +1,30 @@
+<script>
+	import Button from '$lib/components/ui/button/button.svelte';
+	import * as Card from '$lib/components/ui/card/index';
+	import { appState } from '$lib/stores.svelte';
+	import { clickOutside } from 'svelte-outside';
+	var show = true;
+	const cancelSave = () => true;
+	const handleSave = () => true;
+	const close = () => {
+		if (show == true) {
+			appState.open = '';
+		}
+	};
+</script>
+
+{#if show}
+	<div use:clickOutside={close}>
+		<Card.Root class="mx-auto w-[490px]">
+			<Card.Header>
+				<Card.Title>Konfigurera kortkommandon</Card.Title>
+				<Card.Description></Card.Description>
+			</Card.Header>
+			<Card.Content class="mx-auto"></Card.Content>
+			<Card.Footer class="flex justify-between">
+				<Button on:click={cancelSave} variant="outline">Avbryt</Button>
+				<Button on:click={handleSave}>Spara</Button>
+			</Card.Footer>
+		</Card.Root>
+	</div>
+{/if}

src/components/menu.svelte

@@ -3,6 +3,7 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
 	import { Button } from '$lib/components/ui/button';
 	import Gear from 'svelte-radix/Gear.svelte';
+	import Dashboard from './dashboard.svelte';
 
 	let closeFocus = 'textarea#doc.textarea';
 </script>
@@ -66,6 +67,14 @@
 				Textinställningar
 				<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
 			</DropdownMenu.Item>
+			<DropdownMenu.Item
+				on:click={() => {
+					appState.open = 'hotkeys';
+				}}
+			>
+				Kortkommandon
+				<DropdownMenu.Shortcut>Ctrl+K</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
 			<DropdownMenu.Item>
 				Tangentbord
 				<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>

src/routes/+page.svelte

@@ -4,11 +4,12 @@
 	import Create from '../components/create.svelte';
 	import ListSelector from '../components/listselector.svelte';
 	import Dashboard from '../components/dashboard.svelte';
+	import Hotkeys from '../components/hotkeys.svelte';
 	import { db, deleteShortformList, type Shortform } from '../db/main';
 	import Menu from '../components/menu.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { appState, shortforms } from '$lib/stores.svelte';
-	import { initHotkeys, registerAllHotkeys, registerHotkey, unregisterHotkey } from '$lib/hotkeys';
+	import { initHotkeys, registerAllHotkeys, registerHotkeys } from '$lib/hotkeys';
 	let loaded = false;
 	$effect(() => {
 		console.log(appState.open);
@@ -44,13 +45,18 @@
 		appState.open = 'dashboard';
 
 		initHotkeys({ scope: 'main', filterInputs: false });
-		registerHotkey(
-			'ctrl+0',
-			(e) => {
+		registerHotkeys(
+			{
+				'ctrl+0': (e) => {
 					console.log('ctrl+0');
 					e.preventDefault();
 					appState.open = 'selectLists';
 				},
+				'ctrl+k': (e) => {
+					e.preventDefault();
+					appState.open = 'hotkeys';
+				}
+			},
 			{ scope: 'main', preventDefault: true }
 		);
 	});
@@ -88,6 +94,13 @@
 			<ListSelector />
 		</div>
 	{/if}
+	{#if appState.open == 'hotkeys'}
+		<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"
+		>
+			<Hotkeys />
+		</div>
+	{/if}
 	<Menu />
 	<div class="h-full">
 		<Textarea bind:ref={textarea} />