From 21119abf12b837055bba4dd7c65c5c6e3860d547 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 20 Mar 2026 22:50:11 +0000
Subject: [PATCH] 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
---
 app/components/draft/QueueSection.tsx | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/app/components/draft/QueueSection.tsx b/app/components/draft/QueueSection.tsx
index deb9fb5..8011aa0 100644
--- a/app/components/draft/QueueSection.tsx
+++ b/app/components/draft/QueueSection.tsx
@@ -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,
     })