feat(ui): shared migration primitives (UI migration PR 3) (#1122)

* feat(ui): shared migration primitives (UI migration PR 3)

The component kit every page migration (PR 4-8) builds on:

- ContextPicker: the one-per-page chip-dropdown context scope (convention
  8), right-aligned popover with checks and muted annotations
- FyPicker: fiscal-year picker on ContextPicker with the same controlled
  API and per-company localStorage key as FiscalYearSelector, which it
  replaces page by page from PR 4
- SplitButton: primary + caret menu, last-used mode persisted per user
  via ui_state.create_mode (lib/ui-state/client, unit-tested); nav
  persistence refactored onto the same helper
- ConfirmDialog: centered min-460px confirm-up-front dialog (convention
  10) with pending state on an awaitable onConfirm
- HelpPopover: 17px "?" after the H1 opening an anchored popover
  (convention 7); PageHeader gets a `help` slot
- AttnLine: the one-ochre-sentence attention pattern (convention 6) with
  optional inline action; new AA-safe --attn token pair
- RowStatus: chips-mark-exceptions helper (convention 5)
- SlideOver: right review panel, 480px, 18px inset, rounded, veil + Esc
  (convention 13), with header kicker / body / footer slots
- Stagger: .stagger-enter applied to the five target pages' list
  containers (bookkeeping, transactions, pending, invoices,
  supplier-invoices); structural loading.tsx added for supplier-invoices,
  customers, kpi, pending, deadlines

No page adopts the new pickers/dialogs yet: that is PR 4-8, one page per
PR against this kit.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(ui): FyPicker chip must not double the Rakenskapsar label

Real fiscal periods are often named "Rakenskapsar 2026" already; only
prefix the label when the period name lacks it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

app/(dashboard)/customers/loading.tsx

@@ -0,0 +1,31 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function CustomersLoading() {
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <Skeleton className="h-8 w-32" />
+        <div className="flex gap-2">
+          <Skeleton className="h-9 w-28 rounded-full" />
+          <Skeleton className="h-9 w-28 rounded-full" />
+        </div>
+      </div>
+      <Skeleton className="h-10 w-full" />
+      <div className="rounded-lg border border-border">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div
+            key={i}
+            className="flex items-center justify-between border-b border-border/60 px-4 py-3 last:border-b-0"
+          >
+            <Skeleton className="h-4 w-40" />
+            <div className="flex items-center gap-6">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-32" />
+              <Skeleton className="h-3 w-20" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

app/(dashboard)/deadlines/loading.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function DeadlinesLoading() {
+  return (
+    <div className="space-y-8">
+      <Skeleton className="h-8 w-44" />
+      <div className="space-y-3">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div
+            key={i}
+            className="flex items-start gap-4 rounded-lg border border-border p-4"
+          >
+            <div className="w-12 space-y-1">
+              <Skeleton className="h-6 w-10" />
+              <Skeleton className="h-3 w-12" />
+            </div>
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-56" />
+              <Skeleton className="h-3 w-72" />
+            </div>
+            <Skeleton className="h-5 w-16" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

app/(dashboard)/invoices/page.tsx

@@ -273,7 +273,7 @@ export default function InvoicesPage() {
         </Tabs>
       </div>
 
-      <DataList>
+      <DataList className="stagger-enter">
         {isLoading ? (
           [1, 2, 3].map((i) => (
             <div key={i} className="flex items-center gap-3 px-4 py-3">

app/(dashboard)/kpi/loading.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function KpiLoading() {
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-9 w-44 rounded-full" />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div key={i} className="rounded-lg border border-border p-4">
+            <Skeleton className="mb-3 h-3 w-24" />
+            <Skeleton className="mb-2 h-7 w-32" />
+            <Skeleton className="h-3 w-40" />
+          </div>
+        ))}
+      </div>
+      <div className="rounded-lg border border-border p-6">
+        <Skeleton className="mb-4 h-4 w-40" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    </div>
+  )
+}

app/(dashboard)/pending/loading.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function PendingLoading() {
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-9 w-36 rounded-full" />
+      </div>
+      <div className="rounded-lg border border-border">
+        {[1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className="flex items-center gap-4 border-b border-border/60 px-4 py-4 last:border-b-0"
+          >
+            <Skeleton className="h-7 w-7 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-64" />
+              <Skeleton className="h-3 w-40" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-8 w-24 rounded-full" />
+              <Skeleton className="h-8 w-24 rounded-full" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

app/(dashboard)/pending/page.tsx

@@ -1055,7 +1055,7 @@ export default function PendingOperationsPage() {
         </DropdownMenu>
       </div>
 
-      <DataList>
+      <DataList className="stagger-enter">
         {showBulkControls && bulkEligible.length > 0 && (
           <DataListHeader>
             <div className="flex items-center gap-2">

app/(dashboard)/supplier-invoices/loading.tsx

@@ -0,0 +1,33 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function SupplierInvoicesLoading() {
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-9 w-36 rounded-full" />
+      </div>
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-9 w-72" />
+        <Skeleton className="h-9 flex-1" />
+      </div>
+      <div className="rounded-lg border border-border">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div
+            key={i}
+            className="flex items-center justify-between border-b border-border/60 px-4 py-3 last:border-b-0"
+          >
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-44" />
+              <Skeleton className="h-3 w-28" />
+            </div>
+            <div className="flex items-center gap-4">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-5 w-16" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

app/(dashboard)/supplier-invoices/page.tsx

@@ -215,7 +215,7 @@ export default function SupplierInvoicesPage() {
                     <TableHead>{t('th_status')}</TableHead>
                   </TableRow>
                 </TableHeader>
-                <TableBody>
+                <TableBody className="stagger-enter">
                   {filteredInvoices.map((inv) => (
                     <TableRow key={inv.id}>
                       <TableCell className="tabular-nums">{inv.arrival_number}</TableCell>

app/(dashboard)/transactions/page.tsx

@@ -2220,7 +2220,7 @@ export default function TransactionsPage() {
 
       {/* Content based on mode */}
       {isLoading ? (
-        <DataList>
+        <DataList className="stagger-enter">
           {[1, 2, 3].map((i) => (
             <div key={i} className="flex items-center gap-3 px-4 py-3">
               <Skeleton className="h-5 w-5 rounded" />
@@ -2239,7 +2239,7 @@ export default function TransactionsPage() {
             onCreateTransaction={() => setIsDialogOpen(true)}
           />
         ) : (
-          <DataList>
+          <DataList className="stagger-enter">
             {(sourceFilter !== 'all'
               || (skvUnmatched.length > 0 && uncategorizedTransactions.length > 0)) && (
               <DataListHeader>

app/globals.css

@@ -63,6 +63,10 @@
   --warning: 38 55% 50%;
   --warning-foreground: 0 0% 9%;
 
+  /* Attn: darker ochre for the one-sentence attention line (.attn / AttnLine),
+     derived from --warning but AA-safe as small text on the page background. */
+  --attn: 38 50% 34%;
+
   --warm-accent: 38 45% 52%;
 
   /* Chart colors */
@@ -127,6 +131,8 @@
   --warning: 38 50% 55%;
   --warning-foreground: 38 50% 90%;
 
+  --attn: 38 45% 62%;
+
   --warm-accent: 38 42% 58%;
 
   --chart-1: 155 22% 48%;
@@ -164,6 +170,7 @@
   --color-success-foreground: hsl(var(--success-foreground));
   --color-warning: hsl(var(--warning));
   --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-attn: hsl(var(--attn));
   --color-warm-accent: hsl(var(--warm-accent));
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);