refactor(activity): replace ChronikEmptyState with shared EmptyState primitive

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

frontend/src/lib/activity/ChronikEmptyState.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-import * as m from '$lib/paraglide/messages.js';
-
-export type EmptyVariant = 'first-run' | 'filter-empty' | 'inbox-zero';
-
-interface Props {
-	variant: EmptyVariant;
-}
-
-const { variant }: Props = $props();
-
-const title: string = $derived(
-	variant === 'first-run'
-		? m.chronik_empty_first_run_title()
-		: variant === 'filter-empty'
-			? m.chronik_empty_filter_title()
-			: m.chronik_inbox_zero_title()
-);
-
-const body: string = $derived(
-	variant === 'first-run'
-		? m.chronik_empty_first_run_body()
-		: variant === 'filter-empty'
-			? m.chronik_empty_filter_body()
-			: ''
-);
-</script>
-
-<div
-	data-testid="chronik-empty-state"
-	data-variant={variant}
-	class="flex flex-col items-center gap-3 py-10 text-center"
->
-	{#if variant === 'first-run'}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="h-10 w-10 text-ink-3"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			stroke-width="1.5"
-			aria-hidden="true"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-			/>
-		</svg>
-	{:else if variant === 'filter-empty'}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="h-10 w-10 text-ink-3"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			stroke-width="1.5"
-			aria-hidden="true"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d="M3 4h18M6 8h12M9 12h6M10 16h4M11 20h2"
-			/>
-		</svg>
-	{:else}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="h-10 w-10 text-accent"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			stroke-width="1.5"
-			aria-hidden="true"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d="M9 12.75L11.25 15L15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
-			/>
-		</svg>
-	{/if}
-
-	<p class="font-sans text-base font-bold text-ink">
-		{title}
-	</p>
-	{#if body}
-		<p class="max-w-md font-sans text-sm text-ink-3">
-			{body}
-		</p>
-	{/if}
-</div>

frontend/src/lib/activity/ChronikEmptyState.svelte.spec.ts

@@ -1,30 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-
-import ChronikEmptyState from './ChronikEmptyState.svelte';
-
-afterEach(cleanup);
-
-describe('ChronikEmptyState', () => {
-	it('renders first-run variant title', async () => {
-		render(ChronikEmptyState, { variant: 'first-run' });
-		await expect.element(page.getByText('Noch nichts geschehen')).toBeInTheDocument();
-	});
-
-	it('renders filter-empty variant title', async () => {
-		render(ChronikEmptyState, { variant: 'filter-empty' });
-		await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeInTheDocument();
-	});
-
-	it('renders inbox-zero variant title', async () => {
-		render(ChronikEmptyState, { variant: 'inbox-zero' });
-		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeInTheDocument();
-	});
-
-	it('applies the expected data-variant attribute', async () => {
-		render(ChronikEmptyState, { variant: 'first-run' });
-		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
-		expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
-	});
-});

frontend/src/lib/activity/ChronikEmptyState.svelte.test.ts

@@ -1,56 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-import ChronikEmptyState from './ChronikEmptyState.svelte';
-
-afterEach(cleanup);
-
-describe('ChronikEmptyState', () => {
-	it('renders the first-run title and body and the clock icon', async () => {
-		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });
-
-		await expect.element(page.getByText('Noch nichts geschehen')).toBeVisible();
-		await expect.element(page.getByText(/sobald jemand aus der familie/i)).toBeVisible();
-
-		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
-		expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
-	});
-
-	it('renders the filter-empty title and body', async () => {
-		render(ChronikEmptyState, { props: { variant: 'filter-empty' as const } });
-
-		await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeVisible();
-		await expect.element(page.getByText('In diesem Filter gibt es keine Einträge.')).toBeVisible();
-
-		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
-		expect(wrapper?.getAttribute('data-variant')).toBe('filter-empty');
-	});
-
-	it('renders the inbox-zero title and no body paragraph', async () => {
-		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });
-
-		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeVisible();
-
-		// Only one <p> (the title) since body is empty
-		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
-		const paragraphs = wrapper?.querySelectorAll('p');
-		expect(paragraphs?.length).toBe(1);
-		expect(wrapper?.getAttribute('data-variant')).toBe('inbox-zero');
-	});
-
-	it('uses the accent color icon for inbox-zero (vs ink-3 for others)', async () => {
-		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });
-
-		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
-		const svg = wrapper?.querySelector('svg');
-		expect(svg?.getAttribute('class')).toContain('text-accent');
-	});
-
-	it('uses the ink-3 color icon for first-run', async () => {
-		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });
-
-		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
-		const svg = wrapper?.querySelector('svg');
-		expect(svg?.getAttribute('class')).toContain('text-ink-3');
-	});
-});

frontend/src/routes/aktivitaeten/+page.svelte

@@ -10,7 +10,7 @@ import {
 import ChronikFuerDichBox from '$lib/activity/ChronikFuerDichBox.svelte';
 import ChronikFilterPills from '$lib/activity/ChronikFilterPills.svelte';
 import ChronikTimeline from '$lib/activity/ChronikTimeline.svelte';
-import ChronikEmptyState from '$lib/activity/ChronikEmptyState.svelte';
+import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import ChronikErrorCard from '$lib/activity/ChronikErrorCard.svelte';
 import type { components } from '$lib/generated/api';
 import type { FilterValue } from './+page.server';
@@ -88,6 +88,22 @@ const emptyVariant = $derived<'first-run' | 'filter-empty' | 'inbox-zero'>(
 	data.activityFeed.length === 0 ? 'first-run' : 'filter-empty'
 );
 
+const emptyHeading = $derived(
+	emptyVariant === 'first-run'
+		? m.chronik_empty_first_run_title()
+		: emptyVariant === 'filter-empty'
+			? m.chronik_empty_filter_title()
+			: m.chronik_inbox_zero_title()
+);
+
+const emptySubline = $derived(
+	emptyVariant === 'first-run'
+		? m.chronik_empty_first_run_body()
+		: emptyVariant === 'filter-empty'
+			? m.chronik_empty_filter_body()
+			: ''
+);
+
 function retry() {
 	location.reload();
 }
@@ -118,7 +134,7 @@ function retry() {
 		<div aria-live="polite" aria-atomic="false" aria-busy={!!navigating.type}>
 			{#if isEmpty}
 				<div class="mt-8">
-					<ChronikEmptyState variant={emptyVariant} />
+					<EmptyState heading={emptyHeading} subline={emptySubline} />
 				</div>
 			{:else}
 				<ChronikTimeline items={displayFeed} />