writer-work-flow/apps/web/components/AppShell.tsx

import Link from "next/link";
import type { ReactNode } from "react";
import { FileQuestion, Settings } from "lucide-react";

import type { ActiveNav } from "@/lib/nav/items";
import { buttonClass, focusRing } from "@/lib/ui/variants";
import { CommandSearchButton } from "./command/CommandPaletteMount";
import { LeftNav } from "./LeftNav";
import { NavDrawer } from "./NavDrawer";
import { ThemeToggle } from "./ThemeToggle";

interface AppShellProps {
  children: ReactNode;
  // 顶栏右侧的上下文信息（如作品名 / 进度）。
  title?: string;
  subtitle?: string;
  // 项目内页给出 projectId → 左导航展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
  projectId?: string;
  // 当前激活的项目级入口键（用于高亮）。
  activeNav?: ActiveNav;
  // 专注写作模式（P3-4）：隐藏桌面左侧图标导航以加宽正文；顶栏汉堡/命令面板仍可达导航。
  // 缺省 false → 其余页面外观不变（加法式可选项）。
  hideNav?: boolean;
}

// 全局外壳：顶栏(64px) + 左导航 + 主区（UX §5.1）。
export function AppShell({
  children,
  title,
  subtitle,
  projectId,
  activeNav,
  hideNav = false,
}: AppShellProps) {
  return (
    <div
      className="min-h-screen"
      style={{ ["--chrome" as string]: "4rem" }}
    >
      <a
        href="#main"
        className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:border focus:border-line focus:bg-panel focus:px-3 focus:py-2 focus:text-sm focus:text-ink focus:shadow-paper"
      >
        跳到正文
      </a>
      <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-line bg-panel px-4 sm:px-6">
        <NavDrawer projectId={projectId} activeNav={activeNav} />
        <Link
          href="/"
          className={`shrink-0 whitespace-nowrap rounded font-serif text-xl text-cinnabar ${focusRing}`}
          aria-label="返回作品库"
        >
          墨痕
        </Link>
        {title ? (
          <span className="min-w-0 truncate font-serif text-lg text-ink">
            {title}
          </span>
        ) : null}
        {subtitle ? (
          <span className="hidden shrink-0 font-mono text-xs text-ink-soft sm:inline">
            {subtitle}
          </span>
        ) : null}
        <nav
          aria-label="快捷操作"
          className="ml-auto flex shrink-0 items-center gap-2 text-sm"
        >
          <CommandSearchButton />
          <ThemeToggle />
          <Link
            href="/help"
            aria-label="帮助"
            title="帮助"
            className={buttonClass({
              variant: "ghost",
              size: "sm",
              className: "border-transparent",
            })}
          >
            <FileQuestion className="h-4 w-4" aria-hidden="true" />
            <span className="hidden sm:inline">帮助</span>
          </Link>
          <Link
            href="/settings/providers"
            aria-label="设置"
            title="设置"
            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>
      <div className="flex">
        {hideNav ? null : <LeftNav projectId={projectId} activeNav={activeNav} />}
        <main
          id="main"
          tabIndex={-1}
          className="min-h-[calc(100vh-var(--chrome,4rem))] min-w-0 flex-1 bg-bg"
        >
          {children}
        </main>
      </div>
    </div>
  );
}