4d9234244e
Adds 5 new components for the permission-gated reader layout: - ReaderStatsStrip: stat tiles (documents / persons / stories) linking to list pages - ReaderPersonChips: top-N persons by doc count with avatar + name - ReaderDraftsModule: blog draft list for BLOG_WRITE users - ReaderRecentDocs: 5 most-recently-updated docs with Neu/Aktualisiert badge - ReaderRecentStories: 3 latest published stories with 150-char HTML-stripped excerpt Each component ships with a vitest-browser spec covering the key assertions. Avatar color/initials logic is inlined to satisfy $lib/shared → $lib/person boundary rule. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
44 lines
1.7 KiB
Svelte
44 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
interface Props {
|
|
documents: number | null;
|
|
persons: number | null;
|
|
stories: number | null;
|
|
}
|
|
|
|
const { documents, persons, stories }: Props = $props();
|
|
</script>
|
|
|
|
<div class="hidden gap-4 sm:flex">
|
|
<a
|
|
href="/documents"
|
|
class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
|
>
|
|
<span class="font-serif text-2xl font-bold text-brand-navy">{documents ?? '—'}</span>
|
|
<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
|
|
>{m.dashboard_reader_stats_documents()}</span
|
|
>
|
|
</a>
|
|
|
|
<a
|
|
href="/persons"
|
|
class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
|
>
|
|
<span class="font-serif text-2xl font-bold text-brand-navy">{persons ?? '—'}</span>
|
|
<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
|
|
>{m.dashboard_reader_stats_persons()}</span
|
|
>
|
|
</a>
|
|
|
|
<a
|
|
href="/geschichten"
|
|
class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
|
>
|
|
<span class="font-serif text-2xl font-bold text-brand-navy">{stories ?? '—'}</span>
|
|
<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
|
|
>{m.dashboard_reader_stats_stories()}</span
|
|
>
|
|
</a>
|
|
</div>
|