Initial commit

2026-02-15 07:21:44 +08:00 · 2026-01-28 20:44:34 +08:00
commit 500e8b74a7
236 changed files with 29886 additions and 0 deletions
--- a/webapp/.gitignore
+++ b/webapp/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/webapp/README.md
+++ b/webapp/README.md
@@ -0,0 +1,119 @@
+# 文件中转站前端
+
+一个基于 Vue 3 + TypeScript + Vite + Shadcn-Vue 构建的文件中转站前端应用。
+
+## 项目简介
+
+文件中转站是一个极简的文件暂存服务，用户可以像使用现实中的暂存柜一样，将文件、文本等内容临时存储在网站中，并获得一个取件码用于在其他设备上提取文件。
+
+## 主要功能
+
+### 用户功能
+- **文件上传**: 支持批量上传多种格式的文件
+- **文本分享**: 快速分享长文本内容
+- **取件码提取**: 使用取件码获取文件或文本
+- **过期策略**: 支持按时间或下载次数设置过期规则
+- **快捷操作**: 一键复制、打包下载等便捷功能
+
+### 管理功能
+- **批次管理**: 查看、编辑、删除文件批次
+- **API Token**: 创建和管理 API 访问凭证
+- **数据统计**: 系统运行状态和使用统计
+- **权限控制**: 管理员密码保护的后台系统
+
+## 技术栈
+
+- **框架**: Vue 3 + TypeScript
+- **构建工具**: Vite
+- **UI 组件**: Shadcn-Vue (基于 Tailwind CSS)
+- **路由**: Vue Router
+- **HTTP 客户端**: Axios
+- **状态管理**: 组合式 API
+- **代码规范**: ESLint + Prettier
+
+## 快速开始
+
+### 环境要求
+
+- Node.js 18+
+- npm 或 yarn 或 pnpm
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 开发环境
+
+```bash
+npm run dev
+```
+
+启动后访问 `http://localhost:5173`
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+### 预览构建结果
+
+```bash
+npm run preview
+```
+
+## 环境配置
+
+创建环境变量文件：
+
+### `.env` (通用配置)
+```env
+VITE_API_URL=http://localhost:8080
+VITE_APP_TITLE=文件中转站
+VITE_APP_DESCRIPTION=安全便捷的文件暂存服务
+```
+
+### `.env.development` (开发环境)
+```env
+VITE_API_URL=http://localhost:8080
+```
+
+### `.env.production` (生产环境)
+```env
+VITE_API_URL=/api
+```
+
+## 页面路由
+
+### 用户页面
+- `/` - 首页 (取件/存件切换)
+- `/upload` - 文件上传页面  
+- `/pickup` - 取件页面
+- `/pickup/:code` - 直接取件 (URL 包含取件码)
+
+### 管理页面 (隐藏入口)
+- `/admin/login` - 管理员登录
+- `/admin` - 管理概览
+- `/admin/batches` - 批次管理
+- `/admin/tokens` - API Token 管理
+
+## 功能特点
+
+### 用户体验
+- **极简设计**: 首页默认取件，一键切换存件模式
+- **智能识别**: 自动识别文件类型并显示对应图标
+- **快捷操作**: 支持剪贴板粘贴取件码、一键复制等
+- **进度反馈**: 上传进度显示和状态提示
+- **响应式设计**: 完美适配桌面和移动设备
+
+### 管理功能
+- **数据统计**: 实时显示系统运行数据
+- **批次管理**: 支持搜索、筛选、分页查看
+- **权限控制**: Token 可设置权限范围和过期时间
+- **操作日志**: 详细的操作记录和状态跟踪
+
+## 许可证
+
+MIT License
--- a/webapp/api/swagger.json
+++ b/webapp/api/swagger.json
--- a/webapp/components.json
+++ b/webapp/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}
--- a/webapp/doc/BUILD_OPTIMIZATION.md
+++ b/webapp/doc/BUILD_OPTIMIZATION.md
@@ -0,0 +1,67 @@
+# 生产构建优化说明
+
+## 已实现的优化
+
+### 1. 代码混淆和压缩
+- 使用 **Terser** 进行代码压缩和混淆
+- 移除所有 `console.log`、`console.info`、`console.debug` 语句
+- 移除 `debugger` 语句
+- 启用变量名混淆 (mangle)
+- 移除所有注释
+
+### 2. 文件合并
+- 禁用代码分割 (`inlineDynamicImports: true`)
+- 将所有 JavaScript 代码合并为 **单个 JS 文件**
+- 将所有 CSS 代码合并为 **单个 CSS 文件**
+
+### 3. 构建结果
+生产构建后只会生成以下文件：
+```
+dist/
+├── index.html                        (0.48 kB | gzip: 0.34 kB)
+├── assets/
+│   ├── css/
+│   │   └── style-[hash].css         (103.61 kB | gzip: 17.41 kB)
+│   └── js/
+│       └── index-[hash].js          (535.46 kB | gzip: 155.91 kB)
+```
+
+### 4. 其他优化
+- 禁用 Source Map（减小文件大小）
+- 禁用 CSS 代码分割
+- 设置 chunk 大小警告限制为 2MB
+- 启用 gzip 压缩大小报告
+
+## 构建命令
+
+```bash
+# 生产构建（代码混淆压缩）
+npm run build
+
+# 开发构建（不混淆，保留console）
+npm run build:dev
+
+# 预览构建结果
+npm run preview
+```
+
+## 部署优势
+
+1. **简化部署**：只需部署 3 个文件（index.html + 1个CSS + 1个JS）
+2. **减少请求**：单个JS文件，减少HTTP请求次数
+3. **代码保护**：代码混淆和压缩，增加逆向工程难度
+4. **性能优化**：gzip压缩后总体积约 173 KB
+
+## 注意事项
+
+- **首次加载时间**：单文件方案会增加首次加载时间，适合中小型应用
+- **缓存策略**：文件名包含hash，确保浏览器缓存更新
+- **兼容性**：代码已经过编译，兼容现代浏览器
+
+## 进一步优化建议
+
+如果需要更好的加载性能，可以考虑：
+1. 启用代码分割（移除 `inlineDynamicImports`）
+2. 按需加载路由组件
+3. 启用 CDN 加速
+4. 服务端启用 Brotli 压缩（比 gzip 更好）
--- a/webapp/doc/I18N_IMPLEMENTATION.md
+++ b/webapp/doc/I18N_IMPLEMENTATION.md
@@ -0,0 +1,237 @@
+# 国际化(i18n)实施总结
+
+## ✅ 已完成的工作
+
+### 1. 基础设施搭建
+- ✅ 安装 `vue-i18n@9` 依赖
+- ✅ 创建 i18n 配置文件 (`src/i18n/index.ts`)
+- ✅ 创建中文语言文件 (`src/i18n/locales/zh-CN.ts`)
+- ✅ 创建英文语言文件 (`src/i18n/locales/en-US.ts`)
+- ✅ 创建 i18n composable (`src/composables/useI18n.ts`)
+- ✅ 在 main.ts 中集成 i18n
+
+### 2. 已完成国际化的组件
+
+#### 用户端页面（100%完成）
+- ✅ **HomePage.vue** (取件页面) - 完全国际化
+  - 页面标题和描述
+  - 取件码输入提示和状态
+  - 批次信息显示（类型、下载次数、过期时间）
+  - 文件列表和文本内容
+  - 所有按钮和操作
+  - Toast 提示消息
+  - 错误消息处理
+  - 复制下载命令功能
+
+- ✅ **UploadPage.vue** (寄存页面) - 完全国际化
+  - 页面标题和描述
+  - 文件/文本标签页切换
+  - 文件拖拽上传区域
+  - 已选文件列表
+  - 文本输入区域
+  - 配置选项（按时间、按次数）
+  - 备注输入
+  - 上传按钮和进度显示
+  - 成功对话框（取件凭证）
+  - 所有Toast提示
+  - 错误消息处理
+
+- ✅ **NavBar.vue** (导航栏) - 完全国际化
+  - 站点标题和描述（带默认值）
+  - 取件/寄存切换按钮
+
+#### 管理后台页面（100%完成）
+- ✅ **AdminLogin.vue** (管理员登录) - 完全国际化
+  - 登录标题和描述
+  - 密码输入标签和占位符
+  - 登录按钮和加载状态
+  - 返回首页按钮
+  - 所有错误提示
+  - Toast消息
+
+- ✅ **AdminDashboard.vue** (管理概览) - 完全国际化
+  - 页面标题和描述
+  - 统计卡片（总批次数、活跃批次、已过期批次、总文件数）
+  - 最近批次标题和描述
+  - 表格列标题
+  - 类型和状态显示
+  - 查看全部按钮
+
+- ✅ **BatchManagement.vue** (批次管理) - 部分国际化
+  - 页面标题和按钮
+  - 筛选器标签和选项
+
+### 3. 语言文件结构（完整）
+
+#### 中文 (zh-CN.ts) - 包含500+翻译条目
+```typescript
+{
+  common: { /* 通用文本40+条 */ },
+  site: { /* 站点信息 */ },
+  nav: { /* 导航 */ },
+  pickup: { /* 取件功能25+条 */ },
+  upload: { /* 上传功能40+条 */ },
+  admin: { 
+    login: { /* 登录10+条 */ },
+    nav: { /* 管理导航 */ },
+    dashboard: { /* 概览15+条 */ },
+    batches: { /* 批次管理80+条 */ },
+    tokens: { /* 令牌管理30+条 */ },
+    config: { /* 系统配置20+条 */ }
+  }
+}
+```
+
+#### 英文 (en-US.ts)
+- 完整的英文翻译对应所有中文条目
+
+## 📊 完成度统计
+
+| 模块 | 状态 | 完成度 |
+|------|------|--------|
+| 基础设施 | ✅ 完成 | 100% |
+| 用户端页面 | ✅ 完成 | 100% |
+| 导航组件 | ✅ 完成 | 100% |
+| 管理登录 | ✅ 完成 | 100% |
+| 管理概览 | ✅ 完成 | 100% |
+| 批次管理 | ⚠️ 部分 | 60% |
+| 令牌管理 | ⏳ 待完成 | 0% |
+| 系统配置 | ⏳ 待完成 | 0% |
+| **总体进度** | **进行中** | **85%** |
+
+### 在 Vue 组件中使用
+
+```vue
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n'
+
+const { t, locale, setLocale } = useI18n()
+</script>
+
+<template>
+  <!-- 简单文本 -->
+  <h1>{{ t('pickup.title') }}</h1>
+  
+  <!-- 带参数的文本 -->
+  <p>{{ t('pickup.inputPlaceholder', { length: 6 }) }}</p>
+  
+  <!-- 带后备文本 -->
+  <span>{{ t('site.title', '文件中转站') }}</span>
+</template>
+```
+
+### 切换语言
+
+```typescript
+// 切换到英文
+setLocale('en-US')
+
+// 切换到中文
+setLocale('zh-CN')
+
+// 当前语言
+console.log(locale.value) // 'zh-CN' 或 'en-US'
+```
+
+### 在 TypeScript 中使用
+
+```typescript
+import { useI18n } from '@/composables/useI18n'
+
+const { t } = useI18n()
+
+// 在函数中使用
+function showMessage() {
+  toast.success(t('common.saveSuccess'))
+}
+```
+
+## 待完成的工作
+
+### 需要国际化的页面
+1. **UploadPage.vue** (寄存页面)
+   - 文件上传界面
+   - 文本输入界面
+   - 设置表单
+   - 上传成功提示
+
+2. **AdminLogin.vue** (管理员登录)
+   - 登录表单
+   - 错误提示
+
+3. **AdminDashboard.vue** (管理概览)
+   - 统计卡片
+   - 最近批次列表
+
+4. **BatchManagement.vue** (批次管理)
+   - 筛选器
+   - 批次列表
+   - 批次详情
+   - 编辑/删除对话框
+
+5. **TokenManagement.vue** (令牌管理)
+6. **ConfigManagement.vue** (系统配置)
+
+### 其他组件
+- AdminNavBar.vue
+- ThemeSwitcher.vue (如果需要语言选择器)
+
+## 语言文件扩展
+
+当需要添加新的翻译时：
+
+1. 在 `src/i18n/locales/zh-CN.ts` 添加中文
+2. 在 `src/i18n/locales/en-US.ts` 添加英文
+3. 使用 `t('key')` 在组件中调用
+
+## 最佳实践
+
+1. **命名规范**
+   - 使用点号分隔的层级结构
+   - 例如: `admin.batches.list.title`
+
+2. **参数化文本**
+   - 对于需要动态内容的文本，使用参数
+   - 例如: `t('pickup.inputPlaceholder', { length: 6 })`
+
+3. **后备文本**
+   - 对于配置项或可能缺失的翻译，提供后备文本
+   - 例如: `t('site.title', '默认标题')`
+
+4. **保持一致性**
+   - 相同含义的文本使用相同的 key
+   - 例如: 所有"保存"按钮都使用 `common.save`
+
+## 语言持久化
+
+- 用户选择的语言会保存在 localStorage
+- Key: `locale`
+- 下次访问时自动恢复
+
+## 添加新语言
+
+要添加新语言(如日语):
+
+1. 创建 `src/i18n/locales/ja-JP.ts`
+2. 在 `src/i18n/index.ts` 中导入并注册
+3. 添加语言切换选项到 UI
+
+```typescript
+// src/i18n/index.ts
+import jaJP from './locales/ja-JP'
+
+const i18n = createI18n({
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS,
+    'ja-JP': jaJP, // 新增
+  },
+})
+```
+
+## 注意事项
+
+1. i18n 已在全局注册，所有组件都可以直接使用
+2. 使用 Composition API 模式 (`legacy: false`)
+3. 默认语言为中文 (zh-CN)
+4. 回退语言也是中文
--- a/webapp/doc/config_specification.md
+++ b/webapp/doc/config_specification.md
@@ -0,0 +1,139 @@
+# FileRelay 配置项详细说明文档
+
+本文档整理了 FileRelay 系统 `config.yaml` 配置文件中各字段的含义、类型及示例，供前端配置页面开发参考。
+
+## 1. 站点设置 (site)
+用于定义前端展示的站点基本信息。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `name` | string | 站点名称，显示在网页标题和页头 | `文件暂存柜` |
+| `description` | string | 站点描述，显示在首页或元标签中 | `临时文件中转服务` |
+| `logo` | string | 站点 Logo 的 URL 地址 | `/logo.png` |
+| `base_url` | string | 站点外部访问地址。若配置则固定使用该地址拼接直链；若留空，系统将尝试从请求头（如 `X-Forwarded-Proto`, `:scheme`, `Forwarded` 等）或 `Referer` 中自动检测协议及主机名，以确保在 HTTPS 代理环境下链接正确。 | `https://file.example.com` |
+| `port` | int | 后端服务监听端口 | `8080` |
+
+## 2. 安全设置 (security)
+涉及系统鉴权、取件保护相关的核心安全配置。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `admin_password_hash` | string | 管理员密码的 bcrypt 哈希值。可以通过更新配置接口修改，修改后立即生效，且不再依赖数据库存储。 | `$2a$10$...` |
+| `pickup_code_length` | int | 自动生成的取件码长度。变更后系统将自动对存量取件码进行右侧补零或截取以适配新长度。 | `6` |
+| `pickup_fail_limit` | int | 单个 IP 对单个取件码尝试失败的最大次数，超过后将被临时封禁 | `5` |
+| `jwt_secret` | string | 用于签发管理端 JWT Token 的密钥，建议设置为复杂随机字符串 | `file-relay-secret` |
+
+## 3. 上传设置 (upload)
+控制文件上传的限制和策略。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `max_file_size_mb` | int64 | 单个文件的最大允许大小（单位：MB） | `100` |
+| `max_batch_files` | int | 一个取件批次中允许包含的最大文件数量 | `20` |
+| `max_retention_days` | int | 文件在服务器上的最长保留天数（针对 time 类型的过期策略） | `30` |
+| `require_token` | bool | 是否强制要求提供 API Token 才能进行上传操作 | `false` |
+
+## 4. 存储设置 (storage)
+定义文件的实际物理存储方式。系统支持多种存储后端。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `type` | string | 当前激活的存储类型。可选值：`local`, `webdav`, `s3` | `local` |
+
+### 4.1 本地存储 (local)
+当 `type` 为 `local` 时生效。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `path` | string | 文件存储在服务器本地的相对或绝对路径 | `storage_data` |
+
+### 4.2 WebDAV 存储 (webdav)
+当 `type` 为 `webdav` 时生效。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `url` | string | WebDAV 服务器的 API 地址 | `https://dav.example.com` |
+| `username` | string | WebDAV 登录用户名 | `user` |
+| `password` | string | WebDAV 登录密码 | `pass` |
+| `root` | string | WebDAV 上的基础存储根目录 | `/file-relay` |
+
+### 4.3 S3 存储 (s3)
+当 `type` 为 `s3` 时生效。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `endpoint` | string | S3 服务端点 | `s3.amazonaws.com` |
+| `region` | string | S3 区域 | `us-east-1` |
+| `access_key` | string | S3 Access Key | `your-access-key` |
+| `secret_key` | string | S3 Secret Key | `your-secret-key` |
+| `bucket` | string | S3 存储桶名称 | `file-relay-bucket` |
+| `use_ssl` | bool | 是否强制使用 SSL (HTTPS) 连接 | `false` |
+
+## 5. API Token 设置 (api_token)
+控制系统对外开放的 API Token 管理功能。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `enabled` | bool | 是否启用 API Token 功能模块 | `true` |
+| `allow_admin_api` | bool | 是否允许具备 `admin` 权限的 API Token 访问管理接口 | `true` |
+| `max_tokens` | int | 系统允许创建的 API Token 最大总数限制 | `20` |
+
+### 5.1 API Token 权限说明 (Scopes)
+在创建 API Token 时，可以通过 `scope` 字段赋予以下一种或多种权限（多个权限用逗号分隔，如 `upload,pickup`）：
+
+| 权限值 | 含义 | 说明 |
+| :--- | :--- | :--- |
+| `upload` | 上传权限 | 允许调用文件和长文本上传接口 |
+| `pickup` | 取件权限 | 允许获取批次详情、下载文件及查询下载次数 |
+| `admin` | 管理权限 | 允许访问管理端（Admin）所有接口。需开启 `allow_admin_api` 且 Token 功能已启用 |
+
+## 6. Web 前端设置 (web)
+定义前端静态资源的加载方式。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `path` | string | 外部前端资源目录路径。若该路径存在且包含 `index.html`，系统将优先使用此目录；否则回退使用内置前端资源。 | `web` |
+
+## 7. 数据库设置 (database)
+系统元数据存储配置。支持 SQLite, MySQL 和 PostgreSQL。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `type` | string | 数据库类型。可选值：`sqlite`, `mysql`, `postgres` | `sqlite` |
+| `path` | string | SQLite 数据库文件的路径 (仅在 `type` 为 `sqlite` 时生效) | `file_relay.db` |
+| `host` | string | 数据库地址 (MySQL/PostgreSQL) | `127.0.0.1` |
+| `port` | int | 数据库端口 (MySQL/PostgreSQL) | `3306` 或 `5432` |
+| `user` | string | 数据库用户名 (MySQL/PostgreSQL) | `root` |
+| `password` | string | 数据库密码 (MySQL/PostgreSQL) | `password` |
+| `dbname` | string | 数据库名称 (MySQL/PostgreSQL) | `file_relay` |
+| `config` | string | 额外 DSN 配置参数。MySQL 如 `charset=utf8mb4&parseTime=True&loc=Local`；PostgreSQL 如 `sslmode=disable` | `charset=utf8mb4&parseTime=True&loc=Local` |
+
+## 8. 日志设置 (log)
+控制系统日志的输出级别和目的地。
+
+| 字段名 | 类型 | 含义 | 示例 |
+| :--- | :--- | :--- | :--- |
+| `level` | string | 日志级别。可选值：`debug`, `info`, `warn`, `error` | `info` |
+| `file_path` | string | 日志文件路径。如果设置，日志将同时输出到控制台和该文件；若为空则仅输出到控制台。 | `logs/app.log` |
+
+---
+
+## 附录：公共配置接口 (/api/config)
+
+为了方便前端展示和交互约束，系统提供了 `/api/config` 接口，该接口不需要鉴权，返回以下非敏感字段（结构与完整配置保持一致）：
+
+- **site**: 完整内容（`name`, `description`, `logo`, `base_url`）
+- **security**: 仅包含 `pickup_code_length`
+- **upload**: 完整内容（`max_file_size_mb`, `max_batch_files`, `max_retention_days`, `require_token`）
+- **api_token**: 仅包含 `enabled` 开关
+- **storage**: 仅包含 `type`（存储类型）
+
+## 附录：其他关键接口
+
+### 查询下载次数 (GET /api/batches/:pickup_code/count)
+- **用途**：供前端实时刷新当前取件批次的下载次数。
+- **特性**：支持查询已过期的文件。
+
+### 恢复 API Token (POST /api/admin/api-tokens/:id/recover)
+- **权限**：需要管理员权限。
+- **用途**：将状态为“已撤销”的 Token 重新恢复为有效状态。
--- a/webapp/doc/i18n_guide.md
+++ b/webapp/doc/i18n_guide.md
@@ -0,0 +1,309 @@
+# 国际化 (i18n) 使用指南
+
+本文档说明如何在项目中新增语言支持和使用国际化功能。
+
+## 目录结构
+
+```
+src/
+├── i18n/
+│   ├── index.ts              # i18n 配置入口
+│   ├── languages.ts          # 语言配置文件（集中管理所有支持的语言）
+│   └── locales/              # 翻译文件目录
+│       ├── zh-CN.ts          # 简体中文翻译
+│       └── en-US.ts          # 英文翻译
+├── composables/
+│   └── useI18n.ts            # i18n Composable 封装
+└── components/
+    └── ui/
+        └── LanguageSwitcher.vue  # 语言切换组件
+```
+
+## 新增语言支持
+
+### 步骤 1: 添加语言配置
+
+编辑 `src/i18n/languages.ts`，在 `languages` 数组中添加新语言：
+
+```typescript
+export const languages: Language[] = [
+  {
+    code: 'zh-CN',
+    name: '简体中文',
+    flag: '🇨🇳',
+    englishName: 'Simplified Chinese',
+  },
+  {
+    code: 'en-US',
+    name: 'English',
+    flag: '🇺🇸',
+    englishName: 'English',
+  },
+  // 新增日语
+  {
+    code: 'ja-JP',
+    name: '日本語',
+    flag: '🇯🇵',
+    englishName: 'Japanese',
+  },
+]
+```
+
+**字段说明：**
+- `code`: 语言代码（BCP 47 标准），如 `ja-JP`、`zh-TW`、`fr-FR` 等
+- `name`: 用该语言自身的文字显示的名称（如日语用 "日本語"）
+- `flag`: 对应的旗帜 Emoji（可选，用于视觉识别）
+- `englishName`: 英文名称（可选，用于文档和调试）
+
+### 步骤 2: 创建翻译文件
+
+在 `src/i18n/locales/` 目录下创建新的翻译文件，如 `ja-JP.ts`：
+
+```typescript
+export default {
+  // 通用文本
+  common: {
+    submit: '送信',
+    cancel: 'キャンセル',
+    confirm: '確認',
+    // ... 其他翻译
+  },
+  
+  // 站点信息
+  site: {
+    title: 'ファイル中継ステーション',
+    description: '安全で便利なファイル一時保管サービス',
+    // ... 其他翻译
+  },
+  
+  // 导航栏
+  nav: {
+    pickup: '受取',
+    upload: 'アップロード',
+    // ... 其他翻译
+  },
+  
+  // 更多模块...
+}
+```
+
+**💡 提示：** 可以参考 `zh-CN.ts` 或 `en-US.ts` 的结构，确保所有 key 保持一致。
+
+### 步骤 3: 注册翻译文件
+
+编辑 `src/i18n/index.ts`，导入并注册新的翻译文件：
+
+```typescript
+import zhCN from './locales/zh-CN'
+import enUS from './locales/en-US'
+import jaJP from './locales/ja-JP'  // 导入新语言
+
+const messages = {
+  'zh-CN': zhCN,
+  'en-US': enUS,
+  'ja-JP': jaJP,  // 注册新语言
+}
+```
+
+### 步骤 4: 测试
+
+完成以上步骤后，语言切换器会自动显示新语言选项。切换语言后，检查所有页面的翻译是否正确显示。
+
+## 使用国际化
+
+### 在 Vue 组件中使用
+
+```vue
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n'
+
+const { t, locale, setLocale } = useI18n()
+</script>
+
+<template>
+  <div>
+    <!-- 使用翻译 -->
+    <h1>{{ t('site.title') }}</h1>
+    <p>{{ t('site.description') }}</p>
+    
+    <!-- 带默认值的翻译 -->
+    <button>{{ t('common.submit', '提交') }}</button>
+    
+    <!-- 显示当前语言 -->
+    <p>Current locale: {{ locale }}</p>
+    
+    <!-- 切换语言 -->
+    <button @click="setLocale('en-US')">Switch to English</button>
+  </div>
+</template>
+```
+
+### API 说明
+
+- `t(key: string, defaultValue?: string)`: 获取翻译文本
+  - `key`: 翻译的键名（如 `'common.submit'`）
+  - `defaultValue`: 可选的默认值（当翻译不存在时使用）
+  
+- `locale`: 当前激活的语言代码（响应式）
+
+- `setLocale(lang: string)`: 切换语言
+  - 自动保存到 localStorage
+  - 全局生效
+
+### 翻译 key 命名规范
+
+建议使用 **模块化** 的命名结构：
+
+```
+模块.子模块.具体项
+```
+
+示例：
+- `common.submit` - 通用模块的"提交"按钮
+- `nav.pickup` - 导航栏的"取件"链接
+- `admin.dashboard.title` - 管理后台仪表板标题
+- `upload.dragHint` - 上传页面的拖拽提示
+
+## 语言切换器
+
+项目包含一个独立的语言切换组件 `LanguageSwitcher.vue`，可以在任何页面中使用：
+
+```vue
+<template>
+  <LanguageSwitcher />
+</template>
+
+<script setup lang="ts">
+import LanguageSwitcher from '@/components/ui/LanguageSwitcher.vue'
+</script>
+```
+
+**已集成位置：**
+- 用户前台导航栏 (`NavBar.vue`) - 右上角
+- 管理后台导航栏 (`AdminNavBar.vue`) - 右上角
+
+语言切换器会自动：
+- 读取 `languages.ts` 中配置的所有语言
+- 显示当前激活的语言
+- 提供下拉菜单供用户切换
+- 保存用户的语言偏好到 localStorage
+
+## 常见的翻译 key
+
+以下是项目中常用的翻译 key，新增语言时需要提供对应翻译：
+
+### 通用 (common)
+- `submit`, `cancel`, `confirm`, `delete`, `edit`, `save`, `reset`
+- `loading`, `success`, `error`, `warning`
+- `yes`, `no`
+
+### 站点 (site)
+- `title`, `description`, `logo`
+
+### 导航 (nav)
+- `pickup`, `upload`, `home`
+
+### 管理后台 (admin)
+- `admin.nav.*` - 导航栏各项
+- `admin.dashboard.*` - 仪表板
+- `admin.batches.*` - 批次管理
+- `admin.tokens.*` - Token 管理
+- `admin.config.*` - 系统配置
+
+### 上传 (upload)
+- `upload.title`, `upload.selectFile`, `upload.dragHint`
+
+### 取件 (pickup)
+- `pickup.title`, `pickup.enterCode`, `pickup.download`
+
+## 最佳实践
+
+1. **保持 key 一致性**  
+   所有语言的翻译文件必须包含相同的 key 结构，否则会导致部分语言缺失翻译。
+
+2. **使用有意义的 key 名称**  
+   避免使用 `text1`、`label2` 这样的名称，应该使用描述性的名称如 `uploadButton`、`successMessage`。
+
+3. **提供默认值**  
+   在调用 `t()` 时提供默认值，可以在翻译缺失时有更好的用户体验：
+   ```vue
+   {{ t('some.key', '默认文本') }}
+   ```
+
+4. **模块化组织**  
+   按照功能模块组织翻译文件，便于维护：
+   ```typescript
+   export default {
+     common: { /* 通用翻译 */ },
+     nav: { /* 导航翻译 */ },
+     admin: {
+       dashboard: { /* 仪表板翻译 */ },
+       config: { /* 配置翻译 */ },
+     },
+   }
+   ```
+
+5. **注释复杂翻译**  
+   对于有特殊含义或上下文的翻译，添加注释说明：
+   ```typescript
+   export default {
+     upload: {
+       // 提示用户拖拽文件到上传区域
+       dragHint: '拖拽文件到此处，或点击选择文件',
+     },
+   }
+   ```
+
+6. **测试所有语言**  
+   新增或修改翻译后，切换到每种语言测试，确保显示正确。
+
+## 技术实现
+
+项目使用 [vue-i18n v9](https://vue-i18n.intlify.dev/) 作为国际化框架，采用 **Composition API** 模式。
+
+### 特性
+- ✅ 响应式语言切换
+- ✅ localStorage 持久化
+- ✅ TypeScript 类型支持
+- ✅ 模块化翻译文件
+- ✅ 集中式语言配置
+- ✅ 易于扩展新语言
+
+### 配置文件说明
+
+- **`src/i18n/index.ts`**  
+  vue-i18n 配置入口，设置默认语言、回退语言、翻译消息等。
+
+- **`src/i18n/languages.ts`**  
+  语言配置文件，集中管理所有支持的语言信息（代码、名称、旗帜等）。新增语言首先在此配置。
+
+- **`src/composables/useI18n.ts`**  
+  封装了 vue-i18n 的 Composable，提供简化的 API（`t`、`locale`、`setLocale`）。
+
+## 常见问题
+
+**Q: 新增语言后，语言切换器没有显示新语言？**  
+A: 检查 `src/i18n/languages.ts` 是否正确添加了语言配置，确保 `code`、`name` 和 `flag` 字段都已填写。
+
+**Q: 切换语言后，部分内容没有翻译？**  
+A: 检查新语言的翻译文件是否包含所有必需的 key。可以对比 `zh-CN.ts` 确保结构一致。
+
+**Q: 如何修改默认语言？**  
+A: 编辑 `src/i18n/languages.ts`，修改 `DEFAULT_LANGUAGE` 常量的值。
+
+**Q: 语言偏好保存在哪里？**  
+A: 保存在浏览器的 localStorage 中，key 为 `'locale'`。
+
+**Q: 如何在 JavaScript 代码中使用翻译？**  
+A: 在 `<script setup>` 中通过 `useI18n()` 获取 `t` 函数，然后调用 `t('key')`。
+
+## 参考资源
+
+- [Vue I18n 官方文档](https://vue-i18n.intlify.dev/)
+- [BCP 47 语言标签](https://www.rfc-editor.org/rfc/bcp/bcp47.txt)
+- [Unicode CLDR 语言数据](https://cldr.unicode.org/)
+- [Emoji 国旗列表](https://emojipedia.org/flags/)
+
+---
+
+**维护者注意：** 新增或修改语言配置后，请更新本文档。
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>文件中转站</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "file-relay-ui",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "文件中转站前端应用",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vue-tsc -b && vite build",
+    "build:prod": "vue-tsc -b && vite build --mode production",
+    "build:dev": "vue-tsc -b && vite build --mode development",
+    "preview": "vite preview --host",
+    "serve": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/vue-table": "^8.21.3",
+    "@vueuse/core": "^14.1.0",
+    "axios": "^1.13.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.562.0",
+    "reka-ui": "^2.7.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "vue": "^3.5.24",
+    "vue-i18n": "^9.14.5",
+    "vue-input-otp": "^0.3.2",
+    "vue-router": "^4.6.4",
+    "vue-sonner": "^2.0.9"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.8",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "terser": "^5.46.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^3.1.4"
+  }
+}
--- a/webapp/public/favicon.png
+++ b/webapp/public/favicon.png
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+  import 'vue-sonner/style.css'
+</script>
+
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+#app {
+  min-height: 100%;
+}
+
+/* 全局滚动条样式 - 默认隐藏，滚动时显示 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+*:hover {
+  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+}
+
+.dark *:hover {
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+/* Webkit 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+*:hover::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.3);
+}
+
+.dark *:hover::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.5);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.5) !important;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.7) !important;
+}
+</style>
--- a/webapp/src/assets/vue.svg
+++ b/webapp/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/webapp/src/components/ui/AdminNavBar.vue
+++ b/webapp/src/components/ui/AdminNavBar.vue
@@ -0,0 +1,216 @@
+<template>
+  <nav class="bg-white/75 dark:bg-gray-900/75 backdrop-blur-lg border-b border-gray-200 dark:border-gray-700 shadow-sm transition-colors">
+    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
+      <div class="flex justify-between h-14 sm:h-16">
+        <!-- 左侧 Logo 和菜单 -->
+        <div class="flex items-center min-w-0 flex-1">
+          <div class="flex-shrink-0 flex items-center space-x-1.5 sm:space-x-2">
+            <!-- Logo -->
+            <div v-if="config.site?.logo" class="w-7 h-7 sm:w-8 sm:h-8 rounded-lg overflow-hidden flex items-center justify-center flex-shrink-0">
+              <img :src="config.site.logo" :alt="config.site?.name || t('site.title')" class="w-full h-full object-contain" />
+            </div>
+            <div v-else class="w-7 h-7 sm:w-8 sm:h-8 bg-indigo-600 rounded-lg flex items-center justify-center flex-shrink-0">
+              <svg class="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+              </svg>
+            </div>
+            <!-- 站点名称和徽章 -->
+            <div class="flex items-center space-x-1.5 min-w-0">
+              <h1 class="hidden sm:block text-lg lg:text-xl font-bold text-gray-900 dark:text-gray-100 truncate">
+                {{ config.site?.name || t('site.title') }}
+              </h1>
+              <Badge variant="secondary" class="text-[10px] sm:text-xs px-1.5 py-0.5 flex-shrink-0">ADMIN</Badge>
+            </div>
+          </div>
+          
+          <!-- 桌面端导航菜单 -->
+          <div class="hidden lg:ml-6 lg:flex lg:space-x-4 xl:space-x-6 min-w-0">
+            <router-link
+              to="/admin"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium whitespace-nowrap"
+              :class="$route.path === '/admin' ? 'border-indigo-500 text-gray-900 dark:text-gray-100' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300'"
+            >
+              {{ t('admin.nav.overview') }}
+            </router-link>
+            <router-link
+              to="/admin/batches"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium whitespace-nowrap"
+              :class="$route.path.includes('/admin/batches') ? 'border-indigo-500 text-gray-900 dark:text-gray-100' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300'"
+            >
+              {{ t('admin.nav.fileManagement') }}
+            </router-link>
+            <router-link
+              to="/admin/tokens"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium whitespace-nowrap"
+              :class="$route.path.includes('/admin/tokens') ? 'border-indigo-500 text-gray-900 dark:text-gray-100' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300'"
+            >
+              {{ t('admin.nav.apiManagement') }}
+            </router-link>
+            <router-link
+              to="/admin/config"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium whitespace-nowrap"
+              :class="$route.path.includes('/admin/config') ? 'border-indigo-500 text-gray-900 dark:text-gray-100' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300'"
+            >
+              {{ t('admin.nav.systemConfig') }}
+            </router-link>
+          </div>
+        </div>
+        
+        <!-- 右侧操作按钮 -->
+        <div class="flex items-center space-x-0.5 sm:space-x-1 flex-shrink-0">
+          <!-- 主题切换 -->
+          <ThemeSwitcher class="flex-shrink-0" />
+          
+          <!-- 语言切换 -->
+          <LanguageSwitcher class="flex-shrink-0" />
+          
+          <!-- 移动端菜单按钮 -->
+          <Button 
+            variant="ghost" 
+            @click="showMobileMenu = !showMobileMenu" 
+            class="lg:hidden flex-shrink-0" 
+            size="sm"
+            :aria-label="t('admin.nav.toggleMenu')"
+          >
+            <svg 
+              class="w-5 h-5 transition-transform duration-200" 
+              :class="{ 'rotate-90': showMobileMenu }"
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path 
+                v-if="!showMobileMenu"
+                stroke-linecap="round" 
+                stroke-linejoin="round" 
+                stroke-width="2" 
+                d="M4 6h16M4 12h16M4 18h16"
+              ></path>
+              <path 
+                v-else
+                stroke-linecap="round" 
+                stroke-linejoin="round" 
+                stroke-width="2" 
+                d="M6 18L18 6M6 6l12 12"
+              ></path>
+            </svg>
+          </Button>
+          
+          <!-- 桌面端操作按钮 -->
+          <div class="hidden lg:flex lg:items-center lg:space-x-1">
+            <Button variant="outline" @click="router.push('/')" size="sm" class="flex-shrink-0">
+              <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-1a1 1 0 011-1h2a1 1 0 011 1v1a1 1 0 001 1m-6 0h6"></path>
+              </svg>
+              <span class="text-sm">{{ t('admin.nav.goToFront') }}</span>
+            </Button>
+            <Button variant="destructive" @click="handleLogout" size="sm" class="flex-shrink-0">
+              <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+              </svg>
+              <span class="text-sm">{{ t('admin.nav.logout') }}</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 移动端菜单 -->
+      <transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0 -translate-y-1"
+        enter-to-class="opacity-100 translate-y-0"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100 translate-y-0"
+        leave-to-class="opacity-0 -translate-y-1"
+      >
+        <div class="lg:hidden" v-if="showMobileMenu">
+          <div class="pt-2 pb-3 space-y-1 bg-gray-50/50 dark:bg-gray-800/50 backdrop-blur-sm">
+            <router-link
+              to="/admin"
+              class="flex items-center pl-3 pr-4 py-2.5 text-sm sm:text-base font-medium border-l-4 transition-all"
+              :class="$route.path === '/admin' ? 'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-700 dark:text-indigo-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-800 dark:hover:text-gray-200'"
+              @click="showMobileMenu = false"
+            >
+              <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+              </svg>
+              <span class="truncate">{{ t('admin.nav.overview') }}</span>
+            </router-link>
+            <router-link
+              to="/admin/batches"
+              class="flex items-center pl-3 pr-4 py-2.5 text-sm sm:text-base font-medium border-l-4 transition-all"
+              :class="$route.path.includes('/admin/batches') ? 'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-700 dark:text-indigo-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-800 dark:hover:text-gray-200'"
+              @click="showMobileMenu = false"
+            >
+              <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+              <span class="truncate">{{ t('admin.nav.fileManagement') }}</span>
+            </router-link>
+            <router-link
+              to="/admin/tokens"
+              class="flex items-center pl-3 pr-4 py-2.5 text-sm sm:text-base font-medium border-l-4 transition-all"
+              :class="$route.path.includes('/admin/tokens') ? 'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-700 dark:text-indigo-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-800 dark:hover:text-gray-200'"
+              @click="showMobileMenu = false"
+            >
+              <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+              </svg>
+              <span class="truncate">{{ t('admin.nav.apiManagement') }}</span>
+            </router-link>
+            <router-link
+              to="/admin/config"
+              class="flex items-center pl-3 pr-4 py-2.5 text-sm sm:text-base font-medium border-l-4 transition-all"
+              :class="$route.path.includes('/admin/config') ? 'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-700 dark:text-indigo-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-800 dark:hover:text-gray-200'"
+              @click="showMobileMenu = false"
+            >
+              <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+              </svg>
+              <span class="truncate">{{ t('admin.nav.systemConfig') }}</span>
+            </router-link>
+            
+            <!-- 移动端快捷操作按钮 -->
+            <div class="pt-2 pb-2 px-3 space-y-2">
+              <Button variant="outline" @click="router.push('/'); showMobileMenu = false" class="w-full justify-start" size="sm">
+                <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-1a1 1 0 011-1h2a1 1 0 011 1v1a1 1 0 001 1m-6 0h6"></path>
+                </svg>
+                <span class="truncate">{{ t('admin.nav.goToFront') }}</span>
+              </Button>
+              <Button variant="destructive" @click="handleLogout" class="w-full justify-start" size="sm">
+                <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                </svg>
+                <span class="truncate">{{ t('admin.nav.logout') }}</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { usePublicConfig } from '@/composables/usePublicConfig'
+import ThemeSwitcher from '@/components/ui/ThemeSwitcher.vue'
+import LanguageSwitcher from '@/components/ui/LanguageSwitcher.vue'
+import { useI18n } from '@/composables/useI18n'
+
+const router = useRouter()
+const showMobileMenu = ref(false)
+const { config } = usePublicConfig()
+const { t } = useI18n()
+
+const handleLogout = () => {
+  localStorage.removeItem('admin_token')
+  router.push('/admin/login')
+}
+</script>
--- a/webapp/src/components/ui/LanguageSwitcher.vue
+++ b/webapp/src/components/ui/LanguageSwitcher.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="relative z-50">
+    <button
+      @click="toggleDropdown"
+      class="flex items-center space-x-1 px-2 py-1.5 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors flex-shrink-0"
+      :title="t('language.switch', '切换语言')"
+    >
+      <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
+      </svg>
+      <span class="text-sm font-medium hidden sm:inline">{{ currentLanguageName }}</span>
+      <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+      </svg>
+    </button>
+
+    <!-- 下拉菜单 - 使用最高的 z-index 确保不被任何元素覆盖 -->
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1"
+        style="z-index: 99999;"
+        @click="isOpen = false"
+      >
+        <button
+          v-for="lang in languages"
+          :key="lang.code"
+          @click="switchLanguage(lang.code)"
+          class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center justify-between"
+          :class="{
+            'text-blue-600 dark:text-blue-400 font-medium': locale === lang.code,
+            'text-gray-700 dark:text-gray-300': locale !== lang.code
+          }"
+        >
+          <span class="flex items-center">
+            <span class="mr-2">{{ lang.flag }}</span>
+            <span>{{ lang.name }}</span>
+          </span>
+          <svg
+            v-if="locale === lang.code"
+            class="w-4 h-4"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from '@/composables/useI18n'
+import { languages, getLanguageName } from '@/i18n/languages'
+
+const { locale, setLocale, t } = useI18n()
+const isOpen = ref(false)
+
+const currentLanguageName = computed(() => {
+  return getLanguageName(locale.value)
+})
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+}
+
+const switchLanguage = (langCode: string) => {
+  setLocale(langCode)
+  isOpen.value = false
+}
+
+// 点击外部关闭下拉菜单
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (isOpen.value && !target.closest('.relative')) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+/* 确保下拉菜单在其他元素之上 */
+.z-50 {
+  z-index: 50;
+}
+</style>
--- a/webapp/src/components/ui/NavBar.vue
+++ b/webapp/src/components/ui/NavBar.vue
@@ -0,0 +1,167 @@
+<template>
+  <nav class="bg-white/75 dark:bg-gray-900/75 backdrop-blur-lg border-b border-gray-200 dark:border-gray-700 transition-colors">
+    <div class="container mx-auto px-3 sm:px-4">
+      <div class="flex justify-between items-center h-16">
+        <!-- 左侧：站点信息 -->
+        <div class="flex items-center space-x-2 sm:space-x-4">
+          <a href="/" class="flex items-center space-x-2 sm:space-x-3">
+            <!-- Logo -->
+            <div v-if="config.site?.logo" class="w-8 h-8 sm:w-9 sm:h-9 rounded-lg overflow-hidden flex items-center justify-center flex-shrink-0">
+              <img :src="config.site.logo" :alt="config.site?.name || t('site.title', '文件中转站')" class="w-full h-full object-contain" />
+            </div>
+            <div v-else class="w-8 h-8 sm:w-9 sm:h-9 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
+              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+            </div>
+            <!-- 移动端隐藏文字，只保留图标 -->
+            <div class="hidden sm:block">
+              <h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ config.site?.name || t('site.title', '文件中转站') }}</h1>
+              <p v-if="showDescription" class="text-xs text-gray-500 dark:text-gray-400">{{ config.site?.description || t('site.description', '安全、便捷的文件暂存服务') }}</p>
+            </div>
+          </a>
+        </div>
+
+        <!-- 右侧：导航链接 -->
+        <div class="flex items-center space-x-1 sm:space-x-2">
+          <!-- 主题切换 - 放在最左侧 -->
+          <ThemeSwitcher />
+          
+          <!-- 取件/发送切换按钮组 -->
+          <div ref="buttonGroup" class="relative inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-800 p-0.5 transition-colors">
+            <!-- 滑动指示器 -->
+            <div 
+              :class="[
+                'absolute inset-y-0.5 bg-white dark:bg-gray-700 rounded-full shadow-sm',
+                isInitialized && 'transition-all duration-300 ease-in-out'
+              ]"
+              :style="{ 
+                left: indicatorPosition,
+                width: indicatorWidth
+              }"
+            ></div>
+            
+            <button @click="switchTab('pickup')" ref="pickupButton">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                class="relative z-10 h-7 px-2 sm:px-4 rounded-full hover:bg-transparent"
+              >
+                <svg class="w-4 h-4 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5l4-4 4 4"></path>
+                </svg>
+                <span class="hidden sm:inline">{{ t('nav.pickup') }}</span>
+              </Button>
+            </button>
+            
+            <button @click="switchTab('upload')" ref="uploadButton">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                class="relative z-10 h-7 px-2 sm:px-4 rounded-full hover:bg-transparent"
+              >
+                <svg class="w-4 h-4 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                </svg>
+                <span class="hidden sm:inline">{{ t('nav.upload') }}</span>
+              </Button>
+            </button>
+          </div>
+          
+          <!-- 语言切换 - 放在最右侧 -->
+          <LanguageSwitcher />
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue'
+import { usePublicConfig } from '@/composables/usePublicConfig'
+import { useI18n } from '@/composables/useI18n'
+import { Button } from '@/components/ui/button'
+import ThemeSwitcher from '@/components/ui/ThemeSwitcher.vue'
+import LanguageSwitcher from '@/components/ui/LanguageSwitcher.vue'
+
+const props = defineProps<{
+  showDescription?: boolean
+  activeTab?: 'pickup' | 'upload'
+}>()
+
+const emit = defineEmits<{
+  'update:activeTab': [value: 'pickup' | 'upload']
+}>()
+
+const { config } = usePublicConfig()
+const { t, locale } = useI18n()
+
+// 用于动态计算按钮位置和宽度
+const buttonGroup = ref<HTMLElement | null>(null)
+const pickupButton = ref<HTMLElement | null>(null)
+const uploadButton = ref<HTMLElement | null>(null)
+const indicatorWidth = ref('0px')
+const indicatorPosition = ref('0px')
+const isInitialized = ref(false)
+
+// 切换标签页
+const switchTab = (tab: 'pickup' | 'upload') => {
+  emit('update:activeTab', tab)
+}
+
+// 更新指示器位置和宽度
+const updateIndicator = async () => {
+  // 等待 DOM 更新完成
+  await nextTick()
+  
+  if (!buttonGroup.value || !pickupButton.value || !uploadButton.value) return
+  
+  const containerRect = buttonGroup.value.getBoundingClientRect()
+  let activeButton: HTMLElement | null = null
+  
+  if (props.activeTab === 'pickup') {
+    activeButton = pickupButton.value
+  } else if (props.activeTab === 'upload') {
+    activeButton = uploadButton.value
+  }
+  
+  if (activeButton) {
+    const buttonRect = activeButton.getBoundingClientRect()
+    indicatorWidth.value = `${buttonRect.width}px`
+    indicatorPosition.value = `${buttonRect.left - containerRect.left}px`
+  }
+}
+
+// 监听 activeTab 变化
+watch(() => props.activeTab, async () => {
+  await updateIndicator()
+})
+
+// 监听语言变化，重新计算指示器宽度
+watch(locale, async () => {
+  // 等待翻译更新后再计算指示器
+  await nextTick()
+  await updateIndicator()
+})
+
+// 在组件挂载后初始化
+onMounted(async () => {
+  // 先设置位置，不显示动画
+  await updateIndicator()
+  // 使用 requestAnimationFrame 确保位置已经应用到 DOM
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      // 启用动画效果
+      isInitialized.value = true
+    })
+  })
+  // 监听窗口大小变化，重新计算位置
+  window.addEventListener('resize', updateIndicator)
+})
+
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+  window.removeEventListener('resize', updateIndicator)
+})
+</script>
--- a/webapp/src/components/ui/ThemeSwitcher.vue
+++ b/webapp/src/components/ui/ThemeSwitcher.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useDarkMode, type ThemeMode } from '@/composables/useDarkMode'
+
+const { themeMode, setTheme } = useDarkMode()
+const isExpanded = ref(false)
+const isMobile = ref(false)
+
+// 检测是否为移动端
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 768 || ('ontouchstart' in window)
+}
+
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
+
+// 获取当前主题的图标
+const currentIcon = computed(() => {
+  switch (themeMode.value) {
+    case 'light':
+      return {
+        svg: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>',
+        color: 'text-amber-500',
+        index: 0
+      }
+    case 'system':
+      return {
+        svg: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>',
+        color: 'text-blue-500 dark:text-blue-400',
+        index: 1
+      }
+    case 'dark':
+      return {
+        svg: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>',
+        color: 'text-indigo-500 dark:text-indigo-400',
+        index: 2
+      }
+  }
+})
+
+// 计算指示器位置（展开时）
+const indicatorPosition = computed(() => {
+  if (themeMode.value === 'light') return '0.0625rem'
+  if (themeMode.value === 'system') return '1.75rem'
+  return '3.4375rem'
+})
+
+// 计算容器偏移（收起时让当前按钮居中显示）
+const containerOffset = computed(() => {
+  if (isExpanded.value) return '0px'
+  // 收起时根据当前主题位置调整偏移
+  const index = currentIcon.value.index
+  return `${-index * 28}px` // 28px = w-7 = 1.75rem
+})
+
+// 循环切换主题（移动端）
+const cycleTheme = () => {
+  const modes: ThemeMode[] = ['light', 'system', 'dark']
+  const currentIndex = modes.indexOf(themeMode.value)
+  const nextIndex = (currentIndex + 1) % modes.length
+  setTheme(modes[nextIndex] as ThemeMode)
+}
+
+// 处理鼠标进入（仅桌面端）
+const handleMouseEnter = () => {
+  if (!isMobile.value) {
+    isExpanded.value = true
+  }
+}
+
+// 处理鼠标离开（仅桌面端）
+const handleMouseLeave = () => {
+  if (!isMobile.value) {
+    isExpanded.value = false
+  }
+}
+
+// 处理点击
+const handleClick = () => {
+  if (isMobile.value) {
+    cycleTheme()
+  }
+}
+
+// 处理按钮点击
+const handleButtonClick = (mode: ThemeMode, event: Event) => {
+  if (isMobile.value) {
+    // 移动端让事件冒泡到外层处理
+    return
+  }
+  // 桌面端阻止冒泡并切换到指定主题
+  event.stopPropagation()
+  setTheme(mode)
+}
+</script>
+
+<template>
+  <div 
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+    class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 transition-all duration-300 ease-in-out cursor-pointer"
+    :style="{ width: isExpanded ? '5.5rem' : '2rem', padding: '0.125rem' }"
+  >
+    <!-- 容器，用于横向滑动显示当前按钮 -->
+    <div 
+      class="relative flex items-center transition-transform duration-300 ease-in-out"
+      :style="{ transform: `translateX(${containerOffset})` }"
+    >
+      <!-- 滑动指示器（仅展开时显示） -->
+      <div 
+        v-show="isExpanded"
+        class="absolute top-0 bottom-0 w-7 bg-white dark:bg-gray-600 rounded-full shadow-sm transition-all duration-300 ease-in-out"
+        :style="{ left: indicatorPosition }"
+      ></div>
+      
+      <!-- 浅色模式按钮 -->
+      <button
+        @click="(e) => handleButtonClick('light', e)"
+        :class="[
+          'relative z-10 flex items-center justify-center w-7 h-7 rounded-full transition-all duration-200 flex-shrink-0',
+          themeMode === 'light' ? 'text-amber-500' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+        ]"
+        :title="isExpanded ? '浅色模式' : ''"
+        type="button"
+      >
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="4"/>
+          <path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+        </svg>
+      </button>
+      
+      <!-- 自动模式按钮 -->
+      <button
+        @click="(e) => handleButtonClick('system', e)"
+        :class="[
+          'relative z-10 flex items-center justify-center w-7 h-7 rounded-full transition-all duration-200 flex-shrink-0',
+          themeMode === 'system' ? 'text-blue-500 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+        ]"
+        :title="isExpanded ? '跟随系统' : ''"
+        type="button"
+      >
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <rect x="2" y="3" width="20" height="14" rx="2"/>
+          <path d="M8 21h8M12 17v4"/>
+        </svg>
+      </button>
+      
+      <!-- 深色模式按钮 -->
+      <button
+        @click="(e) => handleButtonClick('dark', e)"
+        :class="[
+          'relative z-10 flex items-center justify-center w-7 h-7 rounded-full transition-all duration-200 flex-shrink-0',
+          themeMode === 'dark' ? 'text-indigo-500 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+        ]"
+        :title="isExpanded ? '深色模式' : ''"
+        type="button"
+      >
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
--- a/webapp/src/components/ui/ThemeToggle.vue
+++ b/webapp/src/components/ui/ThemeToggle.vue
@@ -0,0 +1,44 @@
+<template>
+  <Button variant="ghost" @click="cycleTheme" size="sm" class="w-9 h-9 p-0" :title="themeTitle">
+    <!-- Light Mode Icon -->
+    <svg v-if="themeMode === 'light'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+    </svg>
+    <!-- Dark Mode Icon -->
+    <svg v-else-if="themeMode === 'dark'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+    </svg>
+    <!-- System Mode Icon - 半太阳半月亮融合图标 -->
+    <svg v-else class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+      <!-- 左半边：太阳光线 -->
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1M12 20v1M5.5 5.5l.7.7M17.8 17.8l.7.7"/>
+      <!-- 中间圆形 - 左半边太阳（填充） -->
+      <path d="M12 8 A4 4 0 0 1 12 16 Z" fill="currentColor" stroke="none"/>
+      <!-- 中间圆形 - 右半边月亮（描边） -->
+      <path d="M12 8 A4 4 0 0 0 12 16" stroke-width="2" stroke-linecap="round"/>
+      <!-- 右半边：月亮装饰线 -->
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 5.5l-.7.7M6.2 17.8l-.7.7"/>
+    </svg>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Button } from '@/components/ui/button'
+import { useDarkMode } from '@/composables/useDarkMode'
+
+const { themeMode, cycleTheme } = useDarkMode()
+
+const themeTitle = computed(() => {
+  switch (themeMode.value) {
+    case 'light':
+      return '当前：明亮模式，点击切换'
+    case 'dark':
+      return '当前：暗黑模式，点击切换'
+    case 'system':
+      return '当前：跟随系统，点击切换'
+    default:
+      return '切换主题'
+  }
+})
+</script>
--- a/webapp/src/components/ui/alert-dialog/AlertDialog.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogFooter.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-footer"
+    :class="
+      cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
--- a/webapp/src/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/webapp/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
--- a/webapp/src/components/ui/alert-dialog/index.ts
+++ b/webapp/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
--- a/webapp/src/components/ui/avatar/Avatar.vue
+++ b/webapp/src/components/ui/avatar/Avatar.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
+</template>
--- a/webapp/src/components/ui/avatar/AvatarFallback.vue
+++ b/webapp/src/components/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>
--- a/webapp/src/components/ui/avatar/AvatarImage.vue
+++ b/webapp/src/components/ui/avatar/AvatarImage.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
+</template>
--- a/webapp/src/components/ui/avatar/index.ts
+++ b/webapp/src/components/ui/avatar/index.ts
@@ -0,0 +1,3 @@
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"
--- a/webapp/src/components/ui/badge/Badge.vue
+++ b/webapp/src/components/ui/badge/Badge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/webapp/src/components/ui/badge/index.ts
+++ b/webapp/src/components/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none 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 transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>
--- a/webapp/src/components/ui/button/Button.vue
+++ b/webapp/src/components/ui/button/Button.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/webapp/src/components/ui/button/index.ts
+++ b/webapp/src/components/ui/button/index.ts
@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground 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-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
--- a/webapp/src/components/ui/calendar/Calendar.vue
+++ b/webapp/src/components/ui/calendar/Calendar.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui"
+import type { HTMLAttributes, Ref } from "vue"
+import type { LayoutTypes } from "."
+import { getLocalTimeZone, today } from "@internationalized/date"
+import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui"
+import { createYear, createYearRange, toDate } from "reka-ui/date"
+import { computed, toRaw } from "vue"
+import { cn } from "@/lib/utils"
+import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+
+const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
+  modelValue: undefined,
+  layout: undefined,
+})
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder")
+
+const placeholder = useVModel(props, "placeholder", emits, {
+  passive: true,
+  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>
+
+const formatter = useDateFormatter(props.locale ?? "en")
+
+const yearRange = computed(() => {
+  return props.yearRange ?? createYearRange({
+    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
+      .cycle("year", -100),
+
+    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
+      .cycle("year", 10),
+  })
+})
+
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DefineMonthTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { month: 'short' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="(e: Event) => {
+            placeholder = placeholder.set({
+              month: Number((e?.target as any)?.value),
+            })
+          }"
+        >
+          <NativeSelectOption v-for="(month) in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
+            {{ formatter.custom(toDate(month), { month: 'short' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineMonthTemplate>
+
+  <DefineYearTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="(e: Event) => {
+            placeholder = placeholder.set({
+              year: Number((e?.target as any)?.value),
+            })
+          }"
+        >
+          <NativeSelectOption v-for="(year) in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
+            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineYearTemplate>
+
+  <CalendarRoot
+    v-slot="{ grid, weekDays, date }"
+    v-bind="forwarded"
+    v-model:placeholder="placeholder"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+  >
+    <CalendarHeader class="pt-0">
+      <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
+        <CalendarPrevButton>
+          <slot name="calendar-prev-icon" />
+        </CalendarPrevButton>
+        <CalendarNextButton>
+          <slot name="calendar-next-icon" />
+        </CalendarNextButton>
+      </nav>
+
+      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+        <template v-if="layout === 'month-and-year'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else-if="layout === 'month-only'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+          </div>
+        </template>
+        <template v-else-if="layout === 'year-only'">
+          <div class="flex items-center justify-center gap-1">
+            {{ formatter.custom(toDate(date), { month: 'short' }) }}
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else>
+          <CalendarHeading />
+        </template>
+      </slot>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarCell.vue
+++ b/webapp/src/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarCellTrigger.vue
+++ b/webapp/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "button",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarGrid.vue
+++ b/webapp/src/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    data-slot="calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarGridBody.vue
+++ b/webapp/src/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui"
+import { CalendarGridBody } from "reka-ui"
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody
+    data-slot="calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridBody>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarGridHead.vue
+++ b/webapp/src/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { CalendarGridHead } from "reka-ui"
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <CalendarGridHead
+    data-slot="calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridHead>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarGridRow.vue
+++ b/webapp/src/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow
+    data-slot="calendar-grid-row"
+    :class="cn('flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGridRow>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarHeadCell.vue
+++ b/webapp/src/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell
+    data-slot="calendar-head-cell"
+    :class="cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarHeader.vue
+++ b/webapp/src/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader
+    data-slot="calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full px-8', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarHeading.vue
+++ b/webapp/src/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarNextButton.vue
+++ b/webapp/src/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { CalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    data-slot="calendar-next-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </CalendarNext>
+</template>
--- a/webapp/src/components/ui/calendar/CalendarPrevButton.vue
+++ b/webapp/src/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { CalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    data-slot="calendar-prev-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </CalendarPrev>
+</template>
--- a/webapp/src/components/ui/calendar/index.ts
+++ b/webapp/src/components/ui/calendar/index.ts
@@ -0,0 +1,14 @@
+export { default as Calendar } from "./Calendar.vue"
+export { default as CalendarCell } from "./CalendarCell.vue"
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
+export { default as CalendarGrid } from "./CalendarGrid.vue"
+export { default as CalendarGridBody } from "./CalendarGridBody.vue"
+export { default as CalendarGridHead } from "./CalendarGridHead.vue"
+export { default as CalendarGridRow } from "./CalendarGridRow.vue"
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
+export { default as CalendarHeader } from "./CalendarHeader.vue"
+export { default as CalendarHeading } from "./CalendarHeading.vue"
+export { default as CalendarNextButton } from "./CalendarNextButton.vue"
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"
+
+export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined
--- a/webapp/src/components/ui/card/Card.vue
+++ b/webapp/src/components/ui/card/Card.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/card/CardAction.vue
+++ b/webapp/src/components/ui/card/CardAction.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/card/CardContent.vue
+++ b/webapp/src/components/ui/card/CardContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/card/CardDescription.vue
+++ b/webapp/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>
--- a/webapp/src/components/ui/card/CardFooter.vue
+++ b/webapp/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/card/CardHeader.vue
+++ b/webapp/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    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', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/card/CardTitle.vue
+++ b/webapp/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>
--- a/webapp/src/components/ui/card/index.ts
+++ b/webapp/src/components/ui/card/index.ts
@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue"
+export { default as CardAction } from "./CardAction.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
--- a/webapp/src/components/ui/checkbox/Checkbox.vue
+++ b/webapp/src/components/ui/checkbox/Checkbox.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+         props.class)"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot v-bind="slotProps">
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
--- a/webapp/src/components/ui/checkbox/index.ts
+++ b/webapp/src/components/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue"
--- a/webapp/src/components/ui/command/Command.vue
+++ b/webapp/src/components/ui/command/Command.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
+import { reactive, ref, watch } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandContext } from "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
--- a/webapp/src/components/ui/command/CommandDialog.vue
+++ b/webapp/src/components/ui/command/CommandDialog.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { useForwardPropsEmits } from "reka-ui"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import Command from "./Command.vue"
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: "Command Palette",
+  description: "Search for a command to run...",
+})
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-slot="slotProps" v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot v-bind="slotProps" />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
--- a/webapp/src/components/ui/command/CommandEmpty.vue
+++ b/webapp/src/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/webapp/src/components/ui/command/CommandGroup.vue
+++ b/webapp/src/components/ui/command/CommandGroup.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandGroupContext, useCommand } from "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
--- a/webapp/src/components/ui/command/CommandInput.vue
+++ b/webapp/src/components/ui/command/CommandInput.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Search } from "lucide-vue-next"
+import { ListboxFilter, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <Search class="size-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
--- a/webapp/src/components/ui/command/CommandItem.vue
+++ b/webapp/src/components/ui/command/CommandItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useCurrentElement } from "@vueuse/core"
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand, useCommandGroup } from "."
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
--- a/webapp/src/components/ui/command/CommandList.vue
+++ b/webapp/src/components/ui/command/CommandList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxContent, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
--- a/webapp/src/components/ui/command/CommandSeparator.vue
+++ b/webapp/src/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
--- a/webapp/src/components/ui/command/CommandShortcut.vue
+++ b/webapp/src/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
--- a/webapp/src/components/ui/command/index.ts
+++ b/webapp/src/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>("Command")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")
--- a/webapp/src/components/ui/dialog/Dialog.vue
+++ b/webapp/src/components/ui/dialog/Dialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
--- a/webapp/src/components/ui/dialog/DialogClose.vue
+++ b/webapp/src/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
--- a/webapp/src/components/ui/dialog/DialogContent.vue
+++ b/webapp/src/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :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',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
--- a/webapp/src/components/ui/dialog/DialogDescription.vue
+++ b/webapp/src/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
--- a/webapp/src/components/ui/dialog/DialogFooter.vue
+++ b/webapp/src/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/dialog/DialogHeader.vue
+++ b/webapp/src/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/dialog/DialogOverlay.vue
+++ b/webapp/src/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :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 backdrop-blur-sm', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
--- a/webapp/src/components/ui/dialog/DialogScrollContent.vue
+++ b/webapp/src/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
--- a/webapp/src/components/ui/dialog/DialogTitle.vue
+++ b/webapp/src/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>
--- a/webapp/src/components/ui/dialog/DialogTrigger.vue
+++ b/webapp/src/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
--- a/webapp/src/components/ui/dialog/index.ts
+++ b/webapp/src/components/ui/dialog/index.ts
@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
--- a/webapp/src/components/ui/input-otp/InputOTP.vue
+++ b/webapp/src/components/ui/input-otp/InputOTP.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardPropsEmits } from "reka-ui"
+import { OTPInput } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
+    data-slot="input-otp"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot v-bind="slotProps" />
+  </OTPInput>
+</template>
--- a/webapp/src/components/ui/input-otp/InputOTPGroup.vue
+++ b/webapp/src/components/ui/input-otp/InputOTPGroup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-group"
+    v-bind="forwarded"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/webapp/src/components/ui/input-otp/InputOTPSeparator.vue
+++ b/webapp/src/components/ui/input-otp/InputOTPSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { MinusIcon } from "lucide-vue-next"
+import { useForwardProps } from "reka-ui"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-separator"
+    role="separator"
+    v-bind="forwarded"
+  >
+    <slot>
+      <MinusIcon />
+    </slot>
+  </div>
+</template>
--- a/webapp/src/components/ui/input-otp/InputOTPSlot.vue
+++ b/webapp/src/components/ui/input-otp/InputOTPSlot.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { computed } from "vue"
+import { useVueOTPContext } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+
+const context = useVueOTPContext()
+
+const slot = computed(() => context?.value.slots[props.index])
+</script>
+
+<template>
+  <div
+    v-bind="forwarded"
+    data-slot="input-otp-slot"
+    :data-active="slot?.isActive"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
+  >
+    {{ slot?.char }}
+    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+    </div>
+  </div>
+</template>
--- a/webapp/src/components/ui/input-otp/index.ts
+++ b/webapp/src/components/ui/input-otp/index.ts
@@ -0,0 +1,4 @@
+export { default as InputOTP } from "./InputOTP.vue"
+export { default as InputOTPGroup } from "./InputOTPGroup.vue"
+export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
+export { default as InputOTPSlot } from "./InputOTPSlot.vue"
--- a/webapp/src/components/ui/input/Input.vue
+++ b/webapp/src/components/ui/input/Input.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes["class"]
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1.5 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm leading-normal',
+      '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',
+      props.class,
+    )"
+  >
+</template>
--- a/webapp/src/components/ui/input/index.ts
+++ b/webapp/src/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue"
--- a/webapp/src/components/ui/label/Label.vue
+++ b/webapp/src/components/ui/label/Label.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Label } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :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',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
--- a/webapp/src/components/ui/label/index.ts
+++ b/webapp/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue"
--- a/webapp/src/components/ui/native-select/NativeSelect.vue
+++ b/webapp/src/components/ui/native-select/NativeSelect.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useVModel } from "@vueuse/core"
+import { ChevronDownIcon } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue
+}>()
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="cn(
+        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+        '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',
+        props.class,
+      )"
+    >
+      <slot />
+    </select>
+    <ChevronDownIcon
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>
--- a/webapp/src/components/ui/native-select/NativeSelectOptGroup.vue
+++ b/webapp/src/components/ui/native-select/NativeSelectOptGroup.vue
@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <optgroup v-bind="{ 'data-slot': 'native-select-optgroup' }" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </optgroup>
+</template>
--- a/webapp/src/components/ui/native-select/NativeSelectOption.vue
+++ b/webapp/src/components/ui/native-select/NativeSelectOption.vue
@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <option v-bind="{ 'data-slot': 'native-select-option' }" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </option>
+</template>
--- a/webapp/src/components/ui/native-select/index.ts
+++ b/webapp/src/components/ui/native-select/index.ts
@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./NativeSelect.vue"
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
+export { default as NativeSelectOption } from "./NativeSelectOption.vue"
--- a/webapp/src/components/ui/popover/Popover.vue
+++ b/webapp/src/components/ui/popover/Popover.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>
--- a/webapp/src/components/ui/popover/PopoverAnchor.vue
+++ b/webapp/src/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>
--- a/webapp/src/components/ui/popover/PopoverContent.vue
+++ b/webapp/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
--- a/webapp/src/components/ui/popover/PopoverTrigger.vue
+++ b/webapp/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
--- a/webapp/src/components/ui/popover/index.ts
+++ b/webapp/src/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
--- a/webapp/src/components/ui/progress/Progress.vue
+++ b/webapp/src/components/ui/progress/Progress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`
				`@@ -0,0 +1 @@`
				`export { default as Checkbox } from "./Checkbox.vue"`
				`@@ -0,0 +1 @@`
				`export { default as Input } from "./Input.vue"`
				`@@ -0,0 +1 @@`
				`export { default as Label } from "./Label.vue"`