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

refactor(dashboard): ReaderRecentDocs compact card-head, mint-pill badge (TDD, #483)

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

88
frontend/src/lib/shared/dashboard/ReaderRecentDocs.svelte
View File

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