agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(settings): copy monolith's working theme dropdown pattern exactly

Browse source
This commit is contained in:
Hibryda 2026-03-17 06:30:09 +01:00
parent c094983814
commit 1ac6b69311
1 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/lib/settings/categories/AppearanceSettings.svelte
View file

@ -40,7 +40,7 @@
let uiFontOpen = $state(false);
let termFontOpen = $state(false);
let themeGroups = $derived(() => {
let themeGroups = $derived.by(() => {
const map = new Map<string, typeof THEME_LIST>();
for (const t of THEME_LIST) {
if (!map.has(t.group)) map.set(t.group, []);
@ -115,17 +115,28 @@
<h3>Theme</h3>
<div class="field" id="setting-theme">
<div class="custom-dropdown">
<button class="dropdown-btn" onclick={() => { uiFontOpen = false; termFontOpen = false; themeOpen = !themeOpen; }}>
<span class="theme-dots">{@html (() => { const p = getPalette(selectedTheme); return [p.red, p.green, p.blue, p.yellow].map(c => `<span style="background:${c}" class="dot"></span>`).join(''); })()}</span>
<button class="dropdown-btn" onclick={() => { uiFontOpen = false; termFontOpen = false; themeOpen = !themeOpen; }}
aria-haspopup="listbox" aria-expanded={themeOpen}>
<span class="theme-colors">
<span class="color-dot" style="background: {getPalette(selectedTheme).red};"></span>
<span class="color-dot" style="background: {getPalette(selectedTheme).green};"></span>
<span class="color-dot" style="background: {getPalette(selectedTheme).blue};"></span>
<span class="color-dot" style="background: {getPalette(selectedTheme).yellow};"></span>
</span>
{themeLabel}
</button>
{#if themeOpen}
<div class="dropdown-menu theme-menu">
{#each themeGroups() as [group, themes]}
<div class="dropdown-menu theme-menu" role="listbox">
{#each themeGroups as [group, themes]}
<div class="group-label">{group}</div>
{#each themes as t}
<button class="dropdown-item" class:active={t.id === selectedTheme} onclick={() => pickTheme(t.id)}>
<span class="theme-dots">{@html [t.palette.red, t.palette.green, t.palette.blue, t.palette.yellow].map(c => `<span style="background:${c}" class="dot"></span>`).join('')}</span>
<span class="theme-colors">
<span class="color-dot" style="background: {getPalette(t.id).red};"></span>
<span class="color-dot" style="background: {getPalette(t.id).green};"></span>
<span class="color-dot" style="background: {getPalette(t.id).blue};"></span>
<span class="color-dot" style="background: {getPalette(t.id).yellow};"></span>
</span>
{t.label}
</button>
{/each}
@ -137,7 +148,7 @@
<h3>UI Font</h3>
<div class="field row" id="setting-ui-font">
<div class="dropdown flex1">
<div class="custom-dropdown flex1">
<button class="dropdown-btn" onclick={() => { themeOpen = false; termFontOpen = false; uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
{#if uiFontOpen}
<div class="dropdown-menu">
@ -156,7 +167,7 @@
<h3>Terminal Font</h3>
<div class="field row" id="setting-term-font">
<div class="dropdown flex1">
<div class="custom-dropdown flex1">
<button class="dropdown-btn" onclick={() => { themeOpen = false; uiFontOpen = false; termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
{#if termFontOpen}
<div class="dropdown-menu">
@ -209,8 +220,8 @@
.dropdown-item:hover { background: var(--ctp-surface0); }
.dropdown-item.active { color: var(--ctp-blue); }
.group-label { padding: 0.25rem 0.625rem; font-size: 0.6875rem; color: var(--ctp-overlay0); font-weight: 600; text-transform: uppercase; }
.dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.theme-dots { display: flex; gap: 0.1875rem; }
.color-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.theme-colors { display: flex; gap: 0.1875rem; }
.stepper { display: flex; align-items: center; gap: 0.25rem; }
.stepper button { width: 1.5rem; height: 1.5rem; background: var(--ctp-surface0); border: none; border-radius: 0.1875rem; color: var(--ctp-text); cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; }
.stepper button:hover { background: var(--ctp-surface1); }