working on the frontend

2026-04-21 16:25:36 +02:00 · 2025-04-27 18:04:50 +02:00
parent 4fc2461d7f
commit 180771882d
111 changed files with 6187 additions and 151 deletions
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+        --destructive: 0 72.2% 50.6%;
+        --destructive-foreground: 0 0% 98%;
+        --ring: 240 10% 3.9%;
+        --radius: 0.5rem;
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --ring: 240 4.9% 83.9%;
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -1,13 +1,20 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
-    namespace App {
-        // interface Error {}
-        // interface Locals {}
-        // interface PageData {}
-        // interface PageState {}
-        // interface Platform {}
-    }
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+		interface User {
+			id: string;
+			email: string;
+			is_active?: boolean;
+			is_superuser?: boolean;
+			is_verified?: boolean;
+		}
+	}
 }

 export {};
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -0,0 +1,122 @@
+<script lang="ts" module>
+    import BookOpen from "@lucide/svelte/icons/book-open";
+    import Bot from "@lucide/svelte/icons/bot";
+    import Settings2 from "@lucide/svelte/icons/settings-2";
+    import SquareTerminal from "@lucide/svelte/icons/square-terminal";
+
+    const data = {
+        navMain: [
+            {
+                title: "Playground",
+                url: "#",
+                icon: SquareTerminal,
+                isActive: true,
+                items: [
+                    {
+                        title: "History",
+                        url: "#",
+                    },
+                    {
+                        title: "Starred",
+                        url: "#",
+                    },
+                    {
+                        title: "Settings",
+                        url: "#",
+                    },
+                ],
+            },
+            {
+                title: "Models",
+                url: "#",
+                icon: Bot,
+                items: [
+                    {
+                        title: "Genesis",
+                        url: "#",
+                    },
+                    {
+                        title: "Explorer",
+                        url: "#",
+                    },
+                    {
+                        title: "Quantum",
+                        url: "#",
+                    },
+                ],
+            },
+            {
+                title: "Documentation",
+                url: "#",
+                icon: BookOpen,
+                items: [
+                    {
+                        title: "Introduction",
+                        url: "#",
+                    },
+                    {
+                        title: "Get Started",
+                        url: "#",
+                    },
+                    {
+                        title: "Tutorials",
+                        url: "#",
+                    },
+                    {
+                        title: "Changelog",
+                        url: "#",
+                    },
+                ],
+            },
+            {
+                title: "Settings",
+                url: "#",
+                icon: Settings2,
+                items: [
+                    {
+                        title: "General",
+                        url: "#",
+                    },
+                    {
+                        title: "Team",
+                        url: "#",
+                    },
+                    {
+                        title: "Billing",
+                        url: "#",
+                    },
+                    {
+                        title: "Limits",
+                        url: "#",
+                    },
+                ],
+            },
+        ],
+    };
+</script>
+
+<script lang="ts">
+    import NavMain from "$lib/components/nav-main.svelte";
+    import NavUser from "$lib/components/nav-user.svelte";
+    import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+    import type {ComponentProps} from "svelte";
+
+    let {
+        ref = $bindable(null),
+        collapsible = "icon",
+        ...restProps
+    }: ComponentProps<typeof Sidebar.Root> = $props();
+</script>
+
+<Sidebar.Root {...restProps} bind:ref {collapsible}>
+    <Sidebar.Header>
+        <h1 class="font-bold">MediaManager</h1>
+    </Sidebar.Header>
+    <Sidebar.Content>
+        <NavMain items={data.navMain}/>
+    </Sidebar.Content>
+    <Sidebar.Footer>
+        <NavUser user={data.user}/>
+    </Sidebar.Footer>
+    <Sidebar.Rail/>
+</Sidebar.Root>
--- a/web/src/lib/components/login-form.svelte
+++ b/web/src/lib/components/login-form.svelte
@@ -0,0 +1,102 @@
+<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 {goto} from "$app/navigation";
+    import {env} from "$env/dynamic/public"
+
+    let apiUrl = env.PUBLIC_API_URL
+
+    let email = '';
+    let password = '';
+    let errorMessage = '';
+    let isLoading = false;
+
+    async function handleLogin(event: Event) {
+        event.preventDefault();
+
+        isLoading = true;
+        errorMessage = '';
+
+        const formData = new URLSearchParams();
+        formData.append('username', email);
+        formData.append('password', password);
+        console.log(apiUrl + '/auth/cookie/login')
+        try {
+            const response = await fetch(apiUrl + '/auth/cookie/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: formData.toString(),
+                credentials: 'include',
+            });
+
+            if (response.ok) {
+                console.log('Login successful!');
+                console.log("Received User Data: ", response);
+                await goto('/dashboard');
+                errorMessage = 'Login successful! Redirecting...';
+
+            } else {
+                let errorText = await response.text();
+                try {
+                    const errorData = JSON.parse(errorText);
+                    errorMessage = errorData.message || 'Login failed. Please check your credentials.';
+                } catch {
+                    errorMessage = errorText || 'Login failed. Please check your credentials.';
+                }
+                console.error('Login failed:', response.status, errorText);
+            }
+        } catch (error) {
+            console.error('Login request failed:', error);
+            errorMessage = 'An error occurred during the login request.';
+        } finally {
+            isLoading = false;
+        }
+    }
+</script>
+
+<Card.Root class="mx-auto max-w-sm">
+    <Card.Header>
+        <Card.Title class="text-2xl">Login</Card.Title>
+        <Card.Description>Enter your email below to login to your account</Card.Description>
+    </Card.Header>
+    <Card.Content>
+        <form class="grid gap-4" on:submit={handleLogin}>
+            <div class="grid gap-2">
+                <Label for="email">Email</Label>
+                <Input bind:value={email} id="email" placeholder="m@example.com" required type="email"/>
+            </div>
+            <div class="grid gap-2">
+                <div class="flex items-center">
+                    <Label for="password">Password</Label>
+                    <a class="ml-auto inline-block text-sm underline" href="##">
+                        Forgot your password?
+                    </a>
+                </div>
+                <Input bind:value={password} id="password" required type="password"/>
+            </div>
+
+            {#if errorMessage}
+                <p class="text-sm text-red-500">{errorMessage}</p>
+            {/if}
+
+            <Button class="w-full" disabled={isLoading} type="submit">
+                {#if isLoading}
+                    Logging in...
+                {:else}
+                    Login
+                {/if}
+            </Button>
+        </form>
+
+        <Button class="w-full mt-2" variant="outline">Login with Google</Button>
+
+
+        <div class="mt-4 text-center text-sm">
+            Don't have an account?
+            <a class="underline" href="##"> Sign up </a>
+        </div>
+    </Card.Content>
+</Card.Root>
--- a/web/src/lib/components/nav-main.svelte
+++ b/web/src/lib/components/nav-main.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+
+    let {
+        items,
+    }: {
+        items: {
+            title: string;
+            url: string;
+            // this should be `Component` after @lucide/svelte updates types
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            icon?: any;
+            isActive?: boolean;
+            items?: {
+                title: string;
+                url: string;
+            }[];
+        }[];
+    } = $props();
+</script>
+
+<Sidebar.Group>
+    <Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
+    <Sidebar.Menu>
+        {#each items as mainItem (mainItem.title)}
+            <Collapsible.Root open={mainItem.isActive} class="group/collapsible">
+                {#snippet child({props})}
+                    <Sidebar.MenuItem {...props}>
+                        <Collapsible.Trigger>
+                            {#snippet child({props})}
+                                <Sidebar.MenuButton {...props}>
+                                    {#snippet tooltipContent()}
+                                        {mainItem.title}
+                                    {/snippet}
+                                    {#if mainItem.icon}
+                                        <mainItem.icon/>
+                                    {/if}
+                                    <span>{mainItem.title}</span>
+                                    <ChevronRight
+                                            class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                                    />
+                                </Sidebar.MenuButton>
+                            {/snippet}
+                        </Collapsible.Trigger>
+                        <Collapsible.Content>
+                            {#if mainItem.items}
+                                <Sidebar.MenuSub>
+                                    {#each mainItem.items as subItem (subItem.title)}
+                                        <Sidebar.MenuSubItem>
+                                            <Sidebar.MenuSubButton>
+                                                {#snippet child({props})}
+                                                    <a href={subItem.url} {...props}>
+                                                        <span>{subItem.title}</span>
+                                                    </a>
+                                                {/snippet}
+                                            </Sidebar.MenuSubButton>
+                                        </Sidebar.MenuSubItem>
+                                    {/each}
+                                </Sidebar.MenuSub>
+                            {/if}
+                        </Collapsible.Content>
+                    </Sidebar.MenuItem>
+                {/snippet}
+            </Collapsible.Root>
+        {/each}
+    </Sidebar.Menu>
+</Sidebar.Group>
--- a/web/src/lib/components/nav-projects.svelte
+++ b/web/src/lib/components/nav-projects.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    import {useSidebar} from "$lib/components/ui/sidebar/context.svelte.js";
+
+    let {
+        projects,
+    }: {
+        projects: {
+            name: string;
+            url: string;
+            // This should be `Component` after @lucide/svelte updates types
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            icon: any;
+        }[];
+    } = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+<Sidebar.Group class="group-data-[collapsible=icon]:hidden">
+    <Sidebar.GroupLabel>Projects</Sidebar.GroupLabel>
+    <Sidebar.Menu>
+        {#each projects as item (item.name)}
+            <Sidebar.MenuItem>
+                <Sidebar.MenuButton>
+                    {#snippet child({props})}
+                        <a href={item.url} {...props}>
+                            <item.icon/>
+                            <span>{item.name}</span>
+                        </a>
+                    {/snippet}
+                </Sidebar.MenuButton>
+                <DropdownMenu.Root>
+                    <DropdownMenu.Trigger>
+                        {#snippet child({props})}
+                            <Sidebar.MenuAction showOnHover {...props}>
+                                <Ellipsis/>
+                                <span class="sr-only">More</span>
+                            </Sidebar.MenuAction>
+                        {/snippet}
+                    </DropdownMenu.Trigger>
+                    <DropdownMenu.Content
+                            class="w-48 rounded-lg"
+                            side={sidebar.isMobile ? "bottom" : "right"}
+                            align={sidebar.isMobile ? "end" : "start"}
+                    >
+                        <DropdownMenu.Item>
+                            <Folder class="text-muted-foreground"/>
+                            <span>View Project</span>
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item>
+                            <Forward class="text-muted-foreground"/>
+                            <span>Share Project</span>
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Separator/>
+                        <DropdownMenu.Item>
+                            <Trash2 class="text-muted-foreground"/>
+                            <span>Delete Project</span>
+                        </DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </DropdownMenu.Root>
+            </Sidebar.MenuItem>
+        {/each}
+        <Sidebar.MenuItem>
+            <Sidebar.MenuButton class="text-sidebar-foreground/70">
+                <Ellipsis class="text-sidebar-foreground/70"/>
+                <span>More</span>
+            </Sidebar.MenuButton>
+        </Sidebar.MenuItem>
+    </Sidebar.Menu>
+</Sidebar.Group>
--- a/web/src/lib/components/nav-user.svelte
+++ b/web/src/lib/components/nav-user.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import {useSidebar} from "$lib/components/ui/sidebar/index.js";
+    import UserDetails from "$lib/components/user-details.svelte"
+
+    //let { user }: { user: { name: string; email: string; avatar: string } } = $props();
+    const sidebar = useSidebar();
+</script>
+
+<Sidebar.Menu>
+    <Sidebar.MenuItem>
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+                {#snippet child({props})}
+                    <Sidebar.MenuButton
+                            size="lg"
+                            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                            {...props}
+                    >
+                        <div class="grid flex-1 text-left text-sm leading-tight">
+                            <UserDetails/>
+                        </div>
+                        <ChevronsUpDown class="ml-auto size-4"/>
+                    </Sidebar.MenuButton>
+                {/snippet}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+                    align="end"
+                    class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
+                    side={sidebar.isMobile ? "bottom" : "right"}
+                    sideOffset={4}
+            >
+                <DropdownMenu.Label class="p-0 font-normal">
+                    <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <div class="grid flex-1 text-left text-sm leading-tight">
+                            <UserDetails/>
+                        </div>
+                    </div>
+                </DropdownMenu.Label>
+                <DropdownMenu.Separator/>
+                <DropdownMenu.Group>
+                    <DropdownMenu.Item>
+                        <Sparkles/>
+                        Upgrade to Pro
+                    </DropdownMenu.Item>
+                </DropdownMenu.Group>
+                <DropdownMenu.Separator/>
+                <DropdownMenu.Group>
+                    <DropdownMenu.Item>
+                        <BadgeCheck/>
+                        Account
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item>
+                        <CreditCard/>
+                        Billing
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item>
+                        <Bell/>
+                        Notifications
+                    </DropdownMenu.Item>
+                </DropdownMenu.Group>
+                <DropdownMenu.Separator/>
+                <DropdownMenu.Item>
+                    <LogOut/>
+                    Log out
+                </DropdownMenu.Item>
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+    </Sidebar.MenuItem>
+</Sidebar.Menu>
--- a/web/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/web/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import {Avatar as AvatarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        class: className,
+        ref = $bindable(null),
+        ...restProps
+    }: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+        {...restProps}
+        bind:ref
+        class={cn("bg-muted flex size-full items-center justify-center", className)}
+/>
--- a/web/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/web/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import {Avatar as AvatarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        class: className,
+        src,
+        alt,
+        ref = $bindable(null),
+        ...restProps
+    }: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+        {...restProps}
+        {alt}
+        bind:ref
+        class={cn("aspect-square size-full", className)}
+        {src}
+/>
--- a/web/src/lib/components/ui/avatar/avatar.svelte
+++ b/web/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import {Avatar as AvatarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        class: className,
+        ref = $bindable(null),
+        loadingStatus = $bindable("loading"),
+        ...restProps
+    }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+        {...restProps}
+        bind:loadingStatus
+        bind:ref
+        class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+/>
--- a/web/src/lib/components/ui/avatar/index.ts
+++ b/web/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+    Root,
+    Image,
+    Fallback,
+    //
+    Root as Avatar,
+    Image as AvatarImage,
+    Fallback as AvatarFallback,
+};
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type {WithElementRef, WithoutChildren} from "bits-ui";
+	import type {HTMLAttributes} from "svelte/elements";
+	import {cn} from "$lib/utils.js";
+
+	let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+        {...restProps}
+        aria-hidden="true"
+        bind:this={ref}
+        class={cn("flex size-9 items-center justify-center", className)}
+        role="presentation"
+>
+	<Ellipsis class="size-4"/>
+	<span class="sr-only">More</span>
+</span>
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLLiAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li {...restProps} bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)}>
+    {@render children?.()}
+</li>
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type {HTMLAnchorAttributes} from "svelte/elements";
+    import type {Snippet} from "svelte";
+    import type {WithElementRef} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        href = undefined,
+        child,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAnchorAttributes> & {
+        child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+    } = $props();
+
+    const attrs = $derived({
+        class: cn("hover:text-foreground transition-colors", className),
+        href,
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({props: attrs})}
+{:else}
+    <a bind:this={ref} {...attrs}>
+        {@render children?.()}
+    </a>
+{/if}
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLOlAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+        {...restProps}
+        bind:this={ref}
+        class={cn(
+		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+		className
+	)}
+>
+    {@render children?.()}
+</ol>
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type {WithElementRef} from "bits-ui";
+	import type {HTMLAttributes} from "svelte/elements";
+	import {cn} from "$lib/utils.js";
+
+	let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+        {...restProps}
+        aria-current="page"
+        aria-disabled="true"
+        bind:this={ref}
+        class={cn("text-foreground font-normal", className)}
+        role="link"
+>
+	{@render children?.()}
+</span>
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLLiAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+        {...restProps}
+        aria-hidden="true"
+        bind:this={ref}
+        class={cn("[&>svg]:size-3.5", className)}
+        role="presentation"
+>
+    {#if children}
+        {@render children?.()}
+    {:else}
+        <ChevronRight/>
+    {/if}
+</li>
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav {...restProps} aria-label="breadcrumb" bind:this={ref} class={className}>
+    {@render children?.()}
+</nav>
--- a/web/src/lib/components/ui/breadcrumb/index.ts
+++ b/web/src/lib/components/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+    Root,
+    Ellipsis,
+    Item,
+    Separator,
+    Link,
+    List,
+    Page,
+    //
+    Root as Breadcrumb,
+    Ellipsis as BreadcrumbEllipsis,
+    Item as BreadcrumbItem,
+    Separator as BreadcrumbSeparator,
+    Link as BreadcrumbLink,
+    List as BreadcrumbList,
+    Page as BreadcrumbPage,
+};
--- a/web/src/lib/components/ui/button/button.svelte
+++ b/web/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,75 @@
+<script lang="ts" module>
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAnchorAttributes, HTMLButtonAttributes} from "svelte/elements";
+    import {tv, type VariantProps} from "tailwind-variants";
+
+    export const buttonVariants = tv({
+        base: "focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
+                destructive:
+                    "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
+                outline:
+                    "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
+                secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
+                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",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    });
+
+    export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+    export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+    export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+        WithElementRef<HTMLAnchorAttributes> & {
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+    };
+</script>
+
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+
+    let {
+        class: className,
+        variant = "default",
+        size = "default",
+        ref = $bindable(null),
+        href = undefined,
+        type = "button",
+        children,
+        ...restProps
+    }: ButtonProps = $props();
+</script>
+
+{#if href}
+    <a
+            bind:this={ref}
+            class={cn(buttonVariants({ variant, size }), className)}
+            {href}
+            {...restProps}
+    >
+        {@render children?.()}
+    </a>
+{:else}
+    <button
+            bind:this={ref}
+            class={cn(buttonVariants({ variant, size }), className)}
+            {type}
+            {...restProps}
+    >
+        {@render children?.()}
+    </button>
+{/if}
--- a/web/src/lib/components/ui/button/index.ts
+++ b/web/src/lib/components/ui/button/index.ts
@@ -0,0 +1,12 @@
+import Root, {type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants,} from "./button.svelte";
+
+export {
+    Root,
+    type ButtonProps as Props,
+    //
+    Root as Button,
+    buttonVariants,
+    type ButtonProps,
+    type ButtonSize,
+    type ButtonVariant,
+};
--- a/web/src/lib/components/ui/card/card-content.svelte
+++ b/web/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("p-6", className)}>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/card-description.svelte
+++ b/web/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p {...restProps} bind:this={ref} class={cn("text-muted-foreground text-sm", className)}>
+    {@render children?.()}
+</p>
--- a/web/src/lib/components/ui/card/card-footer.svelte
+++ b/web/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex items-center p-6 pt-0", className)}>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/card-header.svelte
+++ b/web/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)}>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/card-title.svelte
+++ b/web/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        level = 3,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
+    } = $props();
+</script>
+
+<div
+        {...restProps}
+        aria-level={level}
+        bind:this={ref}
+        class={cn("font-semibold leading-none tracking-tight", className)}
+        role="heading"
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("bg-card text-card-foreground rounded-xl border shadow", className)}
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/index.ts
+++ b/web/src/lib/components/ui/card/index.ts
@@ -0,0 +1,22 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+    Root,
+    Content,
+    Description,
+    Footer,
+    Header,
+    Title,
+    //
+    Root as Card,
+    Content as CardContent,
+    Description as CardDescription,
+    Footer as CardFooter,
+    Header as CardHeader,
+    Title as CardTitle,
+};
--- a/web/src/lib/components/ui/collapsible/index.ts
+++ b/web/src/lib/components/ui/collapsible/index.ts
@@ -0,0 +1,15 @@
+import {Collapsible as CollapsiblePrimitive} from "bits-ui";
+
+const Root: typeof CollapsiblePrimitive.Root = CollapsiblePrimitive.Root;
+const Trigger: typeof CollapsiblePrimitive.Trigger = CollapsiblePrimitive.Trigger;
+const Content: typeof CollapsiblePrimitive.Content = CollapsiblePrimitive.Content;
+
+export {
+    Root,
+    Content,
+    Trigger,
+    //
+    Root as Collapsible,
+    Content as CollapsibleContent,
+    Trigger as CollapsibleTrigger,
+};
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import {DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild} from "bits-ui";
+	import {cn} from "$lib/utils.js";
+	import type {Snippet} from "svelte";
+
+	let {
+        ref = $bindable(null),
+        class: className,
+        children: childrenProp,
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        ...restProps
+    }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+        children?: Snippet;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+        {...restProps}
+        bind:checked
+        bind:indeterminate
+        bind:ref
+        class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+>
+    {#snippet children({checked, indeterminate})}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<Minus class="size-4"/>
+			{:else}
+				<Check class={cn("size-4", !checked && "text-transparent")}/>
+			{/if}
+		</span>
+        {@render childrenProp?.()}
+    {/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import {DropdownMenu as DropdownMenuPrimitive} from "bits-ui";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        sideOffset = 4,
+        portalProps,
+        ...restProps
+    }: DropdownMenuPrimitive.ContentProps & {
+        portalProps?: DropdownMenuPrimitive.PortalProps;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+    <DropdownMenuPrimitive.Content
+            {...restProps}
+            bind:ref
+            class={cn(
+			"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none",
+			className
+		)}
+            {sideOffset}
+    />
+</DropdownMenuPrimitive.Portal>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {DropdownMenu as DropdownMenuPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        ...restProps
+    }: DropdownMenuPrimitive.GroupHeadingProps & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+        {...restProps}
+        bind:ref
+        class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+/>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import {DropdownMenu as DropdownMenuPrimitive} from "bits-ui";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        ...restProps
+    }: DropdownMenuPrimitive.ItemProps & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+        {...restProps}
+        bind:ref
+        class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+		inset && "pl-8",
+		className
+	)}
+/>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import {type WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import {DropdownMenu as DropdownMenuPrimitive, type WithoutChild} from "bits-ui";
+	import {cn} from "$lib/utils.js";
+
+	let {
+        ref = $bindable(null),
+        class: className,
+        children: childrenProp,
+        ...restProps
+    }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+        {...restProps}
+        bind:ref
+        class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+>
+    {#snippet children({checked})}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Circle class="size-2 fill-current"/>
+			{/if}
+		</span>
+        {@render childrenProp?.({checked})}
+    {/snippet}
+</DropdownMenuPrimitive.RadioItem>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import {DropdownMenu as DropdownMenuPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+        {...restProps}
+        bind:ref
+        class={cn("bg-muted -mx-1 my-1 h-px", className)}
+/>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type {HTMLAttributes} from "svelte/elements";
+	import {type WithElementRef} from "bits-ui";
+	import {cn} from "$lib/utils.js";
+
+	let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+        {...restProps}
+        bind:this={ref}
+        class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+>
+	{@render children?.()}
+</span>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {DropdownMenu as DropdownMenuPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+        {...restProps}
+        bind:ref
+        class={cn(
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
+		className
+	)}
+/>
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import {DropdownMenu as DropdownMenuPrimitive, type WithoutChild} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: WithoutChild<DropdownMenuPrimitive.SubTriggerProps> & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+        {...restProps}
+        bind:ref
+        class={cn(
+		"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		inset && "pl-8",
+		className
+	)}
+>
+    {@render children?.()}
+    <ChevronRight class="ml-auto"/>
+</DropdownMenuPrimitive.SubTrigger>
--- a/web/src/lib/components/ui/dropdown-menu/index.ts
+++ b/web/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,50 @@
+import {DropdownMenu as DropdownMenuPrimitive} from "bits-ui";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+const Trigger = DropdownMenuPrimitive.Trigger;
+const Group = DropdownMenuPrimitive.Group;
+const RadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export {
+    CheckboxItem,
+    Content,
+    Root as DropdownMenu,
+    CheckboxItem as DropdownMenuCheckboxItem,
+    Content as DropdownMenuContent,
+    Group as DropdownMenuGroup,
+    GroupHeading as DropdownMenuGroupHeading,
+    Item as DropdownMenuItem,
+    Label as DropdownMenuLabel,
+    RadioGroup as DropdownMenuRadioGroup,
+    RadioItem as DropdownMenuRadioItem,
+    Separator as DropdownMenuSeparator,
+    Shortcut as DropdownMenuShortcut,
+    Sub as DropdownMenuSub,
+    SubContent as DropdownMenuSubContent,
+    SubTrigger as DropdownMenuSubTrigger,
+    Trigger as DropdownMenuTrigger,
+    Group,
+    GroupHeading,
+    Item,
+    Label,
+    RadioGroup,
+    RadioItem,
+    Root,
+    Separator,
+    Shortcut,
+    Sub,
+    SubContent,
+    SubTrigger,
+    Trigger,
+};
--- a/web/src/lib/components/ui/input/index.ts
+++ b/web/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+    Root,
+    //
+    Root as Input,
+};
--- a/web/src/lib/components/ui/input/input.svelte
+++ b/web/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type {HTMLInputAttributes, HTMLInputTypeAttribute} from "svelte/elements";
+    import type {WithElementRef} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+    type Props = WithElementRef<
+        Omit<HTMLInputAttributes, "type"> &
+        ({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+    >;
+
+    let {
+        ref = $bindable(null),
+        value = $bindable(),
+        type,
+        files = $bindable(),
+        class: className,
+        ...restProps
+    }: Props = $props();
+</script>
+
+{#if type === "file"}
+    <input
+            bind:this={ref}
+            class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className
+		)}
+            type="file"
+            bind:files
+            bind:value
+            {...restProps}
+    />
+{:else}
+    <input
+            bind:this={ref}
+            class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className
+		)}
+            {type}
+            bind:value
+            {...restProps}
+    />
+{/if}
--- a/web/src/lib/components/ui/label/index.ts
+++ b/web/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+    Root,
+    //
+    Root as Label,
+};
--- a/web/src/lib/components/ui/label/label.svelte
+++ b/web/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {Label as LabelPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+        {...restProps}
+        bind:ref
+        class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+/>
--- a/web/src/lib/components/ui/separator/index.ts
+++ b/web/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+    Root,
+    //
+    Root as Separator,
+};
--- a/web/src/lib/components/ui/separator/separator.svelte
+++ b/web/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import {Separator as SeparatorPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        orientation = "horizontal",
+        ...restProps
+    }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+        {...restProps}
+        bind:ref
+        class={cn(
+		"bg-border shrink-0",
+		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+		className
+	)}
+        {orientation}
+/>
--- a/web/src/lib/components/ui/sheet/index.ts
+++ b/web/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,37 @@
+import {Dialog as SheetPrimitive} from "bits-ui";
+
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+const Portal = SheetPrimitive.Portal;
+
+export {
+    Root,
+    Close,
+    Trigger,
+    Portal,
+    Overlay,
+    Content,
+    Header,
+    Footer,
+    Title,
+    Description,
+    //
+    Root as Sheet,
+    Close as SheetClose,
+    Trigger as SheetTrigger,
+    Portal as SheetPortal,
+    Overlay as SheetOverlay,
+    Content as SheetContent,
+    Header as SheetHeader,
+    Footer as SheetFooter,
+    Title as SheetTitle,
+    Description as SheetDescription,
+};
--- a/web/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,54 @@
+<script lang="ts" module>
+    import {tv, type VariantProps} from "tailwind-variants";
+
+    export const sheetVariants = tv({
+        base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+        variants: {
+            side: {
+                top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+                bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+                left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    });
+
+    export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+    import {Dialog as SheetPrimitive, type WithoutChildrenOrChild} from "bits-ui";
+    import X from "@lucide/svelte/icons/x";
+    import type {Snippet} from "svelte";
+    import SheetOverlay from "./sheet-overlay.svelte";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        portalProps,
+        side = "right",
+        children,
+        ...restProps
+    }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+        portalProps?: SheetPrimitive.PortalProps;
+        side?: Side;
+        children: Snippet;
+    } = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+    <SheetOverlay/>
+    <SheetPrimitive.Content {...restProps} bind:ref class={cn(sheetVariants({ side }), className)}>
+        {@render children?.()}
+        <SheetPrimitive.Close
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+        >
+            <X class="size-4"/>
+            <span class="sr-only">Close</span>
+        </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+</SheetPrimitive.Portal>
--- a/web/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import {Dialog as SheetPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+        {...restProps}
+        bind:ref
+        class={cn("text-muted-foreground text-sm", className)}
+/>
--- a/web/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type {HTMLAttributes} from "svelte/elements";
+    import type {WithElementRef} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {Dialog as SheetPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+        {...restProps}
+        bind:ref
+        class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+/>
--- a/web/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import {Dialog as SheetPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+        {...restProps}
+        bind:ref
+        class={cn("text-foreground text-lg font-semibold", className)}
+/>
--- a/web/src/lib/components/ui/sidebar/constants.ts
+++ b/web/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
--- a/web/src/lib/components/ui/sidebar/context.svelte.ts
+++ b/web/src/lib/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,81 @@
+import {IsMobile} from "$lib/hooks/is-mobile.svelte.js";
+import {getContext, setContext} from "svelte";
+import {SIDEBAR_KEYBOARD_SHORTCUT} from "./constants.js";
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+    /**
+     * A getter function that returns the current open state of the sidebar.
+     * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+     * component.
+     */
+    open: Getter<boolean>;
+
+    /**
+     * A function that sets the open state of the sidebar. To support `bind:open`, we need
+     * a source of truth for changing the open state to ensure it will be synced throughout
+     * the sub-components and any `bind:` references.
+     */
+    setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+    readonly props: SidebarStateProps;
+    open = $derived.by(() => this.props.open());
+    openMobile = $state(false);
+    setOpen: SidebarStateProps["setOpen"];
+    state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+    #isMobile: IsMobile;
+
+    constructor(props: SidebarStateProps) {
+        this.setOpen = props.setOpen;
+        this.#isMobile = new IsMobile();
+        this.props = props;
+    }
+
+    // Convenience getter for checking if the sidebar is mobile
+    // without this, we would need to use `sidebar.isMobile.current` everywhere
+    get isMobile() {
+        return this.#isMobile.current;
+    }
+
+    // Event handler to apply to the `<svelte:window>`
+    handleShortcutKeydown = (e: KeyboardEvent) => {
+        if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+
+    setOpenMobile = (value: boolean) => {
+        this.openMobile = value;
+    };
+
+    toggle = () => {
+        return this.#isMobile.current
+            ? (this.openMobile = !this.openMobile)
+            : this.setOpen(!this.open);
+    };
+}
+
+const SYMBOL_KEY = "scn-sidebar";
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+    return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+    return getContext(Symbol.for(SYMBOL_KEY));
+}
--- a/web/src/lib/components/ui/sidebar/index.ts
+++ b/web/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,75 @@
+import {useSidebar} from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
+
+export {
+    Content,
+    Footer,
+    Group,
+    GroupAction,
+    GroupContent,
+    GroupLabel,
+    Header,
+    Input,
+    Inset,
+    Menu,
+    MenuAction,
+    MenuBadge,
+    MenuButton,
+    MenuItem,
+    MenuSkeleton,
+    MenuSub,
+    MenuSubButton,
+    MenuSubItem,
+    Provider,
+    Rail,
+    Root,
+    Separator,
+    //
+    Root as Sidebar,
+    Content as SidebarContent,
+    Footer as SidebarFooter,
+    Group as SidebarGroup,
+    GroupAction as SidebarGroupAction,
+    GroupContent as SidebarGroupContent,
+    GroupLabel as SidebarGroupLabel,
+    Header as SidebarHeader,
+    Input as SidebarInput,
+    Inset as SidebarInset,
+    Menu as SidebarMenu,
+    MenuAction as SidebarMenuAction,
+    MenuBadge as SidebarMenuBadge,
+    MenuButton as SidebarMenuButton,
+    MenuItem as SidebarMenuItem,
+    MenuSkeleton as SidebarMenuSkeleton,
+    MenuSub as SidebarMenuSub,
+    MenuSubButton as SidebarMenuSubButton,
+    MenuSubItem as SidebarMenuSubItem,
+    Provider as SidebarProvider,
+    Rail as SidebarRail,
+    Separator as SidebarSeparator,
+    Trigger as SidebarTrigger,
+    Trigger,
+    useSidebar,
+};
--- a/web/src/lib/components/ui/sidebar/sidebar-content.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type {HTMLAttributes} from "svelte/elements";
+    import type {WithElementRef} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn(
+		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+        data-sidebar="content"
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sidebar/sidebar-footer.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type {HTMLAttributes} from "svelte/elements";
+    import type {WithElementRef} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("flex flex-col gap-2 p-2", className)}
+        data-sidebar="footer"
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sidebar/sidebar-group-action.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {Snippet} from "svelte";
+    import type {HTMLButtonAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        child,
+        ...restProps
+    }: WithElementRef<HTMLButtonAttributes> & {
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+
+    const propObj = $derived({
+        class: cn(
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+            // Increases the hit area of the button on mobile.
+            "after:absolute after:-inset-2 after:md:hidden",
+            "group-data-[collapsible=icon]:hidden",
+            className
+        ),
+        "data-sidebar": "group-action",
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({props: propObj})}
+{:else}
+    <button bind:this={ref} {...propObj}>
+        {@render children?.()}
+    </button>
+{/if}
--- a/web/src/lib/components/ui/sidebar/sidebar-group-content.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("w-full text-sm", className)}
+        data-sidebar="group-content"
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sidebar/sidebar-group-label.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {Snippet} from "svelte";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        children,
+        child,
+        class: className,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+
+    const mergedProps = $derived({
+        class: cn(
+            "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+            "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+            className
+        ),
+        "data-sidebar": "group-label",
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({props: mergedProps})}
+{:else}
+    <div bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </div>
+{/if}
--- a/web/src/lib/components/ui/sidebar/sidebar-group.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type {HTMLAttributes} from "svelte/elements";
+    import type {WithElementRef} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+        data-sidebar="group"
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sidebar/sidebar-header.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type {HTMLAttributes} from "svelte/elements";
+    import type {WithElementRef} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("flex flex-col gap-2 p-2", className)}
+        data-sidebar="header"
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sidebar/sidebar-input.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import {Input} from "$lib/components/ui/input/index.js";
+    import {cn} from "$lib/utils.js";
+    import type {ComponentProps} from "svelte";
+
+    let {
+        ref = $bindable(null),
+        value = $bindable(""),
+        class: className,
+        ...restProps
+    }: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+        {...restProps}
+        bind:ref
+        bind:value
+        class={cn(
+		"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+		className
+	)}
+        data-sidebar="input"
+/>
--- a/web/src/lib/components/ui/sidebar/sidebar-inset.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+        {...restProps}
+        bind:this={ref}
+        class={cn(
+		"bg-background relative flex min-h-svh flex-1 flex-col",
+		"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+		className
+	)}
+>
+    {@render children?.()}
+</main>
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {Snippet} from "svelte";
+    import type {HTMLButtonAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        showOnHover = false,
+        children,
+        child,
+        ...restProps
+    }: WithElementRef<HTMLButtonAttributes> & {
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+        showOnHover?: boolean;
+    } = $props();
+
+    const mergedProps = $derived({
+        class: cn(
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+            // Increases the hit area of the button on mobile.
+            "after:absolute after:-inset-2 after:md:hidden",
+            "peer-data-[size=sm]/menu-button:top-1",
+            "peer-data-[size=default]/menu-button:top-1.5",
+            "peer-data-[size=lg]/menu-button:top-2.5",
+            "group-data-[collapsible=icon]:hidden",
+            showOnHover &&
+            "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+            className
+        ),
+        "data-sidebar": "menu-action",
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({props: mergedProps})}
+{:else}
+    <button bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </button>
+{/if}
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn(
+		"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+		"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+		"peer-data-[size=sm]/menu-button:top-1",
+		"peer-data-[size=default]/menu-button:top-1.5",
+		"peer-data-[size=lg]/menu-button:top-2.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+        data-sidebar="menu-badge"
+>
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,97 @@
+<script lang="ts" module>
+    import {tv, type VariantProps} from "tailwind-variants";
+
+    export const sidebarMenuButtonVariants = tv({
+        base: "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        variants: {
+            variant: {
+                default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                outline:
+                    "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+            },
+            size: {
+                default: "h-8 text-sm",
+                sm: "h-7 text-xs",
+                lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    });
+
+    export type SidebarMenuButtonVariant = VariantProps<
+        typeof sidebarMenuButtonVariants
+    >["variant"];
+    export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+    import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+    import {cn} from "$lib/utils.js";
+    import {mergeProps, type WithElementRef, type WithoutChildrenOrChild} from "bits-ui";
+    import type {ComponentProps, Snippet} from "svelte";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {useSidebar} from "./context.svelte.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        child,
+        variant = "default",
+        size = "default",
+        isActive = false,
+        tooltipContent,
+        tooltipContentProps,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+        isActive?: boolean;
+        variant?: SidebarMenuButtonVariant;
+        size?: SidebarMenuButtonSize;
+        tooltipContent?: Snippet;
+        tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+
+    const sidebar = useSidebar();
+
+    const buttonProps = $derived({
+        class: cn(sidebarMenuButtonVariants({variant, size}), className),
+        "data-sidebar": "menu-button",
+        "data-size": size,
+        "data-active": isActive,
+        ...restProps,
+    });
+</script>
+
+{#snippet Button({props}: { props?: Record<string, unknown> })}
+    {@const mergedProps = mergeProps(buttonProps, props)}
+    {#if child}
+        {@render child({props: mergedProps})}
+    {:else}
+        <button bind:this={ref} {...mergedProps}>
+            {@render children?.()}
+        </button>
+    {/if}
+{/snippet}
+
+{#if !tooltipContent}
+    {@render Button({})}
+{:else}
+    <Tooltip.Root>
+        <Tooltip.Trigger>
+            {#snippet child({props})}
+                {@render Button({props})}
+            {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content
+                side="right"
+                align="center"
+                hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+                children={tooltipContent}
+                {...tooltipContentProps}
+        />
+    </Tooltip.Root>
+{/if}
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+        {...restProps}
+        bind:this={ref}
+        class={cn("group/menu-item relative", className)}
+        data-sidebar="menu-item"
+>
+    {@render children?.()}
+</li>
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {Skeleton} from "$lib/components/ui/skeleton/index.js";
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        showIcon = false,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+        showIcon?: boolean;
+    } = $props();
+
+    // Random width between 50% and 90%
+    const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+        data-sidebar="menu-skeleton"
+>
+    {#if showIcon}
+        <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon"/>
+    {/if}
+    <Skeleton
+            class="h-4 max-w-[var(--skeleton-width)] flex-1"
+            data-sidebar="menu-skeleton-text"
+            style="--skeleton-width: {width};"
+    />
+    {@render children?.()}
+</div>
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {Snippet} from "svelte";
+    import type {HTMLAnchorAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        children,
+        child,
+        class: className,
+        size = "md",
+        isActive,
+        ...restProps
+    }: WithElementRef<HTMLAnchorAttributes> & {
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+        size?: "sm" | "md";
+        isActive?: boolean;
+    } = $props();
+
+    const mergedProps = $derived({
+        class: cn(
+            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+            "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+            size === "sm" && "text-xs",
+            size === "md" && "text-sm",
+            "group-data-[collapsible=icon]:hidden",
+            className
+        ),
+        "data-sidebar": "menu-sub-button",
+        "data-size": size,
+        "data-active": isActive,
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({props: mergedProps})}
+{:else}
+    <a bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </a>
+{/if}
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li {...restProps} bind:this={ref} data-sidebar="menu-sub-item">
+    {@render children?.()}
+</li>
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+        {...restProps}
+        bind:this={ref}
+        class={cn(
+		"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+        data-sidebar="menu-sub"
+>
+    {@render children?.()}
+</ul>
--- a/web/src/lib/components/ui/sidebar/sidebar-menu.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+        {...restProps}
+        bind:this={ref}
+        class={cn("flex w-full min-w-0 flex-col gap-1", className)}
+        data-sidebar="menu"
+>
+    {@render children?.()}
+</ul>
--- a/web/src/lib/components/ui/sidebar/sidebar-provider.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON,} from "./constants.js";
+    import {setSidebar} from "./context.svelte.js";
+
+    let {
+        ref = $bindable(null),
+        open = $bindable(true),
+        onOpenChange = () => {
+        },
+        class: className,
+        style,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+    } = $props();
+
+    const sidebar = setSidebar({
+        open: () => open,
+        setOpen: (value: boolean) => {
+            open = value;
+            onOpenChange(value);
+
+            // This sets the cookie to keep the sidebar state.
+            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        },
+    });
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown}/>
+
+<Tooltip.Provider delayDuration={0}>
+    <div
+            {...restProps}
+            bind:this={ref}
+            class={cn(
+			"group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+			className
+		)}
+            style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+    >
+        {@render children?.()}
+    </div>
+</Tooltip.Provider>
--- a/web/src/lib/components/ui/sidebar/sidebar-rail.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {useSidebar} from "./context.svelte.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+<button
+        {...restProps}
+        aria-label="Toggle Sidebar"
+        bind:this={ref}
+        class={cn(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+		"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+        data-sidebar="rail"
+        onclick={() => sidebar.toggle()}
+        tabIndex={-1}
+        title="Toggle Sidebar"
+>
+    {@render children?.()}
+</button>
--- a/web/src/lib/components/ui/sidebar/sidebar-separator.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import {Separator} from "$lib/components/ui/separator/index.js";
+    import {cn} from "$lib/utils.js";
+    import type {ComponentProps} from "svelte";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+        {...restProps}
+        bind:ref
+        class={cn("bg-sidebar-border mx-2 w-auto", className)}
+        data-sidebar="separator"
+/>
--- a/web/src/lib/components/ui/sidebar/sidebar-trigger.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import {Button} from "$lib/components/ui/button/index.js";
+    import {cn} from "$lib/utils.js";
+    import type {ComponentProps} from "svelte";
+    import {useSidebar} from "./context.svelte.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        onclick,
+        ...restProps
+    }: ComponentProps<typeof Button> & {
+        onclick?: (e: MouseEvent) => void;
+    } = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+<Button
+        {...restProps}
+        class={cn("h-7 w-7", className)}
+        data-sidebar="trigger"
+        onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+        size="icon"
+        type="button"
+        variant="ghost"
+>
+    <PanelLeft/>
+    <span class="sr-only">Toggle Sidebar</span>
+</Button>
--- a/web/src/lib/components/ui/sidebar/sidebar.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import {cn} from "$lib/utils.js";
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {SIDEBAR_WIDTH_MOBILE} from "./constants.js";
+    import {useSidebar} from "./context.svelte.js";
+
+    let {
+        ref = $bindable(null),
+        side = "left",
+        variant = "sidebar",
+        collapsible = "offcanvas",
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        side?: "left" | "right";
+        variant?: "sidebar" | "floating" | "inset";
+        collapsible?: "offcanvas" | "icon" | "none";
+    } = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+{#if collapsible === "none"}
+    <div
+            class={cn(
+			"bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
+			className
+		)}
+            bind:this={ref}
+            {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{:else if sidebar.isMobile}
+    <Sheet.Root
+            bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
+            {...restProps}
+    >
+        <Sheet.Content
+                data-sidebar="sidebar"
+                data-mobile="true"
+                class="bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+                style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+                {side}
+        >
+            <div class="flex h-full w-full flex-col">
+                {@render children?.()}
+            </div>
+        </Sheet.Content>
+    </Sheet.Root>
+{:else}
+    <div
+            bind:this={ref}
+            class="text-sidebar-foreground group peer hidden md:block"
+            data-state={sidebar.state}
+            data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+            data-variant={variant}
+            data-side={side}
+    >
+        <!-- This is what handles the sidebar gap on desktop -->
+        <div
+                class={cn(
+				"relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+					: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
+			)}
+        ></div>
+        <div
+                class={cn(
+				"fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+					: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+				// Adjust the padding for floating and inset variants.
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+					: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+				className
+			)}
+                {...restProps}
+        >
+            <div
+                    data-sidebar="sidebar"
+                    class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+            >
+                {@render children?.()}
+            </div>
+        </div>
+    </div>
+{/if}
--- a/web/src/lib/components/ui/skeleton/index.ts
+++ b/web/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+    Root,
+    //
+    Root as Skeleton,
+};
--- a/web/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/web/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type {WithElementRef, WithoutChildren} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+        {...restProps}
+        bind:this={ref}
+        class={cn("bg-primary/10 animate-pulse rounded-md", className)}
+></div>
--- a/web/src/lib/components/ui/tooltip/index.ts
+++ b/web/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,18 @@
+import {Tooltip as TooltipPrimitive} from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+
+export {
+    Root,
+    Trigger,
+    Content,
+    Provider,
+    //
+    Root as Tooltip,
+    Content as TooltipContent,
+    Trigger as TooltipTrigger,
+    Provider as TooltipProvider,
+};
--- a/web/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/web/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {Tooltip as TooltipPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        sideOffset = 4,
+        ...restProps
+    }: TooltipPrimitive.ContentProps = $props();
+</script>
+
+<TooltipPrimitive.Content
+        {...restProps}
+        bind:ref
+        class={cn(
+		"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+		className
+	)}
+        {sideOffset}
+/>
--- a/web/src/lib/components/user-details.svelte
+++ b/web/src/lib/components/user-details.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {getContext} from "svelte";
+
+    const user: () => App.User = getContext("user")
+</script>
+
+<span class="truncate font-semibold">{user().email}</span>
+{#if user().is_superuser}
+    <span class="truncate text-xs">Administrator</span>
+{:else }
+    <span class="truncate text-xs">User</span>
+{/if}
--- a/web/src/lib/hooks/is-mobile.svelte.ts
+++ b/web/src/lib/hooks/is-mobile.svelte.ts
@@ -0,0 +1,9 @@
+import {MediaQuery} from "svelte/reactivity";
+
+const MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+    constructor() {
+        super(`max-width: ${MOBILE_BREAKPOINT - 1}px`);
+    }
+}
--- a/web/src/lib/images/github.svg
+++ b/web/src/lib/images/github.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30">
+    <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z"
+            fill="rgba(0,0,0,0.7)"
+            stroke="none"
+    />
+    <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z"
+            fill="rgba(0,0,0,0.7)"
+            stroke="none"
+    />
+</svg>
--- a/web/src/lib/images/svelte-logo.svg
+++ b/web/src/lib/images/svelte-logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128">
+    <title>svelte-logo</title>
+    <path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
+          style="fill:#ff3e00"/>
+    <path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
+          style="fill:#fff"/>
+</svg>
--- a/web/src/lib/images/svelte-welcome.png
+++ b/web/src/lib/images/svelte-welcome.png
--- a/web/src/lib/images/svelte-welcome.webp
+++ b/web/src/lib/images/svelte-welcome.webp
--- a/web/src/lib/index.ts
+++ b/web/src/lib/index.ts
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import {type ClassValue, clsx} from "clsx";
+import {twMerge} from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import '../app.css';
+
+    let {children} = $props();
+
+</script>
+
+<div class="app">
+
+    <main>
+        {@render children()}
+    </main>
+
+    <footer>
+        <p>
+            visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
+        </p>
+    </footer>
+</div>
+
+<style>
+    .app {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+
+    main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        width: 100%;
+        max-width: 64rem;
+        margin: 0 auto;
+        box-sizing: border-box;
+    }
+
+    footer {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 12px;
+    }
+
+    footer a {
+        font-weight: bold;
+    }
+
+    @media (min-width: 480px) {
+        footer {
+            padding: 12px 0;
+        }
+    }
+</style>
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,2 +1,56 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+	import welcome from '$lib/images/svelte-welcome.webp';
+	import welcomeFallback from '$lib/images/svelte-welcome.png';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta content="Svelte demo app" name="description"/>
+</svelte:head>
+
+<section>
+	<h1>
+		<span class="welcome">
+			<picture>
+				<source srcset={welcome} type="image/webp"/>
+				<img alt="Welcome" src={welcomeFallback}/>
+			</picture>
+		</span>
+
+		to your new<br/>SvelteKit app
+	</h1>
+
+	<h2>
+		try editing <strong>src/routes/+page.svelte</strong>
+	</h2>
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 0.6;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		display: block;
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>
--- a/web/src/routes/about/+page.svelte
+++ b/web/src/routes/about/+page.svelte
@@ -0,0 +1,26 @@
+<svelte:head>
+    <title>About</title>
+    <meta content="About this app" name="description"/>
+</svelte:head>
+
+<div class="text-column">
+    <h1>About this app</h1>
+
+    <p>
+        This is a <a href="https://svelte.dev/docs/kit">SvelteKit</a> app. You can make your own by typing
+        the following into your command line and following the prompts:
+    </p>
+
+    <pre>npx sv create</pre>
+
+    <p>
+        The page you're looking at is purely static HTML, with no client-side interactivity needed.
+        Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+        the devtools network panel and reloading.
+    </p>
+
+    <p>
+        The <a href="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
+        using it with JavaScript disabled!
+    </p>
+</div>
--- a/web/src/routes/about/+page.ts
+++ b/web/src/routes/about/+page.ts
@@ -0,0 +1,9 @@
+import {dev} from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;
--- a/web/src/routes/dashboard/+layout.svelte
+++ b/web/src/routes/dashboard/+layout.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import AppSidebar from "$lib/components/app-sidebar.svelte";
+    import {Separator} from "$lib/components/ui/separator/index.js";
+    import type {LayoutProps} from "./$types";
+    import {setContext} from "svelte";
+
+    let {data, children}: LayoutProps = $props();
+    console.log("Received User Data: ", data.user)
+    setContext('user', () => data.user);
+
+</script>
+
+<Sidebar.Provider>
+    <AppSidebar/>
+    <Sidebar.Inset>
+        <header
+                class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+        >
+            <div class="flex items-center gap-2 px-4">
+                <Sidebar.Trigger class="-ml-1"/>
+                <Separator class="mr-2 h-4" orientation="vertical"/>
+                <Breadcrumb.Root>
+                    <Breadcrumb.List>
+                        <Breadcrumb.Item class="hidden md:block">
+                            <Breadcrumb.Link href="#">MediaManager</Breadcrumb.Link>
+                        </Breadcrumb.Item>
+                        <!--                        <Breadcrumb.Separator class="hidden md:block" />-->
+                        <!--                        <Breadcrumb.Item>-->
+                        <!--                            <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>-->
+                        <!--                        </Breadcrumb.Item>-->
+                    </Breadcrumb.List>
+                </Breadcrumb.Root>
+            </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+            {@render children()}
+            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+                <div class="bg-muted/50 aspect-video rounded-xl"></div>
+                <div class="bg-muted/50 aspect-video rounded-xl"></div>
+                <div class="bg-muted/50 aspect-video rounded-xl"></div>
+            </div>
+            <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min"></div>
+        </div>
+    </Sidebar.Inset>
+</Sidebar.Provider>
--- a/web/src/routes/dashboard/+layout.ts
+++ b/web/src/routes/dashboard/+layout.ts
@@ -0,0 +1,16 @@
+import {env} from "$env/dynamic/public";
+import type {LayoutLoad} from "./$types";
+
+let apiUrl = env.PUBLIC_API_URL
+
+export const load: LayoutLoad = async ({fetch}) => {
+    const response = await fetch(apiUrl + "/users/me", {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+    });
+    return {user: await response.json()};
+}
+
--- a/web/src/routes/dashboard/+page.svelte
+++ b/web/src/routes/dashboard/+page.svelte
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import LoginForm from "$lib/components/login-form.svelte";
+</script>
+
+<div class="flex h-screen w-full items-center justify-center px-4">
+    <LoginForm/>
+</div>
				`@@ -1 +0,0 @@`
				// place files you want to import through the `$lib` alias in this folder.