fix(search): route the library header search to /search
Typing in the desktop header search bar ran library.search() in place and relied on /library rendering the results inline. On every other /library/** route nothing rendered them, so the search bar looked broken: results were fetched and never shown. Make /search the single surface that renders results. The header bar becomes a navigator — it hands the query and route-derived scope to /search via ?q= and ?scope=, which seed the page and run the search on arrival. The inline result block and the header's scope chips are removed; the chips live on /search, which owns the results. The empty `all` scope is omitted from the URL, and typing while already on /search does not push a history entry per keystroke.
This commit is contained in:
@@ -6,8 +6,12 @@
|
||||
import { library } from "$lib/stores/library";
|
||||
import { useScrollGuard } from "$lib/composables/useScrollGuard";
|
||||
import Search from "$lib/components/Search.svelte";
|
||||
import SearchScopeChips from "$lib/components/search/SearchScopeChips.svelte";
|
||||
import { resolveSearchScope, type SearchScope } from "$lib/utils/searchScope";
|
||||
import {
|
||||
resolveSearchScope,
|
||||
searchRouteUrl,
|
||||
shouldNavigateToSearch,
|
||||
type SearchScope,
|
||||
} from "$lib/utils/searchScope";
|
||||
import AppHeader from "$lib/components/AppHeader.svelte";
|
||||
import BottomUi from "$lib/components/BottomUi.svelte";
|
||||
import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
|
||||
@@ -48,18 +52,22 @@
|
||||
}
|
||||
});
|
||||
|
||||
// The header bar is a *navigator*, not a second results surface: /search is
|
||||
// the only route that renders searchResults, so searching here routes there
|
||||
// with the query + route-derived scope in the URL. Previously this ran
|
||||
// library.search() in place, which was invisible on every /library/** page
|
||||
// except /library itself.
|
||||
// TRACES: UR-049 | DR-063
|
||||
async function handleSearch(query: string) {
|
||||
if (query.trim()) {
|
||||
await library.search(query, searchScope);
|
||||
} else {
|
||||
if (!query.trim()) {
|
||||
library.clearSearch();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleScopeChange(next: SearchScope) {
|
||||
searchScope = next;
|
||||
if (searchQuery.trim()) {
|
||||
await library.search(searchQuery, next);
|
||||
if (shouldNavigateToSearch($page.url.pathname, query)) {
|
||||
await goto(searchRouteUrl(query, searchScope));
|
||||
// The query now lives in the URL; clear the header input so returning to
|
||||
// a library page does not leave a stale term sitting in the box.
|
||||
searchQuery = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -74,14 +82,12 @@
|
||||
<AppHeader search={librarySearch} />
|
||||
|
||||
{#snippet librarySearch()}
|
||||
<!-- Scope chips live on /search, which owns the results. -->
|
||||
<Search
|
||||
bind:value={searchQuery}
|
||||
placeholder="Search your library..."
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
{#if searchQuery.trim()}
|
||||
<SearchScopeChips scope={searchScope} onChange={handleScopeChange} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<!-- Main content. The BottomUi below is an in-flow flex sibling, so this
|
||||
|
||||
@@ -12,8 +12,9 @@
|
||||
// Scroll guard from layout - prevents accidental taps during scrolling (Android)
|
||||
const scrollGuard = getContext<ReturnType<typeof useScrollGuard>>("scrollGuard");
|
||||
|
||||
let searchResults = $derived($library.searchResults);
|
||||
let searchQuery = $derived($library.searchQuery);
|
||||
// Search results are rendered exclusively by /search — this page used to
|
||||
// render them inline, which made the header search bar appear broken on every
|
||||
// other /library/** route. TRACES: UR-049 | DR-063
|
||||
|
||||
const isMusicLibrary = $derived($currentLibrary?.collectionType === "music");
|
||||
|
||||
@@ -169,28 +170,7 @@
|
||||
</script>
|
||||
|
||||
<div class="space-y-8">
|
||||
{#if searchQuery}
|
||||
<!-- Search results -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h1 class="text-2xl font-bold text-white">
|
||||
Search results for "{searchQuery}"
|
||||
</h1>
|
||||
<button
|
||||
onclick={() => library.clearSearch()}
|
||||
class="text-sm text-gray-400 hover:text-white"
|
||||
>
|
||||
Clear search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<LibraryGrid
|
||||
items={searchResults}
|
||||
loading={$isLibraryLoading}
|
||||
onItemClick={handleItemClick}
|
||||
/>
|
||||
</div>
|
||||
{:else if showInlineLibraryContent}
|
||||
{#if showInlineLibraryContent}
|
||||
<!-- Library content (live TV / channels / other inline-rendered types) -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
|
||||
Reference in New Issue
Block a user