marcel/familienarchiv
1
0
Fork 0
Code Issues 127 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(dashboard): ReaderRecentStories card-head link, touch targets (TDD, #483)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 17:07:16 +02:00
parent e1c78e3fbe
commit e598f5a506
2 changed files with 62 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
View File

@@ -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}

42
frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
View File

@@ -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/);
});
});