feat: Improve SortableQueueItem component with enhanced click handling and styling

app/queue/page.tsx

@@ -56,21 +56,26 @@ function SortableQueueItem({ track, index, onPlay, onRemove, formatDuration }: S
     <div
       ref={setNodeRef}
       style={style}
-      className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors ${
+      className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 transition-colors ${
         isDragging ? 'bg-accent' : ''
       }`}
-      onClick={onPlay}
     >
       {/* Drag Handle */}
       <div
-        className="mr-3 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing"
+        className="mr-3 opacity-60 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing p-1 -m-1 hover:bg-accent rounded"
         {...attributes}
         {...listeners}
         onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
       >
         <GripVertical className="w-4 h-4 text-muted-foreground" />
       </div>
 
+      {/* Clickable content area for play */}
+      <div 
+        className="flex items-center flex-1 cursor-pointer"
+        onClick={onPlay}
+      >
         {/* Album Art with Play Indicator */}
         <div className="w-12 h-12 mr-4 shrink-0 relative">
           <Image
@@ -107,6 +112,7 @@ function SortableQueueItem({ track, index, onPlay, onRemove, formatDuration }: S
         <div className="flex items-center text-sm text-muted-foreground mr-4">
           {formatDuration(track.duration)}
         </div>
+      </div>
 
       {/* Actions */}
       <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -130,7 +136,11 @@ const QueuePage: React.FC = () => {
   const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue, reorderQueue } = useAudioPlayer();
 
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Require 8px of movement before starting drag
+      },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     })