From e96783230eb883176eb9f4a6bf64349374f3a2ed Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Mon, 19 Feb 2024 19:07:32 +0100
Subject: [PATCH 01/18] refactor: separate components for auth

---
 src/routes/(auth)/auth/(components)/index.ts  |   3 +
 .../auth/(components)/login-form.svelte       |  63 +++++
 .../auth/(components)/register-form.svelte    |  67 +++++
 .../(auth)/auth/(components)/sso-form.svelte  | 115 +++++++++
 src/routes/(auth)/auth/+page.svelte           | 241 +-----------------
 5 files changed, 255 insertions(+), 234 deletions(-)
 create mode 100644 src/routes/(auth)/auth/(components)/index.ts
 create mode 100644 src/routes/(auth)/auth/(components)/login-form.svelte
 create mode 100644 src/routes/(auth)/auth/(components)/register-form.svelte
 create mode 100644 src/routes/(auth)/auth/(components)/sso-form.svelte

diff --git a/src/routes/(auth)/auth/(components)/index.ts b/src/routes/(auth)/auth/(components)/index.ts
new file mode 100644
index 0000000..14e9bda
--- /dev/null
+++ b/src/routes/(auth)/auth/(components)/index.ts
@@ -0,0 +1,3 @@
+export { default as LoginForm } from './login-form.svelte';
+export { default as RegisterForm } from './register-form.svelte';
+export { default as SSOForm } from './sso-form.svelte';
diff --git a/src/routes/(auth)/auth/(components)/login-form.svelte b/src/routes/(auth)/auth/(components)/login-form.svelte
new file mode 100644
index 0000000..132e806
--- /dev/null
+++ b/src/routes/(auth)/auth/(components)/login-form.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { Icons } from '$lib/components/site/icons';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Alert from '$lib/components/ui/alert';
+	import { cn } from '$lib/utils';
+	import type { ActionData } from '../$types';
+
+	export let form: ActionData;
+	export let isLoading = false;
+</script>
+
+<div class="flex flex-col space-y-2 text-center">
+	<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
+	<p class="pb-6 text-sm text-muted-foreground">
+		Enter your credentials below to log into your account
+	</p>
+</div>
+<div class={cn('grid gap-6')} {...$$restProps}>
+	<form
+		method="POST"
+		action="?/login"
+		use:enhance={() => {
+			isLoading = true;
+			return async ({ update }) => {
+				isLoading = false;
+				update();
+			};
+		}}
+	>
+		<div class="grid gap-2">
+			<div class="grid gap-2">
+				<Label for="email-username">Email or username</Label>
+				<Input
+					id="email-login"
+					name="email-username"
+					type="text"
+					autocapitalize="none"
+					autocomplete="email"
+					autocorrect="off"
+					disabled={isLoading}
+				/>
+			</div>
+			<div class="grid gap-2">
+				<Label for="password">Password</Label>
+				<Input id="password-login" name="password" type="password" disabled={isLoading} />
+			</div>
+			<Button type="submit" disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{/if}
+				Sign In
+			</Button>
+		</div>
+		{#if form?.notVerified}
+			<Alert.Root class="mt-4">
+				<Alert.Description>You must verify your email before you can log in.</Alert.Description>
+			</Alert.Root>
+		{/if}
+	</form>
+</div>
diff --git a/src/routes/(auth)/auth/(components)/register-form.svelte b/src/routes/(auth)/auth/(components)/register-form.svelte
new file mode 100644
index 0000000..b71ba1d
--- /dev/null
+++ b/src/routes/(auth)/auth/(components)/register-form.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { Icons } from '$lib/components/site/icons';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { cn } from '$lib/utils';
+	export let isLoading = false;
+</script>
+
+<div class="flex flex-col space-y-2 text-center">
+  <h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
+  <p class="pb-6 text-sm text-muted-foreground">
+    Enter your details below to create a new account
+  </p>
+</div>
+<div class={cn('grid gap-6')} {...$$restProps}>
+  <form
+    method="POST"
+    action="?/register"
+    use:enhance={() => {
+      isLoading = true;
+      return async ({ update }) => {
+        isLoading = false;
+        update();
+      };
+    }}
+  >
+    <div class="grid gap-2">
+      <div class="grid gap-2">
+        <Label for="email">Name</Label>
+        <Input id="name" name="name" type="name" disabled={isLoading} />
+      </div>
+      <div class="grid gap-2">
+        <Label for="email">Email</Label>
+        <Input
+          id="email-register"
+          name="email"
+          type="email"
+          autocapitalize="none"
+          autocomplete="email"
+          autocorrect="off"
+          disabled={isLoading}
+        />
+      </div>
+      <div class="grid gap-2">
+        <Label for="password">Password</Label>
+        <Input id="password-register" name="password" type="password" disabled={isLoading} />
+      </div>
+      <div class="grid gap-2">
+        <Label for="password">Confirm password</Label>
+        <Input
+          id="confirm-password-register"
+          name="passwordConfirm"
+          type="password"
+          disabled={isLoading}
+        />
+      </div>
+      <Button type="submit" disabled={isLoading}>
+        {#if isLoading}
+          <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+        {/if}
+        Register
+      </Button>
+    </div>
+  </form>
+</div>
diff --git a/src/routes/(auth)/auth/(components)/sso-form.svelte b/src/routes/(auth)/auth/(components)/sso-form.svelte
new file mode 100644
index 0000000..05f5ea7
--- /dev/null
+++ b/src/routes/(auth)/auth/(components)/sso-form.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Icons } from "$lib/components/site";
+  import PocketBase from 'pocketbase';
+	import { PUBLIC_CLIENT_PB } from '$env/static/public';
+	import { enhance } from "$app/forms";
+	import { Button } from "$lib/components/ui/button";
+	import { Separator } from "$lib/components/ui/separator";
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { ChevronDown } from "radix-icons-svelte";
+
+	export let isLoading = false;
+  export let providers: { name: string, icon?: any, displayName: string }[];
+	let currentProvider = providers[0];
+
+	const pb = new PocketBase(PUBLIC_CLIENT_PB);
+  let oauth2Form: HTMLFormElement;
+	async function loginWithOauth2(provider: string) {
+		try {
+			await pb.collection('users').authWithOAuth2({ provider });
+			const input = document.createElement('input');
+			input.type = 'hidden';
+			input.name = 'token';
+			input.value = pb.authStore.token;
+			oauth2Form.appendChild(input);
+			oauth2Form.submit();
+		} catch (err) {
+			console.error(err);
+		}
+	}
+</script>
+
+<form
+	method="POST"
+	action="?/oauth2"
+	bind:this={oauth2Form}
+	use:enhance={() => {
+		isLoading = true;
+		return async ({ update }) => {
+			isLoading = false;
+			update();
+		};
+	}}
+>
+	<div class="relative">
+		<div class="absolute inset-0 flex items-center">
+			<span class="w-full border-t" />
+		</div>
+		<div class="relative flex justify-center text-xs uppercase">
+			<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
+		</div>
+	</div>
+	<div
+		class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+	>
+		<input type="hidden" name="provider" bind:value={currentProvider.name} />
+		<div class="flex w-full items-center justify-center space-x-2">
+			<Button
+				on:click={() => loginWithOauth2(currentProvider.name)}
+				name={currentProvider.name}
+				variant="ghost"
+				class="w-full"
+				disabled={isLoading}
+			>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{:else if currentProvider.icon === undefined}
+					<img
+						src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${currentProvider.name}.svg`}
+						alt={currentProvider.name}
+						class="mr-2 h-4 w-4"
+					/>
+				{:else}
+					<svelte:component this={currentProvider.icon} class="mr-2 h-4 w-4" />
+				{/if}
+				{currentProvider.displayName}
+			</Button>
+		</div>
+		{#if providers.length > 1}
+			<div class="flex items-center space-x-2">
+				<Separator orientation="vertical" class="h-[20px] bg-secondary" />
+				<div class="flex items-center space-x-2">
+					<DropdownMenu.Root>
+						<DropdownMenu.Trigger asChild let:builder>
+							<Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
+								<ChevronDown class="h-4 w-4" />
+							</Button>
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content class="" align="center">
+							<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
+							{#each providers as provider}
+								{#if provider.name !== currentProvider.name}
+									<DropdownMenu.Item
+										class="flex justify-center"
+										on:click={() => (currentProvider = provider)}
+									>
+										{#if provider.icon === undefined}
+											<img
+												src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
+												alt={provider.name}
+												class="mr-2 h-4 w-4"
+											/>
+										{:else}
+											<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
+										{/if}
+										{provider.displayName}
+									</DropdownMenu.Item>
+								{/if}
+							{/each}
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				</div>
+			</div>
+		{/if}
+	</div>
+</form>
diff --git a/src/routes/(auth)/auth/+page.svelte b/src/routes/(auth)/auth/+page.svelte
index 55c6c01..dd92484 100644
--- a/src/routes/(auth)/auth/+page.svelte
+++ b/src/routes/(auth)/auth/+page.svelte
@@ -1,48 +1,19 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
+	import { Icons } from '$lib/components/site/index.js';
 	import * as Tabs from '$lib/components/ui/tabs';
-	import * as Alert from '$lib/components/ui/alert';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { cn } from '$lib/utils';
-	import { ChevronDown } from 'radix-icons-svelte';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
-	import type { PageData } from './$types';
-	import PocketBase from 'pocketbase';
-	import { PUBLIC_CLIENT_PB } from '$env/static/public';
-
-	let isLoading = false;
+	import type { PageData } from './$types.js';
+	import { LoginForm, RegisterForm, SSOForm } from './(components)';
 	export let form;
-	export let data: PageData;
+  export let data: PageData;
 	const { providers } = data;
 	const providersWithIcons = providers.map((provider) => ({
 		...provider,
 		/* eslint-disable  @typescript-eslint/no-explicit-any */
 		icon: (Icons as { [key: string]: any })[provider.name] || undefined
 	}));
-	let currentProvider = providersWithIcons[0];
 
-	const pb = new PocketBase(PUBLIC_CLIENT_PB);
-	let oauth2Form: HTMLFormElement;
-	async function loginWithOauth2(provider: string) {
-		try {
-			await pb.collection('users').authWithOAuth2({ provider });
-			const input = document.createElement('input');
-			input.type = 'hidden';
-			input.name = 'token';
-			input.value = pb.authStore.token;
-			oauth2Form.appendChild(input);
-			oauth2Form.submit();
-		} catch (err) {
-			console.error(err);
-		}
-	}
 	let tab: string = 'login';
-
 	if (browser) {
 		const urlSearchParams = new URLSearchParams(window.location.search);
 		tab = urlSearchParams.get('tab') || 'login';
@@ -59,214 +30,16 @@
 			<Tabs.Trigger value="register">Register</Tabs.Trigger>
 		</Tabs.List>
 		<Tabs.Content value="login">
-			<div class="flex flex-col space-y-2 text-center">
-				<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
-				<p class="pb-6 text-sm text-muted-foreground">
-					Enter your credentials below to log into your account
-				</p>
-			</div>
-			<div class={cn('grid gap-6')} {...$$restProps}>
-				<form
-					method="POST"
-					action="?/login"
-					use:enhance={() => {
-						isLoading = true;
-						return async ({ update }) => {
-							isLoading = false;
-							update();
-						};
-					}}
-				>
-					<div class="grid gap-2">
-						<div class="grid gap-2">
-							<Label for="email">Email or username</Label>
-							<Input
-								id="email-login"
-								name="email"
-								type="email"
-								autocapitalize="none"
-								autocomplete="email"
-								autocorrect="off"
-								disabled={isLoading}
-							/>
-						</div>
-						<div class="grid gap-2">
-							<Label for="password">Password</Label>
-							<Input id="password-login" name="password" type="password" disabled={isLoading} />
-						</div>
-						<Button type="submit" disabled={isLoading}>
-							{#if isLoading}
-								<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-							{/if}
-							Sign In
-						</Button>
-					</div>
-					{#if form?.notVerified}
-						<Alert.Root class="mt-4">
-							<Alert.Title></Alert.Title>
-							<Alert.Description>You must verify your email before you can login.</Alert.Description
-							>
-						</Alert.Root>
-					{/if}
-				</form>
-			</div>
+			<LoginForm {form} />
 		</Tabs.Content>
 		<Tabs.Content value="register">
-			<div class="flex flex-col space-y-2 text-center">
-				<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
-				<p class="pb-6 text-sm text-muted-foreground">
-					Enter your details below to create a new account
-				</p>
-			</div>
-			<div class={cn('grid gap-6')} {...$$restProps}>
-				<form
-					method="POST"
-					action="?/register"
-					use:enhance={() => {
-						isLoading = true;
-						return async ({ update }) => {
-							isLoading = false;
-							update();
-						};
-					}}
-				>
-					<div class="grid gap-2">
-						<div class="grid gap-2">
-							<Label for="email">Name</Label>
-							<Input id="name" name="name" type="name" disabled={isLoading} />
-						</div>
-						<div class="grid gap-2">
-							<Label for="email">Email</Label>
-							<Input
-								id="email-register"
-								name="email"
-								type="email"
-								autocapitalize="none"
-								autocomplete="email"
-								autocorrect="off"
-								disabled={isLoading}
-							/>
-						</div>
-						<div class="grid gap-2">
-							<Label for="password">Password</Label>
-							<Input id="password-register" name="password" type="password" disabled={isLoading} />
-						</div>
-						<div class="grid gap-2">
-							<Label for="password">Confirm password</Label>
-							<Input
-								id="confirm-password-register"
-								name="passwordConfirm"
-								type="password"
-								disabled={isLoading}
-							/>
-						</div>
-						<Button type="submit" disabled={isLoading}>
-							{#if isLoading}
-								<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-							{/if}
-							Register
-						</Button>
-					</div>
-					{#if form?.notVerified}
-						<Alert.Root class="mt-4">
-							<Alert.Title></Alert.Title>
-							<Alert.Description>You must verify your email before you can login.</Alert.Description
-							>
-						</Alert.Root>
-					{/if}
-				</form>
-			</div>
+			<RegisterForm />
 		</Tabs.Content>
 		<p class="px-8 text-center text-xs text-muted-foreground">
-			Don't have an account? <a class="text-primary underline" href="/auth?tab=register">Register</a
-			>.<br />
 			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
 		</p>
 		{#if providers.length}
-			<form
-				method="POST"
-				action="?/oauth2"
-				bind:this={oauth2Form}
-				use:enhance={() => {
-					isLoading = true;
-					return async ({ update }) => {
-						isLoading = false;
-						update();
-					};
-				}}
-			>
-				<div class="relative">
-					<div class="absolute inset-0 flex items-center">
-						<span class="w-full border-t" />
-					</div>
-					<div class="relative flex justify-center text-xs uppercase">
-						<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
-					</div>
-				</div>
-				<div
-					class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-				>
-					<input type="hidden" name="provider" bind:value={currentProvider.name} />
-					<div class="flex w-full items-center justify-center space-x-2">
-						<Button
-							on:click={() => loginWithOauth2(currentProvider.name)}
-							name={currentProvider.name}
-							variant="ghost"
-							class="w-full"
-							disabled={isLoading}
-						>
-							{#if isLoading}
-								<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-							{:else if currentProvider.icon === undefined}
-								<img
-									src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${currentProvider.name}.svg`}
-									alt={currentProvider.name}
-									class="mr-2 h-4 w-4"
-								/>
-							{:else}
-								<svelte:component this={currentProvider.icon} class="mr-2 h-4 w-4" />
-							{/if}
-							{currentProvider.displayName}
-						</Button>
-					</div>
-					{#if providers.length > 1}
-						<div class="flex items-center space-x-2">
-							<Separator orientation="vertical" class="h-[20px] bg-secondary" />
-							<div class="flex items-center space-x-2">
-								<DropdownMenu.Root>
-									<DropdownMenu.Trigger asChild let:builder>
-										<Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
-											<ChevronDown class="h-4 w-4" />
-										</Button>
-									</DropdownMenu.Trigger>
-									<DropdownMenu.Content class="" align="center">
-										<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
-										{#each providersWithIcons as provider}
-											{#if provider.name !== currentProvider.name}
-												<DropdownMenu.Item
-													class="flex justify-center"
-													on:click={() => (currentProvider = provider)}
-												>
-													{#if provider.icon === undefined}
-														<img
-															src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
-															alt={provider.name}
-															class="mr-2 h-4 w-4"
-														/>
-													{:else}
-														<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
-													{/if}
-													{provider.displayName}
-												</DropdownMenu.Item>
-											{/if}
-										{/each}
-									</DropdownMenu.Content>
-								</DropdownMenu.Root>
-							</div>
-						</div>
-					{/if}
-				</div>
-			</form>
+			<SSOForm providers={providersWithIcons} />
 		{/if}
 	</Tabs.Root>
 </div>

From a7900c2ba59fff5b78c0f4eccbb5d20ceffb4d20 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 19:44:05 +0100
Subject: [PATCH 02/18] feat: overwrite form components

---
 src/lib/components/ui/button/button.svelte    | 14 +--
 src/lib/components/ui/button/index.ts         | 43 ++++-----
 src/lib/components/ui/form/form-button.svelte |  6 +-
 .../components/ui/form/form-checkbox.svelte   | 26 ------
 .../ui/form/form-description.svelte           | 14 +--
 .../ui/form/form-element-field.svelte         | 26 ++++++
 .../ui/form/form-field-errors.svelte          | 26 ++++++
 src/lib/components/ui/form/form-field.svelte  | 26 ++++++
 .../components/ui/form/form-fieldset.svelte   | 31 +++++++
 src/lib/components/ui/form/form-input.svelte  | 28 ------
 src/lib/components/ui/form/form-item.svelte   | 12 ---
 src/lib/components/ui/form/form-label.svelte  | 16 ++--
 src/lib/components/ui/form/form-legend.svelte | 17 ++++
 .../ui/form/form-native-select.svelte         | 26 ------
 .../ui/form/form-radio-group.svelte           | 22 -----
 .../ui/form/form-select-trigger.svelte        | 18 ----
 src/lib/components/ui/form/form-select.svelte | 20 -----
 src/lib/components/ui/form/form-switch.svelte | 24 -----
 .../components/ui/form/form-textarea.svelte   | 29 -------
 .../components/ui/form/form-validation.svelte | 14 ---
 src/lib/components/ui/form/index.ts           | 87 ++++---------------
 src/lib/components/ui/label/index.ts          |  4 +-
 src/lib/components/ui/label/label.svelte      |  8 +-
 23 files changed, 198 insertions(+), 339 deletions(-)
 delete mode 100644 src/lib/components/ui/form/form-checkbox.svelte
 create mode 100644 src/lib/components/ui/form/form-element-field.svelte
 create mode 100644 src/lib/components/ui/form/form-field-errors.svelte
 create mode 100644 src/lib/components/ui/form/form-field.svelte
 create mode 100644 src/lib/components/ui/form/form-fieldset.svelte
 delete mode 100644 src/lib/components/ui/form/form-input.svelte
 delete mode 100644 src/lib/components/ui/form/form-item.svelte
 create mode 100644 src/lib/components/ui/form/form-legend.svelte
 delete mode 100644 src/lib/components/ui/form/form-native-select.svelte
 delete mode 100644 src/lib/components/ui/form/form-radio-group.svelte
 delete mode 100644 src/lib/components/ui/form/form-select-trigger.svelte
 delete mode 100644 src/lib/components/ui/form/form-select.svelte
 delete mode 100644 src/lib/components/ui/form/form-switch.svelte
 delete mode 100644 src/lib/components/ui/form/form-textarea.svelte
 delete mode 100644 src/lib/components/ui/form/form-validation.svelte

diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index fb61a87..a128f14 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils';
-	import { buttonVariants, type Props, type Events } from '.';
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Props, type Events } from ".";
 
 	type $$Props = Props;
 	type $$Events = Events;
 
-	let className: $$Props['class'] = undefined;
-	export let variant: $$Props['variant'] = 'default';
-	export let size: $$Props['size'] = 'default';
-	export let builders: $$Props['builders'] = [];
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index e300752..86b7231 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,34 +1,35 @@
-import type { Button as ButtonPrimitive } from 'bits-ui';
-import { tv, type VariantProps } from 'tailwind-variants';
-import Root from './button.svelte';
+import type { Button as ButtonPrimitive } from "bits-ui";
+import { tv, type VariantProps } from "tailwind-variants";
+import Root from "./button.svelte";
 
 const buttonVariants = tv({
-	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
-			default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-			destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive:
+				"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
 			outline:
-				'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
-			secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-			ghost: 'hover:bg-accent hover:text-accent-foreground',
-			link: 'text-primary underline-offset-4 hover:underline'
+				"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
 		},
 		size: {
-			default: 'h-9 px-4 py-2',
-			sm: 'h-8 rounded-md px-3 text-xs',
-			lg: 'h-10 rounded-md px-8',
-			icon: 'h-9 w-9'
-		}
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9",
+		},
 	},
 	defaultVariants: {
-		variant: 'default',
-		size: 'default'
-	}
+		variant: "default",
+		size: "default",
+	},
 });
 
-type Variant = VariantProps<typeof buttonVariants>['variant'];
-type Size = VariantProps<typeof buttonVariants>['size'];
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
 
 type Props = ButtonPrimitive.Props & {
 	variant?: Variant;
@@ -45,5 +46,5 @@ export {
 	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
-	buttonVariants
+	buttonVariants,
 };
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
index a6638e4..881e139 100644
--- a/src/lib/components/ui/form/form-button.svelte
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import * as Button from '$lib/components/ui/button';
+	import * as Button from "$lib/components/ui/button";
+
 	type $$Props = Button.Props;
-	type $$Events = Button.Events;
 </script>
 
-<Button.Root type="submit" {...$$restProps} on:click on:keydown>
+<Button.Root type="submit" {...$$restProps}>
 	<slot />
 </Button.Root>
diff --git a/src/lib/components/ui/form/form-checkbox.svelte b/src/lib/components/ui/form/form-checkbox.svelte
deleted file mode 100644
index d667441..0000000
--- a/src/lib/components/ui/form/form-checkbox.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { getFormField } from 'formsnap';
-	import type { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	type $$Props = CheckboxPrimitive.Props;
-	type $$Events = CheckboxPrimitive.Events;
-
-	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
-
-	const { name, setValue, attrStore, value } = getFormField();
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { name: nameAttr, value: valueAttr, ...rest } = $attrStore;
-</script>
-
-<Checkbox
-	{...rest}
-	checked={typeof $value === 'boolean' ? $value : false}
-	onCheckedChange={(v) => {
-		onCheckedChange?.(v);
-		setValue(v);
-	}}
-	{...$$restProps}
-	on:click
-	on:keydown
-/>
-<input hidden {name} value={$value} />
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
index 0ba02ca..0cc7564 100644
--- a/src/lib/components/ui/form/form-description.svelte
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from 'formsnap';
-	import { cn } from '$lib/utils';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-	let className: string | undefined | null = undefined;
+	type $$Props = FormPrimitive.DescriptionProps;
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Description
-	class={cn('text-[0.8rem] text-muted-foreground', className)}
+	class={cn("text-[0.8rem] text-muted-foreground", className)}
 	{...$$restProps}
+	let:descriptionAttrs
 >
-	<slot />
+	<slot {descriptionAttrs} />
 </FormPrimitive.Description>
diff --git a/src/lib/components/ui/form/form-element-field.svelte b/src/lib/components/ui/form/form-element-field.svelte
new file mode 100644
index 0000000..12bab55
--- /dev/null
+++ b/src/lib/components/ui/form/form-element-field.svelte
@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
+	type T = Record<string, unknown>;
+	type U = unknown;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+	import type { HTMLAttributes } from "svelte/elements";
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils";
+
+	type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLDivElement>;
+
+	export let form: SuperForm<T>;
+	export let name: U;
+
+	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)}>
+		<slot {constraints} {errors} {tainted} {value} />
+	</div>
+</FormPrimitive.ElementField>
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
new file mode 100644
index 0000000..8c9bc12
--- /dev/null
+++ b/src/lib/components/ui/form/form-field-errors.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils";
+
+	type $$Props = FormPrimitive.FieldErrorsProps & {
+		errorClasses?: string | undefined | null;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let errorClasses: $$Props["class"] = undefined;
+</script>
+
+<FormPrimitive.FieldErrors
+	class={cn("text-[0.8rem] font-medium text-destructive", className)}
+	{...$$restProps}
+	let:errors
+	let:fieldErrorsAttrs
+	let:errorAttrs
+>
+	<slot {errors} {fieldErrorsAttrs} {errorAttrs}>
+		{#each errors as error}
+			<div {...errorAttrs} class={cn(errorClasses)}>{error}</div>
+		{/each}
+	</slot>
+</FormPrimitive.FieldErrors>
diff --git a/src/lib/components/ui/form/form-field.svelte b/src/lib/components/ui/form/form-field.svelte
new file mode 100644
index 0000000..745f87c
--- /dev/null
+++ b/src/lib/components/ui/form/form-field.svelte
@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	type T = Record<string, unknown>;
+	type U = unknown;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import type { HTMLAttributes } from "svelte/elements";
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils";
+
+	type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
+
+	export let form: SuperForm<T>;
+	export let name: U;
+
+	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)}>
+		<slot {constraints} {errors} {tainted} {value} />
+	</div>
+</FormPrimitive.Field>
diff --git a/src/lib/components/ui/form/form-fieldset.svelte b/src/lib/components/ui/form/form-fieldset.svelte
new file mode 100644
index 0000000..6d35255
--- /dev/null
+++ b/src/lib/components/ui/form/form-fieldset.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	type T = Record<string, unknown>;
+	type U = unknown;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils";
+
+	type $$Props = FormPrimitive.FieldsetProps<T, U>;
+
+	export let form: SuperForm<T>;
+	export let name: U;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Fieldset
+	{form}
+	{name}
+	let:constraints
+	let:errors
+	let:tainted
+	let:value
+	class={cn("space-y-2", className)}
+>
+	<slot {constraints} {errors} {tainted} {value} />
+</FormPrimitive.Fieldset>
diff --git a/src/lib/components/ui/form/form-input.svelte b/src/lib/components/ui/form/form-input.svelte
deleted file mode 100644
index 5575015..0000000
--- a/src/lib/components/ui/form/form-input.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { getFormField } from 'formsnap';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { Input, type InputEvents } from '$lib/components/ui/input';
-
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
-
-	const { attrStore, value } = getFormField();
-</script>
-
-<Input
-	{...$attrStore}
-	bind:value={$value}
-	{...$$restProps}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-/>
diff --git a/src/lib/components/ui/form/form-item.svelte b/src/lib/components/ui/form/form-item.svelte
deleted file mode 100644
index 11b9079..0000000
--- a/src/lib/components/ui/form/form-item.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-	let className: string | undefined | null = undefined;
-	export { className as class };
-</script>
-
-<div class={cn('space-y-2', className)} {...$$restProps}>
-	<slot />
-</div>
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
index 8608970..0fd76c6 100644
--- a/src/lib/components/ui/form/form-label.svelte
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { Label as LabelPrimitive } from 'bits-ui';
-	import { getFormField } from 'formsnap';
-	import { cn } from '$lib/utils';
-	import { Label } from '$lib/components/ui/label';
+	import type { Label as LabelPrimitive } from "bits-ui";
+	import { getFormControl } from "formsnap";
+	import { cn } from "$lib/utils";
+	import { Label } from "$lib/components/ui/label";
 
 	type $$Props = LabelPrimitive.Props;
 
-	let className: $$Props['class'] = undefined;
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 
-	const { errors, ids } = getFormField();
+	const { labelAttrs } = getFormControl();
 </script>
 
-<Label for={$ids.input} class={cn($errors && 'text-destructive', className)} {...$$restProps}>
-	<slot />
+<Label {...$labelAttrs} class={cn("data-[fs-error]:text-destructive", className)} {...$$restProps}>
+	<slot {labelAttrs} />
 </Label>
diff --git a/src/lib/components/ui/form/form-legend.svelte b/src/lib/components/ui/form/form-legend.svelte
new file mode 100644
index 0000000..9026f17
--- /dev/null
+++ b/src/lib/components/ui/form/form-legend.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils";
+
+	type $$Props = FormPrimitive.LegendProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Legend
+	{...$$restProps}
+	class={cn("text-sm font-medium leading-none data-[fs-error]:text-destructive", className)}
+	let:legendAttrs
+>
+	<slot {legendAttrs} />
+</FormPrimitive.Legend>
diff --git a/src/lib/components/ui/form/form-native-select.svelte b/src/lib/components/ui/form/form-native-select.svelte
deleted file mode 100644
index 2e04aa7..0000000
--- a/src/lib/components/ui/form/form-native-select.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { Form as FormPrimitive } from 'formsnap';
-	import { buttonVariants } from '$lib/components/ui/button';
-	import { cn } from '$lib/utils';
-	import { CaretSort } from 'radix-icons-svelte';
-	import type { HTMLSelectAttributes } from 'svelte/elements';
-
-	type $$Props = HTMLSelectAttributes;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-</script>
-
-<div class="relative">
-	<FormPrimitive.Select
-		class={cn(
-			buttonVariants({ variant: 'outline' }),
-			'appearance-none bg-transparent font-normal',
-			className
-		)}
-		{...$$restProps}
-	>
-		<slot />
-	</FormPrimitive.Select>
-	<CaretSort class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
-</div>
diff --git a/src/lib/components/ui/form/form-radio-group.svelte b/src/lib/components/ui/form/form-radio-group.svelte
deleted file mode 100644
index c3f70bc..0000000
--- a/src/lib/components/ui/form/form-radio-group.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { getFormField } from 'formsnap';
-	import type { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import * as RadioGroup from '$lib/components/ui/radio-group';
-
-	type $$Props = RadioGroupPrimitive.Props;
-	const { attrStore, setValue, name, value } = getFormField();
-
-	export let onValueChange: $$Props['onValueChange'] = undefined;
-</script>
-
-<RadioGroup.Root
-	{...$attrStore}
-	onValueChange={(v) => {
-		onValueChange?.(v);
-		setValue(v);
-	}}
-	{...$$restProps}
->
-	<slot />
-	<input hidden {name} value={$value} />
-</RadioGroup.Root>
diff --git a/src/lib/components/ui/form/form-select-trigger.svelte b/src/lib/components/ui/form/form-select-trigger.svelte
deleted file mode 100644
index f389a02..0000000
--- a/src/lib/components/ui/form/form-select-trigger.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import * as Select from '$lib/components/ui/select';
-	import type { Select as SelectPrimitive } from 'bits-ui';
-	import { getFormField } from 'formsnap';
-
-	type $$Props = SelectPrimitive.TriggerProps & {
-		placeholder?: string;
-	};
-	type $$Events = SelectPrimitive.TriggerEvents;
-	const { attrStore, value } = getFormField();
-	export let placeholder = '';
-</script>
-
-<Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>
-	<slot value={$value}>
-		<Select.Value {placeholder} />
-	</slot>
-</Select.Trigger>
diff --git a/src/lib/components/ui/form/form-select.svelte b/src/lib/components/ui/form/form-select.svelte
deleted file mode 100644
index b884f92..0000000
--- a/src/lib/components/ui/form/form-select.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import * as Select from '$lib/components/ui/select';
-	import { getFormField } from 'formsnap';
-	import type { Select as SelectPrimitive } from 'bits-ui';
-
-	type $$Props = SelectPrimitive.Props<unknown>;
-	const { setValue, name, value } = getFormField();
-	export let onSelectedChange: $$Props['onSelectedChange'] = undefined;
-</script>
-
-<Select.Root
-	onSelectedChange={(v) => {
-		onSelectedChange?.(v);
-		setValue(v ? v.value : undefined);
-	}}
-	{...$$restProps}
->
-	<slot />
-	<input hidden {name} value={$value} />
-</Select.Root>
diff --git a/src/lib/components/ui/form/form-switch.svelte b/src/lib/components/ui/form/form-switch.svelte
deleted file mode 100644
index ff9d0a6..0000000
--- a/src/lib/components/ui/form/form-switch.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { getFormField } from 'formsnap';
-	import type { Switch as SwitchPrimitive } from 'bits-ui';
-	import { Switch } from '$lib/components/ui/switch';
-	type $$Props = SwitchPrimitive.Props;
-	type $$Events = SwitchPrimitive.Events;
-
-	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
-
-	const { name, setValue, attrStore, value } = getFormField();
-</script>
-
-<Switch
-	{...$attrStore}
-	checked={typeof $value === 'boolean' ? $value : false}
-	onCheckedChange={(v) => {
-		onCheckedChange?.(v);
-		setValue(v);
-	}}
-	{...$$restProps}
-	on:click
-	on:keydown
-/>
-<input hidden {name} value={$value} />
diff --git a/src/lib/components/ui/form/form-textarea.svelte b/src/lib/components/ui/form/form-textarea.svelte
deleted file mode 100644
index 5d34734..0000000
--- a/src/lib/components/ui/form/form-textarea.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { getFormField } from 'formsnap';
-	import type { HTMLTextareaAttributes } from 'svelte/elements';
-	import type { TextareaGetFormField } from '.';
-	import { Textarea, type TextareaEvents } from '$lib/components/ui/textarea';
-
-	type $$Props = HTMLTextareaAttributes;
-	type $$Events = TextareaEvents;
-
-	const { attrStore, value } = getFormField() as TextareaGetFormField;
-</script>
-
-<Textarea
-	{...$attrStore}
-	bind:value={$value}
-	{...$$restProps}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-/>
diff --git a/src/lib/components/ui/form/form-validation.svelte b/src/lib/components/ui/form/form-validation.svelte
deleted file mode 100644
index 43db1cc..0000000
--- a/src/lib/components/ui/form/form-validation.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { Form as FormPrimitive } from 'formsnap';
-	import { cn } from '$lib/utils';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	type $$Props = HTMLAttributes<HTMLParagraphElement>;
-	let className: string | undefined | null = undefined;
-	export { className as class };
-</script>
-
-<FormPrimitive.Validation
-	class={cn('text-[0.8rem] font-medium text-destructive', className)}
-	{...$$restProps}
-/>
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
index d154c72..80fdf6c 100644
--- a/src/lib/components/ui/form/index.ts
+++ b/src/lib/components/ui/form/index.ts
@@ -1,82 +1,33 @@
-import { Form as FormPrimitive, getFormField } from 'formsnap';
-import type { Writable } from 'svelte/store';
-import * as RadioGroupComp from '$lib/components/ui/radio-group';
-import * as SelectComp from '$lib/components/ui/select';
-import Item from './form-item.svelte';
-import Input from './form-input.svelte';
-import Textarea from './form-textarea.svelte';
-import Description from './form-description.svelte';
-import Label from './form-label.svelte';
-import Validation from './form-validation.svelte';
-import Checkbox from './form-checkbox.svelte';
-import Switch from './form-switch.svelte';
-import NativeSelect from './form-native-select.svelte';
-import RadioGroup from './form-radio-group.svelte';
-import Select from './form-select.svelte';
-import SelectTrigger from './form-select-trigger.svelte';
-import Button from './form-button.svelte';
+import * as FormPrimitive from "formsnap";
+import Description from "./form-description.svelte";
+import Label from "./form-label.svelte";
+import FieldErrors from "./form-field-errors.svelte";
+import Field from "./form-field.svelte";
+import Button from "./form-button.svelte";
+import Fieldset from "./form-fieldset.svelte";
+import Legend from "./form-legend.svelte";
+import ElementField from "./form-element-field.svelte";
 
-const Root = FormPrimitive.Root;
-const Field = FormPrimitive.Field;
 const Control = FormPrimitive.Control;
-const RadioItem = RadioGroupComp.Item;
-const NativeRadio = FormPrimitive.Radio;
-const SelectContent = SelectComp.Content;
-const SelectLabel = SelectComp.Label;
-const SelectGroup = SelectComp.Group;
-const SelectItem = SelectComp.Item;
-const SelectSeparator = SelectComp.Separator;
-
-export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, 'value'> & {
-	value: Writable<string>;
-};
 
 export {
-	Root,
 	Field,
 	Control,
-	Item,
-	Input,
 	Label,
-	Button,
-	Switch,
-	Select,
-	Checkbox,
-	Textarea,
-	Validation,
-	RadioGroup,
-	RadioItem,
+	FieldErrors,
 	Description,
-	SelectContent,
-	SelectLabel,
-	SelectGroup,
-	SelectItem,
-	SelectSeparator,
-	SelectTrigger,
-	NativeSelect,
-	NativeRadio,
+	Fieldset,
+	Legend,
+	ElementField,
+	Button,
 	//
-	Root as Form,
 	Field as FormField,
 	Control as FormControl,
-	Item as FormItem,
-	Input as FormInput,
-	Textarea as FormTextarea,
 	Description as FormDescription,
 	Label as FormLabel,
-	Validation as FormValidation,
-	NativeSelect as FormNativeSelect,
-	NativeRadio as FormNativeRadio,
-	Checkbox as FormCheckbox,
-	Switch as FormSwitch,
-	RadioGroup as FormRadioGroup,
-	RadioItem as FormRadioItem,
-	Select as FormSelect,
-	SelectContent as FormSelectContent,
-	SelectLabel as FormSelectLabel,
-	SelectGroup as FormSelectGroup,
-	SelectItem as FormSelectItem,
-	SelectSeparator as FormSelectSeparator,
-	SelectTrigger as FormSelectTrigger,
-	Button as FormButton
+	FieldErrors as FormFieldErrors,
+	Fieldset as FormFieldset,
+	Legend as FormLegend,
+	ElementField as FormElementField,
+	Button as FormButton,
 };
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
index 808d141..8bfca0b 100644
--- a/src/lib/components/ui/label/index.ts
+++ b/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,
 };
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index 026d2b3..c4a542b 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils';
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
 
 	type $$Props = LabelPrimitive.Props;
 
-	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',
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 		className
 	)}
 	{...$$restProps}

From 3acaf08d1d2093402dd6c71ee6857d7e123d28cc Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 19:44:37 +0100
Subject: [PATCH 03/18] feat: updates and upgrades

---
 package.json   |   50 +--
 pnpm-lock.yaml | 1085 ++++++++++++++++++++++++++++++++----------------
 2 files changed, 742 insertions(+), 393 deletions(-)

diff --git a/package.json b/package.json
index 2109d3f..7d79b08 100644
--- a/package.json
+++ b/package.json
@@ -13,43 +13,43 @@
 		"unlighthouse": "unlighthouse-ci"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/adapter-auto": "^3.1.1",
+		"@sveltejs/kit": "^2.5.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/eslint": "8.56.2",
-		"@typescript-eslint/eslint-plugin": "^7.0.0",
-		"@typescript-eslint/parser": "^7.0.0",
-		"autoprefixer": "^10.4.16",
+		"@typescript-eslint/eslint-plugin": "^7.0.2",
+		"@typescript-eslint/parser": "^7.0.2",
+		"autoprefixer": "^10.4.17",
+		"clsx": "^2.1.0",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
-		"postcss": "^8.4.32",
-		"postcss-load-config": "^5.0.2",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"prettier-plugin-tailwindcss": "^0.5.9",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
-		"sveltekit-superforms": "^2.0.0",
-		"tailwindcss": "^3.3.6",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+		"formsnap": "^0.5.0",
+		"postcss": "^8.4.35",
+		"postcss-load-config": "^5.0.3",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.1",
+		"prettier-plugin-tailwindcss": "^0.5.11",
+		"svelte": "^4.2.11",
+		"svelte-check": "^3.6.4",
+		"sveltekit-superforms": "^2.3.0",
+		"tailwindcss": "^3.4.1",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3",
 		"unlighthouse": "^0.10.6",
-		"vite": "^5.0.3",
+		"vite": "^5.1.3",
 		"zod": "^3.22.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"bits-ui": "^0.18.0",
-		"clsx": "^2.1.0",
+		"bits-ui": "^0.18.1",
 		"cmdk-sv": "^0.0.13",
-		"formsnap": "^0.4.3",
 		"lucide-svelte": "^0.334.0",
-		"mode-watcher": "^0.2.0",
-		"pocketbase": "^0.21.0",
+		"mode-watcher": "^0.2.1",
+		"pocketbase": "^0.21.1",
 		"radix-icons-svelte": "^1.2.1",
-		"svelte-headless-table": "^0.18.1",
-		"svelte-sonner": "^0.3.17",
+		"svelte-headless-table": "^0.18.2",
+		"svelte-sonner": "^0.3.9",
 		"tailwind-merge": "^2.2.1",
 		"tailwind-variants": "^0.2.0"
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48900ee..c3abe4e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,35 +6,29 @@ settings:
 
 dependencies:
   bits-ui:
-    specifier: ^0.18.0
-    version: 0.18.1(svelte@4.2.9)
-  clsx:
-    specifier: ^2.1.0
-    version: 2.1.0
+    specifier: ^0.18.1
+    version: 0.18.1(svelte@4.2.11)
   cmdk-sv:
     specifier: ^0.0.13
-    version: 0.0.13(svelte@4.2.9)
-  formsnap:
-    specifier: ^0.4.3
-    version: 0.4.3(svelte@4.2.9)(sveltekit-superforms@2.3.0)(zod@3.22.4)
+    version: 0.0.13(svelte@4.2.11)
   lucide-svelte:
     specifier: ^0.334.0
-    version: 0.334.0(svelte@4.2.9)
+    version: 0.334.0(svelte@4.2.11)
   mode-watcher:
-    specifier: ^0.2.0
-    version: 0.2.1(svelte@4.2.9)
+    specifier: ^0.2.1
+    version: 0.2.1(svelte@4.2.11)
   pocketbase:
-    specifier: ^0.21.0
-    version: 0.21.0
+    specifier: ^0.21.1
+    version: 0.21.1
   radix-icons-svelte:
     specifier: ^1.2.1
     version: 1.2.1
   svelte-headless-table:
-    specifier: ^0.18.1
-    version: 0.18.1(svelte@4.2.9)
+    specifier: ^0.18.2
+    version: 0.18.2(svelte@4.2.11)
   svelte-sonner:
-    specifier: ^0.3.17
-    version: 0.3.17(svelte@4.2.9)
+    specifier: ^0.3.9
+    version: 0.3.18(svelte@4.2.11)
   tailwind-merge:
     specifier: ^2.2.1
     version: 2.2.1
@@ -44,26 +38,29 @@ dependencies:
 
 devDependencies:
   '@sveltejs/adapter-auto':
-    specifier: ^3.0.0
+    specifier: ^3.1.1
     version: 3.1.1(@sveltejs/kit@2.5.0)
   '@sveltejs/kit':
-    specifier: ^2.0.0
-    version: 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.9)(vite@5.0.12)
+    specifier: ^2.5.0
+    version: 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.3)
   '@sveltejs/vite-plugin-svelte':
-    specifier: ^3.0.0
-    version: 3.0.2(svelte@4.2.9)(vite@5.0.12)
+    specifier: ^3.0.2
+    version: 3.0.2(svelte@4.2.11)(vite@5.1.3)
   '@types/eslint':
     specifier: 8.56.2
     version: 8.56.2
   '@typescript-eslint/eslint-plugin':
-    specifier: ^7.0.0
-    version: 7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3)
+    specifier: ^7.0.2
+    version: 7.0.2(@typescript-eslint/parser@7.0.2)(eslint@8.56.0)(typescript@5.3.3)
   '@typescript-eslint/parser':
-    specifier: ^7.0.0
-    version: 7.0.1(eslint@8.56.0)(typescript@5.3.3)
+    specifier: ^7.0.2
+    version: 7.0.2(eslint@8.56.0)(typescript@5.3.3)
   autoprefixer:
-    specifier: ^10.4.16
-    version: 10.4.17(postcss@8.4.33)
+    specifier: ^10.4.17
+    version: 10.4.17(postcss@8.4.35)
+  clsx:
+    specifier: ^2.1.0
+    version: 2.1.0
   eslint:
     specifier: ^8.56.0
     version: 8.56.0
@@ -72,46 +69,49 @@ devDependencies:
     version: 9.1.0(eslint@8.56.0)
   eslint-plugin-svelte:
     specifier: ^2.35.1
-    version: 2.35.1(eslint@8.56.0)(svelte@4.2.9)
+    version: 2.35.1(eslint@8.56.0)(svelte@4.2.11)
+  formsnap:
+    specifier: ^0.5.0
+    version: 0.5.0(svelte@4.2.11)(sveltekit-superforms@2.3.0)
   postcss:
-    specifier: ^8.4.32
-    version: 8.4.33
+    specifier: ^8.4.35
+    version: 8.4.35
   postcss-load-config:
-    specifier: ^5.0.2
-    version: 5.0.2(postcss@8.4.33)
+    specifier: ^5.0.3
+    version: 5.0.3(postcss@8.4.35)
   prettier:
-    specifier: ^3.1.1
-    version: 3.2.4
+    specifier: ^3.2.5
+    version: 3.2.5
   prettier-plugin-svelte:
-    specifier: ^3.1.2
-    version: 3.1.2(prettier@3.2.4)(svelte@4.2.9)
+    specifier: ^3.2.1
+    version: 3.2.1(prettier@3.2.5)(svelte@4.2.11)
   prettier-plugin-tailwindcss:
-    specifier: ^0.5.9
-    version: 0.5.11(prettier-plugin-svelte@3.1.2)(prettier@3.2.4)
+    specifier: ^0.5.11
+    version: 0.5.11(prettier-plugin-svelte@3.2.1)(prettier@3.2.5)
   svelte:
-    specifier: ^4.2.7
-    version: 4.2.9
+    specifier: ^4.2.11
+    version: 4.2.11
   svelte-check:
-    specifier: ^3.6.0
-    version: 3.6.3(@babel/core@7.23.9)(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9)
+    specifier: ^3.6.4
+    version: 3.6.4(@babel/core@7.23.9)(postcss-load-config@5.0.3)(postcss@8.4.35)(svelte@4.2.11)
   sveltekit-superforms:
-    specifier: ^2.0.0
-    version: 2.3.0(@sveltejs/kit@2.5.0)(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.19.12)(svelte@4.2.9)
+    specifier: ^2.3.0
+    version: 2.3.0(@sveltejs/kit@2.5.0)(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.20.1)(svelte@4.2.11)
   tailwindcss:
-    specifier: ^3.3.6
+    specifier: ^3.4.1
     version: 3.4.1
   tslib:
-    specifier: ^2.4.1
+    specifier: ^2.6.2
     version: 2.6.2
   typescript:
-    specifier: ^5.0.0
+    specifier: ^5.3.3
     version: 5.3.3
   unlighthouse:
     specifier: ^0.10.6
     version: 0.10.6(puppeteer@22.1.0)(typescript@5.3.3)(vue@3.4.19)
   vite:
-    specifier: ^5.0.3
-    version: 5.0.12
+    specifier: ^5.1.3
+    version: 5.1.3
   zod:
     specifier: ^3.22.4
     version: 3.22.4
@@ -190,7 +190,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.23.5
       '@babel/helper-validator-option': 7.23.5
-      browserslist: 4.22.3
+      browserslist: 4.23.0
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
@@ -347,6 +347,16 @@ packages:
     cpu: [ppc64]
     os: [aix]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/aix-ppc64@0.20.1:
+    resolution: {integrity: sha512-m55cpeupQ2DbuRGQMMZDzbv9J9PgVelPjlcmM5kxHnrBdBx6REaEd7LamYV7Dm8N7rCyR/XwU6rVP8ploKtIkA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/android-arm64@0.19.12:
@@ -355,6 +365,16 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64@0.20.1:
+    resolution: {integrity: sha512-hCnXNF0HM6AjowP+Zou0ZJMWWa1VkD77BXe959zERgGJBBxB+sV+J9f/rcjeg2c5bsukD/n17RKWXGFCO5dD5A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/android-arm@0.19.12:
@@ -363,6 +383,16 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.20.1:
+    resolution: {integrity: sha512-4j0+G27/2ZXGWR5okcJi7pQYhmkVgb4D7UKwxcqrjhvp5TKWx3cUjgB1CGj1mfdmJBQ9VnUGgUhign+FPF2Zgw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/android-x64@0.19.12:
@@ -371,6 +401,16 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.20.1:
+    resolution: {integrity: sha512-MSfZMBoAsnhpS+2yMFYIQUPs8Z19ajwfuaSZx+tSl09xrHZCjbeXXMsUF/0oq7ojxYEpsSo4c0SfjxOYXRbpaA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.19.12:
@@ -379,6 +419,16 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.20.1:
+    resolution: {integrity: sha512-Ylk6rzgMD8klUklGPzS414UQLa5NPXZD5tf8JmQU8GQrj6BrFA/Ic9tb2zRe1kOZyCbGl+e8VMbDRazCEBqPvA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.19.12:
@@ -387,6 +437,16 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.20.1:
+    resolution: {integrity: sha512-pFIfj7U2w5sMp52wTY1XVOdoxw+GDwy9FsK3OFz4BpMAjvZVs0dT1VXs8aQm22nhwoIWUmIRaE+4xow8xfIDZA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.19.12:
@@ -395,6 +455,16 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.20.1:
+    resolution: {integrity: sha512-UyW1WZvHDuM4xDz0jWun4qtQFauNdXjXOtIy7SYdf7pbxSWWVlqhnR/T2TpX6LX5NI62spt0a3ldIIEkPM6RHw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.19.12:
@@ -403,6 +473,16 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.20.1:
+    resolution: {integrity: sha512-itPwCw5C+Jh/c624vcDd9kRCCZVpzpQn8dtwoYIt2TJF3S9xJLiRohnnNrKwREvcZYx0n8sCSbvGH349XkcQeg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.19.12:
@@ -411,6 +491,16 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.20.1:
+    resolution: {integrity: sha512-cX8WdlF6Cnvw/DO9/X7XLH2J6CkBnz7Twjpk56cshk9sjYVcuh4sXQBy5bmTwzBjNVZze2yaV1vtcJS04LbN8w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.19.12:
@@ -419,6 +509,16 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.20.1:
+    resolution: {integrity: sha512-LojC28v3+IhIbfQ+Vu4Ut5n3wKcgTu6POKIHN9Wpt0HnfgUGlBuyDDQR4jWZUZFyYLiz4RBBBmfU6sNfn6RhLw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.19.12:
@@ -427,6 +527,16 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.20.1:
+    resolution: {integrity: sha512-4H/sQCy1mnnGkUt/xszaLlYJVTz3W9ep52xEefGtd6yXDQbz/5fZE5dFLUgsPdbUOQANcVUa5iO6g3nyy5BJiw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.19.12:
@@ -435,6 +545,16 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.20.1:
+    resolution: {integrity: sha512-c0jgtB+sRHCciVXlyjDcWb2FUuzlGVRwGXgI+3WqKOIuoo8AmZAddzeOHeYLtD+dmtHw3B4Xo9wAUdjlfW5yYA==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.19.12:
@@ -443,6 +563,16 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.20.1:
+    resolution: {integrity: sha512-TgFyCfIxSujyuqdZKDZ3yTwWiGv+KnlOeXXitCQ+trDODJ+ZtGOzLkSWngynP0HZnTsDyBbPy7GWVXWaEl6lhA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.19.12:
@@ -451,6 +581,16 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.20.1:
+    resolution: {integrity: sha512-b+yuD1IUeL+Y93PmFZDZFIElwbmFfIKLKlYI8M6tRyzE6u7oEP7onGk0vZRh8wfVGC2dZoy0EqX1V8qok4qHaw==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.19.12:
@@ -459,6 +599,16 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.20.1:
+    resolution: {integrity: sha512-wpDlpE0oRKZwX+GfomcALcouqjjV8MIX8DyTrxfyCfXxoKQSDm45CZr9fanJ4F6ckD4yDEPT98SrjvLwIqUCgg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.19.12:
@@ -467,6 +617,16 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.20.1:
+    resolution: {integrity: sha512-5BepC2Au80EohQ2dBpyTquqGCES7++p7G+7lXe1bAIvMdXm4YYcEfZtQrP4gaoZ96Wv1Ute61CEHFU7h4FMueQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.19.12:
@@ -475,6 +635,16 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.20.1:
+    resolution: {integrity: sha512-5gRPk7pKuaIB+tmH+yKd2aQTRpqlf1E4f/mC+tawIm/CGJemZcHZpp2ic8oD83nKgUPMEd0fNanrnFljiruuyA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.19.12:
@@ -483,6 +653,16 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.20.1:
+    resolution: {integrity: sha512-4fL68JdrLV2nVW2AaWZBv3XEm3Ae3NZn/7qy2KGAt3dexAgSVT+Hc97JKSZnqezgMlv9x6KV0ZkZY7UO5cNLCg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.19.12:
@@ -491,6 +671,16 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.20.1:
+    resolution: {integrity: sha512-GhRuXlvRE+twf2ES+8REbeCb/zeikNqwD3+6S5y5/x+DYbAQUNl0HNBs4RQJqrechS4v4MruEr8ZtAin/hK5iw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.19.12:
@@ -499,6 +689,16 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.20.1:
+    resolution: {integrity: sha512-ZnWEyCM0G1Ex6JtsygvC3KUUrlDXqOihw8RicRuQAzw+c4f1D66YlPNNV3rkjVW90zXVsHwZYWbJh3v+oQFM9Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.19.12:
@@ -507,6 +707,16 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.20.1:
+    resolution: {integrity: sha512-QZ6gXue0vVQY2Oon9WyLFCdSuYbXSoxaZrPuJ4c20j6ICedfsDilNPYfHLlMH7vGfU5DQR0czHLmJvH4Nzis/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.19.12:
@@ -515,6 +725,16 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.20.1:
+    resolution: {integrity: sha512-HzcJa1NcSWTAU0MJIxOho8JftNp9YALui3o+Ny7hCh0v5f90nprly1U3Sj1Ldj/CvKKdvvFsCRvDkpsEMp4DNw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.19.12:
@@ -523,6 +743,16 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.20.1:
+    resolution: {integrity: sha512-0MBh53o6XtI6ctDnRMeQ+xoCN8kD2qI1rY1KgF/xdWQwoFeKou7puvDfV8/Wv4Ctx2rRpET/gGdz3YlNtNACSA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
     optional: true
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
@@ -548,7 +778,7 @@ packages:
       debug: 4.3.4
       espree: 9.6.1
       globals: 13.24.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -573,8 +803,8 @@ packages:
       '@floating-ui/utils': 0.2.1
     dev: false
 
-  /@floating-ui/dom@1.6.1:
-    resolution: {integrity: sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==}
+  /@floating-ui/dom@1.6.3:
+    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
     dependencies:
       '@floating-ui/core': 1.6.0
       '@floating-ui/utils': 0.2.1
@@ -584,7 +814,7 @@ packages:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: false
 
-  /@gcornut/valibot-json-schema@0.0.22(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.19.12)(valibot@0.28.1):
+  /@gcornut/valibot-json-schema@0.0.22(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.20.1)(valibot@0.28.1):
     resolution: {integrity: sha512-aUrIDndl7KJF1LruNMpGFMIQRNwB4pV5YhiTvgmIKkjet+OhEmX5ZfaET8MQQ+Br0Dd6fQgVtNbxhmyLPDB1+A==}
     hasBin: true
     requiresBuild: true
@@ -595,14 +825,16 @@ packages:
       valibot: '>= 0.21.0'
     dependencies:
       '@types/json-schema': 7.0.15
-      esbuild: 0.19.12
-      esbuild-runner: 2.2.2(esbuild@0.19.12)
+      esbuild: 0.20.1
+      esbuild-runner: 2.2.2(esbuild@0.20.1)
       valibot: 0.28.1
+    dev: true
     optional: true
 
   /@hapi/hoek@9.3.0:
     resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@hapi/topo@5.1.0:
@@ -610,6 +842,7 @@ packages:
     requiresBuild: true
     dependencies:
       '@hapi/hoek': 9.3.0
+    dev: true
     optional: true
 
   /@headlessui/vue@1.7.19(vue@3.4.19):
@@ -618,7 +851,7 @@ packages:
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      '@tanstack/vue-virtual': 3.1.1(vue@3.4.19)
+      '@tanstack/vue-virtual': 3.1.2(vue@3.4.19)
       vue: 3.4.19(typescript@5.3.3)
     dev: true
 
@@ -642,10 +875,10 @@ packages:
     resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
     dev: true
 
-  /@internationalized/date@3.5.1:
-    resolution: {integrity: sha512-LUQIfwU9e+Fmutc/DpRTGXSdgYZLBegi4wygCWDSVmUdLTaMHsQyASDiJtREwanwKuQLq0hY76fCJ9J/9I2xOQ==}
+  /@internationalized/date@3.5.2:
+    resolution: {integrity: sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==}
     dependencies:
-      '@swc/helpers': 0.5.3
+      '@swc/helpers': 0.5.6
     dev: false
 
   /@isaacs/cliui@8.0.2:
@@ -667,8 +900,8 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.22
 
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
   /@jridgewell/set-array@1.1.2:
@@ -681,35 +914,35 @@ packages:
   /@jridgewell/trace-mapping@0.3.22:
     resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==}
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /@melt-ui/svelte@0.61.2(svelte@4.2.9):
+  /@melt-ui/svelte@0.61.2(svelte@4.2.11):
     resolution: {integrity: sha512-BHkD9G31zQBToA4euDRBgTQRvWxT9scufOVCXgDO6HKTvyxFspbWT2bgiSFqAK4BbAGDn9Ao36Q8F9O71KN4OQ==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
       '@floating-ui/core': 1.6.0
-      '@floating-ui/dom': 1.6.1
-      '@internationalized/date': 3.5.1
+      '@floating-ui/dom': 1.6.3
+      '@internationalized/date': 3.5.2
       dequal: 2.0.3
       focus-trap: 7.5.4
       nanoid: 4.0.2
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
-  /@melt-ui/svelte@0.71.2(svelte@4.2.9):
+  /@melt-ui/svelte@0.71.2(svelte@4.2.11):
     resolution: {integrity: sha512-GDUErhAphEoEOLpcBjQ84BgzRR6M3344fQE4QYFffwT7aedWak7CvNsECgeig1Y5xvfDmeEaFnGlOQXIBucJYw==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
       '@floating-ui/core': 1.6.0
-      '@floating-ui/dom': 1.6.1
-      '@internationalized/date': 3.5.1
+      '@floating-ui/dom': 1.6.3
+      '@internationalized/date': 3.5.2
       dequal: 2.0.3
       focus-trap: 7.5.4
       nanoid: 5.0.5
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
   /@nodelib/fs.scandir@2.1.5:
@@ -728,7 +961,7 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.0
+      fastq: 1.17.1
 
   /@parcel/watcher-android-arm64@2.4.0:
     resolution: {integrity: sha512-+fPtO/GsbYX1LJnCYCaDVT3EOBjvSFdQN9Mrzh9zWAOOfvidPWyScTrHIZHHfJBvlHzNA0Gy0U3NXFA/M7PHUA==}
@@ -879,11 +1112,13 @@ packages:
 
   /@polka/url@1.0.0-next.24:
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
+    dev: true
 
   /@poppinss/macroable@1.0.1:
     resolution: {integrity: sha512-bO3+rnqGhE+gdx4DOyYjY9jCm2+c5Ncyl2Gmst0w271rIFnsB00btonpdmAqvFNzS8rcas+APGm+47fYMmkpQA==}
     engines: {node: '>=18.16.0'}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@puppeteer/browsers@1.9.1:
@@ -932,95 +1167,108 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/rollup-android-arm-eabi@4.9.6:
-    resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==}
+  /@rollup/rollup-android-arm-eabi@4.12.0:
+    resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-android-arm64@4.9.6:
-    resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==}
+  /@rollup/rollup-android-arm64@4.12.0:
+    resolution: {integrity: sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-darwin-arm64@4.9.6:
-    resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==}
+  /@rollup/rollup-darwin-arm64@4.12.0:
+    resolution: {integrity: sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-darwin-x64@4.9.6:
-    resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==}
+  /@rollup/rollup-darwin-x64@4.12.0:
+    resolution: {integrity: sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.9.6:
-    resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.12.0:
+    resolution: {integrity: sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.9.6:
-    resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==}
+  /@rollup/rollup-linux-arm64-gnu@4.12.0:
+    resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.9.6:
-    resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==}
+  /@rollup/rollup-linux-arm64-musl@4.12.0:
+    resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-linux-riscv64-gnu@4.9.6:
-    resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==}
+  /@rollup/rollup-linux-riscv64-gnu@4.12.0:
+    resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.9.6:
-    resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==}
+  /@rollup/rollup-linux-x64-gnu@4.12.0:
+    resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.9.6:
-    resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==}
+  /@rollup/rollup-linux-x64-musl@4.12.0:
+    resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.9.6:
-    resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==}
+  /@rollup/rollup-win32-arm64-msvc@4.12.0:
+    resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.9.6:
-    resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==}
+  /@rollup/rollup-win32-ia32-msvc@4.12.0:
+    resolution: {integrity: sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.9.6:
-    resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==}
+  /@rollup/rollup-win32-x64-msvc@4.12.0:
+    resolution: {integrity: sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@sentry/core@6.19.7:
@@ -1086,21 +1334,25 @@ packages:
     requiresBuild: true
     dependencies:
       '@hapi/hoek': 9.3.0
+    dev: true
     optional: true
 
   /@sideway/formula@3.0.1:
     resolution: {integrity: sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@sideway/pinpoint@2.0.0:
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@sinclair/typebox@0.32.14:
     resolution: {integrity: sha512-EC77Mw8huT2z9YlYbWfpIQgN6shZE1tH4NP4/Trig8UBel9FZNMZRJ42ubJI8PLor2uIU+waLml1dce5ReCOPg==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@sindresorhus/is@4.6.0:
@@ -1111,6 +1363,7 @@ packages:
   /@sodaru/yup-to-json-schema@2.0.1:
     resolution: {integrity: sha512-lWb0Wiz8KZ9ip/dY1eUqt7fhTPmL24p6Hmv5Fd9pzlzAdw/YNcWZr+tiCT4oZ4Zyxzi9+1X4zv82o7jYvcFxYA==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@sveltejs/adapter-auto@3.1.1(@sveltejs/kit@2.5.0):
@@ -1118,11 +1371,11 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.9)(vite@5.0.12)
+      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.3)
       import-meta-resolve: 4.0.0
     dev: true
 
-  /@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.9)(vite@5.0.12):
+  /@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.3):
     resolution: {integrity: sha512-1uyXvzC2Lu1FZa30T4y5jUAC21R309ZMRG0TPt+PPPbNUoDpy8zSmSNVWYaBWxYDqLGQ5oPNWvjvvF2IjJ1jmA==}
     engines: {node: '>=18.13'}
     hasBin: true
@@ -1132,23 +1385,24 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.9)(vite@5.0.12)
+      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.11)(vite@5.1.3)
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 4.3.2
       esm-env: 1.0.0
       import-meta-resolve: 4.0.0
       kleur: 4.1.5
-      magic-string: 0.30.5
+      magic-string: 0.30.7
       mrmime: 2.0.0
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.4
-      svelte: 4.2.9
+      svelte: 4.2.11
       tiny-glob: 0.2.9
-      vite: 5.0.12
+      vite: 5.1.3
+    dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.9)(vite@5.0.12):
+  /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.3):
     resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
@@ -1156,34 +1410,36 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.9)(vite@5.0.12)
+      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.11)(vite@5.1.3)
       debug: 4.3.4
-      svelte: 4.2.9
-      vite: 5.0.12
+      svelte: 4.2.11
+      vite: 5.1.3
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
-  /@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.9)(vite@5.0.12):
+  /@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.11)(vite@5.1.3):
     resolution: {integrity: sha512-MpmF/cju2HqUls50WyTHQBZUV3ovV/Uk8k66AN2gwHogNAG8wnW8xtZDhzNBsFJJuvmq1qnzA5kE7YfMJNFv2Q==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.9)(vite@5.0.12)
+      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.3)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
-      magic-string: 0.30.5
-      svelte: 4.2.9
-      svelte-hmr: 0.15.3(svelte@4.2.9)
-      vite: 5.0.12
-      vitefu: 0.2.5(vite@5.0.12)
+      magic-string: 0.30.7
+      svelte: 4.2.11
+      svelte-hmr: 0.15.3(svelte@4.2.11)
+      vite: 5.1.3
+      vitefu: 0.2.5(vite@5.1.3)
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
-  /@swc/helpers@0.5.3:
-    resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==}
+  /@swc/helpers@0.5.6:
+    resolution: {integrity: sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==}
     dependencies:
       tslib: 2.6.2
     dev: false
@@ -1195,16 +1451,16 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
-  /@tanstack/virtual-core@3.1.1:
-    resolution: {integrity: sha512-I5lerX+RWxLM+zw35gwwQIoLvtkOm0ecuQUlEjNey+Ga6TnR66WKLBnSHre59onugxhpDLT2nofRYzxf+izDFQ==}
+  /@tanstack/virtual-core@3.1.2:
+    resolution: {integrity: sha512-DATZJs8iejkIUqXZe6ruDAnjFo78BKnIIgqQZrc7CmEFqfLEN/TPD91n4hRfo6hpRB6xC00bwKxv7vdjFNEmOg==}
     dev: true
 
-  /@tanstack/vue-virtual@3.1.1(vue@3.4.19):
-    resolution: {integrity: sha512-62am497kFAOEdOlK7ECEqKiZPxgaPk5BbK4ah+PhTrvz1yNRCHbUbYGe8JwV1DIoY9k1MNXGBLUW5hAa5tvnzQ==}
+  /@tanstack/vue-virtual@3.1.2(vue@3.4.19):
+    resolution: {integrity: sha512-RmUnhsFtRw9p4Ti/+rG2Hr3y4yFhs8Xdsn7x9tkPoKINbVya/5RSCoNUCCAg2iXNjOI5a55iBNzNV0SVwxMwKA==}
     peerDependencies:
       vue: ^2.7.0 || ^3.0.0
     dependencies:
-      '@tanstack/virtual-core': 3.1.1
+      '@tanstack/virtual-core': 3.1.2
       vue: 3.4.19(typescript@5.3.3)
     dev: true
 
@@ -1223,6 +1479,7 @@ packages:
 
   /@types/cookie@0.6.0:
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+    dev: true
 
   /@types/eslint@8.56.2:
     resolution: {integrity: sha512-uQDwm1wFHmbBbCZCqAlq6Do9LYwByNZHWzXppSnay9SuwJ+VRbjkbLABer54kcPnMSlG6Fdiy2yaFXm/z9Z5gw==}
@@ -1240,6 +1497,7 @@ packages:
 
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
 
   /@types/keyv@3.1.4:
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
@@ -1263,13 +1521,14 @@ packages:
       '@types/node': 20.11.19
     dev: true
 
-  /@types/semver@7.5.6:
-    resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
+  /@types/semver@7.5.7:
+    resolution: {integrity: sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==}
     dev: true
 
   /@types/validator@13.11.9:
     resolution: {integrity: sha512-FCTsikRozryfayPuiI46QzH3fnrOoctTjvOYZkho9BTFLCOZ2rgZJHMOVgCOfttjPJcgOx52EpkY0CMfy87MIw==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@types/yauzl@2.10.3:
@@ -1280,8 +1539,8 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin@7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-OLvgeBv3vXlnnJGIAgCLYKjgMEU+wBGj07MQ/nxAaON+3mLzX7mJbhRYrVGiVvFiXtwFlkcBa/TtmglHy0UbzQ==}
+  /@typescript-eslint/eslint-plugin@7.0.2(@typescript-eslint/parser@7.0.2)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-/XtVZJtbaphtdrWjr+CJclaCVGPtOdBpFEnvtNf/jRV0IiEemRrL0qABex/nEt8isYcnFacm3nPHYQwL+Wb7qg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^7.0.0
@@ -1292,25 +1551,25 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.0.1
-      '@typescript-eslint/type-utils': 7.0.1(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/utils': 7.0.1(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 7.0.1
+      '@typescript-eslint/parser': 7.0.2(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.0.2
+      '@typescript-eslint/type-utils': 7.0.2(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.0.2(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 7.0.2
       debug: 4.3.4
       eslint: 8.56.0
       graphemer: 1.4.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       natural-compare: 1.4.0
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.3.3)
+      semver: 7.6.0
+      ts-api-utils: 1.2.1(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-8GcRRZNzaHxKzBPU3tKtFNing571/GwPBeCvmAUw0yBtfE2XVd0zFKJIMSWkHJcPQi0ekxjIts6L/rrZq5cxGQ==}
+  /@typescript-eslint/parser@7.0.2(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-GdwfDglCxSmU+QTS9vhz2Sop46ebNCXpPPvsByK7hu0rFGRHL+AusKQJ7SoN+LbLh6APFpQwHKmDSwN35Z700Q==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -1319,10 +1578,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 7.0.1
-      '@typescript-eslint/types': 7.0.1
-      '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 7.0.1
+      '@typescript-eslint/scope-manager': 7.0.2
+      '@typescript-eslint/types': 7.0.2
+      '@typescript-eslint/typescript-estree': 7.0.2(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 7.0.2
       debug: 4.3.4
       eslint: 8.56.0
       typescript: 5.3.3
@@ -1330,16 +1589,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager@7.0.1:
-    resolution: {integrity: sha512-v7/T7As10g3bcWOOPAcbnMDuvctHzCFYCG/8R4bK4iYzdFqsZTbXGln0cZNVcwQcwewsYU2BJLay8j0/4zOk4w==}
+  /@typescript-eslint/scope-manager@7.0.2:
+    resolution: {integrity: sha512-l6sa2jF3h+qgN2qUMjVR3uCNGjWw4ahGfzIYsCtFrQJCjhbrDPdiihYT8FnnqFwsWX+20hK592yX9I2rxKTP4g==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 7.0.1
-      '@typescript-eslint/visitor-keys': 7.0.1
+      '@typescript-eslint/types': 7.0.2
+      '@typescript-eslint/visitor-keys': 7.0.2
     dev: true
 
-  /@typescript-eslint/type-utils@7.0.1(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-YtT9UcstTG5Yqy4xtLiClm1ZpM/pWVGFnkAa90UfdkkZsR1eP2mR/1jbHeYp8Ay1l1JHPyGvoUYR6o3On5Nhmw==}
+  /@typescript-eslint/type-utils@7.0.2(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-IKKDcFsKAYlk8Rs4wiFfEwJTQlHcdn8CLwLaxwd6zb8HNiMcQIFX9sWax2k4Cjj7l7mGS5N1zl7RCHOVwHq2VQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -1348,23 +1607,23 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.3.3)
-      '@typescript-eslint/utils': 7.0.1(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 7.0.2(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.0.2(eslint@8.56.0)(typescript@5.3.3)
       debug: 4.3.4
       eslint: 8.56.0
-      ts-api-utils: 1.0.3(typescript@5.3.3)
+      ts-api-utils: 1.2.1(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types@7.0.1:
-    resolution: {integrity: sha512-uJDfmirz4FHib6ENju/7cz9SdMSkeVvJDK3VcMFvf/hAShg8C74FW+06MaQPODHfDJp/z/zHfgawIJRjlu0RLg==}
+  /@typescript-eslint/types@7.0.2:
+    resolution: {integrity: sha512-ZzcCQHj4JaXFjdOql6adYV4B/oFOFjPOC9XYwCaZFRvqN8Llfvv4gSxrkQkd2u4Ci62i2c6W6gkDwQJDaRc4nA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@7.0.1(typescript@5.3.3):
-    resolution: {integrity: sha512-SO9wHb6ph0/FN5OJxH4MiPscGah5wjOd0RRpaLvuBv9g8565Fgu0uMySFEPqwPHiQU90yzJ2FjRYKGrAhS1xig==}
+  /@typescript-eslint/typescript-estree@7.0.2(typescript@5.3.3):
+    resolution: {integrity: sha512-3AMc8khTcELFWcKcPc0xiLviEvvfzATpdPj/DXuOGIdQIIFybf4DMT1vKRbuAEOFMwhWt7NFLXRkbjsvKZQyvw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
@@ -1372,43 +1631,43 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 7.0.1
-      '@typescript-eslint/visitor-keys': 7.0.1
+      '@typescript-eslint/types': 7.0.2
+      '@typescript-eslint/visitor-keys': 7.0.2
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.3.3)
+      semver: 7.6.0
+      ts-api-utils: 1.2.1(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@7.0.1(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-oe4his30JgPbnv+9Vef1h48jm0S6ft4mNwi9wj7bX10joGn07QRfqIqFHoMiajrtoU88cIhXf8ahwgrcbNLgPA==}
+  /@typescript-eslint/utils@7.0.2(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-PZPIONBIB/X684bhT1XlrkjNZJIEevwkKDsdwfiu1WeqBxYEEdIgVDgm8/bbKHVu+6YOpeRqcfImTdImx/4Bsw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^8.56.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
       '@types/json-schema': 7.0.15
-      '@types/semver': 7.5.6
-      '@typescript-eslint/scope-manager': 7.0.1
-      '@typescript-eslint/types': 7.0.1
-      '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.3.3)
+      '@types/semver': 7.5.7
+      '@typescript-eslint/scope-manager': 7.0.2
+      '@typescript-eslint/types': 7.0.2
+      '@typescript-eslint/typescript-estree': 7.0.2(typescript@5.3.3)
       eslint: 8.56.0
-      semver: 7.5.4
+      semver: 7.6.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys@7.0.1:
-    resolution: {integrity: sha512-hwAgrOyk++RTXrP4KzCg7zB2U0xt7RUU0ZdMSCsqF3eKUwkdXUMyTb0qdCuji7VIbcpG62kKTU9M1J1c9UpFBw==}
+  /@typescript-eslint/visitor-keys@7.0.2:
+    resolution: {integrity: sha512-8Y+YiBmqPighbm5xA2k4wKTxRzx9EkBu7Rlw+WHqMvRJ3RPz/BMBO9b2ru0LUNmXg120PHUXD5+SWFy2R8DqlQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 7.0.1
+      '@typescript-eslint/types': 7.0.2
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -1480,7 +1739,7 @@ packages:
       execa: 7.2.0
       fs-extra: 11.2.0
       globby: 13.2.2
-      h3: 1.10.1
+      h3: 1.10.2
       hookable: 5.5.3
       launch-editor: 2.6.1
       lighthouse: 9.6.8
@@ -1515,7 +1774,7 @@ packages:
     resolution: {integrity: sha512-24nIr3Hub6Nj6yl2+lhZ8rgcsYJDHwebY1VsXGpANdEInMELrnhmrJP31605zGbprm1RHSW8r8lPNiunzGH5UQ==}
     dependencies:
       '@unlighthouse/core': 0.10.6(puppeteer@22.1.0)(typescript@5.3.3)
-      h3: 1.10.1
+      h3: 1.10.2
       listhen: 1.6.0
     transitivePeerDependencies:
       - bufferutil
@@ -1533,7 +1792,7 @@ packages:
     dependencies:
       consola: 2.15.3
       defu: 6.1.4
-      h3: 1.10.1
+      h3: 1.10.2
       hookable: 5.5.3
       mlly: 1.5.0
       ohash: 1.1.3
@@ -1569,7 +1828,7 @@ packages:
     dependencies:
       '@unrouted/core': 0.5.0
       cors: 2.8.5
-      h3: 1.10.1
+      h3: 1.10.2
     dev: true
 
   /@unrouted/preset-node@0.5.0:
@@ -1579,7 +1838,7 @@ packages:
       '@unrouted/plugins': 0.5.0
       compression: 1.7.4
       defu: 6.1.4
-      h3: 1.10.1
+      h3: 1.10.2
       pathe: 1.1.2
       sirv: 2.0.4
       ufo: 1.4.0
@@ -1592,6 +1851,7 @@ packages:
     resolution: {integrity: sha512-qEhp+Ux4wCeyYlQpB5TddjlRRyxbZz4RVYG/UHGnnnn3eOw326dZGCJldOOEl6huBFoOguMUQfhKLLSjJ0v+XQ==}
     engines: {node: '>=18.0.0'}
     requiresBuild: true
+    dev: true
     optional: true
 
   /@vinejs/vine@1.7.1:
@@ -1607,6 +1867,7 @@ packages:
       dlv: 1.1.3
       normalize-url: 8.0.0
       validator: 13.11.0
+    dev: true
     optional: true
 
   /@vue/compiler-core@3.4.19:
@@ -1636,7 +1897,7 @@ packages:
       '@vue/shared': 3.4.19
       estree-walker: 2.0.2
       magic-string: 0.30.7
-      postcss: 8.4.33
+      postcss: 8.4.35
       source-map-js: 1.0.2
     dev: true
 
@@ -1791,6 +2052,7 @@ packages:
   /arktype@1.0.29-alpha:
     resolution: {integrity: sha512-glMLgVhIQRSkR3tymiS+POAcWVJH09sfrgic0jHnyFL8BlhHAJZX2BzdImU9zYr1y9NBqy+U93ZNrRTHXsKRDw==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /array-union@2.1.0:
@@ -1809,19 +2071,19 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
-  /autoprefixer@10.4.17(postcss@8.4.33):
+  /autoprefixer@10.4.17(postcss@8.4.35):
     resolution: {integrity: sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.22.3
-      caniuse-lite: 1.0.30001581
+      browserslist: 4.23.0
+      caniuse-lite: 1.0.30001588
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.33
+      postcss: 8.4.35
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -1865,7 +2127,7 @@ packages:
       bare-events: 2.2.0
       bare-os: 2.2.0
       bare-path: 2.1.0
-      streamx: 2.16.0
+      streamx: 2.16.1
     dev: true
     optional: true
 
@@ -1903,25 +2165,25 @@ packages:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
 
-  /bits-ui@0.18.1(svelte@4.2.9):
+  /bits-ui@0.18.1(svelte@4.2.11):
     resolution: {integrity: sha512-6junivBQ3EIHeF9j8wDa5pgzegtOwaI61ny4X8F7h2SIJi4RJWwZknkT7O5qPLeGoIYNeYV7N6EOBrr1w9/Mxg==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      '@internationalized/date': 3.5.1
-      '@melt-ui/svelte': 0.71.2(svelte@4.2.9)
+      '@internationalized/date': 3.5.2
+      '@melt-ui/svelte': 0.71.2(svelte@4.2.11)
       nanoid: 5.0.5
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
-  /bits-ui@0.9.9(svelte@4.2.9):
+  /bits-ui@0.9.9(svelte@4.2.11):
     resolution: {integrity: sha512-LkdkyTtpXdkjBzPZJVJgpcre4fut6DONoprMfadHFo82HNUhph+02CxDjYEcZcThb5z4YjSxMlCYvQPZm+YtfQ==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      '@melt-ui/svelte': 0.61.2(svelte@4.2.9)
-      nanoid: 5.0.4
-      svelte: 4.2.9
+      '@melt-ui/svelte': 0.61.2(svelte@4.2.11)
+      nanoid: 5.0.5
+      svelte: 4.2.11
     dev: false
 
   /bl@4.1.0:
@@ -1968,15 +2230,15 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
-  /browserslist@4.22.3:
-    resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==}
+  /browserslist@4.23.0:
+    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001581
-      electron-to-chromium: 1.4.648
+      caniuse-lite: 1.0.30001588
+      electron-to-chromium: 1.4.676
       node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.22.3)
+      update-browserslist-db: 1.0.13(browserslist@4.23.0)
     dev: true
 
   /buffer-crc32@0.2.13:
@@ -1985,6 +2247,7 @@ packages:
 
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: true
     optional: true
 
   /buffer@5.7.1:
@@ -2040,10 +2303,11 @@ packages:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
     requiresBuild: true
+    dev: true
     optional: true
 
-  /caniuse-lite@1.0.30001581:
-    resolution: {integrity: sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==}
+  /caniuse-lite@1.0.30001588:
+    resolution: {integrity: sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==}
     dev: true
 
   /chalk@2.4.2:
@@ -2092,8 +2356,8 @@ packages:
       parse5-htmlparser2-tree-adapter: 7.0.0
     dev: true
 
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
     dependencies:
       anymatch: 3.1.3
@@ -2194,16 +2458,16 @@ packages:
   /clsx@2.1.0:
     resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
     engines: {node: '>=6'}
-    dev: false
+    dev: true
 
-  /cmdk-sv@0.0.13(svelte@4.2.9):
+  /cmdk-sv@0.0.13(svelte@4.2.11):
     resolution: {integrity: sha512-WrYn0MMdVyzJx+KuOQy028/7mv+uMwO1cxVBM0uJ4KA+50PX792epsj8Yw3It8WfWR8Rae7siBCg54mIAlKsiw==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      bits-ui: 0.9.9(svelte@4.2.9)
-      nanoid: 5.0.4
-      svelte: 4.2.9
+      bits-ui: 0.9.9(svelte@4.2.11)
+      nanoid: 5.0.5
+      svelte: 4.2.11
     dev: false
 
   /code-red@1.0.4:
@@ -2308,6 +2572,7 @@ packages:
   /cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
+    dev: true
 
   /cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
@@ -2419,6 +2684,7 @@ packages:
   /dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /debug@2.6.9:
@@ -2442,6 +2708,7 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
+    dev: true
 
   /decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
@@ -2457,6 +2724,7 @@ packages:
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /defer-to-connect@2.0.1:
     resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
@@ -2511,6 +2779,7 @@ packages:
 
   /devalue@4.3.2:
     resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
+    dev: true
 
   /devtools-protocol@0.0.1232444:
     resolution: {integrity: sha512-pM27vqEfxSxRkTMnF+XCmxSEb6duO5R+t8A9DEEJgy4Wz2RVanje2mmj99B6A3zv2r/qGfYlOvYznUhuokizmg==}
@@ -2577,8 +2846,8 @@ packages:
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  /electron-to-chromium@1.4.648:
-    resolution: {integrity: sha512-EmFMarXeqJp9cUKu/QEciEApn0S/xRcpZWuAm32U7NgoZCimjsilKXHRO9saeEW55eHZagIDg6XTUOv32w9pjg==}
+  /electron-to-chromium@1.4.676:
+    resolution: {integrity: sha512-uHt4FB8SeYdhcOsj2ix/C39S7sPSNFJpzShjxGOm1KdF4MHyGqGi389+T5cErsodsijojXilYaHIKKqJfqh7uQ==}
     dev: true
 
   /emoji-regex@8.0.0:
@@ -2621,15 +2890,16 @@ packages:
     resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
     dev: true
 
-  /esbuild-runner@2.2.2(esbuild@0.19.12):
+  /esbuild-runner@2.2.2(esbuild@0.20.1):
     resolution: {integrity: sha512-fRFVXcmYVmSmtYm2mL8RlUASt2TDkGh3uRcvHFOKNr/T58VrfVeKD9uT9nlgxk96u0LS0ehS/GY7Da/bXWKkhw==}
     hasBin: true
     peerDependencies:
       esbuild: '*'
     dependencies:
-      esbuild: 0.19.12
+      esbuild: 0.20.1
       source-map-support: 0.5.21
       tslib: 2.4.0
+    dev: true
     optional: true
 
   /esbuild@0.19.12:
@@ -2661,9 +2931,42 @@ packages:
       '@esbuild/win32-arm64': 0.19.12
       '@esbuild/win32-ia32': 0.19.12
       '@esbuild/win32-x64': 0.19.12
+    dev: true
 
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+  /esbuild@0.20.1:
+    resolution: {integrity: sha512-OJwEgrpWm/PCMsLVWXKqvcjme3bHNpOgN7Tb6cQnR5n0TPbQx1/Xrn7rqM+wn17bYeT6MGB5sn1Bh5YiGi70nA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.20.1
+      '@esbuild/android-arm': 0.20.1
+      '@esbuild/android-arm64': 0.20.1
+      '@esbuild/android-x64': 0.20.1
+      '@esbuild/darwin-arm64': 0.20.1
+      '@esbuild/darwin-x64': 0.20.1
+      '@esbuild/freebsd-arm64': 0.20.1
+      '@esbuild/freebsd-x64': 0.20.1
+      '@esbuild/linux-arm': 0.20.1
+      '@esbuild/linux-arm64': 0.20.1
+      '@esbuild/linux-ia32': 0.20.1
+      '@esbuild/linux-loong64': 0.20.1
+      '@esbuild/linux-mips64el': 0.20.1
+      '@esbuild/linux-ppc64': 0.20.1
+      '@esbuild/linux-riscv64': 0.20.1
+      '@esbuild/linux-s390x': 0.20.1
+      '@esbuild/linux-x64': 0.20.1
+      '@esbuild/netbsd-x64': 0.20.1
+      '@esbuild/openbsd-x64': 0.20.1
+      '@esbuild/sunos-x64': 0.20.1
+      '@esbuild/win32-arm64': 0.20.1
+      '@esbuild/win32-ia32': 0.20.1
+      '@esbuild/win32-x64': 0.20.1
+    dev: true
+    optional: true
+
+  /escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
     dev: true
 
@@ -2712,7 +3015,7 @@ packages:
       eslint: 8.56.0
     dev: true
 
-  /eslint-plugin-svelte@2.35.1(eslint@8.56.0)(svelte@4.2.9):
+  /eslint-plugin-svelte@2.35.1(eslint@8.56.0)(svelte@4.2.11):
     resolution: {integrity: sha512-IF8TpLnROSGy98Z3NrsKXWDSCbNY2ReHDcrYTuXZMbfX7VmESISR78TWgO9zdg4Dht1X8coub5jKwHzP0ExRug==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2729,13 +3032,13 @@ packages:
       eslint-compat-utils: 0.1.2(eslint@8.56.0)
       esutils: 2.0.3
       known-css-properties: 0.29.0
-      postcss: 8.4.33
-      postcss-load-config: 3.1.4(postcss@8.4.33)
-      postcss-safe-parser: 6.0.0(postcss@8.4.33)
+      postcss: 8.4.35
+      postcss-load-config: 3.1.4(postcss@8.4.35)
+      postcss-safe-parser: 6.0.0(postcss@8.4.35)
       postcss-selector-parser: 6.0.15
-      semver: 7.5.4
-      svelte: 4.2.9
-      svelte-eslint-parser: 0.33.1(svelte@4.2.9)
+      semver: 7.6.0
+      svelte: 4.2.11
+      svelte-eslint-parser: 0.33.1(svelte@4.2.11)
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -2784,7 +3087,7 @@ packages:
       glob-parent: 6.0.2
       globals: 13.24.0
       graphemer: 1.4.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -2803,6 +3106,7 @@ packages:
 
   /esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
+    dev: true
 
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -2922,8 +3226,8 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: true
 
-  /fastq@1.17.0:
-    resolution: {integrity: sha512-zGygtijUMT7jnk3h26kUms3BkSDp4IfIKjmnqI2tvx6nuBfiF1UqOxbnLfzdv+apBy+53oaImsKtMw/xYbW+1w==}
+  /fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
     dependencies:
       reusify: 1.0.4
 
@@ -3007,17 +3311,16 @@ packages:
       mime-types: 2.1.35
     dev: true
 
-  /formsnap@0.4.3(svelte@4.2.9)(sveltekit-superforms@2.3.0)(zod@3.22.4):
-    resolution: {integrity: sha512-PWVq78XVUHhAU1tcVGKeGamk6B4Opkk1uVNRW2YofiQpnA5Bry1c3TQjB9cVDw5u4oAwmDvIoAzVHlrAIgc+tw==}
+  /formsnap@0.5.0(svelte@4.2.11)(sveltekit-superforms@2.3.0):
+    resolution: {integrity: sha512-T2S8oKhJwW/14hJoX5lUOrIzuE5WNH8JVLvjY5oAnTw+FP6AprjCZZLLJuxWW13ktJcy3JJRohAwAjmB1nxtwA==}
     peerDependencies:
       svelte: ^4.0.0
-      sveltekit-superforms: ^1.7.1
-      zod: ^3.22.2
+      sveltekit-superforms: ^2.3.0
     dependencies:
-      svelte: 4.2.9
-      sveltekit-superforms: 2.3.0(@sveltejs/kit@2.5.0)(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.19.12)(svelte@4.2.9)
-      zod: 3.22.4
-    dev: false
+      nanoid: 5.0.6
+      svelte: 4.2.11
+      sveltekit-superforms: 2.3.0(@sveltejs/kit@2.5.0)(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.20.1)(svelte@4.2.11)
+    dev: true
 
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
@@ -3155,6 +3458,7 @@ packages:
 
   /globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+    dev: true
 
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -3163,7 +3467,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.0
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -3174,13 +3478,14 @@ packages:
     dependencies:
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.0
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 4.0.0
     dev: true
 
   /globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    dev: true
 
   /got@11.8.6:
     resolution: {integrity: sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==}
@@ -3207,8 +3512,8 @@ packages:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
     dev: true
 
-  /h3@1.10.1:
-    resolution: {integrity: sha512-UBAUp47hmm4BB5/njB4LrEa9gpuvZj4/Qf/ynSMzO6Ku2RXaouxEfiG2E2IFnv6fxbhAkzjasDxmo6DFdEeXRg==}
+  /h3@1.10.2:
+    resolution: {integrity: sha512-r1iNNcFGL4G9pL3lgYxwX0O2ZmqdKqhILAJsnlw5icn5I1QHnADM4TgVdYRtHUqy+NntVpHIEFwnw/XCbebICg==}
     dependencies:
       cookie-es: 1.0.0
       defu: 6.1.4
@@ -3231,8 +3536,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /hasown@2.0.0:
-    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
+  /hasown@2.0.1:
+    resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==}
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
@@ -3315,8 +3620,8 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
 
-  /ignore@5.3.0:
-    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
+  /ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
     dev: true
 
@@ -3334,6 +3639,7 @@ packages:
 
   /import-meta-resolve@4.0.0:
     resolution: {integrity: sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==}
+    dev: true
 
   /imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -3387,7 +3693,7 @@ packages:
   /is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
-      hasown: 2.0.0
+      hasown: 2.0.1
 
   /is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
@@ -3501,6 +3807,7 @@ packages:
       '@sideway/address': 4.1.5
       '@sideway/formula': 3.0.1
       '@sideway/pinpoint': 2.0.0
+    dev: true
     optional: true
 
   /jpeg-js@0.4.4:
@@ -3569,6 +3876,7 @@ packages:
 
   /just-clone@6.2.0:
     resolution: {integrity: sha512-1IynUYEc/HAwxhi3WDpIpxJbZpMCvvrrmZVqvj9EhpvbH8lls7HhdhiByjL7DkAaWlLIzpC0Xc/VPvy/UxLNjA==}
+    dev: true
 
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
@@ -3579,6 +3887,7 @@ packages:
   /kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
+    dev: true
 
   /known-css-properties@0.29.0:
     resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==}
@@ -3664,8 +3973,8 @@ packages:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  /lilconfig@3.0.0:
-    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
+  /lilconfig@3.1.1:
+    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
     engines: {node: '>=14'}
 
   /lines-and-columns@1.2.4:
@@ -3683,7 +3992,7 @@ packages:
       crossws: 0.1.1
       defu: 6.1.4
       get-port-please: 3.1.2
-      h3: 1.10.1
+      h3: 1.10.2
       http-shutdown: 1.2.2
       jiti: 1.21.0
       mlly: 1.5.0
@@ -3764,12 +4073,12 @@ packages:
     resolution: {integrity: sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==}
     dev: true
 
-  /lucide-svelte@0.334.0(svelte@4.2.9):
+  /lucide-svelte@0.334.0(svelte@4.2.11):
     resolution: {integrity: sha512-wY5pI3uhT3PrmMLSL37Pv5xb4jXyZez3TEHFyd/5Rlyw3lZrLcdM4iVVLuwzQg7XmJco/S8LJNVaAuJ0iX7WqA==}
     peerDependencies:
       svelte: ^3 || ^4 || ^5.0.0-next.42
     dependencies:
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
   /magic-string@0.27.0:
@@ -3779,18 +4088,11 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /magic-string@0.30.5:
-    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-
   /magic-string@0.30.7:
     resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -3808,6 +4110,7 @@ packages:
 
   /memoize-weak@1.0.2:
     resolution: {integrity: sha512-gj39xkrjEw7nCn4nJ1M5ms6+MyMlyiGmttzsqAUsAKn6bYKwuTHh/AO3cKPF8IBrTIYTxb0wWXFs3E//Y8VoWQ==}
+    dev: true
 
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -3910,21 +4213,23 @@ packages:
       ufo: 1.4.0
     dev: true
 
-  /mode-watcher@0.2.1(svelte@4.2.9):
+  /mode-watcher@0.2.1(svelte@4.2.11):
     resolution: {integrity: sha512-HLmJgG5kmJCFR/+rcG2te54HjIxqk7BTAsFnsygZR5hcOYlhLEJQ0V8rh1axv2JQIbOAZs1yPlUBSpVATRFtUw==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
+    dev: true
 
   /mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
+    dev: true
 
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
@@ -3932,6 +4237,7 @@ packages:
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
 
   /mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
@@ -3951,18 +4257,18 @@ packages:
     hasBin: true
     dev: false
 
-  /nanoid@5.0.4:
-    resolution: {integrity: sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-    dev: false
-
   /nanoid@5.0.5:
     resolution: {integrity: sha512-/Veqm+QKsyMY3kqi4faWplnY1u+VuKO3dD2binyPIybP31DRO29bPF+1mszgLnrR2KqSLceFLBNw0zmvDzN1QQ==}
     engines: {node: ^18 || >=20}
     hasBin: true
     dev: false
 
+  /nanoid@5.0.6:
+    resolution: {integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: true
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -4041,6 +4347,7 @@ packages:
     resolution: {integrity: sha512-uVFpKhj5MheNBJRTiMZ9pE/7hD1QTeEvugSJW/OmLzAp78PB5O6adfMNTvmfKhXBkvCzC+rqifWcVYpGFwTjnw==}
     engines: {node: '>=14.16'}
     requiresBuild: true
+    dev: true
     optional: true
 
   /npm-run-path@5.2.0:
@@ -4300,31 +4607,31 @@ packages:
       pathe: 1.1.2
     dev: true
 
-  /pocketbase@0.21.0:
-    resolution: {integrity: sha512-WGA5qxW9jzwOTx0i3FNhkKBlT2F5EvC8qZDYv14SB3BeOZVAqs6wMTj7vAXD52V0Fg8zF4XPHJCAJK04fw1rqg==}
+  /pocketbase@0.21.1:
+    resolution: {integrity: sha512-0PvCP4pKtxsV9kwldEGyibEvhwOcx9jSCrz3WN5CgPILJfM0z76f1op9WE8/8UgikDsMdRsc5iBLfKintrJS1g==}
     dev: false
 
-  /postcss-import@15.1.0(postcss@8.4.33):
+  /postcss-import@15.1.0(postcss@8.4.35):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.35
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  /postcss-js@4.0.1(postcss@8.4.33):
+  /postcss-js@4.0.1(postcss@8.4.35):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.33
+      postcss: 8.4.35
 
-  /postcss-load-config@3.1.4(postcss@8.4.33):
+  /postcss-load-config@3.1.4(postcss@8.4.35):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -4337,11 +4644,11 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.33
+      postcss: 8.4.35
       yaml: 1.10.2
     dev: true
 
-  /postcss-load-config@4.0.2(postcss@8.4.33):
+  /postcss-load-config@4.0.2(postcss@8.4.35):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -4353,12 +4660,12 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      lilconfig: 3.0.0
-      postcss: 8.4.33
+      lilconfig: 3.1.1
+      postcss: 8.4.35
       yaml: 2.3.4
 
-  /postcss-load-config@5.0.2(postcss@8.4.33):
-    resolution: {integrity: sha512-Q8QR3FYbqOKa0bnC1UQ2bFq9/ulHX5Bi34muzitMr8aDtUelO5xKeJEYC/5smE0jNE9zdB/NBnOwXKexELbRlw==}
+  /postcss-load-config@5.0.3(postcss@8.4.35):
+    resolution: {integrity: sha512-90pBBI5apUVruIEdCxZic93Wm+i9fTrp7TXbgdUCH+/L+2WnfpITSpq5dFU/IPvbv7aNiMlQISpUkAm3fEcvgQ==}
     engines: {node: '>= 18'}
     peerDependencies:
       jiti: '>=1.21.0'
@@ -4369,36 +4676,36 @@ packages:
       postcss:
         optional: true
     dependencies:
-      lilconfig: 3.0.0
-      postcss: 8.4.33
+      lilconfig: 3.1.1
+      postcss: 8.4.35
       yaml: 2.3.4
     dev: true
 
-  /postcss-nested@6.0.1(postcss@8.4.33):
+  /postcss-nested@6.0.1(postcss@8.4.35):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.35
       postcss-selector-parser: 6.0.15
 
-  /postcss-safe-parser@6.0.0(postcss@8.4.33):
+  /postcss-safe-parser@6.0.0(postcss@8.4.35):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.3.3
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.35
     dev: true
 
-  /postcss-scss@4.0.9(postcss@8.4.33):
+  /postcss-scss@4.0.9(postcss@8.4.35):
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.29
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.35
     dev: true
 
   /postcss-selector-parser@6.0.15:
@@ -4411,8 +4718,8 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  /postcss@8.4.33:
-    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
+  /postcss@8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.7
@@ -4424,17 +4731,17 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@4.2.9):
-    resolution: {integrity: sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==}
+  /prettier-plugin-svelte@3.2.1(prettier@3.2.5)(svelte@4.2.11):
+    resolution: {integrity: sha512-ENAPbIxASf2R79IZwgkG5sBdeNA9kLRlXVvKKmTXh79zWTy0KKoT86XO2pHrTitUPINd+iXWy12MRmgzKGVckA==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
     dependencies:
-      prettier: 3.2.4
-      svelte: 4.2.9
+      prettier: 3.2.5
+      svelte: 4.2.11
     dev: true
 
-  /prettier-plugin-tailwindcss@0.5.11(prettier-plugin-svelte@3.1.2)(prettier@3.2.4):
+  /prettier-plugin-tailwindcss@0.5.11(prettier-plugin-svelte@3.2.1)(prettier@3.2.5):
     resolution: {integrity: sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
@@ -4483,12 +4790,12 @@ packages:
       prettier-plugin-twig-melody:
         optional: true
     dependencies:
-      prettier: 3.2.4
-      prettier-plugin-svelte: 3.1.2(prettier@3.2.4)(svelte@4.2.9)
+      prettier: 3.2.5
+      prettier-plugin-svelte: 3.2.1(prettier@3.2.5)(svelte@4.2.11)
     dev: true
 
-  /prettier@3.2.4:
-    resolution: {integrity: sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==}
+  /prettier@3.2.5:
+    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
@@ -4501,6 +4808,7 @@ packages:
   /property-expr@2.0.6:
     resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /proxy-agent@6.3.1:
@@ -4741,27 +5049,28 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
-  /rollup@4.9.6:
-    resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==}
+  /rollup@4.12.0:
+    resolution: {integrity: sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
       '@types/estree': 1.0.5
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.9.6
-      '@rollup/rollup-android-arm64': 4.9.6
-      '@rollup/rollup-darwin-arm64': 4.9.6
-      '@rollup/rollup-darwin-x64': 4.9.6
-      '@rollup/rollup-linux-arm-gnueabihf': 4.9.6
-      '@rollup/rollup-linux-arm64-gnu': 4.9.6
-      '@rollup/rollup-linux-arm64-musl': 4.9.6
-      '@rollup/rollup-linux-riscv64-gnu': 4.9.6
-      '@rollup/rollup-linux-x64-gnu': 4.9.6
-      '@rollup/rollup-linux-x64-musl': 4.9.6
-      '@rollup/rollup-win32-arm64-msvc': 4.9.6
-      '@rollup/rollup-win32-ia32-msvc': 4.9.6
-      '@rollup/rollup-win32-x64-msvc': 4.9.6
+      '@rollup/rollup-android-arm-eabi': 4.12.0
+      '@rollup/rollup-android-arm64': 4.12.0
+      '@rollup/rollup-darwin-arm64': 4.12.0
+      '@rollup/rollup-darwin-x64': 4.12.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.12.0
+      '@rollup/rollup-linux-arm64-gnu': 4.12.0
+      '@rollup/rollup-linux-arm64-musl': 4.12.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.12.0
+      '@rollup/rollup-linux-x64-gnu': 4.12.0
+      '@rollup/rollup-linux-x64-musl': 4.12.0
+      '@rollup/rollup-win32-arm64-msvc': 4.12.0
+      '@rollup/rollup-win32-ia32-msvc': 4.12.0
+      '@rollup/rollup-win32-x64-msvc': 4.12.0
       fsevents: 2.3.3
+    dev: true
 
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -4773,6 +5082,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mri: 1.2.0
+    dev: true
 
   /safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
@@ -4815,8 +5125,8 @@ packages:
     hasBin: true
     dev: true
 
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+  /semver@7.6.0:
+    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -4825,6 +5135,7 @@ packages:
 
   /set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
+    dev: true
 
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -4855,6 +5166,7 @@ packages:
       '@polka/url': 1.0.0-next.24
       mrmime: 2.0.0
       totalist: 3.0.1
+    dev: true
 
   /sitemapper@3.2.8:
     resolution: {integrity: sha512-xs1W76bRtJYn6WLQePX1QQaBBjhZgaimu1LbskJ9/8nv71Y+YSM3XRMdLYSiLeObCKuUh45zk+AOUUMKbVMbmg==}
@@ -4924,11 +5236,14 @@ packages:
     dependencies:
       buffer-from: 1.1.2
       source-map: 0.6.1
+    dev: true
     optional: true
 
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dev: true
     optional: true
 
   /speedline-core@1.4.3:
@@ -4948,8 +5263,8 @@ packages:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
     dev: true
 
-  /streamx@2.16.0:
-    resolution: {integrity: sha512-a7Fi0PoUeusrUcMS4+HxivnZqYsw2MFEP841TIyLxTcEIucHcJsk+0ARcq3tGq1xDn+xK7sKHetvfMzI1/CzMA==}
+  /streamx@2.16.1:
+    resolution: {integrity: sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==}
     dependencies:
       fast-fifo: 1.3.2
       queue-tick: 1.0.1
@@ -5031,6 +5346,7 @@ packages:
     resolution: {integrity: sha512-8iTn3oSS8nRGn+C2pgXSKPI3jmpm6FExNazNpjvqS6ZUJQCej3PUXEKM8NjHBOs54ExM+LPW/FBRhymrdcCiSg==}
     engines: {node: '>=14.0.0'}
     requiresBuild: true
+    dev: true
     optional: true
 
   /supports-color@5.5.0:
@@ -5051,20 +5367,20 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check@3.6.3(@babel/core@7.23.9)(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9):
-    resolution: {integrity: sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==}
+  /svelte-check@3.6.4(@babel/core@7.23.9)(postcss-load-config@5.0.3)(postcss@8.4.35)(svelte@4.2.11):
+    resolution: {integrity: sha512-mY/dqucqm46p72M8yZmn81WPZx9mN6uuw8UVfR3ZKQeLxQg5HDGO3HHm5AZuWZPYNMLJ+TRMn+TeN53HfQ/vsw==}
     hasBin: true
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
     dependencies:
       '@jridgewell/trace-mapping': 0.3.22
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       fast-glob: 3.3.2
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      svelte: 4.2.9
-      svelte-preprocess: 5.1.3(@babel/core@7.23.9)(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9)(typescript@5.3.3)
+      svelte: 4.2.11
+      svelte-preprocess: 5.1.3(@babel/core@7.23.9)(postcss-load-config@5.0.3)(postcss@8.4.35)(svelte@4.2.11)(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -5078,7 +5394,7 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-eslint-parser@0.33.1(svelte@4.2.9):
+  /svelte-eslint-parser@0.33.1(svelte@4.2.11):
     resolution: {integrity: sha512-vo7xPGTlKBGdLH8T5L64FipvTrqv3OQRx9d2z5X05KKZDlF4rQk8KViZO4flKERY+5BiVdOh7zZ7JGJWo5P0uA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5090,39 +5406,40 @@ packages:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      postcss: 8.4.33
-      postcss-scss: 4.0.9(postcss@8.4.33)
-      svelte: 4.2.9
+      postcss: 8.4.35
+      postcss-scss: 4.0.9(postcss@8.4.35)
+      svelte: 4.2.11
     dev: true
 
-  /svelte-headless-table@0.18.1(svelte@4.2.9):
-    resolution: {integrity: sha512-pcZIi36u8RV9B3m0oG6000az7tvT6CCK+c8qBUuNUQSChsfJySC5ryGdJSTFlAYBVRGUgZlqYOKGUgSbOfIrnA==}
+  /svelte-headless-table@0.18.2(svelte@4.2.11):
+    resolution: {integrity: sha512-dnDTaXW5CNzRUjHVbc/Hb0Zv80zU4VcIUnAja6OuZriXvim1AqcWYQCHPRzBGwqj1m3YEHHNvspSzY0o5HzA0A==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      svelte: 4.2.9
-      svelte-keyed: 2.0.0(svelte@4.2.9)
-      svelte-render: 2.0.0(svelte@4.2.9)
-      svelte-subscribe: 2.0.1(svelte@4.2.9)
+      svelte: 4.2.11
+      svelte-keyed: 2.0.0(svelte@4.2.11)
+      svelte-render: 2.0.1(svelte@4.2.11)
+      svelte-subscribe: 2.0.1(svelte@4.2.11)
     dev: false
 
-  /svelte-hmr@0.15.3(svelte@4.2.9):
+  /svelte-hmr@0.15.3(svelte@4.2.11):
     resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
     dependencies:
-      svelte: 4.2.9
+      svelte: 4.2.11
+    dev: true
 
-  /svelte-keyed@2.0.0(svelte@4.2.9):
+  /svelte-keyed@2.0.0(svelte@4.2.11):
     resolution: {integrity: sha512-7TeEn+QbJC2OJrHiuM0T8vMBkms3DNpTE+Ir+NtnVBnBMA78aL4f1ft9t0Hn/pBbD/TnIXi4YfjFRAgtN+DZ5g==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
-  /svelte-preprocess@5.1.3(@babel/core@7.23.9)(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9)(typescript@5.3.3):
+  /svelte-preprocess@5.1.3(@babel/core@7.23.9)(postcss-load-config@5.0.3)(postcss@8.4.35)(svelte@4.2.11)(typescript@5.3.3):
     resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
     engines: {node: '>= 16.0.0', pnpm: ^8.0.0}
     requiresBuild: true
@@ -5163,42 +5480,42 @@ packages:
       '@babel/core': 7.23.9
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
-      magic-string: 0.30.5
-      postcss: 8.4.33
-      postcss-load-config: 5.0.2(postcss@8.4.33)
+      magic-string: 0.30.7
+      postcss: 8.4.35
+      postcss-load-config: 5.0.3(postcss@8.4.35)
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.2.9
+      svelte: 4.2.11
       typescript: 5.3.3
     dev: true
 
-  /svelte-render@2.0.0(svelte@4.2.9):
-    resolution: {integrity: sha512-YWMwXGlUlnlb8QhEd138Kmay2KfU6sE7jj3epoYZuHe3M2voGdXfgqYJY7gGizW55N0zDWtuRaY3Rh6PGcGQyQ==}
+  /svelte-render@2.0.1(svelte@4.2.11):
+    resolution: {integrity: sha512-RpB0SurwXm4xhjvHHtjeqMmvd645FURb79GFOotScOSqnKK5vpqBgoBPGC0pp+E/eZgDSQ9rRAdn/+N4ys1mXQ==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      svelte: 4.2.9
-      svelte-subscribe: 2.0.1(svelte@4.2.9)
+      svelte: 4.2.11
+      svelte-subscribe: 2.0.1(svelte@4.2.11)
     dev: false
 
-  /svelte-sonner@0.3.17(svelte@4.2.9):
-    resolution: {integrity: sha512-jociRGESILpHi6fIIcqGYE1bWAfK4ZeTLHuXxNgGMhG1FwhNRIK1bsCbXEl8/AjRV8aiNXtkS/+IlQtvb2jR9g==}
+  /svelte-sonner@0.3.18(svelte@4.2.11):
+    resolution: {integrity: sha512-DkpbeLB1yZ6CQ0vg/tpFUv2KGxdugODBjZYk9KWsxIAMOsnKg2VEyV2h1ycDztaEbiwoIGBObPvv+MG/4z1HSg==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
-  /svelte-subscribe@2.0.1(svelte@4.2.9):
+  /svelte-subscribe@2.0.1(svelte@4.2.11):
     resolution: {integrity: sha512-eKXIjLxB4C7eQWPqKEdxcGfNXm2g/qJ67zmEZK/GigCZMfrTR3m7DPY93R6MX+5uoqM1FRYxl8LZ1oy4URWi2A==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      svelte: 4.2.9
+      svelte: 4.2.11
     dev: false
 
-  /svelte@4.2.9:
-    resolution: {integrity: sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==}
+  /svelte@4.2.11:
+    resolution: {integrity: sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==}
     engines: {node: '>=16'}
     dependencies:
       '@ampproject/remapping': 2.2.1
@@ -5213,24 +5530,41 @@ packages:
       estree-walker: 3.0.3
       is-reference: 3.0.2
       locate-character: 3.0.0
-      magic-string: 0.30.5
+      magic-string: 0.30.7
       periscopic: 3.1.0
 
-  /sveltekit-superforms@2.3.0(@sveltejs/kit@2.5.0)(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.19.12)(svelte@4.2.9):
+  /sveltekit-superforms@2.3.0(@sveltejs/kit@2.5.0)(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.20.1)(svelte@4.2.11):
     resolution: {integrity: sha512-ahToo6eEJfckRwl9TGHqjJjBq92bKXzex3YiTvH0bDYQ1G/ML4QYPAbUvQuEEG7UcFv8kRjPh8GcEjrxstI3eg==}
     requiresBuild: true
     peerDependencies:
       '@sveltejs/kit': 1.x || 2.x
       svelte: 3.x || 4.x || >=5.0.0-next.51
+    peerDependenciesMeta:
+      '@sinclair/typebox':
+        optional: true
+      '@vinejs/vine':
+        optional: true
+      arktype:
+        optional: true
+      joi:
+        optional: true
+      superstruct:
+        optional: true
+      valibot:
+        optional: true
+      yup:
+        optional: true
+      zod:
+        optional: true
     dependencies:
-      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.9)(vite@5.0.12)
+      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.3)
       devalue: 4.3.2
       just-clone: 6.2.0
       memoize-weak: 1.0.2
-      svelte: 4.2.9
+      svelte: 4.2.11
       ts-deepmerge: 7.0.0
     optionalDependencies:
-      '@gcornut/valibot-json-schema': 0.0.22(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.19.12)(valibot@0.28.1)
+      '@gcornut/valibot-json-schema': 0.0.22(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.20.1)(valibot@0.28.1)
       '@sinclair/typebox': 0.32.14
       '@sodaru/yup-to-json-schema': 2.0.1
       '@vinejs/vine': 1.7.1
@@ -5245,6 +5579,7 @@ packages:
       - '@types/json-schema'
       - esbuild
       - esbuild-runner
+    dev: true
 
   /system-architecture@0.1.0:
     resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
@@ -5278,7 +5613,7 @@ packages:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.2
@@ -5290,11 +5625,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.33
-      postcss-import: 15.1.0(postcss@8.4.33)
-      postcss-js: 4.0.1(postcss@8.4.33)
-      postcss-load-config: 4.0.2(postcss@8.4.33)
-      postcss-nested: 6.0.1(postcss@8.4.33)
+      postcss: 8.4.35
+      postcss-import: 15.1.0(postcss@8.4.35)
+      postcss-js: 4.0.1(postcss@8.4.35)
+      postcss-load-config: 4.0.2(postcss@8.4.35)
+      postcss-nested: 6.0.1(postcss@8.4.35)
       postcss-selector-parser: 6.0.15
       resolve: 1.22.8
       sucrase: 3.35.0
@@ -5344,7 +5679,7 @@ packages:
     dependencies:
       b4a: 1.6.6
       fast-fifo: 1.3.2
-      streamx: 2.16.0
+      streamx: 2.16.1
     dev: true
 
   /text-table@0.2.0:
@@ -5373,6 +5708,7 @@ packages:
   /tiny-case@1.0.3:
     resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /tiny-glob@0.2.9:
@@ -5380,6 +5716,7 @@ packages:
     dependencies:
       globalyzer: 0.1.0
       globrex: 0.1.2
+    dev: true
 
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
@@ -5395,11 +5732,13 @@ packages:
   /toposort@2.0.2:
     resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
+    dev: true
 
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
@@ -5411,9 +5750,9 @@ packages:
       utf8-byte-length: 1.0.4
     dev: true
 
-  /ts-api-utils@1.0.3(typescript@5.3.3):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
+  /ts-api-utils@1.2.1(typescript@5.3.3):
+    resolution: {integrity: sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==}
+    engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
@@ -5423,6 +5762,7 @@ packages:
   /ts-deepmerge@7.0.0:
     resolution: {integrity: sha512-WZ/iAJrKDhdINv1WG6KZIGHrZDar6VfhftG1QJFpVbOYZMYJLJOvZOo1amictRXVdBXZIgBHKswMTXzElngprA==}
     engines: {node: '>=14.13.1'}
+    dev: true
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
@@ -5433,6 +5773,7 @@ packages:
 
   /tslib@2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+    dev: true
     optional: true
 
   /tslib@2.6.2:
@@ -5454,6 +5795,7 @@ packages:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
     requiresBuild: true
+    dev: true
 
   /typedarray-to-buffer@3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
@@ -5500,7 +5842,7 @@ packages:
     dependencies:
       acorn: 8.11.3
       estree-walker: 3.0.3
-      magic-string: 0.30.5
+      magic-string: 0.30.7
       unplugin: 1.7.1
     dev: true
 
@@ -5587,7 +5929,7 @@ packages:
     resolution: {integrity: sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==}
     dependencies:
       acorn: 8.11.3
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.6.1
     dev: true
@@ -5616,14 +5958,14 @@ packages:
       - supports-color
     dev: true
 
-  /update-browserslist-db@1.0.13(browserslist@4.22.3):
+  /update-browserslist-db@1.0.13(browserslist@4.23.0):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.22.3
-      escalade: 3.1.1
+      browserslist: 4.23.0
+      escalade: 3.1.2
       picocolors: 1.0.0
     dev: true
 
@@ -5651,12 +5993,14 @@ packages:
   /valibot@0.28.1:
     resolution: {integrity: sha512-zQnjwNJuXk6362Leu0+4eFa/SMwRom3/hEvH6s1EGf3oXIPbo2WFKDra9ymnbVh3clLRvd8hw4sKF5ruI2Lyvw==}
     requiresBuild: true
+    dev: true
     optional: true
 
   /validator@13.11.0:
     resolution: {integrity: sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==}
     engines: {node: '>= 0.10'}
     requiresBuild: true
+    dev: true
     optional: true
 
   /vary@1.1.2:
@@ -5664,8 +6008,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite@5.0.12:
-    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
+  /vite@5.1.3:
+    resolution: {integrity: sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -5693,12 +6037,13 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.19.12
-      postcss: 8.4.33
-      rollup: 4.9.6
+      postcss: 8.4.35
+      rollup: 4.12.0
     optionalDependencies:
       fsevents: 2.3.3
+    dev: true
 
-  /vitefu@0.2.5(vite@5.0.12):
+  /vitefu@0.2.5(vite@5.1.3):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
@@ -5706,7 +6051,8 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 5.0.12
+      vite: 5.1.3
+    dev: true
 
   /vue@3.4.19(typescript@5.3.3):
     resolution: {integrity: sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==}
@@ -5876,7 +6222,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.1
+      escalade: 3.1.2
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
@@ -5904,6 +6250,7 @@ packages:
       tiny-case: 1.0.3
       toposort: 2.0.2
       type-fest: 2.19.0
+    dev: true
     optional: true
 
   /zod-to-json-schema@3.22.4(zod@3.22.4):
@@ -5913,7 +6260,9 @@ packages:
       zod: ^3.22.4
     dependencies:
       zod: 3.22.4
+    dev: true
     optional: true
 
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+    dev: true

From bc515e4c646ab3686bfb0a64ce4fe507051ec78b Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 19:51:35 +0100
Subject: [PATCH 04/18] fix: use correct login keys

---
 src/routes/(auth)/auth/(components)/login-form.svelte    | 8 ++++----
 src/routes/(auth)/auth/(components)/register-form.svelte | 8 ++++----
 src/routes/(auth)/auth/+page.server.ts                   | 4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/routes/(auth)/auth/(components)/login-form.svelte b/src/routes/(auth)/auth/(components)/login-form.svelte
index 132e806..5b569ea 100644
--- a/src/routes/(auth)/auth/(components)/login-form.svelte
+++ b/src/routes/(auth)/auth/(components)/login-form.svelte
@@ -32,10 +32,10 @@
 	>
 		<div class="grid gap-2">
 			<div class="grid gap-2">
-				<Label for="email-username">Email or username</Label>
+				<Label for="emailUsername">Email or username</Label>
 				<Input
-					id="email-login"
-					name="email-username"
+					id="emailUsername"
+					name="emailUsername"
 					type="text"
 					autocapitalize="none"
 					autocomplete="email"
@@ -45,7 +45,7 @@
 			</div>
 			<div class="grid gap-2">
 				<Label for="password">Password</Label>
-				<Input id="password-login" name="password" type="password" disabled={isLoading} />
+				<Input id="password" name="password" type="password" disabled={isLoading} />
 			</div>
 			<Button type="submit" disabled={isLoading}>
 				{#if isLoading}
diff --git a/src/routes/(auth)/auth/(components)/register-form.svelte b/src/routes/(auth)/auth/(components)/register-form.svelte
index b71ba1d..3baeda4 100644
--- a/src/routes/(auth)/auth/(components)/register-form.svelte
+++ b/src/routes/(auth)/auth/(components)/register-form.svelte
@@ -34,7 +34,7 @@
       <div class="grid gap-2">
         <Label for="email">Email</Label>
         <Input
-          id="email-register"
+          id="email"
           name="email"
           type="email"
           autocapitalize="none"
@@ -45,12 +45,12 @@
       </div>
       <div class="grid gap-2">
         <Label for="password">Password</Label>
-        <Input id="password-register" name="password" type="password" disabled={isLoading} />
+        <Input id="password" name="password" type="password" disabled={isLoading} />
       </div>
       <div class="grid gap-2">
-        <Label for="password">Confirm password</Label>
+        <Label for="passwordConfirm">Confirm password</Label>
         <Input
-          id="confirm-password-register"
+          id="passwordConfirm"
           name="passwordConfirm"
           type="password"
           disabled={isLoading}
diff --git a/src/routes/(auth)/auth/+page.server.ts b/src/routes/(auth)/auth/+page.server.ts
index aa1c564..9649e65 100644
--- a/src/routes/(auth)/auth/+page.server.ts
+++ b/src/routes/(auth)/auth/+page.server.ts
@@ -13,9 +13,9 @@ export const actions = {
 	}) => {
 		const body = Object.fromEntries(await request.formData());
 		try {
-			const email = body.email.toString();
+			const emailUsername = body.emailUsername.toString();
 			const password = body.password.toString();
-			await locals.pocketBase.collection('users').authWithPassword(email, password);
+			await locals.pocketBase.collection('users').authWithPassword(emailUsername, password);
 			if (!locals.pocketBase?.authStore?.model?.verified) {
 				locals.pocketBase.authStore.clear();
 				return {

From 01f2230c02cd932571b6410b14299cfda356f03a Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 20:30:59 +0100
Subject: [PATCH 05/18] feat: add cal

---
 .../ui/calendar/calendar-cell.svelte          | 21 +++++++
 .../ui/calendar/calendar-day.svelte           | 43 ++++++++++++++
 .../ui/calendar/calendar-grid-body.svelte     | 13 +++++
 .../ui/calendar/calendar-grid-head.svelte     | 13 +++++
 .../ui/calendar/calendar-grid-row.svelte      | 13 +++++
 .../ui/calendar/calendar-grid.svelte          | 13 +++++
 .../ui/calendar/calendar-head-cell.svelte     | 16 +++++
 .../ui/calendar/calendar-header.svelte        | 16 +++++
 .../ui/calendar/calendar-heading.svelte       | 19 ++++++
 .../ui/calendar/calendar-months.svelte        | 16 +++++
 .../ui/calendar/calendar-next-button.svelte   | 27 +++++++++
 .../ui/calendar/calendar-prev-button.svelte   | 27 +++++++++
 .../components/ui/calendar/calendar.svelte    | 58 +++++++++++++++++++
 src/lib/components/ui/calendar/index.ts       | 30 ++++++++++
 14 files changed, 325 insertions(+)
 create mode 100644 src/lib/components/ui/calendar/calendar-cell.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-day.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-grid-body.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-grid-head.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-grid-row.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-grid.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-head-cell.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-header.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-heading.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-months.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-next-button.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar-prev-button.svelte
 create mode 100644 src/lib/components/ui/calendar/calendar.svelte
 create mode 100644 src/lib/components/ui/calendar/index.ts

diff --git a/src/lib/components/ui/calendar/calendar-cell.svelte b/src/lib/components/ui/calendar/calendar-cell.svelte
new file mode 100644
index 0000000..1febe35
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.CellProps;
+
+	export let date: $$Props["date"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>
diff --git a/src/lib/components/ui/calendar/calendar-day.svelte b/src/lib/components/ui/calendar/calendar-day.svelte
new file mode 100644
index 0000000..8de8448
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-day.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.DayProps;
+	type $$Events = CalendarPrimitive.DayEvents;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"h-8 w-8 p-0 font-normal",
+		// Today
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>
diff --git a/src/lib/components/ui/calendar/calendar-grid-body.svelte b/src/lib/components/ui/calendar/calendar-grid-body.svelte
new file mode 100644
index 0000000..b790214
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.GridBodyProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>
diff --git a/src/lib/components/ui/calendar/calendar-grid-head.svelte b/src/lib/components/ui/calendar/calendar-grid-head.svelte
new file mode 100644
index 0000000..8be9ae8
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.GridHeadProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>
diff --git a/src/lib/components/ui/calendar/calendar-grid-row.svelte b/src/lib/components/ui/calendar/calendar-grid-row.svelte
new file mode 100644
index 0000000..374ad82
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.GridRowProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>
diff --git a/src/lib/components/ui/calendar/calendar-grid.svelte b/src/lib/components/ui/calendar/calendar-grid.svelte
new file mode 100644
index 0000000..4cdfba7
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.GridProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>
diff --git a/src/lib/components/ui/calendar/calendar-head-cell.svelte b/src/lib/components/ui/calendar/calendar-head-cell.svelte
new file mode 100644
index 0000000..1176f7f
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.HeadCellProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn("w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>
diff --git a/src/lib/components/ui/calendar/calendar-header.svelte b/src/lib/components/ui/calendar/calendar-header.svelte
new file mode 100644
index 0000000..88b8616
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.HeaderProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>
diff --git a/src/lib/components/ui/calendar/calendar-heading.svelte b/src/lib/components/ui/calendar/calendar-heading.svelte
new file mode 100644
index 0000000..51ce98c
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.HeadingProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn("text-sm font-medium", className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>
diff --git a/src/lib/components/ui/calendar/calendar-months.svelte b/src/lib/components/ui/calendar/calendar-months.svelte
new file mode 100644
index 0000000..9fb1326
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-months.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/calendar/calendar-next-button.svelte b/src/lib/components/ui/calendar/calendar-next-button.svelte
new file mode 100644
index 0000000..3782695
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { ChevronRight } from "radix-icons-svelte";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.NextButtonProps;
+	type $$Events = CalendarPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronRight class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>
diff --git a/src/lib/components/ui/calendar/calendar-prev-button.svelte b/src/lib/components/ui/calendar/calendar-prev-button.svelte
new file mode 100644
index 0000000..385efa1
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { ChevronLeft } from "radix-icons-svelte";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.PrevButtonProps;
+	type $$Events = CalendarPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronLeft class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>
diff --git a/src/lib/components/ui/calendar/calendar.svelte b/src/lib/components/ui/calendar/calendar.svelte
new file mode 100644
index 0000000..f31f432
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from ".";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CalendarPrimitive.Props;
+	type $$Events = CalendarPrimitive.Events;
+
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Root
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+>
+	<Calendar.Header>
+		<Calendar.PrevButton />
+		<Calendar.Heading />
+		<Calendar.NextButton />
+	</Calendar.Header>
+	<Calendar.Months>
+		{#each months as month}
+			<Calendar.Grid>
+				<Calendar.GridHead>
+					<Calendar.GridRow class="flex">
+						{#each weekdays as weekday}
+							<Calendar.HeadCell>
+								{weekday.slice(0, 2)}
+							</Calendar.HeadCell>
+						{/each}
+					</Calendar.GridRow>
+				</Calendar.GridHead>
+				<Calendar.GridBody>
+					{#each month.weeks as weekDates}
+						<Calendar.GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<Calendar.Cell {date}>
+									<Calendar.Day {date} month={month.value} />
+								</Calendar.Cell>
+							{/each}
+						</Calendar.GridRow>
+					{/each}
+				</Calendar.GridBody>
+			</Calendar.Grid>
+		{/each}
+	</Calendar.Months>
+</CalendarPrimitive.Root>
diff --git a/src/lib/components/ui/calendar/index.ts b/src/lib/components/ui/calendar/index.ts
new file mode 100644
index 0000000..ab257ab
--- /dev/null
+++ b/src/lib/components/ui/calendar/index.ts
@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};

From 6e12f454b35218dc017f59506962d6ce906d736b Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 20:31:18 +0100
Subject: [PATCH 06/18] feat: add `@internationalized/date`

---
 package.json   | 1 +
 pnpm-lock.yaml | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/package.json b/package.json
index 7d79b08..d10fee4 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@internationalized/date": "^3.5.2",
 		"bits-ui": "^0.18.1",
 		"cmdk-sv": "^0.0.13",
 		"lucide-svelte": "^0.334.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3abe4e..3c0edd5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@internationalized/date':
+    specifier: ^3.5.2
+    version: 3.5.2
   bits-ui:
     specifier: ^0.18.1
     version: 0.18.1(svelte@4.2.11)

From 28721b4ba5133c9e4655fb51b799d3a0ff4bcbf1 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 20:31:40 +0100
Subject: [PATCH 07/18] feat: re-import of settings

---
 .../settings/(components)/avatar-form.svelte  |  85 ---------
 .../settings/(components)/email-form.svelte   | 104 ----------
 .../settings/(components)/name-form.svelte    |  79 --------
 .../(components)/password-form.svelte         |  78 --------
 .../(dashboard)/settings/+layout.svelte       |  35 ----
 .../(dashboard)/settings/+page.server.ts      |  79 --------
 src/routes/(dashboard)/settings/+page.svelte  |  34 ----
 .../settings/appearance/+page.server.ts       |  25 ---
 .../appearance/appearance-form.svelte         | 125 ------------
 .../settings/notifications/+page.server.ts    |  24 ---
 .../notifications/notifications-form.svelte   | 107 -----------
 .../{(dashboard) => (user)}/+layout.server.ts |   0
 .../(components)/data-table-checkbox.svelte   |   0
 .../data-table-column-header.svelte           |   0
 .../data-table-faceted-filter.svelte          |   0
 .../(components)/data-table-pagination.svelte |   0
 .../data-table-priority-cell.svelte           |   0
 .../data-table-row-actions.svelte             |   0
 .../data-table-status-cell.svelte             |   0
 .../(components)/data-table-title-cell.svelte |   0
 .../(components)/data-table-toolbar.svelte    |   0
 .../data-table-view-options.svelte            |   0
 .../dashboard/(components)/data-table.svelte  |   0
 .../dashboard/(components)/index.ts           |   0
 .../dashboard/(data)/data.ts                  |   0
 .../dashboard/(data)/schemas.ts               |   0
 .../dashboard/(data)/tickets.json             |   0
 .../dashboard/+layout.svelte                  |   0
 .../dashboard/+page.svelte                    |   0
 .../settings/(components)/sidebar-nav.svelte  |  23 ++-
 src/routes/(user)/settings/+layout.svelte     |  45 +++++
 src/routes/(user)/settings/+page.server.ts    |  25 +++
 src/routes/(user)/settings/+page.svelte       |  15 ++
 .../(user)/settings/account/+page.server.ts   |  26 +++
 .../(user)/settings/account/+page.svelte      |  18 ++
 .../settings/account/account-form.svelte      | 179 ++++++++++++++++++
 .../settings/appearance/+page.server.ts       |  25 +++
 .../settings/appearance/+page.svelte          |   9 +-
 .../appearance/appearance-form.svelte         | 132 +++++++++++++
 .../(user)/settings/display/+page.server.ts   |  25 +++
 .../(user)/settings/display/+page.svelte      |  17 ++
 .../settings/display/display-form.svelte      |  94 +++++++++
 .../settings/notifications/+page.server.ts    |  25 +++
 .../settings/notifications/+page.svelte       |   6 +-
 .../notifications/notifications-form.svelte   | 145 ++++++++++++++
 .../(user)/settings/profile-form.svelte       | 122 ++++++++++++
 46 files changed, 913 insertions(+), 793 deletions(-)
 delete mode 100644 src/routes/(dashboard)/settings/(components)/avatar-form.svelte
 delete mode 100644 src/routes/(dashboard)/settings/(components)/email-form.svelte
 delete mode 100644 src/routes/(dashboard)/settings/(components)/name-form.svelte
 delete mode 100644 src/routes/(dashboard)/settings/(components)/password-form.svelte
 delete mode 100644 src/routes/(dashboard)/settings/+layout.svelte
 delete mode 100644 src/routes/(dashboard)/settings/+page.server.ts
 delete mode 100644 src/routes/(dashboard)/settings/+page.svelte
 delete mode 100644 src/routes/(dashboard)/settings/appearance/+page.server.ts
 delete mode 100644 src/routes/(dashboard)/settings/appearance/appearance-form.svelte
 delete mode 100644 src/routes/(dashboard)/settings/notifications/+page.server.ts
 delete mode 100644 src/routes/(dashboard)/settings/notifications/notifications-form.svelte
 rename src/routes/{(dashboard) => (user)}/+layout.server.ts (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-checkbox.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-column-header.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-faceted-filter.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-pagination.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-priority-cell.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-row-actions.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-status-cell.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-title-cell.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-toolbar.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table-view-options.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/data-table.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(components)/index.ts (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(data)/data.ts (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(data)/schemas.ts (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/(data)/tickets.json (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/+layout.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/dashboard/+page.svelte (100%)
 rename src/routes/{(dashboard) => (user)}/settings/(components)/sidebar-nav.svelte (51%)
 create mode 100644 src/routes/(user)/settings/+layout.svelte
 create mode 100644 src/routes/(user)/settings/+page.server.ts
 create mode 100644 src/routes/(user)/settings/+page.svelte
 create mode 100644 src/routes/(user)/settings/account/+page.server.ts
 create mode 100644 src/routes/(user)/settings/account/+page.svelte
 create mode 100644 src/routes/(user)/settings/account/account-form.svelte
 create mode 100644 src/routes/(user)/settings/appearance/+page.server.ts
 rename src/routes/{(dashboard) => (user)}/settings/appearance/+page.svelte (57%)
 create mode 100644 src/routes/(user)/settings/appearance/appearance-form.svelte
 create mode 100644 src/routes/(user)/settings/display/+page.server.ts
 create mode 100644 src/routes/(user)/settings/display/+page.svelte
 create mode 100644 src/routes/(user)/settings/display/display-form.svelte
 create mode 100644 src/routes/(user)/settings/notifications/+page.server.ts
 rename src/routes/{(dashboard) => (user)}/settings/notifications/+page.svelte (64%)
 create mode 100644 src/routes/(user)/settings/notifications/notifications-form.svelte
 create mode 100644 src/routes/(user)/settings/profile-form.svelte

diff --git a/src/routes/(dashboard)/settings/(components)/avatar-form.svelte b/src/routes/(dashboard)/settings/(components)/avatar-form.svelte
deleted file mode 100644
index 0bb613b..0000000
--- a/src/routes/(dashboard)/settings/(components)/avatar-form.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts" context="module">
-	// const MAX_IMAGE_SIZE = 5;
-	// const ACCEPTED_IMAGE_TYPES = [
-	// 	'image/jpeg',
-	// 	'image/png',
-	// 	'image/svg+xml',
-	// 	'image/gif',
-	// 	'image/webp'
-	// ];
-	import { z } from 'zod';
-	// const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => {
-	// 	const result = sizeInBytes / (1024 * 1024);
-	// 	return +result.toFixed(decimalsNum);
-	// };
-	export const avatarFormSchema = z.object({
-		avatar: z.any()
-		// .custom<FileList>()
-		// .refine((files) => {
-		// 	return Array.from(files ?? []).length !== 0;
-		// }, 'Image is required')
-		// .refine((files) => {
-		// 	return Array.from(files ?? []).every((file) => sizeInMB(file.size) <= MAX_IMAGE_SIZE);
-		// }, `The maximum image size is ${MAX_IMAGE_SIZE}MB`)
-		// .refine((files) => {
-		// 	return Array.from(files ?? []).every((file) => ACCEPTED_IMAGE_TYPES.includes(file.type));
-		// }, 'File type is not supported')
-	});
-	export type AvatarFormSchema = typeof avatarFormSchema;
-</script>
-
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import * as Form from '$lib/components/ui/form';
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import type { LayoutData } from '../../$types';
-	import * as Avatar from '$lib/components/ui/avatar';
-	import { toast } from 'svelte-sonner';
-	import type { FormOptions } from 'formsnap';
-	export let avatarFormSchemaData: SuperValidated<AvatarFormSchema>;
-	export let user: LayoutData['user'];
-	export let debug: boolean;
-	const options: FormOptions<AvatarFormSchema> = {
-		onSubmit() {
-			toast.info('Uploading avatar...');
-		},
-		onResult({ result }) {
-			if (result.status === 200) toast.success('Your avatar has been updated!');
-			if (result.status === 400) toast.error('There was an error updating your avatar.');
-		},
-		dataType: 'form'
-	};
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Avatar image</Card.Title>
-		<Card.Description>
-			This is the image that will be displayed on your profile, in dashboards and in emails.
-		</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<Form.Root
-			{options}
-			form={avatarFormSchemaData}
-			schema={avatarFormSchema}
-			let:config
-			action="?/avatar"
-			method="POST"
-			class="space-y-2"
-			{debug}
-			><Form.Item>
-				<Form.Field {config} name="avatar">
-					<Form.Label class="sr-only">Avatar</Form.Label>
-					<Avatar.Root class="aspect-square h-auto w-full">
-						<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
-						<Avatar.Fallback class="text-8xl">{user?.initials}</Avatar.Fallback>
-					</Avatar.Root>
-					<Form.Input type="file" />
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-			<Form.Button>Update avatar</Form.Button>
-		</Form.Root>
-	</Card.Content>
-</Card.Root>
diff --git a/src/routes/(dashboard)/settings/(components)/email-form.svelte b/src/routes/(dashboard)/settings/(components)/email-form.svelte
deleted file mode 100644
index acd356b..0000000
--- a/src/routes/(dashboard)/settings/(components)/email-form.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script lang="ts" context="module">
-	import { z } from 'zod';
-	export const emailRequestFormSchema = z.object({
-		newEmail: z.string().email()
-	});
-	export const emailConfirmFormSchema = z.object({
-		token: z.string(),
-		password: z.string()
-	});
-	export type EmailRequestFormSchema = typeof emailRequestFormSchema;
-	export type EmailConfirmFormSchema = typeof emailConfirmFormSchema;
-</script>
-
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import * as Form from '$lib/components/ui/form';
-	import { toast } from 'svelte-sonner';
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import type { LayoutData } from '../$types';
-	import type { FormOptions } from 'formsnap';
-	export let emailRequestFormSchemaData: SuperValidated<EmailRequestFormSchema>;
-	export let emailConfirmFormSchemaData: SuperValidated<EmailConfirmFormSchema>;
-	const requestOptions: FormOptions<EmailRequestFormSchema> = {
-		onSubmit() {
-			toast.info('Requesting token...');
-		},
-		onResult({ result }) {
-			if (result.status === 200) toast.success('Token sent! Check your email.');
-			if (result.status === 400)
-				toast.error('There was an error sending the token. Is this email already in use?');
-		}
-	};
-	const confirmOptions: FormOptions<EmailConfirmFormSchema> = {
-		onSubmit() {
-			toast.info('Changing email...');
-		},
-		onResult({ result }) {
-			console.log(result);
-			if (result.status === 200) toast.success('Your email has been changed!');
-			if (result.status === 400)
-				toast.error('There was an error changing your email. Is the token correct?');
-		}
-	};
-	export let user: LayoutData['user'];
-	export let debug: boolean;
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Modify your email</Card.Title>
-		<Card.Description
-			>Use a different email by requesting a token and entering it for verification below.</Card.Description
-		>
-	</Card.Header>
-	<Card.Content>
-		<Form.Root
-			schema={emailRequestFormSchema}
-			form={emailRequestFormSchemaData}
-			options={requestOptions}
-			let:config
-			method="POST"
-			action="?/emailRequest"
-			class="space-y-8"
-			{debug}
-		>
-			<Form.Item>
-				<Form.Field {config} name="newEmail">
-					<Form.Label>New email</Form.Label>
-					<div class="flex space-x-2">
-						<Form.Input placeholder={user?.email} />
-						<Form.Button variant="secondary">Request token</Form.Button>
-					</div>
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-		</Form.Root>
-		<Form.Root
-			options={confirmOptions}
-			form={emailConfirmFormSchemaData}
-			schema={emailConfirmFormSchema}
-			let:config
-			action="?/emailConfirm"
-			method="POST"
-			class="space-y-2"
-			{debug}
-		>
-			<Form.Item>
-				<Form.Field {config} name="token">
-					<Form.Label>Email verification token</Form.Label>
-					<Form.Input />
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-			<Form.Item>
-				<Form.Field {config} name="password">
-					<Form.Label>Password</Form.Label>
-					<Form.Input />
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-			<Form.Button>Confirm email change</Form.Button>
-		</Form.Root>
-	</Card.Content>
-</Card.Root>
diff --git a/src/routes/(dashboard)/settings/(components)/name-form.svelte b/src/routes/(dashboard)/settings/(components)/name-form.svelte
deleted file mode 100644
index c084ca6..0000000
--- a/src/routes/(dashboard)/settings/(components)/name-form.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts" context="module">
-	import { z } from 'zod';
-	const emptyStringToUndefined = z.literal('').transform(() => undefined);
-	export const nameFormSchema = z.object({
-		name: z
-			.string()
-			.min(2, 'Name must be at least 2 characters.')
-			.max(30, 'Name must not be longer than 30 characters')
-			.optional()
-			.or(emptyStringToUndefined),
-		username: z
-			.string()
-			.min(2, 'Username must be at least 2 characters.')
-			.max(30, 'Username must not be longer than 30 characters')
-			.optional()
-			.or(emptyStringToUndefined)
-	});
-	export type NameFormSchema = typeof nameFormSchema;
-</script>
-
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import * as Form from '$lib/components/ui/form';
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import type { LayoutData } from '../$types';
-	import type { FormOptions } from 'formsnap';
-	import { toast } from 'svelte-sonner';
-	export let nameFormSchemaData: SuperValidated<NameFormSchema>;
-	export let user: LayoutData['user'];
-	export let debug: boolean;
-	const options: FormOptions<NameFormSchema> = {
-		onSubmit() {
-			toast.info('Updating name...');
-		},
-		onResult({ result }) {
-			if (result.status === 200) toast.success('Your name has been updated!');
-			if (result.status === 400) toast.error('There was an error updating your name.');
-		},
-		dataType: 'form'
-	};
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Change your name</Card.Title>
-		<Card.Description>
-			You can change the name that will be displayed on your profile and in emails as well as your
-			username.
-		</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<Form.Root
-			{options}
-			form={nameFormSchemaData}
-			schema={nameFormSchema}
-			let:config
-			action="?/name"
-			method="POST"
-			class="space-y-2"
-			{debug}
-		>
-			<Form.Item>
-				<Form.Field name="name" {config}>
-					<Form.Label>Display name</Form.Label>
-					<Form.Input placeholder={user?.name} />
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-			<Form.Item>
-				<Form.Field {config} name="username">
-					<Form.Label>Username</Form.Label>
-					<Form.Input placeholder={user?.username} />
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-			<Form.Button>Update name</Form.Button>
-		</Form.Root>
-	</Card.Content>
-</Card.Root>
diff --git a/src/routes/(dashboard)/settings/(components)/password-form.svelte b/src/routes/(dashboard)/settings/(components)/password-form.svelte
deleted file mode 100644
index 8b07ec1..0000000
--- a/src/routes/(dashboard)/settings/(components)/password-form.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts" context="module">
-	import { z } from 'zod';
-	export const passwordFormSchema = z
-		.object({
-			oldPassword: z.string(),
-			password: z.string().min(4),
-			passwordConfirm: z.string().min(4)
-		})
-		.refine(
-			(values) => {
-				return values.password === values.passwordConfirm;
-			},
-			{
-				message: 'Passwords must match.',
-				path: ['passwordConfirm']
-			}
-		);
-	export type PasswordFormSchema = typeof passwordFormSchema;
-</script>
-
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import * as Form from '$lib/components/ui/form';
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import type { FormOptions } from 'formsnap';
-	import { toast } from 'svelte-sonner';
-	export let passwordFormSchemaData: SuperValidated<PasswordFormSchema>;
-	export let debug: boolean;
-	const options: FormOptions<PasswordFormSchema> = {
-		onSubmit() {
-			toast.info('Changing password...');
-		},
-		onResult({ result }) {
-			if (result.status === 200)
-				toast.success('Your password has been changed! Please log in again.');
-			if (result.status === 400)
-				toast.error('There was an error changing your password. Is the old password correct?');
-		}
-	};
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Password change</Card.Title>
-		<Card.Description>You can change your account password here.</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<Form.Root
-			{options}
-			form={passwordFormSchemaData}
-			schema={passwordFormSchema}
-			let:config
-			action="?/password"
-			method="POST"
-			class="space-y-2"
-			{debug}
-		>
-			<Form.Item>
-				<Form.Field {config} name="oldPassword">
-					<Form.Label>Current Password</Form.Label>
-					<Form.Input type="password" />
-					<Form.Validation />
-				</Form.Field>
-				<Form.Field {config} name="password">
-					<Form.Label>New Password</Form.Label>
-					<Form.Input type="password" />
-					<Form.Validation />
-				</Form.Field>
-				<Form.Field {config} name="passwordConfirm">
-					<Form.Label>Confirm new password</Form.Label>
-					<Form.Input type="password" />
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-			<Form.Button>Update password</Form.Button>
-		</Form.Root>
-	</Card.Content>
-</Card.Root>
diff --git a/src/routes/(dashboard)/settings/+layout.svelte b/src/routes/(dashboard)/settings/+layout.svelte
deleted file mode 100644
index 7e38bab..0000000
--- a/src/routes/(dashboard)/settings/+layout.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { Separator } from '$lib/components/ui/separator';
-	import SidebarNav from './(components)/sidebar-nav.svelte';
-
-	const sidebarNavItems = [
-		{
-			title: 'Profile',
-			href: '/settings'
-		},
-		{
-			title: 'Appearance',
-			href: '/settings/appearance'
-		},
-		{
-			title: 'Notifications',
-			href: '/settings/notifications'
-		}
-	];
-</script>
-
-<div class="space-y-6 p-10 pb-16 md:block">
-	<div class="space-y-0.5">
-		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
-		<p class="text-muted-foreground">Manage your account settings and set e-mail preferences.</p>
-	</div>
-	<Separator class="my-6" />
-	<div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-		<aside class="-mx-4 lg:w-1/5">
-			<SidebarNav items={sidebarNavItems} />
-		</aside>
-		<div class="flex-1">
-			<slot />
-		</div>
-	</div>
-</div>
diff --git a/src/routes/(dashboard)/settings/+page.server.ts b/src/routes/(dashboard)/settings/+page.server.ts
deleted file mode 100644
index 8f1e189..0000000
--- a/src/routes/(dashboard)/settings/+page.server.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { PageServerLoad } from './$types';
-import { superValidate } from 'sveltekit-superforms/server';
-import { fail, type Actions } from '@sveltejs/kit';
-import { nameFormSchema } from './(components)/name-form.svelte';
-import { emailConfirmFormSchema, emailRequestFormSchema } from './(components)/email-form.svelte';
-import { passwordFormSchema } from './(components)/password-form.svelte';
-import { avatarFormSchema } from './(components)/avatar-form.svelte';
-
-export const load: PageServerLoad = async () => {
-	return {
-		forms: {
-			name: await superValidate(nameFormSchema),
-			emailRequest: await superValidate(emailRequestFormSchema),
-			emailConfirm: await superValidate(emailConfirmFormSchema),
-			password: await superValidate(passwordFormSchema),
-			avatar: await superValidate(avatarFormSchema),
-			debug: false
-		}
-	};
-};
-
-export const actions: Actions = {
-	name: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const form = await superValidate(request, nameFormSchema);
-		if (!form.valid) {
-			return fail(400, {
-				form
-			});
-		}
-		await locals.pocketBase.collection('users').update(locals.id, form.data);
-		return { form };
-	},
-	emailRequest: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		console.log(request);
-		const form = await superValidate(request, emailRequestFormSchema);
-		if (!form.valid) {
-			return fail(400, {
-				form
-			});
-		}
-		await locals.pocketBase.collection('users').requestEmailChange(form.data.newEmail);
-		return { form };
-	},
-	emailConfirm: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const form = await superValidate(request, emailConfirmFormSchema);
-		if (!form.valid) {
-			return fail(400, {
-				form
-			});
-		}
-		await locals.pocketBase
-			.collection('users')
-			.confirmEmailChange(form.data.token, form.data.password);
-		return { form };
-	},
-	password: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const form = await superValidate(request, passwordFormSchema);
-		console.log(form);
-		if (!form.valid) {
-			return fail(400, {
-				form
-			});
-		}
-		await locals.pocketBase.collection('users').update(locals.id, form.data);
-		return { form };
-	},
-	avatar: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const formData = await request.formData();
-		const form = await superValidate(request, avatarFormSchema);
-
-		if (!form.valid) return fail(400, { form });
-
-		const file = formData.get('file');
-		if (file instanceof File) {
-			await locals.pocketBase.collection('users').update(locals.id, { avatar: file });
-		}
-		return { form };
-	}
-};
diff --git a/src/routes/(dashboard)/settings/+page.svelte b/src/routes/(dashboard)/settings/+page.svelte
deleted file mode 100644
index 21cadb4..0000000
--- a/src/routes/(dashboard)/settings/+page.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	import type { PageData } from './$types';
-	import { Separator } from '$lib/components/ui/separator';
-	import NameForm from './(components)/name-form.svelte';
-	import EmailForm from './(components)/email-form.svelte';
-	import PasswordForm from './(components)/password-form.svelte';
-	import AvatarForm from './(components)/avatar-form.svelte';
-
-	export let data: PageData;
-	let { forms, user } = data;
-</script>
-
-<div class="space-y-6">
-	<div>
-		<h3 class="text-lg font-medium">Account</h3>
-		<p class="text-sm text-muted-foreground">Update your account and profile settings.</p>
-	</div>
-	<Separator />
-	<div class="grid grid-cols-1 gap-4 sm:grid-cols-[4fr,3fr]">
-		<div class="space-y-8">
-			<NameForm nameFormSchemaData={forms.name} {user} debug={forms.debug} />
-			<EmailForm
-				emailRequestFormSchemaData={forms.emailRequest}
-				emailConfirmFormSchemaData={forms.emailConfirm}
-				{user}
-				debug={forms.debug}
-			/>
-			<PasswordForm passwordFormSchemaData={forms.password} debug={forms.debug} />
-		</div>
-		<div>
-			<AvatarForm avatarFormSchemaData={forms.avatar} {user} debug={forms.debug} />
-		</div>
-	</div>
-</div>
diff --git a/src/routes/(dashboard)/settings/appearance/+page.server.ts b/src/routes/(dashboard)/settings/appearance/+page.server.ts
deleted file mode 100644
index e435a79..0000000
--- a/src/routes/(dashboard)/settings/appearance/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { superValidate } from 'sveltekit-superforms/server';
-import type { PageServerLoad } from '../$types';
-import { appearanceFormSchema } from './appearance-form.svelte';
-import { fail, type Actions } from '@sveltejs/kit';
-
-export const load: PageServerLoad = async () => {
-	return {
-		form: await superValidate(appearanceFormSchema)
-	};
-};
-
-export const actions: Actions = {
-	default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const form = await superValidate(request, appearanceFormSchema);
-		if (!form.valid) {
-			return fail(400, {
-				form
-			});
-		}
-		await locals.pocketBase
-			.collection('users')
-			.update(locals.id, { appearanceMode: form.data.theme });
-		return { form };
-	}
-};
diff --git a/src/routes/(dashboard)/settings/appearance/appearance-form.svelte b/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
deleted file mode 100644
index 09d8e33..0000000
--- a/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
+++ /dev/null
@@ -1,125 +0,0 @@
-<script lang="ts" context="module">
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import { z } from 'zod';
-
-	export const appearanceFormSchema = z.object({
-		theme: z.enum(['light', 'dark', 'system'], {
-			required_error: 'Please select a theme.'
-		})
-	});
-
-	export type AppearanceFormSchema = typeof appearanceFormSchema;
-</script>
-
-<script lang="ts">
-	import * as Form from '$lib/components/ui/form';
-	import Label from '$lib/components/ui/label/label.svelte';
-	import { dev } from '$app/environment';
-	import type { PageData } from '../$types';
-	import type { FormOptions } from 'formsnap';
-	import { toast } from 'svelte-sonner';
-	export let isLoading = false;
-	export let data: SuperValidated<AppearanceFormSchema>;
-	const options: FormOptions<AppearanceFormSchema> = {
-		onSubmit() {
-			isLoading = true;
-			toast.info('Updating appearance...');
-		},
-		onResult({ result }) {
-			isLoading = false;
-			if (result.status === 200) toast.success('Your appearance has been updated!');
-			if (result.status === 400) toast.error('There was an error updating your appearance.');
-		},
-		dataType: 'form'
-	};
-	export let user: PageData['user'];
-</script>
-
-<Form.Root
-	schema={appearanceFormSchema}
-	{options}
-	form={data}
-	class="space-y-8"
-	method="POST"
-	let:config
-	debug={dev ? true : false}
->
-	<Form.Item>
-		<Form.Field {config} name="theme">
-			<Form.Label>Theme</Form.Label>
-			<Form.Description>Select the theme for the dashboard.</Form.Description>
-			<Form.Validation />
-			<Form.RadioGroup
-				class="grid max-w-xl grid-cols-3 gap-8 pt-2"
-				orientation="horizontal"
-				value={user?.appearanceMode}
-			>
-				<Label for="light" class="[&:has([data-state=checked])>div]:border-primary">
-					<Form.RadioItem id="light" value="light" class="sr-only" />
-					<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
-						<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
-							<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
-								<div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
-								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
-								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
-								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
-							</div>
-						</div>
-					</div>
-					<span class="block w-full p-2 text-center font-normal"> Light </span>
-				</Label>
-				<Label for="dark" class="[&:has([data-state=checked])>div]:border-primary">
-					<Form.RadioItem id="dark" value="dark" class="sr-only" />
-					<div
-						class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
-					>
-						<div class="space-y-2 rounded-sm bg-slate-950 p-2">
-							<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
-								<div class="h-2 w-[80px] rounded-lg bg-slate-400" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-slate-400" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-slate-400" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
-							</div>
-						</div>
-					</div>
-					<span class="block w-full p-2 text-center font-normal"> Dark </span>
-				</Label>
-				<Label for="system" class="[&:has([data-state=checked])>div]:border-primary">
-					<Form.RadioItem id="system" value="system" class="sr-only" />
-					<div
-						class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
-					>
-						<div class="space-y-2 rounded-sm bg-slate-500 p-2">
-							<div class="space-y-2 rounded-md bg-slate-400 p-2 shadow-sm">
-								<div class="h-2 w-[80px] rounded-lg bg-slate-200" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-slate-200" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-slate-200" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
-							</div>
-						</div>
-					</div>
-					<span class="block w-full p-2 text-center font-normal"> System </span>
-				</Label>
-			</Form.RadioGroup>
-		</Form.Field>
-	</Form.Item>
-	<Form.Button disabled={isLoading}>Update preferences</Form.Button>
-</Form.Root>
diff --git a/src/routes/(dashboard)/settings/notifications/+page.server.ts b/src/routes/(dashboard)/settings/notifications/+page.server.ts
deleted file mode 100644
index 0c90c08..0000000
--- a/src/routes/(dashboard)/settings/notifications/+page.server.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { superValidate } from 'sveltekit-superforms/server';
-import type { PageServerLoad } from '../$types';
-import { notificationsFormSchema } from './notifications-form.svelte';
-import { fail, type Actions } from '@sveltejs/kit';
-
-export const load: PageServerLoad = async () => {
-	return {
-		form: await superValidate(notificationsFormSchema)
-	};
-};
-
-export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, notificationsFormSchema);
-		if (!form.valid) {
-			return fail(400, {
-				form
-			});
-		}
-		return {
-			form
-		};
-	}
-};
diff --git a/src/routes/(dashboard)/settings/notifications/notifications-form.svelte b/src/routes/(dashboard)/settings/notifications/notifications-form.svelte
deleted file mode 100644
index 862a445..0000000
--- a/src/routes/(dashboard)/settings/notifications/notifications-form.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts" context="module">
-	import { z } from 'zod';
-	export const notificationsFormSchema = z.object({
-		type: z.enum(['all', 'tickets', 'none'], {
-			required_error: 'You need to select a notification type.'
-		})
-	});
-	type NotificationFormSchema = typeof notificationsFormSchema;
-</script>
-
-<script lang="ts">
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import * as Card from '$lib/components/ui/card';
-	import * as Form from '$lib/components/ui/form';
-	import { Label } from '$lib/components/ui/label';
-	export let data: SuperValidated<NotificationFormSchema>;
-	import { dev } from '$app/environment';
-	import { Bell, EyeNone, Person } from 'radix-icons-svelte';
-</script>
-
-<Card.Root>
-	<Card.Header class="pb-3">
-		<Card.Title>Notifications</Card.Title>
-		<Card.Description>Choose what you want to be notified about.</Card.Description>
-	</Card.Header>
-	<Card.Content class="grid gap-1">
-		<Form.Root
-			form={data}
-			schema={notificationsFormSchema}
-			let:config
-			method="POST"
-			class="space-y-8"
-			debug={dev ? true : false}
-		>
-			<Form.Item>
-				<Form.Field {config} name="type">
-					<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal">
-						<!-- value={user?.appearanceMode} -->
-						<Label
-							for="all"
-							class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-						>
-							<Form.RadioItem id="all" value="all" class="sr-only" />
-							<Bell class="mb-3 h-6 w-6" />
-							<span class="block w-full p-2 text-center font-normal">Everything</span>
-							<span class="text-center text-sm text-muted-foreground">New tickets and updates.</span
-							>
-						</Label>
-						<Label
-							for="tickets"
-							class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-						>
-							<Form.RadioItem id="tickets" value="tickets" class="sr-only" />
-							<Person class="mb-3 h-6 w-6" />
-							<span class="block w-full p-2 text-center font-normal">New tickets</span>
-							<span class="text-center text-sm text-muted-foreground"
-								>Only new unassigned tickets</span
-							>
-						</Label>
-						<Label
-							for="none"
-							class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-						>
-							<Form.RadioItem id="none" value="none" class="sr-only" />
-							<EyeNone class="mb-3 h-6 w-6" />
-							<span class="block w-full p-2 text-center font-normal">Ignore</span>
-							<span class="text-center text-sm text-muted-foreground"
-								>Turn off all notifications.</span
-							>
-						</Label>
-					</Form.RadioGroup>
-					<Form.Validation />
-				</Form.Field>
-			</Form.Item>
-		</Form.Root>
-	</Card.Content>
-</Card.Root>
-
-<!-- <Form.Root
-	form={data}
-	schema={notificationsFormSchema}
-	let:config
-	method="POST"
-	class="space-y-8"
-	debug={dev ? true : false}
->
-	<Form.Item>
-		<Form.Field {config} name="type">
-			<Form.Label>Notify me about...</Form.Label>
-			<Form.RadioGroup class="flex flex-col space-y-1">
-				<div class="flex items-center space-x-3">
-					<Form.RadioItem value="all" id="all" />
-					<Label for="all" class="font-normal">New tickets and SLA breaches</Label>
-				</div>
-				<div class="flex items-center space-x-3">
-					<Form.RadioItem value="tickets" id="mentions" />
-					<Label for="mentions" class="font-normal">New tickets</Label>
-				</div>
-				<div class="flex items-center space-x-3">
-					<Form.RadioItem value="none" id="none" />
-					<Label for="none" class="font-normal">Nothing</Label>
-				</div>
-			</Form.RadioGroup>
-		</Form.Field>
-	</Form.Item>
-	<Form.Button>Update notifications</Form.Button>
-</Form.Root> -->
diff --git a/src/routes/(dashboard)/+layout.server.ts b/src/routes/(user)/+layout.server.ts
similarity index 100%
rename from src/routes/(dashboard)/+layout.server.ts
rename to src/routes/(user)/+layout.server.ts
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-checkbox.svelte b/src/routes/(user)/dashboard/(components)/data-table-checkbox.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-checkbox.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-checkbox.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-column-header.svelte b/src/routes/(user)/dashboard/(components)/data-table-column-header.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-column-header.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-column-header.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-faceted-filter.svelte b/src/routes/(user)/dashboard/(components)/data-table-faceted-filter.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-faceted-filter.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-faceted-filter.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-pagination.svelte b/src/routes/(user)/dashboard/(components)/data-table-pagination.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-pagination.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-pagination.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-priority-cell.svelte b/src/routes/(user)/dashboard/(components)/data-table-priority-cell.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-priority-cell.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-priority-cell.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-row-actions.svelte b/src/routes/(user)/dashboard/(components)/data-table-row-actions.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-row-actions.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-row-actions.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-status-cell.svelte b/src/routes/(user)/dashboard/(components)/data-table-status-cell.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-status-cell.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-status-cell.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-title-cell.svelte b/src/routes/(user)/dashboard/(components)/data-table-title-cell.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-title-cell.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-title-cell.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-toolbar.svelte b/src/routes/(user)/dashboard/(components)/data-table-toolbar.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-toolbar.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-toolbar.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table-view-options.svelte b/src/routes/(user)/dashboard/(components)/data-table-view-options.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table-view-options.svelte
rename to src/routes/(user)/dashboard/(components)/data-table-view-options.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/data-table.svelte b/src/routes/(user)/dashboard/(components)/data-table.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/data-table.svelte
rename to src/routes/(user)/dashboard/(components)/data-table.svelte
diff --git a/src/routes/(dashboard)/dashboard/(components)/index.ts b/src/routes/(user)/dashboard/(components)/index.ts
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(components)/index.ts
rename to src/routes/(user)/dashboard/(components)/index.ts
diff --git a/src/routes/(dashboard)/dashboard/(data)/data.ts b/src/routes/(user)/dashboard/(data)/data.ts
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(data)/data.ts
rename to src/routes/(user)/dashboard/(data)/data.ts
diff --git a/src/routes/(dashboard)/dashboard/(data)/schemas.ts b/src/routes/(user)/dashboard/(data)/schemas.ts
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(data)/schemas.ts
rename to src/routes/(user)/dashboard/(data)/schemas.ts
diff --git a/src/routes/(dashboard)/dashboard/(data)/tickets.json b/src/routes/(user)/dashboard/(data)/tickets.json
similarity index 100%
rename from src/routes/(dashboard)/dashboard/(data)/tickets.json
rename to src/routes/(user)/dashboard/(data)/tickets.json
diff --git a/src/routes/(dashboard)/dashboard/+layout.svelte b/src/routes/(user)/dashboard/+layout.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/+layout.svelte
rename to src/routes/(user)/dashboard/+layout.svelte
diff --git a/src/routes/(dashboard)/dashboard/+page.svelte b/src/routes/(user)/dashboard/+page.svelte
similarity index 100%
rename from src/routes/(dashboard)/dashboard/+page.svelte
rename to src/routes/(user)/dashboard/+page.svelte
diff --git a/src/routes/(dashboard)/settings/(components)/sidebar-nav.svelte b/src/routes/(user)/settings/(components)/sidebar-nav.svelte
similarity index 51%
rename from src/routes/(dashboard)/settings/(components)/sidebar-nav.svelte
rename to src/routes/(user)/settings/(components)/sidebar-nav.svelte
index 8ad6beb..fece53f 100644
--- a/src/routes/(dashboard)/settings/(components)/sidebar-nav.svelte
+++ b/src/routes/(user)/settings/(components)/sidebar-nav.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
-	import { page } from '$app/stores';
-	import { Button } from '$lib/components/ui/button';
-	import { cubicInOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
+	import { cn } from "$lib/utils";
+	import { page } from "$app/stores";
+	import { Button } from "$lib/components/ui/button";
+	import { cubicInOut } from "svelte/easing";
+	import { crossfade } from "svelte/transition";
 
 	let className: string | undefined | null = undefined;
 	export let items: { href: string; title: string }[];
@@ -11,25 +11,28 @@
 
 	const [send, receive] = crossfade({
 		duration: 250,
-		easing: cubicInOut
+		easing: cubicInOut,
 	});
 </script>
 
-<nav class={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)}>
+<nav class={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)}>
 	{#each items as item}
 		{@const isActive = $page.url.pathname === item.href}
 
 		<Button
 			href={item.href}
 			variant="ghost"
-			class={cn(!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent')}
+			class={cn(
+				!isActive && "hover:underline",
+				"relative justify-start hover:bg-transparent"
+			)}
 			data-sveltekit-noscroll
 		>
 			{#if isActive}
 				<div
 					class="absolute inset-0 rounded-md bg-muted"
-					in:send={{ key: 'active-sidebar-tab' }}
-					out:receive={{ key: 'active-sidebar-tab' }}
+					in:send={{ key: "active-sidebar-tab" }}
+					out:receive={{ key: "active-sidebar-tab" }}
 				/>
 			{/if}
 			<div class="relative">
diff --git a/src/routes/(user)/settings/+layout.svelte b/src/routes/(user)/settings/+layout.svelte
new file mode 100644
index 0000000..9ad6f71
--- /dev/null
+++ b/src/routes/(user)/settings/+layout.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator";
+	import SidebarNav from "./(components)/sidebar-nav.svelte";
+
+	const sidebarNavItems = [
+		{
+			title: "Profile",
+			href: "/settings",
+		},
+		{
+			title: "Account",
+			href: "/settings/account",
+		},
+		{
+			title: "Appearance",
+			href: "/settings/appearance",
+		},
+		{
+			title: "Notifications",
+			href: "/settings/notifications",
+		},
+		{
+			title: "Display",
+			href: "/settings/display",
+		},
+	];
+</script>
+
+<div class="hidden space-y-6 p-10 pb-16 md:block">
+	<div class="space-y-0.5">
+		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
+		<p class="text-muted-foreground">
+			Manage your account settings and set e-mail preferences.
+		</p>
+	</div>
+	<Separator class="my-6" />
+	<div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+		<aside class="-mx-4 lg:w-1/5">
+			<SidebarNav items={sidebarNavItems} />
+		</aside>
+		<div class="flex-1 lg:max-w-2xl">
+			<slot />
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(user)/settings/+page.server.ts b/src/routes/(user)/settings/+page.server.ts
new file mode 100644
index 0000000..cb9625f
--- /dev/null
+++ b/src/routes/(user)/settings/+page.server.ts
@@ -0,0 +1,25 @@
+import type { PageServerLoad } from "./$types";
+import { superValidate } from "sveltekit-superforms";
+import { zod } from "sveltekit-superforms/adapters";
+import { profileFormSchema } from "./profile-form.svelte";
+import { fail, type Actions } from "@sveltejs/kit";
+
+export const load: PageServerLoad = async () => {
+	return {
+		form: await superValidate(zod(profileFormSchema)),
+	};
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, zod(profileFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+		return {
+			form,
+		};
+	},
+};
diff --git a/src/routes/(user)/settings/+page.svelte b/src/routes/(user)/settings/+page.svelte
new file mode 100644
index 0000000..f85eb89
--- /dev/null
+++ b/src/routes/(user)/settings/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import ProfileForm from "./profile-form.svelte";
+	import { Separator } from "$lib/components/ui/separator";
+	export let data: PageData;
+</script>
+
+<div class="space-y-6">
+	<div>
+		<h3 class="text-lg font-medium">Profile</h3>
+		<p class="text-sm text-muted-foreground">This is how others will see you on the site.</p>
+	</div>
+	<Separator />
+	<ProfileForm data={data.form} />
+</div>
diff --git a/src/routes/(user)/settings/account/+page.server.ts b/src/routes/(user)/settings/account/+page.server.ts
new file mode 100644
index 0000000..1eaf695
--- /dev/null
+++ b/src/routes/(user)/settings/account/+page.server.ts
@@ -0,0 +1,26 @@
+import { superValidate } from "sveltekit-superforms";
+import { zod } from "sveltekit-superforms/adapters";
+import type { PageServerLoad } from "./$types";
+import { accountFormSchema } from "./account-form.svelte";
+import { fail, type Actions } from "@sveltejs/kit";
+
+export const load: PageServerLoad = async () => {
+	return {
+		form: await superValidate(zod(accountFormSchema)),
+	};
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, zod(accountFormSchema));
+		if (!form.valid) {
+			console.log(form);
+			return fail(400, {
+				form,
+			});
+		}
+		return {
+			form,
+		};
+	},
+};
diff --git a/src/routes/(user)/settings/account/+page.svelte b/src/routes/(user)/settings/account/+page.svelte
new file mode 100644
index 0000000..db3e9b4
--- /dev/null
+++ b/src/routes/(user)/settings/account/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator";
+	import AccountForm from "./account-form.svelte";
+	import type { PageData } from "./$types";
+
+	export let data: PageData;
+</script>
+
+<div class="space-y-6">
+	<div>
+		<h3 class="text-lg font-medium">Account</h3>
+		<p class="text-sm text-muted-foreground">
+			Update your account settings. Set your preferred language and timezone.
+		</p>
+	</div>
+	<Separator />
+	<AccountForm data={data.form} />
+</div>
diff --git a/src/routes/(user)/settings/account/account-form.svelte b/src/routes/(user)/settings/account/account-form.svelte
new file mode 100644
index 0000000..38e55c1
--- /dev/null
+++ b/src/routes/(user)/settings/account/account-form.svelte
@@ -0,0 +1,179 @@
+<script lang="ts" context="module">
+	import { z } from "zod";
+
+	const languages = [
+		{ label: "English", value: "en" },
+		{ label: "French", value: "fr" },
+		{ label: "German", value: "de" },
+		{ label: "Spanish", value: "es" },
+		{ label: "Portuguese", value: "pt" },
+		{ label: "Russian", value: "ru" },
+		{ label: "Japanese", value: "ja" },
+		{ label: "Korean", value: "ko" },
+		{ label: "Chinese", value: "zh" },
+	] as const;
+
+	type Language = (typeof languages)[number]["value"];
+
+	export const accountFormSchema = z.object({
+		name: z
+			.string({
+				required_error: "Required.",
+			})
+			.min(2, "Name must be at least 2 characters.")
+			.max(30, "Name must not be longer than 30 characters"),
+		// Hack: https://github.com/colinhacks/zod/issues/2280
+		language: z.enum(languages.map((lang) => lang.value) as [Language, ...Language[]]),
+		dob: z
+			.string()
+			.datetime()
+			// we're setting it optional so the user can clear the date and we don't run into
+			// type issues, but we refine it to make sure it's not undefined
+			.optional()
+			.refine((date) => (date === undefined ? false : true), "Please select a valid date."),
+	});
+
+	export type AccountFormSchema = typeof accountFormSchema;
+</script>
+
+<script lang="ts">
+	import { Calendar as CalendarIcon, CaretSort, Check } from "radix-icons-svelte";
+	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import * as Form from "$lib/components/ui/form";
+	import * as Popover from "$lib/components/ui/popover";
+	import * as Command from "$lib/components/ui/command";
+	import { Calendar } from "$lib/components/ui/calendar";
+	import { Input } from "$lib/components/ui/input";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import { cn } from "$lib/utils";
+	import { browser } from "$app/environment";
+	import {
+		DateFormatter,
+		getLocalTimeZone,
+		type DateValue,
+		parseDate,
+	} from "@internationalized/date";
+
+	export let data: SuperValidated<Infer<AccountFormSchema>>;
+
+	const form = superForm(data, {
+		validators: zodClient(accountFormSchema),
+	});
+	const { form: formData, enhance, validate } = form;
+
+	const df = new DateFormatter("en-US", {
+		dateStyle: "long",
+	});
+
+	let dobValue: DateValue | undefined = $formData.dob ? parseDate($formData.dob) : undefined;
+</script>
+
+<form method="POST" class="space-y-8" use:enhance>
+	<Form.Field name="name" {form}>
+		<Form.Control let:attrs>
+			<Form.Label>Name</Form.Label>
+			<Input {...attrs} bind:value={$formData.name} />
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="dob" class="flex flex-col">
+		<Form.Control let:attrs>
+			<Form.Label>Date of Birth</Form.Label>
+			<Popover.Root>
+				<Popover.Trigger
+					class={cn(
+						buttonVariants({ variant: "outline" }),
+						"w-[240px] justify-start text-left font-normal",
+						!dobValue && "text-muted-foreground"
+					)}
+					{...attrs}
+				>
+					<CalendarIcon class="mr-2 h-4 w-4" />
+					{dobValue ? df.format(dobValue.toDate(getLocalTimeZone())) : "Pick a date"}
+				</Popover.Trigger>
+				<Popover.Content class="w-auto p-0" align="start">
+					<Calendar
+						bind:value={dobValue}
+						isDateDisabled={(currDate) => {
+							const currDateObj = currDate.toDate(getLocalTimeZone());
+							const today = new Date();
+							today.setHours(0, 0, 0, 0);
+
+							if (currDateObj > today || currDate.year < 1900) return true;
+
+							return false;
+						}}
+						onValueChange={(value) => {
+							if (value === undefined) {
+								$formData.dob = undefined;
+								validate("dob");
+								return;
+							}
+							$formData.dob = value.toDate(getLocalTimeZone()).toISOString();
+							validate("dob");
+						}}
+					/>
+				</Popover.Content>
+				<input hidden bind:value={$formData.dob} name={attrs.name} />
+			</Popover.Root>
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+
+	<Form.Field {form} name="language" class="flex flex-col">
+		<Popover.Root>
+			<Form.Control let:attrs>
+				<Form.Label>Language</Form.Label>
+				<Popover.Trigger
+					role="combobox"
+					class={cn(
+						buttonVariants({ variant: "outline" }),
+						"w-[200px] justify-between",
+						!$formData.language && "text-muted-foreground"
+					)}
+					{...attrs}
+				>
+					{languages.find((lang) => lang.value === $formData.language)?.label ||
+						"Select a language"}
+					<CaretSort class="ml-2 size-4 shrink-0 opacity-50" />
+				</Popover.Trigger>
+				<input hidden bind:value={$formData.language} name={attrs.name} />
+			</Form.Control>
+			<Popover.Content class="w-[200px] p-0">
+				<Command.Root>
+					<Command.Input placeholder="Search language..." />
+					<Command.Empty>No language found.</Command.Empty>
+					<Command.List>
+						{#each languages as language}
+							<Command.Item
+								{...form}
+								value={language.label}
+								onSelect={() => {
+									$formData.language = language.value;
+									validate("language");
+								}}
+							>
+								<Check
+									class={cn(
+										"mr-2 size-4",
+										language.value === $formData.language
+											? "opacity-100"
+											: "opacity-0"
+									)}
+								/>
+								{language.label}
+							</Command.Item>
+						{/each}
+					</Command.List>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+	</Form.Field>
+
+	<Form.Button>Update account</Form.Button>
+</form>
+
+{#if browser}
+	<SuperDebug data={$formData} />
+{/if}
diff --git a/src/routes/(user)/settings/appearance/+page.server.ts b/src/routes/(user)/settings/appearance/+page.server.ts
new file mode 100644
index 0000000..dc249bc
--- /dev/null
+++ b/src/routes/(user)/settings/appearance/+page.server.ts
@@ -0,0 +1,25 @@
+import { superValidate } from "sveltekit-superforms";
+import { zod } from "sveltekit-superforms/adapters";
+import type { PageServerLoad } from "../$types";
+import { appearanceFormSchema } from "./appearance-form.svelte";
+import { fail, type Actions } from "@sveltejs/kit";
+
+export const load: PageServerLoad = async () => {
+	return {
+		form: await superValidate(zod(appearanceFormSchema)),
+	};
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, zod(appearanceFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+		return {
+			form,
+		};
+	},
+};
diff --git a/src/routes/(dashboard)/settings/appearance/+page.svelte b/src/routes/(user)/settings/appearance/+page.svelte
similarity index 57%
rename from src/routes/(dashboard)/settings/appearance/+page.svelte
rename to src/routes/(user)/settings/appearance/+page.svelte
index 6dea5a0..4512b07 100644
--- a/src/routes/(dashboard)/settings/appearance/+page.svelte
+++ b/src/routes/(user)/settings/appearance/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { Separator } from '$lib/components/ui/separator';
-	import type { PageData } from './$types';
-	import AppearanceForm from './appearance-form.svelte';
+	import { Separator } from "$lib/components/ui/separator";
+	import type { PageData } from "./$types";
+	import AppearanceForm from "./appearance-form.svelte";
 
 	export let data: PageData;
-	export let { form, user } = data;
 </script>
 
 <div class="space-y-6">
@@ -15,5 +14,5 @@
 		</p>
 	</div>
 	<Separator />
-	<AppearanceForm data={form} {user} />
+	<AppearanceForm data={data.form} />
 </div>
diff --git a/src/routes/(user)/settings/appearance/appearance-form.svelte b/src/routes/(user)/settings/appearance/appearance-form.svelte
new file mode 100644
index 0000000..01a49ea
--- /dev/null
+++ b/src/routes/(user)/settings/appearance/appearance-form.svelte
@@ -0,0 +1,132 @@
+<script lang="ts" context="module">
+	import { z } from "zod";
+
+	export const appearanceFormSchema = z.object({
+		theme: z.enum(["light", "dark"], {
+			required_error: "Please select a theme.",
+		}),
+		font: z.enum(["inter", "manrope", "system"], {
+			invalid_type_error: "Select a font",
+			required_error: "Please select a font.",
+		}),
+	});
+
+	export type AppearanceFormSchema = typeof appearanceFormSchema;
+</script>
+
+<script lang="ts">
+	import { ChevronDown } from "radix-icons-svelte";
+	import { browser } from "$app/environment";
+	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
+	import * as Form from "$lib/components/ui/form";
+	import * as RadioGroup from "$lib/components/ui/radio-group";
+	import Label from "$lib/components/ui/label/label.svelte";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import { cn } from "$lib/utils";
+	import { buttonVariants } from "$lib/components/ui/button";
+	export let data: SuperValidated<Infer<AppearanceFormSchema>>;
+
+	const form = superForm(data, {
+		validators: zodClient(appearanceFormSchema),
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form method="POST" use:enhance class="space-y-8">
+	<Form.Field {form} name="font">
+		<Form.Control let:attrs>
+			<Form.Label>Font</Form.Label>
+			<div class="relative w-max">
+				<select
+					{...attrs}
+					class={cn(
+						buttonVariants({ variant: "outline" }),
+						"w-[200px] appearance-none font-normal"
+					)}
+					bind:value={$formData.font}
+				>
+					<option value="inter">Inter</option>
+					<option value="manrope">Manrope</option>
+					<option value="system">System</option>
+				</select>
+				<ChevronDown class="absolute right-3 top-2.5 size-4 opacity-50" />
+			</div>
+		</Form.Control>
+		<Form.Description>Set the font you want to use in the dashboard.</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Fieldset {form} name="theme">
+		<Form.Legend>Theme</Form.Legend>
+		<Form.Description>Select the theme for the dashboard.</Form.Description>
+		<Form.FieldErrors />
+		<RadioGroup.Root
+			class="grid max-w-md grid-cols-2 gap-8 pt-2"
+			orientation="horizontal"
+			bind:value={$formData.theme}
+		>
+			<Form.Control let:attrs>
+				<Label class="[&:has([data-state=checked])>div]:border-primary">
+					<RadioGroup.Item {...attrs} value="light" class="sr-only" />
+					<div
+						class="items-center rounded-md border-2 border-muted p-1 hover:border-accent"
+					>
+						<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
+							<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
+								<div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
+								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+							</div>
+							<div
+								class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
+							>
+								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+							</div>
+							<div
+								class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
+							>
+								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+							</div>
+						</div>
+					</div>
+					<span class="block w-full p-2 text-center font-normal"> Light </span>
+				</Label>
+			</Form.Control>
+			<Form.Control let:attrs>
+				<Label class="[&:has([data-state=checked])>div]:border-primary">
+					<RadioGroup.Item {...attrs} value="dark" class="sr-only" />
+					<div
+						class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
+					>
+						<div class="space-y-2 rounded-sm bg-slate-950 p-2">
+							<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
+								<div class="h-2 w-[80px] rounded-lg bg-slate-400" />
+								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+							</div>
+							<div
+								class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
+							>
+								<div class="h-4 w-4 rounded-full bg-slate-400" />
+								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+							</div>
+							<div
+								class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
+							>
+								<div class="h-4 w-4 rounded-full bg-slate-400" />
+								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+							</div>
+						</div>
+					</div>
+					<span class="block w-full p-2 text-center font-normal"> Dark </span>
+				</Label>
+			</Form.Control>
+			<RadioGroup.Input name="theme" />
+		</RadioGroup.Root>
+	</Form.Fieldset>
+	<Form.Button>Update preferences</Form.Button>
+</form>
+
+{#if browser}
+	<SuperDebug data={$formData} />
+{/if}
diff --git a/src/routes/(user)/settings/display/+page.server.ts b/src/routes/(user)/settings/display/+page.server.ts
new file mode 100644
index 0000000..953ee9b
--- /dev/null
+++ b/src/routes/(user)/settings/display/+page.server.ts
@@ -0,0 +1,25 @@
+import type { PageServerLoad } from "./$types";
+import { superValidate } from "sveltekit-superforms";
+import { zod } from "sveltekit-superforms/adapters";
+import { displayFormSchema } from "./display-form.svelte";
+import { fail, type Actions } from "@sveltejs/kit";
+
+export const load: PageServerLoad = async () => {
+	return {
+		form: await superValidate(zod(displayFormSchema)),
+	};
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, zod(displayFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+		return {
+			form,
+		};
+	},
+};
diff --git a/src/routes/(user)/settings/display/+page.svelte b/src/routes/(user)/settings/display/+page.svelte
new file mode 100644
index 0000000..1b3357f
--- /dev/null
+++ b/src/routes/(user)/settings/display/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import DisplayForm from "./display-form.svelte";
+	import { Separator } from "$lib/components/ui/separator";
+	export let data: PageData;
+</script>
+
+<div class="space-y-6">
+	<div>
+		<h3 class="text-lg font-medium">Display</h3>
+		<p class="text-sm text-muted-foreground">
+			Turn items on or off to control what's displayed in the app.
+		</p>
+	</div>
+	<Separator />
+	<DisplayForm data={data.form} />
+</div>
diff --git a/src/routes/(user)/settings/display/display-form.svelte b/src/routes/(user)/settings/display/display-form.svelte
new file mode 100644
index 0000000..e1a8a5e
--- /dev/null
+++ b/src/routes/(user)/settings/display/display-form.svelte
@@ -0,0 +1,94 @@
+<script lang="ts" context="module">
+	import { z } from "zod";
+	const items = [
+		{
+			id: "recents",
+			label: "Recents",
+		},
+		{
+			id: "home",
+			label: "Home",
+		},
+		{
+			id: "applications",
+			label: "Applications",
+		},
+		{
+			id: "desktop",
+			label: "Desktop",
+		},
+		{
+			id: "downloads",
+			label: "Downloads",
+		},
+		{
+			id: "documents",
+			label: "Documents",
+		},
+	] as const;
+	export const displayFormSchema = z.object({
+		items: z.array(z.string()).refine((value) => value.some((item) => item), {
+			message: "You have to select at least one item.",
+		}),
+	});
+	export type DisplayFormSchema = typeof displayFormSchema;
+</script>
+
+<script lang="ts">
+	import * as Form from "$lib/components/ui/form";
+	import * as Checkbox from "$lib/components/ui/checkbox";
+	import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
+	import SuperDebug from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import { browser } from "$app/environment";
+
+	export let data: SuperValidated<Infer<DisplayFormSchema>>;
+
+	const form = superForm(data, {
+		validators: zodClient(displayFormSchema),
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form method="POST" class="space-y-8" use:enhance>
+	<Form.Fieldset {form} name="items" class="space-y-0">
+		<div class="mb-4">
+			<Form.Legend class="text-base">Sidebar</Form.Legend>
+			<Form.Description>
+				Select the items you want to display in the sidebar.
+			</Form.Description>
+		</div>
+		<div class="space-y-2">
+			{#each items as item}
+				{@const checked = $formData.items.includes(item.id)}
+				<div class="flex flex-row items-center space-x-3">
+					<Form.Control let:attrs>
+						{@const { name, ...rest } = attrs}
+						<Checkbox.Root
+							{...rest}
+							{checked}
+							onCheckedChange={(v) => {
+								if (v) {
+									$formData.items = [...$formData.items, item.id];
+								} else {
+									$formData.items = $formData.items.filter((i) => i !== item.id);
+								}
+							}}
+						/>
+						<Form.Label class="font-normal">
+							{item.label}
+						</Form.Label>
+						<input type="checkbox" {name} hidden value={item.id} {checked} />
+					</Form.Control>
+				</div>
+			{/each}
+			<Form.FieldErrors />
+		</div>
+	</Form.Fieldset>
+	<Form.Button>Update display</Form.Button>
+</form>
+
+{#if browser}
+	<SuperDebug data={$formData} />
+{/if}
diff --git a/src/routes/(user)/settings/notifications/+page.server.ts b/src/routes/(user)/settings/notifications/+page.server.ts
new file mode 100644
index 0000000..cd07e30
--- /dev/null
+++ b/src/routes/(user)/settings/notifications/+page.server.ts
@@ -0,0 +1,25 @@
+import { superValidate } from "sveltekit-superforms";
+import { zod } from "sveltekit-superforms/adapters";
+import type { PageServerLoad } from "../$types";
+import { notificationsFormSchema } from "./notifications-form.svelte";
+import { fail, type Actions } from "@sveltejs/kit";
+
+export const load: PageServerLoad = async () => {
+	return {
+		form: await superValidate(zod(notificationsFormSchema)),
+	};
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, zod(notificationsFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+		return {
+			form,
+		};
+	},
+};
diff --git a/src/routes/(dashboard)/settings/notifications/+page.svelte b/src/routes/(user)/settings/notifications/+page.svelte
similarity index 64%
rename from src/routes/(dashboard)/settings/notifications/+page.svelte
rename to src/routes/(user)/settings/notifications/+page.svelte
index 84c8983..cf72042 100644
--- a/src/routes/(dashboard)/settings/notifications/+page.svelte
+++ b/src/routes/(user)/settings/notifications/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from '$lib/components/ui/separator';
-	import NotificationsForm from './notifications-form.svelte';
-	import type { PageData } from './$types';
+	import { Separator } from "$lib/components/ui/separator";
+	import NotificationsForm from "./notifications-form.svelte";
+	import type { PageData } from "./$types";
 
 	export let data: PageData;
 </script>
diff --git a/src/routes/(user)/settings/notifications/notifications-form.svelte b/src/routes/(user)/settings/notifications/notifications-form.svelte
new file mode 100644
index 0000000..7b68f19
--- /dev/null
+++ b/src/routes/(user)/settings/notifications/notifications-form.svelte
@@ -0,0 +1,145 @@
+<script lang="ts" context="module">
+	import { z } from "zod";
+	export const notificationsFormSchema = z.object({
+		type: z.enum(["all", "mentions", "none"], {
+			required_error: "You need to select a notification type.",
+		}),
+		mobile: z.boolean().default(false).optional(),
+		communication_emails: z.boolean().default(false).optional(),
+		social_emails: z.boolean().default(false).optional(),
+		marketing_emails: z.boolean().default(false).optional(),
+		security_emails: z.boolean(),
+	});
+	type NotificationFormSchema = typeof notificationsFormSchema;
+</script>
+
+<script lang="ts">
+	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
+	import * as Form from "$lib/components/ui/form";
+	import * as RadioGroup from "$lib/components/ui/radio-group";
+	import { Switch } from "$lib/components/ui/switch";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
+	import { browser } from "$app/environment";
+
+	export let data: SuperValidated<Infer<NotificationFormSchema>>;
+
+	const form = superForm(data, {
+		validators: zodClient(notificationsFormSchema),
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form method="POST" use:enhance class="space-y-8">
+	<Form.Fieldset {form} name="type">
+		<Form.Legend>Notify me about...</Form.Legend>
+		<Form.Control>
+			<RadioGroup.Root bind:value={$formData.type}>
+				<div class="flex items-center space-x-3">
+					<Form.Control let:attrs>
+						<RadioGroup.Item value="all" {...attrs} />
+						<Form.Label>All new messages</Form.Label>
+					</Form.Control>
+				</div>
+				<div class="flex items-center space-x-3">
+					<Form.Control let:attrs>
+						<RadioGroup.Item value="mentions" {...attrs} />
+						<Form.Label>Direct messages and mentions</Form.Label>
+					</Form.Control>
+				</div>
+				<div class="flex items-center space-x-3">
+					<Form.Control let:attrs>
+						<RadioGroup.Item value="none" {...attrs} />
+						<Form.Label>Nothing</Form.Label>
+					</Form.Control>
+				</div>
+				<RadioGroup.Input name="type" />
+			</RadioGroup.Root>
+		</Form.Control>
+	</Form.Fieldset>
+	<div>
+		<h3 class="mb-4 text-lg font-medium">Email Notifications</h3>
+		<div class="space-y-4">
+			<Form.Field
+				{form}
+				name="communication_emails"
+				class="flex flex-row items-center justify-between rounded-lg border p-4"
+			>
+				<Form.Control let:attrs>
+					<div class="space-y-0.5">
+						<Form.Label class="text-base">Communication emails</Form.Label>
+						<Form.Description>
+							Receive emails about your account activity.
+						</Form.Description>
+					</div>
+					<Switch includeInput {...attrs} bind:checked={$formData.communication_emails} />
+				</Form.Control>
+			</Form.Field>
+			<Form.Field
+				{form}
+				name="marketing_emails"
+				class="flex flex-row items-center justify-between rounded-lg border p-4"
+			>
+				<Form.Control let:attrs>
+					<div class="space-y-0.5">
+						<Form.Label class="text-base">Marketing emails</Form.Label>
+						<Form.Description>
+							Receive emails about new products, features, and more.
+						</Form.Description>
+					</div>
+					<Switch includeInput {...attrs} bind:checked={$formData.marketing_emails} />
+				</Form.Control>
+			</Form.Field>
+			<Form.Field
+				{form}
+				name="social_emails"
+				class="flex flex-row items-center justify-between rounded-lg border p-4"
+			>
+				<Form.Control let:attrs>
+					<div class="space-y-0.5">
+						<Form.Label class="text-base">Social emails</Form.Label>
+						<Form.Description>
+							Receive emails for friend requests, follows, and more.
+						</Form.Description>
+					</div>
+					<Switch includeInput {...attrs} bind:checked={$formData.social_emails} />
+				</Form.Control>
+			</Form.Field>
+			<Form.Field
+				{form}
+				name="security_emails"
+				class="flex flex-row items-center justify-between rounded-lg border p-4"
+			>
+				<Form.Control let:attrs>
+					<div class="space-y-0.5">
+						<Form.Label class="text-base">Security emails</Form.Label>
+						<Form.Description>
+							Receive emails about your account activity and security.
+						</Form.Description>
+					</div>
+					<Switch includeInput {...attrs} bind:checked={$formData.security_emails} />
+				</Form.Control>
+			</Form.Field>
+		</div>
+	</div>
+	<Form.Field {form} name="mobile" class="flex flex-row items-start space-x-3 space-y-0">
+		<Form.Control let:attrs>
+			<Checkbox {...attrs} bind:checked={$formData.mobile} />
+			<div class="space-y-1 leading-none">
+				<Form.Label>Use different settings for my mobile devices</Form.Label>
+				<Form.Description>
+					You can manage your mobile notifications in the <a href="/examples/forms"
+						>mobile settings</a
+					> page.
+				</Form.Description>
+			</div>
+			<input name={attrs.name} bind:value={$formData.mobile} hidden />
+		</Form.Control>
+	</Form.Field>
+	<Form.Button>Update notifications</Form.Button>
+</form>
+
+{#if browser}
+	<SuperDebug data={$formData} />
+{/if}
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
new file mode 100644
index 0000000..6dd1ab2
--- /dev/null
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -0,0 +1,122 @@
+<script lang="ts" context="module">
+	import { z } from "zod";
+	export const profileFormSchema = z.object({
+		username: z
+			.string()
+			.min(2, "Username must be at least 2 characters.")
+			.max(30, "Username must not be longer than 30 characters"),
+		email: z.string({ required_error: "Please select an email to display" }).email(),
+		bio: z.string().min(4).max(160).default("I own a computer."),
+		urls: z
+			.array(z.string().url())
+			.default(["https://shadcn.com", "https://twitter.com/shadcn"]),
+	});
+	export type ProfileFormSchema = typeof profileFormSchema;
+</script>
+
+<script lang="ts">
+	import * as Form from "$lib/components/ui/form";
+	import * as Select from "$lib/components/ui/select";
+	import { Input } from "$lib/components/ui/input";
+	import { Button } from "$lib/components/ui/button";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
+	import SuperDebug from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import { cn } from "$lib/utils";
+	import { browser } from "$app/environment";
+
+	export let data: SuperValidated<Infer<ProfileFormSchema>>;
+
+	const form = superForm(data, {
+		validators: zodClient(profileFormSchema),
+	});
+
+	const { form: formData, enhance } = form;
+
+	function addUrl() {
+		$formData.urls = [...$formData.urls, ""];
+	}
+
+	$: selectedEmail = {
+		label: $formData.email,
+		value: $formData.email,
+	};
+</script>
+
+<form method="POST" class="space-y-8" use:enhance>
+	<Form.Field {form} name="username">
+		<Form.Control let:attrs>
+			<Form.Label>Username</Form.Label>
+			<Input placeholder="@shadcn" {...attrs} bind:value={$formData.username} />
+		</Form.Control>
+		<Form.Description>
+			This is your public display name. It can be your real name or a pseudonym. You can only
+			change this once every 30 days.
+		</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+
+	<Form.Field {form} name="email">
+		<Form.Control let:attrs>
+			<Form.Label>Email</Form.Label>
+			<Select.Root
+				selected={selectedEmail}
+				onSelectedChange={(s) => {
+					s && ($formData.email = s.value);
+				}}
+			>
+				<Select.Trigger {...attrs}>
+					<Select.Value placeholder="Select a verified email to display" />
+				</Select.Trigger>
+				<Select.Content>
+					<Select.Item value="m@example.com" label="m@example.com" />
+					<Select.Item value="m@google.com" label="m@google.com" />
+					<Select.Item value="m@support.com" label="m@supporte.com" />
+				</Select.Content>
+			</Select.Root>
+			<input hidden name={attrs.name} bind:value={$formData.email} />
+		</Form.Control>
+		<Form.Description>
+			You can manage verified email addresses in your <a href="/examples/forms"
+				>email settings</a
+			>.
+		</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="bio">
+		<Form.Control let:attrs>
+			<Form.Label>Bio</Form.Label>
+			<Textarea {...attrs} bind:value={$formData.bio} />
+		</Form.Control>
+		<Form.Description>
+			You can <span>@mention</span> other users and organizations to link to them.
+		</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<div>
+		<Form.Fieldset {form} name="urls">
+			<Form.Legend>URLs</Form.Legend>
+			{#each $formData.urls as _, i}
+				<Form.ElementField {form} name="urls[{i}]">
+					<Form.Description class={cn(i !== 0 && "sr-only")}>
+						Add links to your website, blog, or social media profiles.
+					</Form.Description>
+					<Form.Control let:attrs>
+						<Input {...attrs} bind:value={$formData.urls[i]} />
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.ElementField>
+			{/each}
+		</Form.Fieldset>
+		<Button type="button" variant="outline" size="sm" class="mt-2" on:click={addUrl}>
+			Add URL
+		</Button>
+	</div>
+
+	<Form.Button>Update profile</Form.Button>
+</form>
+
+{#if browser}
+	<SuperDebug data={$formData} />
+{/if}

From bdaeb428db0ae30a285c54858b8a522e6ec79739 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 20:45:17 +0100
Subject: [PATCH 08/18] feat: dev and PUBLIC_DEBUG_FORMS variables to
 environment imports

---
 src/routes/(user)/settings/account/account-form.svelte       | 5 +++--
 src/routes/(user)/settings/appearance/appearance-form.svelte | 5 +++--
 src/routes/(user)/settings/display/display-form.svelte       | 5 +++--
 .../(user)/settings/notifications/notifications-form.svelte  | 5 +++--
 src/routes/(user)/settings/profile-form.svelte               | 5 +++--
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/routes/(user)/settings/account/account-form.svelte b/src/routes/(user)/settings/account/account-form.svelte
index 38e55c1..eca3eb3 100644
--- a/src/routes/(user)/settings/account/account-form.svelte
+++ b/src/routes/(user)/settings/account/account-form.svelte
@@ -47,7 +47,8 @@
 	import { Input } from "$lib/components/ui/input";
 	import { buttonVariants } from "$lib/components/ui/button";
 	import { cn } from "$lib/utils";
-	import { browser } from "$app/environment";
+	import { browser, dev } from "$app/environment";
+	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
 	import {
 		DateFormatter,
 		getLocalTimeZone,
@@ -174,6 +175,6 @@
 	<Form.Button>Update account</Form.Button>
 </form>
 
-{#if browser}
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
 	<SuperDebug data={$formData} />
 {/if}
diff --git a/src/routes/(user)/settings/appearance/appearance-form.svelte b/src/routes/(user)/settings/appearance/appearance-form.svelte
index 01a49ea..a369093 100644
--- a/src/routes/(user)/settings/appearance/appearance-form.svelte
+++ b/src/routes/(user)/settings/appearance/appearance-form.svelte
@@ -16,7 +16,8 @@
 
 <script lang="ts">
 	import { ChevronDown } from "radix-icons-svelte";
-	import { browser } from "$app/environment";
+	import { browser, dev } from "$app/environment";
+	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
 	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
 	import * as Form from "$lib/components/ui/form";
 	import * as RadioGroup from "$lib/components/ui/radio-group";
@@ -127,6 +128,6 @@
 	<Form.Button>Update preferences</Form.Button>
 </form>
 
-{#if browser}
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
 	<SuperDebug data={$formData} />
 {/if}
diff --git a/src/routes/(user)/settings/display/display-form.svelte b/src/routes/(user)/settings/display/display-form.svelte
index e1a8a5e..0ce29ad 100644
--- a/src/routes/(user)/settings/display/display-form.svelte
+++ b/src/routes/(user)/settings/display/display-form.svelte
@@ -40,7 +40,8 @@
 	import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
 	import SuperDebug from "sveltekit-superforms";
 	import { zodClient } from "sveltekit-superforms/adapters";
-	import { browser } from "$app/environment";
+	import { browser, dev } from "$app/environment";
+	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
 
 	export let data: SuperValidated<Infer<DisplayFormSchema>>;
 
@@ -89,6 +90,6 @@
 	<Form.Button>Update display</Form.Button>
 </form>
 
-{#if browser}
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
 	<SuperDebug data={$formData} />
 {/if}
diff --git a/src/routes/(user)/settings/notifications/notifications-form.svelte b/src/routes/(user)/settings/notifications/notifications-form.svelte
index 7b68f19..23972bb 100644
--- a/src/routes/(user)/settings/notifications/notifications-form.svelte
+++ b/src/routes/(user)/settings/notifications/notifications-form.svelte
@@ -20,7 +20,8 @@
 	import { Switch } from "$lib/components/ui/switch";
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
-	import { browser } from "$app/environment";
+	import { browser, dev } from "$app/environment";
+	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
 
 	export let data: SuperValidated<Infer<NotificationFormSchema>>;
 
@@ -140,6 +141,6 @@
 	<Form.Button>Update notifications</Form.Button>
 </form>
 
-{#if browser}
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
 	<SuperDebug data={$formData} />
 {/if}
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
index 6dd1ab2..62e4c21 100644
--- a/src/routes/(user)/settings/profile-form.svelte
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -24,7 +24,8 @@
 	import SuperDebug from "sveltekit-superforms";
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { cn } from "$lib/utils";
-	import { browser } from "$app/environment";
+	import { browser, dev } from "$app/environment";
+	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
 
 	export let data: SuperValidated<Infer<ProfileFormSchema>>;
 
@@ -117,6 +118,6 @@
 	<Form.Button>Update profile</Form.Button>
 </form>
 
-{#if browser}
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
 	<SuperDebug data={$formData} />
 {/if}

From d7c4f5dd0aba7d1628012c398e49ba18e3b468da Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 20:47:54 +0100
Subject: [PATCH 09/18] refactor: remove display settings page and related
 files

---
 src/routes/(user)/settings/+layout.svelte     |  4 -
 .../(user)/settings/display/+page.server.ts   | 25 -----
 .../(user)/settings/display/+page.svelte      | 17 ----
 .../settings/display/display-form.svelte      | 95 -------------------
 4 files changed, 141 deletions(-)
 delete mode 100644 src/routes/(user)/settings/display/+page.server.ts
 delete mode 100644 src/routes/(user)/settings/display/+page.svelte
 delete mode 100644 src/routes/(user)/settings/display/display-form.svelte

diff --git a/src/routes/(user)/settings/+layout.svelte b/src/routes/(user)/settings/+layout.svelte
index 9ad6f71..10bc0b3 100644
--- a/src/routes/(user)/settings/+layout.svelte
+++ b/src/routes/(user)/settings/+layout.svelte
@@ -19,10 +19,6 @@
 			title: "Notifications",
 			href: "/settings/notifications",
 		},
-		{
-			title: "Display",
-			href: "/settings/display",
-		},
 	];
 </script>
 
diff --git a/src/routes/(user)/settings/display/+page.server.ts b/src/routes/(user)/settings/display/+page.server.ts
deleted file mode 100644
index 953ee9b..0000000
--- a/src/routes/(user)/settings/display/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { PageServerLoad } from "./$types";
-import { superValidate } from "sveltekit-superforms";
-import { zod } from "sveltekit-superforms/adapters";
-import { displayFormSchema } from "./display-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
-
-export const load: PageServerLoad = async () => {
-	return {
-		form: await superValidate(zod(displayFormSchema)),
-	};
-};
-
-export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(displayFormSchema));
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			});
-		}
-		return {
-			form,
-		};
-	},
-};
diff --git a/src/routes/(user)/settings/display/+page.svelte b/src/routes/(user)/settings/display/+page.svelte
deleted file mode 100644
index 1b3357f..0000000
--- a/src/routes/(user)/settings/display/+page.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import type { PageData } from "./$types";
-	import DisplayForm from "./display-form.svelte";
-	import { Separator } from "$lib/components/ui/separator";
-	export let data: PageData;
-</script>
-
-<div class="space-y-6">
-	<div>
-		<h3 class="text-lg font-medium">Display</h3>
-		<p class="text-sm text-muted-foreground">
-			Turn items on or off to control what's displayed in the app.
-		</p>
-	</div>
-	<Separator />
-	<DisplayForm data={data.form} />
-</div>
diff --git a/src/routes/(user)/settings/display/display-form.svelte b/src/routes/(user)/settings/display/display-form.svelte
deleted file mode 100644
index 0ce29ad..0000000
--- a/src/routes/(user)/settings/display/display-form.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts" context="module">
-	import { z } from "zod";
-	const items = [
-		{
-			id: "recents",
-			label: "Recents",
-		},
-		{
-			id: "home",
-			label: "Home",
-		},
-		{
-			id: "applications",
-			label: "Applications",
-		},
-		{
-			id: "desktop",
-			label: "Desktop",
-		},
-		{
-			id: "downloads",
-			label: "Downloads",
-		},
-		{
-			id: "documents",
-			label: "Documents",
-		},
-	] as const;
-	export const displayFormSchema = z.object({
-		items: z.array(z.string()).refine((value) => value.some((item) => item), {
-			message: "You have to select at least one item.",
-		}),
-	});
-	export type DisplayFormSchema = typeof displayFormSchema;
-</script>
-
-<script lang="ts">
-	import * as Form from "$lib/components/ui/form";
-	import * as Checkbox from "$lib/components/ui/checkbox";
-	import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
-	import SuperDebug from "sveltekit-superforms";
-	import { zodClient } from "sveltekit-superforms/adapters";
-	import { browser, dev } from "$app/environment";
-	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
-
-	export let data: SuperValidated<Infer<DisplayFormSchema>>;
-
-	const form = superForm(data, {
-		validators: zodClient(displayFormSchema),
-	});
-
-	const { form: formData, enhance } = form;
-</script>
-
-<form method="POST" class="space-y-8" use:enhance>
-	<Form.Fieldset {form} name="items" class="space-y-0">
-		<div class="mb-4">
-			<Form.Legend class="text-base">Sidebar</Form.Legend>
-			<Form.Description>
-				Select the items you want to display in the sidebar.
-			</Form.Description>
-		</div>
-		<div class="space-y-2">
-			{#each items as item}
-				{@const checked = $formData.items.includes(item.id)}
-				<div class="flex flex-row items-center space-x-3">
-					<Form.Control let:attrs>
-						{@const { name, ...rest } = attrs}
-						<Checkbox.Root
-							{...rest}
-							{checked}
-							onCheckedChange={(v) => {
-								if (v) {
-									$formData.items = [...$formData.items, item.id];
-								} else {
-									$formData.items = $formData.items.filter((i) => i !== item.id);
-								}
-							}}
-						/>
-						<Form.Label class="font-normal">
-							{item.label}
-						</Form.Label>
-						<input type="checkbox" {name} hidden value={item.id} {checked} />
-					</Form.Control>
-				</div>
-			{/each}
-			<Form.FieldErrors />
-		</div>
-	</Form.Fieldset>
-	<Form.Button>Update display</Form.Button>
-</form>
-
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
-	<SuperDebug data={$formData} />
-{/if}

From 69b67301d622b6c25b17b6f1633d74294d722528 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 21:07:46 +0100
Subject: [PATCH 10/18] feat: working profile example

---
 src/routes/(user)/settings/+page.server.ts    |   5 +-
 src/routes/(user)/settings/+page.svelte       |   3 +-
 .../(user)/settings/profile-form.svelte       | 144 +++++-------------
 3 files changed, 44 insertions(+), 108 deletions(-)

diff --git a/src/routes/(user)/settings/+page.server.ts b/src/routes/(user)/settings/+page.server.ts
index cb9625f..2eb5256 100644
--- a/src/routes/(user)/settings/+page.server.ts
+++ b/src/routes/(user)/settings/+page.server.ts
@@ -11,13 +11,14 @@ export const load: PageServerLoad = async () => {
 };
 
 export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(profileFormSchema));
+	default: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(profileFormSchema));
 		if (!form.valid) {
 			return fail(400, {
 				form,
 			});
 		}
+		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
 			form,
 		};
diff --git a/src/routes/(user)/settings/+page.svelte b/src/routes/(user)/settings/+page.svelte
index f85eb89..243074f 100644
--- a/src/routes/(user)/settings/+page.svelte
+++ b/src/routes/(user)/settings/+page.svelte
@@ -3,6 +3,7 @@
 	import ProfileForm from "./profile-form.svelte";
 	import { Separator } from "$lib/components/ui/separator";
 	export let data: PageData;
+	let { user, form } = data;
 </script>
 
 <div class="space-y-6">
@@ -11,5 +12,5 @@
 		<p class="text-sm text-muted-foreground">This is how others will see you on the site.</p>
 	</div>
 	<Separator />
-	<ProfileForm data={data.form} />
+	<ProfileForm {user} data={form} />
 </div>
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
index 62e4c21..e8fcf4d 100644
--- a/src/routes/(user)/settings/profile-form.svelte
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -1,123 +1,57 @@
 <script lang="ts" context="module">
-	import { z } from "zod";
+	import { z } from 'zod';
 	export const profileFormSchema = z.object({
-		username: z
-			.string()
-			.min(2, "Username must be at least 2 characters.")
-			.max(30, "Username must not be longer than 30 characters"),
-		email: z.string({ required_error: "Please select an email to display" }).email(),
-		bio: z.string().min(4).max(160).default("I own a computer."),
-		urls: z
-			.array(z.string().url())
-			.default(["https://shadcn.com", "https://twitter.com/shadcn"]),
+		name: z.string()
 	});
 	export type ProfileFormSchema = typeof profileFormSchema;
 </script>
 
 <script lang="ts">
-	import * as Form from "$lib/components/ui/form";
-	import * as Select from "$lib/components/ui/select";
-	import { Input } from "$lib/components/ui/input";
-	import { Button } from "$lib/components/ui/button";
-	import { Textarea } from "$lib/components/ui/textarea";
-	import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
-	import SuperDebug from "sveltekit-superforms";
-	import { zodClient } from "sveltekit-superforms/adapters";
-	import { cn } from "$lib/utils";
-	import { browser, dev } from "$app/environment";
-	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
+	import * as Card from '$lib/components/ui/card';
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import type { LayoutData } from '../$types';
 
+	export let user: LayoutData['user'];
 	export let data: SuperValidated<Infer<ProfileFormSchema>>;
 
 	const form = superForm(data, {
-		validators: zodClient(profileFormSchema),
+		validators: zodClient(profileFormSchema)
 	});
 
 	const { form: formData, enhance } = form;
-
-	function addUrl() {
-		$formData.urls = [...$formData.urls, ""];
-	}
-
-	$: selectedEmail = {
-		label: $formData.email,
-		value: $formData.email,
-	};
 </script>
 
-<form method="POST" class="space-y-8" use:enhance>
-	<Form.Field {form} name="username">
-		<Form.Control let:attrs>
-			<Form.Label>Username</Form.Label>
-			<Input placeholder="@shadcn" {...attrs} bind:value={$formData.username} />
-		</Form.Control>
-		<Form.Description>
-			This is your public display name. It can be your real name or a pseudonym. You can only
-			change this once every 30 days.
-		</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Change your name</Card.Title>
+		<Card.Description>
+			You can modify the displayed profile name, which also determines your ticket ownership.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<form method="POST" class="space-y-8" use:enhance>
+			<Form.Field {form} name="name">
+				<Form.Control let:attrs>
+					<Form.Label>Name</Form.Label>
+					<Input placeholder={user?.name} {...attrs} bind:value={$formData.name} />
+				</Form.Control>
+				<Form.Description>This is your public display name.</Form.Description>
+				<Form.FieldErrors />
+			</Form.Field>
 
-	<Form.Field {form} name="email">
-		<Form.Control let:attrs>
-			<Form.Label>Email</Form.Label>
-			<Select.Root
-				selected={selectedEmail}
-				onSelectedChange={(s) => {
-					s && ($formData.email = s.value);
-				}}
-			>
-				<Select.Trigger {...attrs}>
-					<Select.Value placeholder="Select a verified email to display" />
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Item value="m@example.com" label="m@example.com" />
-					<Select.Item value="m@google.com" label="m@google.com" />
-					<Select.Item value="m@support.com" label="m@supporte.com" />
-				</Select.Content>
-			</Select.Root>
-			<input hidden name={attrs.name} bind:value={$formData.email} />
-		</Form.Control>
-		<Form.Description>
-			You can manage verified email addresses in your <a href="/examples/forms"
-				>email settings</a
-			>.
-		</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="bio">
-		<Form.Control let:attrs>
-			<Form.Label>Bio</Form.Label>
-			<Textarea {...attrs} bind:value={$formData.bio} />
-		</Form.Control>
-		<Form.Description>
-			You can <span>@mention</span> other users and organizations to link to them.
-		</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<div>
-		<Form.Fieldset {form} name="urls">
-			<Form.Legend>URLs</Form.Legend>
-			{#each $formData.urls as _, i}
-				<Form.ElementField {form} name="urls[{i}]">
-					<Form.Description class={cn(i !== 0 && "sr-only")}>
-						Add links to your website, blog, or social media profiles.
-					</Form.Description>
-					<Form.Control let:attrs>
-						<Input {...attrs} bind:value={$formData.urls[i]} />
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.ElementField>
-			{/each}
-		</Form.Fieldset>
-		<Button type="button" variant="outline" size="sm" class="mt-2" on:click={addUrl}>
-			Add URL
-		</Button>
-	</div>
+			<Form.Button>Update name</Form.Button>
+		</form>
 
-	<Form.Button>Update profile</Form.Button>
-</form>
-
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
-	<SuperDebug data={$formData} />
-{/if}
+		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+			<div class="pt-4">
+				<SuperDebug data={$formData} />
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>

From 1d61eec4ea1612cdf744c41165acfda4c87a177c Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 20 Feb 2024 22:32:53 +0100
Subject: [PATCH 11/18] refactor: user profile form component

---
 src/routes/(user)/settings/+page.svelte       |  4 ++--
 .../(user)/settings/profile-form.svelte       | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/routes/(user)/settings/+page.svelte b/src/routes/(user)/settings/+page.svelte
index 243074f..7447931 100644
--- a/src/routes/(user)/settings/+page.svelte
+++ b/src/routes/(user)/settings/+page.svelte
@@ -2,8 +2,8 @@
 	import type { PageData } from "./$types";
 	import ProfileForm from "./profile-form.svelte";
 	import { Separator } from "$lib/components/ui/separator";
+
 	export let data: PageData;
-	let { user, form } = data;
 </script>
 
 <div class="space-y-6">
@@ -12,5 +12,5 @@
 		<p class="text-sm text-muted-foreground">This is how others will see you on the site.</p>
 	</div>
 	<Separator />
-	<ProfileForm {user} data={form} />
+	<ProfileForm user={data.user} data={data.form} />
 </div>
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
index e8fcf4d..1af763d 100644
--- a/src/routes/(user)/settings/profile-form.svelte
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" context="module">
 	import { z } from 'zod';
 	export const profileFormSchema = z.object({
-		name: z.string()
+		name: z.string().min(3).max(50)
 	});
 	export type ProfileFormSchema = typeof profileFormSchema;
 </script>
@@ -16,12 +16,26 @@
 	import { browser, dev } from '$app/environment';
 	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import type { LayoutData } from '../$types';
+	import { toast } from 'svelte-sonner';
 
 	export let user: LayoutData['user'];
 	export let data: SuperValidated<Infer<ProfileFormSchema>>;
+	let isLoading = false;
 
 	const form = superForm(data, {
-		validators: zodClient(profileFormSchema)
+		validators: zodClient(profileFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.success('Updating your name...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Your name has been updated.');
+			} else {
+				toast.error('Please fix the errors in the form.');
+			}
+		}
 	});
 
 	const { form: formData, enhance } = form;
@@ -45,7 +59,7 @@
 				<Form.FieldErrors />
 			</Form.Field>
 
-			<Form.Button>Update name</Form.Button>
+			<Form.Button disabled={isLoading}>Update name</Form.Button>
 		</form>
 
 		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}

From a50f2c12a848b51bfb997adda1b893a1c7e74d69 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 02:09:02 +0100
Subject: [PATCH 12/18] feat: working of some

---
 src/routes/(user)/settings/+layout.svelte     |   2 +-
 .../(user)/settings/account/+page.server.ts   |  55 +++++-
 .../(user)/settings/account/+page.svelte      |  10 +-
 .../settings/account/account-form.svelte      | 180 ------------------
 .../(user)/settings/account/email-form.svelte | 134 +++++++++++++
 .../settings/account/password-form.svelte     |  92 +++++++++
 .../settings/account/username-form.svelte     |  76 ++++++++
 .../appearance/appearance-form.svelte         | 157 ++++++++-------
 .../(user)/settings/profile-form.svelte       |  10 +-
 9 files changed, 459 insertions(+), 257 deletions(-)
 delete mode 100644 src/routes/(user)/settings/account/account-form.svelte
 create mode 100644 src/routes/(user)/settings/account/email-form.svelte
 create mode 100644 src/routes/(user)/settings/account/password-form.svelte
 create mode 100644 src/routes/(user)/settings/account/username-form.svelte

diff --git a/src/routes/(user)/settings/+layout.svelte b/src/routes/(user)/settings/+layout.svelte
index 10bc0b3..e3b27fb 100644
--- a/src/routes/(user)/settings/+layout.svelte
+++ b/src/routes/(user)/settings/+layout.svelte
@@ -22,7 +22,7 @@
 	];
 </script>
 
-<div class="hidden space-y-6 p-10 pb-16 md:block">
+<div class="space-y-6 p-10 pb-16">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
 		<p class="text-muted-foreground">
diff --git a/src/routes/(user)/settings/account/+page.server.ts b/src/routes/(user)/settings/account/+page.server.ts
index 1eaf695..23277d5 100644
--- a/src/routes/(user)/settings/account/+page.server.ts
+++ b/src/routes/(user)/settings/account/+page.server.ts
@@ -1,24 +1,67 @@
+import type { PageServerLoad } from "./$types";
 import { superValidate } from "sveltekit-superforms";
 import { zod } from "sveltekit-superforms/adapters";
-import type { PageServerLoad } from "./$types";
-import { accountFormSchema } from "./account-form.svelte";
+import { usernameFormSchema } from "./username-form.svelte";
+import { emailRequestFormSchema, emailConfirmFormSchema } from "./email-form.svelte";
+import { passwordFormSchema } from "./password-form.svelte";
 import { fail, type Actions } from "@sveltejs/kit";
 
 export const load: PageServerLoad = async () => {
 	return {
-		form: await superValidate(zod(accountFormSchema)),
+		usernameForm: await superValidate(zod(usernameFormSchema)),
+		emailRequestForm: await superValidate(zod(emailRequestFormSchema)),
+		emailConfirmForm: await superValidate(zod(emailConfirmFormSchema)),
+		passwordForm: await superValidate(zod(passwordFormSchema)),
 	};
 };
 
 export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(accountFormSchema));
+	username: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(usernameFormSchema));
 		if (!form.valid) {
-			console.log(form);
 			return fail(400, {
 				form,
 			});
 		}
+		await locals.pocketBase.collection('users').update(locals.id, form.data);
+		return {
+			form,
+		};
+	},
+	emailRequest: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(emailRequestFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+		await locals.pocketBase.collection('users').requestEmailChange(form.data.newEmail);
+		return {
+			form,
+		};
+	},
+	emailConfirm: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(emailConfirmFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+		await locals.pocketBase
+			.collection('users')
+			.confirmEmailChange(form.data.token, form.data.password);
+		return {
+			form,
+		};
+	},
+	password: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(passwordFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
 			form,
 		};
diff --git a/src/routes/(user)/settings/account/+page.svelte b/src/routes/(user)/settings/account/+page.svelte
index db3e9b4..6918b98 100644
--- a/src/routes/(user)/settings/account/+page.svelte
+++ b/src/routes/(user)/settings/account/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { Separator } from "$lib/components/ui/separator";
-	import AccountForm from "./account-form.svelte";
 	import type { PageData } from "./$types";
+	import UsernameForm from "./username-form.svelte";
+	import EmailForm from "./email-form.svelte";
+	import PasswordForm from "./password-form.svelte";
 
 	export let data: PageData;
 </script>
@@ -10,9 +12,11 @@
 	<div>
 		<h3 class="text-lg font-medium">Account</h3>
 		<p class="text-sm text-muted-foreground">
-			Update your account settings. Set your preferred language and timezone.
+			Update your account settings.
 		</p>
 	</div>
 	<Separator />
-	<AccountForm data={data.form} />
+	<UsernameForm user={data.user} data={data.usernameForm} />
+	<EmailForm user={data.user} requestData={data.emailRequestForm} confirmData={data.emailConfirmForm} />
+	<PasswordForm user={data.user} data={data.passwordForm} />
 </div>
diff --git a/src/routes/(user)/settings/account/account-form.svelte b/src/routes/(user)/settings/account/account-form.svelte
deleted file mode 100644
index eca3eb3..0000000
--- a/src/routes/(user)/settings/account/account-form.svelte
+++ /dev/null
@@ -1,180 +0,0 @@
-<script lang="ts" context="module">
-	import { z } from "zod";
-
-	const languages = [
-		{ label: "English", value: "en" },
-		{ label: "French", value: "fr" },
-		{ label: "German", value: "de" },
-		{ label: "Spanish", value: "es" },
-		{ label: "Portuguese", value: "pt" },
-		{ label: "Russian", value: "ru" },
-		{ label: "Japanese", value: "ja" },
-		{ label: "Korean", value: "ko" },
-		{ label: "Chinese", value: "zh" },
-	] as const;
-
-	type Language = (typeof languages)[number]["value"];
-
-	export const accountFormSchema = z.object({
-		name: z
-			.string({
-				required_error: "Required.",
-			})
-			.min(2, "Name must be at least 2 characters.")
-			.max(30, "Name must not be longer than 30 characters"),
-		// Hack: https://github.com/colinhacks/zod/issues/2280
-		language: z.enum(languages.map((lang) => lang.value) as [Language, ...Language[]]),
-		dob: z
-			.string()
-			.datetime()
-			// we're setting it optional so the user can clear the date and we don't run into
-			// type issues, but we refine it to make sure it's not undefined
-			.optional()
-			.refine((date) => (date === undefined ? false : true), "Please select a valid date."),
-	});
-
-	export type AccountFormSchema = typeof accountFormSchema;
-</script>
-
-<script lang="ts">
-	import { Calendar as CalendarIcon, CaretSort, Check } from "radix-icons-svelte";
-	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
-	import { zodClient } from "sveltekit-superforms/adapters";
-	import * as Form from "$lib/components/ui/form";
-	import * as Popover from "$lib/components/ui/popover";
-	import * as Command from "$lib/components/ui/command";
-	import { Calendar } from "$lib/components/ui/calendar";
-	import { Input } from "$lib/components/ui/input";
-	import { buttonVariants } from "$lib/components/ui/button";
-	import { cn } from "$lib/utils";
-	import { browser, dev } from "$app/environment";
-	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
-	import {
-		DateFormatter,
-		getLocalTimeZone,
-		type DateValue,
-		parseDate,
-	} from "@internationalized/date";
-
-	export let data: SuperValidated<Infer<AccountFormSchema>>;
-
-	const form = superForm(data, {
-		validators: zodClient(accountFormSchema),
-	});
-	const { form: formData, enhance, validate } = form;
-
-	const df = new DateFormatter("en-US", {
-		dateStyle: "long",
-	});
-
-	let dobValue: DateValue | undefined = $formData.dob ? parseDate($formData.dob) : undefined;
-</script>
-
-<form method="POST" class="space-y-8" use:enhance>
-	<Form.Field name="name" {form}>
-		<Form.Control let:attrs>
-			<Form.Label>Name</Form.Label>
-			<Input {...attrs} bind:value={$formData.name} />
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="dob" class="flex flex-col">
-		<Form.Control let:attrs>
-			<Form.Label>Date of Birth</Form.Label>
-			<Popover.Root>
-				<Popover.Trigger
-					class={cn(
-						buttonVariants({ variant: "outline" }),
-						"w-[240px] justify-start text-left font-normal",
-						!dobValue && "text-muted-foreground"
-					)}
-					{...attrs}
-				>
-					<CalendarIcon class="mr-2 h-4 w-4" />
-					{dobValue ? df.format(dobValue.toDate(getLocalTimeZone())) : "Pick a date"}
-				</Popover.Trigger>
-				<Popover.Content class="w-auto p-0" align="start">
-					<Calendar
-						bind:value={dobValue}
-						isDateDisabled={(currDate) => {
-							const currDateObj = currDate.toDate(getLocalTimeZone());
-							const today = new Date();
-							today.setHours(0, 0, 0, 0);
-
-							if (currDateObj > today || currDate.year < 1900) return true;
-
-							return false;
-						}}
-						onValueChange={(value) => {
-							if (value === undefined) {
-								$formData.dob = undefined;
-								validate("dob");
-								return;
-							}
-							$formData.dob = value.toDate(getLocalTimeZone()).toISOString();
-							validate("dob");
-						}}
-					/>
-				</Popover.Content>
-				<input hidden bind:value={$formData.dob} name={attrs.name} />
-			</Popover.Root>
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-
-	<Form.Field {form} name="language" class="flex flex-col">
-		<Popover.Root>
-			<Form.Control let:attrs>
-				<Form.Label>Language</Form.Label>
-				<Popover.Trigger
-					role="combobox"
-					class={cn(
-						buttonVariants({ variant: "outline" }),
-						"w-[200px] justify-between",
-						!$formData.language && "text-muted-foreground"
-					)}
-					{...attrs}
-				>
-					{languages.find((lang) => lang.value === $formData.language)?.label ||
-						"Select a language"}
-					<CaretSort class="ml-2 size-4 shrink-0 opacity-50" />
-				</Popover.Trigger>
-				<input hidden bind:value={$formData.language} name={attrs.name} />
-			</Form.Control>
-			<Popover.Content class="w-[200px] p-0">
-				<Command.Root>
-					<Command.Input placeholder="Search language..." />
-					<Command.Empty>No language found.</Command.Empty>
-					<Command.List>
-						{#each languages as language}
-							<Command.Item
-								{...form}
-								value={language.label}
-								onSelect={() => {
-									$formData.language = language.value;
-									validate("language");
-								}}
-							>
-								<Check
-									class={cn(
-										"mr-2 size-4",
-										language.value === $formData.language
-											? "opacity-100"
-											: "opacity-0"
-									)}
-								/>
-								{language.label}
-							</Command.Item>
-						{/each}
-					</Command.List>
-				</Command.Root>
-			</Popover.Content>
-		</Popover.Root>
-	</Form.Field>
-
-	<Form.Button>Update account</Form.Button>
-</form>
-
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
-	<SuperDebug data={$formData} />
-{/if}
diff --git a/src/routes/(user)/settings/account/email-form.svelte b/src/routes/(user)/settings/account/email-form.svelte
new file mode 100644
index 0000000..caec4d5
--- /dev/null
+++ b/src/routes/(user)/settings/account/email-form.svelte
@@ -0,0 +1,134 @@
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const emailRequestFormSchema = z.object({
+		newEmail: z.string().email()
+	});
+	export const emailConfirmFormSchema = z.object({
+		token: z.string(),
+		password: z.string()
+	});
+	export type EmailRequestFormSchema = typeof emailRequestFormSchema;
+	export type EmailConfirmFormSchema = typeof emailConfirmFormSchema;
+</script>
+
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import type { LayoutData } from '../$types';
+	import { toast } from 'svelte-sonner';
+	import { Separator } from '$lib/components/ui/separator';
+	import { Icons } from '$lib/components/site';
+
+	export let user: LayoutData['user'];
+	export let requestData: SuperValidated<Infer<EmailRequestFormSchema>>;
+	export let confirmData: SuperValidated<Infer<EmailConfirmFormSchema>>;
+	let isLoading = false;
+
+	const requestForm = superForm(requestData, {
+		validators: zodClient(emailRequestFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.success('Sending verification token...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Verification token has been sent.');
+			} else {
+				toast.error('Please fix the errors in the form.');
+			}
+		}
+	});
+
+	const confirmForm = superForm(confirmData, {
+		validators: zodClient(emailConfirmFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Updating email...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Your email has been updated.');
+			} else {
+				toast.error('Please fix the errors in the form.');
+			}
+		}
+	});
+
+	const { form: requestFormData, enhance: requestEnhance } = requestForm;
+	const { form: confirmFormData, enhance: confirmEnhance } = confirmForm;
+</script>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Request an email change</Card.Title>
+		<Card.Description
+			>Receive a verification token on this email, which you can enter in the next section.</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<form method="POST" action="?/emailRequest" class="space-y-8" use:requestEnhance>
+			<Form.Field form={requestForm} name="newEmail">
+				<Form.Control let:attrs>
+					<Form.Label>New email</Form.Label>
+					<div class="flex space-x-2">
+						<Input placeholder={user?.email} {...attrs} bind:value={$requestFormData.newEmail} />
+						<Form.Button variant="secondary" disabled={isLoading}>Request token</Form.Button>
+					</div>
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+		</form>
+		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+			<div class="pt-4">
+				<SuperDebug data={$requestFormData} />
+			</div>
+		{/if}
+	</Card.Content>
+
+	<Separator />
+
+	<Card.Header>
+		<Card.Title>Confirm email change</Card.Title>
+		<Card.Description
+			>Enter your verification token below to confirm the email change.</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<form method="POST" action="?/emailConfirm" class="space-y-2" use:confirmEnhance>
+			<Form.Field form={confirmForm} name="token">
+				<Form.Control let:attrs>
+					<Form.Label>Token</Form.Label>
+					<Input {...attrs} bind:value={$confirmFormData.token} />
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+			<Form.Field form={confirmForm} name="password">
+				<Form.Control let:attrs>
+					<Form.Label>Password</Form.Label>
+					<Input {...attrs} bind:value={$confirmFormData.password} type="password" />
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+			<Form.Button disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{/if}
+				Update password
+			</Form.Button>
+		</form>
+
+		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+			<div class="pt-4">
+				<SuperDebug data={$confirmFormData} />
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/src/routes/(user)/settings/account/password-form.svelte b/src/routes/(user)/settings/account/password-form.svelte
new file mode 100644
index 0000000..a14e412
--- /dev/null
+++ b/src/routes/(user)/settings/account/password-form.svelte
@@ -0,0 +1,92 @@
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const passwordFormSchema = z.object({
+		oldPassword: z.string(),
+		password: z.string().min(8),
+		passwordConfirm: z.string().min(8)
+	});
+	export type PasswordFormSchema = typeof passwordFormSchema;
+</script>
+
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
+
+	export let data: SuperValidated<Infer<PasswordFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(passwordFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Updating password...');
+		},
+		onUpdated: ({ form: f }) => {
+			if (f.valid) {
+				toast.success('Your password has been updated.');
+			} else {
+				toast.error('Please fix the errors in the form.');
+			}
+			isLoading = false;
+		},
+		onError: (e) => {
+			toast.error(e.result.error.message);
+			isLoading = false;
+		}
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Change your password</Card.Title>
+		<Card.Description>You can change your password here.</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<form method="POST" action="?/password" class="space-y-2" use:enhance>
+			<Form.Field {form} name="oldPassword">
+				<Form.Control let:attrs>
+					<Form.Label>Current password</Form.Label>
+					<Input {...attrs} bind:value={$formData.oldPassword} type="password" />
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+			<Form.Field {form} name="password">
+				<Form.Control let:attrs>
+					<Form.Label>New password</Form.Label>
+					<Input {...attrs} bind:value={$formData.password} type="password" />
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+			<Form.Field {form} name="passwordConfirm">
+				<Form.Control let:attrs>
+					<Form.Label>Confirm new password</Form.Label>
+					<Input {...attrs} bind:value={$formData.passwordConfirm} type="password" />
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+
+			<Form.Button disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{/if}
+				Update password
+			</Form.Button>
+		</form>
+
+		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+			<div class="pt-4">
+				<SuperDebug data={$formData} />
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/src/routes/(user)/settings/account/username-form.svelte b/src/routes/(user)/settings/account/username-form.svelte
new file mode 100644
index 0000000..12ff920
--- /dev/null
+++ b/src/routes/(user)/settings/account/username-form.svelte
@@ -0,0 +1,76 @@
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const usernameFormSchema = z.object({
+		username: z.string().min(2).max(16)
+	});
+	export type UsernameFormSchema = typeof usernameFormSchema;
+</script>
+
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import type { LayoutData } from '../$types';
+	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
+
+	export let user: LayoutData['user'];
+	export let data: SuperValidated<Infer<UsernameFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(usernameFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Updating username...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Your username has been updated.');
+			} else {
+				toast.error('Please fix the errors in the form.');
+			}
+		}
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Change your username</Card.Title>
+		<Card.Description>
+			You can modify the username used for logging in and as your handle.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<form method="POST" action="?/username" class="space-y-8" use:enhance>
+			<Form.Field {form} name="username">
+				<Form.Control let:attrs>
+					<Form.Label>Username</Form.Label>
+					<Input placeholder={user?.username} {...attrs} bind:value={$formData.username} />
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.Field>
+
+			<Form.Button disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{/if}
+				Update password
+			</Form.Button>
+		</form>
+
+		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+			<div class="pt-4">
+				<SuperDebug data={$formData} />
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/src/routes/(user)/settings/appearance/appearance-form.svelte b/src/routes/(user)/settings/appearance/appearance-form.svelte
index a369093..43f71d8 100644
--- a/src/routes/(user)/settings/appearance/appearance-form.svelte
+++ b/src/routes/(user)/settings/appearance/appearance-form.svelte
@@ -1,93 +1,104 @@
 <script lang="ts" context="module">
-	import { z } from "zod";
+	import { z } from 'zod';
 
 	export const appearanceFormSchema = z.object({
-		theme: z.enum(["light", "dark"], {
-			required_error: "Please select a theme.",
-		}),
-		font: z.enum(["inter", "manrope", "system"], {
-			invalid_type_error: "Select a font",
-			required_error: "Please select a font.",
-		}),
+		theme: z.enum(['system', 'light', 'dark'], {
+			required_error: 'Please select a theme.'
+		})
 	});
 
 	export type AppearanceFormSchema = typeof appearanceFormSchema;
 </script>
 
 <script lang="ts">
-	import { ChevronDown } from "radix-icons-svelte";
-	import { browser, dev } from "$app/environment";
-	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
-	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
-	import * as Form from "$lib/components/ui/form";
-	import * as RadioGroup from "$lib/components/ui/radio-group";
-	import Label from "$lib/components/ui/label/label.svelte";
-	import { zodClient } from "sveltekit-superforms/adapters";
-	import { cn } from "$lib/utils";
-	import { buttonVariants } from "$lib/components/ui/button";
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import SuperDebug, { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import * as Form from '$lib/components/ui/form';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { zodClient } from 'sveltekit-superforms/adapters';
 	export let data: SuperValidated<Infer<AppearanceFormSchema>>;
 
 	const form = superForm(data, {
-		validators: zodClient(appearanceFormSchema),
+		validators: zodClient(appearanceFormSchema)
 	});
 
 	const { form: formData, enhance } = form;
 </script>
 
 <form method="POST" use:enhance class="space-y-8">
-	<Form.Field {form} name="font">
-		<Form.Control let:attrs>
-			<Form.Label>Font</Form.Label>
-			<div class="relative w-max">
-				<select
-					{...attrs}
-					class={cn(
-						buttonVariants({ variant: "outline" }),
-						"w-[200px] appearance-none font-normal"
-					)}
-					bind:value={$formData.font}
-				>
-					<option value="inter">Inter</option>
-					<option value="manrope">Manrope</option>
-					<option value="system">System</option>
-				</select>
-				<ChevronDown class="absolute right-3 top-2.5 size-4 opacity-50" />
-			</div>
-		</Form.Control>
-		<Form.Description>Set the font you want to use in the dashboard.</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
 	<Form.Fieldset {form} name="theme">
 		<Form.Legend>Theme</Form.Legend>
 		<Form.Description>Select the theme for the dashboard.</Form.Description>
 		<Form.FieldErrors />
 		<RadioGroup.Root
-			class="grid max-w-md grid-cols-2 gap-8 pt-2"
+			class="grid grid-cols-3 gap-8 pt-2"
 			orientation="horizontal"
 			bind:value={$formData.theme}
 		>
+			<Form.Control let:attrs>
+				<Label class="[&:has([data-state=checked])>div]:border-primary">
+					<RadioGroup.Item {...attrs} value="system" class="sr-only" />
+					<!-- <div class="container">
+						<div class="div1">
+							<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
+								<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
+									<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
+										<div class="h-2 w-4 rounded-lg bg-[#ecedef]" />
+										<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
+									</div>
+									<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+										<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+										<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
+									</div>
+									<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+										<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+										<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="div2"> -->
+							<div
+								class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
+							>
+								<div class="space-y-2 rounded-sm bg-slate-950 p-2">
+									<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
+										<div class="h-2 w-4 rounded-lg bg-slate-400" />
+										<div class="h-2 w-full rounded-lg bg-slate-400" />
+									</div>
+									<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+										<div class="h-4 w-4 rounded-full bg-slate-400" />
+										<div class="h-2 w-full rounded-lg bg-slate-400" />
+									</div>
+									<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+										<div class="h-4 w-4 rounded-full bg-slate-400" />
+										<div class="h-2 w-full rounded-lg bg-slate-400" />
+									</div>
+								</div>
+							</div>
+						<!-- </div>
+					</div> -->
+					<span class="block w-full p-2 text-center font-normal"> System </span>
+				</Label>
+			</Form.Control>
 			<Form.Control let:attrs>
 				<Label class="[&:has([data-state=checked])>div]:border-primary">
 					<RadioGroup.Item {...attrs} value="light" class="sr-only" />
-					<div
-						class="items-center rounded-md border-2 border-muted p-1 hover:border-accent"
-					>
+					<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
 						<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
 							<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
-								<div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
-								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+								<div class="h-2 w-4 rounded-lg bg-[#ecedef]" />
+								<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
-								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+								<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
-								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+								<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
 							</div>
 						</div>
 					</div>
@@ -102,20 +113,16 @@
 					>
 						<div class="space-y-2 rounded-sm bg-slate-950 p-2">
 							<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
-								<div class="h-2 w-[80px] rounded-lg bg-slate-400" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+								<div class="h-2 w-4 rounded-lg bg-slate-400" />
+								<div class="h-2 w-full rounded-lg bg-slate-400" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-slate-400" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+								<div class="h-2 w-full rounded-lg bg-slate-400" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-slate-400" />
-								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+								<div class="h-2 w-full rounded-lg bg-slate-400" />
 							</div>
 						</div>
 					</div>
@@ -131,3 +138,23 @@
 {#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
 	<SuperDebug data={$formData} />
 {/if}
+
+<style>
+	.container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.div1,
+	.div2 {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+	}
+
+	.div2 {
+		clip-path: polygon(0 0, 100% 0, 0 100%);
+	}
+</style>
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
index 1af763d..f77fd3e 100644
--- a/src/routes/(user)/settings/profile-form.svelte
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -17,6 +17,7 @@
 	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import type { LayoutData } from '../$types';
 	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
 
 	export let user: LayoutData['user'];
 	export let data: SuperValidated<Infer<ProfileFormSchema>>;
@@ -26,7 +27,7 @@
 		validators: zodClient(profileFormSchema),
 		onSubmit: () => {
 			isLoading = true;
-			toast.success('Updating your name...');
+			toast.loading('Updating your name...');
 		},
 		onUpdated: ({ form: f }) => {
 			isLoading = false;
@@ -59,7 +60,12 @@
 				<Form.FieldErrors />
 			</Form.Field>
 
-			<Form.Button disabled={isLoading}>Update name</Form.Button>
+			<Form.Button disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{/if}
+				Update password
+			</Form.Button>
 		</form>
 
 		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}

From 68ae0e7d1e0a6d8763b4029e933d8954de283b28 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 03:12:41 +0100
Subject: [PATCH 13/18] feat: user settings and profile pages

---
 src/lib/components/site/user-nav.svelte       |   3 +-
 src/routes/(user)/settings/+layout.svelte     |   4 -
 .../(user)/settings/account/+page.svelte      |   2 +-
 .../(user)/settings/account/email-form.svelte |   9 +-
 .../settings/account/username-form.svelte     |   2 +-
 .../settings/appearance/+page.server.ts       |   5 +-
 .../appearance/appearance-form.svelte         | 194 +++++++++---------
 .../settings/notifications/+page.server.ts    |  25 ---
 .../settings/notifications/+page.svelte       |  16 --
 .../notifications/notifications-form.svelte   | 146 -------------
 .../(user)/settings/profile-form.svelte       |   4 +-
 .../(user)/settings/profile/+page.server.ts   |   5 +
 src/routes/+layout.svelte                     |   9 +-
 13 files changed, 122 insertions(+), 302 deletions(-)
 delete mode 100644 src/routes/(user)/settings/notifications/+page.server.ts
 delete mode 100644 src/routes/(user)/settings/notifications/+page.svelte
 delete mode 100644 src/routes/(user)/settings/notifications/notifications-form.svelte
 create mode 100644 src/routes/(user)/settings/profile/+page.server.ts

diff --git a/src/lib/components/site/user-nav.svelte b/src/lib/components/site/user-nav.svelte
index 1a485ea..b9a8ff8 100644
--- a/src/lib/components/site/user-nav.svelte
+++ b/src/lib/components/site/user-nav.svelte
@@ -34,8 +34,9 @@
 			</DropdownMenu.Label>
 			<DropdownMenu.Group>
 				<DropdownMenu.Item href="/settings">Profile</DropdownMenu.Item>
+				<DropdownMenu.Item href="/settings/account">Account</DropdownMenu.Item>
 				<DropdownMenu.Item href="/settings/appearance">Appearance</DropdownMenu.Item>
-				<DropdownMenu.Item href="/settings/notifications">Notifications</DropdownMenu.Item>
+				<!-- <DropdownMenu.Item href="/settings/notifications">Notifications</DropdownMenu.Item> -->
 			</DropdownMenu.Group>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Item href="/logout">
diff --git a/src/routes/(user)/settings/+layout.svelte b/src/routes/(user)/settings/+layout.svelte
index e3b27fb..1503cea 100644
--- a/src/routes/(user)/settings/+layout.svelte
+++ b/src/routes/(user)/settings/+layout.svelte
@@ -15,10 +15,6 @@
 			title: "Appearance",
 			href: "/settings/appearance",
 		},
-		{
-			title: "Notifications",
-			href: "/settings/notifications",
-		},
 	];
 </script>
 
diff --git a/src/routes/(user)/settings/account/+page.svelte b/src/routes/(user)/settings/account/+page.svelte
index 6918b98..21110f7 100644
--- a/src/routes/(user)/settings/account/+page.svelte
+++ b/src/routes/(user)/settings/account/+page.svelte
@@ -18,5 +18,5 @@
 	<Separator />
 	<UsernameForm user={data.user} data={data.usernameForm} />
 	<EmailForm user={data.user} requestData={data.emailRequestForm} confirmData={data.emailConfirmForm} />
-	<PasswordForm user={data.user} data={data.passwordForm} />
+	<PasswordForm data={data.passwordForm} />
 </div>
diff --git a/src/routes/(user)/settings/account/email-form.svelte b/src/routes/(user)/settings/account/email-form.svelte
index caec4d5..91d6618 100644
--- a/src/routes/(user)/settings/account/email-form.svelte
+++ b/src/routes/(user)/settings/account/email-form.svelte
@@ -80,7 +80,12 @@
 					<Form.Label>New email</Form.Label>
 					<div class="flex space-x-2">
 						<Input placeholder={user?.email} {...attrs} bind:value={$requestFormData.newEmail} />
-						<Form.Button variant="secondary" disabled={isLoading}>Request token</Form.Button>
+						<Form.Button variant="secondary" disabled={isLoading}>
+							{#if isLoading}
+								<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+							{/if}
+							Request token
+						</Form.Button>
 					</div>
 				</Form.Control>
 				<Form.FieldErrors />
@@ -121,7 +126,7 @@
 				{#if isLoading}
 					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
 				{/if}
-				Update password
+				Update email
 			</Form.Button>
 		</form>
 
diff --git a/src/routes/(user)/settings/account/username-form.svelte b/src/routes/(user)/settings/account/username-form.svelte
index 12ff920..405d4b3 100644
--- a/src/routes/(user)/settings/account/username-form.svelte
+++ b/src/routes/(user)/settings/account/username-form.svelte
@@ -63,7 +63,7 @@
 				{#if isLoading}
 					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
 				{/if}
-				Update password
+				Update username
 			</Form.Button>
 		</form>
 
diff --git a/src/routes/(user)/settings/appearance/+page.server.ts b/src/routes/(user)/settings/appearance/+page.server.ts
index dc249bc..8d988d0 100644
--- a/src/routes/(user)/settings/appearance/+page.server.ts
+++ b/src/routes/(user)/settings/appearance/+page.server.ts
@@ -11,13 +11,14 @@ export const load: PageServerLoad = async () => {
 };
 
 export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(appearanceFormSchema));
+	default: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(appearanceFormSchema));
 		if (!form.valid) {
 			return fail(400, {
 				form,
 			});
 		}
+		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
 			form,
 		};
diff --git a/src/routes/(user)/settings/appearance/appearance-form.svelte b/src/routes/(user)/settings/appearance/appearance-form.svelte
index 43f71d8..d690993 100644
--- a/src/routes/(user)/settings/appearance/appearance-form.svelte
+++ b/src/routes/(user)/settings/appearance/appearance-form.svelte
@@ -2,7 +2,7 @@
 	import { z } from 'zod';
 
 	export const appearanceFormSchema = z.object({
-		theme: z.enum(['system', 'light', 'dark'], {
+		appearanceMode: z.enum(['system', 'light', 'dark'], {
 			required_error: 'Please select a theme.'
 		})
 	});
@@ -13,35 +13,86 @@
 <script lang="ts">
 	import { browser, dev } from '$app/environment';
 	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
-	import SuperDebug, { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug, {
+		type SuperValidated,
+		type Infer,
+		superForm,
+	} from 'sveltekit-superforms';
+	import * as Card from '$lib/components/ui/card';
 	import * as Form from '$lib/components/ui/form';
 	import * as RadioGroup from '$lib/components/ui/radio-group';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
+	import { resetMode, setMode } from 'mode-watcher';
+
 	export let data: SuperValidated<Infer<AppearanceFormSchema>>;
+	let isLoading = false;
 
 	const form = superForm(data, {
-		validators: zodClient(appearanceFormSchema)
+		validators: zodClient(appearanceFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Updating appearance...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			setMode(f.data.appearanceMode)
+			if (f.valid) {
+				toast.success('Appearance has been updated.');
+			} else {
+				toast.error('Please fix the errors in the form.');
+			}
+		}
 	});
-
 	const { form: formData, enhance } = form;
 </script>
 
-<form method="POST" use:enhance class="space-y-8">
-	<Form.Fieldset {form} name="theme">
-		<Form.Legend>Theme</Form.Legend>
-		<Form.Description>Select the theme for the dashboard.</Form.Description>
-		<Form.FieldErrors />
-		<RadioGroup.Root
-			class="grid grid-cols-3 gap-8 pt-2"
-			orientation="horizontal"
-			bind:value={$formData.theme}
-		>
-			<Form.Control let:attrs>
-				<Label class="[&:has([data-state=checked])>div]:border-primary">
-					<RadioGroup.Item {...attrs} value="system" class="sr-only" />
-					<!-- <div class="container">
-						<div class="div1">
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Change your mode</Card.Title>
+		<Card.Description>
+			You can modify the mode for your theme preference.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<form method="POST" use:enhance class="space-y-2">
+			<Form.Fieldset {form} name="appearanceMode">
+				<Form.Legend>Theme</Form.Legend>
+				<Form.FieldErrors />
+				<RadioGroup.Root
+					class="grid grid-cols-3 gap-8 pt-2"
+					orientation="horizontal"
+					bind:value={$formData.appearanceMode}
+				>
+					<Form.Control let:attrs>
+						<Label class="[&:has([data-state=checked])>div]:border-primary">
+							<RadioGroup.Item {...attrs} value="system" class="sr-only" />
+							<div
+								class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
+							>
+								<div class="space-y-2 rounded-sm bg-slate-500 p-2">
+									<div class="space-y-2 rounded-md bg-slate-400 p-2 shadow-sm">
+										<div class="h-2 w-4 rounded-lg bg-slate-200" />
+										<div class="h-2 w-full rounded-lg bg-slate-200" />
+									</div>
+									<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
+										<div class="h-4 w-4 rounded-full bg-slate-200" />
+										<div class="h-2 w-full rounded-lg bg-slate-200" />
+									</div>
+									<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
+										<div class="h-4 w-4 rounded-full bg-slate-200" />
+										<div class="h-2 w-full rounded-lg bg-slate-200" />
+									</div>
+								</div>
+							</div>
+							<span class="block w-full p-2 text-center font-normal"> System </span>
+						</Label>
+					</Form.Control>
+					<Form.Control let:attrs>
+						<Label class="[&:has([data-state=checked])>div]:border-primary">
+							<RadioGroup.Item {...attrs} value="light" class="sr-only" />
 							<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
 								<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
 									<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
@@ -58,8 +109,12 @@
 									</div>
 								</div>
 							</div>
-						</div>
-						<div class="div2"> -->
+							<span class="block w-full p-2 text-center font-normal"> Light </span>
+						</Label>
+					</Form.Control>
+					<Form.Control let:attrs>
+						<Label class="[&:has([data-state=checked])>div]:border-primary">
+							<RadioGroup.Item {...attrs} value="dark" class="sr-only" />
 							<div
 								class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
 							>
@@ -78,83 +133,22 @@
 									</div>
 								</div>
 							</div>
-						<!-- </div>
-					</div> -->
-					<span class="block w-full p-2 text-center font-normal"> System </span>
-				</Label>
-			</Form.Control>
-			<Form.Control let:attrs>
-				<Label class="[&:has([data-state=checked])>div]:border-primary">
-					<RadioGroup.Item {...attrs} value="light" class="sr-only" />
-					<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
-						<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
-							<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
-								<div class="h-2 w-4 rounded-lg bg-[#ecedef]" />
-								<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
-								<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
-								<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
-							</div>
-						</div>
-					</div>
-					<span class="block w-full p-2 text-center font-normal"> Light </span>
-				</Label>
-			</Form.Control>
-			<Form.Control let:attrs>
-				<Label class="[&:has([data-state=checked])>div]:border-primary">
-					<RadioGroup.Item {...attrs} value="dark" class="sr-only" />
-					<div
-						class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
-					>
-						<div class="space-y-2 rounded-sm bg-slate-950 p-2">
-							<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
-								<div class="h-2 w-4 rounded-lg bg-slate-400" />
-								<div class="h-2 w-full rounded-lg bg-slate-400" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-slate-400" />
-								<div class="h-2 w-full rounded-lg bg-slate-400" />
-							</div>
-							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-								<div class="h-4 w-4 rounded-full bg-slate-400" />
-								<div class="h-2 w-full rounded-lg bg-slate-400" />
-							</div>
-						</div>
-					</div>
-					<span class="block w-full p-2 text-center font-normal"> Dark </span>
-				</Label>
-			</Form.Control>
-			<RadioGroup.Input name="theme" />
-		</RadioGroup.Root>
-	</Form.Fieldset>
-	<Form.Button>Update preferences</Form.Button>
-</form>
+							<span class="block w-full p-2 text-center font-normal"> Dark </span>
+						</Label>
+					</Form.Control>
+					<RadioGroup.Input name="appearanceMode" />
+				</RadioGroup.Root>
+			</Form.Fieldset>
+			<Form.Button disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{/if}
+				Update appearance
+			</Form.Button>
+		</form>
 
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
-	<SuperDebug data={$formData} />
-{/if}
-
-<style>
-	.container {
-		position: relative;
-		width: 100%;
-		height: 100%;
-	}
-
-	.div1,
-	.div2 {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-	}
-
-	.div2 {
-		clip-path: polygon(0 0, 100% 0, 0 100%);
-	}
-</style>
+		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+			<SuperDebug data={$formData} />
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/src/routes/(user)/settings/notifications/+page.server.ts b/src/routes/(user)/settings/notifications/+page.server.ts
deleted file mode 100644
index cd07e30..0000000
--- a/src/routes/(user)/settings/notifications/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { superValidate } from "sveltekit-superforms";
-import { zod } from "sveltekit-superforms/adapters";
-import type { PageServerLoad } from "../$types";
-import { notificationsFormSchema } from "./notifications-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
-
-export const load: PageServerLoad = async () => {
-	return {
-		form: await superValidate(zod(notificationsFormSchema)),
-	};
-};
-
-export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(notificationsFormSchema));
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			});
-		}
-		return {
-			form,
-		};
-	},
-};
diff --git a/src/routes/(user)/settings/notifications/+page.svelte b/src/routes/(user)/settings/notifications/+page.svelte
deleted file mode 100644
index cf72042..0000000
--- a/src/routes/(user)/settings/notifications/+page.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import NotificationsForm from "./notifications-form.svelte";
-	import type { PageData } from "./$types";
-
-	export let data: PageData;
-</script>
-
-<div class="space-y-6">
-	<div>
-		<h3 class="text-lg font-medium">Notifications</h3>
-		<p class="text-sm text-muted-foreground">Configure how you receive notifications.</p>
-	</div>
-	<Separator />
-	<NotificationsForm data={data.form} />
-</div>
diff --git a/src/routes/(user)/settings/notifications/notifications-form.svelte b/src/routes/(user)/settings/notifications/notifications-form.svelte
deleted file mode 100644
index 23972bb..0000000
--- a/src/routes/(user)/settings/notifications/notifications-form.svelte
+++ /dev/null
@@ -1,146 +0,0 @@
-<script lang="ts" context="module">
-	import { z } from "zod";
-	export const notificationsFormSchema = z.object({
-		type: z.enum(["all", "mentions", "none"], {
-			required_error: "You need to select a notification type.",
-		}),
-		mobile: z.boolean().default(false).optional(),
-		communication_emails: z.boolean().default(false).optional(),
-		social_emails: z.boolean().default(false).optional(),
-		marketing_emails: z.boolean().default(false).optional(),
-		security_emails: z.boolean(),
-	});
-	type NotificationFormSchema = typeof notificationsFormSchema;
-</script>
-
-<script lang="ts">
-	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
-	import * as Form from "$lib/components/ui/form";
-	import * as RadioGroup from "$lib/components/ui/radio-group";
-	import { Switch } from "$lib/components/ui/switch";
-	import { zodClient } from "sveltekit-superforms/adapters";
-	import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
-	import { browser, dev } from "$app/environment";
-	import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
-
-	export let data: SuperValidated<Infer<NotificationFormSchema>>;
-
-	const form = superForm(data, {
-		validators: zodClient(notificationsFormSchema),
-	});
-
-	const { form: formData, enhance } = form;
-</script>
-
-<form method="POST" use:enhance class="space-y-8">
-	<Form.Fieldset {form} name="type">
-		<Form.Legend>Notify me about...</Form.Legend>
-		<Form.Control>
-			<RadioGroup.Root bind:value={$formData.type}>
-				<div class="flex items-center space-x-3">
-					<Form.Control let:attrs>
-						<RadioGroup.Item value="all" {...attrs} />
-						<Form.Label>All new messages</Form.Label>
-					</Form.Control>
-				</div>
-				<div class="flex items-center space-x-3">
-					<Form.Control let:attrs>
-						<RadioGroup.Item value="mentions" {...attrs} />
-						<Form.Label>Direct messages and mentions</Form.Label>
-					</Form.Control>
-				</div>
-				<div class="flex items-center space-x-3">
-					<Form.Control let:attrs>
-						<RadioGroup.Item value="none" {...attrs} />
-						<Form.Label>Nothing</Form.Label>
-					</Form.Control>
-				</div>
-				<RadioGroup.Input name="type" />
-			</RadioGroup.Root>
-		</Form.Control>
-	</Form.Fieldset>
-	<div>
-		<h3 class="mb-4 text-lg font-medium">Email Notifications</h3>
-		<div class="space-y-4">
-			<Form.Field
-				{form}
-				name="communication_emails"
-				class="flex flex-row items-center justify-between rounded-lg border p-4"
-			>
-				<Form.Control let:attrs>
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Communication emails</Form.Label>
-						<Form.Description>
-							Receive emails about your account activity.
-						</Form.Description>
-					</div>
-					<Switch includeInput {...attrs} bind:checked={$formData.communication_emails} />
-				</Form.Control>
-			</Form.Field>
-			<Form.Field
-				{form}
-				name="marketing_emails"
-				class="flex flex-row items-center justify-between rounded-lg border p-4"
-			>
-				<Form.Control let:attrs>
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Marketing emails</Form.Label>
-						<Form.Description>
-							Receive emails about new products, features, and more.
-						</Form.Description>
-					</div>
-					<Switch includeInput {...attrs} bind:checked={$formData.marketing_emails} />
-				</Form.Control>
-			</Form.Field>
-			<Form.Field
-				{form}
-				name="social_emails"
-				class="flex flex-row items-center justify-between rounded-lg border p-4"
-			>
-				<Form.Control let:attrs>
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Social emails</Form.Label>
-						<Form.Description>
-							Receive emails for friend requests, follows, and more.
-						</Form.Description>
-					</div>
-					<Switch includeInput {...attrs} bind:checked={$formData.social_emails} />
-				</Form.Control>
-			</Form.Field>
-			<Form.Field
-				{form}
-				name="security_emails"
-				class="flex flex-row items-center justify-between rounded-lg border p-4"
-			>
-				<Form.Control let:attrs>
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Security emails</Form.Label>
-						<Form.Description>
-							Receive emails about your account activity and security.
-						</Form.Description>
-					</div>
-					<Switch includeInput {...attrs} bind:checked={$formData.security_emails} />
-				</Form.Control>
-			</Form.Field>
-		</div>
-	</div>
-	<Form.Field {form} name="mobile" class="flex flex-row items-start space-x-3 space-y-0">
-		<Form.Control let:attrs>
-			<Checkbox {...attrs} bind:checked={$formData.mobile} />
-			<div class="space-y-1 leading-none">
-				<Form.Label>Use different settings for my mobile devices</Form.Label>
-				<Form.Description>
-					You can manage your mobile notifications in the <a href="/examples/forms"
-						>mobile settings</a
-					> page.
-				</Form.Description>
-			</div>
-			<input name={attrs.name} bind:value={$formData.mobile} hidden />
-		</Form.Control>
-	</Form.Field>
-	<Form.Button>Update notifications</Form.Button>
-</form>
-
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
-	<SuperDebug data={$formData} />
-{/if}
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
index f77fd3e..a819aa6 100644
--- a/src/routes/(user)/settings/profile-form.svelte
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -50,7 +50,7 @@
 		</Card.Description>
 	</Card.Header>
 	<Card.Content>
-		<form method="POST" class="space-y-8" use:enhance>
+		<form method="POST" class="space-y-2" use:enhance>
 			<Form.Field {form} name="name">
 				<Form.Control let:attrs>
 					<Form.Label>Name</Form.Label>
@@ -64,7 +64,7 @@
 				{#if isLoading}
 					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
 				{/if}
-				Update password
+				Update name
 			</Form.Button>
 		</form>
 
diff --git a/src/routes/(user)/settings/profile/+page.server.ts b/src/routes/(user)/settings/profile/+page.server.ts
new file mode 100644
index 0000000..25caaaf
--- /dev/null
+++ b/src/routes/(user)/settings/profile/+page.server.ts
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export const load = async () => {
+	throw redirect(303, '/settings');
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9ed5cec..29326f3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
 	import { dev } from '$app/environment';
 	import { Metadata, SiteFooter, SiteNavBar, TailwindIndicator } from '$lib/components/site';
-	import { ModeWatcher } from 'mode-watcher';
+	import { ModeWatcher, setMode } from 'mode-watcher';
 	import '../app.pcss';
 	import type { LayoutData } from './$types';
 	import DataIndicator from '$lib/components/site/data-indicator.svelte';
 	import { fly } from 'svelte/transition';
 	import { Toaster } from 'svelte-sonner';
+	import {  } from "mode-watcher";
 
 	export let data: LayoutData;
+	
+	if (data.user?.appearanceMode) {
+		setMode(data.user.appearanceMode);
+	}
 </script>
 
-<ModeWatcher />
+<ModeWatcher defaultMode={data.user?.appearanceMode ?? 'system'} />
 <Toaster />
 <Metadata />
 

From f6c274b3cc44801ddb18d822efcc3faf2d5a44d7 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 03:16:22 +0100
Subject: [PATCH 14/18] feat: formatting using linter

---
 src/lib/components/ui/button/button.svelte    | 14 +--
 src/lib/components/ui/button/index.ts         | 43 ++++----
 .../ui/calendar/calendar-cell.svelte          | 10 +-
 .../ui/calendar/calendar-day.svelte           | 26 ++---
 .../ui/calendar/calendar-grid-body.svelte     |  6 +-
 .../ui/calendar/calendar-grid-head.svelte     |  4 +-
 .../ui/calendar/calendar-grid-row.svelte      |  8 +-
 .../ui/calendar/calendar-grid.svelte          |  8 +-
 .../ui/calendar/calendar-head-cell.svelte     |  8 +-
 .../ui/calendar/calendar-header.svelte        |  8 +-
 .../ui/calendar/calendar-heading.svelte       |  6 +-
 .../ui/calendar/calendar-months.svelte        |  8 +-
 .../ui/calendar/calendar-next-button.svelte   | 14 +--
 .../ui/calendar/calendar-prev-button.svelte   | 14 +--
 .../components/ui/calendar/calendar.svelte    | 16 +--
 src/lib/components/ui/calendar/index.ts       | 28 +++---
 src/lib/components/ui/form/form-button.svelte |  2 +-
 .../ui/form/form-description.svelte           |  8 +-
 .../ui/form/form-element-field.svelte         | 12 +--
 .../ui/form/form-field-errors.svelte          | 10 +-
 src/lib/components/ui/form/form-field.svelte  | 12 +--
 .../components/ui/form/form-fieldset.svelte   | 10 +-
 src/lib/components/ui/form/form-label.svelte  | 12 +--
 src/lib/components/ui/form/form-legend.svelte |  8 +-
 src/lib/components/ui/form/index.ts           | 20 ++--
 src/lib/components/ui/label/index.ts          |  4 +-
 src/lib/components/ui/label/label.svelte      |  8 +-
 .../auth/(components)/register-form.svelte    | 99 +++++++++----------
 .../(auth)/auth/(components)/sso-form.svelte  | 18 ++--
 src/routes/(auth)/auth/+page.svelte           |  2 +-
 .../settings/(components)/sidebar-nav.svelte  | 23 ++---
 src/routes/(user)/settings/+layout.svelte     | 22 ++---
 src/routes/(user)/settings/+page.server.ts    | 18 ++--
 src/routes/(user)/settings/+page.svelte       |  6 +-
 .../(user)/settings/account/+page.server.ts   | 34 +++----
 .../(user)/settings/account/+page.svelte      | 20 ++--
 .../settings/appearance/+page.server.ts       | 18 ++--
 .../(user)/settings/appearance/+page.svelte   |  6 +-
 .../appearance/appearance-form.svelte         | 14 +--
 src/routes/+layout.svelte                     |  4 +-
 40 files changed, 298 insertions(+), 313 deletions(-)

diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index a128f14..fb61a87 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { buttonVariants, type Props, type Events } from ".";
+	import { Button as ButtonPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { buttonVariants, type Props, type Events } from '.';
 
 	type $$Props = Props;
 	type $$Events = Events;
 
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export let size: $$Props['size'] = 'default';
+	export let builders: $$Props['builders'] = [];
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index 86b7231..f13cfdf 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,35 +1,34 @@
-import type { Button as ButtonPrimitive } from "bits-ui";
-import { tv, type VariantProps } from "tailwind-variants";
-import Root from "./button.svelte";
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import { tv, type VariantProps } from 'tailwind-variants';
+import Root from './button.svelte';
 
 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-			destructive:
-				"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+			default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+			destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
 			outline:
-				"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
+				'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+			secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+			ghost: 'hover:bg-accent hover:text-accent-foreground',
+			link: 'text-primary underline-offset-4 hover:underline'
 		},
 		size: {
-			default: "h-9 px-4 py-2",
-			sm: "h-8 rounded-md px-3 text-xs",
-			lg: "h-10 rounded-md px-8",
-			icon: "h-9 w-9",
-		},
+			default: 'h-9 px-4 py-2',
+			sm: 'h-8 rounded-md px-3 text-xs',
+			lg: 'h-10 rounded-md px-8',
+			icon: 'h-9 w-9'
+		}
 	},
 	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
+		variant: 'default',
+		size: 'default'
+	}
 });
 
-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+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
 };
diff --git a/src/lib/components/ui/calendar/calendar-cell.svelte b/src/lib/components/ui/calendar/calendar-cell.svelte
index 1febe35..563b2e3 100644
--- a/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.CellProps;
 
-	export let date: $$Props["date"];
-	let className: $$Props["class"] = undefined;
+	export let date: $$Props['date'];
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.Cell
 	{date}
 	class={cn(
-		"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
+		'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/calendar/calendar-day.svelte b/src/lib/components/ui/calendar/calendar-day.svelte
index 8de8448..fbfb694 100644
--- a/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/src/lib/components/ui/calendar/calendar-day.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.DayProps;
 	type $$Events = CalendarPrimitive.DayEvents;
 
-	export let date: $$Props["date"];
-	export let month: $$Props["month"];
-	let className: $$Props["class"] = undefined;
+	export let date: $$Props['date'];
+	export let month: $$Props['month'];
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -17,18 +17,18 @@
 	{date}
 	{month}
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"h-8 w-8 p-0 font-normal",
+		buttonVariants({ variant: 'ghost' }),
+		'h-8 w-8 p-0 font-normal',
 		// Today
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
 		// Selected
-		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 		// Unavailable
-		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
 		// Outside months
-		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/calendar/calendar-grid-body.svelte b/src/lib/components/ui/calendar/calendar-grid-body.svelte
index b790214..460320f 100644
--- a/src/lib/components/ui/calendar/calendar-grid-body.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridBodyProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/calendar/calendar-grid-head.svelte b/src/lib/components/ui/calendar/calendar-grid-head.svelte
index 8be9ae8..1126125 100644
--- a/src/lib/components/ui/calendar/calendar-grid-head.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridHeadProps;
 
diff --git a/src/lib/components/ui/calendar/calendar-grid-row.svelte b/src/lib/components/ui/calendar/calendar-grid-row.svelte
index 374ad82..2d327e7 100644
--- a/src/lib/components/ui/calendar/calendar-grid-row.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridRowProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+<CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}>
 	<slot />
 </CalendarPrimitive.GridRow>
diff --git a/src/lib/components/ui/calendar/calendar-grid.svelte b/src/lib/components/ui/calendar/calendar-grid.svelte
index 4cdfba7..7b3f7f3 100644
--- a/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+<CalendarPrimitive.Grid class={cn('w-full border-collapse space-y-1', className)} {...$$restProps}>
 	<slot />
 </CalendarPrimitive.Grid>
diff --git a/src/lib/components/ui/calendar/calendar-head-cell.svelte b/src/lib/components/ui/calendar/calendar-head-cell.svelte
index 1176f7f..e0c4aaf 100644
--- a/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.HeadCellProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.HeadCell
-	class={cn("w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
+	class={cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/calendar/calendar-header.svelte b/src/lib/components/ui/calendar/calendar-header.svelte
index 88b8616..c663b5d 100644
--- a/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/src/lib/components/ui/calendar/calendar-header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.HeaderProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.Header
-	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	class={cn('relative flex w-full items-center justify-between pt-1', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/calendar/calendar-heading.svelte b/src/lib/components/ui/calendar/calendar-heading.svelte
index 51ce98c..929adca 100644
--- a/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.HeadingProps;
 
@@ -10,7 +10,7 @@
 
 <CalendarPrimitive.Heading
 	let:headingValue
-	class={cn("text-sm font-medium", className)}
+	class={cn('text-sm font-medium', className)}
 	{...$$restProps}
 >
 	<slot {headingValue}>
diff --git a/src/lib/components/ui/calendar/calendar-months.svelte b/src/lib/components/ui/calendar/calendar-months.svelte
index 9fb1326..7c6278e 100644
--- a/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/src/lib/components/ui/calendar/calendar-months.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
-	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/calendar/calendar-next-button.svelte b/src/lib/components/ui/calendar/calendar-next-button.svelte
index 3782695..8540714 100644
--- a/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { ChevronRight } from "radix-icons-svelte";
-	import { buttonVariants } from "$lib/components/ui/button";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { ChevronRight } from 'radix-icons-svelte';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.NextButtonProps;
 	type $$Events = CalendarPrimitive.NextButtonEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.NextButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant: 'outline' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/calendar/calendar-prev-button.svelte b/src/lib/components/ui/calendar/calendar-prev-button.svelte
index 385efa1..50ea0ca 100644
--- a/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { ChevronLeft } from "radix-icons-svelte";
-	import { buttonVariants } from "$lib/components/ui/button";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { ChevronLeft } from 'radix-icons-svelte';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.PrevButtonProps;
 	type $$Events = CalendarPrimitive.PrevButtonEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.PrevButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant: 'outline' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/calendar/calendar.svelte b/src/lib/components/ui/calendar/calendar.svelte
index f31f432..8e4cb1d 100644
--- a/src/lib/components/ui/calendar/calendar.svelte
+++ b/src/lib/components/ui/calendar/calendar.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from ".";
-	import { cn } from "$lib/utils";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import * as Calendar from '.';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.Props;
 	type $$Events = CalendarPrimitive.Events;
 
-	export let value: $$Props["value"] = undefined;
-	export let placeholder: $$Props["placeholder"] = undefined;
-	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+	export let value: $$Props['value'] = undefined;
+	export let placeholder: $$Props['placeholder'] = undefined;
+	export let weekdayFormat: $$Props['weekdayFormat'] = 'short';
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -18,7 +18,7 @@
 	bind:value
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	class={cn('p-3', className)}
 	{...$$restProps}
 	on:keydown
 	let:months
diff --git a/src/lib/components/ui/calendar/index.ts b/src/lib/components/ui/calendar/index.ts
index ab257ab..5d60fa5 100644
--- a/src/lib/components/ui/calendar/index.ts
+++ b/src/lib/components/ui/calendar/index.ts
@@ -1,16 +1,16 @@
-import Root from "./calendar.svelte";
-import Cell from "./calendar-cell.svelte";
-import Day from "./calendar-day.svelte";
-import Grid from "./calendar-grid.svelte";
-import Header from "./calendar-header.svelte";
-import Months from "./calendar-months.svelte";
-import GridRow from "./calendar-grid-row.svelte";
-import Heading from "./calendar-heading.svelte";
-import GridBody from "./calendar-grid-body.svelte";
-import GridHead from "./calendar-grid-head.svelte";
-import HeadCell from "./calendar-head-cell.svelte";
-import NextButton from "./calendar-next-button.svelte";
-import PrevButton from "./calendar-prev-button.svelte";
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
 
 export {
 	Day,
@@ -26,5 +26,5 @@ export {
 	NextButton,
 	PrevButton,
 	//
-	Root as Calendar,
+	Root as Calendar
 };
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
index 881e139..30fd292 100644
--- a/src/lib/components/ui/form/form-button.svelte
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Button from "$lib/components/ui/button";
+	import * as Button from '$lib/components/ui/button';
 
 	type $$Props = Button.Props;
 </script>
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
index 0cc7564..02f181a 100644
--- a/src/lib/components/ui/form/form-description.svelte
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils";
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.DescriptionProps;
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Description
-	class={cn("text-[0.8rem] text-muted-foreground", className)}
+	class={cn('text-[0.8rem] text-muted-foreground', className)}
 	{...$$restProps}
 	let:descriptionAttrs
 >
diff --git a/src/lib/components/ui/form/form-element-field.svelte b/src/lib/components/ui/form/form-element-field.svelte
index 12bab55..7a91298 100644
--- a/src/lib/components/ui/form/form-element-field.svelte
+++ b/src/lib/components/ui/form/form-element-field.svelte
@@ -1,26 +1,26 @@
 <script lang="ts" context="module">
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
+	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = unknown;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
-	import type { HTMLAttributes } from "svelte/elements";
-	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLDivElement>;
 
 	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>
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
index 8c9bc12..2a4d145 100644
--- a/src/lib/components/ui/form/form-field-errors.svelte
+++ b/src/lib/components/ui/form/form-field-errors.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils";
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '$lib/utils';
 
 	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-[0.8rem] font-medium text-destructive", className)}
+	class={cn('text-[0.8rem] font-medium text-destructive', className)}
 	{...$$restProps}
 	let:errors
 	let:fieldErrorsAttrs
diff --git a/src/lib/components/ui/form/form-field.svelte b/src/lib/components/ui/form/form-field.svelte
index 745f87c..67d79f0 100644
--- a/src/lib/components/ui/form/form-field.svelte
+++ b/src/lib/components/ui/form/form-field.svelte
@@ -1,26 +1,26 @@
 <script lang="ts" context="module">
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	import type { FormPath, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = unknown;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import type { HTMLAttributes } from "svelte/elements";
-	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '$lib/utils';
 
 	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>
diff --git a/src/lib/components/ui/form/form-fieldset.svelte b/src/lib/components/ui/form/form-fieldset.svelte
index 6d35255..c1bf647 100644
--- a/src/lib/components/ui/form/form-fieldset.svelte
+++ b/src/lib/components/ui/form/form-fieldset.svelte
@@ -1,20 +1,20 @@
 <script lang="ts" context="module">
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	import type { FormPath, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = unknown;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils";
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '$lib/utils';
 
 	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>
 
@@ -25,7 +25,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>
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
index 0fd76c6..eac607d 100644
--- a/src/lib/components/ui/form/form-label.svelte
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { Label as LabelPrimitive } from "bits-ui";
-	import { getFormControl } from "formsnap";
-	import { cn } from "$lib/utils";
-	import { Label } from "$lib/components/ui/label";
+	import type { Label as LabelPrimitive } from 'bits-ui';
+	import { getFormControl } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import { Label } from '$lib/components/ui/label';
 
 	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>
diff --git a/src/lib/components/ui/form/form-legend.svelte b/src/lib/components/ui/form/form-legend.svelte
index 9026f17..9493685 100644
--- a/src/lib/components/ui/form/form-legend.svelte
+++ b/src/lib/components/ui/form/form-legend.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils";
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.LegendProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Legend
 	{...$$restProps}
-	class={cn("text-sm font-medium leading-none data-[fs-error]:text-destructive", className)}
+	class={cn('text-sm font-medium leading-none data-[fs-error]:text-destructive', className)}
 	let:legendAttrs
 >
 	<slot {legendAttrs} />
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
index 80fdf6c..40058b3 100644
--- a/src/lib/components/ui/form/index.ts
+++ b/src/lib/components/ui/form/index.ts
@@ -1,12 +1,12 @@
-import * as FormPrimitive from "formsnap";
-import Description from "./form-description.svelte";
-import Label from "./form-label.svelte";
-import FieldErrors from "./form-field-errors.svelte";
-import Field from "./form-field.svelte";
-import Button from "./form-button.svelte";
-import Fieldset from "./form-fieldset.svelte";
-import Legend from "./form-legend.svelte";
-import ElementField from "./form-element-field.svelte";
+import * as FormPrimitive from 'formsnap';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import FieldErrors from './form-field-errors.svelte';
+import Field from './form-field.svelte';
+import Button from './form-button.svelte';
+import Fieldset from './form-fieldset.svelte';
+import Legend from './form-legend.svelte';
+import ElementField from './form-element-field.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
 };
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
index 8bfca0b..808d141 100644
--- a/src/lib/components/ui/label/index.ts
+++ b/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
 };
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index c4a542b..026d2b3 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = LabelPrimitive.Props;
 
-	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",
+		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 		className
 	)}
 	{...$$restProps}
diff --git a/src/routes/(auth)/auth/(components)/register-form.svelte b/src/routes/(auth)/auth/(components)/register-form.svelte
index 3baeda4..f22caef 100644
--- a/src/routes/(auth)/auth/(components)/register-form.svelte
+++ b/src/routes/(auth)/auth/(components)/register-form.svelte
@@ -9,59 +9,52 @@
 </script>
 
 <div class="flex flex-col space-y-2 text-center">
-  <h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
-  <p class="pb-6 text-sm text-muted-foreground">
-    Enter your details below to create a new account
-  </p>
+	<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
+	<p class="pb-6 text-sm text-muted-foreground">Enter your details below to create a new account</p>
 </div>
 <div class={cn('grid gap-6')} {...$$restProps}>
-  <form
-    method="POST"
-    action="?/register"
-    use:enhance={() => {
-      isLoading = true;
-      return async ({ update }) => {
-        isLoading = false;
-        update();
-      };
-    }}
-  >
-    <div class="grid gap-2">
-      <div class="grid gap-2">
-        <Label for="email">Name</Label>
-        <Input id="name" name="name" type="name" disabled={isLoading} />
-      </div>
-      <div class="grid gap-2">
-        <Label for="email">Email</Label>
-        <Input
-          id="email"
-          name="email"
-          type="email"
-          autocapitalize="none"
-          autocomplete="email"
-          autocorrect="off"
-          disabled={isLoading}
-        />
-      </div>
-      <div class="grid gap-2">
-        <Label for="password">Password</Label>
-        <Input id="password" name="password" type="password" disabled={isLoading} />
-      </div>
-      <div class="grid gap-2">
-        <Label for="passwordConfirm">Confirm password</Label>
-        <Input
-          id="passwordConfirm"
-          name="passwordConfirm"
-          type="password"
-          disabled={isLoading}
-        />
-      </div>
-      <Button type="submit" disabled={isLoading}>
-        {#if isLoading}
-          <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-        {/if}
-        Register
-      </Button>
-    </div>
-  </form>
+	<form
+		method="POST"
+		action="?/register"
+		use:enhance={() => {
+			isLoading = true;
+			return async ({ update }) => {
+				isLoading = false;
+				update();
+			};
+		}}
+	>
+		<div class="grid gap-2">
+			<div class="grid gap-2">
+				<Label for="email">Name</Label>
+				<Input id="name" name="name" type="name" disabled={isLoading} />
+			</div>
+			<div class="grid gap-2">
+				<Label for="email">Email</Label>
+				<Input
+					id="email"
+					name="email"
+					type="email"
+					autocapitalize="none"
+					autocomplete="email"
+					autocorrect="off"
+					disabled={isLoading}
+				/>
+			</div>
+			<div class="grid gap-2">
+				<Label for="password">Password</Label>
+				<Input id="password" name="password" type="password" disabled={isLoading} />
+			</div>
+			<div class="grid gap-2">
+				<Label for="passwordConfirm">Confirm password</Label>
+				<Input id="passwordConfirm" name="passwordConfirm" type="password" disabled={isLoading} />
+			</div>
+			<Button type="submit" disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{/if}
+				Register
+			</Button>
+		</div>
+	</form>
 </div>
diff --git a/src/routes/(auth)/auth/(components)/sso-form.svelte b/src/routes/(auth)/auth/(components)/sso-form.svelte
index 05f5ea7..2dbc75e 100644
--- a/src/routes/(auth)/auth/(components)/sso-form.svelte
+++ b/src/routes/(auth)/auth/(components)/sso-form.svelte
@@ -1,19 +1,21 @@
 <script lang="ts">
-	import { Icons } from "$lib/components/site";
-  import PocketBase from 'pocketbase';
+	import { Icons } from '$lib/components/site';
+	import PocketBase from 'pocketbase';
 	import { PUBLIC_CLIENT_PB } from '$env/static/public';
-	import { enhance } from "$app/forms";
-	import { Button } from "$lib/components/ui/button";
-	import { Separator } from "$lib/components/ui/separator";
+	import { enhance } from '$app/forms';
+	import { Button } from '$lib/components/ui/button';
+	import { Separator } from '$lib/components/ui/separator';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { ChevronDown } from "radix-icons-svelte";
+	import { ChevronDown } from 'radix-icons-svelte';
 
 	export let isLoading = false;
-  export let providers: { name: string, icon?: any, displayName: string }[];
+
+	/* eslint-disable  @typescript-eslint/no-explicit-any */
+	export let providers: { name: string; icon?: any; displayName: string }[];
 	let currentProvider = providers[0];
 
 	const pb = new PocketBase(PUBLIC_CLIENT_PB);
-  let oauth2Form: HTMLFormElement;
+	let oauth2Form: HTMLFormElement;
 	async function loginWithOauth2(provider: string) {
 		try {
 			await pb.collection('users').authWithOAuth2({ provider });
diff --git a/src/routes/(auth)/auth/+page.svelte b/src/routes/(auth)/auth/+page.svelte
index dd92484..944a22f 100644
--- a/src/routes/(auth)/auth/+page.svelte
+++ b/src/routes/(auth)/auth/+page.svelte
@@ -5,7 +5,7 @@
 	import type { PageData } from './$types.js';
 	import { LoginForm, RegisterForm, SSOForm } from './(components)';
 	export let form;
-  export let data: PageData;
+	export let data: PageData;
 	const { providers } = data;
 	const providersWithIcons = providers.map((provider) => ({
 		...provider,
diff --git a/src/routes/(user)/settings/(components)/sidebar-nav.svelte b/src/routes/(user)/settings/(components)/sidebar-nav.svelte
index fece53f..8ad6beb 100644
--- a/src/routes/(user)/settings/(components)/sidebar-nav.svelte
+++ b/src/routes/(user)/settings/(components)/sidebar-nav.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import { page } from "$app/stores";
-	import { Button } from "$lib/components/ui/button";
-	import { cubicInOut } from "svelte/easing";
-	import { crossfade } from "svelte/transition";
+	import { cn } from '$lib/utils';
+	import { page } from '$app/stores';
+	import { Button } from '$lib/components/ui/button';
+	import { cubicInOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
 
 	let className: string | undefined | null = undefined;
 	export let items: { href: string; title: string }[];
@@ -11,28 +11,25 @@
 
 	const [send, receive] = crossfade({
 		duration: 250,
-		easing: cubicInOut,
+		easing: cubicInOut
 	});
 </script>
 
-<nav class={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)}>
+<nav class={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)}>
 	{#each items as item}
 		{@const isActive = $page.url.pathname === item.href}
 
 		<Button
 			href={item.href}
 			variant="ghost"
-			class={cn(
-				!isActive && "hover:underline",
-				"relative justify-start hover:bg-transparent"
-			)}
+			class={cn(!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent')}
 			data-sveltekit-noscroll
 		>
 			{#if isActive}
 				<div
 					class="absolute inset-0 rounded-md bg-muted"
-					in:send={{ key: "active-sidebar-tab" }}
-					out:receive={{ key: "active-sidebar-tab" }}
+					in:send={{ key: 'active-sidebar-tab' }}
+					out:receive={{ key: 'active-sidebar-tab' }}
 				/>
 			{/if}
 			<div class="relative">
diff --git a/src/routes/(user)/settings/+layout.svelte b/src/routes/(user)/settings/+layout.svelte
index 1503cea..39914a4 100644
--- a/src/routes/(user)/settings/+layout.svelte
+++ b/src/routes/(user)/settings/+layout.svelte
@@ -1,29 +1,27 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import SidebarNav from "./(components)/sidebar-nav.svelte";
+	import { Separator } from '$lib/components/ui/separator';
+	import SidebarNav from './(components)/sidebar-nav.svelte';
 
 	const sidebarNavItems = [
 		{
-			title: "Profile",
-			href: "/settings",
+			title: 'Profile',
+			href: '/settings'
 		},
 		{
-			title: "Account",
-			href: "/settings/account",
+			title: 'Account',
+			href: '/settings/account'
 		},
 		{
-			title: "Appearance",
-			href: "/settings/appearance",
-		},
+			title: 'Appearance',
+			href: '/settings/appearance'
+		}
 	];
 </script>
 
 <div class="space-y-6 p-10 pb-16">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
-		<p class="text-muted-foreground">
-			Manage your account settings and set e-mail preferences.
-		</p>
+		<p class="text-muted-foreground">Manage your account settings and set e-mail preferences.</p>
 	</div>
 	<Separator class="my-6" />
 	<div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
diff --git a/src/routes/(user)/settings/+page.server.ts b/src/routes/(user)/settings/+page.server.ts
index 2eb5256..6752b69 100644
--- a/src/routes/(user)/settings/+page.server.ts
+++ b/src/routes/(user)/settings/+page.server.ts
@@ -1,12 +1,12 @@
-import type { PageServerLoad } from "./$types";
-import { superValidate } from "sveltekit-superforms";
-import { zod } from "sveltekit-superforms/adapters";
-import { profileFormSchema } from "./profile-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
+import type { PageServerLoad } from './$types';
+import { superValidate } from 'sveltekit-superforms';
+import { zod } from 'sveltekit-superforms/adapters';
+import { profileFormSchema } from './profile-form.svelte';
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
-		form: await superValidate(zod(profileFormSchema)),
+		form: await superValidate(zod(profileFormSchema))
 	};
 };
 
@@ -15,12 +15,12 @@ export const actions: Actions = {
 		const form = await superValidate(request, zod(profileFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
-	},
+	}
 };
diff --git a/src/routes/(user)/settings/+page.svelte b/src/routes/(user)/settings/+page.svelte
index 7447931..2b68897 100644
--- a/src/routes/(user)/settings/+page.svelte
+++ b/src/routes/(user)/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { PageData } from "./$types";
-	import ProfileForm from "./profile-form.svelte";
-	import { Separator } from "$lib/components/ui/separator";
+	import type { PageData } from './$types';
+	import ProfileForm from './profile-form.svelte';
+	import { Separator } from '$lib/components/ui/separator';
 
 	export let data: PageData;
 </script>
diff --git a/src/routes/(user)/settings/account/+page.server.ts b/src/routes/(user)/settings/account/+page.server.ts
index 23277d5..62c9a4c 100644
--- a/src/routes/(user)/settings/account/+page.server.ts
+++ b/src/routes/(user)/settings/account/+page.server.ts
@@ -1,17 +1,17 @@
-import type { PageServerLoad } from "./$types";
-import { superValidate } from "sveltekit-superforms";
-import { zod } from "sveltekit-superforms/adapters";
-import { usernameFormSchema } from "./username-form.svelte";
-import { emailRequestFormSchema, emailConfirmFormSchema } from "./email-form.svelte";
-import { passwordFormSchema } from "./password-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
+import type { PageServerLoad } from './$types';
+import { superValidate } from 'sveltekit-superforms';
+import { zod } from 'sveltekit-superforms/adapters';
+import { usernameFormSchema } from './username-form.svelte';
+import { emailRequestFormSchema, emailConfirmFormSchema } from './email-form.svelte';
+import { passwordFormSchema } from './password-form.svelte';
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
 		usernameForm: await superValidate(zod(usernameFormSchema)),
 		emailRequestForm: await superValidate(zod(emailRequestFormSchema)),
 		emailConfirmForm: await superValidate(zod(emailConfirmFormSchema)),
-		passwordForm: await superValidate(zod(passwordFormSchema)),
+		passwordForm: await superValidate(zod(passwordFormSchema))
 	};
 };
 
@@ -20,50 +20,50 @@ export const actions: Actions = {
 		const form = await superValidate(request, zod(usernameFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
 	},
 	emailRequest: async ({ request, locals }) => {
 		const form = await superValidate(request, zod(emailRequestFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').requestEmailChange(form.data.newEmail);
 		return {
-			form,
+			form
 		};
 	},
 	emailConfirm: async ({ request, locals }) => {
 		const form = await superValidate(request, zod(emailConfirmFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase
 			.collection('users')
 			.confirmEmailChange(form.data.token, form.data.password);
 		return {
-			form,
+			form
 		};
 	},
 	password: async ({ request, locals }) => {
 		const form = await superValidate(request, zod(passwordFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
-	},
+	}
 };
diff --git a/src/routes/(user)/settings/account/+page.svelte b/src/routes/(user)/settings/account/+page.svelte
index 21110f7..f5dc185 100644
--- a/src/routes/(user)/settings/account/+page.svelte
+++ b/src/routes/(user)/settings/account/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import type { PageData } from "./$types";
-	import UsernameForm from "./username-form.svelte";
-	import EmailForm from "./email-form.svelte";
-	import PasswordForm from "./password-form.svelte";
+	import { Separator } from '$lib/components/ui/separator';
+	import type { PageData } from './$types';
+	import UsernameForm from './username-form.svelte';
+	import EmailForm from './email-form.svelte';
+	import PasswordForm from './password-form.svelte';
 
 	export let data: PageData;
 </script>
@@ -11,12 +11,14 @@
 <div class="space-y-6">
 	<div>
 		<h3 class="text-lg font-medium">Account</h3>
-		<p class="text-sm text-muted-foreground">
-			Update your account settings.
-		</p>
+		<p class="text-sm text-muted-foreground">Update your account settings.</p>
 	</div>
 	<Separator />
 	<UsernameForm user={data.user} data={data.usernameForm} />
-	<EmailForm user={data.user} requestData={data.emailRequestForm} confirmData={data.emailConfirmForm} />
+	<EmailForm
+		user={data.user}
+		requestData={data.emailRequestForm}
+		confirmData={data.emailConfirmForm}
+	/>
 	<PasswordForm data={data.passwordForm} />
 </div>
diff --git a/src/routes/(user)/settings/appearance/+page.server.ts b/src/routes/(user)/settings/appearance/+page.server.ts
index 8d988d0..6aca99a 100644
--- a/src/routes/(user)/settings/appearance/+page.server.ts
+++ b/src/routes/(user)/settings/appearance/+page.server.ts
@@ -1,12 +1,12 @@
-import { superValidate } from "sveltekit-superforms";
-import { zod } from "sveltekit-superforms/adapters";
-import type { PageServerLoad } from "../$types";
-import { appearanceFormSchema } from "./appearance-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
+import { superValidate } from 'sveltekit-superforms';
+import { zod } from 'sveltekit-superforms/adapters';
+import type { PageServerLoad } from '../$types';
+import { appearanceFormSchema } from './appearance-form.svelte';
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
-		form: await superValidate(zod(appearanceFormSchema)),
+		form: await superValidate(zod(appearanceFormSchema))
 	};
 };
 
@@ -15,12 +15,12 @@ export const actions: Actions = {
 		const form = await superValidate(request, zod(appearanceFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
-	},
+	}
 };
diff --git a/src/routes/(user)/settings/appearance/+page.svelte b/src/routes/(user)/settings/appearance/+page.svelte
index 4512b07..39e7231 100644
--- a/src/routes/(user)/settings/appearance/+page.svelte
+++ b/src/routes/(user)/settings/appearance/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import type { PageData } from "./$types";
-	import AppearanceForm from "./appearance-form.svelte";
+	import { Separator } from '$lib/components/ui/separator';
+	import type { PageData } from './$types';
+	import AppearanceForm from './appearance-form.svelte';
 
 	export let data: PageData;
 </script>
diff --git a/src/routes/(user)/settings/appearance/appearance-form.svelte b/src/routes/(user)/settings/appearance/appearance-form.svelte
index d690993..f1b10c8 100644
--- a/src/routes/(user)/settings/appearance/appearance-form.svelte
+++ b/src/routes/(user)/settings/appearance/appearance-form.svelte
@@ -13,11 +13,7 @@
 <script lang="ts">
 	import { browser, dev } from '$app/environment';
 	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
-	import SuperDebug, {
-		type SuperValidated,
-		type Infer,
-		superForm,
-	} from 'sveltekit-superforms';
+	import SuperDebug, { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
 	import * as Card from '$lib/components/ui/card';
 	import * as Form from '$lib/components/ui/form';
 	import * as RadioGroup from '$lib/components/ui/radio-group';
@@ -25,7 +21,7 @@
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
-	import { resetMode, setMode } from 'mode-watcher';
+	import { setMode } from 'mode-watcher';
 
 	export let data: SuperValidated<Infer<AppearanceFormSchema>>;
 	let isLoading = false;
@@ -38,7 +34,7 @@
 		},
 		onUpdated: ({ form: f }) => {
 			isLoading = false;
-			setMode(f.data.appearanceMode)
+			setMode(f.data.appearanceMode);
 			if (f.valid) {
 				toast.success('Appearance has been updated.');
 			} else {
@@ -52,9 +48,7 @@
 <Card.Root>
 	<Card.Header>
 		<Card.Title>Change your mode</Card.Title>
-		<Card.Description>
-			You can modify the mode for your theme preference.
-		</Card.Description>
+		<Card.Description>You can modify the mode for your theme preference.</Card.Description>
 	</Card.Header>
 	<Card.Content>
 		<form method="POST" use:enhance class="space-y-2">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 29326f3..d5f3202 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,10 +7,10 @@
 	import DataIndicator from '$lib/components/site/data-indicator.svelte';
 	import { fly } from 'svelte/transition';
 	import { Toaster } from 'svelte-sonner';
-	import {  } from "mode-watcher";
+	import {} from 'mode-watcher';
 
 	export let data: LayoutData;
-	
+
 	if (data.user?.appearanceMode) {
 		setMode(data.user.appearanceMode);
 	}

From 82910e97e91e206385da9202d4646dc208216b65 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 04:19:09 +0100
Subject: [PATCH 15/18] feat: wip auth rework

---
 .../auth/(components)/login-form.svelte       | 118 ++++++------
 .../auth/(components)/register-form.svelte    | 129 ++++++++-----
 .../(auth)/auth/(components)/sso-form.svelte  |  73 +++++---
 src/routes/(auth)/auth/+page.server.ts        | 169 +++++++-----------
 src/routes/(auth)/auth/+page.svelte           |  11 +-
 5 files changed, 270 insertions(+), 230 deletions(-)

diff --git a/src/routes/(auth)/auth/(components)/login-form.svelte b/src/routes/(auth)/auth/(components)/login-form.svelte
index 5b569ea..b5cb157 100644
--- a/src/routes/(auth)/auth/(components)/login-form.svelte
+++ b/src/routes/(auth)/auth/(components)/login-form.svelte
@@ -1,15 +1,44 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import * as Alert from '$lib/components/ui/alert';
-	import { cn } from '$lib/utils';
-	import type { ActionData } from '../$types';
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const loginFormSchema = z.object({
+		usernameEmail: z.string(),
+		password: z.string()
+	});
+	export type LoginFormSchema = typeof loginFormSchema;
+</script>
 
-	export let form: ActionData;
-	export let isLoading = false;
+<script lang="ts">
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
+	import { cn } from '$lib/utils';
+
+	export let data: SuperValidated<Infer<LoginFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(loginFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Logging in...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Succesfully logged in.');
+			} else {
+				toast.error('Please fix the errors.');
+			}
+		}
+	});
+
+	const { form: formData, enhance } = form;
 </script>
 
 <div class="flex flex-col space-y-2 text-center">
@@ -19,45 +48,32 @@
 	</p>
 </div>
 <div class={cn('grid gap-6')} {...$$restProps}>
-	<form
-		method="POST"
-		action="?/login"
-		use:enhance={() => {
-			isLoading = true;
-			return async ({ update }) => {
-				isLoading = false;
-				update();
-			};
-		}}
-	>
-		<div class="grid gap-2">
-			<div class="grid gap-2">
-				<Label for="emailUsername">Email or username</Label>
-				<Input
-					id="emailUsername"
-					name="emailUsername"
-					type="text"
-					autocapitalize="none"
-					autocomplete="email"
-					autocorrect="off"
-					disabled={isLoading}
-				/>
-			</div>
-			<div class="grid gap-2">
-				<Label for="password">Password</Label>
-				<Input id="password" name="password" type="password" disabled={isLoading} />
-			</div>
-			<Button type="submit" disabled={isLoading}>
-				{#if isLoading}
-					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-				{/if}
-				Sign In
-			</Button>
-		</div>
-		{#if form?.notVerified}
-			<Alert.Root class="mt-4">
-				<Alert.Description>You must verify your email before you can log in.</Alert.Description>
-			</Alert.Root>
-		{/if}
+	<form method="POST" action="?/login" class="grid gap-2" use:enhance>
+		<Form.Field {form} name="usernameEmail" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Username or email</Form.Label>
+				<Input {...attrs} bind:value={$formData.usernameEmail} />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="password" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Password</Form.Label>
+				<Input {...attrs} bind:value={$formData.password} type="password" />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Button disabled={isLoading}>
+			{#if isLoading}
+				<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+			{/if}
+			Log in
+		</Form.Button>
 	</form>
 </div>
+
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+	<div class="pt-4">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/src/routes/(auth)/auth/(components)/register-form.svelte b/src/routes/(auth)/auth/(components)/register-form.svelte
index f22caef..fc7dff1 100644
--- a/src/routes/(auth)/auth/(components)/register-form.svelte
+++ b/src/routes/(auth)/auth/(components)/register-form.svelte
@@ -1,11 +1,46 @@
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const registerFormSchema = z.object({
+		username: z.string().min(3).max(24),
+		email: z.string().email(),
+		password: z.string().min(8),
+		passwordConfirm: z.string().min(8)
+	});
+	export type RegisterFormSchema = typeof registerFormSchema;
+</script>
+
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
+	import * as Form from '$lib/components/ui/form';
 	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
 	import { cn } from '$lib/utils';
-	export let isLoading = false;
+
+	export let data: SuperValidated<Infer<RegisterFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(registerFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Creating account...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Account created succesfully.');
+			} else {
+				toast.error('Please fix the errors.');
+			}
+		}
+	});
+
+	const { form: formData, enhance } = form;
 </script>
 
 <div class="flex flex-col space-y-2 text-center">
@@ -13,48 +48,46 @@
 	<p class="pb-6 text-sm text-muted-foreground">Enter your details below to create a new account</p>
 </div>
 <div class={cn('grid gap-6')} {...$$restProps}>
-	<form
-		method="POST"
-		action="?/register"
-		use:enhance={() => {
-			isLoading = true;
-			return async ({ update }) => {
-				isLoading = false;
-				update();
-			};
-		}}
-	>
-		<div class="grid gap-2">
-			<div class="grid gap-2">
-				<Label for="email">Name</Label>
-				<Input id="name" name="name" type="name" disabled={isLoading} />
-			</div>
-			<div class="grid gap-2">
-				<Label for="email">Email</Label>
-				<Input
-					id="email"
-					name="email"
-					type="email"
-					autocapitalize="none"
-					autocomplete="email"
-					autocorrect="off"
-					disabled={isLoading}
-				/>
-			</div>
-			<div class="grid gap-2">
-				<Label for="password">Password</Label>
-				<Input id="password" name="password" type="password" disabled={isLoading} />
-			</div>
-			<div class="grid gap-2">
-				<Label for="passwordConfirm">Confirm password</Label>
-				<Input id="passwordConfirm" name="passwordConfirm" type="password" disabled={isLoading} />
-			</div>
-			<Button type="submit" disabled={isLoading}>
-				{#if isLoading}
-					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-				{/if}
-				Register
-			</Button>
-		</div>
+	<form method="POST" action="?/register" class="grid gap-2" use:enhance>
+		<Form.Field {form} name="email" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Email</Form.Label>
+				<Input {...attrs} bind:value={$formData.email} />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="username" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Username</Form.Label>
+				<Input {...attrs} bind:value={$formData.username} />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="password" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Password</Form.Label>
+				<Input {...attrs} bind:value={$formData.password} type="password" />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="passwordConfirm" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Confirm password</Form.Label>
+				<Input {...attrs} bind:value={$formData.passwordConfirm} type="password" />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Button disabled={isLoading}>
+			{#if isLoading}
+				<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+			{/if}
+			Log in
+		</Form.Button>
 	</form>
 </div>
+
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+	<div class="pt-4">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/src/routes/(auth)/auth/(components)/sso-form.svelte b/src/routes/(auth)/auth/(components)/sso-form.svelte
index 2dbc75e..60e5ccf 100644
--- a/src/routes/(auth)/auth/(components)/sso-form.svelte
+++ b/src/routes/(auth)/auth/(components)/sso-form.svelte
@@ -1,14 +1,49 @@
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const ssoFormSchema = z.object({
+		token: z.string()
+	});
+	export type SsoFormSchema = typeof ssoFormSchema;
+</script>
+
 <script lang="ts">
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
+	import { cn } from '$lib/utils';
 	import PocketBase from 'pocketbase';
 	import { PUBLIC_CLIENT_PB } from '$env/static/public';
-	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components/ui/button';
 	import { Separator } from '$lib/components/ui/separator';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { ChevronDown } from 'radix-icons-svelte';
 
-	export let isLoading = false;
+	export let data: SuperValidated<Infer<SsoFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(ssoFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Logging in...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Succesfully logged in.');
+			} else {
+				toast.error('Please fix the errors.');
+			}
+		}
+	});
+
+	const { form: formData, enhance } = form;
 
 	/* eslint-disable  @typescript-eslint/no-explicit-any */
 	export let providers: { name: string; icon?: any; displayName: string }[];
@@ -31,26 +66,14 @@
 	}
 </script>
 
-<form
-	method="POST"
-	action="?/oauth2"
-	bind:this={oauth2Form}
-	use:enhance={() => {
-		isLoading = true;
-		return async ({ update }) => {
-			isLoading = false;
-			update();
-		};
-	}}
->
-	<div class="relative">
-		<div class="absolute inset-0 flex items-center">
-			<span class="w-full border-t" />
-		</div>
-		<div class="relative flex justify-center text-xs uppercase">
-			<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
-		</div>
-	</div>
+<form method="POST" action="?/sso" class="grid gap-2" use:enhance>
+	<Form.Field {form} name="token" class="grid gap-2">
+		<Form.Control let:attrs>
+			<Input {...attrs} bind:value={$formData.token} class="hidden" />
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+
 	<div
 		class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
 	>
@@ -115,3 +138,9 @@
 		{/if}
 	</div>
 </form>
+
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+	<div class="pt-4">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/src/routes/(auth)/auth/+page.server.ts b/src/routes/(auth)/auth/+page.server.ts
index 9649e65..15f6c76 100644
--- a/src/routes/(auth)/auth/+page.server.ts
+++ b/src/routes/(auth)/auth/+page.server.ts
@@ -1,118 +1,79 @@
-import { error, redirect, type Cookies } from '@sveltejs/kit';
-import type { Actions } from './$types';
+import type { PageServerLoad } from './$types';
+import { superValidate } from 'sveltekit-superforms';
+import { zod } from 'sveltekit-superforms/adapters';
+import { loginFormSchema } from './(components)/login-form.svelte';
+import { registerFormSchema } from './(components)/register-form.svelte';
+import { ssoFormSchema } from './(components)/sso-form.svelte';
+import { fail, type Actions, redirect } from '@sveltejs/kit';
 
-export const actions = {
-	login: async ({
-		request,
-		locals,
-		cookies
-	}: {
-		request: Request;
-		locals: App.Locals;
-		cookies: Cookies;
-	}) => {
-		const body = Object.fromEntries(await request.formData());
+export const load: PageServerLoad = async () => {
+	return {
+		loginForm: await superValidate(zod(loginFormSchema)),
+		registerForm: await superValidate(zod(registerFormSchema)),
+		ssoForm: await superValidate(zod(ssoFormSchema))
+	};
+};
+
+export const actions: Actions = {
+	login: async ({ request, locals, cookies }) => {
+		const form = await superValidate(request, zod(loginFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
 		try {
-			const emailUsername = body.emailUsername.toString();
-			const password = body.password.toString();
-			await locals.pocketBase.collection('users').authWithPassword(emailUsername, password);
-			if (!locals.pocketBase?.authStore?.model?.verified) {
-				locals.pocketBase.authStore.clear();
-				return {
-					notVerified: true
-				};
-			}
+			await locals.pocketBase
+				.collection('users')
+				.authWithPassword(form.data.usernameEmail, form.data.password);
 		} catch (err) {
-			console.log('Error: ', err);
-			throw error(500, 'Something went wrong logging in');
+			return fail(500, {
+				form
+			});
 		}
 		cookies.set('pb_auth', JSON.stringify({ token: locals.pocketBase.authStore.token }), {
 			path: '/'
 		});
-
 		throw redirect(303, '/');
 	},
-	register: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		if (locals.pocketBase.authStore.isValid) {
-			return;
-		}
-
-		const formData = await request.formData();
-
-		const name = formData.get('name');
-		const email = formData.get('email');
-		const password = formData.get('password');
-		const passwordConfirm = formData.get('passwordConfirm');
-
-		try {
-			if (typeof name !== 'string') {
-				throw new Error('Name must be a string');
-			}
-
-			if (name.length === 0) {
-				throw new Error('Please enter a valid name');
-			}
-
-			if (typeof email !== 'string') {
-				throw new Error('Email must be a string');
-			}
-
-			if (email.length < 5) {
-				throw new Error('Please enter a valid e-mail address');
-			}
-
-			if (typeof password !== 'string') {
-				throw new Error('Password must be a string');
-			}
-
-			if (password.length < 8) {
-				throw new Error('Password must be at least 8 characters in length');
-			}
-
-			if (password !== passwordConfirm) {
-				throw new Error('Passwords do not match');
-			}
-
-			await locals.pocketBase.collection('users').create({
-				name,
-				email,
-				password,
-				passwordConfirm
+	register: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(registerFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
+		try {
+			await locals.pocketBase.collection('users').create(form.data);
+			return {
+				form
+			};
+		} catch (err) {
+			return fail(500, {
+				form
 			});
-
-			await locals.pocketBase.collection('users').authWithPassword(email, password);
-			if (!locals.pocketBase?.authStore?.model?.verified) {
-				locals.pocketBase.authStore.clear();
-				return {
-					showLogin: true,
-					isLoading: false,
-					notVerified: true
-				};
-			}
-		} catch (error) {
-			console.error(error);
-
-			if (!(error instanceof Error)) {
-				return {
-					name,
-					email,
-					password,
-					error: 'Unknown error occured when signing up user'
-				};
-			}
-
-			return { error: error.message, name, email, password };
 		}
-
-		throw redirect(303, '/');
 	},
-	oauth2: async ({ request, cookies }) => {
-		const form = await request.formData();
-		const token = form.get('token');
-		if (!token || typeof token !== 'string') {
-			throw redirect(303, '/auth');
+	sso: async ({ request, cookies }) => {
+		const form = await superValidate(request, zod(ssoFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
+		const token = form.data.token;
+		try {
+			if (!token || typeof token !== 'string') {
+				throw redirect(303, '/auth');
+			}
+			cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
+			return {
+				form
+			};
+		} catch (err) {
+			return fail(500, {
+				form
+			});
 		}
-		cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
-		throw redirect(303, '/');
 	}
-} satisfies Actions;
+};
diff --git a/src/routes/(auth)/auth/+page.svelte b/src/routes/(auth)/auth/+page.svelte
index 944a22f..12c1646 100644
--- a/src/routes/(auth)/auth/+page.svelte
+++ b/src/routes/(auth)/auth/+page.svelte
@@ -4,8 +4,9 @@
 	import * as Tabs from '$lib/components/ui/tabs';
 	import type { PageData } from './$types.js';
 	import { LoginForm, RegisterForm, SSOForm } from './(components)';
-	export let form;
+
 	export let data: PageData;
+
 	const { providers } = data;
 	const providersWithIcons = providers.map((provider) => ({
 		...provider,
@@ -22,7 +23,7 @@
 
 <div class="lg:p-8">
 	<Tabs.Root
-		value={form?.showLogin ? 'login' : tab}
+		value={tab}
 		class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
 	>
 		<Tabs.List class="grid w-full grid-cols-2">
@@ -30,16 +31,16 @@
 			<Tabs.Trigger value="register">Register</Tabs.Trigger>
 		</Tabs.List>
 		<Tabs.Content value="login">
-			<LoginForm {form} />
+			<LoginForm data={data.loginForm} />
 		</Tabs.Content>
 		<Tabs.Content value="register">
-			<RegisterForm />
+			<RegisterForm data={data.registerForm} />
 		</Tabs.Content>
 		<p class="px-8 text-center text-xs text-muted-foreground">
 			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
 		</p>
 		{#if providers.length}
-			<SSOForm providers={providersWithIcons} />
+			<SSOForm data={data.ssoForm} providers={providersWithIcons} />
 		{/if}
 	</Tabs.Root>
 </div>

From 7242d8997eeda89e5fbbc87d9ee8ca6daec78985 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 04:20:00 +0100
Subject: [PATCH 16/18] feat: formatting & lint

---
 src/routes/(auth)/auth/(components)/sso-form.svelte | 1 -
 src/routes/(auth)/auth/+page.svelte                 | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/routes/(auth)/auth/(components)/sso-form.svelte b/src/routes/(auth)/auth/(components)/sso-form.svelte
index 60e5ccf..7b9286a 100644
--- a/src/routes/(auth)/auth/(components)/sso-form.svelte
+++ b/src/routes/(auth)/auth/(components)/sso-form.svelte
@@ -16,7 +16,6 @@
 	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
-	import { cn } from '$lib/utils';
 	import PocketBase from 'pocketbase';
 	import { PUBLIC_CLIENT_PB } from '$env/static/public';
 	import { Button } from '$lib/components/ui/button';
diff --git a/src/routes/(auth)/auth/+page.svelte b/src/routes/(auth)/auth/+page.svelte
index 12c1646..19c21ef 100644
--- a/src/routes/(auth)/auth/+page.svelte
+++ b/src/routes/(auth)/auth/+page.svelte
@@ -22,10 +22,7 @@
 </script>
 
 <div class="lg:p-8">
-	<Tabs.Root
-		value={tab}
-		class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
-	>
+	<Tabs.Root value={tab} class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
 		<Tabs.List class="grid w-full grid-cols-2">
 			<Tabs.Trigger value="login">Login</Tabs.Trigger>
 			<Tabs.Trigger value="register">Register</Tabs.Trigger>

From a240bce68c7d4923f15368b5633ae72807b20e7c Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 09:58:21 +0100
Subject: [PATCH 17/18] feat: debugForms configuration to vite.config.ts

---
 src/lib/config/site.ts                                      | 2 ++
 src/routes/(auth)/auth/(components)/login-form.svelte       | 5 +++--
 src/routes/(auth)/auth/(components)/register-form.svelte    | 5 +++--
 src/routes/(auth)/auth/(components)/sso-form.svelte         | 4 ++--
 src/routes/(user)/settings/account/email-form.svelte        | 6 +++---
 src/routes/(user)/settings/account/password-form.svelte     | 1 -
 src/routes/(user)/settings/account/username-form.svelte     | 4 ++--
 .../(user)/settings/appearance/appearance-form.svelte       | 4 ++--
 src/routes/(user)/settings/profile-form.svelte              | 4 ++--
 9 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/lib/config/site.ts b/src/lib/config/site.ts
index 3f4385a..3878212 100644
--- a/src/lib/config/site.ts
+++ b/src/lib/config/site.ts
@@ -1,6 +1,8 @@
 const SITE_URL =
 	import.meta.env.VERCEL_ENV === 'preview' ? import.meta.env.VERCEL_URL : 'omnidash.io';
 
+export const debugForms = import.meta.env.DEBUG_FORMS === 'true' || false;
+
 export const siteConfig = {
 	name: 'Omnidash',
 	author: 'Bart van der Braak',
diff --git a/src/routes/(auth)/auth/(components)/login-form.svelte b/src/routes/(auth)/auth/(components)/login-form.svelte
index b5cb157..b244264 100644
--- a/src/routes/(auth)/auth/(components)/login-form.svelte
+++ b/src/routes/(auth)/auth/(components)/login-form.svelte
@@ -14,10 +14,11 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	// import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
 	import { cn } from '$lib/utils';
+	import { debugForms } from '$lib/config/site';
 
 	export let data: SuperValidated<Infer<LoginFormSchema>>;
 	let isLoading = false;
@@ -72,7 +73,7 @@
 	</form>
 </div>
 
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+{#if dev && debugForms && browser}
 	<div class="pt-4">
 		<SuperDebug data={$formData} />
 	</div>
diff --git a/src/routes/(auth)/auth/(components)/register-form.svelte b/src/routes/(auth)/auth/(components)/register-form.svelte
index fc7dff1..965915b 100644
--- a/src/routes/(auth)/auth/(components)/register-form.svelte
+++ b/src/routes/(auth)/auth/(components)/register-form.svelte
@@ -16,10 +16,11 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	// import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
 	import { cn } from '$lib/utils';
+	import { debugForms } from '$lib/config/site';
 
 	export let data: SuperValidated<Infer<RegisterFormSchema>>;
 	let isLoading = false;
@@ -86,7 +87,7 @@
 	</form>
 </div>
 
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+{#if dev && debugForms && browser}
 	<div class="pt-4">
 		<SuperDebug data={$formData} />
 	</div>
diff --git a/src/routes/(auth)/auth/(components)/sso-form.svelte b/src/routes/(auth)/auth/(components)/sso-form.svelte
index 7b9286a..14962dd 100644
--- a/src/routes/(auth)/auth/(components)/sso-form.svelte
+++ b/src/routes/(auth)/auth/(components)/sso-form.svelte
@@ -13,7 +13,6 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
 	import PocketBase from 'pocketbase';
@@ -22,6 +21,7 @@
 	import { Separator } from '$lib/components/ui/separator';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { ChevronDown } from 'radix-icons-svelte';
+	import { debugForms } from '$lib/config/site';
 
 	export let data: SuperValidated<Infer<SsoFormSchema>>;
 	let isLoading = false;
@@ -138,7 +138,7 @@
 	</div>
 </form>
 
-{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+{#if dev && debugForms && browser}
 	<div class="pt-4">
 		<SuperDebug data={$formData} />
 	</div>
diff --git a/src/routes/(user)/settings/account/email-form.svelte b/src/routes/(user)/settings/account/email-form.svelte
index 91d6618..89a203a 100644
--- a/src/routes/(user)/settings/account/email-form.svelte
+++ b/src/routes/(user)/settings/account/email-form.svelte
@@ -19,11 +19,11 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import type { LayoutData } from '../$types';
 	import { toast } from 'svelte-sonner';
 	import { Separator } from '$lib/components/ui/separator';
 	import { Icons } from '$lib/components/site';
+	import { debugForms } from '$lib/config/site';
 
 	export let user: LayoutData['user'];
 	export let requestData: SuperValidated<Infer<EmailRequestFormSchema>>;
@@ -91,7 +91,7 @@
 				<Form.FieldErrors />
 			</Form.Field>
 		</form>
-		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+		{#if dev && debugForms && browser}
 			<div class="pt-4">
 				<SuperDebug data={$requestFormData} />
 			</div>
@@ -130,7 +130,7 @@
 			</Form.Button>
 		</form>
 
-		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+		{#if dev && debugForms && browser}
 			<div class="pt-4">
 				<SuperDebug data={$confirmFormData} />
 			</div>
diff --git a/src/routes/(user)/settings/account/password-form.svelte b/src/routes/(user)/settings/account/password-form.svelte
index a14e412..0693919 100644
--- a/src/routes/(user)/settings/account/password-form.svelte
+++ b/src/routes/(user)/settings/account/password-form.svelte
@@ -16,7 +16,6 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
 
diff --git a/src/routes/(user)/settings/account/username-form.svelte b/src/routes/(user)/settings/account/username-form.svelte
index 405d4b3..b0870c7 100644
--- a/src/routes/(user)/settings/account/username-form.svelte
+++ b/src/routes/(user)/settings/account/username-form.svelte
@@ -14,10 +14,10 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import type { LayoutData } from '../$types';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
+	import { debugForms } from '$lib/config/site';
 
 	export let user: LayoutData['user'];
 	export let data: SuperValidated<Infer<UsernameFormSchema>>;
@@ -67,7 +67,7 @@
 			</Form.Button>
 		</form>
 
-		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+		{#if dev && debugForms && browser}
 			<div class="pt-4">
 				<SuperDebug data={$formData} />
 			</div>
diff --git a/src/routes/(user)/settings/appearance/appearance-form.svelte b/src/routes/(user)/settings/appearance/appearance-form.svelte
index f1b10c8..8e5c6e7 100644
--- a/src/routes/(user)/settings/appearance/appearance-form.svelte
+++ b/src/routes/(user)/settings/appearance/appearance-form.svelte
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import SuperDebug, { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
 	import * as Card from '$lib/components/ui/card';
 	import * as Form from '$lib/components/ui/form';
@@ -22,6 +21,7 @@
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
 	import { setMode } from 'mode-watcher';
+	import { debugForms } from '$lib/config/site';
 
 	export let data: SuperValidated<Infer<AppearanceFormSchema>>;
 	let isLoading = false;
@@ -141,7 +141,7 @@
 			</Form.Button>
 		</form>
 
-		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+		{#if dev && debugForms && browser}
 			<SuperDebug data={$formData} />
 		{/if}
 	</Card.Content>
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
index a819aa6..47af5ea 100644
--- a/src/routes/(user)/settings/profile-form.svelte
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -14,10 +14,10 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import type { LayoutData } from '../$types';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
+	import { debugForms } from '$lib/config/site';
 
 	export let user: LayoutData['user'];
 	export let data: SuperValidated<Infer<ProfileFormSchema>>;
@@ -68,7 +68,7 @@
 			</Form.Button>
 		</form>
 
-		{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+		{#if dev && debugForms && browser}
 			<div class="pt-4">
 				<SuperDebug data={$formData} />
 			</div>

From 5dcf74fd9f5fad82544b933d48d5d05fb7497390 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 11:13:44 +0100
Subject: [PATCH 18/18] fix: update to usernameEmail

---
 .github/workflows/unlighthouse.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/unlighthouse.yaml b/.github/workflows/unlighthouse.yaml
index 50a2fe6..2d2f72e 100644
--- a/.github/workflows/unlighthouse.yaml
+++ b/.github/workflows/unlighthouse.yaml
@@ -79,7 +79,7 @@ jobs:
       - name: Run Unlighthouse
         run: |
           export SCAN_URL="${{ github.ref == 'refs/heads/main' && env.WEBSITE_URL || steps.vercel_preview_url.outputs.preview_url }}"
-          export AUTH_COOKIE="$(curl "https://$SCAN_URL/auth?/login" -H "Origin: https://$SCAN_URL" -F "email=test_user" -F "password=${{ secrets.TEST_USER_PASSWORD }}" --verbose 2>&1 | awk -F'pb_auth=' '/pb_auth/{print $2;exit}' | awk -F';' '{print $1}')"
+          export AUTH_COOKIE="$(curl "https://$SCAN_URL/auth?/login" -H "Origin: https://$SCAN_URL" -F "usernameEmail=test_user" -F "password=${{ secrets.TEST_USER_PASSWORD }}" --verbose 2>&1 | awk -F'pb_auth=' '/pb_auth/{print $2;exit}' | awk -F';' '{print $1}')"
 
           pnpm run unlighthouse