From 781c4ffebbf5e8b265b1fc9b2e0d86de5ee1e0c5 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 22 Apr 2026 10:46:41 +0200
Subject: [PATCH] feat(nav): add BackButton component calling history.back()

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/BackButton.svelte | 25 ++++++++++++++++
 .../lib/components/BackButton.svelte.spec.ts  | 29 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/src/lib/components/BackButton.svelte
 create mode 100644 frontend/src/lib/components/BackButton.svelte.spec.ts

diff --git a/frontend/src/lib/components/BackButton.svelte b/frontend/src/lib/components/BackButton.svelte
new file mode 100644
index 00000000..4b2edbaf
--- /dev/null
+++ b/frontend/src/lib/components/BackButton.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<button
+	type="button"
+	onclick={() => history.back()}
+	class="group mb-4 inline-flex min-h-[44px] items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring"
+>
+	<svg
+		class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		aria-hidden="true"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M10 19l-7-7m0 0l7-7m-7 7h18"
+		/>
+	</svg>
+	{m.btn_back()}
+</button>
diff --git a/frontend/src/lib/components/BackButton.svelte.spec.ts b/frontend/src/lib/components/BackButton.svelte.spec.ts
new file mode 100644
index 00000000..ce714912
--- /dev/null
+++ b/frontend/src/lib/components/BackButton.svelte.spec.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import BackButton from './BackButton.svelte';
+
+afterEach(cleanup);
+
+describe('BackButton', () => {
+	it('renders a button with "Zurück" text', async () => {
+		render(BackButton);
+		await expect.element(page.getByRole('button', { name: /zurück/i })).toBeInTheDocument();
+	});
+
+	it('calls history.back() when clicked', async () => {
+		const backSpy = vi.spyOn(history, 'back').mockImplementation(() => {});
+		render(BackButton);
+
+		await page.getByRole('button', { name: /zurück/i }).click();
+
+		expect(backSpy).toHaveBeenCalledOnce();
+		backSpy.mockRestore();
+	});
+
+	it('has min-h-[44px] for touch target compliance', async () => {
+		render(BackButton);
+		const btn = document.querySelector('button');
+		expect(btn?.className).toContain('min-h-[44px]');
+	});
+});