feat(i18n): add person_meta_doc_count + person_meta_rel_count keys (de/en/es) (§7)

Refs #859
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -130,8 +130,6 @@
 	"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.",
@@ -195,6 +193,8 @@
 	"person_no_docs": "Diese Person ist noch nicht als Absender verknüpft.",
 	"person_received_docs_heading": "Empfangene Dokumente",
 	"person_no_received_docs": "Diese Person ist noch nicht als Empfänger verknüpft.",
+	"person_meta_doc_count": "{count} Dokumente",
+	"person_meta_rel_count": "{count} Beziehungen",
 	"person_role_sender": "Gesendet",
 	"person_role_receiver": "Empfangen",
 	"person_co_correspondents_heading": "Häufige Korrespondenten",

frontend/messages/en.json

@@ -130,8 +130,6 @@
 	"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.",
@@ -195,6 +193,8 @@
 	"person_no_docs": "This person has not yet been linked as a sender.",
 	"person_received_docs_heading": "Received documents",
 	"person_no_received_docs": "This person has not yet been linked as a receiver.",
+	"person_meta_doc_count": "{count} documents",
+	"person_meta_rel_count": "{count} relationships",
 	"person_role_sender": "Sent",
 	"person_role_receiver": "Received",
 	"person_co_correspondents_heading": "Frequent correspondents",

frontend/messages/es.json

@@ -130,8 +130,6 @@
 	"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.",
@@ -195,6 +193,8 @@
 	"person_no_docs": "Esta persona aún no está vinculada como remitente.",
 	"person_received_docs_heading": "Documentos recibidos",
 	"person_no_received_docs": "Esta persona aún no está vinculada como receptor.",
+	"person_meta_doc_count": "{count} documentos",
+	"person_meta_rel_count": "{count} relaciones",
 	"person_role_sender": "Enviado",
 	"person_role_receiver": "Recibido",
 	"person_co_correspondents_heading": "Corresponsales frecuentes",

frontend/src/lib/shared/primitives/MetaLine.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+let {
+	items,
+	iconSrc
+}: {
+	items: string[];
+	iconSrc?: string;
+} = $props();
+</script>
+
+{#if items.length > 0}
+	<div
+		data-testid="meta-line"
+		style="display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2);"
+	>
+		{#if iconSrc}
+			<img src={iconSrc} alt="" style="width:14px; height:14px; opacity:0.5; flex-shrink:0;" />
+		{/if}
+		{#each items as item, i (i)}
+			{#if i > 0}
+				<span data-testid="meta-sep" aria-hidden="true">·</span>
+			{/if}
+			<span data-testid="meta-item">{item}</span>
+		{/each}
+	</div>
+{/if}

frontend/src/lib/shared/primitives/MetaLine.svelte.spec.ts

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import MetaLine from './MetaLine.svelte';
+
+afterEach(() => cleanup());
+
+describe('MetaLine', () => {
+	it('renders N item spans when given N items', async () => {
+		render(MetaLine, { items: ['14. März 1923', '14 Dokumente', '4 Personen'] });
+		const spans = document.querySelectorAll('[data-testid="meta-item"]');
+		expect(spans).toHaveLength(3);
+		expect(spans[0].textContent).toBe('14. März 1923');
+		expect(spans[1].textContent).toBe('14 Dokumente');
+		expect(spans[2].textContent).toBe('4 Personen');
+	});
+
+	it('renders separator spans between items', async () => {
+		render(MetaLine, { items: ['A', 'B', 'C'] });
+		const seps = document.querySelectorAll('[data-testid="meta-sep"]');
+		// N items → N-1 separators
+		expect(seps).toHaveLength(2);
+		expect(seps[0].textContent).toBe('·');
+	});
+
+	it('renders nothing when items is empty', async () => {
+		const { container } = render(MetaLine, { items: [] });
+		// No element children — Svelte may leave an empty comment node but no DOM elements
+		expect(container.querySelectorAll('[data-testid]')).toHaveLength(0);
+		expect(container.querySelectorAll('div, span, img')).toHaveLength(0);
+	});
+
+	it('renders nothing when items has one element (no separator)', async () => {
+		render(MetaLine, { items: ['Nur eines'] });
+		const seps = document.querySelectorAll('[data-testid="meta-sep"]');
+		expect(seps).toHaveLength(0);
+		const spans = document.querySelectorAll('[data-testid="meta-item"]');
+		expect(spans).toHaveLength(1);
+	});
+
+	it('shows the leading img when iconSrc is supplied', async () => {
+		render(MetaLine, {
+			items: ['Datum'],
+			iconSrc: '/degruyter-icons/Simple/Small-16px/SVG/Action/Calendar-Add-SM.svg'
+		});
+		const img = document.querySelector('img');
+		expect(img).not.toBeNull();
+	});
+
+	it('does NOT render an img when iconSrc is omitted', async () => {
+		render(MetaLine, { items: ['Datum'] });
+		const img = document.querySelector('img');
+		expect(img).toBeNull();
+	});
+
+	it('icon has width 14px, height 14px, opacity 0.5, and alt=""', async () => {
+		render(MetaLine, {
+			items: ['Datum'],
+			iconSrc: '/degruyter-icons/Simple/Small-16px/SVG/Action/Calendar-Add-SM.svg'
+		});
+		const img = document.querySelector('img') as HTMLImageElement;
+		expect(img.alt).toBe('');
+		// Inline style values (set directly on the element, not via getComputedStyle)
+		expect(img.style.width).toBe('14px');
+		expect(img.style.height).toBe('14px');
+		expect(img.style.opacity).toBe('0.5');
+	});
+
+	it('applies font-size 12px to the wrapper', async () => {
+		render(MetaLine, { items: ['Test'] });
+		const wrapper = document.querySelector('[data-testid="meta-line"]') as HTMLElement;
+		expect(wrapper).not.toBeNull();
+		expect(wrapper.style.fontSize).toBe('12px');
+	});
+});

frontend/src/lib/shared/primitives/PageHeader.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-import type { Snippet } from 'svelte';
-
-let {
-	eyebrow,
-	title,
-	lede,
-	right
-}: {
-	eyebrow: string;
-	title: string;
-	lede?: string;
-	right?: Snippet;
-} = $props();
-</script>
-
-<div
-	data-testid="page-header-wrapper"
-	style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap"
->
-	<div
-		data-testid="page-header-inner"
-		style="border-left:4px solid var(--c-accent); padding-left:18px"
-	>
-		<div
-			data-testid="page-header-eyebrow"
-			style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px"
-		>
-			{eyebrow}
-		</div>
-		<h1
-			style="font-family:var(--font-serif); font-weight:700; font-size:clamp(28px,8vw,46px); line-height:1.06; color:var(--c-ink); margin:0"
-		>
-			{title}
-		</h1>
-		{#if lede}
-			<p
-				data-testid="page-header-lede"
-				style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px"
-			>
-				{lede}
-			</p>
-		{/if}
-	</div>
-	{#if right}
-		{@render right()}
-	{/if}
-</div>

frontend/src/lib/shared/primitives/PageHeader.svelte.spec.ts

@@ -1,135 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-
-import PageHeader from './PageHeader.svelte';
-
-afterEach(() => {
-	cleanup();
-});
-
-describe('PageHeader', () => {
-	// ── Structural / heading-hierarchy assertions ─────────────────────────
-
-	it('renders exactly one h1 containing the title', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const headings = page.getByRole('heading', { level: 1 });
-		await expect.element(headings).toBeInTheDocument();
-		await expect.element(headings).toHaveTextContent('Personen');
-	});
-
-	it('renders the eyebrow as a non-heading element (div or span)', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		// The eyebrow must NOT be a heading of any level
-		const h1 = page.getByRole('heading', { level: 1 });
-		await expect.element(h1).toBeInTheDocument();
-
-		// No h2-h6 headings should be present
-		const h2 = page.getByRole('heading', { level: 2 });
-		await expect.element(h2).not.toBeInTheDocument();
-	});
-
-	it('renders eyebrow text content', async () => {
-		render(PageHeader, { eyebrow: 'PERSONENVERZEICHNIS', title: 'Personen' });
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('PERSONENVERZEICHNIS');
-	});
-
-	it('renders lede when provided', async () => {
-		render(PageHeader, {
-			eyebrow: 'VERZEICHNIS',
-			title: 'Personen',
-			lede: 'Jede Hand, die schrieb oder genannt wurde.'
-		});
-
-		const lede = page.getByTestId('page-header-lede');
-		await expect.element(lede).toHaveTextContent('Jede Hand, die schrieb oder genannt wurde.');
-	});
-
-	it('does not render lede element when lede prop is omitted', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const lede = page.getByTestId('page-header-lede');
-		await expect.element(lede).not.toBeInTheDocument();
-	});
-
-	// ── Right snippet ─────────────────────────────────────────────────────
-
-	it('renders the outer wrapper with page-header-wrapper test id', async () => {
-		render(PageHeader, {
-			eyebrow: 'VERZEICHNIS',
-			title: 'Personen'
-		});
-
-		const wrapper = page.getByTestId('page-header-wrapper');
-		await expect.element(wrapper).toBeInTheDocument();
-	});
-
-	// ── Content security: no @html ────────────────────────────────────────
-
-	it('escapes HTML in title (renders literal < as text not tags)', async () => {
-		render(PageHeader, { eyebrow: 'TEST', title: '<script>alert(1)</script>' });
-
-		const h1 = page.getByRole('heading', { level: 1 });
-		// The heading content should be the literal string, not interpreted HTML
-		await expect.element(h1).toHaveTextContent('<script>alert(1)</script>');
-	});
-
-	it('escapes HTML in eyebrow', async () => {
-		render(PageHeader, { eyebrow: '<b>BOLD</b>', title: 'Personen' });
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('<b>BOLD</b>');
-	});
-
-	// ── Design tokens / style ─────────────────────────────────────────────
-
-	it('h1 has font-size set to the clamp expression', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const h1 = page.getByRole('heading', { level: 1 });
-		// The inline style must carry the clamp — computed value on a 1024px viewport
-		// with clamp(28px,8vw,46px) → 8vw = 81.92px > 46px → capped at 46px
-		const el = h1.element() as HTMLElement;
-		const fs = el.style.fontSize || getComputedStyle(el).fontSize;
-		expect(fs).toMatch(/clamp|46px|28px/);
-	});
-
-	it('wrapper has data-testid page-header-wrapper', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const wrapper = page.getByTestId('page-header-wrapper');
-		await expect.element(wrapper).toBeInTheDocument();
-	});
-
-	it('inner container inline style includes the 4px accent left border and 18px padding', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const inner = page.getByTestId('page-header-inner');
-		const el = inner.element() as HTMLElement;
-		const styleAttr = el.getAttribute('style') ?? '';
-		expect(styleAttr).toContain('border-left:4px solid var(--c-accent)');
-		expect(styleAttr).toContain('padding-left:18px');
-	});
-
-	// ── Edit/detail eyebrow context (generic prop) ────────────────────────
-
-	it('accepts different eyebrow texts for list and edit context', async () => {
-		const { unmount } = render(PageHeader, {
-			eyebrow: 'PERSON BEARBEITEN',
-			title: 'Herbert Cram'
-		});
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('PERSON BEARBEITEN');
-
-		unmount();
-
-		render(PageHeader, { eyebrow: 'PERSONENVERZEICHNIS', title: 'Personen' });
-		const eyebrow2 = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow2).toHaveTextContent('PERSONENVERZEICHNIS');
-	});
-});

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 PageHeader from '$lib/shared/primitives/PageHeader.svelte';
+import PersonsStatsBar from './PersonsStatsBar.svelte';
 import PersonsEmptyState from './PersonsEmptyState.svelte';
 
 let { data } = $props();
@@ -53,62 +53,71 @@ const noFiltersActive = $derived(
 </svelte:head>
 
 <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-	<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}
+	<!-- 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>
-		{/snippet}
-	</PageHeader>
+		</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"
+					/>
+				</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>
+	</div>
 
 	<!-- Filter chips + show-all toggle -->
 	<div class="mb-8">

frontend/src/routes/persons/[id]/+page.svelte

@@ -3,6 +3,7 @@ import { m } from '$lib/paraglide/messages.js';
 import { SvelteMap } from 'svelte/reactivity';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
 import PersonCard from './PersonCard.svelte';
+import MetaLine from '$lib/shared/primitives/MetaLine.svelte';
 import NameHistoryCard from './NameHistoryCard.svelte';
 import CoCorrespondentsList from './CoCorrespondentsList.svelte';
 import PersonDocumentList from './PersonDocumentList.svelte';
@@ -15,6 +16,16 @@ const person = $derived(data.person);
 const sentDocuments = $derived(data.sentDocuments);
 const receivedDocuments = $derived(data.receivedDocuments);
 
+const totalDocCount = $derived(sentDocuments.length + receivedDocuments.length);
+const relCount = $derived(data.relationships.length + data.inferredRelationships.length);
+
+const personMetaItems = $derived.by(() => {
+	const items: string[] = [];
+	if (totalDocCount > 0) items.push(m.person_meta_doc_count({ count: totalDocCount }));
+	if (relCount > 0) items.push(m.person_meta_rel_count({ count: relCount }));
+	return items;
+});
+
 const coCorrespondents = $derived.by(() => {
 	const freq = new SvelteMap<string, { id: string; name: string; count: number }>();
 
@@ -61,6 +72,11 @@ const coCorrespondents = $derived.by(() => {
 		<!-- Left column: Person card + name history -->
 		<div>
 			<PersonCard person={person} canWrite={data.canWrite} />
+			{#if personMetaItems.length > 0}
+				<div class="mt-3">
+					<MetaLine items={personMetaItems} />
+				</div>
+			{/if}
 			<div class="mt-6">
 				<NameHistoryCard aliases={data.aliases} personFirstName={person.firstName} />
 			</div>