Layout and search fix

src/lib/utils/layoutShell.ts

@@ -0,0 +1,96 @@
+/**
+ * Pure layout-shell logic for the app's fixed bottom UI (mini player stacked
+ * over the bottom nav).
+ *
+ * These rules used to live as inline `$derived` booleans scattered across the
+ * root and library `+layout.svelte` files, and diverged per platform/route —
+ * which is exactly how the "last row hidden behind the nav" bug kept coming
+ * back. The invariant is now a single source of truth:
+ *
+ *   - The ROOT layout owns the single fixed bottom UI on every route/platform.
+ *     There is no per-route/per-platform second mini player.
+ *   - Whatever fixed bottom UI is showing has a live-measured height
+ *     (`bottomUiHeight`), and every scroll container reserves exactly that much
+ *     bottom space so the last row can never render behind the nav.
+ *
+ * Keeping this pure makes the invariant unit-testable (jsdom has no layout
+ * engine, so the geometry itself can't be tested — but the decision logic can).
+ *
+ * TRACES: UR-005 | DR-009
+ */
+
+export interface BottomUiVisibilityInput {
+  /** Current route pathname, e.g. `$page.url.pathname`. */
+  pathname: string;
+  /** Whether the user is authenticated. */
+  isAuthenticated: boolean;
+}
+
+/**
+ * The bottom nav is shown on every authenticated route except the full-screen
+ * player and the login route.
+ */
+export function showBottomNav({
+  pathname,
+  isAuthenticated,
+}: BottomUiVisibilityInput): boolean {
+  return (
+    isAuthenticated &&
+    !pathname.startsWith("/player/") &&
+    !pathname.startsWith("/login")
+  );
+}
+
+/**
+ * The global (root-owned) mini player is shown on every route except the
+ * full-screen player, login, and settings. Crucially this is NOT gated on
+ * platform or on `/library` — the root owns the mini player everywhere, so the
+ * library route must never render its own second one.
+ */
+export function showGlobalMiniPlayer({ pathname }: { pathname: string }): boolean {
+  return (
+    !pathname.startsWith("/player/") &&
+    !pathname.startsWith("/login") &&
+    !pathname.startsWith("/settings")
+  );
+}
+
+/**
+ * Routes that own their own full-height layout (their own scroll container +
+ * bottom-space reservation). The root leaves these as a plain non-scrolling box
+ * and does NOT add bottom padding — the route reserves `bottomUiHeight` itself.
+ * Every other route scrolls in the root wrapper, which reserves the space.
+ */
+export function routeOwnsLayout({ pathname }: { pathname: string }): boolean {
+  return (
+    pathname.startsWith("/library") ||
+    pathname.startsWith("/settings") ||
+    pathname.startsWith("/player/") ||
+    pathname.startsWith("/login")
+  );
+}
+
+/**
+ * Whether any fixed bottom UI is showing for this route (mini player, nav, or
+ * both). When true, the active scroll container must reserve `bottomUiHeight`.
+ */
+export function showBottomUi(input: BottomUiVisibilityInput): boolean {
+  return showBottomNav(input) || showGlobalMiniPlayer({ pathname: input.pathname });
+}
+
+/**
+ * The bottom padding (in CSS) a scroll container must reserve so its last row
+ * clears the fixed bottom UI. `bottomUiHeight` is the live-measured height of
+ * the root's fixed bottom UI wrapper.
+ *
+ * @param bottomUiHeight measured height in px of the fixed bottom UI (0 if none)
+ * @param extraRem       breathing room added on top (routes that own their
+ *                       layout add 1rem; the root wrapper reserves an exact fit)
+ */
+export function reservedBottomPadding(
+  bottomUiHeight: number,
+  extraRem = 0,
+): string {
+  const px = Math.max(0, bottomUiHeight);
+  return extraRem > 0 ? `calc(${px}px + ${extraRem}rem)` : `${px}px`;
+}