@anchrd/intel-ui 0.38.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -33,14 +33,18 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.23.0",
+    "@anchrd/intel-contract": "^0.24.0",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@react-sigma/core": "^5.0.6",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-router": "^1.170.18",
+    "@tanstack/react-table": "^9.1.2",
     "@vitejs/plugin-react": "^6.0.4",
     "@xyflow/react": "^12.11.2",
     "class-variance-authority": "^0.7.1",

package/src/access-summary/access-summary.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/components/ui/tooltip.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
-import { useUserName } from "@/user-name/user-name.ts";
+import { initials, useUserName } from "@/user-name/user-name.ts";
 
 type Principal = ResourceGrant["principal"];
 
@@ -47,16 +47,6 @@ function groupGrants(grants: ResourceGrant[], ownerIds: string[] = []): GrantGro
   return [...grouped.values()];
 }
 
-function initials(value: string): string {
-  const parts = value
-    .replace(/@.*$/, "")
-    .split(/[\s._+-]+/)
-    .filter(Boolean);
-  if (parts.length === 0) return "?";
-  if (parts.length === 1) return (parts[0]?.slice(0, 2) ?? "?").toUpperCase();
-  return `${parts[0]?.[0] ?? ""}${parts.at(-1)?.[0] ?? ""}`.toUpperCase();
-}
-
 function usePrincipalLabel(principal: Principal): string {
   const i18n = useI18n();
   const userName = useUserName(principal.type === "user" ? principal.id : null);

package/src/app/app-tree/app-tree.tsx

@@ -288,6 +288,43 @@ export function AppTree() {
           idempotencyKey: crypto.randomUUID(),
         });
       }
+      /**
+       * ⚠️ **A board's columns are written at creation, in the language of whoever made it** (#675).
+       * The server has a fallback for a board nobody configured, but it cannot know the reader's
+       * language — and columns are SHARED data: two people on one board must read the same names,
+       * and the settings dialog edits one list. Translating per reader would give them different
+       * boards. Written once, they are data anybody can rename.
+       *
+       * ⚠️ It is a second call and it may fail on its own. That is survivable and deliberately not
+       * repaired here: the board then answers with the server's fallback and is usable, which is
+       * the same state a board made over MCP is in. A failure that made the whole creation fail
+       * would trade a usable board for none.
+       */
+      if (kind === "board") {
+        try {
+          await data.updateBoard({
+            boardId: node.id,
+            columns: [
+              { id: "backlog", title: i18n.t("board.column.default.backlog"), terminal: false },
+              { id: "todo", title: i18n.t("board.column.default.todo"), terminal: false },
+              { id: "doing", title: i18n.t("board.column.default.doing"), terminal: false },
+              { id: "done", title: i18n.t("board.column.default.done"), terminal: true },
+            ],
+            idempotencyKey: crypto.randomUUID(),
+          });
+        } catch {
+          /**
+           * ⚠️ **Swallowed on purpose, and the `catch` is what makes that true.** Without it the
+           * failure travels out of the mutation: the node exists, but `onSuccess` never runs, the
+           * screen says "creating failed", and the obvious response — try again — makes a SECOND
+           * board, because nothing tells the reader the first one is already there.
+           *
+           * What is lost by swallowing is one thing and it is repairable: the board answers with
+           * the server's fallback columns instead of the ones in this reader's language. That is
+           * exactly the state a board made over MCP is in, and the settings dialog renames them.
+           */
+        }
+      }
       return {
         area: "/nodes" as const,
         id: node.id,

package/src/board/board-assignee/board-assignee.ts

@@ -0,0 +1,18 @@
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useUserName } from "@/user-name/user-name.ts";
+
+/**
+ * What to call whoever a card is for.
+ *
+ * ⚠️ **One rule, two surfaces.** The table draws the name in a cell, the open card draws it in a
+ * circle, and both must answer the same way — `useUserName` resolves only the reader themselves, so
+ * for anybody else the honest answer is "a user account" and never the principal id the row carries
+ * (`user-name.ts`, #258). Written twice, the two would drift, and the drift would put an id on one
+ * of the two screens.
+ */
+export function useAssigneeLabel(id: string | null): string {
+  const i18n = useI18n();
+  const name = useUserName(id);
+  if (id === null) return i18n.t("board.unassigned");
+  return name ?? i18n.t("node.someUser");
+}

package/src/board/board-data/board-data.ts

@@ -6,8 +6,11 @@ import type {
   BoardTaskUpdateInput,
   BoardView,
 } from "@anchrd/intel-contract/board";
+import { ARCHIVE_COLUMN_ID } from "@anchrd/intel-contract/board";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { threaded } from "@/board/board-stripes/board-stripes.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import type { BoardHandle, ColumnWithCards } from "./board-data.types.ts";
 
@@ -58,7 +61,10 @@ export function columnsWithCards(view: BoardView): ColumnWithCards[] {
     if (cards === undefined) byStatus.set(task.status, [task]);
     else cards.push(task);
   }
-  const sorted = (cards: BoardTask[]) => [...cards].sort((a, b) => a.position - b.position);
+  // ⚠️ Threaded, not merely sorted: a subtask that sits in the SAME column as its parent follows
+  // it directly, and its own children follow that. One that sits elsewhere takes its ordinary place
+  // by position — there is no thread here for it to join (`board-stripes.ts`).
+  const sorted = (cards: BoardTask[]) => threaded(cards);
   const known: ColumnWithCards[] = view.columns.map((column) => ({
     column,
     cards: sorted(byStatus.get(column.id) ?? []),
@@ -85,6 +91,7 @@ export function columnsWithCards(view: BoardView): ColumnWithCards[] {
  */
 export function useBoard(boardId: string, filter: Partial<BoardTaskFilter> = {}): BoardHandle {
   const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const client = useQueryClient();
   const key = boardKey(boardId);
 
@@ -136,19 +143,38 @@ export function useBoard(boardId: string, filter: Partial<BoardTaskFilter> = {})
     onSuccess: settle,
   });
   const setColumns = useMutation({
-    mutationFn: async (input: { columns: BoardColumn[]; idempotencyKey: string }) =>
-      await data.updateBoard({ boardId, ...input }),
+    mutationFn: async (input: {
+      columns: BoardColumn[];
+      archiveVisible?: boolean;
+      idempotencyKey: string;
+    }) => await data.updateBoard({ boardId, ...input }),
     onSuccess: settle,
   });
 
+  /**
+   * ⚠️ **The archive column is said in the reader's own words, here and nowhere else.** It is
+   * derived and identical on every board, so unlike a configured column — shared data, written
+   * once in the creator's language (#675) — it is presentation. The server sends English for
+   * everything without a catalog; this is the one place a browser has one.
+   */
   const columns = useMemo(
-    () => (query.data === undefined ? [] : columnsWithCards(query.data)),
-    [query.data],
+    () =>
+      query.data === undefined
+        ? []
+        : columnsWithCards(query.data).map((entry) =>
+            entry.column.id === ARCHIVE_COLUMN_ID
+              ? { ...entry, column: { ...entry.column, title: i18n.t("board.column.archive") } }
+              : entry,
+          ),
+    [query.data, i18n],
   );
 
   return {
     boardId,
     title: query.data?.title ?? "",
+    // Until the board has answered there is nothing to hide, and `true` is what a board without a
+    // stored setting answers with anyway.
+    archiveVisible: query.data?.archiveVisible ?? true,
     columns,
     isPending: query.isPending,
     isError: query.isError,

package/src/board/board-data/board-data.types.ts

@@ -25,5 +25,14 @@ export interface BoardHandle {
   // forgetting a field.
   createTask(input: Omit<BoardTaskCreateInput, "boardId">): Promise<void>;
   updateTask(input: BoardTaskUpdateInput): Promise<void>;
-  setColumns(input: { columns: BoardColumn[]; idempotencyKey: string }): Promise<void>;
+  /** Whether the archive column is drawn (D68). The settings dialog draws the switch in both
+   * positions, so it needs the current value, not only the column list. */
+  archiveVisible: boolean;
+  setColumns(input: {
+    columns: BoardColumn[];
+    // ⚠️ Optional means "leave it": the dialog writes the columns and the switch in ONE call, and a
+    // caller who only reorders must not un-hide an archive somebody put away.
+    archiveVisible?: boolean;
+    idempotencyKey: string;
+  }): Promise<void>;
 }

package/src/board/board-kanban/board-kanban.ts

@@ -93,16 +93,70 @@ export function neighbourDrop(
 }
 
 /**
- * Which gap a drop ON a card means — the half of the card the pointer is over.
+ * What a finished drag means as a `Drop` — translated from what `dnd-kit` reports.
  *
- * ⚠️ Without this the column is the only drop target there is, and every drop then means "append":
- * `dropToWrite` computes a correct midpoint for any gap, but the component never asks it for one
- * other than the end. On screen the card follows the pointer to the middle of the column and then
- * jumps to the bottom, which reads as a broken drag rather than as a missing feature.
+ * ⚠️ **`over` is either a CARD or a COLUMN, and the two mean different things.** Let go over a
+ * card, the gesture means "into that card's gap"; let go over the column itself — the free area
+ * below the last card — it means "append". Reading both as the same thing is how every drop ends
+ * up at the bottom of the column, which looks like a broken drag rather than like a missing case.
  *
- * The geometry is passed in rather than read here so the decision — upper half means before the
- * card, lower half means after it — can be proven without a layout engine.
+ * ⚠️ **`after` is only consulted ACROSS columns.** Inside one column the direction of travel
+ * already says which gap is meant; between columns there is none, so which side of the hovered card
+ * the CARRIED card came to rest on decides — see `dropIsAfter`.
+ *
+ * ⚠️ **Downwards inside one column, the gap is one BEHIND the card hovered.** `Drop.index` counts
+ * into the column as rendered, with the dragged card still in it. Dragging a card down onto a
+ * neighbour means ending up behind that neighbour; naming the neighbour's own gap names the gap the
+ * card already occupies, `dropToWrite` then correctly answers "nothing changed", and the move is
+ * swallowed without a word. Upwards the two coincide, which is why this reads as an asymmetry and
+ * is not one.
+ */
+export function dragEndToDrop(
+  activeId: string,
+  overId: string | null,
+  columns: ColumnWithCards[],
+  after = false,
+): Drop | null {
+  if (overId === null || overId === activeId) return null;
+
+  const asColumn = columns.find((entry) => entry.column.id === overId);
+  if (asColumn !== undefined) return { status: asColumn.column.id, index: asColumn.cards.length };
+
+  for (const entry of columns) {
+    const row = entry.cards.findIndex((card) => card.id === overId);
+    if (row < 0) continue;
+    const from = entry.cards.findIndex((card) => card.id === activeId);
+    // Inside one column the direction of travel already says it: downwards means behind.
+    if (from >= 0) return { status: entry.column.id, index: from < row ? row + 1 : row };
+    // ⚠️ Across columns there is no direction to read, so the half of the card decides — and
+    // without it the END of a foreign column is reachable only through the thin strip below its
+    // last card. That is the capability the half-of-the-card check carried before `dnd-kit`.
+    return { status: entry.column.id, index: after ? row + 1 : row };
+  }
+  // A card that is on no column of this board — an answer that arrived while the gesture ran.
+  return null;
+}
+
+/** A box, as far as this decision cares: where its top is and how tall it is. */
+export interface DropBox {
+  top: number;
+  height: number;
+}
+
+/**
+ * Whether a carried card came to rest BELOW the middle of the card it was let go on.
+ *
+ * ⚠️ **This compares two CARDS, not a pointer against a card.** The gesture reports where the
+ * carried card ended up, not where the cursor is, and on cards of different heights those are two
+ * different answers. Naming it after the pointer would send the next reader looking for a
+ * coordinate that is not in this code.
+ *
+ * ⚠️ **A missing box means "before".** `translated` is `null` until the drag has actually moved
+ * something, and in jsdom every box is zero — so the fallback is the one that has to be named
+ * rather than fallen into: no measurement is not "at the end", it is "no information", and the
+ * front of the gap is where a card goes when nothing is known.
  */
-export function dropIndexOnCard(row: number, pointerY: number, box: DOMRect): number {
-  return pointerY < box.top + box.height / 2 ? row : row + 1;
+export function dropIsAfter(carried: DropBox | null, over: DropBox | undefined): boolean {
+  if (carried === null || over === undefined) return false;
+  return carried.top + carried.height / 2 > over.top + over.height / 2;
 }