From 222be5e9a505cb27f32052637a4cc4c64cfa7770 Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Wed, 8 Jul 2026 09:13:05 -0700
Subject: [PATCH 1/4] feat: add now-playing drawer for quick track list access
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking the now-playing bar's album art previously navigated the main
view away from whatever was being browsed. It now slides in a 420px
drawer showing the playing album's metadata and track list instead,
leaving the main view untouched — this also sets up a home for future
playlist queues, which won't have an albumId to navigate to.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../nowplaying/NowPlayingDrawer.svelte        | 330 ++++++++++++++++++
 .../components/transport/TransportBar.svelte  |  11 +-
 src/lib/stores/library.svelte.ts              |  13 -
 src/lib/stores/ui.svelte.ts                   |  10 +
 src/routes/+layout.svelte                     |   2 +
 5 files changed, 348 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/components/nowplaying/NowPlayingDrawer.svelte

diff --git a/src/lib/components/nowplaying/NowPlayingDrawer.svelte b/src/lib/components/nowplaying/NowPlayingDrawer.svelte
new file mode 100644
index 0000000..b4824cc
--- /dev/null
+++ b/src/lib/components/nowplaying/NowPlayingDrawer.svelte
@@ -0,0 +1,330 @@
+<script lang="ts">
+  import { fade, fly } from "svelte/transition";
+  import { convertFileSrc } from "@tauri-apps/api/core";
+  import { Play, X } from "@lucide/svelte";
+  import { commands } from "$lib/api/commands";
+  import { library } from "$lib/stores/library.svelte";
+  import { player } from "$lib/stores/player.svelte";
+  import { ui } from "$lib/stores/ui.svelte";
+  import { formatDuration } from "$lib/format";
+  import type { TrackRow } from "$lib/types";
+  import StarRating from "$lib/components/rating/StarRating.svelte";
+
+  const DRAWER_WIDTH_PIXELS = 420;
+  const TRANSITION_DURATION_MILLISECONDS = 200;
+
+  let tracks = $state<TrackRow[]>([]);
+  let artModalOpen = $state(false);
+
+  const album = $derived(
+    library.allAlbums.find((a) => a.id === player.snapshot.album_id) ?? null,
+  );
+
+  const totalDurationMs = $derived(tracks.reduce((sum, t) => sum + t.duration_ms, 0));
+
+  $effect(() => {
+    const albumId = player.snapshot.album_id;
+    if (albumId === null) {
+      tracks = [];
+      return;
+    }
+    commands.libraryGetTracksByAlbum(albumId).then((newTracks) => {
+      tracks = newTracks;
+    });
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key !== "Escape") return;
+    if (artModalOpen) {
+      artModalOpen = false;
+    } else {
+      ui.closeNowPlayingDrawer();
+    }
+  }
+
+  function playFrom(index: number) {
+    player.playQueue(
+      tracks.map((t) => t.id),
+      index,
+    );
+  }
+</script>
+
+<svelte:window onkeydown={ui.nowPlayingDrawerOpen ? handleKeydown : undefined} />
+
+{#if ui.nowPlayingDrawerOpen}
+  <div
+    class="backdrop"
+    role="presentation"
+    transition:fade={{ duration: TRANSITION_DURATION_MILLISECONDS }}
+    onclick={() => ui.closeNowPlayingDrawer()}
+  ></div>
+  <div
+    class="drawer"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Now playing"
+    transition:fly={{ x: DRAWER_WIDTH_PIXELS, duration: TRANSITION_DURATION_MILLISECONDS }}
+  >
+    {#if artModalOpen && album?.art_path}
+      <div
+        class="art-modal"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        onclick={() => (artModalOpen = false)}
+        onkeydown={handleKeydown}
+      >
+        <button
+          class="art-modal-close"
+          onclick={(e) => {
+            e.stopPropagation();
+            artModalOpen = false;
+          }}
+          aria-label="Close"
+        >
+          <X size={20} />
+        </button>
+        <img src={convertFileSrc(album.art_path)} alt={album.title} class="art-modal-img" />
+      </div>
+    {/if}
+
+    <div class="header">
+      {#if album}
+        <div class="art">
+          {#if album.art_path}
+            <button
+              class="art-btn"
+              onclick={() => (artModalOpen = true)}
+              aria-label="View full artwork"
+            >
+              <img src={convertFileSrc(album.art_path)} alt={album.title} />
+            </button>
+          {:else}
+            <div class="art-placeholder"></div>
+          {/if}
+        </div>
+        <div class="text">
+          <div class="title">{album.title}</div>
+          <div class="subtitle">
+            {album.album_artist}{album.year ? ` · ${album.year}` : ""}{totalDurationMs > 0
+              ? ` · ${formatDuration(totalDurationMs)}`
+              : ""}
+          </div>
+          <div class="rating-row">
+            <StarRating rating={album.rating} size={16} onRate={(r) => library.setAlbumRating(album.id, r)} />
+          </div>
+        </div>
+      {/if}
+      <button class="close" onclick={() => ui.closeNowPlayingDrawer()} aria-label="Close now playing panel">
+        <X size={18} />
+      </button>
+    </div>
+
+    <div class="track-scroll">
+      {#each tracks as t, index (t.id)}
+        <button class="track-row" class:playing={t.id === player.snapshot.track_id} onclick={() => playFrom(index)}>
+          <span class="col-no">
+            {#if t.id === player.snapshot.track_id}
+              <Play size={12} fill="currentColor" />
+            {:else}
+              {t.track_no ?? ""}
+            {/if}
+          </span>
+          <span class="col-title">{t.title}</span>
+          <span class="col-duration">{formatDuration(t.duration_ms)}</span>
+        </button>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 150;
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 420px;
+    z-index: 151;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-elevated);
+    border-left: 1px solid var(--border);
+  }
+
+  .header {
+    display: flex;
+    align-items: flex-start;
+    gap: 1em;
+    padding: 1.5em;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .text {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+  }
+
+  .close:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  .art {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: var(--bg-hover);
+    flex-shrink: 0;
+  }
+
+  .art img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .art-btn {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: zoom-in;
+  }
+
+  .art-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    background: rgba(0, 0, 0, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: zoom-out;
+  }
+
+  .art-modal-close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .art-modal-close:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  .art-modal-img {
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
+    border-radius: var(--radius);
+  }
+
+  .art-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--bg-hover), var(--bg-selected));
+  }
+
+  .title {
+    font-weight: 500;
+    font-size: 1.1em;
+    overflow-wrap: break-word;
+  }
+
+  .subtitle {
+    color: var(--text-secondary);
+    font-size: 1em;
+  }
+
+  .rating-row {
+    margin-top: 0.4em;
+  }
+
+  .track-scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5em 1em;
+  }
+
+  .track-row {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 0.5em 0.75em;
+    border-radius: var(--radius-sm);
+    text-align: left;
+  }
+
+  .track-row:hover {
+    background: var(--bg-hover);
+  }
+
+  .track-row.playing {
+    background: var(--bg-selected);
+    color: var(--accent-hover);
+  }
+
+  .col-no {
+    width: 2em;
+    color: var(--text-tertiary);
+    text-align: right;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .col-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .col-duration {
+    color: var(--text-secondary);
+    font-size: 0.85em;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/src/lib/components/transport/TransportBar.svelte b/src/lib/components/transport/TransportBar.svelte
index da0f13a..e09a1fc 100644
--- a/src/lib/components/transport/TransportBar.svelte
+++ b/src/lib/components/transport/TransportBar.svelte
@@ -3,20 +3,21 @@
   import { Pause, Play, SkipBack, SkipForward, Volume2 } from "@lucide/svelte";
   import { library } from "$lib/stores/library.svelte";
   import { player } from "$lib/stores/player.svelte";
+  import { ui } from "$lib/stores/ui.svelte";
   import { formatDuration } from "$lib/format";
   import StarRating from "$lib/components/rating/StarRating.svelte";
   import Equalizer from "$lib/components/transport/Equalizer.svelte";
 
   // Looked up from the complete unfiltered list (not the artist-filtered
   // `albums`) since playback can be on an album outside whatever's
-  // currently browsed — same reasoning as goToAlbum below.
+  // currently browsed — same reasoning the now-playing drawer uses.
   const currentAlbum = $derived(
     library.allAlbums.find((a) => a.id === player.snapshot.album_id) ?? null,
   );
 
-  function goToCurrentAlbum() {
+  function openNowPlayingDrawer() {
     if (player.snapshot.album_id !== null) {
-      library.goToAlbum(player.snapshot.album_id);
+      ui.openNowPlayingDrawer();
     }
   }
 
@@ -42,9 +43,9 @@
 <div class="transport">
   <button
     class="now-playing"
-    onclick={goToCurrentAlbum}
+    onclick={openNowPlayingDrawer}
     disabled={player.snapshot.album_id === null}
-    aria-label="Go to album"
+    aria-label="Show now playing"
   >
     <div class="art">
       {#if player.snapshot.art_path}
diff --git a/src/lib/stores/library.svelte.ts b/src/lib/stores/library.svelte.ts
index 55fd3b1..6ebaf4c 100644
--- a/src/lib/stores/library.svelte.ts
+++ b/src/lib/stores/library.svelte.ts
@@ -66,18 +66,6 @@ function createLibraryStore() {
     await selectAlbum(albumId);
   }
 
-  // Navigates to an album's track list regardless of the currently
-  // selected artist filter (e.g. from the now-playing bar, which can
-  // point at an album outside whatever's currently browsed) by resetting
-  // to "All Albums" first so the target album is guaranteed to be in the
-  // loaded list.
-  async function goToAlbum(albumId: number) {
-    isViewingHidden = false;
-    selectedArtistId = null;
-    await loadAlbums();
-    await selectAlbum(albumId);
-  }
-
   async function selectHidden() {
     isViewingHidden = true;
     selectedArtistId = null;
@@ -187,7 +175,6 @@ function createLibraryStore() {
     selectArtist,
     selectAlbum,
     selectArtistAndAlbum,
-    goToAlbum,
     selectHidden,
     backToAlbums,
     setAlbumRating,
diff --git a/src/lib/stores/ui.svelte.ts b/src/lib/stores/ui.svelte.ts
index 50337c5..e2bb0c7 100644
--- a/src/lib/stores/ui.svelte.ts
+++ b/src/lib/stores/ui.svelte.ts
@@ -4,6 +4,7 @@ function createUiStore() {
   let showSettings = $state(false);
   let showDeviceSync = $state(false);
   let albumSort = $state<AlbumSort>('date_added');
+  let nowPlayingDrawerOpen = $state(false);
 
   return {
     get showSettings() {
@@ -15,6 +16,9 @@ function createUiStore() {
     get albumSort() {
       return albumSort;
     },
+    get nowPlayingDrawerOpen() {
+      return nowPlayingDrawerOpen;
+    },
     openSettings() {
       showSettings = true;
       showDeviceSync = false;
@@ -32,6 +36,12 @@ function createUiStore() {
     setAlbumSort(sort: AlbumSort) {
       albumSort = sort;
     },
+    openNowPlayingDrawer() {
+      nowPlayingDrawerOpen = true;
+    },
+    closeNowPlayingDrawer() {
+      nowPlayingDrawerOpen = false;
+    },
   };
 }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9a149ee..61bb79e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
   import TransportBar from "$lib/components/transport/TransportBar.svelte";
   import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
   import DeviceSyncPanel from "$lib/components/device/DeviceSyncPanel.svelte";
+  import NowPlayingDrawer from "$lib/components/nowplaying/NowPlayingDrawer.svelte";
   import { library } from "$lib/stores/library.svelte";
   import { player } from "$lib/stores/player.svelte";
   import { ui, type AlbumSort } from "$lib/stores/ui.svelte";
@@ -112,6 +113,7 @@
   <footer class="transport-bar">
     <TransportBar />
   </footer>
+  <NowPlayingDrawer />
 </div>
 
 <style>

From 0be720a7cb3f019ecb8d2848a7874bd3b80369a8 Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Wed, 8 Jul 2026 20:21:47 -0700
Subject: [PATCH 2/4] refactor: extract shared album header/track row, fix
 drawer review findings

Addresses code review feedback on the now-playing drawer:
- Extract AlbumHeader and TrackRow into src/lib/components/album/, shared
  by TrackTable and NowPlayingDrawer, instead of near-duplicated markup/CSS.
- Gate the drawer's track fetch on ui.nowPlayingDrawerOpen so normal
  playback no longer fires a background IPC call on every track/album
  change, and guard against a stale fetch overwriting newer results.
- Add library.findAlbumById (checks hidden albums too) so the header no
  longer silently disappears if the playing album has been hidden.
- Add focus management to the drawer: initial focus on the close button,
  a Tab focus trap, and focus restored to the trigger on close.
- Make the drawer mutually exclusive with the Settings/Device Sync panels.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/lib/components/album/AlbumHeader.svelte   | 179 +++++++++++
 src/lib/components/album/TrackRow.svelte      |  78 +++++
 .../nowplaying/NowPlayingDrawer.svelte        | 289 +++++-------------
 .../components/tracklist/TrackTable.svelte    | 223 +-------------
 .../components/transport/TransportBar.svelte  |   9 +-
 src/lib/stores/library.svelte.ts              |  13 +
 src/lib/stores/ui.svelte.ts                   |   7 +
 7 files changed, 369 insertions(+), 429 deletions(-)
 create mode 100644 src/lib/components/album/AlbumHeader.svelte
 create mode 100644 src/lib/components/album/TrackRow.svelte

diff --git a/src/lib/components/album/AlbumHeader.svelte b/src/lib/components/album/AlbumHeader.svelte
new file mode 100644
index 0000000..80d75cb
--- /dev/null
+++ b/src/lib/components/album/AlbumHeader.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { convertFileSrc } from "@tauri-apps/api/core";
+  import { X } from "@lucide/svelte";
+  import type { AlbumRow } from "$lib/types";
+  import { formatDuration } from "$lib/format";
+  import StarRating from "$lib/components/rating/StarRating.svelte";
+
+  let {
+    album,
+    totalDurationMs,
+    onRate,
+    artModalOpen = $bindable(false),
+    leading,
+    trailing,
+  }: {
+    album: AlbumRow | null;
+    totalDurationMs: number;
+    onRate: (rating: number | null) => void;
+    artModalOpen?: boolean;
+    leading?: Snippet;
+    trailing?: Snippet;
+  } = $props();
+</script>
+
+{#if artModalOpen && album?.art_path}
+  <div
+    class="art-modal"
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+    onclick={() => (artModalOpen = false)}
+    onkeydown={(e) => {
+      if (e.key === "Escape") artModalOpen = false;
+    }}
+  >
+    <button
+      class="art-modal-close"
+      onclick={(e) => {
+        e.stopPropagation();
+        artModalOpen = false;
+      }}
+      aria-label="Close"
+    >
+      <X size={20} />
+    </button>
+    <img src={convertFileSrc(album.art_path)} alt={album.title} class="art-modal-img" />
+  </div>
+{/if}
+
+<div class="header">
+  {@render leading?.()}
+  {#if album}
+    <div class="art">
+      {#if album.art_path}
+        <button
+          class="art-btn"
+          onclick={() => (artModalOpen = true)}
+          aria-label="View full artwork"
+        >
+          <img src={convertFileSrc(album.art_path)} alt={album.title} />
+        </button>
+      {:else}
+        <div class="art-placeholder"></div>
+      {/if}
+    </div>
+    <div class="text">
+      <div class="title">{album.title}</div>
+      <div class="subtitle">
+        {album.album_artist}{album.year ? ` · ${album.year}` : ""}{totalDurationMs > 0
+          ? ` · ${formatDuration(totalDurationMs)}`
+          : ""}
+      </div>
+      <div class="rating-row">
+        <StarRating rating={album.rating} size={16} onRate={(r) => onRate(r)} />
+      </div>
+    </div>
+  {/if}
+  {@render trailing?.()}
+</div>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    padding: 1.5em;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .art {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: var(--bg-hover);
+    flex-shrink: 0;
+  }
+
+  .art img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .art-btn {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: zoom-in;
+  }
+
+  .art-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    background: rgba(0, 0, 0, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: zoom-out;
+  }
+
+  .art-modal-close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .art-modal-close:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  .art-modal-img {
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
+    border-radius: var(--radius);
+  }
+
+  .art-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--bg-hover), var(--bg-selected));
+  }
+
+  .text {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .title {
+    font-weight: 500;
+    font-size: 1.25em;
+    overflow-wrap: break-word;
+  }
+
+  .subtitle {
+    color: var(--text-secondary);
+    font-size: 1em;
+  }
+
+  .rating-row {
+    margin-top: 0.4em;
+  }
+</style>
diff --git a/src/lib/components/album/TrackRow.svelte b/src/lib/components/album/TrackRow.svelte
new file mode 100644
index 0000000..a8381c4
--- /dev/null
+++ b/src/lib/components/album/TrackRow.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { Play } from "@lucide/svelte";
+  import type { TrackRow as TrackRowData } from "$lib/types";
+  import { formatDuration } from "$lib/format";
+
+  let {
+    track,
+    isPlaying,
+    onclick,
+    style = "",
+  }: {
+    track: TrackRowData;
+    isPlaying: boolean;
+    onclick: () => void;
+    style?: string;
+  } = $props();
+</script>
+
+<button class="track-row" class:playing={isPlaying} {style} {onclick}>
+  <span class="col-no">
+    {#if isPlaying}
+      <Play size={12} fill="currentColor" />
+    {:else}
+      {track.track_no ?? ""}
+    {/if}
+  </span>
+  <span class="col-title" title={track.title}>{track.title}</span>
+  <span class="col-duration">{formatDuration(track.duration_ms)}</span>
+</button>
+
+<style>
+  .track-row {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    width: 100%;
+    min-height: 36px;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 0 0.75em;
+    border-radius: var(--radius-sm);
+    text-align: left;
+  }
+
+  .track-row:hover {
+    background: var(--bg-hover);
+  }
+
+  .track-row.playing {
+    background: var(--bg-selected);
+    color: var(--accent-hover);
+  }
+
+  .col-no {
+    width: 2em;
+    color: var(--text-tertiary);
+    text-align: right;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .col-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .col-duration {
+    color: var(--text-secondary);
+    font-size: 0.85em;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/src/lib/components/nowplaying/NowPlayingDrawer.svelte b/src/lib/components/nowplaying/NowPlayingDrawer.svelte
index b4824cc..a847e46 100644
--- a/src/lib/components/nowplaying/NowPlayingDrawer.svelte
+++ b/src/lib/components/nowplaying/NowPlayingDrawer.svelte
@@ -1,44 +1,84 @@
 <script lang="ts">
   import { fade, fly } from "svelte/transition";
-  import { convertFileSrc } from "@tauri-apps/api/core";
-  import { Play, X } from "@lucide/svelte";
+  import { X } from "@lucide/svelte";
   import { commands } from "$lib/api/commands";
   import { library } from "$lib/stores/library.svelte";
   import { player } from "$lib/stores/player.svelte";
   import { ui } from "$lib/stores/ui.svelte";
-  import { formatDuration } from "$lib/format";
-  import type { TrackRow } from "$lib/types";
-  import StarRating from "$lib/components/rating/StarRating.svelte";
+  import type { TrackRow as TrackRowData } from "$lib/types";
+  import AlbumHeader from "$lib/components/album/AlbumHeader.svelte";
+  import TrackRow from "$lib/components/album/TrackRow.svelte";
 
   const DRAWER_WIDTH_PIXELS = 420;
   const TRANSITION_DURATION_MILLISECONDS = 200;
 
-  let tracks = $state<TrackRow[]>([]);
+  const FOCUSABLE_SELECTOR =
+    'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+  let tracks = $state<TrackRowData[]>([]);
   let artModalOpen = $state(false);
+  let drawerEl: HTMLDivElement | undefined = $state();
+  let closeButtonEl: HTMLButtonElement | undefined = $state();
+  let previouslyFocusedElement: HTMLElement | null = null;
 
   const album = $derived(
-    library.allAlbums.find((a) => a.id === player.snapshot.album_id) ?? null,
+    player.snapshot.album_id !== null ? library.findAlbumById(player.snapshot.album_id) : null,
   );
 
   const totalDurationMs = $derived(tracks.reduce((sum, t) => sum + t.duration_ms, 0));
 
+  // Gated on nowPlayingDrawerOpen so normal playback (album/track changes
+  // while the drawer is closed) never fires this IPC call in the
+  // background — only re-fetches while the drawer is actually visible.
   $effect(() => {
+    if (!ui.nowPlayingDrawerOpen) return;
     const albumId = player.snapshot.album_id;
     if (albumId === null) {
       tracks = [];
       return;
     }
+    // Guards against out-of-order resolution if album_id changes again
+    // before this fetch completes (e.g. rapid skips across an album
+    // boundary) — an older in-flight fetch must not clobber newer tracks.
     commands.libraryGetTracksByAlbum(albumId).then((newTracks) => {
-      tracks = newTracks;
+      if (player.snapshot.album_id === albumId) tracks = newTracks;
     });
   });
 
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key !== "Escape") return;
-    if (artModalOpen) {
-      artModalOpen = false;
+  $effect(() => {
+    if (ui.nowPlayingDrawerOpen) {
+      previouslyFocusedElement = document.activeElement as HTMLElement | null;
+      closeButtonEl?.focus();
     } else {
-      ui.closeNowPlayingDrawer();
+      previouslyFocusedElement?.focus();
+      previouslyFocusedElement = null;
+    }
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      if (artModalOpen) {
+        artModalOpen = false;
+      } else {
+        ui.closeNowPlayingDrawer();
+      }
+      return;
+    }
+    if (e.key === "Tab") trapFocus(e);
+  }
+
+  function trapFocus(e: KeyboardEvent) {
+    if (!drawerEl) return;
+    const focusables = drawerEl.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    if (focusables.length === 0) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
     }
   }
 
@@ -64,76 +104,32 @@
     role="dialog"
     aria-modal="true"
     aria-label="Now playing"
+    bind:this={drawerEl}
     transition:fly={{ x: DRAWER_WIDTH_PIXELS, duration: TRANSITION_DURATION_MILLISECONDS }}
   >
-    {#if artModalOpen && album?.art_path}
-      <div
-        class="art-modal"
-        role="dialog"
-        aria-modal="true"
-        tabindex="-1"
-        onclick={() => (artModalOpen = false)}
-        onkeydown={handleKeydown}
-      >
+    <AlbumHeader
+      {album}
+      {totalDurationMs}
+      onRate={(r) => {
+        if (album) library.setAlbumRating(album.id, r);
+      }}
+      bind:artModalOpen
+    >
+      {#snippet trailing()}
         <button
-          class="art-modal-close"
-          onclick={(e) => {
-            e.stopPropagation();
-            artModalOpen = false;
-          }}
-          aria-label="Close"
+          class="close"
+          bind:this={closeButtonEl}
+          onclick={() => ui.closeNowPlayingDrawer()}
+          aria-label="Close now playing panel"
         >
-          <X size={20} />
+          <X size={18} />
         </button>
-        <img src={convertFileSrc(album.art_path)} alt={album.title} class="art-modal-img" />
-      </div>
-    {/if}
-
-    <div class="header">
-      {#if album}
-        <div class="art">
-          {#if album.art_path}
-            <button
-              class="art-btn"
-              onclick={() => (artModalOpen = true)}
-              aria-label="View full artwork"
-            >
-              <img src={convertFileSrc(album.art_path)} alt={album.title} />
-            </button>
-          {:else}
-            <div class="art-placeholder"></div>
-          {/if}
-        </div>
-        <div class="text">
-          <div class="title">{album.title}</div>
-          <div class="subtitle">
-            {album.album_artist}{album.year ? ` · ${album.year}` : ""}{totalDurationMs > 0
-              ? ` · ${formatDuration(totalDurationMs)}`
-              : ""}
-          </div>
-          <div class="rating-row">
-            <StarRating rating={album.rating} size={16} onRate={(r) => library.setAlbumRating(album.id, r)} />
-          </div>
-        </div>
-      {/if}
-      <button class="close" onclick={() => ui.closeNowPlayingDrawer()} aria-label="Close now playing panel">
-        <X size={18} />
-      </button>
-    </div>
+      {/snippet}
+    </AlbumHeader>
 
     <div class="track-scroll">
       {#each tracks as t, index (t.id)}
-        <button class="track-row" class:playing={t.id === player.snapshot.track_id} onclick={() => playFrom(index)}>
-          <span class="col-no">
-            {#if t.id === player.snapshot.track_id}
-              <Play size={12} fill="currentColor" />
-            {:else}
-              {t.track_no ?? ""}
-            {/if}
-          </span>
-          <span class="col-title">{t.title}</span>
-          <span class="col-duration">{formatDuration(t.duration_ms)}</span>
-        </button>
+        <TrackRow track={t} isPlaying={t.id === player.snapshot.track_id} onclick={() => playFrom(index)} />
       {/each}
     </div>
   </div>
@@ -160,19 +156,6 @@
     border-left: 1px solid var(--border);
   }
 
-  .header {
-    display: flex;
-    align-items: flex-start;
-    gap: 1em;
-    padding: 1.5em;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .text {
-    min-width: 0;
-    flex: 1;
-  }
-
   .close {
     display: flex;
     align-items: center;
@@ -192,139 +175,9 @@
     background: var(--bg-hover);
   }
 
-  .art {
-    width: 80px;
-    height: 80px;
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    background: var(--bg-hover);
-    flex-shrink: 0;
-  }
-
-  .art img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .art-btn {
-    display: block;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: zoom-in;
-  }
-
-  .art-modal {
-    position: fixed;
-    inset: 0;
-    z-index: 200;
-    background: rgba(0, 0, 0, 0.85);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: zoom-out;
-  }
-
-  .art-modal-close {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-    background: rgba(0, 0, 0, 0.5);
-    border: none;
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    color: #fff;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .art-modal-close:hover {
-    background: rgba(0, 0, 0, 0.8);
-  }
-
-  .art-modal-img {
-    max-width: 90vw;
-    max-height: 90vh;
-    object-fit: contain;
-    border-radius: var(--radius);
-  }
-
-  .art-placeholder {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, var(--bg-hover), var(--bg-selected));
-  }
-
-  .title {
-    font-weight: 500;
-    font-size: 1.1em;
-    overflow-wrap: break-word;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    font-size: 1em;
-  }
-
-  .rating-row {
-    margin-top: 0.4em;
-  }
-
   .track-scroll {
     flex: 1;
     overflow-y: auto;
     padding: 0.5em 1em;
   }
-
-  .track-row {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 1em;
-    background: none;
-    border: none;
-    color: var(--text-primary);
-    cursor: pointer;
-    padding: 0.5em 0.75em;
-    border-radius: var(--radius-sm);
-    text-align: left;
-  }
-
-  .track-row:hover {
-    background: var(--bg-hover);
-  }
-
-  .track-row.playing {
-    background: var(--bg-selected);
-    color: var(--accent-hover);
-  }
-
-  .col-no {
-    width: 2em;
-    color: var(--text-tertiary);
-    text-align: right;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .col-title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .col-duration {
-    color: var(--text-secondary);
-    font-size: 0.85em;
-    flex-shrink: 0;
-  }
 </style>
diff --git a/src/lib/components/tracklist/TrackTable.svelte b/src/lib/components/tracklist/TrackTable.svelte
index bfae4cc..bb4af35 100644
--- a/src/lib/components/tracklist/TrackTable.svelte
+++ b/src/lib/components/tracklist/TrackTable.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   import { createVirtualizer } from "@tanstack/svelte-virtual";
-  import { convertFileSrc } from "@tauri-apps/api/core";
-  import { ArrowLeft, Play, X } from "@lucide/svelte";
+  import { ArrowLeft } from "@lucide/svelte";
   import { get } from "svelte/store";
   import { library } from "$lib/stores/library.svelte";
   import { player } from "$lib/stores/player.svelte";
-  import { formatDuration } from "$lib/format";
-  import StarRating from "$lib/components/rating/StarRating.svelte";
+  import AlbumHeader from "$lib/components/album/AlbumHeader.svelte";
+  import TrackRow from "$lib/components/album/TrackRow.svelte";
 
   const ROW_HEIGHT = 36;
 
@@ -45,76 +44,26 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if artModalOpen && album?.art_path}
-  <div
-    class="art-modal"
-    role="dialog"
-    aria-modal="true"
-    tabindex="-1"
-    onclick={() => (artModalOpen = false)}
-    onkeydown={handleKeydown}
-  >
-    <button
-      class="art-modal-close"
-      onclick={(e) => { e.stopPropagation(); artModalOpen = false; }}
-      aria-label="Close"
-    >
-      <X size={20} />
-    </button>
-    <img
-      src={convertFileSrc(album.art_path)}
-      alt={album.title}
-      class="art-modal-img"
-    />
-  </div>
-{/if}
-
 <div class="track-view">
-  <div class="header">
-    <button class="back" onclick={() => library.backToAlbums()}>
-      <ArrowLeft size={16} />
-      Albums
-    </button>
-    {#if album}
-      <div class="art">
-        {#if album.art_path}
-          <button class="art-btn" onclick={() => (artModalOpen = true)} aria-label="View full artwork">
-            <img src={convertFileSrc(album.art_path)} alt={album.title} />
-          </button>
-        {:else}
-          <div class="art-placeholder"></div>
-        {/if}
-      </div>
-      <div>
-        <div class="title">{album.title}</div>
-        <div class="subtitle">{album.album_artist}{album.year ? ` · ${album.year}` : ""}{totalDurationMs > 0 ? ` · ${formatDuration(totalDurationMs)}` : ""}</div>
-        <div class="rating-row">
-          <StarRating rating={album.rating} size={16} onRate={(r) => library.setAlbumRating(album.id, r)} />
-        </div>
-      </div>
-    {/if}
-  </div>
+  <AlbumHeader {album} {totalDurationMs} onRate={(r) => { if (album) library.setAlbumRating(album.id, r); }} bind:artModalOpen>
+    {#snippet leading()}
+      <button class="back" onclick={() => library.backToAlbums()}>
+        <ArrowLeft size={16} />
+        Albums
+      </button>
+    {/snippet}
+  </AlbumHeader>
 
   <div bind:this={scrollEl} class="track-scroll">
     <div class="track-inner" style="height: {$virtualizer.getTotalSize()}px;">
       {#each $virtualizer.getVirtualItems() as row (row.key)}
         {@const t = library.tracks[row.index]}
-        <button
-          class="track-row"
-          class:playing={t.id === player.snapshot.track_id}
-          style="transform: translateY({row.start}px); height: {ROW_HEIGHT}px;"
+        <TrackRow
+          track={t}
+          isPlaying={t.id === player.snapshot.track_id}
           onclick={() => playFrom(row.index)}
-        >
-          <span class="col-no">
-            {#if t.id === player.snapshot.track_id}
-              <Play size={12} fill="currentColor" />
-            {:else}
-              {t.track_no ?? ""}
-            {/if}
-          </span>
-          <span class="col-title">{t.title}</span>
-          <span class="col-duration">{formatDuration(t.duration_ms)}</span>
-        </button>
+          style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({row.start}px); height: {ROW_HEIGHT}px;"
+        />
       {/each}
     </div>
   </div>
@@ -128,14 +77,6 @@
     flex-direction: column;
   }
 
-  .header {
-    display: flex;
-    align-items: center;
-    gap: 1em;
-    padding: 1.5em;
-    border-bottom: 1px solid var(--border);
-  }
-
   .back {
     display: flex;
     align-items: center;
@@ -153,89 +94,6 @@
     color: var(--text-primary);
   }
 
-  .art {
-    width: 80px;
-    height: 80px;
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    background: var(--bg-hover);
-    flex-shrink: 0;
-  }
-
-  .art img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .art-btn {
-    display: block;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: zoom-in;
-  }
-
-  .art-modal {
-    position: fixed;
-    inset: 0;
-    z-index: 200;
-    background: rgba(0, 0, 0, 0.85);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: zoom-out;
-  }
-
-  .art-modal-close {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-    background: rgba(0, 0, 0, 0.5);
-    border: none;
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    color: #fff;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .art-modal-close:hover {
-    background: rgba(0, 0, 0, 0.8);
-  }
-
-  .art-modal-img {
-    max-width: 90vw;
-    max-height: 90vh;
-    object-fit: contain;
-    border-radius: var(--radius);
-  }
-
-  .art-placeholder {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, var(--bg-hover), var(--bg-selected));
-  }
-
-  .title {
-    font-weight: 500;
-    font-size: 1.25em;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    font-size: 1em;
-  }
-
-  .rating-row {
-    margin-top: 0.4em;
-  }
-
   .track-scroll {
     flex: 1;
     overflow-y: auto;
@@ -246,53 +104,4 @@
     position: relative;
     width: 100%;
   }
-
-  .track-row {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 1em;
-    background: none;
-    border: none;
-    color: var(--text-primary);
-    cursor: pointer;
-    padding: 0 0.75em;
-    border-radius: var(--radius-sm);
-    text-align: left;
-  }
-
-  .track-row:hover {
-    background: var(--bg-hover);
-  }
-
-  .track-row.playing {
-    background: var(--bg-selected);
-    color: var(--accent-hover);
-  }
-
-  .col-no {
-    width: 2em;
-    color: var(--text-tertiary);
-    text-align: right;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .col-title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .col-duration {
-    color: var(--text-secondary);
-    font-size: 0.85em;
-    flex-shrink: 0;
-  }
 </style>
diff --git a/src/lib/components/transport/TransportBar.svelte b/src/lib/components/transport/TransportBar.svelte
index e09a1fc..7cf019f 100644
--- a/src/lib/components/transport/TransportBar.svelte
+++ b/src/lib/components/transport/TransportBar.svelte
@@ -8,11 +8,12 @@
   import StarRating from "$lib/components/rating/StarRating.svelte";
   import Equalizer from "$lib/components/transport/Equalizer.svelte";
 
-  // Looked up from the complete unfiltered list (not the artist-filtered
-  // `albums`) since playback can be on an album outside whatever's
-  // currently browsed — same reasoning the now-playing drawer uses.
+  // Looked up via findAlbumById (checks hidden albums too, not just the
+  // artist-filtered `albums`) since playback can be on an album outside
+  // whatever's currently browsed, or one the user has since hidden — same
+  // reasoning the now-playing drawer uses.
   const currentAlbum = $derived(
-    library.allAlbums.find((a) => a.id === player.snapshot.album_id) ?? null,
+    player.snapshot.album_id !== null ? library.findAlbumById(player.snapshot.album_id) : null,
   );
 
   function openNowPlayingDrawer() {
diff --git a/src/lib/stores/library.svelte.ts b/src/lib/stores/library.svelte.ts
index 6ebaf4c..508306e 100644
--- a/src/lib/stores/library.svelte.ts
+++ b/src/lib/stores/library.svelte.ts
@@ -66,6 +66,18 @@ function createLibraryStore() {
     await selectAlbum(albumId);
   }
 
+  // Checks `hiddenAlbums` too, unlike a plain `allAlbums.find(...)` — needed
+  // anywhere an album is looked up by id outside of the main browsing flow
+  // (e.g. the now-playing bar/drawer), since playback can point at an
+  // album the user has since hidden, and `allAlbums` excludes those.
+  function findAlbumById(albumId: number): AlbumRow | null {
+    return (
+      allAlbums.find((a) => a.id === albumId) ??
+      hiddenAlbums.find((a) => a.id === albumId) ??
+      null
+    );
+  }
+
   async function selectHidden() {
     isViewingHidden = true;
     selectedArtistId = null;
@@ -172,6 +184,7 @@ function createLibraryStore() {
     get hasRoots() {
       return hasRoots;
     },
+    findAlbumById,
     selectArtist,
     selectAlbum,
     selectArtistAndAlbum,
diff --git a/src/lib/stores/ui.svelte.ts b/src/lib/stores/ui.svelte.ts
index e2bb0c7..f2a798b 100644
--- a/src/lib/stores/ui.svelte.ts
+++ b/src/lib/stores/ui.svelte.ts
@@ -22,6 +22,7 @@ function createUiStore() {
     openSettings() {
       showSettings = true;
       showDeviceSync = false;
+      nowPlayingDrawerOpen = false;
     },
     closeSettings() {
       showSettings = false;
@@ -29,6 +30,7 @@ function createUiStore() {
     openDeviceSync() {
       showDeviceSync = true;
       showSettings = false;
+      nowPlayingDrawerOpen = false;
     },
     closeDeviceSync() {
       showDeviceSync = false;
@@ -36,8 +38,13 @@ function createUiStore() {
     setAlbumSort(sort: AlbumSort) {
       albumSort = sort;
     },
+    // Deliberately mutually exclusive with Settings/Device Sync: the drawer
+    // is a fixed-position overlay that would otherwise visually stack on
+    // top of those panels rather than replacing them.
     openNowPlayingDrawer() {
       nowPlayingDrawerOpen = true;
+      showSettings = false;
+      showDeviceSync = false;
     },
     closeNowPlayingDrawer() {
       nowPlayingDrawerOpen = false;

From 5678c1130928636182d8f59e29f1695ff31a3027 Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Wed, 8 Jul 2026 20:26:35 -0700
Subject: [PATCH 3/4] fix: remove sub-1em font-size on track duration label

Violates the project's minimum-font-size rule; color already
de-emphasizes it against the title without needing to shrink it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/lib/components/album/TrackRow.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/album/TrackRow.svelte b/src/lib/components/album/TrackRow.svelte
index a8381c4..76ebda4 100644
--- a/src/lib/components/album/TrackRow.svelte
+++ b/src/lib/components/album/TrackRow.svelte
@@ -72,7 +72,6 @@
 
   .col-duration {
     color: var(--text-secondary);
-    font-size: 0.85em;
     flex-shrink: 0;
   }
 </style>

From 9f5399e8d0f03f373a3b5dfac8c305483d64939b Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Wed, 8 Jul 2026 20:28:38 -0700
Subject: [PATCH 4/4] chore: decrease font size

---
 src/lib/components/album/AlbumHeader.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/album/AlbumHeader.svelte b/src/lib/components/album/AlbumHeader.svelte
index 80d75cb..b633853 100644
--- a/src/lib/components/album/AlbumHeader.svelte
+++ b/src/lib/components/album/AlbumHeader.svelte
@@ -164,7 +164,7 @@
 
   .title {
     font-weight: 500;
-    font-size: 1.25em;
+    font-size: 1em;
     overflow-wrap: break-word;
   }