feat(geschichten): show blog writers' own drafts on the Geschichten overview (#807) (#813)

frontend/src/routes/+page.server.ts

@@ -1,6 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import { createApiClient } from '$lib/shared/api.server';
 import type { components } from '$lib/generated/api';
+import { settled } from '$lib/shared/server/settled';
 
 type StatsDTO = components['schemas']['StatsDTO'];
 type TranscriptionQueueItemDTO = components['schemas']['TranscriptionQueueItemDTO'];
@@ -14,12 +15,6 @@ type DocumentListItem = components['schemas']['DocumentListItem'];
 type GeschichteSummary = components['schemas']['GeschichteSummary'];
 type TagTreeNodeDTO = components['schemas']['TagTreeNodeDTO'];
 
-function settled<T>(res: PromiseSettledResult<unknown> | undefined): T | null {
-	if (res?.status !== 'fulfilled') return null;
-	const v = res.value as { response: Response; data: unknown };
-	return v.response.ok ? ((v.data as T) ?? null) : null;
-}
-
 export async function load({ fetch, parent }) {
 	const { canWrite, canAnnotate, canBlogWrite } = await parent();
 	// READ_ALL without WRITE_ALL or ANNOTATE_ALL — see ADR-007.

frontend/src/routes/geschichten/+page.server.ts

@@ -1,20 +1,23 @@
 import { error } from '@sveltejs/kit';
 import { createApiClient, extractErrorCode } from '$lib/shared/api.server';
 import { getErrorMessage } from '$lib/shared/errors';
+import { settled } from '$lib/shared/server/settled';
 import type { components } from '$lib/generated/api';
 import type { PageServerLoad } from './$types';
 
 type Person = components['schemas']['Person'];
+type GeschichteSummary = components['schemas']['GeschichteSummary'];
 
 const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
-export const load: PageServerLoad = async ({ url, fetch }) => {
+export const load: PageServerLoad = async ({ url, fetch, parent }) => {
+	const { canBlogWrite } = await parent();
 	const api = createApiClient(fetch);
 	const personIds = url.searchParams.getAll('personId');
 	const rawDocumentId = url.searchParams.get('documentId');
 	const documentId = rawDocumentId && UUID_PATTERN.test(rawDocumentId) ? rawDocumentId : null;
 
-	const [listResult, docResult, ...personResults] = await Promise.all([
+	const [listSettled, draftsSettled, docSettled, ...personResults] = await Promise.allSettled([
 		api.GET('/api/geschichten', {
 			params: {
 				query: {
@@ -24,20 +27,32 @@ export const load: PageServerLoad = async ({ url, fetch }) => {
 				}
 			}
 		}),
+		canBlogWrite
+			? api.GET('/api/geschichten', { params: { query: { status: 'DRAFT' } } })
+			: Promise.resolve(null),
 		documentId
 			? api.GET('/api/documents/{id}', { params: { path: { id: documentId } } })
 			: Promise.resolve(null),
 		...personIds.map((id) => api.GET('/api/persons/{id}', { params: { path: { id } } }))
 	]);
 
-	if (!listResult.response.ok) {
-		throw error(listResult.response.status, getErrorMessage(extractErrorCode(listResult.error)));
+	const listResult = listSettled.status === 'fulfilled' ? listSettled.value : null;
+	if (!listResult?.response.ok) {
+		throw error(
+			listResult?.response.status ?? 500,
+			getErrorMessage(extractErrorCode(listResult?.error))
+		);
 	}
 
-	const personFilters = personResults
-		.filter((r) => r && r.response.ok && r.data)
-		.map((r) => r!.data!) as Person[];
+	const drafts: GeschichteSummary[] = canBlogWrite
+		? (settled<GeschichteSummary[]>(draftsSettled) ?? [])
+		: [];
 
+	const personFilters = personResults
+		.filter((r) => r.status === 'fulfilled' && r.value?.response.ok && r.value?.data)
+		.map((r) => (r as PromiseFulfilledResult<{ response: Response; data: Person }>).value.data);
+
+	const docResult = docSettled.status === 'fulfilled' ? docSettled.value : null;
 	let documentFilter: { id: string; title: string | null } | null = null;
 	if (documentId) {
 		if (docResult && docResult.response.ok && docResult.data) {
@@ -53,6 +68,7 @@ export const load: PageServerLoad = async ({ url, fetch }) => {
 
 	return {
 		geschichten: listResult.data ?? [],
+		drafts,
 		personFilters,
 		documentFilter
 	};

frontend/src/routes/geschichten/+page.svelte

@@ -133,7 +133,32 @@ function removeDocument() {
 			</div>
 		{/if}
 
-		<!-- Rows -->
+		<!-- Entwürfe section (blog writers only, unfiltered) -->
+		{#if data.drafts.length > 0}
+			<div class="border-b-2 border-line">
+				<h2 class="px-3 pt-3 pb-1 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.geschichten_drafts_heading()}
+					<span class="ml-1 font-normal text-ink-3 normal-case"
+						>{m.geschichten_drafts_unfiltered_caption()}</span
+					>
+				</h2>
+				<ul>
+					{#each data.drafts as g (g.id)}
+						<li class="border-b border-line-2 last:border-b-0">
+							<GeschichteListRow geschichte={g} />
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+
+		<!-- Published rows -->
+		{#if data.drafts.length > 0}
+			<!-- Heading only when the Entwürfe section is present, to keep the h2 outline balanced -->
+			<h2 class="px-3 pt-3 pb-1 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.geschichten_published_heading()}
+			</h2>
+		{/if}
 		{#if data.geschichten.length === 0}
 			<div class="px-4 py-12 text-center font-serif text-sm text-ink-3 italic">
 				{emptyMessage}

frontend/src/routes/geschichten/page.server.test.ts

@@ -24,11 +24,18 @@ function makeUrl(params: Record<string, string | string[]> = {}) {
 	return url;
 }
 
-function callLoad(url: URL) {
+function callLoad(url: URL, parentData: { canBlogWrite?: boolean } = {}) {
 	return load({
 		url,
 		request: new Request('http://localhost/geschichten'),
-		fetch: vi.fn() as unknown as typeof fetch
+		fetch: vi.fn() as unknown as typeof fetch,
+		parent: vi.fn().mockResolvedValue({
+			canBlogWrite: false,
+			canWrite: false,
+			canAnnotate: false,
+			user: null,
+			...parentData
+		})
 	});
 }
 
@@ -191,3 +198,60 @@ describe('geschichten page load — documentFilter title resolution', () => {
 		);
 	});
 });
+
+// ─── draft fetch ──────────────────────────────────────────────────────────────
+
+describe('geschichten page load — draft fetch', () => {
+	it('makes a second API call for DRAFT stories when canBlogWrite is true', async () => {
+		const mockGet = mockApi();
+
+		await callLoad(makeUrl(), { canBlogWrite: true });
+
+		const draftCall = mockGet.mock.calls.find(
+			([, opts]: [string, { params?: { query?: { status?: string } } }]) =>
+				opts?.params?.query?.status === 'DRAFT'
+		);
+		expect(draftCall).toBeDefined();
+	});
+
+	it('does NOT make a DRAFT API call when canBlogWrite is false', async () => {
+		const mockGet = mockApi();
+
+		await callLoad(makeUrl(), { canBlogWrite: false });
+
+		const draftCall = mockGet.mock.calls.find(
+			([, opts]: [string, { params?: { query?: { status?: string } } }]) =>
+				opts?.params?.query?.status === 'DRAFT'
+		);
+		expect(draftCall).toBeUndefined();
+	});
+
+	it('returns empty drafts array when the DRAFT fetch rejects', async () => {
+		const mockGet = vi
+			.fn()
+			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] })
+			.mockRejectedValueOnce(new Error('network error'));
+		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
+			typeof createApiClient
+		>);
+
+		const result = await callLoad(makeUrl(), { canBlogWrite: true });
+
+		expect(result.drafts).toEqual([]);
+	});
+
+	it('returns drafts in page data when canBlogWrite is true', async () => {
+		const draft = { id: 'draft-1', title: 'My Draft', status: 'DRAFT' };
+		const mockGet = vi
+			.fn()
+			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] })
+			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [draft] });
+		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
+			typeof createApiClient
+		>);
+
+		const result = await callLoad(makeUrl(), { canBlogWrite: true });
+
+		expect(result.drafts).toEqual([draft]);
+	});
+});

frontend/src/routes/geschichten/page.svelte.spec.ts

@@ -26,6 +26,7 @@ function person(id: string, displayName: string) {
 function makeData(overrides: Partial<PageData> = {}): PageData {
 	return {
 		geschichten: [],
+		drafts: [],
 		personFilters: [],
 		documentFilter: null,
 		canBlogWrite: false,
@@ -349,3 +350,62 @@ describe('geschichten page — multi-person filter chips', () => {
 		expect(addEl.className).toContain('h-11');
 	});
 });
+
+// ─── Entwürfe section ─────────────────────────────────────────────────────────
+
+describe('geschichten page — Entwürfe section', () => {
+	const draft = () =>
+		({
+			id: 'draft-1',
+			title: 'Mein Entwurf',
+			body: '<p>test</p>',
+			type: 'STORY',
+			status: 'DRAFT',
+			author: { firstName: 'Max', lastName: 'Muster' },
+			publishedAt: null
+		}) as unknown as PageData['geschichten'][0];
+
+	it('Entwürfe section is hidden when drafts array is empty', async () => {
+		render(Page, { data: makeData({ drafts: [] }) });
+		const heading = Array.from(document.querySelectorAll('h2')).find(
+			(h) => h.textContent?.includes('Entwürfe') || h.textContent?.includes('Drafts')
+		);
+		expect(heading).toBeUndefined();
+	});
+
+	it('Entwürfe section is visible when drafts are present', async () => {
+		render(Page, { data: makeData({ drafts: [draft()] as PageData['geschichten'] }) });
+		const heading = Array.from(document.querySelectorAll('h2')).find(
+			(h) => h.textContent?.includes('Entwürfe') || h.textContent?.includes('Drafts')
+		);
+		expect(heading).not.toBeUndefined();
+	});
+
+	it('renders a row for each draft story', async () => {
+		render(Page, { data: makeData({ drafts: [draft()] as PageData['geschichten'] }) });
+		const link = document.querySelector('a[href="/geschichten/draft-1"]');
+		expect(link).not.toBeNull();
+	});
+
+	it('draft row shows the draft badge', async () => {
+		render(Page, { data: makeData({ drafts: [draft()] as PageData['geschichten'] }) });
+		const badge = document.querySelector('[data-testid="draft-badge"]');
+		expect(badge).not.toBeNull();
+	});
+
+	it('Veröffentlicht heading is present when the Entwürfe section is visible', async () => {
+		render(Page, { data: makeData({ drafts: [draft()] as PageData['geschichten'] }) });
+		const heading = Array.from(document.querySelectorAll('h2')).find(
+			(h) => h.textContent?.includes('Veröffentlicht') || h.textContent?.includes('Published')
+		);
+		expect(heading).not.toBeUndefined();
+	});
+
+	it('Veröffentlicht heading is absent when there are no drafts', async () => {
+		render(Page, { data: makeData({ drafts: [] }) });
+		const heading = Array.from(document.querySelectorAll('h2')).find(
+			(h) => h.textContent?.includes('Veröffentlicht') || h.textContent?.includes('Published')
+		);
+		expect(heading).toBeUndefined();
+	});
+});