@anchrd/intel-ui 0.16.0 → 0.17.0

package/src/board/board-views/board-views.tsx

@@ -0,0 +1,68 @@
+import { CalendarDays, ChartGantt, KanbanSquare, Share2, Table2 } from "lucide-react";
+import { lazy, Suspense } from "react";
+import { BoardCalendar } from "@/board/board-calendar/board-calendar.tsx";
+import { BoardGantt } from "@/board/board-gantt/board-gantt.tsx";
+import { BoardKanban } from "@/board/board-kanban/board-kanban.tsx";
+import { BoardTable } from "@/board/board-table/board-table.tsx";
+import type { BoardView, BoardViewProps } from "./board-views.types.ts";
+
+// Sigma and graphology are the heaviest thing on this screen and only one view needs them, the
+// same arrangement `graph-pane` already has for the relation graph.
+const BoardGraph = lazy(async () => ({
+  default: (await import("@/board/board-graph/board-graph.tsx")).BoardGraph,
+}));
+
+/**
+ * Which views a board has (anchrd/intel#286).
+ *
+ * ⚠️ A LIST, and the switch above it renders whatever is in the list — there is deliberately no
+ * `switch (view)` with one case per view anywhere. Gantt (anchrd/intel#293) proved it: it is one
+ * more entry here and nothing else, reading the same `BoardHandle` and the same dated items
+ * (`board-items.ts`), so the work it cost was a renderer. Hard-wired cases would have made it a
+ * change to the screen, the switch, the URL parser and the tests instead.
+ *
+ * ⚠️ The order is the order the switch draws. Kanban first because it is what a board is opened
+ * for; the graph last because it answers a question one has after looking, not before.
+ */
+export const boardViews: readonly BoardView[] = [
+  {
+    id: "kanban",
+    labelKey: "board.view.kanban",
+    icon: KanbanSquare,
+    render: (props: BoardViewProps) => <BoardKanban {...props} />,
+  },
+  {
+    id: "table",
+    labelKey: "board.view.table",
+    icon: Table2,
+    render: (props: BoardViewProps) => <BoardTable {...props} />,
+  },
+  {
+    id: "calendar",
+    labelKey: "board.view.calendar",
+    icon: CalendarDays,
+    render: (props: BoardViewProps) => <BoardCalendar {...props} />,
+  },
+  {
+    id: "gantt",
+    labelKey: "board.view.gantt",
+    icon: ChartGantt,
+    render: (props: BoardViewProps) => <BoardGantt {...props} />,
+  },
+  {
+    id: "graph",
+    labelKey: "board.view.graph",
+    icon: Share2,
+    render: (props: BoardViewProps) => (
+      <Suspense fallback={null}>
+        <BoardGraph {...props} />
+      </Suspense>
+    ),
+  },
+];
+
+export function boardViewById(id: string | null): BoardView {
+  // The first entry is the fallback rather than a named one: a view removed from the list must not
+  // leave a screen pointing at nothing, and an unknown id in a bookmarked URL is the same case.
+  return boardViews.find((view) => view.id === id) ?? (boardViews[0] as BoardView);
+}

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

@@ -0,0 +1,29 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+
+/**
+ * Everything a view of a board gets, and the whole of it.
+ *
+ * ⚠️ It carries no loader and no writer of its own — `board` is the one data layer, and a view that
+ * reached past it would be a second cache entry for the same board.
+ */
+export interface BoardViewProps {
+  board: BoardHandle;
+  // How a view asks for the detail panel. `null` closes it. There is deliberately no "which task is
+  // open" alongside it: no view highlights the selection today, and a prop threaded through four
+  // renderers that none of them reads is a prop that will be wrong before it is used.
+  select(taskId: string | null): void;
+  // Whether the shelf is on screen. One switch above every view rather than one per view: it is a
+  // question about the board, not about how the board is drawn.
+  showArchived: boolean;
+}
+
+export interface BoardView {
+  // What stands in the URL and in the switch. A view keeps its id forever; a bookmarked board must
+  // not open on a different view because a label was rewritten.
+  id: string;
+  labelKey: string;
+  icon: LucideIcon;
+  render(props: BoardViewProps): ReactNode;
+}

package/src/board/board.tsx

@@ -0,0 +1,251 @@
+import type { Node } from "@anchrd/intel-contract";
+import { Plus, SlidersHorizontal } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { useBoard } from "@/board/board-data/board-data.ts";
+import { BoardDetail } from "@/board/board-detail/board-detail.tsx";
+import { BoardStatuses } from "@/board/board-statuses/board-statuses.tsx";
+import { boardViewById, boardViews } from "@/board/board-views/board-views.tsx";
+import { Switch } from "@/components/ui/switch";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * A board's screen (anchrd/intel#286).
+ *
+ * ⚠️ The views are rendered from `boardViews` — a list, walked. There is no `switch` on a view
+ * name here or anywhere else, and that is what made Gantt (anchrd/intel#293) one entry in that list
+ * and nothing more: the fifth view cost this file no line. It also means the switch itself is
+ * generated, so a new view cannot be added without appearing in it.
+ *
+ * ⚠️ One data layer above all of them (`useBoard`), one detail panel beside them, one archived
+ * switch over them. Every view is a renderer: none loads, none writes, and none has an opinion
+ * about what selecting a task means.
+ */
+export function BoardPanel({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const board = useBoard(node.id);
+  const [viewId, setViewId] = useState<string>(boardViews[0]?.id ?? "kanban");
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [showArchived, setShowArchived] = useState(false);
+  const [statusesOpen, setStatusesOpen] = useState(false);
+  const [newTask, setNewTask] = useState("");
+  const archivedId = useId();
+  const tabsId = useId();
+  const view = boardViewById(viewId);
+  /**
+   * ⚠️ The delete report clears itself.
+   *
+   * `board.remove` keeps its answer until the next delete, so without this the line sat under the
+   * toolbar for the rest of the session — permanently shifting the layout and reporting, hours
+   * later, on a task nobody remembers. A status message about a completed action has a lifetime;
+   * this is it.
+   */
+  useEffect(() => {
+    if (!board.remove.isSuccess) return;
+    const timer = setTimeout(() => board.remove.reset(), 8_000);
+    return () => clearTimeout(timer);
+  }, [board.remove.isSuccess, board.remove]);
+  const selected = selectedTaskId === null ? null : (board.byId.get(selectedTaskId) ?? null);
+
+  if (board.query.isPending) {
+    return <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
+  }
+  if (board.query.isError) {
+    return (
+      <div role="alert" className="grid flex-1 place-items-center p-8 text-center text-sm">
+        <div className="space-y-3">
+          <p className="text-destructive">{i18n.t("node.loadFailed")}</p>
+          <button
+            type="button"
+            onClick={() => void board.query.refetch()}
+            className="rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.retry")}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <ActionSlot name="title-meta">
+        {i18n.t("board.summary", {
+          tasks: board.tasks.length,
+          statuses: board.statuses.length,
+        })}
+      </ActionSlot>
+      <ActionSlot name="title-actions">
+        <button
+          type="button"
+          onClick={() => setStatusesOpen(true)}
+          className="inline-flex h-8 items-center gap-2 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <SlidersHorizontal aria-hidden="true" className="size-4" />
+          {i18n.t("board.statuses")}
+        </button>
+      </ActionSlot>
+
+      {/* The file-specific bar: the switch, the shelf, and the one way to put something new on the
+          board. It stands under the title line and above the view, the same order the agent page's
+          tabs and the flow screen's switch already use (#19). */}
+      <div className="flex flex-wrap items-center gap-3 border-b px-6 py-2">
+        {/* ⚠️ The tab roles come with a keyboard contract, and it is kept here rather than only
+            announced. A reader is told "tab 2 of 4"; the arrow keys therefore have to move between
+            them, exactly one tab may be in the tab order (roving `tabIndex`), and each one has to
+            name the panel it controls — a `role="tab"` pointing at no `tabpanel` promises a
+            relationship the page does not have. */}
+        <div
+          role="tablist"
+          aria-label={i18n.t("board.views")}
+          onKeyDown={(event) => {
+            const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+            if (step === 0) return;
+            event.preventDefault();
+            const at = boardViews.findIndex((entry) => entry.id === view.id);
+            const next = boardViews[(at + step + boardViews.length) % boardViews.length];
+            if (!next) return;
+            setViewId(next.id);
+            // The focus has to follow the selection, or the reader is told about a tab they are not
+            // standing on.
+            document.getElementById(`${tabsId}-${next.id}`)?.focus();
+          }}
+          className="inline-flex items-center gap-1 rounded-lg bg-muted p-[3px]"
+        >
+          {boardViews.map((entry) => {
+            const Icon = entry.icon;
+            const current = entry.id === view.id;
+            return (
+              <button
+                key={entry.id}
+                id={`${tabsId}-${entry.id}`}
+                type="button"
+                role="tab"
+                aria-selected={current}
+                aria-controls={`${tabsId}-panel`}
+                tabIndex={current ? 0 : -1}
+                onClick={() => setViewId(entry.id)}
+                className={`inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                  current
+                    ? "bg-background font-medium text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                <Icon aria-hidden="true" className="size-4" />
+                {i18n.t(entry.labelKey)}
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex items-center gap-2">
+          {/* ⚠️ One switch for every view. The shelf is a question about the board, not about
+              how it is drawn, and one toggle per view would let the table and the graph disagree
+              about what a board contains. */}
+          <Switch id={archivedId} checked={showArchived} onCheckedChange={setShowArchived} />
+          <label htmlFor={archivedId} className="text-sm text-muted-foreground">
+            {i18n.t("board.showArchived")}
+          </label>
+        </div>
+        <form
+          className="ml-auto flex items-center gap-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const title = newTask.trim();
+            if (title === "") return;
+            // No status: the server puts a new task in the first column that is not the shelf
+            // (#285). Naming one here would be this screen repeating a rule it does not own.
+            //
+            // ⚠️ The field is cleared on SUCCESS, like the panel's subtask form: emptied first, a
+            // refusal would look like a task that was created and then vanished, and would take the
+            // typed title with it.
+            board.add.mutate(
+              {
+                title,
+                assignee: null,
+                labels: [],
+                startDate: null,
+                dueDate: null,
+                parentId: null,
+                dependsOn: [],
+                description: "",
+                references: [],
+                afterTaskId: null,
+                beforeTaskId: null,
+              },
+              { onSuccess: () => setNewTask("") },
+            );
+          }}
+        >
+          <input
+            value={newTask}
+            onChange={(event) => setNewTask(event.currentTarget.value)}
+            placeholder={i18n.t("board.addTask")}
+            aria-label={i18n.t("board.addTask")}
+            className="h-8 w-56 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <button
+            type="submit"
+            disabled={board.add.isPending}
+            className="inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            <Plus aria-hidden="true" className="size-4" />
+            {i18n.t("common.create")}
+          </button>
+        </form>
+      </div>
+
+      {/* ⚠️ The bar's own refusal, reported here because nothing else can: a root task is added from
+          this form alone, and `parentId: null` is what tells it apart from the detail panel's
+          subtask form (which reports its own). Unreported, a refused create was a typed title that
+          simply stayed put with no reason given. */}
+      {board.add.isError && board.add.variables?.parentId === null ? (
+        <p role="alert" className="border-b px-6 py-1.5 text-sm text-destructive">
+          {i18n.t("node.operationFailed")}
+        </p>
+      ) : null}
+
+      {/* ⚠️ The server's own count, reported by the SCREEN and not by the detail panel: a successful
+          delete closes that panel in the same commit, so a line inside it could never be read for
+          the task it describes. Here it outlives the delete, and it is cleared the moment anything
+          else is deleted because the mutation carries only its latest answer. */}
+      {board.remove.isSuccess && board.remove.data ? (
+        <p role="status" className="border-b px-6 py-1.5 text-xs text-muted-foreground">
+          {i18n.t("board.deleted", { count: board.remove.data.deleted })}
+        </p>
+      ) : null}
+
+      <div
+        id={`${tabsId}-panel`}
+        role="tabpanel"
+        aria-label={i18n.t(view.labelKey)}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        {board.tasks.length === 0 ? (
+          <div className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
+            {i18n.t("board.empty")}
+          </div>
+        ) : (
+          view.render({ board, select: setSelectedTaskId, showArchived })
+        )}
+      </div>
+
+      {selected ? (
+        <BoardDetail
+          // ⚠️ Keyed on the task, so pointing the panel at another card remounts it. The title and
+          // the description are drafts held in state; without the key the second task would open
+          // holding the first one's unsaved text.
+          key={selected.id}
+          board={board}
+          task={selected}
+          select={setSelectedTaskId}
+          close={() => setSelectedTaskId(null)}
+        />
+      ) : null}
+      {/* ⚠️ Mounted only while it is open, so its draft of the status list is seeded from
+          `board.statuses` every time it opens. Held across a close, the draft would be whatever the
+          dialog captured the first time — and since `board_configure` writes the list WHOLE, saving
+          it would silently revert a column somebody else added meanwhile over MCP. */}
+      {statusesOpen ? <BoardStatuses board={board} onClose={() => setStatusesOpen(false)} /> : null}
+    </>
+  );
+}

package/src/components/ui/dropdown-menu.tsx

@@ -134,6 +134,30 @@ function DropdownMenuRadioItem({
   );
 }
 
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check aria-hidden="true" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
 function DropdownMenuSeparator({
   className,
   ...props
@@ -149,6 +173,7 @@ function DropdownMenuSeparator({
 
 export {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,

package/src/components/ui/item-calendar.tsx

@@ -0,0 +1,181 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * A month grid with items in its days, from the Kibo UI calendar (MIT) and changed where it had to
+ * be.
+ *
+ * ⚠️ **`jotai` is gone, and it had to go.** The registry kept the displayed month and year in two
+ * atoms declared at MODULE scope — `atom(new Date().getMonth())`. That is not component state that
+ * happens to be stored elsewhere; it is one month shared by every calendar the bundle ever renders,
+ * outliving unmount, so two boards open side by side would page each other, and a board closed in
+ * March would open again in March in a different tab of the same session. Both of those are bugs,
+ * and neither needs a state library to fix: the month is view state of one component and now lives
+ * where it is used. Taking the atoms out is also what kept a second store out of Intel — server
+ * state is TanStack Query's and nothing else here has ever needed a third.
+ *
+ * ⚠️ **`date-fns` is gone with it.** The registry used exactly three functions of it —
+ * `getDay`, `getDaysInMonth`, `isSameDay` — and each is one line of `Date`. A dependency for that
+ * is a dependency to keep updated for that.
+ *
+ * ⚠️ **The month and year pickers were two comboboxes over `Command` and `Popover`.** They existed
+ * so the pickers could reach the atoms from anywhere in the tree, which was the compound API's
+ * whole reason. Without the atoms the calendar is one component with props, and paging by month
+ * plus "today" is what a due-date grid is actually read with.
+ *
+ * ⚠️ **A status colour is a token, never a value.** The registry drew its dot from
+ * `feature.status.color`, a raw string. Intel has no hard-coded colours (`lint:tokens`), so the
+ * caller renders the item itself and takes its colour from the board's ramp.
+ */
+
+export interface CalendarItem {
+  id: string;
+  // The day the item is filed under. Local midnight — see `board-items.ts` for why that matters.
+  endAt: Date;
+}
+
+function daysInMonth(year: number, month: number): number {
+  // Day zero of the next month is the last day of this one.
+  return new Date(year, month + 1, 0).getDate();
+}
+
+// The weekday names in the reader's language, starting on the day their week starts on.
+export function weekdayNames(locale: string, weekStartsOn: number): string[] {
+  const format = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  // 2024-01-07 was a Sunday, so adding the index lands on each weekday in order.
+  return Array.from({ length: 7 }, (_, index) =>
+    format.format(new Date(2024, 0, 7 + ((weekStartsOn + index) % 7))),
+  );
+}
+
+export function ItemCalendar<T extends CalendarItem>({
+  items,
+  month,
+  onMonthChange,
+  locale,
+  weekStartsOn,
+  renderItem,
+  labels,
+  maxPerDay = 3,
+}: {
+  items: T[];
+  // The first of the displayed month. A `Date` rather than a pair of numbers, so paging over a year
+  // boundary is arithmetic instead of two branches.
+  month: Date;
+  onMonthChange(month: Date): void;
+  locale: string;
+  weekStartsOn: number;
+  renderItem(item: T): ReactNode;
+  labels: { previous: string; next: string; today: string; more(count: number): string };
+  maxPerDay?: number;
+}) {
+  const year = month.getFullYear();
+  const monthIndex = month.getMonth();
+  const total = daysInMonth(year, monthIndex);
+  const leading = (new Date(year, monthIndex, 1).getDay() - weekStartsOn + 7) % 7;
+  const trailing = (7 - ((leading + total) % 7)) % 7;
+
+  const byDay = new Map<number, T[]>();
+  for (const item of items) {
+    if (item.endAt.getFullYear() !== year || item.endAt.getMonth() !== monthIndex) continue;
+    const day = item.endAt.getDate();
+    const existing = byDay.get(day);
+    if (existing) existing.push(item);
+    else byDay.set(day, [item]);
+  }
+
+  const today = new Date();
+  const cells: ReactNode[] = [];
+  for (let index = 0; index < leading; index += 1) {
+    // Outside the month and deliberately empty rather than filled with the previous month's
+    // numbers: those days carry no items here, and a number that looks like a day one can drop on
+    // is a promise the grid does not keep.
+    cells.push(<div key={`lead-${index}`} aria-hidden="true" className="bg-muted/30" />);
+  }
+  for (let day = 1; day <= total; day += 1) {
+    const forDay = byDay.get(day) ?? [];
+    const isToday =
+      today.getFullYear() === year && today.getMonth() === monthIndex && today.getDate() === day;
+    cells.push(
+      <div key={`day-${day}`} className="flex min-h-24 flex-col gap-1 p-1.5">
+        <span
+          className={cn(
+            "self-end text-xs tabular-nums",
+            isToday
+              ? "grid size-5 place-items-center rounded-full bg-primary font-semibold text-primary-foreground"
+              : "text-muted-foreground",
+          )}
+        >
+          {day}
+        </span>
+        <ul className="flex min-w-0 flex-col gap-1">
+          {forDay.slice(0, maxPerDay).map((item) => (
+            <li key={item.id} className="min-w-0">
+              {renderItem(item)}
+            </li>
+          ))}
+        </ul>
+        {forDay.length > maxPerDay ? (
+          <span className="text-xs text-muted-foreground">
+            {labels.more(forDay.length - maxPerDay)}
+          </span>
+        ) : null}
+      </div>,
+    );
+  }
+  for (let index = 0; index < trailing; index += 1) {
+    cells.push(<div key={`trail-${index}`} aria-hidden="true" className="bg-muted/30" />);
+  }
+
+  const page = (delta: number) => onMonthChange(new Date(year, monthIndex + delta, 1));
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center gap-2 px-1 pb-3">
+        <h3 className="text-sm font-semibold">
+          {new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month)}
+        </h3>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            type="button"
+            aria-label={labels.previous}
+            onClick={() => page(-1)}
+            className="grid size-8 place-items-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <ChevronLeftIcon aria-hidden="true" className="size-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() => onMonthChange(new Date(today.getFullYear(), today.getMonth(), 1))}
+            className="h-8 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {labels.today}
+          </button>
+          <button
+            type="button"
+            aria-label={labels.next}
+            onClick={() => page(1)}
+            className="grid size-8 place-items-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <ChevronRightIcon aria-hidden="true" className="size-4" />
+          </button>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 border-b">
+        {/* Keyed by position, not by the name: `short` weekday names are distinct in the three
+            catalogs that ship, but this is a generic component and a customer locale where two of
+            them coincide would hand React duplicate keys. */}
+        {weekdayNames(locale, weekStartsOn).map((day, index) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: the position IS the identity of a weekday
+          <div key={index} className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+            {day}
+          </div>
+        ))}
+      </div>
+      <div className="grid min-h-0 flex-1 auto-rows-fr grid-cols-7 overflow-y-auto rounded-b-lg border-x border-b [&>*]:border-t [&>*]:border-r [&>*:nth-child(7n)]:border-r-0">
+        {cells}
+      </div>
+    </div>
+  );
+}