layout improvements

src/lib/components/BottomNav.svelte

@@ -3,6 +3,10 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
 
+  // When a className is supplied the parent positions this bar (e.g. inside a
+  // measured in-flow stack); otherwise it self-positions as a fixed bottom bar.
+  let { className = "fixed bottom-0 left-0 right-0 z-40" }: { className?: string } = $props();
+
   // Determine if a route is active
   function isActive(path: string): boolean {
     const pathname = $page.url.pathname;
@@ -15,7 +19,7 @@
 </script>
 
 <!-- Navigation bar visible on all platforms -->
-<nav class="fixed bottom-0 left-0 right-0 bg-[var(--color-surface)] border-t border-gray-800 z-40">
+<nav class="{className} bg-[var(--color-surface)] border-t border-gray-800">
   <div class="flex items-center justify-around px-4 py-2">
     <!-- Home Button -->
     <button

src/lib/stores/appState.ts

@@ -9,6 +9,10 @@ export const isAndroid = writable(false);
 // Shuffle/repeat/next/previous state now lives in the event-driven queue store
 // ($lib/stores/queue), the single source of truth.
 export const showSleepTimerModal = writable(false);
+// Measured height (px) of the fixed bottom UI on Android: BottomNav stacked with
+// the global mini player. Published by the root layout via ResizeObserver so the
+// library list can reserve exactly that much bottom padding (no magic rem guesses).
+export const bottomUiHeight = writable(0);
 
 // Library-specific state
 export const librarySearchQuery = writable("");

src/lib/stores/player.ts

@@ -254,8 +254,9 @@ export const mergedVolume = derived(
  * Should show audio miniplayer - state machine gated
  * Only true when:
  * 1. In remote mode with an active session playing media, OR
- * 2. Player is in playing or paused state (not idle, loading, error)
- *    AND current media is audio (not video: Movie or Episode)
+ * 2. There is an audio item loaded/queued and we are not in a genuine
+ *    stopped state. The bar stays visible through transient idle/loading/
+ *    seeking blips so it never flickers while advancing between tracks.
  */
 export const shouldShowAudioMiniPlayer = derived(
   [player, currentMedia, currentQueueItem, isRemoteMode, selectedSession],
@@ -265,14 +266,6 @@ export const shouldShowAudioMiniPlayer = derived(
       return true;
     }
 
-    // Local mode: hide only when there is genuinely nothing loaded
-    // (idle/stopped/error). Keep showing through loading/seeking transitions
-    // so the mini player doesn't blink out when advancing between tracks.
-    const state = $player.state;
-    if (state.kind === "idle" || state.kind === "error") {
-      return false;
-    }
-
     // Determine media type from the player state, falling back to the queue
     // item (the player store can momentarily lack media during transitions).
     const mediaType = $media?.type ?? $queueItem?.type;
@@ -280,7 +273,18 @@ export const shouldShowAudioMiniPlayer = derived(
       return false;
     }
 
-    // Show for audio content
+    const state = $player.state;
+
+    // A genuine stop clears the queue too, so when the player reports
+    // idle/error we only hide if there is also no queue item to fall back to.
+    // This keeps the bar visible through a transient idle/stopped blip emitted
+    // mid-transition (e.g. sleep-timer churn or a stop-then-load track change),
+    // while still hiding once playback has truly ended and the queue is empty.
+    if (state.kind === "idle" || state.kind === "error") {
+      return $queueItem != null;
+    }
+
+    // playing / paused / loading / seeking — audio is active, show the bar.
     return true;
   }
 );

src/lib/stores/playerVisibility.test.ts

@@ -0,0 +1,84 @@
+/**
+ * Tests for `shouldShowAudioMiniPlayer` visibility invariant.
+ *
+ * The mini player must NOT flicker out while advancing between tracks. The
+ * backend can momentarily report an idle/stopped state mid-transition, so the
+ * bar stays visible as long as a queue item still exists, and only hides once
+ * playback has genuinely ended and the queue has been cleared.
+ *
+ * TRACES: UR-005 | DR-009
+ */
+
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { writable } from "svelte/store";
+import { get } from "svelte/store";
+import type { MediaItem } from "$lib/api/types";
+
+// Mock the dependency stores so we can drive remote mode and the current queue
+// item independently of the real backend listeners.
+const isRemoteMode = writable(false);
+const selectedSession = writable<any>(null);
+const currentQueueItem = writable<MediaItem | null>(null);
+
+vi.mock("./playbackMode", () => ({ isRemoteMode }));
+vi.mock("./sessions", () => ({ selectedSession }));
+vi.mock("./queue", () => ({ currentQueueItem }));
+
+// Imported after the mocks so player.ts picks up the mocked stores.
+const { player, shouldShowAudioMiniPlayer } = await import("./player");
+
+const audioItem = { id: "a1", type: "Audio" } as unknown as MediaItem;
+const videoItem = { id: "v1", type: "Movie" } as unknown as MediaItem;
+
+describe("shouldShowAudioMiniPlayer", () => {
+  beforeEach(() => {
+    isRemoteMode.set(false);
+    selectedSession.set(null);
+    currentQueueItem.set(null);
+    player.setIdle();
+  });
+
+  it("shows while an audio track is playing", () => {
+    player.setPlaying(audioItem, 0, 100);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+
+  it("stays visible through a transient idle blip while still queued", () => {
+    // A track is queued (e.g. mid-transition the backend emits idle but the
+    // next track is already in the queue).
+    currentQueueItem.set(audioItem);
+    player.setIdle();
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+
+  it("stays visible through loading/seeking transitions", () => {
+    currentQueueItem.set(audioItem);
+    player.setLoading(audioItem);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+    player.setSeeking(audioItem, 10);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+
+  it("hides once playback ends and the queue is cleared", () => {
+    currentQueueItem.set(null);
+    player.setIdle();
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("hides for video content even while playing", () => {
+    player.setPlaying(videoItem, 0, 100);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("hides for video content reported only via the queue item", () => {
+    currentQueueItem.set(videoItem);
+    player.setIdle();
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("shows in remote mode when the session has a now-playing item", () => {
+    isRemoteMode.set(true);
+    selectedSession.set({ nowPlayingItem: { id: "r1" } });
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+});

src/routes/+layout.svelte

@@ -17,13 +17,49 @@
   import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
   import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
   import BottomNav from "$lib/components/BottomNav.svelte";
-  import { isInitialized, pendingSyncCount, isAndroid, showSleepTimerModal } from "$lib/stores/appState";
+  import { isInitialized, pendingSyncCount, isAndroid, showSleepTimerModal, bottomUiHeight } from "$lib/stores/appState";
   // Shuffle/repeat/next/previous come from the event-driven queue store, the
   // single source of truth (updated instantly on queue_changed).
   import { isShuffle as shuffle, repeatMode as repeat, hasNext, hasPrevious } from "$lib/stores/queue";
 
   let { children } = $props();
 
+  // The fixed bottom UI (mini player stacked over the bottom nav) is measured in
+  // real time and its height published to `bottomUiHeight`, so pages can reserve
+  // exactly that much space instead of guessing fixed rem values.
+  let bottomUiEl = $state<HTMLElement | null>(null);
+
+  // Route-level visibility for the fixed bottom UI (the mini player itself also
+  // self-gates on playback state; when it renders nothing the in-flow slot
+  // collapses to 0 and the ResizeObserver shrinks the reserved padding).
+  const pathname = $derived($page.url.pathname);
+  const showBottomNav = $derived(
+    $isAuthenticated && !pathname.startsWith('/player/') && !pathname.startsWith('/login')
+  );
+  const showGlobalMiniPlayer = $derived(
+    !pathname.startsWith('/player/') &&
+      !pathname.startsWith('/login') &&
+      !pathname.startsWith('/settings') &&
+      ($isAndroid || !pathname.startsWith('/library'))
+  );
+
+  $effect(() => {
+    const el = bottomUiEl;
+    if (!el) {
+      bottomUiHeight.set(0);
+      return;
+    }
+    const ro = new ResizeObserver((entries) => {
+      bottomUiHeight.set(entries[0]?.contentRect.height ?? el.offsetHeight);
+    });
+    ro.observe(el);
+    bottomUiHeight.set(el.offsetHeight);
+    return () => {
+      ro.disconnect();
+      bottomUiHeight.set(0);
+    };
+  });
+
   onMount(async () => {
     // Detect platform first (synchronously, before any await) so the global
     // mini player's Android visibility gate is correct from the first render.
@@ -131,40 +167,43 @@
     <!-- Toast notifications (global) -->
     <Toast />
 
-    <!-- Bottom Navigation (mobile only - show everywhere except player and login) -->
-    {#if $isAuthenticated && !$page.url.pathname.startsWith('/player/') && !$page.url.pathname.startsWith('/login')}
-      <BottomNav />
-    {/if}
+    <!-- Fixed bottom UI: mini player stacked over the bottom nav, both in normal
+         flow inside one measured wrapper. The wrapper's height is observed and
+         published to `bottomUiHeight` so pages reserve exactly this much space.
+         Mini player is first (visually on top, above the nav). -->
+    {#if showBottomNav || showGlobalMiniPlayer}
+      <div bind:this={bottomUiEl} class="fixed bottom-0 left-0 right-0 z-40 flex flex-col">
+        {#if showGlobalMiniPlayer}
+          <MiniPlayer
+            media={$currentMedia}
+            isPlaying={$isPlaying}
+            position={$playbackPosition}
+            duration={$playbackDuration}
+            shuffle={$shuffle}
+            repeat={$repeat}
+            hasNext={$hasNext}
+            hasPrevious={$hasPrevious}
+            className="flex-shrink-0"
+            onExpand={() => {
+              // Navigate to player page when mini player is expanded
+              if ($currentMedia) {
+                goto(`/player/${$currentMedia.id}`);
+              }
+            }}
+            onSleepTimerClick={() => showSleepTimerModal.set(true)}
+          />
+        {/if}
 
-    <!-- Mini Player - show everywhere except on full player page, login and settings -->
-    <!-- Android: Show on all routes (except player/login/settings) -->
-    <!-- Desktop: Show on non-library routes (library layout has its own MiniPlayer) -->
-    {#if !$page.url.pathname.startsWith('/player/') && !$page.url.pathname.startsWith('/login') && !$page.url.pathname.startsWith('/settings')}
-      {#if $isAndroid || !$page.url.pathname.startsWith('/library')}
-        <MiniPlayer
-          media={$currentMedia}
-          isPlaying={$isPlaying}
-          position={$playbackPosition}
-          duration={$playbackDuration}
-          shuffle={$shuffle}
-          repeat={$repeat}
-          hasNext={$hasNext}
-          hasPrevious={$hasPrevious}
-          onExpand={() => {
-            // Navigate to player page when mini player is expanded
-            if ($currentMedia) {
-              goto(`/player/${$currentMedia.id}`);
-            }
-          }}
-          onSleepTimerClick={() => showSleepTimerModal.set(true)}
-        />
+        {#if showBottomNav}
+          <BottomNav className="flex-shrink-0" />
+        {/if}
+      </div>
 
-        <!-- Sleep Timer Modal -->
-        <SleepTimerModal
-          isOpen={$showSleepTimerModal}
-          onClose={() => showSleepTimerModal.set(false)}
-        />
-      {/if}
+      <!-- Sleep Timer Modal -->
+      <SleepTimerModal
+        isOpen={$showSleepTimerModal}
+        onClose={() => showSleepTimerModal.set(false)}
+      />
     {/if}
   {:else}
     <div class="flex items-center justify-center h-screen">

src/routes/library/+layout.svelte

@@ -5,9 +5,9 @@
   import { commands } from "$lib/api/bindings";
   import { auth, isAuthenticated, isLoading as isAuthLoading, currentUser } from "$lib/stores/auth";
   import { library } from "$lib/stores/library";
-  import { currentMedia, isPlaying, playbackPosition, playbackDuration, shouldShowAudioMiniPlayer } from "$lib/stores/player";
+  import { currentMedia, isPlaying, playbackPosition, playbackDuration } from "$lib/stores/player";
   import { isShuffle, repeatMode, hasNext as hasNextStore, hasPrevious as hasPreviousStore } from "$lib/stores/queue";
-  import { isAndroid } from "$lib/stores/appState";
+  import { isAndroid, bottomUiHeight } from "$lib/stores/appState";
   import { useScrollGuard } from "$lib/composables/useScrollGuard";
   import Search from "$lib/components/Search.svelte";
   import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
@@ -204,17 +204,23 @@
       </div>
     </header>
 
-    <!-- Main content (with padding for bottom nav bar and mini player) -->
+    <!-- Main content. The mini player is an in-flow flex sibling below this
+         scroller (not a fixed overlay), so the list can never render behind it.
+         Android keeps the global fixed bottom UI (nav + mini player), so there we
+         reserve its real measured height (`bottomUiHeight`, observed live in the
+         root layout) plus a little breathing room. Non-Android reserves none —
+         the in-flow bar below owns that space. -->
     <main
-      class="flex-1 overflow-y-auto p-4"
-      style="padding-bottom: {$shouldShowAudioMiniPlayer ? ($isAndroid ? '11rem' : '7rem') : '5rem'}; overscroll-behavior: contain"
+      class="flex-1 overflow-y-auto p-4 min-h-0"
+      style="padding-bottom: {$isAndroid ? `calc(${$bottomUiHeight}px + 1rem)` : '1rem'}; overscroll-behavior: contain"
       onscroll={scrollGuard.onScroll}
     >
       {@render children()}
     </main>
 
     <!-- Mini Player (only show on non-Android platforms - Android uses global mini player) -->
-    <!-- Hide on player page since full player is already there -->
+    <!-- Hide on player page since full player is already there. Rendered in
+         normal flex flow so it sits above the list rather than overlapping it. -->
     {#if !$isAndroid && !$page.url.pathname.startsWith('/player/')}
       <MiniPlayer
         media={$currentMedia}
@@ -225,6 +231,7 @@
         {repeat}
         {hasNext}
         {hasPrevious}
+        className="flex-shrink-0"
         onExpand={() => showFullPlayer = true}
         onSleepTimerClick={() => showSleepTimerModal = true}
       />