skissar statistiktabell med valbara kriterier

package-lock.json

@@ -3387,6 +3387,19 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/anymatch/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/arg": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -5526,6 +5539,19 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/micromatch/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/mime-db": {
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -5893,13 +5919,12 @@
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"devOptional": true,
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
 			"license": "MIT",
 			"engines": {
-				"node": ">=8.6"
+				"node": ">=12"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/jonschlinkert"
@@ -7284,6 +7309,19 @@
 				"url": "https://github.com/sponsors/antonk52"
 			}
 		},
+		"node_modules/tailwindcss/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/tailwindcss/node_modules/postcss-load-config": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
@@ -7403,18 +7441,6 @@
 				"url": "https://github.com/sponsors/SuperchupuDev"
 			}
 		},
-		"node_modules/tinyglobby/node_modules/picomatch": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/jonschlinkert"
-			}
-		},
 		"node_modules/tinypool": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
@@ -7804,18 +7830,6 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
-		"node_modules/vite/node_modules/picomatch": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/jonschlinkert"
-			}
-		},
 		"node_modules/vitefu": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",

src/components/menu.svelte

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

src/components/statistics.svelte

@@ -0,0 +1,78 @@
+<script>
+	import * as Card from '$lib/components/ui/card/index';
+	import * as Table from '$lib/components/ui/table/index';
+
+	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	var mode = 'usage';
+</script>
+
+<Card.Root class="h-96 w-[680px]">
+	<Card.Header>
+		<Card.Title>Statistik</Card.Title>
+		<Card.Description>...</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid grid-cols-3 gap-3">
+			<div class="col-span-1">
+				<RadioGroup.Root bind:value={mode}>
+					<Table.Root>
+						<Table.Header>
+							<Table.Row>
+								<Table.Head>Kriterie</Table.Head>
+							</Table.Row>
+						</Table.Header>
+						<Table.Body>
+							<Table.Row>
+								<Table.Cell class="flex items-center space-x-2">
+									<RadioGroup.Item value="usage" id="r1" /><Label
+										on:click={() => {
+											mode = 'usage';
+										}}
+										for="r1">Användning/missar</Label
+									></Table.Cell
+								>
+							</Table.Row>
+							<Table.Row>
+								<Table.Cell class="flex items-center space-x-2"
+									><RadioGroup.Item value="frequency" id="r2" /><Label
+										for="r2"
+										on:click={() => {
+											mode = 'frequency';
+										}}>Ordfrekvens</Label
+									></Table.Cell
+								>
+							</Table.Row>
+							<Table.Row>
+								<Table.Cell class="flex items-center space-x-2"
+									><RadioGroup.Item value="collocations" id="r3" /><Label
+										for="r3"
+										on:click={() => {
+											mode = 'collocations';
+										}}>Kollokationer</Label
+									></Table.Cell
+								>
+							</Table.Row>
+						</Table.Body>
+					</Table.Root>
+				</RadioGroup.Root>
+			</div>
+			<div class="col-span-2">
+				<Table.Root>
+					<Table.Header>
+						<Table.Row>
+							<Table.Head>Förkortning</Table.Head>
+							<Table.Head class="text-right">Missar</Table.Head>
+						</Table.Row>
+					</Table.Header>
+					<Table.Body>
+						<Table.Row>
+							<Table.Cell>ahet</Table.Cell>
+							<Table.Cell class="text-right">1337</Table.Cell>
+						</Table.Row>
+					</Table.Body>
+				</Table.Root>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>

src/lib/components/ui/radio-group/index.ts

@@ -0,0 +1,15 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+const Input = RadioGroupPrimitive.Input;
+
+export {
+	Root,
+	Input,
+	Item,
+	//
+	Root as RadioGroup,
+	Input as RadioGroupInput,
+	Item as RadioGroupItem,
+};

src/lib/components/ui/radio-group/radio-group-item.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import Check from "svelte-radix/Check.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RadioGroupPrimitive.ItemProps & {
+		value: string;
+	};
+	type $$Events = RadioGroupPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Item
+	{value}
+	class={cn(
+		"border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+>
+	<div class="flex items-center justify-center">
+		<RadioGroupPrimitive.ItemIndicator>
+			<Check class="fill-primary h-3.5 w-3.5" />
+		</RadioGroupPrimitive.ItemIndicator>
+	</div>
+</RadioGroupPrimitive.Item>

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RadioGroupPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...$$restProps}>
+	<slot />
+</RadioGroupPrimitive.Root>

src/lib/components/ui/table/index.ts

@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};

src/lib/components/ui/table/table-body.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
+	<slot />
+</tbody>

src/lib/components/ui/table/table-caption.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<caption class={cn("text-muted-foreground mt-4 text-sm", className)} {...$$restProps}>
+	<slot />
+</caption>

src/lib/components/ui/table/table-cell.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLTdAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLTdAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<td
+	class={cn(
+		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</td>

src/lib/components/ui/table/table-footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<tfoot class={cn("bg-muted/50 text-primary-foreground font-medium", className)} {...$$restProps}>
+	<slot />
+</tfoot>

src/lib/components/ui/table/table-head.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLThAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLThAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<th
+	class={cn(
+		"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</th>

src/lib/components/ui/table/table-header.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
+	<slot />
+</thead>

src/lib/components/ui/table/table-row.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
+		"data-state"?: unknown;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<tr
+	class={cn(
+		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</tr>

src/lib/components/ui/table/table.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLTableAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class="relative w-full overflow-auto">
+	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
+		<slot />
+	</table>
+</div>

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} />