feat: drag-and-drop reordering for playlist tracks

Drag handle appears on hover, moves items in DOM, syncs order to
songs array, and saves to Navidrome via createPlaylist 800ms after
last drop (debounced to avoid rapid API calls).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-28 21:15:48 +02:00
1 parent ac5cbfb3de
commit 8deeaa6475
2 files changed
+73

No files matched your search

+7
View File
@@ -189,6 +189,13 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
.song-dur{font-size:11px;color:var(--text3);font-family:var(--mono)}
.song-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.song-item:hover .song-actions{opacity:1}
/* ── PLAYLIST DRAG & DROP ── */
.song-list.pl-draggable .song-item{grid-template-columns:18px 32px 44px 1fr auto}
.pl-drag-handle{display:flex;align-items:center;justify-content:center;color:var(--text3);opacity:0;cursor:grab;transition:opacity .15s;touch-action:none}
.song-list.pl-draggable .song-item:hover .pl-drag-handle{opacity:1}
.pl-drag-handle:active{cursor:grabbing}
.song-item.dragging{opacity:0.35}
.song-item.drag-over{box-shadow:0 -2px 0 var(--accent)}
/* ── ALBUM DETAIL ── */
.back-btn{background:none;border:none;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:12px;padding:6px 0;margin-bottom:16px;transition:color .15s}