feat(track-info): integrate TrackInfoModal with views

Phase 3 - Integration:
- Add onTrackShowInfo prop to TrackRow, AlbumDetailView,
  PlaylistDetailView, SearchView
- Add TrackInfoModal to +page.svelte with state management
- Pass showTrackInfo callback from main page to all views

cc

src/lib/components/TrackRow.svelte

@@ -49,6 +49,7 @@
     onShareSonglink?: () => void;
     onGoToAlbum?: () => void;
     onGoToArtist?: () => void;
+    onShowInfo?: () => void;
     onDownload?: () => void;
     isTrackDownloaded?: boolean;
     onReDownload?: () => void;
@@ -248,6 +249,7 @@
       onShareSonglink={menuActions?.onShareSonglink}
       onGoToAlbum={menuActions?.onGoToAlbum}
       onGoToArtist={menuActions?.onGoToArtist}
+      onShowInfo={menuActions?.onShowInfo}
       onDownload={menuActions?.onDownload}
       isTrackDownloaded={menuActions?.isTrackDownloaded}
       onReDownload={menuActions?.onReDownload}

src/lib/components/views/AlbumDetailView.svelte

@@ -60,6 +60,7 @@
     onTrackShareSonglink?: (track: Track) => void;
     onTrackGoToAlbum?: (albumId: string) => void;
     onTrackGoToArtist?: (artistId: number) => void;
+    onTrackShowInfo?: (trackId: number) => void;
     onPlayAll?: () => void;
     onShuffleAll?: () => void;
     onPlayAllNext?: () => void;
@@ -103,6 +104,7 @@
     onTrackShareSonglink,
     onTrackGoToAlbum,
     onTrackGoToArtist,
+    onTrackShowInfo,
     onPlayAll,
     onShuffleAll,
     onPlayAllNext,
@@ -408,6 +410,7 @@
             onShareQobuz: onTrackShareQobuz ? () => onTrackShareQobuz(track.id) : undefined,
             onShareSonglink: onTrackShareSonglink ? () => onTrackShareSonglink(track) : undefined,
             onGoToArtist: album.artistId && onTrackGoToArtist ? () => onTrackGoToArtist(album.artistId!) : undefined,
+            onShowInfo: onTrackShowInfo ? () => onTrackShowInfo(track.id) : undefined,
             onDownload: onTrackDownload ? () => onTrackDownload(track) : undefined,
             isTrackDownloaded,
             onReDownload: isTrackDownloaded && onTrackReDownload ? () => onTrackReDownload(track) : undefined,

src/lib/components/views/PlaylistDetailView.svelte

@@ -127,6 +127,7 @@
     onTrackShareSonglink?: (track: DisplayTrack) => void;
     onTrackGoToAlbum?: (albumId: string) => void;
     onTrackGoToArtist?: (artistId: number) => void;
+    onTrackShowInfo?: (trackId: number) => void;
     onTrackDownload?: (track: DisplayTrack) => void;
     onTrackRemoveDownload?: (trackId: number) => void;
     onTrackReDownload?: (track: DisplayTrack) => void;
@@ -155,6 +156,7 @@
     onTrackShareSonglink,
     onTrackGoToAlbum,
     onTrackGoToArtist,
+    onTrackShowInfo,
     onTrackDownload,
     onTrackRemoveDownload,
     onTrackReDownload,
@@ -1213,6 +1215,7 @@
               onShareSonglink: !track.isLocal && onTrackShareSonglink ? () => onTrackShareSonglink(track) : undefined,
               onGoToAlbum: !track.isLocal && track.albumId && onTrackGoToAlbum ? () => onTrackGoToAlbum(track.albumId!) : undefined,
               onGoToArtist: !track.isLocal && track.artistId && onTrackGoToArtist ? () => onTrackGoToArtist(track.artistId!) : undefined,
+              onShowInfo: !track.isLocal && onTrackShowInfo ? () => onTrackShowInfo(track.id) : undefined,
               onDownload: !track.isLocal && onTrackDownload ? () => onTrackDownload(track) : undefined,
               isTrackDownloaded: !track.isLocal ? downloadInfo.status === 'ready' : false,
               onReDownload: !track.isLocal && downloadInfo.status === 'ready' && onTrackReDownload ? () => onTrackReDownload(track) : undefined,

src/lib/components/views/SearchView.svelte

@@ -88,6 +88,7 @@
     onTrackShareSonglink?: (track: Track) => void;
     onTrackGoToAlbum?: (albumId: string) => void;
     onTrackGoToArtist?: (artistId: number) => void;
+    onTrackShowInfo?: (trackId: number) => void;
     onTrackDownload?: (track: Track) => void;
     onTrackRemoveDownload?: (trackId: number) => void;
     onTrackReDownload?: (track: Track) => void;
@@ -119,6 +120,7 @@
     onTrackShareSonglink,
     onTrackGoToAlbum,
     onTrackGoToArtist,
+    onTrackShowInfo,
     onTrackDownload,
     onTrackRemoveDownload,
     onTrackReDownload,
@@ -880,6 +882,7 @@
                         onShareSonglink={onTrackShareSonglink ? () => onTrackShareSonglink(track) : undefined}
                         onGoToAlbum={track.album?.id && onTrackGoToAlbum ? (() => { const albumId = track.album!.id!; return () => onTrackGoToAlbum(albumId); })() : undefined}
                         onGoToArtist={track.performer?.id && onTrackGoToArtist ? (() => { const artistId = track.performer!.id!; return () => onTrackGoToArtist(artistId); })() : undefined}
+                        onShowInfo={onTrackShowInfo ? () => onTrackShowInfo(track.id) : undefined}
                         onDownload={onTrackDownload ? () => onTrackDownload(track) : undefined}
                         isTrackDownloaded={isTrackDownloaded}
                         onReDownload={isTrackDownloaded && onTrackReDownload ? () => onTrackReDownload(track) : undefined}
@@ -1014,6 +1017,7 @@
                   onShareSonglink={onTrackShareSonglink ? () => onTrackShareSonglink(track) : undefined}
                   onGoToAlbum={track.album?.id && onTrackGoToAlbum ? (() => { const albumId = track.album!.id!; return () => onTrackGoToAlbum(albumId); })() : undefined}
                   onGoToArtist={track.performer?.id && onTrackGoToArtist ? (() => { const artistId = track.performer!.id!; return () => onTrackGoToArtist(artistId); })() : undefined}
+                  onShowInfo={onTrackShowInfo ? () => onTrackShowInfo(track.id) : undefined}
                   onDownload={onTrackDownload ? () => onTrackDownload(track) : undefined}
                   isTrackDownloaded={isTrackDownloaded}
                   onReDownload={isTrackDownloaded && onTrackReDownload ? () => onTrackReDownload(track) : undefined}

src/routes/+page.svelte

@@ -282,6 +282,7 @@
   import FocusMode from '$lib/components/FocusMode.svelte';
   import PlaylistModal from '$lib/components/PlaylistModal.svelte';
   import PlaylistImportModal from '$lib/components/PlaylistImportModal.svelte';
+  import TrackInfoModal from '$lib/components/TrackInfoModal.svelte';
   import CastPicker from '$lib/components/CastPicker.svelte';
   import LyricsSidebar from '$lib/components/lyrics/LyricsSidebar.svelte';
   import OfflinePlaceholder from '$lib/components/OfflinePlaceholder.svelte';
@@ -337,6 +338,10 @@
   let playlistModalTracksAreLocal = $state(false);
   let isPlaylistImportOpen = $state(false);
   let isAboutModalOpen = $state(false);
+
+  // Track Info Modal State
+  let isTrackInfoOpen = $state(false);
+  let trackInfoTrackId = $state<number | null>(null);
   let userPlaylists = $state<{ id: number; name: string; tracks_count: number }[]>([]);
   
   // Sidebar reference for refreshing playlists
@@ -1667,6 +1672,12 @@
     }
   }
 
+  // Track Info Modal
+  function showTrackInfo(trackId: number) {
+    trackInfoTrackId = trackId;
+    isTrackInfoOpen = true;
+  }
+
   // Auth Handlers
   async function handleStartOffline() {
     // Enable manual offline mode and enter app without authentication
@@ -2430,6 +2441,7 @@
             onTrackShareSonglink={(track) => shareSonglinkTrack(track.id, track.isrc)}
             onTrackGoToAlbum={handleAlbumClick}
             onTrackGoToArtist={handleArtistClick}
+            onTrackShowInfo={showTrackInfo}
             onTrackDownload={handleDisplayTrackDownload}
             onTrackReDownload={handleDisplayTrackDownload}
             onTrackRemoveDownload={handleTrackRemoveDownload}
@@ -2462,6 +2474,7 @@
           onTrackShareSonglink={(track) => shareSonglinkTrack(track.id, track.isrc)}
           onTrackGoToAlbum={handleAlbumClick}
           onTrackGoToArtist={handleArtistClick}
+          onTrackShowInfo={showTrackInfo}
           onPlayAll={handlePlayAllAlbum}
           onShuffleAll={handleShuffleAlbum}
           onPlayAllNext={handleAddAlbumToQueueNext}
@@ -2546,6 +2559,7 @@
           onTrackShareSonglink={(track) => shareSonglinkTrack(track.id, track.isrc)}
           onTrackGoToAlbum={handleAlbumClick}
           onTrackGoToArtist={handleArtistClick}
+          onTrackShowInfo={showTrackInfo}
           onTrackDownload={handleDisplayTrackDownload}
           onTrackRemoveDownload={handleTrackRemoveDownload}
           onTrackReDownload={handleDisplayTrackDownload}
@@ -2828,6 +2842,16 @@
       onClose={() => isAboutModalOpen = false}
     />
 
+    <!-- Track Info Modal -->
+    <TrackInfoModal
+      isOpen={isTrackInfoOpen}
+      trackId={trackInfoTrackId}
+      onClose={() => {
+        isTrackInfoOpen = false;
+        trackInfoTrackId = null;
+      }}
+    />
+
     <!-- Cast Picker -->
     <CastPicker
       isOpen={isCastPickerOpen}