refactor: run formatter

frontend/components.json

@@ -11,4 +11,4 @@
 		"utils": "$lib/utils/style"
 	},
 	"typescript": true
-}
+}

frontend/eslint.config.js

@@ -32,7 +32,7 @@ export default [
 	},
 	{
 		rules: {
-			"@typescript-eslint/no-explicit-any": "off"
+			'@typescript-eslint/no-explicit-any': 'off'
 		}
 	}
 ];

frontend/package.json

@@ -1,58 +1,58 @@
 {
-  "name": "pocket-id-frontend",
+	"name": "pocket-id-frontend",
-  "version": "0.24.1",
+	"version": "0.24.1",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "dev": "vite dev --port 3000",
+		"dev": "vite dev --port 3000",
-    "build": "vite build",
+		"build": "vite build",
-    "preview": "vite preview --port 3000",
+		"preview": "vite preview --port 3000",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
+		"lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
+		"format": "prettier --write ."
-  },
+	},
-  "devDependencies": {
+	"devDependencies": {
-    "@playwright/test": "^1.48.1",
+		"@playwright/test": "^1.48.1",
-    "@sveltejs/adapter-auto": "^3.3.0",
+		"@sveltejs/adapter-auto": "^3.3.0",
-    "@sveltejs/adapter-node": "^5.2.8",
+		"@sveltejs/adapter-node": "^5.2.8",
-    "@sveltejs/kit": "^2.7.2",
+		"@sveltejs/kit": "^2.7.2",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@types/eslint": "^9.6.1",
+		"@types/eslint": "^9.6.1",
-    "@types/jsonwebtoken": "^9.0.7",
+		"@types/jsonwebtoken": "^9.0.7",
-    "@types/node": "^22.7.9",
+		"@types/node": "^22.7.9",
-    "autoprefixer": "^10.4.20",
+		"autoprefixer": "^10.4.20",
-    "cbor-js": "^0.1.0",
+		"cbor-js": "^0.1.0",
-    "eslint": "^9.13.0",
+		"eslint": "^9.13.0",
-    "eslint-config-prettier": "^9.1.0",
+		"eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.46.0",
+		"eslint-plugin-svelte": "^2.46.0",
-    "globals": "^15.11.0",
+		"globals": "^15.11.0",
-    "postcss": "^8.4.47",
+		"postcss": "^8.4.47",
-    "prettier": "^3.3.3",
+		"prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
+		"prettier-plugin-svelte": "^3.2.7",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+		"prettier-plugin-tailwindcss": "^0.6.8",
-    "svelte": "^5.0.5",
+		"svelte": "^5.0.5",
-    "svelte-check": "^4.0.5",
+		"svelte-check": "^4.0.5",
-    "tailwindcss": "^3.4.14",
+		"tailwindcss": "^3.4.14",
-    "tslib": "^2.8.0",
+		"tslib": "^2.8.0",
-    "typescript": "^5.6.3",
+		"typescript": "^5.6.3",
-    "typescript-eslint": "^8.11.0",
+		"typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+		"vite": "^5.4.10"
-  },
+	},
-  "type": "module",
+	"type": "module",
-  "dependencies": {
+	"dependencies": {
-    "@simplewebauthn/browser": "^10.0.0",
+		"@simplewebauthn/browser": "^10.0.0",
-    "axios": "^1.7.7",
+		"axios": "^1.7.7",
-    "bits-ui": "^0.21.16",
+		"bits-ui": "^0.21.16",
-    "clsx": "^2.1.1",
+		"clsx": "^2.1.1",
-    "crypto": "^1.0.1",
+		"crypto": "^1.0.1",
-    "formsnap": "^1.0.1",
+		"formsnap": "^1.0.1",
-    "jsonwebtoken": "^9.0.2",
+		"jsonwebtoken": "^9.0.2",
-    "lucide-svelte": "^0.453.0",
+		"lucide-svelte": "^0.453.0",
-    "mode-watcher": "^0.4.1",
+		"mode-watcher": "^0.4.1",
-    "svelte-sonner": "^0.3.28",
+		"svelte-sonner": "^0.3.28",
-    "sveltekit-superforms": "^2.20.0",
+		"sveltekit-superforms": "^2.20.0",
-    "tailwind-merge": "^2.5.4",
+		"tailwind-merge": "^2.5.4",
-    "tailwind-variants": "^0.2.1",
+		"tailwind-variants": "^0.2.1",
-    "zod": "^3.23.8"
+		"zod": "^3.23.8"
-  }
+	}
 }

frontend/src/app.css

@@ -97,4 +97,4 @@
 		font-weight: 700;
 		src: url('/fonts/PlayfairDisplay-Bold.woff') format('woff');
 	}
-}
+}

frontend/src/lib/components/advanced-table.svelte

@@ -115,8 +115,8 @@
 
 {#if items.data.length === 0 && searchValue === ''}
 	<div class="my-5 flex flex-col items-center">
-		<Empty class="text-muted-foreground h-20" />
+		<Empty class="h-20 text-muted-foreground" />
-		<p class="text-muted-foreground mt-3 text-sm">No items found</p>
+		<p class="mt-3 text-sm text-muted-foreground">No items found</p>
 	</div>
 {:else}
 	<Table.Root class="min-w-full table-auto overflow-x-auto">

frontend/src/lib/components/auto-complete-input.svelte

@@ -103,7 +103,7 @@
 					onkeydown={(e) => {
 						if (e.key === 'Enter') handleSuggestionClick(suggestion);
 					}}
-					class="hover:bg-accent hover:text-accent-foreground relative flex w-full 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 {selectedIndex ===
+					class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {selectedIndex ===
 					index
 						? 'bg-accent text-accent-foreground'
 						: ''}"

frontend/src/lib/components/checkbox-with-label.svelte

@@ -31,7 +31,7 @@
 			{label}
 		</Label>
 		{#if description}
-			<p class="text-muted-foreground text-[0.8rem]">
+			<p class="text-[0.8rem] text-muted-foreground">
 				{description}
 			</p>
 		{/if}

frontend/src/lib/components/error.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <div class="mt-[20%] flex flex-col items-center">
-	<LucideXCircle class="text-muted-foreground h-12 w-12" />
+	<LucideXCircle class="h-12 w-12 text-muted-foreground" />
 	<h1 class="mt-3 text-2xl font-semibold">Something went wrong</h1>
 	<p class="text-muted-foreground">{message}</p>
 	{#if showButton}

frontend/src/lib/components/form-input.svelte

@@ -34,13 +34,20 @@
 		<Label class="mb-0" for={id}>{label}</Label>
 	{/if}
 	{#if description}
-		<p class="text-muted-foreground mt-1 text-xs">{description}</p>
+		<p class="mt-1 text-xs text-muted-foreground">{description}</p>
 	{/if}
 	<div class={label || description ? 'mt-2' : ''}>
 		{#if children}
 			{@render children()}
 		{:else if input}
-			<Input {id} {placeholder} {type} bind:value={input.value} {disabled} on:input={(e) => onInput?.(e)} />
+			<Input
+				{id}
+				{placeholder}
+				{type}
+				bind:value={input.value}
+				{disabled}
+				on:input={(e) => onInput?.(e)}
+			/>
 		{/if}
 		{#if input?.error}
 			<p class="mt-1 text-sm text-red-500">{input.error}</p>

frontend/src/lib/components/header/header-avatar.svelte

@@ -39,7 +39,7 @@
 					{$userStore?.firstName}
 					{$userStore?.lastName}
 				</p>
-				<p class="text-muted-foreground text-xs leading-none">{$userStore?.email}</p>
+				<p class="text-xs leading-none text-muted-foreground">{$userStore?.email}</p>
 			</div>
 		</DropdownMenu.Label>
 		<DropdownMenu.Separator />

frontend/src/lib/components/login-wrapper.svelte

@@ -28,7 +28,13 @@
 				</div>
 				{#if showEmailOneTimeAccessButton}
 					<div class="mb-4 flex justify-center">
-						<Button href="/login/email?redirect={encodeURIComponent($page.url.pathname + $page.url.search)}" variant="link" class="text-muted-foreground text-xs">
+						<Button
+							href="/login/email?redirect={encodeURIComponent(
+								$page.url.pathname + $page.url.search
+							)}"
+							variant="link"
+							class="text-xs text-muted-foreground"
+						>
 							Don't have access to your passkey?
 						</Button>
 					</div>
@@ -57,7 +63,13 @@
 				{@render children()}
 				{#if showEmailOneTimeAccessButton}
 					<div class="mt-5">
-						<Button href="/login/email?redirect={encodeURIComponent($page.url.pathname + $page.url.search)}" variant="link" class="text-muted-foreground text-xs">
+						<Button
+							href="/login/email?redirect={encodeURIComponent(
+								$page.url.pathname + $page.url.search
+							)}"
+							variant="link"
+							class="text-xs text-muted-foreground"
+						>
 							Don't have access to your passkey?
 						</Button>
 					</div>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AlertDialogPrimitive.ActionProps;
 	type $$Events = AlertDialogPrimitive.ActionEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 

frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AlertDialogPrimitive.CancelProps;
 	type $$Events = AlertDialogPrimitive.CancelEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AlertDialogPrimitive.Cancel
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
 	{...$$restProps}
 	on:click
 	on:keydown

frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import * as AlertDialog from "./index.js";
+	import * as AlertDialog from './index.js';
-	import { cn, flyAndScale } from "$lib/utils/style.js";
+	import { cn, flyAndScale } from '$lib/utils/style.js';
 
 	type $$Props = AlertDialogPrimitive.ContentProps;
 
-	export let transition: $$Props["transition"] = flyAndScale;
+	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -18,7 +18,7 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}

frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AlertDialogPrimitive.DescriptionProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AlertDialogPrimitive.Description
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { fade } from "svelte/transition";
+	import { fade } from 'svelte/transition';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AlertDialogPrimitive.OverlayProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = fade;
+	export let transition: $$Props['transition'] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transitionConfig: $$Props['transitionConfig'] = {
-		duration: 150,
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -16,6 +16,6 @@
 <AlertDialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ", className)}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
 	{...$$restProps}
 />

frontend/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
 	type $$Props = AlertDialogPrimitive.PortalProps;
 </script>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AlertDialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let level: $$Props["level"] = "h3";
+	export let level: $$Props['level'] = 'h3';
 	export { className as class };
 </script>
 
-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
 	<slot />
 </AlertDialogPrimitive.Title>

frontend/src/lib/components/ui/alert-dialog/index.ts

@@ -1,14 +1,14 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
-import Title from "./alert-dialog-title.svelte";
+import Title from './alert-dialog-title.svelte';
-import Action from "./alert-dialog-action.svelte";
+import Action from './alert-dialog-action.svelte';
-import Cancel from "./alert-dialog-cancel.svelte";
+import Cancel from './alert-dialog-cancel.svelte';
-import Portal from "./alert-dialog-portal.svelte";
+import Portal from './alert-dialog-portal.svelte';
-import Footer from "./alert-dialog-footer.svelte";
+import Footer from './alert-dialog-footer.svelte';
-import Header from "./alert-dialog-header.svelte";
+import Header from './alert-dialog-header.svelte';
-import Overlay from "./alert-dialog-overlay.svelte";
+import Overlay from './alert-dialog-overlay.svelte';
-import Content from "./alert-dialog-content.svelte";
+import Content from './alert-dialog-content.svelte';
-import Description from "./alert-dialog-description.svelte";
+import Description from './alert-dialog-description.svelte';
 
 const Root = AlertDialogPrimitive.Root;
 const Trigger = AlertDialogPrimitive.Trigger;
@@ -36,5 +36,5 @@ export {
 	Trigger as AlertDialogTrigger,
 	Overlay as AlertDialogOverlay,
 	Content as AlertDialogContent,
-	Description as AlertDialogDescription,
+	Description as AlertDialogDescription
 };

frontend/src/lib/components/ui/alert/alert-description.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/alert/alert-title.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from "./index.js";
+	import type { HeadingLevel } from './index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		level?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let level: $$Props["level"] = "h5";
+	export let level: $$Props['level'] = 'h5';
 	export { className as class };
 </script>
 
 <svelte:element
 	this={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	class={cn('mb-1 font-medium leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/alert/alert.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { type Variant, alertVariants } from "./index.js";
+	import { type Variant, alertVariants } from './index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 		variant?: Variant;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let variant: $$Props["variant"] = "default";
+	export let variant: $$Props['variant'] = 'default';
 	export { className as class };
 </script>
 

frontend/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AvatarPrimitive.FallbackProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Fallback
-	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
+	class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/avatar/avatar-image.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AvatarPrimitive.ImageProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let src: $$Props["src"] = undefined;
+	export let src: $$Props['src'] = undefined;
-	export let alt: $$Props["alt"] = undefined;
+	export let alt: $$Props['alt'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Image
 	{src}
 	{alt}
-	class={cn("aspect-square h-full w-full", className)}
+	class={cn('aspect-square h-full w-full', className)}
 	{...$$restProps}
 />

frontend/src/lib/components/ui/avatar/avatar.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = AvatarPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let delayMs: $$Props["delayMs"] = undefined;
+	export let delayMs: $$Props['delayMs'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Root
 	{delayMs}
-	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/avatar/index.ts

@@ -1,6 +1,6 @@
-import Root from "./avatar.svelte";
+import Root from './avatar.svelte';
-import Image from "./avatar-image.svelte";
+import Image from './avatar-image.svelte';
-import Fallback from "./avatar-fallback.svelte";
+import Fallback from './avatar-fallback.svelte';
 
 export {
 	Root,
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback,
+	Fallback as AvatarFallback
 };

frontend/src/lib/components/ui/badge/badge.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
+	import { type Variant, badgeVariants } from './index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	let className: string | undefined | null = undefined;
 	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
+	export let variant: Variant = 'default';
 	export { className as class };
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
 	{...$$restProps}

frontend/src/lib/components/ui/badge/index.ts

@@ -1,21 +1,20 @@
-import { type VariantProps, tv } from "tailwind-variants";
+import { type VariantProps, tv } from 'tailwind-variants';
-export { default as Badge } from "./badge.svelte";
+export { default as Badge } from './badge.svelte';
 
 export const badgeVariants = tv({
-	base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 break-keep whitespace-nowrap",
+	base: 'inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 break-keep whitespace-nowrap',
 	variants: {
 		variant: {
-			default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+			default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-			secondary:
+			secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
 			destructive:
-				"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+				'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-			outline: "text-foreground",
+			outline: 'text-foreground'
-		},
+		}
 	},
 	defaultVariants: {
-		variant: "default",
+		variant: 'default'
-	},
+	}
 });
 
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export type Variant = VariantProps<typeof badgeVariants>['variant'];

frontend/src/lib/components/ui/button/index.ts

@@ -1,34 +1,33 @@
-import { type VariantProps, tv } from "tailwind-variants";
+import { type VariantProps, tv } from 'tailwind-variants';
-import type { Button as ButtonPrimitive } from "bits-ui";
+import type { Button as ButtonPrimitive } from 'bits-ui';
-import Root from "./button.svelte";
+import Root from './button.svelte';
 
 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-			outline:
+			outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: 'hover:bg-accent hover:text-accent-foreground',
-			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: 'text-primary underline-offset-4 hover:underline'
-			link: "text-primary underline-offset-4 hover:underline",
 		},
 		size: {
-			default: "h-10 px-4 py-2",
+			default: 'h-10 px-4 py-2',
-			sm: "h-9 rounded-md px-3",
+			sm: 'h-9 rounded-md px-3',
-			lg: "h-11 rounded-md px-8",
+			lg: 'h-11 rounded-md px-8',
-			icon: "h-10 w-10",
+			icon: 'h-10 w-10'
-		},
+		}
 	},
 	defaultVariants: {
-		variant: "default",
+		variant: 'default',
-		size: "default",
+		size: 'default'
-	},
+	}
 });
 
-type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
-type Size = VariantProps<typeof buttonVariants>["size"];
+type Size = VariantProps<typeof buttonVariants>['size'];
 
 type Props = ButtonPrimitive.Props & {
 	variant?: Variant;
@@ -46,5 +45,5 @@ export {
 	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
-	buttonVariants,
+	buttonVariants
 };

frontend/src/lib/components/ui/card/card-content.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/card/card-description.svelte

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

frontend/src/lib/components/ui/card/card-footer.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/card/card-header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/card/card-title.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from "./index.js";
+	import type { HeadingLevel } from './index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let tag: $$Props["tag"] = "h3";
+	export let tag: $$Props['tag'] = 'h3';
 	export { className as class };
 </script>
 
 <svelte:element
 	this={tag}
-	class={cn("text-xl font-semibold leading-none tracking-tight", className)}
+	class={cn('text-xl font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/card/card.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
-	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+	class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/card/index.ts

@@ -1,9 +1,9 @@
-import Root from "./card.svelte";
+import Root from './card.svelte';
-import Content from "./card-content.svelte";
+import Content from './card-content.svelte';
-import Description from "./card-description.svelte";
+import Description from './card-description.svelte';
-import Footer from "./card-footer.svelte";
+import Footer from './card-footer.svelte';
-import Header from "./card-header.svelte";
+import Header from './card-header.svelte';
-import Title from "./card-title.svelte";
+import Title from './card-title.svelte';
 
 export {
 	Root,
@@ -18,7 +18,7 @@ export {
 	Description as CardDescription,
 	Footer as CardFooter,
 	Header as CardHeader,
-	Title as CardTitle,
+	Title as CardTitle
 };
 
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

frontend/src/lib/components/ui/checkbox/checkbox.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import Check from "lucide-svelte/icons/check";
+	import Check from 'lucide-svelte/icons/check';
-	import Minus from "lucide-svelte/icons/minus";
+	import Minus from 'lucide-svelte/icons/minus';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = CheckboxPrimitive.Props;
 	type $$Events = CheckboxPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let checked: $$Props["checked"] = false;
+	export let checked: $$Props['checked'] = false;
 	export { className as class };
 </script>
 
 <CheckboxPrimitive.Root
 	class={cn(
-		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
 		className
 	)}
 	bind:checked
@@ -22,7 +22,7 @@
 	on:click
 >
 	<CheckboxPrimitive.Indicator
-		class={cn("flex h-4 w-4 items-center justify-center text-current")}
+		class={cn('flex h-4 w-4 items-center justify-center text-current')}
 		let:isChecked
 		let:isIndeterminate
 	>

frontend/src/lib/components/ui/checkbox/index.ts

@@ -1,6 +1,6 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 export {
 	Root,
 	//
-	Root as Checkbox,
+	Root as Checkbox
 };

frontend/src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import X from "lucide-svelte/icons/x";
+	import X from 'lucide-svelte/icons/x';
-	import * as Dialog from "./index.js";
+	import * as Dialog from './index.js';
-	import { cn, flyAndScale } from "$lib/utils/style.js";
+	import { cn, flyAndScale } from '$lib/utils/style.js';
 
 	type $$Props = DialogPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
+	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transitionConfig: $$Props['transitionConfig'] = {
-		duration: 200,
+		duration: 200
 	};
 	export { className as class };
 </script>
@@ -20,14 +20,14 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}
 	>
 		<slot />
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 		>
 			<X class="h-4 w-4" />
 			<span class="sr-only">Close</span>

frontend/src/lib/components/ui/dialog/dialog-description.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = DialogPrimitive.DescriptionProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DialogPrimitive.Description
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/dialog/dialog-footer.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/dialog/dialog-header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { fade } from "svelte/transition";
+	import { fade } from 'svelte/transition';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = DialogPrimitive.OverlayProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = fade;
+	export let transition: $$Props['transition'] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transitionConfig: $$Props['transitionConfig'] = {
-		duration: 150,
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -16,6 +16,6 @@
 <DialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm", className)}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
 	{...$$restProps}
 />

frontend/src/lib/components/ui/dialog/dialog-portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
 	type $$Props = DialogPrimitive.PortalProps;
 </script>
 

frontend/src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = DialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DialogPrimitive.Title
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/dialog/index.ts

@@ -1,12 +1,12 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+import { Dialog as DialogPrimitive } from 'bits-ui';
 
-import Title from "./dialog-title.svelte";
+import Title from './dialog-title.svelte';
-import Portal from "./dialog-portal.svelte";
+import Portal from './dialog-portal.svelte';
-import Footer from "./dialog-footer.svelte";
+import Footer from './dialog-footer.svelte';
-import Header from "./dialog-header.svelte";
+import Header from './dialog-header.svelte';
-import Overlay from "./dialog-overlay.svelte";
+import Overlay from './dialog-overlay.svelte';
-import Content from "./dialog-content.svelte";
+import Content from './dialog-content.svelte';
-import Description from "./dialog-description.svelte";
+import Description from './dialog-description.svelte';
 
 const Root = DialogPrimitive.Root;
 const Trigger = DialogPrimitive.Trigger;
@@ -33,5 +33,5 @@ export {
 	Overlay as DialogOverlay,
 	Content as DialogContent,
 	Description as DialogDescription,
-	Close as DialogClose,
+	Close as DialogClose
 };

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import Check from "lucide-svelte/icons/check";
+	import Check from 'lucide-svelte/icons/check';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let checked: $$Props["checked"] = undefined;
+	export let checked: $$Props['checked'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}

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

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

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

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
 	};
 	type $$Events = DropdownMenuPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
-		inset && "pl-8",
+		inset && 'pl-8',
 		className
 	)}
 	{...$$restProps}

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

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

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

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

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

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import Circle from "lucide-svelte/icons/circle";
+	import Circle from 'lucide-svelte/icons/circle';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let value: $$Props["value"];
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.RadioItem
 	class={cn(
-		"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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{value}

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

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

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

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

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

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

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

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
 	};
 	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.SubTrigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none 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 data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
-		inset && "pl-8",
+		inset && 'pl-8',
 		className
 	)}
 	{...$$restProps}

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

@@ -1,14 +1,14 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-import Item from "./dropdown-menu-item.svelte";
+import Item from './dropdown-menu-item.svelte';
-import Label from "./dropdown-menu-label.svelte";
+import Label from './dropdown-menu-label.svelte';
-import Content from "./dropdown-menu-content.svelte";
+import Content from './dropdown-menu-content.svelte';
-import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Shortcut from './dropdown-menu-shortcut.svelte';
-import RadioItem from "./dropdown-menu-radio-item.svelte";
+import RadioItem from './dropdown-menu-radio-item.svelte';
-import Separator from "./dropdown-menu-separator.svelte";
+import Separator from './dropdown-menu-separator.svelte';
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioGroup from './dropdown-menu-radio-group.svelte';
-import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubContent from './dropdown-menu-sub-content.svelte';
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
 
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
@@ -44,5 +44,5 @@ export {
 	RadioGroup as DropdownMenuRadioGroup,
 	SubContent as DropdownMenuSubContent,
 	SubTrigger as DropdownMenuSubTrigger,
-	CheckboxItem as DropdownMenuCheckboxItem,
+	CheckboxItem as DropdownMenuCheckboxItem
 };

frontend/src/lib/components/ui/form/form-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Button from "$lib/components/ui/button/index.js";
+	import * as Button from '$lib/components/ui/button/index.js';
 
 	type $$Props = Button.Props;
 	type $$Events = Button.Events;

frontend/src/lib/components/ui/form/form-description.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 	let className: string | undefined | null = undefined;
@@ -9,7 +9,7 @@
 </script>
 
 <FormPrimitive.Description
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 	let:descriptionAttrs
 >

frontend/src/lib/components/ui/form/form-element-field.svelte

@@ -1,25 +1,25 @@
 <script lang="ts" context="module">
-	import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
+	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = FormPathLeaves<T>;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLElement>;
 
 	export let form: SuperForm<T>;
 	export let name: U;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.ElementField {form} {name} let:constraints let:errors let:tainted let:value>
-	<div class={cn("space-y-2", className)}>
+	<div class={cn('space-y-2', className)}>
 		<slot {constraints} {errors} {tainted} {value} />
 	</div>
 </FormPrimitive.ElementField>

frontend/src/lib/components/ui/form/form-field-errors.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = FormPrimitive.FieldErrorsProps & {
 		errorClasses?: string | undefined | null;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-	export let errorClasses: $$Props["class"] = undefined;
+	export let errorClasses: $$Props['class'] = undefined;
 </script>
 
 <FormPrimitive.FieldErrors
-	class={cn("text-destructive text-sm font-medium", className)}
+	class={cn('text-sm font-medium text-destructive', className)}
 	{...$$restProps}
 	let:errors
 	let:fieldErrorsAttrs

frontend/src/lib/components/ui/form/form-field.svelte

@@ -1,25 +1,25 @@
 <script lang="ts" context="module">
-	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	import type { FormPath, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = FormPath<T>;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
 
 	export let form: SuperForm<T>;
 	export let name: U;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Field {form} {name} let:constraints let:errors let:tainted let:value>
-	<div class={cn("space-y-2", className)}>
+	<div class={cn('space-y-2', className)}>
 		<slot {constraints} {errors} {tainted} {value} />
 	</div>
 </FormPrimitive.Field>

frontend/src/lib/components/ui/form/form-fieldset.svelte

@@ -1,19 +1,19 @@
 <script lang="ts" context="module">
-	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	import type { FormPath, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = FormPath<T>;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = FormPrimitive.FieldsetProps<T, U>;
 
 	export let form: SuperForm<T>;
 	export let name: U;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -24,7 +24,7 @@
 	let:errors
 	let:tainted
 	let:value
-	class={cn("space-y-2", className)}
+	class={cn('space-y-2', className)}
 >
 	<slot {constraints} {errors} {tainted} {value} />
 </FormPrimitive.Fieldset>

frontend/src/lib/components/ui/form/form-label.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { Label as LabelPrimitive } from "bits-ui";
+	import type { Label as LabelPrimitive } from 'bits-ui';
-	import { getFormControl } from "formsnap";
+	import { getFormControl } from 'formsnap';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
-	import { Label } from "$lib/components/ui/label/index.js";
+	import { Label } from '$lib/components/ui/label/index.js';
 
 	type $$Props = LabelPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 
 	const { labelAttrs } = getFormControl();
 </script>
 
-<Label {...$labelAttrs} class={cn("data-[fs-error]:text-destructive", className)} {...$$restProps}>
+<Label {...$labelAttrs} class={cn('data-[fs-error]:text-destructive', className)} {...$$restProps}>
 	<slot {labelAttrs} />
 </Label>

frontend/src/lib/components/ui/form/form-legend.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = FormPrimitive.LegendProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Legend
 	{...$$restProps}
-	class={cn("data-[fs-error]:text-destructive text-sm font-medium leading-none", className)}
+	class={cn('text-sm font-medium leading-none data-[fs-error]:text-destructive', className)}
 	let:legendAttrs
 >
 	<slot {legendAttrs} />

frontend/src/lib/components/ui/form/index.ts

@@ -1,12 +1,12 @@
-import * as FormPrimitive from "formsnap";
+import * as FormPrimitive from 'formsnap';
-import Description from "./form-description.svelte";
+import Description from './form-description.svelte';
-import Label from "./form-label.svelte";
+import Label from './form-label.svelte';
-import FieldErrors from "./form-field-errors.svelte";
+import FieldErrors from './form-field-errors.svelte';
-import Field from "./form-field.svelte";
+import Field from './form-field.svelte';
-import Fieldset from "./form-fieldset.svelte";
+import Fieldset from './form-fieldset.svelte';
-import Legend from "./form-legend.svelte";
+import Legend from './form-legend.svelte';
-import ElementField from "./form-element-field.svelte";
+import ElementField from './form-element-field.svelte';
-import Button from "./form-button.svelte";
+import Button from './form-button.svelte';
 
 const Control = FormPrimitive.Control;
 
@@ -29,5 +29,5 @@ export {
 	Fieldset as FormFieldset,
 	Legend as FormLegend,
 	ElementField as FormElementField,
-	Button as FormButton,
+	Button as FormButton
 };

frontend/src/lib/components/ui/input/index.ts

@@ -1,4 +1,4 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 
 export type FormInputEvent<T extends Event = Event> = T & {
 	currentTarget: EventTarget & HTMLInputElement;
@@ -25,5 +25,5 @@ export type InputEvents = {
 export {
 	Root,
 	//
-	Root as Input,
+	Root as Input
 };

frontend/src/lib/components/ui/input/input.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { HTMLInputAttributes } from 'svelte/elements';
-	import type { InputEvents } from "./index.js";
+	import type { InputEvents } from './index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLInputAttributes;
 	type $$Events = InputEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
 	export { className as class };
 
 	// Workaround for https://github.com/sveltejs/svelte/issues/9305
 	// Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+	export let readonly: $$Props['readonly'] = undefined;
 </script>
 
 <input
 	class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:value

frontend/src/lib/components/ui/label/index.ts

@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from './label.svelte';
 
 export {
 	Root,
 	//
-	Root as Label,
+	Root as Label
 };

frontend/src/lib/components/ui/label/label.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
+	import { Label as LabelPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = LabelPrimitive.Props;
 	type $$Events = LabelPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <LabelPrimitive.Root
 	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-3 block",
+		'mb-3 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/pagination/index.ts

@@ -1,10 +1,10 @@
-import Root from "./pagination.svelte";
+import Root from './pagination.svelte';
-import Content from "./pagination-content.svelte";
+import Content from './pagination-content.svelte';
-import Item from "./pagination-item.svelte";
+import Item from './pagination-item.svelte';
-import Link from "./pagination-link.svelte";
+import Link from './pagination-link.svelte';
-import PrevButton from "./pagination-prev-button.svelte";
+import PrevButton from './pagination-prev-button.svelte';
-import NextButton from "./pagination-next-button.svelte";
+import NextButton from './pagination-next-button.svelte';
-import Ellipsis from "./pagination-ellipsis.svelte";
+import Ellipsis from './pagination-ellipsis.svelte';
 
 export {
 	Root,
@@ -21,5 +21,5 @@ export {
 	Link as PaginationLink,
 	PrevButton as PaginationPrevButton,
 	NextButton as PaginationNextButton,
-	Ellipsis as PaginationEllipsis,
+	Ellipsis as PaginationEllipsis
 };

frontend/src/lib/components/ui/pagination/pagination-content.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLUListElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<ul class={cn("flex flex-row items-center gap-1", className)} {...$$restProps}>
+<ul class={cn('flex flex-row items-center gap-1', className)} {...$$restProps}>
 	<slot />
 </ul>

frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import Ellipsis from 'lucide-svelte/icons/ellipsis';
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <span
 	aria-hidden="true"
-	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	class={cn('flex h-9 w-9 items-center justify-center', className)}
 	{...$$restProps}
 >
 	<Ellipsis class="h-4 w-4" />

frontend/src/lib/components/ui/pagination/pagination-item.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLLIElement>;
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 
 	export { className as class };
 </script>
 
-<li class={cn("", className)} {...$$restProps}>
+<li class={cn('', className)} {...$$restProps}>
 	<slot />
 </li>

frontend/src/lib/components/ui/pagination/pagination-link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
-	import { type Props, buttonVariants } from "$lib/components/ui/button/index.js";
+	import { type Props, buttonVariants } from '$lib/components/ui/button/index.js';
 
 	type $$Props = PaginationPrimitive.PageProps &
 		Props & {
@@ -10,10 +10,10 @@
 
 	type $$Events = PaginationPrimitive.PageEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let page: $$Props["page"];
+	export let page: $$Props['page'];
-	export let size: $$Props["size"] = "sm";
+	export let size: $$Props['size'] = 'sm';
-	export let isActive: $$Props["isActive"] = false;
+	export let isActive: $$Props['isActive'] = false;
 
 	export { className as class };
 </script>
@@ -22,8 +22,8 @@
 	bind:page
 	class={cn(
 		buttonVariants({
-			variant: isActive ? "outline" : "ghost",
+			variant: isActive ? 'outline' : 'ghost',
-			size,
+			size
 		}),
 		className
 	)}

frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
-	import { Button } from "$lib/components/ui/button/index.js";
+	import { Button } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = PaginationPrimitive.PrevButtonProps;
 	type $$Events = PaginationPrimitive.PrevButtonEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -15,7 +15,7 @@
 	<Button
 		variant="ghost"
 		size="sm"
-		class={cn("gap-1 pl-2.5", className)}
+		class={cn('gap-1 pl-2.5', className)}
 		builders={[builder]}
 		on:click
 		{...$$restProps}

frontend/src/lib/components/ui/pagination/pagination.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
 
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = PaginationPrimitive.Props;
 	type $$Events = PaginationPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let count: $$Props["count"] = 0;
+	export let count: $$Props['count'] = 0;
-	export let perPage: $$Props["perPage"] = 10;
+	export let perPage: $$Props['perPage'] = 10;
-	export let page: $$Props["page"] = 1;
+	export let page: $$Props['page'] = 1;
-	export let siblingCount: $$Props["siblingCount"] = 1;
+	export let siblingCount: $$Props['siblingCount'] = 1;
 	export { className as class };
 
 	$: currentPage = page;
@@ -27,7 +27,7 @@
 	asChild
 	{...$$restProps}
 >
-	<nav {...builder} class={cn("mx-auto flex w-full flex-col items-center", className)}>
+	<nav {...builder} class={cn('mx-auto flex w-full flex-col items-center', className)}>
 		<slot {pages} {range} {currentPage} />
 	</nav>
 </PaginationPrimitive.Root>

frontend/src/lib/components/ui/popover/index.ts

@@ -1,5 +1,5 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
+import { Popover as PopoverPrimitive } from 'bits-ui';
-import Content from "./popover-content.svelte";
+import Content from './popover-content.svelte';
 const Root = PopoverPrimitive.Root;
 const Trigger = PopoverPrimitive.Trigger;
 const Close = PopoverPrimitive.Close;
@@ -13,5 +13,5 @@ export {
 	Root as Popover,
 	Content as PopoverContent,
 	Trigger as PopoverTrigger,
-	Close as PopoverClose,
+	Close as PopoverClose
 };

frontend/src/lib/components/ui/popover/popover-content.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from "$lib/utils/style.js";
+	import { cn, flyAndScale } from '$lib/utils/style.js';
 
 	type $$Props = PopoverPrimitive.ContentProps;
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
+	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 	export { className as class };
 </script>
 
@@ -13,7 +13,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+		'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/select/index.ts

@@ -1,10 +1,10 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import { Select as SelectPrimitive } from 'bits-ui';
 
-import Label from "./select-label.svelte";
+import Label from './select-label.svelte';
-import Item from "./select-item.svelte";
+import Item from './select-item.svelte';
-import Content from "./select-content.svelte";
+import Content from './select-content.svelte';
-import Trigger from "./select-trigger.svelte";
+import Trigger from './select-trigger.svelte';
-import Separator from "./select-separator.svelte";
+import Separator from './select-separator.svelte';
 
 const Root = SelectPrimitive.Root;
 const Group = SelectPrimitive.Group;
@@ -30,5 +30,5 @@ export {
 	Value as SelectValue,
 	Content as SelectContent,
 	Trigger as SelectTrigger,
-	Separator as SelectSeparator,
+	Separator as SelectSeparator
 };

frontend/src/lib/components/ui/select/select-content.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
-	import { scale } from "svelte/transition";
+	import { scale } from 'svelte/transition';
-	import { cn, flyAndScale } from "$lib/utils/style.js";
+	import { cn, flyAndScale } from '$lib/utils/style.js';
 
 	type $$Props = SelectPrimitive.ContentProps;
 	type $$Events = SelectPrimitive.ContentEvents;
 
-	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let sideOffset: $$Props['sideOffset'] = 4;
-	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransition: $$Props['inTransition'] = flyAndScale;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
-	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransition: $$Props['outTransition'] = scale;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+	export let outTransitionConfig: $$Props['outTransitionConfig'] = {
 		start: 0.95,
 		opacity: 0,
-		duration: 50,
+		duration: 50
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -27,7 +27,7 @@
 	{outTransitionConfig}
 	{sideOffset}
 	class={cn(
-		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none",
+		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/select/select-item.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import Check from "lucide-svelte/icons/check";
+	import Check from 'lucide-svelte/icons/check';
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = SelectPrimitive.ItemProps;
 	type $$Events = SelectPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let value: $$Props["value"];
+	export let value: $$Props['value'];
-	export let label: $$Props["label"] = undefined;
+	export let label: $$Props['label'] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
+	export let disabled: $$Props['disabled'] = undefined;
 	export { className as class };
 </script>
 
@@ -18,7 +18,7 @@
 	{disabled}
 	{label}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full 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",
+		'relative flex w-full 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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/select/select-label.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = SelectPrimitive.LabelProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <SelectPrimitive.Label
-	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/select/select-separator.svelte

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

frontend/src/lib/components/ui/select/select-trigger.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = SelectPrimitive.TriggerProps;
 	type $$Events = SelectPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <SelectPrimitive.Trigger
 	class={cn(
-		"border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/separator/index.ts

@@ -1,7 +1,7 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
 	Root,
 	//
-	Root as Separator,
+	Root as Separator
 };

frontend/src/lib/components/ui/separator/separator.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = SeparatorPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let orientation: $$Props["orientation"] = "horizontal";
+	export let orientation: $$Props['orientation'] = 'horizontal';
-	export let decorative: $$Props["decorative"] = undefined;
+	export let decorative: $$Props['decorative'] = undefined;
 	export { className as class };
 </script>
 
 <SeparatorPrimitive.Root
 	class={cn(
-		"shrink-0 bg-border",
+		'shrink-0 bg-border',
-		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
 		className
 	)}
 	{orientation}

frontend/src/lib/components/ui/sonner/index.ts

@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';

frontend/src/lib/components/ui/sonner/sonner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
-	import { mode } from "mode-watcher";
+	import { mode } from 'mode-watcher';
 
 	type $$Props = SonnerProps;
 </script>
@@ -10,11 +10,12 @@
 	class="toaster group"
 	toastOptions={{
 		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			toast:
-			description: "group-[.toast]:text-muted-foreground",
+				'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			description: 'group-[.toast]:text-muted-foreground',
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+			actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-		},
+			cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+		}
 	}}
 	{...$$restProps}
 />

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

@@ -1,11 +1,11 @@
-import Root from "./table.svelte";
+import Root from './table.svelte';
-import Body from "./table-body.svelte";
+import Body from './table-body.svelte';
-import Caption from "./table-caption.svelte";
+import Caption from './table-caption.svelte';
-import Cell from "./table-cell.svelte";
+import Cell from './table-cell.svelte';
-import Footer from "./table-footer.svelte";
+import Footer from './table-footer.svelte';
-import Head from "./table-head.svelte";
+import Head from './table-head.svelte';
-import Header from "./table-header.svelte";
+import Header from './table-header.svelte';
-import Row from "./table-row.svelte";
+import Row from './table-row.svelte';
 
 export {
 	Root,
@@ -24,5 +24,5 @@ export {
 	Footer as TableFooter,
 	Head as TableHead,
 	Header as TableHeader,
-	Row as TableRow,
+	Row as TableRow
 };

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

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils/style.js";
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+	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>
+<thead class={cn('[&_tr]:border-b', className)} {...$$restProps} on:click on:keydown>
 	<slot />
 </thead>

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

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

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

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