feat: add resize functionality for panel #34
Conversation
|
Thank you for start working on this! I was thinking we could take inspiration from Figma’s sidebar implementation: place two 8px-wide invisible hot zones on the outer sides of our existing panel, and dynamically set the cursor to When the user double clicks the hot zones, we should clear the width from local storage and let it fallback to our default value. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds panel resize functionality allowing users to adjust the panel width by dragging handles on the left and right edges. The implementation includes dynamic cursor updates at min/max width boundaries, double-click to reset functionality, and proper handling of position adjustments when resizing from the left edge.
- Implemented bidirectional panel resizing with left and right drag handles
- Added width constraints (240px min, 500px max) with visual cursor feedback
- Integrated resizing state with the existing drag system to disable transitions during interactions
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| ui/state.ts | Added optional width property to panel position state for persistence |
| ui/figma.ts | Introduced TEMPAD_PANEL_MAX_WIDTH constant and corresponding getter for width constraints |
| entrypoints/ui/App.vue | Removed fixed width binding and overflow styling, added transition disabling for drag/resize states |
| components/Panel.vue | Implemented complete resize functionality with pointer event handlers, width clamping, position adjustment for left-handle resizing, and dynamic cursor feedback |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Extract common resize logic into createResizeHandler to eliminate code duplication - Replace positionX ref parameter with onPositionChange callback for better separation of concerns - Rename handlers to handleRightEdgeResize/handleLeftEdgeResize for clarity - Add cleanup method to prevent memory leaks - Add ComputedRef type import - Export isAtMinWidth, isAtMaxWidth, and resetWidth in return interface - Improve cursor feedback with dynamic resize handle cursors - Add double-click to reset panel width functionality
…ze composable - Implement direct resizing logic within Panel.vue, eliminating the need for the external resize composable. - Introduce new functions for handling resize events and state management. - Update event listeners to use useEventListener for better cleanup and performance. - Remove the resize composable and its exports from the index file.
|
@Justineo thanks to review. |
|
Thank you very much for your contribution. I’m currently working on the MCP feature and will review this PR once that work is finished. Thanks for your patience. |
2 participants
Overview
this pr is about add panel left and right width adjust feature.