From 96d47076c8c64b29b0b1a9e21c0943ddbf3102ad Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 16 Jun 2026 19:11:48 +0200
Subject: [PATCH] refactor(pages): migrate
 documents/themen/stammbaum/persons-review to EmptyState primitive

Refs #860
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/DocumentList.svelte       | 37 +++++++------------
 .../src/routes/persons/review/+page.svelte    | 10 ++---
 frontend/src/routes/stammbaum/+page.svelte    | 36 ++++++------------
 frontend/src/routes/themen/+page.svelte       |  3 +-
 4 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/frontend/src/routes/DocumentList.svelte b/frontend/src/routes/DocumentList.svelte
index e0cc4d17..d7196eaa 100644
--- a/frontend/src/routes/DocumentList.svelte
+++ b/frontend/src/routes/DocumentList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
+import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import DocumentRow from '$lib/document/DocumentRow.svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import type { components } from '$lib/generated/api';
@@ -34,6 +35,14 @@ let {
 // backend string). Issue #668.
 const hasDateRange = $derived(!!from || !!to);
 
+const emptySubline = $derived(
+	hasDateRange
+		? m.docs_range_excludes_undated()
+		: q
+			? m.docs_empty_for_term({ term: q })
+			: m.docs_empty_text()
+);
+
 const groups = $derived.by(() => {
 	if (sort === 'SENDER') return groupBySender(items);
 	if (sort === 'RECEIVER') return groupByReceiver(items);
@@ -116,32 +125,14 @@ function groupByReceiver(docItems: DocumentListItem[]) {
 	{/each}
 {:else}
 	<!-- EMPTY STATE -->
-	<div class="border border-line bg-surface shadow-sm">
-		<div class="p-16 text-center">
-			<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-6 w-6"
-				/>
-			</div>
-			<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
-			<p class="mt-1 font-sans text-sm text-ink-2">
-				{#if hasDateRange}
-					{m.docs_range_excludes_undated()}
-				{:else if q}
-					{m.docs_empty_for_term({ term: q })}
-				{:else}
-					{m.docs_empty_text()}
-				{/if}
-			</p>
+	<EmptyState heading={m.docs_empty_heading()} subline={emptySubline}>
+		{#snippet action()}
 			<button
 				onclick={() => goto('/documents')}
-				class="mt-6 text-sm font-bold tracking-wide text-primary uppercase transition hover:text-ink-2"
+				class="text-sm font-bold tracking-wide text-primary uppercase transition hover:text-ink-2"
 			>
 				{m.docs_empty_btn_clear()}
 			</button>
-		</div>
-	</div>
+		{/snippet}
+	</EmptyState>
 {/if}
diff --git a/frontend/src/routes/persons/review/+page.svelte b/frontend/src/routes/persons/review/+page.svelte
index 13300575..05d7a59f 100644
--- a/frontend/src/routes/persons/review/+page.svelte
+++ b/frontend/src/routes/persons/review/+page.svelte
@@ -3,6 +3,7 @@ import { page } from '$app/state';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
 import { m } from '$lib/paraglide/messages.js';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
+import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import Pagination from '$lib/shared/primitives/Pagination.svelte';
 import PersonReviewRow from '$lib/person/PersonReviewRow.svelte';
 
@@ -39,11 +40,10 @@ const hasResults = $derived(data.persons.length > 0);
 	{/if}
 
 	{#if !hasResults}
-		<div
-			class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
-		>
-			<p class="font-serif text-lg text-ink">{m.persons_review_empty()}</p>
-		</div>
+		<EmptyState
+			heading={m.persons_review_empty_heading()}
+			subline={m.persons_review_empty_subline()}
+		/>
 	{:else}
 		<ul class="flex flex-col gap-3">
 			{#each data.persons as person (person.id)}
diff --git a/frontend/src/routes/stammbaum/+page.svelte b/frontend/src/routes/stammbaum/+page.svelte
index a5b59cce..a0f6055f 100644
--- a/frontend/src/routes/stammbaum/+page.svelte
+++ b/frontend/src/routes/stammbaum/+page.svelte
@@ -8,6 +8,7 @@ import StammbaumSidePanel from '$lib/person/genealogy/StammbaumSidePanel.svelte'
 import StammbaumBottomSheet from '$lib/person/genealogy/StammbaumBottomSheet.svelte';
 import StammbaumControls from '$lib/person/genealogy/StammbaumControls.svelte';
 import StammbaumAffordance from '$lib/person/genealogy/StammbaumAffordance.svelte';
+import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import {
 	type PanZoomState,
 	DEFAULT_VIEW,
@@ -130,30 +131,17 @@ $effect(() => {
 
 	{#if data.nodes.length === 0}
 		<div class="flex flex-1 items-center justify-center p-8">
-			<div
-				class="mx-auto max-w-md rounded-sm border border-line bg-surface p-10 text-center shadow-sm"
-			>
-				<svg
-					class="mx-auto mb-4 h-12 w-12 text-ink-3"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="1.5"
-					aria-hidden="true"
-				>
-					<circle cx="12" cy="5" r="2.5" />
-					<circle cx="6" cy="14" r="2.5" />
-					<circle cx="18" cy="14" r="2.5" />
-					<path stroke-linecap="round" d="M12 7.5v3M9.5 12.5L9 14M14.5 12.5l.5 1.5" />
-				</svg>
-				<h2 class="mb-2 font-serif text-xl text-ink">{m.stammbaum_empty_heading()}</h2>
-				<p class="mb-4 font-serif text-sm text-ink-2">{m.stammbaum_empty_body()}</p>
-				<a
-					href="/persons"
-					class="inline-block font-sans text-sm font-medium text-primary hover:underline"
-				>
-					{m.stammbaum_empty_link()}
-				</a>
+			<div class="w-full max-w-md">
+				<EmptyState heading={m.stammbaum_empty_heading()} subline={m.stammbaum_empty_subline()}>
+					{#snippet action()}
+						<a
+							href="/persons"
+							class="font-sans text-sm font-medium text-primary hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+						>
+							{m.stammbaum_empty_link()}
+						</a>
+					{/snippet}
+				</EmptyState>
 			</div>
 		</div>
 	{:else}
diff --git a/frontend/src/routes/themen/+page.svelte b/frontend/src/routes/themen/+page.svelte
index c0a50b6c..c65d0109 100644
--- a/frontend/src/routes/themen/+page.svelte
+++ b/frontend/src/routes/themen/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
+import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import { hasAnyDocuments } from '$lib/shared/utils/tagUtils';
 import type { components } from '$lib/generated/api';
 
@@ -24,7 +25,7 @@ const visibleTree = $derived.by(() => data.tree.filter(hasAnyDocuments));
 	</div>
 
 	{#if visibleTree.length === 0}
-		<p class="font-sans text-sm text-ink-3">{m.themen_leer()}</p>
+		<EmptyState heading={m.themen_empty_heading()} subline={m.themen_empty_subline()} />
 	{:else}
 		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
 			{#each visibleTree as tag (tag.id)}