Move genre filtering inline into Popular Movies and Popular TV rows

Replace the standalone GenreBrowser section with FilterableTitleRow components that add genre chips directly beneath each row heading. Selecting a genre replaces the carousel content inline; deselecting restores popular titles. Also fix TitleCardSkeleton spacing to match the real card layout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-08-29 03:55:38 -04:00 · 2026-03-05 00:35:56 -05:00
parent bcf9a3c751
commit 0409a65a56
5 changed files with 226 additions and 217 deletions
@@ -0,0 +1,185 @@
+"use client";
+
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { TitleCardSkeleton } from "@/components/skeletons";
+import { TitleCard } from "@/components/title-card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+
+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[];
+}
+
+const staggerContainer = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.05 } },
+};
+
+const staggerItem = {
+  hidden: { opacity: 0, y: 12, scale: 0.98 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { type: "spring" as const, stiffness: 300, damping: 24 },
+  },
+};
+
+export function FilterableTitleRow({
+  heading,
+  icon,
+  mediaType,
+  defaultItems,
+  genres,
+}: FilterableTitleRowProps) {
+  const [selectedGenre, setSelectedGenre] = useState<number | null>(null);
+  const [results, setResults] = useState<TitleRowItem[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const items = selectedGenre === null ? defaultItems : results;
+
+  useEffect(() => {
+    if (selectedGenre === null) {
+      setResults([]);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+
+    fetch(
+      `/api/explore/discover?type=${mediaType}&genre=${selectedGenre}&sort_by=popularity.desc`,
+    )
+      .then((r) => r.json())
+      .then((data) => {
+        if (!cancelled) {
+          setResults(data.results ?? []);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedGenre, mediaType]);
+
+  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">{heading}</h2>
+      </div>
+
+      {/* Genre chips */}
+      <div className="feed-scroll -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}
+            type="button"
+            onClick={() => toggleGenre(genre.id)}
+            className={`shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-all ${
+              selectedGenre === genre.id
+                ? "border-primary bg-primary/10 text-primary"
+                : "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 && (
+        <motion.div
+          key={selectedGenre ?? "default"}
+          variants={staggerContainer}
+          initial="hidden"
+          animate="visible"
+        >
+          <Carousel
+            opts={{
+              align: "start",
+              dragFree: true,
+              containScroll: "trimSnaps",
+            }}
+            plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
+            className="-mx-4 sm:-mx-0"
+          >
+            <CarouselContent className="px-4 sm:px-0">
+              {items.slice(0, 20).map((item) => (
+                <CarouselItem
+                  key={`${item.type}-${item.tmdbId}`}
+                  className="basis-auto pl-4 w-[140px] shrink-0 sm:w-[160px]"
+                >
+                  <motion.div variants={staggerItem}>
+                    <TitleCard
+                      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}`}
+                      showQuickAdd
+                    />
+                  </motion.div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </motion.div>
+      )}
+    </section>
+  );
+}
@@ -1,174 +0,0 @@
-"use client";
-
-import { motion } from "motion/react";
-import { useEffect, useState } from "react";
-import { TitleCardSkeleton } from "@/components/skeletons";
-import { TitleCard } from "@/components/title-card";
-
-interface Genre {
-  id: number;
-  name: string;
-}
-
-interface DiscoverResult {
-  tmdbId: number;
-  type: "movie" | "tv";
-  title: string;
-  posterPath: string | null;
-  releaseDate: string | null;
-  voteAverage: number;
-}
-
-interface GenreBrowserProps {
-  movieGenres: Genre[];
-  tvGenres: Genre[];
-}
-
-const staggerContainer = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.04 } },
-};
-
-const staggerItem = {
-  hidden: { opacity: 0, y: 12, scale: 0.98 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: { type: "spring" as const, stiffness: 300, damping: 24 },
-  },
-};
-
-export function GenreBrowser({ movieGenres, tvGenres }: GenreBrowserProps) {
-  const [mediaType, setMediaType] = useState<"movie" | "tv">("movie");
-  const [selectedGenre, setSelectedGenre] = useState<number | null>(null);
-  const [results, setResults] = useState<DiscoverResult[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const genres = mediaType === "movie" ? movieGenres : tvGenres;
-
-  function switchMediaType(type: "movie" | "tv") {
-    setMediaType(type);
-    setSelectedGenre(null);
-    setResults([]);
-  }
-
-  useEffect(() => {
-    if (selectedGenre === null) {
-      setResults([]);
-      return;
-    }
-
-    let cancelled = false;
-    setLoading(true);
-
-    fetch(
-      `/api/explore/discover?type=${mediaType}&genre=${selectedGenre}&sort_by=popularity.desc`,
-    )
-      .then((r) => r.json())
-      .then((data) => {
-        if (!cancelled) {
-          setResults(data.results ?? []);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [selectedGenre, mediaType]);
-
-  return (
-    <section className="space-y-5">
-      <div className="flex items-center justify-between">
-        <h2 className="font-display text-xl tracking-tight">Browse by Genre</h2>
-        <div className="flex items-center rounded-lg border border-border/50 bg-card/50 p-0.5">
-          <button
-            type="button"
-            onClick={() => switchMediaType("movie")}
-            className={`rounded-md px-3 py-1 text-xs font-medium transition-all ${
-              mediaType === "movie"
-                ? "bg-primary text-primary-foreground"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            Movies
-          </button>
-          <button
-            type="button"
-            onClick={() => switchMediaType("tv")}
-            className={`rounded-md px-3 py-1 text-xs font-medium transition-all ${
-              mediaType === "tv"
-                ? "bg-primary text-primary-foreground"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            TV Shows
-          </button>
-        </div>
-      </div>
-
-      {/* Genre chips */}
-      <div className="feed-scroll -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}
-            type="button"
-            onClick={() =>
-              setSelectedGenre(selectedGenre === genre.id ? null : genre.id)
-            }
-            className={`shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-all ${
-              selectedGenre === genre.id
-                ? "border-primary bg-primary/10 text-primary"
-                : "border-border/50 bg-card/50 text-muted-foreground hover:border-primary/20 hover:text-foreground"
-            }`}
-          >
-            {genre.name}
-          </button>
-        ))}
-      </div>
-
-      {/* Results */}
-      {loading && (
-        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-          {Array.from({ length: 10 }).map((_, i) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
-            <TitleCardSkeleton key={`genre-skel-${i}`} />
-          ))}
-        </div>
-      )}
-
-      {!loading && results.length > 0 && (
-        <motion.div
-          className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
-          variants={staggerContainer}
-          initial="hidden"
-          animate="visible"
-        >
-          {results.slice(0, 20).map((r) => (
-            <motion.div key={`${r.type}-${r.tmdbId}`} variants={staggerItem}>
-              <TitleCard
-                tmdbId={r.tmdbId}
-                type={r.type}
-                title={r.title}
-                posterPath={r.posterPath}
-                releaseDate={r.releaseDate}
-                voteAverage={r.voteAverage}
-                href={`/titles/tmdb-${r.tmdbId}-${r.type}`}
-                showQuickAdd
-              />
-            </motion.div>
-          ))}
-        </motion.div>
-      )}
-
-      {!loading && selectedGenre !== null && results.length === 0 && (
-        <p className="py-8 text-center text-sm text-muted-foreground">
-          No titles found for this genre.
-        </p>
-      )}
-    </section>
-  );
-}
@@ -1,6 +1,33 @@
 import { TitleCardSkeleton } from "@/components/skeletons";
 import { Skeleton } from "@/components/ui/skeleton";

+function TitleRowSkeleton({ withGenreChips }: { withGenreChips?: boolean }) {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-7 w-40" />
+      {withGenreChips && (
+        <div className="flex gap-2">
+          {Array.from({ length: 7 }).map((_, i) => (
+            <Skeleton
+              // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+              key={`chip-${i}`}
+              className="h-7 w-20 shrink-0 rounded-full"
+            />
+          ))}
+        </div>
+      )}
+      <div className="flex gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+          <div key={`card-${i}`} className="w-[140px] shrink-0 sm:w-[160px]">
+            <TitleCardSkeleton />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default function ExploreLoading() {
  return (
    <div className="space-y-10">
@@ -9,37 +36,9 @@ export default function ExploreLoading() {
        <Skeleton className="aspect-[21/9] min-h-[280px] max-h-[420px] w-full rounded-none" />
      </div>

-      {/* Title row skeletons */}
-      {[1, 2, 3].map((section) => (
-        <div key={section} className="space-y-4">
-          <Skeleton className="h-7 w-40" />
-          <div className="flex gap-4">
-            {Array.from({ length: 6 }).map((_, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
-              <div key={`row-${section}-${i}`} className="w-[160px] shrink-0">
-                <TitleCardSkeleton />
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-
-      {/* Genre browser skeleton */}
-      <div className="space-y-5">
-        <div className="flex items-center justify-between">
-          <Skeleton className="h-7 w-36" />
-          <Skeleton className="h-8 w-36 rounded-lg" />
-        </div>
-        <div className="flex gap-2">
-          {Array.from({ length: 8 }).map((_, i) => (
-            <Skeleton
-              // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
-              key={`chip-${i}`}
-              className="h-7 w-20 shrink-0 rounded-full"
-            />
-          ))}
-        </div>
-      </div>
+      <TitleRowSkeleton />
+      <TitleRowSkeleton withGenreChips />
+      <TitleRowSkeleton withGenreChips />
    </div>
  );
 }
@@ -1,7 +1,7 @@
 import { IconDeviceTv, IconFlame, IconMovie } from "@tabler/icons-react";
 import { getGenres, getPopular, getTrending } from "@/lib/tmdb/client";
 import { tmdbImageUrl } from "@/lib/tmdb/image";
-import { GenreBrowser } from "./genre-browser";
+import { FilterableTitleRow } from "./filterable-title-row";
 import { HeroBanner } from "./hero-banner";
 import { TitleRow } from "./title-row";

@@ -70,21 +70,20 @@ export default async function ExplorePage() {
        items={trendingItems.slice(0, 20)}
      />

-      <TitleRow
+      <FilterableTitleRow
        heading="Popular Movies"
        icon={<IconMovie className="size-5 text-primary" />}
-        items={popularMovieItems.slice(0, 20)}
+        mediaType="movie"
+        defaultItems={popularMovieItems.slice(0, 20)}
+        genres={movieGenres.genres}
      />

-      <TitleRow
+      <FilterableTitleRow
        heading="Popular TV Shows"
        icon={<IconDeviceTv className="size-5 text-primary" />}
-        items={popularTvItems.slice(0, 20)}
-      />
-
-      <GenreBrowser
-        movieGenres={movieGenres.genres}
-        tvGenres={tvGenres.genres}
+        mediaType="tv"
+        defaultItems={popularTvItems.slice(0, 20)}
+        genres={tvGenres.genres}
      />
    </div>
  );