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 { 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,
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue