From 8fc360a5961ad49270a28c10ed025676809fdb84 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 01:09:40 +0200
Subject: [PATCH 01/11] fix(admin): guard GET /api/users/{id} with
 @RequirePermission(ADMIN_USER)

Fixes IDOR: the endpoint was publicly accessible to any authenticated user.
Now requires ADMIN_USER permission, matching all other user management endpoints.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../controller/UserController.java            |   1 +
 .../controller/UserControllerTest.java        |  25 +++
 frontend/messages/de.json                     |   4 +
 frontend/messages/en.json                     |   4 +
 frontend/messages/es.json                     |   4 +
 frontend/src/routes/admin/+layout.svelte      |  34 ++++
 frontend/src/routes/admin/+page.svelte        | 118 ++++++-------
 frontend/src/routes/admin/EntityNav.svelte    | 114 +++++++++++++
 frontend/src/routes/admin/UsersTab.svelte     | 156 +++++++++---------
 .../src/routes/admin/layout.svelte.spec.ts    |  87 ++++++++++
 frontend/src/routes/admin/page.svelte.spec.ts | 116 ++++++-------
 .../src/routes/admin/users/+layout.server.ts  |   8 +
 .../src/routes/admin/users/+layout.svelte     |  12 ++
 frontend/src/routes/admin/users/+page.svelte  |   7 +
 .../routes/admin/users/UsersListPanel.svelte  | 105 ++++++++++++
 .../src/routes/admin/users/[id]/+page.svelte  | 147 ++++++++---------
 .../admin/users/[id]/page.svelte.spec.ts      |   4 +-
 .../routes/admin/users/layout.server.spec.ts  |  41 +++++
 .../routes/admin/users/layout.svelte.spec.ts  |  95 +++++++++++
 .../routes/admin/users/new/+page.server.ts    |   2 +-
 .../src/routes/admin/users/new/+page.svelte   |  95 +++++------
 .../admin/users/new/page.svelte.spec.ts       |  11 +-
 22 files changed, 844 insertions(+), 346 deletions(-)
 create mode 100644 frontend/src/routes/admin/+layout.svelte
 create mode 100644 frontend/src/routes/admin/EntityNav.svelte
 create mode 100644 frontend/src/routes/admin/layout.svelte.spec.ts
 create mode 100644 frontend/src/routes/admin/users/+layout.server.ts
 create mode 100644 frontend/src/routes/admin/users/+layout.svelte
 create mode 100644 frontend/src/routes/admin/users/+page.svelte
 create mode 100644 frontend/src/routes/admin/users/UsersListPanel.svelte
 create mode 100644 frontend/src/routes/admin/users/layout.server.spec.ts
 create mode 100644 frontend/src/routes/admin/users/layout.svelte.spec.ts

diff --git a/backend/src/main/java/org/raddatz/familienarchiv/controller/UserController.java b/backend/src/main/java/org/raddatz/familienarchiv/controller/UserController.java
index 92b0b0f1..a7bdacd8 100644
--- a/backend/src/main/java/org/raddatz/familienarchiv/controller/UserController.java
+++ b/backend/src/main/java/org/raddatz/familienarchiv/controller/UserController.java
@@ -61,6 +61,7 @@ public class UserController {
     }
 
     @GetMapping("users/{id}")
+    @RequirePermission(Permission.ADMIN_USER)
     public ResponseEntity<AppUser> getUser(@PathVariable UUID id) {
         AppUser user = userService.getById(id);
         user.setPassword(null);
diff --git a/backend/src/test/java/org/raddatz/familienarchiv/controller/UserControllerTest.java b/backend/src/test/java/org/raddatz/familienarchiv/controller/UserControllerTest.java
index eb4cc3e7..fa26f411 100644
--- a/backend/src/test/java/org/raddatz/familienarchiv/controller/UserControllerTest.java
+++ b/backend/src/test/java/org/raddatz/familienarchiv/controller/UserControllerTest.java
@@ -50,4 +50,29 @@ class UserControllerTest {
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$.username").value("anna"));
     }
+
+    // ─── GET /api/users/{id} ──────────────────────────────────────────────────
+
+    @Test
+    @WithMockUser(username = "reader")
+    void getUser_returns403_whenCallerLacksAdminUserPermission() throws Exception {
+        UUID id = UUID.randomUUID();
+        AppUser target = AppUser.builder().id(id).username("target").build();
+        when(userService.getById(id)).thenReturn(target);
+
+        mockMvc.perform(get("/api/users/" + id))
+                .andExpect(status().isForbidden());
+    }
+
+    @Test
+    @WithMockUser(username = "admin", authorities = {"ADMIN_USER"})
+    void getUser_returns200_whenCallerHasAdminUserPermission() throws Exception {
+        UUID id = UUID.randomUUID();
+        AppUser user = AppUser.builder().id(id).username("target").build();
+        when(userService.getById(id)).thenReturn(user);
+
+        mockMvc.perform(get("/api/users/" + id))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.username").value("target"));
+    }
 }
diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index e8cf82d4..ccaecdb2 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -167,6 +167,10 @@
 	"admin_group_name_placeholder": "Gruppenname (z.B. Editoren)",
 	"admin_user_delete_confirm": "Benutzer {username} wirklich löschen?",
 	"admin_btn_new_user": "Neuer Benutzer",
+	"admin_users_list_title": "Alle Benutzer",
+	"admin_users_search_placeholder": "Benutzer suchen\u2026",
+	"admin_users_empty": "Keine Benutzer vorhanden.",
+	"admin_users_select_prompt": "W\u00e4hle einen Benutzer aus der Liste.",
 	"admin_user_new_heading": "Neuen Benutzer anlegen",
 	"admin_user_edit_heading": "Benutzer bearbeiten: {username}",
 	"admin_user_created": "Benutzer wurde erstellt.",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 527a4f48..c95a0303 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -167,6 +167,10 @@
 	"admin_group_name_placeholder": "Group name (e.g. Editors)",
 	"admin_user_delete_confirm": "Really delete user {username}?",
 	"admin_btn_new_user": "New User",
+	"admin_users_list_title": "All Users",
+	"admin_users_search_placeholder": "Search users\u2026",
+	"admin_users_empty": "No users found.",
+	"admin_users_select_prompt": "Select a user from the list.",
 	"admin_user_new_heading": "Create new user",
 	"admin_user_edit_heading": "Edit user: {username}",
 	"admin_user_created": "User has been created.",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 3d72309e..48bebf1b 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -167,6 +167,10 @@
 	"admin_group_name_placeholder": "Nombre del grupo (p.ej. Editores)",
 	"admin_user_delete_confirm": "¿Realmente eliminar al usuario {username}?",
 	"admin_btn_new_user": "Nuevo usuario",
+	"admin_users_list_title": "Todos los usuarios",
+	"admin_users_search_placeholder": "Buscar usuarios\u2026",
+	"admin_users_empty": "No hay usuarios.",
+	"admin_users_select_prompt": "Selecciona un usuario de la lista.",
 	"admin_user_new_heading": "Crear nuevo usuario",
 	"admin_user_edit_heading": "Editar usuario: {username}",
 	"admin_user_created": "Usuario creado.",
diff --git a/frontend/src/routes/admin/+layout.svelte b/frontend/src/routes/admin/+layout.svelte
new file mode 100644
index 00000000..13f98a76
--- /dev/null
+++ b/frontend/src/routes/admin/+layout.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+import { page } from '$app/state';
+import EntityNav from './EntityNav.svelte';
+
+let { data, children } = $props();
+
+const isSystem = $derived(page.url.pathname.startsWith('/admin/system'));
+</script>
+
+<svelte:head>
+	<title>Admin · Familienarchiv</title>
+</svelte:head>
+
+<!--
+  -mt-6: cancel the global layout's pt-6 on <main>
+  Height fills from below the global header (64px) to bottom of viewport.
+-->
+<div class="-mt-6 flex overflow-hidden" style="height: calc(100vh - 65px)">
+	<!-- Entity Nav: always visible on desktop, icon strip on tablet (Phase 9) -->
+	<EntityNav
+		userCount={data.userCount}
+		groupCount={data.groupCount}
+		tagCount={data.tagCount}
+		canManageUsers={data.canManageUsers}
+		canManageTags={data.canManageTags}
+		canManageGroups={data.canManageGroups}
+		canRunMaintenance={data.canRunMaintenance}
+	/>
+
+	<!-- Right side: list panel + detail panel (or full-width for system) -->
+	<div class="flex min-w-0 flex-1 overflow-hidden">
+		{@render children()}
+	</div>
+</div>
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 92e0a5f8..b9da7c26 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -1,78 +1,68 @@
 <script lang="ts">
-import { slide } from 'svelte/transition';
+import { goto } from '$app/navigation';
+import { onMount } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
-import UsersTab from './UsersTab.svelte';
-import TagsTab from './TagsTab.svelte';
-import GroupsTab from './GroupsTab.svelte';
-import SystemTab from './SystemTab.svelte';
 
-let { data, form } = $props();
+let { data } = $props();
 
-let activeTab = $state('users');
+// On desktop/tablet the layout shell with EntityNav is visible.
+// On mobile this page IS the entity picker — tapping an entity pushes
+// the user to that route so the browser back button returns here.
+onMount(() => {
+	if (window.matchMedia('(min-width: 768px)').matches) {
+		goto('/admin/users', { replaceState: true });
+	}
+});
 </script>
 
 <svelte:head>
 	<title>{m.page_title_admin()}</title>
 </svelte:head>
 
-<div class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
-	<div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-		<h1 class="font-serif text-3xl text-ink">{m.admin_heading()}</h1>
-
-		<!-- Tabs -->
-		<div class="grid grid-cols-2 rounded-lg border border-line bg-surface p-1 shadow-sm sm:flex">
-			<button
-				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
-				'users'
-					? 'bg-primary text-primary-fg'
-					: 'text-ink-2 hover:text-ink'}"
-				onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
-			>
-			<button
-				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
-				'groups'
-					? 'bg-primary text-primary-fg'
-					: 'text-ink-2 hover:text-ink'}"
-				onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
-			>
-			<button
-				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
-				'tags'
-					? 'bg-primary text-primary-fg'
-					: 'text-ink-2 hover:text-ink'}"
-				onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
-			>
-			<button
-				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
-				'system'
-					? 'bg-primary text-primary-fg'
-					: 'text-ink-2 hover:text-ink'}"
-				onclick={() => (activeTab = 'system')}>{m.admin_tab_system()}</button
-			>
-		</div>
+<!-- Mobile entity picker (md+ viewports redirect to /admin/users on mount) -->
+<div class="flex flex-1 flex-col bg-surface">
+	<div class="border-b border-line px-4 py-4">
+		<h1 class="font-sans text-lg font-bold text-ink">{m.admin_heading()}</h1>
 	</div>
 
-	{#if form?.message}
-		<div class="mb-6 rounded border border-accent/50 bg-accent/20 p-4 text-ink">
-			{form.message}
-		</div>
-	{/if}
+	<nav class="divide-y divide-line" aria-label={m.admin_heading()}>
+		{#if data.canManageUsers}
+			<a href="/admin/users" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
+				<div>
+					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_users()}</div>
+					<div class="mt-0.5 font-sans text-xs text-ink-3">{data.userCount}</div>
+				</div>
+				<span class="text-ink-3">›</span>
+			</a>
+		{/if}
 
-	{#if activeTab === 'users'}
-		<div in:slide>
-			<UsersTab users={data.users} />
-		</div>
-	{:else if activeTab === 'tags'}
-		<div in:slide>
-			<TagsTab tags={data.tags} />
-		</div>
-	{:else if activeTab === 'groups'}
-		<div in:slide>
-			<GroupsTab groups={data.groups} />
-		</div>
-	{:else if activeTab === 'system'}
-		<div in:slide>
-			<SystemTab />
-		</div>
-	{/if}
+		{#if data.canManageGroups}
+			<a href="/admin/groups" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
+				<div>
+					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_groups()}</div>
+					<div class="mt-0.5 font-sans text-xs text-ink-3">{data.groupCount}</div>
+				</div>
+				<span class="text-ink-3">›</span>
+			</a>
+		{/if}
+
+		{#if data.canManageTags}
+			<a href="/admin/tags" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
+				<div>
+					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_tags()}</div>
+					<div class="mt-0.5 font-sans text-xs text-ink-3">{data.tagCount}</div>
+				</div>
+				<span class="text-ink-3">›</span>
+			</a>
+		{/if}
+
+		{#if data.canRunMaintenance}
+			<a href="/admin/system" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
+				<div>
+					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_system()}</div>
+				</div>
+				<span class="text-ink-3">›</span>
+			</a>
+		{/if}
+	</nav>
 </div>
diff --git a/frontend/src/routes/admin/EntityNav.svelte b/frontend/src/routes/admin/EntityNav.svelte
new file mode 100644
index 00000000..36334284
--- /dev/null
+++ b/frontend/src/routes/admin/EntityNav.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+import { page } from '$app/state';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	userCount,
+	groupCount,
+	tagCount,
+	canManageUsers,
+	canManageTags,
+	canManageGroups,
+	canRunMaintenance
+}: {
+	userCount: number;
+	groupCount: number;
+	tagCount: number;
+	canManageUsers: boolean;
+	canManageTags: boolean;
+	canManageGroups: boolean;
+	canRunMaintenance: boolean;
+} = $props();
+
+const currentPath = $derived(page.url.pathname);
+const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`);
+</script>
+
+<nav class="flex w-30 flex-shrink-0 flex-col bg-brand-navy" aria-label={m.admin_heading()}>
+	<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
+		{m.admin_heading()}
+	</div>
+
+	{#if canManageUsers}
+		<a
+			href="/admin/users"
+			class="flex flex-col gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+				{isActive('users')
+				? 'border-brand-mint bg-white/10'
+				: 'border-transparent hover:bg-white/5'}"
+			aria-current={isActive('users') ? 'page' : undefined}
+		>
+			<span class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}">
+				{userCount}
+			</span>
+			<span
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				{isActive('users') ? 'text-white' : 'text-white/55'}"
+			>
+				{m.admin_tab_users()}
+			</span>
+		</a>
+	{/if}
+
+	{#if canManageGroups}
+		<a
+			href="/admin/groups"
+			class="flex flex-col gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+				{isActive('groups')
+				? 'border-brand-mint bg-white/10'
+				: 'border-transparent hover:bg-white/5'}"
+			aria-current={isActive('groups') ? 'page' : undefined}
+		>
+			<span class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}">
+				{groupCount}
+			</span>
+			<span
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				{isActive('groups') ? 'text-white' : 'text-white/55'}"
+			>
+				{m.admin_tab_groups()}
+			</span>
+		</a>
+	{/if}
+
+	{#if canManageTags}
+		<a
+			href="/admin/tags"
+			class="flex flex-col gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+				{isActive('tags')
+				? 'border-brand-mint bg-white/10'
+				: 'border-transparent hover:bg-white/5'}"
+			aria-current={isActive('tags') ? 'page' : undefined}
+		>
+			<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
+				{tagCount}
+			</span>
+			<span
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				{isActive('tags') ? 'text-white' : 'text-white/55'}"
+			>
+				{m.admin_tab_tags()}
+			</span>
+		</a>
+	{/if}
+
+	<div class="flex-1"></div>
+
+	{#if canRunMaintenance}
+		<a
+			href="/admin/system"
+			class="flex flex-col gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors
+				{isActive('system')
+				? 'border-brand-mint bg-white/10'
+				: 'border-l-transparent hover:bg-white/5'}"
+			aria-current={isActive('system') ? 'page' : undefined}
+		>
+			<span
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				{isActive('system') ? 'text-white' : 'text-white/55'}"
+			>
+				{m.admin_tab_system()}
+			</span>
+		</a>
+	{/if}
+</nav>
diff --git a/frontend/src/routes/admin/UsersTab.svelte b/frontend/src/routes/admin/UsersTab.svelte
index f6a72c32..32e4d5c6 100644
--- a/frontend/src/routes/admin/UsersTab.svelte
+++ b/frontend/src/routes/admin/UsersTab.svelte
@@ -29,64 +29,65 @@ let {
 		</a>
 	</div>
 
-	<table class="min-w-full divide-y divide-line">
-		<thead class="bg-muted">
-			<tr>
-				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-					>{m.admin_col_login()}</th
-				>
-				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-					>{m.admin_col_full_name()}</th
-				>
-				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-					>{m.admin_col_groups()}</th
-				>
-				<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
-					>{m.admin_col_actions()}</th
-				>
-			</tr>
-		</thead>
-		<tbody class="divide-y divide-line bg-surface">
-			{#each users as user (user.id)}
-				<tr class="group/row hover:bg-muted">
-					<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
-						{user.username}
-					</td>
-					<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
-						{#if user.firstName || user.lastName}
-							{user.firstName ?? ''} {user.lastName ?? ''}
-						{:else}
-							<span class="text-ink-3 italic">–</span>
-						{/if}
-					</td>
-					<td class="px-6 py-4 text-sm text-ink-2">
-						<div class="flex flex-wrap gap-1">
-							{#if user.groups && user.groups.length > 0}
-								{#each user.groups as group (group.id)}
-									<span
-										class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
-									>
-										{group.name}
-									</span>
-								{/each}
+	<div class="overflow-x-auto">
+		<table class="min-w-full divide-y divide-line">
+			<thead class="bg-muted">
+				<tr>
+					<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+						>{m.admin_col_login()}</th
+					>
+					<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+						>{m.admin_col_full_name()}</th
+					>
+					<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+						>{m.admin_col_groups()}</th
+					>
+					<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
+						>{m.admin_col_actions()}</th
+					>
+				</tr>
+			</thead>
+			<tbody class="divide-y divide-line bg-surface">
+				{#each users as user (user.id)}
+					<tr class="group/row hover:bg-muted">
+						<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
+							{user.username}
+						</td>
+						<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
+							{#if user.firstName || user.lastName}
+								{user.firstName ?? ''} {user.lastName ?? ''}
 							{:else}
-								<span class="text-xs text-ink-3 italic">{m.admin_no_groups()}</span>
+								<span class="text-ink-3 italic">–</span>
 							{/if}
-						</div>
-					</td>
-					<td class="px-6 py-4 text-right whitespace-nowrap">
-						<div class="flex items-center justify-end gap-4">
-							<a
-								href="/admin/users/{user.id}"
-								class="text-sm font-bold tracking-wide text-primary uppercase hover:text-ink-2"
-							>
-								{m.btn_edit()}
-							</a>
+						</td>
+						<td class="px-6 py-4 text-sm text-ink-2">
+							<div class="flex flex-wrap gap-1">
+								{#if user.groups && user.groups.length > 0}
+									{#each user.groups as group (group.id)}
+										<span
+											class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
+										>
+											{group.name}
+										</span>
+									{/each}
+								{:else}
+									<span class="text-xs text-ink-3 italic">{m.admin_no_groups()}</span>
+								{/if}
+							</div>
+						</td>
+						<td class="px-6 py-4 text-right whitespace-nowrap">
+							<div class="flex items-center justify-end gap-4">
+								<a
+									href="/admin/users/{user.id}"
+									class="text-sm font-bold tracking-wide text-primary uppercase hover:text-ink-2"
+								>
+									{m.btn_edit()}
+								</a>
 
-							<form
-								method="POST"
-								action="?/deleteUser"
-								use:enhance={({ cancel }) => {
+								<form
+									method="POST"
+									action="?/deleteUser"
+									use:enhance={({ cancel }) => {
 									if (!confirm(m.admin_user_delete_confirm({ username: user.username }))) {
 										cancel();
 									}
@@ -94,27 +95,28 @@ let {
 										await update();
 									};
 								}}
-								class="flex items-center"
-							>
-								<input type="hidden" name="id" value={user.id} />
-								<button
-									class="p-1 text-ink-3 transition-colors hover:text-red-600"
-									title={m.admin_btn_delete_user_title()}
+									class="flex items-center"
 								>
-									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-										/>
-									</svg>
-								</button>
-							</form>
-						</div>
-					</td>
-				</tr>
-			{/each}
-		</tbody>
-	</table>
+									<input type="hidden" name="id" value={user.id} />
+									<button
+										class="p-1 text-ink-3 transition-colors hover:text-red-600"
+										title={m.admin_btn_delete_user_title()}
+									>
+										<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+									</button>
+								</form>
+							</div>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 </div>
diff --git a/frontend/src/routes/admin/layout.svelte.spec.ts b/frontend/src/routes/admin/layout.svelte.spec.ts
new file mode 100644
index 00000000..7d26c7f1
--- /dev/null
+++ b/frontend/src/routes/admin/layout.svelte.spec.ts
@@ -0,0 +1,87 @@
+/**
+ * Layout shell tests — we test EntityNav.svelte directly since the layout
+ * itself is a thin shell that just composes EntityNav and renders children.
+ */
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import EntityNav from './EntityNav.svelte';
+
+vi.mock('$app/state', () => ({
+	page: { url: { pathname: '/admin/users' } }
+}));
+
+afterEach(cleanup);
+
+const fullPerms = {
+	userCount: 4,
+	groupCount: 3,
+	tagCount: 7,
+	canManageUsers: true,
+	canManageTags: true,
+	canManageGroups: true,
+	canRunMaintenance: true
+};
+
+describe('admin EntityNav — links', () => {
+	it('renders users nav link pointing to /admin/users', async () => {
+		render(EntityNav, fullPerms);
+		await expect
+			.element(page.getByRole('link', { name: /benutzer/i }))
+			.toHaveAttribute('href', '/admin/users');
+	});
+
+	it('renders groups nav link pointing to /admin/groups', async () => {
+		render(EntityNav, fullPerms);
+		await expect
+			.element(page.getByRole('link', { name: /gruppen/i }))
+			.toHaveAttribute('href', '/admin/groups');
+	});
+
+	it('renders tags nav link pointing to /admin/tags', async () => {
+		render(EntityNav, fullPerms);
+		await expect
+			.element(page.getByRole('link', { name: /schlagworte/i }))
+			.toHaveAttribute('href', '/admin/tags');
+	});
+
+	it('renders system nav link pointing to /admin/system', async () => {
+		render(EntityNav, fullPerms);
+		await expect
+			.element(page.getByRole('link', { name: /system/i }))
+			.toHaveAttribute('href', '/admin/system');
+	});
+});
+
+describe('admin EntityNav — permission-based rendering', () => {
+	it('hides users link when canManageUsers is false', async () => {
+		render(EntityNav, { ...fullPerms, canManageUsers: false });
+		await expect.element(page.getByRole('link', { name: /benutzer/i })).not.toBeInTheDocument();
+	});
+
+	it('hides tags link when canManageTags is false', async () => {
+		render(EntityNav, { ...fullPerms, canManageTags: false });
+		await expect.element(page.getByRole('link', { name: /schlagworte/i })).not.toBeInTheDocument();
+	});
+
+	it('hides system link when canRunMaintenance is false', async () => {
+		render(EntityNav, { ...fullPerms, canRunMaintenance: false });
+		await expect.element(page.getByRole('link', { name: /system/i })).not.toBeInTheDocument();
+	});
+});
+
+describe('admin EntityNav — active state', () => {
+	it('marks users link as aria-current=page when on /admin/users', async () => {
+		render(EntityNav, fullPerms);
+		await expect
+			.element(page.getByRole('link', { name: /benutzer/i }))
+			.toHaveAttribute('aria-current', 'page');
+	});
+
+	it('does not mark groups link as current when on /admin/users', async () => {
+		render(EntityNav, fullPerms);
+		await expect
+			.element(page.getByRole('link', { name: /gruppen/i }))
+			.not.toHaveAttribute('aria-current');
+	});
+});
diff --git a/frontend/src/routes/admin/page.svelte.spec.ts b/frontend/src/routes/admin/page.svelte.spec.ts
index fcbfd824..9072e164 100644
--- a/frontend/src/routes/admin/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/page.svelte.spec.ts
@@ -1,83 +1,73 @@
+/**
+ * Tests for the admin root page — the mobile entity picker.
+ * On md+ viewports the page immediately redirects to /admin/users (tested
+ * in e2e). Here we verify the mobile-only list of entity links.
+ */
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import Page from './+page.svelte';
 
-vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
 
-const makeGroup = (overrides = {}) => ({
-	id: 'g1',
-	name: 'Editoren',
-	permissions: ['WRITE_ALL'],
-	...overrides
-});
-
-const makeUser = (overrides = {}) => ({
-	id: 'u1',
-	username: 'max',
-	firstName: 'Max',
-	lastName: 'Mustermann',
-	email: 'max@example.com',
-	birthDate: undefined,
-	contact: undefined,
-	enabled: true,
-	groups: [makeGroup()],
-	createdAt: '2024-01-01T00:00:00Z',
-	...overrides
-});
-
-const baseData = {
-	user: undefined,
-	canWrite: true,
-	canAnnotate: false,
-	users: [makeUser()],
-	groups: [makeGroup()],
-	tags: []
+const fullData = {
+	userCount: 4,
+	groupCount: 3,
+	tagCount: 7,
+	canManageUsers: true,
+	canManageTags: true,
+	canManageGroups: true,
+	canRunMaintenance: true
 };
 
 afterEach(cleanup);
 
-// ─── Users tab ────────────────────────────────────────────────────────────────
-
-describe('Admin page – users tab', () => {
-	it('shows the username in the table', async () => {
-		render(Page, { data: baseData, form: null });
-		await expect.element(page.getByRole('cell', { name: 'max', exact: true })).toBeInTheDocument();
+describe('Admin root page – entity picker', () => {
+	it('renders the admin heading', async () => {
+		render(Page, { data: fullData });
+		await expect.element(page.getByRole('heading')).toBeInTheDocument();
 	});
 
-	it('shows the full name in the table', async () => {
-		render(Page, { data: baseData, form: null });
-		await expect.element(page.getByText(/Max Mustermann/)).toBeInTheDocument();
-	});
-
-	it('shows a dash when user has no name set', async () => {
-		const data = { ...baseData, users: [makeUser({ firstName: undefined, lastName: undefined })] };
-		render(Page, { data, form: null });
-		await expect.element(page.getByText('–')).toBeInTheDocument();
-	});
-
-	it('shows group badges for the user', async () => {
-		render(Page, { data: baseData, form: null });
-		await expect.element(page.getByText('Editoren')).toBeInTheDocument();
-	});
-
-	it('edit link points to /admin/users/[id]', async () => {
-		render(Page, { data: baseData, form: null });
+	it('renders users link pointing to /admin/users', async () => {
+		render(Page, { data: fullData });
 		await expect
-			.element(page.getByRole('link', { name: /Bearbeiten/i }))
-			.toHaveAttribute('href', '/admin/users/u1');
+			.element(page.getByRole('link', { name: /benutzer/i }))
+			.toHaveAttribute('href', '/admin/users');
 	});
 
-	it('new user button links to /admin/users/new', async () => {
-		render(Page, { data: baseData, form: null });
+	it('renders groups link pointing to /admin/groups', async () => {
+		render(Page, { data: fullData });
 		await expect
-			.element(page.getByRole('link', { name: /Neuer Benutzer/i }))
-			.toHaveAttribute('href', '/admin/users/new');
+			.element(page.getByRole('link', { name: /gruppen/i }))
+			.toHaveAttribute('href', '/admin/groups');
 	});
 
-	it('shows "no groups" label when user has no groups', async () => {
-		const data = { ...baseData, users: [makeUser({ groups: [] })] };
-		render(Page, { data, form: null });
-		await expect.element(page.getByText(/Keine Gruppen/i)).toBeInTheDocument();
+	it('renders tags link pointing to /admin/tags', async () => {
+		render(Page, { data: fullData });
+		await expect
+			.element(page.getByRole('link', { name: /schlagworte/i }))
+			.toHaveAttribute('href', '/admin/tags');
+	});
+
+	it('renders system link pointing to /admin/system', async () => {
+		render(Page, { data: fullData });
+		await expect
+			.element(page.getByRole('link', { name: /system/i }))
+			.toHaveAttribute('href', '/admin/system');
+	});
+
+	it('hides users link when canManageUsers is false', async () => {
+		render(Page, { data: { ...fullData, canManageUsers: false } });
+		await expect.element(page.getByRole('link', { name: /benutzer/i })).not.toBeInTheDocument();
+	});
+
+	it('hides system link when canRunMaintenance is false', async () => {
+		render(Page, { data: { ...fullData, canRunMaintenance: false } });
+		await expect.element(page.getByRole('link', { name: /system/i })).not.toBeInTheDocument();
+	});
+
+	it('shows user count', async () => {
+		render(Page, { data: fullData });
+		await expect.element(page.getByText('4')).toBeInTheDocument();
 	});
 });
diff --git a/frontend/src/routes/admin/users/+layout.server.ts b/frontend/src/routes/admin/users/+layout.server.ts
new file mode 100644
index 00000000..97be1fe5
--- /dev/null
+++ b/frontend/src/routes/admin/users/+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/users');
+	return { users: result.data ?? [] };
+};
diff --git a/frontend/src/routes/admin/users/+layout.svelte b/frontend/src/routes/admin/users/+layout.svelte
new file mode 100644
index 00000000..ade6a954
--- /dev/null
+++ b/frontend/src/routes/admin/users/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+import UsersListPanel from './UsersListPanel.svelte';
+
+let { data, children } = $props();
+</script>
+
+<UsersListPanel users={data.users} />
+
+<!-- Detail panel -->
+<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+	{@render children()}
+</div>
diff --git a/frontend/src/routes/admin/users/+page.svelte b/frontend/src/routes/admin/users/+page.svelte
new file mode 100644
index 00000000..6759323e
--- /dev/null
+++ b/frontend/src/routes/admin/users/+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_users_select_prompt()}</p>
+</div>
diff --git a/frontend/src/routes/admin/users/UsersListPanel.svelte b/frontend/src/routes/admin/users/UsersListPanel.svelte
new file mode 100644
index 00000000..51758b2f
--- /dev/null
+++ b/frontend/src/routes/admin/users/UsersListPanel.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+import { page } from '$app/state';
+import { m } from '$lib/paraglide/messages.js';
+
+type Group = {
+	id: string;
+	name: string;
+	permissions: string[];
+};
+
+type User = {
+	id: string;
+	username: string;
+	firstName: string | null;
+	lastName: string | null;
+	groups: Group[];
+};
+
+let { users }: { users: User[] } = $props();
+
+let searchQuery = $state('');
+
+const filtered = $derived(
+	searchQuery.trim() === ''
+		? users
+		: users.filter((u) =>
+				[u.username, u.firstName, u.lastName]
+					.filter(Boolean)
+					.some((v) => v!.toLowerCase().includes(searchQuery.toLowerCase()))
+			)
+);
+</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 justify-between border-b border-line px-3 py-2">
+		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.admin_users_list_title()}
+		</span>
+		<a
+			href="/admin/users/new"
+			class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+			title={m.admin_btn_new_user()}
+			aria-label={m.admin_btn_new_user()}
+		>
+			<svg
+				class="h-3.5 w-3.5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2.5"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+			</svg>
+			{m.admin_btn_new_user()}
+		</a>
+	</div>
+
+	<!-- Search -->
+	<div class="border-b border-line px-3 py-2">
+		<input
+			type="search"
+			bind:value={searchQuery}
+			placeholder={m.admin_users_search_placeholder()}
+			class="w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
+		/>
+	</div>
+
+	<!-- Scrollable user list -->
+	<div class="flex-1 overflow-y-auto">
+		{#if filtered.length === 0}
+			<p class="px-4 py-6 text-center text-xs text-ink-3">
+				{m.admin_users_empty()}
+			</p>
+		{:else}
+			{#each filtered as user (user.id)}
+				{@const isActive = page.url.pathname.startsWith('/admin/users/' + user.id)}
+				{@const fullName =
+					[user.firstName, user.lastName].filter(Boolean).join(' ') || null}
+				<a
+					href="/admin/users/{user.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">{user.username}</div>
+					{#if fullName}
+						<div class="mt-0.5 text-xs text-ink-3">{fullName}</div>
+					{/if}
+					{#if user.groups.length > 0}
+						<div class="mt-1 flex flex-wrap gap-1">
+							{#each user.groups as group (group.id)}
+								<span class="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-ink-3">
+									{group.name}
+								</span>
+							{/each}
+						</div>
+					{/if}
+				</a>
+			{/each}
+		{/if}
+	</div>
+</div>
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 2ebe7691..e2201990 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -10,85 +10,74 @@ let { data, form } = $props();
 const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
 </script>
 
-<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
-	<a
-		href="/admin"
-		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"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			stroke-width="2"
+<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_user_edit_heading({ username: data.editUser.username })}
+		</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_user_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}
+
+		<form id="edit-user-form" method="POST" use:enhance class="space-y-5">
+			<!-- Profile card -->
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_section_personal()}
+				</h3>
+				<UserProfileSection
+					firstName={data.editUser.firstName ?? ''}
+					lastName={data.editUser.lastName ?? ''}
+					birthDate={data.editUser.birthDate ?? ''}
+					email={data.editUser.email ?? ''}
+					contact={data.editUser.contact ?? ''}
+				/>
+			</div>
+
+			<!-- Groups card -->
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_col_groups()}
+				</h3>
+				<UserGroupsSection groups={data.groups} selectedGroupIds={selectedGroupIds} />
+			</div>
+
+			<!-- Password card -->
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_label_new_password_optional()}
+				</h3>
+				<UserPasswordSection />
+			</div>
+		</form>
+	</div>
+
+	<!-- Docked footer -->
+	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
+		<a
+			href="/admin/users"
+			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
 		>
-			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
-		</svg>
-		{m.btn_back_to_overview()}
-	</a>
-
-	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">
-		{m.admin_user_edit_heading({ username: data.editUser.username })}
-	</h1>
-
-	{#if form?.success}
-		<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
-			{m.admin_user_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}
-
-	<form method="POST" use:enhance class="space-y-6">
-		<!-- Profile card -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.profile_section_personal()}
-			</h2>
-			<UserProfileSection
-				firstName={data.editUser.firstName ?? ''}
-				lastName={data.editUser.lastName ?? ''}
-				birthDate={data.editUser.birthDate ?? ''}
-				email={data.editUser.email ?? ''}
-				contact={data.editUser.contact ?? ''}
-			/>
-		</div>
-
-		<!-- Groups card -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.admin_col_groups()}
-			</h2>
-			<UserGroupsSection groups={data.groups} selectedGroupIds={selectedGroupIds} />
-		</div>
-
-		<!-- Password card -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.admin_label_new_password_optional()}
-			</h2>
-			<UserPasswordSection />
-		</div>
-
-		<!-- Save bar -->
-		<div
-			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			form="edit-user-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"
 		>
-			<a
-				href="/admin"
-				class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
-			>
-				{m.btn_cancel()}
-			</a>
-			<button
-				type="submit"
-				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>
-	</form>
+			{m.btn_save()}
+		</button>
+	</div>
 </div>
diff --git a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
index acc3d6fd..43fca9b1 100644
--- a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
@@ -110,11 +110,11 @@ describe('Admin edit user page – rendering', () => {
 		});
 	});
 
-	it('cancel link points to /admin', async () => {
+	it('cancel link points to /admin/users', async () => {
 		render(Page, { data: baseData, form: null });
 		await expect
 			.element(page.getByRole('link', { name: /Abbrechen/i }))
-			.toHaveAttribute('href', '/admin');
+			.toHaveAttribute('href', '/admin/users');
 	});
 
 	it('renders the save button', async () => {
diff --git a/frontend/src/routes/admin/users/layout.server.spec.ts b/frontend/src/routes/admin/users/layout.server.spec.ts
new file mode 100644
index 00000000..32433eb4
--- /dev/null
+++ b/frontend/src/routes/admin/users/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(users: unknown[]) {
+	vi.mocked(createApiClient).mockReturnValue({
+		GET: vi.fn().mockResolvedValueOnce({ response: { ok: true }, data: users })
+	} as ReturnType<typeof createApiClient>);
+}
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('admin/users layout load', () => {
+	it('returns the users list', async () => {
+		mockApi([
+			{ id: 'u1', username: 'alice' },
+			{ id: 'u2', username: 'bob' }
+		]);
+		const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(result.users).toHaveLength(2);
+		expect(result.users[0].username).toBe('alice');
+	});
+
+	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.users).toEqual([]);
+	});
+
+	it('calls GET /api/users', 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/users');
+	});
+});
diff --git a/frontend/src/routes/admin/users/layout.svelte.spec.ts b/frontend/src/routes/admin/users/layout.svelte.spec.ts
new file mode 100644
index 00000000..4d736f2c
--- /dev/null
+++ b/frontend/src/routes/admin/users/layout.svelte.spec.ts
@@ -0,0 +1,95 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import UsersListPanel from './UsersListPanel.svelte';
+
+vi.mock('$app/state', () => ({
+	page: { url: { pathname: '/admin/users/u1' } }
+}));
+
+afterEach(cleanup);
+
+const users = [
+	{
+		id: 'u1',
+		username: 'reader',
+		firstName: 'Lea',
+		lastName: 'Leserin',
+		groups: [{ id: 'g1', name: 'Leser', permissions: ['READ_ALL'] }]
+	},
+	{
+		id: 'u2',
+		username: 'admin',
+		firstName: null,
+		lastName: null,
+		groups: [{ id: 'g2', name: 'Admins', permissions: ['ADMIN'] }]
+	}
+];
+
+describe('UsersListPanel — header', () => {
+	it('renders the panel title', async () => {
+		render(UsersListPanel, { users });
+		await expect.element(page.getByText(/Alle Benutzer/i)).toBeInTheDocument();
+	});
+
+	it('renders a new-user link pointing to /admin/users/new', async () => {
+		render(UsersListPanel, { users });
+		await expect
+			.element(page.getByRole('link', { name: /neuer benutzer/i }))
+			.toHaveAttribute('href', '/admin/users/new');
+	});
+
+	it('renders a search input', async () => {
+		render(UsersListPanel, { users });
+		await expect.element(page.getByRole('searchbox')).toBeInTheDocument();
+	});
+});
+
+describe('UsersListPanel — user items', () => {
+	it('renders each username', async () => {
+		render(UsersListPanel, { users });
+		await expect.element(page.getByRole('link', { name: /reader/i })).toBeInTheDocument();
+		await expect.element(page.getByRole('link', { name: /admin/i })).toBeInTheDocument();
+	});
+
+	it('each user links to /admin/users/[id]', async () => {
+		const { container } = render(UsersListPanel, { users });
+		const links = container.querySelectorAll<HTMLAnchorElement>('a[href^="/admin/users/u"]');
+		expect(links.length).toBe(2);
+		expect(links[0].getAttribute('href')).toBe('/admin/users/u1');
+		expect(links[1].getAttribute('href')).toBe('/admin/users/u2');
+	});
+
+	it('shows full name as subtitle when available', async () => {
+		render(UsersListPanel, { users });
+		await expect.element(page.getByText('Lea Leserin')).toBeInTheDocument();
+	});
+
+	it('shows group name chip', async () => {
+		render(UsersListPanel, { users });
+		await expect.element(page.getByText('Leser', { exact: true })).toBeInTheDocument();
+	});
+});
+
+describe('UsersListPanel — active state', () => {
+	it('marks the active user link with aria-current=page', async () => {
+		render(UsersListPanel, { users });
+		await expect
+			.element(page.getByRole('link', { name: /reader/i }))
+			.toHaveAttribute('aria-current', 'page');
+	});
+
+	it('does not mark the inactive user link with aria-current', async () => {
+		render(UsersListPanel, { users });
+		await expect
+			.element(page.getByRole('link', { name: /admin/i }))
+			.not.toHaveAttribute('aria-current');
+	});
+});
+
+describe('UsersListPanel — empty state', () => {
+	it('shows empty state message when users array is empty', async () => {
+		render(UsersListPanel, { users: [] });
+		await expect.element(page.getByText(/keine benutzer/i)).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/routes/admin/users/new/+page.server.ts b/frontend/src/routes/admin/users/new/+page.server.ts
index 256e4f89..17af6aee 100644
--- a/frontend/src/routes/admin/users/new/+page.server.ts
+++ b/frontend/src/routes/admin/users/new/+page.server.ts
@@ -40,6 +40,6 @@ export const actions: Actions = {
 			return fail(result.response.status, { error: getErrorMessage(code) });
 		}
 
-		throw redirect(303, '/admin');
+		throw redirect(303, '/admin/users');
 	}
 };
diff --git a/frontend/src/routes/admin/users/new/+page.svelte b/frontend/src/routes/admin/users/new/+page.svelte
index 4af6d8ba..cfb63278 100644
--- a/frontend/src/routes/admin/users/new/+page.svelte
+++ b/frontend/src/routes/admin/users/new/+page.svelte
@@ -8,64 +8,57 @@ import AccountSection from './AccountSection.svelte';
 let { data, form } = $props();
 </script>
 
-<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
-	<a
-		href="/admin"
-		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"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			stroke-width="2"
-		>
-			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
-		</svg>
-		{m.btn_back_to_overview()}
-	</a>
+<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_user_new_heading()}</h2>
+	</div>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.admin_user_new_heading()}</h1>
+	<!-- Scrollable body -->
+	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#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}
 
-	{#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}
-
-	<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-		<form method="POST" use:enhance class="space-y-5">
-			<AccountSection />
+		<form id="new-user-form" method="POST" use:enhance class="space-y-5">
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<AccountSection />
+			</div>
 
 			<!-- Profile -->
-			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.profile_section_personal()}
-			</h2>
-			<UserProfileSection />
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.profile_section_personal()}
+				</h3>
+				<UserProfileSection />
+			</div>
 
 			<!-- Groups -->
-			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.admin_col_groups()}
-			</h2>
-			<UserGroupsSection groups={data.groups} />
-
-			<!-- Save bar -->
-			<div
-				class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
-			>
-				<a
-					href="/admin"
-					class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
-				>
-					{m.btn_cancel()}
-				</a>
-				<button
-					type="submit"
-					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_create()}
-				</button>
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_col_groups()}
+				</h3>
+				<UserGroupsSection groups={data.groups} />
 			</div>
 		</form>
 	</div>
+
+	<!-- Docked footer -->
+	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
+		<a
+			href="/admin/users"
+			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
+		>
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			form="new-user-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_create()}
+		</button>
+	</div>
 </div>
diff --git a/frontend/src/routes/admin/users/new/page.svelte.spec.ts b/frontend/src/routes/admin/users/new/page.svelte.spec.ts
index d80f5c6f..6ac42717 100644
--- a/frontend/src/routes/admin/users/new/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/users/new/page.svelte.spec.ts
@@ -33,18 +33,11 @@ describe('Admin new user page – rendering', () => {
 		await expect.element(page.getByText('Admins')).toBeInTheDocument();
 	});
 
-	it('cancel link points to /admin', async () => {
+	it('cancel link points to /admin/users', async () => {
 		render(Page, { data: baseData, form: null });
 		await expect
 			.element(page.getByRole('link', { name: /Abbrechen/i }))
-			.toHaveAttribute('href', '/admin');
-	});
-
-	it('back link points to /admin', async () => {
-		render(Page, { data: baseData, form: null });
-		await expect
-			.element(page.getByRole('link', { name: /Zurück/i }))
-			.toHaveAttribute('href', '/admin');
+			.toHaveAttribute('href', '/admin/users');
 	});
 
 	it('renders the create button', async () => {
-- 
2.49.1


From c8a834b91b164281eb127a94e1bb9c5fab927221 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 01:10:51 +0200
Subject: [PATCH 02/11] feat(admin): add layout server auth guard and Phase 1
 hotfixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- +layout.server.ts: auth guard (throws 403 for non-admin) with granular
  permission flags and entity counts for EntityNav
- GroupsTab: add ⚙ prefix to ADMIN badge (WCAG 1.4.1, non-color indicator)
- TagsTab: remove opacity-0 from action buttons (hidden on touch devices)
- +layout.svelte: remove unused isSystem derived

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/admin/+layout.server.ts   | 40 +++++++++++
 frontend/src/routes/admin/+layout.svelte      |  3 -
 frontend/src/routes/admin/GroupsTab.svelte    |  2 +-
 .../src/routes/admin/GroupsTab.svelte.spec.ts | 27 +++++++
 frontend/src/routes/admin/TagsTab.svelte      |  2 +-
 .../src/routes/admin/TagsTab.svelte.spec.ts   | 23 ++++++
 .../src/routes/admin/layout.server.spec.ts    | 72 +++++++++++++++++++
 7 files changed, 164 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/routes/admin/+layout.server.ts
 create mode 100644 frontend/src/routes/admin/GroupsTab.svelte.spec.ts
 create mode 100644 frontend/src/routes/admin/TagsTab.svelte.spec.ts
 create mode 100644 frontend/src/routes/admin/layout.server.spec.ts

diff --git a/frontend/src/routes/admin/+layout.server.ts b/frontend/src/routes/admin/+layout.server.ts
new file mode 100644
index 00000000..19405345
--- /dev/null
+++ b/frontend/src/routes/admin/+layout.server.ts
@@ -0,0 +1,40 @@
+import { error } from '@sveltejs/kit';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+type UserGroup = { permissions: string[] };
+
+function hasPerm(user: { groups?: UserGroup[] } | undefined, perm: string): boolean {
+	return user?.groups?.some((g) => g.permissions.includes(perm)) ?? false;
+}
+
+function hasAnyAdminPerm(user: { groups?: UserGroup[] } | undefined): boolean {
+	return (
+		hasPerm(user, 'ADMIN') ||
+		hasPerm(user, 'ADMIN_USER') ||
+		hasPerm(user, 'ADMIN_TAG') ||
+		hasPerm(user, 'ADMIN_PERMISSION')
+	);
+}
+
+export async function load({ fetch, locals }) {
+	const user = locals.user;
+	if (!hasAnyAdminPerm(user)) throw error(403, getErrorMessage('FORBIDDEN'));
+
+	const api = createApiClient(fetch);
+	const [usersResult, groupsResult, tagsResult] = await Promise.all([
+		api.GET('/api/users'),
+		api.GET('/api/groups'),
+		api.GET('/api/tags')
+	]);
+
+	return {
+		userCount: (usersResult.data ?? []).length,
+		groupCount: (groupsResult.data ?? []).length,
+		tagCount: (tagsResult.data ?? []).length,
+		canManageUsers: hasPerm(user, 'ADMIN_USER'),
+		canManageTags: hasPerm(user, 'ADMIN_TAG'),
+		canManageGroups: hasPerm(user, 'ADMIN_PERMISSION'),
+		canRunMaintenance: hasPerm(user, 'ADMIN')
+	};
+}
diff --git a/frontend/src/routes/admin/+layout.svelte b/frontend/src/routes/admin/+layout.svelte
index 13f98a76..6c9558dd 100644
--- a/frontend/src/routes/admin/+layout.svelte
+++ b/frontend/src/routes/admin/+layout.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-import { page } from '$app/state';
 import EntityNav from './EntityNav.svelte';
 
 let { data, children } = $props();
-
-const isSystem = $derived(page.url.pathname.startsWith('/admin/system'));
 </script>
 
 <svelte:head>
diff --git a/frontend/src/routes/admin/GroupsTab.svelte b/frontend/src/routes/admin/GroupsTab.svelte
index 6eb22e53..0f5da793 100644
--- a/frontend/src/routes/admin/GroupsTab.svelte
+++ b/frontend/src/routes/admin/GroupsTab.svelte
@@ -126,7 +126,7 @@ function cancelEditGroup() {
 											? 'border-red-100 bg-red-50 text-red-700'
 											: 'border-line bg-muted text-ink-2'}"
 									>
-										{perm}
+										{perm === 'ADMIN' ? '⚙ ' : ''}{perm}
 									</span>
 								{/each}
 							</div>
diff --git a/frontend/src/routes/admin/GroupsTab.svelte.spec.ts b/frontend/src/routes/admin/GroupsTab.svelte.spec.ts
new file mode 100644
index 00000000..ad9cc66e
--- /dev/null
+++ b/frontend/src/routes/admin/GroupsTab.svelte.spec.ts
@@ -0,0 +1,27 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import GroupsTab from './GroupsTab.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+afterEach(cleanup);
+
+const makeGroups = () => [
+	{ id: 'g1', name: 'Administrators', permissions: ['ADMIN', 'WRITE_ALL'] },
+	{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] }
+];
+
+describe('GroupsTab — ADMIN permission badge (WCAG 1.4.1)', () => {
+	it('ADMIN badge has a non-color indicator so it is distinguishable without color', () => {
+		// The ADMIN badge must not rely on color alone (WCAG 1.4.1).
+		// It must contain a visible non-color indicator: a text prefix such as ⚙.
+		const { container } = render(GroupsTab, { groups: makeGroups() });
+
+		const adminBadge = Array.from(container.querySelectorAll('span')).find((el) =>
+			el.textContent?.includes('ADMIN')
+		);
+		expect(adminBadge).toBeDefined();
+		// Badge text must include a non-color prefix character
+		expect(adminBadge!.textContent).toMatch(/[⚙★⚠!]/);
+	});
+});
diff --git a/frontend/src/routes/admin/TagsTab.svelte b/frontend/src/routes/admin/TagsTab.svelte
index 01a1fec0..1b41558f 100644
--- a/frontend/src/routes/admin/TagsTab.svelte
+++ b/frontend/src/routes/admin/TagsTab.svelte
@@ -76,7 +76,7 @@ function cancelEditTag() {
 					<span class="rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
 						{tag.name}
 					</span>
-					<div class="flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
+					<div class="flex items-center gap-2">
 						<button
 							onclick={() => startEditTag(tag)}
 							aria-label={m.admin_btn_edit_tag_label()}
diff --git a/frontend/src/routes/admin/TagsTab.svelte.spec.ts b/frontend/src/routes/admin/TagsTab.svelte.spec.ts
new file mode 100644
index 00000000..1f13f9c8
--- /dev/null
+++ b/frontend/src/routes/admin/TagsTab.svelte.spec.ts
@@ -0,0 +1,23 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import TagsTab from './TagsTab.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+afterEach(cleanup);
+
+const makeTags = () => [
+	{ id: 't1', name: 'Familie' },
+	{ id: 't2', name: 'Urlaub' }
+];
+
+describe('TagsTab — action buttons', () => {
+	it('no element with opacity-0 class exists (regression guard: buttons must not be hover-only)', () => {
+		// Before fix: the action buttons container had opacity-0 group-hover:opacity-100
+		// which hides buttons on touch devices. After fix: that class is gone entirely.
+		const { container } = render(TagsTab, { tags: makeTags() });
+
+		const hiddenElements = container.querySelectorAll('.opacity-0');
+		expect(hiddenElements.length).toBe(0);
+	});
+});
diff --git a/frontend/src/routes/admin/layout.server.spec.ts b/frontend/src/routes/admin/layout.server.spec.ts
new file mode 100644
index 00000000..eb5f39c8
--- /dev/null
+++ b/frontend/src/routes/admin/layout.server.spec.ts
@@ -0,0 +1,72 @@
+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(users: unknown[], groups: unknown[], tags: unknown[]) {
+	vi.mocked(createApiClient).mockReturnValue({
+		GET: vi
+			.fn()
+			.mockResolvedValueOnce({ response: { ok: true }, data: users })
+			.mockResolvedValueOnce({ response: { ok: true }, data: groups })
+			.mockResolvedValueOnce({ response: { ok: true }, data: tags })
+	} as ReturnType<typeof createApiClient>);
+}
+
+const adminUser = {
+	groups: [{ permissions: ['ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'] }]
+};
+const tagAdminUser = { groups: [{ permissions: ['ADMIN_TAG'] }] };
+const noPermUser = { groups: [{ permissions: ['READ_ALL'] }] };
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('admin layout load — permission check', () => {
+	it('throws 403 when user has no admin permission', async () => {
+		await expect(
+			load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: noPermUser } })
+		).rejects.toMatchObject({ status: 403 });
+	});
+
+	it('throws 403 when user is undefined', async () => {
+		await expect(
+			load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: undefined } })
+		).rejects.toMatchObject({ status: 403 });
+	});
+
+	it('throws 403 when user has no groups', async () => {
+		await expect(
+			load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: { groups: [] } } })
+		).rejects.toMatchObject({ status: 403 });
+	});
+
+	it('allows access for a user with ADMIN_TAG only', async () => {
+		mockApi([], [], []);
+		await expect(
+			load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: tagAdminUser } })
+		).resolves.toBeDefined();
+	});
+
+	it('returns entity counts and permission flags for a full admin', async () => {
+		mockApi(
+			[{ id: 'u1' }, { id: 'u2' }],
+			[{ id: 'g1' }],
+			[{ id: 't1' }, { id: 't2' }, { id: 't3' }]
+		);
+
+		const result = await load({
+			fetch: vi.fn() as unknown as typeof fetch,
+			locals: { user: adminUser }
+		});
+
+		expect(result.userCount).toBe(2);
+		expect(result.groupCount).toBe(1);
+		expect(result.tagCount).toBe(3);
+		expect(result.canManageUsers).toBe(true);
+		expect(result.canManageTags).toBe(true);
+		expect(result.canManageGroups).toBe(true);
+		expect(result.canRunMaintenance).toBe(true);
+	});
+});
-- 
2.49.1


From 8197db2c14eafa6aac4bd59636dc21d56fa1f41b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 01:26:45 +0200
Subject: [PATCH 03/11] feat(admin/groups): add groups entity with
 master-detail sub-routes

Creates the full groups section under /admin/groups/:
- +layout.server.ts: loads groups list via GET /api/groups
- GroupsListPanel.svelte: left list panel (name + permission count, active state)
- +layout.svelte: composes list panel + children slot
- +page.svelte: empty selection prompt
- [id]/+page.server.ts: update (PATCH) and delete actions
- [id]/+page.svelte: edit detail panel with Standard/Administrative permission sections
- new/+page.svelte and +page.server.ts: create group form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |  11 ++
 frontend/messages/en.json                     |  11 ++
 frontend/messages/es.json                     |  11 ++
 .../src/routes/admin/groups/+layout.server.ts |   8 +
 .../src/routes/admin/groups/+layout.svelte    |  12 ++
 frontend/src/routes/admin/groups/+page.svelte |   7 +
 .../admin/groups/GroupsListPanel.svelte       |  64 ++++++++
 .../routes/admin/groups/[id]/+page.server.ts  |  47 ++++++
 .../src/routes/admin/groups/[id]/+page.svelte | 144 ++++++++++++++++++
 .../routes/admin/groups/layout.server.spec.ts |  41 +++++
 .../routes/admin/groups/layout.svelte.spec.ts |  79 ++++++++++
 .../routes/admin/groups/new/+page.server.ts   |  25 +++
 .../src/routes/admin/groups/new/+page.svelte  | 117 ++++++++++++++
 13 files changed, 577 insertions(+)
 create mode 100644 frontend/src/routes/admin/groups/+layout.server.ts
 create mode 100644 frontend/src/routes/admin/groups/+layout.svelte
 create mode 100644 frontend/src/routes/admin/groups/+page.svelte
 create mode 100644 frontend/src/routes/admin/groups/GroupsListPanel.svelte
 create mode 100644 frontend/src/routes/admin/groups/[id]/+page.server.ts
 create mode 100644 frontend/src/routes/admin/groups/[id]/+page.svelte
 create mode 100644 frontend/src/routes/admin/groups/layout.server.spec.ts
 create mode 100644 frontend/src/routes/admin/groups/layout.svelte.spec.ts
 create mode 100644 frontend/src/routes/admin/groups/new/+page.server.ts
 create mode 100644 frontend/src/routes/admin/groups/new/+page.svelte

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index ccaecdb2..04be49cb 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -171,6 +171,17 @@
 	"admin_users_search_placeholder": "Benutzer suchen\u2026",
 	"admin_users_empty": "Keine Benutzer vorhanden.",
 	"admin_users_select_prompt": "W\u00e4hle einen Benutzer aus der Liste.",
+	"admin_btn_new_group": "Neue Gruppe",
+	"admin_groups_list_title": "Alle Gruppen",
+	"admin_groups_empty": "Keine Gruppen vorhanden.",
+	"admin_groups_select_prompt": "W\u00e4hle eine Gruppe aus der Liste.",
+	"admin_groups_permission_count": "{count} Berechtigungen",
+	"admin_group_new_heading": "Neue Gruppe anlegen",
+	"admin_group_edit_heading": "Gruppe: {name}",
+	"admin_group_updated": "Gruppe gespeichert.",
+	"admin_group_created": "Gruppe erstellt.",
+	"admin_groups_section_standard": "Standard",
+	"admin_groups_section_administrative": "Administrativ",
 	"admin_user_new_heading": "Neuen Benutzer anlegen",
 	"admin_user_edit_heading": "Benutzer bearbeiten: {username}",
 	"admin_user_created": "Benutzer wurde erstellt.",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index c95a0303..9346ec74 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -171,6 +171,17 @@
 	"admin_users_search_placeholder": "Search users\u2026",
 	"admin_users_empty": "No users found.",
 	"admin_users_select_prompt": "Select a user from the list.",
+	"admin_btn_new_group": "New Group",
+	"admin_groups_list_title": "All Groups",
+	"admin_groups_empty": "No groups found.",
+	"admin_groups_select_prompt": "Select a group from the list.",
+	"admin_groups_permission_count": "{count} permissions",
+	"admin_group_new_heading": "Create new group",
+	"admin_group_edit_heading": "Group: {name}",
+	"admin_group_updated": "Group saved.",
+	"admin_group_created": "Group created.",
+	"admin_groups_section_standard": "Standard",
+	"admin_groups_section_administrative": "Administrative",
 	"admin_user_new_heading": "Create new user",
 	"admin_user_edit_heading": "Edit user: {username}",
 	"admin_user_created": "User has been created.",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 48bebf1b..d5850122 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -171,6 +171,17 @@
 	"admin_users_search_placeholder": "Buscar usuarios\u2026",
 	"admin_users_empty": "No hay usuarios.",
 	"admin_users_select_prompt": "Selecciona un usuario de la lista.",
+	"admin_btn_new_group": "Nuevo grupo",
+	"admin_groups_list_title": "Todos los grupos",
+	"admin_groups_empty": "No hay grupos.",
+	"admin_groups_select_prompt": "Selecciona un grupo de la lista.",
+	"admin_groups_permission_count": "{count} permisos",
+	"admin_group_new_heading": "Crear nuevo grupo",
+	"admin_group_edit_heading": "Grupo: {name}",
+	"admin_group_updated": "Grupo guardado.",
+	"admin_group_created": "Grupo creado.",
+	"admin_groups_section_standard": "Est\u00e1ndar",
+	"admin_groups_section_administrative": "Administrativo",
 	"admin_user_new_heading": "Crear nuevo usuario",
 	"admin_user_edit_heading": "Editar usuario: {username}",
 	"admin_user_created": "Usuario creado.",
diff --git a/frontend/src/routes/admin/groups/+layout.server.ts b/frontend/src/routes/admin/groups/+layout.server.ts
new file mode 100644
index 00000000..d9cf130a
--- /dev/null
+++ b/frontend/src/routes/admin/groups/+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/groups');
+	return { groups: result.data ?? [] };
+};
diff --git a/frontend/src/routes/admin/groups/+layout.svelte b/frontend/src/routes/admin/groups/+layout.svelte
new file mode 100644
index 00000000..1313962a
--- /dev/null
+++ b/frontend/src/routes/admin/groups/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+import GroupsListPanel from './GroupsListPanel.svelte';
+
+let { data, children } = $props();
+</script>
+
+<GroupsListPanel groups={data.groups} />
+
+<!-- Detail panel -->
+<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+	{@render children()}
+</div>
diff --git a/frontend/src/routes/admin/groups/+page.svelte b/frontend/src/routes/admin/groups/+page.svelte
new file mode 100644
index 00000000..d98bacd4
--- /dev/null
+++ b/frontend/src/routes/admin/groups/+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_groups_select_prompt()}</p>
+</div>
diff --git a/frontend/src/routes/admin/groups/GroupsListPanel.svelte b/frontend/src/routes/admin/groups/GroupsListPanel.svelte
new file mode 100644
index 00000000..e025bdcc
--- /dev/null
+++ b/frontend/src/routes/admin/groups/GroupsListPanel.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+import { page } from '$app/state';
+import { m } from '$lib/paraglide/messages.js';
+
+type Group = {
+	id: string;
+	name: string;
+	permissions: string[];
+};
+
+let { groups }: { groups: Group[] } = $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 justify-between border-b border-line px-3 py-2">
+		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.admin_groups_list_title()}
+		</span>
+		<a
+			href="/admin/groups/new"
+			class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+			title={m.admin_btn_new_group()}
+			aria-label={m.admin_btn_new_group()}
+		>
+			<svg
+				class="h-3.5 w-3.5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2.5"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+			</svg>
+			{m.admin_btn_new_group()}
+		</a>
+	</div>
+
+	<!-- Scrollable group list -->
+	<div class="flex-1 overflow-y-auto">
+		{#if groups.length === 0}
+			<p class="px-4 py-6 text-center text-xs text-ink-3">
+				{m.admin_groups_empty()}
+			</p>
+		{:else}
+			{#each groups as group (group.id)}
+				{@const isActive = page.url.pathname.startsWith('/admin/groups/' + group.id)}
+				<a
+					href="/admin/groups/{group.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">{group.name}</div>
+					<div class="mt-0.5 text-xs text-ink-3">
+						{m.admin_groups_permission_count({ count: group.permissions.length })}
+					</div>
+				</a>
+			{/each}
+		{/if}
+	</div>
+</div>
diff --git a/frontend/src/routes/admin/groups/[id]/+page.server.ts b/frontend/src/routes/admin/groups/[id]/+page.server.ts
new file mode 100644
index 00000000..b3441c04
--- /dev/null
+++ b/frontend/src/routes/admin/groups/[id]/+page.server.ts
@@ -0,0 +1,47 @@
+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 { groups } = await parent();
+	const group = groups.find((g: { id: string }) => g.id === params.id);
+	if (!group) throw error(404, getErrorMessage('GROUP_NOT_FOUND'));
+	return { group };
+};
+
+export const actions: Actions = {
+	update: async ({ params, request, fetch }) => {
+		const data = await request.formData();
+		const api = createApiClient(fetch);
+
+		const result = await api.PATCH('/api/groups/{id}', {
+			params: { path: { id: params.id } },
+			body: {
+				name: data.get('name') as string,
+				permissions: data.getAll('permissions') 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/groups/{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/groups');
+	}
+};
diff --git a/frontend/src/routes/admin/groups/[id]/+page.svelte b/frontend/src/routes/admin/groups/[id]/+page.svelte
new file mode 100644
index 00000000..377617d3
--- /dev/null
+++ b/frontend/src/routes/admin/groups/[id]/+page.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { data, form } = $props();
+
+const STANDARD_PERMISSIONS: { value: string; label: string }[] = [
+	{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }
+];
+
+const ADMIN_PERMISSIONS: { value: string; label: string }[] = [
+	{ value: 'ADMIN', label: 'Vollzugriff (Admin)' },
+	{ value: 'ADMIN_USER', label: 'Benutzer verwalten' },
+	{ value: 'ADMIN_TAG', label: 'Schlagworte verwalten' },
+	{ value: 'ADMIN_PERMISSION', label: 'Berechtigungen verwalten' }
+];
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<!-- 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_group_edit_heading({ name: data.group.name })}
+		</h2>
+		<form
+			method="POST"
+			action="?/delete"
+			use:enhance={({ cancel }) => {
+				if (!confirm(m.admin_group_delete_confirm())) cancel();
+				return async ({ update }) => {
+					await update();
+				};
+			}}
+		>
+			<button
+				type="submit"
+				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1.5 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60"
+			>
+				{m.btn_delete()}
+			</button>
+		</form>
+	</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 dark:border-green-800 dark:bg-green-950/40 dark:text-green-400"
+			>
+				{m.admin_group_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 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400"
+			>
+				{form.error}
+			</div>
+		{/if}
+
+		<form id="edit-group-form" method="POST" action="?/update" use:enhance>
+			<!-- Group name card -->
+			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_col_name()}
+				</h3>
+				<input
+					type="text"
+					name="name"
+					value={data.group.name}
+					required
+					class="bg-background w-full rounded-sm border border-line px-3 py-2 font-sans text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none"
+				/>
+			</div>
+
+			<!-- Standard permissions card -->
+			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_groups_section_standard()}
+				</h3>
+				<div class="space-y-3">
+					{#each STANDARD_PERMISSIONS as perm (perm.value)}
+						<label class="flex items-center gap-2 text-sm text-ink">
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								checked={data.group.permissions.includes(perm.value)}
+								class="h-4 w-4 rounded border-line text-primary focus:ring-primary"
+							/>
+							{perm.label}
+						</label>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Administrative permissions card -->
+			<div
+				class="rounded-sm border border-amber-200 bg-amber-50 p-5 shadow-sm dark:border-amber-900 dark:bg-amber-950/30"
+			>
+				<h3
+					class="mb-4 text-xs font-bold tracking-widest text-amber-700 uppercase dark:text-amber-400"
+				>
+					{m.admin_groups_section_administrative()}
+				</h3>
+				<div class="space-y-3">
+					{#each ADMIN_PERMISSIONS as perm (perm.value)}
+						<label
+							class="flex items-center gap-2 text-sm {perm.value === 'ADMIN'
+								? 'font-semibold text-amber-800 dark:text-amber-300'
+								: 'text-ink'}"
+						>
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								checked={data.group.permissions.includes(perm.value)}
+								class="h-4 w-4 rounded border-amber-300 text-amber-600 focus:ring-amber-500 dark:border-amber-700"
+							/>
+							{perm.label}
+						</label>
+					{/each}
+				</div>
+			</div>
+		</form>
+	</div>
+
+	<!-- Docked footer -->
+	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
+		<a
+			href="/admin/groups"
+			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-group-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>
diff --git a/frontend/src/routes/admin/groups/layout.server.spec.ts b/frontend/src/routes/admin/groups/layout.server.spec.ts
new file mode 100644
index 00000000..a3fdc6e9
--- /dev/null
+++ b/frontend/src/routes/admin/groups/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(groups: unknown[]) {
+	vi.mocked(createApiClient).mockReturnValue({
+		GET: vi.fn().mockResolvedValueOnce({ response: { ok: true }, data: groups })
+	} as ReturnType<typeof createApiClient>);
+}
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('admin/groups layout load', () => {
+	it('returns the groups list', async () => {
+		mockApi([
+			{ id: 'g1', name: 'Admins', permissions: ['ADMIN'] },
+			{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] }
+		]);
+		const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(result.groups).toHaveLength(2);
+		expect(result.groups[0].name).toBe('Admins');
+	});
+
+	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.groups).toEqual([]);
+	});
+
+	it('calls GET /api/groups', 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/groups');
+	});
+});
diff --git a/frontend/src/routes/admin/groups/layout.svelte.spec.ts b/frontend/src/routes/admin/groups/layout.svelte.spec.ts
new file mode 100644
index 00000000..4496e243
--- /dev/null
+++ b/frontend/src/routes/admin/groups/layout.svelte.spec.ts
@@ -0,0 +1,79 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import GroupsListPanel from './GroupsListPanel.svelte';
+
+vi.mock('$app/state', () => ({
+	page: { url: { pathname: '/admin/groups/g1' } }
+}));
+
+afterEach(cleanup);
+
+const groups = [
+	{ id: 'g1', name: 'Administrators', permissions: ['ADMIN', 'WRITE_ALL'] },
+	{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] },
+	{ id: 'g3', name: 'Readers', permissions: [] }
+];
+
+describe('GroupsListPanel — header', () => {
+	it('renders the panel title', async () => {
+		render(GroupsListPanel, { groups });
+		await expect.element(page.getByText(/Alle Gruppen/i)).toBeInTheDocument();
+	});
+
+	it('renders a new-group link pointing to /admin/groups/new', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('link', { name: /neue gruppe/i }))
+			.toHaveAttribute('href', '/admin/groups/new');
+	});
+});
+
+describe('GroupsListPanel — group items', () => {
+	it('renders each group name', async () => {
+		render(GroupsListPanel, { groups });
+		await expect.element(page.getByRole('link', { name: /administrators/i })).toBeInTheDocument();
+		await expect.element(page.getByRole('link', { name: /editors/i })).toBeInTheDocument();
+	});
+
+	it('each group links to /admin/groups/[id]', async () => {
+		const { container } = render(GroupsListPanel, { groups });
+		const links = container.querySelectorAll<HTMLAnchorElement>('a[href^="/admin/groups/g"]');
+		expect(links.length).toBe(3);
+		expect(links[0].getAttribute('href')).toBe('/admin/groups/g1');
+	});
+
+	it('shows permission count as subtitle', async () => {
+		render(GroupsListPanel, { groups });
+		// Administrators has 2 permissions
+		await expect.element(page.getByText(/2 Berechtigungen/i)).toBeInTheDocument();
+	});
+
+	it('shows "no permissions" for a group with zero permissions', async () => {
+		render(GroupsListPanel, { groups });
+		await expect.element(page.getByText(/0 Berechtigungen/i)).toBeInTheDocument();
+	});
+});
+
+describe('GroupsListPanel — active state', () => {
+	it('marks the active group link with aria-current=page', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('link', { name: /administrators/i }))
+			.toHaveAttribute('aria-current', 'page');
+	});
+
+	it('does not mark inactive group links with aria-current', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('link', { name: /editors/i }))
+			.not.toHaveAttribute('aria-current');
+	});
+});
+
+describe('GroupsListPanel — empty state', () => {
+	it('shows empty state when groups array is empty', async () => {
+		render(GroupsListPanel, { groups: [] });
+		await expect.element(page.getByText(/keine gruppen/i)).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/routes/admin/groups/new/+page.server.ts b/frontend/src/routes/admin/groups/new/+page.server.ts
new file mode 100644
index 00000000..1e6d7086
--- /dev/null
+++ b/frontend/src/routes/admin/groups/new/+page.server.ts
@@ -0,0 +1,25 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const actions: Actions = {
+	default: async ({ request, fetch }) => {
+		const data = await request.formData();
+		const api = createApiClient(fetch);
+
+		const result = await api.POST('/api/groups', {
+			body: {
+				name: data.get('name') as string,
+				permissions: data.getAll('permissions') as string[]
+			}
+		});
+
+		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/groups');
+	}
+};
diff --git a/frontend/src/routes/admin/groups/new/+page.svelte b/frontend/src/routes/admin/groups/new/+page.svelte
new file mode 100644
index 00000000..bdeb445f
--- /dev/null
+++ b/frontend/src/routes/admin/groups/new/+page.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+const availableStandard = [{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }];
+const availableAdmin = [
+	{ value: 'ADMIN', label: 'Vollzugriff (Admin)' },
+	{ value: 'ADMIN_USER', label: 'Benutzer verwalten' },
+	{ value: 'ADMIN_TAG', label: 'Schlagworte verwalten' },
+	{ value: 'ADMIN_PERMISSION', label: 'Berechtigungen verwalten' }
+];
+
+let { form } = $props();
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<!-- Detail panel header -->
+	<div
+		class="flex items-center border-b border-green-200 bg-green-50 px-5 py-3 dark:border-green-900 dark:bg-green-950/30"
+	>
+		<h2 class="flex-1 font-sans text-sm font-bold text-green-800 dark:text-green-300">
+			{m.admin_group_new_heading()}
+		</h2>
+	</div>
+
+	<!-- Scrollable body -->
+	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#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}
+
+		<form id="new-group-form" method="POST" use:enhance class="space-y-5">
+			<!-- Name card -->
+			<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>
+				<input
+					type="text"
+					name="name"
+					placeholder={m.admin_group_name_placeholder()}
+					required
+					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
+				/>
+			</div>
+
+			<!-- Standard permissions -->
+			<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_groups_section_standard()}
+				</h3>
+				<div class="space-y-2">
+					{#each availableStandard as perm (perm.value)}
+						<label class="flex items-center gap-2 text-sm text-ink">
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								class="rounded border-line text-primary focus:ring-primary"
+							/>
+							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
+							<span class="text-ink-3">— {perm.label}</span>
+						</label>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Administrative permissions -->
+			<div
+				class="rounded-sm border border-amber-200 bg-amber-50 p-5 shadow-sm dark:border-amber-900 dark:bg-amber-950/30"
+			>
+				<h3
+					class="mb-3 text-xs font-bold tracking-widest text-amber-700 uppercase dark:text-amber-400"
+				>
+					{m.admin_groups_section_administrative()}
+				</h3>
+				<div class="space-y-2">
+					{#each availableAdmin as perm (perm.value)}
+						<label
+							class="flex items-center gap-2 text-sm {perm.value === 'ADMIN'
+								? 'font-bold text-red-700 dark:text-red-400'
+								: 'text-ink'}"
+						>
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								class="rounded border-line text-primary focus:ring-primary"
+							/>
+							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
+							<span class="font-normal text-ink-3">— {perm.label}</span>
+						</label>
+					{/each}
+				</div>
+			</div>
+		</form>
+	</div>
+
+	<!-- Docked footer -->
+	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
+		<a
+			href="/admin/groups"
+			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
+		>
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			form="new-group-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_create()}
+		</button>
+	</div>
+</div>
-- 
2.49.1


From 908173de972c4836b4945c4c0b9fedcf818d3770 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 01:33:33 +0200
Subject: [PATCH 04/11] 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                     |  5 +
 frontend/messages/en.json                     |  5 +
 frontend/messages/es.json                     |  5 +
 .../src/routes/admin/tags/+layout.server.ts   |  8 ++
 frontend/src/routes/admin/tags/+layout.svelte | 12 +++
 frontend/src/routes/admin/tags/+page.svelte   |  7 ++
 .../routes/admin/tags/TagsListPanel.svelte    | 42 ++++++++
 .../routes/admin/tags/[id]/+page.server.ts    | 44 +++++++++
 .../src/routes/admin/tags/[id]/+page.svelte   | 96 +++++++++++++++++++
 .../routes/admin/tags/layout.server.spec.ts   | 41 ++++++++
 .../routes/admin/tags/layout.svelte.spec.ts   | 61 ++++++++++++
 11 files changed, 326 insertions(+)
 create mode 100644 frontend/src/routes/admin/tags/+layout.server.ts
 create mode 100644 frontend/src/routes/admin/tags/+layout.svelte
 create mode 100644 frontend/src/routes/admin/tags/+page.svelte
 create mode 100644 frontend/src/routes/admin/tags/TagsListPanel.svelte
 create mode 100644 frontend/src/routes/admin/tags/[id]/+page.server.ts
 create mode 100644 frontend/src/routes/admin/tags/[id]/+page.svelte
 create mode 100644 frontend/src/routes/admin/tags/layout.server.spec.ts
 create mode 100644 frontend/src/routes/admin/tags/layout.svelte.spec.ts

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 04be49cb..cd4ad3de 100644
--- a/frontend/messages/de.json
+++ b/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",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 9346ec74..1484b937 100644
--- a/frontend/messages/en.json
+++ b/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",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index d5850122..381ba174 100644
--- a/frontend/messages/es.json
+++ b/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",
diff --git a/frontend/src/routes/admin/tags/+layout.server.ts b/frontend/src/routes/admin/tags/+layout.server.ts
new file mode 100644
index 00000000..01255d35
--- /dev/null
+++ b/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 ?? [] };
+};
diff --git a/frontend/src/routes/admin/tags/+layout.svelte b/frontend/src/routes/admin/tags/+layout.svelte
new file mode 100644
index 00000000..405779b2
--- /dev/null
+++ b/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>
diff --git a/frontend/src/routes/admin/tags/+page.svelte b/frontend/src/routes/admin/tags/+page.svelte
new file mode 100644
index 00000000..5db9b65c
--- /dev/null
+++ b/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>
diff --git a/frontend/src/routes/admin/tags/TagsListPanel.svelte b/frontend/src/routes/admin/tags/TagsListPanel.svelte
new file mode 100644
index 00000000..4a910bb4
--- /dev/null
+++ b/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>
diff --git a/frontend/src/routes/admin/tags/[id]/+page.server.ts b/frontend/src/routes/admin/tags/[id]/+page.server.ts
new file mode 100644
index 00000000..0dbace2c
--- /dev/null
+++ b/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');
+	}
+};
diff --git a/frontend/src/routes/admin/tags/[id]/+page.svelte b/frontend/src/routes/admin/tags/[id]/+page.svelte
new file mode 100644
index 00000000..078b2601
--- /dev/null
+++ b/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>
diff --git a/frontend/src/routes/admin/tags/layout.server.spec.ts b/frontend/src/routes/admin/tags/layout.server.spec.ts
new file mode 100644
index 00000000..466a970b
--- /dev/null
+++ b/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');
+	});
+});
diff --git a/frontend/src/routes/admin/tags/layout.svelte.spec.ts b/frontend/src/routes/admin/tags/layout.svelte.spec.ts
new file mode 100644
index 00000000..2fbd3e5b
--- /dev/null
+++ b/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();
+	});
+});
-- 
2.49.1


From cee16c1657228cd6ed26dce5ea88ef08cf4e0e61 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 01:39:09 +0200
Subject: [PATCH 05/11] feat(admin/system): add system maintenance page under
 /admin/system

Moves the system maintenance panel out of the old tab-based admin page
and into a dedicated route. Renders maintenance cards with spinner state
and success message on completion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/admin/system/+page.svelte | 78 +++++++++++++++++++
 .../routes/admin/system/page.svelte.spec.ts   | 34 ++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 frontend/src/routes/admin/system/+page.svelte
 create mode 100644 frontend/src/routes/admin/system/page.svelte.spec.ts

diff --git a/frontend/src/routes/admin/system/+page.svelte b/frontend/src/routes/admin/system/+page.svelte
new file mode 100644
index 00000000..ddb575c6
--- /dev/null
+++ b/frontend/src/routes/admin/system/+page.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let backfillResult: number | null = $state(null);
+let backfillLoading = $state(false);
+let backfillHashesResult: number | null = $state(null);
+let backfillHashesLoading = $state(false);
+
+async function backfillVersions() {
+	backfillLoading = true;
+	backfillResult = null;
+	try {
+		const res = await fetch('/api/admin/backfill-versions', { method: 'POST' });
+		if (res.ok) {
+			const data = await res.json();
+			backfillResult = data.count;
+		}
+	} finally {
+		backfillLoading = false;
+	}
+}
+
+async function backfillFileHashes() {
+	backfillHashesLoading = true;
+	backfillHashesResult = null;
+	try {
+		const res = await fetch('/api/admin/backfill-file-hashes', { method: 'POST' });
+		if (res.ok) {
+			const data = await res.json();
+			backfillHashesResult = data.count;
+		}
+	} finally {
+		backfillHashesLoading = false;
+	}
+}
+</script>
+
+<div class="flex-1 overflow-y-auto p-6">
+	<div class="mx-auto max-w-2xl space-y-5">
+		<!-- Backfill versions -->
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_backfill_heading()}</h2>
+			<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
+			<button
+				onclick={backfillVersions}
+				disabled={backfillLoading}
+				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 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{backfillLoading ? '…' : m.admin_system_backfill_btn()}
+			</button>
+			{#if backfillResult !== null}
+				<p class="mt-4 rounded-sm border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+					{m.admin_system_backfill_success({ count: backfillResult })}
+				</p>
+			{/if}
+		</div>
+
+		<!-- Backfill file hashes -->
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-1 font-sans text-sm font-bold text-ink">
+				{m.admin_system_backfill_hashes_heading()}
+			</h2>
+			<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>
+			<button
+				onclick={backfillFileHashes}
+				disabled={backfillHashesLoading}
+				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 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{backfillHashesLoading ? '…' : m.admin_system_backfill_hashes_btn()}
+			</button>
+			{#if backfillHashesResult !== null}
+				<p class="mt-4 rounded-sm border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+					{m.admin_system_backfill_hashes_success({ count: backfillHashesResult })}
+				</p>
+			{/if}
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/admin/system/page.svelte.spec.ts b/frontend/src/routes/admin/system/page.svelte.spec.ts
new file mode 100644
index 00000000..4d8e0bb7
--- /dev/null
+++ b/frontend/src/routes/admin/system/page.svelte.spec.ts
@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+afterEach(cleanup);
+
+describe('Admin system page', () => {
+	it('renders the backfill versions heading', async () => {
+		render(Page, {});
+		await expect.element(page.getByText(/Verlaufsdaten auffüllen/i)).toBeInTheDocument();
+	});
+
+	it('renders the backfill versions button', async () => {
+		render(Page, {});
+		await expect
+			.element(page.getByRole('button', { name: /jetzt auffüllen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('renders the backfill file hashes heading', async () => {
+		render(Page, {});
+		await expect
+			.element(page.getByRole('heading', { name: /Datei-Hashes berechnen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('renders the file hashes button', async () => {
+		render(Page, {});
+		await expect
+			.element(page.getByRole('button', { name: /Datei-Hashes berechnen/i }))
+			.toBeInTheDocument();
+	});
+});
-- 
2.49.1


From fabb517d0bb962d4fb0ca8dac05968710c44afbb Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 01:44:52 +0200
Subject: [PATCH 06/11] =?UTF-8?q?refactor(admin):=20phase=207=20=E2=80=94?=
 =?UTF-8?q?=20delete=20old=20tab=20components=20and=20page.server.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove UsersTab, GroupsTab, TagsTab, SystemTab and their specs; delete
the monolithic +page.server.ts with shared load + 6 form actions (all
now handled by dedicated sub-route servers under users/, groups/, tags/).
Add delete action and confirmation button to user edit panel.
Fix test to query the edit form by id rather than the first form in DOM.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/admin/+page.server.ts     | 116 ---------
 frontend/src/routes/admin/GroupsTab.svelte    | 221 ------------------
 .../src/routes/admin/GroupsTab.svelte.spec.ts |  27 ---
 frontend/src/routes/admin/SystemTab.svelte    |  72 ------
 frontend/src/routes/admin/TagsTab.svelte      | 127 ----------
 .../src/routes/admin/TagsTab.svelte.spec.ts   |  23 --
 frontend/src/routes/admin/UsersTab.svelte     | 122 ----------
 frontend/src/routes/admin/page.server.spec.ts |  77 ------
 .../routes/admin/users/[id]/+page.server.ts   |  16 +-
 .../src/routes/admin/users/[id]/+page.svelte  |  19 ++
 .../admin/users/[id]/page.svelte.spec.ts      |   2 +-
 11 files changed, 35 insertions(+), 787 deletions(-)
 delete mode 100644 frontend/src/routes/admin/+page.server.ts
 delete mode 100644 frontend/src/routes/admin/GroupsTab.svelte
 delete mode 100644 frontend/src/routes/admin/GroupsTab.svelte.spec.ts
 delete mode 100644 frontend/src/routes/admin/SystemTab.svelte
 delete mode 100644 frontend/src/routes/admin/TagsTab.svelte
 delete mode 100644 frontend/src/routes/admin/TagsTab.svelte.spec.ts
 delete mode 100644 frontend/src/routes/admin/UsersTab.svelte
 delete mode 100644 frontend/src/routes/admin/page.server.spec.ts

diff --git a/frontend/src/routes/admin/+page.server.ts b/frontend/src/routes/admin/+page.server.ts
deleted file mode 100644
index b58bf3c4..00000000
--- a/frontend/src/routes/admin/+page.server.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { error, fail } from '@sveltejs/kit';
-import { createApiClient } from '$lib/api.server';
-import { getErrorMessage } from '$lib/errors';
-
-type ApiResult = { response: Response; error?: unknown };
-
-function toActionResult(result: ApiResult) {
-	if (!result.response.ok) {
-		const code = (result.error as { code?: string } | undefined)?.code;
-		return fail(result.response.status, { success: false, message: getErrorMessage(code) });
-	}
-	return { success: true };
-}
-
-export async function load({ fetch, locals }) {
-	const user = locals.user;
-	const hasAdmin = user?.groups?.some((g: { permissions: string[] }) =>
-		g.permissions.includes('ADMIN')
-	);
-	if (!hasAdmin) throw error(403, getErrorMessage('FORBIDDEN'));
-
-	const api = createApiClient(fetch);
-
-	const [usersResult, groupsResult, tagsResult] = await Promise.all([
-		api.GET('/api/users'),
-		api.GET('/api/groups'),
-		api.GET('/api/tags')
-	]);
-
-	return {
-		users: usersResult.data ?? [],
-		groups: groupsResult.data ?? [],
-		tags: tagsResult.data ?? []
-	};
-}
-
-export const actions = {
-	deleteUser: async ({ request, fetch }) => {
-		const data = await request.formData();
-		const id = data.get('id') as string;
-		const api = createApiClient(fetch);
-
-		const result = await api.DELETE('/api/users/{id}', {
-			params: { path: { id } }
-		});
-
-		return toActionResult(result);
-	},
-
-	updateTag: async ({ request, fetch }) => {
-		const data = await request.formData();
-		const id = data.get('id') as string;
-		const api = createApiClient(fetch);
-
-		const result = await api.PUT('/api/tags/{id}', {
-			params: { path: { id } },
-			body: { name: data.get('name') as string }
-		});
-
-		return toActionResult(result);
-	},
-
-	deleteTag: async ({ request, fetch }) => {
-		const data = await request.formData();
-		const id = data.get('id') as string;
-		const api = createApiClient(fetch);
-
-		const result = await api.DELETE('/api/tags/{id}', {
-			params: { path: { id } }
-		});
-
-		return toActionResult(result);
-	},
-
-	createGroup: async ({ request, fetch }) => {
-		const data = await request.formData();
-		const api = createApiClient(fetch);
-
-		const result = await api.POST('/api/groups', {
-			body: {
-				name: data.get('name') as string,
-				permissions: data.getAll('permissions') as string[]
-			}
-		});
-
-		return toActionResult(result);
-	},
-
-	updateGroup: async ({ request, fetch }) => {
-		const data = await request.formData();
-		const id = data.get('id') as string;
-		const api = createApiClient(fetch);
-
-		const result = await api.PATCH('/api/groups/{id}', {
-			params: { path: { id } },
-			body: {
-				name: data.get('name') as string,
-				permissions: data.getAll('permissions') as string[]
-			}
-		});
-
-		return toActionResult(result);
-	},
-
-	deleteGroup: async ({ request, fetch }) => {
-		const data = await request.formData();
-		const id = data.get('id') as string;
-		const api = createApiClient(fetch);
-
-		const result = await api.DELETE('/api/groups/{id}', {
-			params: { path: { id } }
-		});
-
-		return toActionResult(result);
-	}
-};
diff --git a/frontend/src/routes/admin/GroupsTab.svelte b/frontend/src/routes/admin/GroupsTab.svelte
deleted file mode 100644
index 0f5da793..00000000
--- a/frontend/src/routes/admin/GroupsTab.svelte
+++ /dev/null
@@ -1,221 +0,0 @@
-<script lang="ts">
-import { enhance } from '$app/forms';
-import { m } from '$lib/paraglide/messages.js';
-
-let { groups }: { groups: { id: string; name: string; permissions: string[] }[] } = $props();
-
-const availablePermissions = ['WRITE_ALL', 'ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'];
-
-let editingGroupId: string | null = $state(null);
-
-function startEditGroup(id: string) {
-	editingGroupId = id;
-}
-
-function cancelEditGroup() {
-	editingGroupId = null;
-}
-</script>
-
-<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
-	<div class="flex items-center justify-between border-b border-line-2 p-6">
-		<h2 class="text-lg font-bold text-ink-2">{m.admin_section_groups()}</h2>
-	</div>
-
-	<table class="min-w-full divide-y divide-line">
-		<thead class="bg-muted">
-			<tr>
-				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-					>{m.admin_col_name()}</th
-				>
-				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-					>{m.admin_col_permissions()}</th
-				>
-				<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
-					>{m.admin_col_actions()}</th
-				>
-			</tr>
-		</thead>
-		<tbody class="divide-y divide-line bg-surface">
-			{#each groups as group (group.id)}
-				<tr class="group/row hover:bg-muted">
-					{#if editingGroupId === group.id}
-						<!-- EDIT MODE -->
-						<td colspan="3" class="px-6 py-4">
-							<form
-								method="POST"
-								action="?/updateGroup"
-								use:enhance={() =>
-									async ({ update }) => {
-										await update();
-										cancelEditGroup();
-									}}
-								class="flex w-full flex-col items-start gap-4 sm:flex-row"
-							>
-								<input type="hidden" name="id" value={group.id} />
-
-								<div class="w-full sm:w-1/3">
-									<input
-										type="text"
-										name="name"
-										value={group.name}
-										class="w-full rounded border-accent text-sm"
-										required
-									/>
-								</div>
-
-								<div class="flex h-full flex-1 flex-wrap items-center gap-4 pt-2">
-									{#each availablePermissions as perm (perm)}
-										<label class="inline-flex items-center text-xs font-bold text-ink-2 uppercase">
-											<input
-												type="checkbox"
-												name="permissions"
-												value={perm}
-												checked={group.permissions.includes(perm)}
-												class="mr-2 rounded border-line text-ink focus:ring-accent"
-											/>
-											{perm.replace('_', ' ')}
-										</label>
-									{/each}
-								</div>
-
-								<div class="flex gap-2 self-start sm:self-center">
-									<button
-										type="submit"
-										aria-label={m.btn_save()}
-										class="p-1 text-green-600 hover:text-green-800"
-									>
-										<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-											><path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M5 13l4 4L19 7"
-											/></svg
-										>
-									</button>
-									<button
-										type="button"
-										onclick={cancelEditGroup}
-										aria-label={m.btn_cancel()}
-										class="p-1 text-ink-3 hover:text-red-500"
-									>
-										<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-											><path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M6 18L18 6M6 6l12 12"
-											/></svg
-										>
-									</button>
-								</div>
-							</form>
-						</td>
-					{:else}
-						<!-- VIEW MODE -->
-						<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-ink">
-							{group.name}
-						</td>
-						<td class="px-6 py-4 text-sm text-ink-2">
-							<div class="flex flex-wrap gap-1">
-								{#each group.permissions as perm (perm)}
-									<span
-										class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
-                                        {perm === 'ADMIN'
-											? 'border-red-100 bg-red-50 text-red-700'
-											: 'border-line bg-muted text-ink-2'}"
-									>
-										{perm === 'ADMIN' ? '⚙ ' : ''}{perm}
-									</span>
-								{/each}
-							</div>
-						</td>
-						<td class="px-6 py-4 text-right whitespace-nowrap">
-							<div class="flex items-center justify-end gap-3">
-								<button
-									onclick={() => startEditGroup(group.id)}
-									class="text-sm font-bold tracking-wide text-primary uppercase hover:text-ink-2"
-								>
-									{m.btn_edit()}
-								</button>
-
-								<form
-									method="POST"
-									action="?/deleteGroup"
-									use:enhance={({ cancel }) => {
-										if (!confirm(m.admin_group_delete_confirm())) {
-											cancel();
-										}
-										return async ({ update }) => {
-											await update();
-										};
-									}}
-								>
-									<input type="hidden" name="id" value={group.id} />
-									<button
-										class="p-1 text-ink-3 transition-colors hover:text-red-600"
-										title={m.btn_delete()}
-									>
-										<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-											/>
-										</svg>
-									</button>
-								</form>
-							</div>
-						</td>
-					{/if}
-				</tr>
-			{/each}
-		</tbody>
-	</table>
-
-	<!-- CREATE GROUP FORM -->
-	<div class="border-t border-line bg-muted p-6">
-		<h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase">
-			{m.admin_section_new_group()}
-		</h3>
-		<form
-			method="POST"
-			action="?/createGroup"
-			use:enhance
-			class="flex flex-col items-start gap-4 md:flex-row md:items-center"
-		>
-			<div class="w-full flex-1">
-				<input
-					type="text"
-					name="name"
-					placeholder={m.admin_group_name_placeholder()}
-					required
-					class="w-full rounded border-line text-sm"
-				/>
-			</div>
-
-			<div class="flex items-center gap-4">
-				{#each availablePermissions as perm (perm)}
-					<label class="inline-flex items-center text-xs font-bold text-ink-2 uppercase">
-						<input
-							type="checkbox"
-							name="permissions"
-							value={perm}
-							class="mr-2 rounded border-line text-ink focus:ring-accent"
-						/>
-						{perm.replace('_', ' ')}
-					</label>
-				{/each}
-			</div>
-
-			<button
-				type="submit"
-				class="w-full rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase hover:bg-accent hover:text-ink md:w-auto"
-			>
-				{m.btn_create()}
-			</button>
-		</form>
-	</div>
-</div>
diff --git a/frontend/src/routes/admin/GroupsTab.svelte.spec.ts b/frontend/src/routes/admin/GroupsTab.svelte.spec.ts
deleted file mode 100644
index ad9cc66e..00000000
--- a/frontend/src/routes/admin/GroupsTab.svelte.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { afterEach, describe, it, expect, vi } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import GroupsTab from './GroupsTab.svelte';
-
-vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
-
-afterEach(cleanup);
-
-const makeGroups = () => [
-	{ id: 'g1', name: 'Administrators', permissions: ['ADMIN', 'WRITE_ALL'] },
-	{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] }
-];
-
-describe('GroupsTab — ADMIN permission badge (WCAG 1.4.1)', () => {
-	it('ADMIN badge has a non-color indicator so it is distinguishable without color', () => {
-		// The ADMIN badge must not rely on color alone (WCAG 1.4.1).
-		// It must contain a visible non-color indicator: a text prefix such as ⚙.
-		const { container } = render(GroupsTab, { groups: makeGroups() });
-
-		const adminBadge = Array.from(container.querySelectorAll('span')).find((el) =>
-			el.textContent?.includes('ADMIN')
-		);
-		expect(adminBadge).toBeDefined();
-		// Badge text must include a non-color prefix character
-		expect(adminBadge!.textContent).toMatch(/[⚙★⚠!]/);
-	});
-});
diff --git a/frontend/src/routes/admin/SystemTab.svelte b/frontend/src/routes/admin/SystemTab.svelte
deleted file mode 100644
index bc4301ac..00000000
--- a/frontend/src/routes/admin/SystemTab.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
-
-let backfillResult: number | null = $state(null);
-let backfillLoading = $state(false);
-let backfillHashesResult: number | null = $state(null);
-let backfillHashesLoading = $state(false);
-
-async function backfillVersions() {
-	backfillLoading = true;
-	backfillResult = null;
-	try {
-		const res = await fetch('/api/admin/backfill-versions', { method: 'POST' });
-		if (res.ok) {
-			const data = await res.json();
-			backfillResult = data.count;
-		}
-	} finally {
-		backfillLoading = false;
-	}
-}
-
-async function backfillFileHashes() {
-	backfillHashesLoading = true;
-	backfillHashesResult = null;
-	try {
-		const res = await fetch('/api/admin/backfill-file-hashes', { method: 'POST' });
-		if (res.ok) {
-			const data = await res.json();
-			backfillHashesResult = data.count;
-		}
-	} finally {
-		backfillHashesLoading = false;
-	}
-}
-</script>
-
-<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-	<h2 class="mb-1 text-lg font-bold text-ink-2">{m.admin_system_backfill_heading()}</h2>
-	<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
-	<button
-		onclick={backfillVersions}
-		disabled={backfillLoading}
-		class="rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
-	>
-		{backfillLoading ? '…' : m.admin_system_backfill_btn()}
-	</button>
-	{#if backfillResult !== null}
-		<p class="mt-4 text-sm font-medium text-ink">
-			{m.admin_system_backfill_success({ count: backfillResult })}
-		</p>
-	{/if}
-</div>
-
-<div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm">
-	<h2 class="mb-1 text-lg font-bold text-ink-2">
-		{m.admin_system_backfill_hashes_heading()}
-	</h2>
-	<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>
-	<button
-		onclick={backfillFileHashes}
-		disabled={backfillHashesLoading}
-		class="rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
-	>
-		{backfillHashesLoading ? '…' : m.admin_system_backfill_hashes_btn()}
-	</button>
-	{#if backfillHashesResult !== null}
-		<p class="mt-4 text-sm font-medium text-ink">
-			{m.admin_system_backfill_hashes_success({ count: backfillHashesResult })}
-		</p>
-	{/if}
-</div>
diff --git a/frontend/src/routes/admin/TagsTab.svelte b/frontend/src/routes/admin/TagsTab.svelte
deleted file mode 100644
index 1b41558f..00000000
--- a/frontend/src/routes/admin/TagsTab.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
-import { enhance } from '$app/forms';
-import { m } from '$lib/paraglide/messages.js';
-
-let { tags }: { tags: { id: string; name: string }[] } = $props();
-
-let editingTagId: string | null = $state(null);
-let editingTagName = $state('');
-
-function startEditTag(tag: { id: string; name: string }) {
-	editingTagId = tag.id;
-	editingTagName = tag.name;
-}
-
-function cancelEditTag() {
-	editingTagId = null;
-	editingTagName = '';
-}
-</script>
-
-<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
-	<div class="border-b border-line-2 bg-yellow-50/50 p-6">
-		<h2 class="text-lg font-bold text-ink-2">{m.admin_section_tags()}</h2>
-		<p class="mt-1 text-xs text-yellow-800">
-			{m.admin_tags_warning()}
-		</p>
-	</div>
-
-	<ul class="max-h-[600px] divide-y divide-line-2 overflow-y-auto">
-		{#each tags as tag (tag.id)}
-			<li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
-				{#if editingTagId === tag.id}
-					<form
-						method="POST"
-						action="?/updateTag"
-						use:enhance={() =>
-							async ({ update }) => {
-								await update();
-								cancelEditTag();
-							}}
-						class="flex flex-1 items-center gap-2"
-					>
-						<input type="hidden" name="id" value={tag.id} />
-						<input
-							type="text"
-							name="name"
-							bind:value={editingTagName}
-							class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-accent"
-						/>
-						<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
-							><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-								><path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M5 13l4 4L19 7"
-								/></svg
-							></button
-						>
-						<button
-							type="button"
-							onclick={cancelEditTag}
-							aria-label={m.btn_cancel()}
-							class="text-ink-3 hover:text-ink-2"
-							><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-								><path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M6 18L18 6M6 6l12 12"
-								/></svg
-							></button
-						>
-					</form>
-				{:else}
-					<span class="rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
-						{tag.name}
-					</span>
-					<div class="flex items-center gap-2">
-						<button
-							onclick={() => startEditTag(tag)}
-							aria-label={m.admin_btn_edit_tag_label()}
-							class="p-1 text-ink-3 hover:text-ink"
-						>
-							<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-								><path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-								/></svg
-							>
-						</button>
-						<form
-							method="POST"
-							action="?/deleteTag"
-							use:enhance={({ cancel }) => {
-								if (!confirm(m.admin_tag_delete_confirm())) {
-									cancel();
-								}
-								return async ({ update }) => {
-									await update();
-								};
-							}}
-							class="inline"
-						>
-							<input type="hidden" name="id" value={tag.id} />
-							<button
-								aria-label={m.admin_btn_delete_tag_label()}
-								class="p-1 text-ink-3 hover:text-red-600"
-							>
-								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-									><path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-									/></svg
-								>
-							</button>
-						</form>
-					</div>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-</div>
diff --git a/frontend/src/routes/admin/TagsTab.svelte.spec.ts b/frontend/src/routes/admin/TagsTab.svelte.spec.ts
deleted file mode 100644
index 1f13f9c8..00000000
--- a/frontend/src/routes/admin/TagsTab.svelte.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { afterEach, describe, it, expect, vi } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import TagsTab from './TagsTab.svelte';
-
-vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
-
-afterEach(cleanup);
-
-const makeTags = () => [
-	{ id: 't1', name: 'Familie' },
-	{ id: 't2', name: 'Urlaub' }
-];
-
-describe('TagsTab — action buttons', () => {
-	it('no element with opacity-0 class exists (regression guard: buttons must not be hover-only)', () => {
-		// Before fix: the action buttons container had opacity-0 group-hover:opacity-100
-		// which hides buttons on touch devices. After fix: that class is gone entirely.
-		const { container } = render(TagsTab, { tags: makeTags() });
-
-		const hiddenElements = container.querySelectorAll('.opacity-0');
-		expect(hiddenElements.length).toBe(0);
-	});
-});
diff --git a/frontend/src/routes/admin/UsersTab.svelte b/frontend/src/routes/admin/UsersTab.svelte
deleted file mode 100644
index 32e4d5c6..00000000
--- a/frontend/src/routes/admin/UsersTab.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<script lang="ts">
-import { enhance } from '$app/forms';
-import { m } from '$lib/paraglide/messages.js';
-
-let {
-	users
-}: {
-	users: {
-		id: string;
-		username: string;
-		firstName?: string;
-		lastName?: string;
-		groups?: { id: string; name: string }[];
-	}[];
-} = $props();
-</script>
-
-<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
-	<div class="flex items-center justify-between border-b border-line-2 p-6">
-		<h2 class="text-lg font-bold text-ink-2">{m.admin_section_users()}</h2>
-		<a
-			href="/admin/users/new"
-			class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
-		>
-			<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
-			{m.admin_btn_new_user()}
-		</a>
-	</div>
-
-	<div class="overflow-x-auto">
-		<table class="min-w-full divide-y divide-line">
-			<thead class="bg-muted">
-				<tr>
-					<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-						>{m.admin_col_login()}</th
-					>
-					<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-						>{m.admin_col_full_name()}</th
-					>
-					<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
-						>{m.admin_col_groups()}</th
-					>
-					<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
-						>{m.admin_col_actions()}</th
-					>
-				</tr>
-			</thead>
-			<tbody class="divide-y divide-line bg-surface">
-				{#each users as user (user.id)}
-					<tr class="group/row hover:bg-muted">
-						<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
-							{user.username}
-						</td>
-						<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
-							{#if user.firstName || user.lastName}
-								{user.firstName ?? ''} {user.lastName ?? ''}
-							{:else}
-								<span class="text-ink-3 italic">–</span>
-							{/if}
-						</td>
-						<td class="px-6 py-4 text-sm text-ink-2">
-							<div class="flex flex-wrap gap-1">
-								{#if user.groups && user.groups.length > 0}
-									{#each user.groups as group (group.id)}
-										<span
-											class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
-										>
-											{group.name}
-										</span>
-									{/each}
-								{:else}
-									<span class="text-xs text-ink-3 italic">{m.admin_no_groups()}</span>
-								{/if}
-							</div>
-						</td>
-						<td class="px-6 py-4 text-right whitespace-nowrap">
-							<div class="flex items-center justify-end gap-4">
-								<a
-									href="/admin/users/{user.id}"
-									class="text-sm font-bold tracking-wide text-primary uppercase hover:text-ink-2"
-								>
-									{m.btn_edit()}
-								</a>
-
-								<form
-									method="POST"
-									action="?/deleteUser"
-									use:enhance={({ cancel }) => {
-									if (!confirm(m.admin_user_delete_confirm({ username: user.username }))) {
-										cancel();
-									}
-									return async ({ update }) => {
-										await update();
-									};
-								}}
-									class="flex items-center"
-								>
-									<input type="hidden" name="id" value={user.id} />
-									<button
-										class="p-1 text-ink-3 transition-colors hover:text-red-600"
-										title={m.admin_btn_delete_user_title()}
-									>
-										<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-											/>
-										</svg>
-									</button>
-								</form>
-							</div>
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-</div>
diff --git a/frontend/src/routes/admin/page.server.spec.ts b/frontend/src/routes/admin/page.server.spec.ts
deleted file mode 100644
index a8edb053..00000000
--- a/frontend/src/routes/admin/page.server.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { load } from './+page.server';
-
-vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
-
-import { createApiClient } from '$lib/api.server';
-
-const adminUser = { groups: [{ permissions: ['ADMIN'] }] };
-const readOnlyUser = { groups: [{ permissions: ['READ_ALL'] }] };
-
-function mockApiReturning(users: unknown[], groups: unknown[], tags: unknown[]) {
-	vi.mocked(createApiClient).mockReturnValue({
-		GET: vi
-			.fn()
-			.mockResolvedValueOnce({ response: { ok: true }, data: users })
-			.mockResolvedValueOnce({ response: { ok: true }, data: groups })
-			.mockResolvedValueOnce({ response: { ok: true }, data: tags })
-	} as ReturnType<typeof createApiClient>);
-}
-
-beforeEach(() => vi.clearAllMocks());
-
-// ─── permission check ─────────────────────────────────────────────────────────
-
-describe('admin load — permission check', () => {
-	it('throws 403 when user has no ADMIN permission', async () => {
-		await expect(
-			load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: readOnlyUser } })
-		).rejects.toMatchObject({ status: 403 });
-	});
-
-	it('throws 403 when user is undefined', async () => {
-		await expect(
-			load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: undefined } })
-		).rejects.toMatchObject({ status: 403 });
-	});
-
-	it('throws 403 when user has no groups', async () => {
-		await expect(
-			load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: { groups: [] } } })
-		).rejects.toMatchObject({ status: 403 });
-	});
-});
-
-// ─── happy path ───────────────────────────────────────────────────────────────
-
-describe('admin load — happy path', () => {
-	it('returns users, groups, and tags for an admin user', async () => {
-		mockApiReturning(
-			[{ id: 'u1', username: 'alice' }],
-			[{ id: 'g1', name: 'Editors' }],
-			[{ id: 't1', name: 'Familie' }]
-		);
-
-		const result = await load({
-			fetch: vi.fn() as unknown as typeof fetch,
-			locals: { user: adminUser }
-		});
-
-		expect(result.users).toHaveLength(1);
-		expect(result.groups).toHaveLength(1);
-		expect(result.tags).toHaveLength(1);
-	});
-
-	it('returns empty arrays when API returns no data', async () => {
-		mockApiReturning([], [], []);
-
-		const result = await load({
-			fetch: vi.fn() as unknown as typeof fetch,
-			locals: { user: adminUser }
-		});
-
-		expect(result.users).toEqual([]);
-		expect(result.groups).toEqual([]);
-		expect(result.tags).toEqual([]);
-	});
-});
diff --git a/frontend/src/routes/admin/users/[id]/+page.server.ts b/frontend/src/routes/admin/users/[id]/+page.server.ts
index 6d99c407..14c719b6 100644
--- a/frontend/src/routes/admin/users/[id]/+page.server.ts
+++ b/frontend/src/routes/admin/users/[id]/+page.server.ts
@@ -1,4 +1,4 @@
-import { error, fail } from '@sveltejs/kit';
+import { error, fail, redirect } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
 import { createApiClient } from '$lib/api.server';
 import { getErrorMessage } from '$lib/errors';
@@ -63,5 +63,19 @@ export const actions: Actions = {
 		}
 
 		return { success: true };
+	},
+
+	delete: async ({ params, fetch }) => {
+		const api = createApiClient(fetch);
+		const result = await api.DELETE('/api/users/{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/users');
 	}
 };
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index e2201990..03ac297a 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -16,6 +16,25 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_user_edit_heading({ username: data.editUser.username })}
 		</h2>
+		<form
+			method="POST"
+			action="?/delete"
+			use:enhance={({ cancel }) => {
+				if (!confirm(m.admin_user_delete_confirm({ username: data.editUser.username }))) {
+					cancel();
+				}
+				return async ({ update }) => {
+					await update();
+				};
+			}}
+		>
+			<button
+				type="submit"
+				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400"
+			>
+				{m.btn_delete()}…
+			</button>
+		</form>
 	</div>
 
 	<!-- Scrollable body -->
diff --git a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
index 43fca9b1..53dce8b4 100644
--- a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
@@ -96,7 +96,7 @@ describe('Admin edit user page – rendering', () => {
 
 	it('includes pre-selected group ids in FormData at submit time (guards against groupIds being empty)', async () => {
 		render(Page, { data: baseData, form: null });
-		const form = document.querySelector('form')!;
+		const form = document.querySelector<HTMLFormElement>('form#edit-user-form')!;
 		const formData = new FormData(form);
 		expect(formData.getAll('groupIds')).toContain('g1');
 		expect(formData.getAll('groupIds')).not.toContain('g2');
-- 
2.49.1


From 06a489567a6c901f6a14cc5de96d510d5658c3e5 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 01:58:10 +0200
Subject: [PATCH 07/11] =?UTF-8?q?feat(admin):=20phase=208=20=E2=80=94=20un?=
 =?UTF-8?q?saved-changes=20guard=20on=20all=20detail=20panels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add beforeNavigate + isDirty tracking to users/[id], users/new,
groups/[id], groups/new, and tags/[id] edit panels. When a user
navigates away with unsaved changes, the navigation is cancelled and
an inline amber warning banner appears with a Discard button that
resumes navigation. Saving successfully clears the dirty flag.

Add i18n key admin_unsaved_warning (de/en/es).
Add spec files for groups/[id] and tags/[id] panels.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |   1 +
 frontend/messages/en.json                     |   1 +
 frontend/messages/es.json                     |   1 +
 .../src/routes/admin/groups/[id]/+page.svelte |  49 +++++++-
 .../admin/groups/[id]/page.svelte.spec.ts     | 113 ++++++++++++++++++
 .../src/routes/admin/groups/new/+page.svelte  |  42 ++++++-
 .../src/routes/admin/tags/[id]/+page.svelte   |  50 +++++++-
 .../admin/tags/[id]/page.svelte.spec.ts       |  93 ++++++++++++++
 .../src/routes/admin/users/[id]/+page.svelte  |  49 +++++++-
 .../admin/users/[id]/page.svelte.spec.ts      |  74 +++++++++++-
 .../src/routes/admin/users/new/+page.svelte   |  42 ++++++-
 11 files changed, 509 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
 create mode 100644 frontend/src/routes/admin/tags/[id]/page.svelte.spec.ts

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index cd4ad3de..9b24a14c 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -160,6 +160,7 @@
 	"admin_tags_select_prompt": "W\u00e4hle ein Schlagwort aus der Liste.",
 	"admin_tag_edit_heading": "Schlagwort: {name}",
 	"admin_tag_updated": "Schlagwort umbenannt.",
+	"admin_unsaved_warning": "Du hast ungespeicherte Änderungen – speichere oder verwerfe, bevor du wechselst.",
 	"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",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 1484b937..eda45cda 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -160,6 +160,7 @@
 	"admin_tags_select_prompt": "Select a tag from the list.",
 	"admin_tag_edit_heading": "Tag: {name}",
 	"admin_tag_updated": "Tag renamed.",
+	"admin_unsaved_warning": "You have unsaved changes — save or discard before switching.",
 	"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",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 381ba174..49263510 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -160,6 +160,7 @@
 	"admin_tags_select_prompt": "Selecciona una etiqueta de la lista.",
 	"admin_tag_edit_heading": "Etiqueta: {name}",
 	"admin_tag_updated": "Etiqueta renombrada.",
+	"admin_unsaved_warning": "Tienes cambios sin guardar — guarda o descarta antes de cambiar.",
 	"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",
diff --git a/frontend/src/routes/admin/groups/[id]/+page.svelte b/frontend/src/routes/admin/groups/[id]/+page.svelte
index 377617d3..3705ea67 100644
--- a/frontend/src/routes/admin/groups/[id]/+page.svelte
+++ b/frontend/src/routes/admin/groups/[id]/+page.svelte
@@ -1,9 +1,29 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 
 let { data, form } = $props();
 
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
+
+$effect(() => {
+	if (form?.success) {
+		isDirty = false;
+		showUnsavedWarning = false;
+	}
+});
+
 const STANDARD_PERMISSIONS: { value: string; label: string }[] = [
 	{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }
 ];
@@ -43,6 +63,24 @@ const ADMIN_PERMISSIONS: { value: string; label: string }[] = [
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#if form?.success}
 			<div
 				class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700 dark:border-green-800 dark:bg-green-950/40 dark:text-green-400"
@@ -58,7 +96,16 @@ const ADMIN_PERMISSIONS: { value: string; label: string }[] = [
 			</div>
 		{/if}
 
-		<form id="edit-group-form" method="POST" action="?/update" use:enhance>
+		<form
+			id="edit-group-form"
+			method="POST"
+			action="?/update"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+		>
 			<!-- Group name card -->
 			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
diff --git a/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
new file mode 100644
index 00000000..911ecf57
--- /dev/null
+++ b/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
@@ -0,0 +1,113 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
+
+import { beforeNavigate, goto } from '$app/navigation';
+
+const baseGroup = { id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] };
+const baseData = { group: baseGroup };
+
+afterEach(cleanup);
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('Admin edit group page – rendering', () => {
+	it('renders the heading with group name', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Gruppe: Editoren/i)).toBeInTheDocument();
+	});
+
+	it('pre-fills the name input', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[name="name"]');
+		expect(input?.value).toBe('Editoren');
+	});
+
+	it('pre-checks permissions that the group already has', async () => {
+		render(Page, { data: baseData, form: null });
+		const checkbox = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="permissions"][value="WRITE_ALL"]'
+		);
+		expect(checkbox?.checked).toBe(true);
+	});
+
+	it('renders the cancel link pointing to /admin/groups', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/admin/groups');
+	});
+});
+
+// ─── Unsaved-changes guard ────────────────────────────────────────────────────
+
+describe('Admin edit group page – unsaved-changes guard', () => {
+	beforeEach(() => vi.clearAllMocks());
+
+	it('does not show unsaved warning initially', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
+	});
+
+	it('cancels navigation and shows warning when form is dirty', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
+
+		expect(cancel).toHaveBeenCalled();
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+	});
+
+	it('does not cancel navigation when form is clean', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
+
+		expect(cancel).not.toHaveBeenCalled();
+	});
+
+	it('discard button calls goto with the target URL', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/groups/g2') } });
+
+		await page.getByRole('button', { name: /verwerfen/i }).click();
+
+		expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/groups/g2');
+	});
+
+	it('clears dirty state when form saves successfully', async () => {
+		const { rerender } = render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/groups/g2') } });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+
+		await rerender({ data: baseData, form: { success: true } });
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
+		expect(cancel).not.toHaveBeenCalled();
+	});
+});
diff --git a/frontend/src/routes/admin/groups/new/+page.svelte b/frontend/src/routes/admin/groups/new/+page.svelte
index bdeb445f..eb188298 100644
--- a/frontend/src/routes/admin/groups/new/+page.svelte
+++ b/frontend/src/routes/admin/groups/new/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 
 const availableStandard = [{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }];
@@ -11,6 +12,18 @@ const availableAdmin = [
 ];
 
 let { form } = $props();
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -25,13 +38,40 @@ let { form } = $props();
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</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}
 
-		<form id="new-group-form" method="POST" use:enhance class="space-y-5">
+		<form
+			id="new-group-form"
+			method="POST"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			class="space-y-5"
+		>
 			<!-- Name card -->
 			<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">
diff --git a/frontend/src/routes/admin/tags/[id]/+page.svelte b/frontend/src/routes/admin/tags/[id]/+page.svelte
index 078b2601..77d4af1e 100644
--- a/frontend/src/routes/admin/tags/[id]/+page.svelte
+++ b/frontend/src/routes/admin/tags/[id]/+page.svelte
@@ -1,11 +1,31 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 
 let { data, form } = $props();
 
 let deleteConfirmName = $state('');
 const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
+
+$effect(() => {
+	if (form?.success) {
+		isDirty = false;
+		showUnsavedWarning = false;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -18,6 +38,24 @@ const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#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()}
@@ -30,7 +68,17 @@ const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
 		{/if}
 
 		<!-- Rename form -->
-		<form id="edit-tag-form" method="POST" action="?/update" use:enhance class="mb-5">
+		<form
+			id="edit-tag-form"
+			method="POST"
+			action="?/update"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			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()}
diff --git a/frontend/src/routes/admin/tags/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/tags/[id]/page.svelte.spec.ts
new file mode 100644
index 00000000..e327f6b8
--- /dev/null
+++ b/frontend/src/routes/admin/tags/[id]/page.svelte.spec.ts
@@ -0,0 +1,93 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
+
+import { beforeNavigate, goto } from '$app/navigation';
+
+const baseTag = { id: 't1', name: 'Familie' };
+const baseData = { tag: baseTag };
+
+afterEach(cleanup);
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('Admin edit tag page – rendering', () => {
+	it('renders the heading with tag name', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Schlagwort: Familie/i)).toBeInTheDocument();
+	});
+
+	it('pre-fills the name input', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[name="name"]');
+		expect(input?.value).toBe('Familie');
+	});
+
+	it('renders the cancel link pointing to /admin/tags', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/admin/tags');
+	});
+
+	it('delete button is disabled until tag name is typed in confirm field', async () => {
+		render(Page, { data: baseData, form: null });
+		const deleteBtn = document.querySelector<HTMLButtonElement>('button[type="submit"]');
+		expect(deleteBtn?.disabled).toBe(true);
+	});
+});
+
+// ─── Unsaved-changes guard ────────────────────────────────────────────────────
+
+describe('Admin edit tag page – unsaved-changes guard', () => {
+	beforeEach(() => vi.clearAllMocks());
+
+	it('does not show unsaved warning initially', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
+	});
+
+	it('cancels navigation and shows warning when rename form is dirty', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/tags/t2') } });
+
+		expect(cancel).toHaveBeenCalled();
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+	});
+
+	it('does not cancel navigation when form is clean', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/tags/t2') } });
+
+		expect(cancel).not.toHaveBeenCalled();
+	});
+
+	it('discard button calls goto with the target URL', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/tags/t2') } });
+
+		await page.getByRole('button', { name: /verwerfen/i }).click();
+
+		expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/tags/t2');
+	});
+});
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 03ac297a..019f81ed 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
 import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
@@ -8,6 +9,25 @@ import UserPasswordSection from '$lib/components/user/UserPasswordSection.svelte
 let { data, form } = $props();
 
 const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
+
+$effect(() => {
+	if (form?.success) {
+		isDirty = false;
+		showUnsavedWarning = false;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -39,6 +59,24 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#if form?.success}
 			<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
 				{m.admin_user_updated()}
@@ -50,7 +88,16 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
 			</div>
 		{/if}
 
-		<form id="edit-user-form" method="POST" use:enhance class="space-y-5">
+		<form
+			id="edit-user-form"
+			method="POST"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			class="space-y-5"
+		>
 			<!-- Profile card -->
 			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
diff --git a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
index 53dce8b4..0c5fdd76 100644
--- a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
@@ -1,9 +1,12 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import Page from './+page.svelte';
 
 vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
+
+import { beforeNavigate, goto } from '$app/navigation';
 
 const groups = [
 	{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] },
@@ -141,3 +144,72 @@ describe('Admin edit user page – feedback', () => {
 		await expect.element(page.getByText(/Änderungen gespeichert/i)).not.toBeInTheDocument();
 	});
 });
+
+// ─── Unsaved-changes guard ────────────────────────────────────────────────────
+
+describe('Admin edit user page – unsaved-changes guard', () => {
+	beforeEach(() => vi.clearAllMocks());
+
+	it('does not show unsaved warning initially', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
+	});
+
+	it('cancels navigation and shows warning when form is dirty', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="firstName"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
+
+		expect(cancel).toHaveBeenCalled();
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+	});
+
+	it('does not cancel navigation when form is clean', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
+
+		expect(cancel).not.toHaveBeenCalled();
+	});
+
+	it('discard button calls goto with the target URL', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="firstName"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });
+
+		await page.getByRole('button', { name: /verwerfen/i }).click();
+
+		expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/users/u2');
+	});
+
+	it('clears dirty state when form saves successfully', async () => {
+		const { rerender } = render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="firstName"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+
+		await rerender({ data: baseData, form: { success: true } });
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
+		expect(cancel).not.toHaveBeenCalled();
+	});
+});
diff --git a/frontend/src/routes/admin/users/new/+page.svelte b/frontend/src/routes/admin/users/new/+page.svelte
index cfb63278..30a0e68c 100644
--- a/frontend/src/routes/admin/users/new/+page.svelte
+++ b/frontend/src/routes/admin/users/new/+page.svelte
@@ -1,11 +1,24 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
 import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
 import AccountSection from './AccountSection.svelte';
 
 let { data, form } = $props();
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -16,13 +29,40 @@ let { data, form } = $props();
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</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}
 
-		<form id="new-user-form" method="POST" use:enhance class="space-y-5">
+		<form
+			id="new-user-form"
+			method="POST"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			class="space-y-5"
+		>
 			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<AccountSection />
 			</div>
-- 
2.49.1


From 3c54401bb2d1c97eca9a17fd2eacf02a6732e0d4 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 07:19:41 +0200
Subject: [PATCH 08/11] feat(admin): responsive entity nav and collapsible list
 panels (Phase 9)

EntityNav: hidden on mobile, 48px icon strip at tablet (md), full labels+counts at desktop (lg).
Each list panel collapses to a 32px handle via localStorage-persisted state; auto-collapses when
navigating to the "+New" route. Mobile routing hides the list panel when a detail route is active.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |   2 +
 frontend/messages/en.json                     |   2 +
 frontend/messages/es.json                     |   2 +
 frontend/src/routes/admin/+layout.svelte      |  22 ++-
 frontend/src/routes/admin/EntityNav.svelte    | 126 ++++++++++--
 .../src/routes/admin/groups/+layout.svelte    |  11 +-
 .../admin/groups/GroupsListPanel.svelte       | 141 +++++++++-----
 .../routes/admin/groups/layout.svelte.spec.ts |  33 +++-
 frontend/src/routes/admin/tags/+layout.svelte |  10 +-
 .../routes/admin/tags/TagsListPanel.svelte    | 102 +++++++---
 .../routes/admin/tags/layout.svelte.spec.ts   |  30 ++-
 .../src/routes/admin/users/+layout.svelte     |  16 +-
 .../routes/admin/users/UsersListPanel.svelte  | 182 +++++++++++-------
 .../routes/admin/users/layout.svelte.spec.ts  |  39 +++-
 14 files changed, 540 insertions(+), 178 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 9b24a14c..fdd201d6 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -161,6 +161,8 @@
 	"admin_tag_edit_heading": "Schlagwort: {name}",
 	"admin_tag_updated": "Schlagwort umbenannt.",
 	"admin_unsaved_warning": "Du hast ungespeicherte Änderungen – speichere oder verwerfe, bevor du wechselst.",
+	"admin_btn_collapse_list": "Liste einklappen",
+	"admin_btn_expand_list": "Liste ausklappen",
 	"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",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index eda45cda..3c501a2a 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -161,6 +161,8 @@
 	"admin_tag_edit_heading": "Tag: {name}",
 	"admin_tag_updated": "Tag renamed.",
 	"admin_unsaved_warning": "You have unsaved changes — save or discard before switching.",
+	"admin_btn_collapse_list": "Collapse list",
+	"admin_btn_expand_list": "Expand list",
 	"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",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 49263510..b65254cf 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -161,6 +161,8 @@
 	"admin_tag_edit_heading": "Etiqueta: {name}",
 	"admin_tag_updated": "Etiqueta renombrada.",
 	"admin_unsaved_warning": "Tienes cambios sin guardar — guarda o descarta antes de cambiar.",
+	"admin_btn_collapse_list": "Contraer lista",
+	"admin_btn_expand_list": "Expandir lista",
 	"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",
diff --git a/frontend/src/routes/admin/+layout.svelte b/frontend/src/routes/admin/+layout.svelte
index 6c9558dd..ba3e1849 100644
--- a/frontend/src/routes/admin/+layout.svelte
+++ b/frontend/src/routes/admin/+layout.svelte
@@ -13,16 +13,18 @@ let { data, children } = $props();
   Height fills from below the global header (64px) to bottom of viewport.
 -->
 <div class="-mt-6 flex overflow-hidden" style="height: calc(100vh - 65px)">
-	<!-- Entity Nav: always visible on desktop, icon strip on tablet (Phase 9) -->
-	<EntityNav
-		userCount={data.userCount}
-		groupCount={data.groupCount}
-		tagCount={data.tagCount}
-		canManageUsers={data.canManageUsers}
-		canManageTags={data.canManageTags}
-		canManageGroups={data.canManageGroups}
-		canRunMaintenance={data.canRunMaintenance}
-	/>
+	<!-- Entity Nav: hidden on mobile, icon strip on tablet, full labels on desktop -->
+	<div class="hidden md:flex">
+		<EntityNav
+			userCount={data.userCount}
+			groupCount={data.groupCount}
+			tagCount={data.tagCount}
+			canManageUsers={data.canManageUsers}
+			canManageTags={data.canManageTags}
+			canManageGroups={data.canManageGroups}
+			canRunMaintenance={data.canRunMaintenance}
+		/>
+	</div>
 
 	<!-- Right side: list panel + detail panel (or full-width for system) -->
 	<div class="flex min-w-0 flex-1 overflow-hidden">
diff --git a/frontend/src/routes/admin/EntityNav.svelte b/frontend/src/routes/admin/EntityNav.svelte
index 36334284..f0c35b81 100644
--- a/frontend/src/routes/admin/EntityNav.svelte
+++ b/frontend/src/routes/admin/EntityNav.svelte
@@ -24,71 +24,154 @@ const currentPath = $derived(page.url.pathname);
 const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`);
 </script>
 
-<nav class="flex w-30 flex-shrink-0 flex-col bg-brand-navy" aria-label={m.admin_heading()}>
-	<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
+<!--
+  Desktop (lg+): 120px with text labels
+  Tablet (md–lg): 48px icon-only strip
+-->
+<nav
+	class="flex flex-shrink-0 flex-col bg-brand-navy md:w-12 lg:w-30"
+	aria-label={m.admin_heading()}
+>
+	<!-- Desktop-only heading -->
+	<div
+		class="hidden px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase lg:block"
+	>
 		{m.admin_heading()}
 	</div>
 
 	{#if canManageUsers}
 		<a
 			href="/admin/users"
-			class="flex flex-col gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+			class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
 				{isActive('users')
 				? 'border-brand-mint bg-white/10'
 				: 'border-transparent hover:bg-white/5'}"
 			aria-current={isActive('users') ? 'page' : undefined}
+			title={m.admin_tab_users()}
 		>
-			<span class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}">
+			<!-- Icon: user group (always visible) -->
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+				/>
+			</svg>
+			<!-- Count: desktop only -->
+			<span
+				class="hidden text-[13px] font-black lg:block {isActive('users') ? 'text-white/65' : 'text-white/20'}"
+			>
 				{userCount}
 			</span>
+			<!-- Label: desktop only -->
 			<span
-				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
 				{isActive('users') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_users()}
 			</span>
+			<!-- Count badge on tablet -->
+			<span
+				class="text-[9px] font-bold lg:hidden {isActive('users') ? 'text-white/80' : 'text-white/35'}"
+			>
+				{userCount}
+			</span>
 		</a>
 	{/if}
 
 	{#if canManageGroups}
 		<a
 			href="/admin/groups"
-			class="flex flex-col gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+			class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
 				{isActive('groups')
 				? 'border-brand-mint bg-white/10'
 				: 'border-transparent hover:bg-white/5'}"
 			aria-current={isActive('groups') ? 'page' : undefined}
+			title={m.admin_tab_groups()}
 		>
-			<span class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}">
+			<!-- Icon: lock closed -->
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+				/>
+			</svg>
+			<span
+				class="hidden text-[13px] font-black lg:block {isActive('groups') ? 'text-white/65' : 'text-white/20'}"
+			>
 				{groupCount}
 			</span>
 			<span
-				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
 				{isActive('groups') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_groups()}
 			</span>
+			<span
+				class="text-[9px] font-bold lg:hidden {isActive('groups') ? 'text-white/80' : 'text-white/35'}"
+			>
+				{groupCount}
+			</span>
 		</a>
 	{/if}
 
 	{#if canManageTags}
 		<a
 			href="/admin/tags"
-			class="flex flex-col gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+			class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
 				{isActive('tags')
 				? 'border-brand-mint bg-white/10'
 				: 'border-transparent hover:bg-white/5'}"
 			aria-current={isActive('tags') ? 'page' : undefined}
+			title={m.admin_tab_tags()}
 		>
-			<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
+			<!-- Icon: tag -->
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+				/>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
+			</svg>
+			<span
+				class="hidden text-[13px] font-black lg:block {isActive('tags') ? 'text-white/65' : 'text-white/20'}"
+			>
 				{tagCount}
 			</span>
 			<span
-				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
 				{isActive('tags') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_tags()}
 			</span>
+			<span
+				class="text-[9px] font-bold lg:hidden {isActive('tags') ? 'text-white/80' : 'text-white/35'}"
+			>
+				{tagCount}
+			</span>
 		</a>
 	{/if}
 
@@ -97,14 +180,31 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
 	{#if canRunMaintenance}
 		<a
 			href="/admin/system"
-			class="flex flex-col gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors
+			class="flex flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
 				{isActive('system')
 				? 'border-brand-mint bg-white/10'
 				: 'border-l-transparent hover:bg-white/5'}"
 			aria-current={isActive('system') ? 'page' : undefined}
+			title={m.admin_tab_system()}
 		>
+			<!-- Icon: cog -->
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+				/>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+			</svg>
 			<span
-				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
 				{isActive('system') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_system()}
diff --git a/frontend/src/routes/admin/groups/+layout.svelte b/frontend/src/routes/admin/groups/+layout.svelte
index 1313962a..ab2a89b8 100644
--- a/frontend/src/routes/admin/groups/+layout.svelte
+++ b/frontend/src/routes/admin/groups/+layout.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
+import { page } from '$app/state';
 import GroupsListPanel from './GroupsListPanel.svelte';
 
 let { data, children } = $props();
+
+const autoCollapse = $derived(page.url.pathname === '/admin/groups/new');
+const isAtListRoot = $derived(page.url.pathname === '/admin/groups');
 </script>
 
-<GroupsListPanel groups={data.groups} />
+<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
+	<GroupsListPanel groups={data.groups} autocollapse={autoCollapse} />
+</div>
 
-<!-- Detail panel -->
-<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
 	{@render children()}
 </div>
diff --git a/frontend/src/routes/admin/groups/GroupsListPanel.svelte b/frontend/src/routes/admin/groups/GroupsListPanel.svelte
index e025bdcc..fe967f82 100644
--- a/frontend/src/routes/admin/groups/GroupsListPanel.svelte
+++ b/frontend/src/routes/admin/groups/GroupsListPanel.svelte
@@ -8,57 +8,104 @@ type Group = {
 	permissions: string[];
 };
 
-let { groups }: { groups: Group[] } = $props();
+let {
+	groups,
+	autocollapse = false
+}: {
+	groups: Group[];
+	autocollapse?: boolean;
+} = $props();
+
+let isCollapsed = $state(
+	typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
+);
+
+$effect(() => {
+	if (autocollapse) isCollapsed = true;
+});
+
+$effect(() => {
+	if (typeof localStorage !== 'undefined') {
+		localStorage.setItem('admin_list_collapsed', String(isCollapsed));
+	}
+});
 </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 justify-between border-b border-line px-3 py-2">
-		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
-			{m.admin_groups_list_title()}
-		</span>
-		<a
-			href="/admin/groups/new"
-			class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
-			title={m.admin_btn_new_group()}
-			aria-label={m.admin_btn_new_group()}
+{#if isCollapsed}
+	<!-- Collapsed handle: 32px -->
+	<button
+		onclick={() => (isCollapsed = false)}
+		aria-label={m.admin_btn_expand_list()}
+		class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
+	>
+		<span class="text-sm font-bold text-ink-2">›</span>
+		<span
+			class="text-[8px] font-extrabold tracking-widest text-ink-3 uppercase"
+			style="writing-mode: vertical-rl; transform: rotate(180deg);"
 		>
-			<svg
-				class="h-3.5 w-3.5"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="2.5"
-				aria-hidden="true"
-			>
-				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-			</svg>
-			{m.admin_btn_new_group()}
-		</a>
-	</div>
-
-	<!-- Scrollable group list -->
-	<div class="flex-1 overflow-y-auto">
-		{#if groups.length === 0}
-			<p class="px-4 py-6 text-center text-xs text-ink-3">
-				{m.admin_groups_empty()}
-			</p>
-		{:else}
-			{#each groups as group (group.id)}
-				{@const isActive = page.url.pathname.startsWith('/admin/groups/' + group.id)}
+			{m.admin_tab_groups()}
+		</span>
+	</button>
+{:else}
+	<div
+		class="flex w-[200px] flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface"
+	>
+		<!-- Panel header -->
+		<div class="flex items-center justify-between border-b border-line px-3 py-2">
+			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.admin_groups_list_title()}
+			</span>
+			<div class="flex items-center gap-1">
 				<a
-					href="/admin/groups/{group.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'}"
+					href="/admin/groups/new"
+					class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+					title={m.admin_btn_new_group()}
+					aria-label={m.admin_btn_new_group()}
 				>
-					<div class="text-sm font-bold text-ink">{group.name}</div>
-					<div class="mt-0.5 text-xs text-ink-3">
-						{m.admin_groups_permission_count({ count: group.permissions.length })}
-					</div>
+					<svg
+						class="h-3.5 w-3.5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2.5"
+						aria-hidden="true"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+					</svg>
 				</a>
-			{/each}
-		{/if}
+				<button
+					onclick={() => (isCollapsed = true)}
+					aria-label={m.admin_btn_collapse_list()}
+					class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
+				>
+					‹
+				</button>
+			</div>
+		</div>
+
+		<!-- Scrollable group list -->
+		<div class="flex-1 overflow-y-auto">
+			{#if groups.length === 0}
+				<p class="px-4 py-6 text-center text-xs text-ink-3">
+					{m.admin_groups_empty()}
+				</p>
+			{:else}
+				{#each groups as group (group.id)}
+					{@const isActive = page.url.pathname.startsWith('/admin/groups/' + group.id)}
+					<a
+						href="/admin/groups/{group.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">{group.name}</div>
+						<div class="mt-0.5 text-xs text-ink-3">
+							{m.admin_groups_permission_count({ count: group.permissions.length })}
+						</div>
+					</a>
+				{/each}
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}
diff --git a/frontend/src/routes/admin/groups/layout.svelte.spec.ts b/frontend/src/routes/admin/groups/layout.svelte.spec.ts
index 4496e243..5cc160ad 100644
--- a/frontend/src/routes/admin/groups/layout.svelte.spec.ts
+++ b/frontend/src/routes/admin/groups/layout.svelte.spec.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, it, expect, vi } from 'vitest';
+import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import GroupsListPanel from './GroupsListPanel.svelte';
@@ -77,3 +77,34 @@ describe('GroupsListPanel — empty state', () => {
 		await expect.element(page.getByText(/keine gruppen/i)).toBeInTheDocument();
 	});
 });
+
+// ─── Collapse toggle ──────────────────────────────────────────────────────────
+
+describe('GroupsListPanel — collapse toggle', () => {
+	beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
+
+	it('renders a collapse button with aria-label', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('button', { name: /Liste einklappen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('clicking collapse shows the expand handle', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('button', { name: /Liste einklappen/i }))
+			.toBeInTheDocument();
+		document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
+		await expect
+			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('autocollapse prop starts the panel in collapsed state', async () => {
+		render(GroupsListPanel, { groups, autocollapse: true });
+		await expect
+			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
+			.toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/routes/admin/tags/+layout.svelte b/frontend/src/routes/admin/tags/+layout.svelte
index 405779b2..190f5e29 100644
--- a/frontend/src/routes/admin/tags/+layout.svelte
+++ b/frontend/src/routes/admin/tags/+layout.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
+import { page } from '$app/state';
 import TagsListPanel from './TagsListPanel.svelte';
 
 let { data, children } = $props();
+
+const isAtListRoot = $derived(page.url.pathname === '/admin/tags');
 </script>
 
-<TagsListPanel tags={data.tags} />
+<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
+	<TagsListPanel tags={data.tags} />
+</div>
 
-<!-- Detail panel -->
-<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
 	{@render children()}
 </div>
diff --git a/frontend/src/routes/admin/tags/TagsListPanel.svelte b/frontend/src/routes/admin/tags/TagsListPanel.svelte
index 4a910bb4..deb08c9d 100644
--- a/frontend/src/routes/admin/tags/TagsListPanel.svelte
+++ b/frontend/src/routes/admin/tags/TagsListPanel.svelte
@@ -7,36 +7,82 @@ type Tag = {
 	name: string;
 };
 
-let { tags }: { tags: Tag[] } = $props();
+let {
+	tags,
+	autocollapse = false
+}: {
+	tags: Tag[];
+	autocollapse?: boolean;
+} = $props();
+
+let isCollapsed = $state(
+	typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
+);
+
+$effect(() => {
+	if (autocollapse) isCollapsed = true;
+});
+
+$effect(() => {
+	if (typeof localStorage !== 'undefined') {
+		localStorage.setItem('admin_list_collapsed', String(isCollapsed));
+	}
+});
 </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()}
+{#if isCollapsed}
+	<!-- Collapsed handle: 32px -->
+	<button
+		onclick={() => (isCollapsed = false)}
+		aria-label={m.admin_btn_expand_list()}
+		class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
+	>
+		<span class="text-sm font-bold text-ink-2">›</span>
+		<span
+			class="text-[8px] font-extrabold tracking-widest text-ink-3 uppercase"
+			style="writing-mode: vertical-rl; transform: rotate(180deg);"
+		>
+			{m.admin_tab_tags()}
 		</span>
-	</div>
+	</button>
+{:else}
+	<div
+		class="flex w-[200px] flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface"
+	>
+		<!-- Panel header -->
+		<div class="flex items-center justify-between 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>
+			<button
+				onclick={() => (isCollapsed = true)}
+				aria-label={m.admin_btn_collapse_list()}
+				class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
+			>
+				‹
+			</button>
+		</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}
+		<!-- 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>
-</div>
+{/if}
diff --git a/frontend/src/routes/admin/tags/layout.svelte.spec.ts b/frontend/src/routes/admin/tags/layout.svelte.spec.ts
index 2fbd3e5b..6638b9db 100644
--- a/frontend/src/routes/admin/tags/layout.svelte.spec.ts
+++ b/frontend/src/routes/admin/tags/layout.svelte.spec.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, it, expect, vi } from 'vitest';
+import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import TagsListPanel from './TagsListPanel.svelte';
@@ -59,3 +59,31 @@ describe('TagsListPanel — empty state', () => {
 		await expect.element(page.getByText(/keine schlagworte/i)).toBeInTheDocument();
 	});
 });
+
+// ─── Collapse toggle ──────────────────────────────────────────────────────────
+
+describe('TagsListPanel — collapse toggle', () => {
+	beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
+
+	it('renders a collapse button with aria-label', async () => {
+		render(TagsListPanel, { tags });
+		await expect
+			.element(page.getByRole('button', { name: /Liste einklappen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('clicking collapse shows the expand handle', async () => {
+		render(TagsListPanel, { tags });
+		await page.getByRole('button', { name: /Liste einklappen/i }).click();
+		await expect
+			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('autocollapse prop starts the panel in collapsed state', async () => {
+		render(TagsListPanel, { tags, autocollapse: true });
+		await expect
+			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
+			.toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/routes/admin/users/+layout.svelte b/frontend/src/routes/admin/users/+layout.svelte
index ade6a954..27077156 100644
--- a/frontend/src/routes/admin/users/+layout.svelte
+++ b/frontend/src/routes/admin/users/+layout.svelte
@@ -1,12 +1,22 @@
 <script lang="ts">
+import { page } from '$app/state';
 import UsersListPanel from './UsersListPanel.svelte';
 
 let { data, children } = $props();
+
+// Auto-collapse list when user opens the create form (gives max form space on tablet)
+const autoCollapse = $derived(page.url.pathname === '/admin/users/new');
+
+// Mobile: show only the relevant panel at a time
+const isAtListRoot = $derived(page.url.pathname === '/admin/users');
 </script>
 
-<UsersListPanel users={data.users} />
+<!-- List panel: full-screen on mobile at list root; always visible at md+ -->
+<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
+	<UsersListPanel users={data.users} autocollapse={autoCollapse} />
+</div>
 
-<!-- Detail panel -->
-<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+<!-- Detail panel: full-screen on mobile when not at list root; always visible at md+ -->
+<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
 	{@render children()}
 </div>
diff --git a/frontend/src/routes/admin/users/UsersListPanel.svelte b/frontend/src/routes/admin/users/UsersListPanel.svelte
index 51758b2f..9e453ea2 100644
--- a/frontend/src/routes/admin/users/UsersListPanel.svelte
+++ b/frontend/src/routes/admin/users/UsersListPanel.svelte
@@ -16,9 +16,28 @@ type User = {
 	groups: Group[];
 };
 
-let { users }: { users: User[] } = $props();
+let {
+	users,
+	autocollapse = false
+}: {
+	users: User[];
+	autocollapse?: boolean;
+} = $props();
 
 let searchQuery = $state('');
+let isCollapsed = $state(
+	typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
+);
+
+$effect(() => {
+	if (autocollapse) isCollapsed = true;
+});
+
+$effect(() => {
+	if (typeof localStorage !== 'undefined') {
+		localStorage.setItem('admin_list_collapsed', String(isCollapsed));
+	}
+});
 
 const filtered = $derived(
 	searchQuery.trim() === ''
@@ -31,75 +50,102 @@ const filtered = $derived(
 );
 </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 justify-between border-b border-line px-3 py-2">
-		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
-			{m.admin_users_list_title()}
-		</span>
-		<a
-			href="/admin/users/new"
-			class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
-			title={m.admin_btn_new_user()}
-			aria-label={m.admin_btn_new_user()}
+{#if isCollapsed}
+	<!-- Collapsed handle: 32px -->
+	<button
+		onclick={() => (isCollapsed = false)}
+		aria-label={m.admin_btn_expand_list()}
+		class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
+	>
+		<span class="text-sm font-bold text-ink-2">›</span>
+		<span
+			class="text-[8px] font-extrabold tracking-widest text-ink-3 uppercase"
+			style="writing-mode: vertical-rl; transform: rotate(180deg);"
 		>
-			<svg
-				class="h-3.5 w-3.5"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="2.5"
-				aria-hidden="true"
-			>
-				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-			</svg>
-			{m.admin_btn_new_user()}
-		</a>
-	</div>
-
-	<!-- Search -->
-	<div class="border-b border-line px-3 py-2">
-		<input
-			type="search"
-			bind:value={searchQuery}
-			placeholder={m.admin_users_search_placeholder()}
-			class="w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
-		/>
-	</div>
-
-	<!-- Scrollable user list -->
-	<div class="flex-1 overflow-y-auto">
-		{#if filtered.length === 0}
-			<p class="px-4 py-6 text-center text-xs text-ink-3">
-				{m.admin_users_empty()}
-			</p>
-		{:else}
-			{#each filtered as user (user.id)}
-				{@const isActive = page.url.pathname.startsWith('/admin/users/' + user.id)}
-				{@const fullName =
-					[user.firstName, user.lastName].filter(Boolean).join(' ') || null}
+			{m.admin_tab_users()}
+		</span>
+	</button>
+{:else}
+	<div
+		class="flex w-[200px] flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface"
+	>
+		<!-- Panel header -->
+		<div class="flex items-center justify-between border-b border-line px-3 py-2">
+			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.admin_users_list_title()}
+			</span>
+			<div class="flex items-center gap-1">
 				<a
-					href="/admin/users/{user.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'}"
+					href="/admin/users/new"
+					class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+					title={m.admin_btn_new_user()}
+					aria-label={m.admin_btn_new_user()}
 				>
-					<div class="text-sm font-bold text-ink">{user.username}</div>
-					{#if fullName}
-						<div class="mt-0.5 text-xs text-ink-3">{fullName}</div>
-					{/if}
-					{#if user.groups.length > 0}
-						<div class="mt-1 flex flex-wrap gap-1">
-							{#each user.groups as group (group.id)}
-								<span class="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-ink-3">
-									{group.name}
-								</span>
-							{/each}
-						</div>
-					{/if}
+					<svg
+						class="h-3.5 w-3.5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2.5"
+						aria-hidden="true"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+					</svg>
 				</a>
-			{/each}
-		{/if}
+				<button
+					onclick={() => (isCollapsed = true)}
+					aria-label={m.admin_btn_collapse_list()}
+					class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
+				>
+					‹
+				</button>
+			</div>
+		</div>
+
+		<!-- Search -->
+		<div class="border-b border-line px-3 py-2">
+			<input
+				type="search"
+				bind:value={searchQuery}
+				placeholder={m.admin_users_search_placeholder()}
+				class="w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
+			/>
+		</div>
+
+		<!-- Scrollable user list -->
+		<div class="flex-1 overflow-y-auto">
+			{#if filtered.length === 0}
+				<p class="px-4 py-6 text-center text-xs text-ink-3">
+					{m.admin_users_empty()}
+				</p>
+			{:else}
+				{#each filtered as user (user.id)}
+					{@const isActive = page.url.pathname.startsWith('/admin/users/' + user.id)}
+					{@const fullName =
+						[user.firstName, user.lastName].filter(Boolean).join(' ') || null}
+					<a
+						href="/admin/users/{user.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">{user.username}</div>
+						{#if fullName}
+							<div class="mt-0.5 text-xs text-ink-3">{fullName}</div>
+						{/if}
+						{#if user.groups.length > 0}
+							<div class="mt-1 flex flex-wrap gap-1">
+								{#each user.groups as group (group.id)}
+									<span class="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-ink-3">
+										{group.name}
+									</span>
+								{/each}
+							</div>
+						{/if}
+					</a>
+				{/each}
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}
diff --git a/frontend/src/routes/admin/users/layout.svelte.spec.ts b/frontend/src/routes/admin/users/layout.svelte.spec.ts
index 4d736f2c..121a2bae 100644
--- a/frontend/src/routes/admin/users/layout.svelte.spec.ts
+++ b/frontend/src/routes/admin/users/layout.svelte.spec.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, it, expect, vi } from 'vitest';
+import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import UsersListPanel from './UsersListPanel.svelte';
@@ -93,3 +93,40 @@ describe('UsersListPanel — empty state', () => {
 		await expect.element(page.getByText(/keine benutzer/i)).toBeInTheDocument();
 	});
 });
+
+// ─── Collapse toggle ──────────────────────────────────────────────────────────
+
+describe('UsersListPanel — collapse toggle', () => {
+	beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
+
+	it('renders a collapse button with aria-label', async () => {
+		render(UsersListPanel, { users });
+		await expect
+			.element(page.getByRole('button', { name: /Liste einklappen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('clicking collapse shows the expand handle', async () => {
+		render(UsersListPanel, { users });
+		await page.getByRole('button', { name: /Liste einklappen/i }).click();
+		await expect
+			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('clicking expand handle restores the full panel', async () => {
+		render(UsersListPanel, { users });
+		await page.getByRole('button', { name: /Liste einklappen/i }).click();
+		await page.getByRole('button', { name: /Liste ausklappen/i }).click();
+		await expect
+			.element(page.getByRole('button', { name: /Liste einklappen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('autocollapse prop starts the panel in collapsed state', async () => {
+		render(UsersListPanel, { users, autocollapse: true });
+		await expect
+			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
+			.toBeInTheDocument();
+	});
+});
-- 
2.49.1


From 559b5225073fa9180494dc948a76514c2a6f524f Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 09:06:03 +0200
Subject: [PATCH 09/11] feat(admin): entity flyout for tablet icon strip (Phase
 9 complete)

Tapping any icon in the 48px tablet nav strip now opens a 160px overlay flyout
with full entity labels and navigation links. Flyout closes on Escape, backdrop
click, or link click. Includes role="dialog", aria-modal, aria-label for WCAG.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/admin/EntityNav.svelte    | 378 +++++++++++++++---
 .../routes/admin/entity-nav.svelte.spec.ts    |  81 ++++
 2 files changed, 409 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/routes/admin/entity-nav.svelte.spec.ts

diff --git a/frontend/src/routes/admin/EntityNav.svelte b/frontend/src/routes/admin/EntityNav.svelte
index f0c35b81..ae57556b 100644
--- a/frontend/src/routes/admin/EntityNav.svelte
+++ b/frontend/src/routes/admin/EntityNav.svelte
@@ -22,11 +22,21 @@ let {
 
 const currentPath = $derived(page.url.pathname);
 const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`);
+
+let flyoutOpen = $state(false);
+
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape' && flyoutOpen) {
+		flyoutOpen = false;
+	}
+}
 </script>
 
+<svelte:document onkeydown={handleKeydown} />
+
 <!--
   Desktop (lg+): 120px with text labels
-  Tablet (md–lg): 48px icon-only strip
+  Tablet (md–lg): 48px icon-only strip with flyout panel
 -->
 <nav
 	class="flex flex-shrink-0 flex-col bg-brand-navy md:w-12 lg:w-30"
@@ -40,16 +50,17 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
 	</div>
 
 	{#if canManageUsers}
-		<a
-			href="/admin/users"
-			class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
+		<!-- Tablet trigger button (md only, hidden at lg) -->
+		<button
+			data-flyout-trigger
+			type="button"
+			aria-label={m.admin_tab_users()}
+			onclick={() => (flyoutOpen = true)}
+			class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
 				{isActive('users')
 				? 'border-brand-mint bg-white/10'
 				: 'border-transparent hover:bg-white/5'}"
-			aria-current={isActive('users') ? 'page' : undefined}
-			title={m.admin_tab_users()}
 		>
-			<!-- Icon: user group (always visible) -->
 			<svg
 				class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
 				fill="none"
@@ -64,39 +75,58 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
 					d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
 				/>
 			</svg>
-			<!-- Count: desktop only -->
-			<span
-				class="hidden text-[13px] font-black lg:block {isActive('users') ? 'text-white/65' : 'text-white/20'}"
-			>
+			<span class="text-[9px] font-bold {isActive('users') ? 'text-white/80' : 'text-white/35'}">
+				{userCount}
+			</span>
+		</button>
+		<!-- Desktop link (lg+) -->
+		<a
+			href="/admin/users"
+			class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
+				{isActive('users')
+				? 'border-brand-mint bg-white/10'
+				: 'border-transparent hover:bg-white/5'}"
+			aria-current={isActive('users') ? 'page' : undefined}
+			title={m.admin_tab_users()}
+		>
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+				/>
+			</svg>
+			<span class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}">
 				{userCount}
 			</span>
-			<!-- Label: desktop only -->
 			<span
-				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
 				{isActive('users') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_users()}
 			</span>
-			<!-- Count badge on tablet -->
-			<span
-				class="text-[9px] font-bold lg:hidden {isActive('users') ? 'text-white/80' : 'text-white/35'}"
-			>
-				{userCount}
-			</span>
 		</a>
 	{/if}
 
 	{#if canManageGroups}
-		<a
-			href="/admin/groups"
-			class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
+		<!-- Tablet trigger button (md only, hidden at lg) -->
+		<button
+			data-flyout-trigger
+			type="button"
+			aria-label={m.admin_tab_groups()}
+			onclick={() => (flyoutOpen = true)}
+			class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
 				{isActive('groups')
 				? 'border-brand-mint bg-white/10'
 				: 'border-transparent hover:bg-white/5'}"
-			aria-current={isActive('groups') ? 'page' : undefined}
-			title={m.admin_tab_groups()}
 		>
-			<!-- Icon: lock closed -->
 			<svg
 				class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
 				fill="none"
@@ -111,36 +141,58 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
 					d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
 				/>
 			</svg>
-			<span
-				class="hidden text-[13px] font-black lg:block {isActive('groups') ? 'text-white/65' : 'text-white/20'}"
+			<span class="text-[9px] font-bold {isActive('groups') ? 'text-white/80' : 'text-white/35'}">
+				{groupCount}
+			</span>
+		</button>
+		<!-- Desktop link (lg+) -->
+		<a
+			href="/admin/groups"
+			class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
+				{isActive('groups')
+				? 'border-brand-mint bg-white/10'
+				: 'border-transparent hover:bg-white/5'}"
+			aria-current={isActive('groups') ? 'page' : undefined}
+			title={m.admin_tab_groups()}
+		>
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
 			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+				/>
+			</svg>
+			<span class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}">
 				{groupCount}
 			</span>
 			<span
-				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
 				{isActive('groups') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_groups()}
 			</span>
-			<span
-				class="text-[9px] font-bold lg:hidden {isActive('groups') ? 'text-white/80' : 'text-white/35'}"
-			>
-				{groupCount}
-			</span>
 		</a>
 	{/if}
 
 	{#if canManageTags}
-		<a
-			href="/admin/tags"
-			class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
+		<!-- Tablet trigger button (md only, hidden at lg) -->
+		<button
+			data-flyout-trigger
+			type="button"
+			aria-label={m.admin_tab_tags()}
+			onclick={() => (flyoutOpen = true)}
+			class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
 				{isActive('tags')
 				? 'border-brand-mint bg-white/10'
 				: 'border-transparent hover:bg-white/5'}"
-			aria-current={isActive('tags') ? 'page' : undefined}
-			title={m.admin_tab_tags()}
 		>
-			<!-- Icon: tag -->
 			<svg
 				class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
 				fill="none"
@@ -156,38 +208,87 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
 				/>
 				<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
 			</svg>
-			<span
-				class="hidden text-[13px] font-black lg:block {isActive('tags') ? 'text-white/65' : 'text-white/20'}"
+			<span class="text-[9px] font-bold {isActive('tags') ? 'text-white/80' : 'text-white/35'}">
+				{tagCount}
+			</span>
+		</button>
+		<!-- Desktop link (lg+) -->
+		<a
+			href="/admin/tags"
+			class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
+				{isActive('tags')
+				? 'border-brand-mint bg-white/10'
+				: 'border-transparent hover:bg-white/5'}"
+			aria-current={isActive('tags') ? 'page' : undefined}
+			title={m.admin_tab_tags()}
+		>
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
 			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+				/>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
+			</svg>
+			<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
 				{tagCount}
 			</span>
 			<span
-				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
 				{isActive('tags') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_tags()}
 			</span>
-			<span
-				class="text-[9px] font-bold lg:hidden {isActive('tags') ? 'text-white/80' : 'text-white/35'}"
-			>
-				{tagCount}
-			</span>
 		</a>
 	{/if}
 
 	<div class="flex-1"></div>
 
 	{#if canRunMaintenance}
+		<!-- Tablet trigger button (md only, hidden at lg) -->
+		<button
+			data-flyout-trigger
+			type="button"
+			aria-label={m.admin_tab_system()}
+			onclick={() => (flyoutOpen = true)}
+			class="flex w-full flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors lg:hidden
+				{isActive('system')
+				? 'border-brand-mint bg-white/10'
+				: 'border-l-transparent hover:bg-white/5'}"
+		>
+			<svg
+				class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+				/>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+			</svg>
+		</button>
+		<!-- Desktop link (lg+) -->
 		<a
 			href="/admin/system"
-			class="flex flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
+			class="hidden flex-col items-start justify-center gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors lg:flex
 				{isActive('system')
 				? 'border-brand-mint bg-white/10'
 				: 'border-l-transparent hover:bg-white/5'}"
 			aria-current={isActive('system') ? 'page' : undefined}
 			title={m.admin_tab_system()}
 		>
-			<!-- Icon: cog -->
 			<svg
 				class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
 				fill="none"
@@ -204,7 +305,7 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
 				<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 			</svg>
 			<span
-				class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
+				class="text-[9px] font-extrabold tracking-[0.5px] uppercase
 				{isActive('system') ? 'text-white' : 'text-white/55'}"
 			>
 				{m.admin_tab_system()}
@@ -212,3 +313,180 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
 		</a>
 	{/if}
 </nav>
+
+{#if flyoutOpen}
+	<!-- Backdrop -->
+	<div
+		data-flyout-backdrop
+		role="none"
+		class="fixed inset-0 z-40 bg-black/40"
+		onclick={() => (flyoutOpen = false)}
+	></div>
+
+	<!-- Flyout panel -->
+	<div
+		role="dialog"
+		aria-modal="true"
+		aria-label={m.admin_heading()}
+		class="fixed top-0 left-12 z-50 flex h-full w-40 flex-col bg-brand-navy shadow-xl"
+		style="transform: translateX(0); transition: transform 180ms ease-out;"
+	>
+		<!-- Heading -->
+		<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
+			{m.admin_heading()}
+		</div>
+
+		{#if canManageUsers}
+			<a
+				href="/admin/users"
+				onclick={() => (flyoutOpen = false)}
+				class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+					{isActive('users')
+					? 'border-brand-mint bg-white/10'
+					: 'border-transparent hover:bg-white/5'}"
+				aria-current={isActive('users') ? 'page' : undefined}
+			>
+				<svg
+					class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+					/>
+				</svg>
+				<span
+					class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}"
+				>
+					{userCount}
+				</span>
+				<span
+					class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+					{isActive('users') ? 'text-white' : 'text-white/55'}"
+				>
+					{m.admin_tab_users()}
+				</span>
+			</a>
+		{/if}
+
+		{#if canManageGroups}
+			<a
+				href="/admin/groups"
+				onclick={() => (flyoutOpen = false)}
+				class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+					{isActive('groups')
+					? 'border-brand-mint bg-white/10'
+					: 'border-transparent hover:bg-white/5'}"
+				aria-current={isActive('groups') ? 'page' : undefined}
+			>
+				<svg
+					class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+					/>
+				</svg>
+				<span
+					class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}"
+				>
+					{groupCount}
+				</span>
+				<span
+					class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+					{isActive('groups') ? 'text-white' : 'text-white/55'}"
+				>
+					{m.admin_tab_groups()}
+				</span>
+			</a>
+		{/if}
+
+		{#if canManageTags}
+			<a
+				href="/admin/tags"
+				onclick={() => (flyoutOpen = false)}
+				class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
+					{isActive('tags')
+					? 'border-brand-mint bg-white/10'
+					: 'border-transparent hover:bg-white/5'}"
+				aria-current={isActive('tags') ? 'page' : undefined}
+			>
+				<svg
+					class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+					/>
+					<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
+				</svg>
+				<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
+					{tagCount}
+				</span>
+				<span
+					class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+					{isActive('tags') ? 'text-white' : 'text-white/55'}"
+				>
+					{m.admin_tab_tags()}
+				</span>
+			</a>
+		{/if}
+
+		<div class="flex-1"></div>
+
+		{#if canRunMaintenance}
+			<a
+				href="/admin/system"
+				onclick={() => (flyoutOpen = false)}
+				class="flex flex-col items-start justify-center gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors
+					{isActive('system')
+					? 'border-brand-mint bg-white/10'
+					: 'border-l-transparent hover:bg-white/5'}"
+				aria-current={isActive('system') ? 'page' : undefined}
+			>
+				<svg
+					class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+					/>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+					/>
+				</svg>
+				<span
+					class="text-[9px] font-extrabold tracking-[0.5px] uppercase
+					{isActive('system') ? 'text-white' : 'text-white/55'}"
+				>
+					{m.admin_tab_system()}
+				</span>
+			</a>
+		{/if}
+	</div>
+{/if}
diff --git a/frontend/src/routes/admin/entity-nav.svelte.spec.ts b/frontend/src/routes/admin/entity-nav.svelte.spec.ts
new file mode 100644
index 00000000..c9fea364
--- /dev/null
+++ b/frontend/src/routes/admin/entity-nav.svelte.spec.ts
@@ -0,0 +1,81 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import EntityNav from './EntityNav.svelte';
+
+vi.mock('$app/state', () => ({
+	page: { url: { pathname: '/admin/users' } }
+}));
+
+afterEach(cleanup);
+
+const props = {
+	userCount: 5,
+	groupCount: 3,
+	tagCount: 8,
+	canManageUsers: true,
+	canManageTags: true,
+	canManageGroups: true,
+	canRunMaintenance: true
+};
+
+describe('EntityNav — flyout', () => {
+	it('flyout dialog is not visible initially', async () => {
+		render(EntityNav, props);
+		await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+	});
+
+	it('clicking a flyout trigger opens the dialog', async () => {
+		render(EntityNav, props);
+		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+	});
+
+	it('flyout dialog has aria-modal="true"', async () => {
+		render(EntityNav, props);
+		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
+		await expect.element(page.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+	});
+
+	it('flyout dialog has an aria-label', async () => {
+		render(EntityNav, props);
+		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		const dialog = document.querySelector('[role="dialog"]')!;
+		expect(dialog.getAttribute('aria-label')).toBeTruthy();
+	});
+
+	it('flyout contains navigation links to each entity', async () => {
+		render(EntityNav, props);
+		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		const dialog = document.querySelector('[role="dialog"]')!;
+		const links = dialog.querySelectorAll('a[href^="/admin/"]');
+		expect(links.length).toBeGreaterThanOrEqual(3);
+	});
+
+	it('pressing Escape closes the flyout', async () => {
+		render(EntityNav, props);
+		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+		await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+	});
+
+	it('clicking the backdrop closes the flyout', async () => {
+		render(EntityNav, props);
+		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		document.querySelector<HTMLElement>('[data-flyout-backdrop]')!.click();
+		await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+	});
+
+	it('clicking a flyout link closes the flyout', async () => {
+		render(EntityNav, props);
+		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		const dialog = document.querySelector('[role="dialog"]')!;
+		dialog.querySelector<HTMLAnchorElement>('a[href^="/admin/"]')!.click();
+		await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+	});
+});
-- 
2.49.1


From 9996055cac4302bf7a67216285489a3a4c9b6283 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 09:42:44 +0200
Subject: [PATCH 10/11] feat(admin): mass import card on system tab with live
 status polling

Adds a new card on the System tab that triggers the existing
POST /api/admin/trigger-import endpoint. Status is polled every 2 s
while RUNNING and stops automatically on DONE or FAILED.
IDLE/RUNNING/DONE/FAILED states each render distinct UI feedback.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |   8 ++
 frontend/messages/en.json                     |   8 ++
 frontend/messages/es.json                     |   8 ++
 frontend/src/routes/admin/system/+page.svelte |  92 ++++++++++++++++
 .../routes/admin/system/page.svelte.spec.ts   | 104 +++++++++++++++++-
 5 files changed, 219 insertions(+), 1 deletion(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index fdd201d6..c344e8e3 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -273,6 +273,14 @@
 	"admin_system_backfill_hashes_description": "Berechnet den SHA-256-Hash für alle bereits hochgeladenen Dokumente, die noch keinen Hash haben. Dadurch werden Annotationen korrekt mit ihrer Dateiversion verknüpft und wieder angezeigt.",
 	"admin_system_backfill_hashes_btn": "Datei-Hashes berechnen",
 	"admin_system_backfill_hashes_success": "{count} Dokumente wurden aktualisiert.",
+	"admin_system_import_heading": "Massenimport",
+	"admin_system_import_description": "Importiert Dokumente und Metadaten aus der Importdatei im /import-Verzeichnis.",
+	"admin_system_import_btn_start": "Import starten",
+	"admin_system_import_btn_retry": "Erneut starten",
+	"admin_system_import_status_idle": "Kein Import gestartet.",
+	"admin_system_import_status_running": "Import läuft…",
+	"admin_system_import_status_done": "Import abgeschlossen – {count} Dokumente verarbeitet.",
+	"admin_system_import_status_failed": "Fehler: {message}",
 	"comp_expandable_show_more": "Mehr anzeigen",
 	"comp_expandable_show_less": "Weniger anzeigen",
 	"error_comment_not_found": "Der Kommentar wurde nicht gefunden.",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 3c501a2a..7bb2a116 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -273,6 +273,14 @@
 	"admin_system_backfill_hashes_description": "Computes the SHA-256 hash for all previously uploaded documents that do not have one yet. This ensures annotations are correctly linked to their file version and shown again.",
 	"admin_system_backfill_hashes_btn": "Compute file hashes",
 	"admin_system_backfill_hashes_success": "{count} documents were updated.",
+	"admin_system_import_heading": "Mass import",
+	"admin_system_import_description": "Imports documents and metadata from the spreadsheet file in the /import directory.",
+	"admin_system_import_btn_start": "Start import",
+	"admin_system_import_btn_retry": "Start again",
+	"admin_system_import_status_idle": "No import started.",
+	"admin_system_import_status_running": "Import running…",
+	"admin_system_import_status_done": "Import complete – {count} documents processed.",
+	"admin_system_import_status_failed": "Error: {message}",
 	"comp_expandable_show_more": "Show more",
 	"comp_expandable_show_less": "Show less",
 	"error_comment_not_found": "The comment could not be found.",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index b65254cf..0f9d93d4 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -273,6 +273,14 @@
 	"admin_system_backfill_hashes_description": "Calcula el hash SHA-256 para todos los documentos ya subidos que aún no tienen uno. Así las anotaciones se vinculan correctamente a su versión del archivo y vuelven a mostrarse.",
 	"admin_system_backfill_hashes_btn": "Calcular hashes de archivo",
 	"admin_system_backfill_hashes_success": "{count} documentos fueron actualizados.",
+	"admin_system_import_heading": "Importación masiva",
+	"admin_system_import_description": "Importa documentos y metadatos desde el archivo en el directorio /import.",
+	"admin_system_import_btn_start": "Iniciar importación",
+	"admin_system_import_btn_retry": "Iniciar de nuevo",
+	"admin_system_import_status_idle": "No hay importación iniciada.",
+	"admin_system_import_status_running": "Importación en curso…",
+	"admin_system_import_status_done": "Importación completada – {count} documentos procesados.",
+	"admin_system_import_status_failed": "Error: {message}",
 	"comp_expandable_show_more": "Mostrar más",
 	"comp_expandable_show_less": "Mostrar menos",
 	"error_comment_not_found": "El comentario no pudo encontrarse.",
diff --git a/frontend/src/routes/admin/system/+page.svelte b/frontend/src/routes/admin/system/+page.svelte
index ddb575c6..463b1677 100644
--- a/frontend/src/routes/admin/system/+page.svelte
+++ b/frontend/src/routes/admin/system/+page.svelte
@@ -6,6 +6,55 @@ let backfillLoading = $state(false);
 let backfillHashesResult: number | null = $state(null);
 let backfillHashesLoading = $state(false);
 
+type ImportStatus = {
+	state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
+	message: string;
+	processed: number;
+	startedAt: string | null;
+};
+
+let importStatus: ImportStatus | null = $state(null);
+let pollInterval: ReturnType<typeof setInterval> | null = null;
+
+function startPolling() {
+	if (pollInterval) return;
+	pollInterval = setInterval(fetchImportStatus, 2000);
+}
+
+function stopPolling() {
+	if (pollInterval) {
+		clearInterval(pollInterval);
+		pollInterval = null;
+	}
+}
+
+async function fetchImportStatus() {
+	const res = await fetch('/api/admin/import-status');
+	if (res.ok) {
+		importStatus = await res.json();
+		if (importStatus!.state === 'RUNNING') {
+			startPolling();
+		} else {
+			stopPolling();
+		}
+	}
+}
+
+async function triggerImport() {
+	const res = await fetch('/api/admin/trigger-import', { method: 'POST' });
+	if (res.ok) {
+		importStatus = await res.json();
+		if (importStatus!.state === 'RUNNING') {
+			startPolling();
+		}
+	}
+}
+
+$effect(() => {
+	fetchImportStatus();
+	return () => stopPolling();
+});
+
 async function backfillVersions() {
 	backfillLoading = true;
 	backfillResult = null;
@@ -74,5 +123,48 @@ async function backfillFileHashes() {
 				</p>
 			{/if}
 		</div>
+
+		<!-- Mass import -->
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_import_heading()}</h2>
+			<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_description()}</p>
+
+			{#if importStatus?.state === 'RUNNING'}
+				<p class="text-sm text-ink-2">{m.admin_system_import_status_running()}</p>
+			{:else if importStatus?.state === 'DONE'}
+				<p class="mb-4 rounded-sm border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+					{m.admin_system_import_status_done({ count: importStatus.processed })}
+				</p>
+				<button
+					data-import-trigger
+					onclick={triggerImport}
+					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.admin_system_import_btn_retry()}
+				</button>
+			{:else if importStatus?.state === 'FAILED'}
+				<p class="mb-4 rounded-sm border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+					{m.admin_system_import_status_failed({ message: importStatus.message })}
+				</p>
+				<button
+					data-import-trigger
+					onclick={triggerImport}
+					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.admin_system_import_btn_retry()}
+				</button>
+			{:else}
+				{#if importStatus !== null}
+					<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_status_idle()}</p>
+				{/if}
+				<button
+					data-import-trigger
+					onclick={triggerImport}
+					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.admin_system_import_btn_start()}
+				</button>
+			{/if}
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/admin/system/page.svelte.spec.ts b/frontend/src/routes/admin/system/page.svelte.spec.ts
index 4d8e0bb7..df349893 100644
--- a/frontend/src/routes/admin/system/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/system/page.svelte.spec.ts
@@ -1,9 +1,10 @@
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import Page from './+page.svelte';
 
 afterEach(cleanup);
+afterEach(() => vi.restoreAllMocks());
 
 describe('Admin system page', () => {
 	it('renders the backfill versions heading', async () => {
@@ -32,3 +33,104 @@ describe('Admin system page', () => {
 			.toBeInTheDocument();
 	});
 });
+
+describe('Admin system page — mass import card', () => {
+	beforeEach(() => {
+		vi.stubGlobal(
+			'fetch',
+			vi.fn().mockResolvedValue({
+				ok: true,
+				json: async () => ({
+					state: 'IDLE',
+					message: 'Kein Import gestartet.',
+					processed: 0,
+					startedAt: null
+				})
+			})
+		);
+	});
+
+	it('renders the mass import heading', async () => {
+		render(Page, {});
+		await expect.element(page.getByText(/Massenimport/i)).toBeInTheDocument();
+	});
+
+	it('renders the start import button when idle', async () => {
+		render(Page, {});
+		await expect.element(page.getByRole('button', { name: /Import starten/i })).toBeInTheDocument();
+	});
+
+	it('shows idle status text', async () => {
+		render(Page, {});
+		await expect.element(page.getByText(/Kein Import gestartet/i)).toBeInTheDocument();
+	});
+
+	it('disables the start button and shows running state after click', async () => {
+		const fetchMock = vi
+			.fn()
+			// initial status fetch → IDLE
+			.mockResolvedValueOnce({
+				ok: true,
+				json: async () => ({
+					state: 'IDLE',
+					message: 'Kein Import gestartet.',
+					processed: 0,
+					startedAt: null
+				})
+			})
+			// trigger POST → returns RUNNING immediately
+			.mockResolvedValueOnce({
+				ok: true,
+				json: async () => ({
+					state: 'RUNNING',
+					message: 'Import läuft...',
+					processed: 0,
+					startedAt: '2026-01-01T10:00:00'
+				})
+			});
+		vi.stubGlobal('fetch', fetchMock);
+
+		render(Page, {});
+		await expect.element(page.getByRole('button', { name: /Import starten/i })).toBeInTheDocument();
+
+		document.querySelector<HTMLButtonElement>('[data-import-trigger]')!.click();
+
+		await expect.element(page.getByText(/Import läuft/i)).toBeInTheDocument();
+	});
+
+	it('shows done status and retry button after successful import', async () => {
+		vi.stubGlobal(
+			'fetch',
+			vi.fn().mockResolvedValue({
+				ok: true,
+				json: async () => ({
+					state: 'DONE',
+					message: 'Import abgeschlossen.',
+					processed: 42,
+					startedAt: '2026-01-01T10:00:00'
+				})
+			})
+		);
+		render(Page, {});
+		await expect.element(page.getByText(/42 Dokumente/i)).toBeInTheDocument();
+		await expect.element(page.getByRole('button', { name: /Erneut starten/i })).toBeInTheDocument();
+	});
+
+	it('shows failed status and retry button on error', async () => {
+		vi.stubGlobal(
+			'fetch',
+			vi.fn().mockResolvedValue({
+				ok: true,
+				json: async () => ({
+					state: 'FAILED',
+					message: 'Datei nicht gefunden.',
+					processed: 0,
+					startedAt: '2026-01-01T10:00:00'
+				})
+			})
+		);
+		render(Page, {});
+		await expect.element(page.getByText(/Datei nicht gefunden/i)).toBeInTheDocument();
+		await expect.element(page.getByRole('button', { name: /Erneut starten/i })).toBeInTheDocument();
+	});
+});
-- 
2.49.1


From 09d8fb5f9525b70b340e0a4f32c0f24ed6b32db2 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 10:12:48 +0200
Subject: [PATCH 11/11] feat(admin): add READ_ALL and ANNOTATE_ALL to groups
 permission matrix

Adds 'Nur lesen' (READ_ALL) and 'Lesen & Annotieren' (ANNOTATE_ALL)
as standard permission options alongside the existing 'Lesen & Schreiben'
(WRITE_ALL), ordered from least to most access.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/admin/groups/[id]/+page.svelte |  2 ++
 .../admin/groups/[id]/page.svelte.spec.ts     | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/frontend/src/routes/admin/groups/[id]/+page.svelte b/frontend/src/routes/admin/groups/[id]/+page.svelte
index 3705ea67..66462616 100644
--- a/frontend/src/routes/admin/groups/[id]/+page.svelte
+++ b/frontend/src/routes/admin/groups/[id]/+page.svelte
@@ -25,6 +25,8 @@ $effect(() => {
 });
 
 const STANDARD_PERMISSIONS: { value: string; label: string }[] = [
+	{ value: 'READ_ALL', label: 'Nur lesen' },
+	{ value: 'ANNOTATE_ALL', label: 'Lesen & Annotieren' },
 	{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }
 ];
 
diff --git a/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
index 911ecf57..426ca22c 100644
--- a/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
@@ -41,6 +41,42 @@ describe('Admin edit group page – rendering', () => {
 			.element(page.getByRole('link', { name: /Abbrechen/i }))
 			.toHaveAttribute('href', '/admin/groups');
 	});
+
+	it('renders a READ_ALL checkbox in the standard permissions section', async () => {
+		render(Page, { data: baseData, form: null });
+		const cb = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
+		);
+		expect(cb).not.toBeNull();
+	});
+
+	it('renders an ANNOTATE_ALL checkbox in the standard permissions section', async () => {
+		render(Page, { data: baseData, form: null });
+		const cb = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
+		);
+		expect(cb).not.toBeNull();
+	});
+
+	it('pre-checks READ_ALL when group has it', async () => {
+		const data = { group: { id: 'g2', name: 'Leser', permissions: ['READ_ALL'] } };
+		render(Page, { data, form: null });
+		const cb = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
+		);
+		expect(cb?.checked).toBe(true);
+	});
+
+	it('pre-checks ANNOTATE_ALL when group has it', async () => {
+		const data = {
+			group: { id: 'g3', name: 'Annotatoren', permissions: ['READ_ALL', 'ANNOTATE_ALL'] }
+		};
+		render(Page, { data, form: null });
+		const cb = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
+		);
+		expect(cb?.checked).toBe(true);
+	});
 });
 
 // ─── Unsaved-changes guard ────────────────────────────────────────────────────
-- 
2.49.1