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/MobileSearchOverlay.tsx

@@ -1,6 +1,7 @@
 import { search } from '../api/subsonicSearch';
 import type { SearchResults, SubsonicArtist } from '../api/subsonicTypes';
 import { songToTrack } from '../utils/playback/songToTrack';
+import { useLiveSearchScopeStore } from '../store/liveSearchScopeStore';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -17,6 +18,18 @@ import { albumCoverRefForSong } from '../cover/ref';
 import { showToast } from '../utils/ui/toast';
 import { useShareSearch } from '../hooks/useShareSearch';
 import ShareSearchResults from './search/ShareSearchResults';
+import {
+  LiveSearchScopeBadge,
+  LiveSearchScopeGhostBadge,
+  createLiveSearchScopeBackspaceState,
+  handleLiveSearchScopeBackspace,
+  handleLiveSearchScopeUndo,
+  isLiveSearchDropdownBlocked,
+  liveSearchScopePlaceholderKey,
+  noteLiveSearchScopeQueryInput,
+  resetLiveSearchScopeBackspaceState,
+  resolveLiveSearchScopeGhost,
+} from './search/liveSearchScopeUi';
 
 const STORAGE_KEY = 'psysonic_recent_searches';
 const MAX_RECENT = 6;
@@ -31,9 +44,12 @@ function saveRecent(q: string, prev: string[]): string[] {
   return updated;
 }
 
-function debounce(fn: (q: string) => void, ms: number): (q: string) => void {
+function debounce<A extends unknown[]>(
+  fn: (...args: A) => void,
+  ms: number,
+): (...args: A) => void {
   let timer: ReturnType<typeof setTimeout>;
-  return (q: string) => { clearTimeout(timer); timer = setTimeout(() => fn(q), ms); };
+  return (...args: A) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), ms); };
 }
 
 /** Mobile search row thumb — larger than desktop live search (32px). */
@@ -93,7 +109,14 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
   const location = useLocation();
   const enqueue = usePlayerStore(s => s.enqueue);
 
-  const [query, setQuery] = useState('');
+  const query = useLiveSearchScopeStore(s => s.query);
+  const setQuery = useLiveSearchScopeStore(s => s.setQuery);
+  const scope = useLiveSearchScopeStore(s => s.scope);
+  const setScope = useLiveSearchScopeStore(s => s.setScope);
+  const clearScope = useLiveSearchScopeStore(s => s.clearScope);
+  const undoLiveSearch = useLiveSearchScopeStore(s => s.undo);
+  const scopeBackspaceRef = useRef(createLiveSearchScopeBackspaceState());
+  const ghostScope = resolveLiveSearchScopeGhost(location.pathname, scope);
   const [results, setResults] = useState<SearchResults | null>(null);
   const [loading, setLoading] = useState(false);
   const [recentSearches, setRecentSearches] = useState<string[]>(loadRecent);
@@ -103,6 +126,14 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
 
   useEffect(() => { inputRef.current?.focus(); }, []);
 
+  useEffect(() => {
+    resetLiveSearchScopeBackspaceState(scopeBackspaceRef.current);
+  }, [scope]);
+
+  useEffect(() => {
+    noteLiveSearchScopeQueryInput(scopeBackspaceRef.current, query);
+  }, [query]);
+
   useEffect(() => {
     const prev = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
@@ -113,20 +144,26 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
     debounce(async (q: string) => {
       if (!q.trim()) { setResults(null); setLoading(false); return; }
       setLoading(true);
-      try { setResults(await search(q)); }
-      finally { setLoading(false); }
+      try {
+        setResults(await search(q));
+      } finally { setLoading(false); }
     }, 300),
-    [musicLibraryFilterVersion]
+    [musicLibraryFilterVersion],
   );
 
   useEffect(() => {
+    if (isLiveSearchDropdownBlocked(scope)) {
+      setResults(null);
+      setLoading(false);
+      return;
+    }
     if (share.shareMatch) {
       setResults(null);
       setLoading(false);
       return;
     }
     doSearch(query);
-  }, [query, doSearch, share.shareMatch]);
+  }, [query, scope, doSearch, share.shareMatch]);
 
   const commit = (q: string) => {
     if (q.trim()) setRecentSearches(prev => saveRecent(q, prev));
@@ -146,7 +183,7 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
     onClose();
   };
   const useRecent = (term: string) => {
-    setQuery(term);
+    setQuery(term, { recordUndo: true });
     inputRef.current?.focus();
   };
   const removeRecent = (term: string, e: React.MouseEvent) => {
@@ -159,27 +196,50 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
   };
 
   const hasResults =
-    !!share.shareMatch ||
-    (results && (results.artists.length || results.albums.length || results.songs.length));
-  const showEmpty = !query;
+    !isLiveSearchDropdownBlocked(scope)
+    && (
+      !!share.shareMatch
+      || (results && (results.artists.length || results.albums.length || results.songs.length))
+    );
+  const showEmpty = !query && !scope;
 
   return createPortal(
     <div className="mobile-search-overlay">
       {/* ── Search bar ── */}
       <div className="mobile-search-bar">
-        <div className="mobile-search-field">
+        <div className={`mobile-search-field${scope ? ' mobile-search-field--scoped' : ''}`}>
           {loading ? (
             <div className="mobile-search-spinner" />
           ) : (
             <Search size={16} className="mobile-search-icon" />
           )}
+          {scope && (
+            <LiveSearchScopeBadge
+              scope={scope}
+              className="mobile-search-scope-badge"
+              clearScope={clearScope}
+            />
+          )}
+          {ghostScope && (
+            <LiveSearchScopeGhostBadge
+              scope={ghostScope}
+              className="mobile-search-scope-badge mobile-search-scope-badge--ghost"
+              setScope={setScope}
+            />
+          )}
           <input
             ref={inputRef}
             className="mobile-search-input"
             type="search"
-            placeholder={t('search.placeholder')}
+            placeholder={t(liveSearchScopePlaceholderKey(scope))}
+            data-tooltip={scope ? t(liveSearchScopePlaceholderKey(scope)) : undefined}
+            data-tooltip-pos="bottom"
             value={query}
-            onChange={e => setQuery(e.target.value)}
+            onChange={e => setQuery(e.target.value, { recordUndo: true })}
+            onKeyDown={(e) => {
+              if (handleLiveSearchScopeUndo(e, undoLiveSearch)) return;
+              if (handleLiveSearchScopeBackspace(e, query, scope, clearScope, scopeBackspaceRef.current)) return;
+            }}
             autoComplete="off"
             autoCorrect="off"
             autoCapitalize="off"
@@ -187,7 +247,7 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
           {query && (
             <button
               className="mobile-search-clear"
-              onClick={() => { setQuery(''); setResults(null); inputRef.current?.focus(); }}
+              onClick={() => { setQuery('', { recordUndo: true }); setResults(null); inputRef.current?.focus(); }}
               aria-label={t('search.clearLabel')}
             >
               <X size={15} />
@@ -249,7 +309,7 @@ export default function MobileSearchOverlay({ onClose }: { onClose: () => void }
         )}
 
         {/* ── No results ── */}
-        {!loading && query && !hasResults && (
+        {!loading && query && !hasResults && !isLiveSearchDropdownBlocked(scope) && (
           <div className="mobile-search-noresults">
             {t('search.noResults', { query })}
           </div>