familienarchiv/frontend/src/lib/geschichte/StoryReader.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { safeHtml } from '$lib/shared/utils/sanitize';
import type { components } from '$lib/generated/api';

type GeschichteView = components['schemas']['GeschichteView'];

interface Props {
	geschichte: GeschichteView;
	canBlogWrite: boolean;
	ondelete?: () => Promise<void>;
}

let { geschichte: g, canBlogWrite, ondelete }: Props = $props();

const sanitized = $derived(safeHtml(g.body));

function personName(p: { firstName?: string; lastName?: string }): string {
	return [p.firstName, p.lastName].filter(Boolean).join(' ').trim();
}
</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}"
						style="display: inline-flex; min-height: 44px"
						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>
				</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={() => 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()}
		</button>
	</div>
{/if}