feat(lesereisen): GeschichteListRow with JOURNEY badge + i18n keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/geschichte/GeschichteListRow.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { plainExcerpt } from '$lib/shared/utils/extractText';
+import { formatDate } from '$lib/shared/utils/date';
+import type { components } from '$lib/generated/api';
+
+type GeschichteRow = Pick<
+	components['schemas']['GeschichteSummary'],
+	'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
+>;
+
+let { geschichte }: { geschichte: GeschichteRow } = $props();
+
+const isJourney = $derived(geschichte.type === 'JOURNEY');
+
+const publishedAt = $derived.by(() => {
+	if (!geschichte.publishedAt) return null;
+	return formatDate(geschichte.publishedAt.slice(0, 10), 'short');
+});
+
+const authorName = $derived.by(() => {
+	const a = geschichte.author;
+	if (!a) return '';
+	const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim();
+	return full || a.email || '';
+});
+</script>
+
+<a href="/geschichten/{geschichte.id}" class="block">
+	<div class="mb-1 flex items-center gap-1.5">
+		<h2 class="font-serif text-xl font-bold text-ink">{geschichte.title}</h2>
+		{#if isJourney}
+			<span
+				data-testid="journey-badge"
+				class="inline-block rounded-full bg-journey-tint px-2 py-0.5 text-xs font-bold tracking-wider text-journey uppercase"
+			>
+				{m.journey_badge_list()}
+			</span>
+		{/if}
+	</div>
+	<p class="mb-3 font-sans text-xs text-ink-3">
+		{authorName}
+		{#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}
+	</p>
+	{#if geschichte.body}
+		<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
+		<p class="font-serif text-base text-ink-2">{plainExcerpt(geschichte.body, 150)}</p>
+	{/if}
+</a>

frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+const { default: GeschichteListRow } = await import('./GeschichteListRow.svelte');
+
+afterEach(cleanup);
+
+const baseRow = (overrides = {}) => ({
+	id: 'g1',
+	title: 'Die Reise nach Berlin',
+	body: '<p>Im Jahr 1923...</p>',
+	type: 'STORY' as 'STORY' | 'JOURNEY',
+	status: 'PUBLISHED' as 'PUBLISHED' | 'DRAFT',
+	author: { firstName: 'Anna', lastName: 'Schmidt', email: 'a@x' },
+	publishedAt: '2026-04-15T10:00:00Z',
+	...overrides
+});
+
+describe('GeschichteListRow', () => {
+	it('renders the title', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow() } });
+		await expect
+			.element(page.getByRole('heading', { level: 2 }))
+			.toHaveTextContent('Die Reise nach Berlin');
+	});
+
+	it('shows no badge for STORY type', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } });
+		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
+	});
+
+	it('shows no badge when type is undefined', async () => {
+		render(GeschichteListRow, {
+			props: { geschichte: baseRow({ type: undefined as unknown as 'STORY' | 'JOURNEY' }) }
+		});
+		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
+	});
+
+	it('shows REISE badge for JOURNEY type', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
+		const badge = document.querySelector('[data-testid="journey-badge"]');
+		expect(badge).not.toBeNull();
+		expect(badge?.textContent?.trim()).toBe('REISE');
+	});
+
+	it('badge is a plain <span>, not a nested interactive element', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
+		const badge = document.querySelector('[data-testid="journey-badge"]');
+		expect(badge?.tagName.toLowerCase()).toBe('span');
+	});
+
+	it('badge has text-xs class for WCAG readability', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
+		const badge = document.querySelector('[data-testid="journey-badge"]');
+		expect(badge?.className).toContain('text-xs');
+	});
+
+	it('renders author name in meta line', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow() } });
+		expect(document.body.textContent).toContain('Anna Schmidt');
+	});
+});