feat(beps): add drag-and-drop support for kanban card status migration#3304
feat(beps): add drag-and-drop support for kanban card status migration#3304
Conversation
- Install @dnd-kit/core and @dnd-kit/sortable for drag-and-drop functionality - Update BepKanbanCard to be draggable with a grip handle - Update BepList to support dropping cards between status columns - Cards can now be dragged from one column to another to change their status - Visual feedback shows when dragging over a valid drop target Co-authored-by: aaronvg <aaronvg@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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.
| })} | ||
| </div> | ||
| ) : null} | ||
| </DragOverlay> |
There was a problem hiding this comment.
Sortable hook in DragOverlay causes broken drag preview
Medium Severity
Rendering BepKanbanCard inside DragOverlay causes it to call useSortable with the same ID as the actively dragged card. Since useSortable returns isDragging: true when active.id === id, the overlay card's inline style sets opacity: 0.5. Combined with the wrapper div's opacity-90 class, the drag preview ends up at ~45% opacity instead of the intended 90%. The transform from useSortable is also applied via CSS.Transform.toString(transform), which can conflict with DragOverlay's own positioning, causing the preview to appear offset from the cursor. The isDragging prop on BepKanbanCardProps was likely meant to address this but is never destructured from the function parameters — it's shadowed by the hook's return value.
Additional Locations (1)
2 participants
Pull Request Template
Thanks for taking the time to fill out this pull request!
Issue Reference
Changes
This PR adds drag-and-drop functionality to the BEP kanban board, allowing users to easily change a BEP's status by dragging cards between columns.
Key Changes:
updateStatusmutation when a card is dropped in a new columnUser Experience:
Testing
npx tsc --noEmit)PR Checklist
Additional Notes
The implementation uses @dnd-kit which is a modern, accessible, and performant drag-and-drop library. It supports touch devices and keyboard navigation out of the box.
Slack Thread