feat(tracks): add Tracks library hub page (closes #299) (#300)

New /tracks route with three sections:

- Hero "Track of the moment" — random pick with play / enqueue / reroll
- Random Pick rail — 18 song cards, rerollable; hero song deduped
- Browse all tracks — virtualized list (@tanstack/react-virtual),
  paginated 50 at a time

Browse uses Navidrome's native /api/song?_sort=title&_order=ASC for
proper A-Z order (no Subsonic equivalent), with automatic fallback
to search3 on non-Navidrome servers. Search input drives search3
with 300ms debounce. Bearer token cached module-level, re-auth on 401.

Play button on rows + cards calls a new enqueueAndPlay() helper that
appends to the existing queue (skip if duplicate) and jumps to the
song — different from playSongNow which replaces the queue. Enqueue
button stays opaque (no hover-only).

i18n keys for sidebar.tracks + tracks.* namespace in all 8 locales.
New AudioLines sidebar icon. Sidebar entry inserted between
"All Albums" and "Build a Mix".

Performance: cover thumbnails dropped (uniform layout instead),
RAF-throttled scroll prefetch, hover transforms removed from cards
(WebKitGTK compositing-friendly).

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

src/pages/Tracks.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Play, ListPlus, RefreshCw, Sparkles } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+  SubsonicSong,
+  getRandomSongs,
+  buildCoverArtUrl,
+  coverArtCacheKey,
+} from '../api/subsonic';
+import { useAuthStore } from '../store/authStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import CachedImage from '../components/CachedImage';
+import SongRail from '../components/SongRail';
+import VirtualSongList from '../components/VirtualSongList';
+import { playSongNow } from '../utils/playSong';
+
+const RANDOM_RAIL_SIZE = 18;
+
+export default function Tracks() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const activeServerId = useAuthStore(s => s.activeServerId);
+  const enqueue = usePlayerStore(s => s.enqueue);
+
+  const [hero, setHero] = useState<SubsonicSong | null>(null);
+  const [heroLoading, setHeroLoading] = useState(false);
+
+  const [random, setRandom] = useState<SubsonicSong[]>([]);
+  const [randomLoading, setRandomLoading] = useState(true);
+
+  const rerollHero = useCallback(async () => {
+    setHeroLoading(true);
+    try {
+      const picks = await getRandomSongs(1);
+      if (picks[0]) setHero(picks[0]);
+    } finally {
+      setHeroLoading(false);
+    }
+  }, []);
+
+  const rerollRandom = useCallback(async () => {
+    setRandomLoading(true);
+    try {
+      const r = await getRandomSongs(RANDOM_RAIL_SIZE);
+      setRandom(r);
+    } finally {
+      setRandomLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!activeServerId) return;
+    rerollHero();
+    rerollRandom();
+  }, [activeServerId, rerollHero, rerollRandom]);
+
+  const heroCoverUrl = hero?.coverArt ? buildCoverArtUrl(hero.coverArt, 600) : '';
+
+  // Hide the hero song from the random rail if the server happens to return it in
+  // both fetches (Navidrome's getRandomSongs sometimes overlaps within a short window).
+  const railSongs = useMemo(
+    () => (hero ? random.filter(s => s.id !== hero.id) : random),
+    [random, hero],
+  );
+
+  return (
+    <div className="content-body animate-fade-in tracks-page">
+      <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>
+        </div>
+      </header>
+
+      {hero && (
+        <section className="tracks-hero">
+          <div className="tracks-hero-cover">
+            {heroCoverUrl ? (
+              <CachedImage
+                src={heroCoverUrl}
+                cacheKey={coverArtCacheKey(hero.coverArt!, 600)}
+                alt=""
+              />
+            ) : (
+              <div className="tracks-hero-cover-placeholder" />
+            )}
+          </div>
+          <div className="tracks-hero-content">
+            <span className="tracks-hero-eyebrow">
+              <Sparkles size={14} />
+              {t('tracks.heroEyebrow')}
+            </span>
+            <h2 className="tracks-hero-title" title={hero.title}>{hero.title}</h2>
+            <p className="tracks-hero-meta">
+              <span
+                className={hero.artistId ? 'track-artist-link' : ''}
+                style={{ cursor: hero.artistId ? 'pointer' : 'default' }}
+                onClick={() => hero.artistId && navigate(`/artist/${hero.artistId}`)}
+              >{hero.artist}</span>
+              {hero.album && (
+                <>
+                  <span className="tracks-hero-meta-dot">·</span>
+                  <span
+                    className={hero.albumId ? 'track-artist-link' : ''}
+                    style={{ cursor: hero.albumId ? 'pointer' : 'default' }}
+                    onClick={() => hero.albumId && navigate(`/album/${hero.albumId}`)}
+                  >{hero.album}</span>
+                </>
+              )}
+            </p>
+            <div className="tracks-hero-actions">
+              <button
+                className="btn btn-primary"
+                onClick={() => playSongNow(hero)}
+              >
+                <Play size={16} fill="currentColor" /> {t('tracks.playSong')}
+              </button>
+              <button
+                className="btn"
+                onClick={() => enqueue([songToTrack(hero)])}
+              >
+                <ListPlus size={16} /> {t('tracks.enqueueSong')}
+              </button>
+              <button
+                className="btn btn-ghost"
+                onClick={rerollHero}
+                disabled={heroLoading}
+                aria-label={t('tracks.heroReroll')}
+                data-tooltip={t('tracks.heroReroll')}
+                data-tooltip-pos="top"
+              >
+                <RefreshCw size={16} className={heroLoading ? 'is-spinning' : ''} />
+              </button>
+            </div>
+          </div>
+        </section>
+      )}
+
+      <SongRail
+        title={t('tracks.railRandom')}
+        songs={railSongs}
+        loading={randomLoading}
+        onReroll={rerollRandom}
+      />
+
+      <VirtualSongList
+        title={t('tracks.browseTitle')}
+        emptyBrowseText={t('tracks.browseUnsupported')}
+      />
+    </div>
+  );
+}