@anchrd/intel 0.59.0

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

@@ -0,0 +1,610 @@
+import type { BoardColumn, BoardTaskFilter } from "@contract/board.ts";
+import {
+  type ColumnVisibilityState,
+  columnGroupingFeature,
+  columnVisibilityFeature,
+  createColumnHelper,
+  createExpandedRowModel,
+  createGroupedRowModel,
+  createSortedRowModel,
+  type ExpandedState,
+  type GroupingState,
+  type Row as LibRow,
+  rowExpandingFeature,
+  rowSortingFeature,
+  type SortingState,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  tableFeatures,
+  useTable,
+} from "@tanstack/react-table";
+import { ArrowUpDown, ChevronDown, ChevronRight, Columns3, Filter, LayoutList } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useAssigneeLabel } from "@/board/board-assignee/board-assignee.ts";
+import { AssigneeChip } from "@/board/board-assignee/board-assignee.tsx";
+import { BoardChip } from "@/board/board-chip/board-chip.tsx";
+import { isFiltering } from "@/board/board-data/board-data.ts";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import { StatusChip } from "@/board/board-status/board-status.tsx";
+import {
+  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,
+  hidden,
+  onHidden,
+  onOpen,
+}: {
+  board: BoardHandle;
+  filter: Partial<BoardTaskFilter>;
+  onFilter(next: Partial<BoardTaskFilter>): 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"),
+          // ⚠️ Not hideable. It IS the row: an entry in the chooser that changes nothing when
+          // pressed is a control that lies about what it does.
+          enableHiding: false,
+          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,
+        }),
+        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".
+        }),
+        helper.accessor((row) => orNothing(row.task.startDate), {
+          id: "start",
+          header: i18n.t("board.column.start"),
+          // An ISO date sorts correctly as a string, so `basic` is the whole of the comparison.
+          sortFn: "basic",
+          sortUndefined: "last",
+          enableGrouping: false,
+        }),
+        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,
+        }),
+        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.
+        }),
+        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],
+  );
+
+  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>;
+  }
+  if (board.isError) {
+    return (
+      <p role="alert" className="p-6 text-sm text-destructive">
+        {i18n.t("board.failed")}
+      </p>
+    );
+  }
+
+  const grouped = grouping[0] ?? "none";
+  const groupable = table.getAllLeafColumns().filter((column) => column.getCanGroup());
+  const sortable = table.getAllLeafColumns().filter((column) => column.getCanSort());
+  const configured: BoardColumn[] = board.columns
+    .filter((entry) => entry.unknown !== true)
+    .map((entry) => entry.column);
+  const rows = table.getRowModel().rows;
+  // Which chips a row may draw. The column chooser therefore still decides what is on screen, it
+  // just decides it per chip instead of per column.
+  const visible = new Set(table.getVisibleLeafColumns().map((column) => column.id));
+  // ⚠️ 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}>
+      {/* ⚠️ 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"
+          >
+            <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>
+            ))}
+          </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"}`}
+          >
+            <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>
+
+        <DropdownMenu>
+          {/* ⚠️ **Sorting needs its own place now.** It used to live on the column headings, and
+              those are gone: one heading is left, and hanging four sort orders off it would be a
+              control nobody finds. The toolbar is where the other three view settings already are. */}
+          <DropdownMenuTrigger
+            aria-label={i18n.t("board.sortBy")}
+            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 ${sorting.length === 0 ? "" : "bg-accent text-accent-foreground"}`}
+          >
+            <ArrowUpDown aria-hidden="true" className="size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuRadioGroup
+              value={
+                sorting[0] === undefined
+                  ? ""
+                  : `${sorting[0].id}:${sorting[0].desc ? "desc" : "asc"}`
+              }
+              onValueChange={(next) =>
+                setSorting(
+                  next === ""
+                    ? []
+                    : [{ id: next.split(":")[0] ?? "", desc: next.endsWith(":desc") }],
+                )
+              }
+            >
+              <DropdownMenuRadioItem value="">{i18n.t("board.sort.none")}</DropdownMenuRadioItem>
+              {/* ⚠️ Read off the COLUMNS like the grouping menu, not from a list written here: a
+                  column that stops being sortable disappears from the menu on its own. */}
+              {sortable.flatMap((column) => [
+                <DropdownMenuRadioItem key={`${column.id}:asc`} value={`${column.id}:asc`}>
+                  {i18n.t("board.sort.asc", { column: String(column.columnDef.header) })}
+                </DropdownMenuRadioItem>,
+                <DropdownMenuRadioItem key={`${column.id}:desc`} value={`${column.id}:desc`}>
+                  {i18n.t("board.sort.desc", { column: String(column.columnDef.header) })}
+                </DropdownMenuRadioItem>,
+              ])}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <span className="ml-2 text-xs text-muted-foreground">
+          {[
+            sorting[0] === undefined
+              ? null
+              : i18n.t(sorting[0].desc ? "board.sort.desc" : "board.sort.asc", {
+                  column: String(
+                    sortable.find((column) => column.id === sorting[0]?.id)?.columnDef.header ??
+                      sorting[0].id,
+                  ),
+                }),
+            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">
+          {/* ⚠️ ONE heading. The other five said what their column was called and nothing about the
+              row; a card without a due date filled a cell with emptiness, and a table half made of
+              emptiness is one people stop reading. What a value IS, its chip says. */}
+          <thead>
+            <tr className="border-b">
+              {/* ⚠️ `aria-sort` survives the loss of the other headings. It is the only place the
+                  TABLE itself says it is ordered; the quiet line in the toolbar says it to whoever
+                  reads the toolbar, and a screen reader announcing a table does not. It reads
+                  `none` while another column orders the rows, because that is what is true of this
+                  one. */}
+              <th
+                scope="col"
+                aria-sort={
+                  sorting[0]?.id !== "title" ? "none" : sorting[0].desc ? "descending" : "ascending"
+                }
+                className="px-2 py-3 font-medium"
+              >
+                {i18n.t("board.column.title")}
+              </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={1} />}
+              {group.rows.map((row) => (
+                <tr
+                  key={row.id}
+                  // ⚠️ A very light grey, and on the whole row. It says which row the pointer is on,
+                  // which is the only thing a table this wide cannot say by itself.
+                  className="border-b last:border-0 hover:bg-muted/40"
+                >
+                  <td className="px-2 py-3">
+                    <RowContent
+                      row={row}
+                      visible={visible}
+                      onOpen={onOpen}
+                      board={board}
+                      columns={configured}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          ))}
+        </table>
+        {empty ? (
+          <p className="p-6 text-sm text-muted-foreground">
+            {i18n.t(isFiltering(filter) ? "board.filterEmpty" : "board.tableEmpty")}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The rows split into groups, each with the heading that belongs to it.
+ *
+ * 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 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;
+}
+
+/**
+ * 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 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>
+  );
+}
+
+/**
+ * One row: the title, and beside it only the values that are set.
+ *
+ * ⚠️ **Always the same order** — column, dates, labels, what it waits for, then who it is for. The
+ * rows carry different numbers of chips, so without a fixed order the eye has no line to follow and
+ * every row has to be read from the start.
+ *
+ * ⚠️ **The circle is last, always.** It is the only round thing in the row; between the chips it
+ * breaks the line, and a row nobody is on simply ends earlier.
+ *
+ * ⚠️ **A chip is drawn only when its column is visible AND its value is set.** The column chooser
+ * therefore still works, it just hides a chip rather than an empty cell.
+ */
+function RowContent({
+  row,
+  visible,
+  onOpen,
+  board,
+  columns,
+}: {
+  row: TableRow;
+  visible: Set<string>;
+  onOpen(taskId: string): void;
+  board: BoardHandle;
+  columns: BoardColumn[];
+}) {
+  const i18n = useI18n();
+  const { task, columnTitle, blocking } = row.original;
+
+  const write = (input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>) => {
+    // ⚠️ Refused while a write is in flight, like every other surface of this board (#651).
+    if (board.isWriting) return;
+    void board.updateTask({ taskId: task.id, ...input, idempotencyKey: crypto.randomUUID() });
+  };
+
+  return (
+    <span className="flex items-center gap-2" style={{ paddingLeft: `${row.depth * 20}px` }}>
+      {row.getCanExpand() ? (
+        <button
+          type="button"
+          aria-label={i18n.t(row.getIsExpanded() ? "board.table.collapse" : "board.table.expand", {
+            row: task.title,
+          })}
+          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(task.id)}
+        className="min-w-0 flex-1 truncate rounded-sm text-left outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {task.title}
+      </button>
+
+      {visible.has("status") ? (
+        <StatusChip status={task.status} title={columnTitle} columns={columns} write={write} />
+      ) : null}
+
+      {visible.has("start") && task.startDate !== null ? (
+        <BoardChip
+          label={i18n.t("board.fromDate", { date: task.startDate.slice(0, 10) })}
+          action={i18n.t("board.clearStart")}
+          onClick={() => write({ startDate: null })}
+        />
+      ) : null}
+      {visible.has("due") && task.dueDate !== null ? (
+        <BoardChip
+          label={i18n.t("board.untilDate", { date: task.dueDate.slice(0, 10) })}
+          action={i18n.t("board.clearDue")}
+          onClick={() => write({ dueDate: null })}
+        />
+      ) : null}
+
+      {visible.has("labels")
+        ? task.labels.map((label) => (
+            <BoardChip
+              key={label}
+              label={label}
+              action={i18n.t("board.removeLabel")}
+              onClick={() => write({ labels: task.labels.filter((keep) => keep !== label) })}
+            />
+          ))
+        : null}
+
+      {visible.has("dependsOn") && blocking !== null ? (
+        <BoardChip
+          label={blocking}
+          action={i18n.t("board.clearDependsOn")}
+          onClick={() => write({ dependsOn: null })}
+        />
+      ) : null}
+
+      {visible.has("assignee") && task.assigneeId !== null ? (
+        <AssigneeChip
+          id={task.assigneeId}
+          boardId={board.boardId}
+          onPick={(assigneeId) => write({ assigneeId })}
+        />
+      ) : null}
+    </span>
+  );
+}