feat: improve app ui and project metadata

apps/web/components/AiToolbar.tsx

@@ -1,7 +1,21 @@
 import Link from "next/link";
+import {
+  BookOpen,
+  ClipboardCheck,
+  ListTree,
+  PenLine,
+  Sparkles,
+  type LucideIcon,
+} from "lucide-react";
 
-import { aiToolItems } from "@/lib/nav/ai-tools";
+import { AiToolbarMoreMenu } from "@/components/AiToolbarMoreMenu";
+import {
+  aiToolItems,
+  primaryAiToolItems,
+  secondaryAiToolItems,
+} from "@/lib/nav/ai-tools";
 import type { ActiveNav } from "@/lib/nav/items";
+import { buttonClass } from "@/lib/ui/variants";
 
 interface AiToolbarProps {
   projectId: string;
@@ -9,40 +23,71 @@ interface AiToolbarProps {
 }
 
 // T4-a · 项目内页常驻 AI 工具条（顶栏下，UX §3/§5）。
-// 纯链接服务端组件：写本章=朱砂主动作，其余次级；激活项朱砂高亮。窄屏横向滚动。
+// 桌面展示完整工具条；窄屏只保留写本章/审稿，把低频入口收进更多菜单。
 export function AiToolbar({ projectId, activeNav }: AiToolbarProps) {
+  const primaryItems = primaryAiToolItems(projectId);
+  const secondaryItems = secondaryAiToolItems(projectId);
   return (
     <nav
       aria-label="AI 工具条"
-      className="flex h-12 items-center gap-2 overflow-x-auto whitespace-nowrap border-b border-line bg-panel px-4 sm:px-6"
+      className="flex h-12 items-center gap-2 border-b border-line bg-panel px-4 sm:px-6"
     >
-      {aiToolItems(projectId).map((item) => {
-        const isActive = item.key === activeNav;
-        const className = toolClassName(item.primary === true, isActive);
-        return (
-          <Link
-            key={item.href}
-            href={item.href}
-            aria-current={isActive ? "page" : undefined}
-            className={className}
-          >
-            <span aria-hidden="true">{item.glyph}</span>
-            <span>{item.label}</span>
-          </Link>
-        );
-      })}
+      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden lg:hidden">
+        {primaryItems.map((item) => {
+          const isActive = item.key === activeNav;
+          const className = toolClassName(item.primary === true, isActive);
+          const Icon = toolIcon(item.key);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              aria-current={isActive ? "page" : undefined}
+              className={className}
+            >
+              <Icon className="h-4 w-4" aria-hidden="true" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+        <AiToolbarMoreMenu items={secondaryItems} activeNav={activeNav} />
+      </div>
+
+      <div className="hidden items-center gap-2 overflow-x-auto whitespace-nowrap lg:flex">
+        {aiToolItems(projectId).map((item) => {
+          const isActive = item.key === activeNav;
+          const className = toolClassName(item.primary === true, isActive);
+          const Icon = toolIcon(item.key);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              aria-current={isActive ? "page" : undefined}
+              className={className}
+            >
+              <Icon className="h-4 w-4" aria-hidden="true" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </div>
     </nav>
   );
 }
 
+function toolIcon(key: ActiveNav): LucideIcon {
+  if (key === "write") return PenLine;
+  if (key === "review") return ClipboardCheck;
+  if (key === "outline") return ListTree;
+  if (key === "codex") return BookOpen;
+  return Sparkles;
+}
+
 function toolClassName(isPrimary: boolean, isActive: boolean): string {
-  const base =
-    "flex items-center gap-1.5 rounded border px-3 py-1.5 text-sm transition-colors";
   if (isActive) {
-    return `${base} border-cinnabar text-cinnabar`;
+    return buttonClass({ variant: "outline", size: "sm" });
   }
   if (isPrimary) {
-    return `${base} border-cinnabar bg-cinnabar text-panel hover:border-cinnabar`;
+    return buttonClass({ variant: "primary", size: "sm" });
   }
-  return `${base} border-line text-ink-soft hover:border-cinnabar hover:text-cinnabar`;
+  return buttonClass({ variant: "secondary", size: "sm" });
 }