From 74bf49552babfc5f181a667f2b68dcd133d2ccc6 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 27 Mar 2026 17:03:40 +0100
Subject: [PATCH] refactor: extract LanguageSwitcher into a reusable component

Removes duplicated locale logic from +layout.svelte and AppNav.svelte.
Context-specific sizing (text-xs/min-h-[44px]) stays in the wrapper
via [&_button]: selectors so the component itself is layout-agnostic.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/LanguageSwitcher.svelte    | 18 +++++++++++++++
 frontend/src/routes/+layout.svelte            | 23 ++++---------------
 frontend/src/routes/AppNav.svelte             | 23 ++++---------------
 3 files changed, 28 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/lib/components/LanguageSwitcher.svelte

diff --git a/frontend/src/lib/components/LanguageSwitcher.svelte b/frontend/src/lib/components/LanguageSwitcher.svelte
new file mode 100644
index 00000000..e14029db
--- /dev/null
+++ b/frontend/src/lib/components/LanguageSwitcher.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+import { setLocale, getLocale } from '$lib/paraglide/runtime';
+
+const locales = ['DE', 'EN', 'ES'] as const;
+const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
+const activeLocale = $derived(getLocale().toUpperCase());
+</script>
+
+{#each locales as locale (locale)}
+	<button
+		type="button"
+		onclick={() => setLocale(localeMap[locale])}
+		class="font-sans tracking-widest transition-colors
+               {activeLocale === locale ? 'font-bold text-ink' : 'font-normal text-ink-3 hover:text-ink'}"
+	>
+		{locale}
+	</button>
+{/each}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index b213ae32..3dac8238 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -2,17 +2,13 @@
 import './layout.css';
 import { page } from '$app/state';
 import { onMount } from 'svelte';
-import { setLocale, getLocale } from '$lib/paraglide/runtime';
+import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 import AppNav from './AppNav.svelte';
 import UserMenu from './UserMenu.svelte';
 
 let { children, data } = $props();
 
-const locales = ['DE', 'EN', 'ES'] as const;
-const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
-const activeLocale = $derived(getLocale().toUpperCase());
-
 const isAdmin = $derived(
 	data?.user?.groups?.some((g: { permissions: string[] }) => g.permissions.includes('ADMIN'))
 );
@@ -47,19 +43,10 @@ const userInitials = $derived.by(() => {
 					<!-- Right Side -->
 					<div class="flex items-center gap-3">
 						<!-- Language selector (desktop only — mobile lives in nav drawer) -->
-						<div class="hidden items-center gap-1 border-r border-line pr-3 sm:flex">
-							{#each locales as locale (locale)}
-								<button
-									type="button"
-									onclick={() => setLocale(localeMap[locale])}
-									class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
-                                        {activeLocale === locale
-                                            ? 'font-bold text-ink'
-                                            : 'font-normal text-ink-3 hover:text-ink'}"
-								>
-									{locale}
-								</button>
-							{/each}
+						<div
+							class="hidden items-center gap-1 border-r border-line pr-3 sm:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
+						>
+							<LanguageSwitcher />
 						</div>
 
 						<!-- Theme toggle -->
diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 20e8def5..aea54a29 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -2,14 +2,10 @@
 import { page } from '$app/state';
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
-import { setLocale, getLocale } from '$lib/paraglide/runtime';
+import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 
 let { isAdmin = false }: { isAdmin?: boolean } = $props();
 
-const locales = ['DE', 'EN', 'ES'] as const;
-const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
-const activeLocale = $derived(getLocale().toUpperCase());
-
 let mobileNavOpen = $state(false);
 
 $effect(() => {
@@ -187,19 +183,10 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 				{/if}
 
 				<!-- Language switcher -->
-				<div class="flex items-center gap-2 border-t border-line px-4 py-3">
-					{#each locales as locale (locale)}
-						<button
-							type="button"
-							onclick={() => setLocale(localeMap[locale])}
-							class="min-h-[44px] px-3 font-sans text-sm tracking-widest transition-colors
-                               {activeLocale === locale
-                                ? 'font-bold text-ink'
-                                : 'font-normal text-ink-3 hover:text-ink'}"
-						>
-							{locale}
-						</button>
-					{/each}
+				<div
+					class="flex items-center gap-2 border-t border-line px-4 py-3 [&_button]:min-h-[44px] [&_button]:px-3 [&_button]:text-sm"
+				>
+					<LanguageSwitcher />
 				</div>
 			</nav>
 		</div>