From 74cf534be54ccd8653663f14b597164745cfc24f Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:18:21 +0200
Subject: [PATCH] Animate queue drag and drop reordering

---
 .../src/lib/components/player/Queue.svelte    | 24 +++++++++++++++----
 web-player/src/routes/layout.css              | 18 ++++++++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index d84f6a9..ea997d5 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -5,6 +5,8 @@
 	import ListRow from '$lib/components/ui/media/ListRow.svelte';
 	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { fmtTime } from '$lib/utils/format';
+	import { flip } from 'svelte/animate';
+	import { expoOut } from 'svelte/easing';
 	import X from '@lucide/svelte/icons/x';
 
 	const upcoming = $derived.by(() => {
@@ -77,7 +79,12 @@
 			{/if}
 		</div>
 
-		<div class="flex flex-1 flex-col gap-px overflow-y-auto">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="flex flex-1 flex-col gap-px overflow-y-auto"
+			ondragover={(event) => dragFrom !== null && event.preventDefault()}
+			ondrop={onDrop}
+		>
 			{#each upcoming as track, i (track.id)}
 				{@const index = player.tracks.length - upcoming.length + i}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -90,15 +97,24 @@
 					ondragover={(event) => onDragOver(event, index)}
 					ondrop={onDrop}
 					ondragend={endDrag}
-					class="relative transition-opacity {dragFrom === index ? 'opacity-40' : ''}"
+					class="queue-row"
+					data-dragging={dragFrom === index ? '' : undefined}
+					data-drop={dragFrom === null
+						? undefined
+						: dropAt === index
+							? 'before'
+							: dropAt === index + 1 && index === player.tracks.length - 1
+								? 'after'
+								: undefined}
+					animate:flip={{ duration: 300, easing: expoOut }}
 				>
 					{#if dropAt === index && dragFrom !== null}
 						<div
-							class="pointer-events-none absolute inset-x-2 top-0 h-0.5 rounded-full bg-accent"
+							class="pointer-events-none absolute inset-x-2 -top-7 h-0.5 rounded-full bg-accent"
 						></div>
 					{:else if dropAt === index + 1 && dropAt === player.tracks.length && dragFrom !== null}
 						<div
-							class="pointer-events-none absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent"
+							class="pointer-events-none absolute inset-x-2 -bottom-7 h-0.5 rounded-full bg-accent"
 						></div>
 					{/if}
 					<ListRow
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 00c8f0b..2c1d861 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -206,6 +206,24 @@
 		visibility: visible;
 	}
 }
+@utility queue-row {
+	position: relative;
+	transition:
+		margin var(--mf-motion-base) var(--mf-ease),
+		opacity var(--mf-motion-base) var(--mf-ease),
+		scale var(--mf-motion-base) var(--mf-ease);
+
+	&[data-dragging] {
+		opacity: 0.4;
+		scale: 0.97;
+	}
+	&[data-drop='before'] {
+		margin-top: --spacing(14);
+	}
+	&[data-drop='after'] {
+		margin-bottom: --spacing(14);
+	}
+}
 @utility app-main {
 	--mf-dock-h: 0px;
 	padding-bottom: calc(var(--mf-nav-h) + var(--mf-safe-b) + var(--mf-dock-h));