refactor(docs): replace inline confirmDelete toggle with ConfirmService in SaveBar

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

frontend/src/routes/documents/[id]/edit/SaveBar.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 let { docId }: { docId: string } = $props();
 
-let confirmDelete = $state(false);
+const { confirm } = getConfirmService();
+
+async function handleDelete() {
+	const confirmed = await confirm({
+		title: m.doc_delete_confirm(),
+		destructive: true
+	});
+	if (confirmed) {
+		(document.getElementById('delete-form') as HTMLFormElement | null)?.requestSubmit();
+	}
+}
 </script>
 
 <div
@@ -29,57 +40,37 @@ let confirmDelete = $state(false);
 			</button>
 		</div>
 
-		<!-- Secondary: delete + cancel (row on both mobile and desktop) -->
+		<!-- Secondary: delete + cancel -->
 		<div class="flex items-center justify-between sm:justify-start sm:gap-4">
-			{#if confirmDelete}
+			<button
-				<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
+				type="button"
-				<div class="flex items-center gap-3">
+				onclick={handleDelete}
-					<button
+				class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
-						type="submit"
+			>
-						form="delete-form"
+				<svg
-						class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
+					xmlns="http://www.w3.org/2000/svg"
-					>
+					class="h-4 w-4"
-						{m.btn_delete()}
+					viewBox="0 0 24 24"
-					</button>
+					fill="none"
-					<button
+					stroke="currentColor"
-						type="button"
+					stroke-width="2"
-						onclick={() => (confirmDelete = false)}
+					stroke-linecap="round"
-						class="text-sm text-ink-2 transition-colors hover:text-ink"
+					stroke-linejoin="round"
-					>
+					aria-hidden="true"
-						{m.btn_cancel()}
-					</button>
-				</div>
-			{:else}
-				<button
-					type="button"
-					onclick={() => (confirmDelete = true)}
-					class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
 				>
-					<svg
+					<polyline points="3 6 5 6 21 6" />
-						xmlns="http://www.w3.org/2000/svg"
+					<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-						class="h-4 w-4"
+					<path d="M10 11v6M14 11v6" />
-						viewBox="0 0 24 24"
+					<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-						fill="none"
+				</svg>
-						stroke="currentColor"
+				{m.btn_delete()}
-						stroke-width="2"
+			</button>
-						stroke-linecap="round"
+			<a
-						stroke-linejoin="round"
+				href="/documents/{docId}"
-						aria-hidden="true"
+				class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-					>
+			>
-						<polyline points="3 6 5 6 21 6" />
+				{m.btn_cancel()}
-						<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+			</a>
-						<path d="M10 11v6M14 11v6" />
-						<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-					</svg>
-					{m.btn_delete()}
-				</button>
-				<a
-					href="/documents/{docId}"
-					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-				>
-					{m.btn_cancel()}
-				</a>
-			{/if}
 		</div>
 	</div>
 </div>

frontend/src/routes/documents/[id]/edit/SaveBar.svelte.spec.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import SaveBar from './SaveBar.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
+
+let appendedForms: HTMLFormElement[] = [];
+
+afterEach(() => {
+	cleanup();
+	appendedForms.forEach((f) => f.remove());
+	appendedForms = [];
+});
+
+function renderSaveBar(docId = 'doc-1') {
+	const service = createConfirmService();
+
+	// Mount a dummy delete form so SaveBar can find it via document.getElementById
+	const deleteForm = document.createElement('form');
+	deleteForm.id = 'delete-form';
+	document.body.appendChild(deleteForm);
+	appendedForms.push(deleteForm);
+
+	const result = render(SaveBar, {
+		props: { docId },
+		context: new Map([[CONFIRM_KEY, service]])
+	});
+
+	return { ...result, service, deleteForm };
+}
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('SaveBar — rendering', () => {
+	it('renders save button', async () => {
+		renderSaveBar();
+		await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
+	});
+
+	it('renders delete button', async () => {
+		renderSaveBar();
+		// The delete button should be type="button" (async confirm flow)
+		const deleteBtn = document.querySelector('button[type="button"]');
+		expect(deleteBtn).not.toBeNull();
+	});
+
+	it('renders cancel link pointing to /documents/doc-1', async () => {
+		renderSaveBar();
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/documents/doc-1');
+	});
+});
+
+// ─── Delete confirmation ──────────────────────────────────────────────────────
+
+describe('SaveBar — delete confirmation', () => {
+	it('opens confirm dialog when delete button is clicked', async () => {
+		const { service } = renderSaveBar();
+		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		expect(service.options?.destructive).toBe(true);
+		service.settle(false);
+	});
+
+	it('submits delete form when user confirms', async () => {
+		const { service, deleteForm } = renderSaveBar();
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).toHaveBeenCalledOnce();
+	});
+
+	it('does not submit delete form when user cancels', async () => {
+		const { service, deleteForm } = renderSaveBar();
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(false);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).not.toHaveBeenCalled();
+	});
+});