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

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export type ActiveNav =
  | "write"
  | "outline"
  | "foreshadow"
  | "review"
  | "style"
  | "codex"
  | "rules"
  | "skills";

interface LeftNavProps {
  // 项目内页传 projectId → 展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
  projectId?: string;
  activeNav?: ActiveNav;
}

interface NavItem {
  href: string;
  label: string;
  enabled: boolean;
  // 项目级入口的激活键（与 activeNav 比对高亮）。
  key?: ActiveNav;
}

const GLOBAL_ITEMS: NavItem[] = [
  { href: "/", label: "作品库", enabled: true },
  { href: "/settings/providers", label: "设置", enabled: true },
];

function projectItems(projectId: string): NavItem[] {
  return [
    {
      href: `/projects/${projectId}/write`,
      label: "写作",
      enabled: true,
      key: "write",
    },
    {
      href: `/projects/${projectId}/outline`,
      label: "大纲",
      enabled: true,
      key: "outline",
    },
    {
      href: `/projects/${projectId}/foreshadow`,
      label: "伏笔",
      enabled: true,
      key: "foreshadow",
    },
    {
      href: `/projects/${projectId}/review`,
      label: "审稿",
      enabled: true,
      key: "review",
    },
    {
      href: `/projects/${projectId}/style`,
      label: "文风",
      enabled: true,
      key: "style",
    },
    {
      href: `/projects/${projectId}/codex`,
      label: "设定库",
      enabled: true,
      key: "codex",
    },
    {
      href: `/projects/${projectId}/rules`,
      label: "规则",
      enabled: true,
      key: "rules",
    },
    {
      href: `/projects/${projectId}/skills`,
      label: "技能库",
      enabled: true,
      key: "skills",
    },
  ];
}

// 左导航：当前项朱砂竖条 + 浅晕底（UX §5.1 / §3.1）。
export function LeftNav({ projectId, activeNav }: LeftNavProps) {
  const pathname = usePathname();
  const scoped = projectId ? projectItems(projectId) : [];

  return (
    <nav
      className="w-44 shrink-0 border-r border-line bg-panel py-4"
      aria-label="主导航"
    >
      <ul className="flex flex-col gap-1 px-2">
        {GLOBAL_ITEMS.map((item) => (
          <NavLink
            key={item.label}
            item={item}
            active={item.enabled && pathname === item.href}
          />
        ))}
        {scoped.length > 0 ? (
          <li
            className="mt-3 px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-ink-soft/60"
            aria-hidden="true"
          >
            本作
          </li>
        ) : null}
        {scoped.map((item) => (
          <NavLink
            key={item.label}
            item={item}
            active={
              item.key !== undefined &&
              (item.key === activeNav || pathname === item.href)
            }
          />
        ))}
      </ul>
    </nav>
  );
}

function NavLink({ item, active }: { item: NavItem; active: boolean }) {
  if (!item.enabled) {
    return (
      <li>
        <span
          className="block cursor-not-allowed rounded px-3 py-2 text-sm text-ink-soft/50"
          aria-disabled="true"
          title="后续里程碑开放"
        >
          {item.label}
        </span>
      </li>
    );
  }
  return (
    <li>
      <Link
        href={item.href}
        aria-current={active ? "page" : undefined}
        className={`flex items-center gap-2 rounded px-3 py-2 text-sm ${
          active
            ? "border-l-2 border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
            : "text-ink hover:bg-[var(--color-cinnabar-wash)]"
        }`}
      >
        {item.label}
      </Link>
    </li>
  );
}