Skip to content

R8a: unify canvas chrome spacing, give the minimap real colors, hide the token counter by default - #165

Merged
dovvnloading merged 1 commit into
mainfrom
r8a/canvas-chrome-polish
Jul 28, 2026
Merged

R8a: unify canvas chrome spacing, give the minimap real colors, hide the token counter by default#165
dovvnloading merged 1 commit into
mainfrom
r8a/canvas-chrome-polish

Conversation

@dovvnloading

Copy link
Copy Markdown
Owner

Problem

Three related issues with the floating chrome around the canvas:

  1. Pins/search/view-popover/plugin-picker were anchored at an inconsistent 8px edge inset, the token counter/notification used 16px, and the minimap used React Flow's own baked-in 15px Panel margin - three near-identical values with no stated relationship, none of them tied to this app's own design system.
  2. The minimap rendered every node as React Flow's own default plain rectangle - flat, undifferentiated boxes with no relationship to the actual canvas content ("just white boxes").
  3. The token counter overlay defaulted to visible, with no easy way to discover it's actually a real, toggleable setting.

Change

  • Spacing: added one canonical --gl-chrome-inset (16px) token, the same pattern already used for the z-index scale. Every corner/edge-anchored chrome element (pins, search, view popover, plugin picker, token counter, notification, minimap) now uses it. Also fixed a stale comment on the z-index scale (claimed pins used the canvas-chrome tier; the real code has used the app-layer tier for a while) and removed .scene-pins, a fully dead CSS block from a pre-Popover-refactor pins implementation with zero remaining JSX references.
  • Minimap: now passes real nodeColor/nodeStrokeColor to React Flow's <MiniMap>. note/frame/container nodes show their actual assigned color (the same palette the color picker writes); every other kind gets one deliberate neutral tone instead of the flat default; the currently selected node is highlighted. Colors are read from the real design tokens at render time, not hardcoded hex.
  • Token counter default: now off by default (fresh installs and any settings file missing the key). The toggle itself was already fully real and working (persisted setting, wired Settings checkbox) - this only flips which state a new user starts in. Existing users who already have it explicitly enabled are unaffected.

Test plan

  • Backend: 995 passed, including updated coverage for the new default and a real state-transition test for the setter
  • Frontend: tsc --noEmit clean, lint 0 errors, 794 tests passed, build succeeds
  • Verified live against the real, running app: all chrome layers report a consistent 16px inset via computed styles; the minimap's real rendered SVG nodes show the new neutral fill/stroke colors (confirmed on a loaded chat with 13 real nodes); confirmed via an isolated script that both a fresh install and a pre-existing settings file missing the key now default show_token_counter to False, while the real user's already-explicit true value in their existing session.dat is correctly left untouched

…the token counter by default

Three related polish fixes to the floating chrome around the canvas:

- One canonical edge inset (--gl-chrome-inset, 16px) for every piece of
  canvas chrome - pins/search/view-popover/plugin-picker were anchored at
  an inconsistent 8px while the token counter/notification used 16px, and
  the minimap used React Flow's own baked-in 15px Panel margin, entirely
  outside this app's spacing system. All of it now shares one value, the
  same way the z-index scale already gave stacking order one source of
  truth. Also fixed a stale comment on that z-index scale (claimed pins
  used the canvas-chrome tier; the real code has used the app-layer tier
  for a while) and removed .scene-pins, a fully dead CSS block left over
  from a pre-Popover-refactor pins implementation with zero remaining JSX
  references.

- The minimap rendered every node as React Flow's own default plain
  rectangle - flat, undifferentiated boxes with no relationship to what's
  actually on the canvas. It now reflects real color: note/frame/container
  nodes show their actual assigned color (the same palette the color
  picker writes), every other kind gets one deliberate neutral tone
  instead of the default, and the currently selected node is highlighted.
  Colors are read from the real design tokens at render time, not
  hardcoded hex.

- The token counter overlay is now off by default (fresh installs and any
  settings file missing the key) rather than on - it was already a fully
  real, working, persisted setting with a wired Settings checkbox; this
  only flips which state is the starting one. Existing users who already
  have it explicitly enabled are unaffected.
@dovvnloading
dovvnloading merged commit ca411a8 into main Jul 28, 2026
2 checks passed
@dovvnloading
dovvnloading deleted the r8a/canvas-chrome-polish branch July 28, 2026 19:08
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