* Fix queue drag to only activate on handle and number, not entire row
Restricts drag listeners to the grab handle icon and order number badge
using setActivatorNodeRef, and removes touch-none from the whole row so
mobile users can scroll without accidentally reordering the queue.
https://claude.ai/code/session_01HPtNkL5m9xhYgtzWaGViSC
* Code review cleanup: use GripVertical icon and add drag activation constraint
- Replace inline SVG drag handle with GripVertical from lucide-react,
which is already used project-wide
- Add activationConstraint (distance: 8px) to PointerSensor so a touch
on the handle doesn't immediately hijack scroll before the user has
moved far enough to signal intent to drag
https://claude.ai/code/session_01HPtNkL5m9xhYgtzWaGViSC
* Fix O(n²) lookup, memoize components and callbacks in QueueSection
- Build a participantMap (Map<id, participant>) with useMemo so each
queue item lookup is O(1) instead of O(n) per render
- Memoize queueIds array for SortableContext to avoid churn
- Wrap handleDragEnd in useCallback so DndContext gets a stable reference
- Wrap SortableQueueItem in memo so it skips re-renders when props haven't
changed (important since the parent re-renders every second during a
live draft from timer-update socket events)
- Pass onRemoveFromQueue and onMakePick directly as props instead of
creating new arrow functions per item per render; SortableQueueItem
now calls them with the relevant id itself
https://claude.ai/code/session_01HPtNkL5m9xhYgtzWaGViSC
---------
Co-authored-by: Claude <noreply@anthropic.com>
ebe06b2522