feat: improve app ui and project metadata

apps/web/components/AppShell.tsx

@@ -1,10 +1,13 @@
 import Link from "next/link";
 import type { ReactNode } from "react";
+import { Settings } from "lucide-react";
 
 import type { ActiveNav } from "@/lib/nav/items";
+import { buttonClass } from "@/lib/ui/variants";
 import { AiToolbar } from "./AiToolbar";
 import { LeftNav } from "./LeftNav";
 import { NavDrawer } from "./NavDrawer";
+import { ThemeToggle } from "./ThemeToggle";
 
 interface AppShellProps {
   children: ReactNode;
@@ -34,23 +37,33 @@ export function AppShell({
         <NavDrawer projectId={projectId} activeNav={activeNav} />
         <Link
           href="/"
-          className="font-serif text-xl text-cinnabar"
+          className="shrink-0 whitespace-nowrap font-serif text-xl text-cinnabar"
           aria-label="返回作品库"
         >
           墨痕
         </Link>
         {title ? (
-          <span className="font-serif text-lg text-ink">{title}</span>
+          <span className="min-w-0 truncate font-serif text-lg text-ink">
+            {title}
+          </span>
         ) : null}
         {subtitle ? (
-          <span className="font-mono text-xs text-ink-soft">{subtitle}</span>
+          <span className="hidden shrink-0 font-mono text-xs text-ink-soft sm:inline">
+            {subtitle}
+          </span>
         ) : null}
-        <nav className="ml-auto flex items-center gap-4 text-sm">
+        <nav className="ml-auto flex shrink-0 items-center gap-2 text-sm">
+          <ThemeToggle />
           <Link
             href="/settings/providers"
-            className="text-ink-soft hover:text-cinnabar"
+            className={buttonClass({
+              variant: "ghost",
+              size: "sm",
+              className: "border-transparent",
+            })}
           >
-            设置
+            <Settings className="h-4 w-4" aria-hidden="true" />
+            <span className="hidden sm:inline">设置</span>
           </Link>
         </nav>
       </header>
@@ -59,7 +72,7 @@ export function AppShell({
       ) : null}
       <div className="flex">
         <LeftNav projectId={projectId} activeNav={activeNav} />
-        <main className="min-h-[calc(100vh-var(--chrome,4rem))] flex-1 bg-bg">
+        <main className="min-h-[calc(100vh-var(--chrome,4rem))] min-w-0 flex-1 bg-bg">
           {children}
         </main>
       </div>