feat(nav): concept sidebar with folds, collapse rail, and user menu (UI migration PR 2) (#1133)

* feat(nav): concept sidebar with folds, collapse rail, and user menu (UI migration PR 2) The concept's navigation, exactly, with all current functionality kept: - Groups restructured per concept: top (Hem, Assistenten), ARBETA (Bokforing, Underlag, Transaktioner, Granskning, Kundfakturor, Leverantorsfakturor, Loner), ANALYS, DATA (Register fold + Importera/exportera), SKATT & BOKSLUT (Moms, Skattekonto, Viktiga datum, Bokslut fold). Entity/capability/dimension gating unchanged. - Register and Bokslut are animated folds (grid-rows 0fr/1fr), children text-indented behind a hairline; closed by default, forced open by an active child route; state persists per user. - Sidebar collapses to a 64px icon rail (toggle top of rail); width is one inline --nav-w CSS variable on #dash-shell that aside and <main> both read, so the panel follows in lockstep. Server-rendered from ui_state so first paint is right. - Sticky bottom user block (avatar, name, active company) opening an upward user menu: identity, company-switcher flyout (search + building glyphs + roles + check, real switch mechanism via shared lib/company/switch-client), Installningar, Medlemmar och roller, Abonnemang, Hjalp, support, terracotta logout. Trial touchpoint kept. - CompanySwitcher removed from desktop top (lives in the user menu now); mobile bottom nav + sheet unchanged. - New migration 20260723120000: user_preferences.ui_state jsonb bag (founder-approved) + POST /api/user/ui-state (requireAuth, strict zod, merge semantics) with route tests. - i18n: fold/collapse/menu keys added sv+en; deadlines -> "Viktiga datum", year_end -> "Arsbokslut" per concept. Discord-community row deferred: no invite URL exists in the repo. Badges stay the current two (Transaktioner, Granskning); an Underlag count is a follow-up with lib/worklist. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(nav): brand-mark sidebar header + auto-hiding scrollbars Concept alignment feedback: the sidebar gets a header row (brand mark left, collapse toggle right) hanging from the same top line as the panel, instead of a lone right-aligned toggle. Scrollbars go overlay-style app-wide: transparent at rest, revealed only while their container scrolls (ScrollbarReveal stamps .is-scrolling via one capture-phase document listener), fading out after 700ms idle. The gutter stays reserved so revealing never shifts layout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(nav): company flyout opens downward + Discord community row The flyout was bottom-anchored to its row and grew upward over the menu; founder feedback: top-align with the row and grow downward. Adds the Discord community row to the user menu (external invite link). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-07-23 21:28:07 +02:00
parent 6b506a9ca8
commit d59e4708cf
15 changed files with 1137 additions and 385 deletions
@@ -38,8 +38,9 @@ const NO_COMPANY_ALLOWED_PATHS = ['/settings/account']
 */
 const MAIN_PANEL_CLASS =
  'safe-area-main-padding md:!pb-0 relative bg-background min-h-screen ' +
-  'md:min-h-0 md:ml-64 md:mt-[10px] md:mr-[10px] md:h-[calc(100vh-20px)] ' +
-  'md:overflow-y-auto md:rounded-xl md:border md:border-border'
+  'md:min-h-0 md:ml-[var(--nav-w)] md:mt-[10px] md:mr-[10px] md:h-[calc(100vh-20px)] ' +
+  'md:overflow-y-auto md:rounded-xl md:border md:border-border ' +
+  'md:transition-[margin-left] md:duration-200'

 export default async function DashboardLayout({
  children,
@@ -146,6 +147,7 @@ export default async function DashboardLayout({
    { data: userProfile },
    entitlements,
    { data: allSettingsNames },
+    { data: userPrefs },
  ] = await Promise.all([
    supabase.from('companies').select('*').eq('id', companyId).single(),
    supabase.from('company_members').select('role').eq('company_id', companyId).eq('user_id', user.id).single(),
@@ -168,6 +170,9 @@ export default async function DashboardLayout({
    // select returns exactly the caller's companies, letting non-active rows
    // show company_settings.company_name instead of the frozen companies.name.
    supabase.from('company_settings').select('company_id, company_name'),
+    // Per-user UI state (nav collapse/fold state): server-rendered so the
+    // sidebar width is right on first paint, no post-hydration jump.
+    supabase.from('user_preferences').select('ui_state').eq('user_id', user.id).maybeSingle(),
  ])

  // company_id -> current display name for every company the user belongs to.
@@ -248,6 +253,12 @@ export default async function DashboardLayout({

  const isSandbox = settings?.is_sandbox === true

+  // Client-driven UI preferences (sidebar collapse + fold state). Read here
+  // so the shell renders at the right width on first paint; the nav toggles
+  // flip the data attribute client-side and persist via /api/user/ui-state.
+  const uiState = (userPrefs?.ui_state ?? {}) as import('@/types').UserUiState
+  const navCollapsed = uiState.nav_collapsed === true
+
  const companyContextValue = {
    company: companyWithName,
    role: memberRow.role as CompanyRole,
@@ -278,7 +289,11 @@ export default async function DashboardLayout({
        }}
      >
        <CompanyTabSync />
-        <div className="min-h-screen bg-frame md:flex md:flex-col">
+        <div
+          id="dash-shell"
+          className="min-h-screen bg-frame md:flex md:flex-col"
+          style={{ '--nav-w': navCollapsed ? '64px' : '248px' } as React.CSSProperties}
+        >
          {/* Skip to content link for keyboard/screen reader users */}
          <a
            href="#main-content"
@@ -296,6 +311,7 @@ export default async function DashboardLayout({
            extensionNavItems={getExtensionNavItems()}
            userName={userProfile?.full_name ?? null}
            userEmail={user.email ?? null}
+            initialUiState={uiState}
          />
          <main id="main-content" className={MAIN_PANEL_CLASS} role="main">
            <MainContainer companyId={companyId}>{children}</MainContainer>
@@ -0,0 +1,88 @@
+/**
+ * Tests for POST /api/user/ui-state: the per-user UI preference bag
+ * (nav collapse/fold state, split-button create modes).
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { NextResponse } from 'next/server'
+import { createQueuedMockSupabase, createMockRequest, parseJsonResponse } from '@/tests/helpers'
+
+const { supabase, enqueue, reset } = createQueuedMockSupabase()
+
+const requireAuthMock = vi.fn()
+vi.mock('@/lib/auth/require-auth', () => ({
+  requireAuth: (...args: unknown[]) => requireAuthMock(...args),
+}))
+
+import { POST } from '../route'
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  reset()
+  requireAuthMock.mockResolvedValue({ user: { id: 'user-1' }, supabase, error: null })
+})
+
+function request(body: unknown) {
+  return createMockRequest('/api/user/ui-state', { method: 'POST', body })
+}
+
+describe('POST /api/user/ui-state', () => {
+  it('returns 401 when not authenticated', async () => {
+    requireAuthMock.mockResolvedValue({
+      user: null,
+      supabase,
+      error: NextResponse.json({ error: 'Unauthorized' }, { status: 401 }),
+    })
+
+    const res = await POST(request({ nav_collapsed: true }))
+    expect(res.status).toBe(401)
+  })
+
+  it('returns 400 on unknown keys (strict schema)', async () => {
+    const res = await POST(request({ nav_collapsed: true, evil: 'x' }))
+    expect(res.status).toBe(400)
+  })
+
+  it('returns 400 on wrong value types', async () => {
+    const res = await POST(request({ nav_collapsed: 'yes' }))
+    expect(res.status).toBe(400)
+  })
+
+  it('merges the patch into the existing ui_state', async () => {
+    // select existing row
+    enqueue({
+      data: { ui_state: { nav_collapsed: false, nav_folds: { register: true } } },
+    })
+    // upsert result
+    enqueue({ data: null })
+
+    const { status, body } = await parseJsonResponse<{
+      data: { ui_state: { nav_collapsed: boolean; nav_folds: Record<string, boolean> } }
+    }>(await POST(request({ nav_folds: { bokslut: true } })))
+
+    expect(status).toBe(200)
+    expect(body.data.ui_state).toEqual({
+      nav_collapsed: false,
+      nav_folds: { register: true, bokslut: true },
+    })
+  })
+
+  it('handles a missing preferences row (first write)', async () => {
+    enqueue({ data: null }) // no existing row
+    enqueue({ data: null }) // upsert
+
+    const { status, body } = await parseJsonResponse<{
+      data: { ui_state: { nav_collapsed: boolean } }
+    }>(await POST(request({ nav_collapsed: true })))
+
+    expect(status).toBe(200)
+    expect(body.data.ui_state).toEqual({ nav_collapsed: true })
+  })
+
+  it('returns 500 when the upsert fails', async () => {
+    enqueue({ data: null })
+    enqueue({ data: null, error: { message: 'boom' } })
+
+    const res = await POST(request({ nav_collapsed: true }))
+    expect(res.status).toBe(500)
+  })
+})
@@ -0,0 +1,71 @@
+import { NextResponse } from 'next/server'
+import { z } from 'zod'
+import { requireAuth } from '@/lib/auth/require-auth'
+import type { UserUiState } from '@/types'
+
+// Partial update: the client sends only the keys it changed. Strict schemas
+// so typos fail loudly instead of accumulating junk in the jsonb bag.
+const BodySchema = z
+  .object({
+    nav_collapsed: z.boolean().optional(),
+    nav_folds: z
+      .object({
+        register: z.boolean().optional(),
+        bokslut: z.boolean().optional(),
+      })
+      .strict()
+      .optional(),
+    create_mode: z.record(z.string(), z.string().max(64)).optional(),
+  })
+  .strict()
+
+// User-scoped preference endpoint: no company context exists or is needed,
+// so requireAuth() directly (same opt-out as /api/user/locale). RLS scopes
+// user_preferences to the caller's own row.
+export async function POST(request: Request) {
+  const { user, supabase, error } = await requireAuth()
+  if (error) return error
+
+  let body: unknown
+  try {
+    body = await request.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
+  }
+
+  const parsed = BodySchema.safeParse(body)
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Invalid ui_state payload' }, { status: 400 })
+  }
+
+  // Read-merge-write: last write wins per key. Fine for cosmetic UI state;
+  // concurrent tabs converge on the next read.
+  const { data: existing } = await supabase
+    .from('user_preferences')
+    .select('ui_state')
+    .eq('user_id', user.id)
+    .maybeSingle()
+
+  const current: UserUiState = (existing?.ui_state as UserUiState) ?? {}
+  const patch = parsed.data
+  const next: UserUiState = {
+    ...current,
+    ...patch,
+    ...(patch.nav_folds
+      ? { nav_folds: { ...current.nav_folds, ...patch.nav_folds } }
+      : {}),
+    ...(patch.create_mode
+      ? { create_mode: { ...current.create_mode, ...patch.create_mode } }
+      : {}),
+  }
+
+  const { error: upsertError } = await supabase
+    .from('user_preferences')
+    .upsert({ user_id: user.id, ui_state: next }, { onConflict: 'user_id' })
+
+  if (upsertError) {
+    return NextResponse.json({ error: 'Could not save UI preferences' }, { status: 500 })
+  }
+
+  return NextResponse.json({ data: { ui_state: next } })
+}
@@ -11,6 +11,14 @@

 :root {
  color-scheme: light;
+
+  /* Sidebar column width (frame layout). Default for shells that don't
+     override it; the dashboard shell (#dash-shell) sets it inline from
+     user_preferences.ui_state (248px expanded / 64px collapsed rail) and
+     the nav toggle updates it client-side. aside and <main> both read the
+     variable so they stay in lockstep. */
+  --nav-w: 248px;
+
  /* Grayscale Chrome Palette: paper white + warm beige */

  --background: 0 0% 100%;
@@ -169,6 +177,7 @@
  border-color: hsl(var(--border));
 }

+
 body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
@@ -322,7 +331,11 @@ h1, h2, h3 {
              0 0 0 4px hsl(var(--primary) / 0.35);
 }

-/* Custom scrollbar - minimal */
+/* Overlay-style scrollbars: invisible at rest, revealed only while the
+   container is actually scrolling. ScrollbarReveal (mounted in the root
+   layout) toggles .is-scrolling on the scrolled element; the thumb fades
+   back out when scrolling stops. The gutter is reserved either way, so
+   revealing never shifts layout. */
 ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
@@ -333,12 +346,23 @@ h1, h2, h3 {
 }

 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / 0.2);
+  background: transparent;
  border-radius: 3px;
 }

-::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / 0.3);
+.is-scrolling::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.25);
+}
+
+@supports (scrollbar-color: auto) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 300ms ease-out;
+  }
+  .is-scrolling {
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
 }

 /* Hide scrollbar utility */
@@ -11,6 +11,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { SWRProvider } from "@/components/providers/SWRProvider";
 import { RecaptLoader } from "@/components/RecaptLoader";
 import { RecaptHideWidget } from "@/components/RecaptHideWidget";
+import { ScrollbarReveal } from "@/components/ScrollbarReveal";
 import { ensureInitialized } from "@/lib/init";
 import { getBranding } from "@/lib/branding/service";
 import "./globals.css";
@@ -92,6 +93,7 @@ export default async function RootLayout({
              <Toaster />
              <DeployReloadPrompt />
              <RecaptHideWidget />
+              <ScrollbarReveal />
            </SWRProvider>
          </ThemeProvider>
        </NextIntlClientProvider>