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/components/SongCard.tsx

@@ -0,0 +1,114 @@
+import React, { memo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Play, ListPlus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { SubsonicSong, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import CachedImage from './CachedImage';
+import { enqueueAndPlay } from '../utils/playSong';
+import { useDragDrop } from '../contexts/DragDropContext';
+
+interface SongCardProps {
+  song: SubsonicSong;
+}
+
+function SongCard({ song }: SongCardProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const openContextMenu = usePlayerStore(s => s.openContextMenu);
+  const enqueue = usePlayerStore(s => s.enqueue);
+  const coverUrl = song.coverArt ? buildCoverArtUrl(song.coverArt, 200) : '';
+  const psyDrag = useDragDrop();
+
+  const handleClick = () => enqueueAndPlay(song);
+
+  const handleArtistClick = (e: React.MouseEvent) => {
+    if (!song.artistId) return;
+    e.stopPropagation();
+    navigate(`/artist/${song.artistId}`);
+  };
+
+  return (
+    <div
+      className="song-card card"
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      aria-label={`${song.title} – ${song.artist}`}
+      onKeyDown={e => e.key === 'Enter' && handleClick()}
+      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 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', id: song.id, name: song.title }), label: song.title, coverUrl: coverUrl || undefined },
+              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-card-cover">
+        {coverUrl ? (
+          <CachedImage
+            src={coverUrl}
+            cacheKey={coverArtCacheKey(song.coverArt!, 200)}
+            alt={`${song.album} Cover`}
+            loading="lazy"
+          />
+        ) : (
+          <div className="song-card-cover-placeholder">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <circle cx="12" cy="12" r="10" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </div>
+        )}
+        <div className="song-card-play-overlay">
+          <button
+            className="song-card-action-btn"
+            onClick={e => { e.stopPropagation(); enqueueAndPlay(song); }}
+            aria-label={t('tracks.playSong')}
+            data-tooltip={t('tracks.playSong')}
+            data-tooltip-pos="top"
+          >
+            <Play size={14} fill="currentColor" />
+          </button>
+          <button
+            className="song-card-action-btn"
+            onClick={e => { e.stopPropagation(); enqueue([songToTrack(song)]); }}
+            aria-label={t('tracks.enqueueSong')}
+            data-tooltip={t('tracks.enqueueSong')}
+            data-tooltip-pos="top"
+          >
+            <ListPlus size={14} />
+          </button>
+        </div>
+      </div>
+      <div className="song-card-info">
+        <p className="song-card-title truncate" title={song.title}>{song.title}</p>
+        <p
+          className={`song-card-artist truncate${song.artistId ? ' track-artist-link' : ''}`}
+          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+          onClick={handleArtistClick}
+          title={song.artist}
+        >{song.artist}</p>
+      </div>
+    </div>
+  );
+}
+
+export default memo(SongCard);