feat(dashboard): wire ReaderHeaderBar, grid content row, delete ReaderStatsStrip (#483)

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

frontend/src/lib/shared/dashboard/ReaderStatsStrip.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-import * as m from '$lib/paraglide/messages.js';
-
-interface Props {
-	documents: number | null;
-	persons: number | null;
-	stories: number | null;
-}
-
-const { documents, persons, stories }: Props = $props();
-</script>
-
-<div class="hidden gap-4 sm:flex">
-	<a
-		href="/documents"
-		class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
-	>
-		<span class="font-serif text-2xl font-bold text-brand-navy">{documents ?? '—'}</span>
-		<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
-			>{m.dashboard_reader_stats_documents()}</span
-		>
-	</a>
-
-	<a
-		href="/persons"
-		class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
-	>
-		<span class="font-serif text-2xl font-bold text-brand-navy">{persons ?? '—'}</span>
-		<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
-			>{m.dashboard_reader_stats_persons()}</span
-		>
-	</a>
-
-	<a
-		href="/geschichten"
-		class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
-	>
-		<span class="font-serif text-2xl font-bold text-brand-navy">{stories ?? '—'}</span>
-		<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
-			>{m.dashboard_reader_stats_stories()}</span
-		>
-	</a>
-</div>

frontend/src/lib/shared/dashboard/ReaderStatsStrip.svelte.spec.ts

@@ -1,37 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-
-import ReaderStatsStrip from './ReaderStatsStrip.svelte';
-
-afterEach(() => {
-	cleanup();
-});
-
-describe('ReaderStatsStrip', () => {
-	it('renders a link to /documents', async () => {
-		render(ReaderStatsStrip, { documents: 42, persons: 7, stories: 3 });
-		const link = page.getByRole('link', { name: /42/ });
-		await expect.element(link).toHaveAttribute('href', '/documents');
-	});
-
-	it('renders a link to /persons', async () => {
-		render(ReaderStatsStrip, { documents: 42, persons: 7, stories: 3 });
-		const link = page.getByRole('link', { name: /7/ });
-		await expect.element(link).toHaveAttribute('href', '/persons');
-	});
-
-	it('renders a link to /geschichten', async () => {
-		render(ReaderStatsStrip, { documents: 42, persons: 7, stories: 3 });
-		const link = page.getByRole('link', { name: /3/ });
-		await expect.element(link).toHaveAttribute('href', '/geschichten');
-	});
-
-	it('shows "—" when documents count is null', async () => {
-		render(ReaderStatsStrip, { documents: null, persons: null, stories: null });
-		const links = page.getByRole('link');
-		await expect.element(links.first()).toBeInTheDocument();
-		const text = ((await links.first().element()) as HTMLElement).textContent;
-		expect(text).toContain('—');
-	});
-});

frontend/src/routes/+page.svelte

@@ -5,7 +5,7 @@ import MissionControlStrip from '$lib/document/MissionControlStrip.svelte';
 import DashboardFamilyPulse from '$lib/shared/dashboard/DashboardFamilyPulse.svelte';
 import DashboardActivityFeed from '$lib/activity/DashboardActivityFeed.svelte';
 import EnrichmentBlock from '$lib/document/EnrichmentBlock.svelte';
-import ReaderStatsStrip from '$lib/shared/dashboard/ReaderStatsStrip.svelte';
+import ReaderHeaderBar from '$lib/shared/dashboard/ReaderHeaderBar.svelte';
 import ReaderPersonChips from '$lib/shared/dashboard/ReaderPersonChips.svelte';
 import ReaderDraftsModule from '$lib/shared/dashboard/ReaderDraftsModule.svelte';
 import ReaderRecentDocs from '$lib/shared/dashboard/ReaderRecentDocs.svelte';
@@ -30,15 +30,10 @@ const greetingText = $derived.by(() => {
 </svelte:head>
 
 <main class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
-	{#if data?.user}
-		<div class="mb-6">
-			<h1 class="font-serif text-[2rem] text-ink">{greetingText}</h1>
-		</div>
-	{/if}
-
 	{#if data.isReader}
 		<div class="flex flex-col gap-5">
-			<ReaderStatsStrip
+			<ReaderHeaderBar
+				name={data.user?.firstName ?? ''}
 				documents={data.readerStats?.totalDocuments ?? null}
 				persons={data.readerStats?.totalPersons ?? null}
 				stories={data.readerStats?.totalStories ?? null}
@@ -50,16 +45,17 @@ const greetingText = $derived.by(() => {
 
 			<ReaderPersonChips persons={data.topPersons ?? []} />
 
-			<div class="flex flex-col gap-5 md:flex-row">
-				<div class="flex-[3]">
-					<ReaderRecentDocs documents={data.recentDocs ?? []} />
-				</div>
-				<div class="flex-[2]">
-					<ReaderRecentStories stories={data.recentStories ?? []} />
-				</div>
+			<div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+				<ReaderRecentDocs documents={data.recentDocs ?? []} />
+				<ReaderRecentStories stories={data.recentStories ?? []} />
 			</div>
 		</div>
 	{:else}
+		{#if data?.user}
+			<div class="mb-6">
+				<h1 class="font-serif text-[2rem] text-ink">{greetingText}</h1>
+			</div>
+		{/if}
 		<div class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_320px] lg:items-start">
 			<div class="flex flex-col gap-5">
 				<DashboardResumeStrip resumeDoc={data.resumeDoc ?? null} />

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

@@ -102,13 +102,19 @@ describe('Home page – dashboard layout', () => {
 // ─── Reader dashboard layout ──────────────────────────────────────────────────
 
 describe('Home page – reader dashboard layout', () => {
-	it('renders ReaderStatsStrip totals when isReader is true', async () => {
+	it('renders reader header-bar totals when isReader is true', async () => {
 		render(Page, { data: readerData });
 		await expect.element(page.getByText('34')).toBeInTheDocument();
 		await expect.element(page.getByText('12')).toBeInTheDocument();
 		await expect.element(page.getByText('5')).toBeInTheDocument();
 	});
 
+	it('reader branch does not render h1 heading', async () => {
+		render(Page, { data: readerData });
+		const h1 = page.getByRole('heading', { level: 1 });
+		await expect.element(h1).not.toBeInTheDocument();
+	});
+
 	it('renders the recent-docs heading when isReader is true', async () => {
 		render(Page, { data: readerData });
 		await expect.element(page.getByText('Zuletzt aktualisiert')).toBeInTheDocument();