From cc9c47254b05c0f4f9e541a7576a10f20cd69b21 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 22 Apr 2026 10:49:23 +0200
Subject: [PATCH] refactor(nav): replace static back-link hrefs with BackButton

All 7 in-scope back navigation links converted to use history.back().
Admin panel mobile chevron converted inline (icon-only, different
visual pattern). Cancel buttons left as static <a> links.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/admin/users/[id]/+page.svelte  | 10 +++++----
 .../routes/documents/[id]/edit/+page.svelte   | 14 ++-----------
 frontend/src/routes/enrich/+page.svelte       | 14 ++-----------
 frontend/src/routes/enrich/[id]/+page.svelte  | 14 ++-----------
 frontend/src/routes/persons/[id]/+page.svelte | 14 ++-----------
 .../src/routes/persons/[id]/edit/+page.svelte | 21 ++-----------------
 frontend/src/routes/persons/new/+page.svelte  | 21 ++-----------------
 7 files changed, 18 insertions(+), 90 deletions(-)

diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 738bc2f6..a9a19568 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -23,9 +23,11 @@ $effect(() => {
 <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">
-		<a
-			href="/admin/users"
-			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
+		<button
+			type="button"
+			onclick={() => history.back()}
+			aria-label={m.btn_back()}
+			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring md:hidden"
 		>
 			<svg
 				class="h-4 w-4"
@@ -37,7 +39,7 @@ $effect(() => {
 			>
 				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
 			</svg>
-		</a>
+		</button>
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_user_edit_heading({ username: data.editUser.email })}
 		</h2>
diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index 936407b4..abf00423 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -2,6 +2,7 @@
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
 import { getConfirmService } from '$lib/services/confirm.svelte.js';
+import BackButton from '$lib/components/BackButton.svelte';
 import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
 
 let { data, form } = $props();
@@ -26,18 +27,7 @@ async function handleDelete() {
 
 <DocumentEditLayout doc={doc} formId="update-form" formAction="?/update" formError={form?.error}>
 	{#snippet topbar()}
-		<a
-			href="/documents/{doc.id}"
-			class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-			/>
-			{m.btn_back_to_document()}
-		</a>
+		<BackButton />
 
 		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
 			{doc.title || doc.originalFilename}
diff --git a/frontend/src/routes/enrich/+page.svelte b/frontend/src/routes/enrich/+page.svelte
index f23a53e0..b2130465 100644
--- a/frontend/src/routes/enrich/+page.svelte
+++ b/frontend/src/routes/enrich/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import BackButton from '$lib/components/BackButton.svelte';
 
 let { data } = $props();
 
@@ -9,18 +10,7 @@ const count = $derived(documents.length);
 
 <div class="mx-auto max-w-4xl px-4 py-10">
 	<!-- Back Link -->
-	<a
-		href="/"
-		class="group mb-4 inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-	>
-		<img
-			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-			alt=""
-			aria-hidden="true"
-			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-		/>
-		{m.enrich_list_back()}
-	</a>
+	<BackButton />
 
 	<!-- Page Header -->
 	<div class="mb-8 flex items-center justify-between border-b border-line pb-6">
diff --git a/frontend/src/routes/enrich/[id]/+page.svelte b/frontend/src/routes/enrich/[id]/+page.svelte
index 81d72d49..05a13d67 100644
--- a/frontend/src/routes/enrich/[id]/+page.svelte
+++ b/frontend/src/routes/enrich/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
+import BackButton from '$lib/components/BackButton.svelte';
 import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
 
 let { data, form } = $props();
@@ -14,18 +15,7 @@ const doc = $derived(data.document);
 
 <DocumentEditLayout doc={doc} formId="save-form" formAction="?/save" formError={form?.error}>
 	{#snippet topbar()}
-		<a
-			href="/enrich"
-			class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-			/>
-			{m.enrich_back_to_list()}
-		</a>
+		<BackButton />
 
 		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
 			{doc.title || doc.originalFilename}
diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index 9ca2f179..05fc412c 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { SvelteMap } from 'svelte/reactivity';
+import BackButton from '$lib/components/BackButton.svelte';
 import PersonCard from './PersonCard.svelte';
 import NameHistoryCard from './NameHistoryCard.svelte';
 import CoCorrespondentsList from './CoCorrespondentsList.svelte';
@@ -50,18 +51,7 @@ const coCorrespondents = $derived.by(() => {
 <div class="mx-auto max-w-6xl px-4 py-10">
 	<!-- Back Link -->
 	<div class="mb-6">
-		<a
-			href="/persons"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-			/>
-			{m.btn_back_to_overview()}
-		</a>
+		<BackButton />
 	</div>
 
 	<!-- 2-column layout on large screens -->
diff --git a/frontend/src/routes/persons/[id]/edit/+page.svelte b/frontend/src/routes/persons/[id]/edit/+page.svelte
index 1f38737e..43701e13 100644
--- a/frontend/src/routes/persons/[id]/edit/+page.svelte
+++ b/frontend/src/routes/persons/[id]/edit/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { enhance } from '$app/forms';
+import BackButton from '$lib/components/BackButton.svelte';
 import PersonEditForm from './PersonEditForm.svelte';
 import PersonEditSaveBar from './PersonEditSaveBar.svelte';
 import NameHistoryEditCard from './NameHistoryEditCard.svelte';
@@ -13,25 +14,7 @@ const person = $derived(data.person);
 <div class="mx-auto max-w-2xl px-4 py-8">
 	<!-- Back link -->
 	<div class="mb-6">
-		<a
-			href="/persons/{person.id}"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<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"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 19l-7-7m0 0l7-7m-7 7h18"
-				/>
-			</svg>
-			{person.displayName}
-		</a>
+		<BackButton />
 		<h1 class="font-serif text-3xl text-ink">{m.person_edit_heading()}</h1>
 	</div>
 
diff --git a/frontend/src/routes/persons/new/+page.svelte b/frontend/src/routes/persons/new/+page.svelte
index 2c8d51a1..a6387ac5 100644
--- a/frontend/src/routes/persons/new/+page.svelte
+++ b/frontend/src/routes/persons/new/+page.svelte
@@ -1,30 +1,13 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import BackButton from '$lib/components/BackButton.svelte';
 let { form } = $props();
 </script>
 
 <div class="mx-auto max-w-2xl px-4 py-8">
 	<!-- Heading -->
 	<div class="mb-6">
-		<a
-			href="/persons"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<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"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 19l-7-7m0 0l7-7m-7 7h18"
-				/>
-			</svg>
-			{m.btn_back_to_overview()}
-		</a>
+		<BackButton />
 		<h1 class="font-serif text-3xl text-ink">{m.persons_new_heading()}</h1>
 	</div>