refactor: move activity domain components to lib/activity/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/activity/ChronikTimeline.svelte

@@ -0,0 +1,68 @@
+<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>