frontend: rebuild bookmark page with drag-and-drop, search, and theme system

- bookmark management with dnd-kit reordering, bulk edit, search,
  category filter/rename, and meta auto-fetch
- migrate /bookmarks → /dashboard/bookmarks under (main) layout
- homepage redesign with category grid, /-key search, dock tooltips
- theme toggle + use-theme, sonner toasts, alert-dialog/skeleton,
  visual refresh of auth pages

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/app/home-dock.tsx

@@ -1,8 +1,33 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
 import { Dock, DockIcon } from "@/components/ui/dock";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { signOut } from "next-auth/react";
-import { Home, User, LogOut, Download, BookOpen, LayoutDashboard, Bookmark } from "lucide-react";
+import {
+  Home,
+  LogIn,
+  LogOut,
+  Download,
+  BookOpen,
+  LayoutDashboard,
+  Bookmark,
+} from "lucide-react";
+
+function useIsTouch() {
+  const [touch, setTouch] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(hover: none) and (pointer: coarse)");
+    const update = () => setTouch(mq.matches);
+    update();
+    mq.addEventListener?.("change", update);
+    return () => mq.removeEventListener?.("change", update);
+  }, []);
+  return touch;
+}
 
 export function HomeDock({
   isAuthenticated,
@@ -13,71 +38,168 @@ export function HomeDock({
   isAdmin: boolean;
   onLoginClick?: () => void;
 }) {
+  const isTouch = useIsTouch();
+  const pathname = usePathname() || "/";
+  const isActive = (path: string) =>
+    path === "/" ? pathname === "/" : pathname.startsWith(path);
+
   return (
-    <div className="fixed bottom-8 left-1/2 -translate-x-1/2">
-      <Dock>
+    <div
+      className="fixed left-1/2 z-40 -translate-x-1/2"
+      style={{ bottom: "max(1.25rem, env(safe-area-inset-bottom))" }}
+    >
+      <Dock disableMagnification={isTouch}>
         <DockIcon>
-          <a href="/" aria-label="首页">
-            <Home className="h-5 w-5 text-slate-700" />
-          </a>
+          <NavLink href="/" label="首页" active={isActive("/")}>
+            <Home className="h-5 w-5" />
+          </NavLink>
         </DockIcon>
         <DockIcon>
-          <a
-            href="https://file.liukersun.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="下载网站"
-          >
-            <Download className="h-5 w-5 text-slate-700" />
-          </a>
+          <ExternalNavLink href="https://file.liukersun.com" label="下载网站">
+            <Download className="h-5 w-5" />
+          </ExternalNavLink>
         </DockIcon>
         <DockIcon>
-          <a
-            href="https://blog.liukersun.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="博客"
-          >
-            <BookOpen className="h-5 w-5 text-slate-700" />
-          </a>
+          <ExternalNavLink href="https://blog.liukersun.com" label="博客">
+            <BookOpen className="h-5 w-5" />
+          </ExternalNavLink>
         </DockIcon>
         {isAuthenticated && (
           <DockIcon>
-            <a href="/dashboard" aria-label="仪表盘">
-              <LayoutDashboard className="h-5 w-5 text-slate-700" />
-            </a>
+            <NavLink
+              href="/dashboard"
+              label="仪表盘"
+              active={pathname === "/dashboard"}
+            >
+              <LayoutDashboard className="h-5 w-5" />
+            </NavLink>
           </DockIcon>
         )}
         {isAdmin && (
           <DockIcon>
-            <a href="/bookmarks" aria-label="书签">
-              <Bookmark className="h-5 w-5 text-slate-700" />
-            </a>
+            <NavLink
+              href="/dashboard/bookmarks"
+              label="书签管理"
+              active={pathname.startsWith("/dashboard/bookmarks")}
+            >
+              <Bookmark className="h-5 w-5" />
+            </NavLink>
           </DockIcon>
         )}
+        <DockIcon>
+          <DockTooltip label="主题">
+            <ThemeToggle />
+          </DockTooltip>
+        </DockIcon>
         <DockIcon>
           {isAuthenticated ? (
-            <button
-              onClick={async () => {
-                await signOut({ redirect: false });
-                window.location.href = "/";
-              }}
-              aria-label="退出"
-              className="flex h-full w-full items-center justify-center"
-            >
-              <LogOut className="h-5 w-5 text-slate-700" />
-            </button>
+            <DockTooltip label="退出登录">
+              <button
+                type="button"
+                onClick={() => signOut({ redirectTo: "/" })}
+                aria-label="退出登录"
+                className="flex h-full w-full items-center justify-center text-foreground/80 hover:text-foreground"
+              >
+                <LogOut className="h-5 w-5" />
+              </button>
+            </DockTooltip>
           ) : (
-            <button
-              onClick={onLoginClick}
-              aria-label="登录"
-              className="flex h-full w-full items-center justify-center"
-            >
-              <User className="h-5 w-5 text-slate-700" />
-            </button>
+            <DockTooltip label="登录">
+              <button
+                type="button"
+                onClick={onLoginClick}
+                aria-label="登录"
+                className="flex h-full w-full items-center justify-center text-foreground/80 hover:text-foreground"
+              >
+                <LogIn className="h-5 w-5" />
+              </button>
+            </DockTooltip>
           )}
         </DockIcon>
       </Dock>
     </div>
   );
 }
+
+function DockTooltip({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="group relative flex h-full w-full items-center justify-center">
+      {children}
+      <TooltipBubble>{label}</TooltipBubble>
+    </div>
+  );
+}
+
+function TooltipBubble({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      role="tooltip"
+      className="pointer-events-none absolute -top-9 left-1/2 z-50 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground opacity-0 shadow-md transition-[opacity,transform] duration-150 group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100"
+    >
+      {children}
+    </span>
+  );
+}
+
+function NavLink({
+  href,
+  label,
+  active,
+  children,
+}: {
+  href: string;
+  label: string;
+  active: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      aria-label={label}
+      aria-current={active ? "page" : undefined}
+      className={`group relative flex h-full w-full items-center justify-center transition-colors ${
+        active
+          ? "text-primary"
+          : "text-foreground/80 hover:text-foreground"
+      }`}
+    >
+      {children}
+      {active && (
+        <span
+          aria-hidden
+          className="absolute -bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"
+        />
+      )}
+      <TooltipBubble>{label}</TooltipBubble>
+    </Link>
+  );
+}
+
+function ExternalNavLink({
+  href,
+  label,
+  children,
+}: {
+  href: string;
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      className="group relative flex h-full w-full items-center justify-center text-foreground/80 transition-colors hover:text-foreground"
+    >
+      {children}
+      <TooltipBubble>{label}</TooltipBubble>
+    </a>
+  );
+}