spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

JS Playground: CDK resizable panes (files, editor, variables, console) + localStorage #134

New Issue
Closed
opened 2026-05-13 15:51:32 +00:00 by spikerj · 1 comment
spikerj commented 2026-05-13 15:51:32 +00:00
Owner
Copy Link
Copy Source

Goal

Improve the JavaScript Playground layout so users can size each major region (file list, editor, variables, console) to match their workflow, and remember those sizes across sessions.

UX / behavior

  • Use Angular CDK drag handles/sliders (or CDK drag-resize patterns) on the splitters between:
    • Files container
    • Main editor
    • Variables panel
    • Console
  • Dragging a handle updates sizes live with sensible min/max widths/heights so the UI never collapses unusably.
  • On release (or debounced while dragging), persist splitter positions to localStorage (scoped key per playground or app area).
  • On load, restore saved dimensions; if no saved state, use current default layout.
  • Optional: Reset layout item can clear saved keys (may be tied separately to View menu work).

Acceptance criteria

  • All listed regions are resizable via CDK-based splitters.
  • Sizes restore after refresh and revisiting the page (same browser profile).
  • Graceful fallback when localStorage is missing or corrupt.

Dependencies / notes

  • Coordinate with the menu bar ticket if Reset view should clear these stored values.
## Goal Improve the JavaScript Playground layout so users can **size each major region** (file list, editor, variables, console) to match their workflow, and **remember those sizes** across sessions. ## UX / behavior - Use **Angular CDK** drag handles/sliders (or CDK drag-resize patterns) on the **splitters** between: - Files container - Main editor - Variables panel - Console - Dragging a handle updates sizes **live** with sensible **min/max** widths/heights so the UI never collapses unusably. - On release (or debounced while dragging), persist splitter positions to **`localStorage`** (scoped key per playground or app area). - On load, **restore** saved dimensions; if no saved state, use current default layout. - Optional: **Reset layout** item can clear saved keys (may be tied separately to View menu work). ## Acceptance criteria - [ ] All listed regions are resizable via CDK-based splitters. - [ ] Sizes restore after refresh and revisiting the page (same browser profile). - [ ] Graceful fallback when `localStorage` is missing or corrupt. ## Dependencies / notes - Coordinate with the menu bar ticket if **Reset view** should clear these stored values.
spikerj commented 2026-06-14 23:52:30 +00:00
Author
Owner
Copy Link
Copy Source

Closing as superseded. The JavaScript playground was rebuilt on the shared LanguageRunner (libraries/platform/language-runner) + dev-tools-javascript-runner rather than the bespoke CDK-resizable-panes + localStorage layout described here. Pane layout is now owned by the shared shell across all language playgrounds, so this JS-specific CDK-resize/persist design no longer maps to the current architecture. If resizable panes with persistence are still wanted, they 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 CDK-resizable-panes + localStorage layout described here. Pane layout is now owned by the shared shell across all language playgrounds, so this JS-specific CDK-resize/persist design no longer maps to the current architecture. If resizable panes with persistence are still wanted, they should be re-scoped against the shared `LanguageRunner` as a new ticket.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#134