From d46764ef4fdf8a8842f7ac4622cb826afa1cabad Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 26 Mar 2026 12:10:54 +0100
Subject: [PATCH] refactor(layout): extract AppNav and UserMenu sub-components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Split +layout.svelte (205 lines) into:
- AppNav.svelte: logo + nav links with active-state styling
- UserMenu.svelte: avatar button, dropdown, click-outside handler

Layout drops from 205 → 80 lines.

Part of #75

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+layout.svelte  | 130 +---------------------------
 frontend/src/routes/AppNav.svelte   |  59 +++++++++++++
 frontend/src/routes/UserMenu.svelte |  81 +++++++++++++++++
 3 files changed, 144 insertions(+), 126 deletions(-)
 create mode 100644 frontend/src/routes/AppNav.svelte
 create mode 100644 frontend/src/routes/UserMenu.svelte

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 11f31185..32d85fe3 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 import './layout.css';
-import { enhance } from '$app/forms';
 import { page } from '$app/state';
 import { onMount } from 'svelte';
-import { m } from '$lib/paraglide/messages.js';
 import { setLocale, getLocale } from '$lib/paraglide/runtime';
 import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+import AppNav from './AppNav.svelte';
+import UserMenu from './UserMenu.svelte';
 
 let { children, data } = $props();
 
@@ -28,26 +28,12 @@ const isAuthPage = $derived(
 	['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))
 );
 
-let userMenuOpen = $state(false);
-
 const userInitials = $derived.by(() => {
 	const first = data?.user?.firstName?.[0];
 	const last = data?.user?.lastName?.[0];
 	if (first && last) return (first + last).toUpperCase();
 	return null;
 });
-
-function clickOutside(node: HTMLElement) {
-	const handleClick = (event: MouseEvent) => {
-		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
-			userMenuOpen = false;
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return () => {
-		document.removeEventListener('click', handleClick, true);
-	};
-}
 </script>
 
 <div class="min-h-screen bg-canvas" data-hydrated={hydrated || undefined}>
@@ -59,58 +45,7 @@ function clickOutside(node: HTMLElement) {
 			<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 				<div class="flex h-16 justify-between">
 					<!-- Logo & Nav -->
-					<div class="flex">
-						<div class="mr-10 flex flex-shrink-0 items-center">
-							<a href="/" class="flex items-center" aria-label="Familienarchiv">
-								<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
-									>Familienarchiv</span
-								>
-							</a>
-						</div>
-
-						<nav class="hidden items-center sm:flex sm:space-x-1">
-							<a
-								href="/"
-								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                                    ? 'rounded bg-nav-active text-ink'
-                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
-							>
-								{m.nav_documents()}
-							</a>
-
-							<a
-								href="/persons"
-								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname.startsWith('/persons')
-                                    ? 'rounded bg-nav-active text-ink'
-                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
-							>
-								{m.nav_persons()}
-							</a>
-
-							<a
-								href="/conversations"
-								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname.startsWith('/conversations')
-                                    ? 'rounded bg-nav-active text-ink'
-                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
-							>
-								{m.nav_conversations()}
-							</a>
-							{#if isAdmin}
-								<a
-									href="/admin"
-									class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname.startsWith('/admin')
-                                        ? 'rounded bg-nav-active text-ink'
-                                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
-								>
-									{m.nav_admin()}
-								</a>
-							{/if}
-						</nav>
-					</div>
+					<AppNav isAdmin={isAdmin} />
 
 					<!-- Right Side -->
 					<div class="flex items-center gap-3">
@@ -134,64 +69,7 @@ function clickOutside(node: HTMLElement) {
 						<ThemeToggle />
 
 						<!-- User menu -->
-						<div
-							class="relative"
-							{@attach clickOutside}
-							onkeydown={(e) => { if (e.key === 'Escape') userMenuOpen = false; }}
-							role="none"
-						>
-							{#if userInitials}
-								<button
-									type="button"
-									aria-expanded={userMenuOpen}
-									aria-haspopup="true"
-									onclick={() => (userMenuOpen = !userMenuOpen)}
-									class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-sans text-xs font-bold text-white transition-opacity hover:opacity-80"
-								>
-									{userInitials}
-								</button>
-							{:else}
-								<button
-									type="button"
-									aria-label={m.nav_profile()}
-									aria-expanded={userMenuOpen}
-									aria-haspopup="true"
-									onclick={() => (userMenuOpen = !userMenuOpen)}
-									class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
-								>
-									<img
-										src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
-										alt=""
-										aria-hidden="true"
-										class="h-4 w-4 opacity-50"
-									/>
-								</button>
-							{/if}
-
-							{#if userMenuOpen}
-								<div
-									class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-line bg-overlay shadow-md"
-								>
-									<a
-										href="/profile"
-										onclick={() => (userMenuOpen = false)}
-										class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted hover:text-ink"
-									>
-										{m.nav_profile()}
-									</a>
-									<div class="border-t border-line">
-										<form action="/logout" method="POST" use:enhance>
-											<button
-												type="submit"
-												class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:bg-muted hover:text-ink"
-											>
-												{m.nav_logout()}
-											</button>
-										</form>
-									</div>
-								</div>
-							{/if}
-						</div>
+						<UserMenu userInitials={userInitials} />
 					</div>
 				</div>
 			</div>
diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
new file mode 100644
index 00000000..49e6888e
--- /dev/null
+++ b/frontend/src/routes/AppNav.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+import { page } from '$app/state';
+import { m } from '$lib/paraglide/messages.js';
+
+let { isAdmin = false }: { isAdmin?: boolean } = $props();
+</script>
+
+<div class="flex">
+	<div class="mr-10 flex flex-shrink-0 items-center">
+		<a href="/" class="flex items-center" aria-label="Familienarchiv">
+			<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
+				>Familienarchiv</span
+			>
+		</a>
+	</div>
+
+	<nav class="hidden items-center sm:flex sm:space-x-1">
+		<a
+			href="/"
+			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
+                    ? 'rounded bg-nav-active text-ink'
+                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+		>
+			{m.nav_documents()}
+		</a>
+
+		<a
+			href="/persons"
+			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname.startsWith('/persons')
+                    ? 'rounded bg-nav-active text-ink'
+                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+		>
+			{m.nav_persons()}
+		</a>
+
+		<a
+			href="/conversations"
+			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname.startsWith('/conversations')
+                    ? 'rounded bg-nav-active text-ink'
+                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+		>
+			{m.nav_conversations()}
+		</a>
+		{#if isAdmin}
+			<a
+				href="/admin"
+				class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname.startsWith('/admin')
+                        ? 'rounded bg-nav-active text-ink'
+                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+			>
+				{m.nav_admin()}
+			</a>
+		{/if}
+	</nav>
+</div>
diff --git a/frontend/src/routes/UserMenu.svelte b/frontend/src/routes/UserMenu.svelte
new file mode 100644
index 00000000..cb954c84
--- /dev/null
+++ b/frontend/src/routes/UserMenu.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { userInitials }: { userInitials: string | null } = $props();
+
+let userMenuOpen = $state(false);
+
+function clickOutside(node: HTMLElement) {
+	const handleClick = (event: MouseEvent) => {
+		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+			userMenuOpen = false;
+		}
+	};
+	document.addEventListener('click', handleClick, true);
+	return () => {
+		document.removeEventListener('click', handleClick, true);
+	};
+}
+</script>
+
+<div
+	class="relative"
+	{@attach clickOutside}
+	onkeydown={(e) => {
+		if (e.key === 'Escape') userMenuOpen = false;
+	}}
+	role="none"
+>
+	{#if userInitials}
+		<button
+			type="button"
+			aria-expanded={userMenuOpen}
+			aria-haspopup="true"
+			onclick={() => (userMenuOpen = !userMenuOpen)}
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-sans text-xs font-bold text-white transition-opacity hover:opacity-80"
+		>
+			{userInitials}
+		</button>
+	{:else}
+		<button
+			type="button"
+			aria-label={m.nav_profile()}
+			aria-expanded={userMenuOpen}
+			aria-haspopup="true"
+			onclick={() => (userMenuOpen = !userMenuOpen)}
+			class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
+		>
+			<img
+				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-4 w-4 opacity-50"
+			/>
+		</button>
+	{/if}
+
+	{#if userMenuOpen}
+		<div
+			class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-line bg-overlay shadow-md"
+		>
+			<a
+				href="/profile"
+				onclick={() => (userMenuOpen = false)}
+				class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted hover:text-ink"
+			>
+				{m.nav_profile()}
+			</a>
+			<div class="border-t border-line">
+				<form action="/logout" method="POST" use:enhance>
+					<button
+						type="submit"
+						class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:bg-muted hover:text-ink"
+					>
+						{m.nav_logout()}
+					</button>
+				</form>
+			</div>
+		</div>
+	{/if}
+</div>