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

<!--
  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-037, UR-063 | DR-007, DR-038, DR-039, DR-042, 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";
  import { movies } from "$lib/stores/movies";
  import { isServerReachable } from "$lib/stores/connectivity";
  import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
  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";

  const BASE_PATH = "/library/movies";

  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) {
      goto("/library");
      return;
    }
    await movies.loadSections($currentLibrary.id);
  }

  const { markLoaded, checkServerReachability } = useServerReachabilityReload(load);
  // Re-query when the offline downloaded-only gate changes. TRACES: UR-052 | DR-143
  useOfflineFilterReload(load);

  onMount(async () => {
    await load();
    markLoaded();
  });

  $effect(() => {
    checkServerReachability($isServerReachable);
  });

  function handleItemClick(item: MediaItem) {
    if (item.kind === "folder") {
      goto(`/library/${item.id}`);
    } else {
      // Movies play directly.
      goto(`/player/${item.id}`);
    }
  }

  const heroItems = $derived($movies.heroItems);
  const continueWatching = $derived($movies.continueWatching);
  const recentlyAdded = $derived($movies.recentlyAdded);
  const genreRows = $derived($movies.genreRows);
  const isLoading = $derived($movies.isLoading);
  const hasContent = $derived(
    heroItems.length > 0 || continueWatching.length > 0 || recentlyAdded.length > 0,
  );
</script>

<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>

  <LibraryViewTabs basePath={BASE_PATH} active={view} labels={tabLabels} />

  {#if view === "all"}
    <div class="px-4">
      <GenericMediaListPage config={allMoviesConfig} showHeader={false} />
    </div>
  {:else if view === "genres"}
    <div class="px-4">
      <GenericGenreBrowser config={genresConfig} showHeader={false} />
    </div>
  {: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>