Comments Thread

"use client";

import { useEffect, useId, useMemo, useRef, useState } from "react";
import type { KeyboardEvent as ReactKeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

type Vote = 1 | 0 | -1;
type SortMode = "top" | "new" | "old";

type CommentNode = {
  id: string;
  author: string;
  initials: string;
  tint: string;
  flair?: "op" | "mod" | "you";
  minutesAgo: number;
  body: string;
  base: number;
  children: CommentNode[];
};

const MAX_REPLY = 600;

const SORTS: { id: SortMode; label: string }[] = [
  { id: "top", label: "Top" },
  { id: "new", label: "Newest" },
  { id: "old", label: "Oldest" },
];

const SEED: CommentNode[] = [
  {
    id: "c-priya",
    author: "Priya Raghavan",
    initials: "PR",
    tint: "from-indigo-500 to-violet-500",
    minutesAgo: 247,
    base: 128,
    body: "The part every guide skips: pg_partman's p_premake defaults to 4, which is fine right up until you backfill. We generated 18 months of partitions up front and let the maintenance job take over from there. Without that, the backfill was creating partitions inside its own transaction and the lock waits went vertical.",
    children: [
      {
        id: "c-tomas",
        author: "Tomás Berger",
        initials: "TB",
        tint: "from-emerald-500 to-sky-500",
        minutesAgo: 194,
        base: 41,
        body: "Did you run the backfill in batches or one shot? We tried one shot on 40M rows and the WAL outran the replica's disk before it finished. Very memorable Tuesday.",
        children: [
          {
            id: "c-priya-2",
            author: "Priya Raghavan",
            initials: "PR",
            tint: "from-indigo-500 to-violet-500",
            minutesAgo: 181,
            base: 67,
            body: "Batches. 50k rows, commit, sleep 200ms, repeat — driven by a small Python loop that reads a checkpoint table, so it survives a restart without redoing work. Roughly six hours overnight and the replica never drifted more than 12 seconds behind.",
            children: [
              {
                id: "c-tomas-2",
                author: "Tomás Berger",
                initials: "TB",
                tint: "from-emerald-500 to-sky-500",
                minutesAgo: 140,
                base: 15,
                body: "The sleep is doing a lot of quiet work there. We eventually made ours adaptive: read pg_stat_replication lag every batch and back off when it crosses two seconds.",
                children: [],
              },
            ],
          },
        ],
      },
      {
        id: "c-iris",
        author: "Iris Lindqvist",
        initials: "IL",
        tint: "from-rose-500 to-amber-500",
        minutesAgo: 122,
        base: 9,
        body: "Same premake trap here. Worth adding that the maintenance job needs its own monitoring — ours silently died for three weeks and we only noticed when inserts started landing in the default partition.",
        children: [],
      },
    ],
  },
  {
    id: "c-dana",
    author: "Dana Whitfield",
    initials: "DW",
    tint: "from-sky-500 to-indigo-500",
    flair: "op",
    minutesAgo: 302,
    base: 96,
    body: "Author here. To answer the question three of you emailed me: yes, the cutover was a single ATTACH PARTITION inside a transaction with lock_timeout set to 3s. If it can't get the lock in three seconds it rolls back and we try again in the next window. It took four attempts across two nights. Nothing clever — just refusing to hold a lock we couldn't get cheaply.",
    children: [
      {
        id: "c-hana",
        author: "Hana Okafor",
        initials: "HO",
        tint: "from-violet-500 to-rose-500",
        minutesAgo: 265,
        base: 33,
        body: "The lock_timeout retry loop is the whole post, honestly. Everyone writes about the schema and nobody writes about how you take the lock without taking the site down with you.",
        children: [],
      },
    ],
  },
  {
    id: "c-marcus",
    author: "Marcus Oyelaran",
    initials: "MO",
    tint: "from-emerald-500 to-sky-500",
    minutesAgo: 356,
    base: -4,
    body: "Counterpoint: don't partition. 40M rows is not a large table. A correct composite index and a sane autovacuum schedule handles this workload without inviting a whole new class of failure into your database.",
    children: [
      {
        id: "c-priya-3",
        author: "Priya Raghavan",
        initials: "PR",
        tint: "from-indigo-500 to-violet-500",
        minutesAgo: 330,
        base: 52,
        body: "Row count wasn't the driver — retention was. We drop 30 days of events every night, and DELETE on 1.3M rows plus the resulting bloat cost more than the partitioning ever has. DETACH and DROP is instant and leaves nothing behind to vacuum.",
        children: [
          {
            id: "c-marcus-2",
            author: "Marcus Oyelaran",
            initials: "MO",
            tint: "from-emerald-500 to-sky-500",
            minutesAgo: 288,
            base: 21,
            body: "That's a fair reason, and it's the one the post should lead with. Retention, not size. I'll take the downvotes.",
            children: [],
          },
        ],
      },
    ],
  },
];

function ago(min: number): string {
  if (min < 1) return "just now";
  if (min < 60) return `${min}m ago`;
  if (min < 1440) return `${Math.floor(min / 60)}h ago`;
  return `${Math.floor(min / 1440)}d ago`;
}

function countAll(nodes: CommentNode[]): number {
  return nodes.reduce((sum, n) => sum + 1 + countAll(n.children), 0);
}

function collectParentIds(nodes: CommentNode[], acc: string[] = []): string[] {
  for (const n of nodes) {
    if (n.children.length > 0) {
      acc.push(n.id);
      collectParentIds(n.children, acc);
    }
  }
  return acc;
}

function sortTree(nodes: CommentNode[], mode: SortMode): CommentNode[] {
  const copy = [...nodes].sort((a, b) => {
    if (mode === "top") return b.base - a.base;
    if (mode === "new") return a.minutesAgo - b.minutesAgo;
    return b.minutesAgo - a.minutesAgo;
  });
  return copy.map((n) => ({ ...n, children: sortTree(n.children, mode) }));
}

function insertReply(
  nodes: CommentNode[],
  parentId: string,
  reply: CommentNode,
): CommentNode[] {
  return nodes.map((n) =>
    n.id === parentId
      ? { ...n, children: [reply, ...n.children] }
      : { ...n, children: insertReply(n.children, parentId, reply) },
  );
}

const FLAIR: Record<"op" | "mod" | "you", { label: string; cls: string }> = {
  op: {
    label: "author",
    cls: "border-indigo-300 bg-indigo-50 text-indigo-700 dark:border-indigo-500/40 dark:bg-indigo-500/10 dark:text-indigo-300",
  },
  mod: {
    label: "mod",
    cls: "border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-300",
  },
  you: {
    label: "you",
    cls: "border-violet-300 bg-violet-50 text-violet-700 dark:border-violet-500/40 dark:bg-violet-500/10 dark:text-violet-300",
  },
};

const RING =
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950";

function ArrowIcon({ down = false }: { down?: boolean }) {
  return (
    <svg viewBox="0 0 16 16" aria-hidden="true" className="h-3.5 w-3.5">
      <g transform={down ? "rotate(180 8 8)" : undefined}>
        <path
          d="M8.6 2.4a.8.8 0 0 0-1.2 0L2.2 8.5A.8.8 0 0 0 2.8 9.8h2.4v3.3c0 .5.4.9.9.9h3.8c.5 0 .9-.4.9-.9V9.8h2.4a.8.8 0 0 0 .6-1.3z"
          fill="currentColor"
        />
      </g>
    </svg>
  );
}

function ReplyIcon() {
  return (
    <svg viewBox="0 0 16 16" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M6.2 3.1 2 7l4.2 3.9V8.6h2.3c2 0 3.5 1.1 4.3 3.2.2-3.9-1.6-6.2-4.9-6.2H6.2z"
        fill="currentColor"
      />
    </svg>
  );
}

function ChevronIcon({ open }: { open: boolean }) {
  return (
    <svg
      viewBox="0 0 16 16"
      aria-hidden="true"
      className={`h-3.5 w-3.5 transition-transform duration-200 ${open ? "" : "-rotate-90"}`}
    >
      <path
        d="M3.6 6.1 8 10.4l4.4-4.3"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

type RowProps = {
  node: CommentNode;
  depth: number;
  votes: Record<string, Vote>;
  collapsed: Record<string, boolean>;
  replyFor: string | null;
  reduced: boolean;
  onVote: (id: string, dir: 1 | -1) => void;
  onToggleCollapse: (id: string) => void;
  onToggleReply: (id: string) => void;
  onSubmitReply: (id: string, text: string) => void;
};

function CommentRow({
  node,
  depth,
  votes,
  collapsed,
  replyFor,
  reduced,
  onVote,
  onToggleCollapse,
  onToggleReply,
  onSubmitReply,
}: RowProps) {
  const uid = useId();
  const childrenId = `${uid}-kids`;
  const formId = `${uid}-form`;
  const taRef = useRef<HTMLTextAreaElement | null>(null);
  const [draft, setDraft] = useState("");

  const vote = votes[node.id] ?? 0;
  const score = node.base + vote;
  const isCollapsed = collapsed[node.id] === true;
  const hasKids = node.children.length > 0;
  const kidCount = countAll(node.children);
  const replyOpen = replyFor === node.id;
  const trimmed = draft.trim();
  const over = draft.length > MAX_REPLY;
  const canSend = trimmed.length > 0 && !over;
  const transition = reduced
    ? { duration: 0 }
    : { duration: 0.24, ease: "easeOut" as const };

  useEffect(() => {
    if (replyOpen) taRef.current?.focus();
  }, [replyOpen]);

  function send() {
    if (!canSend) return;
    onSubmitReply(node.id, trimmed);
    setDraft("");
  }

  function onDraftKey(e: ReactKeyboardEvent<HTMLTextAreaElement>) {
    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
      e.preventDefault();
      send();
    }
    if (e.key === "Escape") {
      e.preventDefault();
      onToggleReply(node.id);
    }
  }

  const scoreTone =
    vote === 1
      ? "text-indigo-600 dark:text-indigo-400"
      : vote === -1
        ? "text-rose-600 dark:text-rose-400"
        : score < 0
          ? "text-rose-500/80 dark:text-rose-400/80"
          : "text-slate-700 dark:text-slate-300";

  return (
    <article className="ct-row relative">
      <div className="flex gap-3">
        <div className="flex w-9 shrink-0 flex-col items-center gap-1">
          <span
            className={`inline-flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br ${node.tint} text-[11px] font-semibold tracking-wide text-white shadow-sm`}
            aria-hidden="true"
          >
            {node.initials}
          </span>
          {hasKids && !isCollapsed ? (
            <button
              type="button"
              onClick={() => onToggleCollapse(node.id)}
              aria-label={`Collapse ${kidCount} ${kidCount === 1 ? "reply" : "replies"} to ${node.author}`}
              aria-expanded={true}
              aria-controls={childrenId}
              className={`group -mb-1 flex flex-1 justify-center rounded-full py-1 ${RING}`}
            >
              <span className="h-full w-px rounded-full bg-slate-200 transition-colors group-hover:bg-indigo-400 dark:bg-slate-700 dark:group-hover:bg-indigo-500" />
            </button>
          ) : null}
        </div>

        <div className="min-w-0 flex-1 pb-4">
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <span className="text-sm font-semibold text-slate-900 dark:text-slate-100">
              {node.author}
            </span>
            {node.flair ? (
              <span
                className={`rounded-full border px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide ${FLAIR[node.flair].cls}`}
              >
                {FLAIR[node.flair].label}
              </span>
            ) : null}
            <span className="text-xs text-slate-500 dark:text-slate-400">
              {ago(node.minutesAgo)}
            </span>
            {isCollapsed ? (
              <button
                type="button"
                onClick={() => onToggleCollapse(node.id)}
                aria-expanded={false}
                aria-controls={childrenId}
                className={`rounded-full border border-slate-200 px-2 py-px text-[11px] font-medium text-slate-600 transition-colors hover:border-indigo-400 hover:text-indigo-600 dark:border-slate-700 dark:text-slate-400 dark:hover:border-indigo-500 dark:hover:text-indigo-400 ${RING}`}
              >
                Show {kidCount} {kidCount === 1 ? "reply" : "replies"}
              </button>
            ) : null}
          </div>

          <p className="mt-1.5 whitespace-pre-wrap text-[13.5px] leading-relaxed text-slate-700 dark:text-slate-300">
            {node.body}
          </p>

          <div className="mt-2.5 flex flex-wrap items-center gap-1">
            <div className="flex items-center gap-0.5 rounded-full border border-slate-200 bg-slate-50 p-0.5 dark:border-slate-800 dark:bg-slate-900">
              <button
                type="button"
                onClick={() => onVote(node.id, 1)}
                aria-pressed={vote === 1}
                aria-label={`Upvote ${node.author}'s comment`}
                className={`rounded-full p-1.5 transition-colors ${RING} ${
                  vote === 1
                    ? "bg-indigo-600 text-white"
                    : "text-slate-500 hover:bg-indigo-100 hover:text-indigo-700 dark:text-slate-400 dark:hover:bg-indigo-500/15 dark:hover:text-indigo-300"
                }`}
              >
                <ArrowIcon />
              </button>
              <span
                key={score}
                aria-hidden="true"
                className={`ct-pop min-w-[2.25rem] text-center text-xs font-semibold tabular-nums ${scoreTone}`}
              >
                {score}
              </span>
              <button
                type="button"
                onClick={() => onVote(node.id, -1)}
                aria-pressed={vote === -1}
                aria-label={`Downvote ${node.author}'s comment`}
                className={`rounded-full p-1.5 transition-colors ${RING} ${
                  vote === -1
                    ? "bg-rose-600 text-white"
                    : "text-slate-500 hover:bg-rose-100 hover:text-rose-700 dark:text-slate-400 dark:hover:bg-rose-500/15 dark:hover:text-rose-300"
                }`}
              >
                <ArrowIcon down />
              </button>
            </div>
            <span className="sr-only">{`Score ${score} points`}</span>

            <button
              type="button"
              onClick={() => onToggleReply(node.id)}
              aria-expanded={replyOpen}
              aria-controls={formId}
              className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100 ${RING}`}
            >
              <ReplyIcon />
              Reply
            </button>

            {hasKids ? (
              <button
                type="button"
                onClick={() => onToggleCollapse(node.id)}
                aria-expanded={!isCollapsed}
                aria-controls={childrenId}
                className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100 ${RING}`}
              >
                <ChevronIcon open={!isCollapsed} />
                {isCollapsed ? "Expand" : "Collapse"}
              </button>
            ) : null}
          </div>

          <AnimatePresence initial={false}>
            {replyOpen ? (
              <motion.div
                key="form"
                id={formId}
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: "auto", opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                transition={transition}
                className="overflow-hidden"
              >
                <div className="mt-3 rounded-xl border border-slate-200 bg-white p-2 shadow-sm focus-within:border-indigo-400 dark:border-slate-800 dark:bg-slate-900 dark:focus-within:border-indigo-500">
                  <label htmlFor={`${formId}-ta`} className="sr-only">
                    {`Reply to ${node.author}`}
                  </label>
                  <textarea
                    id={`${formId}-ta`}
                    ref={taRef}
                    rows={3}
                    value={draft}
                    onChange={(e) => setDraft(e.target.value)}
                    onKeyDown={onDraftKey}
                    placeholder={`Reply to ${node.author}…`}
                    aria-describedby={`${formId}-hint`}
                    aria-invalid={over}
                    className="w-full resize-none bg-transparent px-2 py-1.5 text-[13.5px] leading-relaxed text-slate-900 outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
                  />
                  <div className="flex items-center justify-between gap-3 px-2 pb-1 pt-1">
                    <p
                      id={`${formId}-hint`}
                      className={`text-[11px] ${over ? "text-rose-600 dark:text-rose-400" : "text-slate-400 dark:text-slate-500"}`}
                    >
                      {over
                        ? `${draft.length - MAX_REPLY} characters over the limit`
                        : "Ctrl + Enter to post · Esc to cancel"}
                    </p>
                    <div className="flex items-center gap-1.5">
                      <button
                        type="button"
                        onClick={() => onToggleReply(node.id)}
                        className={`rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100 ${RING}`}
                      >
                        Cancel
                      </button>
                      <button
                        type="button"
                        onClick={send}
                        disabled={!canSend}
                        className={`rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-indigo-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:text-slate-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-600 ${RING}`}
                      >
                        Post reply
                      </button>
                    </div>
                  </div>
                </div>
              </motion.div>
            ) : null}
          </AnimatePresence>
        </div>
      </div>

      <AnimatePresence initial={false}>
        {hasKids && !isCollapsed ? (
          <motion.div
            key="kids"
            id={childrenId}
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={transition}
            className="overflow-hidden"
          >
            <div className={depth >= 3 ? "" : "ml-4 sm:ml-5"}>
              {node.children.map((kid) => (
                <CommentRow
                  key={kid.id}
                  node={kid}
                  depth={depth + 1}
                  votes={votes}
                  collapsed={collapsed}
                  replyFor={replyFor}
                  reduced={reduced}
                  onVote={onVote}
                  onToggleCollapse={onToggleCollapse}
                  onToggleReply={onToggleReply}
                  onSubmitReply={onSubmitReply}
                />
              ))}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </article>
  );
}

export default function CommentThread() {
  const reduced = useReducedMotion() ?? false;
  const uid = useId();
  const [comments, setComments] = useState<CommentNode[]>(SEED);
  const [votes, setVotes] = useState<Record<string, Vote>>({
    "c-priya": 1,
    "c-marcus": -1,
  });
  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
  const [replyFor, setReplyFor] = useState<string | null>(null);
  const [sort, setSort] = useState<SortMode>("top");
  const [rootDraft, setRootDraft] = useState("");
  const [announce, setAnnounce] = useState("");
  const newCount = useRef(0);
  const sortRefs = useRef<Array<HTMLButtonElement | null>>([]);

  const sorted = useMemo(() => sortTree(comments, sort), [comments, sort]);
  const total = useMemo(() => countAll(comments), [comments]);
  const parentIds = useMemo(() => collectParentIds(comments), [comments]);
  const allCollapsed =
    parentIds.length > 0 && parentIds.every((id) => collapsed[id] === true);

  const rootTrimmed = rootDraft.trim();
  const rootOver = rootDraft.length > MAX_REPLY;
  const canPost = rootTrimmed.length > 0 && !rootOver;

  function handleVote(id: string, dir: 1 | -1) {
    const cur = votes[id] ?? 0;
    const next: Vote = cur === dir ? 0 : dir;
    setVotes((prev) => ({ ...prev, [id]: next }));
    setAnnounce(
      next === 0 ? "Vote removed." : next === 1 ? "Upvoted." : "Downvoted.",
    );
  }

  function toggleCollapse(id: string) {
    setCollapsed((prev) => ({ ...prev, [id]: !prev[id] }));
  }

  function toggleReply(id: string) {
    setReplyFor((prev) => (prev === id ? null : id));
  }

  function makeNode(text: string): CommentNode {
    newCount.current += 1;
    return {
      id: `${uid}-new-${newCount.current}`,
      author: "Sam Okonjo",
      initials: "SO",
      tint: "from-violet-500 to-indigo-500",
      flair: "you",
      minutesAgo: 0,
      base: 1,
      body: text,
      children: [],
    };
  }

  function submitReply(parentId: string, text: string) {
    const node = makeNode(text);
    setComments((prev) => insertReply(prev, parentId, node));
    setCollapsed((prev) => ({ ...prev, [parentId]: false }));
    setReplyFor(null);
    setAnnounce("Reply posted.");
  }

  function submitRoot() {
    if (!canPost) return;
    const node = makeNode(rootTrimmed);
    setComments((prev) => [node, ...prev]);
    setRootDraft("");
    setAnnounce("Comment posted to the thread.");
  }

  function toggleAll() {
    const next = !allCollapsed;
    const map: Record<string, boolean> = {};
    for (const id of parentIds) map[id] = next;
    setCollapsed(map);
    setAnnounce(next ? "All threads collapsed." : "All threads expanded.");
  }

  function onSortKey(e: ReactKeyboardEvent<HTMLButtonElement>, index: number) {
    const keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"];
    if (!keys.includes(e.key)) return;
    e.preventDefault();
    let next = index;
    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (index + 1) % SORTS.length;
    if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (index - 1 + SORTS.length) % SORTS.length;
    if (e.key === "Home") next = 0;
    if (e.key === "End") next = SORTS.length - 1;
    setSort(SORTS[next].id);
    sortRefs.current[next]?.focus();
  }

  function onRootKey(e: ReactKeyboardEvent<HTMLTextAreaElement>) {
    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
      e.preventDefault();
      submitRoot();
    }
  }

  return (
    <section className="relative w-full bg-white px-4 py-20 sm:px-6 sm:py-24 dark:bg-slate-950">
      <style>{`
        @keyframes ctThreadVotePop {
          0% { transform: scale(1); }
          45% { transform: scale(1.32); }
          100% { transform: scale(1); }
        }
        @keyframes ctThreadRise {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .ct-pop { display: inline-block; animation: ctThreadVotePop 280ms cubic-bezier(0.22, 1, 0.36, 1); }
        .ct-row { animation: ctThreadRise 320ms cubic-bezier(0.22, 1, 0.36, 1) both; }
        @media (prefers-reduced-motion: reduce) {
          .ct-pop, .ct-row { animation: none !important; }
        }
      `}</style>

      <div className="mx-auto w-full max-w-3xl">
        <header className="mb-6">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400">
            Discussion
          </p>
          <h2 className="mt-2 text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-50">
            Partitioning a 40M-row events table with zero downtime
          </h2>
          <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
            {total} comments · posted by Dana Whitfield · 5h ago
          </p>
        </header>

        <div className="mb-5 flex flex-wrap items-center justify-between gap-3 border-y border-slate-200 py-3 dark:border-slate-800">
          <div
            role="radiogroup"
            aria-label="Sort comments"
            className="flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 p-1 dark:border-slate-800 dark:bg-slate-900"
          >
            {SORTS.map((s, i) => {
              const active = sort === s.id;
              return (
                <button
                  key={s.id}
                  ref={(el) => {
                    sortRefs.current[i] = el;
                  }}
                  type="button"
                  role="radio"
                  aria-checked={active}
                  tabIndex={active ? 0 : -1}
                  onClick={() => setSort(s.id)}
                  onKeyDown={(e) => onSortKey(e, i)}
                  className={`rounded-full px-3 py-1.5 text-xs font-semibold transition-colors ${RING} ${
                    active
                      ? "bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-slate-50"
                      : "text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
                  }`}
                >
                  {s.label}
                </button>
              );
            })}
          </div>

          <button
            type="button"
            onClick={toggleAll}
            className={`inline-flex items-center gap-1.5 rounded-full border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:border-indigo-400 hover:text-indigo-600 dark:border-slate-800 dark:text-slate-400 dark:hover:border-indigo-500 dark:hover:text-indigo-400 ${RING}`}
          >
            <ChevronIcon open={!allCollapsed} />
            {allCollapsed ? "Expand all" : "Collapse all"}
          </button>
        </div>

        <div className="mb-8 flex gap-3">
          <span
            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-500 text-[11px] font-semibold text-white shadow-sm"
            aria-hidden="true"
          >
            SO
          </span>
          <div className="min-w-0 flex-1 rounded-xl border border-slate-200 bg-white p-2 shadow-sm transition-colors focus-within:border-indigo-400 dark:border-slate-800 dark:bg-slate-900 dark:focus-within:border-indigo-500">
            <label htmlFor={`${uid}-root`} className="sr-only">
              Add a comment to the thread
            </label>
            <textarea
              id={`${uid}-root`}
              rows={2}
              value={rootDraft}
              onChange={(e) => setRootDraft(e.target.value)}
              onKeyDown={onRootKey}
              placeholder="Add to the discussion…"
              aria-describedby={`${uid}-root-hint`}
              aria-invalid={rootOver}
              className="w-full resize-none bg-transparent px-2 py-1.5 text-[13.5px] leading-relaxed text-slate-900 outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
            />
            <div className="flex items-center justify-between gap-3 px-2 pb-1">
              <p
                id={`${uid}-root-hint`}
                className={`text-[11px] ${rootOver ? "text-rose-600 dark:text-rose-400" : "text-slate-400 dark:text-slate-500"}`}
              >
                {rootOver
                  ? `${rootDraft.length - MAX_REPLY} characters over the limit`
                  : `${MAX_REPLY - rootDraft.length} characters left`}
              </p>
              <button
                type="button"
                onClick={submitRoot}
                disabled={!canPost}
                className={`rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-indigo-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:text-slate-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-600 ${RING}`}
              >
                Comment
              </button>
            </div>
          </div>
        </div>

        <div className="divide-y divide-slate-200 dark:divide-slate-800">
          {sorted.map((node) => (
            <div key={node.id} className="py-4 first:pt-0">
              <CommentRow
                node={node}
                depth={0}
                votes={votes}
                collapsed={collapsed}
                replyFor={replyFor}
                reduced={reduced}
                onVote={handleVote}
                onToggleCollapse={toggleCollapse}
                onToggleReply={toggleReply}
                onSubmitReply={submitReply}
              />
            </div>
          ))}
        </div>

        <p aria-live="polite" className="sr-only">
          {announce}
        </p>
      </div>
    </section>
  );
}