From 3fc0a330449f90087fef0afce5a99580f57f755f Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 16 Jun 2026 19:07:03 -0400
Subject: [PATCH] refactor(sys-bar): compact grouped select for theme picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace pill grid (too tall) with a single-row label + select
- Use <optgroup> to keep System / AE grouping without any extra height
- Prune unused Skeleton system themes: concord, crimson, hamlindigo,
  rocket, terminus, vintage removed (6 of 10 — never used in practice)
  Remaining: nouveau, cerberus, modern, wintry
- Added comment noting Firefly event-specific variants can be pruned
  when their events are no longer active

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/app_components/e_app_sys_bar.svelte | 65 +++++++--------------
 1 file changed, 20 insertions(+), 45 deletions(-)

diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index bcbcb02c..8f3b27ad 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -204,25 +204,20 @@ let access_label = $derived.by(() => {
     return map[t] ?? t;
 });
 
-// Theme picker groups — keep label lists in sync with e_app_url_builder.svelte
-// Skeleton system themes (first-party, no AE prefix)
+// Theme picker groups — keep in sync with e_app_url_builder.svelte
+// Pruned to themes that are actually used. Full Skeleton list had 10 entries;
+// concord/crimson/hamlindigo/rocket/terminus/vintage removed (never used).
 const skeleton_themes = [
     { value: 'nouveau', label: 'Nouveau' },
     { value: 'cerberus', label: 'Cerberus' },
-    { value: 'concord', label: 'Concord' },
-    { value: 'crimson', label: 'Crimson' },
-    { value: 'hamlindigo', label: 'Hamlindigo' },
     { value: 'modern', label: 'Modern' },
-    { value: 'rocket', label: 'Rocket' },
-    { value: 'terminus', label: 'Terminus' },
-    { value: 'vintage', label: 'Vintage' },
     { value: 'wintry', label: 'Wintry' },
 ];
-// AE custom themes
+// AE custom themes — Firefly variants are event-specific; prune when no longer needed.
 const ae_themes = [
     { value: 'AE_OSIT_default', label: 'OSIT' },
     { value: 'AE_Firefly', label: 'Firefly ✦' },
-    { value: 'AE_Firefly_SteelBlue', label: 'Steel ✦' },
+    { value: 'AE_Firefly_SteelBlue', label: 'Steel Blue ✦' },
     { value: 'AE_Firefly_Indigo', label: 'Indigo ✦' },
     { value: 'AE_Firefly_Rainbow', label: 'Rainbow ✨' },
     { value: 'AE_Firefly_Axonius', label: 'Axonius ✦' },
@@ -441,45 +436,25 @@ function apply_theme(value: string) {
                             </button>
                         </div>
 
-                        <!-- Theme picker: grouped pills -->
-                        <div class="space-y-2">
-                            <div class="text-xs font-medium text-gray-400 dark:text-gray-500">Theme</div>
-
-                            <!-- Skeleton system themes -->
-                            <div class="space-y-1">
-                                <div class="text-[10px] font-semibold uppercase tracking-wider text-gray-300 dark:text-gray-600">System</div>
-                                <div class="flex flex-wrap gap-1">
+                        <!-- Theme picker: compact grouped select -->
+                        <div class="flex items-center gap-2">
+                            <span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">Theme</span>
+                            <select
+                                bind:value={$ae_loc.theme_name}
+                                onchange={(e) => apply_theme((e.target as HTMLSelectElement).value)}
+                                class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                                title="Select theme (current: {$ae_loc.theme_name ?? 'default'})">
+                                <optgroup label="System">
                                     {#each skeleton_themes as opt (opt.value)}
-                                        <button
-                                            type="button"
-                                            onclick={() => apply_theme(opt.value)}
-                                            class="rounded-md px-2 py-0.5 text-xs transition-all
-                                                {$ae_loc.theme_name === opt.value
-                                                    ? 'bg-primary-500 text-white font-semibold shadow-sm'
-                                                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}">
-                                            {opt.label}
-                                        </button>
+                                        <option value={opt.value}>{opt.label}</option>
                                     {/each}
-                                </div>
-                            </div>
-
-                            <!-- AE custom themes -->
-                            <div class="space-y-1">
-                                <div class="text-[10px] font-semibold uppercase tracking-wider text-gray-300 dark:text-gray-600">AE</div>
-                                <div class="flex flex-wrap gap-1">
+                                </optgroup>
+                                <optgroup label="AE">
                                     {#each ae_themes as opt (opt.value)}
-                                        <button
-                                            type="button"
-                                            onclick={() => apply_theme(opt.value)}
-                                            class="rounded-md px-2 py-0.5 text-xs transition-all
-                                                {$ae_loc.theme_name === opt.value
-                                                    ? 'bg-primary-500 text-white font-semibold shadow-sm'
-                                                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}">
-                                            {opt.label}
-                                        </button>
+                                        <option value={opt.value}>{opt.label}</option>
                                     {/each}
-                                </div>
-                            </div>
+                                </optgroup>
+                            </select>
                         </div>
                     </div>
                 {/if}