From 5fd7e41492fd0150a00710e43e55e5251df4cb58 Mon Sep 17 00:00:00 2001 From: Marcel Date: Mon, 30 Mar 2026 14:33:23 +0200 Subject: [PATCH] fix(korrespondenz): dark theme, compact strip labels, year divider size, chevron alignment - Add compact prop to PersonTypeahead: 7px uppercase label, 30px h input (matches spec FL/FI) - Replace all hardcoded hex in 6 korrespondenz components with theme tokens (bg-surface, bg-muted, bg-canvas, border-line, text-ink, text-primary, text-accent, etc.) - Fix year divider: text-[15px] font-black (spec: 15px/900) - Fix log row chevron: items-center instead of items-start for vertical centering - Fix recent-persons persistence: move persistRecentPerson to post-navigation $effect so senderName is resolved from server before stored in localStorage - Add metadataComplete field to makeDoc() fixture to satisfy updated Document type - Restore opacity-0 on swap button when only one person is set (matches spec + test) Co-Authored-By: Claude Sonnet 4.6 --- .../src/lib/components/PersonTypeahead.svelte | 14 +++++- .../src/routes/korrespondenz/+page.svelte | 8 ++-- .../korrespondenz/ConversationTimeline.svelte | 46 +++++++++---------- .../CorrespondentSuggestionsDropdown.svelte | 13 +++--- .../CorrespondenzEmptyState.svelte | 22 ++++----- .../CorrespondenzFilterControls.svelte | 40 +++++++--------- .../CorrespondenzPersonBar.svelte | 9 ++-- .../routes/korrespondenz/page.svelte.spec.ts | 1 + 8 files changed, 80 insertions(+), 73 deletions(-) diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte index dfd4051f..befe47d6 100644 --- a/frontend/src/lib/components/PersonTypeahead.svelte +++ b/frontend/src/lib/components/PersonTypeahead.svelte @@ -11,6 +11,7 @@ interface Props { initialName?: string; suggestedName?: string; placeholder?: string; + compact?: boolean; restrictToCorrespondentsOf?: string; onchange?: (value: string) => void; onfocused?: () => void; @@ -23,6 +24,7 @@ let { initialName = '', suggestedName = '', placeholder, + compact = false, restrictToCorrespondentsOf, onchange, onfocused @@ -125,7 +127,13 @@ function clickOutside(node: HTMLElement) {
- + @@ -137,7 +145,9 @@ function clickOutside(node: HTMLElement) { oninput={handleInput} onfocus={handleFocus} placeholder={placeholder ?? m.comp_typeahead_placeholder()} - class="mt-1 block w-full rounded-md border border-line p-2 shadow-sm focus:border-accent focus:ring-accent" + class={compact + ? 'block h-[30px] w-full rounded-[3px] border-[1.5px] border-line bg-surface px-[7px] text-[9px] text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none' + : 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'} /> {#if showDropdown && (results.length > 0 || loading)} diff --git a/frontend/src/routes/korrespondenz/+page.svelte b/frontend/src/routes/korrespondenz/+page.svelte index 3b06de06..70142ed5 100644 --- a/frontend/src/routes/korrespondenz/+page.svelte +++ b/frontend/src/routes/korrespondenz/+page.svelte @@ -21,7 +21,7 @@ let sortDir = $state(untrack(() => data.filters.dir)); let senderName = $state(untrack(() => data.initialValues.senderName)); let receiverName = $state(untrack(() => data.initialValues.receiverName)); -// Sync with server data after navigation +// Sync with server data after navigation; persist recent persons once the name is resolved $effect(() => { senderId = data.filters.senderId; receiverId = data.filters.receiverId; @@ -30,6 +30,9 @@ $effect(() => { sortDir = data.filters.dir; senderName = data.initialValues.senderName; receiverName = data.initialValues.receiverName; + if (data.filters.senderId && data.initialValues.senderName) { + persistRecentPerson(data.filters.senderId, data.initialValues.senderName); + } }); const isSinglePerson = $derived(!!senderId && !receiverId); @@ -51,9 +54,6 @@ function persistRecentPerson(id: string, name: string) { } function applyFilters() { - // Persist to recent persons when a person is selected - if (senderId && senderName) persistRecentPerson(senderId, senderName); - const params = new SvelteURLSearchParams(); if (senderId) params.set('senderId', senderId); if (receiverId) params.set('receiverId', receiverId); diff --git a/frontend/src/routes/korrespondenz/ConversationTimeline.svelte b/frontend/src/routes/korrespondenz/ConversationTimeline.svelte index cf52312f..cddbfcf0 100644 --- a/frontend/src/routes/korrespondenz/ConversationTimeline.svelte +++ b/frontend/src/routes/korrespondenz/ConversationTimeline.svelte @@ -80,30 +80,30 @@ const newDocUrl = $derived( {#if isBilateral && documents.length > 0}