det ser ut som en inställningsmeny för kortkommandon

src/components/hotkeys.svelte

@@ -1,8 +1,10 @@
 <script>
+	import { hotkeys } from '$lib/hotkey-actions';
 	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';
+	import Input from '$lib/components/ui/input/input.svelte';
 	var show = true;
 	const cancelSave = () => true;
 	const handleSave = () => true;
@@ -15,12 +17,23 @@
 
 {#if show}
 	<div use:clickOutside={close}>
-		<Card.Root class="mx-auto w-[490px]">
+		<Card.Root class="mx-auto w-[590px]">
 			<Card.Header>
 				<Card.Title>Konfigurera kortkommandon</Card.Title>
 				<Card.Description></Card.Description>
 			</Card.Header>
 			<Card.Content class="mx-auto"></Card.Content>
+			<div class="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} />
+					</div>
+					<div>
+						<Input class="w-[100px]" bind:value={hotkey[0]} />
+					</div>
+				{/each}
+			</div>
+			<br />
 			<Card.Footer class="flex justify-between">
 				<Button on:click={cancelSave} variant="outline">Avbryt</Button>
 				<Button on:click={handleSave}>Spara</Button>

src/lib/hotkey-actions.js

@@ -0,0 +1,112 @@
+import { goto } from '$app/navigation';
+import { PUBLIC_TAURI } from '$env/static/public';
+
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { incTextSize, decTextSize, selectNextColor, toggleMenuOpen, appState } from "$lib/stores.svelte"
+
+let fullscreen = true;
+
+export const hotkeys = new Map();
+
+hotkeys.set("Home", {
+	name: "Debug-ruta på/av",
+	action: (e) => {
+		e.preventDefault()
+		appState.debug = !appState.debug;
+	}
+})
+
+hotkeys.set("F4", {
+	name: "Rensa textfält",
+	action: (e) => {
+		e.preventDefault()
+		console.log("Clear text", appState.text)
+		appState.text = ""
+	}
+})
+
+hotkeys.set("F5", {
+	name: "Öppna meny",
+	action: (e) => {
+		e.preventDefault()
+		toggleMenuOpen()
+		console.log("Menu open", appState.menuOpen)
+	}
+})
+
+hotkeys.set("F6", {
+	name: "Minska textstorlek",
+	action: (e) => {
+		e.preventDefault()
+		console.log("Decrease text size")
+		decTextSize()
+	}
+})
+
+hotkeys.set("F7", {
+	name: "Öka textstorlek",
+	action: (e) => {
+		e.preventDefault()
+		console.log("Increase text size")
+		incTextSize()
+	}
+})
+
+hotkeys.set("F8", {
+	name: "Växla mellan färginställningar",
+	action: (e) => {
+		e.preventDefault()
+		console.log("Cycle through text and background colors")
+		selectNextColor()
+	}
+})
+
+hotkeys.set("F2", {
+	name: "Lägg till förkortning",
+	action: (e) => {
+		e.preventDefault()
+		toggleMenuOpen(false)
+		appState.open = "create"
+	}
+})
+
+hotkeys.set("F11", {
+	name: "Växla fullskärmsläge",
+	action: (e) => {
+		console.log("Toggle fullscreen")
+		console.log(PUBLIC_TAURI)
+		if (PUBLIC_TAURI == true) {
+			e.preventDefault()
+			if (fullscreen) {
+				getCurrentWindow().setFullscreen(false).then(() => {
+					fullscreen = false
+
+
+				});
+			} else {
+				getCurrentWindow().setFullscreen(true).then(() => {
+					fullscreen = true
+
+				});
+			}
+		}
+	}
+})
+
+hotkeys.set("F12", {
+	name: "Öppna import-rutan",
+	action: (e) => {
+		e.preventDefault()
+		console.log("Open import page")
+		goto("/import")
+	}
+})
+
+hotkeys.set("Escape", {
+	name: "Stäng aktiva dialogrutor och fokusera på texten",
+	action: (e) => {
+		e.preventDefault()
+		console.log("Close stuff")
+		appState.open = ""
+	}
+})

src/lib/hotkeys.js

@@ -51,6 +51,6 @@ export function resumeHotkeys() {
 	hotkeys.unpause();
 }
 
-export function setHotkeeyScope(scope) {
+export function setHotkeyScope(scope) {
 	hotkeys.setScope(scope);
 }

src/modules/keyboard.ts

@@ -1,12 +1,5 @@
-import { goto } from '$app/navigation';
-import { PUBLIC_TAURI } from '$env/static/public';
 import type { ExpanderType } from "./index.d.ts";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import { incTextSize, decTextSize, selectNextColor, toggleMenuOpen, appState } from "$lib/stores.svelte"
-
-let fullscreen = true;
 export const defaultExpanders: Map<string, ExpanderType> = new Map();
-export const hotkeys: Map<string, any> = new Map();
 
 defaultExpanders.set("\n", {
 	key: { keyCode: 188, shiftKey: false },
@@ -84,95 +77,3 @@ defaultExpanders.set(";", {
 	fullstop: false,
 });
 
-hotkeys.set("Home", {
-	action: (e) => {
-		e.preventDefault()
-		appState.debug = !appState.debug;
-	}
-})
-
-hotkeys.set("F4", {
-	action: (e) => {
-		e.preventDefault()
-		console.log("Clear text", appState.text)
-		appState.text = ""
-	}
-})
-
-hotkeys.set("F5", {
-	action: (e) => {
-		e.preventDefault()
-		toggleMenuOpen()
-		console.log("Menu open", appState.menuOpen)
-	}
-})
-
-hotkeys.set("F6", {
-	action: (e) => {
-		e.preventDefault()
-		console.log("Decrease text size")
-		decTextSize()
-	}
-})
-
-hotkeys.set("F7", {
-	action: (e) => {
-		e.preventDefault()
-		console.log("Increase text size")
-		incTextSize()
-	}
-})
-
-hotkeys.set("F8", {
-	action: (e) => {
-		e.preventDefault()
-		console.log("Increase text size")
-		selectNextColor()
-	}
-})
-
-hotkeys.set("F2", {
-	action: (e) => {
-		e.preventDefault()
-		toggleMenuOpen(false)
-		appState.open = "create"
-	}
-})
-
-hotkeys.set("F11", {
-	action: (e) => {
-		console.log("Toggle fullscreen")
-		console.log(PUBLIC_TAURI)
-		if (PUBLIC_TAURI == true) {
-			e.preventDefault()
-			if (fullscreen) {
-				getCurrentWindow().setFullscreen(false).then(() => {
-					fullscreen = false
-
-
-				});
-			} else {
-				getCurrentWindow().setFullscreen(true).then(() => {
-					fullscreen = true
-
-				});
-			}
-		}
-	}
-})
-
-hotkeys.set("F12", {
-	action: (e) => {
-		e.preventDefault()
-		console.log("Open import page")
-		goto("/import")
-	}
-})
-
-hotkeys.set("Escape", {
-	action: (e) => {
-		e.preventDefault()
-		console.log("Close stuff")
-		appState.open = ""
-	}
-})

src/routes/+page.svelte

@@ -12,19 +12,18 @@
 	import { initHotkeys, registerAllHotkeys, registerHotkeys } from '$lib/hotkeys';
 	let loaded = false;
 	$effect(() => {
-		console.log(appState.open);
 		appState.open;
 		if (loaded) {
 			if (appState.open == '' && textarea != undefined) {
 				textarea.focus();
 			}
 			if (appState.open == 'selectLists') {
-				console.log('should close dashboard');
+				// console.log('should close dashboard');
 				showDashboard = false;
 				return;
 			}
 			if (appState.open == 'dashboard') {
-				console.log('should open dashboard');
+				// console.log('should open dashboard');
 				showDashboard = true;
 			}
 		}
@@ -32,17 +31,13 @@
 		debugState = JSON.stringify(appState, null, 4);
 		debugShortforms = JSON.stringify(shortforms, null, 4);
 	});
-	import { hotkeys } from '../modules/keyboard';
+	var showDashboard = $state(false);
-	var showDashboard = $state(true);
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { onDestroy, onMount } from 'svelte';
 	import { preventDefault } from 'svelte/legacy';
-	const handleHotkeys = (e: KeyboardEvent) => {
-		hotkeys.get(e.key)?.action(e);
-	};
 	let textarea: HTMLTextAreaElement | undefined = $state();
 	onMount(() => {
-		appState.open = 'dashboard';
+		appState.open = 'hotkeys';
 
 		initHotkeys({ scope: 'main', filterInputs: false });
 		registerHotkeys(
@@ -70,7 +65,7 @@
 <svelte:head>
 	<title>SKRIVERT</title>
 </svelte:head>
-<svelte:window on:keydown={handleHotkeys} />
+<svelte:window />
 
 <div class="h-dvh w-full overflow-hidden" role="application">
 	{#if appState.debug}