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

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useRef } from "react";
import { MessageSquareText, Clock, Sparkles } from "lucide-react";
import { useAllowComments } from "@/components/CommentsPolicyProvider";

export type FeedSort = "latest" | "new" | "recommended";

const TAB_KEYS: FeedSort[] = ["latest", "new", "recommended"];

// 在指定板块内切换排序时保留 ?board=
function tabHref(key: FeedSort, boardId: number) {
  const params = new URLSearchParams();
  if (boardId > 0) params.set("board", String(boardId));
  if (key !== "latest") params.set("sort", key);
  const qs = params.toString();
  return qs ? `/?${qs}` : "/";
}

// 中栏排序分段控件：URL query 驱动、SSR 直出，键盘 ←/→ 可切换
export default function FeedTabs({ current, boardId = 0 }: { current: FeedSort; boardId?: number }) {
  const router = useRouter();
  const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
  const allowComments = useAllowComments();
  const keys = allowComments ? TAB_KEYS : TAB_KEYS.filter((k) => k !== "latest");

  const handleKeyDown = (e: React.KeyboardEvent, i: number) => {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    e.preventDefault();
    const next = (i + (e.key === "ArrowRight" ? 1 : keys.length - 1)) % keys.length;
    tabRefs.current[next]?.focus();
    router.push(tabHref(keys[next], boardId));
  };

  return (
    <div className="flex items-center gap-1.5 sm:gap-2" role="tablist" aria-label="帖子排序">
      {keys.map((key, i) => {
        const Icon = key === "latest" ? MessageSquareText : key === "new" ? Clock : Sparkles;
        return (
          <Link
            key={key}
            ref={(el) => {
              tabRefs.current[i] = el;
            }}
            href={tabHref(key, boardId)}
            role="tab"
            className="j13-tab inline-flex items-center gap-1"
            aria-selected={current === key}
            tabIndex={current === key ? 0 : -1}
            onKeyDown={(e) => handleKeyDown(e, i)}
          >
            <Icon size={13} className="opacity-80" />
            {key === "latest" ? "新评论" : key === "new" ? "新帖子" : "推荐帖"}
          </Link>
        );
      })}
    </div>
  );
}