feat(dashboard): complete frontend redesign for Issue #271

- +layout.svelte: Upload button in header (authenticated users only) - +page.server.ts: call /api/dashboard/resume, /pulse, /activity; remove deprecated /api/documents/incomplete and /recent-activity - +page.svelte: 2-col grid layout (main + 320px sidebar), greeting, DashboardFamilyPulse + DashboardActivityFeed in sidebar - DashboardResumeStrip: refactored to use server data (resumeDoc prop), SVG thumbnail, progress bar with aria-*, empty state, CTA - DashboardFamilyPulse: new component — weekly stats from audit_log - DashboardActivityFeed: new component — activity feed with "für dich" badge - Update specs for new data shapes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-19 17:44:08 +02:00
parent 99247ed58d
commit 10dbce1c70
10 changed files with 488 additions and 157 deletions
--- a/frontend/src/lib/components/DashboardActivityFeed.svelte
+++ b/frontend/src/lib/components/DashboardActivityFeed.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import type { ActivityFeedItemDTO } from '$lib/generated/api';
+
+interface Props {
+	feed: ActivityFeedItemDTO[];
+}
+
+const { feed }: Props = $props();
+
+const verbMap: Record<string, string> = {
+	TEXT_SAVED: m.audit_action_text_saved(),
+	FILE_UPLOADED: m.audit_action_file_uploaded(),
+	ANNOTATION_CREATED: m.audit_action_annotation_created(),
+	COMMENT_ADDED: m.audit_action_comment_added(),
+	MENTION_CREATED: m.audit_action_mention_created()
+};
+
+function verb(kind: string): string {
+	return verbMap[kind] ?? kind;
+}
+
+function formatDate(iso: string): string {
+	return new Intl.DateTimeFormat('de-DE', {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric'
+	}).format(new Date(iso));
+}
+</script>
+
+<section class="rounded-sm border border-line bg-surface p-5">
+	<div class="mb-3 flex items-center justify-between">
+		<h2 class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.feed_caption()}
+		</h2>
+		<a href="/documents" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
+			>Alle →</a
+		>
+	</div>
+
+	{#if feed.length > 0}
+		<ul class="flex flex-col gap-3">
+			{#each feed as item (item.happenedAt + item.documentId + item.kind)}
+				<li class="flex items-start gap-3">
+					{#if item.actor}
+						<span
+							class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full font-sans text-sm font-bold text-white"
+							style="background:{item.actor.color}">{item.actor.initials}</span
+						>
+					{:else}
+						<span
+							class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-line font-sans text-sm text-ink-3"
+							>?</span
+						>
+					{/if}
+
+					<div class="min-w-0 flex-1">
+						<p class="font-sans text-sm leading-snug text-ink">
+							{#if item.actor}
+								<strong>{item.actor.name ?? item.actor.initials}</strong>
+							{/if}
+							{verb(item.kind)}
+							<a href="/documents/{item.documentId}" class="underline hover:text-accent">
+								{item.documentTitle}
+							</a>
+							{#if item.youMentioned}
+								<span
+									class="ml-1.5 inline-block rounded-full border border-accent px-2 py-px font-sans text-[10px] font-bold text-accent"
+								>
+									{m.feed_for_you()}
+								</span>
+							{/if}
+						</p>
+						<p class="mt-0.5 font-sans text-xs text-ink-3">{formatDate(item.happenedAt)}</p>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</section>
--- a/frontend/src/lib/components/DashboardActivityFeed.svelte.spec.ts
+++ b/frontend/src/lib/components/DashboardActivityFeed.svelte.spec.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+import DashboardActivityFeed from './DashboardActivityFeed.svelte';
+import type { components } from '$lib/generated/api';
+
+type ActivityFeedItemDTO = components['schemas']['ActivityFeedItemDTO'];
+
+afterEach(() => {
+	cleanup();
+});
+
+const baseItem: ActivityFeedItemDTO = {
+	kind: 'TEXT_SAVED',
+	actor: { initials: 'MR', color: '#7a4f9a', name: 'Max Raddatz' },
+	documentId: 'doc-1',
+	documentTitle: 'Brief 1920',
+	happenedAt: '2026-04-19T10:00:00Z',
+	youMentioned: false
+};
+
+describe('DashboardActivityFeed', () => {
+	it('renders "für dich" badge when youMentioned is true', async () => {
+		const item: ActivityFeedItemDTO = { ...baseItem, kind: 'MENTION_CREATED', youMentioned: true };
+		render(DashboardActivityFeed, { feed: [item] });
+		const badge = page.getByText('für dich');
+		await expect.element(badge).toBeInTheDocument();
+	});
+
+	it('does not render "für dich" badge when youMentioned is false', async () => {
+		render(DashboardActivityFeed, { feed: [baseItem] });
+		const badge = page.getByText('für dich');
+		await expect.element(badge).not.toBeInTheDocument();
+	});
+
+	it('renders empty state when feed is empty', async () => {
+		render(DashboardActivityFeed, { feed: [] });
+		const section = page.getByText('Kommentare & Aktivität');
+		await expect.element(section).toBeInTheDocument();
+	});
+});
--- a/frontend/src/lib/components/DashboardFamilyPulse.svelte
+++ b/frontend/src/lib/components/DashboardFamilyPulse.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import type { DashboardPulseDTO } from '$lib/generated/api';
+
+interface Props {
+	pulse: DashboardPulseDTO | null;
+}
+
+const { pulse }: Props = $props();
+</script>
+
+{#if pulse !== null}
+	<section class="rounded-sm border border-line bg-surface p-5">
+		<p class="font-sans text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
+			{m.pulse_eyebrow()}
+		</p>
+
+		{#if pulse.pages > 0}
+			<h2 class="mt-1 font-serif text-[1.375rem] leading-snug text-ink">
+				Ihr habt <strong>{pulse.pages}</strong> Seiten bearbeitet.
+			</h2>
+		{/if}
+
+		{#if pulse.yourPages > 0}
+			<p class="font-serif text-sm text-ink-2">
+				Du selbst hast {pulse.yourPages} davon bearbeitet.
+			</p>
+		{/if}
+
+		{#if pulse.contributors.length > 0}
+			<div class="mt-3 flex items-center gap-1">
+				<p class="mr-1 font-sans text-[11px] text-ink-3">{m.pulse_contributors()}</p>
+				{#each pulse.contributors as c (c.initials)}
+					<span
+						class="-ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full font-sans text-[11px] font-bold text-white ring-2 ring-white first:ml-0"
+						style="background:{c.color}"
+						title={c.name ?? ''}>{c.initials}</span
+					>
+				{/each}
+			</div>
+		{/if}
+
+		<div class="mt-4 grid grid-cols-3 gap-2">
+			<div class="flex flex-col gap-0.5">
+				<span class="font-serif text-[1.875rem] leading-none font-bold text-ink"
+					>{pulse.annotated}</span
+				>
+				<span class="flex items-center gap-1 font-sans text-[11px] text-ink-3">
+					<span class="text-[8px]" style="color:#00c7b1">●</span>{m.pulse_transcribed()}
+				</span>
+			</div>
+			<div class="flex flex-col gap-0.5">
+				<span class="font-serif text-[1.875rem] leading-none font-bold text-ink"
+					>{pulse.transcribed}</span
+				>
+				<span class="flex items-center gap-1 font-sans text-[11px] text-ink-3">
+					<span class="text-[8px]" style="color:#5a8a6a">●</span>{m.pulse_reviewed()}
+				</span>
+			</div>
+			<div class="flex flex-col gap-0.5">
+				<span class="font-serif text-[1.875rem] leading-none font-bold text-ink"
+					>{pulse.uploaded}</span
+				>
+				<span class="flex items-center gap-1 font-sans text-[11px] text-ink-3">
+					<span class="text-[8px]" style="color:#3060b0">●</span>{m.pulse_uploaded()}
+				</span>
+			</div>
+		</div>
+	</section>
+{/if}
--- a/frontend/src/lib/components/DashboardResumeStrip.svelte
+++ b/frontend/src/lib/components/DashboardResumeStrip.svelte
@@ -1,37 +1,115 @@
 <script lang="ts">
-import { onMount } from 'svelte';
 import * as m from '$lib/paraglide/messages.js';
+import type { DashboardResumeDTO } from '$lib/generated/api';

-interface LastVisited {
-	id: string;
-	title: string;
+interface Props {
+	resumeDoc: DashboardResumeDTO | null;
 }

-let lastVisited = $state<LastVisited | null>(null);
-
-onMount(() => {
-	try {
-		const raw = localStorage.getItem('familienarchiv.lastVisited');
-		if (raw) {
-			const parsed = JSON.parse(raw) as LastVisited;
-			if (parsed?.id) {
-				lastVisited = parsed;
-			}
-		}
-	} catch {
-		// ignore malformed JSON
-	}
-});
+const { resumeDoc }: Props = $props();
 </script>

-{#if lastVisited}
+{#if resumeDoc === null}
 	<div
-		data-testid="resume-strip"
-		class="flex items-center gap-2 rounded-sm border border-line bg-surface px-4 py-3 font-sans text-sm"
+		data-testid="resume-strip-empty"
+		class="rounded-sm border border-line bg-surface p-8 text-center"
 	>
-		<span class="text-ink-2">{m.dashboard_resume_label()}</span>
-		<a href="/documents/{lastVisited.id}" class="font-medium text-ink hover:underline">
-			{lastVisited.title || m.dashboard_resume_fallback()}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="mx-auto text-ink-3"
+		>
+			<rect width="20" height="16" x="2" y="4" rx="2" />
+			<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+		</svg>
+		<h2 class="mt-3 font-serif text-xl text-ink">{m.dashboard_empty_title()}</h2>
+		<p class="mt-1 font-sans text-sm text-ink-2">{m.dashboard_empty_body()}</p>
+		<a
+			href="/documents"
+			class="mt-4 inline-block font-sans text-sm font-bold text-accent hover:underline"
+		>
+			{m.dashboard_empty_cta()}
 		</a>
 	</div>
+{:else}
+	<div data-testid="resume-strip" class="flex gap-4 rounded-sm border border-line bg-surface p-5">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="180"
+			height="246"
+			viewBox="0 0 180 246"
+			aria-hidden="true"
+			class="shrink-0"
+		>
+			<defs>
+				<linearGradient id="parchment" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0%" stop-color="#f5f0e8" />
+					<stop offset="100%" stop-color="#ede8d5" />
+				</linearGradient>
+			</defs>
+			<rect width="180" height="246" fill="url(#parchment)" />
+			<line x1="30" y1="40" x2="150" y2="40" stroke="#b0a898" stroke-width="1" />
+			<line x1="30" y1="70" x2="150" y2="70" stroke="#b0a898" stroke-width="1" />
+			<line x1="30" y1="100" x2="150" y2="100" stroke="#b0a898" stroke-width="1" />
+			<line x1="30" y1="130" x2="150" y2="130" stroke="#b0a898" stroke-width="1" />
+			<line x1="30" y1="160" x2="150" y2="160" stroke="#b0a898" stroke-width="1" />
+		</svg>
+
+		<div class="flex flex-1 flex-col gap-2">
+			<p class="flex items-center gap-1.5 font-sans text-xs text-ink-3">
+				<span class="text-[#A6DAD8]">●</span>
+				{m.dashboard_resume_label()}
+				·
+				{m.dashboard_page_of({ page: resumeDoc.page, pages: resumeDoc.pages })}
+			</p>
+
+			<h2 class="font-serif text-[1.75rem] leading-tight text-ink">{resumeDoc.title}</h2>
+
+			<p class="font-sans text-sm text-ink-2 italic">{resumeDoc.caption}</p>
+
+			<blockquote
+				class="border-l-[3px] border-accent pl-3 font-serif text-[1.0625rem] leading-relaxed text-ink-2"
+			>
+				{resumeDoc.excerpt}
+			</blockquote>
+
+			<div class="mt-auto flex items-center gap-3 pt-2">
+				<span class="font-sans text-xs font-bold text-ink">{resumeDoc.pct}%</span>
+				<div
+					role="progressbar"
+					aria-valuenow={resumeDoc.pct}
+					aria-valuemin={0}
+					aria-valuemax={100}
+					class="h-1.5 flex-1 overflow-hidden rounded-full bg-line"
+				>
+					<div class="h-full rounded-full bg-accent" style="width:{resumeDoc.pct}%"></div>
+				</div>
+				{#each resumeDoc.collaborators.slice(0, 3) as collab (collab.initials)}
+					<span
+						class="-ml-1 inline-flex h-6 w-6 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white"
+						style="background:{collab.color}">{collab.initials}</span
+					>
+				{/each}
+			</div>
+
+			<div class="mt-1 flex items-center gap-4">
+				<a
+					href="/documents/{resumeDoc.documentId}"
+					class="inline-block rounded-sm bg-accent px-4 py-1.5 font-sans text-sm font-bold text-white transition-opacity hover:opacity-90"
+				>
+					{m.dashboard_resume_cta()}
+				</a>
+				<a href="/documents" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink">
+					{m.dashboard_resume_other()}
+				</a>
+			</div>
+		</div>
+	</div>
 {/if}
--- a/frontend/src/lib/components/DashboardResumeStrip.svelte.spec.ts
+++ b/frontend/src/lib/components/DashboardResumeStrip.svelte.spec.ts
@@ -3,48 +3,48 @@ import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';

 import DashboardResumeStrip from './DashboardResumeStrip.svelte';
+import type { components } from '$lib/generated/api';
+
+type DashboardResumeDTO = components['schemas']['DashboardResumeDTO'];

 afterEach(() => {
 	cleanup();
-	localStorage.clear();
 });

+const mockResume: DashboardResumeDTO = {
+	documentId: 'doc-123',
+	title: 'Geburtsurkunde 1920',
+	caption: 'Max Mustermann · 1920-01-01',
+	excerpt: 'Hiermit wird beurkundet…',
+	page: 1,
+	pages: 4,
+	pct: 75,
+	collaborators: []
+};
+
 describe('DashboardResumeStrip', () => {
-	it('renders nothing when no last-visited document in localStorage', async () => {
-		render(DashboardResumeStrip, {});
-		const strip = page.getByTestId('resume-strip');
-		await expect.element(strip).not.toBeInTheDocument();
+	it('renders empty state heading when resumeDoc is null', async () => {
+		render(DashboardResumeStrip, { resumeDoc: null });
+		const heading = page.getByRole('heading', { name: /Noch kein Dokument begonnen/i });
+		await expect.element(heading).toBeInTheDocument();
 	});

-	it('shows the strip with link when localStorage has a document', async () => {
-		localStorage.setItem(
-			'familienarchiv.lastVisited',
-			JSON.stringify({ id: 'doc-123', title: 'Geburtsurkunde 1920' })
-		);
-		render(DashboardResumeStrip, {});
-		const strip = page.getByTestId('resume-strip');
-		await expect.element(strip).toBeInTheDocument();
-		const link = page.getByRole('link', { name: /Geburtsurkunde 1920/ });
-		await expect.element(link).toBeInTheDocument();
+	it('renders progressbar with correct aria-valuenow when resumeDoc is provided', async () => {
+		render(DashboardResumeStrip, { resumeDoc: mockResume });
+		const bar = page.getByRole('progressbar');
+		await expect.element(bar).toBeInTheDocument();
+		await expect.element(bar).toHaveAttribute('aria-valuenow', '75');
+	});
+
+	it('shows document title when resumeDoc is provided', async () => {
+		render(DashboardResumeStrip, { resumeDoc: mockResume });
+		const title = page.getByRole('heading', { name: /Geburtsurkunde 1920/i });
+		await expect.element(title).toBeInTheDocument();
+	});
+
+	it('links to the document for the CTA', async () => {
+		render(DashboardResumeStrip, { resumeDoc: mockResume });
+		const link = page.getByRole('link', { name: /Weitertranskribieren/i });
 		await expect.element(link).toHaveAttribute('href', '/documents/doc-123');
 	});
-
-	it('uses title fallback text when title is empty', async () => {
-		localStorage.setItem(
-			'familienarchiv.lastVisited',
-			JSON.stringify({ id: 'doc-456', title: '' })
-		);
-		render(DashboardResumeStrip, {});
-		const strip = page.getByTestId('resume-strip');
-		await expect.element(strip).toBeInTheDocument();
-		const link = page.getByRole('link');
-		await expect.element(link).toHaveAttribute('href', '/documents/doc-456');
-	});
-
-	it('renders nothing when localStorage contains malformed JSON', async () => {
-		localStorage.setItem('familienarchiv.lastVisited', '{not valid json');
-		render(DashboardResumeStrip, {});
-		const strip = page.getByTestId('resume-strip');
-		await expect.element(strip).not.toBeInTheDocument();
-	});
 });
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -28,7 +28,9 @@ onMount(() => {
 });

 const isAuthPage = $derived(
-	['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))
+	['/login', '/register', '/forgot-password', '/reset-password'].some((p) =>
+		page.url.pathname.startsWith(p)
+	)
 );

 const userInitials = $derived.by(() => {
@@ -50,6 +52,30 @@ const userInitials = $derived.by(() => {

 					<!-- Right Side -->
 					<div class="flex items-center gap-3">
+						{#if data?.user}
+							<a
+								href="/documents/new"
+								class="inline-flex items-center gap-2 rounded-sm border border-white/25 px-3.5 py-1.5 font-sans text-[11px] font-bold tracking-[.12em] text-white uppercase transition-colors hover:bg-white/10"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									aria-hidden="true"
+								>
+									<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+									<polyline points="17 8 12 3 7 8" />
+									<line x1="12" y1="3" x2="12" y2="15" />
+								</svg>
+								Hochladen
+							</a>
+						{/if}
 						<!-- Language selector (desktop only — mobile lives in nav drawer) -->
 						<div
 							class="hidden items-center gap-1 pr-3 lg:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
--- a/frontend/src/routes/+page.server.ts
+++ b/frontend/src/routes/+page.server.ts
@@ -2,12 +2,14 @@ import { redirect } from '@sveltejs/kit';
 import { createApiClient } from '$lib/api.server';
 import type { components } from '$lib/generated/api';

-type IncompleteDocumentDTO = components['schemas']['IncompleteDocumentDTO'];
 type StatsDTO = components['schemas']['StatsDTO'];
 type Document = components['schemas']['Document'];
 type SearchMatchData = components['schemas']['SearchMatchData'];
 type TranscriptionQueueItemDTO = components['schemas']['TranscriptionQueueItemDTO'];
 type TranscriptionWeeklyStatsDTO = components['schemas']['TranscriptionWeeklyStatsDTO'];
+type DashboardResumeDTO = components['schemas']['DashboardResumeDTO'];
+type DashboardPulseDTO = components['schemas']['DashboardPulseDTO'];
+type ActivityFeedItemDTO = components['schemas']['ActivityFeedItemDTO'];

 export async function load({ url, fetch }) {
 	const q = url.searchParams.get('q') || '';
@@ -81,10 +83,10 @@ export async function load({ url, fetch }) {
 		const senderObj = allPersons.find((p) => p.id === senderId);
 		const receiverObj = allPersons.find((p) => p.id === receiverId);

-		// Dashboard widgets — failures are isolated and don't crash the page
 		let stats: StatsDTO | null = null;
-		let incompleteDocs: IncompleteDocumentDTO[] = [];
-		let recentDocs: Document[] = [];
+		let resumeDoc: DashboardResumeDTO | null = null;
+		let pulse: DashboardPulseDTO | null = null;
+		let activityFeed: ActivityFeedItemDTO[] = [];
 		let segmentationDocs: TranscriptionQueueItemDTO[] = [];
 		let transcriptionDocs: TranscriptionQueueItemDTO[] = [];
 		let readyDocs: TranscriptionQueueItemDTO[] = [];
@@ -93,16 +95,18 @@ export async function load({ url, fetch }) {
 		if (isDashboard) {
 			const [
 				statsResult,
-				incompleteResult,
-				recentResult,
+				resumeResult,
+				pulseResult,
+				activityResult,
 				segmentationResult,
 				transcriptionResult,
 				readyResult,
 				weeklyStatsResult
 			] = await Promise.allSettled([
 				api.GET('/api/stats'),
-				api.GET('/api/documents/incomplete', { params: { query: { size: 3 } } }),
-				api.GET('/api/documents/recent-activity', { params: { query: { size: 5 } } }),
+				api.GET('/api/dashboard/resume'),
+				api.GET('/api/dashboard/pulse'),
+				api.GET('/api/dashboard/activity', { params: { query: { limit: 7 } } }),
 				api.GET('/api/transcription/segmentation-queue'),
 				api.GET('/api/transcription/transcription-queue'),
 				api.GET('/api/transcription/ready-to-read'),
@@ -112,11 +116,14 @@ export async function load({ url, fetch }) {
 			if (statsResult.status === 'fulfilled' && statsResult.value.response.ok) {
 				stats = statsResult.value.data ?? null;
 			}
-			if (incompleteResult.status === 'fulfilled' && incompleteResult.value.response.ok) {
-				incompleteDocs = incompleteResult.value.data ?? [];
+			if (resumeResult.status === 'fulfilled' && resumeResult.value.response.ok) {
+				resumeDoc = (resumeResult.value.data as DashboardResumeDTO) ?? null;
 			}
-			if (recentResult.status === 'fulfilled' && recentResult.value.response.ok) {
-				recentDocs = recentResult.value.data ?? [];
+			if (pulseResult.status === 'fulfilled' && pulseResult.value.response.ok) {
+				pulse = (pulseResult.value.data as DashboardPulseDTO) ?? null;
+			}
+			if (activityResult.status === 'fulfilled' && activityResult.value.response.ok) {
+				activityFeed = (activityResult.value.data as ActivityFeedItemDTO[]) ?? [];
 			}
 			if (segmentationResult.status === 'fulfilled' && segmentationResult.value.response.ok) {
 				segmentationDocs = (segmentationResult.value.data ?? []) as TranscriptionQueueItemDTO[];
@@ -138,15 +145,16 @@ export async function load({ url, fetch }) {
 			total,
 			matchData,
 			stats,
-			incompleteDocs,
-			recentDocs,
+			resumeDoc,
+			pulse,
+			activityFeed,
 			segmentationDocs,
 			transcriptionDocs,
 			readyDocs,
 			weeklyStats,
 			initialValues: {
-				senderName: senderObj?.displayName ?? '',
-				receiverName: receiverObj?.displayName ?? ''
+				senderName: senderObj ? `${senderObj.firstName} ${senderObj.lastName}`.trim() : '',
+				receiverName: receiverObj ? `${receiverObj.firstName} ${receiverObj.lastName}`.trim() : ''
 			},
 			filters: { q, from, to, senderId, receiverId, tags, sort, dir, tagQ, tagOp },
 			error: null as string | null
@@ -160,8 +168,9 @@ export async function load({ url, fetch }) {
 			total: 0,
 			matchData: {} as Record<string, SearchMatchData>,
 			stats: null,
-			incompleteDocs: [],
-			recentDocs: [],
+			resumeDoc: null,
+			pulse: null,
+			activityFeed: [],
 			segmentationDocs: [],
 			transcriptionDocs: [],
 			readyDocs: [],
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -7,10 +7,10 @@ import SearchFilterBar from './SearchFilterBar.svelte';
 import DropZone from './DropZone.svelte';
 import DocumentList from './DocumentList.svelte';
 import DashboardResumeStrip from '$lib/components/DashboardResumeStrip.svelte';
-import DashboardNeedsMetadata from '$lib/components/DashboardNeedsMetadata.svelte';
-import DashboardRecentDocuments from '$lib/components/DashboardRecentDocuments.svelte';
 import MissionControlStrip from '$lib/components/MissionControlStrip.svelte';
-import { m } from '$lib/paraglide/messages.js';
+import DashboardFamilyPulse from '$lib/components/DashboardFamilyPulse.svelte';
+import DashboardActivityFeed from '$lib/components/DashboardActivityFeed.svelte';
+import * as m from '$lib/paraglide/messages.js';

 let { data } = $props();

@@ -66,7 +66,6 @@ function handleImmediateSearch() {
 	triggerSearch();
 }

-// Trigger search when tags change
 let prevTagStr = untrack(() => tagNames.map((t) => t.name).join(','));
 $effect(() => {
 	const cur = tagNames.map((t) => t.name).join(',');
@@ -76,8 +75,6 @@ $effect(() => {
 	}
 });

-// Sync local state with server data after navigation.
-// Guard q: skip overwrite while the user is actively typing in the search field.
 $effect(() => {
 	if (!qFocused) q = data.filters?.q || '';
 	from = data.filters?.from || '';
@@ -92,10 +89,13 @@ $effect(() => {
 	if (hasAdvancedFilters(data.filters)) showAdvanced = true;
 });

-// Right column is only rendered when there is something to show.
-// Omitting it prevents an empty 300px ghost column for read-only users
-// with a complete archive.
-const showRightColumn = $derived(data.canWrite || (data.incompleteDocs?.length ?? 0) > 0);
+const greetingText = $derived.by(() => {
+	const name = data?.user?.firstName ?? '';
+	const h = new Date().getHours();
+	if (h < 12) return m.greeting_morning({ name });
+	if (h < 18) return m.greeting_day({ name });
+	return m.greeting_evening({ name });
+});
 </script>

 <svelte:head>
@@ -125,35 +125,35 @@ const showRightColumn = $derived(data.canWrite || (data.incompleteDocs?.length ?
 	/>

 	{#if data.isDashboard}
-		<DashboardResumeStrip />
+		{#if data?.user}
+			<div class="mb-6">
+				<h1 class="font-serif text-[2rem] text-ink">{greetingText}</h1>
+			</div>
+		{/if}

-		<!-- Classic Split: right column first in DOM so it appears above recent docs on mobile.
-		     lg:order-last moves it back to the visual right on desktop. -->
-		<!-- No items-start — CSS Grid stretch default makes both columns equal height -->
-		<div class="mt-4 grid grid-cols-1 gap-4 {showRightColumn ? 'lg:grid-cols-[1fr_300px]' : ''}">
-			{#if showRightColumn}
-				<div data-testid="dashboard-right-column" class="flex h-full flex-col gap-4 lg:order-last">
-					{#if data.canWrite}
-						<DropZone />
-					{/if}
-					<!-- flex-1 + min-h-0 fills remaining height after DropZone.
-					     min-h-0 overrides the default min-height:auto that prevents flex
-					     children from shrinking below their content size. -->
-					<div class="flex min-h-0 flex-1 flex-col">
-						<DashboardNeedsMetadata incompleteDocs={data.incompleteDocs ?? []} />
-					</div>
-				</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} />

-			<DashboardRecentDocuments recentDocs={data.recentDocs ?? []} stats={data.stats} />
+				<section aria-label={m.dashboard_mission_caption()}>
+					<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+						{m.dashboard_mission_caption()}
+					</h2>
+					<MissionControlStrip
+						segmentationDocs={data.segmentationDocs ?? []}
+						transcriptionDocs={data.transcriptionDocs ?? []}
+						readyDocs={data.readyDocs ?? []}
+						weeklyStats={data.weeklyStats ?? null}
+					/>
+				</section>
+			</div>
+
+			<div class="flex flex-col gap-5 lg:sticky lg:top-[80px]">
+				<DashboardFamilyPulse pulse={data.pulse ?? null} />
+				<DashboardActivityFeed feed={data.activityFeed ?? []} />
+				<DropZone />
+			</div>
 		</div>
-
-		<MissionControlStrip
-			segmentationDocs={data.segmentationDocs ?? []}
-			transcriptionDocs={data.transcriptionDocs ?? []}
-			readyDocs={data.readyDocs ?? []}
-			weeklyStats={data.weeklyStats ?? null}
-		/>
 	{:else}
 		<DocumentList
 			documents={data.documents ?? []}
--- a/frontend/src/routes/page.server.spec.ts
+++ b/frontend/src/routes/page.server.spec.ts
@@ -22,7 +22,7 @@ function makeUrl(params: Record<string, string | string[]> = {}) {
 // ─── dashboard mode (no search filters) ──────────────────────────────────────

 describe('home page load — dashboard mode', () => {
-	it('sets isDashboard true and fetches stats, incomplete, and recent APIs', async () => {
+	it('sets isDashboard true and fetches stats, resume, pulse, and activity APIs', async () => {
 		const mockGet = vi
 			.fn()
 			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] }) // persons
@@ -30,8 +30,31 @@ describe('home page load — dashboard mode', () => {
 				response: { ok: true },
 				data: { totalDocuments: 42, totalPersons: 7 }
 			}) // stats
-			.mockResolvedValueOnce({ response: { ok: true }, data: [{ id: 'd1' }] }) // incomplete
-			.mockResolvedValueOnce({ response: { ok: true }, data: [{ id: 'd2' }] }) // recent
+			.mockResolvedValueOnce({
+				response: { ok: true },
+				data: {
+					documentId: 'd1',
+					title: 'T',
+					caption: '',
+					excerpt: '',
+					page: 1,
+					pages: 2,
+					pct: 50,
+					collaborators: []
+				}
+			}) // resume
+			.mockResolvedValueOnce({
+				response: { ok: true },
+				data: {
+					pages: 5,
+					annotated: 1,
+					transcribed: 2,
+					uploaded: 1,
+					yourPages: 3,
+					contributors: []
+				}
+			}) // pulse
+			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // activity
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // segmentation-queue
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // transcription-queue
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // ready-to-read
@@ -47,8 +70,9 @@ describe('home page load — dashboard mode', () => {

 		expect(result.isDashboard).toBe(true);
 		expect(result.stats).toEqual({ totalDocuments: 42, totalPersons: 7 });
-		expect(result.incompleteDocs).toHaveLength(1);
-		expect(result.recentDocs).toHaveLength(1);
+		expect(result.resumeDoc).not.toBeNull();
+		expect(result.pulse).not.toBeNull();
+		expect(result.activityFeed).toEqual([]);
 		expect(result.documents).toEqual([]);
 	});

@@ -60,8 +84,9 @@ describe('home page load — dashboard mode', () => {
 				response: { ok: true },
 				data: { totalDocuments: 248, totalPersons: 34 }
 			}) // stats
-			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // incomplete
-			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // recent
+			.mockResolvedValueOnce({ response: { ok: true }, data: null }) // resume
+			.mockResolvedValueOnce({ response: { ok: true }, data: null }) // pulse
+			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // activity
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // segmentation-queue
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // transcription-queue
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // ready-to-read
@@ -95,23 +120,24 @@ describe('home page load — dashboard mode', () => {
 		expect(result.stats).toBeNull();
 	});

-	it('defaults incompleteDocs to [] when incomplete API rejects', async () => {
+	it('defaults resumeDoc to null when resume API rejects', async () => {
 		const mockGet = vi
 			.fn()
 			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] }) // persons
-			.mockResolvedValueOnce({ response: { ok: true }, data: { content: [] } }) // notifications
-			.mockRejectedValueOnce(new Error('network')) // incomplete
-			.mockResolvedValueOnce({ response: { ok: true }, data: [] }); // recent
+			.mockResolvedValueOnce({ response: { ok: true }, data: { content: [] } }) // stats
+			.mockRejectedValueOnce(new Error('network')) // resume
+			.mockResolvedValueOnce({ response: { ok: true }, data: null }) // pulse
+			.mockResolvedValueOnce({ response: { ok: true }, data: [] }); // activity
 		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
 			typeof createApiClient
 		>);

 		const result = await load({ url: makeUrl(), fetch: vi.fn() as unknown as typeof fetch });

-		expect(result.incompleteDocs).toEqual([]);
+		expect(result.resumeDoc).toBeNull();
 	});

-	it('defaults recentDocs to [] when recent-activity API rejects', async () => {
+	it('defaults activityFeed to [] when activity API rejects', async () => {
 		const mockGet = vi
 			.fn()
 			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] }) // persons
@@ -119,15 +145,16 @@ describe('home page load — dashboard mode', () => {
 				response: { ok: true },
 				data: { totalDocuments: 0, totalPersons: 0 }
 			}) // stats
-			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // incomplete
-			.mockRejectedValueOnce(new Error('network')); // recent
+			.mockResolvedValueOnce({ response: { ok: true }, data: null }) // resume
+			.mockResolvedValueOnce({ response: { ok: true }, data: null }) // pulse
+			.mockRejectedValueOnce(new Error('network')); // activity
 		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
 			typeof createApiClient
 		>);

 		const result = await load({ url: makeUrl(), fetch: vi.fn() as unknown as typeof fetch });

-		expect(result.recentDocs).toEqual([]);
+		expect(result.activityFeed).toEqual([]);
 	});
 });

@@ -154,8 +181,8 @@ describe('home page load — search mode', () => {
 		expect(result.isDashboard).toBe(false);
 		expect(result.documents).toHaveLength(1);
 		expect(result.stats).toBeNull();
-		expect(result.incompleteDocs).toEqual([]);
-		expect(result.recentDocs).toEqual([]);
+		expect(result.resumeDoc).toBeNull();
+		expect(result.activityFeed).toEqual([]);
 		// Only two API calls — no widget calls
 		expect(mockGet).toHaveBeenCalledTimes(2);
 	});
--- a/frontend/src/routes/page.svelte.spec.ts
+++ b/frontend/src/routes/page.svelte.spec.ts
@@ -40,10 +40,10 @@ const emptyData = {
 		string,
 		import('$lib/generated/api').components['schemas']['SearchMatchData']
 	>,
-	incompleteDocs: [],
-	recentDocs: [],
+	resumeDoc: null,
+	pulse: null,
+	activityFeed: [],
 	stats: null,
-	incompleteCount: 0,
 	initialValues: { senderName: '', receiverName: '' },
 	segmentationDocs: [],
 	transcriptionDocs: [],
@@ -233,33 +233,31 @@ describe('Home page – dashboard mode', () => {
 	const dashboardData = {
 		...emptyData,
 		isDashboard: true,
-		canWrite: false,
-		incompleteDocs: [],
-		recentDocs: []
+		resumeDoc: null,
+		pulse: null,
+		activityFeed: []
 	};

-	it('hides the right column when canWrite is false and incompleteDocs is empty', async () => {
+	it('renders empty state when resumeDoc is null', async () => {
 		render(Page, { data: dashboardData });
-		const rightCol = page.getByTestId('dashboard-right-column');
-		await expect.element(rightCol).not.toBeInTheDocument();
+		const empty = page.getByTestId('resume-strip-empty');
+		await expect.element(empty).toBeInTheDocument();
 	});

-	it('shows the right column when canWrite is true', async () => {
-		render(Page, { data: { ...dashboardData, canWrite: true } });
-		const rightCol = page.getByTestId('dashboard-right-column');
-		await expect.element(rightCol).toBeInTheDocument();
-	});
-
-	it('shows the right column when incompleteDocs is non-empty', async () => {
-		render(Page, {
-			data: {
-				...dashboardData,
-				canWrite: false,
-				incompleteDocs: [{ id: 'd1', title: 'Taufschein' }]
-			}
-		});
-		const rightCol = page.getByTestId('dashboard-right-column');
-		await expect.element(rightCol).toBeInTheDocument();
+	it('renders resume card when resumeDoc is provided', async () => {
+		const resume = {
+			documentId: 'doc-1',
+			title: 'Geburtsurkunde',
+			caption: 'Max · 1920',
+			excerpt: 'Hiermit…',
+			page: 1,
+			pages: 3,
+			pct: 33,
+			collaborators: []
+		};
+		render(Page, { data: { ...dashboardData, resumeDoc: resume } });
+		const strip = page.getByTestId('resume-strip');
+		await expect.element(strip).toBeInTheDocument();
 	});
 });