From f1889ff20c2e97b44fdcea633151385d1a9cdc9c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 16 Apr 2026 23:34:29 +0200
Subject: [PATCH] feat(#248): add TagDeleteGuard component and brand-warning
 CSS token

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../admin/tags/[id]/TagDeleteGuard.svelte     | 100 ++++++++++++++++++
 .../tags/[id]/TagDeleteGuard.svelte.spec.ts   |  54 ++++++++++
 frontend/src/routes/layout.css                |   4 +
 3 files changed, 158 insertions(+)
 create mode 100644 frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte
 create mode 100644 frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte.spec.ts

diff --git a/frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte b/frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte
new file mode 100644
index 00000000..9238e769
--- /dev/null
+++ b/frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+type FlatTag = {
+	id: string;
+	name: string;
+	color?: string;
+	parentId?: string;
+	documentCount: number;
+};
+
+interface Props {
+	tag: { id: string; documentCount: number; parentId?: string };
+	allTags: FlatTag[];
+}
+
+let { tag, allTags }: Props = $props();
+
+let selectedMode: 'single' | 'subtree' | null = $state(null);
+const canDelete = $derived(selectedMode !== null);
+
+// Count all descendants (recursive walk through allTags)
+const descendantCount = $derived.by(() => {
+	let count = 0;
+	const queue = [tag.id];
+	while (queue.length) {
+		const cur = queue.shift()!;
+		for (const t of allTags) {
+			if (t.parentId === cur) {
+				count++;
+				queue.push(t.id);
+			}
+		}
+	}
+	return count;
+});
+</script>
+
+<div class="rounded-sm border border-danger bg-danger/5 p-5">
+	<h3 class="mb-3 text-xs font-bold tracking-widest text-danger uppercase">{m.btn_delete()}</h3>
+
+	<!-- Impact summary -->
+	<p class="mb-4 text-xs text-ink-2">
+		{m.admin_tag_delete_impact({ docs: tag.documentCount, descendants: descendantCount })}
+	</p>
+
+	<!-- Radios -->
+	<div class="mb-4 flex flex-col gap-3">
+		<label class="flex cursor-pointer items-start gap-3">
+			<input
+				type="radio"
+				name="deleteMode"
+				value="single"
+				bind:group={selectedMode}
+				class="mt-0.5"
+			/>
+			<div>
+				<span class="text-sm font-medium text-ink">{m.admin_tag_delete_only_this()}</span>
+				<p class="text-xs text-ink-3">
+					{#if tag.parentId}
+						{m.admin_tag_delete_only_this_sub({ parent: tag.parentId })}
+					{:else}
+						{m.admin_tag_delete_only_this_sub_root()}
+					{/if}
+				</p>
+			</div>
+		</label>
+
+		<label class="flex cursor-pointer items-start gap-3">
+			<input
+				type="radio"
+				name="deleteMode"
+				value="subtree"
+				bind:group={selectedMode}
+				class="mt-0.5"
+			/>
+			<div>
+				<span class="text-sm font-medium text-ink">{m.admin_tag_delete_subtree()}</span>
+				{#if descendantCount > 0}
+					<p class="text-xs font-medium text-warning">
+						{m.admin_tag_delete_subtree_warn({ count: descendantCount })}
+					</p>
+				{/if}
+			</div>
+		</label>
+	</div>
+
+	<!-- Confirm form -->
+	<form method="POST" action="?/delete" use:enhance>
+		<input type="hidden" name="deleteMode" value={selectedMode ?? ''} />
+		<button
+			type="submit"
+			disabled={!canDelete}
+			class="rounded-sm bg-danger px-4 py-2 font-sans text-xs font-bold tracking-widest text-danger-fg uppercase transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-40"
+		>
+			{m.btn_delete()}
+		</button>
+	</form>
+</div>
diff --git a/frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte.spec.ts b/frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte.spec.ts
new file mode 100644
index 00000000..3f8565b0
--- /dev/null
+++ b/frontend/src/routes/admin/tags/[id]/TagDeleteGuard.svelte.spec.ts
@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TagDeleteGuard from './TagDeleteGuard.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+afterEach(cleanup);
+
+const tag = { id: 't1', name: 'Familie', documentCount: 3 };
+const allTags = [
+	{ id: 't1', name: 'Familie', documentCount: 3 },
+	{ id: 't2', name: 'Eltern', parentId: 't1', documentCount: 1 },
+	{ id: 't3', name: 'Kinder', parentId: 't1', documentCount: 0 }
+];
+
+describe('TagDeleteGuard', () => {
+	it('renders two radio options (single and subtree)', async () => {
+		render(TagDeleteGuard, { tag, allTags });
+		const radios = document.querySelectorAll<HTMLInputElement>('input[type="radio"]');
+		expect(radios.length).toBe(2);
+	});
+
+	it('delete button is disabled initially', async () => {
+		render(TagDeleteGuard, { tag, allTags });
+		const btn = document.querySelector<HTMLButtonElement>('button[type="submit"]');
+		expect(btn?.disabled).toBe(true);
+	});
+
+	it('delete button is enabled after selecting single radio', async () => {
+		render(TagDeleteGuard, { tag, allTags });
+		await page.getByRole('radio', { name: /Nur dieses/i }).click();
+		const btn = document.querySelector<HTMLButtonElement>('button[type="submit"]');
+		expect(btn?.disabled).toBe(false);
+	});
+
+	it('delete button is enabled after selecting subtree radio', async () => {
+		render(TagDeleteGuard, { tag, allTags });
+		await page.getByRole('radio', { name: /Gesamten Teilbaum/i }).click();
+		const btn = document.querySelector<HTMLButtonElement>('button[type="submit"]');
+		expect(btn?.disabled).toBe(false);
+	});
+
+	it('shows descendant count in impact summary', async () => {
+		render(TagDeleteGuard, { tag, allTags });
+		// tag has 2 descendants (t2 and t3)
+		await expect.element(page.getByText(/2 Untergeordnete/)).toBeInTheDocument();
+	});
+
+	it('shows document count in impact summary', async () => {
+		render(TagDeleteGuard, { tag, allTags });
+		await expect.element(page.getByText(/3 Dokument/)).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index 39a433e7..bd984cdf 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -70,6 +70,10 @@
 	--color-danger: var(--c-danger);
 	--color-danger-fg: var(--c-danger-fg);
 
+	/* Warning — amber, WCAG AA on white */
+	--color-warning: #b45309;
+	--color-warning-fg: #ffffff;
+
 	/* Static brand tokens (not themed) */
 	--color-brand-navy: var(--palette-navy);
 	--color-brand-mint: var(--palette-mint);