feat(web): one track-list row shape, and drag reorder that snaps (M494, #5393)

Every track list (album, Liked, Search, Search → Tracks, playlist,
History) now draws its rows with TrackListRow inside a TrackList box,
in place of four row components that had drifted apart:

- TrackListRow owns the look: lead column, title over "artist · album",
  like, radio, add to queue, menu, duration, then a trailing slot. It
  also owns the stripe, hover, the now-playing band and the
  unavailable state. The stripe is dropped on now-playing and selected
  rows, where Tailwind would otherwise let `odd:` win.
- TrackRow, PlaylistTrackRow and HistoryRow are wrappers that keep only
  their behaviour: track number and multi-select; grip, remove and
  dead-entry states; cover and timestamp. Playlist and History rows
  gain radio, add and the menu, so every list offers the same actions.
- The radio control is Lucide's Radio icon, not the 📻 emoji.
- Enter on a control inside a row now belongs to that control. The old
  TrackRow played the track when Enter was pressed on "add to queue".
- TrackList has no fill, so the stripe shows on playlists too.

Drag reorder (#5393): neodrag kept the drop offset, so after the list
re-rendered the dragged row sat between two slots. reorderDrag, shared
by the playlist and queue rows:
- snaps the row to whole rows while dragging;
- resets it to its slot on drop;
- on playlists, gives the touch gesture to the grip only, so the list
  still scrolls by touch.
The playlist page reorders optimistically and rolls back on error.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/components/QueueTrackRow.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { GripVertical, X } from 'lucide-svelte';
-  import { draggable, type DragEventData } from '@neodrag/svelte';
   import type { TrackRef } from '#lib/api/types.js';
   import { playFromQueueIndex, removeFromQueue, moveQueueItem } from '#lib/player/store.svelte.js';
   import { coverUrl, FALLBACK_COVER } from '#lib/media/covers.js';
-  import { offsetToDelta } from './queue-row-math';
+  import { reorderDrag } from './reorder-drag';
   import LikeButton from './LikeButton.svelte';
 
   let { track, index, isCurrent } = $props<{
@@ -13,14 +12,6 @@
     isCurrent: boolean;
   }>();
 
-  let measuredRowHeight = 64; // sensible default; replaced on dragStart
-
-  function handleDragStart(data: DragEventData) {
-    // The action's `data.rootNode` is the element use:draggable was applied to.
-    const rect = data.rootNode.getBoundingClientRect();
-    if (rect.height > 0) measuredRowHeight = rect.height;
-  }
-
   function handleBodyClick() {
     if (isCurrent) return;
     playFromQueueIndex(index);
@@ -30,12 +21,6 @@
     removeFromQueue(index);
   }
 
-  function handleDragEnd(data: DragEventData) {
-    const delta = offsetToDelta(data.offsetY, measuredRowHeight);
-    if (delta === 0) return;
-    moveQueueItem(index, index + delta);
-  }
-
   function handleHandleKeydown(e: KeyboardEvent) {
     if (e.key === 'ArrowUp') {
       e.preventDefault();
@@ -53,14 +38,15 @@
 </script>
 
 <div
-  use:draggable={{ axis: 'y', bounds: 'parent', onDragStart: handleDragStart, onDragEnd: handleDragEnd }}
+  use:reorderDrag={{ onMove: (delta) => moveQueueItem(index, index + delta) }}
   class="flex items-center gap-2 border-b border-border px-3 py-2 h-16
-         {isCurrent ? 'border-l-2 border-l-accent bg-surface-hover' : ''}"
+         [&.neodrag-dragging]:relative [&.neodrag-dragging]:z-10 [&.neodrag-dragging]:shadow-lg
+         {isCurrent ? 'border-l-2 border-l-accent bg-surface-hover' : 'bg-background'}"
 >
   <!--
     The album art is the grab surface (#2395). The grip used to occupy its own
     column in every row; it now sits OVER the art, so it costs no horizontal
-    space at all. `use:draggable` is on the row (above), so dragging already
+    space at all. `use:reorderDrag` is on the row (above), so dragging already
     worked from anywhere — the grip's real jobs are being the visual cue and
     the keyboard target, and both survive here.