fix(admin): address PR review feedback from all personas

Blockers resolved:
- localStorage key collision: UsersListPanel/GroupsListPanel/TagsListPanel
  now each use their own key (admin_*_list_collapsed)
- $effect autocollapse replaced with $derived(autocollapse || manualCollapse)
  across all three list panels (Felix — Svelte 5 rule violation)
- groups/new: add READ_ALL and ANNOTATE_ALL to available standard permissions
- Mobile back-to-list links added to all five detail panel headers (md:hidden)
  so users landing directly on a detail URL on mobile can navigate back
- onDestroy(() => stopPolling()) added to system/+page.svelte (Tobias)

High priority resolved:
- Permission labels in groups/[id] and groups/new now use Paraglide i18n keys
  (admin_perm_read_all, admin_perm_annotate_all, etc.) across de/en/es
- $derived used for permission arrays (reactive i18n) — Felix Svelte 5 rule
- UserGroup type in +layout.server.ts now uses generated API type (Markus/Felix)
- discardTarget annotation changed to variable-level type annotation

Accessibility (Leonie):
- EntityNav tablet icon strip buttons: min-h-[44px] for WCAG 2.5.8 compliance
- Flyout focus management: openFlyout() focuses first link, closeFlyout()
  returns focus to the trigger button that opened it
- Flyout animation replaced: broken inline style -> transition:fly={{ x: -160 }}

Tests (Sara/Felix):
- localStorage key assertion tests added per panel
- localStorage.removeItem calls updated to use the panel-specific keys
- page.server.spec.ts added for groups/[id] and tags/[id] delete actions
- Polling lifecycle tests added to system/page.svelte.spec.ts

Note: Paraglide types for new admin_perm_* keys regenerate automatically on
next npm run dev (Vite plugin). No manual compilation step needed.

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

frontend/messages/de.json

@@ -190,6 +190,13 @@
 	"admin_group_created": "Gruppe erstellt.",
 	"admin_groups_section_standard": "Standard",
 	"admin_groups_section_administrative": "Administrativ",
+	"admin_perm_read_all": "Nur lesen",
+	"admin_perm_annotate_all": "Lesen & Annotieren",
+	"admin_perm_write_all": "Lesen & Schreiben",
+	"admin_perm_admin": "Vollzugriff (Admin)",
+	"admin_perm_admin_user": "Benutzer verwalten",
+	"admin_perm_admin_tag": "Schlagworte verwalten",
+	"admin_perm_admin_permission": "Berechtigungen verwalten",
 	"admin_user_new_heading": "Neuen Benutzer anlegen",
 	"admin_user_edit_heading": "Benutzer bearbeiten: {username}",
 	"admin_user_created": "Benutzer wurde erstellt.",

frontend/messages/en.json

@@ -190,6 +190,13 @@
 	"admin_group_created": "Group created.",
 	"admin_groups_section_standard": "Standard",
 	"admin_groups_section_administrative": "Administrative",
+	"admin_perm_read_all": "Read only",
+	"admin_perm_annotate_all": "Read & Annotate",
+	"admin_perm_write_all": "Read & Write",
+	"admin_perm_admin": "Full access (Admin)",
+	"admin_perm_admin_user": "Manage users",
+	"admin_perm_admin_tag": "Manage tags",
+	"admin_perm_admin_permission": "Manage permissions",
 	"admin_user_new_heading": "Create new user",
 	"admin_user_edit_heading": "Edit user: {username}",
 	"admin_user_created": "User has been created.",

frontend/messages/es.json

@@ -190,6 +190,13 @@
 	"admin_group_created": "Grupo creado.",
 	"admin_groups_section_standard": "Est\u00e1ndar",
 	"admin_groups_section_administrative": "Administrativo",
+	"admin_perm_read_all": "Solo lectura",
+	"admin_perm_annotate_all": "Leer y anotar",
+	"admin_perm_write_all": "Leer y escribir",
+	"admin_perm_admin": "Acceso completo (Admin)",
+	"admin_perm_admin_user": "Gestionar usuarios",
+	"admin_perm_admin_tag": "Gestionar etiquetas",
+	"admin_perm_admin_permission": "Gestionar permisos",
 	"admin_user_new_heading": "Crear nuevo usuario",
 	"admin_user_edit_heading": "Editar usuario: {username}",
 	"admin_user_created": "Usuario creado.",

frontend/src/app.d.ts

@@ -12,6 +12,7 @@ declare global {
 			email?: string;
 			contact?: string;
 			groups: {
+				id: string;
 				name: string;
 				permissions: string[];
 			}[];

frontend/src/routes/admin/+layout.server.ts

@@ -1,8 +1,9 @@
 import { error } from '@sveltejs/kit';
 import { createApiClient } from '$lib/api.server';
 import { getErrorMessage } from '$lib/errors';
+import type { components } from '$lib/generated/api';
 
-type UserGroup = { permissions: string[] };
+type UserGroup = components['schemas']['UserGroup'];
 
 function hasPerm(user: { groups?: UserGroup[] } | undefined, perm: string): boolean {
 	return user?.groups?.some((g) => g.permissions.includes(perm)) ?? false;

frontend/src/routes/admin/EntityNav.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { tick } from 'svelte';
+import { fly } from 'svelte/transition';
 import { page } from '$app/state';
 import { m } from '$lib/paraglide/messages.js';
 
@@ -24,10 +26,24 @@ const currentPath = $derived(page.url.pathname);
 const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`);
 
 let flyoutOpen = $state(false);
+let flyoutTriggerElement: HTMLButtonElement | null = null;
+
+async function openFlyout(event: MouseEvent) {
+	flyoutTriggerElement = event.currentTarget as HTMLButtonElement;
+	flyoutOpen = true;
+	await tick();
+	const firstLink = document.querySelector<HTMLAnchorElement>('[role="dialog"] a');
+	firstLink?.focus();
+}
+
+function closeFlyout() {
+	flyoutOpen = false;
+	flyoutTriggerElement?.focus();
+}
 
 function handleKeydown(event: KeyboardEvent) {
 	if (event.key === 'Escape' && flyoutOpen) {
-		flyoutOpen = false;
+		closeFlyout();
 	}
 }
 </script>
@@ -55,8 +71,8 @@ function handleKeydown(event: KeyboardEvent) {
 			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
+			onclick={openFlyout}
+			class="flex min-h-[44px] 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'}"
@@ -121,8 +137,8 @@ function handleKeydown(event: KeyboardEvent) {
 			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
+			onclick={openFlyout}
+			class="flex min-h-[44px] 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'}"
@@ -187,8 +203,8 @@ function handleKeydown(event: KeyboardEvent) {
 			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
+			onclick={openFlyout}
+			class="flex min-h-[44px] 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'}"
@@ -257,8 +273,8 @@ function handleKeydown(event: KeyboardEvent) {
 			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
+			onclick={openFlyout}
+			class="flex min-h-[44px] 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'}"
@@ -320,7 +336,7 @@ function handleKeydown(event: KeyboardEvent) {
 		data-flyout-backdrop
 		role="none"
 		class="fixed inset-0 z-40 bg-black/40"
-		onclick={() => (flyoutOpen = false)}
+		onclick={closeFlyout}
 	></div>
 
 	<!-- Flyout panel -->
@@ -329,7 +345,7 @@ function handleKeydown(event: KeyboardEvent) {
 		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;"
+		transition:fly={{ x: -160, duration: 180 }}
 	>
 		<!-- Heading -->
 		<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
@@ -339,7 +355,7 @@ function handleKeydown(event: KeyboardEvent) {
 		{#if canManageUsers}
 			<a
 				href="/admin/users"
-				onclick={() => (flyoutOpen = false)}
+				onclick={closeFlyout}
 				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'
@@ -377,7 +393,7 @@ function handleKeydown(event: KeyboardEvent) {
 		{#if canManageGroups}
 			<a
 				href="/admin/groups"
-				onclick={() => (flyoutOpen = false)}
+				onclick={closeFlyout}
 				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'
@@ -415,7 +431,7 @@ function handleKeydown(event: KeyboardEvent) {
 		{#if canManageTags}
 			<a
 				href="/admin/tags"
-				onclick={() => (flyoutOpen = false)}
+				onclick={closeFlyout}
 				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'
@@ -454,7 +470,7 @@ function handleKeydown(event: KeyboardEvent) {
 		{#if canRunMaintenance}
 			<a
 				href="/admin/system"
-				onclick={() => (flyoutOpen = false)}
+				onclick={closeFlyout}
 				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'

frontend/src/routes/admin/groups/GroupsListPanel.svelte

@@ -16,17 +16,15 @@ let {
 	autocollapse?: boolean;
 } = $props();
 
-let isCollapsed = $state(
-	typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
+let manualCollapse = $state(
+	typeof localStorage !== 'undefined' &&
+		localStorage.getItem('admin_groups_list_collapsed') === 'true'
 );
-
-$effect(() => {
-	if (autocollapse) isCollapsed = true;
-});
+const isCollapsed = $derived(autocollapse || manualCollapse);
 
 $effect(() => {
 	if (typeof localStorage !== 'undefined') {
-		localStorage.setItem('admin_list_collapsed', String(isCollapsed));
+		localStorage.setItem('admin_groups_list_collapsed', String(manualCollapse));
 	}
 });
 </script>
@@ -34,7 +32,7 @@ $effect(() => {
 {#if isCollapsed}
 	<!-- Collapsed handle: 32px -->
 	<button
-		onclick={() => (isCollapsed = false)}
+		onclick={() => (manualCollapse = 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"
 	>
@@ -74,7 +72,7 @@ $effect(() => {
 					</svg>
 				</a>
 				<button
-					onclick={() => (isCollapsed = true)}
+					onclick={() => (manualCollapse = 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"
 				>

frontend/src/routes/admin/groups/[id]/+page.svelte

@@ -7,7 +7,7 @@ let { data, form } = $props();
 
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
-let discardTarget = $state<string | null>(null);
+let discardTarget: string | null = $state(null);
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -24,23 +24,38 @@ $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' }
-];
+const STANDARD_PERMISSIONS = $derived([
+	{ value: 'READ_ALL', label: m.admin_perm_read_all() },
+	{ value: 'ANNOTATE_ALL', label: m.admin_perm_annotate_all() },
+	{ value: 'WRITE_ALL', label: m.admin_perm_write_all() }
+]);
 
-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' }
-];
+const ADMIN_PERMISSIONS = $derived([
+	{ value: 'ADMIN', label: m.admin_perm_admin() },
+	{ value: 'ADMIN_USER', label: m.admin_perm_admin_user() },
+	{ value: 'ADMIN_TAG', label: m.admin_perm_admin_tag() },
+	{ value: 'ADMIN_PERMISSION', label: m.admin_perm_admin_permission() }
+]);
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
 	<!-- Header -->
 	<div class="flex items-center border-b border-line px-5 py-3">
+		<a
+			href="/admin/groups"
+			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
+		>
+			<svg
+				class="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+			</svg>
+		</a>
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_group_edit_heading({ name: data.group.name })}
 		</h2>

frontend/src/routes/admin/groups/[id]/page.server.spec.ts

@@ -0,0 +1,87 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { actions } from './+page.server';
+
+const mockApi = {
+	PATCH: vi.fn(),
+	DELETE: vi.fn()
+};
+
+vi.mock('$lib/api.server', () => ({
+	createApiClient: () => mockApi
+}));
+
+beforeEach(() => vi.clearAllMocks());
+
+// ─── update action ─────────────────────────────────────────────────────────────
+
+describe('groups/[id] — update action', () => {
+	it('returns success: true when API responds ok', async () => {
+		mockApi.PATCH.mockResolvedValue({ response: { ok: true }, data: {} });
+
+		const formData = new FormData();
+		formData.set('name', 'Editors');
+		formData.append('permissions', 'WRITE_ALL');
+
+		const result = await actions.update({
+			params: { id: 'g1' },
+			request: { formData: async () => formData },
+			fetch
+		} as never);
+
+		expect(result).toEqual({ success: true });
+	});
+
+	it('returns fail with error message when API responds not ok', async () => {
+		mockApi.PATCH.mockResolvedValue({
+			response: { ok: false, status: 409 },
+			error: { code: 'GROUP_NOT_FOUND' }
+		});
+
+		const formData = new FormData();
+		formData.set('name', 'Editors');
+
+		const result = await actions.update({
+			params: { id: 'g1' },
+			request: { formData: async () => formData },
+			fetch
+		} as never);
+
+		expect((result as { status: number }).status).toBe(409);
+	});
+});
+
+// ─── delete action ─────────────────────────────────────────────────────────────
+
+describe('groups/[id] — delete action', () => {
+	it('redirects to /admin/groups on successful delete', async () => {
+		mockApi.DELETE.mockResolvedValue({ response: { ok: true } });
+
+		let redirectUrl: string | null = null;
+		try {
+			await actions.delete({
+				params: { id: 'g1' },
+				fetch
+			} as never);
+		} catch (e: unknown) {
+			// SvelteKit redirect throws a Response-like object
+			const r = e as { location?: string; status?: number };
+			redirectUrl = r.location ?? null;
+		}
+
+		expect(redirectUrl).toBe('/admin/groups');
+	});
+
+	it('returns fail with error message when delete API responds not ok', async () => {
+		mockApi.DELETE.mockResolvedValue({
+			response: { ok: false, status: 403 },
+			error: { code: 'FORBIDDEN' }
+		});
+
+		const result = await actions.delete({
+			params: { id: 'g1' },
+			fetch
+		} as never);
+
+		expect((result as { status: number }).status).toBe(403);
+	});
+});

frontend/src/routes/admin/groups/layout.svelte.spec.ts

@@ -81,7 +81,7 @@ describe('GroupsListPanel — empty state', () => {
 // ─── Collapse toggle ──────────────────────────────────────────────────────────
 
 describe('GroupsListPanel — collapse toggle', () => {
-	beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
+	beforeEach(() => localStorage.removeItem('admin_groups_list_collapsed'));
 
 	it('renders a collapse button with aria-label', async () => {
 		render(GroupsListPanel, { groups });
@@ -107,4 +107,12 @@ describe('GroupsListPanel — collapse toggle', () => {
 			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
 			.toBeInTheDocument();
 	});
+
+	it('persists collapse state using the groups-specific localStorage key', async () => {
+		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
+		render(GroupsListPanel, { groups });
+		document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
+		expect(setSpy).toHaveBeenCalledWith('admin_groups_list_collapsed', 'true');
+		setSpy.mockRestore();
+	});
 });

frontend/src/routes/admin/groups/new/+page.svelte

@@ -3,19 +3,23 @@ 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' }];
-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' }
-];
+const availableStandard = $derived([
+	{ value: 'READ_ALL', label: m.admin_perm_read_all() },
+	{ value: 'ANNOTATE_ALL', label: m.admin_perm_annotate_all() },
+	{ value: 'WRITE_ALL', label: m.admin_perm_write_all() }
+]);
+const availableAdmin = $derived([
+	{ value: 'ADMIN', label: m.admin_perm_admin() },
+	{ value: 'ADMIN_USER', label: m.admin_perm_admin_user() },
+	{ value: 'ADMIN_TAG', label: m.admin_perm_admin_tag() },
+	{ value: 'ADMIN_PERMISSION', label: m.admin_perm_admin_permission() }
+]);
 
 let { form } = $props();
 
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
-let discardTarget = $state<string | null>(null);
+let discardTarget: string | null = $state(null);
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -31,6 +35,21 @@ beforeNavigate(({ cancel, to }) => {
 	<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"
 	>
+		<a
+			href="/admin/groups"
+			class="mr-3 inline-flex items-center gap-1 text-xs text-green-700 hover:text-green-900 md:hidden"
+		>
+			<svg
+				class="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+			</svg>
+		</a>
 		<h2 class="flex-1 font-sans text-sm font-bold text-green-800 dark:text-green-300">
 			{m.admin_group_new_heading()}
 		</h2>

frontend/src/routes/admin/system/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { onDestroy } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 
 let backfillResult: number | null = $state(null);
@@ -52,9 +53,10 @@ async function triggerImport() {
 
 $effect(() => {
 	fetchImportStatus();
-	return () => stopPolling();
 });
 
+onDestroy(() => stopPolling());
+
 async function backfillVersions() {
 	backfillLoading = true;
 	backfillResult = null;

frontend/src/routes/admin/system/page.svelte.spec.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import Page from './+page.svelte';
@@ -134,3 +134,56 @@ describe('Admin system page — mass import card', () => {
 		await expect.element(page.getByRole('button', { name: /Erneut starten/i })).toBeInTheDocument();
 	});
 });
+
+// ─── Polling lifecycle ────────────────────────────────────────────────────────
+
+describe('Admin system page — polling lifecycle', () => {
+	let setIntervalSpy: MockInstance;
+	let clearIntervalSpy: MockInstance;
+
+	beforeEach(() => {
+		setIntervalSpy = vi.spyOn(globalThis, 'setInterval');
+		clearIntervalSpy = vi.spyOn(globalThis, 'clearInterval');
+	});
+
+	afterEach(() => {
+		setIntervalSpy.mockRestore();
+		clearIntervalSpy.mockRestore();
+	});
+
+	it('starts polling when initial status is RUNNING', async () => {
+		vi.stubGlobal(
+			'fetch',
+			vi.fn().mockResolvedValue({
+				ok: true,
+				json: async () => ({
+					state: 'RUNNING',
+					message: 'Import läuft...',
+					processed: 0,
+					startedAt: '2026-01-01T10:00:00'
+				})
+			})
+		);
+		render(Page, {});
+		await expect.element(page.getByText(/Import läuft/i)).toBeInTheDocument();
+		expect(setIntervalSpy).toHaveBeenCalled();
+	});
+
+	it('does not start polling when initial status is IDLE', async () => {
+		vi.stubGlobal(
+			'fetch',
+			vi.fn().mockResolvedValue({
+				ok: true,
+				json: async () => ({
+					state: 'IDLE',
+					message: '',
+					processed: 0,
+					startedAt: null
+				})
+			})
+		);
+		render(Page, {});
+		await expect.element(page.getByRole('button', { name: /Import starten/i })).toBeInTheDocument();
+		expect(setIntervalSpy).not.toHaveBeenCalled();
+	});
+});

frontend/src/routes/admin/tags/TagsListPanel.svelte

@@ -15,17 +15,15 @@ let {
 	autocollapse?: boolean;
 } = $props();
 
-let isCollapsed = $state(
-	typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
+let manualCollapse = $state(
+	typeof localStorage !== 'undefined' &&
+		localStorage.getItem('admin_tags_list_collapsed') === 'true'
 );
-
-$effect(() => {
-	if (autocollapse) isCollapsed = true;
-});
+const isCollapsed = $derived(autocollapse || manualCollapse);
 
 $effect(() => {
 	if (typeof localStorage !== 'undefined') {
-		localStorage.setItem('admin_list_collapsed', String(isCollapsed));
+		localStorage.setItem('admin_tags_list_collapsed', String(manualCollapse));
 	}
 });
 </script>
@@ -33,7 +31,7 @@ $effect(() => {
 {#if isCollapsed}
 	<!-- Collapsed handle: 32px -->
 	<button
-		onclick={() => (isCollapsed = false)}
+		onclick={() => (manualCollapse = 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"
 	>
@@ -55,7 +53,7 @@ $effect(() => {
 				{m.admin_tags_list_title()}
 			</span>
 			<button
-				onclick={() => (isCollapsed = true)}
+				onclick={() => (manualCollapse = 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"
 			>

frontend/src/routes/admin/tags/[id]/+page.svelte

@@ -10,7 +10,7 @@ const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
 
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
-let discardTarget = $state<string | null>(null);
+let discardTarget: string | null = $state(null);
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -31,6 +31,21 @@ $effect(() => {
 <div class="flex flex-1 flex-col overflow-hidden">
 	<!-- Detail panel header -->
 	<div class="flex items-center border-b border-line px-5 py-3">
+		<a
+			href="/admin/tags"
+			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
+		>
+			<svg
+				class="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+			</svg>
+		</a>
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_tag_edit_heading({ name: data.tag.name })}
 		</h2>

frontend/src/routes/admin/tags/[id]/page.server.spec.ts

@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { actions } from './+page.server';
+
+const mockApi = {
+	PUT: vi.fn(),
+	DELETE: vi.fn()
+};
+
+vi.mock('$lib/api.server', () => ({
+	createApiClient: () => mockApi
+}));
+
+beforeEach(() => vi.clearAllMocks());
+
+// ─── update action ─────────────────────────────────────────────────────────────
+
+describe('tags/[id] — update action', () => {
+	it('returns success: true when API responds ok', async () => {
+		mockApi.PUT.mockResolvedValue({ response: { ok: true }, data: {} });
+
+		const formData = new FormData();
+		formData.set('name', 'Archiv');
+
+		const result = await actions.update({
+			params: { id: 't1' },
+			request: { formData: async () => formData },
+			fetch
+		} as never);
+
+		expect(result).toEqual({ success: true });
+	});
+
+	it('returns fail with error message when API responds not ok', async () => {
+		mockApi.PUT.mockResolvedValue({
+			response: { ok: false, status: 409 },
+			error: { code: 'TAG_CONFLICT' }
+		});
+
+		const formData = new FormData();
+		formData.set('name', 'Archiv');
+
+		const result = await actions.update({
+			params: { id: 't1' },
+			request: { formData: async () => formData },
+			fetch
+		} as never);
+
+		expect((result as { status: number }).status).toBe(409);
+	});
+});
+
+// ─── delete action ─────────────────────────────────────────────────────────────
+
+describe('tags/[id] — delete action', () => {
+	it('redirects to /admin/tags on successful delete', async () => {
+		mockApi.DELETE.mockResolvedValue({ response: { ok: true } });
+
+		let redirectUrl: string | null = null;
+		try {
+			await actions.delete({
+				params: { id: 't1' },
+				fetch
+			} as never);
+		} catch (e: unknown) {
+			const r = e as { location?: string; status?: number };
+			redirectUrl = r.location ?? null;
+		}
+
+		expect(redirectUrl).toBe('/admin/tags');
+	});
+
+	it('returns fail with error message when delete API responds not ok', async () => {
+		mockApi.DELETE.mockResolvedValue({
+			response: { ok: false, status: 403 },
+			error: { code: 'FORBIDDEN' }
+		});
+
+		const result = await actions.delete({
+			params: { id: 't1' },
+			fetch
+		} as never);
+
+		expect((result as { status: number }).status).toBe(403);
+	});
+});

frontend/src/routes/admin/tags/layout.svelte.spec.ts

@@ -63,7 +63,7 @@ describe('TagsListPanel — empty state', () => {
 // ─── Collapse toggle ──────────────────────────────────────────────────────────
 
 describe('TagsListPanel — collapse toggle', () => {
-	beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
+	beforeEach(() => localStorage.removeItem('admin_tags_list_collapsed'));
 
 	it('renders a collapse button with aria-label', async () => {
 		render(TagsListPanel, { tags });
@@ -86,4 +86,12 @@ describe('TagsListPanel — collapse toggle', () => {
 			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
 			.toBeInTheDocument();
 	});
+
+	it('persists collapse state using the tags-specific localStorage key', async () => {
+		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
+		render(TagsListPanel, { tags });
+		document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
+		expect(setSpy).toHaveBeenCalledWith('admin_tags_list_collapsed', 'true');
+		setSpy.mockRestore();
+	});
 });

frontend/src/routes/admin/users/UsersListPanel.svelte

@@ -25,17 +25,15 @@ let {
 } = $props();
 
 let searchQuery = $state('');
-let isCollapsed = $state(
-	typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
+let manualCollapse = $state(
+	typeof localStorage !== 'undefined' &&
+		localStorage.getItem('admin_users_list_collapsed') === 'true'
 );
-
-$effect(() => {
-	if (autocollapse) isCollapsed = true;
-});
+const isCollapsed = $derived(autocollapse || manualCollapse);
 
 $effect(() => {
 	if (typeof localStorage !== 'undefined') {
-		localStorage.setItem('admin_list_collapsed', String(isCollapsed));
+		localStorage.setItem('admin_users_list_collapsed', String(manualCollapse));
 	}
 });
 
@@ -53,7 +51,7 @@ const filtered = $derived(
 {#if isCollapsed}
 	<!-- Collapsed handle: 32px -->
 	<button
-		onclick={() => (isCollapsed = false)}
+		onclick={() => (manualCollapse = 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"
 	>
@@ -93,7 +91,7 @@ const filtered = $derived(
 					</svg>
 				</a>
 				<button
-					onclick={() => (isCollapsed = true)}
+					onclick={() => (manualCollapse = 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"
 				>

frontend/src/routes/admin/users/[id]/+page.svelte

@@ -12,7 +12,7 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
 
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
-let discardTarget = $state<string | null>(null);
+let discardTarget: string | null = $state(null);
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -33,6 +33,21 @@ $effect(() => {
 <div class="flex flex-1 flex-col overflow-hidden">
 	<!-- Detail panel header -->
 	<div class="flex items-center border-b border-line px-5 py-3">
+		<a
+			href="/admin/users"
+			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
+		>
+			<svg
+				class="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+			</svg>
+		</a>
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_user_edit_heading({ username: data.editUser.username })}
 		</h2>

frontend/src/routes/admin/users/layout.svelte.spec.ts

@@ -97,7 +97,7 @@ describe('UsersListPanel — empty state', () => {
 // ─── Collapse toggle ──────────────────────────────────────────────────────────
 
 describe('UsersListPanel — collapse toggle', () => {
-	beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
+	beforeEach(() => localStorage.removeItem('admin_users_list_collapsed'));
 
 	it('renders a collapse button with aria-label', async () => {
 		render(UsersListPanel, { users });
@@ -129,4 +129,12 @@ describe('UsersListPanel — collapse toggle', () => {
 			.element(page.getByRole('button', { name: /Liste ausklappen/i }))
 			.toBeInTheDocument();
 	});
+
+	it('persists collapse state using the users-specific localStorage key', async () => {
+		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
+		render(UsersListPanel, { users });
+		document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
+		expect(setSpy).toHaveBeenCalledWith('admin_users_list_collapsed', 'true');
+		setSpy.mockRestore();
+	});
 });

frontend/src/routes/admin/users/new/+page.svelte

@@ -10,7 +10,7 @@ let { data, form } = $props();
 
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
-let discardTarget = $state<string | null>(null);
+let discardTarget: string | null = $state(null);
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -24,6 +24,21 @@ beforeNavigate(({ cancel, to }) => {
 <div class="flex flex-1 flex-col overflow-hidden">
 	<!-- Detail panel header -->
 	<div class="flex items-center border-b border-line px-5 py-3">
+		<a
+			href="/admin/users"
+			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
+		>
+			<svg
+				class="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+			</svg>
+		</a>
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">{m.admin_user_new_heading()}</h2>
 	</div>