Many improvemtns and fixes related to decoupling of svelte and rust on android.

src/lib/components/sessions/SessionCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Session } from "$lib/api/types";
-  import { auth } from "$lib/stores/auth";
+  import CachedImage from "$lib/components/common/CachedImage.svelte";
 
   interface Props {
     session: Session;
@@ -10,31 +10,6 @@
 
   let { session, selected = false, onclick }: Props = $props();
 
-  let imageUrl = $state<string>("");
-
-  // Load image URL asynchronously
-  async function loadImageUrl(): Promise<void> {
-    if (!session.nowPlayingItem) {
-      imageUrl = "";
-      return;
-    }
-
-    try {
-      const repo = auth.getRepository();
-      imageUrl = await repo.getImageUrl(session.nowPlayingItem.id, "Primary", {
-        maxWidth: 80,
-        tag: session.nowPlayingItem.primaryImageTag,
-      });
-    } catch {
-      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);
@@ -73,13 +48,16 @@
   <!-- Now playing -->
   {#if nowPlaying && playState}
     <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/10">
-      {#if imageUrl}
-        <img
-          src={imageUrl}
+      <div class="w-12 h-12 rounded overflow-hidden flex-shrink-0">
+        <CachedImage
+          itemId={nowPlaying.id}
+          imageType="Primary"
+          tag={nowPlaying.primaryImageTag}
+          maxWidth={80}
           alt={nowPlaying.name}
-          class="w-12 h-12 rounded object-cover flex-shrink-0"
+          class="w-full h-full object-cover"
         />
-      {/if}
+      </div>
 
       <div class="flex-1 min-w-0">
         <p class="text-sm font-medium text-white truncate">{nowPlaying.name}</p>