feat(series): land on the current episode, not season 1 (UR-062, UR-063, UR-064)

Opening a series dumped the viewer at the top of season 1, and its Play
button played nothing at all: it resolved `$libraryItems[0]` — the first
*season* by SortName — and navigated to `/player/<seasonId>`, which the
player route bounced straight back to `/library/<seasonId>`.

The backend could already answer "where is this viewer in this show":
`repository_get_next_up_episodes` has accepted a `series_id` since it was
written and no caller had ever passed one.

Backend (DR-101, DR-106)
- `repository/series_progress.rs`: `pick_current_episode` — in progress,
  else Next Up, else first unwatched, else the premiere. The third rung is
  the offline path, where Next Up is always empty. `sort_series_order` puts
  specials (season 0) after the numbered seasons.
- `repository_get_series_episodes` takes over the season fan-out and the
  flat-series fallback, which were domain knowledge living in the frontend.
- `clear_watch_history` maps to Jellyfin's mark-unplayed (recursive over a
  container, also zeroes resume). Offline it refuses rather than diverging
  state the next sync would undo.

Frontend (DR-102, DR-103, DR-104, DR-107)
- Seasons collapse; only the current one is expanded, and the current
  episode is badged and scrolled into view.
- Hero button reads `Resume S2E4` / `Play S1E1` and opens that episode's
  focus view, where Play commits (ux-flows §5B.5).
- Seasons are no longer a destination: `/library/<seasonId>` redirects to
  `/library/<seriesId>#season-N`, and every inbound link follows.
- The "More Episodes" strip spans the whole series, so a season finale
  offers the next premiere instead of dead-ending (§5B.2).
- Clear-history buttons on the series hero and each season header.

Routes (DR-105)
- `/library/tv` and `/library/movies` absorb their all-titles and genres
  pages as `?view=` tabs; the four legacy routes redirect. 6 video routes
  become 2, and `/library/shows/genres` stops being the odd one out.

Logic extracted to `seriesNavigation.ts`, `episodeStrip.ts` and
`libraryView.ts` so it is unit-tested rather than buried in components.
Spec: docs/specs/series-current-episode-navigation.md

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

@@ -1,6 +1,15 @@
-<!-- TRACES: UR-007, UR-023, UR-034 | DR-007, DR-038, DR-039 -->
+<!--
+  The Movies library — one page, three tabs.
+
+  Was three routes (`/library/movies`, `/library/movies/all`,
+  `/library/movies/genres`). They are now `?view=browse|all|genres` here; the
+  old routes redirect.
+
+  TRACES: UR-007, UR-023, UR-034, UR-063 | DR-007, DR-038, DR-039, DR-105
+-->
 <script lang="ts">
   import { onMount } from "svelte";
+  import { page } from "$app/stores";
   import { goto } from "$app/navigation";
   import { navigateUp } from "$lib/utils/navigation";
   import { library, currentLibrary } from "$lib/stores/library";
@@ -9,32 +18,47 @@
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
   import HeroBanner from "$lib/components/home/HeroBanner.svelte";
   import Carousel from "$lib/components/home/Carousel.svelte";
+  import LibraryViewTabs from "$lib/components/library/LibraryViewTabs.svelte";
+  import GenericMediaListPage from "$lib/components/library/GenericMediaListPage.svelte";
+  import GenericGenreBrowser from "$lib/components/library/GenericGenreBrowser.svelte";
+  import { resolveLibraryView, libraryViewUrl, type LibraryView } from "$lib/utils/libraryView";
   import type { MediaItem } from "$lib/api/types";
 
-  interface Category {
-    id: string;
-    name: string;
-    icon: string;
-    description: string;
-    route: string;
-  }
+  const BASE_PATH = "/library/movies";
 
-  const categories: Category[] = [
-    {
-      id: "all",
-      name: "All Movies",
-      icon: "M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z",
-      description: "Browse all movies",
-      route: "/library/movies/all",
-    },
-    {
-      id: "genres",
-      name: "Genres",
-      icon: "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",
-      description: "Browse by genre",
-      route: "/library/movies/genres",
-    },
-  ];
+  const view = $derived(resolveLibraryView($page.url.searchParams.get("view")));
+
+  const tabLabels: Record<LibraryView, string> = {
+    browse: "Browse",
+    all: "All Movies",
+    genres: "Genres",
+  };
+
+  const allMoviesConfig = {
+    itemType: "Movie" as const,
+    title: "Movies",
+    backPath: BASE_PATH,
+    searchPlaceholder: "Search movies...",
+    sortOptions: [
+      { key: "SortName", label: "A-Z" },
+      { key: "ProductionYear", label: "Year" },
+      { key: "DateCreated", label: "Recently Added" },
+      { key: "CommunityRating", label: "Rating" },
+    ],
+    defaultSort: "SortName",
+    displayComponent: "grid" as const,
+  };
+
+  const genresConfig = {
+    itemTypes: ["Movie" as const],
+    title: "Movie Genres",
+    backPath: BASE_PATH,
+    genreIcon:
+      "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",
+    itemDisplayMode: "poster" as const,
+    searchPlaceholder: "Search genres...",
+    noItemsMessage: "No movies found in this genre",
+  };
 
   async function load() {
     if (!$currentLibrary) {
@@ -70,92 +94,79 @@
   const genreRows = $derived($movies.genreRows);
   const isLoading = $derived($movies.isLoading);
   const hasContent = $derived(
-    heroItems.length > 0 ||
-      continueWatching.length > 0 ||
-      recentlyAdded.length > 0
+    heroItems.length > 0 || continueWatching.length > 0 || recentlyAdded.length > 0
   );
 </script>
 
-{#if isLoading}
-  <div class="flex justify-center items-center py-32">
-    <div class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"></div>
+<div class="space-y-6 pb-8">
+  <!-- Header — one per page, shared by every tab -->
+  <div class="flex items-center justify-between px-4">
+    <h1 class="text-3xl font-bold text-white">{$currentLibrary?.name ?? "Movies"}</h1>
+    <button
+      onclick={() => { library.setCurrentLibrary(null); navigateUp("/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"
+    >
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
   </div>
-{:else}
-  <div class="space-y-8 pb-8">
-    <!-- Header -->
-    <div class="flex items-center justify-between px-4">
-      <h1 class="text-3xl font-bold text-white">{$currentLibrary?.name ?? "Movies"}</h1>
-      <button
-        onclick={() => { library.setCurrentLibrary(null); navigateUp("/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"
-      >
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-        </svg>
-      </button>
+
+  <LibraryViewTabs basePath={BASE_PATH} active={view} labels={tabLabels} />
+
+  {#if view === "all"}
+    <div class="px-4">
+      <GenericMediaListPage config={allMoviesConfig} showHeader={false} />
     </div>
-
-    <!-- Hero Banner -->
-    {#if heroItems.length > 0}
-      <HeroBanner items={heroItems} />
-    {/if}
-
-    <!-- Continue Watching -->
-    {#if continueWatching.length > 0}
-      <Carousel
-        title="Continue Watching"
-        items={continueWatching}
-        onItemClick={handleItemClick}
-      />
-    {/if}
-
-    <!-- Recently Added -->
-    {#if recentlyAdded.length > 0}
-      <Carousel
-        title="Recently Added"
-        items={recentlyAdded}
-        onItemClick={handleItemClick}
-        showAll={() => goto("/library/movies/all")}
-      />
-    {/if}
-
-    <!-- One slider per genre -->
-    {#each genreRows as row (row.id)}
-      <Carousel
-        title={row.name}
-        items={row.items}
-        onItemClick={handleItemClick}
-        showAll={() => goto(`/library/movies/genres`)}
-      />
-    {/each}
-
-    {#if !hasContent}
-      <p class="px-4 text-gray-400">Nothing here yet. Add some movies to your library to fill this page.</p>
-    {/if}
-
-    <!-- Browse by category -->
-    <div class="space-y-3 px-4 pt-4">
-      <h2 class="text-2xl font-semibold text-white">Browse</h2>
-      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
-        {#each categories as category (category.id)}
-          <button
-            onclick={() => goto(category.route)}
-            class="group relative flex items-center gap-3 bg-[var(--color-surface)] hover:bg-white/10 rounded-xl p-4 text-left transition-colors"
-          >
-            <div class="w-10 h-10 flex-shrink-0 rounded-full bg-[var(--color-jellyfin)]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
-              <svg class="w-5 h-5 text-[var(--color-jellyfin)]" fill="currentColor" viewBox="0 0 24 24">
-                <path d={category.icon} />
-              </svg>
-            </div>
-            <div class="min-w-0">
-              <div class="text-white font-semibold truncate">{category.name}</div>
-              <div class="text-gray-400 text-xs truncate">{category.description}</div>
-            </div>
-          </button>
-        {/each}
-      </div>
+  {:else if view === "genres"}
+    <div class="px-4">
+      <GenericGenreBrowser config={genresConfig} showHeader={false} />
     </div>
-  </div>
-{/if}
+  {:else if isLoading}
+    <div class="flex justify-center items-center py-32">
+      <div class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"></div>
+    </div>
+  {:else}
+    <div class="space-y-8">
+      <!-- Hero Banner -->
+      {#if heroItems.length > 0}
+        <HeroBanner items={heroItems} />
+      {/if}
+
+      <!-- Continue Watching -->
+      {#if continueWatching.length > 0}
+        <Carousel
+          title="Continue Watching"
+          items={continueWatching}
+          onItemClick={handleItemClick}
+        />
+      {/if}
+
+      <!-- Recently Added -->
+      {#if recentlyAdded.length > 0}
+        <Carousel
+          title="Recently Added"
+          items={recentlyAdded}
+          onItemClick={handleItemClick}
+          showAll={() => goto(libraryViewUrl(BASE_PATH, "all"))}
+        />
+      {/if}
+
+      <!-- One slider per genre -->
+      {#each genreRows as row (row.id)}
+        <Carousel
+          title={row.name}
+          items={row.items}
+          onItemClick={handleItemClick}
+          showAll={() => goto(libraryViewUrl(BASE_PATH, "genres"))}
+        />
+      {/each}
+
+      {#if !hasContent}
+        <p class="px-4 text-gray-400">Nothing here yet. Add some movies to your library to fill this page.</p>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import GenericMediaListPage from "$lib/components/library/GenericMediaListPage.svelte";
-
-  /**
-   * Movie browser (all movies)
-   * @req: UR-007 - Navigate media in library
-   * @req: UR-008 - Search media across libraries
-   * @req: DR-007 - Library browsing screens
-   */
-
-  const config = {
-    itemType: "Movie" as const,
-    title: "Movies",
-    backPath: "/library/movies",
-    searchPlaceholder: "Search movies...",
-    sortOptions: [
-      { key: "SortName", label: "A-Z" },
-      { key: "ProductionYear", label: "Year" },
-      { key: "DateCreated", label: "Recently Added" },
-      { key: "CommunityRating", label: "Rating" },
-    ],
-    defaultSort: "SortName",
-    displayComponent: "grid" as const,
-  };
-</script>
-
-<GenericMediaListPage {config} />

src/routes/library/movies/all/+page.ts

@@ -0,0 +1,11 @@
+// Legacy route — now the Movies library's All Movies tab.
+//
+// Kept as a redirect rather than deleted: GenreTags builds links to these
+// paths and users have them in history.
+//
+// TRACES: UR-063 | DR-105
+import { redirect } from "@sveltejs/kit";
+
+export const load = () => {
+  redirect(307, "/library/movies?view=all");
+};

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

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import GenericGenreBrowser from "$lib/components/library/GenericGenreBrowser.svelte";
-
-  /**
-   * Movie genre browser
-   * @req: UR-007 - Navigate media in library
-   * @req: UR-030 - Quick genre browsing and filtering
-   * @req: DR-007 - Library browsing screens
-   */
-
-  const config = {
-    itemTypes: ["Movie" as const],
-    title: "Movie Genres",
-    backPath: "/library",
-    genreIcon:
-      "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",
-    itemDisplayMode: "poster" as const,
-    searchPlaceholder: "Search genres...",
-    noItemsMessage: "No movies found in this genre",
-  };
-</script>
-
-<GenericGenreBrowser {config} />

src/routes/library/movies/genres/+page.ts

@@ -0,0 +1,11 @@
+// Legacy route — now the Movies library's Genres tab.
+//
+// Kept as a redirect rather than deleted: GenreTags builds links to these
+// paths and users have them in history.
+//
+// TRACES: UR-063 | DR-105
+import { redirect } from "@sveltejs/kit";
+
+export const load = () => {
+  redirect(307, "/library/movies?view=genres");
+};