feat(songs): unified SongRow + paginated song results in search pages (#303)

Extracts the song-list row into a single shared <SongRow> component
used by Tracks Hub Browse, /search and /search/advanced. All three now
share the same five-column layout (Play+Enqueue · Title · Artist ·
Album · Genre · Duration), the same enqueueAndPlay click behaviour,
and the same right-click context menu / drag handler.

The header row is rendered separately via <SongListHeader> (kept
outside the virtualizer scroll container in the Tracks Hub so it
doesn't scroll away).

Both SearchResults and AdvancedSearch now infinite-scroll their song
results via an IntersectionObserver sentinel near the bottom of the
list (rootMargin 600 px). Pagination uses search3's songOffset; the
free-text branch in AdvancedSearch keeps applying genre/year filters
client-side per loaded page. Initial fetches stay at 50 (SearchResults)
and 100 (AdvancedSearch) songs; subsequent pages are 50 each.

Cleanup:
- removed the redundant `(N)` count in the AdvancedSearch songs heading
- dropped the unused `useNavigate` + `psyDrag` + per-page contextMenuSongId
  state in both search pages — SongRow handles those internally
- renamed the row-internal CSS classes from `.virtual-song-*` to
  `.song-list-row-*` so they read as shared, and switched the mobile
  grid breakpoint accordingly

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/SongRow.tsx

@@ -0,0 +1,116 @@
+import React, { memo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Play, ListPlus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { SubsonicSong } from '../api/subsonic';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { enqueueAndPlay } from '../utils/playSong';
+import { useDragDrop } from '../contexts/DragDropContext';
+
+function fmtDuration(s: number): string {
+  if (!s || !isFinite(s)) return '–';
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${sec.toString().padStart(2, '0')}`;
+}
+
+interface Props {
+  song: SubsonicSong;
+}
+
+function SongRow({ song }: Props) {
+  const navigate = useNavigate();
+  const enqueue = usePlayerStore(s => s.enqueue);
+  const openContextMenu = usePlayerStore(s => s.openContextMenu);
+  const isCurrent = usePlayerStore(s => s.currentTrack?.id === song.id);
+  const psyDrag = useDragDrop();
+
+  return (
+    <div
+      className={`song-list-row${isCurrent ? ' is-current' : ''}`}
+      onDoubleClick={() => enqueueAndPlay(song)}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        openContextMenu(e.clientX, e.clientY, song, 'song');
+      }}
+      onMouseDown={(e) => {
+        if (e.button !== 0) return;
+        const sx = e.clientX, sy = e.clientY;
+        const track = songToTrack(song);
+        const onMove = (me: MouseEvent) => {
+          if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            psyDrag.startDrag(
+              { data: JSON.stringify({ type: 'song', track }), label: song.title },
+              me.clientX, me.clientY,
+            );
+          }
+        };
+        const onUp = () => {
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+      }}
+    >
+      <div className="song-list-row-cell song-list-row-actions">
+        <button
+          className="song-list-row-btn song-list-row-btn--play"
+          onClick={(e) => { e.stopPropagation(); enqueueAndPlay(song); }}
+          aria-label="Play"
+        >
+          <Play size={14} fill="currentColor" />
+        </button>
+        <button
+          className="song-list-row-btn"
+          onClick={(e) => { e.stopPropagation(); enqueue([songToTrack(song)]); }}
+          aria-label="Enqueue"
+        >
+          <ListPlus size={14} />
+        </button>
+      </div>
+      <div className="song-list-row-cell song-list-row-title truncate" title={song.title}>{song.title}</div>
+      <div className="song-list-row-cell truncate">
+        <span
+          className={song.artistId ? 'track-artist-link' : ''}
+          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+          onClick={(e) => { if (song.artistId) { e.stopPropagation(); navigate(`/artist/${song.artistId}`); } }}
+          title={song.artist}
+        >{song.artist}</span>
+      </div>
+      <div className="song-list-row-cell truncate">
+        {song.albumId ? (
+          <span
+            className="track-artist-link"
+            style={{ cursor: 'pointer' }}
+            onClick={(e) => { e.stopPropagation(); navigate(`/album/${song.albumId}`); }}
+            title={song.album}
+          >{song.album}</span>
+        ) : <span title={song.album}>{song.album}</span>}
+      </div>
+      <div className="song-list-row-cell song-list-row-genre truncate" title={song.genre ?? ''}>
+        {song.genre ?? '—'}
+      </div>
+      <div className="song-list-row-cell song-list-row-duration">{fmtDuration(song.duration)}</div>
+    </div>
+  );
+}
+
+/** Column header with the same grid as <SongRow>. Optional — pages can render it above the list. */
+export function SongListHeader() {
+  const { t } = useTranslation();
+  return (
+    <div className="song-list-row song-list-row--header" role="row">
+      <div className="song-list-row-cell song-list-row-actions" />
+      <div className="song-list-row-cell">{t('albumDetail.trackTitle')}</div>
+      <div className="song-list-row-cell">{t('albumDetail.trackArtist')}</div>
+      <div className="song-list-row-cell">{t('albumDetail.trackAlbum')}</div>
+      <div className="song-list-row-cell">{t('randomMix.trackGenre')}</div>
+      <div className="song-list-row-cell song-list-row-duration">{t('albumDetail.trackDuration')}</div>
+    </div>
+  );
+}
+
+export default memo(SongRow);

src/components/VirtualSongList.tsx

@@ -1,12 +1,10 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Play, Search as SearchIcon, X, ListPlus } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Search as SearchIcon, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { SubsonicSong, searchSongsPaged } from '../api/subsonic';
 import { ndListSongs } from '../api/navidromeBrowse';
-import { usePlayerStore, songToTrack } from '../store/playerStore';
-import { enqueueAndPlay } from '../utils/playSong';
+import SongRow, { SongListHeader } from './SongRow';
 
 const PAGE_SIZE = 50;
 const SEARCH_DEBOUNCE_MS = 300;
@@ -29,72 +27,6 @@ async function fetchSongPage(query: string, offset: number): Promise<SubsonicSon
   }
 }
 
-function fmtDuration(s: number): string {
-  if (!s || !isFinite(s)) return '–';
-  const m = Math.floor(s / 60);
-  const sec = Math.floor(s % 60);
-  return `${m}:${sec.toString().padStart(2, '0')}`;
-}
-
-interface RowProps {
-  song: SubsonicSong;
-  isCurrent: boolean;
-}
-
-const SongListRow = memo(function SongListRow({ song, isCurrent }: RowProps) {
-  const navigate = useNavigate();
-  const enqueue = usePlayerStore(s => s.enqueue);
-  const openContextMenu = usePlayerStore(s => s.openContextMenu);
-
-  return (
-    <div
-      className={`virtual-song-row${isCurrent ? ' is-current' : ''}`}
-      onDoubleClick={() => enqueueAndPlay(song)}
-      onContextMenu={(e) => {
-        e.preventDefault();
-        openContextMenu(e.clientX, e.clientY, song, 'song');
-      }}
-    >
-      <div className="virtual-song-cell virtual-song-cell-actions-left">
-        <button
-          className="virtual-song-action-btn virtual-song-action-btn--play"
-          onClick={(e) => { e.stopPropagation(); enqueueAndPlay(song); }}
-          aria-label="Play"
-        >
-          <Play size={14} fill="currentColor" />
-        </button>
-        <button
-          className="virtual-song-action-btn"
-          onClick={(e) => { e.stopPropagation(); enqueue([songToTrack(song)]); }}
-          aria-label="Enqueue"
-        >
-          <ListPlus size={14} />
-        </button>
-      </div>
-      <div className="virtual-song-cell virtual-song-cell-title">
-        <span className="virtual-song-title truncate">{song.title}</span>
-        <span
-          className={`virtual-song-artist truncate${song.artistId ? ' track-artist-link' : ''}`}
-          onClick={(e) => {
-            if (!song.artistId) return;
-            e.stopPropagation();
-            navigate(`/artist/${song.artistId}`);
-          }}
-        >{song.artist}</span>
-      </div>
-      <div className="virtual-song-cell virtual-song-cell-album truncate">
-        {song.albumId ? (
-          <span
-            className="track-artist-link"
-            onClick={(e) => { e.stopPropagation(); navigate(`/album/${song.albumId}`); }}
-          >{song.album}</span>
-        ) : <span>{song.album}</span>}
-      </div>
-      <div className="virtual-song-cell virtual-song-cell-duration">{fmtDuration(song.duration)}</div>
-    </div>
-  );
-});
-
 interface Props {
   title?: string;
   emptyBrowseText?: string;
@@ -110,8 +42,6 @@ export default function VirtualSongList({ title, emptyBrowseText }: Props) {
   const [hasMore, setHasMore] = useState(true);
   const [browseUnsupported, setBrowseUnsupported] = useState(false);
 
-  const currentTrackId = usePlayerStore(s => s.currentTrack?.id ?? null);
-
   const scrollParentRef = useRef<HTMLDivElement>(null);
   const requestSeqRef = useRef(0);
 
@@ -250,8 +180,10 @@ export default function VirtualSongList({ title, emptyBrowseText }: Props) {
           {emptyBrowseText ?? t('tracks.browseUnsupported')}
         </div>
       ) : (
-        <div ref={scrollParentRef} className="virtual-song-list-scroll">
-          <div style={{ height: totalSize, width: '100%', position: 'relative' }}>
+        <>
+          <SongListHeader />
+          <div ref={scrollParentRef} className="virtual-song-list-scroll">
+            <div style={{ height: totalSize, width: '100%', position: 'relative' }}>
             {virtualizer.getVirtualItems().map(vi => {
               const song = songs[vi.index];
               if (!song) return null;
@@ -267,21 +199,21 @@ export default function VirtualSongList({ title, emptyBrowseText }: Props) {
                     transform: `translateY(${vi.start}px)`,
                   }}
                 >
-                  <SongListRow
+                  <SongRow
                     song={song}
-                    isCurrent={currentTrackId === song.id}
                   />
                 </div>
               );
             })}
           </div>
-          {loading && (
-            <div className="virtual-song-list-loading">
-              <div className="spinner" style={{ width: 18, height: 18 }} />
-              <span>{t('common.loadingMore')}</span>
-            </div>
-          )}
-        </div>
+            {loading && (
+              <div className="virtual-song-list-loading">
+                <div className="spinner" style={{ width: 18, height: 18 }} />
+                <span>{t('common.loadingMore')}</span>
+              </div>
+            )}
+          </div>
+        </>
       )}
     </section>
   );

src/pages/AdvancedSearch.tsx

@@ -1,18 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-import { Play, SlidersVertical } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SlidersVertical } from 'lucide-react';
 import {
-  search, getGenres, getAlbumsByGenre, getAlbumList, getRandomSongs,
+  search, searchSongsPaged, getGenres, getAlbumsByGenre, getAlbumList, getRandomSongs,
   SubsonicGenre, SubsonicArtist, SubsonicAlbum, SubsonicSong,
 } from '../api/subsonic';
-import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
+import SongRow, { SongListHeader } from '../components/SongRow';
 import CustomSelect from '../components/CustomSelect';
-import { useDragDrop } from '../contexts/DragDropContext';
 import { useAuthStore } from '../store/authStore';
-import { useShallow } from 'zustand/react/shallow';
 
 type ResultType = 'all' | 'artists' | 'albums' | 'songs';
 
@@ -34,23 +32,6 @@ export default function AdvancedSearch() {
   const { t } = useTranslation();
   const [params] = useSearchParams();
   const qFromUrl = params.get('q') ?? '';
-  const navigate = useNavigate();
-  const psyDrag = useDragDrop();
-
-  const { playTrack, openContextMenu } = usePlayerStore(
-    useShallow(s => ({
-      playTrack: s.playTrack,
-      openContextMenu: s.openContextMenu,
-    }))
-  );
-
-  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
-  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
-
-  useEffect(() => {
-    if (!contextMenuOpen) setContextMenuSongId(null);
-  }, [contextMenuOpen]);
-
   const [query, setQuery] = useState(params.get('q') ?? '');
   const [genre, setGenre] = useState('');
   const [yearFrom, setYearFrom] = useState('');
@@ -66,10 +47,35 @@ export default function AdvancedSearch() {
   const [genreNote, setGenreNote] = useState(false);
   const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
 
+  // Pagination — only the free-text-query branch uses search3 with offset
+  const SONGS_INITIAL = 100;
+  const SONGS_PAGE_SIZE = 50;
+  const [activeSearch, setActiveSearch] = useState<SearchOpts | null>(null);
+  const [songsServerOffset, setSongsServerOffset] = useState(0);
+  const [songsHasMore, setSongsHasMore] = useState(false);
+  const [loadingMoreSongs, setLoadingMoreSongs] = useState(false);
+  const songsSentinelRef = useRef<HTMLDivElement>(null);
+
+  const applySongFilters = (
+    list: SubsonicSong[],
+    g: string,
+    from: number | null,
+    to: number | null,
+  ): SubsonicSong[] => {
+    let r = list;
+    if (g) r = r.filter(s => s.genre?.toLowerCase() === g.toLowerCase());
+    if (from !== null) r = r.filter(s => !s.year || s.year >= from);
+    if (to !== null) r = r.filter(s => !s.year || s.year <= to);
+    return r;
+  };
+
   const runSearch = async (opts: SearchOpts) => {
     setLoading(true);
     setHasSearched(true);
     setGenreNote(false);
+    setActiveSearch(opts);
+    setSongsServerOffset(0);
+    setSongsHasMore(false);
     const { query: q, genre: g, yearFrom: yf, yearTo: yt, resultType: rt } = opts;
     const from = yf ? parseInt(yf) : null;
     const to = yt ? parseInt(yt) : null;
@@ -80,23 +86,25 @@ export default function AdvancedSearch() {
 
     try {
       if (q.trim()) {
-        const r = await search(q.trim(), { artistCount: 30, albumCount: 50, songCount: 100 });
+        const r = await search(q.trim(), { artistCount: 30, albumCount: 50, songCount: SONGS_INITIAL });
         artists = r.artists;
         albums = r.albums;
-        songs = r.songs;
+        songs = applySongFilters(r.songs, g, from, to);
 
         if (g) {
           albums = albums.filter(a => a.genre?.toLowerCase() === g.toLowerCase());
-          songs = songs.filter(s => s.genre?.toLowerCase() === g.toLowerCase());
         }
         if (from !== null) {
           albums = albums.filter(a => !a.year || a.year >= from);
-          songs = songs.filter(s => !s.year || s.year >= from);
         }
         if (to !== null) {
           albums = albums.filter(a => !a.year || a.year <= to);
-          songs = songs.filter(s => !s.year || s.year <= to);
         }
+
+        // Only the free-text branch supports server-side pagination via search3 offset.
+        // If the server returned a full page, more probably exist.
+        setSongsServerOffset(r.songs.length);
+        setSongsHasMore(r.songs.length === SONGS_INITIAL);
       } else if (g) {
         const [albumRes, songRes] = await Promise.all([
           rt === 'songs' || rt === 'artists' ? Promise.resolve([]) : getAlbumsByGenre(g, 50),
@@ -131,6 +139,39 @@ export default function AdvancedSearch() {
     if (qFromUrl) runSearch({ query: qFromUrl, genre: '', yearFrom: '', yearTo: '', resultType: 'all' });
   }, [musicLibraryFilterVersion, qFromUrl]);
 
+  const loadMoreSongs = useCallback(async () => {
+    if (loadingMoreSongs || !songsHasMore) return;
+    if (!activeSearch || !activeSearch.query.trim()) return;
+    setLoadingMoreSongs(true);
+    try {
+      const q = activeSearch.query.trim();
+      const g = activeSearch.genre;
+      const from = activeSearch.yearFrom ? parseInt(activeSearch.yearFrom) : null;
+      const to = activeSearch.yearTo ? parseInt(activeSearch.yearTo) : null;
+      const page = await searchSongsPaged(q, SONGS_PAGE_SIZE, songsServerOffset);
+      const filtered = applySongFilters(page, g, from, to);
+      setResults(prev => prev ? { ...prev, songs: [...prev.songs, ...filtered] } : prev);
+      setSongsServerOffset(o => o + page.length);
+      // No more pages when the server returned a non-full page (regardless of how many survived filtering).
+      if (page.length < SONGS_PAGE_SIZE) setSongsHasMore(false);
+    } catch {
+      setSongsHasMore(false);
+    } finally {
+      setLoadingMoreSongs(false);
+    }
+  }, [loadingMoreSongs, songsHasMore, activeSearch, songsServerOffset]);
+
+  // IntersectionObserver on the bottom sentinel — fires loadMoreSongs as it nears the viewport.
+  useEffect(() => {
+    const el = songsSentinelRef.current;
+    if (!el) return;
+    const obs = new IntersectionObserver(entries => {
+      if (entries[0]?.isIntersecting) loadMoreSongs();
+    }, { rootMargin: '600px' });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [loadMoreSongs]);
+
   const handleSubmit = (e?: React.FormEvent) => {
     e?.preventDefault();
     runSearch({ query, genre, yearFrom, yearTo, resultType });
@@ -279,90 +320,22 @@ export default function AdvancedSearch() {
           {results && results.songs.length > 0 && (
             <section>
               <h2 className="section-title" style={{ marginBottom: '0.75rem' }}>
-                {t('search.songs')} ({results.songs.length})
+                {t('search.songs')}
                 {genreNote && (
                   <span style={{ fontSize: 12, fontWeight: 400, color: 'var(--text-muted)', marginLeft: '0.75rem' }}>
                     — {t('search.advancedGenreNote')}
                   </span>
                 )}
               </h2>
-              <div className="tracklist">
-                <div className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 90px 65px' }}>
-                  <span />
-                  <span>{t('randomMix.trackTitle')}</span>
-                  <span>{t('randomMix.trackArtist')}</span>
-                  <span>{t('randomMix.trackAlbum')}</span>
-                  <span>{t('randomMix.trackGenre')}</span>
-                  <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
+              <SongListHeader />
+              {results.songs.map(song => (
+                <SongRow key={song.id} song={song} />
+              ))}
+              {songsHasMore && (
+                <div ref={songsSentinelRef} style={{ display: 'flex', justifyContent: 'center', padding: '1rem' }}>
+                  {loadingMoreSongs && <div className="spinner" style={{ width: 20, height: 20 }} />}
                 </div>
-                {results.songs.map(song => {
-                  const track = songToTrack(song);
-                  return (
-                    <div
-                      key={song.id}
-                      className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`}
-                      style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 90px 65px' }}
-                      onDoubleClick={() => playTrack(track, results.songs.map(songToTrack))}
-                      role="row"
-                      onContextMenu={e => {
-                        e.preventDefault();
-                        setContextMenuSongId(song.id);
-                        openContextMenu(e.clientX, e.clientY, track, 'song');
-                      }}
-                      onMouseDown={e => {
-                        if (e.button !== 0) return;
-                        e.preventDefault();
-                        const sx = e.clientX, sy = e.clientY;
-                        const onMove = (me: MouseEvent) => {
-                          if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
-                            document.removeEventListener('mousemove', onMove);
-                            document.removeEventListener('mouseup', onUp);
-                            psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
-                          }
-                        };
-                        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
-                        document.addEventListener('mousemove', onMove);
-                        document.addEventListener('mouseup', onUp);
-                      }}
-                    >
-                      <button
-                        className="btn btn-ghost"
-                        style={{ padding: 4 }}
-                        onClick={e => { e.stopPropagation(); playTrack(track, results.songs.map(songToTrack)); }}
-                      >
-                        <Play size={13} fill="currentColor" />
-                      </button>
-                      <div className="track-info">
-                        <span className="track-title">{song.title}</span>
-                      </div>
-                      <div className="track-artist-cell">
-                        <span
-                          className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
-                          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
-                          onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
-                        >
-                          {song.artist}
-                        </span>
-                      </div>
-                      <div className="track-info">
-                        <span
-                          className="track-title"
-                          style={{ fontSize: '0.85rem', color: 'var(--subtext0)', cursor: 'pointer' }}
-                          onClick={() => navigate(`/album/${song.albumId}`)}
-                        >
-                          {song.album}
-                        </span>
-                      </div>
-                      <div style={{ fontSize: 11, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                        {song.genre ?? '—'}
-                      </div>
-                      <span className="track-duration" style={{ textAlign: 'right' }}>
-                        {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
+              )}
             </section>
           )}
         </div>

src/pages/SearchResults.tsx

@@ -1,19 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Play, Search } from 'lucide-react';
-import { search, SearchResults as ISearchResults, SubsonicSong } from '../api/subsonic';
-import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { Search } from 'lucide-react';
+import { search, searchSongsPaged, SearchResults as ISearchResults } from '../api/subsonic';
 import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
+import SongRow, { SongListHeader } from '../components/SongRow';
 import { useTranslation } from 'react-i18next';
-import { useDragDrop } from '../contexts/DragDropContext';
 import { useAuthStore } from '../store/authStore';
-import { useThemeStore } from '../store/themeStore';
-import { useShallow } from 'zustand/react/shallow';
 
-function formatDuration(s: number) {
-  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
-}
+const SONGS_INITIAL = 50;
+const SONGS_PAGE_SIZE = 50;
 
 export default function SearchResults() {
   const { t } = useTranslation();
@@ -21,39 +17,52 @@ export default function SearchResults() {
   const query = params.get('q') ?? '';
   const [results, setResults] = useState<ISearchResults | null>(null);
   const [loading, setLoading] = useState(false);
+  const [songsServerOffset, setSongsServerOffset] = useState(0);
+  const [songsHasMore, setSongsHasMore] = useState(false);
+  const [loadingMoreSongs, setLoadingMoreSongs] = useState(false);
+  const songsSentinelRef = useRef<HTMLDivElement>(null);
   const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
-  const showBitrate = useThemeStore(s => s.showBitrate);
-  const psyDrag = useDragDrop();
-
-  const { playTrack, enqueue, openContextMenu, currentTrack } = usePlayerStore(
-    useShallow(s => ({
-      playTrack: s.playTrack,
-      enqueue: s.enqueue,
-      openContextMenu: s.openContextMenu,
-      currentTrack: s.currentTrack,
-    }))
-  );
-
-  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
-  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
-
-  useEffect(() => {
-    if (!contextMenuOpen) setContextMenuSongId(null);
-  }, [contextMenuOpen]);
 
   useEffect(() => {
+    setSongsServerOffset(0);
+    setSongsHasMore(false);
     if (!query.trim()) { setResults(null); return; }
     setLoading(true);
-    search(query, { artistCount: 20, albumCount: 20, songCount: 50 })
-      .then(r => setResults(r))
+    search(query, { artistCount: 20, albumCount: 20, songCount: SONGS_INITIAL })
+      .then(r => {
+        setResults(r);
+        setSongsServerOffset(r.songs.length);
+        setSongsHasMore(r.songs.length === SONGS_INITIAL);
+      })
       .finally(() => setLoading(false));
   }, [query, musicLibraryFilterVersion]);
 
-  const hasResults = results && (results.artists.length || results.albums.length || results.songs.length);
+  const loadMoreSongs = useCallback(async () => {
+    if (loadingMoreSongs || !songsHasMore || !query.trim()) return;
+    setLoadingMoreSongs(true);
+    try {
+      const page = await searchSongsPaged(query.trim(), SONGS_PAGE_SIZE, songsServerOffset);
+      setResults(prev => prev ? { ...prev, songs: [...prev.songs, ...page] } : prev);
+      setSongsServerOffset(o => o + page.length);
+      if (page.length < SONGS_PAGE_SIZE) setSongsHasMore(false);
+    } catch {
+      setSongsHasMore(false);
+    } finally {
+      setLoadingMoreSongs(false);
+    }
+  }, [loadingMoreSongs, songsHasMore, query, songsServerOffset]);
 
-  const playSong = (song: SubsonicSong, list: SubsonicSong[]) => {
-    playTrack(songToTrack(song), list.map(songToTrack));
-  };
+  useEffect(() => {
+    const el = songsSentinelRef.current;
+    if (!el) return;
+    const obs = new IntersectionObserver(entries => {
+      if (entries[0]?.isIntersecting) loadMoreSongs();
+    }, { rootMargin: '600px' });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [loadMoreSongs]);
+
+  const hasResults = results && (results.artists.length || results.albums.length || results.songs.length);
 
   return (
     <div className="content-body animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
@@ -83,69 +92,17 @@ export default function SearchResults() {
           )}
 
           {results.songs.length > 0 && (
-            <section className="album-row-section">
-              <div className="album-row-header" style={{ marginBottom: '1rem' }}>
-                <h2 className="section-title" style={{ marginBottom: 0 }}>{t('search.songs')}</h2>
-              </div>
-              <div className="tracklist" style={{ padding: 0 }}>
-                <div className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 100px 65px' }}>
-                  <div />
-                  <div>{t('albumDetail.trackTitle')}</div>
-                  <div>{t('albumDetail.trackArtist')}</div>
-                  <div>{t('search.album')}</div>
-                  <div>{t('albumDetail.trackFormat')}</div>
-                  <div style={{ textAlign: 'right' }}>{t('albumDetail.trackDuration')}</div>
+            <section>
+              <h2 className="section-title" style={{ marginBottom: '0.75rem' }}>{t('search.songs')}</h2>
+              <SongListHeader />
+              {results.songs.map(song => (
+                <SongRow key={song.id} song={song} />
+              ))}
+              {songsHasMore && (
+                <div ref={songsSentinelRef} style={{ display: 'flex', justifyContent: 'center', padding: '1rem' }}>
+                  {loadingMoreSongs && <div className="spinner" style={{ width: 20, height: 20 }} />}
                 </div>
-                {results.songs.map(song => (
-                  <div
-                    key={song.id}
-                    className={`track-row${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
-                    style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 100px 65px' }}
-                    onDoubleClick={() => playSong(song, results.songs)}
-                    onContextMenu={e => {
-                      e.preventDefault();
-                      setContextMenuSongId(song.id);
-                      openContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
-                    }}
-                    role="row"
-                    onMouseDown={e => {
-                      if (e.button !== 0) return;
-                      e.preventDefault();
-                      const sx = e.clientX, sy = e.clientY;
-                      const track = songToTrack(song);
-                      const onMove = (me: MouseEvent) => {
-                        if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
-                          document.removeEventListener('mousemove', onMove);
-                          document.removeEventListener('mouseup', onUp);
-                          psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
-                        }
-                      };
-                      const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
-                      document.addEventListener('mousemove', onMove);
-                      document.addEventListener('mouseup', onUp);
-                    }}
-                  >
-                    <button
-                      className="btn btn-ghost"
-                      style={{ padding: 4 }}
-                      onClick={e => { e.stopPropagation(); playSong(song, results.songs); }}
-                    >
-                      <Play size={14} fill="currentColor" />
-                    </button>
-                    <div className="track-info">
-                      <span className="track-title" title={song.title}>{song.title}</span>
-                    </div>
-                    <div className="track-artist-cell"><span className="track-artist" title={song.artist}>{song.artist}</span></div>
-                    <div className="track-artist-cell"><span className="track-artist" title={song.album}>{song.album}</span></div>
-                    <span className="track-codec" style={{ alignSelf: 'center' }}>
-                      {[song.suffix?.toUpperCase(), showBitrate && song.bitRate ? `${song.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
-                    </span>
-                    <span className="track-duration" style={{ textAlign: 'right' }}>
-                      {formatDuration(song.duration)}
-                    </span>
-                  </div>
-                ))}
-              </div>
+              )}
             </section>
           )}
         </>

src/styles/tracks.css

@@ -392,88 +392,77 @@
   color: var(--text-muted);
 }
 
-/* ─ Row layout ─ */
+/* ─ Shared SongRow (used by Tracks Hub, SearchResults, AdvancedSearch) ─ */
 
-.virtual-song-row {
+.song-list-row {
   display: grid;
-  grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1.2fr) 56px;
+  grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 56px;
   gap: var(--space-3);
   align-items: center;
   height: 52px;
   padding: 0 var(--space-3);
+  font-size: 13px;
   cursor: default;
   transition: background var(--transition-fast);
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.virtual-song-row:hover {
+.song-list-row:hover {
   background: var(--bg-hover);
 }
 
-.virtual-song-row.is-current {
+.song-list-row.is-current {
   background: color-mix(in srgb, var(--accent) 14%, transparent);
 }
 
-.virtual-song-row.is-current .virtual-song-title {
+.song-list-row.is-current .song-list-row-title {
   color: var(--accent);
 }
 
-.virtual-song-cell {
+.song-list-row--header {
+  height: 36px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  cursor: default;
+  background: transparent;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.song-list-row--header:hover {
+  background: transparent;
+}
+
+.song-list-row-cell {
   min-width: 0;
 }
 
-.virtual-song-cell-actions-left {
+.song-list-row-actions {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
-.virtual-song-cell-title {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  gap: 1px;
-}
-
-.virtual-song-title {
-  font-size: 13px;
+.song-list-row-title {
   font-weight: 500;
   color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.virtual-song-artist {
-  font-size: 11px;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.virtual-song-cell-album {
-  font-size: 12px;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.virtual-song-cell-duration {
-  font-size: 12px;
+.song-list-row-genre {
   color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+
+.song-list-row-duration {
   text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+  font-size: 12px;
 }
 
-.virtual-song-cell-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.virtual-song-action-btn {
+.song-list-row-btn {
   background: transparent;
   border: none;
   color: var(--text-muted);
@@ -488,21 +477,21 @@
   transition: background var(--transition-fast), color var(--transition-fast);
 }
 
-.virtual-song-action-btn:hover {
+.song-list-row-btn:hover {
   background: var(--bg-hover);
   color: var(--text-primary);
 }
 
-.virtual-song-action-btn--play {
+.song-list-row-btn--play {
   color: var(--accent);
 }
 
-.virtual-song-action-btn--play:hover {
+.song-list-row-btn--play:hover {
   background: var(--accent);
   color: var(--ctp-crust, #11111b);
 }
 
-.virtual-song-row.is-current .virtual-song-action-btn--play {
+.song-list-row.is-current .song-list-row-btn--play {
   color: var(--accent);
 }
 
@@ -525,11 +514,12 @@
     justify-content: center;
   }
 
-  .virtual-song-row {
-    grid-template-columns: 64px minmax(0, 1fr) 56px;
+  .song-list-row {
+    grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 56px;
   }
 
-  .virtual-song-cell-album {
+  .song-list-row-cell:nth-child(4),  /* album */
+  .song-list-row-cell:nth-child(5) { /* genre */
     display: none;
   }
 }