JS Playground: File / Mode / View / Options / Help menu bar + Guided Tour right #136

New Issue

2026-05-13T15:51:35Z

spikerj commented

2026-05-13 15:51:35 +00:00

Goal

Replace the current clustered controls (Sandbox / Lessons, Beginner / Advanced, connection status, Run locally, Guided Tour, etc.) with a desktop-app-style menu bar: File, Mode, View, Options, Help. Keep Guided Tour visually separated and right-aligned (toolbar area), not buried inside Help.

Menu structure (UX)

File

Integrate the existing shared load/save (browser / device) component for playground scripts or relevant assets.
Standard expectations: open/import, save/export as supported by the shared component.

Mode

Sandbox vs Lessons
Beginner vs Advanced (current tier selection)
Ensure mode/state changes still sync correctly with editor + debugger (see lesson/sandbox stale-code issue).

View

Reset view — restore default layout (splitter sizes, possibly pane swap) and clear or reload layout from defaults.
Swap panes — triggers the layout swap described in the swap-panes ticket.

Options

House remaining toggles currently scattered in the header (e.g. Run locally, connected / connection affordances, feature flags) in a logical order; exact items TBD from product review.

Help

Link or host contextual help, docs, keyboard shortcuts, etc. Guided Tour remains pinned to the far right of the bar for discoverability.

Visual / UX notes

Menus should follow existing glass / Tesla-inspired styling per platform rules.
Mobile / narrow widths: collapse to a single overflow menu or icon row without losing access to File/Mode/View actions.

Acceptance criteria

File / Mode / View / Options / Help menus exist with the behaviors above.
Guided Tour stays right-aligned, always visible on desktop where space allows.
Load/save uses the shared browser/device component under File.
Mode menu covers sandbox/lessons and beginner/advanced.
View menu includes reset layout and swap panes.

## Goal Replace the current clustered controls (**Sandbox / Lessons**, **Beginner / Advanced**, connection status, **Run locally**, **Guided Tour**, etc.) with a **desktop-app-style menu bar**: **File**, **Mode**, **View**, **Options**, **Help**. Keep **Guided Tour** visually **separated and right-aligned** (toolbar area), not buried inside Help. ## Menu structure (UX) ### File - Integrate the existing **shared load/save (browser / device)** component for playground scripts or relevant assets. - Standard expectations: open/import, save/export as supported by the shared component. ### Mode - **Sandbox** vs **Lessons** - **Beginner** vs **Advanced** (current tier selection) - Ensure mode/state changes still sync correctly with editor + debugger (see lesson/sandbox stale-code issue). ### View - **Reset view** — restore default layout (splitter sizes, possibly pane swap) and clear or reload layout from defaults. - **Swap panes** — triggers the layout swap described in the swap-panes ticket. ### Options - House remaining toggles currently scattered in the header (e.g. **Run locally**, **connected** / connection affordances, feature flags) in a logical order; exact items TBD from product review. ### Help - Link or host contextual help, docs, keyboard shortcuts, etc. **Guided Tour** remains **pinned to the far right** of the bar for discoverability. ## Visual / UX notes - Menus should follow existing **glass / Tesla-inspired** styling per platform rules. - **Mobile / narrow widths**: collapse to a single overflow menu or icon row without losing access to File/Mode/View actions. ## Acceptance criteria - [ ] File / Mode / View / Options / Help menus exist with the behaviors above. - [ ] Guided Tour stays **right-aligned**, always visible on desktop where space allows. - [ ] Load/save uses the **shared browser/device** component under File. - [ ] Mode menu covers sandbox/lessons and beginner/advanced. - [ ] View menu includes reset layout and swap panes.

spikerj commented

2026-06-14 23:52:28 +00:00

Closing as superseded. The JavaScript playground was rebuilt on the shared LanguageRunner (libraries/platform/language-runner) + dev-tools-javascript-runner rather than the bespoke desktop-shell spec described here (File/Mode/View/Options/Help menu bar + Guided Tour panel). The shared shell now owns the file tree, editor, variables and console surfaces across all language playgrounds, so this playground-specific menu-bar/tour design no longer maps to the current architecture. If we still want a dedicated menu bar / guided tour, it should be re-scoped against the shared LanguageRunner as a new ticket.

Closing as **superseded**. The JavaScript playground was rebuilt on the shared `LanguageRunner` (`libraries/platform/language-runner`) + `dev-tools-javascript-runner` rather than the bespoke desktop-shell spec described here (File/Mode/View/Options/Help menu bar + Guided Tour panel). The shared shell now owns the file tree, editor, variables and console surfaces across all language playgrounds, so this playground-specific menu-bar/tour design no longer maps to the current architecture. If we still want a dedicated menu bar / guided tour, it should be re-scoped against the shared `LanguageRunner` as a new ticket.

spikerj closed this issue

2026-06-14 23:52:41 +00:00

spikerj referenced this issue

2026-07-06 15:16:39 +00:00

[Reliability][Go-live] Fix silent data loss — count-only ValueComparer & missing publisher confirms #410

spikerj referenced this issue

2026-07-06 15:28:49 +00:00

[Reliability][Go-live] Fix silent data loss — count-only ValueComparer & missing publisher confirms #410

spikerj referenced this issue

2026-07-21 20:14:51 +00:00

[Infra][MinIO] Final GridFS slices: vault-files + photograph-previews → MinIO sole store (completes epic #413's GridFS retirement) #778

Sign in to join this conversation.