@anchrd/intel-ui 0.18.0 → 0.20.0

package/src/board/board.tsx

@@ -1,251 +0,0 @@
-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/item-calendar.tsx

@@ -1,181 +0,0 @@
-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>
-  );
-}