feat(console): per-channel ⋯ settings popover; slim the Controls card - #39
Merged
Conversation
Move segment structure editing out of the Controls card into a per-channel popover opened by a ⋯ button on each tab: it shows the channel identity (CH N + effect), the Start/Length range editor, and Remove Channel. The Controls card is now purely the effect + its params. Range inputs and the remove button keep their element ids, so the existing range-commit / delete wiring is unchanged — the popover always targets the selected channel (⋯ selects it before opening). Backdrop/Esc close it. Note: segments still have no editable *name* (the tab's second line is the effect); real names would be a firmware feature — deferred. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR updates the console-euclid-live UI concept to move per-channel range/removal controls out of the main Controls card and into a per-channel ⋯ settings popover, keeping the Controls card focused on effect + params.
Changes:
- Add per-channel ⋯ control on each channel tab that opens a settings popover.
- Move Segment Range editor and Remove Channel button from the Controls card into the popover (keeping existing element ids).
- Add new CSS for the tab settings control and the popover panel layout.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| ui-concepts/console-euclid-live/styles.css | Adds styling for the per-channel ⋯ control and the settings popover panel. |
| ui-concepts/console-euclid-live/index.html | Moves range/remove UI into a new dialog-like popover with a backdrop. |
| ui-concepts/console-euclid-live/app.js | Wires the ⋯ click to select the channel and open/close the popover; closes popover after channel deletion. |
Comment on lines
263
to
+281
| const tab = document.createElement("button"); | ||
| tab.className = "strip-tab" + (seg.id === engine.state.selectedId ? " active" : ""); | ||
| tab.type = "button"; | ||
| tab.innerHTML = ` | ||
| <div class="tab-id"><span>CH ${seg.id + 1}</span><span>${seg.length}px</span></div> | ||
| <div class="tab-id"> | ||
| <span>CH ${seg.id + 1} · ${seg.length}px</span> | ||
| <span class="tab-cog" role="button" tabindex="-1" aria-label="Channel settings"> | ||
| <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg> | ||
| </span> | ||
| </div> | ||
| <div class="tab-name">${eff ? eff.name : seg.effect}</div> | ||
| <div class="tab-bar"><i style="background:${segSwatchCss(seg)}"></i></div> | ||
| `; | ||
| tab.addEventListener("click", () => engine.selectSegment(seg.id)); | ||
| tab.querySelector(".tab-cog").addEventListener("click", (e) => { | ||
| e.stopPropagation(); | ||
| engine.selectSegment(seg.id); | ||
| openSegPopover(seg.id); | ||
| }); |
|
|
||
| <!-- Per-channel settings popover (opened by the ⋯ on a tab) --> | ||
| <div class="popover-backdrop" id="segPopBackdrop"></div> | ||
| <div class="seg-popover" id="segPopover" role="dialog" aria-label="Channel settings"> |
The top rail is all flex-shrink:0, so on mobile the nav toggle overflowed off the right edge (SETTINGS clipped). Shed the decorative model number + divider below 620px, and tighten padding/gap + the wordmark tracking below 440px, so the wordmark and the toggle always fit. Desktop unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Small UX change (console skin, UI-only) — also a test of the atomic OTA path as v1.3.1.
What
Safe by construction
Deferred
🤖 Generated with Claude Code