feat(salary): concept Löner landing + nav collapse animation (UI migration PR 9) (#1130)

* feat(salary): concept scene 22 landing + smoother nav collapse

Loner gets the concept header (quiet Anstallda link + Starta lonekorning
primary), the hero de-cards to a flat serif line + description + pill,
and the runs list becomes the scene 22 dry-table (Period, Status,
Anstallda, Bruttolon, Netto) where booked runs read as muted text and
in-flight runs carry a chip plus the payout date. Attention cards and the
hero state machine survive unchanged.

Nav polish: the collapse now animates as one movement (300ms decelerating
curve on both the aside width and the panel margin) and the rail/full
contents slide+fade in on swap; the Register/Bokslut folds match the
RowFoldout timing.

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

* refactor(salary): strip hero and attention cards from the landing

Founder direction: the Loner landing is header + lonekorningar only
(concept scene 22). The open run's table row is the entry point; AGI,
skatt, blockers and semester surfaces live on the run detail and the
employee register. Drops the hero state machine, the four cards, and all
their data plumbing (deadlines query, tax-payment chain, SKV status,
AGI submission hook).

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

* fix(salary): drop the Lonekorningar eyebrow

Founder feedback: the uppercase eyebrow read as a stray font above the
table, and with the landing reduced to the runs table alone the label is
redundant under the Loner page title.

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

* fix(salary): populate the Anstallda column via a count embed

The runs list selected bare salary_runs rows, so the landing's Anstallda
column was always empty (the employees array only ever existed on the
detail response). The list now embeds employee_count via
salary_run_employees(count) and the page reads the PostgREST count shape.

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

* fix(salary): quiet beige chip for in-flight run states

Founder feedback vs the concept: the Granskning chip rendered as the
bordered ochre warning badge and read noisy next to the concept's quiet
Utkast chip. Draft/review/approved now all wear the beige secondary chip;
the payout-date note carries the urgency.

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

---------

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

components/dashboard/DashboardNav.tsx

@@ -622,7 +622,7 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa
           />
         </button>
         <div
-          className="grid transition-[grid-template-rows] duration-200 ease-out"
+          className="grid transition-[grid-template-rows] duration-300 ease-out"
           style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
         >
           <div className="overflow-hidden">
@@ -677,7 +677,9 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa
   return (
     <>
       {/* Desktop sidebar */}
-      <aside className="hidden md:fixed md:inset-y-0 md:z-10 md:flex md:w-[var(--nav-w)] md:flex-col md:transition-[width] md:duration-200">
+      {/* Width, and the panel margin beside it, share the same 300ms
+          decelerating curve so collapse reads as one movement. */}
+      <aside className="hidden md:fixed md:inset-y-0 md:z-10 md:flex md:w-[var(--nav-w)] md:flex-col md:transition-[width] md:duration-300 md:ease-[cubic-bezier(0.32,0.72,0,1)]">
         {/* Borderless on the frame: the panel next to it carries the border */}
         <div className="flex min-h-0 flex-1 flex-col bg-transparent">
           {/* Sidebar header: brand mark left, collapse toggle right. The
@@ -722,8 +724,10 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa
               below stays sticky (concept PR 2). */}
           <div className="flex-1 min-h-0 overflow-y-auto pt-1 pb-2">
             {collapsed ? (
+              /* The rail/full swap remounts, so each side slides+fades in
+                 while the aside width animates: one smooth movement. */
               <nav
-                className="flex flex-col items-center gap-px px-2"
+                className="flex flex-col items-center gap-px px-2 animate-in fade-in slide-in-from-right-2 duration-200"
                 aria-label={tNav('main_navigation')}
               >
                 {railItems.map((item) => renderRailItem(item))}
@@ -754,7 +758,10 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa
                 })}
               </nav>
             ) : (
-            <nav className="px-3" aria-label={tNav('main_navigation')}>
+            <nav
+              className="px-3 animate-in fade-in slide-in-from-left-2 duration-200"
+              aria-label={tNav('main_navigation')}
+            >
               {/* Top section: flat, no header. Hem, Assistent. */}
               <div className="mb-4 space-y-px">
                 {topItems.map((item) => renderSidebarItem(item))}