From 87c3c588d97111c851689ed7f6435fef2536e10b Mon Sep 17 00:00:00 2001
From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com>
Date: Wed, 1 Jul 2026 00:03:26 +0200
Subject: [PATCH] refactor(search): extract advanced-search results area into a
 component

---
 .../components/AdvancedSearchResults.tsx      | 152 ++++++++++++++++++
 .../search/pages/SearchBrowsePage.tsx         | 117 +++-----------
 2 files changed, 170 insertions(+), 99 deletions(-)
 create mode 100644 src/features/search/components/AdvancedSearchResults.tsx

diff --git a/src/features/search/components/AdvancedSearchResults.tsx b/src/features/search/components/AdvancedSearchResults.tsx
new file mode 100644
index 00000000..661dae4e
--- /dev/null
+++ b/src/features/search/components/AdvancedSearchResults.tsx
@@ -0,0 +1,152 @@
+import { type MutableRefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AlbumRow } from '@/features/album';
+import { ArtistRow } from '@/features/artist';
+import PagedSongList from '@/features/search/components/PagedSongList';
+import { LOSSLESS_MODE_QUERY } from '@/lib/library/losslessMode';
+import type { Results, SearchOpts } from '@/features/search/searchBrowseTypes';
+
+interface AdvancedSearchResultsProps {
+  showAdvancedPanel: boolean;
+  hasSearched: boolean;
+  loading: boolean;
+  basicSearchMode: boolean;
+  query: string;
+  filteredResults: Results | null;
+  activeSearch: SearchOpts | null;
+  genreNote: boolean;
+  songsHasMore: boolean;
+  loadingMoreSongs: boolean;
+  loadMoreSongs: () => void;
+  artistRowScrollLeftRestoreRef: MutableRefObject<number>;
+  artistRowScrollLeftRef: MutableRefObject<number>;
+  albumRowScrollLeftRestoreRef: MutableRefObject<number>;
+  albumRowScrollLeftRef: MutableRefObject<number>;
+}
+
+/** Results area for the search shell: empty/loading/no-results states + artist/album/song sections. */
+export default function AdvancedSearchResults({
+  showAdvancedPanel,
+  hasSearched,
+  loading,
+  basicSearchMode,
+  query,
+  filteredResults,
+  activeSearch,
+  genreNote,
+  songsHasMore,
+  loadingMoreSongs,
+  loadMoreSongs,
+  artistRowScrollLeftRestoreRef,
+  artistRowScrollLeftRef,
+  albumRowScrollLeftRestoreRef,
+  albumRowScrollLeftRef,
+}: AdvancedSearchResultsProps) {
+  const { t } = useTranslation();
+  const total = filteredResults
+    ? filteredResults.artists.length + filteredResults.albums.length + filteredResults.songs.length
+    : 0;
+
+  if (showAdvancedPanel && !hasSearched) {
+    return (
+      <div className="empty-state" style={{ opacity: 0.6 }}>
+        {t('search.advancedEmpty')}
+      </div>
+    );
+  }
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
+        <div className="spinner" />
+      </div>
+    );
+  }
+  if (total === 0) {
+    return (
+      <div className="empty-state">
+        {basicSearchMode && query.trim()
+          ? t('search.noResults', { query })
+          : t('search.advancedNoResults')}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+
+      {filteredResults && filteredResults.artists.length > 0 && (
+        <div data-advanced-search-artist-row>
+        <ArtistRow
+          title={
+            basicSearchMode
+              ? t('search.artists')
+              : `${t('search.artists')} (${filteredResults.artists.length})`
+          }
+          artists={filteredResults.artists}
+          artistLinkQuery={activeSearch?.losslessOnly ? LOSSLESS_MODE_QUERY : undefined}
+          restoreScrollLeft={
+            // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
+            // eslint-disable-next-line react-hooks/refs
+            artistRowScrollLeftRestoreRef.current > 0
+              // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
+              // eslint-disable-next-line react-hooks/refs
+              ? artistRowScrollLeftRestoreRef.current
+              : undefined
+          }
+          onScrollLeftSnapshot={(left) => {
+            artistRowScrollLeftRef.current = left;
+          }}
+        />
+        </div>
+      )}
+
+      {filteredResults && filteredResults.albums.length > 0 && (
+        <div data-advanced-search-album-row>
+        <AlbumRow
+          title={
+            basicSearchMode
+              ? t('search.albums')
+              : `${t('search.albums')} (${filteredResults.albums.length})`
+          }
+          albums={filteredResults.albums}
+          albumLinkQuery={activeSearch?.losslessOnly ? LOSSLESS_MODE_QUERY : undefined}
+          windowArtworkByViewport
+          initialArtworkBudget={12}
+          restoreScrollLeft={
+            // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
+            // eslint-disable-next-line react-hooks/refs
+            albumRowScrollLeftRestoreRef.current > 0
+              // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
+              // eslint-disable-next-line react-hooks/refs
+              ? albumRowScrollLeftRestoreRef.current
+              : undefined
+          }
+          onScrollLeftSnapshot={(left) => {
+            albumRowScrollLeftRef.current = left;
+          }}
+        />
+        </div>
+      )}
+
+      {filteredResults && filteredResults.songs.length > 0 && (
+        <section>
+          <h2 className="section-title" style={{ marginBottom: '0.75rem' }}>
+            {t('search.songs')}
+            {genreNote && (
+              <span style={{ fontSize: 12, fontWeight: 400, color: 'var(--text-muted)', marginLeft: '0.75rem' }}>
+                — {t('search.advancedGenreNote')}
+              </span>
+            )}
+          </h2>
+          <PagedSongList
+            songs={filteredResults.songs}
+            hasMore={songsHasMore}
+            loadingMore={loadingMoreSongs}
+            onLoadMore={loadMoreSongs}
+            showBpm={!!(activeSearch?.bpmFrom || activeSearch?.bpmTo)}
+          />
+        </section>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/search/pages/SearchBrowsePage.tsx b/src/features/search/pages/SearchBrowsePage.tsx
index 556e6dea..6f13e8fc 100644
--- a/src/features/search/pages/SearchBrowsePage.tsx
+++ b/src/features/search/pages/SearchBrowsePage.tsx
@@ -7,10 +7,8 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { useLocation, useNavigate, useNavigationType, useSearchParams } from 'react-router-dom';
 import { SlidersVertical, Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { AlbumRow } from '@/features/album';
-import { ArtistRow } from '@/features/artist';
-import PagedSongList from '@/features/search/components/PagedSongList';
 import AdvancedSearchFilterPanel from '@/features/search/components/AdvancedSearchFilterPanel';
+import AdvancedSearchResults from '@/features/search/components/AdvancedSearchResults';
 import { APP_MAIN_SCROLL_VIEWPORT_ID } from '@/constants/appScroll';
 import { useAuthStore } from '@/store/authStore';
 import { usePlayerStore } from '@/features/playback/store/playerStore';
@@ -43,7 +41,6 @@ import {
   tryRunLocalAdvancedSearch,
 } from '@/lib/library/advancedSearchLocal';
 import { isLosslessSuffix } from '@/lib/library/losslessFormats';
-import { LOSSLESS_MODE_QUERY } from '@/lib/library/losslessMode';
 import { OXIMEDIA_MOOD_SEARCH_ENABLED } from '@/lib/library/trackEnrichment';
 import { raceSearchSources } from '@/lib/library/searchRace';
 import { logLibrarySearch } from '@/lib/library/libraryDevLog';
@@ -113,9 +110,6 @@ export default function SearchBrowsePage() {
       songs: results.songs.filter(s => isFav(s.id, s.starred)),
     };
   }, [results, starredOnly, starredOverrides]);
-  const total = filteredResults
-    ? filteredResults.artists.length + filteredResults.albums.length + filteredResults.songs.length
-    : 0;
   const [loading, setLoading] = useState(false);
   const [hasSearched, setHasSearched] = useState(() => restoreStash?.hasSearched ?? false);
   const [genreNote, setGenreNote] = useState(() => restoreStash?.genreNote ?? false);
@@ -911,98 +905,23 @@ export default function SearchBrowsePage() {
       )}
 
       {/* ── Results ───────────────────────────────────────────── */}
-      {showAdvancedPanel && !hasSearched ? (
-        <div className="empty-state" style={{ opacity: 0.6 }}>
-          {t('search.advancedEmpty')}
-        </div>
-      ) : loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
-          <div className="spinner" />
-        </div>
-      ) : total === 0 ? (
-        <div className="empty-state">
-          {basicSearchMode && query.trim()
-            ? t('search.noResults', { query })
-            : t('search.advancedNoResults')}
-        </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-
-          {filteredResults && filteredResults.artists.length > 0 && (
-            <div data-advanced-search-artist-row>
-            <ArtistRow
-              title={
-                basicSearchMode
-                  ? t('search.artists')
-                  : `${t('search.artists')} (${filteredResults.artists.length})`
-              }
-              artists={filteredResults.artists}
-              artistLinkQuery={activeSearch?.losslessOnly ? LOSSLESS_MODE_QUERY : undefined}
-              restoreScrollLeft={
-                // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
-                // eslint-disable-next-line react-hooks/refs
-                artistRowScrollLeftRestoreRef.current > 0
-                  // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
-                  // eslint-disable-next-line react-hooks/refs
-                  ? artistRowScrollLeftRestoreRef.current
-                  : undefined
-              }
-              onScrollLeftSnapshot={(left) => {
-                artistRowScrollLeftRef.current = left;
-              }}
-            />
-            </div>
-          )}
-
-          {filteredResults && filteredResults.albums.length > 0 && (
-            <div data-advanced-search-album-row>
-            <AlbumRow
-              title={
-                basicSearchMode
-                  ? t('search.albums')
-                  : `${t('search.albums')} (${filteredResults.albums.length})`
-              }
-              albums={filteredResults.albums}
-              albumLinkQuery={activeSearch?.losslessOnly ? LOSSLESS_MODE_QUERY : undefined}
-              windowArtworkByViewport
-              initialArtworkBudget={12}
-              restoreScrollLeft={
-                // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
-                // eslint-disable-next-line react-hooks/refs
-                albumRowScrollLeftRestoreRef.current > 0
-                  // React Compiler refs rule: ref read imperatively outside reactive rendering; not used to compute the render output.
-                  // eslint-disable-next-line react-hooks/refs
-                  ? albumRowScrollLeftRestoreRef.current
-                  : undefined
-              }
-              onScrollLeftSnapshot={(left) => {
-                albumRowScrollLeftRef.current = left;
-              }}
-            />
-            </div>
-          )}
-
-          {filteredResults && filteredResults.songs.length > 0 && (
-            <section>
-              <h2 className="section-title" style={{ marginBottom: '0.75rem' }}>
-                {t('search.songs')}
-                {genreNote && (
-                  <span style={{ fontSize: 12, fontWeight: 400, color: 'var(--text-muted)', marginLeft: '0.75rem' }}>
-                    — {t('search.advancedGenreNote')}
-                  </span>
-                )}
-              </h2>
-              <PagedSongList
-                songs={filteredResults.songs}
-                hasMore={songsHasMore}
-                loadingMore={loadingMoreSongs}
-                onLoadMore={loadMoreSongs}
-                showBpm={!!(activeSearch?.bpmFrom || activeSearch?.bpmTo)}
-              />
-            </section>
-          )}
-        </div>
-      )}
+      <AdvancedSearchResults
+        showAdvancedPanel={showAdvancedPanel}
+        hasSearched={hasSearched}
+        loading={loading}
+        basicSearchMode={basicSearchMode}
+        query={query}
+        filteredResults={filteredResults}
+        activeSearch={activeSearch}
+        genreNote={genreNote}
+        songsHasMore={songsHasMore}
+        loadingMoreSongs={loadingMoreSongs}
+        loadMoreSongs={loadMoreSongs}
+        artistRowScrollLeftRestoreRef={artistRowScrollLeftRestoreRef}
+        artistRowScrollLeftRef={artistRowScrollLeftRef}
+        albumRowScrollLeftRestoreRef={albumRowScrollLeftRestoreRef}
+        albumRowScrollLeftRef={albumRowScrollLeftRef}
+      />
       </>
       )}