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
This commit is contained in:
Claude 2026-03-20 22:50:11 +00:00
parent a10abd8b48
commit 21119abf12
No known key found for this signature in database

View file

@ -1,4 +1,5 @@
import { memo } from "react"; import { memo } from "react";
import { GripVertical } from "lucide-react";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { AutodraftSettings } from "~/components/AutodraftSettings"; import { AutodraftSettings } from "~/components/AutodraftSettings";
@ -94,21 +95,7 @@ function SortableQueueItem({
{...listeners} {...listeners}
className="flex items-center gap-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none" className="flex items-center gap-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
> >
<svg <GripVertical className="w-4 h-4 text-muted-foreground" />
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-muted-foreground"
>
<line x1="5" y1="9" x2="19" y2="9"></line>
<line x1="5" y1="15" x2="19" y2="15"></line>
</svg>
<Badge variant="default" className="text-xs">{index + 1}</Badge> <Badge variant="default" className="text-xs">{index + 1}</Badge>
</div> </div>
<div className="min-w-0"> <div className="min-w-0">
@ -155,7 +142,9 @@ export const QueueSection = memo(function QueueSection({
onMakePick, onMakePick,
}: QueueSectionProps) { }: QueueSectionProps) {
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor), useSensor(PointerSensor, {
activationConstraint: { distance: 8 },
}),
useSensor(KeyboardSensor, { useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates, coordinateGetter: sortableKeyboardCoordinates,
}) })