4f671824dd
- ChronikTimeline: date buckets now render as bordered cards with muted
header (border-line / bg-surface / shadow-sm) and divide-y row
separators, matching the DocumentList card pattern
- ChronikRow: remove rounded-sm (card handles clipping), hover:bg-canvas
→ hover:bg-muted/50; restore rollup count badge after doc title
- Messages (de/en/es): remove embedded {count} from all four rollup verb
strings so the badge is the single source of truth, consistent with
DashboardActivityFeed
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
69 lines
1.8 KiB
Svelte
69 lines
1.8 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="mt-6 flex flex-col">
|
|
{#each BUCKET_ORDER as bucket (bucket)}
|
|
{#if grouped[bucket].length > 0}
|
|
<section
|
|
data-testid="chronik-bucket-{bucket}"
|
|
class="mb-4 overflow-hidden border border-line bg-surface shadow-sm"
|
|
>
|
|
<div class="border-b border-line bg-muted px-5 py-2">
|
|
<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{bucketLabel(bucket)}
|
|
</span>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-line">
|
|
{#each grouped[bucket] as it (it.kind + it.happenedAt + it.documentId)}
|
|
<li>
|
|
<ChronikRow item={it} />
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</section>
|
|
{/if}
|
|
{/each}
|
|
</div>
|