Add drag-to-reorder within playlists

Cards in playlist view are draggable. Visual feedback: opacity on
source card, accent border on drop target. Reorder persists to store.

Files:
- frontend/app.js: dragSource state, drag/drop handlers on cards,
  container-level dragover guard in wireUI
- frontend/styles.css: .card.dragging, .card.drag-over styles
This commit is contained in:
Jonathan Sykes
2026-06-14 14:41:05 +08:00
parent a4d6b825d5
commit 0ba0f56a54
6 changed files with 44 additions and 1 deletions

View File

@@ -751,6 +751,10 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
.card:hover .card-menu { opacity: 1; }
.card-menu:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
/* Drag-to-reorder */
.card.dragging { opacity: 0.4; }
.card.drag-over { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-glow); }
/* Saved-offline badge on cards */
.saved-badge {
position: absolute; left: 5px; bottom: 5px;