From fc892f0f592dc6f200f270fd3a2cadc470ddf241 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 18 Apr 2026 09:46:47 +0200
Subject: [PATCH] fix(admin): pass personId through load fn instead of params
 prop; widen touch targets in table rows

SvelteKit page components receive only data/form as props; accessing params
directly caused a TypeError and personName always fell back to 'Unknown'.
Also moves py-3 padding from <td> to <a> in OcrModelsTable to give
keyboard/touch users a full-height 44px target (WCAG 2.5.5).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../routes/admin/ocr/OcrModelsTable.svelte    |  8 ++---
 .../admin/ocr/[personId]/+page.server.ts      |  2 +-
 .../routes/admin/ocr/[personId]/+page.svelte  |  4 +--
 .../admin/ocr/[personId]/page.svelte.spec.ts  | 36 +++++++++++++++++++
 4 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/routes/admin/ocr/[personId]/page.svelte.spec.ts

diff --git a/frontend/src/routes/admin/ocr/OcrModelsTable.svelte b/frontend/src/routes/admin/ocr/OcrModelsTable.svelte
index 8da78b5e..c99f54e4 100644
--- a/frontend/src/routes/admin/ocr/OcrModelsTable.svelte
+++ b/frontend/src/routes/admin/ocr/OcrModelsTable.svelte
@@ -41,10 +41,10 @@ let {
 		<tbody>
 			{#each senderModels as model (model.id)}
 				<tr>
-					<td class="border-brand-sand/50 border-b py-3">
+					<td class="border-brand-sand/50 border-b">
 						<a
 							href="/admin/ocr/{model.personId}"
-							class="text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+							class="inline-block py-3 text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 						>
 							{personNames[model.personId] ?? model.personId}
 						</a>
@@ -58,10 +58,10 @@ let {
 					<td class="border-brand-sand/50 border-b py-3">
 						{model.correctedLinesAtTraining}
 					</td>
-					<td class="border-brand-sand/50 border-b py-3">
+					<td class="border-brand-sand/50 border-b">
 						<a
 							href="/admin/ocr/{model.personId}"
-							class="font-medium text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+							class="inline-block py-3 font-medium text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 							>{m.ocr_table_details()}</a
 						>
 					</td>
diff --git a/frontend/src/routes/admin/ocr/[personId]/+page.server.ts b/frontend/src/routes/admin/ocr/[personId]/+page.server.ts
index 70b1fc47..a95076c5 100644
--- a/frontend/src/routes/admin/ocr/[personId]/+page.server.ts
+++ b/frontend/src/routes/admin/ocr/[personId]/+page.server.ts
@@ -14,5 +14,5 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 		throw error(result.response.status, getErrorMessage(code));
 	}
 
-	return { history: result.data! };
+	return { history: result.data!, personId: params.personId };
 };
diff --git a/frontend/src/routes/admin/ocr/[personId]/+page.svelte b/frontend/src/routes/admin/ocr/[personId]/+page.svelte
index d7302d52..8392c841 100644
--- a/frontend/src/routes/admin/ocr/[personId]/+page.svelte
+++ b/frontend/src/routes/admin/ocr/[personId]/+page.svelte
@@ -3,8 +3,8 @@ import type { PageData } from './$types';
 import TrainingHistory from '$lib/components/TrainingHistory.svelte';
 import * as m from '$lib/paraglide/messages.js';
 
-let { data, params }: { data: PageData; params: { personId: string } } = $props();
-const personName = $derived(data.history.personNames?.[params.personId] ?? 'Unknown');
+let { data }: { data: PageData } = $props();
+const personName = $derived(data.history.personNames?.[data.personId] ?? 'Unknown');
 </script>
 
 <div class="flex flex-col gap-6 p-6">
diff --git a/frontend/src/routes/admin/ocr/[personId]/page.svelte.spec.ts b/frontend/src/routes/admin/ocr/[personId]/page.svelte.spec.ts
new file mode 100644
index 00000000..d06445db
--- /dev/null
+++ b/frontend/src/routes/admin/ocr/[personId]/page.svelte.spec.ts
@@ -0,0 +1,36 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+afterEach(cleanup);
+
+describe('[personId] page', () => {
+	it('shows person name from personNames map', async () => {
+		const personId = '123e4567-e89b-12d3-a456-426614174000';
+		render(Page, {
+			data: {
+				personId,
+				history: {
+					runs: [],
+					personNames: { [personId]: 'Anna Müller' }
+				}
+			}
+		});
+		await expect.element(page.getByRole('heading', { level: 1 })).toHaveTextContent('Anna Müller');
+	});
+
+	it('falls back to Unknown when person name is missing', async () => {
+		const personId = '123e4567-e89b-12d3-a456-426614174000';
+		render(Page, {
+			data: {
+				personId,
+				history: {
+					runs: [],
+					personNames: {}
+				}
+			}
+		});
+		await expect.element(page.getByRole('heading', { level: 1 })).toHaveTextContent('Unknown');
+	});
+});