From 197b9267c461bff5dee13df8abd38f6889e8b385 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Tue, 10 Feb 2026 01:58:33 -0800
Subject: [PATCH] drag and drop but nicer

---
 src/lib/components/player/Queue.svelte | 35 +++++++++++++++-----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/player/Queue.svelte b/src/lib/components/player/Queue.svelte
index a46a75a..a3bf64b 100644
--- a/src/lib/components/player/Queue.svelte
+++ b/src/lib/components/player/Queue.svelte
@@ -80,21 +80,28 @@
                     class:border-primary={dragOverIndex === i}
                 >
                     <div
-                        class="w-8 shrink-0 flex items-center justify-center cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-foreground"
-                        aria-label="Drag to reorder"
+                        class="w-6 shrink-0 flex items-center justify-center text-xs text-muted-foreground/60 font-mono"
                     >
-                        <GripVertical class="h-4 w-4" />
-                    </div>
-                    <div
-                        class="w-6 shrink-0 text-center text-xs text-muted-foreground/60 font-mono"
-                    >
-                        {#if player.currentId === track.id}
-                            <div
-                                class="w-2 h-2 bg-primary rounded-full mx-auto animate-pulse"
-                            ></div>
-                        {:else}
-                            <span class="text-xs">{i + 1}</span>
-                        {/if}
+                        <!-- Default: Number or Active Indicator -->
+                        <div
+                            class="group-hover:hidden flex items-center justify-center w-full h-full"
+                        >
+                            {#if player.currentId === track.id}
+                                <div
+                                    class="w-2 h-2 bg-primary rounded-full animate-pulse"
+                                ></div>
+                            {:else}
+                                <span>{i + 1}</span>
+                            {/if}
+                        </div>
+
+                        <!-- Hover: Grip Handle -->
+                        <div
+                            class="hidden group-hover:flex items-center justify-center w-full h-full cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-foreground"
+                            aria-label="Drag to reorder"
+                        >
+                            <GripVertical class="h-4 w-4" />
+                        </div>
                     </div>
 
                     <div class="flex-1 min-w-0">