From 0e050a89bccb2f7f11abb2b9ba51fdfbde4de884 Mon Sep 17 00:00:00 2001
From: CodeMaster4711 <cedi27@t-online.de>
Date: Sun, 9 Aug 2026 12:59:58 +0200
Subject: [PATCH] feat: unify user and admin settings into single dialog

---
 app/src/lib/auth/api.ts                       |  50 ++++
 .../settings/account-settings.svelte          | 227 ++++++++++++++++++
 .../settings/general-settings.svelte          |   1 +
 .../settings/settings-dialog.svelte           |  55 +++++
 .../settings/settings-store.svelte.ts         |  16 ++
 .../settings/update-settings.svelte           |  22 +-
 .../lib/components/sidebar/nav-user.svelte    |   3 +-
 .../ui/dialog/dialog-content.svelte           |  48 ++++
 .../ui/dialog/dialog-description.svelte       |  17 ++
 .../ui/dialog/dialog-overlay.svelte           |  20 ++
 .../components/ui/dialog/dialog-portal.svelte |   7 +
 .../components/ui/dialog/dialog-title.svelte  |  17 ++
 .../ui/dialog/dialog-trigger.svelte           |   7 +
 .../lib/components/ui/dialog/dialog.svelte    |   7 +
 app/src/lib/components/ui/dialog/index.ts     |  25 ++
 app/src/lib/components/ui/switch/index.ts     |   3 +
 .../lib/components/ui/switch/switch.svelte    |  27 +++
 app/src/routes/(app)/+layout.svelte           |   2 +
 .../routes/(app)/admin/settings/+page.svelte  |  61 +----
 19 files changed, 551 insertions(+), 64 deletions(-)
 create mode 100644 app/src/lib/components/settings/account-settings.svelte
 create mode 100644 app/src/lib/components/settings/general-settings.svelte
 create mode 100644 app/src/lib/components/settings/settings-dialog.svelte
 create mode 100644 app/src/lib/components/settings/settings-store.svelte.ts
 create mode 100644 app/src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 app/src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 app/src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 app/src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 app/src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 app/src/lib/components/ui/dialog/dialog-trigger.svelte
 create mode 100644 app/src/lib/components/ui/dialog/dialog.svelte
 create mode 100644 app/src/lib/components/ui/dialog/index.ts
 create mode 100644 app/src/lib/components/ui/switch/index.ts
 create mode 100644 app/src/lib/components/ui/switch/switch.svelte

diff --git a/app/src/lib/auth/api.ts b/app/src/lib/auth/api.ts
index 6554eb23..ccfaebd5 100644
--- a/app/src/lib/auth/api.ts
+++ b/app/src/lib/auth/api.ts
@@ -151,6 +151,56 @@ export async function validateSession(token: string): Promise<UserProfile> {
     return res.json();
 }
 
+export async function changeEmail(token: string, newEmail: string): Promise<void> {
+    const res = await fetch(`${API_BASE}/change-email`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ new_email: newEmail }),
+    });
+    if (!res.ok) throw new Error(`change-email failed: ${res.status}`);
+}
+
+export interface Setup2FAResponse {
+    secret: string;
+    qr_code: string;
+}
+
+export async function setup2FA(token: string): Promise<Setup2FAResponse> {
+    const res = await fetch(`${API_BASE}/2fa/setup`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}` },
+    });
+    if (!res.ok) throw new Error(`2fa setup failed: ${res.status}`);
+    return res.json();
+}
+
+export async function enable2FA(token: string, code: string): Promise<void> {
+    const res = await fetch(`${API_BASE}/2fa/enable`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ code }),
+    });
+    if (!res.ok) throw new Error(`2fa enable failed: ${res.status}`);
+}
+
+export async function disable2FA(token: string, code: string): Promise<void> {
+    const res = await fetch(`${API_BASE}/2fa/disable`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ code }),
+    });
+    if (!res.ok) throw new Error(`2fa disable failed: ${res.status}`);
+}
+
 export class TwoFactorRequiredError extends Error {
     constructor(
         public readonly username: string,
diff --git a/app/src/lib/components/settings/account-settings.svelte b/app/src/lib/components/settings/account-settings.svelte
new file mode 100644
index 00000000..affb2e4d
--- /dev/null
+++ b/app/src/lib/components/settings/account-settings.svelte
@@ -0,0 +1,227 @@
+<script lang="ts">
+    import { Button } from "$lib/components/ui/button/index.js";
+    import { Input } from "$lib/components/ui/input/index.js";
+    import { Label } from "$lib/components/ui/label/index.js";
+    import { Switch } from "$lib/components/ui/switch/index.js";
+    import * as InputOTP from "$lib/components/ui/input-otp/index.js";
+    import Spinner from "$lib/components/ui/spinner/spinner.svelte";
+    import { auth } from "$lib/auth/store.svelte";
+    import { changeEmail, changePassword, setup2FA, enable2FA, disable2FA } from "$lib/auth/api";
+    import { toast } from "svelte-sonner";
+
+    let email = $state(auth.user?.email ?? "");
+    let emailSaving = $state(false);
+
+    let oldPassword = $state("");
+    let newPassword = $state("");
+    let confirmPassword = $state("");
+    let passwordSaving = $state(false);
+
+    let twoFactorStep = $state<"idle" | "enrolling" | "disabling">("idle");
+    let qrCode = $state("");
+    let otpValue = $state("");
+    let twoFactorBusy = $state(false);
+
+    const emailChanged = $derived(email.trim() !== "" && email !== (auth.user?.email ?? ""));
+    const passwordValid = $derived(newPassword.length >= 8 && newPassword === confirmPassword);
+
+    async function saveEmail() {
+        if (!auth.token || !emailChanged) return;
+        emailSaving = true;
+        try {
+            await changeEmail(auth.token, email.trim());
+            auth.setUser({ ...auth.user!, email: email.trim() });
+            toast.success("Email updated");
+        } catch {
+            toast.error("Failed to update email");
+        } finally {
+            emailSaving = false;
+        }
+    }
+
+    async function savePassword() {
+        if (!auth.token || !passwordValid) return;
+        passwordSaving = true;
+        try {
+            await changePassword(auth.token, oldPassword, newPassword);
+            oldPassword = "";
+            newPassword = "";
+            confirmPassword = "";
+            toast.success("Password updated");
+        } catch {
+            toast.error("Failed to update password", { description: "Check your current password" });
+        } finally {
+            passwordSaving = false;
+        }
+    }
+
+    async function toggleTwoFactor(next: boolean) {
+        if (!auth.token) return;
+        if (next) {
+            twoFactorBusy = true;
+            try {
+                const response = await setup2FA(auth.token);
+                qrCode = response.qr_code;
+                twoFactorStep = "enrolling";
+            } catch {
+                toast.error("Failed to start 2FA setup");
+            } finally {
+                twoFactorBusy = false;
+            }
+        } else {
+            twoFactorStep = "disabling";
+            otpValue = "";
+        }
+    }
+
+    async function confirmEnable() {
+        if (!auth.token || otpValue.length !== 6) return;
+        twoFactorBusy = true;
+        try {
+            await enable2FA(auth.token, otpValue);
+            auth.setUser({ ...auth.user!, two_factor_enabled: true });
+            twoFactorStep = "idle";
+            otpValue = "";
+            toast.success("Two-factor authentication enabled");
+        } catch {
+            toast.error("Invalid code");
+            otpValue = "";
+        } finally {
+            twoFactorBusy = false;
+        }
+    }
+
+    async function confirmDisable() {
+        if (!auth.token || otpValue.length !== 6) return;
+        twoFactorBusy = true;
+        try {
+            await disable2FA(auth.token, otpValue);
+            auth.setUser({ ...auth.user!, two_factor_enabled: false });
+            twoFactorStep = "idle";
+            otpValue = "";
+            toast.success("Two-factor authentication disabled");
+        } catch {
+            toast.error("Invalid code");
+            otpValue = "";
+        } finally {
+            twoFactorBusy = false;
+        }
+    }
+
+    function cancelTwoFactorStep() {
+        twoFactorStep = "idle";
+        otpValue = "";
+        qrCode = "";
+    }
+</script>
+
+<div class="flex flex-col gap-8 max-w-xl">
+    <section class="flex flex-col gap-4">
+        <h3 class="text-sm font-semibold">Profile</h3>
+        <div class="flex flex-col gap-1.5">
+            <Label for="settings-username" class="text-xs text-muted-foreground">Username</Label>
+            <Input id="settings-username" value={auth.user?.username ?? ""} disabled />
+        </div>
+        <div class="flex flex-col gap-1.5">
+            <Label for="settings-email" class="text-xs text-muted-foreground">Email</Label>
+            <div class="flex gap-2">
+                <Input id="settings-email" type="email" bind:value={email} placeholder="you@example.com" />
+                <Button onclick={saveEmail} disabled={!emailChanged || emailSaving} size="sm">
+                    {#if emailSaving}<Spinner />{:else}Save{/if}
+                </Button>
+            </div>
+        </div>
+    </section>
+
+    <section class="flex flex-col gap-4 pt-6 border-t">
+        <h3 class="text-sm font-semibold">Password</h3>
+        <div class="flex flex-col gap-1.5">
+            <Label for="settings-old-password" class="text-xs text-muted-foreground">Current password</Label>
+            <Input id="settings-old-password" type="password" bind:value={oldPassword} autocomplete="current-password" />
+        </div>
+        <div class="flex flex-col gap-1.5">
+            <Label for="settings-new-password" class="text-xs text-muted-foreground">New password</Label>
+            <Input id="settings-new-password" type="password" bind:value={newPassword} autocomplete="new-password" />
+        </div>
+        <div class="flex flex-col gap-1.5">
+            <Label for="settings-confirm-password" class="text-xs text-muted-foreground">Confirm new password</Label>
+            <Input id="settings-confirm-password" type="password" bind:value={confirmPassword} autocomplete="new-password" />
+        </div>
+        <Button onclick={savePassword} disabled={!passwordValid || passwordSaving} size="sm" class="w-fit">
+            {#if passwordSaving}<Spinner />{:else}Update password{/if}
+        </Button>
+    </section>
+
+    <section class="flex flex-col gap-4 pt-6 border-t">
+        <div class="flex items-center justify-between">
+            <div>
+                <h3 class="text-sm font-semibold">Two-factor authentication</h3>
+                <p class="text-xs text-muted-foreground mt-0.5">Require an authenticator code at login</p>
+            </div>
+            <Switch
+                checked={auth.user?.two_factor_enabled ?? false}
+                disabled={twoFactorBusy || twoFactorStep !== "idle"}
+                onCheckedChange={toggleTwoFactor}
+            />
+        </div>
+
+        {#if twoFactorStep === "enrolling"}
+            <div class="flex flex-col gap-4 p-4 rounded-lg border bg-muted/30">
+                <p class="text-xs text-muted-foreground">Scan with your authenticator app, then enter the code</p>
+                {#if qrCode}
+                    <img
+                        src="data:image/png;base64,{qrCode}"
+                        alt="2FA QR code"
+                        class="size-40 rounded-md self-center bg-white p-2"
+                    />
+                {/if}
+                <InputOTP.Root maxlength={6} bind:value={otpValue}>
+                    {#snippet children({ cells })}
+                        <InputOTP.Group class="flex-1">
+                            {#each cells.slice(0, 3) as cell (cell)}
+                                <InputOTP.Slot {cell} class="flex-1 w-full" />
+                            {/each}
+                        </InputOTP.Group>
+                        <InputOTP.Separator />
+                        <InputOTP.Group class="flex-1">
+                            {#each cells.slice(3, 6) as cell (cell)}
+                                <InputOTP.Slot {cell} class="flex-1 w-full" />
+                            {/each}
+                        </InputOTP.Group>
+                    {/snippet}
+                </InputOTP.Root>
+                <div class="flex gap-2">
+                    <Button onclick={confirmEnable} disabled={otpValue.length !== 6 || twoFactorBusy} size="sm">
+                        {#if twoFactorBusy}<Spinner />{:else}Confirm{/if}
+                    </Button>
+                    <Button onclick={cancelTwoFactorStep} variant="outline" size="sm">Cancel</Button>
+                </div>
+            </div>
+        {:else if twoFactorStep === "disabling"}
+            <div class="flex flex-col gap-4 p-4 rounded-lg border bg-muted/30">
+                <p class="text-xs text-muted-foreground">Enter your current code to disable 2FA</p>
+                <InputOTP.Root maxlength={6} bind:value={otpValue}>
+                    {#snippet children({ cells })}
+                        <InputOTP.Group class="flex-1">
+                            {#each cells.slice(0, 3) as cell (cell)}
+                                <InputOTP.Slot {cell} class="flex-1 w-full" />
+                            {/each}
+                        </InputOTP.Group>
+                        <InputOTP.Separator />
+                        <InputOTP.Group class="flex-1">
+                            {#each cells.slice(3, 6) as cell (cell)}
+                                <InputOTP.Slot {cell} class="flex-1 w-full" />
+                            {/each}
+                        </InputOTP.Group>
+                    {/snippet}
+                </InputOTP.Root>
+                <div class="flex gap-2">
+                    <Button onclick={confirmDisable} disabled={otpValue.length !== 6 || twoFactorBusy} variant="destructive" size="sm">
+                        {#if twoFactorBusy}<Spinner />{:else}Disable{/if}
+                    </Button>
+                    <Button onclick={cancelTwoFactorStep} variant="outline" size="sm">Cancel</Button>
+                </div>
+            </div>
+        {/if}
+    </section>
+</div>
diff --git a/app/src/lib/components/settings/general-settings.svelte b/app/src/lib/components/settings/general-settings.svelte
new file mode 100644
index 00000000..bbe69da5
--- /dev/null
+++ b/app/src/lib/components/settings/general-settings.svelte
@@ -0,0 +1 @@
+<p class="text-sm text-muted-foreground">No general settings configured.</p>
diff --git a/app/src/lib/components/settings/settings-dialog.svelte b/app/src/lib/components/settings/settings-dialog.svelte
new file mode 100644
index 00000000..a39c9f9b
--- /dev/null
+++ b/app/src/lib/components/settings/settings-dialog.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import * as Dialog from "$lib/components/ui/dialog/index.js";
+    import UserIcon from "@lucide/svelte/icons/user";
+    import SlidersHorizontalIcon from "@lucide/svelte/icons/sliders-horizontal";
+    import DownloadIcon from "@lucide/svelte/icons/download";
+    import ScrollTextIcon from "@lucide/svelte/icons/scroll-text";
+    import AccountSettings from "./account-settings.svelte";
+    import GeneralSettings from "./general-settings.svelte";
+    import UpdateSettings from "./update-settings.svelte";
+    import LogsSettings from "./logs-settings.svelte";
+    import { settingsDialog } from "./settings-store.svelte.js";
+
+    type Section = "account" | "general" | "update" | "logs";
+
+    const sections: { id: Section; label: string; icon: typeof UserIcon }[] = [
+        { id: "account", label: "Account", icon: UserIcon },
+        { id: "general", label: "General", icon: SlidersHorizontalIcon },
+        { id: "update", label: "Update", icon: DownloadIcon },
+        { id: "logs", label: "Logs", icon: ScrollTextIcon },
+    ];
+
+    let activeSection = $state<Section>("account");
+</script>
+
+<Dialog.Root open={settingsDialog.open} onOpenChange={(value) => settingsDialog.set(value)}>
+    <Dialog.Content class="w-[min(90vw,880px)] h-[min(85vh,640px)] p-0">
+        <div class="flex h-full">
+            <nav class="w-56 shrink-0 border-r bg-muted/20 flex flex-col gap-1 p-3">
+                <Dialog.Title class="px-2 py-2 text-sm font-semibold">Settings</Dialog.Title>
+                {#each sections as section (section.id)}
+                    <button
+                        onclick={() => (activeSection = section.id)}
+                        class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-sm text-left transition-colors {activeSection === section.id
+                            ? 'bg-primary/10 text-primary font-medium'
+                            : 'text-muted-foreground hover:bg-muted hover:text-foreground'}"
+                    >
+                        <section.icon class="size-4" />
+                        {section.label}
+                    </button>
+                {/each}
+            </nav>
+            <div class="flex-1 overflow-y-auto p-6">
+                {#if activeSection === "account"}
+                    <AccountSettings />
+                {:else if activeSection === "general"}
+                    <GeneralSettings />
+                {:else if activeSection === "update"}
+                    <UpdateSettings />
+                {:else if activeSection === "logs"}
+                    <LogsSettings />
+                {/if}
+            </div>
+        </div>
+    </Dialog.Content>
+</Dialog.Root>
diff --git a/app/src/lib/components/settings/settings-store.svelte.ts b/app/src/lib/components/settings/settings-store.svelte.ts
new file mode 100644
index 00000000..807f8169
--- /dev/null
+++ b/app/src/lib/components/settings/settings-store.svelte.ts
@@ -0,0 +1,16 @@
+let open = $state(false);
+
+export const settingsDialog = {
+    get open() {
+        return open;
+    },
+    show() {
+        open = true;
+    },
+    hide() {
+        open = false;
+    },
+    set(value: boolean) {
+        open = value;
+    },
+};
diff --git a/app/src/lib/components/settings/update-settings.svelte b/app/src/lib/components/settings/update-settings.svelte
index c4df2faf..2301a0e5 100644
--- a/app/src/lib/components/settings/update-settings.svelte
+++ b/app/src/lib/components/settings/update-settings.svelte
@@ -2,6 +2,7 @@
     import { onMount, onDestroy } from "svelte";
     import * as Card from "$lib/components/ui/card/index.js";
     import { Button } from "$lib/components/ui/button/index.js";
+    import { Switch } from "$lib/components/ui/switch/index.js";
     import { auth } from "$lib/auth/store.svelte";
     import {
         getUpdateStatus,
@@ -216,18 +217,15 @@
                     <Card.Title>Available releases</Card.Title>
                     <Card.Description>Select a version to update or downgrade</Card.Description>
                 </div>
-                <label class="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer select-none">
-                    <div class="relative inline-flex">
-                        <input
-                            type="checkbox"
-                            bind:checked={includePre}
-                            onchange={fetchReleases}
-                            class="peer sr-only"
-                            id="include-pre"
-                        />
-                        <div class="w-8 h-4 rounded-full bg-muted border peer-checked:bg-primary transition-colors"></div>
-                        <div class="absolute left-0.5 top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-4"></div>
-                    </div>
+                <label class="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer select-none" for="include-pre">
+                    <Switch
+                        id="include-pre"
+                        checked={includePre}
+                        onCheckedChange={(value) => {
+                            includePre = value;
+                            fetchReleases();
+                        }}
+                    />
                     Pre-releases
                 </label>
             </div>
diff --git a/app/src/lib/components/sidebar/nav-user.svelte b/app/src/lib/components/sidebar/nav-user.svelte
index fbd9ab3e..cadad46e 100644
--- a/app/src/lib/components/sidebar/nav-user.svelte
+++ b/app/src/lib/components/sidebar/nav-user.svelte
@@ -7,6 +7,7 @@
     import LogOutIcon from "@lucide/svelte/icons/log-out";
     import UserIcon from "@lucide/svelte/icons/user";
     import { auth } from "$lib/auth/store.svelte";
+    import { settingsDialog } from "$lib/components/settings/settings-store.svelte.js";
     import { goto } from "$app/navigation";
 
     const sidebar = useSidebar();
@@ -65,7 +66,7 @@
                 </DropdownMenu.Label>
                 <DropdownMenu.Separator />
                 <DropdownMenu.Group>
-                    <DropdownMenu.Item>
+                    <DropdownMenu.Item onclick={() => settingsDialog.show()}>
                         <UserIcon />
                         Profile
                     </DropdownMenu.Item>
diff --git a/app/src/lib/components/ui/dialog/dialog-content.svelte b/app/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 00000000..26fbb43f
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import DialogPortal from "./dialog-portal.svelte";
+	import DialogOverlay from "./dialog-overlay.svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from "@lucide/svelte/icons/x";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showCloseButton = true,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<DialogOverlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-popover text-popover-foreground fixed top-1/2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border shadow-lg duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3 z-10" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>
diff --git a/app/src/lib/components/ui/dialog/dialog-description.svelte b/app/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 00000000..38450239
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dialog/dialog-overlay.svelte b/app/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 00000000..68a0f143
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/40 supports-backdrop-filter:backdrop-blur-xs",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dialog/dialog-portal.svelte b/app/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 00000000..ccfa79ca
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/app/src/lib/components/ui/dialog/dialog-title.svelte b/app/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 00000000..572aa684
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-foreground font-semibold", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dialog/dialog-trigger.svelte b/app/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 00000000..9d1e8011
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/app/src/lib/components/ui/dialog/dialog.svelte b/app/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 00000000..211672c6
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/app/src/lib/components/ui/dialog/index.ts b/app/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 00000000..3ac5c6d6
--- /dev/null
+++ b/app/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,25 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Title from "./dialog-title.svelte";
+import Description from "./dialog-description.svelte";
+
+export {
+	Root,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Title,
+	Description,
+	//
+	Root as Dialog,
+	Trigger as DialogTrigger,
+	Portal as DialogPortal,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Title as DialogTitle,
+	Description as DialogDescription,
+};
diff --git a/app/src/lib/components/ui/switch/index.ts b/app/src/lib/components/ui/switch/index.ts
new file mode 100644
index 00000000..28448596
--- /dev/null
+++ b/app/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,3 @@
+import Root from "./switch.svelte";
+
+export { Root, Root as Switch };
diff --git a/app/src/lib/components/ui/switch/switch.svelte b/app/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 00000000..4e6f9197
--- /dev/null
+++ b/app/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: SwitchPrimitive.RootProps = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class="bg-background pointer-events-none block size-4 rounded-full shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+	/>
+</SwitchPrimitive.Root>
diff --git a/app/src/routes/(app)/+layout.svelte b/app/src/routes/(app)/+layout.svelte
index c20aa38c..7900ef5a 100644
--- a/app/src/routes/(app)/+layout.svelte
+++ b/app/src/routes/(app)/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import AppSidebar from "$lib/components/sidebar/app-sidebar.svelte";
+    import SettingsDialog from "$lib/components/settings/settings-dialog.svelte";
     import * as Sidebar from "$lib/components/ui/sidebar/index.js";
     import { auth } from "$lib/auth/store.svelte";
     import { validateSession } from "$lib/auth/api";
@@ -30,3 +31,4 @@
         {@render children()}
     </Sidebar.Inset>
 </Sidebar.Provider>
+<SettingsDialog />
diff --git a/app/src/routes/(app)/admin/settings/+page.svelte b/app/src/routes/(app)/admin/settings/+page.svelte
index 7fa275f4..b1bf2873 100644
--- a/app/src/routes/(app)/admin/settings/+page.svelte
+++ b/app/src/routes/(app)/admin/settings/+page.svelte
@@ -1,54 +1,13 @@
 <script lang="ts">
-    import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-    import UpdateSettings from "$lib/components/settings/update-settings.svelte";
-    import LogsSettings from "$lib/components/settings/logs-settings.svelte";
+    import { onMount } from "svelte";
+    import { goto } from "$app/navigation";
+    import { settingsDialog } from "$lib/components/settings/settings-store.svelte.js";
 
-    type Tab = "general" | "update" | "logs";
-    let activeTab = $state<Tab>("general");
-</script>
-
-<header class="flex h-16 shrink-0 items-center gap-2 px-4 border-b">
-    <Sidebar.Trigger class="-ms-1" />
-    <span class="text-sm font-medium text-muted-foreground">Admin / Settings</span>
-</header>
-
-<div class="flex flex-1 flex-col gap-6 p-6">
-    <h1 class="text-2xl font-bold">Settings</h1>
+    onMount(() => {
+        settingsDialog.show();
+    });
 
-    <div class="flex gap-1 border-b">
-        <button
-            onclick={() => (activeTab = "general")}
-            class="px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px {activeTab === 'general'
-                ? 'border-foreground text-foreground'
-                : 'border-transparent text-muted-foreground hover:text-foreground'}"
-        >
-            General
-        </button>
-        <button
-            onclick={() => (activeTab = "update")}
-            class="px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px {activeTab === 'update'
-                ? 'border-foreground text-foreground'
-                : 'border-transparent text-muted-foreground hover:text-foreground'}"
-        >
-            Update
-        </button>
-        <button
-            onclick={() => (activeTab = "logs")}
-            class="px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px {activeTab === 'logs'
-                ? 'border-foreground text-foreground'
-                : 'border-transparent text-muted-foreground hover:text-foreground'}"
-        >
-            Logs
-        </button>
-    </div>
-
-    <div class="mt-2">
-        {#if activeTab === "general"}
-            <p class="text-sm text-muted-foreground">No general settings configured.</p>
-        {:else if activeTab === "update"}
-            <UpdateSettings />
-        {:else if activeTab === "logs"}
-            <LogsSettings />
-        {/if}
-    </div>
-</div>
+    $effect(() => {
+        if (!settingsDialog.open) goto("/");
+    });
+</script>