@anchrd/intel-ui 0.40.0 → 0.42.0

package/src/board/board-kanban/board-kanban.tsx

@@ -119,7 +119,12 @@ function Card({
             that is 76 px of a 240 px card, given away for nothing. */}
         <span
           className="block"
-          style={{ paddingRight: `${8 + Math.min(family.level, MAX_STRIPES) * 5}px` }}
+          // ⚠️ `STRIPE_WIDTH`, not a number written twice. The reserve followed the OLD grid of
+          // 3px plus a 2px gap; since the stripes sit flush and 4px wide, `* 5` reserved up to 14px
+          // the title never needed, while the comment above claimed the reserve follows them.
+          style={{
+            paddingRight: `${8 + Math.min(family.level, MAX_STRIPES) * STRIPE_WIDTH}px`,
+          }}
         >
           {card.title}
         </span>
@@ -158,7 +163,10 @@ function Stripes({ family, label }: { family: Family; label: string }) {
       // it, and the tooltip would never appear once. The class is not needed either: this span lies
       // inside the button, so a click reaches it anyway.
       title={label}
-      className="absolute inset-y-1 right-1 flex gap-[2px]"
+      // ⚠️ Flush and gapless, top to bottom. Inset from the edge and spaced apart, the stripes read
+      // as decoration somebody added; against the edge and touching, they read as one mark with a
+      // countable number of parts, which is what they are.
+      className="absolute inset-y-0 right-0 flex"
     >
       {levels(family.level).map((level) => (
         <span
@@ -171,8 +179,14 @@ function Stripes({ family, label }: { family: Family; label: string }) {
           // Since the pattern caps at six the lowest raw value is 0.25, so the clamp no longer
           // fires; it stays because it is the guard, not the arithmetic, that must hold if the cap
           // ever moves.
-          className={`w-[3px] rounded-full ${toneClasses[family.tone - 1]}`}
-          style={{ opacity: Math.max(0.3, 1 - (level - 1) * 0.15) }}
+          // ⚠️ No rounding. A rounded stripe at full height leaves a light wedge at each end, and
+          // two of them beside one another look like a gap that is not there.
+          // ⚠️ The width as an inline STYLE, not a class. `w-[${…}px]` is a name Tailwind never
+          // sees — it reads class names statically, so the stripes would have no width in the build
+          // and be perfectly fine in the tests. An inline value is also the only way one number can
+          // rule both the mark and the room reserved for it.
+          className={toneClasses[family.tone - 1]}
+          style={{ width: `${STRIPE_WIDTH}px`, opacity: Math.max(0.3, 1 - (level - 1) * 0.15) }}
         />
       ))}
     </span>
@@ -186,6 +200,15 @@ function Stripes({ family, label }: { family: Family; label: string }) {
  */
 const MAX_STRIPES = 6;
 
+/**
+ * How wide one stripe is, in pixels.
+ *
+ * ⚠️ **One number, read by both the mark and the room reserved for it.** Written twice they drift,
+ * and the drift is silent: the title keeps its distance from stripes that are no longer that wide,
+ * or runs under ones that grew.
+ */
+const STRIPE_WIDTH = 4;
+
 /**
  * `[1, 2, … min(depth, MAX_STRIPES)]` — the level each stripe stands for.
  *
@@ -339,9 +362,11 @@ function Column({
           ))}
         </ul>
       </SortableContext>
-      {entry.cards.length === 0 ? (
-        <p className="px-1 text-xs text-muted-foreground">{i18n.t("board.columnEmpty")}</p>
-      ) : null}
+      {/* ⚠️ **Nothing at all under an empty column.** The sentence said what the emptiness already
+          says, and the surface I first put in its place was an invention with a false reason: the
+          column is a drop target through `setDropRef` on the section above, with or without
+          anything drawn in it — `dragEndToDrop` answers `{ status, index: 0 }` for a column with no
+          cards, and `neighbourDrop` reaches one by index alone. */}
       {addable ? (
         composing ? (
           <input
@@ -533,7 +558,17 @@ export function BoardKanban({
         });
       }}
     >
-      <div className="flex gap-3 overflow-x-auto p-4" aria-busy={board.isWriting}>
+      {/* ⚠️ **`min-h-0 flex-1`, or the scrollbar sits in the middle of the screen.** A box with no
+          height shrinks to its content, and the horizontal bar clings to the bottom of the tallest
+          column: on a board with few cards that looks broken. The panel above already offers the
+          full height; this is where it is taken.
+
+          ⚠️ **And NO `items-start` with it.** A stretched column paints nothing — the section
+          carries neither background nor border — but the rectangle it stretches to is what
+          `useDroppable` measures and `closestCorners` reckons against. Held to its content instead,
+          an empty column shrinks to its heading, and the area a card can be dropped into shrinks
+          with it. */}
+      <div className="flex min-h-0 flex-1 gap-3 overflow-x-auto p-4" aria-busy={board.isWriting}>
         {board.columns.map((column) => (
           <Column
             key={column.column.id}

package/src/board/board-open-task/board-open-task.ts

@@ -0,0 +1,32 @@
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useCallback } from "react";
+import { openTaskFrom } from "@/router/selection-search.ts";
+
+/**
+ * Which card is open, and the one way to change that.
+ *
+ * ⚠️ **One truth for two places.** The title row and the panel both open cards, and they are
+ * rendered in different subtrees: the row above the content, the panel inside it. Written twice,
+ * one of them would eventually push where the other replaces, and the back button would behave
+ * differently depending on which control was used.
+ */
+export function useOpenTask(): { openId: string | null; open(taskId: string | null): void } {
+  const search = useSearch({ strict: false });
+  const navigate = useNavigate();
+
+  const open = useCallback(
+    (taskId: string | null) =>
+      void navigate({
+        to: ".",
+        // ⚠️ **Closing REPLACES, opening pushes.** Opening a card is a step somebody took and the
+        // back button must undo it; closing is the undo itself. Pushed as well, the history holds
+        // board → card → board, and one press of Back re-opens the card that was just closed.
+        replace: taskId === null,
+        search: (previous: Record<string, unknown>) =>
+          taskId === null ? { ...previous, task: undefined } : { ...previous, task: taskId },
+      }),
+    [navigate],
+  );
+
+  return { openId: openTaskFrom(search), open };
+}

package/src/board/board-panel/board-panel.tsx

@@ -1,20 +1,19 @@
 import type { BoardTaskFilter } from "@anchrd/intel-contract/board";
 import type { Node } from "@anchrd/intel-contract/node";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
 import type { ColumnVisibilityState } from "@tanstack/react-table";
 import { KanbanSquare, Settings, Table2 } from "lucide-react";
-import { Suspense, useCallback, useState } from "react";
+import { Suspense, useState } from "react";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import { useBoard } from "@/board/board-data/board-data.ts";
 import { BoardKanban } from "@/board/board-kanban/board-kanban.tsx";
+import { useOpenTask } from "@/board/board-open-task/board-open-task.ts";
 import { BoardSettings } from "@/board/board-settings/board-settings.tsx";
 import { BoardTable } from "@/board/board-table/board-table.tsx";
 import { BoardTaskDocument } from "@/board/board-task/board-task.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { NodeEditor } from "@/node-editor/node-editor.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
-import { openTaskFrom } from "@/router/selection-search.ts";
 
 type View = "kanban" | "table";
 
@@ -47,31 +46,7 @@ export function BoardPanel({ node }: { node: Node }) {
    */
   const [filter, setFilter] = useState<Partial<BoardTaskFilter>>({});
   const board = useBoard(node.id);
-  const search = useSearch({ strict: false });
-  const navigate = useNavigate();
-  const openId = openTaskFrom(search);
-
-  /**
-   * ⚠️ **The address, not a piece of state.** A task opened into component state would have no link
-   * and no back button — the browser's back would leave the board entirely, which is the one thing
-   * somebody pressing it after opening a card does not want.
-   */
-  const open = useCallback(
-    (taskId: string | null) =>
-      void navigate({
-        to: ".",
-        // ⚠️ **Closing REPLACES, opening pushes.** Opening a card is a step somebody took and the
-        // back button must undo it; closing is the undo itself. Pushed as well, the history holds
-        // board → card → board, and one press of Back re-opens the card that was just closed —
-        // exactly the behaviour the address was chosen to avoid.
-        replace: taskId === null,
-        search: (previous: Record<string, unknown>) =>
-          taskId === null ? { ...previous, task: undefined } : { ...previous, task: taskId },
-      }),
-    // ⚠️ Stable, or the table's `useMemo` over its columns rebuilds on every render and the memo
-    // is decoration.
-    [navigate],
-  );
+  const { openId, open } = useOpenTask();
 
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
@@ -91,14 +66,20 @@ export function BoardPanel({ node }: { node: Node }) {
             <Icon aria-hidden="true" className="size-4" />
           </button>
         ))}
-        <button
-          type="button"
-          aria-label={i18n.t("board.settings.open")}
-          onClick={() => setSettingsOpen(true)}
-          className="inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          <Settings aria-hidden="true" className="size-4" />
-        </button>
+        {/* ⚠️ Gone while a card is open, like the view switch above it. It configures the BOARD,
+            and the line it sits in belongs to the card then — a control that acts on something the
+            reader is not looking at is worse than a missing one, because it looks like it acts on
+            what they see. */}
+        {openId === null ? (
+          <button
+            type="button"
+            aria-label={i18n.t("board.settings.open")}
+            onClick={() => setSettingsOpen(true)}
+            className="inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Settings aria-hidden="true" className="size-4" />
+          </button>
+        ) : null}
       </ActionSlot>
       {/* ⚠️ Mounted only while open, so its draft is seeded once per opening. Handed an `open` flag
           instead, a draft re-seeded from the board would lose what somebody typed the moment a
@@ -183,7 +164,6 @@ function OpenTask({
       task={task}
       board={board}
       onOpen={onOpen}
-      onClose={() => onOpen(null)}
       body={<TaskBody nodeId={task.id} />}
     />
   );

package/src/board/board-status/board-status.tsx

@@ -0,0 +1,60 @@
+import type { BoardColumn } from "@anchrd/intel-contract/board";
+import { ARCHIVE_COLUMN_ID } from "@anchrd/intel-contract/board";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * The column a card sits in, and the way to move it.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both offer this, and the archive
+ * is an entry in it: written twice, one of them would eventually keep an entry the other dropped,
+ * and a reader would find a card archivable from one screen and not from the other. Exactly the
+ * reason `AssigneeChip` was pulled out beside it.
+ */
+export function StatusChip({
+  status,
+  title,
+  columns,
+  write,
+}: {
+  status: string;
+  title: string;
+  columns: BoardColumn[];
+  write(input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>): void;
+}) {
+  const i18n = useI18n();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        // ⚠️ The VALUE first, then what pressing it does. A label that says only "move to a column"
+        // replaces the one thing the pill is there to show, and that fact then exists on screen and
+        // nowhere else.
+        aria-label={`${title}, ${i18n.t("board.moveTo")}`}
+        className="shrink-0 rounded-full border px-2.5 py-0.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {title}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {/* ⚠️ Where a card SITS is a move, not a field edit: the server computes a position and
+            checks the cycles for it. Everything else on these screens is a plain change. */}
+        <DropdownMenuRadioGroup value={status} onValueChange={(next) => write({ status: next })}>
+          {columns.map((entry) => (
+            <DropdownMenuRadioItem key={entry.id} value={entry.id}>
+              {entry.title}
+            </DropdownMenuRadioItem>
+          ))}
+          <DropdownMenuRadioItem value={ARCHIVE_COLUMN_ID}>
+            {i18n.t("board.column.archive")}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}