onDragStart(e, i)}
+ ondragover={(e) => onDragOver(e, i)}
+ ondrop={(e) => onDrop(e, i)}
onclick={() => onJump(track)}
onkeydown={(e) => e.key === "Enter" && onJump(track)}
class="group flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
class:active={player.currentId === track.id}
+ class:border-t-2={dragOverIndex === i}
+ class:border-primary={dragOverIndex === i}
>
{#if player.currentId === track.id}
{:else}
-
#
-
+
{i + 1}
{/if}
diff --git a/src/lib/player/store.svelte.ts b/src/lib/player/store.svelte.ts
index 4753650..007af1d 100644
--- a/src/lib/player/store.svelte.ts
+++ b/src/lib/player/store.svelte.ts
@@ -216,6 +216,28 @@ class PlayerStore {
}
}
+ move(fromIdx: number, toIdx: number) {
+ if (fromIdx === toIdx) return;
+
+ if (this.isShuffled) {
+ const indices = [...this.shuffledIndices];
+ if (fromIdx < 0 || fromIdx >= indices.length) return;
+ if (toIdx < 0 || toIdx >= indices.length) return;
+
+ const [item] = indices.splice(fromIdx, 1);
+ indices.splice(toIdx, 0, item);
+ this.shuffledIndices = indices;
+ } else {
+ const q = [...this.queue];
+ if (fromIdx < 0 || fromIdx >= q.length) return;
+ if (toIdx < 0 || toIdx >= q.length) return;
+
+ const [item] = q.splice(fromIdx, 1);
+ q.splice(toIdx, 0, item);
+ this.queue = q;
+ }
+ }
+
// Playback Controls
next() {