From aca649039ca3f912001adb19e05844f95c15cc47 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Tue, 31 Mar 2026 00:20:06 +0500
Subject: [PATCH] feat(ui): replace theme dots with dropdown, remove chevrons
 from lang and profile buttons

---
 ui/src/routes/+layout.svelte | 102 +++++++++++++++++++----------------
 1 file changed, 57 insertions(+), 45 deletions(-)

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index f00587f..4de6647 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -20,6 +20,7 @@
 	// Desktop dropdown menus
 	let userMenuOpen = $state(false);
 	let langMenuOpen = $state(false);
+	let themeMenuOpen = $state(false);
 
 	const THEMES = [
 		{ id: 'amber',       color: '#f59e0b' },
@@ -316,38 +317,52 @@
 				{m.nav_feedback()}
 			</a>
 
-				<div class="ml-auto flex items-center gap-2">
-					<!-- Theme dots (desktop) -->
-					<div class="hidden sm:flex items-center gap-1 mr-1">
-						{#each THEMES as t, i}
-							{#if i === 3}
-								<span class="w-px h-3 bg-(--color-border) mx-0.5"></span>
-							{/if}
-							<button
-								type="button"
-								onclick={() => { currentTheme = t.id; }}
-								title={t.id}
-								class="w-3.5 h-3.5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : t.light ? 'border-(--color-border) opacity-70 hover:opacity-100' : 'border-transparent opacity-50 hover:opacity-100'}"
-								style="background: {t.color};"
-							></button>
-						{/each}
-					</div>
+			<div class="ml-auto flex items-center gap-2">
+				<!-- Theme dropdown (desktop) -->
+				<div class="hidden sm:block relative">
+					<button
+						type="button"
+						onclick={() => { themeMenuOpen = !themeMenuOpen; langMenuOpen = false; userMenuOpen = false; }}
+						title="Theme"
+						class="flex items-center justify-center w-7 h-7 rounded transition-colors {themeMenuOpen ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)'}"
+					>
+						<span
+							class="w-3.5 h-3.5 rounded-full border-2 border-(--color-text) shrink-0"
+							style="background: {THEMES.find(t => t.id === currentTheme)?.color ?? '#f59e0b'};"
+						></span>
+					</button>
+					{#if themeMenuOpen}
+						<div class="absolute right-0 top-full mt-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl py-2 px-2.5 z-50">
+							<div class="flex items-center gap-1.5">
+								{#each THEMES as t, i}
+									{#if i === 3}
+										<span class="w-px h-3 bg-(--color-border) mx-0.5"></span>
+									{/if}
+									<button
+										type="button"
+										onclick={() => { currentTheme = t.id; themeMenuOpen = false; }}
+										title={t.id}
+										class="w-4 h-4 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : t.light ? 'border-(--color-border) opacity-70 hover:opacity-100' : 'border-transparent opacity-50 hover:opacity-100'}"
+										style="background: {t.color};"
+									></button>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				</div>
 
-					<!-- Language dropdown (desktop) -->
-					<div class="hidden sm:block relative">
-						<button
-							type="button"
-							onclick={() => { langMenuOpen = !langMenuOpen; userMenuOpen = false; }}
-							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)'}"
-						>
-							<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<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"/>
-							</svg>
-							{getLocale().toUpperCase()}
-							<svg class="w-3 h-3 shrink-0 transition-transform {langMenuOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-							</svg>
-						</button>
+				<!-- Language dropdown (desktop) -->
+				<div class="hidden sm:block relative">
+					<button
+						type="button"
+						onclick={() => { langMenuOpen = !langMenuOpen; userMenuOpen = false; themeMenuOpen = false; }}
+						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)'}"
+					>
+						<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<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"/>
+						</svg>
+						{getLocale().toUpperCase()}
+					</button>
 						{#if langMenuOpen}
 							<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]">
 								{#each locales as locale}
@@ -372,20 +387,17 @@
 						{/if}
 					</div>
 
-					<!-- User menu dropdown (desktop) -->
-					<div class="hidden sm:block relative">
-						<button
-							type="button"
-							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)'}"
-						>
-							<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">
-								{data.user.username[0].toUpperCase()}
-							</span>
-							<svg class="w-3 h-3 text-(--color-muted) transition-transform {userMenuOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-							</svg>
-						</button>
+				<!-- User menu dropdown (desktop) -->
+				<div class="hidden sm:block relative">
+					<button
+						type="button"
+						onclick={() => { userMenuOpen = !userMenuOpen; langMenuOpen = false; themeMenuOpen = false; }}
+						class="flex items-center gap-1.5 pl-1.5 pr-1.5 py-1 rounded transition-colors {userMenuOpen ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)'}"
+					>
+						<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">
+							{data.user.username[0].toUpperCase()}
+						</span>
+					</button>
 						{#if userMenuOpen}
 							<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]">
 								<a