From e598f5a5064a97478365b8f7ec98f50ee8760456 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 17:07:16 +0200
Subject: [PATCH] refactor(dashboard): ReaderRecentStories card-head link,
 touch targets (TDD, #483)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../dashboard/ReaderRecentStories.svelte      | 37 +++++++++-------
 .../ReaderRecentStories.svelte.spec.ts        | 42 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
index ab5b0a30..e903a9da 100644
--- a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
+++ b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
@@ -24,33 +24,38 @@ function excerpt(body: string | undefined): string {
 </script>
 
 {#if stories.length > 0}
-	<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-		<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-			{m.dashboard_reader_recent_stories_heading()}
-		</h2>
-		<ul class="flex flex-col divide-y divide-line">
+	<div class="flex flex-col overflow-hidden rounded-sm border border-line bg-surface">
+		<!-- Card-head -->
+		<div class="flex items-center justify-between border-b border-line px-3 py-1.5">
+			<h3 class="text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
+				{m.dashboard_reader_recent_stories_heading()}
+			</h3>
+			<a
+				href="/geschichten"
+				class="flex min-h-[44px] items-center text-[11px] font-semibold text-link-quiet no-underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+			>
+				{m.dashboard_reader_all_stories()}
+			</a>
+		</div>
+
+		<!-- Story list -->
+		<ul class="flex flex-col">
 			{#each stories as story (story.id)}
-				<li class="py-4 first:pt-0 last:pb-0">
+				<li>
 					<a
 						href="/geschichten/{story.id}"
-						class="flex flex-col gap-1 rounded-sm transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+						class="flex min-h-[44px] flex-col gap-1 border-b border-line/50 px-3 py-2 last:border-b-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 					>
-						<span class="text-ink-1 font-serif text-base italic">{story.title}</span>
+						<span class="font-serif text-base text-ink italic">{story.title}</span>
 						{#if story.body}
-							<p class="line-clamp-2 font-sans text-xs text-ink-3">{excerpt(story.body)}</p>
+							<p class="line-clamp-2 text-xs leading-relaxed text-ink-2">{excerpt(story.body)}</p>
 						{/if}
-						<span class="font-sans text-xs text-ink-3">
+						<span class="text-[11px] text-ink-3">
 							{relativeTimeDe(new Date(story.publishedAt ?? story.updatedAt))}
 						</span>
 					</a>
 				</li>
 			{/each}
 		</ul>
-		<a
-			href="/geschichten"
-			class="mt-4 inline-flex min-h-[44px] items-center rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
-		>
-			{m.dashboard_reader_all_stories()}
-		</a>
 	</div>
 {/if}
diff --git a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
index c749858d..c5d83051 100644
--- a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
+++ b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
@@ -52,7 +52,7 @@ describe('ReaderRecentStories', () => {
 		await expect.element(links).not.toBeInTheDocument();
 	});
 
-	it('renders "Alle Geschichten" link', async () => {
+	it('renders "Alle Geschichten" link pointing to /geschichten', async () => {
 		render(ReaderRecentStories, { stories: [story1] });
 		const allLink = page.getByRole('link', { name: /Alle Geschichten/i });
 		await expect.element(allLink).toHaveAttribute('href', '/geschichten');
@@ -72,4 +72,44 @@ describe('ReaderRecentStories', () => {
 		const cls = ((await allLink.element()) as HTMLElement).className;
 		expect(cls).toMatch(/min-h-\[44px\]/);
 	});
+
+	it('card-head contains an h3 (not h2)', async () => {
+		render(ReaderRecentStories, { stories: [story1] });
+		const h3 = page.getByRole('heading', { level: 3 });
+		await expect.element(h3).toBeInTheDocument();
+		const h2 = page.getByRole('heading', { level: 2 });
+		await expect.element(h2).not.toBeInTheDocument();
+	});
+
+	it('card-head div has border-b and border-line classes', async () => {
+		render(ReaderRecentStories, { stories: [story1] });
+		const h3 = page.getByRole('heading', { level: 3 });
+		const cardHead = ((await h3.element()) as HTMLElement).parentElement;
+		expect(cardHead?.className).toMatch(/border-b/);
+		expect(cardHead?.className).toMatch(/border-line/);
+	});
+
+	it('"Alle Geschichten" link is inside the card-head (sibling of h3)', async () => {
+		render(ReaderRecentStories, { stories: [story1] });
+		const h3 = page.getByRole('heading', { level: 3 });
+		const cardHead = ((await h3.element()) as HTMLElement).parentElement;
+		const allLink = cardHead?.querySelector('a');
+		expect(allLink).not.toBeNull();
+		expect(allLink?.textContent?.trim()).toMatch(/Alle Geschichten/i);
+	});
+
+	it('story-row link has min-h-[44px] touch target', async () => {
+		render(ReaderRecentStories, { stories: [story1] });
+		const link = page.getByRole('link', { name: /Die Familie Müller/ });
+		const cls = ((await link.element()) as HTMLElement).className;
+		expect(cls).toMatch(/min-h-\[44px\]/);
+	});
+
+	it('excerpt has text-ink-2 class', async () => {
+		render(ReaderRecentStories, { stories: [story1] });
+		const link = page.getByRole('link', { name: /Die Familie Müller/ });
+		const el = (await link.element()) as HTMLElement;
+		const excerptEl = el.querySelector('p');
+		expect(excerptEl?.className).toMatch(/text-ink-2/);
+	});
 });