Skip to content

feat(ui): draggable comment popover and annotation toolbar#442

Merged
backnotprop merged 2 commits intomainfrom
feat/movable-comment-box
Mar 31, 2026
Merged

feat(ui): draggable comment popover and annotation toolbar#442
backnotprop merged 2 commits intomainfrom
feat/movable-comment-box

Conversation

@backnotprop
Copy link
Copy Markdown
Owner

Summary

  • Adds a shared useDraggable hook that makes fixed-position elements movable by their header
  • Integrates into AnnotationToolbar (code review line comments) and CommentPopover (plan review + file-level code review comments)
  • Resolves user reports of awkward popover positioning near viewport edges/bottom

How it works

  • Drag the header/title bar of any comment popover to reposition it
  • 3px movement threshold prevents interfering with button clicks in the header
  • Once dragged, scroll/resize auto-repositioning pauses (user is in control)
  • Position resets when a new annotation opens

Test plan

  • bun run dev:review — select diff lines, drag toolbar header, verify repositioning
  • Verify header buttons (cancel, expand, close) still work without triggering drag
  • Verify Esc / Cmd+Enter keyboard shortcuts still work
  • Select new lines → verify toolbar resets to auto position
  • Test near viewport edges (top, bottom, left, right)
  • Plan review: select text → drag comment popover header
  • Verify scroll doesn't fight dragged position
  • Expand to dialog and back → verify drag resets

Users reported awkward positioning of popovers near viewport edges.
Instead of perfecting auto-positioning heuristics, this lets users
drag the popover header to reposition it wherever they want.

- Add shared useDraggable hook (packages/ui/hooks/useDraggable.ts)
  that reads the element's rendered position via getBoundingClientRect
  on drag start, sidestepping all transform complexity
- Integrate into AnnotationToolbar (code review line comments)
- Integrate into CommentPopover (plan review + file-level comments)
- 3px movement threshold prevents interfering with header button clicks
- Drag position resets when a new annotation opens
- Scroll/resize tracking pauses once user has dragged

For provenance purposes, this commit was AI assisted.
@backnotprop
Copy link
Copy Markdown
Owner Author

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

🤖 Generated with Claude Code

- If this code review was useful, please react with 👍. Otherwise, react with 👎.

The drag handle was only applied to the comment mode header, leaving
the Ask AI variant immovable and potentially covering the diff.

For provenance purposes, this commit was AI assisted.
@backnotprop backnotprop merged commit 7435be0 into main Mar 31, 2026
5 checks passed
stk-code pushed a commit to stk-code/plannotator that referenced this pull request Mar 31, 2026
…op#442)

Makes the CommentPopover and AnnotationToolbar draggable by their headers via a shared `useDraggable` hook. Users can reposition popovers that land awkwardly near viewport edges.

- New `useDraggable` hook reads rendered position via getBoundingClientRect on drag start
- 3px movement threshold prevents interfering with button clicks
- CommentPopover: suppresses scroll/resize tracking after drag, resets on anchor change
- AnnotationToolbar: both comment and Ask AI modes are draggable
- Clamps position to keep at least 50px visible on screen

For provenance purposes, this commit was AI assisted.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant