feat(ui): handle-wide click-to-collapse + suppressible hover on resize handles#1028
Merged
Conversation
…e handles
Rework the sidebar/panel resize-handle interaction:
- useResizablePanel: new `onClick` option that fires on pointer-up only when
the pointer never traveled past `clickThreshold` (4px default), so a genuine
click on the handle can be told apart from a drag-start. Plannotator is
unchanged unless `onClick` is passed.
- ResizeHandle: `hideHoverTrack` to suppress the hover color-change, a
cursor-following `tooltip`, a `trackClassName` prop, and a
`[data-resize-track]` attribute (mirrors `[data-collapse]`) so a host can
restyle/suppress the hover reveal from plain CSS.
- Wire all plan-editor and review-editor handles to the new UX: no track
highlight, cursor tooltip ("Click to close · Drag to resize"), single-click
collapse (double-click reset becomes unreachable), chevron retained.
- README: document the new resize-handle host seams.
- Skip tooltip-position state updates while dragging (they were hidden anyway). - Extract the repeated resize-handle tooltip string into a per-app constant (RESIZE_HANDLE_TOOLTIP) instead of 7 inline literals.
pointercancel fires when the browser aborts a gesture (palm rejection, system gesture, focus loss). It was routed through the same onUp path as pointerup, so a no-move cancel with onClick set would collapse the panel. Skip the onClick branch on cancel — only clean up drag state (a real in-progress drag still commits its width, matching prior behavior).
backnotprop
added a commit
that referenced
this pull request
Jul 9, 2026
…OFF notes + version bump The published 0.25.0 tarball predates the file-browser filtering (1267cd5) and resize-handle click-to-collapse seams (f4f6bdb, #1028); bump so those ship as 0.26.0. Claude-Session: https://claude.ai/code/session_01SFy9fY27SA8g5BtotWPi1G
Owner
Author
|
This is now released in version 0.23.0 |
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
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.
What
Reworks the sidebar/panel resize-handle interaction across the plan editor and review editor, and adds host-facing seams to
@plannotator/uiso the commercial Workspaces app can drive its own edge UX.New UX (Plannotator, all handles)
New seams in
@plannotator/ui(default-off, Plannotator opt-in)useResizablePanel({ onClick, clickThreshold })— the hook owns the pointer-capture drag state machine, so this is the only reliable way to distinguish a click from a drag-start.onClickfires on pointer-up only when travel stayed underclickThreshold(default 4px). Not fired on snap-close.ResizeHandleprops:hideHoverTrack,tooltip,trackClassName, plus a[data-resize-track]attribute (same host-CSS pattern as[data-collapse]).Why
Workspaces is reworking sidebar-edge interactions (no hover reveal, tooltip, click-to-collapse). Two capabilities couldn't be done cleanly from the host side — targeting/suppressing the hardcoded hover track, and telling a click apart from a drag. Both now have seams; Workspaces builds its own tooltip and double-click removal on top.
Compatibility
onClickbeing present).Test
packages/uitypecheck + strict-consumer typecheck pass; ui test suite green (349 pass / 0 fail).