Skip to content

Editor mode switch and full-screen dashboard (0.12.0) - #12

Merged
dankor merged 1 commit into
mainfrom
toolbar-refinement
Aug 25, 2026
Merged

dankor merged 1 commit into
mainfrom
toolbar-refinement

Conversation

@dankor

@dankor dankor commented Aug 25, 2026

Copy link
Copy Markdown
Owner

The editor is one segmented control instead of a row of toggles: six icon segments — view / edit / code / chat / calcs / docs — at the left of the topbar, before the dashboard name, exactly one active, so the lit icon always says what the screen is showing. It replaces the Preview button and the three panel toggles.

The dashboard is full width by default. The two-column split with its draggable divider is gone; view is where you land and the dashboard has the window to itself. edit keeps it full width and switches on the on-canvas affordances — drag-to-resize, chart toolbars, add buttons — so nothing covers what you are rearranging. The server already rendered the editor chrome and the client hid it with CSS, so a mode change is a class on .layout and costs no re-render.

The other four modes open a panel beside the dashboard, never over it, because every one of them is used while looking at it. That split is draggable and the width is remembered in localStorage — how much room you want for YAML is a property of you, not of a dashboard you share — clamped so neither pane can be dragged away, and stored on release rather than on every mousemove.

Chrome removed: no close buttons on panels (the switch is the only way in or out, Esc as a shortcut) and no panel headers. Every button in the calcs manager is an icon, as are the filter builder's add/remove that the chart edit modal shares. The pencil lost its underline stroke so every pencil in the product matches, and the assistant's speech bubble became a robot.

Three bugs found on the way, all mine and all caught in the browser rather than by the suite:

  • Leaving code mode left its column behind: setMode removed the mode classes from a hand-written list that code was never added to, so the grid survived and the dashboard stayed pinned beside an empty column. The list is derived from MODES now, and the split is keyed off one panel-open class rather than per-mode rules, so neither can drift again.
  • The panels were nested inside the output pane, where grid-area cannot place them — the split silently did nothing and the YAML rendered below the dashboard. They are direct children of .layout now. The test that missed this read the CSS; the replacement parses the DOM, which is the only thing that can catch a structural mismatch.
  • syncNameFromYaml ran only from the textarea's input event, which setting .value never fires, so renaming through chat left the old name in the topbar. run() refreshes it alongside Save state now.

Minor bump: editor UI only, no change to the dashboard format or the API.

539 tests pass.

The editor is one segmented control instead of a row of toggles: six icon
segments — view / edit / code / chat / calcs / docs — at the left of the topbar,
before the dashboard name, exactly one active, so the lit icon always says what
the screen is showing. It replaces the Preview button and the three panel
toggles.

The dashboard is full width by default. The two-column split with its draggable
divider is gone; `view` is where you land and the dashboard has the window to
itself. `edit` keeps it full width and switches on the on-canvas affordances —
drag-to-resize, chart toolbars, add buttons — so nothing covers what you are
rearranging. The server already rendered the editor chrome and the client hid it
with CSS, so a mode change is a class on `.layout` and costs no re-render.

The other four modes open a panel *beside* the dashboard, never over it, because
every one of them is used while looking at it. That split is draggable and the
width is remembered in localStorage — how much room you want for YAML is a
property of you, not of a dashboard you share — clamped so neither pane can be
dragged away, and stored on release rather than on every mousemove.

Chrome removed: no close buttons on panels (the switch is the only way in or
out, Esc as a shortcut) and no panel headers. Every button in the calcs manager
is an icon, as are the filter builder's add/remove that the chart edit modal
shares. The pencil lost its underline stroke so every pencil in the product
matches, and the assistant's speech bubble became a robot.

Three bugs found on the way, all mine and all caught in the browser rather than
by the suite:

- Leaving `code` mode left its column behind: `setMode` removed the mode classes
  from a hand-written list that `code` was never added to, so the grid survived
  and the dashboard stayed pinned beside an empty column. The list is derived
  from MODES now, and the split is keyed off one `panel-open` class rather than
  per-mode rules, so neither can drift again.
- The panels were nested inside the output pane, where `grid-area` cannot place
  them — the split silently did nothing and the YAML rendered below the
  dashboard. They are direct children of `.layout` now. The test that missed
  this read the CSS; the replacement parses the DOM, which is the only thing
  that can catch a structural mismatch.
- `syncNameFromYaml` ran only from the textarea's `input` event, which setting
  `.value` never fires, so renaming through chat left the old name in the
  topbar. `run()` refreshes it alongside Save state now.

Minor bump: editor UI only, no change to the dashboard format or the API.

539 tests pass.
@dankor
dankor merged commit 0d5062c into main Aug 25, 2026
2 checks passed
@dankor
dankor deleted the toolbar-refinement branch August 25, 2026 06:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant