From 65b79a337bbda712bf95eed116561bbfd6b12851 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 9 Jun 2026 12:33:05 +0200
Subject: [PATCH] refactor(geschichte): extract GeschichteSidebar.svelte from
 GeschichteEditor

Moves Status + Persons sections into a shared component so both
GeschichteEditor (STORY) and the upcoming JourneyEditor (JOURNEY) can
use the same sidebar without duplicating markup. Adds <details> mobile
collapsibles with 44px summary hit areas.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/geschichte/GeschichteEditor.svelte    | 32 +---------
 .../lib/geschichte/GeschichteSidebar.svelte   | 60 +++++++++++++++++++
 2 files changed, 62 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/lib/geschichte/GeschichteSidebar.svelte

diff --git a/frontend/src/lib/geschichte/GeschichteEditor.svelte b/frontend/src/lib/geschichte/GeschichteEditor.svelte
index 1448b73c..c325deba 100644
--- a/frontend/src/lib/geschichte/GeschichteEditor.svelte
+++ b/frontend/src/lib/geschichte/GeschichteEditor.svelte
@@ -5,7 +5,7 @@ import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import { m } from '$lib/paraglide/messages.js';
 import type { components } from '$lib/generated/api';
-import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
+import GeschichteSidebar from '$lib/geschichte/GeschichteSidebar.svelte';
 
 type Geschichte = components['schemas']['Geschichte'];
 type Person = components['schemas']['Person'];
@@ -227,35 +227,7 @@ function exec(action: () => void) {
 	</div>
 
 	<!-- Sidebar -->
-	<aside class="flex flex-col gap-6">
-		<section class="rounded border border-line bg-surface p-4 shadow-sm">
-			<h2 class="mb-1 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">Status</h2>
-			<p class="mb-3">
-				<span
-					class="inline-flex items-center rounded px-2 py-1 font-sans text-xs font-bold tracking-widest uppercase {isDraft
-						? 'bg-muted text-ink-2'
-						: 'bg-accent-bg text-ink'}"
-				>
-					{isDraft
-						? m.geschichte_editor_status_draft()
-						: m.geschichte_editor_status_published()}
-				</span>
-			</p>
-			<p class="font-sans text-xs text-ink-3">
-				{isDraft
-					? m.geschichte_editor_status_draft_hint()
-					: m.geschichte_editor_status_published_hint()}
-			</p>
-		</section>
-
-		<section class="rounded border border-line bg-surface p-4 shadow-sm">
-			<h2 class="mb-2 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.geschichte_editor_personen_heading()}
-			</h2>
-			<p class="mb-3 font-sans text-xs text-ink-3">{m.geschichte_editor_personen_hint()}</p>
-			<PersonMultiSelect bind:selectedPersons={selectedPersons} />
-		</section>
-	</aside>
+	<GeschichteSidebar status={status} bind:selectedPersons={selectedPersons} />
 </div>
 
 <!-- Save bar -->
diff --git a/frontend/src/lib/geschichte/GeschichteSidebar.svelte b/frontend/src/lib/geschichte/GeschichteSidebar.svelte
new file mode 100644
index 00000000..31f70f04
--- /dev/null
+++ b/frontend/src/lib/geschichte/GeschichteSidebar.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import type { components } from '$lib/generated/api';
+import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
+
+type Person = components['schemas']['Person'];
+
+interface Props {
+	status: 'DRAFT' | 'PUBLISHED';
+	selectedPersons: Person[];
+}
+
+let { status, selectedPersons = $bindable() }: Props = $props();
+
+const isDraft = $derived(status === 'DRAFT');
+</script>
+
+<aside class="flex flex-col gap-6">
+	<!-- Status section -->
+	<details open class="sm:contents">
+		<summary
+			class="flex min-h-[44px] cursor-pointer items-center px-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase sm:hidden"
+		>
+			Status
+		</summary>
+		<section class="rounded border border-line bg-surface p-4 shadow-sm">
+			<h2 class="mb-1 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">Status</h2>
+			<p class="mb-3">
+				<span
+					class="inline-flex items-center rounded px-2 py-1 font-sans text-xs font-bold tracking-widest uppercase {isDraft
+						? 'bg-muted text-ink-2'
+						: 'bg-accent-bg text-ink'}"
+				>
+					{isDraft ? m.geschichte_editor_status_draft() : m.geschichte_editor_status_published()}
+				</span>
+			</p>
+			<p class="font-sans text-xs text-ink-3">
+				{isDraft
+					? m.geschichte_editor_status_draft_hint()
+					: m.geschichte_editor_status_published_hint()}
+			</p>
+		</section>
+	</details>
+
+	<!-- Persons section -->
+	<details open class="sm:contents">
+		<summary
+			class="flex min-h-[44px] cursor-pointer items-center px-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase sm:hidden"
+		>
+			{m.geschichte_editor_personen_heading()}
+		</summary>
+		<section class="rounded border border-line bg-surface p-4 shadow-sm">
+			<h2 class="mb-2 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.geschichte_editor_personen_heading()}
+			</h2>
+			<p class="mb-3 font-sans text-xs text-ink-3">{m.geschichte_editor_personen_hint()}</p>
+			<PersonMultiSelect bind:selectedPersons={selectedPersons} />
+		</section>
+	</details>
+</aside>