chore: 换用更美观、现代的前端页面 (#348)

2025-06-01 13:42:10 +08:00
parent a574d005c3
commit c07e475fe6
127 changed files with 3886 additions and 1041 deletions
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,61 +1,121 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';

-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 240 10% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-        --popover: 0 0% 100%;
-        ;
-        --popover-foreground: 240 10% 3.9%;
-        --primary: 240 5.9% 10%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 240 4.8% 95.9%;
-        --secondary-foreground: 240 5.9% 10%;
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
-        --destructive: 0 72.22% 50.59%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 240 5.9% 90%;
-        --input: 240 5.9% 90%;
-        --ring: 240 5.9% 10%;
-        --radius: 0.5rem;
-    }
+@import 'tw-animate-css';

-    .dark {
-        --background: 240 10% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 240 10% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 240 10% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 240 5.9% 10%;
-        --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 0 0% 98%;
-        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 240 5% 64.9%;
-        --accent: 240 3.7% 15.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --ring: 240 4.9% 83.9%;
-    }
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.129 0.042 264.695);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.129 0.042 264.695);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.129 0.042 264.695);
+	--primary: oklch(0.208 0.042 265.755);
+	--primary-foreground: oklch(0.984 0.003 247.858);
+	--secondary: oklch(0.968 0.007 247.896);
+	--secondary-foreground: oklch(0.208 0.042 265.755);
+	--muted: oklch(0.968 0.007 247.896);
+	--muted-foreground: oklch(0.554 0.046 257.417);
+	--accent: oklch(0.968 0.007 247.896);
+	--accent-foreground: oklch(0.208 0.042 265.755);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.929 0.013 255.508);
+	--input: oklch(0.929 0.013 255.508);
+	--ring: oklch(0.704 0.04 256.788);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.984 0.003 247.858);
+	--sidebar-foreground: oklch(0.129 0.042 264.695);
+	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.968 0.007 247.896);
+	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+	--sidebar-border: oklch(0.929 0.013 255.508);
+	--sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+	--background: oklch(0.129 0.042 264.695);
+	--foreground: oklch(0.984 0.003 247.858);
+	--card: oklch(0.208 0.042 265.755);
+	--card-foreground: oklch(0.984 0.003 247.858);
+	--popover: oklch(0.208 0.042 265.755);
+	--popover-foreground: oklch(0.984 0.003 247.858);
+	--primary: oklch(0.929 0.013 255.508);
+	--primary-foreground: oklch(0.208 0.042 265.755);
+	--secondary: oklch(0.279 0.041 260.031);
+	--secondary-foreground: oklch(0.984 0.003 247.858);
+	--muted: oklch(0.279 0.041 260.031);
+	--muted-foreground: oklch(0.704 0.04 256.788);
+	--accent: oklch(0.279 0.041 260.031);
+	--accent-foreground: oklch(0.984 0.003 247.858);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.551 0.027 264.364);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.208 0.042 265.755);
+	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.279 0.041 260.031);
+	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
 }

@layer base {
-    * {
-        @apply border-border;
-    }
-
-    body {
-        @apply bg-background text-foreground;
-    }
-}
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -1,56 +1,183 @@
-import type { VideoResponse, VideoInfo, VideosResponse, VideoSourcesResponse, ResetVideoResponse } from './types';
+import type {
+	ApiResponse,
+	VideoSourcesResponse,
+	VideosRequest,
+	VideosResponse,
+	VideoResponse,
+	ResetVideoResponse,
+	ApiError
+} from './types';

-const BASE_URL = '/api';
+// API 基础配置
+const API_BASE_URL = '/api';

-export class ApiError extends Error {
-    constructor(message: string) {
-        super(message);
-        this.name = 'ApiError';
-    }
+// HTTP 客户端类
+class ApiClient {
+	private baseURL: string;
+	private defaultHeaders: Record<string, string>;
+
+	constructor(baseURL: string = API_BASE_URL) {
+		this.baseURL = baseURL;
+		this.defaultHeaders = {
+			'Content-Type': 'application/json'
+		};
+		const token = localStorage.getItem('authToken');
+		if (token) {
+			this.defaultHeaders['Authorization'] = token;
+		}
+	}
+
+	// 设置认证 token
+	setAuthToken(token?: string) {
+		if (token) {
+			this.defaultHeaders['Authorization'] = token;
+			localStorage.setItem('authToken', token);
+		} else {
+			delete this.defaultHeaders['Authorization'];
+			localStorage.removeItem('authToken');
+		}
+	}
+
+	// 通用请求方法
+	private async request<T>(endpoint: string, options: RequestInit = {}): Promise<ApiResponse<T>> {
+		const url = `${this.baseURL}${endpoint}`;
+
+		const config: RequestInit = {
+			headers: {
+				...this.defaultHeaders,
+				...options.headers
+			},
+			...options
+		};
+
+		try {
+			const response = await fetch(url, config);
+
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+
+			const data: ApiResponse<T> = await response.json();
+			return data;
+		} catch (error) {
+			const apiError: ApiError = {
+				message: error instanceof Error ? error.message : 'Unknown error occurred',
+				status: error instanceof TypeError ? undefined : (error as { status?: number }).status
+			};
+			throw apiError;
+		}
+	}
+
+	// GET 请求
+	private async get<T>(
+		endpoint: string,
+		params?: VideosRequest | Record<string, unknown>
+	): Promise<ApiResponse<T>> {
+		let queryString = '';
+
+		if (params) {
+			const searchParams = new URLSearchParams();
+			Object.entries(params).forEach(([key, value]) => {
+				if (value !== undefined && value !== null) {
+					searchParams.append(key, String(value));
+				}
+			});
+			queryString = searchParams.toString();
+		}
+
+		const finalEndpoint = queryString ? `${endpoint}?${queryString}` : endpoint;
+		return this.request<T>(finalEndpoint, {
+			method: 'GET'
+		});
+	}
+
+	// POST 请求
+	private async post<T>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> {
+		return this.request<T>(endpoint, {
+			method: 'POST',
+			body: data ? JSON.stringify(data) : undefined
+		});
+	}
+
+	// PUT 请求
+	private async put<T>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> {
+		return this.request<T>(endpoint, {
+			method: 'PUT',
+			body: data ? JSON.stringify(data) : undefined
+		});
+	}
+
+	// DELETE 请求
+	private async delete<T>(endpoint: string): Promise<ApiResponse<T>> {
+		return this.request<T>(endpoint, {
+			method: 'DELETE'
+		});
+	}
+
+	// API 方法
+
+	/**
+	 * 获取所有视频来源
+	 */
+	async getVideoSources(): Promise<ApiResponse<VideoSourcesResponse>> {
+		return this.get<VideoSourcesResponse>('/video-sources');
+	}
+
+	/**
+	 * 获取视频列表
+	 * @param params 查询参数
+	 */
+	async getVideos(params?: VideosRequest): Promise<ApiResponse<VideosResponse>> {
+		return this.get<VideosResponse>('/videos', params);
+	}
+
+	/**
+	 * 获取单个视频详情
+	 * @param id 视频 ID
+	 */
+	async getVideo(id: number): Promise<ApiResponse<VideoResponse>> {
+		return this.get<VideoResponse>(`/videos/${id}`);
+	}
+
+	/**
+	 * 重置视频下载状态
+	 * @param id 视频 ID
+	 */
+	async resetVideo(id: number): Promise<ApiResponse<ResetVideoResponse>> {
+		return this.post<ResetVideoResponse>(`/videos/${id}/reset`);
+	}
 }

-async function fetchWithAuth(url: string, options: RequestInit = {}) {
-    const token = localStorage.getItem('auth_token');
-    const headers = {
-        ...options.headers,
-        'Authorization': token || ''
-    };
+// 创建默认的 API 客户端实例
+export const apiClient = new ApiClient();

-    const response = await fetch(url, { ...options, headers });
-    if (!response.ok) {
-        throw new ApiError(`API request failed: ${response.statusText}, body: ${await response.text()}`);
-    }
-    let { data } = await response.json();
-    return data;
-}
+// 导出 API 方法的便捷函数
+export const api = {
+	/**
+	 * 获取所有视频来源
+	 */
+	getVideoSources: () => apiClient.getVideoSources(),

-export async function getVideoSources(): Promise<VideoSourcesResponse> {
-    return fetchWithAuth(`${BASE_URL}/video-sources`);
-}
+	/**
+	 * 获取视频列表
+	 */
+	getVideos: (params?: VideosRequest) => apiClient.getVideos(params),

-export async function listVideos(params: {
-    collection?: string;
-    favorite?: string;
-    submission?: string;
-    watch_later?: string;
-    query?: string;
-    page?: number;
-    page_size?: number;
-}): Promise<VideosResponse> {
-    const searchParams = new URLSearchParams();
-    Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined) {
-            searchParams.append(key, value.toString());
-        }
-    });
-    return fetchWithAuth(`${BASE_URL}/videos?${searchParams.toString()}`);
-}
+	/**
+	 * 获取单个视频详情
+	 */
+	getVideo: (id: number) => apiClient.getVideo(id),

+	/**
+	 * 重置视频下载状态
+	 */
+	resetVideo: (id: number) => apiClient.resetVideo(id),

-export async function getVideo(id: number): Promise<VideoResponse> {
-    return fetchWithAuth(`${BASE_URL}/videos/${id}`);
-}
+	/**
+	 * 设置认证 token
+	 */
+	setAuthToken: (token: string) => apiClient.setAuthToken(token)
+};

-export async function resetVideo(id: number): Promise<ResetVideoResponse> {
-    return fetchWithAuth(`${BASE_URL}/videos/${id}/reset`, { method: 'POST' });
-}
+// 默认导出
+export default api;
--- a/web/src/lib/components/Header.svelte
+++ b/web/src/lib/components/Header.svelte
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { Input } from '$lib/components/ui/input';
-	let apiToken: string = localStorage.getItem('auth_token') || '';
-	function updateToken() {
-		localStorage.setItem('auth_token', apiToken);
-	}
-</script>
-
-<header class="flex items-center justify-between bg-gray-100 p-4">
-	<h1 class="text-xl font-bold">bili-sync 管理页</h1>
-	<div>
-		<Input type="password" placeholder="API Token" bind:value={apiToken} on:change={updateToken} />
-	</div>
-</header>
-
-<slot />
--- a/web/src/lib/components/VideoItem.svelte
+++ b/web/src/lib/components/VideoItem.svelte
@@ -1,119 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { Button } from '$lib/components/ui/button';
-	import { Badge } from '$lib/components/ui/badge';
-	import { getVideo, resetVideo } from '$lib/api';
-	import { toast } from 'svelte-sonner';
-	import type { VideoResponse, VideoInfo, ResetVideoResponse } from '$lib/types';
-
-	export let video: VideoInfo;
-	export let collapseSignal: boolean = false;
-
-	let showDetail = false;
-	let detail: VideoResponse | null = null;
-	let loading = false;
-
-	// 定义视频和页面各状态的名称映射
-	const videoStatusLabels = ['视频封面', '视频信息', 'Up 主头像', 'Up 主信息', '分 P 下载'];
-	const pageStatusLabels = ['视频封面', '视频内容', '视频信息', '视频弹幕', '视频字幕'];
-
-	let prevCollapseSignal = collapseSignal;
-	$: if (collapseSignal !== prevCollapseSignal) {
-		showDetail = false;
-		prevCollapseSignal = collapseSignal;
-	}
-
-	function getVariant(status: number): 'warning' | 'success' | 'destructive' {
-		if (status === 0) return 'warning';
-		if (status === 7) return 'success';
-		return 'destructive';
-	}
-
-	async function toggleDetail() {
-		showDetail = !showDetail;
-		if (showDetail && (!detail || detail.video.id !== video.id)) {
-			loading = true;
-			detail = await getVideo(video.id);
-			loading = false;
-		}
-	}
-
-	// 修改重置函数：调用 resetVideo 后重新获取视频详情
-	async function resetVideoItem() {
-		loading = true;
-		try {
-			const res: ResetVideoResponse = await resetVideo(video.id);
-			// 重置后重新加载视频详情，并更新视频信息
-			const newDetail = await getVideo(video.id);
-			detail = newDetail;
-			video = newDetail.video;
-			// 根据返回的 resetted 显示提示
-			if (res.resetted) {
-				toast.success('重置成功', {
-					description: `已重置视频与视频的 ${res.pages.length} 条 page.`
-				});
-			} else {
-				toast.info('重置无效', {
-					description: '所有任务均成功，无需重置'
-				});
-			}
-		} catch (error) {
-			console.error(error);
-			toast.error('重置失败', { description: `错误信息：${error}` });
-		}
-		loading = false;
-	}
-</script>
-
-<div class="my-2 rounded border p-4">
-	<div class="flex items-center justify-between">
-		<div>
-			<h3>{video.name}</h3>
-			<div class="flex space-x-1">
-				{#each video.download_status as status, i}
-					<Badge variant={getVariant(status)}>
-						{videoStatusLabels[i]}: {status === 0
-							? '未开始'
-							: status === 7
-								? '已完成'
-								: `失败 ${status} 次`}
-					</Badge>
-				{/each}
-			</div>
-			<p class="text-sm text-gray-500">{video.upper_name}</p>
-		</div>
-		<div class="flex space-x-2">
-			<Button onclick={toggleDetail}>
-				{showDetail ? '收起' : '展开'}
-			</Button>
-			<Button onclick={resetVideoItem}>重置</Button>
-		</div>
-	</div>
-	{#if showDetail}
-		{#if loading}
-			<p>加载详情...</p>
-		{:else if detail}
-			<div class="mt-2">
-				<h4 class="font-semibold">视频详情</h4>
-				<div>
-					{#each detail.pages as page}
-						<div class="border-t py-1">
-							<p>ID: {page.id} - 名称: {page.name}</p>
-							<div class="flex space-x-1">
-								{#each page.download_status as status, i}
-									<Badge variant={getVariant(status)}>
-										{pageStatusLabels[i]}: {status === 0
-											? '未开始'
-											: status === 7
-												? '已完成'
-												: `失败 ${status} 次`}
-									</Badge>
-								{/each}
-							</div>
-						</div>
-					{/each}
-				</div>
-			</div>
-		{/if}
-	{/if}
-</div>
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import SettingsIcon from '@lucide/svelte/icons/settings';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { useSidebar } from '$lib/components/ui/sidebar/context.svelte.js';
+	import { appStateStore, setVideoSourceFilter, clearAll, ToQuery } from '$lib/stores/filter';
+
+	import { type VideoSourcesResponse } from '$lib/types';
+	import { VIDEO_SOURCES } from '$lib/consts';
+	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
+	import { goto } from '$app/navigation';
+	import { videoSourceStore } from '$lib/stores/video-source';
+	const sidebar = useSidebar();
+
+	const items = Object.values(VIDEO_SOURCES);
+
+	function handleSourceClick(sourceType: string, sourceId: number) {
+		setVideoSourceFilter(sourceType, sourceId.toString());
+		goto(`/${ToQuery($appStateStore)}`);
+		if (sidebar.isMobile) {
+			sidebar.setOpenMobile(false);
+		}
+	}
+
+	function handleLogoClick() {
+		clearAll();
+		goto('/');
+
+		if (sidebar.isMobile) {
+			sidebar.setOpenMobile(false);
+		}
+	}
+</script>
+
+<Sidebar.Root class="border-border bg-background border-r">
+	<Sidebar.Header class="border-border flex h-[73px] items-center border-b">
+		<a
+			href="/"
+			class="flex w-full items-center gap-3 px-4 py-3 hover:cursor-pointer"
+			onclick={handleLogoClick}
+		>
+			<div class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg">
+				<img src="/favicon.png" alt="Bili Sync" class="h-6 w-6" />
+			</div>
+			<div class="grid flex-1 text-left text-sm leading-tight">
+				<span class="truncate font-semibold">Bili Sync</span>
+				<span class="text-muted-foreground truncate text-xs">视频管理系统</span>
+			</div>
+		</a>
+	</Sidebar.Header>
+	<Sidebar.Content class="flex flex-col px-2 py-3">
+		<div class="flex-1">
+			<Sidebar.Group>
+				<Sidebar.GroupLabel
+					class="text-muted-foreground mb-2 px-2 text-xs font-medium tracking-wider uppercase"
+				>
+					视频来源
+				</Sidebar.GroupLabel>
+				<Sidebar.GroupContent>
+					<Sidebar.Menu class="space-y-1">
+						{#each items as item (item.type)}
+							<Collapsible.Root class="group/collapsible">
+								<Sidebar.MenuItem>
+									<Collapsible.Trigger class="w-full">
+										{#snippet child({ props })}
+											<Sidebar.MenuButton
+												{...props}
+												class="hover:bg-accent/50 text-foreground flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2.5 font-medium transition-all duration-200"
+											>
+												<div class="flex flex-1 items-center gap-3">
+													<item.icon class="text-muted-foreground h-4 w-4" />
+													<span class="text-sm">{item.title}</span>
+												</div>
+												<ChevronRightIcon
+													class="text-muted-foreground h-3 w-3 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+												/>
+											</Sidebar.MenuButton>
+										{/snippet}
+									</Collapsible.Trigger>
+									<Collapsible.Content class="mt-1">
+										<div class="border-border ml-5 space-y-0.5 border-l pl-2">
+											{#if $videoSourceStore}
+												{#if $videoSourceStore[item.type as keyof VideoSourcesResponse]?.length > 0}
+													{#each $videoSourceStore[item.type as keyof VideoSourcesResponse] as source (source.id)}
+														<Sidebar.MenuItem>
+															<button
+																class="text-foreground hover:bg-accent/50 w-full cursor-pointer rounded-md px-3 py-2 text-left text-sm transition-all duration-200"
+																onclick={() => handleSourceClick(item.type, source.id)}
+															>
+																<span class="block truncate">{source.name}</span>
+															</button>
+														</Sidebar.MenuItem>
+													{/each}
+												{:else}
+													<div class="text-muted-foreground px-3 py-2 text-sm">无数据</div>
+												{/if}
+											{:else}
+												<div class="text-muted-foreground px-3 py-2 text-sm">加载中...</div>
+											{/if}
+										</div>
+									</Collapsible.Content>
+								</Sidebar.MenuItem>
+							</Collapsible.Root>
+						{/each}
+					</Sidebar.Menu>
+				</Sidebar.GroupContent>
+			</Sidebar.Group>
+		</div>
+
+		<!-- 固定在底部的设置选项 -->
+		<div class="border-border mt-auto border-t pt-4">
+			<Sidebar.Menu class="space-y-1">
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton>
+						<a
+							href="/settings"
+							class="hover:bg-accent/50 text-foreground flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2.5 font-medium transition-all duration-200"
+						>
+							<div class="flex flex-1 items-center gap-3">
+								<SettingsIcon class="text-muted-foreground h-4 w-4" />
+								<span class="text-sm">设置</span>
+							</div>
+						</a>
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
+			</Sidebar.Menu>
+		</div>
+	</Sidebar.Content>
+</Sidebar.Root>
--- a/web/src/lib/components/bread-crumb.svelte
+++ b/web/src/lib/components/bread-crumb.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+
+	export let items: Array<{
+		href?: string;
+		label: string;
+		isActive?: boolean;
+		onClick?: () => void;
+	}> = [{ href: '/', label: '主页' }];
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		{#each items as item, index (item.label)}
+			<Breadcrumb.Item>
+				{#if item.isActive || (!item.href && !item.onClick)}
+					<Breadcrumb.Page>{item.label}</Breadcrumb.Page>
+				{:else if item.onClick}
+					<button
+						class="hover:text-foreground cursor-pointer transition-colors"
+						onclick={item.onClick}
+					>
+						{item.label}
+					</button>
+				{:else}
+					<Breadcrumb.Link href={item.href}>{item.label}</Breadcrumb.Link>
+				{/if}
+			</Breadcrumb.Item>
+			{#if index < items.length - 1}
+				<Breadcrumb.Separator />
+			{/if}
+		{/each}
+	</Breadcrumb.List>
+</Breadcrumb.Root>
--- a/web/src/lib/components/filter-badge.svelte
+++ b/web/src/lib/components/filter-badge.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import XIcon from '@lucide/svelte/icons/x';
+
+	export let filterTitle: string = '';
+	export let filterName: string = '';
+	export let onRemove: () => void = () => {};
+</script>
+
+{#if filterTitle && filterName}
+	<div class="mb-4 flex items-center gap-2">
+		<span class="text-muted-foreground text-sm">当前筛选:</span>
+		<Badge variant="secondary" class="flex items-center gap-2 pr-1">
+			<span>{filterTitle}： {filterName}</span>
+			<button
+				class="hover:bg-muted-foreground/20 ml-1 cursor-pointer rounded-full p-0.5 transition-colors"
+				onclick={onRemove}
+				type="button"
+			>
+				<XIcon class="h-3 w-3" />
+			</button>
+		</Badge>
+	</div>
+{/if}
--- a/web/src/lib/components/pagination.svelte
+++ b/web/src/lib/components/pagination.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import ChevronsLeftIcon from '@lucide/svelte/icons/chevrons-left';
+	import ChevronsRightIcon from '@lucide/svelte/icons/chevrons-right';
+
+	export let currentPage: number = 0;
+	export let totalPages: number = 0;
+	export let onPageChange: (page: number) => void = () => {};
+
+	function goToPage(page: number) {
+		if (page >= 0 && page < totalPages && page !== currentPage) {
+			onPageChange(page);
+		}
+	}
+
+	function getVisiblePages(current: number, total: number): number[] {
+		const pages: number[] = [];
+		const maxVisible = 7; // 显示最多7个页码按钮
+
+		if (total <= maxVisible) {
+			// 如果总页数少于最大显示数，显示所有页
+			for (let i = 0; i < total; i++) {
+				pages.push(i);
+			}
+		} else {
+			// 计算显示范围
+			let start = Math.max(0, current - 3);
+			let end = Math.min(total - 1, start + maxVisible - 1);
+
+			// 如果end达到边界，调整start
+			if (end === total - 1) {
+				start = Math.max(0, end - maxVisible + 1);
+			}
+
+			for (let i = start; i <= end; i++) {
+				pages.push(i);
+			}
+		}
+
+		return pages;
+	}
+
+	$: visiblePages = getVisiblePages(currentPage, totalPages);
+	$: hasPrevious = currentPage > 0;
+	$: hasNext = currentPage < totalPages - 1;
+</script>
+
+{#if totalPages > 1}
+	<div class="mt-8 flex items-center justify-center gap-1">
+		<!-- 第一页 -->
+		<Button
+			variant="outline"
+			size="sm"
+			class="h-8 w-8 cursor-pointer p-0"
+			disabled={!hasPrevious}
+			onclick={() => goToPage(0)}
+		>
+			<ChevronsLeftIcon class="h-4 w-4" />
+		</Button>
+
+		<!-- 上一页 -->
+		<Button
+			variant="outline"
+			size="sm"
+			class="h-8 w-8 cursor-pointer p-0"
+			disabled={!hasPrevious}
+			onclick={() => goToPage(currentPage - 1)}
+		>
+			<ChevronLeftIcon class="h-4 w-4" />
+		</Button>
+
+		<!-- 页码按钮 -->
+		{#each visiblePages as page (page)}
+			<Button
+				variant={page === currentPage ? 'default' : 'outline'}
+				size="sm"
+				class="h-8 min-w-8 cursor-pointer"
+				onclick={() => goToPage(page)}
+			>
+				{page + 1}
+			</Button>
+		{/each}
+
+		<!-- 下一页 -->
+		<Button
+			variant="outline"
+			size="sm"
+			class="h-8 w-8 cursor-pointer p-0"
+			disabled={!hasNext}
+			onclick={() => goToPage(currentPage + 1)}
+		>
+			<ChevronRightIcon class="h-4 w-4" />
+		</Button>
+
+		<!-- 最后一页 -->
+		<Button
+			variant="outline"
+			size="sm"
+			class="h-8 w-8 cursor-pointer p-0"
+			disabled={!hasNext}
+			onclick={() => goToPage(totalPages - 1)}
+		>
+			<ChevronsRightIcon class="h-4 w-4" />
+		</Button>
+	</div>
+{/if}
--- a/web/src/lib/components/search-bar.svelte
+++ b/web/src/lib/components/search-bar.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import * as Input from '$lib/components/ui/input/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+
+	export let placeholder: string = '搜索视频..';
+	export let value: string = '';
+	export let onSearch: ((query: string) => void) | undefined = undefined;
+
+	function handleSearch() {
+		if (onSearch) {
+			onSearch(value);
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			handleSearch();
+		}
+	}
+</script>
+
+<div class="flex w-full items-center space-x-2">
+	<div class="relative flex-1">
+		<SearchIcon class="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+		<Input.Root type="text" {placeholder} bind:value onkeydown={handleKeydown} class="h-11 pl-10" />
+	</div>
+	<Button onclick={handleSearch} size="default" class="h-11 flex-shrink-0 cursor-pointer px-8"
+		>搜索</Button
+	>
+</div>
--- a/web/src/lib/components/ui/Badge.svelte
+++ b/web/src/lib/components/ui/Badge.svelte
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
--- a/web/src/lib/components/ui/Loading.svelte
+++ b/web/src/lib/components/ui/Loading.svelte
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: 'outline' }), className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={cn(
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn('text-muted-foreground text-sm', className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+		className
+	)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn('text-lg font-semibold', className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
--- a/web/src/lib/components/ui/alert-dialog/index.ts
+++ b/web/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,39 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+
+const Root = AlertDialogPrimitive.Root;
+const Portal = AlertDialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription
+};
--- a/web/src/lib/components/ui/badge/badge.svelte
+++ b/web/src/lib/components/ui/badge/badge.svelte
@@ -1,18 +1,49 @@
-<script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';

-	let className: string | undefined | null = undefined;
-	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
-	export { className as class };
+	export const badgeVariants = tv({
+		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+				secondary:
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+				destructive:
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
 </script>

 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
 	{href}
-	class={cn(badgeVariants({ variant, className }))}
-	{...$$restProps}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </svelte:element>
--- a/web/src/lib/components/ui/badge/index.ts
+++ b/web/src/lib/components/ui/badge/index.ts
@@ -1,23 +1,2 @@
-import { type VariantProps, tv } from "tailwind-variants";
-export { default as Badge } from "./badge.svelte";
-
-export const badgeVariants = tv({
-	base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
-			secondary:
-				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-			destructive:
-				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-			success: 'border-transparent bg-green-500 text-success-foreground',
-			warning: 'border-transparent bg-yellow-500 text-warning-foreground',
-			outline: "text-foreground",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
-});
-
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
+	role="presentation"
+	aria-hidden="true"
+	class={cn('flex size-9 items-center justify-center', className)}
+	{...restProps}
+>
+	<EllipsisIcon 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,20 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn('inline-flex items-center gap-1.5', className)}
+	{...restProps}
+>
+	{@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 { cn, type WithElementRef } 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({
+		'data-slot': 'breadcrumb-link',
+		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 { HTMLOlAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+	bind:this={ref}
+	data-slot="breadcrumb-list"
+	class={cn(
+		'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+		className
+	)}
+	{...restProps}
+>
+	{@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 { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-page"
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn('text-foreground font-normal', className)}
+	{...restProps}
+>
+	{@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,27 @@
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
+	role="presentation"
+	aria-hidden="true"
+	class={cn('[&>svg]:size-3.5', className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<ChevronRightIcon />
+	{/if}
+</li>
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	class={className}
+	aria-label="breadcrumb"
+	{...restProps}
+>
+	{@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
@@ -1,35 +1,36 @@
 <script lang="ts" module>
-	import type { WithElementRef } from "bits-ui";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';

 	export const buttonVariants = tv({
-		base: "ring-offset-background 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-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
 				outline:
-					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 hover:underline",
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
-			},
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
+			variant: 'default',
+			size: 'default'
+		}
 	});

-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];

 	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
 		WithElementRef<HTMLAnchorAttributes> & {
@@ -39,15 +40,14 @@
 </script>

 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-
 	let {
 		class: className,
-		variant = "default",
-		size = "default",
+		variant = 'default',
+		size = 'default',
 		ref = $bindable(null),
 		href = undefined,
-		type = "button",
+		type = 'button',
+		disabled,
 		children,
 		...restProps
 	}: ButtonProps = $props();
@@ -56,8 +56,12 @@
 {#if href}
 	<a
 		bind:this={ref}
+		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
-		{href}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
 		{...restProps}
 	>
 		{@render children?.()}
@@ -65,8 +69,10 @@
 {:else}
 	<button
 		bind:this={ref}
+		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
+		{disabled}
 		{...restProps}
 	>
 		{@render children?.()}
--- a/web/src/lib/components/ui/button/index.ts
+++ b/web/src/lib/components/ui/button/index.ts
@@ -2,8 +2,8 @@ import Root, {
 	type ButtonProps,
 	type ButtonSize,
 	type ButtonVariant,
-	buttonVariants,
-} from "./button.svelte";
+	buttonVariants
+} from './button.svelte';

 export {
 	Root,
@@ -13,5 +13,5 @@ export {
 	buttonVariants,
 	type ButtonProps,
 	type ButtonSize,
-	type ButtonVariant,
+	type ButtonVariant
 };
--- a/web/src/lib/components/ui/card/card-action.svelte
+++ b/web/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/card-content.svelte
+++ b/web/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
+	{@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,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn('text-muted-foreground text-sm', className)}
+	{...restProps}
+>
+	{@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,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+	{...restProps}
+>
+	{@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,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+		className
+	)}
+	{...restProps}
+>
+	{@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,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn('leading-none font-semibold', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/web/src/lib/components/ui/card/index.ts
+++ b/web/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+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';
+import Action from './card-action.svelte';
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction
+};
--- a/web/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/web/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
--- a/web/src/lib/components/ui/collapsible/collapsible-trigger.svelte
+++ b/web/src/lib/components/ui/collapsible/collapsible-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
--- a/web/src/lib/components/ui/collapsible/collapsible.svelte
+++ b/web/src/lib/components/ui/collapsible/collapsible.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref data-slot="collapsible" {...restProps} />
--- 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 = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};
--- a/web/src/lib/components/ui/input/index.ts
+++ b/web/src/lib/components/ui/input/index.ts
@@ -1,29 +1,7 @@
-import Root from "./input.svelte";
-
-export type FormInputEvent<T extends Event = Event> = T & {
-	currentTarget: EventTarget & HTMLInputElement;
-};
-export type InputEvents = {
-	blur: FormInputEvent<FocusEvent>;
-	change: FormInputEvent<Event>;
-	click: FormInputEvent<MouseEvent>;
-	focus: FormInputEvent<FocusEvent>;
-	focusin: FormInputEvent<FocusEvent>;
-	focusout: FormInputEvent<FocusEvent>;
-	keydown: FormInputEvent<KeyboardEvent>;
-	keypress: FormInputEvent<KeyboardEvent>;
-	keyup: FormInputEvent<KeyboardEvent>;
-	mouseover: FormInputEvent<MouseEvent>;
-	mouseenter: FormInputEvent<MouseEvent>;
-	mouseleave: FormInputEvent<MouseEvent>;
-	mousemove: FormInputEvent<MouseEvent>;
-	paste: FormInputEvent<ClipboardEvent>;
-	input: FormInputEvent<InputEvent>;
-	wheel: FormInputEvent<WheelEvent>;
-};
+import Root from './input.svelte';

 export {
 	Root,
 	//
-	Root as Input,
+	Root as Input
 };
--- a/web/src/lib/components/ui/input/input.svelte
+++ b/web/src/lib/components/ui/input/input.svelte
@@ -1,42 +1,51 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { InputEvents } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';

-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;

-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+	>;

-	// Workaround for https://github.com/sveltejs/svelte/issues/9305
-	// Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props();
 </script>

-<input
-	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	{readonly}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:paste
-	on:input
-	on:wheel|passive
-	{...$$restProps}
-/>
+{#if type === 'file'}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			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,20 @@
+<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
+	bind:ref
+	data-slot="label"
+	class={cn(
+		'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+/>
--- 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,20 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot="separator-root"
+	class={cn(
+		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+		className
+	)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/sheet/index.ts
+++ b/web/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,36 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+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 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-close.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
--- a/web/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,60 @@
+<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 flex flex-col gap-4 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 h-auto border-b',
+				bottom:
+					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto 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 } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'right',
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+		>
+			<XIcon 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,17 @@
+<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
+	bind:ref
+	data-slot="sheet-description"
+	class={cn('text-muted-foreground text-sm', className)}
+	{...restProps}
+/>
--- 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 { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	{...restProps}
+>
+	{@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 { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn('flex flex-col gap-1.5 p-4', className)}
+	{...restProps}
+>
+	{@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,22 @@
+<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();
+
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+		className
+	)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<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
+	bind:ref
+	data-slot="sheet-title"
+	class={cn('text-foreground font-semibold', className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/sheet/sheet-trigger.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
--- 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,79 @@
+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'];
+	#isMobile: IsMobile;
+	state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+
+	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 { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-content"
+	data-sidebar="content"
+	class={cn(
+		'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+		className
+	)}
+	{...restProps}
+>
+	{@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 { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn('flex flex-col gap-2 p-2', className)}
+	{...restProps}
+>
+	{@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, type WithElementRef } from '$lib/utils.js';
+	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 mergedProps = $derived({
+		class: cn(
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 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 md:after:hidden',
+			'group-data-[collapsible=icon]:hidden',
+			className
+		),
+		'data-slot': 'sidebar-group-action',
+		'data-sidebar': 'group-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-group-content.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn('w-full text-sm', className)}
+	{...restProps}
+>
+	{@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, type WithElementRef } from '$lib/utils.js';
+	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 outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] 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-slot': 'sidebar-group-label',
+		'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 { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group"
+	data-sidebar="group"
+	class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+	{...restProps}
+>
+	{@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 { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-header"
+	data-sidebar="header"
+	class={cn('flex flex-col gap-2 p-2', className)}
+	{...restProps}
+>
+	{@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,21 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	bind:value
+	data-slot="sidebar-input"
+	data-sidebar="input"
+	class={cn('bg-background h-8 w-full shadow-none', className)}
+	{...restProps}
+/>
--- 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, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+	bind:this={ref}
+	data-slot="sidebar-inset"
+	class={cn(
+		'bg-background relative flex w-full flex-1 flex-col',
+		'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+		className
+	)}
+	{...restProps}
+>
+	{@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, type WithElementRef } from '$lib/utils.js';
+	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 outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 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 md:after: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-slot': 'sidebar-menu-action',
+		'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, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-badge"
+	data-sidebar="menu-badge"
+	class={cn(
+		'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+		'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
+	)}
+	{...restProps}
+>
+	{@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,101 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const sidebarMenuButtonVariants = tv({
+		base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 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 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>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_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
+			},
+			size: {
+				default: 'h-8 text-sm',
+				sm: 'h-7 text-xs',
+				lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm'
+			}
+		},
+		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, type WithElementRef, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { mergeProps } 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 | string;
+		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-slot': 'sidebar-menu-button',
+		'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}
+			{...tooltipContentProps}
+		>
+			{#if typeof tooltipContent === 'string'}
+				{tooltipContent}
+			{:else if tooltipContent}
+				{@render tooltipContent()}
+			{/if}
+		</Tooltip.Content>
+	</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, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-item"
+	data-sidebar="menu-item"
+	class={cn('group/menu-item relative', className)}
+	{...restProps}
+>
+	{@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 { cn, type WithElementRef } from '$lib/utils.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	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
+	bind:this={ref}
+	data-slot="sidebar-menu-skeleton"
+	data-sidebar="menu-skeleton"
+	class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+	{...restProps}
+>
+	{#if showIcon}
+		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+	{/if}
+	<Skeleton
+		class="h-4 max-w-(--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, type WithElementRef } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		size = 'md',
+		isActive = false,
+		...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 outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 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-slot': 'sidebar-menu-sub-button',
+		'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,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-sub-item"
+	data-sidebar="menu-sub-item"
+	class={cn('group/menu-sub-item relative', className)}
+	{...restProps}
+>
+	{@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, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu-sub"
+	data-sidebar="menu-sub"
+	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
+	)}
+	{...restProps}
+>
+	{@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, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu"
+	data-sidebar="menu"
+	class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+	{...restProps}
+>
+	{@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,53 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	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
+		data-slot="sidebar-wrapper"
+		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+		class={cn(
+			'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@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, type WithElementRef } from '$lib/utils.js';
+	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
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabIndex={-1}
+	onclick={sidebar.toggle}
+	title="Toggle Sidebar"
+	class={cn(
+		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+		'hover:group-data-[collapsible=offcanvas]: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
+	)}
+	{...restProps}
+>
+	{@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,19 @@
+<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
+	bind:ref
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	class={cn('bg-sidebar-border mx-2 w-auto', className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/sidebar/sidebar-trigger.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	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
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon"
+	class={cn('size-7', className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<PanelLeftIcon />
+	<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,101 @@
+<script lang="ts">
+	import * as Sheet from '$lib/components/ui/sheet/index.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	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-(--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-slot="sidebar"
+			data-mobile="true"
+			class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>Sidebar</Sheet.Title>
+				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+			</Sheet.Header>
+			<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}
+		data-slot="sidebar"
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			data-slot="sidebar-gap"
+			class={cn(
+				'relative w-(--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)+(--spacing(4)))]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={cn(
+				'fixed inset-y-0 z-10 hidden h-svh w-(--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)+(--spacing(4))+2px)]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				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-sm"
+			>
+				{@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 { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn('bg-accent animate-pulse rounded-md', className)}
+	{...restProps}
+></div>
--- a/web/src/lib/components/ui/sonner/index.ts
+++ b/web/src/lib/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';
--- a/web/src/lib/components/ui/sonner/sonner.svelte
+++ b/web/src/lib/components/ui/sonner/sonner.svelte
@@ -1,20 +1,13 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';

-	type $$Props = SonnerProps;
+	let { ...restProps }: SonnerProps = $props();
 </script>

 <Sonner
-	theme={$mode}
+	theme={mode.current}
 	class="toaster group"
-	toastOptions={{
-		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
-	}}
-	{...$$restProps}
+	style="--normal-bg: var(--popover); --normal-text: var(--popover-foreground); --normal-border: var(--border);"
+	{...restProps}
 />
--- a/web/src/lib/components/ui/tabs/index.ts
+++ b/web/src/lib/components/ui/tabs/index.ts
@@ -1,9 +1,7 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
-
-const Root = TabsPrimitive.Root;
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';

 export {
 	Root,
@@ -14,5 +12,5 @@ export {
 	Root as Tabs,
 	Content as TabsContent,
 	List as TabsList,
-	Trigger as TabsTrigger,
+	Trigger as TabsTrigger
 };
--- a/web/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-content.svelte
@@ -1,21 +1,17 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

-	type $$Props = TabsPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
 </script>

 <TabsPrimitive.Content
-	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-		className
-	)}
-	{value}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.Content>
+	bind:ref
+	data-slot="tabs-content"
+	class={cn('flex-1 outline-none', className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-list.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

-	type $$Props = TabsPrimitive.ListProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>

 <TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
 		className
 	)}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.List>
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

-	type $$Props = TabsPrimitive.TriggerProps;
-	type $$Events = TabsPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
 </script>

 <TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
-	{value}
-	{...$$restProps}
-	on:click
->
-	<slot />
-</TabsPrimitive.Trigger>
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/tabs/tabs.svelte
+++ b/web/src/lib/components/ui/tabs/tabs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn('flex flex-col gap-2', className)}
+	{...restProps}
+/>
--- a/web/src/lib/components/ui/tooltip/index.ts
+++ b/web/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,21 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Provider = TooltipPrimitive.Provider;
+const Portal = TooltipPrimitive.Portal;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal
+};
--- a/web/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/web/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = 'top',
+		children,
+		arrowClasses,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+	} = $props();
+</script>
+
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		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 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:translate-y-[calc(50%_-_3px)]',
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>
--- a/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ b/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
--- a/Show More
+++ b/Show More