feat(admin/tags): add tags entity with master-detail sub-routes and type-to-confirm delete

Creates the full tags section under /admin/tags/:
- +layout.server.ts: loads tags list via GET /api/tags
- TagsListPanel.svelte: left list panel (name, active state)
- +layout.svelte: composes list panel + children slot
- +page.svelte: empty selection prompt
- [id]/+page.server.ts: rename (PUT) and delete actions
- [id]/+page.svelte: rename form + danger zone with type-to-confirm delete

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

frontend/messages/de.json

@@ -155,6 +155,11 @@
 	"admin_multiselect_hint_full": "Strg+Klick für Mehrfachauswahl",
 	"admin_section_tags": "Schlagworte",
 	"admin_tags_warning": "Warnung: Umbenennen oder Löschen wirkt sich auf alle verknüpften Dokumente aus.",
+	"admin_tags_list_title": "Alle Schlagworte",
+	"admin_tags_empty": "Keine Schlagworte vorhanden.",
+	"admin_tags_select_prompt": "W\u00e4hle ein Schlagwort aus der Liste.",
+	"admin_tag_edit_heading": "Schlagwort: {name}",
+	"admin_tag_updated": "Schlagwort umbenannt.",
 	"admin_btn_edit_tag_label": "Schlagwort bearbeiten",
 	"admin_tag_delete_confirm": "Wirklich löschen? Das Schlagwort wird aus allen Dokumenten entfernt.",
 	"admin_btn_delete_tag_label": "Schlagwort löschen",

frontend/messages/en.json

@@ -155,6 +155,11 @@
 	"admin_multiselect_hint_full": "Ctrl+Click for multiple selection",
 	"admin_section_tags": "Tags",
 	"admin_tags_warning": "Warning: Renaming or deleting affects all linked documents.",
+	"admin_tags_list_title": "All Tags",
+	"admin_tags_empty": "No tags found.",
+	"admin_tags_select_prompt": "Select a tag from the list.",
+	"admin_tag_edit_heading": "Tag: {name}",
+	"admin_tag_updated": "Tag renamed.",
 	"admin_btn_edit_tag_label": "Edit tag",
 	"admin_tag_delete_confirm": "Really delete? The tag will be removed from all documents.",
 	"admin_btn_delete_tag_label": "Delete tag",

frontend/messages/es.json

@@ -155,6 +155,11 @@
 	"admin_multiselect_hint_full": "Ctrl+Clic para selección múltiple",
 	"admin_section_tags": "Etiquetas",
 	"admin_tags_warning": "Advertencia: Renombrar o eliminar afecta a todos los documentos vinculados.",
+	"admin_tags_list_title": "Todas las etiquetas",
+	"admin_tags_empty": "No hay etiquetas.",
+	"admin_tags_select_prompt": "Selecciona una etiqueta de la lista.",
+	"admin_tag_edit_heading": "Etiqueta: {name}",
+	"admin_tag_updated": "Etiqueta renombrada.",
 	"admin_btn_edit_tag_label": "Editar etiqueta",
 	"admin_tag_delete_confirm": "¿Realmente eliminar? La etiqueta se eliminará de todos los documentos.",
 	"admin_btn_delete_tag_label": "Eliminar etiqueta",

frontend/src/routes/admin/tags/+layout.server.ts

@@ -0,0 +1,8 @@
+import { createApiClient } from '$lib/api.server';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ fetch }) => {
+	const api = createApiClient(fetch);
+	const result = await api.GET('/api/tags');
+	return { tags: result.data ?? [] };
+};

frontend/src/routes/admin/tags/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+import TagsListPanel from './TagsListPanel.svelte';
+
+let { data, children } = $props();
+</script>
+
+<TagsListPanel tags={data.tags} />
+
+<!-- Detail panel -->
+<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+	{@render children()}
+</div>

frontend/src/routes/admin/tags/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<p class="text-sm text-ink-3">{m.admin_tags_select_prompt()}</p>
+</div>

frontend/src/routes/admin/tags/TagsListPanel.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { page } from '$app/state';
+import { m } from '$lib/paraglide/messages.js';
+
+type Tag = {
+	id: string;
+	name: string;
+};
+
+let { tags }: { tags: Tag[] } = $props();
+</script>
+
+<div class="flex w-60 flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface">
+	<!-- Panel header -->
+	<div class="flex items-center border-b border-line px-3 py-2">
+		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.admin_tags_list_title()}
+		</span>
+	</div>
+
+	<!-- Scrollable tag list -->
+	<div class="flex-1 overflow-y-auto">
+		{#if tags.length === 0}
+			<p class="px-4 py-6 text-center text-xs text-ink-3">
+				{m.admin_tags_empty()}
+			</p>
+		{:else}
+			{#each tags as tag (tag.id)}
+				{@const isActive = page.url.pathname.startsWith('/admin/tags/' + tag.id)}
+				<a
+					href="/admin/tags/{tag.id}"
+					aria-current={isActive ? 'page' : undefined}
+					class="block border-l-2 px-3 py-2.5 transition-colors {isActive
+						? 'border-primary bg-primary/10 dark:bg-primary/15'
+						: 'border-transparent hover:bg-muted'}"
+				>
+					<div class="text-sm font-bold text-ink">{tag.name}</div>
+				</a>
+			{/each}
+		{/if}
+	</div>
+</div>

frontend/src/routes/admin/tags/[id]/+page.server.ts

@@ -0,0 +1,44 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const load: PageServerLoad = async ({ params, parent }) => {
+	const { tags } = await parent();
+	const tag = tags.find((t: { id: string }) => t.id === params.id);
+	if (!tag) throw error(404, getErrorMessage('TAG_NOT_FOUND'));
+	return { tag };
+};
+
+export const actions: Actions = {
+	update: async ({ params, request, fetch }) => {
+		const data = await request.formData();
+		const api = createApiClient(fetch);
+
+		const result = await api.PUT('/api/tags/{id}', {
+			params: { path: { id: params.id } },
+			body: { name: data.get('name') as string }
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { error: getErrorMessage(code) });
+		}
+
+		return { success: true };
+	},
+
+	delete: async ({ params, fetch }) => {
+		const api = createApiClient(fetch);
+		const result = await api.DELETE('/api/tags/{id}', {
+			params: { path: { id: params.id } }
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { error: getErrorMessage(code) });
+		}
+
+		throw redirect(303, '/admin/tags');
+	}
+};

frontend/src/routes/admin/tags/[id]/+page.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { data, form } = $props();
+
+let deleteConfirmName = $state('');
+const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<!-- Detail panel header -->
+	<div class="flex items-center border-b border-line px-5 py-3">
+		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
+			{m.admin_tag_edit_heading({ name: data.tag.name })}
+		</h2>
+	</div>
+
+	<!-- Scrollable body -->
+	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if form?.success}
+			<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+				{m.admin_tag_updated()}
+			</div>
+		{/if}
+		{#if form?.error}
+			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+				{form.error}
+			</div>
+		{/if}
+
+		<!-- Rename form -->
+		<form id="edit-tag-form" method="POST" action="?/update" use:enhance class="mb-5">
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_col_name()}
+				</h3>
+				<p class="mb-3 text-xs text-amber-700">{m.admin_tags_warning()}</p>
+				<input
+					type="text"
+					name="name"
+					value={data.tag.name}
+					required
+					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:ring-1 focus:ring-primary focus:outline-none"
+				/>
+			</div>
+		</form>
+
+		<!-- Danger zone -->
+		<div
+			class="rounded-sm border border-red-200 bg-red-50 p-5 dark:border-red-900 dark:bg-red-950/30"
+		>
+			<h3 class="mb-3 text-xs font-bold tracking-widest text-red-700 uppercase dark:text-red-400">
+				{m.btn_delete()}
+			</h3>
+			<p class="mb-3 text-xs text-red-700 dark:text-red-400">
+				{m.admin_tag_delete_confirm()}
+			</p>
+			<p class="mb-2 text-xs font-bold text-ink-2">
+				Gib <span class="font-mono">{data.tag.name}</span> zur Bestätigung ein:
+			</p>
+			<input
+				type="text"
+				bind:value={deleteConfirmName}
+				placeholder={data.tag.name}
+				class="mb-3 w-full rounded-sm border border-red-200 bg-white px-3 py-2 text-sm text-ink focus:ring-1 focus:ring-red-400 focus:outline-none"
+			/>
+			<form method="POST" action="?/delete" use:enhance>
+				<button
+					type="submit"
+					disabled={!deleteEnabled}
+					class="rounded-sm bg-red-600 px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-40"
+				>
+					{m.btn_delete()}
+				</button>
+			</form>
+		</div>
+	</div>
+
+	<!-- Docked footer -->
+	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
+		<a
+			href="/admin/tags"
+			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
+		>
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			form="edit-tag-form"
+			class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
+		>
+			{m.btn_save()}
+		</button>
+	</div>
+</div>

frontend/src/routes/admin/tags/layout.server.spec.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { load } from './+layout.server';
+
+vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
+
+import { createApiClient } from '$lib/api.server';
+
+function mockApi(tags: unknown[]) {
+	vi.mocked(createApiClient).mockReturnValue({
+		GET: vi.fn().mockResolvedValueOnce({ response: { ok: true }, data: tags })
+	} as ReturnType<typeof createApiClient>);
+}
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('admin/tags layout load', () => {
+	it('returns the tags list', async () => {
+		mockApi([
+			{ id: 't1', name: 'Familie' },
+			{ id: 't2', name: 'Urlaub' }
+		]);
+		const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(result.tags).toHaveLength(2);
+		expect(result.tags[0].name).toBe('Familie');
+	});
+
+	it('returns an empty array when the API returns nothing', async () => {
+		mockApi([]);
+		const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(result.tags).toEqual([]);
+	});
+
+	it('calls GET /api/tags', async () => {
+		const mockGet = vi.fn().mockResolvedValue({ response: { ok: true }, data: [] });
+		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
+			typeof createApiClient
+		>);
+		await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(mockGet).toHaveBeenCalledWith('/api/tags');
+	});
+});

frontend/src/routes/admin/tags/layout.svelte.spec.ts

@@ -0,0 +1,61 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TagsListPanel from './TagsListPanel.svelte';
+
+vi.mock('$app/state', () => ({
+	page: { url: { pathname: '/admin/tags/t1' } }
+}));
+
+afterEach(cleanup);
+
+const tags = [
+	{ id: 't1', name: 'Familie' },
+	{ id: 't2', name: 'Urlaub' },
+	{ id: 't3', name: 'Schule' }
+];
+
+describe('TagsListPanel — header', () => {
+	it('renders the panel title', async () => {
+		render(TagsListPanel, { tags });
+		await expect.element(page.getByText(/Alle Schlagworte/i)).toBeInTheDocument();
+	});
+});
+
+describe('TagsListPanel — tag items', () => {
+	it('renders each tag name', async () => {
+		render(TagsListPanel, { tags });
+		await expect.element(page.getByRole('link', { name: /familie/i })).toBeInTheDocument();
+		await expect.element(page.getByRole('link', { name: /urlaub/i })).toBeInTheDocument();
+	});
+
+	it('each tag links to /admin/tags/[id]', async () => {
+		const { container } = render(TagsListPanel, { tags });
+		const links = container.querySelectorAll<HTMLAnchorElement>('a[href^="/admin/tags/t"]');
+		expect(links.length).toBe(3);
+		expect(links[0].getAttribute('href')).toBe('/admin/tags/t1');
+	});
+});
+
+describe('TagsListPanel — active state', () => {
+	it('marks the active tag link with aria-current=page', async () => {
+		render(TagsListPanel, { tags });
+		await expect
+			.element(page.getByRole('link', { name: /familie/i }))
+			.toHaveAttribute('aria-current', 'page');
+	});
+
+	it('does not mark inactive tag links with aria-current', async () => {
+		render(TagsListPanel, { tags });
+		await expect
+			.element(page.getByRole('link', { name: /urlaub/i }))
+			.not.toHaveAttribute('aria-current');
+	});
+});
+
+describe('TagsListPanel — empty state', () => {
+	it('shows empty state when tags array is empty', async () => {
+		render(TagsListPanel, { tags: [] });
+		await expect.element(page.getByText(/keine schlagworte/i)).toBeInTheDocument();
+	});
+});