0.0.34

refactor: remove globals.css and update color variables in index.css
- Deleted the globals.css file to streamline styles. - Updated color variables in index.css for improved consistency and design coherence across the application.
2025-10-30 20:26:38 +08:00 · 2025-10-30 20:26:21 +08:00 · 2025-10-30 09:49:41 +08:00 · 2025-10-30 09:49:30 +08:00 · 2025-10-30 09:45:15 +08:00 · 2025-10-30 09:44:05 +08:00
49 changed files with 9280 additions and 90 deletions
--- a/.gitea/workflows/build.yaml
+++ b/.gitea/workflows/build.yaml
@@ -19,16 +19,16 @@ jobs:
      - name: 登录到 Gitea Container Registry
        uses: docker/login-action@v3
        with:
-          registry: ${{ gitea.server_url }}
-          username: ${{ gitea.actor }}
-          password: ${{ gitea.token }}
+          registry: ${{ secrets.REGISTRY_ENDPOINT }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
      
      - name: 提取 Docker 元数据
        id: meta
        uses: docker/metadata-action@v5
        with:
          images: |
-            ${{ gitea.server_url }}/${{ gitea.repository_owner }}/litek
+            ${{ secrets.REGISTRY_ENDPOINT }}/${{ github.repository_owner }}/litek
          tags: |
            type=semver,pattern={{version}}
            type=semver,pattern={{major}}.{{minor}}
@@ -36,13 +36,22 @@ jobs:
            type=raw,value=latest,enable=${{ !contains(github.ref, 'snapshot') && !contains(github.ref, 'alpha') && !contains(github.ref, 'beta') }}
      
      - name: 构建并推送 Docker 镜像
+        id: build
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          platforms: linux/amd64,linux/arm64
+          # cache-from: type=registry,ref=${{ secrets.REGISTRY_ENDPOINT }}/${{ github.repository_owner }}/litek:buildcache
+          # cache-to: type=registry,ref=${{ secrets.REGISTRY_ENDPOINT }}/${{ github.repository_owner }}/litek:buildcache,mode=max
+          # platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64
+      
+      - name: 触发部署 workflow
+        uses: benc-uk/workflow-dispatch@v1
+        with:
+          workflow: deploy.yaml
+          token: ${{ secrets.GITHUB_TOKEN }}
+          inputs: '{"image_tag": "${{ github.ref_name }}"}'

--- a/.gitea/workflows/deploy.yaml
+++ b/.gitea/workflows/deploy.yaml
@@ -0,0 +1,82 @@
+name: Deploy to Production
+
+on:
+  workflow_dispatch:
+    inputs:
+      image_tag:
+        description: '要部署的镜像标签 (例如: v1.0.0, latest)'
+        required: true
+        default: 'latest'
+      compose_path:
+        description: 'docker-compose 文件路径'
+        required: true
+        default: '/root/.compose/litek/compose.yaml'
+  workflow_call:
+    inputs:
+      image_tag:
+        description: '要部署的镜像标签'
+        required: true
+        type: string
+      compose_path:
+        description: 'docker-compose 文件路径'
+        required: false
+        type: string
+        default: '/root/.compose/litek/compose.yaml'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: 解析 SSH 连接信息
+        id: ssh-info
+        run: |
+          SSH_CONN="${{ secrets.SSH_CONNECTION }}"
+          # 格式: user@host:port
+          SSH_USER=$(echo $SSH_CONN | cut -d'@' -f1)
+          SSH_HOST_PORT=$(echo $SSH_CONN | cut -d'@' -f2)
+          SSH_HOST=$(echo $SSH_HOST_PORT | cut -d':' -f1)
+          SSH_PORT=$(echo $SSH_HOST_PORT | cut -d':' -f2)
+          
+          echo "user=$SSH_USER" >> $GITHUB_OUTPUT
+          echo "host=$SSH_HOST" >> $GITHUB_OUTPUT
+          echo "port=$SSH_PORT" >> $GITHUB_OUTPUT
+          
+          echo "SSH 连接信息已解析: $SSH_USER@$SSH_HOST:$SSH_PORT"
+      
+      - name: 部署到生产服务器
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ steps.ssh-info.outputs.host }}
+          username: ${{ steps.ssh-info.outputs.user }}
+          port: ${{ steps.ssh-info.outputs.port }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            echo "开始部署 litek 应用..."
+            echo "镜像标签: ${{ inputs.image_tag }}"
+            echo "Compose 文件: ${{ inputs.compose_path }}"
+            
+            # 切换到 compose 文件所在目录
+            COMPOSE_DIR=$(dirname "${{ inputs.compose_path }}")
+            cd "$COMPOSE_DIR"
+            
+            echo "当前目录: $(pwd)"
+            
+            # 拉取最新镜像
+            echo "正在拉取镜像..."
+            docker compose -f "${{ inputs.compose_path }}" pull
+            
+            # 更新服务
+            echo "正在更新服务..."
+            docker compose -f "${{ inputs.compose_path }}" up -d
+            
+            # 清理旧镜像
+            echo "清理未使用的镜像..."
+            docker image prune -f
+            
+            echo "部署完成！"
+            
+            # 显示运行状态
+            echo "当前运行的容器:"
+            docker compose -f "${{ inputs.compose_path }}" ps
+
--- a/5
+++ b/5
@@ -2,7 +2,7 @@
 FROM node:22-alpine AS builder

 # 安装 pnpm
-RUN corepack enable && corepack prepare pnpm@latest --activate
+RUN npm install -g pnpm

 # 设置工作目录
 WORKDIR /app
@@ -11,7 +11,8 @@ WORKDIR /app
 COPY package.json pnpm-lock.yaml ./

 # 安装依赖
-RUN pnpm install --frozen-lockfile
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
+    pnpm install --frozen-lockfile

 # 复制源代码
 COPY . .
--- a/index.html
+++ b/index.html
@@ -2,12 +2,71 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/lite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lite Kit</title>
+    
+    <!-- Primary Meta Tags -->
+    <title>Lite Kit - Lightweight Online Tools</title>
+    <meta name="description" content="Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more. Fast, secure, and easy to use." />
+    <meta name="keywords" content="online tools,UUID generator,JSON formatter,Base64 encoder,network tools,DNS lookup,Ping test,TCPing,speed test,IP query" />
+    <meta name="author" content="Lite Kit" />
+    <meta name="theme-color" content="#000000" />
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/lite.svg" />
+    
+    <!-- DNS Prefetch & Preconnect for external APIs -->
+    <link rel="dns-prefetch" href="https://ipinfo.io">
+    <link rel="preconnect" href="https://ipinfo.io" crossorigin>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://litek.typist.cc/" />
+    <meta property="og:title" content="Lite Kit - Lightweight Online Tools" />
+    <meta property="og:description" content="Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more." />
+    <meta property="og:image" content="https://litek.typist.cc/lite.svg" />
+    <meta property="og:site_name" content="Lite Kit" />
+    
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Lite Kit - Lightweight Online Tools" />
+    <meta name="twitter:description" content="Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more." />
+    <meta name="twitter:image" content="https://litek.typist.cc/lite.svg" />
+    
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json" />
+    
+    <!-- Structured Data (JSON-LD) -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": "Lite Kit",
+      "description": "Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more",
+      "url": "https://litek.typist.cc/",
+      "author": {
+        "@type": "Organization",
+        "name": "Lite Kit"
+      },
+      "applicationCategory": "UtilitiesApplication",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+      }
+    }
+    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Cloudflare Web Analytics - Only in Production -->
+    <!--CLOUDFLARE_ANALYTICS_PLACEHOLDER-->
+    <!-- End Cloudflare Web Analytics -->
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,24 +1,41 @@
 {
  "name": "litek",
  "private": true,
-  "version": "0.0.0",
+  "version": "0.0.34",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
+    "generate:sitemap": "tsx scripts/generate-sitemap.ts",
    "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "release:patch": "npm version patch && git push --follow-tags",
+    "release:minor": "npm version minor && git push --follow-tags",
+    "release:major": "npm version major && git push --follow-tags"
  },
  "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-separator": "^1.1.7",
    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
    "@tailwindcss/vite": "^4.1.16",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
    "lucide-react": "^0.548.0",
+    "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.4",
+    "sonner": "^2.0.7",
    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16"
+    "tailwindcss": "^4.1.16",
+    "uuid": "^13.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.36.0",
@@ -30,17 +47,22 @@
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.22",
    "globals": "^16.4.0",
+    "terser": "^5.44.0",
+    "tsx": "^4.19.2",
    "tw-animate-css": "^1.4.0",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.45.0",
-    "vite": "npm:rolldown-vite@7.1.14"
+    "vite": "npm:rolldown-vite@7.1.14",
+    "vite-plugin-pwa": "^1.1.0",
+    "workbox-window": "^7.3.0"
  },
  "pnpm": {
    "overrides": {
      "vite": "npm:rolldown-vite@7.1.14"
    },
    "onlyBuiltDependencies": [
-      "@swc/core"
+      "@swc/core",
+      "esbuild"
    ]
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/lite.svg
+++ b/public/lite.svg
@@ -1,7 +1,19 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  /* 默认浅色模式使用黑色 */
+  path {
+    fill: #000000;
+  }
+  /* 暗色模式使用白色 */
+  @media (prefers-color-scheme: dark) {
+    path {
+      fill: #ffffff;
+    }
+  }
+</style>
 <g id="SVGRepo_bgCarrier" stroke-width="0"/>
 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_iconCarrier"> <path d="M12.6089 6.12601C12.6785 5.85878 12.5183 5.58573 12.251 5.51614C11.9838 5.44655 11.7108 5.60676 11.6412 5.87399L10.0842 11.8528L7.85646 12.5211C7.59196 12.6005 7.44187 12.8792 7.52122 13.1437C7.60057 13.4082 7.87931 13.5583 8.14381 13.479L9.78926 12.9853L8.51617 17.874C8.47715 18.0238 8.50974 18.1833 8.60443 18.3058C8.69911 18.4283 8.8452 18.5 9.00003 18.5H16C16.2762 18.5 16.5 18.2761 16.5 18C16.5 17.7239 16.2762 17.5 16 17.5H9.64691L10.9102 12.6491L13.1438 11.979C13.4083 11.8996 13.5584 11.6209 13.479 11.3564C13.3997 11.0919 13.121 10.9418 12.8565 11.0211L11.2051 11.5165L12.6089 6.12601Z"/> </g>
 </svg>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "Lite Kit - Lightweight Online Tools",
+  "short_name": "Lite Kit",
+  "description": "Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/lite.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    }
+  ],
+  "categories": ["utilities", "productivity"],
+  "lang": "en",
+  "dir": "ltr"
+}
+
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,21 @@
+# Allow all crawlers
+User-agent: *
+Allow: /
+
+# Sitemaps
+Sitemap: https://litek.typist.cc/sitemap.xml
+
+# Common bots
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Baiduspider
+Allow: /
+
+# Crawl-delay for less aggressive bots
+User-agent: *
+Crawl-delay: 1
+
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://litek.typist.cc</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/uuid</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/json</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/base64</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/network/dns</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/network/ping</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/network/tcping</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/network/speedtest</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://litek.typist.cc/tool/network/ipquery</loc>
+    <lastmod>2025-10-29</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+</urlset>
--- a/scripts/generate-sitemap.ts
+++ b/scripts/generate-sitemap.ts
@@ -0,0 +1,83 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+interface SitemapUrl {
+  loc: string;
+  lastmod: string;
+  changefreq: string;
+  priority: string;
+}
+
+const BASE_URL = 'https://litek.typist.cc';
+const currentDate = new Date().toISOString().split('T')[0];
+
+const tools = [
+  { path: '/tool/uuid', priority: '0.9' },
+  { path: '/tool/json', priority: '0.9' },
+  { path: '/tool/base64', priority: '0.9' },
+  { path: '/tool/network/dns', priority: '0.8' },
+  { path: '/tool/network/ping', priority: '0.8' },
+  { path: '/tool/network/tcping', priority: '0.8' },
+  { path: '/tool/network/speedtest', priority: '0.8' },
+  { path: '/tool/network/ipquery', priority: '0.8' },
+];
+
+const urls: SitemapUrl[] = [
+  {
+    loc: BASE_URL,
+    lastmod: currentDate,
+    changefreq: 'weekly',
+    priority: '1.0',
+  },
+  {
+    loc: `${BASE_URL}/tool`,
+    lastmod: currentDate,
+    changefreq: 'weekly',
+    priority: '0.9',
+  },
+];
+
+// Add all tool pages
+tools.forEach((tool) => {
+  urls.push({
+    loc: `${BASE_URL}${tool.path}`,
+    lastmod: currentDate,
+    changefreq: 'monthly',
+    priority: tool.priority,
+  });
+});
+
+function generateSitemap(): string {
+  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
+  xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n';
+
+  urls.forEach((url) => {
+    xml += '  <url>\n';
+    xml += `    <loc>${url.loc}</loc>\n`;
+    xml += `    <lastmod>${url.lastmod}</lastmod>\n`;
+    xml += `    <changefreq>${url.changefreq}</changefreq>\n`;
+    xml += `    <priority>${url.priority}</priority>\n`;
+    xml += '  </url>\n';
+  });
+
+  xml += '</urlset>\n';
+  return xml;
+}
+
+// Generate and write sitemap
+const sitemap = generateSitemap();
+const publicDir = path.resolve(__dirname, '../public');
+const sitemapPath = path.join(publicDir, 'sitemap.xml');
+
+// Ensure public directory exists
+if (!fs.existsSync(publicDir)) {
+  fs.mkdirSync(publicDir, { recursive: true });
+}
+
+fs.writeFileSync(sitemapPath, sitemap, 'utf-8');
+console.log(`✅ Sitemap generated successfully at ${sitemapPath}`);
+
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -0,0 +1,120 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem, SidebarMenu, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from "@/components/ui/sidebar";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
+import { tools, type Tool } from "@/components/tool";
+
+
+export const AppSidebar = () => {
+  // 递归构建完整路径
+  const buildFullPath = (pathSegments: string[]): string => {
+    return `/tool/${pathSegments.join("/")}`;
+  };
+
+  // 递归渲染子菜单内容
+  const renderSubMenuContent = (child: Tool, currentPaths: string[]): ReactNode => {
+    if (child.children) {
+      // 子菜单内的可折叠项
+      return (
+        <Collapsible defaultOpen={false} className="group/collapsible">
+          <CollapsibleTrigger asChild>
+            <SidebarMenuSubButton>
+              {child.icon}
+              <span>{child.name}</span>
+              <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+            </SidebarMenuSubButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <SidebarMenuSub>
+              {child.children.map((subChild) => (
+                <SidebarMenuSubItem key={subChild.name}>
+                  {renderSubMenuContent(subChild, [...currentPaths, child.path])}
+                </SidebarMenuSubItem>
+              ))}
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </Collapsible>
+      );
+    }
+
+    // 叶子节点
+    return (
+      <SidebarMenuSubButton asChild>
+        <Link
+          to={buildFullPath([...currentPaths, child.path])}
+          title={child.description}
+        >
+          {child.icon}
+          <span>{child.name}</span>
+        </Link>
+      </SidebarMenuSubButton>
+    );
+  };
+
+  // 递归渲染菜单项
+  const renderMenuItem = (tool: Tool, parentPaths: string[] = []): ReactNode => {
+    const currentPaths = [...parentPaths, tool.path];
+
+    if (tool.children) {
+      // 有子菜单的项目
+      return (
+        <SidebarMenuItem key={tool.name}>
+          <Collapsible
+            defaultOpen={false}
+            className="group/collapsible"
+          >
+            <CollapsibleTrigger asChild>
+              <SidebarMenuButton tooltip={tool.description}>
+                {tool.icon}
+                <span>{tool.name}</span>
+                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+              </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                {tool.children.map((child) => (
+                  <SidebarMenuSubItem key={child.name}>
+                    {renderSubMenuContent(child, currentPaths)}
+                  </SidebarMenuSubItem>
+                ))}
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </Collapsible>
+        </SidebarMenuItem>
+      );
+    }
+
+    // 没有子菜单的项目
+    return (
+      <SidebarMenuItem key={tool.name}>
+        <SidebarMenuButton asChild tooltip={tool.description}>
+          <Link to={buildFullPath(currentPaths)}>
+            {tool.icon}
+            <span>{tool.name}</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  };
+
+  return (
+    <Sidebar>
+      <SidebarHeader className="text-2xl font-bold flex justify-center items-center">
+        Lite Kit
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Tools</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {tools.map((tool) => renderMenuItem(tool))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter className="flex flex-col gap-2" />
+    </Sidebar>
+  );
+};
--- a/src/components/theme/provider.tsx
+++ b/src/components/theme/provider.tsx
@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}
--- a/src/components/theme/toggle.tsx
+++ b/src/components/theme/toggle.tsx
@@ -0,0 +1,38 @@
+import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { useTheme } from "./provider"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
--- a/src/components/tool/base64.tsx
+++ b/src/components/tool/base64.tsx
@@ -0,0 +1,70 @@
+import { useState, type FC } from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+
+const Tool: FC = () => {
+  const [decoded, setDecoded] = useState<string>("");
+  const [encoded, setEncoded] = useState<string>("");
+
+  const encode = () => {
+    try {
+      const encoded64 = btoa(decoded);
+      setEncoded(encoded64);
+      setDecoded("");
+      toast.success("encoded successfully");
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      } else {
+        toast.error("encoding failed");
+      }
+    }
+  };
+
+  const decode = () => {
+    try {
+      const decoded64 = atob(encoded);
+      setDecoded(decoded64);
+      setEncoded("");
+      toast.success("decoded successfully");
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      } else {
+        toast.error("decoding failed");
+      }
+    }
+  };
+
+  return (
+    <div className="h-[50vh] flex flex-row gap-4 pt-[20vh]">
+      <Textarea
+        className="flex-1 resize-none"
+        placeholder="Enter the original text"
+        value={decoded}
+        onChange={(e) => setDecoded(e.target.value)}
+      />
+      <div className="flex flex-col gap-2 justify-center">
+        <Button onClick={encode}>
+          <ArrowRightIcon className="size-4" />
+          Encode
+        </Button>
+        <Button onClick={decode}>
+          <ArrowLeftIcon className="size-4" />
+          Decode
+        </Button>
+      </div>
+      <Textarea
+        className="flex-1 resize-none"
+        placeholder="Enter the Base64 encoded text"
+        value={encoded}
+        onChange={(e) => setEncoded(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export default Tool;
+
--- a/src/components/tool/currency.tsx
+++ b/src/components/tool/currency.tsx
@@ -0,0 +1,413 @@
+import { useState, useEffect, type FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { toast } from "sonner";
+import { Check, X, Plus } from "lucide-react";
+
+interface Currency {
+  code: string;
+  name: string;
+  symbol: string;
+}
+
+// Available currencies (supported by Frankfurter API)
+const AVAILABLE_CURRENCIES: Currency[] = [
+  { code: "USD", name: "US Dollar", symbol: "$" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥" },
+  { code: "EUR", name: "Euro", symbol: "€" },
+  { code: "GBP", name: "British Pound", symbol: "£" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "C$" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$" },
+  { code: "KRW", name: "South Korean Won", symbol: "₩" },
+  { code: "THB", name: "Thai Baht", symbol: "฿" },
+  { code: "MYR", name: "Malaysian Ringgit", symbol: "RM" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$" },
+  { code: "MXN", name: "Mexican Peso", symbol: "MX$" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr" },
+  { code: "PLN", name: "Polish Złoty", symbol: "zł" },
+  { code: "TRY", name: "Turkish Lira", symbol: "₺" },
+  { code: "PHP", name: "Philippine Peso", symbol: "₱" },
+  { code: "IDR", name: "Indonesian Rupiah", symbol: "Rp" },
+  { code: "ILS", name: "Israeli New Shekel", symbol: "₪" },
+  { code: "CZK", name: "Czech Koruna", symbol: "Kč" },
+  { code: "RON", name: "Romanian Leu", symbol: "lei" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft" },
+  { code: "BGN", name: "Bulgarian Lev", symbol: "лв" },
+  { code: "ISK", name: "Icelandic Króna", symbol: "kr" },
+];
+
+// Required currencies (cannot be removed) - USD first, CNY second
+const REQUIRED_CURRENCIES = ["USD", "CNY"];
+
+const STORAGE_KEY = "selectedCurrencies";
+
+const Tool: FC = () => {
+  const [amounts, setAmounts] = useState<Record<string, string>>({});
+  const [selectedCurrencies, setSelectedCurrencies] = useState<string[]>([]);
+  const [rates, setRates] = useState<Record<string, number>>({});
+  const [loading, setLoading] = useState<boolean>(false);
+  const [open, setOpen] = useState(false);
+
+  // Load selected currencies from localStorage
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed) && parsed.length >= 2) {
+          setSelectedCurrencies(parsed);
+          return;
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load saved currencies:", error);
+    }
+    // Default: USD and CNY (USD first)
+    setSelectedCurrencies(["USD", "CNY"]);
+  }, []);
+
+  // Save selected currencies to localStorage
+  useEffect(() => {
+    if (selectedCurrencies.length >= 2) {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(selectedCurrencies));
+      } catch (error) {
+        console.error("Failed to save currencies:", error);
+      }
+    }
+  }, [selectedCurrencies]);
+
+  // Fetch exchange rates (Service Worker handles caching)
+  useEffect(() => {
+    const fetchRates = async () => {
+      try {
+        setLoading(true);
+        // Service Worker will handle caching with StaleWhileRevalidate strategy
+        const response = await fetch("https://api.frankfurter.app/latest?base=USD");
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        const allRates: Record<string, number> = { USD: 1, ...data.rates };
+        
+        setRates(allRates);
+      } catch (error) {
+        console.error("Failed to fetch rates:", error);
+        if (error instanceof Error) {
+          toast.error(`Failed to fetch exchange rates: ${error.message}`);
+        } else {
+          toast.error("Failed to fetch exchange rates");
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRates();
+  }, []);
+
+  // Initialize amounts after rates are loaded
+  useEffect(() => {
+    if (selectedCurrencies.length > 0 && Object.keys(rates).length > 0) {
+      if (Object.keys(amounts).length === 0) {
+        // Initial setup: 1 USD as base
+        const initialAmounts: Record<string, string> = {};
+        const baseAmountInUSD = 1; // 1 USD
+        
+        selectedCurrencies.forEach(code => {
+          if (rates[code]) {
+            const convertedAmount = baseAmountInUSD * rates[code];
+            initialAmounts[code] = convertedAmount.toFixed(2);
+          } else {
+            initialAmounts[code] = "";
+          }
+        });
+        setAmounts(initialAmounts);
+      }
+    }
+  }, [selectedCurrencies, rates, amounts]);
+
+  // Auto-update amounts when rates change
+  useEffect(() => {
+    if (Object.keys(rates).length > 0 && Object.keys(amounts).length > 0) {
+      // Find first currency with value as base
+      const baseCurrency = selectedCurrencies.find(code => amounts[code] && parseFloat(amounts[code]) > 0);
+      
+      if (baseCurrency && rates[baseCurrency]) {
+        const baseValue = parseFloat(amounts[baseCurrency]);
+        const amountInUSD = baseValue / rates[baseCurrency];
+        
+        // Recalculate all currencies
+        const updatedAmounts: Record<string, string> = {};
+        selectedCurrencies.forEach(code => {
+          if (rates[code]) {
+            const convertedAmount = amountInUSD * rates[code];
+            updatedAmounts[code] = convertedAmount.toFixed(2);
+          } else {
+            updatedAmounts[code] = amounts[code] || "";
+          }
+        });
+        
+        // Only update if values changed
+        const hasChanged = selectedCurrencies.some(
+          code => updatedAmounts[code] !== amounts[code]
+        );
+        if (hasChanged) {
+          setAmounts(updatedAmounts);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rates]);
+
+  // Handle amount input change
+  const handleAmountChange = (currencyCode: string, value: string) => {
+    // Only allow numbers and decimal point
+    if (value !== "" && !/^\d*\.?\d*$/.test(value)) {
+      return;
+    }
+
+    if (!rates[currencyCode]) {
+      setAmounts({ ...amounts, [currencyCode]: value });
+      return;
+    }
+
+    // Clear all if empty
+    if (value === "" || value === "0" || parseFloat(value) === 0) {
+      const newAmounts: Record<string, string> = {};
+      selectedCurrencies.forEach(code => {
+        newAmounts[code] = "";
+      });
+      setAmounts(newAmounts);
+      return;
+    }
+
+    const inputValue = parseFloat(value);
+    
+    // Calculate other currencies
+    const newAmounts: Record<string, string> = { [currencyCode]: value };
+    
+    // Convert to USD first
+    const amountInUSD = inputValue / rates[currencyCode];
+    
+    // Convert to other currencies
+    selectedCurrencies.forEach(code => {
+      if (code !== currencyCode && rates[code]) {
+        const convertedAmount = amountInUSD * rates[code];
+        newAmounts[code] = convertedAmount.toFixed(2);
+      }
+    });
+
+    setAmounts(newAmounts);
+  };
+
+  // Add currency
+  const addCurrency = (currencyCode: string) => {
+    if (!selectedCurrencies.includes(currencyCode)) {
+      setSelectedCurrencies([...selectedCurrencies, currencyCode]);
+      
+      // Calculate initial amount for new currency
+      if (rates[currencyCode] && Object.keys(amounts).length > 0) {
+        const firstCurrency = selectedCurrencies[0];
+        if (firstCurrency && amounts[firstCurrency] && rates[firstCurrency]) {
+          const firstAmount = parseFloat(amounts[firstCurrency]) || 0;
+          const amountInUSD = firstAmount / rates[firstCurrency];
+          const newAmount = amountInUSD * rates[currencyCode];
+          setAmounts({ ...amounts, [currencyCode]: newAmount.toFixed(2) });
+        }
+      }
+      
+      toast.success(`Added ${currencyCode}`);
+    }
+  };
+
+  // Remove currency
+  const removeCurrency = (currencyCode: string) => {
+    if (REQUIRED_CURRENCIES.includes(currencyCode)) {
+      toast.error(`${currencyCode} is required and cannot be removed`);
+      return;
+    }
+    if (selectedCurrencies.length <= 2) {
+      toast.error("At least two currencies are required");
+      return;
+    }
+    setSelectedCurrencies(selectedCurrencies.filter((c) => c !== currencyCode));
+    
+    // Remove corresponding amount
+    const newAmounts = { ...amounts };
+    delete newAmounts[currencyCode];
+    setAmounts(newAmounts);
+    
+    toast.success(`Removed ${currencyCode}`);
+  };
+
+  // Get currency info
+  const getCurrency = (code: string): Currency | undefined => {
+    return AVAILABLE_CURRENCIES.find((c) => c.code === code);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+
+      {/* Currency selector */}
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <Label>Select Currencies</Label>
+          {/* Add currency button - fixed at top right */}
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="gap-1">
+                <Plus className="size-4" />
+                Add Currency
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] p-0" align="end" side="bottom" sideOffset={5}>
+              <Command>
+                <CommandInput placeholder="Search currencies..." />
+                <CommandList>
+                  <CommandEmpty>No currency found</CommandEmpty>
+                  <CommandGroup>
+                    {AVAILABLE_CURRENCIES.map((currency) => {
+                      const isSelected = selectedCurrencies.includes(currency.code);
+                      const isRequired = REQUIRED_CURRENCIES.includes(currency.code);
+                      return (
+                        <CommandItem
+                          key={currency.code}
+                          value={`${currency.code} ${currency.name}`}
+                          disabled={isRequired}
+                          onSelect={() => {
+                            if (isRequired) return; // Required currencies cannot be toggled
+                            if (isSelected && selectedCurrencies.length > 2) {
+                              removeCurrency(currency.code);
+                            } else if (!isSelected) {
+                              addCurrency(currency.code);
+                            }
+                          }}
+                        >
+                          <Check
+                            className={`mr-2 size-4 flex-shrink-0 ${
+                              isSelected ? "opacity-100" : "opacity-0"
+                            }`}
+                          />
+                          <span className="inline-block w-8 text-right flex-shrink-0">{currency.symbol}</span>
+                          <span className="ml-2">{currency.code}</span>
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        
+        {/* Selected currency badges */}
+        <div className="flex flex-wrap gap-2">
+          {selectedCurrencies.map((code) => {
+            const currency = getCurrency(code);
+            const isRequired = REQUIRED_CURRENCIES.includes(code);
+            return (
+              <Badge
+                key={code}
+                variant={isRequired ? "default" : "secondary"}
+                className={`relative gap-1 px-2.5 py-1 transition-all duration-200 ${
+                  !isRequired 
+                    ? "cursor-pointer hover:bg-destructive hover:text-destructive-foreground hover:border-destructive group" 
+                    : ""
+                }`}
+                onClick={() => {
+                  if (!isRequired) {
+                    removeCurrency(code);
+                  }
+                }}
+              >
+                <span className={!isRequired ? "group-hover:opacity-0 transition-opacity duration-200" : ""}>
+                  {currency?.symbol} {code}
+                </span>
+                {!isRequired && (
+                  <X className="absolute inset-0 m-auto size-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
+                )}
+              </Badge>
+            );
+          })}
+        </div>
+        
+        <span className="text-xs text-muted-foreground">
+          {REQUIRED_CURRENCIES.map((c) => getCurrency(c)?.code).join(", ")} are required. At least two currencies needed.
+        </span>
+      </div>
+
+      {/* Currency list */}
+      {loading ? (
+        <div className="flex items-center justify-center py-8 text-muted-foreground">
+          Loading exchange rates...
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3 flex-1 overflow-auto">
+          <div className="text-sm font-medium">Currency Amounts:</div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 auto-rows-min">
+            {selectedCurrencies.map((code) => {
+              const currency = getCurrency(code);
+              if (!currency) return null;
+              
+              return (
+                <Card key={code} className="flex flex-col">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-sm font-medium text-muted-foreground">
+                      <div className="leading-tight">
+                        <div>{currency.symbol} {currency.code}</div>
+                        <div className="text-xs font-normal mt-1">{currency.name}</div>
+                      </div>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <Input
+                      type="text"
+                      placeholder="Enter amount"
+                      value={amounts[code] || ""}
+                      onChange={(e) => handleAmountChange(code, e.target.value)}
+                      className="text-xl font-semibold"
+                    />
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {!loading && Object.keys(rates).length > 0 && (
+        <div className="text-xs text-muted-foreground">
+          Exchange rate data from:{" "}
+          <a
+            href="https://www.frankfurter.app/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-foreground transition-colors"
+          >
+            Frankfurter API
+          </a>
+          {" "}(Based on European Central Bank data)
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
+
--- a/src/components/tool/index.tsx
+++ b/src/components/tool/index.tsx
@@ -0,0 +1,96 @@
+import { lazy, type ReactNode, type ComponentType } from 'react';
+import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin, Coins } from 'lucide-react'
+
+// 懒加载工具组件
+const UUID = lazy(() => import('./uuid'))
+const JSON = lazy(() => import('./json'))
+const Base64 = lazy(() => import('./base64'))
+const Currency = lazy(() => import('./currency'))
+const DNS = lazy(() => import('./network/dns'))
+const Ping = lazy(() => import('./network/ping'))
+const TCPing = lazy(() => import('./network/tcping'))
+const SpeedTest = lazy(() => import('./network/speedtest'))
+const IPQuery = lazy(() => import('./network/ipquery'))
+
+export interface Tool {
+  path: string;
+  name: string;
+  icon: ReactNode;
+  description: string;
+  component?: ComponentType;
+  children?: Tool[];
+}
+
+export const tools: Tool[] = [
+  {
+    path: "uuid",
+    name: "UUID Generator",
+    description: "Generate a UUID",
+    icon: <Hash />,
+    component: UUID,
+  },
+  {
+    path: "json",
+    name: "JSON Formatter",
+    description: "Format and validate JSON",
+    icon: <FileJson />,
+    component: JSON,
+  },
+  {
+    path: "base64",
+    name: "Base64 Encoder/Decoder",
+    description: "Encode and decode Base64",
+    icon: <Binary />,
+    component: Base64,
+  },
+  {
+    path: "currency",
+    name: "Currency Converter",
+    description: "Real-time currency exchange rates",
+    icon: <Coins />,
+    component: Currency,
+  },
+  {
+    path: "network",
+    name: "Network Tools",
+    description: "Network testing tools",
+    icon: <Network />,
+    children: [
+      {
+        path: "dns",
+        name: "DNS Lookup",
+        description: "DNS query tool",
+        icon: <Globe />,
+        component: DNS,
+      },
+      {
+        path: "ping",
+        name: "Ping",
+        description: "Ping test tool",
+        icon: <Activity />,
+        component: Ping,
+      },
+      {
+        path: "tcping",
+        name: "TCPing",
+        description: "TCP port connectivity test",
+        icon: <Wifi />,
+        component: TCPing,
+      },
+      {
+        path: "speedtest",
+        name: "Speed Test",
+        description: "Website speed test",
+        icon: <Gauge />,
+        component: SpeedTest,
+      },
+      {
+        path: "ipquery",
+        name: "IP Query",
+        description: "Query IP location, quality and risk info",
+        icon: <MapPin />,
+        component: IPQuery,
+      },
+    ],
+  },
+];
--- a/src/components/tool/json.tsx
+++ b/src/components/tool/json.tsx
@@ -0,0 +1,48 @@
+import { useState, type FC } from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+const Tool: FC = () => {
+  const [json, setJson] = useState<string>("");
+
+  const validateJson = () => {
+    try {
+      JSON.parse(json);
+      return true;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      } else {
+        toast.error("Invalid JSON");
+      }
+      return false;
+    }
+  };
+
+  const minifyJson = () => {
+    if (!validateJson()) return;
+    const formattedJson = JSON.stringify(JSON.parse(json), null, 0);
+    setJson(formattedJson);
+    toast.success("Minified successfully");
+  };
+
+  const prettifyJson = () => {
+    if (!validateJson()) return;
+    const formattedJson = JSON.stringify(JSON.parse(json), null, 2);
+    setJson(formattedJson);
+    toast.success("JSON prettified successfully");
+  };
+
+  return (
+    <div className="h-full flex flex-col gap-4">
+      <Textarea className="flex-1 w-full resize-none" placeholder="Enter your JSON here" value={json} onChange={(e) => setJson(e.target.value)} />
+      <div className="flex flex-row gap-2">
+        <Button onClick={minifyJson}>Minify</Button>
+        <Button onClick={prettifyJson}>Pretty</Button>
+      </div>
+    </div>
+  );
+};
+
+export default Tool;
--- a/src/components/tool/network/dns.tsx
+++ b/src/components/tool/network/dns.tsx
@@ -0,0 +1,200 @@
+import { useState, type FC } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+interface DNSRecord {
+  name: string;
+  type: number;
+  TTL: number;
+  data: string;
+}
+
+interface DNSResponse {
+  Status: number;
+  Answer?: DNSRecord[];
+  Question?: Array<{ name: string; type: number }>;
+}
+
+const DNS_RECORD_TYPES = [
+  { value: "1", label: "A", description: "IPv4 Address" },
+  { value: "28", label: "AAAA", description: "IPv6 Address" },
+  { value: "5", label: "CNAME", description: "Canonical Name" },
+  { value: "15", label: "MX", description: "Mail Exchange" },
+  { value: "2", label: "NS", description: "Name Server" },
+  { value: "16", label: "TXT", description: "Text Record" },
+  { value: "6", label: "SOA", description: "Start of Authority" },
+  { value: "257", label: "CAA", description: "Certification Authority Authorization" },
+  { value: "12", label: "PTR", description: "Pointer Record" },
+  { value: "33", label: "SRV", description: "Service Record" },
+];
+
+const getRecordTypeName = (type: number): string => {
+  const record = DNS_RECORD_TYPES.find((r) => r.value === String(type));
+  return record ? record.label : `TYPE${type}`;
+};
+
+const Tool: FC = () => {
+  const [domain, setDomain] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [results, setResults] = useState<DNSRecord[]>([]);
+  const [queryTime, setQueryTime] = useState<number>(0);
+
+  const handleDomainBlur = () => {
+    if (!domain.trim()) return;
+    
+    let input = domain.trim();
+    let cleanDomain = input;
+    
+    try {
+      // Try to parse as URL
+      const url = new URL(input.startsWith('http') ? input : `https://${input}`);
+      cleanDomain = url.hostname;
+    } catch {
+      // If parsing fails, fallback to manual cleanup
+      cleanDomain = input.replace(/^https?:\/\//, "").split("/")[0].split(":")[0];
+    }
+    
+    if (cleanDomain !== input) {
+      setDomain(cleanDomain);
+    }
+  };
+
+  const queryDNS = async () => {
+    if (!domain.trim()) {
+      toast.error("Please enter a domain name");
+      return;
+    }
+
+    setLoading(true);
+    setResults([]);
+    setQueryTime(0);
+
+    const startTime = performance.now();
+
+    try {
+      // Query all record types concurrently
+      const queries = DNS_RECORD_TYPES.map((recordType) =>
+        fetch(
+          `https://cloudflare-dns.com/dns-query?name=${encodeURIComponent(
+            domain.trim()
+          )}&type=${recordType.value}`,
+          {
+            headers: {
+              Accept: "application/dns-json",
+            },
+          }
+        )
+          .then((response) => response.json())
+          .then((data: DNSResponse) => {
+            if (data.Status === 0 && data.Answer && data.Answer.length > 0) {
+              return data.Answer;
+            }
+            return [];
+          })
+          .catch(() => [])
+      );
+
+      const allResults = await Promise.all(queries);
+      const endTime = performance.now();
+      setQueryTime(endTime - startTime);
+
+      // Merge and deduplicate results
+      const combinedResults = allResults.flat();
+      
+      if (combinedResults.length > 0) {
+        // Group by record type and deduplicate
+        const uniqueResults = Array.from(
+          new Map(
+            combinedResults.map((record) => [
+              `${record.name}-${record.type}-${record.data}`,
+              record,
+            ])
+          ).values()
+        );
+
+        setResults(uniqueResults);
+        toast.success(`Query successful, found ${uniqueResults.length} record(s)`);
+      } else {
+        setResults([]);
+        toast.info("No records found");
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(`Query failed: ${error.message}`);
+      } else {
+        toast.error("Query failed");
+      }
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !loading) {
+      queryDNS();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Domain Name</label>
+          <Input
+            placeholder="e.g. example.com"
+            value={domain}
+            onChange={(e) => setDomain(e.target.value)}
+            onBlur={handleDomainBlur}
+            onKeyPress={handleKeyPress}
+            disabled={loading}
+          />
+          <span className="text-xs text-muted-foreground">
+            Will automatically query all DNS record types
+          </span>
+        </div>
+
+        <Button onClick={queryDNS} disabled={loading} className="w-full">
+          {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
+          {loading ? "Querying..." : "Query All Records"}
+        </Button>
+      </div>
+
+      {queryTime > 0 && (
+        <div className="text-sm text-muted-foreground">
+          Query time: {queryTime.toFixed(2)} ms
+        </div>
+      )}
+
+      {results.length > 0 && (
+        <div className="flex flex-col gap-3 flex-1 overflow-auto">
+          <div className="text-sm font-medium">Query Results:</div>
+          <div className="space-y-2">
+            {results.map((record, index) => (
+              <div
+                key={index}
+                className="border rounded-md p-3 bg-card text-card-foreground"
+              >
+                <div className="grid grid-cols-2 gap-2 text-sm">
+                  <div className="text-muted-foreground">Name:</div>
+                  <div className="font-mono break-all">{record.name}</div>
+                  <div className="text-muted-foreground">Type:</div>
+                  <div>{getRecordTypeName(record.type)}</div>
+                  <div className="text-muted-foreground">TTL:</div>
+                  <div>{record.TTL} seconds</div>
+                  <div className="text-muted-foreground">Data:</div>
+                  <div className="font-mono break-all">{record.data}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
+
--- a/src/components/tool/network/ipquery.tsx
+++ b/src/components/tool/network/ipquery.tsx
@@ -0,0 +1,296 @@
+import { useState, type FC } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+interface IPInfo {
+  ip: string;
+  city?: string;
+  region?: string;
+  country?: string;
+  countryCode?: string;
+  loc?: string;
+  org?: string;
+  timezone?: string;
+  isp?: string;
+  as?: string;
+  proxy?: boolean;
+  hosting?: boolean;
+  query?: string;
+}
+
+const Tool: FC = () => {
+  const [ip, setIp] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [ipInfo, setIpInfo] = useState<IPInfo | null>(null);
+  const [queryTime, setQueryTime] = useState<number>(0);
+
+  const isValidIP = (ip: string): boolean => {
+    // IPv4 正则
+    const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
+    // IPv6 正则 (简化版)
+    const ipv6Regex = /^([0-9a-fA-F]{0,4}:){2,7}[0-9a-fA-F]{0,4}$/;
+    
+    if (ipv4Regex.test(ip)) {
+      const parts = ip.split('.');
+      return parts.every(part => parseInt(part) >= 0 && parseInt(part) <= 255);
+    }
+    
+    return ipv6Regex.test(ip);
+  };
+
+  const queryCurrentIP = async () => {
+    setLoading(true);
+    setIpInfo(null);
+    setQueryTime(0);
+
+    const startTime = performance.now();
+
+    try {
+      // 使用 ipinfo.io 查询当前IP (免费，无需密钥)
+      const response = await fetch("https://ipinfo.io/json");
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      const endTime = performance.now();
+      
+      setQueryTime(endTime - startTime);
+      setIpInfo(data);
+      setIp(data.ip);
+      toast.success("Successfully queried current IP");
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`Query failed: ${error.message}`);
+      } else {
+        toast.error("Query failed");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const queryIP = async () => {
+    if (!ip.trim()) {
+      toast.error("Please enter an IP address");
+      return;
+    }
+
+    if (!isValidIP(ip.trim())) {
+      toast.error("Invalid IP address format");
+      return;
+    }
+
+    setLoading(true);
+    setIpInfo(null);
+    setQueryTime(0);
+
+    const startTime = performance.now();
+
+    try {
+      // 使用 ipinfo.io (免费，稳定可靠)
+      const response = await fetch(`https://ipinfo.io/${encodeURIComponent(ip.trim())}/json`);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      const endTime = performance.now();
+      
+      setQueryTime(endTime - startTime);
+
+      // ipinfo.io 返回格式已经符合 IPInfo 接口
+      setIpInfo(data);
+      toast.success("Query successful");
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`Query failed: ${error.message}`);
+      } else {
+        toast.error("Query failed");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !loading) {
+      queryIP();
+    }
+  };
+
+  const getRiskLevel = () => {
+    if (!ipInfo) return null;
+    
+    // ipinfo.io 通过 org 字段可以简单判断是否为托管IP
+    const orgLower = ipInfo.org?.toLowerCase() || "";
+    const isHosting = orgLower.includes("hosting") || 
+                     orgLower.includes("datacenter") || 
+                     orgLower.includes("cloud") ||
+                     orgLower.includes("server");
+    
+    if (isHosting) {
+      return {
+        level: "Medium",
+        color: "text-yellow-500",
+        reasons: ["Possible Hosting/Datacenter IP"],
+      };
+    }
+    
+    return {
+      level: "Low",
+      color: "text-green-500",
+      reasons: ["Regular residential IP"],
+    };
+  };
+
+  const riskInfo = getRiskLevel();
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">IP Address</label>
+          <Input
+            placeholder="e.g. 8.8.8.8 or leave empty for current IP"
+            value={ip}
+            onChange={(e) => setIp(e.target.value)}
+            onKeyPress={handleKeyPress}
+            disabled={loading}
+          />
+          <span className="text-xs text-muted-foreground">
+            Supports IPv4 and IPv6 addresses
+          </span>
+        </div>
+
+        <div className="flex gap-2">
+          <Button onClick={queryIP} disabled={loading} className="flex-1">
+            {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
+            {loading ? "Querying..." : "Query IP"}
+          </Button>
+          <Button 
+            onClick={queryCurrentIP} 
+            disabled={loading} 
+            variant="outline"
+            className="flex-1"
+          >
+            {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
+            Query My IP
+          </Button>
+        </div>
+      </div>
+
+      {queryTime > 0 && (
+        <div className="text-sm text-muted-foreground">
+          Query time: {queryTime.toFixed(2)} ms
+        </div>
+      )}
+
+      {ipInfo && (
+        <div className="flex flex-col gap-3 flex-1 overflow-auto">
+          <div className="text-sm font-medium">IP Information:</div>
+          
+          {/* 基本信息 */}
+          <div className="border rounded-md p-4 bg-card text-card-foreground">
+            <div className="text-sm font-medium mb-3">Basic Information</div>
+            <div className="grid grid-cols-2 gap-2 text-sm">
+              <div className="text-muted-foreground">IP Address:</div>
+              <div className="font-mono">{ipInfo.ip || ipInfo.query}</div>
+              
+              {ipInfo.country && (
+                <>
+                  <div className="text-muted-foreground">Country:</div>
+                  <div>{ipInfo.country} ({ipInfo.countryCode})</div>
+                </>
+              )}
+              
+              {ipInfo.region && (
+                <>
+                  <div className="text-muted-foreground">Region:</div>
+                  <div>{ipInfo.region}</div>
+                </>
+              )}
+              
+              {ipInfo.city && (
+                <>
+                  <div className="text-muted-foreground">City:</div>
+                  <div>{ipInfo.city}</div>
+                </>
+              )}
+              
+              {ipInfo.loc && (
+                <>
+                  <div className="text-muted-foreground">Coordinates:</div>
+                  <div className="font-mono">{ipInfo.loc}</div>
+                </>
+              )}
+              
+              {ipInfo.timezone && (
+                <>
+                  <div className="text-muted-foreground">Timezone:</div>
+                  <div>{ipInfo.timezone}</div>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* 网络信息 */}
+          {(ipInfo.isp || ipInfo.org || ipInfo.as) && (
+            <div className="border rounded-md p-4 bg-card text-card-foreground">
+              <div className="text-sm font-medium mb-3">Network Information</div>
+              <div className="grid grid-cols-2 gap-2 text-sm">
+                {ipInfo.isp && (
+                  <>
+                    <div className="text-muted-foreground">ISP:</div>
+                    <div>{ipInfo.isp}</div>
+                  </>
+                )}
+                
+                {ipInfo.org && (
+                  <>
+                    <div className="text-muted-foreground">Organization:</div>
+                    <div>{ipInfo.org}</div>
+                  </>
+                )}
+                
+                {ipInfo.as && (
+                  <>
+                    <div className="text-muted-foreground">AS Number:</div>
+                    <div className="font-mono">{ipInfo.as}</div>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* 风险评估 */}
+          {riskInfo && (
+            <div className="border rounded-md p-4 bg-card text-card-foreground">
+              <div className="text-sm font-medium mb-3">Risk Assessment</div>
+              <div className="grid grid-cols-2 gap-2 text-sm">
+                <div className="text-muted-foreground">Risk Level:</div>
+                <div className={`font-medium ${riskInfo.color}`}>
+                  {riskInfo.level}
+                </div>
+                
+                <div className="text-muted-foreground">Details:</div>
+                <div className="space-y-1">
+                  {riskInfo.reasons.map((reason, idx) => (
+                    <div key={idx} className="text-sm">{reason}</div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
+
--- a/src/components/tool/network/ping.tsx
+++ b/src/components/tool/network/ping.tsx
@@ -0,0 +1,278 @@
+import { useState, useEffect, useRef, type FC } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+interface PingResult {
+  seq: number;
+  time: number;
+  success: boolean;
+  error?: string;
+}
+
+interface PingStats {
+  sent: number;
+  received: number;
+  lost: number;
+  min: number;
+  max: number;
+  avg: number;
+}
+
+const Tool: FC = () => {
+  const [url, setUrl] = useState<string>("");
+  const [running, setRunning] = useState<boolean>(false);
+  const [results, setResults] = useState<PingResult[]>([]);
+  const [stats, setStats] = useState<PingStats>({
+    sent: 0,
+    received: 0,
+    lost: 0,
+    min: 0,
+    max: 0,
+    avg: 0,
+  });
+  const intervalRef = useRef<number | null>(null);
+  const seqRef = useRef<number>(0);
+  const resultsContainerRef = useRef<HTMLDivElement>(null);
+
+  const handleUrlBlur = () => {
+    if (!url.trim()) return;
+    
+    let input = url.trim();
+    
+    try {
+      // Try to parse as URL
+      const parsedUrl = new URL(input.startsWith('http') ? input : `https://${input}`);
+      const normalizedUrl = parsedUrl.toString();
+      
+      if (normalizedUrl !== input) {
+        setUrl(normalizedUrl);
+      }
+    } catch {
+      // If parsing fails, add https:// prefix
+      if (!input.startsWith("http://") && !input.startsWith("https://")) {
+        setUrl(`https://${input}`);
+      }
+    }
+  };
+
+  const ping = async () => {
+    if (!url.trim()) {
+      toast.error("Please enter a URL");
+      return;
+    }
+
+    const seq = ++seqRef.current;
+    const targetUrl = url.trim();
+
+    const startTime = performance.now();
+
+    try {
+      await fetch(targetUrl, {
+        method: "HEAD",
+        mode: "no-cors",
+        cache: "no-cache",
+      });
+
+      const endTime = performance.now();
+      const time = endTime - startTime;
+
+      const newResult: PingResult = {
+        seq,
+        time,
+        success: true,
+      };
+
+      setResults((prev) => [...prev, newResult]);
+      updateStats(newResult);
+    } catch (error: unknown) {
+      const endTime = performance.now();
+      const time = endTime - startTime;
+
+      const errorMessage =
+        error instanceof Error ? error.message : "Request failed";
+
+      const newResult: PingResult = {
+        seq,
+        time,
+        success: false,
+        error: errorMessage,
+      };
+
+      setResults((prev) => [...prev, newResult]);
+      updateStats(newResult);
+    }
+  };
+
+  const updateStats = (newResult: PingResult) => {
+    setStats((prev) => {
+      const sent = prev.sent + 1;
+      const received = newResult.success ? prev.received + 1 : prev.received;
+      const lost = sent - received;
+
+      let min = prev.min;
+      let max = prev.max;
+      let avg = prev.avg;
+
+      if (newResult.success) {
+        if (received === 1) {
+          min = newResult.time;
+          max = newResult.time;
+          avg = newResult.time;
+        } else {
+          min = Math.min(min, newResult.time);
+          max = Math.max(max, newResult.time);
+          avg = (prev.avg * (received - 1) + newResult.time) / received;
+        }
+      }
+
+      return { sent, received, lost, min, max, avg };
+    });
+  };
+
+  const startPing = () => {
+    if (!url.trim()) {
+      toast.error("Please enter a URL");
+      return;
+    }
+
+    setRunning(true);
+    setResults([]);
+    setStats({
+      sent: 0,
+      received: 0,
+      lost: 0,
+      min: 0,
+      max: 0,
+      avg: 0,
+    });
+    seqRef.current = 0;
+
+    // Execute first ping immediately
+    ping();
+
+    // Then execute every second
+    intervalRef.current = window.setInterval(ping, 1000);
+  };
+
+  const stopPing = () => {
+    setRunning(false);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    // Auto-scroll to bottom
+    if (resultsContainerRef.current) {
+      resultsContainerRef.current.scrollTop =
+        resultsContainerRef.current.scrollHeight;
+    }
+  }, [results]);
+
+  useEffect(() => {
+    // Cleanup timer
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  const lossRate =
+    stats.sent > 0 ? ((stats.lost / stats.sent) * 100).toFixed(1) : "0.0";
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Target URL or IP</label>
+          <Input
+            placeholder="e.g. example.com or https://example.com"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            onBlur={handleUrlBlur}
+            disabled={running}
+          />
+        </div>
+
+        <div className="flex gap-2">
+          {!running ? (
+            <Button onClick={startPing} className="flex-1">
+              Start Ping
+            </Button>
+          ) : (
+            <Button onClick={stopPing} variant="destructive" className="flex-1">
+              Stop
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {stats.sent > 0 && (
+        <div className="border rounded-md p-3 bg-card text-card-foreground">
+          <div className="text-sm font-medium mb-2">Statistics</div>
+          <div className="grid grid-cols-2 gap-2 text-sm">
+            <div className="text-muted-foreground">Sent:</div>
+            <div>{stats.sent} packets</div>
+            <div className="text-muted-foreground">Received:</div>
+            <div>{stats.received} packets</div>
+            <div className="text-muted-foreground">Lost:</div>
+            <div>
+              {stats.lost} packets ({lossRate}%)
+            </div>
+            {stats.received > 0 && (
+              <>
+                <div className="text-muted-foreground">Min Latency:</div>
+                <div>{stats.min.toFixed(2)} ms</div>
+                <div className="text-muted-foreground">Max Latency:</div>
+                <div>{stats.max.toFixed(2)} ms</div>
+                <div className="text-muted-foreground">Avg Latency:</div>
+                <div>{stats.avg.toFixed(2)} ms</div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {results.length > 0 && (
+        <div className="flex flex-col gap-2 flex-1 overflow-hidden">
+          <div className="text-sm font-medium">Ping Results:</div>
+          <div
+            ref={resultsContainerRef}
+            className="flex-1 overflow-auto space-y-1 font-mono text-sm border rounded-md p-3 bg-card"
+          >
+            {results.map((result) => (
+              <div
+                key={result.seq}
+                className={result.success ? "text-green-500" : "text-red-500"}
+              >
+                {result.success ? (
+                  <>
+                    seq={result.seq} time={result.time.toFixed(2)}ms
+                  </>
+                ) : (
+                  <>
+                    seq={result.seq} Request timeout
+                    {result.error && ` (${result.error})`}
+                  </>
+                )}
+              </div>
+            ))}
+            {running && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="size-3 animate-spin" />
+                Running...
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
+
--- a/src/components/tool/network/speedtest.tsx
+++ b/src/components/tool/network/speedtest.tsx
@@ -0,0 +1,355 @@
+import { useState, type FC } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+interface PerformanceMetrics {
+  dns: number;
+  tcp: number;
+  ssl: number;
+  ttfb: number;
+  download: number;
+  total: number;
+}
+
+interface SpeedTestResult {
+  downloadSpeed?: number;
+  uploadSpeed?: number;
+  performance?: PerformanceMetrics;
+}
+
+const Tool: FC = () => {
+  const [url, setUrl] = useState<string>("");
+  const [testType, setTestType] = useState<"performance" | "download" | "upload">(
+    "performance"
+  );
+  const [testing, setTesting] = useState<boolean>(false);
+  const [result, setResult] = useState<SpeedTestResult | null>(null);
+
+  const testPerformance = async (targetUrl: string) => {
+    // 清除之前的性能数据
+    performance.clearResourceTimings();
+
+    const startTime = performance.now();
+
+    try {
+      const response = await fetch(targetUrl, {
+        cache: "no-cache",
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      // 等待内容加载完成
+      await response.blob();
+
+      const endTime = performance.now();
+
+      // 获取性能数据
+      const perfEntries = performance.getEntriesByType(
+        "resource"
+      ) as PerformanceResourceTiming[];
+      const entry = perfEntries.find((e) => e.name === targetUrl);
+
+      if (entry) {
+        const metrics: PerformanceMetrics = {
+          dns: entry.domainLookupEnd - entry.domainLookupStart,
+          tcp: entry.connectEnd - entry.connectStart,
+          ssl:
+            entry.secureConnectionStart > 0
+              ? entry.connectEnd - entry.secureConnectionStart
+              : 0,
+          ttfb: entry.responseStart - entry.requestStart,
+          download: entry.responseEnd - entry.responseStart,
+          total: entry.responseEnd - entry.startTime,
+        };
+
+        return { performance: metrics };
+      } else {
+        // If no detailed performance data, only return total time
+        return {
+          performance: {
+            dns: 0,
+            tcp: 0,
+            ssl: 0,
+            ttfb: 0,
+            download: 0,
+            total: endTime - startTime,
+          },
+        };
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const testDownloadSpeed = async (targetUrl: string) => {
+    const startTime = performance.now();
+
+    try {
+      const response = await fetch(targetUrl, {
+        cache: "no-cache",
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const blob = await response.blob();
+      const endTime = performance.now();
+
+      const fileSizeBytes = blob.size;
+      const durationSeconds = (endTime - startTime) / 1000;
+      const speedMbps = (fileSizeBytes * 8) / (durationSeconds * 1000000);
+
+      return { downloadSpeed: speedMbps };
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const testUploadSpeed = async (targetUrl: string) => {
+    // 生成 1MB 的测试数据
+    const testData = new Uint8Array(1024 * 1024);
+    for (let i = 0; i < testData.length; i++) {
+      testData[i] = Math.floor(Math.random() * 256);
+    }
+
+    const startTime = performance.now();
+
+    try {
+      const response = await fetch(targetUrl, {
+        method: "POST",
+        body: testData,
+        cache: "no-cache",
+      });
+
+      const endTime = performance.now();
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const fileSizeBytes = testData.length;
+      const durationSeconds = (endTime - startTime) / 1000;
+      const speedMbps = (fileSizeBytes * 8) / (durationSeconds * 1000000);
+
+      return { uploadSpeed: speedMbps };
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const handleUrlBlur = () => {
+    if (!url.trim()) return;
+    
+    let input = url.trim();
+    
+    try {
+      // Try to parse as URL
+      const parsedUrl = new URL(input.startsWith('http') ? input : `https://${input}`);
+      const normalizedUrl = parsedUrl.toString();
+      
+      if (normalizedUrl !== input) {
+        setUrl(normalizedUrl);
+      }
+    } catch {
+      // If parsing fails, add https:// prefix
+      if (!input.startsWith("http://") && !input.startsWith("https://")) {
+        setUrl(`https://${input}`);
+      }
+    }
+  };
+
+  const startTest = async () => {
+    if (!url.trim()) {
+      toast.error("Please enter a URL");
+      return;
+    }
+
+    const targetUrl = url.trim();
+
+    setTesting(true);
+    setResult(null);
+
+    try {
+      let testResult: SpeedTestResult = {};
+
+      switch (testType) {
+        case "performance":
+          testResult = await testPerformance(targetUrl);
+          toast.success("Performance test completed");
+          break;
+        case "download":
+          testResult = await testDownloadSpeed(targetUrl);
+          toast.success("Download speed test completed");
+          break;
+        case "upload":
+          testResult = await testUploadSpeed(targetUrl);
+          toast.success("Upload speed test completed");
+          break;
+      }
+
+      setResult(testResult);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(`Test failed: ${error.message}`);
+      } else {
+        toast.error("Test failed");
+      }
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !testing) {
+      startTest();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <div className="border rounded-md p-3 bg-yellow-500/10 border-yellow-500/50">
+        <div className="text-sm font-medium text-yellow-600 dark:text-yellow-400 mb-1">
+          ⚠️ CORS Restrictions
+        </div>
+        <div className="text-xs text-muted-foreground space-y-1">
+          <p>Due to browser CORS security policies, some websites cannot be tested directly.</p>
+          <p>Recommended websites to test:</p>
+          <ul className="list-disc list-inside ml-2">
+            <li>Public APIs with CORS support</li>
+            <li>Your own websites (with configured CORS headers)</li>
+            <li>Using CORS proxy services</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Target URL</label>
+          <Input
+            placeholder="e.g. https://example.com"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            onBlur={handleUrlBlur}
+            onKeyPress={handleKeyPress}
+            disabled={testing}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Test Type</label>
+          <select
+            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+            value={testType}
+            onChange={(e) =>
+              setTestType(e.target.value as "performance" | "download" | "upload")
+            }
+            disabled={testing}
+          >
+            <option value="performance">Page Load Performance</option>
+            <option value="download">Download Speed</option>
+            <option value="upload">Upload Speed</option>
+          </select>
+        </div>
+
+        <Button onClick={startTest} disabled={testing} className="w-full">
+          {testing && <Loader2 className="mr-2 size-4 animate-spin" />}
+          {testing ? "Testing..." : "Start Test"}
+        </Button>
+      </div>
+
+      {result && (
+        <div className="flex flex-col gap-3 flex-1 overflow-auto">
+          <div className="text-sm font-medium">Test Results:</div>
+
+          {result.performance && (
+            <div className="border rounded-md p-3 bg-card text-card-foreground">
+              <div className="text-sm font-medium mb-3">Page Load Performance</div>
+              <div className="space-y-2">
+                {result.performance.dns > 0 && (
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div className="text-muted-foreground">DNS Lookup:</div>
+                    <div>{result.performance.dns.toFixed(2)} ms</div>
+                  </div>
+                )}
+                {result.performance.tcp > 0 && (
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div className="text-muted-foreground">TCP Connection:</div>
+                    <div>{result.performance.tcp.toFixed(2)} ms</div>
+                  </div>
+                )}
+                {result.performance.ssl > 0 && (
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div className="text-muted-foreground">SSL Handshake:</div>
+                    <div>{result.performance.ssl.toFixed(2)} ms</div>
+                  </div>
+                )}
+                {result.performance.ttfb > 0 && (
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div className="text-muted-foreground">Time to First Byte (TTFB):</div>
+                    <div>{result.performance.ttfb.toFixed(2)} ms</div>
+                  </div>
+                )}
+                {result.performance.download > 0 && (
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div className="text-muted-foreground">Content Download:</div>
+                    <div>{result.performance.download.toFixed(2)} ms</div>
+                  </div>
+                )}
+                <div className="grid grid-cols-2 gap-2 text-sm border-t pt-2 mt-2">
+                  <div className="text-muted-foreground font-medium">Total Time:</div>
+                  <div className="font-medium">
+                    {result.performance.total.toFixed(2)} ms
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {result.downloadSpeed !== undefined && (
+            <div className="border rounded-md p-3 bg-card text-card-foreground">
+              <div className="text-sm font-medium mb-3">Download Speed</div>
+              <div className="text-2xl font-bold text-green-500">
+                {result.downloadSpeed.toFixed(2)} Mbps
+              </div>
+              <div className="text-sm text-muted-foreground mt-1">
+                {(result.downloadSpeed / 8).toFixed(2)} MB/s
+              </div>
+            </div>
+          )}
+
+          {result.uploadSpeed !== undefined && (
+            <div className="border rounded-md p-3 bg-card text-card-foreground">
+              <div className="text-sm font-medium mb-3">Upload Speed</div>
+              <div className="text-2xl font-bold text-blue-500">
+                {result.uploadSpeed.toFixed(2)} Mbps
+              </div>
+              <div className="text-sm text-muted-foreground mt-1">
+                {(result.uploadSpeed / 8).toFixed(2)} MB/s
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {testType === "download" && (
+        <div className="text-xs text-muted-foreground">
+          Note: Download speed test will download content from the target URL and calculate speed
+        </div>
+      )}
+
+      {testType === "upload" && (
+        <div className="text-xs text-muted-foreground">
+          Note: Upload speed test will send 1MB of test data to the target URL
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
+
--- a/src/components/tool/network/tcping.tsx
+++ b/src/components/tool/network/tcping.tsx
@@ -0,0 +1,323 @@
+import { useState, useEffect, useRef, type FC } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+interface TCPingResult {
+  seq: number;
+  time: number;
+  success: boolean;
+  error?: string;
+}
+
+interface TCPingStats {
+  sent: number;
+  received: number;
+  lost: number;
+  min: number;
+  max: number;
+  avg: number;
+}
+
+const Tool: FC = () => {
+  const [host, setHost] = useState<string>("");
+  const [port, setPort] = useState<string>("443");
+  const [running, setRunning] = useState<boolean>(false);
+  const [results, setResults] = useState<TCPingResult[]>([]);
+  const [stats, setStats] = useState<TCPingStats>({
+    sent: 0,
+    received: 0,
+    lost: 0,
+    min: 0,
+    max: 0,
+    avg: 0,
+  });
+  const intervalRef = useRef<number | null>(null);
+  const seqRef = useRef<number>(0);
+  const resultsContainerRef = useRef<HTMLDivElement>(null);
+
+  const handleHostBlur = () => {
+    if (!host.trim()) return;
+    
+    let input = host.trim();
+    let cleanHost = input;
+    let extractedPort: string | null = null;
+    
+    try {
+      // Try to parse as URL
+      const url = new URL(input.startsWith('http') ? input : `https://${input}`);
+      cleanHost = url.hostname;
+      
+      // Extract port if specified in URL
+      if (url.port) {
+        extractedPort = url.port;
+      }
+    } catch {
+      // If parsing fails, fallback to manual cleanup
+      const withoutProtocol = input.replace(/^https?:\/\//, "");
+      const withoutPath = withoutProtocol.split("/")[0];
+      
+      // Check for port in the format hostname:port
+      const portMatch = withoutPath.match(/^(.+):(\d+)$/);
+      if (portMatch) {
+        cleanHost = portMatch[1];
+        extractedPort = portMatch[2];
+      } else {
+        cleanHost = withoutPath;
+      }
+    }
+    
+    if (cleanHost !== input) {
+      setHost(cleanHost);
+    }
+    
+    if (extractedPort) {
+      setPort(extractedPort);
+    }
+  };
+
+  const tcping = async () => {
+    if (!host.trim()) {
+      toast.error("Please enter a hostname or IP");
+      return;
+    }
+
+    const seq = ++seqRef.current;
+    const portNum = parseInt(port) || 443;
+    const targetHost = host.trim();
+
+    // Build test URL
+    const protocol = portNum === 443 ? "https" : "http";
+    const url = `${protocol}://${targetHost}:${portNum}`;
+
+    const startTime = performance.now();
+
+    try {
+      // 使用 fetch 测试连接
+      await fetch(url, {
+        method: "HEAD",
+        mode: "no-cors",
+        cache: "no-cache",
+      });
+
+      const endTime = performance.now();
+      const time = endTime - startTime;
+
+      const newResult: TCPingResult = {
+        seq,
+        time,
+        success: true,
+      };
+
+      setResults((prev) => [...prev, newResult]);
+      updateStats(newResult);
+    } catch (error: unknown) {
+      const endTime = performance.now();
+      const time = endTime - startTime;
+
+      const errorMessage =
+        error instanceof Error ? error.message : "Connection failed";
+
+      const newResult: TCPingResult = {
+        seq,
+        time,
+        success: false,
+        error: errorMessage,
+      };
+
+      setResults((prev) => [...prev, newResult]);
+      updateStats(newResult);
+    }
+  };
+
+  const updateStats = (newResult: TCPingResult) => {
+    setStats((prev) => {
+      const sent = prev.sent + 1;
+      const received = newResult.success ? prev.received + 1 : prev.received;
+      const lost = sent - received;
+
+      let min = prev.min;
+      let max = prev.max;
+      let avg = prev.avg;
+
+      if (newResult.success) {
+        if (received === 1) {
+          min = newResult.time;
+          max = newResult.time;
+          avg = newResult.time;
+        } else {
+          min = Math.min(min, newResult.time);
+          max = Math.max(max, newResult.time);
+          avg = (prev.avg * (received - 1) + newResult.time) / received;
+        }
+      }
+
+      return { sent, received, lost, min, max, avg };
+    });
+  };
+
+  const startTCPing = () => {
+    if (!host.trim()) {
+      toast.error("Please enter a hostname or IP");
+      return;
+    }
+
+    setRunning(true);
+    setResults([]);
+    setStats({
+      sent: 0,
+      received: 0,
+      lost: 0,
+      min: 0,
+      max: 0,
+      avg: 0,
+    });
+    seqRef.current = 0;
+
+    // 立即执行第一次 tcping
+    tcping();
+
+    // 然后每秒执行一次
+    intervalRef.current = window.setInterval(tcping, 1000);
+  };
+
+  const stopTCPing = () => {
+    setRunning(false);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    // 自动滚动到底部
+    if (resultsContainerRef.current) {
+      resultsContainerRef.current.scrollTop =
+        resultsContainerRef.current.scrollHeight;
+    }
+  }, [results]);
+
+  useEffect(() => {
+    // 清理定时器
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  const lossRate =
+    stats.sent > 0 ? ((stats.lost / stats.sent) * 100).toFixed(1) : "0.0";
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Hostname or IP</label>
+          <Input
+            placeholder="e.g. example.com or 192.168.1.1"
+            value={host}
+            onChange={(e) => setHost(e.target.value)}
+            onBlur={handleHostBlur}
+            disabled={running}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Port</label>
+          <Input
+            type="number"
+            placeholder="e.g. 443"
+            value={port}
+            onChange={(e) => setPort(e.target.value)}
+            disabled={running}
+            min="1"
+            max="65535"
+          />
+        </div>
+
+        <div className="flex gap-2">
+          {!running ? (
+            <Button onClick={startTCPing} className="flex-1">
+              Start Test
+            </Button>
+          ) : (
+            <Button
+              onClick={stopTCPing}
+              variant="destructive"
+              className="flex-1"
+            >
+              Stop
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {stats.sent > 0 && (
+        <div className="border rounded-md p-3 bg-card text-card-foreground">
+          <div className="text-sm font-medium mb-2">Statistics</div>
+          <div className="grid grid-cols-2 gap-2 text-sm">
+            <div className="text-muted-foreground">Sent:</div>
+            <div>{stats.sent} times</div>
+            <div className="text-muted-foreground">Success:</div>
+            <div>{stats.received} times</div>
+            <div className="text-muted-foreground">Failed:</div>
+            <div>
+              {stats.lost} times ({lossRate}%)
+            </div>
+            {stats.received > 0 && (
+              <>
+                <div className="text-muted-foreground">Min Latency:</div>
+                <div>{stats.min.toFixed(2)} ms</div>
+                <div className="text-muted-foreground">Max Latency:</div>
+                <div>{stats.max.toFixed(2)} ms</div>
+                <div className="text-muted-foreground">Avg Latency:</div>
+                <div>{stats.avg.toFixed(2)} ms</div>
+                <div className="text-muted-foreground">Port Status:</div>
+                <div className="text-green-500 font-medium">Open</div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {results.length > 0 && (
+        <div className="flex flex-col gap-2 flex-1 overflow-hidden">
+          <div className="text-sm font-medium">TCPing Results:</div>
+          <div
+            ref={resultsContainerRef}
+            className="flex-1 overflow-auto space-y-1 font-mono text-sm border rounded-md p-3 bg-card"
+          >
+            {results.map((result) => (
+              <div
+                key={result.seq}
+                className={result.success ? "text-green-500" : "text-red-500"}
+              >
+                {result.success ? (
+                  <>
+                    seq={result.seq} port={port} time={result.time.toFixed(2)}ms
+                  </>
+                ) : (
+                  <>
+                    seq={result.seq} port={port} Connection failed
+                    {result.error && ` (${result.error})`}
+                  </>
+                )}
+              </div>
+            ))}
+            {running && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="size-3 animate-spin" />
+                Running...
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
+
--- a/src/components/tool/uuid.tsx
+++ b/src/components/tool/uuid.tsx
@@ -0,0 +1,96 @@
+import { type FC, useState } from "react";
+import { RefreshCw, Copy } from "lucide-react";
+import * as uuid from 'uuid'
+import { nanoid } from 'nanoid'
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+interface IDGeneratorProps {
+  label: string;
+  value: string;
+  onRegenerate: () => void;
+}
+
+const IDGenerator: FC<IDGeneratorProps> = ({ label, value, onRegenerate }) => {
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast(`${label} has been copied to clipboard`);
+    } catch (err) {
+      toast.error("Copy failed");
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="font-medium">{label}</label>
+      <div className="flex items-center gap-2">
+        <span className="flex-1 px-3 py-2 bg-muted rounded-md font-mono text-sm break-all max-w-[400px]">
+          {value}
+        </span>
+        <Button
+          size="icon"
+          variant="outline"
+          onClick={onRegenerate}
+          title="Regenerate"
+        >
+          <RefreshCw className="h-4 w-4" />
+        </Button>
+        <Button
+          size="icon"
+          variant="outline"
+          onClick={copyToClipboard}
+          title="Copy"
+        >
+          <Copy className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const Tool: FC = () => {
+  const [uuidV1, setUuidV1] = useState(() => uuid.v1());
+  const [uuidV4, setUuidV4] = useState(() => uuid.v4());
+  const [uuidV6, setUuidV6] = useState(() => uuid.v6());
+  const [uuidV7, setUuidV7] = useState(() => uuid.v7());
+  const [nanoId, setNanoId] = useState(() => nanoid());
+
+  return (
+    <div className="flex flex-col gap-4">
+      <span className="text-sm text-muted-foreground">Click the refresh button to regenerate the corresponding ID</span>
+      
+      <IDGenerator 
+        label="UUID Version 1" 
+        value={uuidV1} 
+        onRegenerate={() => setUuidV1(uuid.v1())} 
+      />
+      
+      <IDGenerator 
+        label="UUID Version 4" 
+        value={uuidV4} 
+        onRegenerate={() => setUuidV4(uuid.v4())} 
+      />
+      
+      <IDGenerator 
+        label="UUID Version 6" 
+        value={uuidV6} 
+        onRegenerate={() => setUuidV6(uuid.v6())} 
+      />
+      
+      <IDGenerator 
+        label="UUID Version 7" 
+        value={uuidV7} 
+        onRegenerate={() => setUuidV7(uuid.v7())} 
+      />
+      
+      <IDGenerator 
+        label="Nano ID" 
+        value={nanoId} 
+        onRegenerate={() => setNanoId(nanoid())} 
+      />
+    </div>
+  );
+};
+
+export default Tool;
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+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",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={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",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]: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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="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"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={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 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 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",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={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 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/src/hooks/use-mobile.ts
+++ b/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
--- a/src/hooks/use-seo.ts
+++ b/src/hooks/use-seo.ts
@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+interface UseSEOOptions {
+  title?: string;
+  description?: string;
+  baseUrl?: string;
+}
+
+/**
+ * SEO Hook - 动态更新页面 SEO 元数据
+ * 
+ * @param options - SEO 配置选项
+ * @param options.title - 页面标题（可选）
+ * @param options.description - 页面描述（可选）
+ * @param options.baseUrl - 网站基础 URL，默认为 https://litek.typist.cc
+ * 
+ * @example
+ * ```tsx
+ * // 在组件中使用
+ * useSEO({
+ *   title: 'UUID Generator',
+ *   description: 'Free online UUID generator tool'
+ * });
+ * ```
+ */
+export const useSEO = (options: UseSEOOptions = {}) => {
+  const location = useLocation();
+  const { 
+    title, 
+    description, 
+    baseUrl = 'https://litek.typist.cc' 
+  } = options;
+
+  useEffect(() => {
+    // 构建当前页面的完整 URL
+    const canonicalUrl = `${baseUrl}${location.pathname}`;
+    
+    // 更新或创建 canonical 链接
+    let canonical = document.querySelector('link[rel="canonical"]') as HTMLLinkElement;
+    if (!canonical) {
+      canonical = document.createElement('link');
+      canonical.setAttribute('rel', 'canonical');
+      document.head.appendChild(canonical);
+    }
+    canonical.setAttribute('href', canonicalUrl);
+
+    // 更新页面标题
+    if (title) {
+      document.title = `${title} - Lite Kit`;
+    }
+
+    // 更新 meta description
+    if (description) {
+      let metaDescription = document.querySelector('meta[name="description"]') as HTMLMetaElement;
+      if (metaDescription) {
+        metaDescription.setAttribute('content', description);
+      }
+    }
+
+    // 更新 Open Graph URL
+    let ogUrl = document.querySelector('meta[property="og:url"]') as HTMLMetaElement;
+    if (ogUrl) {
+      ogUrl.setAttribute('content', canonicalUrl);
+    }
+
+    // 更新 Open Graph Title
+    if (title) {
+      let ogTitle = document.querySelector('meta[property="og:title"]') as HTMLMetaElement;
+      if (ogTitle) {
+        ogTitle.setAttribute('content', `${title} - Lite Kit`);
+      }
+
+      // 更新 Twitter Card Title
+      let twitterTitle = document.querySelector('meta[name="twitter:title"]') as HTMLMetaElement;
+      if (twitterTitle) {
+        twitterTitle.setAttribute('content', `${title} - Lite Kit`);
+      }
+    }
+
+    // 更新 Open Graph Description
+    if (description) {
+      let ogDescription = document.querySelector('meta[property="og:description"]') as HTMLMetaElement;
+      if (ogDescription) {
+        ogDescription.setAttribute('content', description);
+      }
+
+      // 更新 Twitter Card Description
+      let twitterDescription = document.querySelector('meta[name="twitter:description"]') as HTMLMetaElement;
+      if (twitterDescription) {
+        twitterDescription.setAttribute('content', description);
+      }
+    }
+  }, [location.pathname, title, description, baseUrl]);
+};
+
--- a/src/index.css
+++ b/src/index.css
@@ -42,72 +42,72 @@
 }

 :root {
-  --radius: 0.625rem;
+  --radius: 0.65rem;
  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.646 0.222 41.116);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.75 0.183 55.934);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.75 0.183 55.934);
 }

 .dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.705 0.213 47.604);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --ring: oklch(0.408 0.123 38.172);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.705 0.213 47.604);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: oklch(0.408 0.123 38.172);
 }

@layer base {
@@ -116,5 +116,53 @@
  }
  body {
    @apply bg-background text-foreground;
+    font-family: 'Roboto Mono', 'Noto Sans SC', 'SF Mono', Consolas, monospace;
  }
 }
+
+/* 自定义滚动条样式 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.551 0.027 264.364 / 0.3) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: oklch(0.551 0.027 264.364 / 0.3);
+  border-radius: 4px;
+  transition: background 0.2s ease;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.551 0.027 264.364 / 0.5);
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background: oklch(0.551 0.027 264.364 / 0.6);
+}
+
+/* 深色模式下的滚动条 */
+.dark *::-webkit-scrollbar-thumb {
+  background: oklch(0.707 0.022 261.325 / 0.4);
+}
+
+.dark *::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.707 0.022 261.325 / 0.6);
+}
+
+.dark *::-webkit-scrollbar-thumb:active {
+  background: oklch(0.707 0.022 261.325 / 0.7);
+}
+
+.dark * {
+  scrollbar-color: oklch(0.707 0.022 261.325 / 0.4) transparent;
+}
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -0,0 +1,31 @@
+import type { FC } from "react"
+import { Outlet } from "react-router-dom";
+
+import { ThemeProvider } from "@/components/theme/provider"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/sidebar";
+import { ModeToggle } from "@/components/theme/toggle";
+
+import { useSEO } from "@/hooks/use-seo";
+
+export const Layout: FC = () => {
+  // 使用 SEO hook 自动更新 canonical URL 和其他 SEO 元数据
+  useSEO();
+
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <SidebarProvider>
+        <AppSidebar />
+        <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
+          <nav className="flex items-center justify-between">
+            <SidebarTrigger className="size-10" />
+            <ModeToggle />
+          </nav>
+          <main className="flex-1 overflow-auto p-4 overflow-hidden">
+            <Outlet />
+          </main>
+        </div>
+      </SidebarProvider>
+    </ThemeProvider>
+  );
+};
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,54 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+
+import { Toaster } from '@/components/ui/sonner'
+import { toast } from 'sonner'
+
 import './index.css'
+import { AppRouter } from './router'

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
-    {null}
+    <AppRouter />
+    <Toaster />
  </StrictMode>
 )
+
+// 注册 Service Worker
+if ('serviceWorker' in navigator && import.meta.env.PROD) {
+  import('workbox-window').then(({ Workbox }) => {
+    const wb = new Workbox('/sw.js')
+    
+    // 检测到新版本时，在后台下载完成后显示通知
+    wb.addEventListener('waiting', () => {
+      // 显示更新通知，右上角弹窗
+      toast.info('found new version', {
+        description: 'new content available, click update to get the latest version',
+        duration: Infinity, // 持续显示，直到用户操作
+        action: {
+          label: 'update now',
+          onClick: () => {
+            // 用户点击更新按钮
+            wb.messageSkipWaiting()
+          }
+        },
+        cancel: {
+          label: 'later',
+          onClick: () => {
+            // 用户选择稍后更新，关闭通知
+            // 新版本会在下次手动刷新时自动激活
+          }
+        }
+      })
+    })
+
+    // 当新的 Service Worker 接管页面时，刷新页面
+    wb.addEventListener('controlling', () => {
+      window.location.reload()
+    })
+
+    wb.register()
+  }).catch((error) => {
+    console.error('Failed to register service worker:', error)
+  })
+}
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -0,0 +1,77 @@
+import { Suspense, createElement } from "react";
+import {
+  createBrowserRouter,
+  redirect,
+  RouterProvider,
+  type RouteObject,
+} from "react-router-dom";
+
+import { tools, type Tool } from "@/components/tool";
+import { Layout } from "./layout";
+
+// 加载中的占位组件
+const LoadingFallback = () => (
+  <div className="flex items-center justify-center h-full">
+    <div className="text-center flex flex-col items-center gap-3">
+      <div className="relative">
+        <div className="h-12 w-12 rounded-full border-4 border-muted"></div>
+        <div className="absolute top-0 left-0 h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+      </div>
+      <p className="text-sm text-muted-foreground font-medium">Loading...</p>
+    </div>
+  </div>
+);
+
+const buildToolRoutes = (tools: Tool[]): RouteObject[] => {
+  return tools.map((tool) => {
+    const route: RouteObject = {
+      path: tool.path,
+    };
+
+    if (tool.component) {
+      // 使用 Suspense 包裹懒加载组件
+      route.element = (
+        <Suspense fallback={<LoadingFallback />}>
+          {createElement(tool.component)}
+        </Suspense>
+      );
+    }
+
+    if (tool.children && tool.children.length > 0) {
+      route.children = buildToolRoutes(tool.children);
+    }
+
+    return route;
+  });
+};
+
+// 路由配置
+const router = createBrowserRouter([
+  {
+    path: "",
+    element: <Layout />,
+    children: [
+      {
+        path: "tool",
+        children: [
+          ...buildToolRoutes(tools),
+          {
+            index: true,
+            loader: () => redirect("/tool/uuid"),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    index: true,
+    loader: () => redirect("/tool"),
+  },
+  {
+    path: "*",
+    loader: () => redirect("/tool"),
+  },
+]);
+
+// 路由提供者组件
+export const AppRouter = () => <RouterProvider router={router} />;
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,13 +2,157 @@ import path from "path"
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from "@tailwindcss/vite"
+import { VitePWA } from 'vite-plugin-pwa'

 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react(), 
+    tailwindcss(),
+    // HTML 替换插件 - 仅在生产环境注入 Cloudflare Analytics
+    {
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        const cloudflareScript = mode === 'production' 
+          ? `<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>`
+          : '';
+        return html.replace('<!--CLOUDFLARE_ANALYTICS_PLACEHOLDER-->', cloudflareScript);
+      }
+    },
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['lite.svg', 'robots.txt', 'sitemap.xml'],
+      manifest: {
+        name: 'Lite Kit - Lightweight Online Tools',
+        short_name: 'Lite Kit',
+        description: 'Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more',
+        theme_color: '#000000',
+        background_color: '#000000',
+        display: 'standalone',
+        icons: [
+          {
+            src: '/lite.svg',
+            type: 'image/svg+xml',
+            sizes: 'any'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/ipinfo\.io\/.*/i,
+            handler: "NetworkFirst",
+            options: {
+              cacheName: 'ipinfo-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 // 延长到 1 小时
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            // Frankfurter API 汇率缓存
+            urlPattern: /^https:\/\/api\.frankfurter\.app\/.*/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'currency-rates-cache',
+              expiration: {
+                maxEntries: 5,
+                maxAgeSeconds: 60 * 60 * 12 // 12 小时
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            // Google Fonts 样式表缓存
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'google-fonts-stylesheets',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            // Google Fonts 字体文件缓存
+            urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-webfonts',
+              expiration: {
+                maxEntries: 30,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ],
+        cleanupOutdatedCaches: true,
+        clientsClaim: true,   // 新 SW 激活后立即接管
+        skipWaiting: false    // 不自动跳过等待，需要手动触发
+      }
+    })
+  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
-})
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          // React 核心拆分得更细
+          if (id.includes('node_modules/react/') && !id.includes('node_modules/react-dom')) {
+            return 'react-core';
+          }
+          if (id.includes('node_modules/react-dom/')) {
+            return 'react-dom';
+          }
+          if (id.includes('node_modules/react-router-dom')) {
+            return 'react-router';
+          }
+          // Radix UI组件
+          if (id.includes('node_modules/@radix-ui')) {
+            return 'ui-vendor';
+          }
+          // 图标库
+          if (id.includes('node_modules/lucide-react')) {
+            return 'icons';
+          }
+          // 其他工具库
+          if (id.includes('node_modules/')) {
+            return 'vendor';
+          }
+        },
+      },
+    },
+    // 启用更激进的压缩
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+        pure_funcs: ['console.log'],
+        // 移除未使用的代码
+        unused: true,
+        // 移除死代码
+        dead_code: true,
+      },
+    },
+    chunkSizeWarningLimit: 500,
+  },
+}))
Author	SHA1	Message	Date
typist	ea62204d8e	0.0.34 All checks were successful Build and Push Docker Image / build (push) Successful in 1m20s Details	2025-10-30 20:26:38 +08:00
typist	3bafcbafed	refactor: remove globals.css and update color variables in index.css - Deleted the globals.css file to streamline styles. - Updated color variables in index.css for improved consistency and design coherence across the application.	2025-10-30 20:26:21 +08:00
typist	1a00f27c6a	0.0.33 All checks were successful Build and Push Docker Image / build (push) Successful in 1m37s Details	2025-10-30 09:49:41 +08:00
typist	1bcbd3e37d	feat: implement caching for Frankfurter API exchange rates - Added a caching strategy for the Frankfurter API using Service Worker with StaleWhileRevalidate. - Removed the local storage caching logic from the currency tool to streamline data fetching. - Updated the currency tool to rely on the Service Worker for managing exchange rate data.	2025-10-30 09:49:30 +08:00
typist	e88770dd3f	fix: remove unused date property from cached rates in currency tool - Updated the currency tool to eliminate the unused 'date' property from the cached rates object, streamlining the data structure.	2025-10-30 09:45:15 +08:00
typist	5cef15c032	0.0.32 Some checks failed Build and Push Docker Image / build (push) Failing after 1m12s Details	2025-10-30 09:44:05 +08:00
typist	970d1ac3ed	feat: conditionally inject Cloudflare Analytics script - Updated index.html to include a placeholder for Cloudflare Web Analytics, which is now only injected in production mode. - Modified vite.config.ts to implement an HTML transform plugin that dynamically adds the Cloudflare script based on the environment.	2025-10-30 09:43:50 +08:00
typist	0d6334592d	0.0.31 Some checks failed Build and Push Docker Image / build (push) Failing after 1m26s Details	2025-10-30 09:39:49 +08:00
typist	c501bb7dd4	feat: enhance currency caching strategy - Updated the currency tool to include a timestamp for cached data. - Implemented a 12-hour validity check for cached exchange rates to improve data accuracy and user experience. - Ensured that outdated cache is still displayed while fetching new data in the background.	2025-10-30 09:39:34 +08:00
typist	d24389af66	0.0.30 All checks were successful Build and Push Docker Image / build (push) Successful in 1m14s Details	2025-10-30 09:23:32 +08:00
typist	97f38b44f5	feat: add-tool `currency` (#12 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #12	2025-10-30 09:22:29 +08:00
typist	62350492e9	0.0.29 All checks were successful Build and Push Docker Image / build (push) Successful in 1m15s Details	2025-10-29 21:47:03 +08:00
typist	9540c2b550	feat: improve service worker update notifications - Added toast notifications for users when a new service worker version is available. - Updated service worker configuration to require manual activation for updates. - Enhanced user experience by allowing users to choose when to update the application.	2025-10-29 21:46:54 +08:00
typist	006f3d4dbb	0.0.28 All checks were successful Build and Push Docker Image / build (push) Successful in 1m26s Details	2025-10-29 21:37:14 +08:00
typist	ff8d497f97	refactor: simplify SidebarFooter component - Removed the 'need more tools?' link from the SidebarFooter. - Updated the layout of SidebarFooter to use a flex column for better alignment.	2025-10-29 21:36:44 +08:00
typist	9c2799f7d5	0.0.27 All checks were successful Build and Push Docker Image / build (push) Successful in 1m14s Details	2025-10-29 14:49:15 +08:00
typist	dd70f9d886	feat: enhance caching strategies for Google Fonts - Added caching configurations for Google Fonts stylesheets and webfonts. - Implemented 'StaleWhileRevalidate' for stylesheets and 'CacheFirst' for font files to optimize loading and improve performance.	2025-10-29 14:49:06 +08:00
typist	35cccf6a8f	0.0.26 All checks were successful Build and Push Docker Image / build (push) Successful in 1m29s Details	2025-10-29 14:45:03 +08:00
typist	c5616600fa	Merge pull request 'feat: add Google Fonts for improved typography' (#11 ) from feat/update-fonts into main Reviewed-on: #11	2025-10-29 14:43:59 +08:00
typist	986708fbb4	feat: add Google Fonts for improved typography - Included preconnect links for Google Fonts to optimize loading. - Added 'Roboto Mono' and 'Noto Sans SC' font families to enhance text presentation in the application.	2025-10-29 14:44:30 +08:00
typist	6a1b68ed2c	0.0.25 All checks were successful Build and Push Docker Image / build (push) Successful in 1m32s Details	2025-10-29 10:05:58 +08:00
typist	32970acf32	chore: support Cloudflare Web Analytics	2025-10-29 10:05:43 +08:00
typist	812bb8c248	0.0.24 All checks were successful Build and Push Docker Image / build (push) Successful in 1m21s Details	2025-10-29 09:35:10 +08:00
typist	09f9e6588f	fix: update caching strategy for ipinfo API in Vite config - Changed caching handler from 'CacheFirst' to 'NetworkFirst' to prioritize network responses. - This adjustment aims to improve data freshness while still utilizing caching effectively.	2025-10-29 09:34:59 +08:00
typist	10a167febd	chore: remove SEO-README.md as part of project restructuring - Deleted the SEO-README.md file which contained outdated SEO optimization details and instructions. - This change is part of a broader effort to streamline project documentation and improve clarity.	2025-10-29 09:27:54 +08:00
typist	91c0686a46	0.0.23 All checks were successful Build and Push Docker Image / build (push) Successful in 1m11s Details	2025-10-29 09:24:17 +08:00
typist	40bfde8e57	feat: implement ID generator component for UUIDs and Nano ID - Added IDGenerator component to handle the display and regeneration of UUIDs and Nano ID. - Integrated clipboard functionality to copy generated IDs with user feedback via toast notifications. - Refactored the Tool component to utilize the new IDGenerator for improved user interaction and code organization.	2025-10-29 09:24:01 +08:00
typist	b4ba7a2219	0.0.22 All checks were successful Build and Push Docker Image / build (push) Successful in 1m52s Details	2025-10-29 09:11:11 +08:00
typist	25e42e3af5	fix: update caching strategy for ipinfo API in Vite config - Changed caching handler from 'NetworkFirst' to 'CacheFirst' for improved performance. - Extended cache expiration time from 5 minutes to 1 hour to enhance data availability.	2025-10-29 09:10:59 +08:00
typist	4398b53ea7	0.0.21 All checks were successful Build and Push Docker Image / build (push) Successful in 1m14s Details	2025-10-29 09:07:27 +08:00
typist	3e14bc652f	feat: add terser for advanced minification and improve React chunking - Added terser as a dependency for enhanced code minification. - Updated Vite configuration to enable aggressive minification using terser with options to drop console logs and unused code. - Refined manual chunking for React libraries to improve code splitting and loading efficiency.	2025-10-29 09:06:56 +08:00
typist	aca7e11835	0.0.20 All checks were successful Build and Push Docker Image / build (push) Successful in 1m10s Details	2025-10-29 08:58:11 +08:00
typist	782de6e38a	feat: integrate PWA support and service worker registration - Added vite-plugin-pwa for Progressive Web App capabilities. - Configured service worker with caching strategies for improved offline support. - Registered service worker in main.tsx to handle updates and caching. - Updated package.json to include new dependencies for PWA functionality.	2025-10-29 08:58:02 +08:00
typist	7646830194	0.0.19 All checks were successful Build and Push Docker Image / build (push) Successful in 1m6s Details	2025-10-29 08:50:18 +08:00
typist	59f998e8e3	feat: enhance tool loading and performance optimization - Added DNS prefetch and preconnect links in index.html for improved API loading times. - Implemented lazy loading for tool components to optimize performance and reduce initial load time. - Wrapped tool components in Suspense with a loading fallback to enhance user experience during loading. - Refactored Vite configuration to create manual chunks for better code splitting of React and UI libraries.	2025-10-29 08:49:25 +08:00
typist	55207beff5	0.0.18 All checks were successful Build and Push Docker Image / build (push) Successful in 1m39s Details	2025-10-29 08:33:42 +08:00
typist	e98a344b95	feat: enhance sidebar component with recursive submenu rendering - Implemented recursive rendering of submenu items in the sidebar for better navigation. - Added support for collapsible submenus, improving user experience with nested tools. - Refactored menu item rendering logic to utilize a new renderSubMenuContent function for cleaner code.	2025-10-29 08:33:22 +08:00
typist	d553c3e04c	0.0.17 All checks were successful Build and Push Docker Image / build (push) Successful in 1m1s Details	2025-10-29 08:27:15 +08:00
typist	e2da2758cc	chore: simplify build script in package.json - Removed sitemap generation step from the build script for a more streamlined build process.	2025-10-29 08:27:00 +08:00
typist	3ab70498e6	feat: add ModeToggle component to layout and sidebar - Integrated ModeToggle component into the layout for theme switching. - Replaced the existing button in the sidebar footer with SidebarMenuButton for improved styling and functionality.	2025-10-29 08:26:26 +08:00
typist	a5ef1a1e70	0.0.16 All checks were successful Build and Push Docker Image / build (push) Successful in 1m7s Details	2025-10-29 08:16:17 +08:00
typist	297000f208	feat: integrate SEO hook for dynamic metadata management - Removed hardcoded canonical link from index.html. - Implemented useSEO hook in layout.tsx to dynamically update SEO metadata including title, description, and canonical URL based on the current route. - Added new use-seo.ts file containing the SEO hook logic for improved search engine optimization.	2025-10-29 08:15:53 +08:00
typist	04fbf12e07	0.0.15 All checks were successful Build and Push Docker Image / build (push) Successful in 1m6s Details	2025-10-29 08:06:21 +08:00
typist	a9a6354b2d	Merge pull request 'feat: implement SEO enhancements and sitemap generation' (#10 ) from feat/seo into main Reviewed-on: #10	2025-10-29 08:05:18 +08:00
typist	109139a42e	feat: implement SEO enhancements and sitemap generation - Added comprehensive SEO meta tags in index.html for improved search engine visibility, including Open Graph and Twitter Card tags. - Created a sitemap.xml for better indexing of site tools, generated automatically via a new script (generate-sitemap.ts). - Introduced robots.txt to manage crawler access and specified sitemap location. - Updated package.json to include a build step for sitemap generation and added tsx as a dependency. - Documented SEO optimizations and usage instructions in a new SEO-README.md file.	2025-10-29 08:05:37 +08:00
typist	b5a811e5ee	0.0.14 All checks were successful Build and Push Docker Image / build (push) Successful in 1m0s Details	2025-10-29 07:28:46 +08:00
typist	b3adfe5c8f	refactor: update IP query API and response handling - Switched from ip-api.com to ipinfo.io for IP information retrieval, ensuring more reliable service. - Simplified response handling by directly using the data returned from ipinfo.io, eliminating unnecessary data transformation. - Adjusted risk level determination logic to utilize the 'org' field for identifying potential hosting or datacenter IPs.	2025-10-29 07:28:21 +08:00
typist	8eda2eae99	0.0.13 All checks were successful Build and Push Docker Image / build (push) Successful in 1m1s Details	2025-10-29 07:18:09 +08:00
typist	99673913a6	chore: comment out cache settings in build workflow - Temporarily disabled cache-from and cache-to settings in the build workflow to prevent potential issues with the build process. - Retained platform specification for compatibility.	2025-10-29 07:18:02 +08:00
typist	83e48e3485	0.0.12 All checks were successful Build and Push Docker Image / build (push) Successful in 1m40s Details	2025-10-29 07:10:25 +08:00
typist	8607591871	feat: enhance SVG for dark mode support - Added CSS styles to the SVG for dark mode compatibility, allowing the icon to switch colors based on the user's color scheme preference. - Cleaned up the SVG structure for better readability and maintainability.	2025-10-29 07:10:15 +08:00
typist	24c154a759	0.0.11 All checks were successful Build and Push Docker Image / build (push) Successful in 1m15s Details	2025-10-29 06:36:32 +08:00
typist	edf87370d9	feat: add IP Query tool - Introduced a new tool for querying IP information, including location and risk assessment. - Updated the tool index to include the new IP Query component and its corresponding icon. - Added IPQuery component with functionality to validate and fetch IP data from external APIs.	2025-10-29 06:36:20 +08:00
typist	ae0f9447ea	0.0.10 All checks were successful Build and Push Docker Image / build (push) Successful in 1m30s Details	2025-10-29 06:09:10 +08:00
typist	972b6c7f22	feat: enhance input handling for network tools - Added domain and URL normalization on blur for DNS, Ping, Speedtest, and TCPing components. - Improved user experience by ensuring valid input formats and extracting ports where applicable.	2025-10-29 06:08:47 +08:00
typist	be56d896ca	0.0.9 All checks were successful Build and Push Docker Image / build (push) Successful in 1m14s Details	2025-10-29 05:52:31 +08:00
typist	3b31ce9ddf	feat: add-tool `network` (#9 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #9	2025-10-29 05:51:11 +08:00
typist	b97c746d36	0.0.8 All checks were successful Build and Push Docker Image / build (push) Successful in 1m49s Details	2025-10-28 22:29:24 +08:00
typist	9793d96def	feat: support dark-theme (#8 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #8	2025-10-28 22:28:19 +08:00
typist	a6d9c23179	feat: add deployment workflow and trigger in build.yaml - Introduced a new deploy.yaml workflow for production deployment. - Updated build.yaml to trigger the deployment workflow after building the Docker image.	2025-10-28 22:06:13 +08:00
typist	28a86dcbff	0.0.7 All checks were successful Build and Push Docker Image / build (push) Successful in 1m24s Details	2025-10-28 04:40:54 +08:00
typist	7cd826b052	feat: add-tool `base64` (#7 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #7	2025-10-28 04:39:39 +08:00
typist	da20e34dc9	0.0.6 All checks were successful Build and Push Docker Image / build (push) Successful in 30s Details	2025-10-28 04:20:13 +08:00
typist	a43b5a96bb	chore: add release scripts for versioning in package.json	2025-10-28 04:20:11 +08:00
typist	48aaa262c1	chore: optimize pnpm install with build cache in Dockerfile	2025-10-28 04:17:10 +08:00
typist	660839d854	Merge pull request 'chore: update build cache configuration in build.yaml to use registry' (#6 ) from chore/update-builder-cache into main All checks were successful Build and Push Docker Image / build (push) Successful in 1m6s Details Reviewed-on: #6	2025-10-28 04:10:02 +08:00
typist	6d23d601a8	chore: bump version to 0.0.5 in package.json	2025-10-28 04:10:33 +08:00
typist	7405f2cb88	chore: update build cache configuration in build.yaml to use registry All checks were successful Build and Push Docker Image / build (push) Successful in 29s Details	2025-10-28 04:05:02 +08:00
typist	d415615ad7	refactor: remove unused Alert component import from json.tsx All checks were successful Build and Push Docker Image / build (push) Successful in 1m56s Details	2025-10-28 03:54:07 +08:00
typist	6cd05ca4b4	chore: bump version to 0.0.3 in package.json Some checks failed Build and Push Docker Image / build (push) Failing after 1m2s Details	2025-10-28 03:49:46 +08:00
typist	97b2093b86	feat: add tool json (#5 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #5	2025-10-28 03:48:37 +08:00
typist	c0aa618dfa	refactor: consolidate Tool interface and UUID component - Moved Tool interface definition from type.ts to index.tsx for better organization. - Renamed UUID component to Tool in uuid.tsx and updated its export. - Removed the now redundant type.ts file.	2025-10-28 03:27:10 +08:00
typist	16aa543431	chore: bump version to 0.0.2 in package.json All checks were successful Build and Push Docker Image / build (push) Successful in 1m45s Details	2025-10-28 00:57:00 +08:00
typist	24594deecc	feat: update-layout & add uuid tool (#4 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #4	2025-10-28 00:55:42 +08:00
typist	0c54293312	feat: add basic layout (#3 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #3	2025-10-27 23:48:33 +08:00
typist	f4383d195f	refactor: rename build.yaml to build.yaml	2025-10-27 22:52:20 +08:00
typist	10bc8fe7cb	feat: add Docker support with multi-stage build and CI/CD workflow All checks were successful Build and Push Docker Image / build (push) Successful in 1m42s Details - Introduced Dockerfile for multi-stage build process using Node.js and Nginx. - Added .dockerignore to exclude unnecessary files from Docker context. - Created nginx.conf for server configuration, including gzip compression and SPA routing. - Implemented Gitea CI/CD workflow for building and pushing Docker images on version tags.	2025-10-27 22:32:54 +08:00