From 1d44bbb1bd40c793f54c870d7f33655ca51a9f50 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 23 Apr 2026 22:22:19 +0200
Subject: [PATCH] feat(dashboard): render real document thumbnail in resume
 strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the generic parchment SVG placeholder with an <img> pointing at
the backend's thumbnail endpoint when the document has one. The 180×252
container matches DocumentThumbnail's 5:7 A4 convention so the
dashboard tile sits visually next to the list/person-sublist tiles
instead of looking squatter than they do. dark:mix-blend-multiply keeps
paper scans from glaring on a dark page background (#309).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../components/DashboardResumeStrip.svelte    | 33 ++++++++-----------
 .../DashboardResumeStrip.svelte.spec.ts       | 17 ++++++++++
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/DashboardResumeStrip.svelte b/frontend/src/lib/components/DashboardResumeStrip.svelte
index 76eade81..fcf16812 100644
--- a/frontend/src/lib/components/DashboardResumeStrip.svelte
+++ b/frontend/src/lib/components/DashboardResumeStrip.svelte
@@ -44,27 +44,20 @@ function safeColor(color: string): string {
 	</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"
+		<div
+			class="relative h-[252px] w-[180px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white"
 		>
-			<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>
+			{#if resumeDoc.thumbnailUrl}
+				<img
+					data-testid="resume-thumbnail-img"
+					src={resumeDoc.thumbnailUrl}
+					alt=""
+					class="h-full w-full object-cover object-top dark:mix-blend-multiply"
+					loading="lazy"
+					decoding="async"
+				/>
+			{/if}
+		</div>
 
 		<div class="flex flex-1 flex-col gap-2">
 			<p class="flex items-center gap-1.5 font-sans text-xs text-ink-3">
diff --git a/frontend/src/lib/components/DashboardResumeStrip.svelte.spec.ts b/frontend/src/lib/components/DashboardResumeStrip.svelte.spec.ts
index 2250ff2e..a7b411c0 100644
--- a/frontend/src/lib/components/DashboardResumeStrip.svelte.spec.ts
+++ b/frontend/src/lib/components/DashboardResumeStrip.svelte.spec.ts
@@ -21,6 +21,11 @@ const mockResume: DashboardResumeDTO = {
 	collaborators: []
 };
 
+const mockResumeWithThumbnail: DashboardResumeDTO = {
+	...mockResume,
+	thumbnailUrl: '/api/documents/doc-123/thumbnail?v=2026-04-23T09%3A00'
+};
+
 describe('DashboardResumeStrip', () => {
 	it('renders empty state heading when resumeDoc is null', async () => {
 		render(DashboardResumeStrip, { resumeDoc: null });
@@ -52,4 +57,16 @@ describe('DashboardResumeStrip', () => {
 		const label = page.getByText(/4 Abschnitte/i);
 		await expect.element(label).toBeInTheDocument();
 	});
+
+	it('renders thumbnail img with expected attrs when thumbnailUrl is set', async () => {
+		render(DashboardResumeStrip, { resumeDoc: mockResumeWithThumbnail });
+		const img = page.getByTestId('resume-thumbnail-img');
+		await expect.element(img).toBeInTheDocument();
+		await expect
+			.element(img)
+			.toHaveAttribute('src', '/api/documents/doc-123/thumbnail?v=2026-04-23T09%3A00');
+		await expect.element(img).toHaveAttribute('alt', '');
+		await expect.element(img).toHaveAttribute('loading', 'lazy');
+		await expect.element(img).toHaveAttribute('decoding', 'async');
+	});
 });