refactor(dashboard): ReaderRecentDocs compact card-head, mint-pill badge (TDD, #483)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -16,49 +16,71 @@ function isNew(doc: Document): boolean {
|
||||
}
|
||||
</script>
|
||||
|
||||
<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_docs_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_docs_heading()}
|
||||
</h3>
|
||||
<a
|
||||
href="/documents"
|
||||
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_all_documents()}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Doc list -->
|
||||
<ul class="flex flex-col">
|
||||
{#each documents as doc (doc.id)}
|
||||
<li class="py-3 first:pt-0 last:pb-0">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<a
|
||||
href="/documents/{doc.id}"
|
||||
class="text-ink-1 truncate rounded-sm font-serif text-sm transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
||||
>
|
||||
{doc.title}
|
||||
</a>
|
||||
<li>
|
||||
<a
|
||||
href="/documents/{doc.id}"
|
||||
class="flex min-h-[44px] items-center gap-2 border-b border-line/50 px-3 py-1.5 last:border-b-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
||||
>
|
||||
<!-- Thumb -->
|
||||
<span
|
||||
class="flex h-6 w-5 shrink-0 items-center justify-center rounded-[2px] border border-line bg-canvas"
|
||||
>
|
||||
<svg
|
||||
width="10"
|
||||
height="12"
|
||||
viewBox="0 0 10 12"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
class="text-ink-3"
|
||||
>
|
||||
<path d="M1 1h5.5L9 3.5V11H1V1z" stroke="currentColor" stroke-width="1" fill="none" />
|
||||
<path d="M6 1v3h3" stroke="currentColor" stroke-width="1" fill="none" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- Middle -->
|
||||
<span class="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<span class="flex flex-wrap items-center gap-1.5">
|
||||
<span class="truncate font-serif text-sm text-ink">{doc.title}</span>
|
||||
{#if isNew(doc)}
|
||||
<span
|
||||
class="rounded bg-brand-mint/20 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide text-brand-navy uppercase"
|
||||
class="shrink-0 rounded-full bg-mint-soft px-1.5 py-px text-[11px] font-bold text-brand-navy dark:bg-mint-soft dark:text-brand-mint"
|
||||
>
|
||||
{m.dashboard_badge_new()}
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="text-ink-1 rounded bg-ink-3/10 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide uppercase"
|
||||
>
|
||||
{m.dashboard_badge_updated()}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if doc.sender}
|
||||
<a
|
||||
href="/persons/{doc.sender.id}"
|
||||
class="font-sans text-xs text-ink-3 transition-colors hover:text-brand-mint"
|
||||
>
|
||||
</span>
|
||||
<span class="text-xs text-ink-3">
|
||||
{#if doc.sender}
|
||||
{doc.sender.displayName ?? doc.sender.lastName}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="shrink-0 font-sans text-xs text-ink-3">
|
||||
{:else}
|
||||
—
|
||||
{/if}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- Date -->
|
||||
<span class="shrink-0 text-[11px] text-ink-3">
|
||||
{relativeTimeDe(new Date(doc.updatedAt))}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
@@ -37,30 +37,73 @@ describe('ReaderRecentDocs', () => {
|
||||
await expect.element(link).toHaveAttribute('href', '/documents/doc1');
|
||||
});
|
||||
|
||||
it('shows "Neu" badge when createdAt equals updatedAt', async () => {
|
||||
it('card has overflow-hidden and flex-col classes (no p-6, no shadow-sm)', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
const heading = page.getByRole('heading', { level: 3 });
|
||||
const card = (await heading.element())?.closest('div');
|
||||
const rootCard = card?.parentElement;
|
||||
const cls = rootCard?.className ?? '';
|
||||
expect(cls).toMatch(/overflow-hidden/);
|
||||
expect(cls).toMatch(/flex-col/);
|
||||
expect(cls).not.toMatch(/\bp-6\b/);
|
||||
expect(cls).not.toMatch(/shadow-sm/);
|
||||
});
|
||||
|
||||
it('card-head contains an h3 (not h2)', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
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('"Alle Dokumente" link in card-head points to /documents', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
const link = page.getByRole('link', { name: /Alle Dokumente/i });
|
||||
await expect.element(link).toHaveAttribute('href', '/documents');
|
||||
});
|
||||
|
||||
it('"Alle Dokumente" link has min-h-[44px]', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
const link = page.getByRole('link', { name: /Alle Dokumente/i });
|
||||
const cls = ((await link.element()) as HTMLElement).className;
|
||||
expect(cls).toMatch(/min-h-\[44px\]/);
|
||||
});
|
||||
|
||||
it('doc-row link has min-h-[44px] touch target', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
const link = page.getByRole('link', { name: /Brief an Hans/ });
|
||||
const cls = ((await link.element()) as HTMLElement).className;
|
||||
expect(cls).toMatch(/min-h-\[44px\]/);
|
||||
});
|
||||
|
||||
it('thumb element has correct classes', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
const link = page.getByRole('link', { name: /Brief an Hans/ });
|
||||
const el = (await link.element()) as HTMLElement;
|
||||
const thumb = el.querySelector('[class*="w-5"][class*="h-6"]');
|
||||
expect(thumb).not.toBeNull();
|
||||
expect(thumb!.className).toMatch(/bg-canvas/);
|
||||
expect(thumb!.className).toMatch(/border-line/);
|
||||
expect(thumb!.className).toMatch(/rounded-/);
|
||||
});
|
||||
|
||||
it('shows "Neu" mint-pill badge when createdAt equals updatedAt', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
const badge = page.getByText(/^Neu$/i);
|
||||
await expect.element(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows "Aktualisiert" badge when updatedAt differs from createdAt', async () => {
|
||||
render(ReaderRecentDocs, { documents: [updatedDoc] });
|
||||
const badge = page.getByText(/^Aktualisiert$/i);
|
||||
await expect.element(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the "Aktualisiert" badge with high-contrast text-ink-1', async () => {
|
||||
render(ReaderRecentDocs, { documents: [updatedDoc] });
|
||||
const badge = page.getByText(/^Aktualisiert$/i);
|
||||
const cls = ((await badge.element()) as HTMLElement).className;
|
||||
expect(cls).toMatch(/text-ink-1/);
|
||||
expect(cls).not.toMatch(/text-ink-3(?!\/)/);
|
||||
expect(cls).toMatch(/bg-mint-soft/);
|
||||
expect(cls).toMatch(/rounded-full/);
|
||||
expect(cls).toMatch(/text-brand-navy/);
|
||||
});
|
||||
|
||||
it('does not show "Neu" badge when updatedAt differs from createdAt', async () => {
|
||||
it('shows no badge when updatedAt differs from createdAt', async () => {
|
||||
render(ReaderRecentDocs, { documents: [updatedDoc] });
|
||||
const badge = page.getByText(/^Neu$/i);
|
||||
await expect.element(badge).not.toBeInTheDocument();
|
||||
const updatedBadge = page.getByText(/^Aktualisiert$/i);
|
||||
await expect.element(updatedBadge).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows "Neu" badge when createdAt and updatedAt represent the same instant in different ISO formats', async () => {
|
||||
@@ -75,7 +118,7 @@ describe('ReaderRecentDocs', () => {
|
||||
await expect.element(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders sender link when sender is present', async () => {
|
||||
it('renders sender name text when sender is present', async () => {
|
||||
const docWithSender: Document = {
|
||||
...baseDoc,
|
||||
sender: {
|
||||
@@ -88,7 +131,15 @@ describe('ReaderRecentDocs', () => {
|
||||
}
|
||||
};
|
||||
render(ReaderRecentDocs, { documents: [docWithSender] });
|
||||
const senderLink = page.getByRole('link', { name: /Anna Müller/ });
|
||||
await expect.element(senderLink).toHaveAttribute('href', '/persons/p1');
|
||||
const link = page.getByRole('link', { name: /Brief an Hans/ });
|
||||
const el = (await link.element()) as HTMLElement;
|
||||
expect(el.textContent).toContain('Anna Müller');
|
||||
});
|
||||
|
||||
it('shows em-dash when sender is absent', async () => {
|
||||
render(ReaderRecentDocs, { documents: [baseDoc] });
|
||||
const link = page.getByRole('link', { name: /Brief an Hans/ });
|
||||
const el = (await link.element()) as HTMLElement;
|
||||
expect(el.textContent).toContain('—');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user