refactor(persons): adopt PageHeader primitive on /persons listing page (§3)

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>

frontend/messages/de.json

@@ -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.",

frontend/messages/en.json

@@ -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.",

frontend/messages/es.json

@@ -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.",

frontend/src/routes/persons/+page.svelte

@@ -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 -->
+	<PageHeader eyebrow={m.persons_eyebrow()} title={m.page_title_persons()} lede={m.persons_lede()}>
-	<div class="mb-6 flex flex-wrap items-end justify-between gap-4 border-b border-ink/10 pb-6">
+		{#snippet right()}
-		<div>
+			<div class="flex shrink-0 items-center gap-3">
-			<h1 class="font-serif text-3xl font-medium text-ink">{m.page_title_persons()}</h1>
+				<!-- Search -->
-			<div class="mt-2">
+				<div class="relative">
-				<PersonsStatsBar
+					<label for="search" class="sr-only">{m.persons_search_placeholder()}</label>
-					totalPersons={data.stats.totalPersons ?? 0}
+					<input
-					totalDocuments={data.stats.totalDocuments ?? 0}
+						id="search"
-				/>
+						type="text"
-			</div>
+						placeholder={m.persons_search_placeholder()}
-		</div>
+						bind:value={q}
-
+						oninput={handleSearch}
-		<div class="flex items-center gap-3">
+						onfocus={() => (qFocused = true)}
-			<!-- Search -->
+						onblur={() => (qFocused = false)}
-			<div class="relative">
+						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"
-				<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
+						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>
-
+		{/snippet}
-			<!-- Triage link (transcriber only) -->
+	</PageHeader>
-			{#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>
 
 	<!-- Filter chips + show-all toggle -->
 	<div class="mb-8">