feat(ui): declutter header — user menu + lang dropdown, mobile theme/lang

Desktop header before: logo · Library · Catalogue · Feedback · ●●● · EN RU ID PT-BR FR · Admin · username · Sign out
Desktop header after:  logo · Library · Catalogue · Feedback · ●●● · [🌐 EN ▾] · [avatar ▾]

Changes:
- Theme dots kept but made slightly smaller (3.5 → 3.5, less gap)
- 5 bare language codes replaced with a compact globe + current locale
  dropdown (click to expand all 5 options)
- Admin link, username, and Sign out collapsed into a single user-initial
  avatar dropdown (Profile / Admin panel / Sign out)
- Click-outside overlay closes any open dropdown
- Mobile drawer: added Theme and Language rows so users can switch both
  without opening the desktop header
- Footer locale switcher removed (redundant with header and mobile drawer)

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

ui/src/routes/+layout.svelte

@@ -17,6 +17,16 @@
 	// Mobile nav drawer state
 	let menuOpen = $state(false);
 
+	// Desktop dropdown menus
+	let userMenuOpen = $state(false);
+	let langMenuOpen = $state(false);
+
+	const THEMES = [
+		{ id: 'amber', color: '#f59e0b' },
+		{ id: 'slate', color: '#818cf8' },
+		{ id: 'rose',  color: '#fb7185' },
+	];
+
 	// Chapter list drawer state for the mini-player
 	let chapterDrawerOpen = $state(false);
 
@@ -303,61 +313,101 @@
 				{m.nav_feedback()}
 			</a>
 
-				<div class="ml-auto flex items-center gap-4">
+				<div class="ml-auto flex items-center gap-2">
-					<!-- Theme quick picker -->
+					<!-- Theme dots (desktop) -->
-					<div class="hidden sm:flex items-center gap-1">
+					<div class="hidden sm:flex items-center gap-1 mr-1">
-						{#each [{ id: 'amber', color: '#f59e0b' }, { id: 'slate', color: '#818cf8' }, { id: 'rose', color: '#fb7185' }] as t}
+						{#each THEMES as t}
 							<button
 								type="button"
 								onclick={() => { currentTheme = t.id; }}
 								title={t.id}
-								class="w-4 h-4 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : 'border-transparent opacity-60 hover:opacity-100'}"
+								class="w-3.5 h-3.5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : 'border-transparent opacity-50 hover:opacity-100'}"
 								style="background: {t.color};"
 							></button>
 						{/each}
 					</div>
 
-					<!-- Language quick picker -->
+					<!-- Language dropdown (desktop) -->
-					<div class="hidden sm:flex items-center gap-0.5">
+					<div class="hidden sm:block relative">
-						{#each locales as locale}
+						<button
-							<button
+							type="button"
-								type="button"
+							onclick={() => { langMenuOpen = !langMenuOpen; userMenuOpen = false; }}
-								onclick={async () => {
+							class="flex items-center gap-1 px-2 py-1 rounded text-xs font-mono transition-colors {langMenuOpen ? 'bg-(--color-surface-2) text-(--color-text)' : 'text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)'}"
-									await fetch('/api/settings', {
+						>
-										method: 'PUT',
+							<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										headers: { 'Content-Type': 'application/json' },
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
-										body: JSON.stringify({ autoNext: audioStore.autoNext, voice: audioStore.voice, speed: audioStore.speed, theme: currentTheme, fontFamily: currentFontFamily, fontSize: currentFontSize, locale })
+							</svg>
-									}).catch(() => {});
+							{getLocale().toUpperCase()}
-									const { setLocale } = await import('$lib/paraglide/runtime.js');
+							<svg class="w-3 h-3 shrink-0 transition-transform {langMenuOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									setLocale(locale as any, { reload: true });
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-								}}
+							</svg>
-								class="px-1.5 py-0.5 rounded text-xs font-mono transition-colors {getLocale() === locale ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text)'}"
+						</button>
-							>
+						{#if langMenuOpen}
-								{locale.toUpperCase()}
+							<div class="absolute right-0 top-full mt-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl py-1 z-50 min-w-[80px]">
-							</button>
+								{#each locales as locale}
-						{/each}
+									<button
+										type="button"
+										onclick={async () => {
+											langMenuOpen = false;
+											await fetch('/api/settings', {
+												method: 'PUT',
+												headers: { 'Content-Type': 'application/json' },
+												body: JSON.stringify({ autoNext: audioStore.autoNext, voice: audioStore.voice, speed: audioStore.speed, theme: currentTheme, fontFamily: currentFontFamily, fontSize: currentFontSize, locale })
+											}).catch(() => {});
+											const { setLocale } = await import('$lib/paraglide/runtime.js');
+											setLocale(locale as any, { reload: true });
+										}}
+										class="w-full text-left px-3 py-1.5 text-xs font-mono transition-colors {getLocale() === locale ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3)'}"
+									>
+										{locale.toUpperCase()}
+									</button>
+								{/each}
+							</div>
+						{/if}
 					</div>
 
-					<!-- Desktop: admin + profile + sign out (hidden on mobile) -->
+					<!-- User menu dropdown (desktop) -->
-				{#if data.user?.role === 'admin'}
+					<div class="hidden sm:block relative">
-					<a
+						<button
-						href="/admin/scrape"
+							type="button"
-						class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin') ? 'text-(--color-text) font-medium' : 'text-(--color-muted) hover:text-(--color-text)'}"
+							onclick={() => { userMenuOpen = !userMenuOpen; langMenuOpen = false; }}
-					>
+							class="flex items-center gap-1.5 pl-1.5 pr-2 py-1 rounded transition-colors {userMenuOpen ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)'}"
-						{m.nav_admin()}
+						>
-					</a>
+							<span class="w-6 h-6 rounded-full bg-(--color-brand)/20 text-(--color-brand) text-xs font-bold flex items-center justify-center shrink-0">
-				{/if}
+								{data.user.username[0].toUpperCase()}
-					<a
+							</span>
-						href="/profile"
+							<svg class="w-3 h-3 text-(--color-muted) transition-transform {userMenuOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						class="hidden sm:block text-sm transition-colors {page.url.pathname === '/profile' ? 'text-(--color-text) font-medium' : 'text-(--color-muted) hover:text-(--color-text)'}"
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-					>
+							</svg>
-						{data.user.username}
+						</button>
-					</a>
+						{#if userMenuOpen}
-					<form method="POST" action="/logout" class="hidden sm:block">
+							<div class="absolute right-0 top-full mt-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl py-1 z-50 min-w-[170px]">
-						<Button type="submit" variant="ghost" size="sm" class="text-(--color-muted) hover:text-(--color-text)">
+								<a
-							{m.nav_sign_out()}
+									href="/profile"
-						</Button>
+									onclick={() => { userMenuOpen = false; }}
-					</form>
+									class="flex items-center justify-between gap-2 px-3 py-2 text-sm transition-colors {page.url.pathname === '/profile' ? 'text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3)'}"
+								>
+									{m.nav_profile()}
+									<span class="text-xs opacity-40 truncate max-w-[80px]">{data.user.username}</span>
+								</a>
+								{#if data.user?.role === 'admin'}
+									<a
+										href="/admin/scrape"
+										onclick={() => { userMenuOpen = false; }}
+										class="flex items-center gap-2 px-3 py-2 text-sm transition-colors {page.url.pathname.startsWith('/admin') ? 'text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3)'}"
+									>
+										{m.nav_admin_panel()}
+									</a>
+								{/if}
+								<div class="my-1 border-t border-(--color-border)/60"></div>
+								<form method="POST" action="/logout">
+									<button type="submit" class="w-full text-left px-3 py-2 text-sm text-(--color-danger) hover:bg-(--color-surface-3) transition-colors">
+										{m.nav_sign_out()}
+									</button>
+								</form>
+							</div>
+						{/if}
+					</div>
 
 					<!-- Mobile: hamburger button -->
 					<Button
@@ -369,18 +419,25 @@
 						class="sm:hidden -mr-1"
 					>
 						{#if menuOpen}
-							<!-- X icon -->
 							<svg class="w-5 h-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>
 						{:else}
-							<!-- Hamburger icon -->
 							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 							</svg>
 						{/if}
 					</Button>
 				</div>
+
+				<!-- Click-outside overlay for dropdowns -->
+				{#if langMenuOpen || userMenuOpen}
+					<div
+						class="fixed inset-0 z-40"
+						onpointerdown={() => { langMenuOpen = false; userMenuOpen = false; }}
+						aria-hidden="true"
+					></div>
+				{/if}
 			{:else}
 				<div class="ml-auto">
 					<a
@@ -437,6 +494,48 @@
 					{m.nav_admin_panel()}
 				</a>
 			{/if}
+			<!-- Theme switcher -->
+			<div class="my-1 border-t border-(--color-border)/60"></div>
+			<div class="px-3 py-2.5 flex items-center justify-between">
+				<span class="text-xs text-(--color-muted) uppercase tracking-widest">{m.profile_theme_label()}</span>
+				<div class="flex items-center gap-2">
+					{#each THEMES as t}
+						<button
+							type="button"
+							onclick={() => { currentTheme = t.id; }}
+							title={t.id}
+							class="w-5 h-5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : 'border-transparent opacity-50 hover:opacity-100'}"
+							style="background: {t.color};"
+						></button>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Language switcher -->
+			<div class="px-3 py-2.5 flex items-center justify-between">
+				<span class="text-xs text-(--color-muted) uppercase tracking-widest">{m.locale_switcher_label()}</span>
+				<div class="flex items-center gap-0.5">
+					{#each locales as locale}
+						<button
+							type="button"
+							onclick={async () => {
+								menuOpen = false;
+								await fetch('/api/settings', {
+									method: 'PUT',
+									headers: { 'Content-Type': 'application/json' },
+									body: JSON.stringify({ autoNext: audioStore.autoNext, voice: audioStore.voice, speed: audioStore.speed, theme: currentTheme, fontFamily: currentFontFamily, fontSize: currentFontSize, locale })
+								}).catch(() => {});
+								const { setLocale } = await import('$lib/paraglide/runtime.js');
+								setLocale(locale as any, { reload: true });
+							}}
+							class="px-1.5 py-0.5 rounded text-xs font-mono transition-colors {getLocale() === locale ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text)'}"
+						>
+							{locale.toUpperCase()}
+						</button>
+					{/each}
+				</div>
+			</div>
+
 			<div class="my-1 border-t border-(--color-border)/60"></div>
 			<form method="POST" action="/logout">
 				<Button
@@ -487,28 +586,6 @@
 							d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
 					</svg>
 				</a>
-		<!-- Locale switcher (footer) -->
-			<div class="hidden sm:flex items-center gap-1 ml-2">
-				{#each locales as locale}
-					<button
-						type="button"
-						onclick={async () => {
-							await fetch('/api/settings', {
-								method: 'PUT',
-								headers: { 'Content-Type': 'application/json' },
-								body: JSON.stringify({ autoNext: audioStore.autoNext, voice: audioStore.voice, speed: audioStore.speed, theme: currentTheme, fontFamily: currentFontFamily, fontSize: currentFontSize, locale })
-							}).catch(() => {});
-							const { setLocale } = await import('$lib/paraglide/runtime.js');
-							setLocale(locale as any, { reload: true });
-						}}
-						class="px-1.5 py-0.5 rounded text-xs font-mono transition-colors {getLocale() === locale ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text)'}"
-						aria-label="{m.locale_switcher_label()}: {locale}"
-					>
-						{locale.toUpperCase()}
-					</button>
-				{/each}
-			</div>
-
 		</nav>
 		<!-- Bottom row: legal links + copyright -->
 		<div class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-(--color-muted)">