skapa statistikrutan

src/components/menu.svelte

@@ -59,8 +59,12 @@
 				Förkortningar
 				<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
 			</DropdownMenu.Item>
-			<DropdownMenu.Item>
+			<DropdownMenu.Item
-				Förinskriven text
+				on:click={() => {
+					appState.open = 'statistics';
+				}}
+			>
+				Statistik
 				<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
 			</DropdownMenu.Item>
 			<DropdownMenu.Item>

src/components/statistics.svelte

@@ -0,0 +1,16 @@
+<script>
+	import * as Card from '$lib/components/ui/card/index';
+</script>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Statistik</Card.Title>
+		<Card.Description>...</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<ul>
+			<li>Missade förkortningar: 1337</li>
+			<li>Annan information: 5/7</li>
+		</ul>
+	</Card.Content>
+</Card.Root>

src/lib/hotkey-actions.js

@@ -94,13 +94,24 @@ hotkeys.set("F11", {
 })
 
 hotkeys.set("F12", {
-	name: "Öppna import-rutan",
+	name: "Visa statistik",
 	action: (e) => {
 		e.preventDefault()
-		console.log("Open import page")
+		console.log("Open statistics modal")
+		appState.open = "statistics"
+	}
+})
+
+/*
+hotkeys.set("F12", {
+	name: "Visa dialogrutan för import",
+	action: (e) => {
+		e.preventDefault()
+		console.log("Open import")
 		goto("/import")
 	}
 })
+*/
 
 hotkeys.set("Escape", {
 	name: "Stäng aktiva dialogrutor och fokusera på texten",

src/routes/+page.svelte

@@ -5,6 +5,7 @@
 	import ListSelector from '../components/listselector.svelte';
 	import Dashboard from '../components/dashboard.svelte';
 	import Hotkeys from '../components/hotkeys.svelte';
+	import Statistics from '../components/statistics.svelte';
 	import { db, deleteShortformList, type Shortform } from '../db/main';
 	import Menu from '../components/menu.svelte';
 	import { Button } from '$lib/components/ui/button';
@@ -38,7 +39,7 @@
 	import { hotkeys } from '$lib/hotkey-actions';
 	let textarea: HTMLTextAreaElement | undefined = $state();
 	onMount(() => {
-		appState.open = 'hotkeys';
+		appState.open = 'statistics';
 
 		initHotkeys({ scope: 'main', filterInputs: false });
 		hotkeys.forEach((handler, key) => {
@@ -87,6 +88,13 @@
 			<Hotkeys />
 		</div>
 	{/if}
+	{#if appState.open == 'statistics'}
+		<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"
+		>
+			<Statistics />
+		</div>
+	{/if}
 	<Menu />
 	<div class="h-full">
 		<Textarea bind:ref={textarea} />