@anchrd/intel-ui 0.40.0 → 0.42.0

package/src/board/board-task/board-task.tsx

@@ -1,19 +1,17 @@
 import type { BoardTask } from "@anchrd/intel-contract/board";
-import { ARCHIVE_COLUMN_ID } from "@anchrd/intel-contract/board";
-import { ChevronLeft, Lock, Plus, Square, SquareCheck } from "lucide-react";
+import { Lock, Plus, Square, SquareCheck } from "lucide-react";
 import { 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 type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import { StatusChip } from "@/board/board-status/board-status.tsx";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
-import { initials } from "@/user-name/user-name.ts";
 import { type LinkKind, linksOf, progressOf, type TaskLink } from "./board-task.ts";
 
 const linkIcons: Record<LinkKind, typeof Lock> = {
@@ -22,33 +20,6 @@ const linkIcons: Record<LinkKind, typeof Lock> = {
   blocked: Lock,
 };
 
-/**
- * Who the task is for, as the circle the access summary uses.
- *
- * ⚠️ **One person, not a group.** Jack's decision 2026-08-20: the STYLE is borrowed, the field stays
- * `assigneeId`. A row of circles here would imply a second data model that does not exist.
- */
-function Assignee({ id }: { id: string | null }) {
-  const i18n = useI18n();
-  const label = useAssigneeLabel(id);
-  if (id === null) {
-    return <span className="text-xs text-muted-foreground">{label}</span>;
-  }
-  return (
-    <span
-      // ⚠️ `role="img"` and not a bare span: two initials are a picture of a name, and a plain
-      // `span` carries no `aria-label` at all — the attribute is dropped, and the circle is then
-      // read out as the two letters it happens to contain.
-      role="img"
-      aria-label={label}
-      title={label}
-      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>
-  );
-}
-
 /** One entry of the link list. The icon carries the kind; nothing writes the word out. */
 function LinkRow({ link, onOpen }: { link: TaskLink; onOpen(id: string): void }) {
   const i18n = useI18n();
@@ -83,19 +54,15 @@ export function BoardTaskDocument({
   task,
   board,
   onOpen,
-  onClose,
   body,
 }: {
   task: BoardTask;
   board: BoardHandle;
   onOpen(taskId: string): void;
-  onClose(): void;
   /** The markdown surface, handed in so this component stays free of the editor's own loading. */
   body: React.ReactNode;
 }) {
   const i18n = useI18n();
-  const [label, setLabel] = useState("");
-  const [adding, setAdding] = useState(false);
 
   const links = linksOf(task, board.columns);
   const progress = progressOf(links);
@@ -117,137 +84,79 @@ export function BoardTaskDocument({
     });
   };
 
-  // ⚠️ A single date has to say WHICH one it is. Drawn bare, a start date and a due date look
-  // identical — and reading a start date as a deadline is the expensive direction of that mistake.
-  const dates =
-    task.startDate !== null && task.dueDate !== null
-      ? `${task.startDate.slice(0, 10)} – ${task.dueDate.slice(0, 10)}`
-      : task.startDate !== null
-        ? i18n.t("board.fromDate", { date: task.startDate.slice(0, 10) })
-        : task.dueDate !== null
-          ? i18n.t("board.untilDate", { date: task.dueDate.slice(0, 10) })
-          : null;
-
   return (
     <div
       className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-6"
       aria-busy={board.isWriting}
     >
-      <button
-        type="button"
-        onClick={onClose}
-        className="flex w-fit items-center gap-1 rounded-md text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <ChevronLeft aria-hidden="true" className="size-4" />
-        {board.title}
-      </button>
-
-      <h1 className="text-2xl font-semibold tracking-tight">{task.title}</h1>
-
+      {/* ⚠️ No heading and no way back HERE. Both live in the title row above since #692: the path
+          there ends in this card's name, so a heading would print it a second time, and an arrow
+          here would be a second control meaning what the one up there already means. */}
       {/* ⚠️ ONE line of chips, and no field labels. "Status:" in front of a chip that says "Backlog"
           says nothing the chip does not — and it turns a quiet head into a form. */}
       <div className="flex flex-wrap items-center gap-2">
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            aria-label={i18n.t("board.moveTo")}
-            className="rounded-full border px-3 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {column?.title ?? task.status}
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuRadioGroup
-              value={task.status}
-              // ⚠️ Where a task SITS is a move, not a field edit: the server computes a position and
-              // checks the cycles for it. Everything else on this screen is a plain change.
-              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>
-
-        <Assignee id={task.assigneeId} />
+        <StatusChip
+          status={task.status}
+          title={column?.title ?? task.status}
+          columns={columns}
+          write={write}
+        />
 
-        {dates === null ? null : (
-          <span className="rounded-full border px-3 py-1 text-xs tabular-nums">{dates}</span>
+        {/* ⚠️ Two chips when both dates are set, not a range. A range reads as one fact; these
+            are two, and each is removed on its own. */}
+        {task.startDate === null ? null : (
+          <BoardChip
+            label={i18n.t("board.fromDate", { date: task.startDate.slice(0, 10) })}
+            action={i18n.t("board.clearStart")}
+            onClick={() => write({ startDate: null })}
+          />
+        )}
+        {task.dueDate === null ? null : (
+          <BoardChip
+            label={i18n.t("board.untilDate", { date: task.dueDate.slice(0, 10) })}
+            action={i18n.t("board.clearDue")}
+            onClick={() => write({ dueDate: null })}
+          />
         )}
 
         {task.labels.map((entry) => (
-          <button
+          <BoardChip
             key={entry}
-            type="button"
-            aria-label={i18n.t("board.removeLabel", { label: entry })}
+            label={entry}
+            action={i18n.t("board.removeLabel")}
             onClick={() => write({ labels: task.labels.filter((keep) => keep !== entry) })}
-            className="rounded-full bg-muted px-3 py-1 text-xs outline-none hover:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {entry}
-          </button>
+          />
         ))}
 
-        {adding ? (
-          <input
-            // biome-ignore lint/a11y/noAutofocus: it opens on a deliberate click, never on load
-            autoFocus
-            value={label}
-            aria-label={i18n.t("board.addLabel")}
-            onChange={(event) => setLabel(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Escape") {
-                setAdding(false);
-                setLabel("");
-              }
-              if (event.key !== "Enter") return;
-              event.preventDefault();
-              const next = label.trim();
-              // ⚠️ Tags are REPLACED, not merged, so the whole list travels — and a duplicate would
-              // be written as one more entry rather than refused.
-              if (next.length > 0 && !task.labels.includes(next)) {
-                write({ labels: [...task.labels, next] });
-              }
-              setAdding(false);
-              setLabel("");
-            }}
-            className="w-28 rounded-full border bg-background px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          />
-        ) : (
-          <button
-            type="button"
-            aria-label={i18n.t("board.addLabel")}
-            onClick={() => setAdding(true)}
-            className="rounded-full border px-2 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <Plus aria-hidden="true" className="size-3" />
-          </button>
+        {/* ⚠️ **Last, always.** It is the only round element in the row; standing between the chips
+            it breaks the line, and a row without one simply ends earlier. */}
+        {task.assigneeId === null ? null : (
+          <AssigneeChip id={task.assigneeId} clear={() => write({ assigneeId: null })} />
         )}
+
+        <Adder task={task} board={board} write={write} />
       </div>
 
-      {/* ⚠️ ONE list, not three blocks. The icon carries the kind — box, lock, chain — and the order
-          is the decision documented on `linksOf`. */}
-      <section aria-label={i18n.t("board.links")} className="flex flex-col gap-1">
-        <h2 className="flex items-center gap-2 text-sm font-medium">
-          {i18n.t("board.links")}
-          {progress === null ? null : (
-            <span className="text-xs text-muted-foreground tabular-nums">
-              {i18n.t("board.progress", { done: progress.done, total: progress.total })}
-            </span>
-          )}
-        </h2>
-        {links.length === 0 ? null : (
+      {/* ⚠️ ONE list, not three blocks: the icon carries the kind. And it exists only when there is
+          something in it. An empty section with a heading and a hint tells the reader that something
+          is missing; nothing at all tells them there is nothing, which is the truth (#692). */}
+      {links.length === 0 ? null : (
+        <section aria-label={i18n.t("board.links")} className="flex flex-col gap-1">
+          <h2 className="flex items-center gap-2 text-sm font-medium">
+            {i18n.t("board.links")}
+            {progress === null ? null : (
+              <span className="text-xs text-muted-foreground tabular-nums">
+                {i18n.t("board.progress", { done: progress.done, total: progress.total })}
+              </span>
+            )}
+          </h2>
           <ul className="flex flex-col">
             {links.map((link) => (
               <LinkRow key={`${link.kind}:${link.id}`} link={link} onOpen={onOpen} />
             ))}
           </ul>
-        )}
-        <LinkAdder task={task} board={board} />
-      </section>
+        </section>
+      )}
 
       {/* The markdown text is the largest element of the page — everything above is the quiet part.
           ⚠️ The slot is not decoration: a test that asks whether the BODY drew something has to be
@@ -265,77 +174,122 @@ export function BoardTaskDocument({
  * and "waits for". That is `#371`: the reader decides WHAT they are linking once they know which
  * card they mean, not before.
  */
-function LinkAdder({ task, board }: { task: BoardTask; board: BoardHandle }) {
+
+/**
+ * What the card can still be given. The order matches the chips it produces.
+ *
+ * ⚠️ **No `assignee` here, and that is a gap rather than a decision.** Setting one needs a person to
+ * pick from, and this application can only ever DISPLAY principals it already sees in a grant: there
+ * is no list to choose from anywhere in the data provider. An entry that opens nothing is worse than
+ * a missing one, because it looks like the feature is there (`#700`).
+ */
+const addable = ["label", "start", "due"] as const;
+const linkable = ["subtask", "blocker"] as const;
+type Addable = (typeof addable)[number] | (typeof linkable)[number];
+
+/**
+ * ⚠️ **ONE plus for everything the card can carry**, and the kind is chosen afterwards. Two
+ * controls, one for fields and one for links, asked the reader to know which of the two a thing was
+ * before they could add it, and that is a question about our data model, not about their work.
+ */
+function Adder({
+  task,
+  board,
+  write,
+}: {
+  task: BoardTask;
+  board: BoardHandle;
+  write(input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>): void;
+}) {
   const i18n = useI18n();
-  const [kind, setKind] = useState<"subtask" | "blocker" | null>(null);
-  const [title, setTitle] = useState("");
+  const [kind, setKind] = useState<Addable | null>(null);
+  const [draft, setDraft] = useState("");
+  const close = () => {
+    setKind(null);
+    setDraft("");
+  };
 
   const candidates = board.columns
     .flatMap((entry) => entry.cards)
     .filter((card) => card.id !== task.id && card.parentTaskId !== task.id);
 
-  const close = () => {
-    setKind(null);
-    setTitle("");
+  const commit = () => {
+    const value = draft.trim();
+    if (value.length === 0 || board.isWriting) return close();
+    if (kind === "label") {
+      // ⚠️ Tags are REPLACED, not merged, so the whole list travels, and a duplicate would be
+      // written as one more entry rather than refused.
+      if (!task.labels.includes(value)) write({ labels: [...task.labels, value] });
+    }
+    if (kind === "start") write({ startDate: `${value}T00:00:00.000Z` });
+    if (kind === "due") write({ dueDate: `${value}T00:00:00.000Z` });
+    if (kind === "subtask") {
+      void board
+        .createTask({
+          title: value,
+          // A subtask starts in the same column as the task it belongs to: the first column would
+          // claim work was reset that never started.
+          status: task.status,
+          parentTaskId: task.id,
+          assigneeId: null,
+          labels: [],
+          startDate: null,
+          dueDate: null,
+          dependsOn: null,
+          idempotencyKey: crypto.randomUUID(),
+        })
+        .then(close);
+      return;
+    }
+    close();
   };
 
   return (
-    <div className="flex items-center gap-2 pt-1">
+    <>
       <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring">
+        <DropdownMenuTrigger
+          aria-label={i18n.t("board.add")}
+          className="rounded-full border px-2 py-0.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
           <Plus aria-hidden="true" className="size-3" />
-          {i18n.t("board.addLink")}
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
-          <DropdownMenuItem onSelect={() => setKind("subtask")}>
-            {i18n.t("board.link.subtask")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => setKind("blocker")}>
-            {i18n.t("board.link.blocker")}
-          </DropdownMenuItem>
+          {addable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.add.${entry}`)}
+            </DropdownMenuItem>
+          ))}
+          {linkable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.link.${entry}`)}
+            </DropdownMenuItem>
+          ))}
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* ⚠️ **The two kinds are two different writes, and that is why the kind is asked FIRST.** A
-          subtask is CREATED — where a task sits is the node tree, and moving an existing card under
-          another needs `node_update` with the version it was last read at, which this answer does
-          not carry. A blocker is a field on this card and only needs the card that is meant. */}
-      {kind === "subtask" ? (
+      {kind === null || kind === "blocker" ? null : (
         <input
           // biome-ignore lint/a11y/noAutofocus: it opens on a deliberate click, never on load
           autoFocus
-          value={title}
-          aria-label={i18n.t("board.link.subtask")}
-          onChange={(event) => setTitle(event.target.value)}
+          type={kind === "start" || kind === "due" ? "date" : "text"}
+          value={draft}
+          aria-label={i18n.t(kind === "subtask" ? "board.link.subtask" : `board.add.${kind}`)}
+          onChange={(event) => setDraft(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === "Escape") close();
             if (event.key !== "Enter") return;
             event.preventDefault();
-            const next = title.trim();
-            if (next.length === 0 || board.isWriting) return;
-            void board
-              .createTask({
-                title: next,
-                // A subtask starts in the same column as the task it belongs to — the alternative
-                // is the first column, which claims work was reset that never started.
-                status: task.status,
-                parentTaskId: task.id,
-                assigneeId: null,
-                labels: [],
-                startDate: null,
-                dueDate: null,
-                dependsOn: null,
-                idempotencyKey: crypto.randomUUID(),
-              })
-              .then(close);
+            commit();
           }}
-          className="w-48 rounded-md border bg-background px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="w-36 rounded-full border bg-background px-2.5 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
         />
-      ) : kind === "blocker" ? (
+      )}
+
+      {kind !== "blocker" ? null : (
         <DropdownMenu open onOpenChange={(next) => !next && close()}>
           <DropdownMenuTrigger
             aria-label={i18n.t("board.link.blocker")}
-            className="rounded-md border px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="rounded-full border px-2.5 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             {i18n.t("board.link.blocker")}
           </DropdownMenuTrigger>
@@ -345,12 +299,7 @@ function LinkAdder({ task, board }: { task: BoardTask; board: BoardHandle }) {
                 key={card.id}
                 onSelect={() => {
                   close();
-                  if (board.isWriting) return;
-                  void board.updateTask({
-                    taskId: task.id,
-                    dependsOn: card.id,
-                    idempotencyKey: crypto.randomUUID(),
-                  });
+                  write({ dependsOn: card.id });
                 }}
               >
                 {card.title}
@@ -358,7 +307,7 @@ function LinkAdder({ task, board }: { task: BoardTask; board: BoardHandle }) {
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-      ) : null}
-    </div>
+      )}
+    </>
   );
 }

package/src/board/board-title-row/board-title-row.tsx

@@ -0,0 +1,68 @@
+import type { Node } from "@anchrd/intel-contract/node";
+import { useQuery } from "@tanstack/react-query";
+import { crumbsOf } from "@/board/board-crumbs/board-crumbs.ts";
+import { BoardCrumbs } from "@/board/board-crumbs/board-crumbs.tsx";
+import { useBoard } from "@/board/board-data/board-data.ts";
+import { useOpenTask } from "@/board/board-open-task/board-open-task.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
+
+/**
+ * The one line above a board, and above a card opened on it.
+ *
+ * ⚠️ **The SAME `TitleRow`, with the path in place of the name.** A second header component for the
+ * open card would look identical today and drift tomorrow: the order of the right-hand group, the
+ * shadow on scroll and the slots are decided in exactly one place, and this keeps it that way (#53).
+ *
+ * ⚠️ **The menu then belongs to the CARD, not to the board.** Rename, move and archive act on what
+ * the reader is looking at. That is also where renaming a card happens, since the path carries its
+ * name and there is no heading to edit (#692).
+ */
+export function BoardTitleRow({ node }: { node: Node }) {
+  const { openId, open } = useOpenTask();
+  const board = useBoard(node.id);
+  const { data } = useIntelRouterContext();
+
+  // ⚠️ The same key the open card's body already uses, so this costs no second request.
+  const task = useQuery({
+    queryKey: ["node", openId],
+    queryFn: () => data.getNode(openId ?? ""),
+    enabled: openId !== null,
+  });
+
+  const tasks = board.columns.flatMap((entry) => entry.cards);
+  const openTask = tasks.find((card) => card.id === openId);
+
+  // ⚠️ Until the card is in the ANSWER, the board's own row stands. Drawing a path around a name
+  // nobody knows yet would flicker a wrong one into place for a moment.
+  //
+  // ⚠️ The card's NODE is a different wait, and it must not gate the path: it is only needed for the
+  // menu, and holding the whole row for it would show the board's name first and swap it a moment
+  // later — two different headers in sequence for one navigation.
+  if (openId === null || openTask === undefined) {
+    return (
+      <TitleRow title={node.title} description={node.description} target={{ type: "node", node }} />
+    );
+  }
+
+  const crumbs = <BoardCrumbs crumbs={crumbsOf(openId, board.title, tasks)} onOpen={open} />;
+
+  /**
+   * ⚠️ **No menu at all while the card's node is missing**, rather than the board's. Rename, move
+   * and archive would otherwise act on the BOARD, and `archive` fires without asking: a control
+   * that is not there yet costs a moment, one that acts on the wrong thing costs the thing.
+   *
+   * ⚠️ **Missing covers two states, and deliberately treats them the same**: the read is still on
+   * its way, or it was refused. Neither gives this row a card to act on, and telling them apart
+   * here would only decide WHICH wrong menu to draw.
+   */
+  if (task.data === undefined) return <TitleRow title={openTask.title} crumbs={crumbs} />;
+
+  return (
+    <TitleRow
+      title={openTask.title}
+      crumbs={crumbs}
+      target={{ type: "node", node: task.data.node }}
+    />
+  );
+}