@anchrd/intel-ui 0.36.0 → 0.38.0

package/src/board/board-kanban/board-kanban.tsx

@@ -0,0 +1,295 @@
+import type { BoardTask } from "@anchrd/intel-contract/board";
+import { useState } from "react";
+import type { BoardHandle, ColumnWithCards } from "@/board/board-data/board-data.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { type Drop, dropIndexOnCard, dropToWrite, neighbourDrop } from "./board-kanban.ts";
+
+// The id of the card being dragged. `getData` is the payload the browser carries for us; nothing
+// else about the gesture needs to survive a re-render, so there is no state here.
+const CARRIED = "text/plain";
+
+function Card({
+  card,
+  column,
+  row,
+  board,
+  onMove,
+}: {
+  card: BoardTask;
+  column: ColumnWithCards;
+  row: number;
+  board: BoardHandle;
+  onMove(card: BoardTask, drop: Drop): void;
+}) {
+  const i18n = useI18n();
+  const locked = board.isWriting;
+  return (
+    <li
+      onDragOver={(event) => {
+        if (locked) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+      }}
+      onDrop={(event) => {
+        if (locked) return;
+        event.preventDefault();
+        // ⚠️ The column below is a drop target too, and it means "append". Letting this event reach
+        // it would overwrite the gap just measured with the end of the column — the bug this
+        // handler exists to fix, restored by the bubbling.
+        event.stopPropagation();
+        const dragged = cardById(board, event.dataTransfer.getData(CARRIED));
+        if (dragged === undefined) return;
+        const index = dropIndexOnCard(
+          row,
+          event.clientY,
+          event.currentTarget.getBoundingClientRect(),
+        );
+        onMove(dragged, { status: column.column.id, index });
+      }}
+    >
+      {/* ⚠️ A real button, not an `<li role="button">`. The role override needs two lint
+          suppressions and still leaves a listitem that only *claims* to be operable; a button is
+          focusable, is announced as operable, and — the part that made the override look necessary
+          — may perfectly well be a drag source. */}
+      <button
+        type="button"
+        draggable={!locked}
+        aria-label={i18n.t("board.cardLabel", { title: card.title, column: column.column.title })}
+        className="w-full cursor-grab rounded-md border border-border bg-card p-2 text-left text-sm shadow-xs focus-visible:outline-2 focus-visible:outline-ring"
+        onDragStart={(event) => {
+          event.dataTransfer.setData(CARRIED, card.id);
+          event.dataTransfer.effectAllowed = "move";
+        }}
+        onKeyDown={(event) => {
+          // ⚠️ Not while a write is in flight. Two moves in quick succession both read the same
+          // not-yet-updated `board.columns`, compute a position independently and both write — the
+          // second answer overwrites the first, with no error, because both succeeded. That is the
+          // race `isWriting` was introduced for in #651, and marking the board busy without
+          // refusing the input leaves it exactly as open as before.
+          if (locked) return;
+          // ⚠️ Only with a modifier. The arrows alone belong to whatever the reader is used to —
+          // scrolling the column, moving focus — and taking them would make a board that cannot be
+          // read without moving its cards.
+          if (!event.altKey) return;
+          const direction =
+            event.key === "ArrowLeft"
+              ? "left"
+              : event.key === "ArrowRight"
+                ? "right"
+                : event.key === "ArrowUp"
+                  ? "up"
+                  : event.key === "ArrowDown"
+                    ? "down"
+                    : null;
+          if (direction === null) return;
+          const drop = neighbourDrop(card, board.columns, direction);
+          if (drop === null) return;
+          event.preventDefault();
+          onMove(card, drop);
+        }}
+      >
+        <span className="block">{card.title}</span>
+        {card.dueDate === null ? null : (
+          <span className="mt-1 block text-xs text-muted-foreground">
+            {card.dueDate.slice(0, 10)}
+          </span>
+        )}
+      </button>
+    </li>
+  );
+}
+
+function cardById(board: BoardHandle, id: string): BoardTask | undefined {
+  return board.columns.flatMap((entry) => entry.cards).find((card) => card.id === id);
+}
+
+/**
+ * One column, with the way to add a card to it.
+ *
+ * ⚠️ **`group/column` sits on the section, and that is only safe because columns do not nest.**
+ * A named group compiles to a DESCENDANT selector: put it on something that also holds another
+ * column and hovering one card lights the add row of every column below it — the tree paid for that
+ * with #252, and `packages/ui/CLAUDE.md` carries the rule. Here the sections are siblings, so a
+ * card in one is never a descendant of another. `board-kanban.unit.tsx` asserts exactly that,
+ * structurally, because jsdom computes no hover.
+ */
+function Column({
+  entry,
+  board,
+  onMove,
+}: {
+  entry: ColumnWithCards;
+  board: BoardHandle;
+  onMove(card: BoardTask, drop: Drop): void;
+}) {
+  const i18n = useI18n();
+  const [composing, setComposing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [failed, setFailed] = useState(false);
+  // ⚠️ A column the board does not configure takes no new card: the server refuses a status that
+  // names no column (`unknown_column`), so offering the control would promise a refusal.
+  const addable = entry.unknown !== true;
+
+  // ⚠️ One way out, and it clears the REFUSAL too. Left standing, the message outlives the attempt
+  // it belongs to: somebody types, is refused, presses Escape — and the column keeps a sentence
+  // about a card nobody is trying to create any more, until the next attempt happens to clear it.
+  const close = () => {
+    setComposing(false);
+    setDraft("");
+    setFailed(false);
+  };
+
+  const create = () => {
+    const title = draft.trim();
+    if (title.length === 0 || board.isWriting) return;
+    setFailed(false);
+    board
+      .createTask({
+        title,
+        status: entry.column.id,
+        // ⚠️ Spelled out because the handle takes the contract's OUTPUT type, where every default
+        // has already been applied and the fields are therefore required. The server decides the
+        // position — the end of this column — and a retry does not move the card again (#648).
+        assigneeId: null,
+        labels: [],
+        startDate: null,
+        dueDate: null,
+        dependsOn: null,
+        idempotencyKey: crypto.randomUUID(),
+      })
+      .then(close)
+      // ⚠️ Reported IN the column. A refusal shown only in a global banner leaves the reader
+      // looking at the column they typed into, which says nothing happened.
+      .catch(() => setFailed(true));
+  };
+
+  return (
+    <section
+      aria-label={entry.column.title}
+      className="group/column flex w-64 shrink-0 flex-col gap-2"
+      onDragOver={(event) => {
+        if (board.isWriting) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+      }}
+      onDrop={(event) => {
+        if (board.isWriting) return;
+        event.preventDefault();
+        const dragged = cardById(board, event.dataTransfer.getData(CARRIED));
+        // ⚠️ Let go on the column itself rather than on one of its cards: the end of it. A card
+        // drop stops the event before it arrives here, so this is the free area below the last
+        // card — and there, "append" is what the gesture means.
+        if (dragged !== undefined) {
+          onMove(dragged, { status: entry.column.id, index: entry.cards.length });
+        }
+      }}
+    >
+      <h3 className="flex items-baseline gap-2 px-1 text-sm font-medium">
+        {entry.column.title}
+        <span className="text-xs text-muted-foreground tabular-nums">{entry.cards.length}</span>
+        {entry.unknown === true ? (
+          // ⚠️ A column the board does not configure — cards whose status names nothing. Drawn
+          // rather than hidden: a card nobody can see is a card somebody will look for.
+          <span className="text-xs text-muted-foreground">{i18n.t("board.unknownColumn")}</span>
+        ) : null}
+        {addable ? (
+          // ⚠️ The narrow-screen way in, and it is ALWAYS visible: hover is not a gesture a touch
+          // screen has, so the row below would be unreachable there. Above `md` this one steps
+          // aside for it.
+          <button
+            type="button"
+            aria-label={i18n.t("board.addCardIn", { column: entry.column.title })}
+            onClick={() => setComposing(true)}
+            className="ml-auto rounded-md px-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+          >
+            +
+          </button>
+        ) : null}
+      </h3>
+      <ul className="flex flex-col gap-2">
+        {entry.cards.map((card, row) => (
+          <Card key={card.id} card={card} column={entry} row={row} board={board} onMove={onMove} />
+        ))}
+      </ul>
+      {entry.cards.length === 0 ? (
+        <p className="px-1 text-xs text-muted-foreground">{i18n.t("board.columnEmpty")}</p>
+      ) : null}
+      {addable ? (
+        composing ? (
+          <input
+            // The field exists because it was just asked for, and making the reader click a second
+            // time is the whole cost of the control.
+            // biome-ignore lint/a11y/noAutofocus: it opens on a deliberate click, never on load
+            autoFocus
+            value={draft}
+            aria-label={i18n.t("board.addCardIn", { column: entry.column.title })}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                create();
+              }
+              if (event.key === "Escape") close();
+            }}
+            onBlur={() => {
+              if (draft.trim().length === 0) close();
+            }}
+            className="rounded-md border bg-background px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+        ) : (
+          // ⚠️ `md:opacity-0` plus BOTH group states, not `hover` alone: a control that only exists
+          // while a pointer rests on the column does not exist for a keyboard at all. Focus inside
+          // the column brings it back, the same shape the tree uses for its plus.
+          <button
+            type="button"
+            onClick={() => setComposing(true)}
+            className="hidden rounded-md px-2 py-1 text-left text-sm text-muted-foreground outline-none transition-opacity hover:bg-muted focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring group-focus-within/column:opacity-100 group-hover/column:opacity-100 md:block md:opacity-0"
+          >
+            {i18n.t("board.addCard")}
+          </button>
+        )
+      ) : null}
+      {failed ? (
+        <p role="alert" className="px-1 text-xs text-destructive">
+          {i18n.t("board.createFailed")}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+export function BoardKanban({ board }: { board: BoardHandle }) {
+  const i18n = useI18n();
+
+  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 move = (card: BoardTask, drop: Drop) => {
+    const write = dropToWrite(card, board.columns, drop);
+    // ⚠️ `null` means the card is where it already was. Writing anyway would recompute the position
+    // and make it jump — the most common "drop" there is somebody putting a card back.
+    if (write === null) return;
+    void board.updateTask({
+      taskId: card.id,
+      status: write.status,
+      position: write.position,
+      idempotencyKey: `move-${card.id}-${write.status}-${write.position}`,
+    });
+  };
+
+  return (
+    <div className="flex gap-3 overflow-x-auto p-4" aria-busy={board.isWriting}>
+      {board.columns.map((column) => (
+        <Column key={column.column.id} entry={column} board={board} onMove={move} />
+      ))}
+    </div>
+  );
+}

package/src/board/board-panel/board-panel.tsx

@@ -0,0 +1,74 @@
+import type { BoardTaskFilter } from "@anchrd/intel-contract/board";
+import type { Node } from "@anchrd/intel-contract/node";
+import { useState } from "react";
+import { useBoard } from "@/board/board-data/board-data.ts";
+import { BoardKanban } from "@/board/board-kanban/board-kanban.tsx";
+import type { GroupKey, Sort } from "@/board/board-table/board-table.ts";
+import { BoardTable } from "@/board/board-table/board-table.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+type View = "kanban" | "table";
+
+/**
+ * A board on the node screen, beside the folder, the table and the editor (D66, #376).
+ *
+ * ⚠️ The whole board is ONE answer. `board_get` returns the columns and every card in them, and the
+ * views below read that one object — no view fetches per card, per column, or on scroll. A board
+ * that loaded its cards one by one would look exactly the same on screen and be a different thing
+ * over the wire, which is why `board-panel.unit.tsx` counts the calls rather than the cards.
+ */
+export function BoardPanel({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const [view, setView] = useState<View>("kanban");
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      {/* No wrapper role: the house switch (`view-toggle.tsx`) carries none either, and a `group`
+          on a plain `div` is the shape a linter rightly asks to be a `fieldset`. What names the
+          control is each button — its own text, plus `aria-pressed` for which view is showing. */}
+      <div className="flex shrink-0 items-center gap-1 border-b px-4 py-2">
+        {(["kanban", "table"] as const).map((name) => (
+          <button
+            key={name}
+            type="button"
+            aria-pressed={view === name}
+            onClick={() => setView(name)}
+            className="rounded-md px-3 py-1 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-muted aria-pressed:font-medium"
+          >
+            {i18n.t(`board.view.${name}`)}
+          </button>
+        ))}
+      </div>
+      {view === "kanban" ? <KanbanView nodeId={node.id} /> : <TableView nodeId={node.id} />}
+    </div>
+  );
+}
+
+function KanbanView({ nodeId }: { nodeId: string }) {
+  const board = useBoard(nodeId);
+  return <BoardKanban board={board} />;
+}
+
+/**
+ * ⚠️ **The filter lives HERE, inside the table's own branch, not beside both views.** Held one
+ * level up it would survive a switch to the kanban board — which draws whatever the query answered
+ * and would then show a column full and the rest empty, with nothing on screen saying why. That is
+ * the quiet failure: cards that look deleted. Unmounting the table takes its filter with it, and
+ * the kanban asks for the whole board every time.
+ */
+function TableView({ nodeId }: { nodeId: string }) {
+  const [filter, setFilter] = useState<Partial<BoardTaskFilter>>({});
+  const [sort, setSort] = useState<Sort | null>(null);
+  const [group, setGroup] = useState<GroupKey>("none");
+  const board = useBoard(nodeId, filter);
+  return (
+    <BoardTable
+      board={board}
+      filter={filter}
+      onFilter={setFilter}
+      sort={sort}
+      onSort={setSort}
+      group={group}
+      onGroup={setGroup}
+    />
+  );
+}

package/src/board/board-table/board-table.ts

@@ -0,0 +1,135 @@
+import type { BoardTask } from "@anchrd/intel-contract/board";
+import type { ColumnWithCards } from "@/board/board-data/board-data.types.ts";
+
+export type SortKey = "title" | "status" | "assignee" | "due" | "dependsOn";
+export type GroupKey = "none" | "status" | "assignee";
+
+export interface Sort {
+  key: SortKey;
+  direction: "asc" | "desc";
+}
+
+/**
+ * One line of the table: the card, plus the two things the card cannot answer about itself.
+ *
+ * `columnTitle` is its status resolved against the board's configuration, and `blocking` is what
+ * `dependsOn` points at — the blocking card's title when it is on this board, its bare id when it
+ * is not. ⚠️ **The id is shown rather than hidden**: a dependency on something outside this board
+ * is exactly the case somebody needs to see, and an empty cell claims there is no dependency.
+ */
+export interface Row {
+  task: BoardTask;
+  columnTitle: string;
+  blocking: string | null;
+}
+
+export function rowsOf(columns: ColumnWithCards[]): Row[] {
+  const titles = new Map<string, string>();
+  for (const entry of columns) {
+    for (const card of entry.cards) titles.set(card.id, card.title);
+  }
+  return columns.flatMap((entry) =>
+    entry.cards.map((task) => ({
+      task,
+      columnTitle: entry.column.title,
+      blocking: task.dependsOn === null ? null : (titles.get(task.dependsOn) ?? task.dependsOn),
+    })),
+  );
+}
+
+function cellOf(row: Row, key: SortKey): string | null {
+  switch (key) {
+    case "title":
+      return row.task.title;
+    case "status":
+      return row.columnTitle;
+    case "assignee":
+      return row.task.assigneeId;
+    case "due":
+      return row.task.dueDate;
+    case "dependsOn":
+      return row.blocking;
+  }
+}
+
+/**
+ * The table in one order.
+ *
+ * ⚠️ **An empty cell sorts last in BOTH directions, and that is not a preference.** A card without
+ * a due date is not the earliest one — it is one whose date nobody knows, and putting it first is a
+ * table that answers "what is due next" with the rows that have no answer. Comparing `null` with a
+ * string instead is worse than wrong: `null < "2026-08-19"` and `null > "2026-08-19"` are BOTH
+ * false, so the comparator claims equality between rows that are not equal, and the order then
+ * depends on where the dateless rows happened to sit.
+ *
+ * ⚠️ **The sort is stable and the incoming order is the tiebreaker.** Rows arrive in the board's
+ * own order — configured columns first, cards by position — so two cards with the same due date
+ * keep the order the board gives them rather than swapping on every render.
+ */
+export function sortRows(rows: Row[], sort: Sort | null): Row[] {
+  if (sort === null) return rows;
+  const factor = sort.direction === "asc" ? 1 : -1;
+  return [...rows].sort((left, right) => {
+    const a = cellOf(left, sort.key);
+    const b = cellOf(right, sort.key);
+    if (a === null && b === null) return 0;
+    if (a === null) return 1;
+    if (b === null) return -1;
+    // An ISO timestamp compares correctly as a string, so one comparison serves every column.
+    return factor * a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
+  });
+}
+
+export interface Group {
+  /**
+   * The VALUE the rows were grouped by, not the text to draw.
+   *
+   * ⚠️ The difference matters for the assignee: the value is a Gate principal id, and an id must
+   * never reach the screen (`user-name.ts`, #258). The view resolves it to a name or to the word
+   * for somebody it cannot name; this module has no business deciding that, and returning a
+   * ready-made label would have made the id the obvious thing to put there.
+   *
+   * `null` is the group the key does not answer for — unassigned, mostly.
+   */
+  key: string | null;
+  rows: Row[];
+}
+
+/**
+ * The rows in groups, in the order the rows themselves arrive.
+ *
+ * ⚠️ **Not alphabetically.** Grouped by status, the groups are the board's columns, and their order
+ * carries meaning the alphabet destroys: `todo, doing, done` would be drawn `doing, done, todo`.
+ * Walking the rows and appending each new group as it first appears keeps the board's order for
+ * free — and keeps whatever `sortRows` decided when the grouping key is something else.
+ */
+export function groupRows(rows: Row[], key: GroupKey): Group[] {
+  if (key === "none") return [{ key: null, rows }];
+  const groups: Group[] = [];
+  for (const row of rows) {
+    const value = key === "status" ? row.columnTitle : row.task.assigneeId;
+    const existing = groups.find((group) => group.key === value);
+    if (existing === undefined) groups.push({ key: value, rows: [row] });
+    else existing.rows.push(row);
+  }
+  return groups;
+}
+
+/** What the header of a sortable column has to say for a reader who cannot see the arrow. */
+export function ariaSortOf(sort: Sort | null, key: SortKey): "ascending" | "descending" | "none" {
+  if (sort === null || sort.key !== key) return "none";
+  return sort.direction === "asc" ? "ascending" : "descending";
+}
+
+/**
+ * What a click on a header means.
+ *
+ * ⚠️ Three states, not two: ascending, descending, and back to the board's own order. Without the
+ * third there is no way back — once a table is sorted it stays sorted, and the order the board was
+ * arranged in by hand is unreachable for the rest of the session.
+ */
+export function nextSort(sort: Sort | null, key: SortKey): Sort | null {
+  if (sort === null || sort.key !== key) return { key, direction: "asc" };
+  if (sort.direction === "asc") return { key, direction: "desc" };
+  return null;
+}