@anchrd/intel-ui 0.41.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/attachment-viewer/attachment-viewer.tsx

@@ -105,6 +105,7 @@ export function AttachmentViewer({ document }: { document: NodeDocument }) {
   const kind = document.version
     ? attachmentPreviewKind(document.node.title, document.version.mediaType)
     : "unsupported";
+  const hasViewerControls = kind !== "image" && kind !== "unsupported";
 
   return (
     <div className="flex min-h-0 flex-1 flex-col px-6 pb-6">
@@ -146,15 +147,15 @@ export function AttachmentViewer({ document }: { document: NodeDocument }) {
           <AttachmentDetails
             document={document}
             file={file}
-            footerInset={kind === "pdf"}
+            footerInset={hasViewerControls}
             kind={kind}
             close={() => setDetailsOpen(false)}
           />
         ) : null}
-        {detailsOpen && kind === "pdf" ? (
+        {detailsOpen && hasViewerControls ? (
           <div
             aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-12 z-10 hidden border-t md:block"
+            className="pointer-events-none absolute inset-x-0 bottom-14 z-10 hidden border-t md:block"
           />
         ) : null}
       </div>
@@ -258,8 +259,8 @@ function AttachmentDetails({
       aria-label={i18n.t("attachment.details.title")}
       className={cn(
         "absolute inset-x-0 bottom-0 z-10 max-h-[80%] overflow-auto border-t bg-background shadow-lg md:static md:z-auto md:w-80 md:max-h-none md:shrink-0 md:border-l md:border-t-0 md:shadow-none",
-        // The PDF renderer alone owns a bottom toolbar; keep the desktop panel beside its content.
-        footerInset && "md:mb-12",
+        // File renderers keep their controls in a shared footer; the panel ends beside that footer.
+        footerInset && "md:mb-14",
       )}
     >
       <div className="flex items-center justify-between border-b px-5 py-4">

package/src/board/board-assignee/board-assignee.tsx

@@ -0,0 +1,45 @@
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { initials } from "@/user-name/user-name.ts";
+import { useAssigneeLabel } from "./board-assignee.ts";
+
+/**
+ * The circle for whoever a card is for, and the way to take the assignment off.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both draw it; written twice they
+ * would drift, and the drift would be an accessibility bug on exactly one of them.
+ *
+ * ⚠️ **One person, not a group.** Jack's decision 2026-08-20: the STYLE is borrowed from the access
+ * summary, the field stays `assigneeId`. A row of circles would imply a second data model.
+ *
+ * ⚠️ **Only ever drawn for somebody.** "Nobody yet" as a chip is a placeholder for an absence, and
+ * an absence needs no place on screen (#692).
+ *
+ * ⚠️ **The NAME lives on the button, and the circle is hidden.** Children of a `<button>` are
+ * presentational in ARIA, so a label inside one is never announced and the button's own name wins.
+ * Wrapping the circle in a control therefore takes the person out of the accessibility tree unless
+ * the control says it too. That is the trap in `packages/ui/CLAUDE.md`.
+ */
+export function AssigneeChip({ id, clear }: { id: string; clear(): void }) {
+  const i18n = useI18n();
+  const label = useAssigneeLabel(id);
+  return (
+    <button
+      type="button"
+      aria-label={i18n.t("board.clearAssignee", { name: label })}
+      title={label}
+      onClick={clear}
+      className="shrink-0 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span
+        // ⚠️ **Hidden, and it must stay hidden.** This span used to carry `role="img"` with the
+        // person's name, and that reached nobody: it sits inside a button. Giving it a role and a
+        // label back would not add a second announcement, it would add none, while making the code
+        // look as though the name were covered here rather than on the button.
+        aria-hidden="true"
+        className="flex size-7 items-center justify-center rounded-full bg-accent text-xs font-medium text-accent-foreground ring-2 ring-background"
+      >
+        {initials(label)}
+      </span>
+    </button>
+  );
+}

package/src/board/board-chip/board-chip.tsx

@@ -0,0 +1,31 @@
+/**
+ * A value on a card, and the way to take it off again.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both draw these; written twice
+ * they drift in size, in shape and — the expensive one — in what they are called.
+ *
+ * ⚠️ **The name says the value AND what pressing it does.** A button called `Zebra` that quietly
+ * clears a dependency is one nobody can predict; a name that drops the value is the other half of
+ * the mistake, because somebody speaking the visible words has to be able to reach the control by
+ * them (WCAG 2.5.3). Value first, then the consequence.
+ */
+export function BoardChip({
+  label,
+  action,
+  onClick,
+}: {
+  label: string;
+  action: string;
+  onClick(): void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={`${label}, ${action}`}
+      onClick={onClick}
+      className="shrink-0 rounded-full border px-2.5 py-0.5 text-xs tabular-nums outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {label}
+    </button>
+  );
+}

package/src/board/board-status/board-status.tsx

@@ -0,0 +1,60 @@
+import type { BoardColumn } from "@anchrd/intel-contract/board";
+import { ARCHIVE_COLUMN_ID } from "@anchrd/intel-contract/board";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * The column a card sits in, and the way to move it.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both offer this, and the archive
+ * is an entry in it: written twice, one of them would eventually keep an entry the other dropped,
+ * and a reader would find a card archivable from one screen and not from the other. Exactly the
+ * reason `AssigneeChip` was pulled out beside it.
+ */
+export function StatusChip({
+  status,
+  title,
+  columns,
+  write,
+}: {
+  status: string;
+  title: string;
+  columns: BoardColumn[];
+  write(input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>): void;
+}) {
+  const i18n = useI18n();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        // ⚠️ The VALUE first, then what pressing it does. A label that says only "move to a column"
+        // replaces the one thing the pill is there to show, and that fact then exists on screen and
+        // nowhere else.
+        aria-label={`${title}, ${i18n.t("board.moveTo")}`}
+        className="shrink-0 rounded-full border px-2.5 py-0.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {title}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {/* ⚠️ Where a card SITS is a move, not a field edit: the server computes a position and
+            checks the cycles for it. Everything else on these screens is a plain change. */}
+        <DropdownMenuRadioGroup value={status} onValueChange={(next) => write({ status: next })}>
+          {columns.map((entry) => (
+            <DropdownMenuRadioItem key={entry.id} value={entry.id}>
+              {entry.title}
+            </DropdownMenuRadioItem>
+          ))}
+          <DropdownMenuRadioItem value={ARCHIVE_COLUMN_ID}>
+            {i18n.t("board.column.archive")}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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>
+  );
 }