jiang13-bbs/frontend/components/home/WorkspaceNav.tsx

"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { PenSquare, Home, ChevronRight } from "lucide-react";
import type { BoardWithCount, User } from "@/lib/api";

// 首页壳内板块切换：仅替换中栏帖子流，不离开工作台
function boardHref(id: number) {
  return `/?board=${id}`;
}

// 桌面左栏：板块导航
export function WorkspaceNav({ boards }: { boards: BoardWithCount[]; user?: User | null }) {
  const params = useSearchParams();
  const activeBoard = Number(params.get("board")) || 0;

  return (
    <nav className="hidden lg:block w-56 xl:w-60 shrink-0" aria-label="工作台导航">
      <div className="sticky top-24 space-y-5">
        {/* 「全部讨论」是重置筛选的动作入口，与板块目录分区展示；卡片样式与下方板块一致 */}
        <div className="space-y-0.5">
          <Link href="/" className="j13-bcard" aria-current={activeBoard === 0 ? "page" : undefined}>
            <span
              className="j13-bcard-ico"
              style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
              aria-hidden="true"
            >
              <Home size={16} />
            </span>
            <span className="j13-bcard-name flex-1 truncate text-[14px]">
              全部讨论
            </span>
          </Link>
        </div>

        {/* 板块目录：标题可点击进入板块汇总列表页（/boards）；
            下方板块卡片点击不离开工作台，仅在中栏筛选该板块帖子流 */}
        <div>
          <Link
            href="/boards"
            className="group px-1 mb-2 flex items-center justify-between text-[11.5px] font-medium tracking-[0.08em] uppercase text-[var(--ink-3)] hover:text-[var(--accent)] transition-colors"
            aria-label="进入板块目录列表页"
          >
            <span className="flex items-center">
              <span>板块目录</span>
              <ChevronRight
                size={12}
                className="ml-0.5 opacity-0 -translate-x-0.5 group-hover:opacity-100 group-hover:translate-x-0 transition-all"
                aria-hidden="true"
              />
            </span>
            {boards.length > 0 && (
              <span className="tracking-normal tabular-nums">{boards.length} 个</span>
            )}
          </Link>
          <div className="space-y-2">
            {boards.map((b, i) => (
              <Link
                key={b.id}
                href={boardHref(b.id)}
                className="j13-bcard"
                aria-current={activeBoard === b.id ? "page" : undefined}
                aria-label={`${b.name}板块，${b.post_count} 篇讨论`}
              >
                <span className={`av-${i % 8} j13-bcard-ico`} aria-hidden="true">
                  {b.name.slice(0, 1)}
                </span>
                <span className="min-w-0 flex-1 flex items-center justify-between gap-2">
                  <span className="j13-bcard-name truncate text-[14px]">
                    {b.name}
                  </span>
                  <span className="meta shrink-0 text-[11px] tabular-nums">{b.post_count} 篇</span>
                </span>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </nav>
  );
}

// 移动端：发帖入口 + 横向滑动板块条
export function WorkspaceNavMobile({
  boards,
  user,
}: {
  boards: BoardWithCount[];
  user: User | null;
}) {
  const params = useSearchParams();
  const activeBoard = Number(params.get("board")) || 0;
  const composePath =
    activeBoard > 0 ? `/compose?board=${activeBoard}` : "/compose";
  const composeHref = user
    ? composePath
    : `/login?redirect=${encodeURIComponent(composePath)}`;

  return (
    <div className="lg:hidden -mx-4 sm:-mx-6 px-4 sm:px-6">
      <div className="j13-chips">
        <Link href={composeHref} className="btn btn-primary btn-sm shrink-0">
          <PenSquare size={14} /> 发帖
        </Link>
        <Link
          href="/"
          className="j13-chip"
          aria-current={activeBoard === 0 ? "page" : undefined}
        >
          <Home size={13} /> 全部
        </Link>
        {boards.map((b) => (
          <Link
            key={b.id}
            href={boardHref(b.id)}
            className="j13-chip"
            aria-current={activeBoard === b.id ? "page" : undefined}
          >
            {b.name}
          </Link>
        ))}
      </div>
    </div>
  );
}