jiang13-bbs/frontend/components/post/PostRailBlocks.tsx

import Link from "next/link";
import { Layers, ArrowRight, User, Flame, PenLine } from "lucide-react";
import type { UserProfile, PostListItem, Board } from "@/lib/api";
import BoardIcon, { boardColor } from "@/components/BoardIcon";
import Avatar from "@/components/Avatar";
import RoleBadge from "@/components/RoleBadge";
import LevelBadge from "@/components/LevelBadge";
import BadgeChip from "@/components/BadgeChip";

// formatYMD 帖子详情页左栏「作者其他帖」日期
function formatYMD(dateStr: string) {
  const d = new Date(dateStr);
  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
    d.getDate()
  ).padStart(2, "0")}`;
}

/* ============================================================
   帖子详情页侧栏块（自 page.tsx 原样迁出，供侧栏注册表按配置渲染）
   ============================================================ */

export function BoardCard({ board }: { board: Board }) {
  const colorIdx = boardColor(board);
  return (
    <section className="j13-module shrink-0" aria-labelledby="board-card-title">
      <p className="j13-module-title mb-3" id="board-card-title">
        <Layers size={15} style={{ color: "var(--accent)" }} /> 所属板块
      </p>
      <Link href={`/?board=${board.id}`} className="flex items-center gap-3 group">
        <span
          className={`av-${colorIdx} w-11 h-11 rounded-xl flex items-center justify-center shrink-0`}
        >
          <BoardIcon icon={board.icon} name={board.name} size={20} />
        </span>
        <span
          className="font-semibold text-[14.5px] truncate group-hover:text-[var(--accent)] transition-colors"
          style={{ color: "var(--ink)" }}
        >
          {board.name}
        </span>
      </Link>
      {board.description && (
        <p className="mt-2.5 text-[12.5px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
          {board.description}
        </p>
      )}
      <Link
        href={`/?board=${board.id}`}
        className="btn btn-line btn-sm w-full justify-center mt-3.5"
      >
        查看该板讨论 <ArrowRight size={13} />
      </Link>
    </section>
  );
}

export function AuthorRailCard({
  profile,
  allowComments,
  boardNames,
  boardColors,
}: {
  profile: UserProfile;
  allowComments: boolean;
  /** 板块 id → 名称/配色：板块管理员徽章展示「{板块名}板块管理员」并对齐板块色 */
  boardNames?: Record<number, string>;
  boardColors?: Record<number, number>;
}) {
  const u = profile.user;
  const signature = (u.signature || "").trim();
  const { post_count, comment_count, points, streak } = profile.stats;
  const stats = [
    { label: "发帖", value: post_count },
    ...(allowComments ? [{ label: "评论", value: comment_count }] : []),
    { label: "积分", value: points },
  ];
  return (
    <section className="j13-module shrink-0" aria-labelledby="author-card-title">
      <p className="j13-module-title mb-3" id="author-card-title">
        <User size={15} style={{ color: "var(--accent)" }} /> 作者
      </p>
      <div className="flex items-center gap-3">
        <Link href={`/u/${u.id}`} className="shrink-0" aria-label={u.nickname}>
          <Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={48} />
        </Link>
        <div className="min-w-0">
          <div className="flex items-center gap-1.5 min-w-0">
            <Link
              href={`/u/${u.id}`}
              className="block font-semibold text-[14.5px] truncate hover:text-[var(--accent)] transition-colors"
              style={{ color: "var(--ink)" }}
            >
              {u.nickname}
            </Link>
            <LevelBadge level={u.level} className="shrink-0" />
          </div>
          <p className="meta mt-0.5 truncate">@{u.username}</p>
        </div>
      </div>
      {/* 徽章行：站点角色 + 管理员颁布徽章统一收拢一处，悬浮显示颁布时间；窄栏最多 4 枚 */}
      {(u.role !== "user" || (u.badges ?? []).length > 0) && (
        <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
          {u.role !== "user" && (
            <RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNames} boardColors={boardColors} />
          )}
          {(u.badges ?? []).slice(0, 4).map((ub) => (
            <BadgeChip
              key={ub.id}
              badge={ub.badge}
              tip={`${ub.badge.name} · ${new Date(ub.awarded_at).toLocaleDateString("zh-CN")} 颁布`}
            />
          ))}
        </div>
      )}
      {/* 有签名则展示；无则留空，不放占位文案 */}
      {signature ? (
        <p
          className="mt-3 text-[12.5px] leading-relaxed line-clamp-3"
          style={{ color: "var(--ink-2)" }}
          title={signature}
        >
          {signature}
        </p>
      ) : null}
      {/* 数据面板：圆角浅底 + 竖线分隔（参考作者卡布局，配色走站点令牌） */}
      <div
        className={`mt-3 grid overflow-hidden rounded-[10px] ${
          stats.length === 3 ? "grid-cols-3" : "grid-cols-2"
        }`}
        style={{ background: "var(--panel-2)" }}
      >
        {stats.map((s, i) => (
          <div
            key={s.label}
            className="py-2.5 text-center"
            style={i > 0 ? { borderLeft: "1px solid var(--line)" } : undefined}
          >
            <p
              className="text-[16px] font-semibold leading-none tabular-nums"
              style={{ color: "var(--ink)" }}
            >
              {s.value}
            </p>
            <p className="mt-1.5 text-[11px]" style={{ color: "var(--ink-3)" }}>
              {s.label}
            </p>
          </div>
        ))}
      </div>
      {/* 连签胶囊：金色调软底，与站点 gold 令牌一致 */}
      {streak > 0 && (
        <p
          className="mt-2.5 flex h-9 items-center justify-center gap-1.5 rounded-full text-[12px] font-semibold"
          style={{
            background: "var(--gold-soft)",
            color: "var(--gold)",
            border: "1px solid color-mix(in srgb, var(--gold) 22%, transparent)",
          }}
        >
          <Flame size={12.5} /> 连签 {streak} 天
        </p>
      )}
      <Link href={`/u/${u.id}`} className="btn btn-line btn-sm w-full justify-center mt-3">
        访问主页
      </Link>
    </section>
  );
}

export function AuthorPosts({ posts }: { posts: PostListItem[] }) {
  if (posts.length === 0) return null;
  return (
    <section className="j13-module flex min-h-0 flex-col" aria-labelledby="author-posts-title">
      <p className="j13-module-title mb-1 shrink-0" id="author-posts-title">
        <PenLine size={15} style={{ color: "var(--accent)" }} /> TA 的其他帖子
      </p>
      <ul className="j13-rail-scroll">
        {posts.map((p) => (
          <li key={p.id}>
            <Link
              href={`/post/${p.id}`}
              data-tip={p.title}
              className="block rounded-[10px] px-2 py-2 transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
            >
              <span
                className="block text-[13px] leading-snug line-clamp-2"
                style={{ color: "var(--ink)" }}
              >
                {p.title}
              </span>
              <span className="meta mt-1 block text-[11px]">{formatYMD(p.created_at)}</span>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}