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>
39 lines
1.2 KiB
Svelte
39 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
import { relativeTimeDe } from '$lib/shared/relativeTime';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
type Geschichte = components['schemas']['Geschichte'];
|
|
|
|
interface Props {
|
|
drafts: Geschichte[];
|
|
}
|
|
|
|
const { drafts }: Props = $props();
|
|
</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_drafts_heading()}
|
|
</h2>
|
|
{#if drafts.length === 0}
|
|
<p class="font-sans text-sm text-ink-3">{m.dashboard_reader_drafts_empty()}</p>
|
|
{:else}
|
|
<ul class="flex flex-col gap-2">
|
|
{#each drafts as draft (draft.id)}
|
|
<li>
|
|
<a
|
|
href="/geschichten/{draft.id}/edit"
|
|
class="flex min-h-[44px] items-center justify-between gap-4 rounded-sm py-2 transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
|
>
|
|
<span class="text-ink-1 truncate font-serif text-sm">{draft.title}</span>
|
|
<span class="shrink-0 font-sans text-xs text-ink-3">
|
|
{relativeTimeDe(new Date(draft.updatedAt))}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|