meleki/gott
1
0 Fork 0
Code Activity

Replace mode toggle cycle with a dropdown menu

Browse Source 
The composite mode control (#planModeBtn) now opens a dropdown menu
instead of cycling, following the emoji-picker pattern: each mode is an
entry with icon + label + description, the active one marked with a
check. Direct jumps between modes are now possible, so selecting
plan/ultracode resets the persisted panel mode to avoid running both the
panel and the CLI worker. Unified the active button states.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
MelekiandClaude Opus 4.8 committed 2026-06-20 15:57:34 +02:00
1 parent d5854a3f4b
commit 5b1802efee
4 files changed
+205 -77
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wwwroot/css/chat.css
+67 -8
View File
@@ -439,23 +439,82 @@
/* Unified Modus-Toggle: Aus / Plan / Fusion / MoA (ein einziger #planModeBtn) */
#planModeBtn.plan-mode-active {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 15%, transparent);
border-radius: var(--border-radius);
background: color-mix(in srgb, var(--primary) 25%, transparent);
}
#planModeBtn.panel-mode-fusion {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 15%, transparent);
border-radius: var(--border-radius);
background: color-mix(in srgb, var(--primary) 25%, transparent);
}
#planModeBtn.panel-mode-moa {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 28%, transparent);
border-radius: var(--border-radius);
background: color-mix(in srgb, var(--primary) 25%, transparent);
}
#planModeBtn.ultracode-active {
color: var(--info);
background: color-mix(in srgb, var(--info) 18%, transparent);
color: var(--primary);
background: color-mix(in srgb, var(--primary) 25%, transparent);
}
/* Modus-Menü (Dropdown: Aus / Plan / Ultracode / Fusion / MoA) */
.composite-menu {
position: fixed;
z-index: 10000;
background: var(--f2-bg);
border: var(--border-width) solid var(--f2-border);
border-radius: var(--border-radius);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
min-width: 16em;
padding-block: calc(var(--badge-spacing) / 2);
}
.composite-menu-item {
display: flex;
align-items: center;
gap: var(--badge-spacing);
padding: var(--menu-item-padding);
background: none;
border: none;
border-radius: unset;
text-align: left;
white-space: nowrap;
cursor: pointer;
color: var(--text);
}
.composite-menu-item:hover {
background: var(--f3-bg);
border: none;
}
.composite-menu-item.active {
color: var(--primary);
}
.composite-menu-icon {
width: 1.3em;
text-align: center;
flex-shrink: 0;
}
.composite-menu-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.composite-menu-desc {
font-size: var(--font-size);
opacity: var(--semi-transparent);
}
.composite-menu-check {
margin-left: auto;
flex-shrink: 0;
color: var(--primary);
}
/* Emoji Picker */