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

src/lib/components/library/GenericGenreBrowser.svelte

@@ -6,6 +6,7 @@
   import SearchBar from "$lib/components/common/SearchBar.svelte";
   import BackButton from "$lib/components/common/BackButton.svelte";
   import ResultsCounter from "$lib/components/common/ResultsCounter.svelte";
+  import CachedImage from "$lib/components/common/CachedImage.svelte";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
   import type { Genre, MediaItem } from "$lib/api/types";
 
@@ -41,8 +42,6 @@
   let selectedGenre = $state<Genre | null>(null);
   let genreItems = $state<MediaItem[]>([]);
   let loadingItems = $state(false);
-  let genreItemImageUrls = $state<Map<string, string>>(new Map());
-
   const { markLoaded } = useServerReachabilityReload(async () => {
     await loadGenres();
     if (selectedGenre) {
@@ -80,7 +79,6 @@
     try {
       loadingItems = true;
       selectedGenre = genre;
-      genreItemImageUrls = new Map(); // Clear image URLs when loading new genre
       const repo = auth.getRepository();
       const result = await repo.getItems($currentLibrary.id, {
         includeItemTypes: config.itemTypes,
@@ -98,31 +96,6 @@
     }
   }
 
-  // Load image URL for a single item
-  async function loadGenreItemImage(item: MediaItem): Promise<void> {
-    if (!item.primaryImageTag || genreItemImageUrls.has(item.id)) return;
-
-    try {
-      const repo = auth.getRepository();
-      const url = await repo.getImageUrl(item.id, "Primary", {
-        maxWidth: 300,
-        tag: item.primaryImageTag,
-      });
-      genreItemImageUrls.set(item.id, url);
-    } catch {
-      genreItemImageUrls.set(item.id, "");
-    }
-  }
-
-  // Load image URLs for all genre items
-  $effect(() => {
-    genreItems.forEach((item) => {
-      if (item.primaryImageTag && !genreItemImageUrls.has(item.id)) {
-        loadGenreItemImage(item);
-      }
-    });
-  });
-
   function applyFilter() {
     let result = [...genres];
 
@@ -245,19 +218,14 @@
           {#each genreItems as item (item.id)}
             <button onclick={() => handleItemClick(item)} class="group text-left">
               <div class="{aspectRatioClass} bg-[var(--color-surface)] rounded-lg overflow-hidden mb-2">
-                {#if item.primaryImageTag && genreItemImageUrls.get(item.id)}
-                  <img
-                    src={genreItemImageUrls.get(item.id)}
-                    alt={item.name}
-                    class="w-full h-full object-cover group-hover:scale-105 transition-transform"
-                  />
-                {:else}
-                  <div class="w-full h-full flex items-center justify-center">
-                    <svg class="w-16 h-16 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z" />
-                    </svg>
-                  </div>
-                {/if}
+                <CachedImage
+                  itemId={item.id}
+                  imageType="Primary"
+                  tag={item.primaryImageTag}
+                  maxWidth={300}
+                  alt={item.name}
+                  class="w-full h-full object-cover group-hover:scale-105 transition-transform"
+                />
               </div>
               <p class="font-medium text-white truncate group-hover:text-[var(--color-jellyfin)] transition-colors">
                 {item.name}