From c7fb5582e2fe4cdf04d8d081ed00d48c425cfab8 Mon Sep 17 00:00:00 2001
From: Benny <benny@solsidanrp.se>
Date: Fri, 3 Apr 2026 09:15:31 +0200
Subject: [PATCH 1/7] feat: fullscreen search modal + back button for mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the inline search input in the mobile navbar with a fullscreen
search modal overlay. This solves several mobile UX issues:

1. Keyboard no longer closes when navigating between search and results
2. Search query and results persist across navigation (tap result → view
   details → go back → modal reopens with previous search intact)
3. Modal stays visible until the destination page has loaded (no flash of
   the home page during navigation)

Also adds a back button (chevron-left) in the top-left corner on non-main
pages for easy navigation on mobile devices.

New file: src/lib/components/search-modal.svelte
- Fullscreen overlay with auto-focusing input
- 300ms debounced search via TMDB API (movies + TV merged by popularity)
- Results displayed as portrait cards in a 2-column grid
- Escape/X clears state, tapping a result preserves it for back-navigation
- Smooth transitions (fly + fade) with instant skip during navigation

Modified: src/lib/components/mobile-nav.svelte
- Search input replaced with tap-to-open button that triggers the modal
- Back button with glass-morphism style, hidden on main pages
---
 src/lib/components/mobile-nav.svelte   |  63 +++----
 src/lib/components/search-modal.svelte | 217 +++++++++++++++++++++++++
 2 files changed, 242 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/components/search-modal.svelte

diff --git a/src/lib/components/mobile-nav.svelte b/src/lib/components/mobile-nav.svelte
index 89286ae1..df509877 100644
--- a/src/lib/components/mobile-nav.svelte
+++ b/src/lib/components/mobile-nav.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import Menu from "@lucide/svelte/icons/menu";
     import X from "@lucide/svelte/icons/x";
+    import ChevronLeft from "@lucide/svelte/icons/chevron-left";
     import { Button } from "$lib/components/ui/button/index.js";
     import NotificationCenter from "$lib/components/notification-center.svelte";
-    import { getContext, onDestroy } from "svelte";
+    import SearchModal from "$lib/components/search-modal.svelte";
+    import { getContext } from "svelte";
     import Search from "@lucide/svelte/icons/search";
-    import { goto } from "$app/navigation";
     import { page } from "$app/state";
     import type { createSidebarStore } from "$lib/stores/global.svelte";
     import { fly } from "svelte/transition";
@@ -13,30 +14,23 @@
 
     const SidebarStore = getContext<createSidebarStore>("sidebarStore");
 
-    let inputRef = $state<HTMLInputElement | null>(null);
-    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    const MAIN_PAGES = ["/", "/explore", "/dashboard", "/library", "/settings", "/calendar", "/logs"];
 
-    function navigateToSearch() {
-        if (debounceTimer) clearTimeout(debounceTimer);
-        const query = inputRef?.value.trim() || "";
-        const currentlyExplore = page.url.pathname === "/explore";
-        goto(query ? `/explore?query=${encodeURIComponent(query)}` : "/explore", {
-            keepFocus: currentlyExplore,
-            noScroll: true,
-            replaceState: currentlyExplore
-        });
-    }
+    const isMainPage = $derived(MAIN_PAGES.includes(page.url.pathname));
 
-    function handleInput() {
-        if (debounceTimer) clearTimeout(debounceTimer);
-        debounceTimer = setTimeout(navigateToSearch, 300);
-    }
-
-    onDestroy(() => {
-        if (debounceTimer) clearTimeout(debounceTimer);
-    });
+    let searchModalOpen = $state(false);
 </script>
 
+{#if !isMainPage}
+    <button
+        transition:fly={{ y: -20, duration: 400, easing: cubicOut }}
+        onclick={() => history.back()}
+        aria-label="Go back"
+        class="fixed top-4 left-4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border border-white/5 bg-white/5 shadow-lg backdrop-blur-xl transition-all duration-300 hover:bg-white/10 active:scale-95 md:hidden">
+        <ChevronLeft class="size-5 text-white/70" />
+    </button>
+{/if}
+
 <div
     transition:fly={{ y: 20, duration: 400, easing: cubicOut }}
     class="fixed right-0 bottom-6 left-0 z-[60] flex justify-center px-4 md:hidden">
@@ -46,22 +40,13 @@
         <!-- Search Icon -->
         <Search class="size-4 shrink-0 text-white/50" />
 
-        <!-- Input -->
-        <input
-            bind:this={inputRef}
-            name="query"
-            placeholder="Search..."
-            aria-label="Search"
-            value={page.url.searchParams.get("query") || ""}
-            oninput={handleInput}
-            onkeydown={(e) => {
-                if (e.key === "Enter") {
-                    e.preventDefault();
-                    navigateToSearch();
-                }
-            }}
-            class="text-foreground h-full flex-1 bg-transparent text-sm font-medium outline-none placeholder:text-white/40"
-            autocomplete="off" />
+        <!-- Tap-to-search trigger -->
+        <button
+            onclick={() => (searchModalOpen = true)}
+            aria-label="Open search"
+            class="h-full flex-1 bg-transparent text-left text-sm font-medium text-white/40 outline-none">
+            Search...
+        </button>
 
         <!-- Actions Divider -->
         <div class="h-5 w-px bg-white/10"></div>
@@ -100,3 +85,5 @@
         </div>
     </div>
 </div>
+
+<SearchModal open={searchModalOpen} onclose={() => (searchModalOpen = false)} onopen={() => (searchModalOpen = true)} />
diff --git a/src/lib/components/search-modal.svelte b/src/lib/components/search-modal.svelte
new file mode 100644
index 00000000..72c154f8
--- /dev/null
+++ b/src/lib/components/search-modal.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+    import { goto, afterNavigate } from "$app/navigation";
+    import X from "@lucide/svelte/icons/x";
+    import Search from "@lucide/svelte/icons/search";
+    import PortraitCard from "$lib/components/media/portrait-card.svelte";
+    import PortraitCardSkeleton from "$lib/components/media/portrait-card-skeleton.svelte";
+    import { fly, fade } from "svelte/transition";
+    import { cubicOut } from "svelte/easing";
+    import type { TMDBTransformedListItem } from "$lib/providers/parser";
+
+    interface Props {
+        open: boolean;
+        onclose: () => void;
+        onopen: () => void;
+    }
+
+    let { open, onclose, onopen }: Props = $props();
+
+    function reopenFromNav() {
+        onopen();
+    }
+
+    let inputRef = $state<HTMLInputElement | null>(null);
+    let query = $state("");
+    let results = $state<TMDBTransformedListItem[]>([]);
+    let loading = $state(false);
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    let abortController: AbortController | null = null;
+
+    // Persist search state across navigation
+    let savedQuery = "";
+    let savedResults: TMDBTransformedListItem[] = [];
+    let navigatedFromModal = false;
+    // When true, skip transitions (instant hide/show for navigation)
+    let skipTransition = $state(false);
+
+    $effect(() => {
+        if (open && inputRef) {
+            // Restore previous search if available
+            if (savedQuery && !query) {
+                query = savedQuery;
+                results = savedResults;
+            }
+            inputRef.focus();
+        }
+    });
+
+    function handleInput() {
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(search, 300);
+    }
+
+    async function search() {
+        const q = query.trim();
+        if (!q) {
+            results = [];
+            loading = false;
+            return;
+        }
+
+        if (abortController) abortController.abort();
+        abortController = new AbortController();
+        const signal = abortController.signal;
+
+        loading = true;
+        try {
+            const params = new URLSearchParams({ query: q, searchMode: "search", page: "1" });
+            const [movieRes, tvRes] = await Promise.all([
+                fetch(`/api/tmdb/search/movie?${params}`, { signal }),
+                fetch(`/api/tmdb/search/tv?${params}`, { signal })
+            ]);
+
+            if (signal.aborted) return;
+
+            const [movies, tv] = await Promise.all([
+                movieRes.ok ? movieRes.json() : { results: [] },
+                tvRes.ok ? tvRes.json() : { results: [] }
+            ]);
+
+            if (signal.aborted) return;
+
+            const merged: TMDBTransformedListItem[] = [
+                ...(movies.results ?? []),
+                ...(tv.results ?? [])
+            ].sort((a, b) => (b.popularity ?? 0) - (a.popularity ?? 0));
+
+            results = merged;
+        } catch (err) {
+            if (err instanceof Error && err.name === "AbortError") return;
+            results = [];
+        } finally {
+            if (!signal.aborted) loading = false;
+        }
+    }
+
+    let pendingNavigation = false;
+
+    function handleResultClick(item: TMDBTransformedListItem) {
+        savedQuery = query;
+        savedResults = results;
+        navigatedFromModal = true;
+        pendingNavigation = true;
+        // Keep modal open — it will be hidden after the new page loads
+        goto(`/details/media/${item.id}/${item.media_type}`);
+    }
+
+    afterNavigate((navigation) => {
+        if (pendingNavigation) {
+            // New page loaded — now hide the modal instantly
+            pendingNavigation = false;
+            skipTransition = true;
+            onclose();
+            requestAnimationFrame(() => { skipTransition = false; });
+            return;
+        }
+        if (navigation.type === 'popstate' && navigatedFromModal && savedQuery) {
+            navigatedFromModal = false;
+            skipTransition = true;
+            reopenFromNav();
+            requestAnimationFrame(() => { skipTransition = false; });
+        }
+    });
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === "Escape") clearAndClose();
+    }
+
+    function clearAndClose() {
+        savedQuery = "";
+        savedResults = [];
+        query = "";
+        results = [];
+        onclose();
+    }
+
+    function getSubtitle(item: TMDBTransformedListItem): string {
+        const parts: string[] = [];
+        if (item.media_type === "movie") parts.push("Movie");
+        else if (item.media_type === "tv") parts.push("TV");
+        if (item.year && item.year !== "N/A") parts.push(String(item.year));
+        return parts.join(" • ");
+    }
+</script>
+
+{#if open}
+    <!-- Backdrop -->
+    <div
+        transition:fade={{ duration: skipTransition ? 0 : 200 }}
+        class="fixed inset-0 z-[70] bg-zinc-950/98 backdrop-blur-xl"
+        role="presentation">
+    </div>
+
+    <!-- Modal Content -->
+    <div
+        transition:fly={{ y: skipTransition ? 0 : 20, duration: skipTransition ? 0 : 300, easing: cubicOut }}
+        class="fixed inset-0 z-[71] flex flex-col overflow-hidden"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search">
+        <!-- Header -->
+        <div class="flex shrink-0 items-center gap-3 border-b border-white/5 px-4 py-3">
+            <Search class="size-4 shrink-0 text-white/50" />
+            <!-- svelte-ignore a11y_autofocus -->
+            <input
+                bind:this={inputRef}
+                bind:value={query}
+                oninput={handleInput}
+                onkeydown={handleKeydown}
+                placeholder="Search movies & shows..."
+                aria-label="Search"
+                autocomplete="off"
+                autofocus
+                enterkeyhint="search"
+                class="h-full flex-1 bg-transparent text-sm font-medium text-white outline-none placeholder:text-white/40" />
+            <button
+                onclick={clearAndClose}
+                aria-label="Close search"
+                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-white/50 transition-all hover:bg-white/10 hover:text-white active:scale-95">
+                <X class="size-5" />
+            </button>
+        </div>
+
+        <!-- Results -->
+        <div class="flex-1 overflow-y-auto">
+            {#if loading}
+                <div class="grid grid-cols-2 gap-3 px-4 pt-4 pb-24">
+                    {#each Array(8) as _, i (i)}
+                        <PortraitCardSkeleton />
+                    {/each}
+                </div>
+            {:else if results.length > 0}
+                <div class="grid grid-cols-2 gap-3 px-4 pt-4 pb-24">
+                    {#each results as item (`${item.media_type}-${item.id}`)}
+                        <button
+                            onclick={() => handleResultClick(item)}
+                            class="block w-full rounded-xl text-left outline-none focus-visible:ring-2 focus-visible:ring-white/50 active:scale-[0.97] transition-transform duration-150">
+                            <PortraitCard
+                                title={item.title}
+                                subtitle={getSubtitle(item)}
+                                image={item.poster_path} />
+                        </button>
+                    {/each}
+                </div>
+            {:else if query.trim() && !loading}
+                <div class="flex flex-col items-center justify-center gap-2 py-24 text-center">
+                    <p class="text-white/60 text-base font-medium">No results found</p>
+                    <p class="text-white/30 text-sm">Try a different search term</p>
+                </div>
+            {:else}
+                <div class="flex flex-col items-center justify-center gap-2 py-24 text-center">
+                    <Search class="size-8 text-white/20" />
+                    <p class="text-white/40 text-sm">Start typing to search</p>
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}

From 6af49dd29547d3273b015b339728edd885670022 Mon Sep 17 00:00:00 2001
From: Benny <benny@solsidanrp.se>
Date: Fri, 3 Apr 2026 09:40:46 +0200
Subject: [PATCH 2/7] address review: safe back fallback, cleanup timers on
 destroy, fix unused loop var

---
 src/lib/components/mobile-nav.svelte   | 9 ++++++++-
 src/lib/components/search-modal.svelte | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/mobile-nav.svelte b/src/lib/components/mobile-nav.svelte
index df509877..7df21ed5 100644
--- a/src/lib/components/mobile-nav.svelte
+++ b/src/lib/components/mobile-nav.svelte
@@ -6,6 +6,7 @@
     import NotificationCenter from "$lib/components/notification-center.svelte";
     import SearchModal from "$lib/components/search-modal.svelte";
     import { getContext } from "svelte";
+    import { goto } from "$app/navigation";
     import Search from "@lucide/svelte/icons/search";
     import { page } from "$app/state";
     import type { createSidebarStore } from "$lib/stores/global.svelte";
@@ -24,7 +25,13 @@
 {#if !isMainPage}
     <button
         transition:fly={{ y: -20, duration: 400, easing: cubicOut }}
-        onclick={() => history.back()}
+        onclick={() => {
+            if (history.length > 1) {
+                history.back();
+            } else {
+                goto('/');
+            }
+        }}
         aria-label="Go back"
         class="fixed top-4 left-4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border border-white/5 bg-white/5 shadow-lg backdrop-blur-xl transition-all duration-300 hover:bg-white/10 active:scale-95 md:hidden">
         <ChevronLeft class="size-5 text-white/70" />
diff --git a/src/lib/components/search-modal.svelte b/src/lib/components/search-modal.svelte
index 72c154f8..f7206ea4 100644
--- a/src/lib/components/search-modal.svelte
+++ b/src/lib/components/search-modal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto, afterNavigate } from "$app/navigation";
+    import { onDestroy } from "svelte";
     import X from "@lucide/svelte/icons/x";
     import Search from "@lucide/svelte/icons/search";
     import PortraitCard from "$lib/components/media/portrait-card.svelte";
@@ -27,6 +28,12 @@
     let debounceTimer: ReturnType<typeof setTimeout> | null = null;
     let abortController: AbortController | null = null;
 
+    onDestroy(() => {
+        if (debounceTimer) clearTimeout(debounceTimer);
+        abortController?.abort();
+    });
+    let abortController: AbortController | null = null;
+
     // Persist search state across navigation
     let savedQuery = "";
     let savedResults: TMDBTransformedListItem[] = [];
@@ -184,7 +191,7 @@
         <div class="flex-1 overflow-y-auto">
             {#if loading}
                 <div class="grid grid-cols-2 gap-3 px-4 pt-4 pb-24">
-                    {#each Array(8) as _, i (i)}
+                    {#each Array.from({ length: 8 }, (_, i) => i) as i (i)}
                         <PortraitCardSkeleton />
                     {/each}
                 </div>

From 5cef2ef742c90bc831b813781942b24da9c5ad68 Mon Sep 17 00:00:00 2001
From: Benny <benny@solsidanrp.se>
Date: Sat, 11 Apr 2026 22:08:47 +0200
Subject: [PATCH 3/7] fix: address CodeRabbit review comments

- Remove duplicate abortController declaration
- Use resolve() from $app/paths for all goto() calls
- Cancel debounce timer and abort in-flight requests on modal close

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/mobile-nav.svelte   |  3 ++-
 src/lib/components/search-modal.svelte | 11 +++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/mobile-nav.svelte b/src/lib/components/mobile-nav.svelte
index 7df21ed5..43d8b762 100644
--- a/src/lib/components/mobile-nav.svelte
+++ b/src/lib/components/mobile-nav.svelte
@@ -7,6 +7,7 @@
     import SearchModal from "$lib/components/search-modal.svelte";
     import { getContext } from "svelte";
     import { goto } from "$app/navigation";
+    import { resolve } from "$app/paths";
     import Search from "@lucide/svelte/icons/search";
     import { page } from "$app/state";
     import type { createSidebarStore } from "$lib/stores/global.svelte";
@@ -29,7 +30,7 @@
             if (history.length > 1) {
                 history.back();
             } else {
-                goto('/');
+                goto(resolve('/'));
             }
         }}
         aria-label="Go back"
diff --git a/src/lib/components/search-modal.svelte b/src/lib/components/search-modal.svelte
index f7206ea4..9efcdcc9 100644
--- a/src/lib/components/search-modal.svelte
+++ b/src/lib/components/search-modal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto, afterNavigate } from "$app/navigation";
+    import { resolve } from "$app/paths";
     import { onDestroy } from "svelte";
     import X from "@lucide/svelte/icons/x";
     import Search from "@lucide/svelte/icons/search";
@@ -32,7 +33,6 @@
         if (debounceTimer) clearTimeout(debounceTimer);
         abortController?.abort();
     });
-    let abortController: AbortController | null = null;
 
     // Persist search state across navigation
     let savedQuery = "";
@@ -108,7 +108,7 @@
         navigatedFromModal = true;
         pendingNavigation = true;
         // Keep modal open — it will be hidden after the new page loads
-        goto(`/details/media/${item.id}/${item.media_type}`);
+        goto(resolve(`/details/media/${item.id}/${item.media_type}`));
     }
 
     afterNavigate((navigation) => {
@@ -133,10 +133,17 @@
     }
 
     function clearAndClose() {
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+            debounceTimer = null;
+        }
+        abortController?.abort();
+        abortController = null;
         savedQuery = "";
         savedResults = [];
         query = "";
         results = [];
+        loading = false;
         onclose();
     }
 

From 7e6618ae27f535d882d7e522d8d81a6a298f8ad6 Mon Sep 17 00:00:00 2001
From: Benny <benny@solsidanrp.se>
Date: Sat, 11 Apr 2026 22:53:30 +0200
Subject: [PATCH 4/7] fix: abort stale requests on input change, scope modal to
 mobile, track origin URL

- Abort in-flight fetch immediately in handleInput before debounce
- Wrap SearchModal in md:hidden to prevent desktop rendering
- Track savedOrigin URL to only reopen modal on exact popstate match

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/mobile-nav.svelte   |  4 +++-
 src/lib/components/search-modal.svelte | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/mobile-nav.svelte b/src/lib/components/mobile-nav.svelte
index 43d8b762..73a720ac 100644
--- a/src/lib/components/mobile-nav.svelte
+++ b/src/lib/components/mobile-nav.svelte
@@ -94,4 +94,6 @@
     </div>
 </div>
 
-<SearchModal open={searchModalOpen} onclose={() => (searchModalOpen = false)} onopen={() => (searchModalOpen = true)} />
+<div class="md:hidden">
+    <SearchModal open={searchModalOpen} onclose={() => (searchModalOpen = false)} onopen={() => (searchModalOpen = true)} />
+</div>
diff --git a/src/lib/components/search-modal.svelte b/src/lib/components/search-modal.svelte
index 9efcdcc9..3df883e5 100644
--- a/src/lib/components/search-modal.svelte
+++ b/src/lib/components/search-modal.svelte
@@ -38,6 +38,7 @@
     let savedQuery = "";
     let savedResults: TMDBTransformedListItem[] = [];
     let navigatedFromModal = false;
+    let savedOrigin = "";
     // When true, skip transitions (instant hide/show for navigation)
     let skipTransition = $state(false);
 
@@ -54,12 +55,16 @@
 
     function handleInput() {
         if (debounceTimer) clearTimeout(debounceTimer);
+        abortController?.abort();
+        abortController = null;
         debounceTimer = setTimeout(search, 300);
     }
 
     async function search() {
         const q = query.trim();
         if (!q) {
+            abortController?.abort();
+            abortController = null;
             results = [];
             loading = false;
             return;
@@ -107,6 +112,7 @@
         savedResults = results;
         navigatedFromModal = true;
         pendingNavigation = true;
+        savedOrigin = window.location.pathname + window.location.search;
         // Keep modal open — it will be hidden after the new page loads
         goto(resolve(`/details/media/${item.id}/${item.media_type}`));
     }
@@ -121,10 +127,15 @@
             return;
         }
         if (navigation.type === 'popstate' && navigatedFromModal && savedQuery) {
-            navigatedFromModal = false;
-            skipTransition = true;
-            reopenFromNav();
-            requestAnimationFrame(() => { skipTransition = false; });
+            const toUrl = navigation.to?.url;
+            const currentPath = toUrl ? toUrl.pathname + (toUrl.search || '') : '';
+            if (currentPath === savedOrigin) {
+                navigatedFromModal = false;
+                savedOrigin = "";
+                skipTransition = true;
+                reopenFromNav();
+                requestAnimationFrame(() => { skipTransition = false; });
+            }
         }
     });
 

From 4f05d6ba1a6ba32bb9bf9b43d40ec1619a3a9ce9 Mon Sep 17 00:00:00 2001
From: Benny <benny@solsidanrp.se>
Date: Sat, 11 Apr 2026 22:59:44 +0200
Subject: [PATCH 5/7] fix: cap results, add type=button, log API errors,
 include /auth in main pages

- Limit merged search results to 20 items to avoid rendering overhead
- Add type="button" to close and result buttons
- Log non-ok TMDB API responses before fallback
- Add /auth to MAIN_PAGES to prevent back button on Profile page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/mobile-nav.svelte   |  2 +-
 src/lib/components/search-modal.svelte | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/mobile-nav.svelte b/src/lib/components/mobile-nav.svelte
index 73a720ac..a7f2d598 100644
--- a/src/lib/components/mobile-nav.svelte
+++ b/src/lib/components/mobile-nav.svelte
@@ -16,7 +16,7 @@
 
     const SidebarStore = getContext<createSidebarStore>("sidebarStore");
 
-    const MAIN_PAGES = ["/", "/explore", "/dashboard", "/library", "/settings", "/calendar", "/logs"];
+    const MAIN_PAGES = ["/", "/explore", "/dashboard", "/library", "/settings", "/calendar", "/logs", "/auth"];
 
     const isMainPage = $derived(MAIN_PAGES.includes(page.url.pathname));
 
diff --git a/src/lib/components/search-modal.svelte b/src/lib/components/search-modal.svelte
index 3df883e5..56a1dd19 100644
--- a/src/lib/components/search-modal.svelte
+++ b/src/lib/components/search-modal.svelte
@@ -10,6 +10,8 @@
     import { cubicOut } from "svelte/easing";
     import type { TMDBTransformedListItem } from "$lib/providers/parser";
 
+    const MAX_RESULTS = 20;
+
     interface Props {
         open: boolean;
         onclose: () => void;
@@ -84,6 +86,13 @@
 
             if (signal.aborted) return;
 
+            if (!movieRes.ok) {
+                console.error(`TMDB movie search failed: ${movieRes.status} ${movieRes.statusText}`);
+            }
+            if (!tvRes.ok) {
+                console.error(`TMDB TV search failed: ${tvRes.status} ${tvRes.statusText}`);
+            }
+
             const [movies, tv] = await Promise.all([
                 movieRes.ok ? movieRes.json() : { results: [] },
                 tvRes.ok ? tvRes.json() : { results: [] }
@@ -94,7 +103,8 @@
             const merged: TMDBTransformedListItem[] = [
                 ...(movies.results ?? []),
                 ...(tv.results ?? [])
-            ].sort((a, b) => (b.popularity ?? 0) - (a.popularity ?? 0));
+            ].sort((a, b) => (b.popularity ?? 0) - (a.popularity ?? 0))
+             .slice(0, MAX_RESULTS);
 
             results = merged;
         } catch (err) {
@@ -198,6 +208,7 @@
                 enterkeyhint="search"
                 class="h-full flex-1 bg-transparent text-sm font-medium text-white outline-none placeholder:text-white/40" />
             <button
+                type="button"
                 onclick={clearAndClose}
                 aria-label="Close search"
                 class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-white/50 transition-all hover:bg-white/10 hover:text-white active:scale-95">
@@ -217,6 +228,7 @@
                 <div class="grid grid-cols-2 gap-3 px-4 pt-4 pb-24">
                     {#each results as item (`${item.media_type}-${item.id}`)}
                         <button
+                            type="button"
                             onclick={() => handleResultClick(item)}
                             class="block w-full rounded-xl text-left outline-none focus-visible:ring-2 focus-visible:ring-white/50 active:scale-[0.97] transition-transform duration-150">
                             <PortraitCard

From 2b81be4e52d1449d809acbfa7a8feef1cc080846 Mon Sep 17 00:00:00 2001
From: Benny <benny@solsidanrp.se>
Date: Sun, 12 Apr 2026 08:17:55 +0200
Subject: [PATCH 6/7] feat: infinite scroll pagination in search modal

Replace the fixed 20-result cap with infinite scroll that loads
the next page from TMDB when the user scrolls near the bottom.
Deduplicates results across pages and shows skeleton loaders
while fetching more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/search-modal.svelte | 81 +++++++++++++++++++++-----
 1 file changed, 67 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/search-modal.svelte b/src/lib/components/search-modal.svelte
index 56a1dd19..1041f261 100644
--- a/src/lib/components/search-modal.svelte
+++ b/src/lib/components/search-modal.svelte
@@ -10,8 +10,6 @@
     import { cubicOut } from "svelte/easing";
     import type { TMDBTransformedListItem } from "$lib/providers/parser";
 
-    const MAX_RESULTS = 20;
-
     interface Props {
         open: boolean;
         onclose: () => void;
@@ -25,11 +23,16 @@
     }
 
     let inputRef = $state<HTMLInputElement | null>(null);
+    let scrollContainer = $state<HTMLElement | null>(null);
     let query = $state("");
     let results = $state<TMDBTransformedListItem[]>([]);
     let loading = $state(false);
+    let loadingMore = $state(false);
     let debounceTimer: ReturnType<typeof setTimeout> | null = null;
     let abortController: AbortController | null = null;
+    let currentPage = 1;
+    let hasMorePages = true;
+    let currentQuery = "";
 
     onDestroy(() => {
         if (debounceTimer) clearTimeout(debounceTimer);
@@ -59,26 +62,43 @@
         if (debounceTimer) clearTimeout(debounceTimer);
         abortController?.abort();
         abortController = null;
-        debounceTimer = setTimeout(search, 300);
+        debounceTimer = setTimeout(() => search(true), 300);
     }
 
-    async function search() {
+    async function search(reset: boolean) {
         const q = query.trim();
         if (!q) {
             abortController?.abort();
             abortController = null;
             results = [];
+            currentPage = 1;
+            hasMorePages = true;
+            currentQuery = "";
             loading = false;
             return;
         }
 
+        if (reset) {
+            currentPage = 1;
+            hasMorePages = true;
+            currentQuery = q;
+        }
+
+        if (!hasMorePages) return;
+
         if (abortController) abortController.abort();
         abortController = new AbortController();
         const signal = abortController.signal;
 
-        loading = true;
+        if (reset) {
+            loading = true;
+        } else {
+            loadingMore = true;
+        }
+
         try {
-            const params = new URLSearchParams({ query: q, searchMode: "search", page: "1" });
+            const page = String(currentPage);
+            const params = new URLSearchParams({ query: q, searchMode: "search", page });
             const [movieRes, tvRes] = await Promise.all([
                 fetch(`/api/tmdb/search/movie?${params}`, { signal }),
                 fetch(`/api/tmdb/search/tv?${params}`, { signal })
@@ -94,24 +114,45 @@
             }
 
             const [movies, tv] = await Promise.all([
-                movieRes.ok ? movieRes.json() : { results: [] },
-                tvRes.ok ? tvRes.json() : { results: [] }
+                movieRes.ok ? movieRes.json() : { results: [], total_pages: 0 },
+                tvRes.ok ? tvRes.json() : { results: [], total_pages: 0 }
             ]);
 
             if (signal.aborted) return;
 
+            const maxTotalPages = Math.max(movies.total_pages ?? 0, tv.total_pages ?? 0);
+            hasMorePages = currentPage < maxTotalPages;
+
             const merged: TMDBTransformedListItem[] = [
                 ...(movies.results ?? []),
                 ...(tv.results ?? [])
-            ].sort((a, b) => (b.popularity ?? 0) - (a.popularity ?? 0))
-             .slice(0, MAX_RESULTS);
+            ].sort((a, b) => (b.popularity ?? 0) - (a.popularity ?? 0));
 
-            results = merged;
+            if (reset) {
+                results = merged;
+            } else {
+                // Deduplicate by id+media_type
+                const seen = new Set(results.map(r => `${r.media_type}-${r.id}`));
+                results = [...results, ...merged.filter(r => !seen.has(`${r.media_type}-${r.id}`))];
+            }
+            currentPage++;
         } catch (err) {
             if (err instanceof Error && err.name === "AbortError") return;
-            results = [];
+            if (reset) results = [];
         } finally {
-            if (!signal.aborted) loading = false;
+            if (!signal.aborted) {
+                loading = false;
+                loadingMore = false;
+            }
+        }
+    }
+
+    function handleScroll(e: Event) {
+        const el = e.target as HTMLElement;
+        if (loadingMore || loading || !hasMorePages || !currentQuery) return;
+        // Load more when within 300px of bottom
+        if (el.scrollHeight - el.scrollTop - el.clientHeight < 300) {
+            void search(false);
         }
     }
 
@@ -165,6 +206,10 @@
         query = "";
         results = [];
         loading = false;
+        loadingMore = false;
+        currentPage = 1;
+        hasMorePages = true;
+        currentQuery = "";
         onclose();
     }
 
@@ -217,7 +262,10 @@
         </div>
 
         <!-- Results -->
-        <div class="flex-1 overflow-y-auto">
+        <div
+            bind:this={scrollContainer}
+            onscroll={handleScroll}
+            class="flex-1 overflow-y-auto">
             {#if loading}
                 <div class="grid grid-cols-2 gap-3 px-4 pt-4 pb-24">
                     {#each Array.from({ length: 8 }, (_, i) => i) as i (i)}
@@ -237,6 +285,11 @@
                                 image={item.poster_path} />
                         </button>
                     {/each}
+                    {#if loadingMore}
+                        {#each Array.from({ length: 4 }, (_, i) => i) as i (i)}
+                            <PortraitCardSkeleton />
+                        {/each}
+                    {/if}
                 </div>
             {:else if query.trim() && !loading}
                 <div class="flex flex-col items-center justify-center gap-2 py-24 text-center">

From 5834e274ee7af1e83f4311f66d1f6bee6ce128c2 Mon Sep 17 00:00:00 2001
From: Benny <benny@solsidanrp.se>
Date: Sun, 12 Apr 2026 09:51:33 +0200
Subject: [PATCH 7/7] fix: reset pagination on input change, reset loadingMore
 on empty query

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/search-modal.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/components/search-modal.svelte b/src/lib/components/search-modal.svelte
index 1041f261..5e1c72ba 100644
--- a/src/lib/components/search-modal.svelte
+++ b/src/lib/components/search-modal.svelte
@@ -62,6 +62,8 @@
         if (debounceTimer) clearTimeout(debounceTimer);
         abortController?.abort();
         abortController = null;
+        currentPage = 1;
+        hasMorePages = true;
         debounceTimer = setTimeout(() => search(true), 300);
     }
 
@@ -75,6 +77,7 @@
             hasMorePages = true;
             currentQuery = "";
             loading = false;
+            loadingMore = false;
             return;
         }