feat(search): scoped live search on browse pages (#938)

* feat(artists): scoped live search badge replaces page filter

Move Artists browse text search into the header Live Search with a page
scope badge (Users icon), field-local undo, and double-click/backspace
to clear scope. Block the live-search dropdown while scoped so results
only filter the Artists grid; mobile overlay follows the same rules.

* fix(artists): plain grid for scoped search fixes broken card layout

Route the browse grid through VirtualCardGrid, switch to non-virtual CSS
grid when live search filters the catalog, reset scroll on filter changes,
and skip content-visibility on plain tiles to avoid blank/black cards.

* fix(search): scope badge double-Backspace and single clear control

Require two Backspaces on an empty scoped field after prior text input;
one Backspace still clears the badge when the field was never filled.
Move live-search clear/advanced controls inside the field pill, drop the
extra outer clear button, and use type=text to avoid native search clears.

* fix(search): drop duplicate outer live-search clear button

Keep the native in-field clear on type=search and the original pill layout;
remove only the extra × control outside the search border. Reset dropdown
state when the query is cleared via the native control.

* refactor(search): generic scoped browse query helper, drop dead code

Rename artistsBrowseSearchQuery to scopedBrowseSearchQuery with an
expectedScope argument; wire Artists via useScopedBrowseSearchQuery.
Remove unused liveSearchScoped dropdown helper (scoped mode blocks it).

* feat(search): ghost scope badge and single-click badge remove

After clearing the artists scope on /artists, show a faded ghost chip to
restore page-only search while keeping the global search placeholder.
Active badge removes on one click; tooltips and styles updated.

* feat(search): scoped live search for All Albums and New Releases

Wire albums and newReleases scope badges with debounced album title search
(local index title-only FTS + filtered search3). Plain grid, scroll reset,
and session query restore on album grid browse pages.

* fix(browse): preserve scroll restore after album/artist detail back

Only reset in-page scroll when filter resetKey changes, not when
isScrollRestorePending clears after session restore.

* feat(search): scoped live search for Tracks browse

Wire /tracks to header live search with wide title/artist/album FTS,
hide hero and discovery rails while search is active, and remove the
inline search field from the browse list.

* fix(search): clear header query when leaving scoped browse pages

Prevent global live search from firing on album/detail routes after a
scoped browse query; browse session stashes still restore on back.

* fix(tracks): restore scroll after back from detail during scoped search

Hold stashed song results across fetchSongPage churn, defer leave-stash
teardown past AppShell scroll reset, restore tracks scroll after the list
is ready, and save scroll snapshot when opening artist from song context menu.

* fix(tracks): hide discovery headings during scoped search

Hide the page subtitle and "Browse all tracks" section title when
tracks search is active, matching hero/rails chrome behavior.

* feat(search): scoped live search for Composers browse

Wire /composers to header live search with composers scope badge,
session stash, scroll restore, and plain grid/list during text filter.
Remove the in-page filter input; add i18n and navigation helpers.

* docs: CHANGELOG and credits for scoped browse live search (PR #938)

src/components/tracks/SongBrowseSection.tsx

@@ -1,14 +1,12 @@
 import type { SubsonicSong } from '../../api/subsonicTypes';
 import React from 'react';
-import { Search as SearchIcon, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import PagedSongList from '../PagedSongList';
 
 interface Props {
   title?: string;
   emptyBrowseText?: string;
-  query: string;
-  onQueryChange: (value: string) => void;
+  searchActive?: boolean;
   songs: SubsonicSong[];
   hasMore: boolean;
   loading: boolean;
@@ -16,12 +14,11 @@ interface Props {
   onLoadMore: () => void;
 }
 
-/** Tracks hub toolbar + paginated song list (shared chrome with Search song results). */
+/** Tracks hub toolbar + paginated song list (search lives in the header live search field). */
 export default function SongBrowseSection({
   title,
   emptyBrowseText,
-  query,
-  onQueryChange,
+  searchActive = false,
   songs,
   hasMore,
   loading,
@@ -29,31 +26,15 @@ export default function SongBrowseSection({
   onLoadMore,
 }: Props) {
   const { t } = useTranslation();
-  const showEmptyBrowse = !loading && songs.length === 0 && query.trim() === '' && (browseUnsupported || !hasMore);
+  const showEmptyBrowse =
+    !loading && songs.length === 0 && !searchActive && (browseUnsupported || !hasMore);
 
   return (
     <section className="virtual-song-list-section">
-      {title && <h2 className="section-title virtual-song-list-title">{title}</h2>}
+      {title && !searchActive && (
+        <h2 className="section-title virtual-song-list-title">{title}</h2>
+      )}
       <div className="virtual-song-list-toolbar">
-        <div className="virtual-song-list-search">
-          <SearchIcon size={16} className="virtual-song-list-search-icon" />
-          <input
-            type="text"
-            className="input virtual-song-list-search-input"
-            placeholder={t('tracks.searchPlaceholder')}
-            value={query}
-            onChange={e => onQueryChange(e.target.value)}
-          />
-          {query && (
-            <button
-              className="virtual-song-list-search-clear"
-              onClick={() => onQueryChange('')}
-              aria-label={t('search.clearLabel')}
-            >
-              <X size={14} />
-            </button>
-          )}
-        </div>
         <div className="virtual-song-list-meta">
           {songs.length > 0 && (
             <span>{t('tracks.count', { count: songs.length })}{hasMore ? '+' : ''}</span>

src/components/tracks/TracksPageChrome.tsx

@@ -24,9 +24,12 @@ const TRACKS_SONG_RAIL_INITIAL_ARTWORK_BUDGET = 14;
 /** Tracks hub hero + song rails (above the browse-all list). */
 export default function TracksPageChrome({
   onLayoutReady,
+  hideDiscoveryChrome = false,
 }: {
   /** Fires once when hero + rails finish their initial load (or fail). */
   onLayoutReady?: () => void;
+  /** When true, skip hero and song rails (active scoped search). */
+  hideDiscoveryChrome?: boolean;
 }) {
   const perfFlags = usePerfProbeFlags();
   const { t } = useTranslation();
@@ -79,15 +82,15 @@ export default function TracksPageChrome({
   }, []);
 
   useEffect(() => {
-    if (!activeServerId) return;
+    if (!activeServerId || hideDiscoveryChrome) return;
     rerollHero();
     rerollRandom();
     reloadRated();
-  }, [activeServerId, rerollHero, rerollRandom, reloadRated]);
+  }, [activeServerId, hideDiscoveryChrome, rerollHero, rerollRandom, reloadRated]);
 
   useEffect(() => {
     if (!onLayoutReady || layoutReadyNotifiedRef.current) return;
-    if (!activeServerId) {
+    if (hideDiscoveryChrome || !activeServerId) {
       layoutReadyNotifiedRef.current = true;
       onLayoutReady();
       return;
@@ -95,7 +98,7 @@ export default function TracksPageChrome({
     if (heroLoading || randomLoading || ratedLoading) return;
     layoutReadyNotifiedRef.current = true;
     onLayoutReady();
-  }, [activeServerId, onLayoutReady, heroLoading, randomLoading, ratedLoading]);
+  }, [activeServerId, hideDiscoveryChrome, onLayoutReady, heroLoading, randomLoading, ratedLoading]);
 
   const railSongs = useMemo(
     () => (hero ? random.filter(s => s.id !== hero.id) : random),
@@ -108,12 +111,14 @@ export default function TracksPageChrome({
         <header className="tracks-header">
           <div className="tracks-header-text">
             <h1 className="page-title">{t('tracks.title')}</h1>
-            <p className="tracks-subtitle">{t('tracks.subtitle')}</p>
+            {!hideDiscoveryChrome && (
+              <p className="tracks-subtitle">{t('tracks.subtitle')}</p>
+            )}
           </div>
         </header>
       )}
 
-      {!perfFlags.disableMainstageHero && hero && (
+      {!perfFlags.disableMainstageHero && !hideDiscoveryChrome && hero && (
         <section className="tracks-hero">
           <div className="tracks-hero-cover">
             {hero.albumId && hero.coverArt ? (
@@ -173,7 +178,7 @@ export default function TracksPageChrome({
         </section>
       )}
 
-      {!perfFlags.disableMainstageRails && ratedSupported && (ratedLoading || rated.length > 0) && (
+      {!perfFlags.disableMainstageRails && !hideDiscoveryChrome && ratedSupported && (ratedLoading || rated.length > 0) && (
         <SongRail
           title={t('tracks.railHighlyRated')}
           songs={rated}
@@ -184,7 +189,7 @@ export default function TracksPageChrome({
         />
       )}
 
-      {!perfFlags.disableMainstageRails && (
+      {!perfFlags.disableMainstageRails && !hideDiscoveryChrome && (
         <SongRail
           title={t('tracks.railRandom')}
           songs={railSongs}