From 6c71123fd7ea503e89e49649425d85bea8a857e3 Mon Sep 17 00:00:00 2001
From: Botvid Johansson <asdf@qwertyist.se>
Date: Thu, 24 Apr 2025 14:26:59 +0200
Subject: [PATCH] =?UTF-8?q?n=C3=A5n=20slags=20ruta=20f=C3=B6r=20att=20konf?=
 =?UTF-8?q?igurera=20kortkommandon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ska flytta in relevant från "src/modules/keyboards.ts"
---
 src/components/hotkeys.svelte | 30 ++++++++++++++++++++++++++++++
 src/components/menu.svelte    |  9 +++++++++
 src/routes/+page.svelte       | 27 ++++++++++++++++++++-------
 3 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 src/components/hotkeys.svelte

diff --git a/src/components/hotkeys.svelte b/src/components/hotkeys.svelte
new file mode 100644
index 0000000..ba9d59d
--- /dev/null
+++ b/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}
diff --git a/src/components/menu.svelte b/src/components/menu.svelte
index e99da8e..f371a2a 100644
--- a/src/components/menu.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0079da8..4fa4a3d 100644
--- a/src/routes/+page.svelte
+++ b/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,12 +45,17 @@
 		appState.open = 'dashboard';
 
 		initHotkeys({ scope: 'main', filterInputs: false });
-		registerHotkey(
-			'ctrl+0',
-			(e) => {
-				console.log('ctrl+0');
-				e.preventDefault();
-				appState.open = 'selectLists';
+		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} />