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:
parent
a10abd8b48
commit
21119abf12
1 changed files with 5 additions and 16 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import { memo } from "react";
|
||||
import { GripVertical } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { AutodraftSettings } from "~/components/AutodraftSettings";
|
||||
|
|
@ -94,21 +95,7 @@ function SortableQueueItem({
|
|||
{...listeners}
|
||||
className="flex items-center gap-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
|
||||
>
|
||||
<svg
|
||||
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>
|
||||
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
||||
<Badge variant="default" className="text-xs">{index + 1}</Badge>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
|
|
@ -155,7 +142,9 @@ export const QueueSection = memo(function QueueSection({
|
|||
onMakePick,
|
||||
}: QueueSectionProps) {
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: { distance: 8 },
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue