many changes

src/lib/components/sessions/SessionCard.svelte

@@ -10,20 +10,31 @@
 
   let { session, selected = false, onclick }: Props = $props();
 
-  function getImageUrl(): string {
-    if (!session.nowPlayingItem) return "";
+  let imageUrl = $state<string>("");
+
+  // Load image URL asynchronously
+  async function loadImageUrl(): Promise<void> {
+    if (!session.nowPlayingItem) {
+      imageUrl = "";
+      return;
+    }
 
     try {
       const repo = auth.getRepository();
-      return repo.getImageUrl(session.nowPlayingItem.id, "Primary", {
+      imageUrl = await repo.getImageUrl(session.nowPlayingItem.id, "Primary", {
         maxWidth: 80,
         tag: session.nowPlayingItem.primaryImageTag,
       });
     } catch {
-      return "";
+      imageUrl = "";
     }
   }
 
+  // Load image when session changes
+  $effect(() => {
+    loadImageUrl();
+  });
+
   function formatTime(ticks: number): string {
     const seconds = Math.floor(ticks / 10000000);
     const minutes = Math.floor(seconds / 60);
@@ -35,7 +46,6 @@
     return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
   }
 
-  const imageUrl = $derived(getImageUrl());
   const playState = $derived(session.playState);
   const nowPlaying = $derived(session.nowPlayingItem);
 </script>