Replace search page with explore page for rich discovery experience

The command palette (⌘K) already handles direct title search. Replace the redundant /search page with a new /explore page featuring trending titles, popular movies/TV, and genre browsing powered by TMDB discovery endpoints. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-08-29 07:25:38 -04:00 · 2026-03-01 15:11:53 -05:00
parent cddef34909
commit e098180dda
14 changed files with 653 additions and 120 deletions
@@ -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 (
+    <section className="space-y-4">
+      <div className="flex items-center gap-2">
+        {icon}
+        <h2 className="font-display text-xl tracking-tight">{heading}</h2>
+      </div>
+      <motion.div
+        className="feed-scroll -mx-4 flex gap-4 overflow-x-auto px-4 pb-2 sm:-mx-0 sm:px-0"
+        variants={staggerContainer}
+        initial="hidden"
+        animate="visible"
+      >
+        {items.map((item) => (
+          <motion.div
+            key={`${item.type}-${item.tmdbId}`}
+            variants={staggerItem}
+            className="w-[140px] shrink-0 sm:w-[160px]"
+          >
+            <TitleCard
+              tmdbId={item.tmdbId}
+              type={item.type}
+              title={item.title}
+              posterPath={item.posterPath}
+              releaseDate={item.releaseDate}
+              voteAverage={item.voteAverage}
+              onImport={() => handleImport(item.tmdbId, item.type)}
+            />
+          </motion.div>
+        ))}
+      </motion.div>
+    </section>
+  );
+}