Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(sys-bar): compact grouped select for theme picker

Browse Source 
- 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>
This commit is contained in:
Scott Idem
2026-06-16 19:07:03 -04:00
parent 7ce7a9b429
commit 3fc0a33044
1 changed files with 20 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -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}