([]);
+ 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]);
+
+ const handleImport = useCallback(
+ async (tmdbId: number, type: "movie" | "tv") => {
+ const res = await fetch("/api/titles/import", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ tmdbId, type }),
+ });
+ const data = await res.json();
+ if (data.id) {
+ router.push(`/titles/${data.id}`);
+ }
+ },
+ [router],
+ );
+
+ return (
+
+
+
Browse by Genre
+
+
+
+
+
+ {genres.map((genre) => (
+
+ ))}
+
+
+ {/* Results */}
+ {loading && (
+
+ {Array.from({ length: 10 }).map((_, i) => (
+ // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+
+ ))}
+
+ )}
+
+ {!loading && results.length > 0 && (
+
+ {results.slice(0, 20).map((r) => (
+
+ handleImport(r.tmdbId, r.type)}
+ />
+
+ ))}
+
+ )}
+
+ {!loading && selectedGenre !== null && results.length === 0 && (
+
+ No titles found for this genre.
+
+ )}
+
+ );
+}
diff --git a/app/(pages)/explore/hero-banner.tsx b/app/(pages)/explore/hero-banner.tsx
new file mode 100644
index 0000000..01f72be
--- /dev/null
+++ b/app/(pages)/explore/hero-banner.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { IconLoader2, IconPlus, IconStar } from "@tabler/icons-react";
+import { motion } from "motion/react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { tmdbImageUrl } from "@/lib/tmdb/image";
+
+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 router = useRouter();
+ const [importing, setImporting] = useState(false);
+ const backdropUrl = tmdbImageUrl(backdropPath, "w1280");
+
+ async function handleImport() {
+ setImporting(true);
+ try {
+ const res = await fetch("/api/titles/import", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ tmdbId, type }),
+ });
+ const data = await res.json();
+ if (data.id) {
+ router.push(`/titles/${data.id}`);
+ }
+ } finally {
+ setImporting(false);
+ }
+ }
+
+ return (
+
+
+ {backdropUrl ? (
+
+ ) : (
+
+ )}
+
+ {/* Gradient overlays */}
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+ {type}
+
+ {voteAverage > 0 && (
+
+
+ {voteAverage.toFixed(1)}
+
+ )}
+
+ Trending today
+
+
+
+ {title}
+
+
+ {overview}
+
+
+
+
+
+
+
+ {/* Hero skeleton */}
+
+
+
+
+ {/* Title row skeletons */}
+ {[1, 2, 3].map((section) => (
+
+
+
+ {Array.from({ length: 6 }).map((_, i) => (
+ // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+
+
+
+ ))}
+
+
+ ))}
+
+ {/* Genre browser skeleton */}
+
+
+
+
+
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+ ))}
+
+
+
+ {heroTitle && (
+
+ )}
+
+ }
+ items={trendingItems.slice(0, 20)}
+ />
+
+ }
+ items={popularMovieItems.slice(0, 20)}
+ />
+
+ }
+ items={popularTvItems.slice(0, 20)}
+ />
+
+
+
+ );
+}
diff --git a/app/(pages)/explore/title-row.tsx b/app/(pages)/explore/title-row.tsx
new file mode 100644
index 0000000..f693f0d
--- /dev/null
+++ b/app/(pages)/explore/title-row.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { motion } from "motion/react";
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
+import { TitleCard } from "@/components/title-card";
+
+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[];
+}
+
+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 TitleRow({ heading, icon, items }: TitleRowProps) {
+ const router = useRouter();
+
+ const handleImport = useCallback(
+ async (tmdbId: number, type: "movie" | "tv") => {
+ const res = await fetch("/api/titles/import", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ tmdbId, type }),
+ });
+ const data = await res.json();
+ if (data.id) {
+ router.push(`/titles/${data.id}`);
+ }
+ },
+ [router],
+ );
+
+ if (items.length === 0) return null;
+
+ return (
+
+
+ {icon}
+
{heading}
+
+
+ {items.map((item) => (
+
+ handleImport(item.tmdbId, item.type)}
+ />
+
+ ))}
+
+
+ );
+}
diff --git a/app/(pages)/search/page.tsx b/app/(pages)/search/page.tsx
deleted file mode 100644
index c0c9579..0000000
--- a/app/(pages)/search/page.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-"use client";
-
-import { IconDeviceTv, IconMovie } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
-import { SearchAutocomplete } from "@/components/search-autocomplete";
-import { TitleCard } from "@/components/title-card";
-
-interface SearchResult {
- tmdbId: number;
- type: "movie" | "tv";
- title: string;
- overview: string;
- releaseDate: string | null;
- posterPath: string | null;
- popularity: number;
- voteAverage: number;
-}
-
-export default function SearchPage() {
- const router = useRouter();
- const [results, setResults] = useState([]);
- const [loading, setLoading] = useState(false);
- const [importing, setImporting] = useState(null);
- const [searched, setSearched] = useState(false);
-
- const handleResults = useCallback((res: SearchResult[]) => {
- setResults(res);
- if (res.length > 0) setSearched(true);
- }, []);
-
- const handleLoading = useCallback((l: boolean) => {
- setLoading(l);
- if (l) setSearched(true);
- }, []);
-
- async function handleOpen(tmdbId: number, type: "movie" | "tv") {
- setImporting(tmdbId);
- try {
- const res = await fetch("/api/titles/import", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ tmdbId, type }),
- });
- const data = await res.json();
- if (data.id) {
- router.push(`/titles/${data.id}`);
- }
- } catch {
- toast.error("Failed to load title");
- } finally {
- setImporting(null);
- }
- }
-
- return (
-
-
-
Search
-
- Find movies and TV shows to track
-
-
-
-
-
- {!loading && searched && results.length === 0 && (
-
-
-
-
-
-
No results found
-
- )}
-
- {!loading && results.length > 0 && (
-
- {results.map((r) => (
-
-
handleOpen(r.tmdbId, r.type)}
- />
- {importing === r.tmdbId && (
-
- )}
-
- ))}
-
- )}
-