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

refactor(persons): adopt PageHeader primitive on /persons listing page (§3)
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 2m58s
Details
CI / OCR Service Tests (pull_request) Successful in 22s
Details
CI / Backend Unit Tests (pull_request) Successful in 5m1s
Details
CI / fail2ban Regex (pull_request) Successful in 45s
Details
CI / Semgrep Security Scan (pull_request) Successful in 24s
Details
CI / Compose Bucket Idempotency (pull_request) Successful in 1m5s
Details
SDD Gate / RTM Check (pull_request) Successful in 14s
Details
SDD Gate / Contract Validate (pull_request) Successful in 22s
Details
SDD Gate / Constitution Impact (pull_request) Successful in 16s
Details

Browse Source 
Adds persons_eyebrow + persons_lede i18n keys (de/en/es) and replaces
the inline header markup with <PageHeader> to close §3 of the spec.

Refs #856
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-16 19:19:54 +02:00
parent 8bcc4d888d
commit f9821164d1
4 changed files with 60 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/messages/de.json
View File

@@ -130,6 +130,8 @@
"doc_no_scan": "Kein Scan vorhanden",
"persons_heading": "Personenverzeichnis",
"persons_subtitle": "Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv.",
"persons_eyebrow": "Verzeichnis",
"persons_lede": "Jede Hand, die schrieb oder genannt wurde — Absender, Empfänger, Erwähnte.",
"persons_btn_new": "Neue Person",
"persons_search_placeholder": "Namen suchen...",
"persons_empty_heading": "Keine Personen gefunden.",

2
frontend/messages/en.json
View File

@@ -130,6 +130,8 @@
"doc_no_scan": "No scan available",
"persons_heading": "Person directory",
"persons_subtitle": "Browse the index of all recorded persons in the family archive.",
"persons_eyebrow": "Directory",
"persons_lede": "Every hand that wrote or was named — senders, recipients, those mentioned.",
"persons_btn_new": "New person",
"persons_search_placeholder": "Search names...",
"persons_empty_heading": "No persons found.",

2
frontend/messages/es.json
View File

@@ -130,6 +130,8 @@
"doc_no_scan": "No hay escaneo disponible",
"persons_heading": "Directorio de personas",
"persons_subtitle": "Explore el índice de todas las personas registradas en el archivo familiar.",
"persons_eyebrow": "Directorio",
"persons_lede": "Cada mano que escribió o fue nombrada — remitentes, destinatarios, mencionados.",
"persons_btn_new": "Nueva persona",
"persons_search_placeholder": "Buscar nombres...",
"persons_empty_heading": "No se encontraron personas.",

117
frontend/src/routes/persons/+page.svelte
View File

@@ -7,7 +7,7 @@ import { m } from '$lib/paraglide/messages.js';
import PersonCard from '$lib/person/PersonCard.svelte';
import PersonFilterBar from '$lib/person/PersonFilterBar.svelte';
import Pagination from '$lib/shared/primitives/Pagination.svelte';
import PersonsStatsBar from './PersonsStatsBar.svelte';
import PageHeader from '$lib/shared/primitives/PageHeader.svelte';
import PersonsEmptyState from './PersonsEmptyState.svelte';
let { data } = $props();
@@ -53,71 +53,62 @@ const noFiltersActive = $derived(
</svelte:head>
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
<!-- Header: title+stats on left, search+CTA on right -->
<div class="mb-6 flex flex-wrap items-end justify-between gap-4 border-b border-ink/10 pb-6">
<div>
<h1 class="font-serif text-3xl font-medium text-ink">{m.page_title_persons()}</h1>
<div class="mt-2">
<PersonsStatsBar
totalPersons={data.stats.totalPersons ?? 0}
totalDocuments={data.stats.totalDocuments ?? 0}
/>
</div>
</div>
<div class="flex items-center gap-3">
<!-- Search -->
<div class="relative">
<label for="search" class="sr-only">{m.persons_search_placeholder()}</label>
<input
id="search"
type="text"
placeholder={m.persons_search_placeholder()}
bind:value={q}
oninput={handleSearch}
onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)}
class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 opacity-40"
<PageHeader eyebrow={m.persons_eyebrow()} title={m.page_title_persons()} lede={m.persons_lede()}>
{#snippet right()}
<div class="flex shrink-0 items-center gap-3">
<!-- Search -->
<div class="relative">
<label for="search" class="sr-only">{m.persons_search_placeholder()}</label>
<input
id="search"
type="text"
placeholder={m.persons_search_placeholder()}
bind:value={q}
oninput={handleSearch}
onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)}
class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 opacity-40"
/>
</div>
</div>
<!-- Triage link (transcriber only) -->
{#if data.canWrite}
<a
href="/persons/review"
class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-line bg-surface px-4 py-2 font-sans text-sm font-semibold text-ink transition-colors hover:bg-muted"
>
{m.persons_toggle_needs_review({ count: data.needsReviewCount })}
</a>
{/if}
<!-- New person CTA -->
{#if data.canWrite}
<a
href="/persons/new"
class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 invert dark:invert-0"
/>
{m.persons_btn_new()}
</a>
{/if}
</div>
<!-- Triage link (transcriber only) -->
{#if data.canWrite}
<a
href="/persons/review"
class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-line bg-surface px-4 py-2 font-sans text-sm font-semibold text-ink transition-colors hover:bg-muted"
>
{m.persons_toggle_needs_review({ count: data.needsReviewCount })}
</a>
{/if}
<!-- New person CTA -->
{#if data.canWrite}
<a
href="/persons/new"
class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 invert dark:invert-0"
/>
{m.persons_btn_new()}
</a>
{/if}
</div>
</div>
{/snippet}
</PageHeader>
<!-- Filter chips + show-all toggle -->
<div class="mb-8">