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>

app/(pages)/dashboard/page.tsx

@@ -154,10 +154,10 @@ export default function DashboardPage() {
             </p>
           </div>
           <Link
-            href="/search"
+            href="/explore"
             className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all hover:shadow-md hover:shadow-primary/20"
           >
-            Start searching
+            Start exploring
           </Link>
         </motion.div>
       )}

app/(pages)/explore/genre-browser.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { motion } from "motion/react";
+import { useRouter } from "next/navigation";
+import { useCallback, 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 router = useRouter();
+  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]);
+
+  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 (
+    <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}
+                onImport={() => handleImport(r.tmdbId, r.type)}
+              />
+            </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>
+  );
+}

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 (
+    <motion.div
+      className="relative -mx-4 -mt-6 mb-4 overflow-hidden sm:-mx-6"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.6 }}
+    >
+      <div className="relative aspect-[21/9] min-h-[280px] max-h-[420px]">
+        {backdropUrl ? (
+          <Image
+            src={backdropUrl}
+            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">
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  type: "spring",
+                  stiffness: 200,
+                  damping: 24,
+                  delay: 0.2,
+                }}
+              >
+                <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 size={14} className="fill-primary" />
+                      {voteAverage.toFixed(1)}
+                    </span>
+                  )}
+                  <span className="text-xs text-muted-foreground">
+                    Trending today
+                  </span>
+                </div>
+                <h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+                  {title}
+                </h2>
+                <p className="mt-2 line-clamp-2 max-w-2xl text-sm text-muted-foreground">
+                  {overview}
+                </p>
+                <button
+                  type="button"
+                  onClick={handleImport}
+                  disabled={importing}
+                  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-all hover:shadow-md hover:shadow-primary/20 disabled:opacity-50"
+                >
+                  {importing ? (
+                    <IconLoader2 size={16} className="animate-spin" />
+                  ) : (
+                    <IconPlus size={16} />
+                  )}
+                  Add to Library
+                </button>
+              </motion.div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

app/(pages)/explore/loading.tsx

@@ -0,0 +1,45 @@
+import { TitleCardSkeleton } from "@/components/skeletons";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ExploreLoading() {
+  return (
+    <div className="space-y-10">
+      {/* Hero skeleton */}
+      <div className="-mx-4 -mt-6 sm:-mx-6">
+        <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>
+    </div>
+  );
+}

app/(pages)/explore/page.tsx

@@ -0,0 +1,90 @@
+import { IconDeviceTv, IconFlame, IconMovie } from "@tabler/icons-react";
+import { getGenres, getPopular, getTrending } from "@/lib/tmdb/client";
+import { GenreBrowser } from "./genre-browser";
+import { HeroBanner } from "./hero-banner";
+import { TitleRow } from "./title-row";
+
+function mapResults(
+  results: {
+    id: number;
+    media_type?: string;
+    title?: string;
+    name?: string;
+    poster_path: string | null;
+    release_date?: string;
+    first_air_date?: string;
+    vote_average: number;
+  }[],
+  fallbackType: "movie" | "tv",
+) {
+  return results
+    .filter((r) => r.poster_path)
+    .map((r) => ({
+      tmdbId: r.id,
+      type: (r.media_type === "movie" || r.media_type === "tv"
+        ? r.media_type
+        : fallbackType) as "movie" | "tv",
+      title: r.title ?? r.name ?? "",
+      posterPath: r.poster_path,
+      releaseDate: r.release_date ?? r.first_air_date ?? null,
+      voteAverage: r.vote_average,
+    }));
+}
+
+export default async function ExplorePage() {
+  const [trending, popularMovies, popularTv, movieGenres, tvGenres] =
+    await Promise.all([
+      getTrending("all", "day"),
+      getPopular("movie"),
+      getPopular("tv"),
+      getGenres("movie"),
+      getGenres("tv"),
+    ]);
+
+  const trendingItems = mapResults(trending.results, "movie");
+  const popularMovieItems = mapResults(popularMovies.results, "movie");
+  const popularTvItems = mapResults(popularTv.results, "tv");
+
+  const heroTitle = trending.results.find(
+    (r) =>
+      r.backdrop_path && (r.media_type === "movie" || r.media_type === "tv"),
+  );
+
+  return (
+    <div className="space-y-10">
+      {heroTitle && (
+        <HeroBanner
+          tmdbId={heroTitle.id}
+          type={heroTitle.media_type as "movie" | "tv"}
+          title={heroTitle.title ?? heroTitle.name ?? ""}
+          overview={heroTitle.overview}
+          backdropPath={heroTitle.backdrop_path}
+          voteAverage={heroTitle.vote_average}
+        />
+      )}
+
+      <TitleRow
+        heading="Trending Today"
+        icon={<IconFlame size={20} className="text-primary" />}
+        items={trendingItems.slice(0, 20)}
+      />
+
+      <TitleRow
+        heading="Popular Movies"
+        icon={<IconMovie size={20} className="text-primary" />}
+        items={popularMovieItems.slice(0, 20)}
+      />
+
+      <TitleRow
+        heading="Popular TV Shows"
+        icon={<IconDeviceTv size={20} className="text-primary" />}
+        items={popularTvItems.slice(0, 20)}
+      />
+
+      <GenreBrowser
+        movieGenres={movieGenres.genres}
+        tvGenres={tvGenres.genres}
+      />
+    </div>
+  );
+}

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 (
+    <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>
+  );
+}

app/(pages)/search/page.tsx

@@ -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<SearchResult[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [importing, setImporting] = useState<number | null>(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 (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="font-display text-3xl tracking-tight">Search</h1>
-        <p className="text-sm text-muted-foreground">
-          Find movies and TV shows to track
-        </p>
-      </div>
-
-      <SearchAutocomplete onResults={handleResults} onLoading={handleLoading} />
-
-      {!loading && searched && results.length === 0 && (
-        <div className="flex flex-col items-center gap-3 py-16 text-center">
-          <div className="flex gap-2 text-muted-foreground/40">
-            <IconMovie size={32} />
-            <IconDeviceTv size={32} />
-          </div>
-          <p className="text-muted-foreground">No results found</p>
-        </div>
-      )}
-
-      {!loading && results.length > 0 && (
-        <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-          {results.map((r) => (
-            <div key={`${r.type}-${r.tmdbId}`} className="relative">
-              <TitleCard
-                tmdbId={r.tmdbId}
-                type={r.type}
-                title={r.title}
-                posterPath={r.posterPath}
-                releaseDate={r.releaseDate}
-                voteAverage={r.voteAverage}
-                onImport={() => handleOpen(r.tmdbId, r.type)}
-              />
-              {importing === r.tmdbId && (
-                <div className="absolute inset-0 flex items-center justify-center rounded-xl bg-background/80 backdrop-blur-sm">
-                  <div className="flex items-center gap-2">
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-                    <span className="text-sm font-medium text-primary">
-                      Loading
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

app/(pages)/setup/page.tsx

@@ -57,7 +57,8 @@ const steps = [
   {
     number: "3",
     title: "Add it to your environment",
-    description: "Set the TMDB_API_READ_ACCESS_TOKEN environment variable and restart Sofa.",
+    description:
+      "Set the TMDB_API_READ_ACCESS_TOKEN environment variable and restart Sofa.",
   },
 ];
 

app/api/explore/discover/route.ts

@@ -0,0 +1,48 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { isTmdbConfigured } from "@/lib/config";
+import { discover } from "@/lib/tmdb/client";
+
+export async function GET(req: NextRequest) {
+  if (!isTmdbConfigured()) {
+    return NextResponse.json(
+      {
+        error: "TMDB API key is not configured. Visit /setup for instructions.",
+        code: "TMDB_NOT_CONFIGURED",
+      },
+      { status: 503 },
+    );
+  }
+
+  const { searchParams } = req.nextUrl;
+  const type = searchParams.get("type") === "tv" ? "tv" : "movie";
+  const genre = searchParams.get("genre");
+  const sortBy = searchParams.get("sort_by") || "popularity.desc";
+  const page = searchParams.get("page") || "1";
+
+  const params: Record<string, string> = {
+    sort_by: sortBy,
+    "vote_count.gte": "50",
+  };
+  if (genre) {
+    params.with_genres = genre;
+  }
+
+  const results = await discover(type, params, Number(page));
+
+  const filtered = results.results.filter((r) => r.poster_path);
+
+  return NextResponse.json({
+    results: filtered.map((r) => ({
+      tmdbId: r.id,
+      type,
+      title: r.title ?? r.name,
+      overview: r.overview,
+      releaseDate: r.release_date ?? r.first_air_date,
+      posterPath: r.poster_path,
+      popularity: r.popularity,
+      voteAverage: r.vote_average,
+    })),
+    page: results.page,
+    totalPages: results.total_pages,
+  });
+}

components/command-palette.tsx

@@ -94,10 +94,10 @@ export function CommandPalette() {
       action: () => router.push("/dashboard"),
       scope: "Navigation",
     });
-    registerShortcut("nav-search", {
+    registerShortcut("nav-explore", {
-      keys: ["g", "s"],
+      keys: ["g", "e"],
-      description: "Go to search",
+      description: "Go to explore",
-      action: () => router.push("/search"),
+      action: () => router.push("/explore"),
       scope: "Navigation",
     });
   }, [registerShortcut, setCommandPaletteOpen, setHelpOpen, router]);
@@ -279,12 +279,12 @@ export function CommandPalette() {
                   <CommandItem
                     onSelect={() => {
                       setCommandPaletteOpen(false);
-                      router.push("/search");
+                      router.push("/explore");
                     }}
                   >
                     <IconSearch size={14} />
-                    Go to Search
+                    Go to Explore
-                    <CommandShortcut>G S</CommandShortcut>
+                    <CommandShortcut>G E</CommandShortcut>
                   </CommandItem>
                   <CommandItem
                     onSelect={() => {

components/mobile-tab-bar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { IconHome, IconSearch, IconSettings } from "@tabler/icons-react";
+import { IconCompass, IconHome, IconSettings } from "@tabler/icons-react";
 import { motion } from "motion/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -8,7 +8,7 @@ import { useSession } from "@/lib/auth/client";
 
 const tabs = [
   { href: "/dashboard", label: "Home", icon: IconHome },
-  { href: "/search", label: "Search", icon: IconSearch },
+  { href: "/explore", label: "Explore", icon: IconCompass },
   { href: "/settings", label: "Settings", icon: IconSettings },
 ] as const;
 

components/nav-bar.tsx

@@ -10,7 +10,7 @@ import { signOut, useSession } from "@/lib/auth/client";
 
 const navLinks = [
   { href: "/dashboard", label: "Home" },
-  { href: "/search", label: "Search" },
+  { href: "/explore", label: "Explore" },
 ] as const;
 
 export function NavBar() {

lib/tmdb/client.ts

@@ -1,4 +1,5 @@
 import type {
+  TmdbGenreListResponse,
   TmdbMovieDetails,
   TmdbRecommendationResponse,
   TmdbSearchResponse,
@@ -18,6 +19,7 @@ function getApiKey() {
 async function tmdbFetch<T>(
   path: string,
   params?: Record<string, string>,
+  fetchOptions?: RequestInit,
 ): Promise<T> {
   const url = new URL(`${BASE_URL}${path}`);
   if (params) {
@@ -27,9 +29,11 @@ async function tmdbFetch<T>(
   }
 
   const res = await fetch(url.toString(), {
+    ...fetchOptions,
     headers: {
       Authorization: `Bearer ${getApiKey()}`,
       Accept: "application/json",
+      ...fetchOptions?.headers,
     },
   });
 
@@ -90,4 +94,41 @@ export async function getSimilar(tmdbId: number, type: "movie" | "tv") {
   return tmdbFetch<TmdbRecommendationResponse>(`/${type}/${tmdbId}/similar`);
 }
 
+export async function getTrending(
+  mediaType: "all" | "movie" | "tv",
+  timeWindow: "day" | "week" = "day",
+) {
+  return tmdbFetch<TmdbSearchResponse>(
+    `/trending/${mediaType}/${timeWindow}`,
+    undefined,
+    { next: { revalidate: 3600 } },
+  );
+}
+
+export async function getPopular(type: "movie" | "tv", page = 1) {
+  return tmdbFetch<TmdbSearchResponse>(
+    `/${type}/popular`,
+    { page: String(page) },
+    { next: { revalidate: 3600 } },
+  );
+}
+
+export async function getGenres(type: "movie" | "tv") {
+  return tmdbFetch<TmdbGenreListResponse>(`/genre/${type}/list`, undefined, {
+    next: { revalidate: 86400 },
+  });
+}
+
+export async function discover(
+  type: "movie" | "tv",
+  params: Record<string, string>,
+  page = 1,
+) {
+  return tmdbFetch<TmdbSearchResponse>(
+    `/discover/${type}`,
+    { ...params, page: String(page) },
+    { next: { revalidate: 3600 } },
+  );
+}
+
 export { tmdbImageUrl } from "./image";

lib/tmdb/types.ts

@@ -110,3 +110,12 @@ export interface TmdbRecommendationResponse {
   total_pages: number;
   total_results: number;
 }
+
+export interface TmdbGenre {
+  id: number;
+  name: string;
+}
+
+export interface TmdbGenreListResponse {
+  genres: TmdbGenre[];
+}