skelett för högerklicks/f5-meny, a la protype

F5 för det är protype

src/app.css

@@ -25,7 +25,7 @@
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
  
-    --accent: 210 40% 96.1%;
+    --accent: 210 70% 70.1%; /* nån annan accent-färg kanske... */
     --accent-foreground: 222.2 47.4% 11.2%;
  
     --destructive: 0 72.2% 50.6%;
@@ -75,4 +75,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/components/menu.svelte

@@ -0,0 +1,79 @@
+<script>
+  import { appState } from "$lib/stores.svelte"
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index";
+  import { Button } from '$lib/components/ui/button';
+  import Gear from "svelte-radix/Gear.svelte";
+</script>
+
+<DropdownMenu.Root open={appState.menuOpen} onOpenChange={(v) => {appState.menuOpen = v}} closeFocus="textarea#doc.textarea">
+  <DropdownMenu.Trigger asChild let:builder>
+    <Button builders={[builder]} variant="ghost" class="absolute top-2 right-2" size="icon">
+      <Gear class="h-4 w-4" />
+    </Button>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content class="w-56">
+    <DropdownMenu.Label>Inställningar</DropdownMenu.Label>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Group>
+      <DropdownMenu.Item>
+        Lägg till förkortning
+        <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        Statistik
+        <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+      </DropdownMenu.Item>
+    </DropdownMenu.Group>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Group>
+      <DropdownMenu.Item>
+        Förkortningar
+        <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        Förinskriven text
+        <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        Textinställningar
+        <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        Tangentbord
+        <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+      </DropdownMenu.Item>
+    </DropdownMenu.Group>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Group>
+      <DropdownMenu.Sub>
+        <DropdownMenu.SubTrigger>Anslut</DropdownMenu.SubTrigger>
+        <DropdownMenu.SubContent>
+          <DropdownMenu.Item>
+            Distanstolkning
+            <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            Lokalt nätverk
+            <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+        </DropdownMenu.SubContent>
+      </DropdownMenu.Sub>
+    </DropdownMenu.Group>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item>
+      Hjälp
+      <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+    </DropdownMenu.Item>
+    <DropdownMenu.Item>Feedback
+      <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+    </DropdownMenu.Item>
+    <DropdownMenu.Item>Användarkonto
+      <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+    </DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item>
+      Logga ut
+      <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

src/components/textarea.svelte

@@ -106,7 +106,7 @@
 			color:{textSettings.colors.fg};
 			background-color:{textSettings.colors.bg};
 		"
-		class="textarea flex-grow" 
+		class="textarea h-full flex-grow" 
 		id="doc" 
 		on:keyup={change} 
 		on:beforeinput={input} 

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Check from "svelte-radix/Check.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
+	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</DropdownMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.CheckboxItem>

src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</DropdownMenuPrimitive.Content>

src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Item
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Item>

src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Label>

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</DropdownMenuPrimitive.RadioGroup>

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import DotFilled from "svelte-radix/DotFilled.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.RadioItemProps;
+	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: DropdownMenuPrimitive.RadioItemProps["value"];
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.RadioIndicator>
+			<DotFilled class="h-4 w-4 fill-current" />
+		</DropdownMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.RadioItem>

src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Separator
+	class={cn("bg-muted -mx-1 my-1 h-px", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
+	<slot />
+</span>

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SubContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0,
+	};
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.SubContent>

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRight from "svelte-radix/ChevronRight.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	class={cn(
+		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>

src/lib/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,48 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+const Trigger = DropdownMenuPrimitive.Trigger;
+const Group = DropdownMenuPrimitive.Group;
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as DropdownMenu,
+	Sub as DropdownMenuSub,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	Group as DropdownMenuGroup,
+	Content as DropdownMenuContent,
+	Trigger as DropdownMenuTrigger,
+	Shortcut as DropdownMenuShortcut,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	RadioGroup as DropdownMenuRadioGroup,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	CheckboxItem as DropdownMenuCheckboxItem,
+};

src/lib/stores.svelte.ts

@@ -35,13 +35,17 @@ let selectedColor = 0;
 export const shortforms = $state({ standardList: "", subjectLists: [], cache: new Map() })
 export const importState = $state({ data: "", errors: [] })
 export const textSettings = $state({ font: "Arial", size: 30, colors: colorSetting, padding: 0, lineheight: 1 })
-export const appState = $state({ text: "" })
+export const appState = $state({ text: "", menuOpen: false })
 
 export const selectNextColor = () => {
 	selectedColor += 1
 	textSettings.colors = colorThemes[(selectedColor % 6)]
 }
 
+export const toggleMenuOpen = () => {
+	appState.menuOpen = !appState.menuOpen
+}
+
 export const incTextSize = () => {
 	console.log(textSettings.size)
 	if (textSettings.size < 200) {

src/modules/keyboard.ts

@@ -1,7 +1,7 @@
 import { goto } from '$app/navigation';
 import type { ExpanderType } from "./index.d.ts";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { incTextSize, decTextSize, selectNextColor, appState } from "$lib/stores.svelte"
+import { incTextSize, decTextSize, selectNextColor, toggleMenuOpen, appState } from "$lib/stores.svelte"
 
 let fullscreen = true;
 export const defaultExpanders: Map<string, ExpanderType> = new Map();
@@ -93,6 +93,15 @@ hotkeys.set("F4", {
 		appState.text = ""
 	}
 })
+
+hotkeys.set("F5", {
+	action: (e) => {
+		e.preventDefault()
+		toggleMenuOpen()
+		console.log("Menu open", appState.menuOpen)
+	}
+})
+
 hotkeys.set("F6", {
 	action: (e) => {
 		e.preventDefault()

src/routes/+page.svelte

@@ -2,29 +2,16 @@
 	import Textarea from '../components/textarea.svelte';
 	import Dashboard from '../components/dashboard.svelte';
 	import { db, deleteShortformList, type Shortform } from '../db/main';
-	import { importShortforms } from '../db/import';
-
+	import Menu from "../components/menu.svelte";
 	import { Button } from '$lib/components/ui/button';
 
 	import { hotkeys } from '../modules/keyboard';
-	let cache: Array<Shortform>;
-	let showDashboard: boolean = true;
-	db.shortforms
-		.toArray()
-		.then((shortforms) => {
-			cache = shortforms;
-		})
-		.catch((err) => {
-			console.error(err);
-		});
-	importShortforms([]);
-	const deleteDefaultShortforms = () => {
-		deleteShortformList(890324);
-		cache = [];
-	};
+	let showDashboard: boolean = false;
+
 	const handleHotkeys = (e: KeyboardEvent) => {
 		hotkeys.get(e.key)?.action(e);
 	};
+
 </script>
 <svelte:head>
 <title>SKRIVERT</title>
@@ -33,8 +20,9 @@
 
 <div class="h-dvh w-full overflow-hidden" role="application">
 	<div class="h-full">
+		<Menu />
 		<Textarea />
-		<Dashboard open={showDashboard} />
 	<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
 	</div>
+	<!--<Dashboard open={showDashboard} />-->
 </div>