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

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

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();