Layout and search fix

src/routes/library/+layout.svelte

@@ -5,13 +5,10 @@
   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 } from "$lib/stores/player";
-  import { isShuffle, repeatMode, hasNext as hasNextStore, hasPrevious as hasPreviousStore } from "$lib/stores/queue";
-  import { isAndroid, bottomUiHeight } from "$lib/stores/appState";
+  import { bottomUiHeight } from "$lib/stores/appState";
+  import { reservedBottomPadding } from "$lib/utils/layoutShell";
   import { useScrollGuard } from "$lib/composables/useScrollGuard";
   import Search from "$lib/components/Search.svelte";
-  import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
-  import AudioPlayer from "$lib/components/player/AudioPlayer.svelte";
   import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
 
   // Scroll guard prevents accidental taps on library cards during/after scrolling (Android)
@@ -21,19 +18,8 @@
   let { children } = $props();
 
   let searchQuery = $state("");
-  let showFullPlayer = $state(false);
   let showOverflowMenu = $state(false);
   let showSleepTimerModal = $state(false);
-  // Queue status (shuffle, repeat, hasNext, hasPrevious) is event-driven via the
-  // queue store, which listens for queue_changed events from the backend. This
-  // updates instantly when toggling shuffle/repeat (no polling lag).
-  const shuffle = $derived($isShuffle);
-  const repeat = $derived($repeatMode);
-  const hasNext = $derived($hasNextStore);
-  const hasPrevious = $derived($hasPreviousStore);
-  // Platform comes from the shared appState store (set once in the root layout),
-  // so this layout and the root layout never disagree about Android — otherwise
-  // both can suppress their mini players and none appears. See $lib/stores/appState.
 
   onMount(() => {
     return () => {
@@ -204,57 +190,18 @@
       </div>
     </header>
 
-    <!-- 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 content. The fixed bottom UI (mini player + nav) is owned entirely
+         by the root layout on every platform, and its live-measured height is
+         published to `bottomUiHeight`. We reserve exactly that here (plus a
+         little breathing room) so the last row never hides behind the nav. -->
     <main
       class="flex-1 overflow-y-auto p-4 min-h-0"
-      style="padding-bottom: {$isAndroid ? `calc(${$bottomUiHeight}px + 1rem)` : '1rem'}; overscroll-behavior: contain"
+      style="padding-bottom: {reservedBottomPadding($bottomUiHeight, 1)}; 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. 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}
-        isPlaying={$isPlaying}
-        position={$playbackPosition}
-        duration={$playbackDuration}
-        {shuffle}
-        {repeat}
-        {hasNext}
-        {hasPrevious}
-        className="flex-shrink-0"
-        onExpand={() => showFullPlayer = true}
-        onSleepTimerClick={() => showSleepTimerModal = true}
-      />
-    {/if}
-
-    <!-- Full Audio Player -->
-    {#if showFullPlayer}
-      <AudioPlayer
-        media={$currentMedia}
-        isPlaying={$isPlaying}
-        position={$playbackPosition}
-        duration={$playbackDuration}
-        {shuffle}
-        {repeat}
-        {hasNext}
-        {hasPrevious}
-        onClose={() => {
-          showFullPlayer = false;
-          window.history.back();
-        }}
-      />
-    {/if}
-
     <!-- Sleep Timer Modal -->
     <SleepTimerModal
       isOpen={showSleepTimerModal}