angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Improve SortableQueueItem component with enhanced click handling and styling

Browse Source
This commit is contained in:
angel
2025-08-16 17:07:18 -05:00
parent 9e7cc703bd
commit 98b085d8c4
1 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/queue/page.tsx
View File

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