@anchrd/intel-ui 0.18.0 → 0.20.0

package/src/board/board-table/board-table.tsx

@@ -1,413 +0,0 @@
-import {
-  type ColumnFiltersState,
-  type ColumnVisibilityState,
-  columnFilteringFeature,
-  columnGroupingFeature,
-  columnVisibilityFeature,
-  createColumnHelper,
-  createExpandedRowModel,
-  createFilteredRowModel,
-  createGroupedRowModel,
-  createSortedRowModel,
-  type ExpandedState,
-  filterFn_includesString,
-  type GroupingState,
-  rowExpandingFeature,
-  rowSortingFeature,
-  type SortingState,
-  sortFn_alphanumeric,
-  sortFn_basic,
-  tableFeatures,
-  useTable,
-} from "@tanstack/react-table";
-import { ChevronDown, ChevronRight, Columns3, Search } from "lucide-react";
-import { useMemo, useState } from "react";
-import { BoardAssigneeLabel } from "@/board/board-card/board-card.tsx";
-import { shownTasks } from "@/board/board-data/board-data.ts";
-import { labelOf, toneOf } from "@/board/board-status/board-status.ts";
-import type { BoardViewProps } from "@/board/board-views/board-views.types.ts";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useI18n } from "@/i18n/i18n-context.tsx";
-import { type BoardRow, boardRows } from "./board-table.ts";
-
-// ⚠️ Registered one by one rather than through `stockFeatures`. Every feature the board's table does
-// not use — pagination, selection, pinning, resizing, faceting — would otherwise be in the bundle
-// of a screen that never calls it, and the list below is also the honest answer to "what can this
-// table do".
-const features = tableFeatures({
-  columnFilteringFeature,
-  columnGroupingFeature,
-  columnVisibilityFeature,
-  rowExpandingFeature,
-  rowSortingFeature,
-  // ⚠️ A row-model slot has to stand AFTER the feature it needs. Filtering before grouping and
-  // expanding last is the order the rows actually pass through.
-  filteredRowModel: createFilteredRowModel(),
-  sortedRowModel: createSortedRowModel(),
-  groupedRowModel: createGroupedRowModel(),
-  expandedRowModel: createExpandedRowModel(),
-  filterFns: { includesString: filterFn_includesString },
-  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic },
-});
-
-const helper = createColumnHelper<typeof features, BoardRow>();
-
-// The one place a grouping is offered. Not free-form: a board has fixed fields (#285) and there is
-// no UI to add one, so grouping by anything else would be grouping by something nobody can create.
-const groupBy = ["none", "status", "assignee"] as const;
-type GroupBy = (typeof groupBy)[number];
-
-/**
- * The board as a table (anchrd/intel#286).
- *
- * ⚠️ The hierarchy is `getSubRows` and nothing else. Epic, task and subtask are a DEPTH in this
- * schema and not three types (#285), so the table has one row shape and indents it by
- * `row.depth` — there is no second column saying which of the three a row is, because the schema
- * has no such fact to show.
- *
- * ⚠️ The columns are fixed and there is no UI to add one. A board is not a table node (`kind:
- * "table"`), and a custom-field editor here would be a second, weaker version of the thing Intel
- * already has for exactly that.
- */
-export function BoardTable({ board, select, showArchived }: BoardViewProps) {
-  const i18n = useI18n();
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<ColumnVisibilityState>({});
-  const [expanded, setExpanded] = useState<ExpandedState>(true);
-  const [grouping, setGrouping] = useState<GroupingState>([]);
-
-  const data = useMemo(
-    () => boardRows(shownTasks(board.tasks, showArchived)),
-    [board.tasks, showArchived],
-  );
-
-  const columns = useMemo(
-    () =>
-      helper.columns([
-        helper.accessor("title", {
-          id: "title",
-          header: i18n.t("common.title"),
-          filterFn: "includesString",
-          sortFn: "alphanumeric",
-          // Grouping by the title would make one group per row, which is the table again with an
-          // extra click in front of it.
-          enableGrouping: false,
-        }),
-        helper.accessor((task) => labelOf(task.status, board.statuses), {
-          id: "status",
-          header: i18n.t("board.column.status"),
-          sortFn: "alphanumeric",
-        }),
-        helper.accessor(
-          // ⚠️ Grouped by a STABLE key, never by the rendered name. Most person ids cannot be
-          // resolved to a name in this browser (`useUserName`), so grouping by what is drawn would
-          // put every unnamed person into one group called "assigned".
-          (task) =>
-            task.assignee === null
-              ? ""
-              : task.assignee.type === "agent"
-                ? `agent:${task.assignee.nodeId}`
-                : `user:${task.assignee.id}`,
-          {
-            id: "assignee",
-            header: i18n.t("board.column.assignee"),
-            sortFn: "alphanumeric",
-            cell: ({ row }) =>
-              row.original.assignee === null ? (
-                <span className="text-muted-foreground">{i18n.t("board.unassigned")}</span>
-              ) : (
-                <BoardAssigneeLabel assignee={row.original.assignee} />
-              ),
-          },
-        ),
-        /**
-         * ⚠️ `undefined` for a task with no due date, and never `null`.
-         *
-         * `sortUndefined` only fires on `undefined` (`createSortedRowModel`), so with `null` the
-         * dateless rows fall through to the sort function — where `null < "2026-08-19"` and
-         * `null > "2026-08-19"` are both false. That makes the comparator report "equal" for pairs
-         * that are not, which is not a comparator at all: the sort then produces an order that
-         * depends on where the dateless rows happened to sit. Observed as a "sorted" column reading
-         * 8/6, 8/19, —, 8/14.
-         *
-         * An ISO date sorts correctly as a string, so `basic` is the whole of the comparison.
-         */
-        helper.accessor((task) => task.dueDate ?? undefined, {
-          id: "dueDate",
-          header: i18n.t("board.column.dueDate"),
-          sortFn: "basic",
-          sortUndefined: "last",
-          enableGrouping: false,
-          cell: ({ row }) => {
-            const value = row.original.dueDate;
-            return value === null ? (
-              <span className="text-muted-foreground">—</span>
-            ) : (
-              <time dateTime={value} className="tabular-nums">
-                {new Date(`${value}T00:00:00`).toLocaleDateString(i18n.locale)}
-              </time>
-            );
-          },
-        }),
-        helper.accessor((task) => task.labels.join(", "), {
-          id: "labels",
-          header: i18n.t("board.column.labels"),
-          filterFn: "includesString",
-          enableGrouping: false,
-          enableSorting: false,
-        }),
-      ]),
-    [i18n, board.statuses],
-  );
-
-  const table = useTable({
-    features,
-    columns,
-    data,
-    // The hierarchy the DoD asks for, in one option. Everything else about depth — the indent, the
-    // chevron, which rows exist at all — follows from it.
-    getSubRows: (row: BoardRow) => row.subRows,
-    getRowId: (row: BoardRow) => row.id,
-    state: { sorting, columnFilters, columnVisibility, expanded, grouping },
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onExpandedChange: setExpanded,
-    onGroupingChange: setGrouping,
-    /**
-     * ⚠️ Off, and it has to be off.
-     *
-     * TanStack resets the expanded state whenever the row structure changes, and on a board the row
-     * structure changes constantly: every card edit, every drag and every archived-switch flip
-     * hands `data` a new array. With the reset on, opening an epic and then renaming anything on the
-     * board closes it again — and turning grouping on collapsed every group the moment it appeared,
-     * which is how this was found (the groups in the first screenshot were shut).
-     */
-    autoResetExpanded: false,
-  });
-
-  const currentGrouping: GroupBy = (grouping[0] as GroupBy) ?? "none";
-  const titleFilter = String(table.getColumn("title")?.getFilterValue() ?? "");
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col gap-3 p-6">
-      <div className="flex flex-wrap items-center gap-2">
-        <label className="relative">
-          <span className="sr-only">{i18n.t("board.filterTitle")}</span>
-          <Search
-            aria-hidden="true"
-            className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
-          />
-          <input
-            type="search"
-            value={titleFilter}
-            placeholder={i18n.t("board.filterTitle")}
-            onChange={(event) =>
-              table.getColumn("title")?.setFilterValue(event.currentTarget.value || undefined)
-            }
-            className="h-8 w-56 rounded-md border bg-background pr-3 pl-8 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          />
-        </label>
-        <label className="flex items-center gap-2 text-sm">
-          <span className="text-muted-foreground">{i18n.t("board.groupBy")}</span>
-          <select
-            value={currentGrouping}
-            onChange={(event) => {
-              const next = event.currentTarget.value as GroupBy;
-              setGrouping(next === "none" ? [] : [next]);
-              // A group that opens closed is a screen with nothing on it. Regrouping therefore
-              // expands again, which is also the state the table starts in.
-              setExpanded(true);
-            }}
-            className="h-8 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {groupBy.map((option) => (
-              <option key={option} value={option}>
-                {i18n.t(`board.groupBy.${option}`)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <DropdownMenu>
-          <DropdownMenuTrigger className="ml-auto 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">
-            <Columns3 aria-hidden="true" className="size-4" />
-            {i18n.t("board.columns")}
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {table.getAllLeafColumns().map((column) => (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                checked={column.getIsVisible()}
-                onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
-                // The last visible column cannot be hidden: an empty table is a screen that has
-                // lost its data as far as anybody looking at it can tell.
-                disabled={column.getIsVisible() && table.getVisibleLeafColumns().length === 1}
-              >
-                {i18n.t(`board.column.${column.id === "title" ? "title" : column.id}`)}
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="min-h-0 flex-1 overflow-auto rounded-lg border">
-        <table className="w-full border-collapse text-sm">
-          <thead className="sticky top-0 z-10 bg-card">
-            {table.getHeaderGroups().map((group) => (
-              <tr key={group.id}>
-                {group.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    scope="col"
-                    aria-sort={
-                      header.column.getIsSorted() === "asc"
-                        ? "ascending"
-                        : header.column.getIsSorted() === "desc"
-                          ? "descending"
-                          : "none"
-                    }
-                    className="border-b px-3 py-2 text-left font-medium whitespace-nowrap"
-                  >
-                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                      <button
-                        type="button"
-                        onClick={header.column.getToggleSortingHandler()}
-                        className="inline-flex items-center gap-1 rounded outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
-                      >
-                        <table.FlexRender header={header} />
-                        <span aria-hidden="true" className="text-muted-foreground">
-                          {header.column.getIsSorted() === "asc"
-                            ? "↑"
-                            : header.column.getIsSorted() === "desc"
-                              ? "↓"
-                              : ""}
-                        </span>
-                      </button>
-                    ) : (
-                      <table.FlexRender header={header} />
-                    )}
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody>
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className="border-b last:border-b-0 hover:bg-muted/60">
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className="px-3 py-2 align-top">
-                    {/* ⚠️ A group row carries the grouped value and NOTHING else. Left to render
-                        itself, every other cell of a group row falls back to the first task in the
-                        group — so the heading "Backlog 3" came with one arbitrary member's title
-                        and its date beside it, which reads as a row of its own and is a lie about
-                        the two below it. */}
-                    {row.getIsGrouped() && !cell.getIsGrouped() ? null : cell.getIsGrouped() ? (
-                      <button
-                        type="button"
-                        onClick={row.getToggleExpandedHandler()}
-                        aria-expanded={row.getIsExpanded()}
-                        className="inline-flex items-center gap-2 rounded font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      >
-                        {row.getIsExpanded() ? (
-                          <ChevronDown aria-hidden="true" className="size-4" />
-                        ) : (
-                          <ChevronRight aria-hidden="true" className="size-4" />
-                        )}
-                        <GroupLabel row={row} columnId={cell.column.id} value={cell.getValue()} />
-                        <span className="text-xs text-muted-foreground tabular-nums">
-                          {row.subRows.length}
-                        </span>
-                      </button>
-                    ) : cell.getIsPlaceholder() ? null : cell.column.id === "title" ? (
-                      <div
-                        className="flex min-w-0 items-start gap-1.5"
-                        // ⚠️ The indent is a style and not a nested table. A row nested in markup
-                        // could not be sorted or grouped with its siblings, and a screen reader
-                        // would read four tables where there is one.
-                        style={{ paddingInlineStart: `${row.depth * 1.25}rem` }}
-                      >
-                        {row.getCanExpand() ? (
-                          <button
-                            type="button"
-                            onClick={row.getToggleExpandedHandler()}
-                            aria-expanded={row.getIsExpanded()}
-                            aria-label={i18n.t("board.toggleSubtasks", {
-                              task: row.original.title,
-                            })}
-                            className="mt-0.5 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                          >
-                            {row.getIsExpanded() ? (
-                              <ChevronDown aria-hidden="true" className="size-4" />
-                            ) : (
-                              <ChevronRight aria-hidden="true" className="size-4" />
-                            )}
-                          </button>
-                        ) : (
-                          <span aria-hidden="true" className="size-4 shrink-0" />
-                        )}
-                        <button
-                          type="button"
-                          onClick={() => select(row.original.id)}
-                          className="min-w-0 rounded text-left outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
-                        >
-                          {row.original.title}
-                        </button>
-                        {board.blockedBy(row.original).length > 0 ? (
-                          <span className="shrink-0 rounded-md border border-destructive px-1 text-xs text-destructive">
-                            {i18n.t("board.blocked")}
-                          </span>
-                        ) : null}
-                      </div>
-                    ) : cell.column.id === "status" ? (
-                      <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
-                        <span
-                          aria-hidden="true"
-                          className={`size-2 rounded-full ${toneOf(row.original.status, board.statuses).dot}`}
-                        />
-                        <table.FlexRender cell={cell} />
-                      </span>
-                    ) : (
-                      <table.FlexRender cell={cell} />
-                    )}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        {table.getRowModel().rows.length === 0 ? (
-          <p className="p-6 text-sm text-muted-foreground">{i18n.t("board.noTasks")}</p>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-/**
- * The value a group was formed on, said in words.
- *
- * ⚠️ The assignee column groups on a STABLE key (`user:…`, `agent:…`) and that key is not a name.
- * The heading is therefore read off the first row of the group rather than off the key — that is
- * the only place an agent's title can be resolved, and the only place a person who cannot be named
- * is named honestly rather than by their id.
- */
-function GroupLabel({
-  row,
-  columnId,
-  value,
-}: {
-  row: { subRows: { original: BoardRow }[] };
-  columnId: string;
-  value: unknown;
-}) {
-  const i18n = useI18n();
-  if (columnId !== "assignee") return <span>{String(value ?? "")}</span>;
-  const assignee = row.subRows[0]?.original.assignee ?? null;
-  if (assignee === null) return <span>{i18n.t("board.unassigned")}</span>;
-  return <BoardAssigneeLabel assignee={assignee} />;
-}

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

@@ -1,68 +0,0 @@
-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

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