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

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

src/components/hotkeys.svelte

@@ -0,0 +1,43 @@
+<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;
+	const close = () => {
+		if (show == true) {
+			appState.open = '';
+		}
+	};
+</script>
+
+{#if show}
+	<div use:clickOutside={close}>
+		<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>
+			</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/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

@@ -4,26 +4,26 @@
 	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);
 		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;
 			}
 		}
@@ -31,26 +31,27 @@
 		debugState = JSON.stringify(appState, null, 4);
 		debugShortforms = JSON.stringify(shortforms, null, 4);
 	});
-	import { hotkeys } from '../modules/keyboard';
-	var showDashboard = $state(true);
+	var showDashboard = $state(false);
 	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 });
-		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 }
 		);
 	});
@@ -64,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}
@@ -88,6 +89,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} />