@agent-native/core 0.124.0 → 0.124.1

package/corpus/templates/crm/app/components/crm/board/CrmBoard.tsx

@@ -9,12 +9,11 @@
  */
 
 import { callAction, useActionQuery } from "@agent-native/core/client/hooks";
-import { useT } from "@agent-native/core/client/i18n";
+import { useFormatters, useT } from "@agent-native/core/client/i18n";
 import {
   IconAlertTriangle,
   IconClock,
   IconClockExclamation,
-  IconGripVertical,
 } from "@tabler/icons-react";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
@@ -32,9 +31,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
 
+import type { CrmAttributeType } from "../../../../shared/crm-attributes";
 import { ProvenanceMarker } from "../grid/GridCell";
 import type { CrmCellProvenance } from "../grid/model";
+import { AttributeTypeIcon } from "../record/attribute-row";
 import {
   currencyCodeOf,
   formatAttributeValue,
@@ -46,6 +48,7 @@ import {
   AttributeOptionChip,
   AttributeRating,
 } from "../shared/AttributeValueParts";
+import { MOTION, overlayProps } from "../shared/ui-tokens";
 import {
   BOARD_UNGROUPED,
   boardCardSla,
@@ -127,6 +130,32 @@ interface RecordsResponse {
 
 const PAGE_LIMIT = 100;
 
+/**
+ * Time in stage, compactly: "3d", "14d", "+5d". `Intl` owns the unit, so a
+ * locale that does not abbreviate days still reads correctly (ar-SA renders
+ * "١٤ ي") without a per-locale string of our own. The long sentence stays as
+ * the row's `title`.
+ */
+const DAY_UNIT: Intl.NumberFormatOptions = {
+  style: "unit",
+  unit: "day",
+  unitDisplay: "narrow",
+};
+
+/**
+ * Drop confirmation: the accent tint lands instantly on the card that just
+ * committed, then eases back to rest. Board-local rather than a shared motion
+ * token — nothing else in the app confirms a drop, and 900ms is far outside
+ * the interaction scale the other surfaces share.
+ *
+ * It REPLACES the resting `bg-card` rather than being layered on top of it.
+ * Two `bg-*` utilities on one element are decided by their order in the
+ * generated stylesheet, not by the order they are written, and the theme
+ * colour wins — so a flash appended to the class list silently paints nothing.
+ */
+const CARD_REST_CLASS = "bg-card";
+const DROP_FLASH_CLASS = "bg-[hsl(var(--crm-accent)/0.12)] transition-none";
+
 export interface CrmBoardTarget {
   kind: "list" | "object";
   /** The list id for a list target, the object type for an object target. */
@@ -502,6 +531,16 @@ export function CrmBoard(props: CrmBoardProps) {
   const now = useMemo(() => new Date(), [cards]);
   const overruns = useMemo(() => boardOverruns(columns, now), [columns, now]);
 
+  // The confirmed card's id, held only long enough for the tint to land. It is
+  // set after the commit resolves, never on the optimistic paint: the flash
+  // means "this move is saved", so a move that later rolls back never flashes.
+  const [flashCardId, setFlashCardId] = useState<string | null>(null);
+  useEffect(() => {
+    if (!flashCardId) return;
+    const timer = setTimeout(() => setFlashCardId(null), MOTION.fast);
+    return () => clearTimeout(timer);
+  }, [flashCardId]);
+
   async function move(cardId: string, toValue: string) {
     const result = await moveBoardCard({
       cards,
@@ -519,7 +558,10 @@ export function CrmBoard(props: CrmBoardProps) {
       );
       return;
     }
-    if (result.moved) data.refetch();
+    if (result.moved) {
+      setFlashCardId(cardId);
+      data.refetch();
+    }
   }
 
   if (data.error) {
@@ -542,7 +584,7 @@ export function CrmBoard(props: CrmBoardProps) {
   return (
     <div className="flex min-h-0 flex-col">
       <div className="flex flex-wrap items-center gap-2 px-5 pt-4 sm:px-7">
-        <span className="text-xs text-muted-foreground">
+        <span className="text-xs text-content-tertiary">
           {t("board.groupedBy", { attribute: data.groupAttribute.label })}
         </span>
         {overruns.length ? (
@@ -555,7 +597,7 @@ export function CrmBoard(props: CrmBoardProps) {
           </Badge>
         ) : null}
         {data.complete ? null : (
-          <span className="text-xs text-muted-foreground">
+          <span className="text-xs text-content-tertiary">
             {t("board.partialPage", { limit: PAGE_LIMIT })}
           </span>
         )}
@@ -563,12 +605,13 @@ export function CrmBoard(props: CrmBoardProps) {
       {props.mode === "table" ? (
         <BoardTable columns={columns} now={now} />
       ) : (
-        <div className="flex gap-3 overflow-x-auto p-5 sm:p-7">
+        <div className="flex gap-4 overflow-x-auto p-5 sm:p-7">
           {columns.map((column, index) => (
             <BoardColumnView
               key={column.key}
               column={column}
               now={now}
+              flashCardId={flashCardId}
               onDropCard={(cardId) => void move(cardId, column.key)}
               onMoveCard={(cardId, offset) => {
                 const next = columns[index + offset];
@@ -591,9 +634,9 @@ function BoardNotice({
 }) {
   const t = useT();
   return (
-    <div className="m-5 flex flex-wrap items-center gap-3 rounded-lg border border-border/70 bg-card p-4 sm:m-7">
-      <IconAlertTriangle className="size-4 text-muted-foreground" />
-      <p className="text-sm text-muted-foreground">{message}</p>
+    <div className="m-5 flex flex-wrap items-center gap-3 rounded-card border border-hairline bg-card p-4 sm:m-7">
+      <IconAlertTriangle className="size-4 text-content-tertiary" />
+      <p className="text-sm text-content-secondary">{message}</p>
       {onRetry ? (
         <Button size="sm" variant="outline" onClick={onRetry}>
           {t("board.retry")}
@@ -603,14 +646,23 @@ function BoardNotice({
   );
 }
 
+/**
+ * A column is 300px of nothing: no trough, no border, the page background. The
+ * cards carry the only boundary on the board, which is what keeps a wide
+ * pipeline from reading as a row of grey boxes. Its one visual state is
+ * drag-over, and that rides the shared overlay so it cross-fades rather than
+ * swapping a background.
+ */
 function BoardColumnView({
   column,
   now,
+  flashCardId,
   onDropCard,
   onMoveCard,
 }: {
   column: BoardColumn;
   now: Date;
+  flashCardId: string | null;
   onDropCard: (cardId: string) => void;
   onMoveCard: (cardId: string, offset: -1 | 1) => void;
 }) {
@@ -620,14 +672,22 @@ function BoardColumnView({
 
   return (
     <section
-      className={`flex w-72 shrink-0 flex-col rounded-lg border bg-muted/30 ${
-        isOver ? "border-primary/60 bg-primary/5" : "border-border/70"
-      }`}
+      {...overlayProps({
+        selected: isOver,
+        className: "flex w-75 shrink-0 flex-col rounded-column",
+      })}
       onDragOver={(event) => {
         event.preventDefault();
         setIsOver(true);
       }}
-      onDragLeave={() => setIsOver(false)}
+      onDragLeave={(event) => {
+        // dragleave also fires crossing into a child, which would strobe the
+        // drop tint over every card the cursor passes.
+        if (event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          return;
+        }
+        setIsOver(false);
+      }}
       onDrop={(event) => {
         event.preventDefault();
         setIsOver(false);
@@ -635,27 +695,22 @@ function BoardColumnView({
         if (cardId) onDropCard(cardId);
       }}
     >
-      <header className="flex flex-col gap-1 border-b border-border/60 px-3 py-2.5">
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex min-w-0 items-center gap-2">
-            {column.option?.color ? (
-              <span
-                aria-hidden
-                className="size-2 shrink-0 rounded-full"
-                style={{ backgroundColor: column.option.color }}
-              />
-            ) : null}
-            <p className="truncate text-sm font-medium">
-              {columnTitle(column, t)}
-            </p>
-          </div>
-          <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
-            {totals.count}
-          </span>
-        </div>
-        <ColumnTotals totals={totals} />
+      {/* Dot, name, count read as one cluster. Pushing the count to the column's
+          far edge turns an invisible column into an implied box the whole point
+          of dropping the trough was to remove. */}
+      <header className="flex h-9 shrink-0 items-center gap-2">
+        <StageDot color={column.option?.color} />
+        <p className="min-w-0 truncate text-sm font-semibold">
+          {columnTitle(column, t)}
+        </p>
+        <span className="shrink-0 rounded-badge bg-muted px-1.5 py-0.5 text-xs tabular-nums text-content-secondary">
+          {totals.count}
+        </span>
       </header>
-      <div className="flex min-h-24 flex-col gap-2 p-2">
+      <ColumnTotals totals={totals} />
+      {/* The 8px fade is exactly the list's own top padding, so it is invisible
+          at rest and only bites once a card scrolls under the header. */}
+      <div className="flex max-h-[70svh] min-h-24 flex-col gap-2 overflow-y-auto pt-2 [mask-image:linear-gradient(to_bottom,transparent,black_8px)]">
         {column.cards.map((card) => (
           <BoardCardView
             key={card.id}
@@ -663,11 +718,12 @@ function BoardColumnView({
             option={column.option}
             columnLabel={columnTitle(column, t)}
             now={now}
+            flash={card.id === flashCardId}
             onMove={(offset) => onMoveCard(card.id, offset)}
           />
         ))}
         {column.cards.length ? null : (
-          <p className="px-1 py-3 text-xs text-muted-foreground">
+          <p className="py-3 text-xs text-content-tertiary">
             {t("board.columnEmpty")}
           </p>
         )}
@@ -676,6 +732,20 @@ function BoardColumnView({
   );
 }
 
+/** The stage's own colour, and the board's only decorative motion. */
+function StageDot({ color }: { color?: string | undefined }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "size-2.5 shrink-0 rounded-full transition-transform hover:scale-120",
+        color ? null : "ring-1 ring-inset ring-hairline",
+      )}
+      {...(color ? { style: { backgroundColor: color } } : {})}
+    />
+  );
+}
+
 function ColumnTotals({
   totals,
 }: {
@@ -684,14 +754,16 @@ function ColumnTotals({
   const t = useT();
   if (totals.mixedCurrency) {
     return (
-      <p className="text-xs text-muted-foreground">
+      <p className="text-xs text-content-tertiary">
         {t("board.mixedCurrency")}
       </p>
     );
   }
+  // No summable amount means no total line at all. A "0" here would read as a
+  // real, empty pipeline stage.
   if (totals.sum === null) return null;
   return (
-    <p className="flex flex-wrap items-baseline gap-x-1.5 text-xs text-muted-foreground">
+    <p className="flex flex-wrap items-baseline gap-x-1.5 text-xs text-content-tertiary">
       <span className="font-medium tabular-nums text-foreground">
         {formatMoney(totals.sum, totals.currencyCode)}
       </span>
@@ -707,21 +779,31 @@ function BoardCardView({
   option,
   columnLabel,
   now,
+  flash,
   onMove,
 }: {
   card: BoardCard;
   option: BoardOption | null;
   columnLabel: string;
   now: Date;
+  flash: boolean;
   onMove: (offset: -1 | 1) => void;
 }) {
   const t = useT();
+  const [dragging, setDragging] = useState(false);
   const sla = boardCardSla(card, option, now);
   const shown = card.attributes.flatMap((attribute) => {
     const node = cardAttributeNode(attribute, t);
     return node === null
       ? []
-      : [{ slug: attribute.slug, label: attribute.label, node }];
+      : [
+          {
+            slug: attribute.slug,
+            label: attribute.label,
+            attributeType: attribute.attributeType,
+            node,
+          },
+        ];
   });
   // The record/entry has no per-field provenance at this data layer, only who
   // created it — so this is coarser than the grid's per-cell marker, but the
@@ -741,7 +823,9 @@ function BoardCardView({
       onDragStart={(event) => {
         event.dataTransfer.setData("text/plain", card.id);
         event.dataTransfer.effectAllowed = "move";
+        setDragging(true);
       }}
+      onDragEnd={() => setDragging(false)}
       onKeyDown={(event) => {
         // Keyboard parity with the drag: a card can be moved without a mouse.
         if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
@@ -749,7 +833,13 @@ function BoardCardView({
           onMove(event.key === "ArrowLeft" ? -1 : 1);
         }
       }}
-      className="group relative cursor-grab rounded-md border border-border/70 bg-card p-2.5 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing"
+      {...overlayProps({
+        className: cn(
+          "group flex cursor-grab flex-col gap-1.5 rounded-lg border border-hairline p-3 outline-none transition-[background-color] duration-[900ms] ease-drop focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing",
+          dragging && "shadow-e2",
+          flash ? DROP_FLASH_CLASS : CARD_REST_CLASS,
+        ),
+      })}
     >
       {/* A zero-size anchor: `ProvenanceMarker`'s own wedge is absolutely
           positioned at its containing block's bottom-right corner, so this is
@@ -758,52 +848,71 @@ function BoardCardView({
       <span className="absolute right-1.5 top-1.5 size-0">
         <ProvenanceMarker provenance={provenance} attributeLabel={card.title} />
       </span>
-      <div className="flex items-start gap-1.5">
-        <IconGripVertical className="mt-0.5 size-3.5 shrink-0 text-muted-foreground/50" />
-        <div className="min-w-0 flex-1">
-          <Link
-            to={`/records/${encodeURIComponent(card.recordId)}`}
-            className="block truncate text-sm font-medium hover:underline"
-          >
-            {card.title}
-          </Link>
-          {card.subtitle ? (
-            <p className="truncate text-xs text-muted-foreground">
-              {card.subtitle}
-            </p>
-          ) : null}
+      {/* 16px avatar + 8px gap and the 20px type-icon box + 4px gap below both
+          come to a 24px gutter, so the title, the subtitle and every value
+          share one left edge. */}
+      <div className="flex items-center gap-2">
+        <span
+          aria-hidden
+          className="grid size-4 shrink-0 place-items-center rounded-full bg-muted text-[10px] font-medium text-content-secondary ring-1 ring-inset ring-hairline"
+        >
+          {initials(card.title).slice(0, 1)}
+        </span>
+        <Link
+          to={`/records/${encodeURIComponent(card.recordId)}`}
+          className="min-w-0 flex-1 truncate text-sm font-medium underline decoration-content-ghost underline-offset-2 hover:decoration-current"
+        >
+          {card.title}
+        </Link>
+      </div>
+      {card.subtitle ? (
+        <p className="flex items-center gap-1 text-xs text-content-tertiary">
+          <span aria-hidden className="size-5 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">{card.subtitle}</span>
+        </p>
+      ) : null}
+      {/* One row per value, each led by its attribute type's glyph in a fixed
+          gutter. The glyph is what carries the label, so the name itself is
+          only announced, not printed — a 300px card has no room for both. */}
+      {card.amount !== null || shown.length ? (
+        <dl className="flex flex-col gap-1.5">
           {card.amount !== null ? (
-            <p className="mt-0.5 text-xs font-medium tabular-nums text-foreground">
-              {formatMoney(card.amount, card.currencyCode)}
-            </p>
+            <div className="flex items-center gap-1">
+              <AttributeTypeIcon type="currency" />
+              <dt className="sr-only">{t("board.table.amount")}</dt>
+              <dd className="min-w-0 flex-1 truncate text-sm font-medium tabular-nums">
+                {formatMoney(card.amount, card.currencyCode)}
+              </dd>
+            </div>
           ) : null}
-        </div>
-      </div>
-      {shown.length ? (
-        <dl className="mt-2 grid gap-1">
           {shown.map((attribute) => (
-            <div key={attribute.slug} className="flex items-baseline gap-2">
-              <dt className="w-20 shrink-0 truncate text-[11px] uppercase tracking-wide text-muted-foreground">
-                {attribute.label}
-              </dt>
-              <dd className="min-w-0 flex-1 truncate text-xs">
+            <div
+              key={attribute.slug}
+              className="flex items-center gap-1"
+              title={attribute.label}
+            >
+              <AttributeTypeIcon
+                type={attribute.attributeType as CrmAttributeType}
+              />
+              <dt className="sr-only">{attribute.label}</dt>
+              <dd className="min-w-0 flex-1 truncate text-sm">
                 {attribute.node}
               </dd>
             </div>
           ))}
         </dl>
       ) : null}
-      <footer className="mt-2 flex items-center justify-between gap-2">
+      <footer className="flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-1.5">
           {card.owner ? (
             <>
               <span
                 aria-hidden
-                className="grid size-5 shrink-0 place-items-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground"
+                className="grid size-5 shrink-0 place-items-center rounded-full bg-muted text-[10px] font-medium text-content-secondary ring-1 ring-inset ring-hairline"
               >
                 {initials(card.owner)}
               </span>
-              <span className="truncate text-xs text-muted-foreground">
+              <span className="truncate text-xs text-content-secondary">
                 {card.owner}
               </span>
             </>
@@ -854,30 +963,36 @@ function cardAttributeNode(
   return text || null;
 }
 
+/**
+ * Time in stage, in the card footer's right slot. The compact form is what
+ * fits; the full sentence stays reachable as the title, so "14d" never has to
+ * carry the whole meaning on its own.
+ */
 function SlaBadge({ sla }: { sla: ReturnType<typeof boardCardSla> }) {
   const t = useT();
+  const { formatNumber } = useFormatters();
   if (sla.status === "not-tracked") return null;
   if (sla.status === "unknown") {
     return (
-      <span
-        className="text-muted-foreground/60"
-        title={t(`board.sla.${sla.reason}`)}
-      >
+      <span className="text-content-ghost" title={t(`board.sla.${sla.reason}`)}>
         <IconClock className="size-3.5" />
       </span>
     );
   }
   if (sla.status === "within") {
     return (
-      <span className="flex items-center gap-1 text-xs tabular-nums text-muted-foreground">
+      <span
+        className="flex shrink-0 items-center gap-1 text-xs tabular-nums text-content-tertiary"
+        title={t("board.daysInStage", { days: sla.days })}
+      >
         <IconClock className="size-3.5" />
-        {t("board.daysInStage", { days: sla.days })}
+        {formatNumber(sla.days, DAY_UNIT)}
       </span>
     );
   }
   return (
     <span
-      className="flex items-center gap-1 text-xs font-medium tabular-nums text-amber-700 dark:text-amber-400"
+      className="flex shrink-0 items-center gap-1 text-xs font-medium tabular-nums text-amber-700 dark:text-amber-400"
       title={t("board.overrunDetail", {
         days: sla.days,
         overBy: sla.overBy,
@@ -885,7 +1000,7 @@ function SlaBadge({ sla }: { sla: ReturnType<typeof boardCardSla> }) {
       })}
     >
       <IconClockExclamation className="size-3.5" />
-      {t("board.overBy", { overBy: sla.overBy })}
+      {formatNumber(sla.overBy, { ...DAY_UNIT, signDisplay: "always" })}
     </span>
   );
 }