feat(ui): replace theme dots with dropdown, remove chevrons from lang and profile buttons

Without a connection_policy, Caddy resolved the TLS cert by the Docker
internal IP (172.18.0.5) instead of the hostname, causing TLS handshake
failures on :6380 (rediss:// from prod backend → homelab Redis / Asynq).

Changes:
- Caddyfile: add connection_policy { match { sni redis.libnovel.cc } } to
  the layer4 :6380 tls handler so Caddy picks the correct cert
- Caddyfile: add redis.libnovel.cc virtual-host block (respond 404) to
  force Caddy to obtain and cache a TLS cert for that hostname
- homelab/docker-compose.yml: add REDIS_ADDR, REDIS_PASSWORD,
  LIBRETRANSLATE_URL, LIBRETRANSLATE_API_KEY, and
  RUNNER_MAX_CONCURRENT_TRANSLATION to the runner service for parity with
  homelab/runner/docker-compose.yml

Caddyfile

@@ -65,7 +65,13 @@
 		:6380 {
 			route {
 				tls {
-				proxy {
+					connection_policy {
+						match {
+							sni redis.libnovel.cc
+						}
+					}
+				}
+				proxy {
 					upstream {$HOMELAB_REDIS_ADDR:192.168.0.109:6379}
 				}
 			}
@@ -274,3 +280,12 @@ search.libnovel.cc {
 	reverse_proxy meilisearch:7700
 }
 
+# ── Redis TLS cert anchor ─────────────────────────────────────────────────────
+# This virtual host exists solely so Caddy obtains and caches a TLS certificate
+# for redis.libnovel.cc.  The layer4 block above uses that cert to terminate TLS
+# on :6380 (Asynq job-queue channel from prod → homelab Redis).
+# The HTTP route itself just returns 404 — no real traffic expected here.
+redis.libnovel.cc {
+	respond 404
+}
+}

homelab/docker-compose.yml

@@ -58,6 +58,14 @@ services:
       VALKEY_ADDR: ""
       GODEBUG: "preferIPv4=1"
 
+      # ── LibreTranslate (internal Docker network) ──────────────────────────
+      LIBRETRANSLATE_URL: "http://libretranslate:5000"
+      LIBRETRANSLATE_API_KEY: "${LIBRETRANSLATE_API_KEY}"
+
+      # ── Asynq / Redis ─────────────────────────────────────────────────────
+      REDIS_ADDR: "redis:6379"
+      REDIS_PASSWORD: "${REDIS_PASSWORD}"
+
       KOKORO_URL: "http://kokoro-fastapi:8880"
       KOKORO_VOICE: "${KOKORO_VOICE}"
 
@@ -67,6 +75,7 @@ services:
       RUNNER_POLL_INTERVAL: "${RUNNER_POLL_INTERVAL}"
       RUNNER_MAX_CONCURRENT_SCRAPE: "${RUNNER_MAX_CONCURRENT_SCRAPE}"
       RUNNER_MAX_CONCURRENT_AUDIO: "${RUNNER_MAX_CONCURRENT_AUDIO}"
+      RUNNER_MAX_CONCURRENT_TRANSLATION: "${RUNNER_MAX_CONCURRENT_TRANSLATION}"
       RUNNER_TIMEOUT: "${RUNNER_TIMEOUT}"
       RUNNER_METRICS_ADDR: "${RUNNER_METRICS_ADDR}"
       RUNNER_SKIP_INITIAL_CATALOGUE_REFRESH: "true"

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