✨ feat(playground): add resizable panels and editor enhancements#1468
Merged
✨ feat(playground): add resizable panels and editor enhancements#1468
Conversation
Owner
harehare
commented
Mar 18, 2026
harehare
commented
- Add ResizeHandle component for draggable sidebar, left-right, and top-bottom panel splits with localStorage persistence
- Add minimap and word wrap toggles in footer with state persistence
- Add cursor position display (Ln/Col) in footer
- Add file search in FileTree with forceExpand for search results
- Add context menu separator support and viewport-aware positioning
- Add "Open" and "Copy Path" items to file context menu
- Update file-tree-panel layout from CSS resize to flex-based resizing
- Add ResizeHandle component for draggable sidebar, left-right, and top-bottom panel splits with localStorage persistence - Add minimap and word wrap toggles in footer with state persistence - Add cursor position display (Ln/Col) in footer - Add file search in FileTree with forceExpand for search results - Add context menu separator support and viewport-aware positioning - Add "Open" and "Copy Path" items to file context menu - Update file-tree-panel layout from CSS resize to flex-based resizing
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the mq-playground UI/UX by adding draggable resizing for major panel splits, persisting those UI preferences, and improving file navigation and context menu behavior.
Changes:
- Added a reusable
ResizeHandlecomponent and migrated panel sizing from CSS resize to flex + drag handles with localStorage persistence. - Enhanced the editor/footer with minimap + word-wrap toggles (persisted) and a cursor position (Ln/Col) display.
- Improved the file tree with search (auto-expanding results) and expanded context menu capabilities (separators, viewport clamping, new items).
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mq-playground/src/index.css | Updates layout styles to support flex-based resizing and adds footer control styling. |
| packages/mq-playground/src/components/ResizeHandle.tsx | Introduces a drag handle component for horizontal/vertical resizing. |
| packages/mq-playground/src/components/ResizeHandle.css | Visual/interaction styling for resize handles. |
| packages/mq-playground/src/components/FileTree.tsx | Adds file search, force-expand behavior, and new context menu items (Open/Copy Path + separators). |
| packages/mq-playground/src/components/FileTree.css | Styles the new search UI in the file tree. |
| packages/mq-playground/src/components/ContextMenu.tsx | Adds separator support and clamps menu position to the viewport. |
| packages/mq-playground/src/components/ContextMenu.css | Styles context menu separators. |
| packages/mq-playground/src/Playground.tsx | Wires up resizing + persistence, editor toggles (minimap/word wrap), and cursor position display. |
Co-authored-by: Copilot Autofix powered by AI <[email protected]>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds UI/UX improvements to the mq playground editor layout, including draggable split panes, persistent editor toggles, and richer file-tree interactions.
Changes:
- Introduces a reusable
ResizeHandlecomponent and migrates panels to flex-based resizing with localStorage persistence. - Enhances the editor footer with cursor position plus minimap/word-wrap toggles (persisted).
- Improves the file tree with search + forced expansion for results, and extends context menu behavior (separators + viewport clamping, new items).
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mq-playground/src/index.css | Updates layout styles to support flex-based panels and new footer UI elements. |
| packages/mq-playground/src/components/ResizeHandle.tsx | Adds draggable + keyboard-operable resize handle component. |
| packages/mq-playground/src/components/ResizeHandle.css | Styles resize handles for horizontal/vertical splitting. |
| packages/mq-playground/src/components/FileTree.tsx | Adds file search UI/logic and extends context menu items (Open/Copy Path) with separator support. |
| packages/mq-playground/src/components/FileTree.css | Styles the new file-tree search row and controls. |
| packages/mq-playground/src/components/ContextMenu.tsx | Adds separator rendering and clamps menu position to viewport bounds. |
| packages/mq-playground/src/components/ContextMenu.css | Adds styling for context menu separators. |
| packages/mq-playground/src/Playground.tsx | Wires up split pane sizing + persistence, editor option toggles, cursor position display, and replaces CSS resize with ResizeHandle. |
Co-authored-by: Copilot Autofix powered by AI <[email protected]>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the mq playground UI with resizable split panels, editor UX toggles (minimap/word wrap), cursor position display, improved file-tree search, and richer context menus.
Changes:
- Introduces a reusable
ResizeHandlecomponent and migrates the file-tree panel from CSSresizeto flex-based resizing with persisted sizes. - Adds file search to the
FileTreewith forced expansion of matching results, plus new file context-menu actions (Open / Copy Path) and separators. - Improves editor/footer UX with minimap + word wrap toggles and a live Ln/Col cursor position indicator.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mq-playground/src/index.css | Footer button styling; flex-based file tree panel; editor container sizing changes to support split panels. |
| packages/mq-playground/src/components/ResizeHandle.tsx | New draggable/keyboard-accessible resize handle component. |
| packages/mq-playground/src/components/ResizeHandle.css | Visual styling/cursors for resize handles. |
| packages/mq-playground/src/components/FileTree.tsx | Adds search/filtering + forceExpand behavior; adds context menu items (Open/Copy Path) and separators. |
| packages/mq-playground/src/components/FileTree.css | Styles the new search input/clear button row. |
| packages/mq-playground/src/components/ContextMenu.tsx | Adds separator support and clamps menu position to viewport. |
| packages/mq-playground/src/components/ContextMenu.css | Adds separator styling. |
| packages/mq-playground/src/Playground.tsx | Wires up persisted splits/sidebar sizing; adds minimap/word wrap toggles and cursor position display. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the mq-playground UI/UX by replacing CSS-based resizing with draggable resize handles, adding editor/view toggles with persistence, and improving file-tree navigation and context menus.
Changes:
- Add draggable
ResizeHandlecomponent and switch playground layout to flex-based resizable panels with localStorage persistence. - Enhance editor footer (minimap, word wrap toggles, cursor position display) and persist related settings.
- Improve file tree with search + forced expansion of results and richer context menu (separators, viewport-aware positioning, Open/Copy Path).
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mq-playground/src/index.css | Adds footer button/cursor styles and updates panel containers for flex-based resizing. |
| packages/mq-playground/src/components/ResizeHandle.tsx | New keyboard/mouse draggable resize handle component. |
| packages/mq-playground/src/components/ResizeHandle.css | Styling for horizontal/vertical resize handles. |
| packages/mq-playground/src/components/FileTree.tsx | Adds search filtering/force expand and expands file context menu actions. |
| packages/mq-playground/src/components/FileTree.css | Styles the new file search UI. |
| packages/mq-playground/src/components/ContextMenu.tsx | Adds separator support and clamps menu position to viewport. |
| packages/mq-playground/src/components/ContextMenu.css | Adds separator styling. |
| packages/mq-playground/src/Playground.tsx | Wires up resizable panels, persisted UI toggles, cursor position tracking, and tab auto-save on switch. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.