refactor(web): playlistTrackToRef helper to dedupe TrackRef

reconstruction (#375)

PlaylistTrackRow.svelte and PlaylistCard.toTrackRefs both rebuilt
TrackRef from PlaylistTrack with the same field-by-field literal.
Server adding a new TrackRef field would have needed both sites
updated; now one helper owns the mapping.

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

web/src/lib/components/PlaylistCard.svelte

@@ -4,6 +4,7 @@
   import type { Playlist, PlaylistTrack, TrackRef } from '$lib/api/types';
   import { user } from '$lib/auth/store.svelte';
   import { getPlaylist, refreshDiscover, refreshForYou } from '$lib/api/playlists';
+  import { playlistTrackToRef } from '$lib/playlists/playlistTrackToRef';
   import { errCode } from '$lib/api/errors';
   import { qk } from '$lib/api/queries';
   import { playQueue } from '$lib/player/store.svelte';
@@ -25,25 +26,12 @@
     menuOpen = !menuOpen;
   }
 
-  // Map PlaylistTrack rows to TrackRef shape and drop tracks whose upstream
-  // file has been removed (track_id is null). Mirrors PlaylistTrackRow's
-  // liveTrack derivation.
+  // Map PlaylistTrack rows to TrackRef shape and drop tracks whose
+  // upstream file has been removed (track_id null).
   function toTrackRefs(rows: PlaylistTrack[]): TrackRef[] {
-    const out: TrackRef[] = [];
-    for (const r of rows) {
-      if (!r.track_id) continue;
-      out.push({
-        id: r.track_id,
-        title: r.title,
-        album_id: r.album_id ?? '',
-        album_title: r.album_title,
-        artist_id: r.artist_id ?? '',
-        artist_name: r.artist_name,
-        duration_sec: r.duration_sec,
-        stream_url: r.stream_url ?? ''
-      });
-    }
-    return out;
+    return rows
+      .map((r) => playlistTrackToRef(r))
+      .filter((t): t is TrackRef => t !== null);
   }
 
   async function onPlayClick(e: MouseEvent) {