fix(web): compact PlayerBar — 3-column top row, full-width seek bottom (#358)

Replaces the kebab-with-popover PlayerOverflowMenu approach with all
player controls visible inline. Operator's stated intent was "two-row
layout with all controls visible," not "kebab hides shuffle/repeat/
queue/volume" — restructured to match.

### Compact view (below md)

  ┌─────────┬───────────┬───────────────────┐
  │ art     │ ♥   ⋮     │ 🔀 🔁 ☰            │  ← short sub-row
  │ title   │           │                   │
  │ artist  │ ⏮  ⏯  ⏭   │ volume slider     │  ← play row at full size
  ├─────────┴───────────┴───────────────────┤
  │ 0:42 ━━━━━●━━━━━━━━━━━━━━━━━━━━━━ 3:21 │
  └─────────────────────────────────────────┘

- Column 1: cover + title/artist
- Column 2: like+kebab on top sub-row, play controls (40/48/40) below
- Column 3: shuffle/repeat/queue on top, volume slider below
- Bottom: full-width seek slider with time labels

### Desktop view (md+)

Existing 3-column layout preserved; only change is the redundant
PlayerOverflowMenu kebab (which had been mounting at all widths)
is no longer there. Volume + shuffle + repeat + queue stay inline
in the right cluster as before.

### Cleanup

- Deleted PlayerOverflowMenu.svelte + its test (no callers remain)
- The TrackMenu kebab (per-track actions) stays — it's a varying
  list of actions that doesn't fit inline

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/lib/components/PlayerBar.svelte

@@ -15,7 +15,6 @@
   import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
   import LikeButton from './LikeButton.svelte';
   import TrackMenu from './TrackMenu.svelte';
-  import PlayerOverflowMenu from './PlayerOverflowMenu.svelte';
 
   const current = $derived(player.current);
 
@@ -29,7 +28,6 @@
     player.repeat === 'all' ? 'Repeat all' : 'Repeat one'
   );
 
-  // Volume icon tracks level so the right-edge anchor reads at a glance.
   const VolumeIcon = $derived(
     player.volume === 0 ? VolumeX :
     player.volume < 0.5 ? Volume1 : Volume2
@@ -49,9 +47,181 @@
 </script>
 
 {#if current}
-  <div class="flex flex-col md:flex-row md:min-h-[108px] min-h-[88px] md:items-center gap-2 md:gap-4 border-t border-border bg-surface px-3 md:px-4 py-2 md:py-1.5">
+  <!--
+    COMPACT view (below md). Layout per operator design:
+      ┌─────────┬───────────┬───────────────────┐
+      │ art     │ ♥   ⋮     │ 🔀 🔁 ☰            │  ← short sub-row
+      │ title   │           │                   │
+      │ artist  │ ⏮  ⏯  ⏭   │ volume slider     │  ← play row at full size
+      ├─────────┴───────────┴───────────────────┤
+      │ 0:42 ━━━━━●━━━━━━━━━━━━━━━━━━━━━━ 3:21 │
+      └─────────────────────────────────────────┘
+    Play controls maintain 40/48/40 size; like+kebab and column-3 sub-rows
+    are shorter so column 2's bottom edge aligns with column 3's bottom.
+  -->
+  <div class="md:hidden flex flex-col gap-1.5 border-t border-border bg-surface px-3 py-2">
+    {#if player.state === 'error'}
+      <div role="alert" class="flex items-center justify-center gap-3 text-sm text-text-primary">
+        <span>{player.error ?? 'Playback failed.'}</span>
+        <button
+          type="button"
+          class="rounded bg-accent px-3 py-1.5 text-sm text-text-primary"
+          onclick={() => playQueue(player.queue, player.index)}
+        >
+          Try again
+        </button>
+      </div>
+    {:else}
+      <!-- Top row: 3 columns -->
+      <div class="flex items-stretch gap-3">
+        <!-- Column 1: art + title + artist -->
+        <a
+          href={`/albums/${current.album_id}`}
+          aria-label="Open album"
+          class="flex min-w-0 items-center gap-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+          style="flex: 1 1 35%;"
+        >
+          <img
+            src={coverUrl(current.album_id)}
+            alt=""
+            class="h-12 w-12 shrink-0 rounded-md object-cover"
+            onerror={onCoverError}
+          />
+          <div class="min-w-0">
+            <div class="truncate text-sm font-medium text-text-primary">{current.title}</div>
+            <div class="truncate text-xs text-text-secondary">{current.artist_name}</div>
+          </div>
+        </a>
+
+        <!-- Column 2: like+kebab (top), play controls (bottom) -->
+        <div class="flex flex-col items-center justify-between gap-1 shrink-0">
+          <div class="flex items-center gap-0.5">
+            <LikeButton entityType="track" entityId={current.id} />
+            <TrackMenu track={current} direction="up" hideQueueActions />
+          </div>
+          <div class="flex items-center gap-1.5">
+            <button
+              type="button"
+              aria-label="Previous"
+              disabled={skipPrevDisabled}
+              onclick={skipPrev}
+              class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
+            >
+              <SkipBack size={18} strokeWidth={1.5} fill="currentColor" />
+            </button>
+            <button
+              type="button"
+              aria-label={player.isPlaying ? 'Pause' : 'Play'}
+              onclick={togglePlay}
+              class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-text-primary shadow transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-accent"
+            >
+              {#if player.state === 'loading' || player.state === 'idle'}
+                <Loader2 data-testid="play-spinner" size={22} strokeWidth={1.5} class="animate-spin" />
+              {:else if player.isPlaying}
+                <Pause size={22} strokeWidth={1.5} fill="currentColor" />
+              {:else}
+                <Play size={22} strokeWidth={1.5} fill="currentColor" class="ml-0.5" />
+              {/if}
+            </button>
+            <button
+              type="button"
+              aria-label="Next"
+              disabled={skipNextDisabled}
+              onclick={skipNext}
+              class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
+            >
+              <SkipForward size={18} strokeWidth={1.5} fill="currentColor" />
+            </button>
+          </div>
+        </div>
+
+        <!-- Column 3: shuffle/repeat/queue (top), volume slider (bottom) -->
+        <div class="flex min-w-0 flex-col items-stretch justify-between gap-1" style="flex: 1 1 30%;">
+          <div class="flex items-center justify-end gap-0.5">
+            <button
+              type="button"
+              aria-label="Shuffle"
+              aria-pressed={player.shuffle}
+              onclick={toggleShuffle}
+              class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.shuffle
+                ? 'bg-accent-tint text-accent'
+                : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
+            >
+              <Shuffle size={16} strokeWidth={1.5} />
+            </button>
+            <button
+              type="button"
+              aria-label={repeatLabel}
+              onclick={cycleRepeat}
+              class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.repeat !== 'off'
+                ? 'bg-accent-tint text-accent'
+                : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
+            >
+              {#if player.repeat === 'one'}
+                <Repeat1 size={16} strokeWidth={1.5} />
+              {:else}
+                <Repeat size={16} strokeWidth={1.5} />
+              {/if}
+            </button>
+            <button
+              type="button"
+              onclick={() => toggleQueueDrawer()}
+              aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
+              aria-pressed={player.queueDrawerOpen}
+              class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
+                ? 'bg-accent-tint text-accent'
+                : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
+            >
+              <ListMusic size={16} strokeWidth={1.5} />
+            </button>
+          </div>
+          <label class="flex items-center gap-1">
+            <span class="sr-only">Volume</span>
+            <VolumeIcon size={14} strokeWidth={1.5} class="shrink-0 text-text-secondary" />
+            <input
+              type="range"
+              aria-label="Volume"
+              min="0"
+              max="1"
+              step="0.01"
+              value={player.volume}
+              oninput={onVolumeInput}
+              class="min-w-0 flex-1 accent-accent"
+            />
+          </label>
+        </div>
+      </div>
+
+      <!-- Bottom row: full-width seek slider + time labels -->
+      <div class="flex items-center gap-2">
+        <span class="w-9 shrink-0 text-right text-[10px] tabular-nums text-text-secondary">
+          {formatDuration(player.position)}
+        </span>
+        <input
+          type="range"
+          aria-label="Seek"
+          min="0"
+          max={player.duration || 0}
+          step="0.1"
+          value={player.position}
+          oninput={onSeekInput}
+          class="flex-1 accent-accent"
+        />
+        <span class="w-9 shrink-0 text-[10px] tabular-nums text-text-secondary">
+          {formatDuration(player.duration)}
+        </span>
+      </div>
+    {/if}
+  </div>
+
+  <!--
+    DESKTOP view (md+). Original 3-column layout — unchanged except that
+    the redundant PlayerOverflowMenu kebab is no longer mounted (volume,
+    shuffle, repeat, queue all live inline in the right cluster).
+  -->
+  <div class="hidden md:flex md:flex-row md:min-h-[108px] md:items-center md:gap-4 border-t border-border bg-surface md:px-4 md:py-1.5">
     <!-- Left: cover + title + artist + like + menu -->
-    <div class="flex w-full md:w-72 min-w-0 items-center gap-3">
+    <div class="flex w-72 min-w-0 items-center gap-3">
       <a
         href={`/albums/${current.album_id}`}
         aria-label="Open album"
@@ -60,7 +230,7 @@
         <img
           src={coverUrl(current.album_id)}
           alt=""
-          class="h-10 w-10 md:h-24 md:w-24 rounded-md object-cover"
+          class="h-24 w-24 rounded-md object-cover"
           onerror={onCoverError}
         />
       </a>
@@ -74,14 +244,13 @@
         </a>
         {#if player.queue.length > player.index + 1}
           {@const nextTrack = player.queue[player.index + 1]}
-          <span class="text-text-secondary text-xs truncate hidden md:block">
+          <span class="block truncate text-xs text-text-secondary">
             Next · {nextTrack.title} — {nextTrack.artist_name}
           </span>
         {/if}
       </div>
       <LikeButton entityType="track" entityId={current.id} />
       <TrackMenu track={current} direction="up" hideQueueActions />
-      <PlayerOverflowMenu direction="up" />
     </div>
 
     <!-- Center: seek row + transport row -->
@@ -98,7 +267,7 @@
       </div>
     {:else}
       <div class="flex flex-1 flex-col items-stretch gap-2">
-        <!-- Transport row: prev / play / next, play is the accent focal point -->
+        <!-- Transport row -->
         <div class="flex items-center justify-center gap-3">
           <button
             type="button"
@@ -116,12 +285,7 @@
             class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-text-primary shadow transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-accent"
           >
             {#if player.state === 'loading' || player.state === 'idle'}
-              <Loader2
+              <Loader2 size={24} strokeWidth={1.5} class="animate-spin" />
-                data-testid="play-spinner"
-                size={24}
-                strokeWidth={1.5}
-                class="animate-spin"
-              />
             {:else if player.isPlaying}
               <Pause size={24} strokeWidth={1.5} fill="currentColor" />
             {:else}
@@ -140,7 +304,7 @@
         </div>
         <!-- Seek row -->
         <div class="flex items-center gap-3">
-          <span class="w-10 md:w-12 shrink-0 text-right text-[10px] md:text-xs tabular-nums text-text-secondary">
+          <span class="w-12 shrink-0 text-right text-xs tabular-nums text-text-secondary">
             {formatDuration(player.position)}
           </span>
           <input
@@ -153,15 +317,15 @@
             oninput={onSeekInput}
             class="flex-1 accent-accent"
           />
-          <span class="w-10 md:w-12 shrink-0 text-[10px] md:text-xs tabular-nums text-text-secondary">
+          <span class="w-12 shrink-0 text-xs tabular-nums text-text-secondary">
             {formatDuration(player.duration)}
           </span>
         </div>
       </div>
     {/if}
 
-    <!-- Right: shuffle + repeat + volume -->
+    <!-- Right: shuffle + repeat + queue + volume -->
-    <div class="hidden md:flex w-60 items-center justify-end gap-2">
+    <div class="flex w-60 items-center justify-end gap-2">
       <button
         type="button"
         aria-label="Shuffle"

web/src/lib/components/PlayerOverflowMenu.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-  import { MoreVertical, Shuffle, Repeat, Repeat1, ListMusic, Volume2 } from 'lucide-svelte';
-  import {
-    player, toggleShuffle, cycleRepeat, toggleQueueDrawer, setVolume
-  } from '$lib/player/store.svelte';
-  import TrackMenuItem from './TrackMenuItem.svelte';
-  import TrackMenuDivider from './TrackMenuDivider.svelte';
-
-  let { direction = 'up' }: { direction?: 'up' | 'down' } = $props();
-
-  let menuOpen = $state(false);
-
-  function toggleMenu(e: MouseEvent) {
-    e.stopPropagation();
-    menuOpen = !menuOpen;
-  }
-
-  const repeatLabel = $derived(
-    player.repeat === 'off' ? 'Repeat off' :
-    player.repeat === 'all' ? 'Repeat all' : 'Repeat one'
-  );
-
-  const repeatIcon = $derived(player.repeat === 'one' ? Repeat1 : Repeat);
-
-  function onShuffle() {
-    toggleShuffle();
-  }
-  function onRepeat() {
-    cycleRepeat();
-  }
-  function onQueue() {
-    toggleQueueDrawer();
-    menuOpen = false;
-  }
-  function onVolume(e: Event) {
-    setVolume(Number((e.currentTarget as HTMLInputElement).value));
-  }
-</script>
-
-<svelte:window onclick={() => { menuOpen = false; }} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />
-
-<div class="relative inline-block">
-  <button
-    type="button"
-    aria-label="Player options"
-    aria-haspopup="menu"
-    aria-expanded={menuOpen}
-    onclick={toggleMenu}
-    class="rounded p-1 text-text-muted hover:text-text-primary min-h-[44px] min-w-[44px]
-           flex items-center justify-center"
-  >
-    <MoreVertical size={18} strokeWidth={1} />
-  </button>
-
-  {#if menuOpen}
-    <div
-      role="menu"
-      tabindex="-1"
-      class="absolute right-0 z-20 w-56 rounded-md border border-border bg-surface p-1 shadow-lg
-             {direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'}"
-      onclick={(e) => e.stopPropagation()}
-      onkeydown={(e) => e.stopPropagation()}
-    >
-      <TrackMenuItem
-        icon={Shuffle}
-        label={player.shuffle ? 'Shuffle on' : 'Shuffle off'}
-        onclick={onShuffle}
-      />
-      <TrackMenuItem
-        icon={repeatIcon}
-        label={repeatLabel}
-        onclick={onRepeat}
-      />
-      <TrackMenuItem
-        icon={ListMusic}
-        label={player.queueDrawerOpen ? 'Hide queue' : 'Show queue'}
-        onclick={onQueue}
-      />
-
-      <TrackMenuDivider />
-
-      <div class="flex items-center gap-2 px-2 py-1.5">
-        <Volume2 size={14} strokeWidth={1} class="shrink-0 text-text-secondary" />
-        <input
-          type="range"
-          aria-label="Volume"
-          min="0"
-          max="1"
-          step="0.01"
-          value={player.volume}
-          oninput={onVolume}
-          class="flex-1 accent-accent"
-        />
-      </div>
-    </div>
-  {/if}
-</div>

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

@@ -1,31 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import PlayerOverflowMenu from './PlayerOverflowMenu.svelte';
-
-describe('PlayerOverflowMenu', () => {
-  it('renders the trigger button closed by default', () => {
-    render(PlayerOverflowMenu);
-    const trigger = screen.getByLabelText('Player options');
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('opens the menu on click and shows shuffle/repeat/queue/volume', async () => {
-    render(PlayerOverflowMenu);
-    const trigger = screen.getByLabelText('Player options');
-    await fireEvent.click(trigger);
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    expect(screen.getByText(/shuffle/i)).toBeInTheDocument();
-    expect(screen.getByText(/repeat/i)).toBeInTheDocument();
-    expect(screen.getByText(/queue/i)).toBeInTheDocument();
-    expect(screen.getByLabelText('Volume')).toBeInTheDocument();
-  });
-
-  it('Escape key closes the menu', async () => {
-    render(PlayerOverflowMenu);
-    await fireEvent.click(screen.getByLabelText('Player options'));
-    expect(screen.getByLabelText('Player options').getAttribute('aria-expanded')).toBe('true');
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    await Promise.resolve();
-    expect(screen.getByLabelText('Player options').getAttribute('aria-expanded')).toBe('false');
-  });
-});