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>
This commit is contained in:
Jakob Wennberg
co-authored by
Claude Fable 5
Claude Fable 5
parent
6b506a9ca8
commit
d59e4708cf
@@ -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 } })
|
||||
}
|
||||
Reference in New Issue
Block a user