Fix for offline mode

src/lib/components/library/GenericGenreBrowser.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { page } from "$app/stores";
   import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { goto } from "$app/navigation";
   import { navigateBack } from "$lib/utils/navigation";
@@ -53,6 +54,16 @@
 
   onMount(async () => {
     await loadGenres();
+    // Auto-select a genre when linked with ?genre=<name> (e.g. from a genre tag)
+    const requestedGenre = $page.url.searchParams.get("genre");
+    if (requestedGenre) {
+      const match = genres.find(
+        (g) => g.name.toLowerCase() === requestedGenre.toLowerCase(),
+      );
+      if (match) {
+        await loadGenreItems(match);
+      }
+    }
     markLoaded();
   });
 

src/lib/components/library/GenreTags.svelte

@@ -5,14 +5,34 @@
     genres: string[];
     maxShow?: number;  // Default: unlimited
     clickable?: boolean;  // Default: true
+    itemType?: string;  // Determines which genre browse page to open
   }
 
   let {
     genres,
     maxShow,
-    clickable = true
+    clickable = true,
+    itemType
   }: Props = $props();
 
+  // Map the item type to its genre-browse route
+  function genreBasePath(type: string | undefined): string {
+    switch (type) {
+      case "MusicAlbum":
+      case "MusicArtist":
+      case "Audio":
+        return "/library/music/genres";
+      case "Series":
+      case "Season":
+      case "Episode":
+        return "/library/shows/genres";
+      case "Movie":
+        return "/library/movies/genres";
+      default:
+        return "/library/movies/genres";
+    }
+  }
+
   const displayGenres = $derived(
     maxShow ? genres.slice(0, maxShow) : genres
   );
@@ -23,9 +43,7 @@
 
   function handleGenreClick(genre: string) {
     if (clickable) {
-      // Navigate to genre browse page
-      // For now, we'll use a simple navigation - could be enhanced with a proper genre browse page
-      goto(`/search?genre=${encodeURIComponent(genre)}`);
+      goto(`${genreBasePath(itemType)}?genre=${encodeURIComponent(genre)}`);
     }
   }
 </script>