feat: Add keyboard shortcuts and queue management features

- Implement global keyboard shortcuts for playback controls, volume adjustments, and navigation.
- Introduce drag-and-drop functionality for queue reordering with visual feedback.
- Add context menus for tracks, albums, and artists with quick action options.
- Develop Spotlight Search feature with Last.fm integration for enhanced music discovery.
- Create GlobalSearchProvider for managing search state and keyboard shortcuts.
- Ensure accessibility and keyboard navigation support across all new features.

app/queue/page.tsx

@@ -3,14 +3,151 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { useAudioPlayer, Track } from '@/app/components/AudioPlayerContext';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Play, X, Disc, Trash2, SkipForward } from 'lucide-react';
+import { Play, X, Disc, Trash2, SkipForward, GripVertical } from 'lucide-react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import {
+  CSS,
+} from '@dnd-kit/utilities';
+
+interface SortableQueueItemProps {
+  track: Track;
+  index: number;
+  onPlay: () => void;
+  onRemove: () => void;
+  formatDuration: (seconds: number) => string;
+}
+
+function SortableQueueItem({ track, index, onPlay, onRemove, formatDuration }: SortableQueueItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: `${track.id}-${index}` });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer 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"
+        {...attributes}
+        {...listeners}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <GripVertical className="w-4 h-4 text-muted-foreground" />
+      </div>
+
+      {/* Album Art with Play Indicator */}
+      <div className="w-12 h-12 mr-4 shrink-0 relative">
+        <Image
+          src={track.coverArt || '/default-user.jpg'}
+          alt={track.album}
+          width={48}
+          height={48}
+          className="w-full h-full object-cover rounded-md"
+        />
+        <div className="absolute inset-0 bg-black/50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+          <Play className="w-5 h-5 text-white" />
+        </div>
+      </div>
+
+      {/* Song Info */}
+      <div className="flex-1 min-w-0 mr-4">
+        <div className="flex items-center gap-2 mb-1">
+          <p className="font-semibold truncate">{track.name}</p>
+        </div>
+        <div className="flex items-center text-sm text-muted-foreground space-x-4">
+          <div className="flex items-center gap-1">
+            <Link 
+              href={`/artist/${track.artistId}`} 
+              className="truncate hover:text-primary hover:underline"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {track.artist}
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Duration */}
+      <div className="flex items-center text-sm text-muted-foreground mr-4">
+        {formatDuration(track.duration)}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className="h-8 w-8 p-0 hover:bg-destructive hover:text-destructive-foreground"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
 
 const QueuePage: React.FC = () => {
-  const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue } = useAudioPlayer();
+  const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue, reorderQueue } = useAudioPlayer();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = queue.findIndex((track, index) => `${track.id}-${index}` === active.id);
+      const newIndex = queue.findIndex((track, index) => `${track.id}-${index}` === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        reorderQueue(oldIndex, newIndex);
+      }
+    }
+  };
 
   const formatDuration = (seconds: number): string => {
     const minutes = Math.floor(seconds / 60);
@@ -107,67 +244,29 @@ const QueuePage: React.FC = () => {
                 </p>
               </div>
             ) : (
-              <div className="space-y-1">
-                {queue.map((track, index) => (
-                  <div
-                    key={`${track.id}-${index}`}
-                    className="group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
-                    onClick={() => skipToTrackInQueue(index)}
-                  >
-                    {/* Album Art with Play Indicator */}
-                    <div className="w-12 h-12 mr-4 shrink-0 relative">
-                      <Image
-                        src={track.coverArt || '/default-user.jpg'}
-                        alt={track.album}
-                        width={48}
-                        height={48}
-                        className="w-full h-full object-cover rounded-md"
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext
+                  items={queue.map((track, index) => `${track.id}-${index}`)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="space-y-1">
+                    {queue.map((track, index) => (
+                      <SortableQueueItem
+                        key={`${track.id}-${index}`}
+                        track={track}
+                        index={index}
+                        onPlay={() => skipToTrackInQueue(index)}
+                        onRemove={() => removeTrackFromQueue(index)}
+                        formatDuration={formatDuration}
                       />
-                      <div className="absolute inset-0 bg-black/50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                        <Play className="w-5 h-5 text-white" />
-                      </div>
-                    </div>
-
-                    {/* Song Info */}
-                    <div className="flex-1 min-w-0 mr-4">
-                      <div className="flex items-center gap-2 mb-1">
-                        <p className="font-semibold truncate">{track.name}</p>
-                      </div>
-                      <div className="flex items-center text-sm text-muted-foreground space-x-4">
-                        <div className="flex items-center gap-1">
-                          <Link 
-                            href={`/artist/${track.artistId}`} 
-                            className="truncate hover:text-primary hover:underline"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            {track.artist}
-                          </Link>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Duration */}
-                    <div className="flex items-center text-sm text-muted-foreground mr-4">
-                      {formatDuration(track.duration)}
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          removeTrackFromQueue(index);
-                        }}
-                        className="h-8 w-8 p-0 hover:bg-destructive hover:text-destructive-foreground"
-                      >
-                        <X className="w-4 h-4" />
-                      </Button>
-                    </div>
+                    ))}
                   </div>
-                ))}
-              </div>
+                </SortableContext>
+              </DndContext>
             )}
           </ScrollArea>
         </div>