From 3318b5f1c6149ebe4281260ca28b9b7e60901497 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 14:43:55 +0200
Subject: [PATCH] fix(korrespondenz): larger empty state text, hide
 divider+chips when no history

- Icon: 36px (was 24px), heading text-xl font-black (was text-sm)
- Subtext: text-base (was text-xs), max-w-sm (was max-w-[280px])
- Search button: h-10, text-sm, full max-w-sm width (was fixed 260px)
- Recent persons divider and chip block moved inside the {#if recentPersons.length > 0}
  block so no blank "oder" section renders when localStorage is empty
- Chips: text-sm px-4 py-2 (was text-xs), avatar h-5 w-5

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../CorrespondenzEmptyState.svelte            | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte b/frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte
index ce31cdec..bc0b696a 100644
--- a/frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte
+++ b/frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte
@@ -28,13 +28,13 @@ onMount(() => {
 });
 </script>
 
-<div class="mx-auto flex max-w-sm flex-col items-center gap-4 py-16 text-center">
+<div class="mx-auto flex max-w-lg flex-col items-center gap-5 py-12 text-center">
 	<!-- Icon circle -->
-	<div class="rounded-full bg-muted p-4">
+	<div class="rounded-full bg-muted p-5">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
+			width="36"
+			height="36"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -50,10 +50,10 @@ onMount(() => {
 	</div>
 
 	<!-- Heading -->
-	<h2 class="font-serif text-sm font-black text-ink">Korrespondenz durchsuchen</h2>
+	<h2 class="font-serif text-xl font-black text-ink">Korrespondenz durchsuchen</h2>
 
 	<!-- Subtext -->
-	<p class="max-w-[280px] text-xs text-ink-3">
+	<p class="max-w-sm text-base text-ink-3">
 		Wähle eine Person aus dem Archiv um deren Briefe zu sehen — mit oder ohne Korrespondent.
 	</p>
 
@@ -63,19 +63,19 @@ onMount(() => {
 		data-testid="conv-empty-search"
 		aria-label={conv_empty_search_placeholder()}
 		onclick={() => onSelectPerson('')}
-		class="flex h-[28px] w-[260px] items-center rounded-sm border border-line bg-muted px-3 text-xs text-ink-3 italic transition-colors hover:border-primary"
+		class="flex h-10 w-full max-w-sm items-center rounded border border-line bg-muted px-4 text-sm text-ink-3 italic transition-colors hover:border-primary"
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
-			width="12"
-			height="12"
+			width="14"
+			height="14"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="mr-1.5 shrink-0"
+			class="mr-2 shrink-0"
 			aria-hidden="true"
 		>
 			<circle cx="11" cy="11" r="8" />
@@ -84,17 +84,17 @@ onMount(() => {
 		Person suchen…
 	</button>
 
-	<!-- Divider -->
-	<div class="flex w-full items-center gap-2">
-		<div class="flex-1 border-t border-line"></div>
-		<span class="text-[10px] font-bold tracking-wider text-ink-3 uppercase">oder</span>
-		<div class="flex-1 border-t border-line"></div>
-	</div>
-
-	<!-- Recent persons -->
+	<!-- Recent persons — only shown when localStorage has entries -->
 	{#if recentPersons.length > 0}
-		<div class="flex w-full flex-col items-center gap-2">
-			<span class="text-[10px] font-bold tracking-widest text-ink-3 uppercase">
+		<!-- Divider -->
+		<div class="flex w-full max-w-sm items-center gap-2">
+			<div class="flex-1 border-t border-line"></div>
+			<span class="text-xs font-bold tracking-wider text-ink-3 uppercase">oder</span>
+			<div class="flex-1 border-t border-line"></div>
+		</div>
+
+		<div class="flex w-full max-w-sm flex-col items-center gap-3">
+			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{conv_empty_recent_label()}
 			</span>
 			<div class="flex flex-wrap justify-center gap-2">
@@ -103,10 +103,10 @@ onMount(() => {
 					<button
 						type="button"
 						onclick={() => onSelectPerson(person.id)}
-						class="flex items-center gap-1.5 rounded-full border border-line bg-surface px-3 py-1.5 text-xs font-bold text-ink transition-colors hover:border-primary hover:text-primary"
+						class="flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2 text-sm font-bold text-ink transition-colors hover:border-primary hover:text-primary"
 					>
 						<span
-							class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-fg"
+							class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-xs text-primary-fg"
 							aria-hidden="true"
 						>
 							{person.name.charAt(0).toUpperCase()}