src/components/hotkeys.svelte

@@ -1,43 +0,0 @@
-<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,7 +3,6 @@
 	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>
@@ -67,14 +66,6 @@
 				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

@@ -1,112 +0,0 @@
-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 setHotkeyScope(scope) {
+export function setHotkeeyScope(scope) {
 	hotkeys.setScope(scope);
 }

src/modules/keyboard.ts

@@ -1,5 +1,12 @@
+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 },
@@ -77,3 +84,95 @@ 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, registerHotkeys } from '$lib/hotkeys';
+	import { initHotkeys, registerAllHotkeys, registerHotkey, unregisterHotkey } 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,25 @@
 		debugState = JSON.stringify(appState, null, 4);
 		debugShortforms = JSON.stringify(shortforms, null, 4);
 	});
-	var showDashboard = $state(false);
+	import { hotkeys } from '../modules/keyboard';
+	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 = 'hotkeys';
+		appState.open = 'dashboard';
 
 		initHotkeys({ scope: 'main', filterInputs: false });
-		registerHotkeys(
+		registerHotkey(
-			{
+			'ctrl+0',
-				'ctrl+0': (e) => {
+			(e) => {
-					console.log('ctrl+0');
+				console.log('ctrl+0');
-					e.preventDefault();
+				e.preventDefault();
-					appState.open = 'selectLists';
+				appState.open = 'selectLists';
-				},
-				'ctrl+k': (e) => {
-					e.preventDefault();
-					appState.open = 'hotkeys';
-				}
 			},
 			{ scope: 'main', preventDefault: true }
 		);
@@ -65,7 +64,7 @@
 <svelte:head>
 	<title>SKRIVERT</title>
 </svelte:head>
-<svelte:window />
+<svelte:window on:keydown={handleHotkeys} />
 
 <div class="h-dvh w-full overflow-hidden" role="application">
 	{#if appState.debug}
@@ -89,13 +88,6 @@
 			<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} />