From a03a09ae501f2ac67846e44f481de096cb8a0218 Mon Sep 17 00:00:00 2001
From: Karl Ludwig Weise <ludwig@ludwigweise.de>
Date: Mon, 28 Jul 2025 21:23:20 +0200
Subject: [PATCH] Added basic languate switch

---
 package-lock.json                             | 138 +++++++++++++++++-
 package.json                                  |  13 +-
 project.inlang/messages/de.json               |   7 +-
 project.inlang/messages/en.json               |   7 +-
 src/lib/components/ui/button/button.svelte    |  80 ++++++++++
 src/lib/components/ui/button/index.ts         |  17 +++
 .../components/ui/combobox/combobox.svelte    |  75 ++++++++++
 src/lib/components/ui/combobox/index.ts       |   3 +
 .../ui/command/command-dialog.svelte          |  40 +++++
 .../ui/command/command-empty.svelte           |  17 +++
 .../ui/command/command-group.svelte           |  32 ++++
 .../ui/command/command-input.svelte           |  26 ++++
 .../components/ui/command/command-item.svelte |  20 +++
 .../ui/command/command-link-item.svelte       |  20 +++
 .../components/ui/command/command-list.svelte |  17 +++
 .../ui/command/command-separator.svelte       |  17 +++
 .../ui/command/command-shortcut.svelte        |  20 +++
 src/lib/components/ui/command/command.svelte  |  22 +++
 src/lib/components/ui/command/index.ts        |  40 +++++
 .../components/ui/dialog/dialog-close.svelte  |   7 +
 .../ui/dialog/dialog-content.svelte           |  43 ++++++
 .../ui/dialog/dialog-description.svelte       |  17 +++
 .../components/ui/dialog/dialog-footer.svelte |  20 +++
 .../components/ui/dialog/dialog-header.svelte |  20 +++
 .../ui/dialog/dialog-overlay.svelte           |  20 +++
 .../components/ui/dialog/dialog-title.svelte  |  17 +++
 .../ui/dialog/dialog-trigger.svelte           |   7 +
 src/lib/components/ui/dialog/index.ts         |  37 +++++
 src/lib/components/ui/popover/index.ts        |  17 +++
 .../ui/popover/popover-content.svelte         |  29 ++++
 .../ui/popover/popover-trigger.svelte         |  17 +++
 src/routes/+page.svelte                       |  17 +++
 32 files changed, 863 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/components/ui/button/button.svelte
 create mode 100644 src/lib/components/ui/button/index.ts
 create mode 100644 src/lib/components/ui/combobox/combobox.svelte
 create mode 100644 src/lib/components/ui/combobox/index.ts
 create mode 100644 src/lib/components/ui/command/command-dialog.svelte
 create mode 100644 src/lib/components/ui/command/command-empty.svelte
 create mode 100644 src/lib/components/ui/command/command-group.svelte
 create mode 100644 src/lib/components/ui/command/command-input.svelte
 create mode 100644 src/lib/components/ui/command/command-item.svelte
 create mode 100644 src/lib/components/ui/command/command-link-item.svelte
 create mode 100644 src/lib/components/ui/command/command-list.svelte
 create mode 100644 src/lib/components/ui/command/command-separator.svelte
 create mode 100644 src/lib/components/ui/command/command-shortcut.svelte
 create mode 100644 src/lib/components/ui/command/command.svelte
 create mode 100644 src/lib/components/ui/command/index.ts
 create mode 100644 src/lib/components/ui/dialog/dialog-close.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-trigger.svelte
 create mode 100644 src/lib/components/ui/dialog/index.ts
 create mode 100644 src/lib/components/ui/popover/index.ts
 create mode 100644 src/lib/components/ui/popover/popover-content.svelte
 create mode 100644 src/lib/components/ui/popover/popover-trigger.svelte

diff --git a/package-lock.json b/package-lock.json
index dace765..a519134 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,8 @@
 				"@eslint/compat": "^1.3.0",
 				"@eslint/js": "^9.29.0",
 				"@inlang/paraglide-js": "2.2.0",
-				"@lucide/svelte": "^0.518.0",
+				"@internationalized/date": "^3.8.2",
+				"@lucide/svelte": "^0.515.0",
 				"@playwright/test": "^1.53.1",
 				"@sveltejs/adapter-auto": "^6.0.1",
 				"@sveltejs/kit": "^2.22.0",
@@ -39,6 +40,7 @@
 				"@types/dotenv": "^6.1.1",
 				"@types/node": "^24",
 				"@types/nodemailer": "^6.4.17",
+				"bits-ui": "^2.8.13",
 				"clsx": "^2.1.1",
 				"drizzle-kit": "^0.31.1",
 				"eslint": "^9.29.0",
@@ -59,9 +61,6 @@
 				"typescript-eslint": "^8.34.1",
 				"vite": "^6.3.5",
 				"vitest": "^3.2.4"
-			},
-			"engines": {
-				"node": ">=24.0.0"
 			}
 		},
 		"node_modules/@adobe/css-tools": {
@@ -1296,6 +1295,34 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
+			"integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.10"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
+			"integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.7.2",
+				"@floating-ui/utils": "^0.2.10"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+			"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@humanfs/core": {
 			"version": "0.19.1",
 			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1408,6 +1435,16 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@internationalized/date": {
+			"version": "3.8.2",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz",
+			"integrity": "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"node_modules/@isaacs/fs-minipass": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -1496,9 +1533,9 @@
 			"license": "Apache-2.0"
 		},
 		"node_modules/@lucide/svelte": {
-			"version": "0.518.0",
-			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.518.0.tgz",
-			"integrity": "sha512-vhSikVKVZnz7eVa70WsWh/ySqdcb7Mn2R/XhG16fCfqgpMKzdu5GCHPRLaHcGaUCaM9cPDMWG8FeBXk0QY1PEg==",
+			"version": "0.515.0",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.515.0.tgz",
+			"integrity": "sha512-CEAyqcZmNBfYzVgaRmK2RFJP5tnbXxekRyDk0XX/eZQRfsJmkDvmQwXNX8C869BgNeryzmrRyjHhUL6g9ZOHNA==",
 			"dev": true,
 			"license": "ISC",
 			"peerDependencies": {
@@ -2100,6 +2137,16 @@
 				"vite": "^6.0.0"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.17",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+			"integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.8.0"
+			}
+		},
 		"node_modules/@tailwindcss/node": {
 			"version": "4.1.10",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.10.tgz",
@@ -3102,6 +3149,69 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/bits-ui": {
+			"version": "2.8.13",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.8.13.tgz",
+			"integrity": "sha512-YC3DiatZzREdbTZR8IuxbQeYg+/MNcyQeuS6Hycl+ufoG7eiV66qICx210plFER9B776FEYSHXSYuQdlvWODpw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.7.1",
+				"@floating-ui/dom": "^1.7.1",
+				"esm-env": "^1.1.2",
+				"runed": "^0.29.1",
+				"svelte-toolbelt": "^0.9.3",
+				"tabbable": "^6.2.0"
+			},
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/huntabyte"
+			},
+			"peerDependencies": {
+				"@internationalized/date": "^3.8.1",
+				"svelte": "^5.33.0"
+			}
+		},
+		"node_modules/bits-ui/node_modules/runed": {
+			"version": "0.29.2",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.29.2.tgz",
+			"integrity": "sha512-0cq6cA6sYGZwl/FvVqjx9YN+1xEBu9sDDyuWdDW1yWX7JF2wmvmVKfH+hVCZs+csW+P3ARH92MjI3H9QTagOQA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"esm-env": "^1.0.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.7.0"
+			}
+		},
+		"node_modules/bits-ui/node_modules/svelte-toolbelt": {
+			"version": "0.9.3",
+			"resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.9.3.tgz",
+			"integrity": "sha512-HCSWxCtVmv+c6g1ACb8LTwHVbDqLKJvHpo6J8TaqwUme2hj9ATJCpjCPNISR1OCq2Q4U1KT41if9ON0isINQZw==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte"
+			],
+			"dependencies": {
+				"clsx": "^2.1.1",
+				"runed": "^0.29.0",
+				"style-to-object": "^1.0.8"
+			},
+			"engines": {
+				"node": ">=18",
+				"pnpm": ">=8.7.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.30.2"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.12",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -6453,6 +6563,13 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/tailwind-merge": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -6683,6 +6800,13 @@
 				"typescript": ">=4.8.4"
 			}
 		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"dev": true,
+			"license": "0BSD"
+		},
 		"node_modules/tw-animate-css": {
 			"version": "1.3.4",
 			"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.4.tgz",
diff --git a/package.json b/package.json
index fc58abd..fc9511c 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,9 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.3.0",
 		"@eslint/js": "^9.29.0",
-		"@lucide/svelte": "^0.518.0",
+		"@inlang/paraglide-js": "2.2.0",
+		"@internationalized/date": "^3.8.2",
+		"@lucide/svelte": "^0.515.0",
 		"@playwright/test": "^1.53.1",
 		"@sveltejs/adapter-auto": "^6.0.1",
 		"@sveltejs/kit": "^2.22.0",
@@ -45,9 +47,10 @@
 		"@tailwindcss/vite": "^4.1.10",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.8",
-		"@types/nodemailer": "^6.4.17",
 		"@types/dotenv": "^6.1.1",
 		"@types/node": "^24",
+		"@types/nodemailer": "^6.4.17",
+		"bits-ui": "^2.8.13",
 		"clsx": "^2.1.1",
 		"drizzle-kit": "^0.31.1",
 		"eslint": "^9.29.0",
@@ -67,8 +70,7 @@
 		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.34.1",
 		"vite": "^6.3.5",
-		"vitest": "^3.2.4",
-		"@inlang/paraglide-js": "2.2.0"
+		"vitest": "^3.2.4"
 	},
 	"dependencies": {
 		"@noble/hashes": "^1.8.0",
@@ -85,8 +87,5 @@
 		"secrets.js-34r7h": "^2.0.2",
 		"winston": "^3.17.0"
 	},
-	"engines": {
-		"node": ">=24.0.0"
-	},
 	"license": "AGPL-3.0"
 }
diff --git a/project.inlang/messages/de.json b/project.inlang/messages/de.json
index 240ceac..a06633a 100644
--- a/project.inlang/messages/de.json
+++ b/project.inlang/messages/de.json
@@ -1,5 +1,10 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"welcome": "Willkommen bei OpenReception",
-	"poweredBy": "Betrieben von"
+	"poweredBy": "Betrieben von",
+	"i18n": {
+		"label": "Sprache wählen",
+		"search": "Sprache suchen",
+		"notFound": "Sprache nicht gefunden"
+	}
 }
diff --git a/project.inlang/messages/en.json b/project.inlang/messages/en.json
index 2e2657a..0f9e789 100644
--- a/project.inlang/messages/en.json
+++ b/project.inlang/messages/en.json
@@ -1,5 +1,10 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"welcome": "Welcome to OpenReception",
-	"poweredBy": "Powered by"
+	"poweredBy": "Powered by",
+	"i18n": {
+		"label": "Select Language",
+		"search": "Search Language",
+		"notFound": "Language not found"
+	}
 }
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..4daf453
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+				outline:
+					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..fb585d7
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
diff --git a/src/lib/components/ui/combobox/combobox.svelte b/src/lib/components/ui/combobox/combobox.svelte
new file mode 100644
index 0000000..7c1c6a6
--- /dev/null
+++ b/src/lib/components/ui/combobox/combobox.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+	import { tick } from "svelte";
+	import * as Command from "$lib/components/ui/command/index.js";
+	import * as Popover from "$lib/components/ui/popover/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	const {
+		labels,
+		value,
+		options = [],
+		onChange
+	}: {
+		labels: { placeholder: string; search: string; notFound: string };
+		value: string;
+		onChange: (value: string) => void;
+		options?: { label: string; value: string }[];
+	} = $props();
+
+	let open = $state(false);
+	let triggerRef = $state<HTMLButtonElement>(null!);
+
+	const selectedValue = $derived(options.find((f) => f.value === value)?.label);
+
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger() {
+		open = false;
+		tick().then(() => {
+			triggerRef.focus();
+		});
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger bind:ref={triggerRef}>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				variant="outline"
+				class="w-[200px] justify-between"
+				role="combobox"
+				aria-expanded={open}
+			>
+				{selectedValue || labels.placeholder}
+				<ChevronsUpDownIcon class="opacity-50" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content class="w-[200px] p-0">
+		<Command.Root>
+			<!-- <Command.Input placeholder={labels.search} /> -->
+			<Command.List>
+				<Command.Empty>{labels.notFound}</Command.Empty>
+				<Command.Group>
+					{#each options as option (option.value)}
+						<Command.Item
+							value={option.value}
+							onSelect={() => {
+								onChange(option.value);
+								closeAndFocusTrigger();
+							}}
+						>
+							<CheckIcon class={cn(value !== option.value && "text-transparent")} />
+							{option.label}
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>
diff --git a/src/lib/components/ui/combobox/index.ts b/src/lib/components/ui/combobox/index.ts
new file mode 100644
index 0000000..1baca5c
--- /dev/null
+++ b/src/lib/components/ui/combobox/index.ts
@@ -0,0 +1,3 @@
+import ComboBox from "./combobox.svelte";
+
+export { ComboBox };
diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
new file mode 100644
index 0000000..5c9a82a
--- /dev/null
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
+		<Command
+			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
+			bind:value
+			bind:ref
+			{children}
+		/>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/components/ui/command/command-empty.svelte b/src/lib/components/ui/command/command-empty.svelte
new file mode 100644
index 0000000..6726cd8
--- /dev/null
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn("py-6 text-center text-sm", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-group.svelte b/src/lib/components/ui/command/command-group.svelte
new file mode 100644
index 0000000..104f817
--- /dev/null
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn("text-foreground overflow-hidden p-1", className)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>
diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
new file mode 100644
index 0000000..240278a
--- /dev/null
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import SearchIcon from "@lucide/svelte/icons/search";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div class="flex h-9 items-center gap-2 border-b px-3" data-slot="command-input-wrapper">
+	<SearchIcon class="size-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		data-slot="command-input"
+		class={cn(
+			"placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		bind:ref
+		{...restProps}
+		bind:value
+	/>
+</div>
diff --git a/src/lib/components/ui/command/command-item.svelte b/src/lib/components/ui/command/command-item.svelte
new file mode 100644
index 0000000..d94d07f
--- /dev/null
+++ b/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-link-item.svelte b/src/lib/components/ui/command/command-link-item.svelte
new file mode 100644
index 0000000..944c22d
--- /dev/null
+++ b/src/lib/components/ui/command/command-link-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-list.svelte b/src/lib/components/ui/command/command-list.svelte
new file mode 100644
index 0000000..569f595
--- /dev/null
+++ b/src/lib/components/ui/command/command-list.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn("max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-separator.svelte b/src/lib/components/ui/command/command-separator.svelte
new file mode 100644
index 0000000..35c4c95
--- /dev/null
+++ b/src/lib/components/ui/command/command-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-shortcut.svelte b/src/lib/components/ui/command/command-shortcut.svelte
new file mode 100644
index 0000000..3d68bc5
--- /dev/null
+++ b/src/lib/components/ui/command/command-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/src/lib/components/ui/command/command.svelte b/src/lib/components/ui/command/command.svelte
new file mode 100644
index 0000000..c64a77e
--- /dev/null
+++ b/src/lib/components/ui/command/command.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn(
+		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/index.ts b/src/lib/components/ui/command/index.ts
new file mode 100644
index 0000000..d3dbade
--- /dev/null
+++ b/src/lib/components/ui/command/index.ts
@@ -0,0 +1,40 @@
+import { Command as CommandPrimitive } from "bits-ui";
+
+import Root from "./command.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+import LinkItem from "./command-link-item.svelte";
+
+const Loading = CommandPrimitive.Loading;
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	LinkItem,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	LinkItem as CommandLinkItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading,
+};
diff --git a/src/lib/components/ui/dialog/dialog-close.svelte b/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000..840b2f6
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..99cc73b
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..3845023
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..e7ff446
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..fc90cd9
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..f81ad83
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..067e55e
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-trigger.svelte b/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..9d1e801
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..dce1d9d
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..9f30922
--- /dev/null
+++ b/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+import Trigger from "./popover-trigger.svelte";
+const Root = PopoverPrimitive.Root;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..9bced7a
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>
diff --git a/src/lib/components/ui/popover/popover-trigger.svelte b/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..586323c
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn("", className)}
+	{...restProps}
+/>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8b0049d..341290b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,8 @@
 	import { Headline, Text } from "$lib/components/ui/typography";
 	import { toggleMode } from "mode-watcher";
 	import { m } from "$i18n/messages.js";
+	import { ComboBox } from "$lib/components/ui/combobox";
+	import { getLocale, setLocale } from "$i18n/runtime.js";
 
 	export let data;
 </script>
@@ -24,6 +26,21 @@
 				{/await}.
 			</Text>
 			<button onclick={toggleMode}>Toggle Mode</button>
+			<ComboBox
+				options={[
+					{ value: "de", label: "Deutsch" },
+					{ value: "en", label: "English" }
+				]}
+				value={getLocale()}
+				onChange={(value) => {
+					setLocale(value as "de" | "en");
+				}}
+				labels={{
+					placeholder: m["i18n.label"](),
+					search: m["i18n.search"](),
+					notFound: m["i18n.notFound"]()
+				}}
+			/>
 		</HorizontalPagePadding>
 	</main>
 </PageWithClaim>