From b6266985436e8dac6c2b7a1fd491a0d0dd9e3460 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 12 Jun 2026 11:50:10 +0200
Subject: [PATCH] feat(GeschichteListRow): show DRAFT badge on desktop meta
 column and mobile row

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |  4 ++++
 frontend/messages/en.json                     |  4 ++++
 frontend/messages/es.json                     |  4 ++++
 .../lib/geschichte/GeschichteListRow.svelte   | 21 +++++++++++++++++--
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 961597fe..bfc2d084 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -1042,6 +1042,10 @@
 	"geschichten_filter_document_chip": "Gefiltert nach Brief:",
 	"geschichten_filter_remove_document_chip": "Brief {title} aus Filter entfernen",
 	"geschichten_empty_for_document": "Noch keine Geschichten zu diesem Brief",
+	"geschichten_published_heading": "Veröffentlicht",
+	"geschichten_drafts_heading": "Entwürfe",
+	"geschichten_draft_badge": "Entwurf",
+	"geschichten_drafts_unfiltered_caption": "(alle Entwürfe)",
 	"geschichten_back_to_index": "Zurück zu Geschichten",
 	"geschichten_published_on": "veröffentlicht am {date}",
 	"journey_compiled_on": "zusammengestellt am {date}",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 7d957e6a..2ec576aa 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -1042,6 +1042,10 @@
 	"geschichten_filter_document_chip": "Filtered by letter:",
 	"geschichten_filter_remove_document_chip": "Remove letter {title} from filter",
 	"geschichten_empty_for_document": "No stories reference this letter yet",
+	"geschichten_published_heading": "Published",
+	"geschichten_drafts_heading": "Drafts",
+	"geschichten_draft_badge": "Draft",
+	"geschichten_drafts_unfiltered_caption": "(all drafts)",
 	"geschichten_back_to_index": "Back to stories",
 	"geschichten_published_on": "published on {date}",
 	"journey_compiled_on": "compiled on {date}",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 6ad45fcc..0bcd27ac 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -1042,6 +1042,10 @@
 	"geschichten_filter_document_chip": "Filtrado por carta:",
 	"geschichten_filter_remove_document_chip": "Quitar la carta {title} del filtro",
 	"geschichten_empty_for_document": "Aún no hay historias sobre esta carta",
+	"geschichten_published_heading": "Publicadas",
+	"geschichten_drafts_heading": "Borradores",
+	"geschichten_draft_badge": "Borrador",
+	"geschichten_drafts_unfiltered_caption": "(todos los borradores)",
 	"geschichten_back_to_index": "Volver a Historias",
 	"geschichten_published_on": "publicada el {date}",
 	"journey_compiled_on": "recopilada el {date}",
diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte b/frontend/src/lib/geschichte/GeschichteListRow.svelte
index 0138443b..f64a0cd1 100644
--- a/frontend/src/lib/geschichte/GeschichteListRow.svelte
+++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte
@@ -7,12 +7,13 @@ import type { components } from '$lib/generated/api';
 
 type GeschichteRow = Pick<
 	components['schemas']['GeschichteSummary'],
-	'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
+	'id' | 'title' | 'body' | 'type' | 'status' | 'author' | 'publishedAt'
 >;
 
 let { geschichte }: { geschichte: GeschichteRow } = $props();
 
 const isJourney = $derived(geschichte.type === 'JOURNEY');
+const isDraft = $derived(geschichte.status === 'DRAFT');
 
 const publishedAt = $derived(formatPublishedAt(geschichte.publishedAt, 'short'));
 
@@ -44,12 +45,20 @@ const authorName = $derived(formatAuthorName(geschichte.author));
 				{m.journey_badge_list()}
 			</span>
 		{/if}
+		{#if isDraft}
+			<span
+				data-testid="draft-badge"
+				class="inline-flex items-center rounded-sm border border-line bg-canvas px-1.5 py-px font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
+			>
+				{m.geschichten_draft_badge()}
+			</span>
+		{/if}
 	</div>
 
 	<!-- Content column -->
 	<div class="min-w-0 flex-1 p-3 sm:px-4">
 		<!-- Compact meta line (mobile only) -->
-		<div class="mb-1 flex items-center gap-1.5 sm:hidden">
+		<div class="mb-1 flex flex-wrap items-center gap-1.5 sm:hidden">
 			<!-- 7px initials render as smudge at this size — a plain color dot reads better -->
 			<span
 				aria-hidden="true"
@@ -57,6 +66,14 @@ const authorName = $derived(formatAuthorName(geschichte.author));
 				style="background-color: {personAvatarColor(authorName)}"
 			></span>
 			<span class="font-sans text-sm font-semibold text-ink">{authorName}</span>
+			{#if isDraft}
+				<span
+					data-testid="draft-badge-mobile"
+					class="inline-flex shrink-0 items-center rounded-sm border border-line bg-canvas px-1.5 py-px font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
+				>
+					{m.geschichten_draft_badge()}
+				</span>
+			{/if}
 			{#if publishedAt}
 				<span class="ml-auto font-sans text-sm text-ink-3">{publishedAt}</span>
 			{/if}