feat(library): genre sliders, artist links, and navigation utils

- music landing: diverse per-genre album sliders (online counts /
  offline wide-probe fallback) and home-screen library shortcuts
- add ArtistLinks component and shared navigation/genreDiversity utils
- player/playback-mode refinements across Rust and frontend

src/routes/+layout.svelte

@@ -17,7 +17,10 @@
   import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
   import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
   import BottomNav from "$lib/components/BottomNav.svelte";
-  import { isInitialized, pendingSyncCount, isAndroid, shuffle, repeat, hasNext, hasPrevious, showSleepTimerModal } from "$lib/stores/appState";
+  import { isInitialized, pendingSyncCount, isAndroid, showSleepTimerModal } from "$lib/stores/appState";
+  // Shuffle/repeat/next/previous come from the event-driven queue store, the
+  // single source of truth (updated instantly on queue_changed).
+  import { isShuffle as shuffle, repeatMode as repeat, hasNext, hasPrevious } from "$lib/stores/queue";
 
   let { children } = $props();
 

src/routes/+page.svelte

@@ -4,11 +4,13 @@
   import { platform } from "@tauri-apps/plugin-os";
   import { auth, isAuthenticated } from "$lib/stores/auth";
   import { home } from "$lib/stores/home";
+  import { library, libraries } from "$lib/stores/library";
   import { isServerReachable } from "$lib/stores/connectivity";
   import { currentMedia } from "$lib/stores/player";
   import HeroBanner from "$lib/components/home/HeroBanner.svelte";
   import Carousel from "$lib/components/home/Carousel.svelte";
-  import type { MediaItem } from "$lib/api/types";
+  import MediaCard from "$lib/components/library/MediaCard.svelte";
+  import type { MediaItem, Library } from "$lib/api/types";
 
   // Track if we've done an initial load (plain variable, not reactive)
   let hasLoadedOnce = false;
@@ -34,6 +36,9 @@
 
     if ($isAuthenticated) {
       await home.loadHomeSections();
+      if ($libraries.length === 0) {
+        await library.loadLibraries();
+      }
       hasLoadedOnce = true;
     }
   });
@@ -68,6 +73,31 @@
     }
   }
 
+  // Playlist libraries live inside the Music landing page, not as top-level shortcuts.
+  const shortcutLibraries = $derived(
+    $libraries.filter((lib) => lib.collectionType !== "playlists")
+  );
+
+  function handleLibraryClick(lib: Library) {
+    // Mirror /library routing: dedicated landing pages need currentLibrary set.
+    library.setCurrentLibrary(lib);
+    switch (lib.collectionType) {
+      case "music":
+        goto("/library/music");
+        break;
+      case "tvshows":
+        goto("/library/tv");
+        break;
+      case "movies":
+        goto("/library/movies");
+        break;
+      default:
+        library.clearGenres();
+        goto("/library");
+        break;
+    }
+  }
+
   const heroItems = $derived($home.heroItems);
   const resumeItems = $derived($home.resumeItems.filter(
     i => i.type === "Movie" || i.type === "Episode"
@@ -92,6 +122,24 @@
       <HeroBanner items={heroItems} />
     {/if}
 
+    <!-- Your Libraries: quick jump into each dedicated landing page -->
+    {#if shortcutLibraries.length > 0}
+      <div>
+        <h2 class="text-xl font-bold text-white mb-4 px-4">Your Libraries</h2>
+        <div class="flex gap-4 overflow-x-auto px-4 pb-2">
+          {#each shortcutLibraries as lib (lib.id)}
+            <div class="flex-shrink-0">
+              <MediaCard
+                item={lib}
+                size="medium"
+                onclick={() => handleLibraryClick(lib)}
+              />
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
     <!-- Next Movie -->
     {#if resumeMovies.length > 0}
       <Carousel

src/routes/library/+layout.svelte

@@ -7,6 +7,7 @@
   import { auth, isAuthenticated, isLoading as isAuthLoading, currentUser } from "$lib/stores/auth";
   import { library } from "$lib/stores/library";
   import { currentMedia, isPlaying, playbackPosition, playbackDuration, shouldShowAudioMiniPlayer } from "$lib/stores/player";
+  import { isShuffle, repeatMode, hasNext as hasNextStore, hasPrevious as hasPreviousStore } from "$lib/stores/queue";
   import { useScrollGuard } from "$lib/composables/useScrollGuard";
   import Search from "$lib/components/Search.svelte";
   import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
@@ -23,16 +24,15 @@
   let showFullPlayer = $state(false);
   let showOverflowMenu = $state(false);
   let showSleepTimerModal = $state(false);
-  let shuffle = $state(false);
-  let repeat = $state<"off" | "all" | "one">("off");
-  let hasNext = $state(false);
-  let hasPrevious = $state(false);
+  // Queue status (shuffle, repeat, hasNext, hasPrevious) is event-driven via the
+  // queue store, which listens for queue_changed events from the backend. This
+  // updates instantly when toggling shuffle/repeat (no polling lag).
+  const shuffle = $derived($isShuffle);
+  const repeat = $derived($repeatMode);
+  const hasNext = $derived($hasNextStore);
+  const hasPrevious = $derived($hasPreviousStore);
   let isAndroid = $state(false);
 
-  let pollInterval: ReturnType<typeof setInterval> | null = null;
-  let failedAttempts = 0;
-  const MAX_SILENT_FAILURES = 3; // Don't log errors for first 3 attempts
-
   onMount(() => {
     // Detect platform
     try {
@@ -42,17 +42,7 @@
       console.error("Platform detection failed:", err);
     }
 
-    // Poll for queue status (shuffle, repeat, hasNext, hasPrevious)
-    // Position/duration come from player events (pushed every 250ms)
-    // Add a small delay before starting polling to ensure player is ready on Android
-    const timeoutId = setTimeout(() => {
-      updateQueueStatus(); // Initial update
-      pollInterval = setInterval(updateQueueStatus, 1000);
-    }, 100);
-
     return () => {
-      clearTimeout(timeoutId);
-      if (pollInterval) clearInterval(pollInterval);
       scrollGuard.cleanup();
     };
   });
@@ -64,26 +54,6 @@
     }
   });
 
-  async function updateQueueStatus() {
-    try {
-      const queue = await commands.playerGetQueue();
-
-      // Reset failure counter on success
-      failedAttempts = 0;
-
-      hasNext = queue.hasNext;
-      hasPrevious = queue.hasPrevious;
-      shuffle = queue.shuffle;
-      repeat = queue.repeat as "off" | "all" | "one";
-    } catch (e) {
-      failedAttempts++;
-      // Only log errors after initial attempts (player may still be initializing)
-      if (failedAttempts > MAX_SILENT_FAILURES) {
-        console.error("[Queue Status] Error:", e);
-      }
-    }
-  }
-
   async function handleLogout() {
     await auth.logout();
     library.reset();

src/routes/library/[id]/+page.svelte

@@ -2,6 +2,7 @@
   import { onMount, untrack } from "svelte";
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
+  import { navigateBack } from "$lib/utils/navigation";
   import { commands } from "$lib/api/bindings";
   import type { MediaItem, Library } from "$lib/api/types";
   import { library, libraryItems, isLibraryLoading, currentLibrary, libraries } from "$lib/stores/library";
@@ -23,6 +24,8 @@
   import CrewLinks from "$lib/components/library/CrewLinks.svelte";
   import GenreTags from "$lib/components/library/GenreTags.svelte";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
+  import BackButton from "$lib/components/common/BackButton.svelte";
+  import ArtistLinks from "$lib/components/library/ArtistLinks.svelte";
 
   interface SeasonData {
     season: MediaItem;
@@ -281,6 +284,13 @@
     // Navigate to series page without the episode param
     goto(`/library/${itemId}`);
   }
+
+  function goBack() {
+    // Prefer real history so the user returns to wherever they came from
+    // (libraries grid, a list page, a parent album/artist, search, etc.),
+    // falling back to the libraries overview on a fresh deep-link.
+    navigateBack("/library");
+  }
 </script>
 
 <div class="relative">
@@ -315,6 +325,9 @@
   {:else if item}
     <!-- Person Detail View - shown for Person items -->
     {#if item.type === "Person"}
+      <div class="pt-4">
+        <BackButton onClick={goBack} label="Back" />
+      </div>
       <PersonDetailView person={item} />
     <!-- Episode Focus View - shown when navigating with ?episode param -->
     {:else if item.type === "Series" && focusedEpisode}
@@ -326,8 +339,13 @@
       />
     {:else}
     <div class="space-y-8">
+      <!-- Back navigation -->
+      <div class="pt-4">
+        <BackButton onClick={goBack} label="Back" />
+      </div>
+
       <!-- Header with item info -->
-      <div class="flex gap-6 pt-4">
+      <div class="flex gap-6">
         <!-- Poster -->
         <div class="flex-shrink-0 w-48">
           {#if item.primaryImageTag}
@@ -362,10 +380,17 @@
                 {#if item.parentIndexNumber && item.indexNumber}, {/if}
                 {#if item.indexNumber}Episode {item.indexNumber}{/if}
               </p>
-            {:else if item.productionYear || item.artists?.length}
+            {:else if item.artistItems?.length || item.artists?.length}
               <p class="text-lg text-gray-400 mt-1">
-                {item.artists?.join(", ") || item.productionYear}
+                <ArtistLinks
+                  artistItems={item.artistItems}
+                  artists={item.artists}
+                  linkClass="text-lg text-[var(--color-jellyfin)] hover:underline"
+                  textClass="text-gray-400"
+                />
               </p>
+            {:else if item.productionYear}
+              <p class="text-lg text-gray-400 mt-1">{item.productionYear}</p>
             {/if}
           </div>
 

src/routes/library/movies/+page.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
+  import { navigateBack } from "$lib/utils/navigation";
   import { currentLibrary } from "$lib/stores/library";
   import { movies } from "$lib/stores/movies";
   import { isServerReachable } from "$lib/stores/connectivity";
@@ -85,7 +86,7 @@
     <div class="flex items-center justify-between px-4">
       <h1 class="text-3xl font-bold text-white">{$currentLibrary?.name ?? "Movies"}</h1>
       <button
-        onclick={() => goto("/library")}
+        onclick={() => navigateBack("/library")}
         class="p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-400 hover:text-white"
         title="Back to libraries"
         aria-label="Back to libraries"

src/routes/library/music/+page.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
+  import { navigateBack } from "$lib/utils/navigation";
   import { auth } from "$lib/stores/auth";
   import { currentLibrary } from "$lib/stores/library";
   import { music } from "$lib/stores/music";
@@ -86,6 +87,7 @@
   const newlyAdded = $derived($music.newlyAdded);
   const playlists = $derived($music.playlists);
   const rediscover = $derived($music.rediscover);
+  const genreRows = $derived($music.genreRows);
   const isLoading = $derived($music.isLoading);
   const hasContent = $derived(
     heroItems.length > 0 ||
@@ -106,7 +108,7 @@
     <div class="flex items-center justify-between px-4">
       <h1 class="text-3xl font-bold text-white">Music</h1>
       <button
-        onclick={() => goto("/library")}
+        onclick={() => navigateBack("/library")}
         class="p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-400 hover:text-white"
         title="Back to libraries"
         aria-label="Back to libraries"
@@ -160,6 +162,16 @@
       />
     {/if}
 
+    <!-- One slider per genre -->
+    {#each genreRows as row (row.id)}
+      <Carousel
+        title={row.name}
+        items={row.items}
+        onItemClick={handleItemClick}
+        showAll={() => goto("/library/music/genres")}
+      />
+    {/each}
+
     {#if !hasContent}
       <p class="px-4 text-gray-400">Nothing here yet. Start playing some music to fill this page.</p>
     {/if}

src/routes/library/tv/+page.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
+  import { navigateBack } from "$lib/utils/navigation";
   import { currentLibrary } from "$lib/stores/library";
   import { tv } from "$lib/stores/tv";
   import { isServerReachable } from "$lib/stores/connectivity";
@@ -92,7 +93,7 @@
     <div class="flex items-center justify-between px-4">
       <h1 class="text-3xl font-bold text-white">{$currentLibrary?.name ?? "TV Shows"}</h1>
       <button
-        onclick={() => goto("/library")}
+        onclick={() => navigateBack("/library")}
         class="p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-400 hover:text-white"
         title="Back to libraries"
         aria-label="Back to libraries"

src/routes/player/[id]/+page.svelte

@@ -8,7 +8,7 @@
   import type { MediaItem } from "$lib/api/types";
   import { auth } from "$lib/stores/auth";
   import { library } from "$lib/stores/library";
-  import { queue, currentQueueItem } from "$lib/stores/queue";
+  import { queue, currentQueueItem, isShuffle, repeatMode, hasNext as hasNextStore, hasPrevious as hasPreviousStore } from "$lib/stores/queue";
   import { downloads, type DownloadInfo } from "$lib/stores/downloads";
   import { playbackPosition, playbackDuration, currentMedia as storeCurrentMedia } from "$lib/stores/player";
   import { get } from "svelte/store";
@@ -47,10 +47,12 @@
   const position = $derived($playbackPosition);
   const duration = $derived($playbackDuration);
   let isPlaying = $state(false);
-  let shuffle = $state(false);
-  let repeat = $state<"off" | "all" | "one">("off");
-  let hasNext = $state(false);
-  let hasPrevious = $state(false);
+  // Shuffle/repeat/next/previous are event-driven via the queue store (instant
+  // update on queue_changed), not polled.
+  const shuffle = $derived($isShuffle);
+  const repeat = $derived($repeatMode);
+  const hasNext = $derived($hasNextStore);
+  const hasPrevious = $derived($hasPreviousStore);
   let currentMedia = $state<MediaItem | null>(null);
   let streamUrl = $state<string | null>(null);
   let mediaSourceId = $state<string | null>(null);
@@ -133,14 +135,7 @@
         isVideo = item.type === "Movie" || item.type === "Episode";
         isPlaying = true;
         loading = false;
-        // Sync queue status
-        try {
-          const queueStatus = await commands.playerGetQueue();
-          hasNext = queueStatus.hasNext;
-          hasPrevious = queueStatus.hasPrevious;
-        } catch (e) {
-          // Ignore - queue status will update via polling
-        }
+        // hasNext/hasPrevious come from the event-driven queue store.
         // Fetch next episode for video skip button
         if (isVideo) {
           fetchNextEpisode(item);
@@ -446,13 +441,7 @@
         isPlaying = status.state.kind === "playing";
         // Note: position/duration are now derived from player store (updated by events)
       }
-      shuffle = status.shuffle;
-      repeat = status.repeat;
-
-      // Update queue status
-      const queue = await commands.playerGetQueue();
-      hasNext = queue.hasNext;
-      hasPrevious = queue.hasPrevious;
+      // shuffle/repeat/hasNext/hasPrevious come from the queue store (event-driven).
     } catch (e) {
       // Ignore polling errors
     }