feat: Add resizable panels for chat and preview layout #14
Conversation
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
- Implement PanelGroup with horizontal layout - Add resizable Panel for chat and preview sections - Configure minimum panel width of 30% to keep both usable - Default to 50/50 split between chat and preview - Style resize handle with theme-aware colors - Add hover effect on resize handle with primary color - Smooth resizing with cursor feedback - Supports dynamic layout adjustment based on user preference
|
@RebliNk17 is attempting to deploy a commit to the personal Team on Vercel. A member of the Team first needs to authorize it. |
- Add localStorage persistence for panel sizes per project - Load saved sizes on component mount with loading state - Save panel sizes automatically when resized - Fix timing issue where defaultSize was set before localStorage loaded
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Overview
Implements resizable panels for the project editor, allowing users to dynamically adjust the width of the chat and preview sections based on their preferences.
Motivation
Previously, the chat and preview sections were fixed width. This feature provides flexibility for users who want to focus on either the chat interface or the live preview by resizing the divider between them.
Changes
react-resizable-panelsPanelGroupTechnical Details
react-resizable-panelslibrary (already installed)User Experience
✅ Intuitive drag-to-resize interaction
✅ Visual feedback on hover
✅ Maintains minimum usable sizes
✅ Works seamlessly in light and dark themes
✅ No configuration needed - works out of the box
Testing
Files Changed
src/components/project-chat.tsxRelated Issues
Improves user experience on project page by allowing more flexible layout preferences.