marcel/familienarchiv
1
0
Fork 0
Code Issues 108 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): unify Briefwechsel search bar with document search card style
Some checks failed
CI / Unit & Component Tests (push) Failing after 1m26s
Details
CI / Backend Unit Tests (push) Failing after 2m25s
Details
CI / Unit & Component Tests (pull_request) Failing after 1m15s
Details
CI / Backend Unit Tests (pull_request) Failing after 2m20s
Details

Browse Source 
Wrap person bar + filter controls in a card matching the document
search page (rounded-sm border p-6 shadow-sm). Switch PersonTypeahead
to default mode with matching label/input overrides. Bump date inputs
and sort button to text-sm py-2.5. Filter row uses border-t separator
like the document search advanced section.

Refs: #179

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-06 22:20:32 +02:00
parent 93be64878e
commit c4715f1637
4 changed files with 49 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
View File

@@ -53,18 +53,16 @@ function handleSuggestionSelect(id: string) {
}
</script>
<div
data-testid="conv-person-bar"
class="flex items-end gap-[9px] border-b border-line bg-surface px-3 py-[9px] [&_input]:h-12"
>
<div data-testid="conv-person-bar" class="flex items-end gap-4">
<!-- Person A -->
<div class="min-w-0 flex-1">
<div
class="min-w-0 flex-1 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="senderId"
label="Person"
bind:value={senderId}
initialName={initialSenderName}
compact={true}
restrictToCorrespondentsOf={receiverId || undefined}
onchange={() => onapplyFilters()}
/>
@@ -76,7 +74,7 @@ function handleSuggestionSelect(id: string) {
type="button"
aria-label="Personen tauschen"
onclick={onswapPersons}
class="flex h-9 w-9 shrink-0 items-center justify-center rounded border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary"
class="mb-[3px] flex items-center justify-center rounded border border-line bg-muted px-3 py-2.5 text-ink-3 transition-colors hover:border-primary hover:text-primary"
class:opacity-0={!swapVisible}
class:pointer-events-none={!swapVisible}
tabindex={swapVisible ? 0 : -1}
@@ -100,7 +98,7 @@ function handleSuggestionSelect(id: string) {
<!-- Korrespondent field -->
<div
class="relative min-w-0 flex-1"
class="relative min-w-0 flex-1 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class:[&_input]:border-dashed={!receiverId}
class:[&_input]:border-solid={!!receiverId}
class:[&_input]:bg-canvas={!receiverId}
@@ -110,7 +108,6 @@ function handleSuggestionSelect(id: string) {
label={receiverId ? 'Korrespondent' : 'Korrespondent — optional'}
bind:value={receiverId}
initialName={initialReceiverName}
compact={true}
placeholder="Alle Korrespondenten"
restrictToCorrespondentsOf={senderId || undefined}
onchange={() => {