flytta kortkommandon till hotkeys-js

src/components/hotkeys.svelte

@@ -6,8 +6,8 @@
 	import { clickOutside } from 'svelte-outside';
 	import Input from '$lib/components/ui/input/input.svelte';
 	var show = true;
-	const cancelSave = () => true;
-	const handleSave = () => true;
+	const cancelSave = () => (appState.open = '');
+	const handleSave = () => (appState.open = '');
 	const close = () => {
 		if (show == true) {
 			appState.open = '';
@@ -20,16 +20,18 @@
 		<Card.Root class="mx-auto w-[590px]">
 			<Card.Header>
 				<Card.Title>Konfigurera kortkommandon</Card.Title>
-				<Card.Description></Card.Description>
+				<Card.Description
+					>Work in progress: Än så länge är det här bara en referens över befintliga kommandon.
+				</Card.Description>
 			</Card.Header>
 			<Card.Content class="mx-auto"></Card.Content>
-			<div class="grid grid-cols-5 gap-2">
+			<div class="mx-2 grid grid-cols-5 gap-2">
 				{#each hotkeys as hotkey}
 					<div class="col-span-4">
-						<Input class="w-[290px]" readonly bind:value={hotkey[1].name} />
+						<Input readonly bind:value={hotkey[1].name} />
 					</div>
 					<div>
-						<Input class="w-[100px]" bind:value={hotkey[0]} />
+						<Input class="mx-" readonly bind:value={hotkey[0]} />
 					</div>
 				{/each}
 			</div>

src/lib/hotkey-actions.js

@@ -110,3 +110,19 @@ hotkeys.set("Escape", {
 		appState.open = ""
 	}
 })
+
+hotkeys.set("CTRL+0", {
+	name: "Visa 'Välj förkortningslistor'",
+	action: (e) => {
+		e.preventDefault();
+		appState.open = "selectLists";
+	}
+})
+
+hotkeys.set("CTRL+K", {
+	name: "Visa 'Konfigurera kortkommandon'",
+	action: (e) => {
+		e.preventDefault();
+		appState.open = "hotkeys";
+	}
+});

src/routes/+page.svelte

@@ -9,7 +9,7 @@
 	import Menu from '../components/menu.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { appState, shortforms } from '$lib/stores.svelte';
-	import { initHotkeys, registerAllHotkeys, registerHotkeys } from '$lib/hotkeys';
+	import { initHotkeys, registerAllHotkeys, registerHotkey } from '$lib/hotkeys';
 	let loaded = false;
 	$effect(() => {
 		appState.open;
@@ -35,25 +35,16 @@
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { onDestroy, onMount } from 'svelte';
 	import { preventDefault } from 'svelte/legacy';
+	import { hotkeys } from '$lib/hotkey-actions';
 	let textarea: HTMLTextAreaElement | undefined = $state();
 	onMount(() => {
 		appState.open = 'hotkeys';
 
 		initHotkeys({ scope: 'main', filterInputs: false });
-		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 }
-		);
+		hotkeys.forEach((handler, key) => {
+			console.log(key, handler.action);
+			registerHotkey(key, handler.action, { scope: 'main', preventDefault: true });
+		});
 	});
 	onDestroy(() => {
 		registerAllHotkeys();