feat(lesereisen): StoryReader — extract body/persons/docs/actions, isJourney badge in detail header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-08 22:57:51 +02:00
parent 8fea94cb61
commit 8a6bc27979
3 changed files with 276 additions and 108 deletions
--- a/frontend/src/lib/geschichte/StoryReader.svelte
+++ b/frontend/src/lib/geschichte/StoryReader.svelte
@@ -0,0 +1,120 @@
+<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'];
+
+interface Props {
+	geschichte: GeschichteView;
+	canBlogWrite: boolean;
+}
+
+let { geschichte: g, canBlogWrite }: 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>
+
+<!--
+	Body styles are explicit (no `prose`) so the text uses the full max-w-3xl
+	parent width — Tailwind Typography's default `max-w-prose` clamps to ~65ch
+	and produces a much narrower column inside an already narrow page, which
+	Leonie flagged as unreadable for the senior-author persona.
+
+	Sanitised via safeHtml() (DOMPurify) on render — matches backend OWASP allow-list.
+-->
+<div
+	class="font-serif text-lg leading-relaxed text-ink [&_h2]:mt-8 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-bold [&_h3]:mt-6 [&_h3]:mb-2 [&_h3]:text-xl [&_h3]:font-bold [&_li]:mb-1 [&_ol]:mb-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mb-4 [&_ul]:mb-4 [&_ul]:list-disc [&_ul]:pl-6"
+>
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html sanitized}
+</div>
+
+<!-- Personen -->
+{#if g.persons && g.persons.length > 0}
+	<section class="mt-10 border-t border-line pt-6">
+		<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase">
+			{m.geschichten_persons_section()}
+		</h2>
+		<ul class="flex flex-wrap gap-2">
+			{#each g.persons as p (p.id)}
+				<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"
+					>
+						{personName(p)}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</section>
+{/if}
+
+<!-- Dokumente (JourneyItems) -->
+{#if g.items && g.items.some((i) => i.document)}
+	<section class="mt-8 border-t border-line pt-6">
+		<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase">
+			{m.geschichten_documents_section()}
+		</h2>
+		<ul class="flex flex-col gap-2">
+			{#each g.items.filter((i) => i.document) as item (item.id)}
+				<li>
+					<a
+						href="/documents/{item.document!.id}"
+						class="block rounded border border-line bg-surface px-4 py-3 font-serif text-base text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+					>
+						{m.geschichten_document_link_placeholder()}
+					</a>
+					{#if item.note}
+						<!-- plaintext — do NOT use {@html} here -->
+						<p class="mt-1 font-sans text-sm text-ink-3">{item.note}</p>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</section>
+{/if}
+
+<!-- Author actions -->
+{#if canBlogWrite}
+	<div class="mt-10 flex items-center gap-3 border-t border-line pt-6">
+		<a
+			href="/geschichten/{g.id}/edit"
+			class="inline-flex h-11 items-center rounded border border-line bg-surface px-4 font-sans text-sm font-medium text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+		>
+			{m.btn_edit()}
+		</a>
+		<button
+			type="button"
+			onclick={handleDelete}
+			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()}
+		</button>
+	</div>
+{/if}