From 692772cb1473fd87c3b0ab0844581898b192808c Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 05:34:40 -0800
Subject: [PATCH] drag drop pt. 4 grab handle

---
 src/lib/components/GlobalPlayer.svelte | 31 +++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index b58bfdd..2d5c20f 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -53,6 +53,7 @@
 		Trash2,
 		Volume2,
 		X,
+		GripVertical,
 	} from "@lucide/svelte";
 
 	const iconClass = "icon-btn";
@@ -855,12 +856,21 @@
 											]
 												.filter(Boolean)
 												.join(" ")}
-											draggable="true"
-											ondragstart={(e) => onDragStart(item.track.id, e)}
 											ondragover={(e) => onDragOver(item.track.id, e)}
 											ondrop={(e) => onDrop(item.track.id, e)}
-											ondragend={onDragEnd}
 										>
+											<button
+												class="btn-icon"
+												type="button"
+												draggable="true"
+												aria-label="Reorder"
+												title="Drag to reorder"
+												ondragstart={(e) => onDragStart(item.track.id, e)}
+												ondragend={onDragEnd}
+											>
+												<GripVertical class={iconClass} />
+											</button>
+
 											<button
 												class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
 												type="button"
@@ -1144,12 +1154,21 @@
 								]
 									.filter(Boolean)
 									.join(" ")}
-								draggable="true"
-								ondragstart={(e) => onDragStart(item.track.id, e)}
 								ondragover={(e) => onDragOver(item.track.id, e)}
 								ondrop={(e) => onDrop(item.track.id, e)}
-								ondragend={onDragEnd}
 							>
+								<button
+									class="btn-icon"
+									type="button"
+									draggable="true"
+									aria-label="Reorder"
+									title="Drag to reorder"
+									ondragstart={(e) => onDragStart(item.track.id, e)}
+									ondragend={onDragEnd}
+								>
+									<GripVertical class={iconClass} />
+								</button>
+
 								<button
 									class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
 									type="button"