2982c8330c
All under src/lib/components/chronik/: - ChronikRow.svelte — single orchestrator for four variants (comment / for-you / rollup / simple), discriminated via $derived. Outer <a> wraps avatar + body + time; document title is a styled <span> (no nested anchors). Rollup shows count badge + en-dash time range; for-you gets accent left border + @ marker hidden below sm:. - ChronikTimeline.svelte — buckets items by day using bucketByDay() and renders Heute/Gestern/Diese Woche/Älter section headers with <span> trailing rule. - ChronikFuerDichBox.svelte — unread mentions card with inbox-zero variant, per-row Dismiss button (prevents bubbling, calls onMarkRead), aria-live count badge, and a .fade-in class gated by prefers-reduced-motion. - ChronikFilterPills.svelte — role=radiogroup with 5 pills, ArrowLeft/Right keyboard navigation wrapping across the group, single tabstop via dynamic tabindex. - ChronikEmptyState.svelte — three variants (first-run / filter-empty / inbox-zero) sharing a centered-column layout. - ChronikErrorCard.svelte — warning card with retry button, optional custom message override. Verbs map to chronik_singleton_* / chronik_rollup_* per AuditKind so no ICU pluralization is needed. Comment preview is a TODO placeholder (currently the document title) pending a backend preview DTO follow-up. All 40 unit tests green. No type-check or lint errors in these files. Part of #285. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
67 lines
1.7 KiB
Svelte
67 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
import { bucketByDay, type DayBucket } from '$lib/utils/date-buckets';
|
|
import type { components } from '$lib/generated/api';
|
|
import ChronikRow from './ChronikRow.svelte';
|
|
|
|
type ActivityFeedItemDTO = components['schemas']['ActivityFeedItemDTO'];
|
|
|
|
interface Props {
|
|
items: ActivityFeedItemDTO[];
|
|
locale?: string;
|
|
}
|
|
|
|
const { items, locale }: Props = $props();
|
|
|
|
const BUCKET_ORDER: DayBucket[] = ['today', 'yesterday', 'thisWeek', 'older'];
|
|
|
|
function bucketLabel(bucket: DayBucket): string {
|
|
switch (bucket) {
|
|
case 'today':
|
|
return m.chronik_day_today();
|
|
case 'yesterday':
|
|
return m.chronik_day_yesterday();
|
|
case 'thisWeek':
|
|
return m.chronik_day_this_week();
|
|
case 'older':
|
|
return m.chronik_day_older();
|
|
}
|
|
}
|
|
|
|
const grouped: Record<DayBucket, ActivityFeedItemDTO[]> = $derived.by(() => {
|
|
const result: Record<DayBucket, ActivityFeedItemDTO[]> = {
|
|
today: [],
|
|
yesterday: [],
|
|
thisWeek: [],
|
|
older: []
|
|
};
|
|
for (const it of items) {
|
|
const b = bucketByDay(new Date(it.happenedAt), new Date(), locale);
|
|
result[b].push(it);
|
|
}
|
|
return result;
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col">
|
|
{#each BUCKET_ORDER as bucket (bucket)}
|
|
{#if grouped[bucket].length > 0}
|
|
<section data-testid="chronik-bucket-{bucket}">
|
|
<div class="mt-6 mb-2 flex items-center gap-3">
|
|
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{bucketLabel(bucket)}
|
|
</span>
|
|
<span class="h-px flex-1 bg-line"></span>
|
|
</div>
|
|
<ul role="list" class="flex flex-col gap-2">
|
|
{#each grouped[bucket] as it (it.kind + it.happenedAt + it.documentId)}
|
|
<li>
|
|
<ChronikRow item={it} />
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</section>
|
|
{/if}
|
|
{/each}
|
|
</div>
|