Fix Select trigger display values and add TMDB attribution

Base UI Select.Value renders raw values by default — add children render
functions to map values to human-readable labels (e.g. "this_month" →
"This Month", "0" → "unlimited"). Switch inline select underlines from
border-bottom to text-decoration for proper baseline alignment. Add TMDB
attribution with logo and disclaimer to settings footer.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/explore/_components/filterable-title-row.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import { createStore, Provider, useAtom, useAtomValue } from "jotai";
+import { useState } from "react";
+import { TitleCardSkeleton } from "@/components/skeletons";
+import { ExploreTitleCard } from "@/components/title-card";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import {
+  defaultItemsAtom,
+  genreEnrichmentsAtom,
+  genreResultsAtom,
+  initialEpisodeProgressAtom,
+  initialUserStatusesAtom,
+  mediaTypeAtom,
+  selectedGenreAtom,
+} from "@/lib/atoms/filterable-row";
+
+interface Genre {
+  id: number;
+  name: string;
+}
+
+interface TitleRowItem {
+  tmdbId: number;
+  type: "movie" | "tv";
+  title: string;
+  posterPath: string | null;
+  releaseDate: string | null;
+  voteAverage: number;
+}
+
+interface FilterableTitleRowProps {
+  heading: string;
+  icon: React.ReactNode;
+  mediaType: "movie" | "tv";
+  defaultItems: TitleRowItem[];
+  genres: Genre[];
+  userStatuses?: Record<string, "watchlist" | "in_progress" | "completed">;
+  episodeProgress?: Record<string, { watched: number; total: number }>;
+}
+
+export function FilterableTitleRow({
+  heading,
+  icon,
+  mediaType,
+  defaultItems,
+  genres,
+  userStatuses,
+  episodeProgress,
+}: FilterableTitleRowProps) {
+  const [store] = useState(() => {
+    const s = createStore();
+    s.set(mediaTypeAtom, mediaType);
+    s.set(defaultItemsAtom, defaultItems);
+    s.set(initialUserStatusesAtom, userStatuses ?? {});
+    s.set(initialEpisodeProgressAtom, episodeProgress ?? {});
+    return s;
+  });
+
+  return (
+    <Provider store={store}>
+      <FilterableTitleRowInner heading={heading} icon={icon} genres={genres} />
+    </Provider>
+  );
+}
+
+function FilterableTitleRowInner({
+  heading,
+  icon,
+  genres,
+}: {
+  heading: string;
+  icon: React.ReactNode;
+  genres: Genre[];
+}) {
+  const [selectedGenre, setSelectedGenre] = useAtom(selectedGenreAtom);
+  const defaults = useAtomValue(defaultItemsAtom);
+  const genreResults = useAtomValue(genreResultsAtom);
+  const initialStatuses = useAtomValue(initialUserStatusesAtom);
+  const initialProgress = useAtomValue(initialEpisodeProgressAtom);
+  const genreEnrichments = useAtomValue(genreEnrichmentsAtom);
+
+  const loading = selectedGenre !== null && genreResults === undefined;
+  const items = selectedGenre === null ? defaults : (genreResults ?? []);
+
+  const userStatuses =
+    selectedGenre === null
+      ? initialStatuses
+      : (genreEnrichments?.statuses ?? initialStatuses);
+
+  const episodeProgress =
+    selectedGenre === null
+      ? initialProgress
+      : (genreEnrichments?.progress ?? initialProgress);
+
+  function toggleGenre(genreId: number) {
+    setSelectedGenre(selectedGenre === genreId ? null : genreId);
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center gap-2">
+        {icon}
+        <h2 className="font-display text-xl tracking-tight text-balance">
+          {heading}
+        </h2>
+      </div>
+
+      {/* Genre chips */}
+      <div className="no-scrollbar -mx-4 flex gap-2 overflow-x-auto px-4 pb-1 sm:-mx-0 sm:flex-wrap sm:px-0">
+        {genres.map((genre) => (
+          <Button
+            key={genre.id}
+            variant={selectedGenre === genre.id ? "default" : "outline"}
+            size="xs"
+            onClick={() => toggleGenre(genre.id)}
+            className={`shrink-0 rounded-full ${
+              selectedGenre === genre.id
+                ? "border-primary bg-primary/10 text-primary hover:bg-primary/20"
+                : "border-border/50 bg-card/50 text-muted-foreground hover:border-primary/20 hover:text-foreground"
+            }`}
+          >
+            {genre.name}
+          </Button>
+        ))}
+      </div>
+
+      {/* Loading skeleton */}
+      {loading && (
+        <div className="-mx-4 flex gap-4 overflow-hidden px-4 sm:-mx-0 sm:px-0">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div
+              // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+              key={`skel-${i}`}
+              className="w-[140px] shrink-0 sm:w-[160px]"
+            >
+              <TitleCardSkeleton />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && selectedGenre !== null && items.length === 0 && (
+        <p className="py-8 text-center text-sm text-muted-foreground">
+          No titles found for this genre.
+        </p>
+      )}
+
+      {/* Carousel */}
+      {!loading && items.length > 0 && (
+        <div key={selectedGenre ?? "default"}>
+          <Carousel
+            opts={{
+              align: "start",
+              dragFree: true,
+              containScroll: "trimSnaps",
+            }}
+            plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
+            className="-mx-6 sm:-mx-2 carousel-tilt"
+          >
+            <CarouselContent className="px-6 sm:px-2">
+              {items.slice(0, 20).map((item, i) => (
+                <CarouselItem
+                  key={`${item.type}-${item.tmdbId}`}
+                  className="basis-auto pl-4 w-[140px] shrink-0 sm:w-[160px]"
+                >
+                  <div
+                    className="animate-stagger-item"
+                    style={{ "--stagger-index": i } as React.CSSProperties}
+                  >
+                    <ExploreTitleCard
+                      tmdbId={item.tmdbId}
+                      type={item.type}
+                      title={item.title}
+                      posterPath={item.posterPath}
+                      releaseDate={item.releaseDate}
+                      voteAverage={item.voteAverage}
+                      href={`/titles/tmdb-${item.tmdbId}-${item.type}`}
+                      userStatus={userStatuses[`${item.tmdbId}-${item.type}`]}
+                      episodeProgress={
+                        episodeProgress[`${item.tmdbId}-${item.type}`]
+                      }
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      )}
+    </section>
+  );
+}

app/(pages)/explore/_components/hero-banner.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { IconPlus, IconStar } from "@tabler/icons-react";
+import Image from "next/image";
+import Link from "next/link";
+
+interface HeroBannerProps {
+  tmdbId: number;
+  type: "movie" | "tv";
+  title: string;
+  overview: string;
+  backdropPath: string | null;
+  voteAverage: number;
+}
+
+export function HeroBanner({
+  tmdbId,
+  type,
+  title,
+  overview,
+  backdropPath,
+  voteAverage,
+}: HeroBannerProps) {
+  const href = `/titles/tmdb-${tmdbId}-${type}`;
+
+  return (
+    <div className="animate-stagger-item relative -mt-6 mb-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] overflow-hidden">
+      <div className="relative w-full min-h-[280px] max-h-[420px] aspect-[21/9]">
+        {backdropPath ? (
+          <Image
+            src={backdropPath}
+            alt={title}
+            fill
+            priority
+            className="object-cover"
+          />
+        ) : (
+          <div className="h-full w-full bg-gradient-to-br from-card via-secondary to-muted" />
+        )}
+
+        {/* Gradient overlays */}
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
+        <div className="absolute inset-0 bg-gradient-to-r from-background/80 via-transparent to-transparent" />
+
+        {/* Content */}
+        <div className="absolute inset-0 flex items-end">
+          <div className="w-full px-4 pb-8 sm:px-6">
+            <div className="mx-auto max-w-6xl">
+              <div
+                className="animate-stagger-item"
+                style={{ "--stagger-index": 3 } as React.CSSProperties}
+              >
+                <div className="mb-3 flex items-center gap-2">
+                  <span className="rounded bg-primary/20 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">
+                    {type}
+                  </span>
+                  {voteAverage > 0 && (
+                    <span className="flex items-center gap-1 text-sm text-primary">
+                      <IconStar
+                        aria-hidden={true}
+                        className="size-3.5 fill-primary"
+                      />
+                      {voteAverage.toFixed(1)}
+                    </span>
+                  )}
+                  <span className="text-xs text-muted-foreground">
+                    Trending today
+                  </span>
+                </div>
+                <Link href={href} className="group/title">
+                  <h2 className="font-display text-3xl tracking-tight text-balance sm:text-4xl transition-colors group-hover/title:text-primary">
+                    {title}
+                  </h2>
+                </Link>
+                <p className="mt-2 line-clamp-2 max-w-2xl text-sm text-muted-foreground">
+                  {overview}
+                </p>
+                <Link
+                  href={href}
+                  className="mt-4 inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-shadow hover:shadow-md hover:shadow-primary/20"
+                >
+                  <IconPlus aria-hidden={true} className="size-4" />
+                  Add to Library
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(pages)/explore/_components/title-row.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import { ExploreTitleCard } from "@/components/title-card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+
+interface TitleRowItem {
+  tmdbId: number;
+  type: "movie" | "tv";
+  title: string;
+  posterPath: string | null;
+  releaseDate: string | null;
+  voteAverage: number;
+}
+
+interface TitleRowProps {
+  heading: string;
+  icon: React.ReactNode;
+  items: TitleRowItem[];
+  userStatuses?: Record<string, "watchlist" | "in_progress" | "completed">;
+  episodeProgress?: Record<string, { watched: number; total: number }>;
+}
+
+export function TitleRow({
+  heading,
+  icon,
+  items,
+  userStatuses,
+  episodeProgress,
+}: TitleRowProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center gap-2">
+        {icon}
+        <h2 className="font-display text-xl tracking-tight text-balance">
+          {heading}
+        </h2>
+      </div>
+      <Carousel
+        opts={{ align: "start", dragFree: true, containScroll: "trimSnaps" }}
+        plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
+        className="-mx-6 sm:-mx-2 carousel-tilt"
+      >
+        <CarouselContent className="px-6 sm:px-2">
+          {items.map((item, i) => (
+            <CarouselItem
+              key={`${item.type}-${item.tmdbId}`}
+              className="basis-auto pl-4 w-[140px] shrink-0 sm:w-[160px]"
+            >
+              <div
+                className="animate-stagger-item"
+                style={{ "--stagger-index": i } as React.CSSProperties}
+              >
+                <ExploreTitleCard
+                  tmdbId={item.tmdbId}
+                  type={item.type}
+                  title={item.title}
+                  posterPath={item.posterPath}
+                  releaseDate={item.releaseDate}
+                  voteAverage={item.voteAverage}
+                  href={`/titles/tmdb-${item.tmdbId}-${item.type}`}
+                  userStatus={userStatuses?.[`${item.tmdbId}-${item.type}`]}
+                  episodeProgress={
+                    episodeProgress?.[`${item.tmdbId}-${item.type}`]
+                  }
+                />
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </section>
+  );
+}