@anchrd/intel-ui 0.16.1 → 0.18.0

package/src/board/board-statuses/board-statuses.ts

@@ -0,0 +1,63 @@
+import { ArchivedBoardStatusId, type BoardStatus } from "@anchrd/intel-contract";
+
+// One row of the dialog. `terminal` travels with it because it is written in the same call as the
+// label and the order — `board_configure` takes the list whole (#285).
+export interface BoardStatusDraft {
+  id: string;
+  label: string;
+  terminal: boolean;
+}
+
+/**
+ * A status id out of the label somebody typed.
+ *
+ * ⚠️ The id is what every task in the column carries, so it is minted ONCE and never follows a
+ * rename — renaming changes the label and no task has to be rewritten (#285). This function is
+ * therefore only ever called for a NEW column.
+ *
+ * The shape is the contract's: lower case, digits and underscores, starting on an alphanumeric,
+ * forty characters at most. A label that leaves nothing usable — one written in a script that has
+ * no ASCII form — falls back to a generated id rather than being refused, because a column named
+ * in Japanese is a column somebody meant to make.
+ */
+export function statusIdFrom(label: string, taken: ReadonlySet<string>): string {
+  const base = label
+    .toLowerCase()
+    .normalize("NFKD")
+    // Combining marks removed, so "Prüfung" becomes "prufung" rather than losing the letter.
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "")
+    .slice(0, 40)
+    .replace(/^[^a-z0-9]+/, "");
+  const seed = base === "" ? "status" : base;
+  if (!taken.has(seed) && seed !== ArchivedBoardStatusId) return seed;
+  for (let suffix = 2; ; suffix += 1) {
+    const candidate = `${seed.slice(0, 37)}_${suffix}`;
+    if (!taken.has(candidate) && candidate !== ArchivedBoardStatusId) return candidate;
+  }
+}
+
+/**
+ * The list as `board_configure` takes it: whole, in the order it should be drawn.
+ *
+ * ⚠️ `archived` is put back at the end if the editor lost it. The contract refuses a list without
+ * it, and a refusal here would be a dialog that cannot be saved for a reason the reader never
+ * caused — the shelf is not a column anybody is editing.
+ */
+export function configurableStatuses(statuses: BoardStatus[]): BoardStatusDraft[] {
+  const working = statuses.filter((status) => status.id !== ArchivedBoardStatusId);
+  const shelf = statuses.find((status) => status.id === ArchivedBoardStatusId);
+  return [
+    ...working.map((status) => ({
+      id: status.id,
+      label: status.label,
+      terminal: status.terminal,
+    })),
+    // ⚠️ Always `true` for the shelf, whatever a stored board says. The contract refuses an explicit
+    // `false` for it (anchrd/intel#311), so sending anything else would be a dialog that cannot be
+    // saved — and a shelf that did not mean finished would hold every archived task open as a
+    // blocker forever.
+    { id: ArchivedBoardStatusId, label: shelf?.label ?? "Archived", terminal: true },
+  ];
+}

package/src/board/board-statuses/board-statuses.tsx

@@ -0,0 +1,228 @@
+import { ArchivedBoardStatusId } from "@anchrd/intel-contract";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
+import { useState } from "react";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { configurableStatuses, statusIdFrom } from "./board-statuses.ts";
+
+/**
+ * The status list, edited (anchrd/intel#286, `board_configure`).
+ *
+ * ⚠️ The whole list is written at once and never patched — adding, renaming and reordering are one
+ * call, because the order IS the list's order (#285). So the dialog holds a draft and sends it on
+ * save; a control that wrote per keystroke would write a version per letter.
+ *
+ * ⚠️ `archived` can be renamed and cannot be removed or moved. The contract refuses a list without
+ * it, and a shelf that could be dragged into the middle of the working columns would be a shelf
+ * pretending to be a stage.
+ */
+export function BoardStatuses({ board, onClose }: { board: BoardHandle; onClose(): void }) {
+  const i18n = useI18n();
+  // ⚠️ Seeded once per OPENING, which is why the caller mounts this only while it is open
+  // (`board.tsx`) instead of handing it an `open` flag. Radix never reports `onOpenChange(true)`
+  // for a dialog whose openness is decided outside it, so a re-seed hung off that callback would be
+  // dead code — and the draft would then be whatever the list looked like the first time anybody
+  // opened this board. Saving it would write that stale list WHOLE and revert a column somebody
+  // else had added in between.
+  const [draft, setDraft] = useState(() => configurableStatuses(board.statuses));
+  const [added, setAdded] = useState("");
+  // ⚠️ `board.configure` lives in `useBoard` and outlives this dialog, so its `isError` is still set
+  // the next time the dialog is opened — a refusal from ten minutes ago greeting a list nobody has
+  // tried to save yet. A local flag rather than `configure.reset()`, because resetting shared state
+  // from a mount is a side effect on something this dialog does not own.
+  const [attempted, setAttempted] = useState(false);
+
+  const working = draft.filter((status) => status.id !== ArchivedBoardStatusId);
+  const shelf = draft.find((status) => status.id === ArchivedBoardStatusId);
+
+  const move = (index: number, delta: number) => {
+    const target = index + delta;
+    if (target < 0 || target >= working.length) return;
+    const next = [...working];
+    const [item] = next.splice(index, 1);
+    if (item) next.splice(target, 0, item);
+    setDraft([...next, ...(shelf ? [shelf] : [])]);
+  };
+
+  return (
+    <Dialog open onOpenChange={(next) => !next && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{i18n.t("board.statuses")}</DialogTitle>
+        </DialogHeader>
+        <ul className="flex flex-col gap-2">
+          {working.map((status, index) => (
+            <li key={status.id} className="flex items-center gap-2">
+              <input
+                value={status.label}
+                aria-label={i18n.t("board.statusLabel")}
+                onChange={(event) => {
+                  const label = event.currentTarget.value;
+                  setDraft((current) =>
+                    current.map((entry) => (entry.id === status.id ? { ...entry, label } : entry)),
+                  );
+                }}
+                className="h-8 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              {/* ⚠️ Which columns mean finished is a property of the column, not its position
+                  (anchrd/intel#311) — so it is set here, per column, and several may carry it. It is
+                  what decides whether a task waiting on this one is still blocked. */}
+              <label className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+                <input
+                  type="checkbox"
+                  checked={status.terminal}
+                  onChange={(event) => {
+                    const terminal = event.currentTarget.checked;
+                    setDraft((current) =>
+                      current.map((entry) =>
+                        entry.id === status.id ? { ...entry, terminal } : entry,
+                      ),
+                    );
+                  }}
+                  className="size-4 rounded border outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                {i18n.t("board.statusTerminal")}
+              </label>
+              <button
+                type="button"
+                aria-label={i18n.t("board.statusUp")}
+                disabled={index === 0}
+                onClick={() => move(index, -1)}
+                className="grid size-8 place-items-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+              >
+                <ChevronUp aria-hidden="true" className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("board.statusDown")}
+                disabled={index === working.length - 1}
+                onClick={() => move(index, 1)}
+                className="grid size-8 place-items-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+              >
+                <ChevronDown aria-hidden="true" className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("board.statusRemove", { label: status.label })}
+                // A column with tasks still in it cannot be taken away: the server refuses a task
+                // in a status the board does not have, so removing it would make the board
+                // unwritable rather than tidy.
+                disabled={board.tasks.some((task) => task.status === status.id)}
+                onClick={() =>
+                  setDraft((current) => current.filter((entry) => entry.id !== status.id))
+                }
+                className="grid size-8 place-items-center rounded-md border text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+              >
+                <X aria-hidden="true" className="size-4" />
+              </button>
+            </li>
+          ))}
+          {shelf ? (
+            <li className="flex items-center gap-2">
+              <input
+                value={shelf.label}
+                aria-label={i18n.t("board.statusLabel")}
+                onChange={(event) => {
+                  const label = event.currentTarget.value;
+                  setDraft((current) =>
+                    current.map((entry) =>
+                      entry.id === ArchivedBoardStatusId ? { ...entry, label } : entry,
+                    ),
+                  );
+                }}
+                className="h-8 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <span className="text-xs text-muted-foreground">{i18n.t("board.shelfFixed")}</span>
+              {/* The shelf's flag is shown and cannot be turned off: the contract refuses an explicit
+                  `false` for it, and a shelf that did not mean finished would hold every archived
+                  task open as a blocker (anchrd/intel#311). */}
+              <label className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+                <input
+                  type="checkbox"
+                  checked
+                  disabled
+                  aria-label={i18n.t("board.statusTerminal")}
+                  className="size-4 rounded border"
+                />
+                {i18n.t("board.statusTerminal")}
+              </label>
+            </li>
+          ) : null}
+        </ul>
+        <form
+          className="flex gap-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const label = added.trim();
+            if (label === "") return;
+            setDraft((current) => {
+              const taken = new Set(current.map((entry) => entry.id));
+              const shelfEntry = current.find((entry) => entry.id === ArchivedBoardStatusId);
+              return [
+                ...current.filter((entry) => entry.id !== ArchivedBoardStatusId),
+                // A new column is work, not the end of it. Meaning "finished" is something somebody
+                // says on purpose, with the checkbox beside it.
+                { id: statusIdFrom(label, taken), label, terminal: false },
+                ...(shelfEntry ? [shelfEntry] : []),
+              ];
+            });
+            setAdded("");
+          }}
+        >
+          <input
+            value={added}
+            onChange={(event) => setAdded(event.currentTarget.value)}
+            placeholder={i18n.t("board.addStatus")}
+            aria-label={i18n.t("board.addStatus")}
+            className="h-8 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <button
+            type="submit"
+            className="h-8 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.create")}
+          </button>
+        </form>
+        {attempted && board.configure.isError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("node.operationFailed")}
+          </p>
+        ) : null}
+        <DialogFooter>
+          <button
+            type="button"
+            onClick={onClose}
+            className="h-9 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.close")}
+          </button>
+          <button
+            type="button"
+            disabled={board.configure.isPending || draft.some((entry) => entry.label.trim() === "")}
+            onClick={() => {
+              setAttempted(true);
+              board.configure.mutate(
+                draft.map((entry) => ({
+                  id: entry.id,
+                  label: entry.label.trim(),
+                  terminal: entry.terminal,
+                })),
+                { onSuccess: onClose },
+              );
+            }}
+            className="h-9 rounded-md bg-primary px-3 text-sm text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            {board.configure.isPending ? i18n.t("common.saving") : i18n.t("common.save")}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,33 @@
+import type { BoardTask } from "@anchrd/intel-contract";
+import { rootedParents } from "@/board/board-items/board-items.ts";
+
+// A task with the tasks under it, which is the shape `getSubRows` reads. `subRows` is absent rather
+// than empty for a leaf: TanStack treats an empty array as "expandable, with nothing in it" and
+// would draw a chevron that opens onto nothing.
+export interface BoardRow extends BoardTask {
+  subRows?: BoardRow[];
+}
+
+/**
+ * The board as the tree the table draws (anchrd/intel#286).
+ *
+ * ⚠️ Which task a row hangs under is `rootedParents`, shared with Gantt (anchrd/intel#293) rather
+ * than kept here. That walk carries two subtleties — an orphan becomes a root instead of vanishing
+ * with its hidden parent, and a cycle is broken at the task that closes it — and two copies of those
+ * are two copies that drift, which would show as a task that is a root in one view and a child in
+ * the other.
+ */
+export function boardRows(tasks: BoardTask[]): BoardRow[] {
+  const parents = rootedParents(tasks);
+  const rows = new Map<string, BoardRow>(tasks.map((task) => [task.id, { ...task }]));
+  const roots: BoardRow[] = [];
+  for (const task of tasks) {
+    const row = rows.get(task.id);
+    if (!row) continue;
+    const parent = parents.get(task.id) ?? null;
+    const target = parent === null ? undefined : rows.get(parent);
+    if (target === undefined) roots.push(row);
+    else target.subRows = [...(target.subRows ?? []), row];
+  }
+  return roots;
+}