authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-03-09 14:25:06-07:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-03-09 15:08:10-07:00
loge42036485fd7fe19c8536ba3fd59573ebf592349
treed8c0ac28f71da7c22d7578c1637d0e04e3cfe9ae
parentf9c3aff294e7493751f36504f65089fd2d5586fd

Improve project drag collision detection in sidebar

- Prefer pointer-based hit testing during project reordering - Fall back to corner-based collision to make drop targeting more reliable

1 files changed, 12 insertions(+), 2 deletions(-)

apps/web/src/components/Sidebar.tsx+12-2
...@@ -14,9 +14,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";...@@ -14,9 +14,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
14import {14import {
15 DndContext,15 DndContext,
16 type DragCancelEvent,16 type DragCancelEvent,
17 type CollisionDetection,
17 PointerSensor,18 PointerSensor,
18 type DragStartEvent,19 type DragStartEvent,
19 closestCenter,20 closestCorners,
21 pointerWithin,
20 useSensor,22 useSensor,
21 useSensors,23 useSensors,
22 type DragEndEvent,24 type DragEndEvent,
...@@ -841,6 +843,14 @@ export default function Sidebar() {...@@ -841,6 +843,14 @@ export default function Sidebar() {
841 activationConstraint: { distance: 6 },843 activationConstraint: { distance: 6 },
842 }),844 }),
843 );845 );
846 const projectCollisionDetection = useCallback<CollisionDetection>((args) => {
847 const pointerCollisions = pointerWithin(args);
848 if (pointerCollisions.length > 0) {
849 return pointerCollisions;
850 }
851
852 return closestCorners(args);
853 }, []);
844854
845 const handleProjectDragEnd = useCallback(855 const handleProjectDragEnd = useCallback(
846 (event: DragEndEvent) => {856 (event: DragEndEvent) => {
...@@ -1241,7 +1251,7 @@ export default function Sidebar() {...@@ -1241,7 +1251,7 @@ export default function Sidebar() {
12411251
1242 <DndContext1252 <DndContext
1243 sensors={projectDnDSensors}1253 sensors={projectDnDSensors}
1244 collisionDetection={closestCenter}1254 collisionDetection={projectCollisionDetection}
1245 modifiers={[restrictToVerticalAxis, restrictToParentElement]}1255 modifiers={[restrictToVerticalAxis, restrictToParentElement]}
1246 onDragStart={handleProjectDragStart}1256 onDragStart={handleProjectDragStart}
1247 onDragEnd={handleProjectDragEnd}1257 onDragEnd={handleProjectDragEnd}