Skip to content

feat(ui): createControlRail, the header's controls as a vertical rail - #45

Merged
joeblau merged 1 commit into
mainfrom
feat/control-rail
Sep 30, 2026
Merged

joeblau merged 1 commit into
mainfrom
feat/control-rail

Conversation

@joeblau

@joeblau joeblau commented Sep 30, 2026

Copy link
Copy Markdown
Contributor

Why

bloxwap.pro shows a top header bar, but the playground has a left control rail. That rail was ~120 lines of playground-only code, so the library only offered createChartHeader and apps could not use the rail.

What

  • createControlRail in @bloxwap/chart/ui: the header's controls stacked in a 52px rail beside the drawing toolbar.
    • Contents: timeframe menu, chart-type menu, Indicators, and the Auto / % / Log toggles, plus slots.top (scrolls with the controls) and slots.bottom (pinned footer).
    • It takes the same options, datafeed-as-source-of-truth rules and handle as createChartHeader. slots are exposed as live containers, so hosts can move buttons between the rail and a header.
    • Menus open to the right on click or mouse hover, like the drawing rail's, and use the header's keyboard handling.
  • Shared dropdowns. The header's keyboard dropdown and radio entries moved into menu-controls.ts, so the header and the rail share one implementation. The header's behavior is unchanged.
  • Styles. The rail's styles now ship in TOOLBAR_CSS, so the playground's rail-only CSS is gone.
  • Playground. It now builds its rail with createControlRail. One small change: the right-edge panel button now sits below Log, in the top slot, instead of after Indicators.
  • Docs. The header guide has a Control rail section, and the exports table, READMEs and llms.txt are updated.

Testing

  • node scripts/check-coverage.mjs: all 1869 tests pass, with 100% line, branch and function coverage (new files control-rail.js and menu-controls.js included).
  • npm run docs:check passes.
  • Playground checked in Chrome:
    • The wide layout matches the previous rail.
    • The timeframe menu opens to the right, and picking 1h reloads 500 1h bars; the header follows.
    • Under 600px the rail hides and the host buttons move into the header, then return to the rail slots when widened.
    • No console errors.

Follow-up

Release 0.3.0, then switch workers/pro/src/components/chart/bloxwap-chart.tsx from createChartHeader to createControlRail.

🤖 Generated with Claude Code

The left control rail in the playground was ~120 lines of app code, so
hosts such as bloxwap.pro could only get the top header bar.

- createControlRail (@bloxwap/chart/ui): timeframe and chart-type menus,
  Indicators, Auto / % / Log toggles, and top / bottom host slots in a
  52px rail beside the drawing toolbar. Same options, datafeed rules and
  handle as createChartHeader; menus open right with hover intent
- The header's keyboard dropdown and radio entries move to a shared
  menu-controls module, so both menus behave identically
- Rail styles (slots, scale toggles, footer) ship in TOOLBAR_CSS
- Playground builds its rail with createControlRail
- Docs: control rail section in the header guide, exports, READMEs, llms.txt

Co-Authored-By: Claude Opus 5.5 <[email protected]>
@joeblau
joeblau merged commit 9a847f1 into main Sep 30, 2026
3 checks passed
@joeblau
joeblau deleted the feat/control-rail branch September 30, 2026 14:49
@joeblau joeblau mentioned this pull request Sep 30, 2026
joeblau added a commit that referenced this pull request Sep 30, 2026
- Set @bloxwap/chart (and the workspace apps) to 0.3.0 for the control
  rail release (#45)
- Docs, README, llms.txt, OpenAPI and the site's structured data name
  0.3.0; llms.txt lists the vertical control rail in the UI layer

Co-authored-by: Claude Opus 5.5 <[email protected]>
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