feat(dz): add playlist caching and playlist view UI

Introduce database schema and types for caching online playlist tracks. Add functions to upsert and retrieve playlist tracks
from the cache. Implement a new Svelte page for viewing individual
playlists, including favorite tracks, with UI for track listing and
playlist info. Update the main service page to support
double-click navigation to playlist details.

src/routes/services/deezer/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
   import { deezerAuth, loadDeezerAuth, saveArl, saveUser, clearDeezerAuth, saveCacheTimestamp } from '$lib/stores/deezer';
   import { deezerAPI } from '$lib/services/deezer';
   import {
@@ -226,6 +227,10 @@
     selectedIndex = index;
   }
 
+  function handlePlaylistDoubleClick(playlistId: string) {
+    goto(`/services/deezer/playlists/${playlistId}`);
+  }
+
   function formatDuration(seconds: number): string {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
@@ -343,10 +348,25 @@
                   </tr>
                 </thead>
                 <tbody>
+                  <!-- Virtual Favorite Tracks Playlist (only show if we have favorite tracks) -->
+                  {#if tracks.length > 0}
+                    <tr
+                      class:highlighted={selectedIndex === -1}
+                      class="favorite-tracks-row"
+                      onclick={() => handleItemClick(-1)}
+                      ondblclick={() => handlePlaylistDoubleClick('favorite-tracks')}
+                    >
+                      <td>Favorite Tracks</td>
+                      <td>{tracks.length}</td>
+                    </tr>
+                  {/if}
+
+                  <!-- User Playlists -->
                   {#each playlists as playlist, i}
                     <tr
                       class:highlighted={selectedIndex === i}
                       onclick={() => handleItemClick(i)}
+                      ondblclick={() => handlePlaylistDoubleClick(playlist.id)}
                     >
                       <td>{playlist.title}</td>
                       <td>{playlist.nb_tracks}</td>
@@ -668,4 +688,8 @@
     padding: 16px 8px;
     text-align: center;
   }
+
+  .favorite-tracks-row {
+    font-weight: bold;
+  }
 </style>

src/routes/services/deezer/playlists/[id]/+page.svelte

@@ -0,0 +1,403 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { deezerAuth } from '$lib/stores/deezer';
+  import { deezerAPI } from '$lib/services/deezer';
+  import {
+    getCachedPlaylist,
+    getCachedPlaylistTracks,
+    getCachedTracks,
+    upsertPlaylistTracks,
+    type DeezerPlaylistTrack
+  } from '$lib/library/deezer-database';
+  import type { Track } from '$lib/types/track';
+
+  type ViewMode = 'tracks' | 'info';
+
+  let viewMode = $state<ViewMode>('tracks');
+  let playlistId = $derived($page.params.id ?? '');
+  let playlistTitle = $state('');
+  let playlistCreator = $state('');
+  let playlistTrackCount = $state(0);
+  let playlistPicture = $state<string | undefined>(undefined);
+  let tracks = $state<Track[]>([]);
+  let loading = $state(true);
+  let refreshing = $state(false);
+  let error = $state<string | null>(null);
+  let selectedTrackIndex = $state<number | null>(null);
+  let lastCached = $state<number | null>(null);
+
+  const isFavoriteTracks = $derived(playlistId === 'favorite-tracks');
+
+  onMount(async () => {
+    await loadPlaylist();
+  });
+
+  async function loadPlaylist() {
+    loading = true;
+    error = null;
+
+    try {
+      if (isFavoriteTracks) {
+        // Load favorite tracks from cache
+        playlistTitle = 'Favorite Tracks';
+        playlistCreator = $deezerAuth.user?.name || 'Unknown';
+
+        const favTracks = await getCachedTracks();
+        playlistTrackCount = favTracks.length;
+        tracks = favTracks.map(convertDeezerTrackToTrack);
+        lastCached = favTracks[0]?.cached_at || null;
+      } else {
+        // Load regular playlist
+        const [playlist, cachedTracks] = await Promise.all([
+          getCachedPlaylist(playlistId),
+          getCachedPlaylistTracks(playlistId)
+        ]);
+
+        if (!playlist) {
+          error = `Playlist "${playlistId}" not found in cache.`;
+          loading = false;
+          return;
+        }
+
+        playlistTitle = playlist.title;
+        playlistCreator = playlist.creator_name || 'Unknown';
+        playlistTrackCount = playlist.nb_tracks;
+        playlistPicture = playlist.picture_medium || playlist.picture_small;
+        lastCached = playlist.cached_at;
+
+        // If no cached tracks, fetch from API
+        if (cachedTracks.length === 0) {
+          await refreshPlaylistTracks();
+        } else {
+          tracks = cachedTracks.map(convertPlaylistTrackToTrack);
+        }
+      }
+    } catch (e) {
+      error = 'Error loading playlist: ' + (e instanceof Error ? e.message : String(e));
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function refreshPlaylistTracks() {
+    if (!$deezerAuth.arl || refreshing) {
+      return;
+    }
+
+    refreshing = true;
+    error = null;
+
+    try {
+      deezerAPI.setArl($deezerAuth.arl);
+
+      console.log('[Deezer Playlist] Fetching tracks for playlist:', playlistId);
+      const apiTracks = await deezerAPI.getPlaylistTracks(playlistId);
+
+      console.log('[Deezer Playlist] Fetched', apiTracks.length, 'tracks');
+
+      // Update database cache
+      await upsertPlaylistTracks(playlistId, apiTracks);
+
+      // Reload from cache
+      const cachedTracks = await getCachedPlaylistTracks(playlistId);
+      tracks = cachedTracks.map(convertPlaylistTrackToTrack);
+      lastCached = Math.floor(Date.now() / 1000);
+
+      console.log('[Deezer Playlist] Refresh complete!');
+    } catch (e) {
+      console.error('Error refreshing playlist tracks:', e);
+      error = 'Error refreshing playlist: ' + (e instanceof Error ? e.message : String(e));
+    } finally {
+      refreshing = false;
+    }
+  }
+
+  function convertPlaylistTrackToTrack(deezerTrack: DeezerPlaylistTrack): Track {
+    return {
+      path: '', // Deezer tracks don't have a local path
+      filename: deezerTrack.title,
+      format: 'unknown',
+      metadata: {
+        title: deezerTrack.title,
+        artist: deezerTrack.artist_name,
+        album: deezerTrack.album_title || undefined,
+        trackNumber: deezerTrack.track_number || undefined,
+        duration: deezerTrack.duration
+      }
+    };
+  }
+
+  function convertDeezerTrackToTrack(deezerTrack: any): Track {
+    return {
+      path: '',
+      filename: deezerTrack.title,
+      format: 'unknown',
+      metadata: {
+        title: deezerTrack.title,
+        artist: deezerTrack.artist_name,
+        album: deezerTrack.album_title || undefined,
+        duration: deezerTrack.duration
+      }
+    };
+  }
+
+  function handleTrackClick(index: number) {
+    selectedTrackIndex = index;
+  }
+
+  function formatTimestamp(timestamp: number | null): string {
+    if (!timestamp) return 'Never';
+    const date = new Date(timestamp * 1000);
+    return date.toLocaleString();
+  }
+</script>
+
+<div class="wrapper">
+  {#if loading}
+    <p style="padding: 8px;">Loading playlist...</p>
+  {:else if error}
+    <p class="error" style="padding: 8px;">{error}</p>
+  {:else}
+    <!-- Header -->
+    <div class="collection-header">
+      {#if playlistPicture}
+        <img
+          src={playlistPicture}
+          alt="{playlistTitle} cover"
+          class="collection-cover"
+        />
+      {:else}
+        <div class="collection-cover-placeholder"></div>
+      {/if}
+      <div class="collection-info">
+        <h2>{playlistTitle}</h2>
+        <p class="collection-subtitle">by {playlistCreator}</p>
+        <p class="collection-metadata">{playlistTrackCount} track{playlistTrackCount !== 1 ? 's' : ''}</p>
+      </div>
+    </div>
+
+    <section class="collection-content">
+      <!-- Tabs -->
+      <!--
+        svelte-ignore a11y_no_noninteractive_element_to_interactive_role
+        Reason: 98.css library requires <menu role="tablist"> for proper tab styling.
+      -->
+      <menu role="tablist">
+        <li role="tab" aria-selected={viewMode === 'tracks'}>
+          <button onclick={() => viewMode = 'tracks'}>Tracks</button>
+        </li>
+        <li role="tab" aria-selected={viewMode === 'info'}>
+          <button onclick={() => viewMode = 'info'}>Info</button>
+        </li>
+      </menu>
+
+      <!-- Tab Content -->
+      <div class="window tab-content" role="tabpanel">
+        <div class="window-body">
+          {#if viewMode === 'tracks'}
+            <!-- Track Listing -->
+            <div class="sunken-panel table-container">
+              <table class="interactive">
+                <thead>
+                  <tr>
+                    <th style="width: 50px;">#</th>
+                    <th>Title</th>
+                    <th>Artist</th>
+                    <th>Album</th>
+                    <th>Duration</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each tracks as track, i}
+                    <tr
+                      class:highlighted={selectedTrackIndex === i}
+                      onclick={() => handleTrackClick(i)}
+                    >
+                      <td class="track-number">
+                        {track.metadata.trackNumber ?? i + 1}
+                      </td>
+                      <td>{track.metadata.title || track.filename}</td>
+                      <td>{track.metadata.artist || '—'}</td>
+                      <td>{track.metadata.album || '—'}</td>
+                      <td class="duration">
+                        {#if track.metadata.duration}
+                          {Math.floor(track.metadata.duration / 60)}:{String(Math.floor(track.metadata.duration % 60)).padStart(2, '0')}
+                        {:else}
+                          —
+                        {/if}
+                      </td>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+          {:else if viewMode === 'info'}
+            <!-- Playlist Info -->
+            <div class="info-container">
+              <fieldset>
+                <legend>Playlist Information</legend>
+                <div class="field-row">
+                  <span class="field-label">Title:</span>
+                  <span>{playlistTitle}</span>
+                </div>
+                <div class="field-row">
+                  <span class="field-label">Creator:</span>
+                  <span>{playlistCreator}</span>
+                </div>
+                <div class="field-row">
+                  <span class="field-label">Tracks:</span>
+                  <span>{playlistTrackCount}</span>
+                </div>
+                <div class="field-row">
+                  <span class="field-label">Last Updated:</span>
+                  <span>{formatTimestamp(lastCached)}</span>
+                </div>
+              </fieldset>
+
+              {#if !isFavoriteTracks}
+                <fieldset style="margin-top: 16px;">
+                  <legend>Actions</legend>
+                  <button onclick={refreshPlaylistTracks} disabled={refreshing}>
+                    {refreshing ? 'Refreshing...' : 'Refresh Playlist'}
+                  </button>
+                  <p class="help-text">Fetch the latest tracks from Deezer</p>
+                </fieldset>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .error {
+    color: #ff6b6b;
+  }
+
+  .collection-header {
+    display: flex;
+    gap: 16px;
+    padding: 8px;
+    margin-bottom: 6px;
+    flex-shrink: 0;
+  }
+
+  .collection-cover {
+    width: 152px;
+    height: 152px;
+    object-fit: cover;
+    image-rendering: auto;
+    flex-shrink: 0;
+  }
+
+  .collection-cover-placeholder {
+    width: 152px;
+    height: 152px;
+    background: linear-gradient(135deg, #c0c0c0 25%, #808080 25%, #808080 50%, #c0c0c0 50%, #c0c0c0 75%, #808080 75%);
+    background-size: 8px 8px;
+    flex-shrink: 0;
+  }
+
+  .collection-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  h2 {
+    margin: 0 0 4px 0;
+    font-size: 1.5em;
+  }
+
+  .collection-subtitle {
+    margin: 0 0 8px 0;
+    font-size: 1.1em;
+    opacity: 0.8;
+  }
+
+  .collection-metadata {
+    margin: 0;
+    opacity: 0.6;
+    font-size: 0.9em;
+  }
+
+  .collection-content {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .tab-content {
+    margin-top: -2px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .window-body {
+    padding: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .table-container {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  th {
+    text-align: left;
+  }
+
+  .track-number {
+    text-align: center;
+    opacity: 0.6;
+  }
+
+  .duration {
+    font-family: monospace;
+    font-size: 0.9em;
+    text-align: center;
+    width: 80px;
+  }
+
+  .info-container {
+    padding: 16px;
+  }
+
+  .field-row {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .field-label {
+    font-weight: bold;
+    min-width: 120px;
+  }
+
+  .help-text {
+    margin: 8px 0 0 0;
+    font-size: 11px;
+    color: #808080;
+  }
+</style>