Repository navigation
feat: resizable workbench & timeline panels (react-resizable-panels) - #31
Merged
Merged
Conversation
…le-panels - Replace the editor/console CSS grid and timeline rail/content grid with react-resizable-panels Group/Panel/Separator (v4 API) at the lg/md breakpoints; below those the stacked mobile layout is unchanged. - Persist each split ratio to localStorage via useDefaultLayout with an SSR-safe storage adapter, mirroring the progress.ts guard pattern. - Keep the workbench Group height-bounded (h-[520px]) and panels internally scrolling (min-h-0 flex-1 overflow-auto) so the long-code console scroll-out-of-view fix is preserved at any panel size. - Add a reusable SSR-safe useMediaQuery hook. Co-authored-by: monkeycode-ai <monkeycode-ai@chaitin.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
Summary
Makes the two-column layouts resizable by drag using
react-resizable-panels(v4 API:Group/Panel/Separator), instead of hand-rolled drag logic. The library provides keyboard accessibility, min/max constraints, and touch handling out of the box.Changes
src/components/devtools/Workbench.tsx): editor ↔ console/output split is now a horizontalGroupat thelgbreakpoint (1024px+) with 50/50 default and 25% min on each panel. Belowlg, the existing stacked mobile layout is unchanged (no resize handles).src/components/devtools/Timeline.tsx): era-rail ↔ content split is a horizontalGroupatmd(768px+), defaulting the rail to 220px (140px min, 480px max) to match the previousmd:grid-cols-[220px_1fr]. Stacked belowmd.localStorageviauseDefaultLayoutwith an SSR-safe storage adapter (src/lib/panel-layout.ts), following the same guard pattern assrc/lib/progress.ts. Separate keys for Workbench vs Timeline.Groupwrapper keeps the fixedh-[520px]height, and each panel's inner content keepsflex-1 min-h-0 overflow-auto(plusoverflow-hiddenon the column wrapper), so long console output always scrolls internally within the allocated (resizable) space.src/hooks/use-media-query.ts: reusable SSR-safematchMediahook for breakpoint-conditional rendering.Verification
bun run typecheck,bun run lint,bun test(58 pass),bun run buildall pass.Arrowkeys).md/lg+, stacked with no handles below.