refactor(web): migrate 4 open-coded cover URL sites to coverUrl() helper (C1 small-win)

web/src/lib/components/CompactTrackCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { TrackRef } from '$lib/api/types';
   import { playQueue, enqueueTrack } from '$lib/player/store.svelte';
-  import { FALLBACK_COVER } from '$lib/media/covers';
+  import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
   import { Plus } from 'lucide-svelte';
   import LikeButton from './LikeButton.svelte';
   import TrackMenu from './TrackMenu.svelte';
@@ -16,7 +16,7 @@
     index: number;
   } = $props();
 
-  const coverUrl = $derived(`/api/albums/${track.album_id}/cover`);
+  const cover = $derived(coverUrl(track.album_id));
 
   function onImgError(e: Event) {
     (e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
@@ -42,7 +42,7 @@
   >
     <div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
       <img
-        src={coverUrl}
+        src={cover}
         alt=""
         class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
         loading="lazy"

web/src/lib/components/PlayerBar.svelte

@@ -12,7 +12,7 @@
     toggleQueueDrawer
   } from '$lib/player/store.svelte';
   import { formatDuration } from '$lib/media/duration';
-  import { FALLBACK_COVER } from '$lib/media/covers';
+  import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
   import LikeButton from './LikeButton.svelte';
   import TrackMenu from './TrackMenu.svelte';
 
@@ -57,7 +57,7 @@
         class="shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
       >
         <img
-          src={`/api/albums/${current.album_id}/cover`}
+          src={coverUrl(current.album_id)}
           alt=""
           class="h-24 w-24 rounded-md object-cover"
           onerror={onCoverError}

web/src/lib/player/mediaSession.svelte.ts

@@ -1,3 +1,4 @@
+import { coverUrl } from '$lib/media/covers';
 import {
   player,
   togglePlay,
@@ -21,7 +22,7 @@ export function useMediaSession(): void {
       artist: t.artist_name,
       album: t.album_title,
       artwork: [{
-        src: `/api/albums/${t.album_id}/cover`,
+        src: coverUrl(t.album_id),
         sizes: '512x512',
         type: 'image/jpeg'
       }]

web/src/routes/admin/quarantine/+page.svelte

@@ -12,6 +12,7 @@
   import { errMessage } from '$lib/api/errors';
   import { pushToast } from '$lib/stores/toast.svelte';
   import { playRadio } from '$lib/player/store.svelte';
+  import { coverUrl } from '$lib/media/covers';
   import Modal from '$lib/components/Modal.svelte';
   import type { AdminQuarantineRow, LidarrQuarantineReason } from '$lib/api/types';
 
@@ -191,7 +192,7 @@
           >
             {#if r.album_id}
               <img
-                src={`/api/albums/${r.album_id}/cover`}
+                src={coverUrl(r.album_id)}
                 alt=""
                 class="h-full w-full rounded-md object-cover"
                 loading="lazy"

web/src/routes/library/hidden/+page.svelte

@@ -6,6 +6,7 @@
   import { qk } from '$lib/api/queries';
   import type { LidarrQuarantineMineRow, LidarrQuarantineReason } from '$lib/api/types';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
+  import { coverUrl } from '$lib/media/covers';
 
   const client = useQueryClient();
   const queryStore = createMyQuarantineQuery();
@@ -61,7 +62,7 @@
           <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-md bg-surface-hover">
             {#if row.album_cover_art_path}
               <img
-                src={`/api/albums/${row.album_id}/cover`}
+                src={coverUrl(row.album_id)}
                 alt=""
                 class="h-full w-full rounded-md object-cover"
                 loading="lazy"