@anchrd/intel-ui 0.38.0 → 0.40.0

package/src/board/board-table/board-table.tsx

@@ -1,49 +1,227 @@
 import type { BoardColumn, BoardTaskFilter } from "@anchrd/intel-contract/board";
+import {
+  type ColumnVisibilityState,
+  columnGroupingFeature,
+  columnVisibilityFeature,
+  createColumnHelper,
+  createExpandedRowModel,
+  createGroupedRowModel,
+  createSortedRowModel,
+  type ExpandedState,
+  flexRender,
+  type GroupingState,
+  type Row as LibRow,
+  rowExpandingFeature,
+  rowSortingFeature,
+  type SortingState,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  tableFeatures,
+  useTable,
+} from "@tanstack/react-table";
+import { ChevronDown, ChevronRight, Columns3, Filter, LayoutList } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useAssigneeLabel } from "@/board/board-assignee/board-assignee.ts";
 import { isFiltering } from "@/board/board-data/board-data.ts";
 import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
-import { useI18n } from "@/i18n/i18n-context.tsx";
-import { useUserName } from "@/user-name/user-name.ts";
 import {
-  ariaSortOf,
-  type GroupKey,
-  groupRows,
-  nextSort,
-  type Row,
-  rowsOf,
-  type Sort,
-  type SortKey,
-  sortRows,
-} from "./board-table.ts";
-
-const headers: { key: SortKey; labelKey: string }[] = [
-  { key: "title", labelKey: "board.column.title" },
-  { key: "status", labelKey: "board.column.status" },
-  { key: "assignee", labelKey: "board.column.assignee" },
-  { key: "due", labelKey: "board.column.due" },
-  // ⚠️ `dependsOn` is a column of its own, and that is the condition under which the board graph
-  // stays parked (#651, #653). Stored but undrawn, a dependency is a card that waits for a reason
-  // nobody can see.
-  { key: "dependsOn", labelKey: "board.column.dependsOn" },
-];
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { type Row, rowsOf } from "./board-table.ts";
+
+/**
+ * ⚠️ Registered one by one rather than through `stockFeatures`. Every feature this table does not
+ * use — pagination, selection, pinning, resizing, faceting — would otherwise sit in the bundle of a
+ * screen that never calls it, and the list below is also the honest answer to "what can this table
+ * do".
+ */
+const features = tableFeatures({
+  columnGroupingFeature,
+  columnVisibilityFeature,
+  rowExpandingFeature,
+  rowSortingFeature,
+  // ⚠️ A row-model slot has to stand AFTER the feature it needs: sorting, then grouping, then
+  // expanding — the order the rows actually pass through.
+  sortedRowModel: createSortedRowModel(),
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic },
+});
+
+/** One row of THIS table — the library's row type, bound to these features and this data. */
+type TableRow = LibRow<typeof features, Row>;
+
+const helper = createColumnHelper<typeof features, Row>();
+
+// The one place a grouping is offered. Not free-form: a board has fixed fields, and grouping by
+// anything else would be grouping by something nobody can create.
+/**
+ * ⚠️ **Empty becomes `undefined`, never `null`.** `sortUndefined: "last"` fires on `undefined`
+ * only; with `null` the row falls through to the comparator, where `null < "2026-08-19"` and
+ * `null > "2026-08-19"` are BOTH false. The comparator then claims an equality that is not there,
+ * and the order depends on where the empty rows happened to sit. A card without a due date is not
+ * the earliest one — it is one whose date nobody knows.
+ */
+const orNothing = (value: string | null): string | undefined => value ?? undefined;
 
 export function BoardTable({
   board,
   filter,
   onFilter,
-  sort,
-  onSort,
-  group,
-  onGroup,
+  hidden,
+  onHidden,
+  onOpen,
 }: {
   board: BoardHandle;
   filter: Partial<BoardTaskFilter>;
   onFilter(next: Partial<BoardTaskFilter>): void;
-  sort: Sort | null;
-  onSort(next: Sort | null): void;
-  group: GroupKey;
-  onGroup(next: GroupKey): void;
+  /**
+   * ⚠️ Held ABOVE the view switch, like the filter since #671. This component is unmounted the
+   * moment the kanban is shown OR a card is opened, so state kept here would be gone on the way
+   * back, and the choice would silently undo itself. Sorting and grouping do stay here: they are
+   * about the rows on screen and have no meaning once the rows are gone.
+   */
+  hidden: ColumnVisibilityState;
+  onHidden(next: ColumnVisibilityState): void;
+  /** ⚠️ The SAME surface a kanban card opens — one screen for a task, not two that agree today. */
+  onOpen(taskId: string): void;
 }) {
   const i18n = useI18n();
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [grouping, setGrouping] = useState<GroupingState>([]);
+  const [expanded, setExpanded] = useState<ExpandedState>(true);
+
+  const data = useMemo(() => rowsOf(board.columns), [board.columns]);
+
+  /**
+   * ⚠️ `helper.columns([...])` rather than a bare array. The accessors carry different value types
+   * (`string`, `string | undefined`), and a plain array makes TypeScript compare their column
+   * definitions structurally — where the `header` and `footer` templates are contravariant and the
+   * error reads "two different types with this name exist". The helper is the API's own answer to
+   * that; it is not a cast, and it keeps every accessor's own type.
+   */
+  const columns = useMemo(
+    () =>
+      helper.columns([
+        helper.accessor((row) => row.task.title, {
+          id: "title",
+          header: i18n.t("board.column.title"),
+          sortFn: "alphanumeric",
+          // Grouping by the title would make one group per row, which is the table again with an
+          // extra line above every entry.
+          enableGrouping: false,
+          cell: ({ row, getValue }) => (
+            <span
+              className="flex items-center gap-1"
+              // The depth is the indent, and it is the only thing that says what hangs under what.
+              style={{ paddingLeft: `${row.depth * 20}px` }}
+            >
+              {row.getCanExpand() ? (
+                <button
+                  type="button"
+                  aria-label={
+                    row.getIsExpanded()
+                      ? i18n.t("board.table.collapse", { row: String(getValue()) })
+                      : i18n.t("board.table.expand", { row: String(getValue()) })
+                  }
+                  onClick={row.getToggleExpandedHandler()}
+                  className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {row.getIsExpanded() ? (
+                    <ChevronDown aria-hidden="true" className="size-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight aria-hidden="true" className="size-4 text-muted-foreground" />
+                  )}
+                </button>
+              ) : (
+                <span className="size-4" />
+              )}
+              <button
+                type="button"
+                onClick={() => onOpen(row.original.task.id)}
+                className="truncate rounded-sm text-left outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {String(getValue())}
+              </button>
+            </span>
+          ),
+        }),
+        helper.accessor((row) => row.columnTitle, {
+          id: "status",
+          header: i18n.t("board.column.status"),
+          sortFn: "alphanumeric",
+        }),
+        helper.accessor((row) => orNothing(row.task.assigneeId), {
+          id: "assignee",
+          header: i18n.t("board.column.assignee"),
+          sortFn: "alphanumeric",
+          sortUndefined: "last",
+          // ⚠️ Grouped by the RAW id, drawn as a name. Grouping by what is drawn would put everybody
+          // this browser cannot name into one group called "a user account".
+          cell: ({ getValue }) => <Assignee id={getValue() ?? null} />,
+        }),
+        helper.accessor((row) => orNothing(row.task.dueDate), {
+          id: "due",
+          header: i18n.t("board.column.due"),
+          // An ISO date sorts correctly as a string, so `basic` is the whole of the comparison.
+          sortFn: "basic",
+          sortUndefined: "last",
+          enableGrouping: false,
+          cell: ({ getValue }) => (
+            <span className="tabular-nums">{getValue()?.slice(0, 10) ?? ""}</span>
+          ),
+        }),
+        helper.accessor((row) => orNothing(row.blocking), {
+          id: "dependsOn",
+          header: i18n.t("board.column.dependsOn"),
+          sortFn: "alphanumeric",
+          sortUndefined: "last",
+          // Grouping by what a card waits for is a real question: everything blocked by the same
+          // card, in one place.
+          cell: ({ getValue }) => getValue() ?? "",
+        }),
+        helper.accessor((row) => row.task.labels.join(", "), {
+          id: "labels",
+          header: i18n.t("board.column.labels"),
+          enableSorting: false,
+          // ⚠️ NOT groupable. A card carries several labels, and grouping a joined string groups by
+          // the accident of their order: `a, b` becomes a group of its own rather than appearing
+          // under `a` and under `b`. That is not "grouped by label", and it looks close enough to
+          // it that nobody checks.
+          enableGrouping: false,
+        }),
+      ]),
+    [i18n, onOpen],
+  );
+
+  const table = useTable({
+    features,
+    columns,
+    data,
+    // The hierarchy the ticket asks for, in one option. Everything else about depth — the indent,
+    // the chevron, which rows exist at all — follows from it.
+    getSubRows: (row: Row) => row.subRows,
+    getRowId: (row: Row) => row.task.id,
+    state: { sorting, columnVisibility: hidden, grouping, expanded },
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: (next) => onHidden(typeof next === "function" ? next(hidden) : next),
+    onGroupingChange: setGrouping,
+    onExpandedChange: setExpanded,
+    /**
+     * ⚠️ **Off, and it has to be off.** TanStack resets the expanded state whenever the row
+     * structure changes, and on a board that happens constantly: every card edit, every drag and
+     * every archive flip hands `data` a new array. With the reset on, opening an epic and then
+     * renaming anything on the board closes it again — and switching grouping on collapsed every
+     * group the moment it appeared.
+     */
+    autoResetExpanded: false,
+  });
 
   if (board.isPending) {
     return <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
@@ -56,144 +234,267 @@ export function BoardTable({
     );
   }
 
-  const groups = groupRows(sortRows(rowsOf(board.columns), sort), group);
+  const grouped = grouping[0] ?? "none";
+  const groupable = table.getAllLeafColumns().filter((column) => column.getCanGroup());
   const configured: BoardColumn[] = board.columns
     .filter((entry) => entry.unknown !== true)
     .map((entry) => entry.column);
-  // ⚠️ The answer this is measured against is the FILTERED one. A board full of cards, narrowed to
-  // a column that happens to be empty, would otherwise be told it has no cards at all — and the
-  // reader would go looking for the cards they just watched disappear.
-  const empty = board.columns.every((entry) => entry.cards.length === 0);
-  const emptyMessage = isFiltering(filter) ? "board.filterEmpty" : "board.tableEmpty";
+  const rows = table.getRowModel().rows;
+  const span = table.getVisibleLeafColumns().length;
+  // ⚠️ Measured on the ANSWER, not on the rows on screen. The filter travels to the server, so an
+  // empty answer under a filter means "nothing matches" while an empty answer without one means
+  // "this board has no cards" — two different sentences for the same zero.
+  const empty = data.length === 0;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col gap-3 p-4" aria-busy={board.isWriting}>
-      <div className="flex flex-wrap items-center gap-4 text-sm">
-        <label className="flex items-center gap-2">
-          {i18n.t("board.filter.status")}
-          {/* ⚠️ This one TRAVELS. `useBoard` carries the filter in the query key and sends it, so
-              the server answers with the cards that match. A view that fetched everything and hid
-              rows in the browser would look identical on screen and be a different thing over the
-              wire — which is why the test asserts the argument of the second request. */}
-          <select
-            className="rounded-md border bg-background px-2 py-1"
-            value={filter.status ?? ""}
-            onChange={(event) =>
-              onFilter(
-                event.target.value === ""
-                  ? { ...filter, status: undefined }
-                  : { ...filter, status: event.target.value },
-              )
-            }
+      {/* ⚠️ Icons only — what each one offers is in its popup. But the ACTIVE state has to stay
+          readable without opening anything: the icon fills, and the quiet line beside it names what
+          is set. An icon trio that says nothing about its own state forces a click to find out. */}
+      <div className="flex flex-wrap items-center gap-1 text-sm">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("board.table.columns")}
+            className="inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring aria-expanded:bg-muted"
           >
-            <option value="">{i18n.t("board.filter.all")}</option>
-            {configured.map((column) => (
-              <option key={column.id} value={column.id}>
-                {column.title}
-              </option>
+            <Columns3 aria-hidden="true" className="size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {table.getAllLeafColumns().map((column) => (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(next) => column.toggleVisibility(next)}
+              >
+                {String(column.columnDef.header)}
+              </DropdownMenuCheckboxItem>
             ))}
-          </select>
-        </label>
-        <label className="flex items-center gap-2">
-          {i18n.t("board.groupBy")}
-          <select
-            className="rounded-md border bg-background px-2 py-1"
-            value={group}
-            onChange={(event) => onGroup(event.target.value as GroupKey)}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("board.groupBy")}
+            className={`inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring aria-expanded:bg-muted ${grouped === "none" ? "" : "bg-accent text-accent-foreground"}`}
           >
-            <option value="none">{i18n.t("board.group.none")}</option>
-            <option value="status">{i18n.t("board.group.status")}</option>
-            <option value="assignee">{i18n.t("board.group.assignee")}</option>
-          </select>
-        </label>
+            <LayoutList aria-hidden="true" className="size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuRadioGroup
+              value={grouped}
+              onValueChange={(next) => setGrouping(next === "none" ? [] : [next])}
+            >
+              <DropdownMenuRadioItem value="none">
+                {i18n.t("board.group.none")}
+              </DropdownMenuRadioItem>
+              {/* ⚠️ Read off the COLUMNS, not a list written here. A hand-kept list is a second
+                  truth about which columns can group: add a column and the menu stays silent about
+                  it, and nothing fails — `enableGrouping` on the column itself is the one answer. */}
+              {groupable.map((column) => (
+                <DropdownMenuRadioItem key={column.id} value={column.id}>
+                  {String(column.columnDef.header)}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("board.filter.status")}
+            className={`inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring aria-expanded:bg-muted ${filter.status === undefined ? "" : "bg-accent text-accent-foreground"}`}
+          >
+            <Filter aria-hidden="true" className="size-4" />
+          </DropdownMenuTrigger>
+          {/* ⚠️ This one TRAVELS. `useBoard` carries it in the query key and sends it, so the server
+              answers with the cards that match — a view that fetched everything and hid rows in the
+              browser would look identical on screen and be a different thing over the wire. */}
+          <DropdownMenuContent align="start">
+            <DropdownMenuRadioGroup
+              value={filter.status ?? ""}
+              onValueChange={(next) =>
+                onFilter(
+                  next === "" ? { ...filter, status: undefined } : { ...filter, status: next },
+                )
+              }
+            >
+              <DropdownMenuRadioItem value="">{i18n.t("board.filter.all")}</DropdownMenuRadioItem>
+              {configured.map((column) => (
+                <DropdownMenuRadioItem key={column.id} value={column.id}>
+                  {column.title}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <span className="ml-2 text-xs text-muted-foreground">
+          {[
+            grouped === "none"
+              ? null
+              : i18n.t("board.table.groupedBy", {
+                  column: String(
+                    groupable.find((column) => column.id === grouped)?.columnDef.header ?? grouped,
+                  ),
+                }),
+            filter.status === undefined
+              ? null
+              : i18n.t("board.table.filteredBy", {
+                  column: configured.find((c) => c.id === filter.status)?.title ?? filter.status,
+                }),
+          ]
+            .filter(Boolean)
+            .join(" · ")}
+        </span>
       </div>
 
       <div className="min-h-0 flex-1 overflow-auto">
         <table className="w-full border-collapse text-left text-sm">
           <thead>
-            <tr className="border-b">
-              {headers.map((header) => (
-                <th
-                  key={header.key}
-                  scope="col"
-                  aria-sort={ariaSortOf(sort, header.key)}
-                  className="p-2 font-medium"
-                >
-                  <button
-                    type="button"
-                    onClick={() => onSort(nextSort(sort, header.key))}
-                    className="inline-flex items-center gap-1 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            {table.getHeaderGroups().map((group) => (
+              <tr key={group.id} className="border-b">
+                {group.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    scope="col"
+                    aria-sort={
+                      header.column.getIsSorted() === "asc"
+                        ? "ascending"
+                        : header.column.getIsSorted() === "desc"
+                          ? "descending"
+                          : "none"
+                    }
+                    className="px-2 py-3 font-medium"
                   >
-                    {i18n.t(header.labelKey)}
-                    <span aria-hidden="true" className="text-xs text-muted-foreground">
-                      {sort?.key === header.key ? (sort.direction === "asc" ? "▲" : "▼") : ""}
-                    </span>
-                  </button>
-                </th>
-              ))}
-              <th scope="col" className="p-2 font-medium">
-                {i18n.t("board.column.labels")}
-              </th>
-            </tr>
-          </thead>
-          {groups.map((entry) => (
-            <tbody key={entry.key ?? "-none-"}>
-              {group === "none" ? null : (
-                <tr className="border-b bg-muted/40">
-                  <th scope="rowgroup" colSpan={headers.length + 1} className="p-2 text-left">
-                    {group === "assignee" ? (
-                      <Assignee id={entry.key} />
+                    {header.column.getCanSort() ? (
+                      <button
+                        type="button"
+                        onClick={header.column.getToggleSortingHandler()}
+                        className="inline-flex items-center gap-1 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      >
+                        {String(header.column.columnDef.header)}
+                        <span aria-hidden="true" className="text-xs text-muted-foreground">
+                          {header.column.getIsSorted() === "asc"
+                            ? "\u25b2"
+                            : header.column.getIsSorted() === "desc"
+                              ? "\u25bc"
+                              : ""}
+                        </span>
+                      </button>
                     ) : (
-                      (entry.key ?? i18n.t("board.unassigned"))
+                      String(header.column.columnDef.header)
                     )}
-                    <span className="ml-2 text-xs font-normal text-muted-foreground tabular-nums">
-                      {entry.rows.length}
-                    </span>
                   </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          {/* ⚠️ One `tbody` PER GROUP, and the heading scopes to it. That is what actually
+              associates a heading with the rows under it: `scope="row"` binds to the heading's own
+              row and says nothing about the ones below, so a single `tbody` with headings sprinkled
+              through it reads to a screen reader as one long list with odd rows in it. */}
+          {groupsOf(rows).map((group) => (
+            <tbody key={group.key}>
+              {group.heading === undefined ? null : <GroupRow row={group.heading} span={span} />}
+              {group.rows.map((row) => (
+                <tr key={row.id} className="border-b last:border-0">
+                  {row.getVisibleCells().map((cell) => (
+                    // ⚠️ Room above and below. A table one has to decipher rather than read is a
+                    // table people stop reading.
+                    <td key={cell.id} className="px-2 py-3">
+                      {/* ⚠️ `flexRender` with the cell's OWN context, not the cell. A hand-rolled
+                          call that passes the cell itself hands the renderer an object without the
+                          context's fields, and the first `{ row }` destructuring throws — the whole
+                          table then vanishes behind the router's error boundary, which reads as
+                          "the table does not render" rather than as a wrong argument. */}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
                 </tr>
-              )}
-              {entry.rows.map((row) => (
-                <Line key={row.task.id} row={row} />
               ))}
             </tbody>
           ))}
         </table>
-        {empty ? <p className="p-6 text-sm text-muted-foreground">{i18n.t(emptyMessage)}</p> : null}
+        {empty ? (
+          <p className="p-6 text-sm text-muted-foreground">
+            {i18n.t(isFiltering(filter) ? "board.filterEmpty" : "board.tableEmpty")}
+          </p>
+        ) : null}
       </div>
     </div>
   );
 }
 
 /**
- * Who a card belongs to, by the one rule this application has for saying so.
+ * The rows split into groups, each with the heading that belongs to it.
  *
- * ⚠️ **Never the raw id.** Intel has no user directory — `useUserName` can resolve exactly one id,
- * the signed-in person's — and an id under the heading "assigned to" is not an answer to "who", it
- * is the question again in smaller type. It would also put a Gate principal identifier on a screen
- * that has no reason to carry one (`user-name.ts`, #258). Somebody this browser cannot name is
- * drawn as somebody, which is true, and the word changes in exactly one place when Intel gains a
- * lookup (#261).
+ * With no grouping there is exactly one group and no heading, so the view keeps ONE code path
+ * rather than a branch that only the grouped case exercises.
  */
-function Assignee({ id }: { id: string | null }) {
-  const i18n = useI18n();
-  const name = useUserName(id);
-  if (id === null) return <>{i18n.t("board.unassigned")}</>;
-  return <>{name ?? i18n.t("node.someUser")}</>;
+function groupsOf(rows: TableRow[]): { key: string; heading?: TableRow; rows: TableRow[] }[] {
+  const groups: { key: string; heading?: TableRow; rows: TableRow[] }[] = [];
+  for (const row of rows) {
+    if (row.getIsGrouped()) groups.push({ key: row.id, heading: row, rows: [] });
+    else if (groups.length === 0) groups.push({ key: "all", rows: [row] });
+    else groups[groups.length - 1]?.rows.push(row);
+  }
+  return groups;
 }
 
-function Line({ row }: { row: Row }) {
+/**
+ * The heading of one group.
+ *
+ * ⚠️ A component rather than a branch in the loop, because the label needs a hook: grouping by who
+ * a card belongs to groups by the raw Gate id, and that id must not reach the screen — nor an
+ * `aria-label`, which is screen for everybody using one (`user-name.ts`, #258).
+ */
+function GroupRow({ row, span }: { row: TableRow; span: number }) {
+  const i18n = useI18n();
+  const column = row.groupingColumnId;
+  const value = column === undefined ? undefined : row.getGroupingValue(column);
+  const assignee = column === "assignee";
+  const resolved = useAssigneeLabel(assignee ? ((value as string | null) ?? null) : null);
+  const label = assignee
+    ? resolved
+    : value === undefined || value === null || value === ""
+      ? i18n.t("board.group.empty")
+      : String(value);
+  // ⚠️ Every row of the group, not `row.subRows`. A grouped row's `subRows` holds the TOP level
+  // only, so an epic with three subtasks under it counts as one — a heading that says `2` above
+  // four visible rows.
+  const count = row.getLeafRows().length;
+
   return (
-    <tr className="border-b last:border-0">
-      <td className="p-2">{row.task.title}</td>
-      <td className="p-2">{row.columnTitle}</td>
-      <td className="p-2 text-muted-foreground">
-        <Assignee id={row.task.assigneeId} />
-      </td>
-      {/* The date, not the time: a board deals in days, and a timestamp in a cell is noise that
-          pushes the columns beside it off the screen. */}
-      <td className="p-2 tabular-nums">{row.task.dueDate?.slice(0, 10) ?? ""}</td>
-      <td className="p-2">{row.blocking ?? ""}</td>
-      <td className="p-2 text-muted-foreground">{row.task.labels.join(", ")}</td>
+    <tr className="border-b bg-muted/40">
+      <th scope="rowgroup" colSpan={span} className="px-2 py-2 text-left font-medium">
+        <button
+          type="button"
+          onClick={row.getToggleExpandedHandler()}
+          aria-label={i18n.t(row.getIsExpanded() ? "board.table.collapse" : "board.table.expand", {
+            row: label,
+          })}
+          className="inline-flex items-center gap-1 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {row.getIsExpanded() ? (
+            <ChevronDown aria-hidden="true" className="size-4" />
+          ) : (
+            <ChevronRight aria-hidden="true" className="size-4" />
+          )}
+          {label}
+          <span className="text-xs text-muted-foreground tabular-nums">{count}</span>
+        </button>
+      </th>
     </tr>
   );
 }
+
+/**
+ * Who a card belongs to, by the one rule this application has for saying so.
+ *
+ * ⚠️ **Never the raw id.** Intel has no user directory — `useUserName` resolves exactly one id, the
+ * signed-in person's — and an id under the heading "assigned to" is not an answer to "who", it is
+ * the question again in smaller type (#258).
+ */
+function Assignee({ id }: { id: string | null }) {
+  return <>{useAssigneeLabel(id)}</>;
+}