@anchrd/intel-ui 0.40.0 → 0.42.0

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

@@ -8,7 +8,6 @@ import {
   createGroupedRowModel,
   createSortedRowModel,
   type ExpandedState,
-  flexRender,
   type GroupingState,
   type Row as LibRow,
   rowExpandingFeature,
@@ -19,11 +18,14 @@ import {
   tableFeatures,
   useTable,
 } from "@tanstack/react-table";
-import { ChevronDown, ChevronRight, Columns3, Filter, LayoutList } from "lucide-react";
+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,
@@ -112,45 +114,13 @@ export function BoardTable({
         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,
-          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",
@@ -164,7 +134,14 @@ export function BoardTable({
           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.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",
@@ -173,9 +150,6 @@ export function BoardTable({
           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",
@@ -184,7 +158,6 @@ export function BoardTable({
           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",
@@ -197,7 +170,7 @@ export function BoardTable({
           enableGrouping: false,
         }),
       ]),
-    [i18n, onOpen],
+    [i18n],
   );
 
   const table = useTable({
@@ -236,11 +209,14 @@ export function BoardTable({
 
   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;
-  const span = table.getVisibleLeafColumns().length;
+  // 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.
@@ -328,8 +304,56 @@ export function BoardTable({
           </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", {
@@ -350,44 +374,26 @@ export function BoardTable({
 
       <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>
-            {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"
-                  >
-                    {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>
-                    ) : (
-                      String(header.column.columnDef.header)
-                    )}
-                  </th>
-                ))}
-              </tr>
-            ))}
+            <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
@@ -395,21 +401,23 @@ export function BoardTable({
               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.heading === undefined ? null : <GroupRow row={group.heading} span={1} />}
               {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
+                  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>
@@ -489,12 +497,110 @@ function GroupRow({ row, span }: { row: TableRow; span: number }) {
 }
 
 /**
- * Who a card belongs to, by the one rule this application has for saying so.
+ * One row: the title, and beside it only the values that are set.
  *
- * ⚠️ **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).
+ * ⚠️ **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 Assignee({ id }: { id: string | null }) {
-  return <>{useAssigneeLabel(id)}</>;
+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} clear={() => write({ assigneeId: null })} />
+      ) : null}
+    </span>
+  );
 }