From 4c24bbb002b4e511e226b8b4193d79970970e07c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 8 Jun 2026 23:24:33 +0200
Subject: [PATCH] refactor(geschichte): extract delete handler to
 [id]/+page.svelte, pass via ondelete prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moves the confirm-then-delete flow out of StoryReader and JourneyReader into
the single [id]/+page.svelte owner. Both reader components gain an optional
ondelete prop — the delete button calls ondelete?.() so the handler is opt-in
and never duplicated. Tests verify the prop is called on click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/geschichte/JourneyReader.svelte   | 25 ++--------------
 .../geschichte/JourneyReader.svelte.spec.ts   | 25 ++++++++++++++--
 .../src/lib/geschichte/StoryReader.svelte     | 27 +++--------------
 .../lib/geschichte/StoryReader.svelte.spec.ts | 16 ++++++++--
 .../src/routes/geschichten/[id]/+page.svelte  | 29 +++++++++++++++----
 5 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/frontend/src/lib/geschichte/JourneyReader.svelte b/frontend/src/lib/geschichte/JourneyReader.svelte
index fff41e09..e508c723 100644
--- a/frontend/src/lib/geschichte/JourneyReader.svelte
+++ b/frontend/src/lib/geschichte/JourneyReader.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { goto } from '$app/navigation';
-import { getConfirmService } from '$lib/shared/services/confirm.svelte';
-import { csrfFetch } from '$lib/shared/cookies';
 import JourneyItemCard from './JourneyItemCard.svelte';
 import JourneyInterlude from './JourneyInterlude.svelte';
 import type { components } from '$lib/generated/api';
@@ -13,9 +10,10 @@ type JourneyItemView = components['schemas']['JourneyItemView'];
 interface Props {
 	geschichte: GeschichteView;
 	canBlogWrite: boolean;
+	ondelete?: () => Promise<void>;
 }
 
-let { geschichte: g, canBlogWrite }: Props = $props();
+let { geschichte: g, canBlogWrite, ondelete }: Props = $props();
 
 // Render intro only when body is a non-empty, non-whitespace string.
 const introText = $derived(g.body?.trim() ? g.body : null);
@@ -27,23 +25,6 @@ const validItems = $derived(
 			item.document != null || (item.note != null && item.note.trim().length > 0)
 	)
 );
-
-const confirm = getConfirmService();
-
-async function handleDelete() {
-	const ok = await confirm.confirm({
-		title: m.geschichte_delete_confirm_title(),
-		body: m.geschichte_delete_confirm_body(),
-		confirmLabel: m.btn_delete(),
-		cancelLabel: m.btn_cancel(),
-		destructive: true
-	});
-	if (!ok) return;
-	const res = await csrfFetch(`/api/geschichten/${g.id}`, { method: 'DELETE' });
-	if (res.ok) {
-		goto('/geschichten');
-	}
-}
 </script>
 
 {#if introText}
@@ -80,7 +61,7 @@ async function handleDelete() {
 		</a>
 		<button
 			type="button"
-			onclick={handleDelete}
+			onclick={() => ondelete?.()}
 			class="inline-flex h-11 items-center rounded font-sans text-sm font-medium text-danger hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		>
 			{m.btn_delete()}
diff --git a/frontend/src/lib/geschichte/JourneyReader.svelte.spec.ts b/frontend/src/lib/geschichte/JourneyReader.svelte.spec.ts
index d3398c63..1a2abe68 100644
--- a/frontend/src/lib/geschichte/JourneyReader.svelte.spec.ts
+++ b/frontend/src/lib/geschichte/JourneyReader.svelte.spec.ts
@@ -1,6 +1,6 @@
-import { describe, it, expect, afterEach } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
+import { page, userEvent } from 'vitest/browser';
 import { createConfirmService, CONFIRM_KEY } from '$lib/shared/services/confirm.svelte.js';
 import type { components } from '$lib/generated/api';
 
@@ -75,8 +75,11 @@ describe('JourneyReader', () => {
 			props: { geschichte: baseGeschichte({ body: '   ' }), canBlogWrite: false }
 		});
 
-		expect(document.body.textContent?.trim().replace(/\s+/g, ' ')).not.toContain('    ');
+		// Whitespace-only body must NOT produce a visible intro paragraph.
+		// The only rendered content should be the empty-state message.
 		await expect.element(page.getByTestId('journey-empty-state')).toBeVisible();
+		const paragraphs = document.querySelectorAll('p:not([data-testid])');
+		expect(paragraphs.length).toBe(0);
 	});
 
 	it('renders empty-state message when items array is empty', async () => {
@@ -148,6 +151,22 @@ describe('JourneyReader', () => {
 		await expect.element(page.getByText('Diese Lesereise ist noch leer.')).not.toBeInTheDocument();
 	});
 
+	it('clicking delete button calls ondelete prop', async () => {
+		const ondelete = vi.fn().mockResolvedValue(undefined);
+		render(JourneyReader, {
+			context: ctx(),
+			props: {
+				geschichte: baseGeschichte({ items: [docItem('i1', 'Brief', 0)] }),
+				canBlogWrite: true,
+				ondelete
+			}
+		});
+
+		await userEvent.click(page.getByRole('button', { name: /löschen/i }));
+
+		expect(ondelete).toHaveBeenCalledOnce();
+	});
+
 	it('XSS: Journey body is rendered as plaintext — injected payload does not execute', async () => {
 		// JourneyReader uses Svelte text interpolation, NOT {@html}.
 		render(JourneyReader, {
diff --git a/frontend/src/lib/geschichte/StoryReader.svelte b/frontend/src/lib/geschichte/StoryReader.svelte
index bcb04800..dd21b1f8 100644
--- a/frontend/src/lib/geschichte/StoryReader.svelte
+++ b/frontend/src/lib/geschichte/StoryReader.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-import { goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import { safeHtml } from '$lib/shared/utils/sanitize';
-import { getConfirmService } from '$lib/shared/services/confirm.svelte';
-import { csrfFetch } from '$lib/shared/cookies';
 import type { components } from '$lib/generated/api';
 
 type GeschichteView = components['schemas']['GeschichteView'];
@@ -11,32 +8,16 @@ type GeschichteView = components['schemas']['GeschichteView'];
 interface Props {
 	geschichte: GeschichteView;
 	canBlogWrite: boolean;
+	ondelete?: () => Promise<void>;
 }
 
-let { geschichte: g, canBlogWrite }: Props = $props();
+let { geschichte: g, canBlogWrite, ondelete }: Props = $props();
 
 const sanitized = $derived(safeHtml(g.body));
 
-const confirm = getConfirmService();
-
 function personName(p: { firstName?: string; lastName?: string }): string {
 	return [p.firstName, p.lastName].filter(Boolean).join(' ').trim();
 }
-
-async function handleDelete() {
-	const ok = await confirm.confirm({
-		title: m.geschichte_delete_confirm_title(),
-		body: m.geschichte_delete_confirm_body(),
-		confirmLabel: m.btn_delete(),
-		cancelLabel: m.btn_cancel(),
-		destructive: true
-	});
-	if (!ok) return;
-	const res = await csrfFetch(`/api/geschichten/${g.id}`, { method: 'DELETE' });
-	if (res.ok) {
-		goto('/geschichten');
-	}
-}
 </script>
 
 <!--
@@ -65,7 +46,7 @@ async function handleDelete() {
 				<li>
 					<a
 						href="/persons/{p.id}"
-						class="inline-flex items-center rounded-full bg-muted px-3 py-1 font-sans text-sm text-ink hover:bg-accent-bg"
+						class="inline-flex min-h-[44px] items-center rounded-full bg-muted px-3 py-2.5 font-sans text-sm text-ink hover:bg-accent-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>
 						{personName(p)}
 					</a>
@@ -111,7 +92,7 @@ async function handleDelete() {
 		</a>
 		<button
 			type="button"
-			onclick={handleDelete}
+			onclick={() => ondelete?.()}
 			class="inline-flex h-11 items-center rounded font-sans text-sm font-medium text-danger hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		>
 			{m.btn_delete()}
diff --git a/frontend/src/lib/geschichte/StoryReader.svelte.spec.ts b/frontend/src/lib/geschichte/StoryReader.svelte.spec.ts
index 7ef5ada8..2e02b45e 100644
--- a/frontend/src/lib/geschichte/StoryReader.svelte.spec.ts
+++ b/frontend/src/lib/geschichte/StoryReader.svelte.spec.ts
@@ -1,6 +1,6 @@
-import { describe, it, expect, afterEach } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
+import { page, userEvent } from 'vitest/browser';
 import { createConfirmService, CONFIRM_KEY } from '$lib/shared/services/confirm.svelte.js';
 import type { components } from '$lib/generated/api';
 
@@ -118,6 +118,18 @@ describe('StoryReader', () => {
 		await expect.element(page.getByRole('button', { name: /löschen/i })).not.toBeInTheDocument();
 	});
 
+	it('clicking delete button calls ondelete prop', async () => {
+		const ondelete = vi.fn().mockResolvedValue(undefined);
+		render(StoryReader, {
+			context: ctx(),
+			props: { geschichte: baseGeschichte(), canBlogWrite: true, ondelete }
+		});
+
+		await userEvent.click(page.getByRole('button', { name: /löschen/i }));
+
+		expect(ondelete).toHaveBeenCalledOnce();
+	});
+
 	it('XSS: Story body is sanitised — injected payload does not execute', async () => {
 		// StoryReader uses {@html safeHtml(g.body)} — DOMPurify must strip the payload.
 		render(StoryReader, {
diff --git a/frontend/src/routes/geschichten/[id]/+page.svelte b/frontend/src/routes/geschichten/[id]/+page.svelte
index 23a00d42..7297ee66 100644
--- a/frontend/src/routes/geschichten/[id]/+page.svelte
+++ b/frontend/src/routes/geschichten/[id]/+page.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
+import { goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/shared/utils/date';
+import { formatAuthorDisplayName } from '$lib/geschichte/utils';
+import { getConfirmService } from '$lib/shared/services/confirm.svelte';
+import { csrfFetch } from '$lib/shared/cookies';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
 import StoryReader from '$lib/geschichte/StoryReader.svelte';
 import JourneyReader from '$lib/geschichte/JourneyReader.svelte';
@@ -16,8 +20,23 @@ const publishedAt = $derived.by(() => {
 	return formatDate(g.publishedAt.slice(0, 10), 'long');
 });
 
-function authorName(): string {
-	return g.author?.displayName ?? '';
+const authorName = $derived(formatAuthorDisplayName(g.author));
+
+const confirm = getConfirmService();
+
+async function handleDelete() {
+	const ok = await confirm.confirm({
+		title: m.geschichte_delete_confirm_title(),
+		body: m.geschichte_delete_confirm_body(),
+		confirmLabel: m.btn_delete(),
+		cancelLabel: m.btn_cancel(),
+		destructive: true
+	});
+	if (!ok) return;
+	const res = await csrfFetch(`/api/geschichten/${g.id}`, { method: 'DELETE' });
+	if (res.ok) {
+		goto('/geschichten');
+	}
 }
 </script>
 
@@ -41,15 +60,15 @@ function authorName(): string {
 				{/if}
 			</div>
 			<p class="font-sans text-sm text-ink-3">
-				{authorName()}
+				{authorName}
 				{#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}
 			</p>
 		</header>
 
 		{#if isJourney}
-			<JourneyReader geschichte={g} canBlogWrite={data.canBlogWrite} />
+			<JourneyReader geschichte={g} canBlogWrite={data.canBlogWrite} ondelete={handleDelete} />
 		{:else}
-			<StoryReader geschichte={g} canBlogWrite={data.canBlogWrite} />
+			<StoryReader geschichte={g} canBlogWrite={data.canBlogWrite} ondelete={handleDelete} />
 		{/if}
 	</article>
 </div>