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

"use client";

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

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

// 桌面左栏：发帖 CTA + 板块导航 + 登录态快捷入口
export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user: User | null }) {
  const params = useSearchParams();
  const activeBoard = Number(params.get("board")) || 0;
  const composeHref = user ? "/compose" : "/login?redirect=/compose";

  return (
    <nav className="hidden lg:block w-56 xl:w-60 shrink-0" aria-label="工作台导航">
      <div className="sticky top-24 space-y-5">
        <Link href={composeHref} className="btn btn-primary w-full justify-center">
          <PenSquare size={16} /> 发起讨论
        </Link>

        <div>
          <p className="px-2.5 mb-1.5 text-[11.5px] font-bold tracking-[0.08em] uppercase" style={{ color: "var(--ink-3)" }}>
            板块
          </p>
          <div className="space-y-0.5">
            <Link
              href="/"
              className="j13-raillink"
              aria-current={activeBoard === 0 ? "page" : undefined}
            >
              <Home size={16} className="shrink-0" />
              <span className="flex-1 truncate">全部讨论</span>
            </Link>
            {boards.map((b, i) => (
              <Link
                key={b.id}
                href={boardHref(b.id)}
                className="j13-raillink"
                aria-current={activeBoard === b.id ? "page" : undefined}
              >
                <span
                  className={`av-${i % 8} w-7 h-7 rounded-lg flex items-center justify-center text-[12px] font-bold shrink-0`}
                >
                  {b.name.slice(0, 1)}
                </span>
                <span className="flex-1 truncate">{b.name}</span>
                <span className="meta text-[11.5px]">{b.post_count}</span>
              </Link>
            ))}
          </div>
        </div>

        <div style={{ borderTop: "1px solid var(--line)" }} className="pt-3 space-y-0.5">
          {user ? (
            <>
              <Link href="/notifications" className="j13-raillink">
                <Bell size={16} className="shrink-0" /> 通知中心
              </Link>
              <Link href="/settings" className="j13-raillink">
                <Settings size={16} className="shrink-0" /> 账号设置
              </Link>
            </>
          ) : (
            <>
              <Link href="/login" className="j13-raillink">
                <LogIn size={16} className="shrink-0" /> 登录
              </Link>
              <Link href="/register" className="j13-raillink">
                <UserPlus size={16} className="shrink-0" /> 注册账号
              </Link>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}

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

  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>
  );
}