FE-1541: Add a generic ResizeHandle and adopt it across the panels - #9429
FE-1541: Add a generic ResizeHandle and adopt it across the panels#9429kube wants to merge 2 commits into
Conversation
A reusable drag handle around the existing useResizeDrag hook, for resizing a positioned ancestor from any edge with min/max clamping, and a layer declaration for the resize folder.
GlassPanel drops its inline copy of the handle: the primitive renders it, and the panel's dragged-edge border highlight now derives from the handle's data-resizing/data-resize-edge attributes via :has(), so the three editor panels ride the shared implementation unchanged. The AI assistant panel drops its hand-rolled pointer-drag path for the same primitive with the new line appearance — a centred pill that shows on hover and turns blue while resizing. Its shell already clamps to the viewport in CSS, so the static maxSize replaces the per-drag window-width computation.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
Bot
added
area/libs
PR SummaryLow Risk Overview
The AI assistant sidebar replaces a custom pointer-drag resize path with Adds an architecture Reviewed by Cursor Bugbot for commit 3d3e245. Bugbot is set up for automated code reviews on this repo. Configure here. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 3d3e245. Configure here.
| window.removeEventListener("pointermove", onPointerMove); | ||
| window.removeEventListener("pointerup", onPointerUp); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Handle sits off the visible edge
Medium Severity
Adopting ResizeHandle on the padded assistant shell places the 5px hit target and hover pill on the shell's left edge, away from the inset card. The previous handle reached the visible card edge, so grabbing that edge no longer starts a resize.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 3d3e245. Configure here.
1 participant
🌟 What is the purpose of this PR?
One shared edge-resize implementation for the package. Adds the generic
ResizeHandleprimitive (a drag handle around the existinguseResizeDrag, with min/max clamping and two visual appearances) and moves the package's two hand-rolled copies onto it. Bottom of the Notebook view stack, but independent of it: everything here is existing-UI refactoring plus one new component.🔗 Related links
🔍 What does this change?
ui/resize/resize-handle.tsx: the primitive — edge (top/bottom/left/right), controlledsizewith min/max clamping, roving-tab-order-friendly (tabIndex={-1}), and anappearanceprop:"hidden"tints the strip on hover,"line"shows a centred pill; both turn blue while resizing. It exposesdata-resizing/data-resize-edgeso ancestors can style themselves against an active drag with:has().:has(). The LeftSideBar, PropertiesPanel, and BottomPanel ride this unchanged.lineappearance, keeping its hover-pill affordance. Its shell already clamps to the viewport in CSS, so a staticmaxSizereplaces the per-drag window-width computation.ui/resizein the architecture docs.Net −162 lines: three implementations become one.
Pre-Merge Checklist 🚀
🚢 Has this modified a publishable library?
This PR:
📜 Does this require a change to the docs?
The changes in this PR:
🕸️ Does this require a change to the Turbo Graph?
The changes in this PR:
🛡 What tests cover this?
No unit tests — the primitive is DOM-drag behaviour. Verified by driving the browser: all three GlassPanel-backed panels resize with the dragged-edge highlight reacting, and the AI panel resizes with exact pixel deltas through its new handle.
❓ How to test this?
yarn workspace @hashintel/petrinaut storybookWithAiAssistantstory, open the assistant and drag its left edge — a pill line shows on hover and while resizing.