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/HistoryRow.svelte

@@ -2,6 +2,7 @@
   import type { HistoryEvent } from '#lib/api/history.js';
   import { playQueue } from '#lib/player/store.svelte.js';
   import { coverUrl } from '#lib/media/covers.js';
+  import TrackListRow from './TrackListRow.svelte';
 
   let { event } = $props<{ event: HistoryEvent }>();
 
@@ -40,25 +41,26 @@
   const tooltip = $derived(new Date(event.played_at).toISOString());
 </script>
 
-<button
-  type="button"
-  onclick={handleClick}
-  aria-label={`Play ${event.track.title}`}
-  class="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-hover"
+<TrackListRow
+  title={event.track.title}
+  subtitle={`${event.track.artist_name} · ${event.track.album_title}`}
+  durationSec={event.track.duration_sec}
+  track={event.track}
+  ariaLabel={`Play ${event.track.title}`}
+  onActivate={handleClick}
 >
-  <img
-    src={coverUrl(event.track.album_id)}
-    alt=""
-    class="h-11 w-11 shrink-0 rounded object-cover"
-    loading="lazy"
-  />
-  <div class="min-w-0 flex-1">
-    <div class="truncate text-sm font-medium text-text-primary">{event.track.title}</div>
-    <div class="truncate text-xs text-text-secondary">
-      {event.track.artist_name} · {event.track.album_title}
-    </div>
-  </div>
-  <span title={tooltip} class="shrink-0 text-xs text-text-secondary">
-    {timestamp}
-  </span>
-</button>
+  {#snippet lead()}
+    <img
+      src={coverUrl(event.track.album_id)}
+      alt=""
+      class="h-8 w-8 rounded object-cover"
+      loading="lazy"
+    />
+  {/snippet}
+
+  {#snippet trailing()}
+    <span title={tooltip} class="w-16 shrink-0 text-right text-xs text-text-secondary">
+      {timestamp}
+    </span>
+  {/snippet}
+</TrackListRow>

web/src/lib/components/HistoryRow.test.ts

@@ -3,13 +3,30 @@ import { render, screen, fireEvent } from '@testing-library/svelte';
 import HistoryRow from './HistoryRow.svelte';
 import type { HistoryEvent } from '#lib/api/history.js';
 import { makeTrack } from '#test-utils/fixtures/track.js';
+import { emptyLikesMock } from '../../test-utils/mocks/likes';
+import { emptyQuarantineMock } from '../../test-utils/mocks/quarantine';
 
 const playQueue = vi.fn();
 
+// The row is a TrackListRow, so LikeButton and TrackMenu render too.
 vi.mock('#lib/player/store.svelte.js', () => ({
-  playQueue: (...args: unknown[]) => playQueue(...args)
+  playQueue: (...args: unknown[]) => playQueue(...args),
+  playNext: vi.fn(),
+  enqueueTrack: vi.fn(),
+  playRadio: vi.fn(),
+  player: { current: undefined }
 }));
 
+vi.mock('#lib/auth/store.svelte.js', () => ({
+  user: { value: { id: 'u1', username: 'me', is_admin: false } }
+}));
+
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
+
+vi.mock('#lib/api/likes.js', () => emptyLikesMock());
+
+vi.mock('#lib/api/quarantine.js', () => emptyQuarantineMock());
+
 const sampleTrack = makeTrack({
   title: 'Song Title',
   album_title: 'Album',
@@ -41,6 +58,13 @@ describe('HistoryRow', () => {
     expect(playQueue).toHaveBeenCalledWith([sampleTrack], 0);
   });
 
+  it('carries the shared row controls: like, radio, add and the menu', () => {
+    render(HistoryRow, { props: { event: sampleEvent } });
+    expect(screen.getByRole('button', { name: /play radio/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add song title to queue/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /track actions for/i })).toBeInTheDocument();
+  });
+
   it('renders a relative timestamp for events under 1 hour ago', () => {
     render(HistoryRow, { props: { event: sampleEvent } });
     expect(screen.getByText(/\d+m ago/)).toBeInTheDocument();

web/src/lib/components/PlaylistTrackRow.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
+  // A track in a playlist. The look is TrackListRow's; what this adds is
+  // the reorder grip, remove, and the two ways an entry can be dead.
   import { GripVertical, X } from 'lucide-svelte';
-  import { draggable, type DragEventData } from '@neodrag/svelte';
-  import LikeButton from './LikeButton.svelte';
-  import TrackMenu from './TrackMenu.svelte';
   import type { PlaylistTrack } from '#lib/api/types.js';
   import { playlistTrackToRef } from '#lib/playlists/playlistTrackToRef.js';
-  import { player } from '#lib/player/store.svelte.js';
-  import { offsetToDelta } from './queue-row-math';
+  import TrackListRow from './TrackListRow.svelte';
 
   let {
     row,
@@ -32,22 +30,21 @@
   const isRemoved = $derived(row.track_id === null);
   const isUnavailable = $derived(isRemoved || isMissingFile);
 
-  // Reconstruct a minimal TrackRef for the kebab menu when the
-  // upstream track still exists. When unavailable, the menu is hidden.
+  // null when the entry cannot be played, which hides like, radio, add
+  // and the menu.
   const liveTrack = $derived(playlistTrackToRef(row));
 
-  let measuredRowHeight = 56; // sensible default; replaced on dragStart
+  const canDrag = $derived(isOwner && !isUnavailable);
 
-  function handleDragStart(data: DragEventData) {
-    const rect = data.rootNode.getBoundingClientRect();
-    if (rect.height > 0) measuredRowHeight = rect.height;
-  }
-
-  function handleDragEnd(data: DragEventData) {
-    const delta = offsetToDelta(data.offsetY, measuredRowHeight);
-    if (delta === 0) return;
-    onMove?.(row.position, row.position + delta);
-  }
+  const drag = $derived(
+    isOwner
+      ? {
+          disabled: !canDrag,
+          handle: '[data-reorder-handle]',
+          onMove: (delta: number) => onMove?.(row.position, row.position + delta)
+        }
+      : null
+  );
 
   function handleHandleKeydown(e: KeyboardEvent) {
     if (e.key === 'ArrowUp') {
@@ -63,87 +60,57 @@
       e.preventDefault();
     }
   }
-
-  function format(sec: number): string {
-    const m = Math.floor(sec / 60);
-    const s = sec % 60;
-    return `${m}:${s.toString().padStart(2, '0')}`;
-  }
-
-  // Drag is gated on owner+available. When neither, the action runs but
-  // the dragEnd handler skips by returning before onMove fires; visually
-  // the user never sees the row move.
-  const canDrag = $derived(isOwner && !isUnavailable);
-
-  // "Now playing" highlight: matches QueueTrackRow's treatment so the
-  // user can see which row is current without reading the player bar.
-  // Unavailable rows (trackId === null) never match.
-  const isCurrent = $derived(
-    !isUnavailable && player.current?.id === row.track_id,
-  );
 </script>
 
-<div
-  role="listitem"
-  class="flex items-center gap-3 px-3 py-2 text-sm transition-colors hover:bg-surface-hover
-         {isUnavailable ? 'text-text-muted' : 'text-text-primary'}
-         {isCurrent ? 'border-l-2 border-l-accent bg-surface-hover' : ''}"
-  use:draggable={{
-    axis: 'y',
-    bounds: 'parent',
-    disabled: !canDrag,
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd
-  }}
+<TrackListRow
+  title={row.title}
+  subtitle={`${row.artist_name} · ${row.album_title}`}
+  durationSec={row.duration_sec}
+  track={liveTrack}
+  ariaLabel={`Play ${row.title}`}
+  rowTitle={isMissingFile
+    ? 'This track’s file is missing from the library, so it can’t be played. It stays in the playlist, and returns automatically if the file comes back.'
+    : undefined}
+  disabled={isUnavailable}
+  struck={isRemoved}
+  {drag}
+  onActivate={() => onPlay(row.position)}
 >
-  {#if isOwner}
-    <button
-      type="button"
-      disabled={!canDrag}
-      aria-label="Reorder track (drag or use arrow keys)"
-      aria-keyshortcuts="ArrowUp ArrowDown"
-      onkeydown={handleHandleKeydown}
-      class="shrink-0 cursor-grab text-text-muted hover:text-text-primary
-             active:cursor-grabbing focus-visible:outline-solid focus-visible:outline-2
-             focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-50"
-    >
-      <GripVertical size={14} strokeWidth={1} />
-    </button>
-  {/if}
+  {#snippet lead()}
+    {#if isOwner}
+      <button
+        type="button"
+        data-reorder-handle
+        disabled={!canDrag}
+        aria-label="Reorder track (drag or use arrow keys)"
+        aria-keyshortcuts="ArrowUp ArrowDown"
+        onclick={(e) => e.stopPropagation()}
+        onkeydown={handleHandleKeydown}
+        class="cursor-grab p-1 text-text-muted hover:text-text-primary
+               active:cursor-grabbing focus-visible:outline-solid focus-visible:outline-2
+               focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <GripVertical size={16} strokeWidth={1} />
+      </button>
+    {/if}
+  {/snippet}
 
-  <button
-    type="button"
-    class="min-w-0 flex-1 text-left"
-    onclick={() => !isUnavailable && onPlay(row.position)}
-    disabled={isUnavailable}
-    title={isMissingFile
-      ? 'This track’s file is missing from the library, so it can’t be played. It stays in the playlist, and returns automatically if the file comes back.'
-      : undefined}
-  >
-    <div class="truncate {isRemoved ? 'line-through' : ''}">{row.title}</div>
-    <div class="truncate text-xs text-text-muted">
-      {row.artist_name} · {row.album_title}
-      {#if isMissingFile}
-        <span class="text-action-destructive"> · File missing</span>
-      {/if}
-    </div>
-  </button>
+  {#snippet note()}
+    {#if isMissingFile}
+      <span class="text-error-fg"> · File missing</span>
+    {/if}
+  {/snippet}
 
-  <span class="shrink-0 text-xs text-text-muted">{format(row.duration_sec)}</span>
-
-  {#if !isUnavailable && liveTrack}
-    <LikeButton entityType="track" entityId={liveTrack.id} />
-    <TrackMenu track={liveTrack} />
-  {/if}
-
-  {#if isOwner}
-    <button
-      type="button"
-      onclick={() => onRemove(row.position)}
-      aria-label={`Remove ${row.title} from playlist`}
-      class="shrink-0 rounded p-1 text-text-muted hover:bg-surface hover:text-action-destructive"
-    >
-      <X size={14} strokeWidth={1} />
-    </button>
-  {/if}
-</div>
+  {#snippet trailing()}
+    {#if isOwner}
+      <button
+        type="button"
+        onclick={(e) => { e.stopPropagation(); onRemove(row.position); }}
+        aria-label={`Remove ${row.title} from playlist`}
+        class="shrink-0 rounded p-1 text-text-muted hover:bg-surface hover:text-action-destructive"
+      >
+        <X size={16} strokeWidth={1} />
+      </button>
+    {/if}
+  {/snippet}
+</TrackListRow>

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.
 

web/src/lib/components/TrackList.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  // The box every track list sits in (milestone 494). No fill of its own:
+  // the rows stripe themselves, and a filled box would hide the stripe.
+  // Rows are direct children so `odd:` counts them.
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="overflow-hidden rounded-md border border-border">
+  {@render children()}
+</div>

web/src/lib/components/TrackListRow.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  // The one shape every track list in the web app draws (milestone 494):
+  // a lead column (track number, drag grip or cover), title over a muted
+  // subtitle, then like, radio, add-to-queue, the track menu and the
+  // duration, then whatever the list adds at the end (remove, a timestamp).
+  // The wrappers — TrackRow, PlaylistTrackRow, HistoryRow — own behaviour
+  // (selection, reorder, remove); this component owns how a row looks, so
+  // the lists cannot drift apart again.
+  import type { Snippet } from 'svelte';
+  import { Plus, Radio } from 'lucide-svelte';
+  import type { TrackRef } from '#lib/api/types.js';
+  import { formatDuration } from '#lib/media/duration.js';
+  import { player, enqueueTrack, playRadio } from '#lib/player/store.svelte.js';
+  import LikeButton from './LikeButton.svelte';
+  import TrackMenu from './TrackMenu.svelte';
+  import { reorderDrag, type ReorderDragOptions } from './reorder-drag';
+
+  let {
+    title,
+    subtitle = '',
+    durationSec,
+    track,
+    ariaLabel,
+    rowTitle,
+    isSelected = false,
+    disabled = false,
+    struck = false,
+    drag = null,
+    onActivate,
+    lead,
+    note,
+    trailing
+  }: {
+    title: string;
+    subtitle?: string;
+    durationSec: number;
+    /** The playable track. null when the row cannot be played, which hides
+        like, radio, add and the menu: there is nothing for them to act on. */
+    track: TrackRef | null;
+    ariaLabel: string;
+    /** Tooltip for the whole row. */
+    rowTitle?: string;
+    isSelected?: boolean;
+    disabled?: boolean;
+    /** Strike the title through: the track is gone for good. */
+    struck?: boolean;
+    drag?: ReorderDragOptions | null;
+    onActivate: (e: MouseEvent | KeyboardEvent) => void;
+    lead?: Snippet;
+    /** Appended to the subtitle line, e.g. a "File missing" marker. */
+    note?: Snippet;
+    trailing?: Snippet;
+  } = $props();
+
+  const isCurrent = $derived(!!track && player.current?.id === track.id);
+
+  // The stripe is only drawn on rows with no state of their own. Tailwind
+  // emits `odd:` after the plain utilities, so a striped odd row would win
+  // over the now-playing or selected background.
+  const background = $derived(
+    isCurrent
+      ? 'border-l-2 border-l-accent bg-surface-hover'
+      : isSelected
+        ? 'bg-surface-hover'
+        : 'odd:bg-surface/50 hover:bg-surface-hover'
+  );
+
+  function onclick(e: MouseEvent) {
+    if (!disabled) onActivate(e);
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    // Keys pressed on a control inside the row belong to that control.
+    if (e.target !== e.currentTarget) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    if (!disabled) onActivate(e);
+  }
+
+  function onRadio(e: MouseEvent) {
+    e.stopPropagation();
+    if (track) playRadio(track.id);
+  }
+
+  function onAdd(e: MouseEvent) {
+    e.stopPropagation();
+    if (track) enqueueTrack(track);
+  }
+</script>
+
+<div
+  role="button"
+  tabindex="0"
+  aria-label={ariaLabel}
+  aria-disabled={disabled || undefined}
+  title={rowTitle}
+  data-selected={isSelected}
+  {onclick}
+  {onkeydown}
+  use:reorderDrag={drag}
+  class="group relative flex w-full items-center gap-3 px-3 py-2 text-left text-sm
+         transition-colors focus-visible:outline-solid focus-visible:outline-2
+         focus-visible:outline-accent [&.neodrag-dragging]:z-10
+         [&.neodrag-dragging]:bg-surface-hover [&.neodrag-dragging]:shadow-lg
+         {background}
+         {disabled ? 'cursor-default text-text-muted' : 'cursor-pointer text-text-primary'}"
+>
+  {#if lead}
+    <span class="flex w-8 shrink-0 items-center justify-center">{@render lead()}</span>
+  {/if}
+
+  <span class="min-w-0 flex-1">
+    <span class="block truncate {struck ? 'line-through' : ''}">{title}</span>
+    {#if subtitle || note}
+      <span class="block truncate text-xs text-text-secondary">
+        {subtitle}{#if note}{@render note()}{/if}
+      </span>
+    {/if}
+  </span>
+
+  {#if track}
+    <LikeButton entityType="track" entityId={track.id} />
+    <button
+      type="button"
+      aria-label="Play radio from this track"
+      title="Play radio"
+      onclick={onRadio}
+      class="hidden shrink-0 rounded p-1 text-text-secondary hover:text-text-primary sm:inline-flex"
+    >
+      <Radio size={16} strokeWidth={1} />
+    </button>
+    <button
+      type="button"
+      aria-label={`Add ${track.title} to queue`}
+      title="Add to queue"
+      onclick={onAdd}
+      class="hidden shrink-0 rounded p-1 text-text-secondary hover:text-text-primary sm:inline-flex"
+    >
+      <Plus size={16} strokeWidth={1} />
+    </button>
+    <TrackMenu {track} />
+  {/if}
+
+  <span class="w-12 shrink-0 text-right text-xs tabular-nums text-text-secondary">
+    {formatDuration(durationSec)}
+  </span>
+
+  {#if trailing}
+    {@render trailing()}
+  {/if}
+</div>

web/src/lib/components/TrackListRow.test.ts

@@ -0,0 +1,104 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { emptyLikesMock } from '../../test-utils/mocks/likes';
+import { emptyQuarantineMock } from '../../test-utils/mocks/quarantine';
+import { makeTrack } from '#test-utils/fixtures/track.js';
+
+const player = vi.hoisted(() => ({ current: undefined as { id: string } | undefined }));
+
+vi.mock('#lib/player/store.svelte.js', () => ({
+  playNext: vi.fn(),
+  enqueueTrack: vi.fn(),
+  playQueue: vi.fn(),
+  playRadio: vi.fn(),
+  player
+}));
+
+vi.mock('#lib/api/likes.js', () => emptyLikesMock());
+
+vi.mock('#lib/api/quarantine.js', () => emptyQuarantineMock());
+
+import TrackListRow from './TrackListRow.svelte';
+import { enqueueTrack, playRadio } from '#lib/player/store.svelte.js';
+
+const track = makeTrack({ id: 't1', title: 'Roygbiv', duration_sec: 137 });
+
+function base(overrides: Record<string, unknown> = {}) {
+  return {
+    title: 'Roygbiv',
+    subtitle: 'Boards of Canada · MHTRTC',
+    durationSec: 137,
+    track,
+    ariaLabel: 'Roygbiv',
+    onActivate: vi.fn(),
+    ...overrides
+  };
+}
+
+afterEach(() => {
+  vi.clearAllMocks();
+  player.current = undefined;
+});
+
+describe('TrackListRow', () => {
+  test('draws title, subtitle and duration', () => {
+    render(TrackListRow, { props: base() });
+    expect(screen.getByText('Roygbiv')).toBeInTheDocument();
+    expect(screen.getByText('Boards of Canada · MHTRTC')).toBeInTheDocument();
+    expect(screen.getByText('2:17')).toBeInTheDocument();
+  });
+
+  test('a plain row is striped; the now-playing row is banded instead', () => {
+    const { unmount } = render(TrackListRow, { props: base() });
+    expect(screen.getByRole('button', { name: 'Roygbiv' }).className).toContain('odd:bg-surface/50');
+    unmount();
+
+    player.current = { id: 't1' };
+    render(TrackListRow, { props: base() });
+    const row = screen.getByRole('button', { name: 'Roygbiv' });
+    expect(row.className).toContain('border-l-accent');
+    expect(row.className).not.toContain('odd:bg-surface/50');
+  });
+
+  test('click and Enter activate the row', async () => {
+    const props = base();
+    render(TrackListRow, { props });
+    const row = screen.getByRole('button', { name: 'Roygbiv' });
+    await fireEvent.click(row);
+    await fireEvent.keyDown(row, { key: 'Enter' });
+    expect(props.onActivate).toHaveBeenCalledTimes(2);
+  });
+
+  // Enter on a control inside the row is that control's, not the row's.
+  // The old TrackRow played the track when Enter was pressed on "add".
+  test('Enter on an inner control does not activate the row', async () => {
+    const props = base();
+    render(TrackListRow, { props });
+    await fireEvent.keyDown(screen.getByRole('button', { name: /add roygbiv to queue/i }), { key: 'Enter' });
+    expect(props.onActivate).not.toHaveBeenCalled();
+  });
+
+  test('radio and add act on the track without activating the row', async () => {
+    const props = base();
+    render(TrackListRow, { props });
+    await fireEvent.click(screen.getByRole('button', { name: /play radio/i }));
+    await fireEvent.click(screen.getByRole('button', { name: /add roygbiv to queue/i }));
+    expect(playRadio).toHaveBeenCalledWith('t1');
+    expect(enqueueTrack).toHaveBeenCalledWith(track);
+    expect(props.onActivate).not.toHaveBeenCalled();
+  });
+
+  test('a row with no playable track hides like, radio, add and the menu', () => {
+    render(TrackListRow, { props: base({ track: null, disabled: true }) });
+    expect(screen.queryByRole('button', { name: /play radio/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /to queue/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /track actions for/i })).not.toBeInTheDocument();
+  });
+
+  test('a disabled row does not activate', async () => {
+    const props = base({ disabled: true });
+    render(TrackListRow, { props });
+    await fireEvent.click(screen.getByRole('button', { name: 'Roygbiv' }));
+    expect(props.onActivate).not.toHaveBeenCalled();
+  });
+});

web/src/lib/components/TrackRow.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  // A track in a library list (album, Liked, Search). The look is
+  // TrackListRow's; what this adds is the track number and multi-select.
   import type { TrackRef } from '#lib/api/types.js';
-  import { formatDuration } from '#lib/media/duration.js';
-  import { player, playQueue, enqueueTrack, playRadio } from '#lib/player/store.svelte.js';
-  import { Plus, Check } from 'lucide-svelte';
-  import LikeButton from './LikeButton.svelte';
-  import TrackMenu from './TrackMenu.svelte';
+  import { playQueue } from '#lib/player/store.svelte.js';
+  import { Check } from 'lucide-svelte';
+  import TrackListRow from './TrackListRow.svelte';
   import {
     selection, toggleOne, selectRange
   } from '#lib/selection/store.svelte.js';
@@ -14,25 +14,30 @@
   let {
     tracks,
     index,
-    onPlay
-  }: { tracks: TrackRef[]; index: number; onPlay?: PlayHandler } = $props();
+    onPlay,
+    showAlbum = true
+  }: {
+    tracks: TrackRef[];
+    index: number;
+    onPlay?: PlayHandler;
+    /** Off on the album page, where the album is the page itself. */
+    showAlbum?: boolean;
+  } = $props();
 
   const track = $derived(tracks[index]);
 
-  const isCurrent  = $derived(player.current?.id === track.id);
   const isSelected = $derived(selection.isSelected(track.id));
   const selectMode = $derived(selection.active);
 
-  function activate() {
-    if (onPlay) onPlay(tracks, index);
-    else playQueue(tracks, index);
-  }
+  const subtitle = $derived(
+    showAlbum ? `${track.artist_name} · ${track.album_title}` : track.artist_name
+  );
 
-  function onRowClick(e: MouseEvent) {
-    // In selection mode any click toggles; outside selection mode click
-    // plays as before. Shift+click extends the range from the anchor
-    // regardless of mode (enters selection mode if nothing was picked).
-    if (e.shiftKey) {
+  function activate(e: MouseEvent | KeyboardEvent) {
+    // In selection mode any activation toggles; outside it, it plays.
+    // Shift+click extends the range from the anchor regardless of mode
+    // (entering selection mode if nothing was picked).
+    if (e instanceof MouseEvent && e.shiftKey) {
       e.preventDefault();
       selectRange(index, tracks);
       return;
@@ -41,15 +46,8 @@
       toggleOne(track, index);
       return;
     }
-    activate();
-  }
-
-  function onRowKey(e: KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      if (selectMode) toggleOne(track, index);
-      else activate();
-    }
+    if (onPlay) onPlay(tracks, index);
+    else playQueue(tracks, index);
   }
 
   function onCheckboxClick(e: MouseEvent) {
@@ -57,43 +55,31 @@
     if (e.shiftKey) selectRange(index, tracks);
     else toggleOne(track, index);
   }
-
-  function onAddClick(e: MouseEvent) {
-    e.stopPropagation();
-    enqueueTrack(track);
-  }
-
-  function onRadioClick(e: MouseEvent) {
-    e.stopPropagation();
-    playRadio(track.id);
-  }
 </script>
 
-<div
-  role="button"
-  tabindex="0"
-  aria-label={track.title}
-  data-selected={isSelected}
-  onclick={onRowClick}
-  onkeydown={onRowKey}
-  class="group grid w-full cursor-pointer grid-cols-[32px_1fr_auto_auto_auto_auto_auto] items-center gap-4 px-3 py-2 text-left text-sm odd:bg-surface/50 hover:bg-surface focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent {isCurrent ? 'border-l-2 border-l-accent bg-surface-hover' : ''} {isSelected ? 'bg-surface-hover' : ''}"
+<TrackListRow
+  title={track.title}
+  {subtitle}
+  durationSec={track.duration_sec}
+  {track}
+  ariaLabel={track.title}
+  {isSelected}
+  onActivate={activate}
 >
-  <span class="relative flex h-6 w-8 items-center justify-end">
-    <!-- Track number: visible by default; hidden when the row is hovered
-         (so the checkbox replaces it) or when this row is selected. -->
+  {#snippet lead()}
+    <!-- Track number by default; the checkbox replaces it on hover, in
+         selection mode, or when this row is selected. -->
     <span
       class="tabular-nums text-text-secondary
              {selectMode || isSelected ? 'hidden' : 'group-hover:hidden'}"
     >{track.track_number ?? '—'}</span>
-    <!-- Checkbox: hidden by default; revealed on row hover OR whenever
-         the selection bar is active OR this row is the selected one. -->
     <button
       type="button"
       role="checkbox"
       aria-checked={isSelected}
       aria-label={isSelected ? `Deselect ${track.title}` : `Select ${track.title}`}
       onclick={onCheckboxClick}
-      class="flex h-5 w-5 items-center justify-center rounded border
+      class="h-5 w-5 items-center justify-center rounded border
              {isSelected
                ? 'border-accent bg-accent text-text-primary'
                : 'border-border bg-surface text-transparent'}
@@ -101,25 +87,5 @@
     >
       <Check size={14} strokeWidth={2} />
     </button>
-  </span>
-  <span class="truncate">{track.title}</span>
-  <LikeButton entityType="track" entityId={track.id} />
-  <button
-    type="button"
-    aria-label="Play radio from this track"
-    title="Play radio"
-    onclick={onRadioClick}
-    class="rounded p-1 text-text-secondary hover:text-text-primary"
-  >📻</button>
-  <button
-    type="button"
-    aria-label={`Add ${track.title} to queue`}
-    title="Add to queue"
-    onclick={onAddClick}
-    class="rounded p-1 text-text-secondary hover:text-text-primary"
-  >
-    <Plus size={16} strokeWidth={1} />
-  </button>
-  <TrackMenu {track} />
-  <span class="tabular-nums text-text-secondary">{formatDuration(track.duration_sec)}</span>
-</div>
+  {/snippet}
+</TrackListRow>

web/src/lib/components/queue-row-math.ts

@@ -1,7 +1,8 @@
 // Translate a vertical drag offset (px) into an integer row-delta,
-// given the measured row height (px). Used by QueueTrackRow when a
-// neodrag drop completes — we round to the nearest row boundary so
-// the user's drop intent maps to a clean queue index.
+// given the measured row height (px). Used by reorderDrag both to snap
+// the row while it is dragged and to report where it was dropped — it
+// rounds to the nearest row boundary, so the slot the row shows is the
+// slot it lands in.
 export function offsetToDelta(offsetY: number, rowHeight: number): number {
   if (rowHeight <= 0) return 0;
   // `|| 0` normalizes -0 to +0. Math.round(-0.5) === -0; downstream

web/src/lib/components/reorder-drag.test.ts

@@ -0,0 +1,85 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { reorderDrag } from './reorder-drag';
+
+// jsdom lays nothing out, so the row and its list get explicit geometry:
+// a 560px list of 56px rows. neodrag divides by offsetWidth / rect.width
+// to undo CSS scaling, so offsetWidth has to agree with the rect.
+function rect(height: number): DOMRect {
+  return {
+    top: 0, left: 0, right: 300, bottom: height, width: 300, height,
+    x: 0, y: 0, toJSON: () => ({})
+  } as DOMRect;
+}
+
+function mount() {
+  const list = document.createElement('div');
+  const row = document.createElement('div');
+  const handle = document.createElement('button');
+  handle.setAttribute('data-reorder-handle', '');
+  row.appendChild(handle);
+  list.appendChild(row);
+  document.body.appendChild(list);
+  list.getBoundingClientRect = () => rect(560);
+  row.getBoundingClientRect = () => rect(56);
+  Object.defineProperty(row, 'offsetWidth', { value: 300 });
+  return { list, row, handle };
+}
+
+function pointer(target: EventTarget, type: string, clientY: number) {
+  target.dispatchEvent(new MouseEvent(type, { bubbles: true, clientX: 10, clientY, button: 0 }));
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('reorderDrag', () => {
+  test('a drag past half a row moves one slot, and the row lands back in place', () => {
+    const { row } = mount();
+    const onMove = vi.fn();
+    const action = reorderDrag(row, { onMove });
+
+    pointer(row, 'pointerdown', 10);
+    pointer(row, 'pointermove', 40);
+    // 30px of a 56px row snaps to the next slot while dragging.
+    expect(row.style.transform).toContain('56px');
+    pointer(row, 'pointerup', 40);
+
+    expect(onMove).toHaveBeenCalledWith(1);
+    expect(row.style.transform).not.toContain('56px');
+    action.destroy();
+  });
+
+  test('a drag of under half a row stays in its slot and reports nothing', () => {
+    const { row } = mount();
+    const onMove = vi.fn();
+    const action = reorderDrag(row, { onMove });
+
+    pointer(row, 'pointerdown', 10);
+    pointer(row, 'pointermove', 30);
+    pointer(row, 'pointerup', 30);
+
+    expect(onMove).not.toHaveBeenCalled();
+    action.destroy();
+  });
+
+  test('with a handle, only the handle starts a drag and takes the touch gesture', () => {
+    const { row, handle } = mount();
+    const onMove = vi.fn();
+    const action = reorderDrag(row, { handle: '[data-reorder-handle]', onMove });
+
+    expect(row.style.touchAction).toBe('');
+    expect(handle.style.touchAction).toBe('none');
+
+    pointer(row, 'pointerdown', 10);
+    pointer(row, 'pointermove', 80);
+    pointer(row, 'pointerup', 80);
+    expect(onMove).not.toHaveBeenCalled();
+
+    pointer(handle, 'pointerdown', 10);
+    pointer(handle, 'pointermove', 80);
+    pointer(handle, 'pointerup', 80);
+    expect(onMove).toHaveBeenCalledWith(1);
+    action.destroy();
+  });
+});

web/src/lib/components/reorder-drag.ts

@@ -0,0 +1,98 @@
+// Drag-to-reorder for a row in a vertical list, shared by the playlist and
+// queue rows (#5393). Wraps @neodrag/svelte with the three things a list
+// needs that neodrag does not do on its own:
+//
+// - The row moves in whole-row steps, so it visibly snaps into the slot it
+//   will land in. neodrag's own `grid` rounds with Math.ceil, which jumps a
+//   full row down on a 1px drag but needs a full row to move up, so the
+//   snapping is done here in `transform` with offsetToDelta's rounding.
+// - The row goes back to translate 0 on drop. Left uncontrolled, neodrag
+//   keeps the drop offset, and once the list re-renders in its new order
+//   that offset leaves the row sitting between two slots.
+// - Only the handle takes the touch gesture. neodrag sets touch-action:none
+//   on the whole node, which stops a touch screen scrolling the list from
+//   any row it is dragged from; with a handle, the row scrolls normally.
+
+import { draggable, type DragOptions } from '@neodrag/svelte';
+import { offsetToDelta } from './queue-row-math';
+
+export type ReorderDragOptions = {
+  disabled?: boolean;
+  /** Selector for the drag handle inside the row. Omit to drag from anywhere. */
+  handle?: string;
+  /** Called on drop with the whole number of rows moved (never 0). */
+  onMove: (delta: number) => void;
+};
+
+const FALLBACK_ROW_HEIGHT = 56;
+
+export function reorderDrag(node: HTMLElement, initial: ReorderDragOptions | null) {
+  let opts = initial;
+  let rowHeight = FALLBACK_ROW_HEIGHT;
+  let instance: ReturnType<typeof draggable> | null = null;
+
+  function handleEl(): HTMLElement | undefined {
+    if (!opts?.handle) return undefined;
+    return node.querySelector<HTMLElement>(opts.handle) ?? undefined;
+  }
+
+  function build(): DragOptions {
+    return {
+      axis: 'y',
+      bounds: 'parent',
+      disabled: opts?.disabled ?? false,
+      handle: handleEl(),
+      // Controlled at {0, 0}: every update() puts the row back in its slot.
+      position: { x: 0, y: 0 },
+      transform: ({ offsetY }) =>
+        `translate3d(0, ${offsetToDelta(offsetY, rowHeight) * rowHeight}px, 0)`,
+      onDragStart: ({ rootNode }) => {
+        const h = rootNode.getBoundingClientRect().height;
+        if (h > 0) rowHeight = h;
+      },
+      onDragEnd: ({ offsetY }) => {
+        const delta = offsetToDelta(offsetY, rowHeight);
+        instance?.update?.(build());
+        if (delta !== 0) opts?.onMove(delta);
+      }
+    };
+  }
+
+  function touchToHandle() {
+    const handle = handleEl();
+    if (!handle) return;
+    node.style.touchAction = '';
+    handle.style.touchAction = 'none';
+  }
+
+  function attach() {
+    if (!opts || instance) return;
+    instance = draggable(node, build());
+    touchToHandle();
+  }
+
+  attach();
+
+  return {
+    update(next: ReorderDragOptions | null) {
+      opts = next;
+      if (!opts) {
+        instance?.destroy?.();
+        instance = null;
+        node.style.touchAction = '';
+        node.style.transform = '';
+        return;
+      }
+      if (instance) {
+        instance.update?.(build());
+        touchToHandle();
+      } else {
+        attach();
+      }
+    },
+    destroy() {
+      instance?.destroy?.();
+      instance = null;
+    }
+  };
+}

web/src/routes/albums/[id]/+page.svelte

@@ -5,6 +5,7 @@
   import { qk } from '#lib/api/queries.js';
   import { pageTitle } from '#lib/branding.js';
   import TrackRow from '#lib/components/TrackRow.svelte';
+  import TrackList from '#lib/components/TrackList.svelte';
   import LibrarySkeleton from '#lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '#lib/components/ApiErrorBanner.svelte';
   import LikeButton from '#lib/components/LikeButton.svelte';
@@ -199,11 +200,11 @@
     {#if album.tracks.length === 0}
       <p class="text-text-secondary">This album has no tracks.</p>
     {:else}
-      <div class="overflow-hidden rounded border border-border">
+      <TrackList>
         {#each album.tracks as track, i (track.id)}
-          <TrackRow tracks={album.tracks} index={i} />
+          <TrackRow tracks={album.tracks} index={i} showAlbum={false} />
         {/each}
-      </div>
+      </TrackList>
     {/if}
   {/if}
 </div>

web/src/routes/library/history/+page.svelte

@@ -3,6 +3,7 @@
   import { createHistoryQuery } from '#lib/api/history.js';
   import { groupByDay } from '#lib/utils/dayGroup.js';
   import HistoryRow from '#lib/components/HistoryRow.svelte';
+  import TrackList from '#lib/components/TrackList.svelte';
   import InfiniteScrollSentinel from '#lib/components/InfiniteScrollSentinel.svelte';
   import LibrarySkeleton from '#lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '#lib/components/ApiErrorBanner.svelte';
@@ -62,11 +63,11 @@
         <h2 class="sticky top-0 z-10 mb-2 bg-background py-1 text-lg font-medium text-text-secondary">
           {group.label}
         </h2>
-        <div class="divide-y divide-border">
+        <TrackList>
           {#each group.events as event (event.id)}
             <HistoryRow {event} />
           {/each}
-        </div>
+        </TrackList>
       </section>
     {/each}
 

web/src/routes/library/history/page.test.ts

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/svelte';
 import HistoryPage from './+page.svelte';
 import type { HistoryEvent, HistoryResponse } from '#lib/api/history.js';
 import { makeTrack } from '#test-utils/fixtures/track.js';
+import { emptyLikesMock } from '../../../test-utils/mocks/likes';
+import { emptyQuarantineMock } from '../../../test-utils/mocks/quarantine';
 
 const mkTrack = (id: string) => makeTrack({ id: `track-${id}`, title: `Song ${id}` });
 
@@ -44,10 +46,19 @@ vi.mock('#lib/api/history.js', async () => {
   };
 });
 
+// Rows are TrackListRows, so LikeButton and TrackMenu render too.
 vi.mock('#lib/player/store.svelte.js', () => ({
-  playQueue: vi.fn()
+  playQueue: vi.fn(),
+  playNext: vi.fn(),
+  enqueueTrack: vi.fn(),
+  playRadio: vi.fn(),
+  player: { current: undefined }
 }));
 
+vi.mock('#lib/api/likes.js', () => emptyLikesMock());
+
+vi.mock('#lib/api/quarantine.js', () => emptyQuarantineMock());
+
 vi.mock('#lib/branding.js', () => ({
   pageTitle: (s: string) => `Minstrel · ${s}`
 }));

web/src/routes/library/liked/+page.svelte

@@ -8,6 +8,7 @@
   import ArtistCard from '#lib/components/ArtistCard.svelte';
   import AlbumCard from '#lib/components/AlbumCard.svelte';
   import TrackRow from '#lib/components/TrackRow.svelte';
+  import TrackList from '#lib/components/TrackList.svelte';
   import QuickFilter from '#lib/components/QuickFilter.svelte';
   import EmptyState from '#lib/components/EmptyState.svelte';
 
@@ -157,11 +158,11 @@
         {/snippet}
       </EmptyState>
     {:else}
-      <div class="overflow-hidden rounded border border-border">
+      <TrackList>
         {#each fTracks as t, i (t.id)}
           <TrackRow tracks={fTracks} index={i} />
         {/each}
-      </div>
+      </TrackList>
       {#if tracksQuery?.hasNextPage}
         <button
           type="button"

web/src/routes/library/liked/liked.test.ts

@@ -21,7 +21,7 @@ vi.mock('#lib/api/likes.js', () => ({
 
 vi.mock('#lib/api/client.js', () => apiClientMock());
 vi.mock('#lib/player/store.svelte.js', () => ({
-  playQueue: vi.fn(), enqueueTrack: vi.fn(), enqueueTracks: vi.fn(),
+  playQueue: vi.fn(), enqueueTrack: vi.fn(), enqueueTracks: vi.fn(), playRadio: vi.fn(),
   player: { current: undefined }
 }));
 

web/src/routes/playlists/[id]/+page.svelte

@@ -6,6 +6,7 @@
   import { Pencil, Trash2, Link as LinkIcon } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
   import PlaylistTrackRow from '#lib/components/PlaylistTrackRow.svelte';
+  import TrackList from '#lib/components/TrackList.svelte';
   import ApiErrorBanner from '#lib/components/ApiErrorBanner.svelte';
   import {
     createPlaylistQuery,
@@ -23,7 +24,7 @@
   import { systemPlaylistRefetch } from '#lib/playlists/systemRefetch.js';
   import { systemRebuilt } from '#lib/serverEvents.svelte.js';
   import { pushToast } from '#lib/stores/toast.svelte.js';
-  import type { TrackRef } from '#lib/api/types.js';
+  import type { PlaylistDetail, TrackRef } from '#lib/api/types.js';
 
   // SvelteKit types page.params.id as string | undefined (the route
   // could in principle render with the slot empty); empty-string fallback
@@ -45,12 +46,23 @@
     const cur = tracks.map((t) => t.position);
     const moved = cur.splice(fromPos, 1)[0];
     cur.splice(clamped, 0, moved);
+    // Show the new order on drop rather than after the round trip, so the
+    // dragged row lands in its slot at once (#5393). Positions are
+    // renumbered the way the server renumbers them; the invalidate below
+    // replaces this with the server's copy either way.
+    const previous = playlistQuery.data;
+    const byPosition = new Map(tracks.map((t) => [t.position, t]));
+    queryClient.setQueryData<PlaylistDetail>(qk.playlist(id), {
+      ...previous,
+      tracks: cur.map((pos, i) => ({ ...byPosition.get(pos)!, position: i }))
+    });
     try {
       await reorderPlaylist(id, cur);
-      await queryClient.invalidateQueries({ queryKey: qk.playlist(id) });
     } catch (e: unknown) {
+      queryClient.setQueryData(qk.playlist(id), previous);
       alert(errMessage(e));
     }
+    await queryClient.invalidateQueries({ queryKey: qk.playlist(id) });
   }
 
   async function onRemove(position: number) {
@@ -342,16 +354,16 @@
       </section>
     {/if}
 
-    <section class="rounded-md border border-border bg-surface">
-      {#if pl.tracks.length === 0}
-        <p class="px-3 py-6 text-sm text-text-muted">
-          {#if isOwner}
-            No tracks yet. Add some via the "Add to playlist…" entry on any track row.
-          {:else}
-            No tracks in this playlist.
-          {/if}
-        </p>
-      {:else}
+    {#if pl.tracks.length === 0}
+      <p class="rounded-md border border-border px-3 py-6 text-sm text-text-muted">
+        {#if isOwner}
+          No tracks yet. Add some via the "Add to playlist…" entry on any track row.
+        {:else}
+          No tracks in this playlist.
+        {/if}
+      </p>
+    {:else}
+      <TrackList>
         {#each pl.tracks as row (row.position)}
           <PlaylistTrackRow
             {row}
@@ -361,7 +373,7 @@
             onMove={onMove}
           />
         {/each}
-      {/if}
-    </section>
+      </TrackList>
+    {/if}
   {/if}
 </div>

web/src/routes/playlists/[id]/playlist.test.ts

@@ -31,6 +31,7 @@ vi.mock('#lib/player/store.svelte.js', () => ({
   enqueueTracks: vi.fn(),
   playNext: vi.fn(),
   enqueueTrack: vi.fn(),
+  playRadio: vi.fn(),
   player: { current: undefined }
 }));
 

web/src/routes/search/+page.svelte

@@ -5,6 +5,7 @@
   import ArtistCard from '#lib/components/ArtistCard.svelte';
   import AlbumCard from '#lib/components/AlbumCard.svelte';
   import TrackRow from '#lib/components/TrackRow.svelte';
+  import TrackList from '#lib/components/TrackList.svelte';
   import SearchSkeleton from '#lib/components/SearchSkeleton.svelte';
   import ApiErrorBanner from '#lib/components/ApiErrorBanner.svelte';
   import { useDelayed } from '#lib/utils/useDelayed.svelte.js';
@@ -104,11 +105,11 @@
             </a>
           {/if}
         </header>
-        <div class="overflow-hidden rounded border border-border">
+        <TrackList>
           {#each tracks.items as t, i (t.id)}
             <TrackRow tracks={tracks.items} index={i} onPlay={onTrackPlay} />
           {/each}
-        </div>
+        </TrackList>
       </section>
     {/if}
   {/if}

web/src/routes/search/tracks/+page.svelte

@@ -3,6 +3,7 @@
   import { page } from '$app/state';
   import { createSearchTracksInfiniteQuery } from '#lib/api/queries.js';
   import TrackRow from '#lib/components/TrackRow.svelte';
+  import TrackList from '#lib/components/TrackList.svelte';
   import LibrarySkeleton from '#lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '#lib/components/ApiErrorBanner.svelte';
   import { useDelayed } from '#lib/utils/useDelayed.svelte.js';
@@ -29,7 +30,7 @@
     <a href={`/search?q=${encodeURIComponent(q)}`} class="text-sm text-text-secondary hover:text-text-primary">
       ← Back to search
     </a>
-    <h1 class="mt-2 text-2xl font-semibold">Tracks matching '{q}'</h1>
+    <h1 class="mt-2 font-display text-2xl font-medium text-text-primary">Tracks matching '{q}'</h1>
     {#if !query?.isPending && !query?.isError && q}
       <p class="text-sm text-text-secondary">{total} {total === 1 ? 'track' : 'tracks'}</p>
     {/if}
@@ -44,11 +45,11 @@
   {:else if total === 0}
     <p class="text-text-secondary">No track matches.</p>
   {:else}
-    <div class="overflow-hidden rounded border border-border">
+    <TrackList>
       {#each tracks as t, i (t.id)}
         <TrackRow tracks={tracks} index={i} onPlay={onTrackPlay} />
       {/each}
-    </div>
+    </TrackList>
     {#if query?.hasNextPage}
       <button
         type="button"