@anchrd/intel 0.59.0

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

@@ -0,0 +1,38 @@
+import type {
+  BoardColumn,
+  BoardTask,
+  BoardTaskCreateInput,
+  BoardTaskUpdateInput,
+} from "@contract/board.ts";
+
+// One column and the cards in it, in the order they are drawn.
+export interface ColumnWithCards {
+  column: BoardColumn;
+  cards: BoardTask[];
+  // ⚠️ Set only on a column the board does not configure — cards whose status names nothing. It is
+  // drawn differently rather than hidden: a card nobody can see is a card somebody will look for.
+  unknown?: boolean;
+}
+
+export interface BoardHandle {
+  boardId: string;
+  title: string;
+  columns: ColumnWithCards[];
+  isPending: boolean;
+  isError: boolean;
+  isWriting: boolean;
+  // `boardId` is supplied by the handle, so a view cannot file a card on the wrong board by
+  // forgetting a field.
+  createTask(input: Omit<BoardTaskCreateInput, "boardId">): Promise<void>;
+  updateTask(input: BoardTaskUpdateInput): 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/ui/src/board/board-dates/board-dates.ts

@@ -0,0 +1,40 @@
+/**
+ * The one place a card's two dates become the one thing a reader sees (#724).
+ *
+ * ⚠️ **Pure, and separate from the chip that draws it.** The rules here — which of the four
+ * combinations produces which text — are the part worth holding in a test without a DOM, and the
+ * part a second surface would otherwise re-derive slightly differently.
+ */
+
+/**
+ * `TT.MM.JJJJ`, from the ISO timestamp the contract carries.
+ *
+ * ⚠️ Built from the date PART of the string, never from a `Date`. `new Date("2026-08-15T00:00:00Z")`
+ * is the 14th in every timezone west of London, and a card would show the day before the one
+ * somebody picked. The stored value is a calendar day; it is read as one.
+ */
+export function germanDate(iso: string): string {
+  const [year, month, day] = iso.slice(0, 10).split("-");
+  return `${day}.${month}.${year}`;
+}
+
+/** What the `<input type="date">` in the popover needs: the same day, the other way round. */
+export function isoDay(iso: string): string {
+  return iso.slice(0, 10);
+}
+
+/**
+ * The label of the single date chip, or `null` when there is nothing to say.
+ *
+ * ⚠️ **A range only when there IS one.** With one date set the chip carries that date alone: a
+ * range with an empty half ("15.08.2026 - ") reads as a value somebody forgot to finish, and a
+ * placeholder for the missing end is a placeholder for an absence (#692).
+ */
+export function dateLabel(startDate: string | null, dueDate: string | null): string | null {
+  if (startDate !== null && dueDate !== null) {
+    return `${germanDate(startDate)} - ${germanDate(dueDate)}`;
+  }
+  if (startDate !== null) return germanDate(startDate);
+  if (dueDate !== null) return germanDate(dueDate);
+  return null;
+}

package/ui/src/board/board-dates/board-dates.tsx

@@ -0,0 +1,105 @@
+import { CalendarDays } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { dateLabel, isoDay } from "./board-dates.ts";
+
+/**
+ * When a card runs, as one chip (#724).
+ *
+ * ⚠️ **One chip, not two.** It used to be `from …` and `due …` side by side, and that was two facts
+ * where a reader sees one: a card runs from a day to a day. The two are still edited and removed
+ * separately, but inside, where the popover can say which half it is changing.
+ *
+ * ⚠️ **The chip is the trigger.** A menu with no anchor never appears — that is `#723`, and it cost
+ * a whole release. `DropdownMenuContent` without a `DropdownMenuTrigger` in the same `DropdownMenu`
+ * is a finding in this repository.
+ */
+export function DatesChip({
+  startDate,
+  dueDate,
+  write,
+}: {
+  startDate: string | null;
+  dueDate: string | null;
+  write(input: { startDate?: string | null; dueDate?: string | null }): void;
+}) {
+  const i18n = useI18n();
+  const label = dateLabel(startDate, dueDate);
+  if (label === null) return null;
+
+  // ⚠️ Midnight UTC, the same shape the plus menu writes. A card's dates are calendar days here, and
+  // a second format would make two cards written by two paths sort against each other.
+  const asStored = (day: string) => (day === "" ? null : `${day}T00:00:00.000Z`);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={`${label}, ${i18n.t("board.dates.edit")}`}
+        className="flex shrink-0 items-center gap-1.5 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"
+      >
+        <CalendarDays aria-hidden="true" className="size-3.5" />
+        {label}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-60 p-2">
+        <div className="flex flex-col gap-2">
+          <Field
+            label={i18n.t("board.add.start")}
+            value={startDate}
+            clear={i18n.t("board.clearStart")}
+            onChange={(day) => write({ startDate: asStored(day) })}
+          />
+          <Field
+            label={i18n.t("board.add.due")}
+            value={dueDate}
+            clear={i18n.t("board.clearDue")}
+            onChange={(day) => write({ dueDate: asStored(day) })}
+          />
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * One half of the range.
+ *
+ * ⚠️ **The remove button only exists while there is something to remove.** A permanently visible
+ * one is a control that does nothing on most cards, and a reader learns to ignore it.
+ */
+function Field({
+  label,
+  value,
+  clear,
+  onChange,
+}: {
+  label: string;
+  value: string | null;
+  clear: string;
+  onChange(day: string): void;
+}) {
+  return (
+    <label className="flex items-center gap-2 text-xs">
+      <span className="w-14 shrink-0 text-muted-foreground">{label}</span>
+      <input
+        type="date"
+        value={value === null ? "" : isoDay(value)}
+        onChange={(event) => onChange(event.target.value)}
+        className="min-w-0 flex-1 rounded-md border bg-background px-2 py-1 tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      />
+      {value === null ? null : (
+        <button
+          type="button"
+          aria-label={`${label}, ${clear}`}
+          onClick={() => onChange("")}
+          className="shrink-0 rounded-md px-1 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ×
+        </button>
+      )}
+    </label>
+  );
+}

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

@@ -0,0 +1,162 @@
+import type { BoardTask } from "@contract/board.ts";
+import { positionBetween } from "@/board/board-data/board-data.ts";
+import type { ColumnWithCards } from "@/board/board-data/board-data.types.ts";
+
+/**
+ * Where a dragged card was let go.
+ *
+ * ⚠️ **`index` counts into the column AS RENDERED — including the dragged card itself when it
+ * started there.** That is what a drop handler can actually measure: the card stays in the list
+ * while the gesture runs, and the browser reports the gap it hovers over. Reading it as an index
+ * into the list *without* the card is off by one for every downward move inside a column, and the
+ * symptom is a card landing one place short of where it was let go — which looks like a sloppy
+ * animation rather than a bug.
+ */
+export interface Drop {
+  status: string;
+  index: number;
+}
+
+/**
+ * What a drop means as a write — the whole of the drag logic, kept out of the component so it can be
+ * proven without a browser.
+ *
+ * ⚠️ **`null` means "changed nothing", and the caller must not write.** A card let go where it
+ * already sits is the most common drop there is: somebody picks one up, thinks again, and puts it
+ * back. Writing anyway costs a round trip, a re-render, and — because the position would be
+ * recomputed — a card that visibly jumps for no reason.
+ *
+ * ⚠️ **The card itself is removed from the neighbour list first.** Without that, dragging a card
+ * one place down within its own column measures against its OWN old position: the midpoint lands
+ * between the card and its neighbour, which is where it already was. It would look like the drag
+ * did nothing, which is the same symptom as a broken drop handler and reads as one.
+ */
+export function dropToWrite(
+  card: BoardTask,
+  columns: ColumnWithCards[],
+  drop: Drop,
+): { status: string; position: number } | null {
+  const target = columns.find((entry) => entry.column.id === drop.status);
+  if (target === undefined) return null;
+
+  const others = target.cards.filter((entry) => entry.id !== card.id);
+  const wasAt = target.cards.findIndex((entry) => entry.id === card.id);
+
+  // ⚠️ The card is counted out of its own gap. Dropped BELOW where it started, every card it passed
+  // has shifted up by one, so the index into the remaining cards is one lower. Above its start
+  // nothing moved and the index carries over unchanged.
+  const wanted = wasAt >= 0 && drop.index > wasAt ? drop.index - 1 : drop.index;
+  const index = Math.max(0, Math.min(wanted, others.length));
+
+  // Let go in its own gap: nothing moved, and writing anyway would recompute the position and make
+  // the card jump for no reason.
+  if (wasAt >= 0 && index === wasAt) return null;
+
+  return {
+    status: drop.status,
+    position: positionBetween(others[index - 1]?.position, others[index]?.position),
+  };
+}
+
+/**
+ * The card a keyboard move should land on, given the one it starts from.
+ *
+ * ⚠️ Keyboard reachability is part of the first version here, not polish — dragging is a mouse
+ * gesture and a board that can only be operated by dragging is a board half the people cannot use.
+ * Left and right move between columns and keep the row; up and down move within one.
+ */
+export function neighbourDrop(
+  card: BoardTask,
+  columns: ColumnWithCards[],
+  direction: "left" | "right" | "up" | "down",
+): Drop | null {
+  const columnIndex = columns.findIndex((entry) => entry.column.id === card.status);
+  const column = columns[columnIndex];
+  if (column === undefined) return null;
+  const row = column.cards.findIndex((entry) => entry.id === card.id);
+
+  if (direction === "left" || direction === "right") {
+    const next = columns[columnIndex + (direction === "left" ? -1 : 1)];
+    // ⚠️ No wrapping. A card that jumps from the last column to the first because somebody pressed
+    // the arrow once too often is a move nobody asked for, and the one they did ask for is lost.
+    if (next === undefined) return null;
+    return { status: next.column.id, index: Math.min(row, next.cards.length) };
+  }
+  const landing = row + (direction === "up" ? -1 : 1);
+  if (landing < 0 || landing >= column.cards.length) return null;
+  // ⚠️ Down needs one more than the row it lands on. `index` is a GAP in the list AS RENDERED, and
+  // moving down one place means ending up BEHIND the neighbour — that is the gap after it. Naming
+  // the neighbour's own gap names the gap the card already occupies, and `dropToWrite` then
+  // correctly answers "nothing changed" and swallows the move. Upwards the two coincide, which is
+  // why this reads as an asymmetry and is not one.
+  return { status: column.column.id, index: direction === "down" ? landing + 1 : landing };
+}
+
+/**
+ * What a finished drag means as a `Drop` — translated from what `dnd-kit` reports.
+ *
+ * ⚠️ **`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.
+ *
+ * ⚠️ **`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 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;
+}