frontend/src/lib/shared/dashboard/ThemenWidget.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import type { components } from '$lib/generated/api';
+import { hasAnyDocuments } from '$lib/shared/utils/tagUtils';
+
+type TagTreeNodeDTO = components['schemas']['TagTreeNodeDTO'];
+
+interface Props {
+	tags: TagTreeNodeDTO[];
+	compact?: boolean;
+}
+
+const { tags, compact = false }: Props = $props();
+
+const visibleTags = $derived.by(() => tags.filter(hasAnyDocuments));
+</script>
+
+<section class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+	<div class="mb-4 flex items-center justify-between">
+		<h2 class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.themen_widget_title()}
+		</h2>
+		<a
+			href="/themen"
+			class="font-sans text-xs text-brand-mint underline-offset-2 hover:underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+		>
+			{m.themen_alle()} →
+		</a>
+	</div>
+
+	{#if visibleTags.length === 0}
+		<p class="font-sans text-sm text-ink-3">{m.themen_leer()}</p>
+	{:else}
+		<div
+			class="grid gap-2 {compact ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}"
+			data-compact={compact}
+		>
+			{#each visibleTags as tag (tag.id)}
+				<a
+					href="/?tag={encodeURIComponent(tag.name)}"
+					aria-label="{tag.name}{tag.documentCount > 0
+						? ', ' + m.themen_dokumente({ count: tag.documentCount })
+						: ''}"
+					class="flex cursor-pointer items-stretch overflow-hidden rounded-sm border border-line bg-canvas hover:bg-surface focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+					style="min-height: 56px"
+				>
+					<span
+						class="w-1 flex-shrink-0 self-stretch"
+						aria-hidden="true"
+						style="background: var(--c-tag-{tag.color ?? 'slate'})"
+					></span>
+					<span class="flex min-w-0 flex-1 flex-col justify-center gap-0.5 px-3 py-3">
+						<span class="truncate font-serif text-sm font-semibold text-ink">{tag.name}</span>
+						{#if tag.documentCount > 0}
+							<span class="font-sans text-xs text-ink-3 tabular-nums">
+								{m.themen_dokumente({ count: tag.documentCount })}
+							</span>
+						{/if}
+					</span>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</section>

frontend/src/lib/shared/dashboard/ThemenWidget.svelte.spec.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import ThemenWidget from './ThemenWidget.svelte';
+import type { components } from '$lib/generated/api';
+
+afterEach(() => {
+	cleanup();
+});
+
+type TagTreeNodeDTO = components['schemas']['TagTreeNodeDTO'];
+
+function makeTag(
+	name: string,
+	documentCount: number,
+	children: TagTreeNodeDTO[] = []
+): TagTreeNodeDTO {
+	return { id: 'id-' + name, name, documentCount, children };
+}
+
+describe('ThemenWidget', () => {
+	it('renders a card link per visible tag', async () => {
+		const tags = [makeTag('Briefe', 5), makeTag('Fotos', 3)];
+		const { getByRole } = render(ThemenWidget, { tags });
+		await expect.element(getByRole('link', { name: /Briefe/ })).toBeInTheDocument();
+		await expect.element(getByRole('link', { name: /Fotos/ })).toBeInTheDocument();
+	});
+
+	it('hides tags where no document exists in the subtree', async () => {
+		const tags = [makeTag('Briefe', 5), makeTag('Leer', 0)];
+		render(ThemenWidget, { tags });
+		expect(document.body.textContent).toContain('Briefe');
+		expect(document.body.textContent).not.toContain('Leer');
+	});
+
+	it('shows the empty state text when all tags are filtered out', async () => {
+		render(ThemenWidget, { tags: [makeTag('Leer', 0)] });
+		expect(document.body.textContent).toMatch(/Noch keine Themen/);
+	});
+
+	it('shows empty state when tags array is empty', async () => {
+		render(ThemenWidget, { tags: [] });
+		expect(document.body.textContent).toMatch(/Noch keine Themen/);
+	});
+
+	it('renders in compact single-column mode when compact prop is true', async () => {
+		const tags = [makeTag('Briefe', 5)];
+		const { container } = render(ThemenWidget, { tags, compact: true });
+		const grid = container.querySelector('[data-compact="true"]');
+		expect(grid).not.toBeNull();
+	});
+
+	it('links to "Alle Themen" page', async () => {
+		const tags = [makeTag('Briefe', 5)];
+		const { getByRole } = render(ThemenWidget, { tags });
+		const link = getByRole('link', { name: /Alle Themen/ });
+		await expect.element(link).toHaveAttribute('href', '/themen');
+	});
+});