From a3a7e51e71e4df78163de2306bfc875a61ef13f0 Mon Sep 17 00:00:00 2001
From: Silo Server Migration <noreply@silo-server.invalid>
Date: Sun, 24 May 2026 18:46:31 -0400
Subject: [PATCH] feat(web): add RequestBrowse page for studio/network/genre
 browse

---
 web/src/pages/RequestBrowse.tsx | 250 ++++++++++++++++++++++++++++++++
 1 file changed, 250 insertions(+)
 create mode 100644 web/src/pages/RequestBrowse.tsx

diff --git a/web/src/pages/RequestBrowse.tsx b/web/src/pages/RequestBrowse.tsx
new file mode 100644
index 00000000..e4da8f8f
--- /dev/null
+++ b/web/src/pages/RequestBrowse.tsx
@@ -0,0 +1,250 @@
+import { Link, useParams, useSearchParams } from "react-router";
+import { ArrowLeft } from "lucide-react";
+import RequestPosterCard from "@/components/RequestPosterCard";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import { useCreateMediaRequest, useRequestBrowse } from "@/hooks/queries/requests";
+import { requestInputFromMediaResult } from "@/lib/mediaRequests";
+import { cn } from "@/lib/utils";
+import type {
+  DiscoverBrowseKind,
+  DiscoverBrowseResponse,
+  RequestMediaResult,
+  RequestMediaType,
+} from "@/api/types";
+
+type BrowseSort = "popularity" | "vote_average" | "release_date";
+
+const SORT_OPTIONS: { value: BrowseSort; label: string }[] = [
+  { value: "popularity", label: "Popularity" },
+  { value: "vote_average", label: "Rating" },
+  { value: "release_date", label: "Release date" },
+];
+
+interface RequestBrowseProps {
+  kind: DiscoverBrowseKind;
+}
+
+export default function RequestBrowse({ kind }: RequestBrowseProps) {
+  const { slug = "" } = useParams<{ slug: string }>();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const sort = normalizeSort(searchParams.get("sort"));
+  const page = Math.max(1, Number(searchParams.get("page") ?? "1") || 1);
+  const mediaTypeFromQuery = normalizeMediaType(searchParams.get("media_type"));
+  const mediaType: RequestMediaType | undefined =
+    kind === "studio" ? "movie" : kind === "network" ? "series" : mediaTypeFromQuery ?? "movie";
+
+  const browse = useRequestBrowse({ kind, slug, mediaType, sort, page });
+  const createRequest = useCreateMediaRequest();
+
+  const title = browse.data?.display_name ?? humanizeSlug(slug);
+  useDocumentTitle(title ? `${title} - Requests` : "Requests");
+
+  function updateSort(next: string) {
+    const params = new URLSearchParams(searchParams);
+    params.set("sort", next);
+    params.set("page", "1");
+    setSearchParams(params, { replace: true });
+  }
+
+  function updateMediaType(next: RequestMediaType) {
+    const params = new URLSearchParams(searchParams);
+    params.set("media_type", next);
+    params.set("page", "1");
+    setSearchParams(params, { replace: true });
+  }
+
+  function goToPage(next: number) {
+    const params = new URLSearchParams(searchParams);
+    params.set("page", String(next));
+    setSearchParams(params, { replace: false });
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  function submitRequest(item: RequestMediaResult) {
+    createRequest.mutate(requestInputFromMediaResult(item));
+  }
+
+  const totalPages = browse.data?.total_pages ?? 0;
+  const results = browse.data?.results ?? [];
+
+  if (browse.isError && (browse.error as { status?: number }).status === 404) {
+    return (
+      <div className="space-y-4 py-10 text-center">
+        <p className="text-foreground text-lg font-semibold">
+          {kind === "studio" ? "Studio" : kind === "network" ? "Network" : "Genre"} not found.
+        </p>
+        <Link to="/requests" className="text-muted-foreground hover:text-foreground text-sm underline">
+          Back to Requests
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 py-6 sm:py-8">
+      <div className="space-y-4 px-4 sm:px-6 lg:px-10 xl:px-12">
+        <Link
+          to="/requests"
+          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-sm"
+        >
+          <ArrowLeft className="h-4 w-4" /> Back to Requests
+        </Link>
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="flex min-w-0 items-center gap-4">
+            <BrowseHeaderTile browse={browse.data} kind={kind} fallback={title} />
+            <div className="min-w-0">
+              <h1 className="text-foreground truncate text-2xl font-semibold">{title}</h1>
+              <p className="text-muted-foreground text-sm">
+                {browse.isLoading
+                  ? "Loading..."
+                  : results.length > 0
+                    ? `Page ${page} of ${totalPages}`
+                    : "No results."}
+              </p>
+            </div>
+          </div>
+          <Select value={sort} onValueChange={updateSort}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Sort" />
+            </SelectTrigger>
+            <SelectContent>
+              {SORT_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {kind === "genre" ? (
+          <Tabs
+            value={mediaType ?? "movie"}
+            onValueChange={(value) => updateMediaType(value as RequestMediaType)}
+          >
+            <TabsList>
+              <TabsTrigger value="movie">Movies</TabsTrigger>
+              <TabsTrigger value="series">Series</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        ) : null}
+      </div>
+
+      <div className="px-4 sm:px-6 lg:px-10 xl:px-12">
+        {browse.isLoading ? (
+          <BrowseGridSkeleton />
+        ) : browse.isError ? (
+          <p className="text-muted-foreground text-sm">
+            Could not load this browse page. Try a different sort or media type.
+          </p>
+        ) : results.length === 0 ? (
+          <p className="text-muted-foreground text-sm">Nothing matched. Try a different sort.</p>
+        ) : (
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+            {results.map((item) => (
+              <RequestPosterCard
+                key={`${item.media_type}-${item.tmdb_id}`}
+                variant="discover"
+                item={item}
+                onRequest={() => submitRequest(item)}
+                isSubmitting={
+                  createRequest.isPending && createRequest.variables?.tmdb_id === item.tmdb_id
+                }
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {totalPages > 1 ? (
+        <div className="flex items-center justify-center gap-3 px-4">
+          <Button variant="outline" disabled={page <= 1} onClick={() => goToPage(page - 1)}>
+            Prev
+          </Button>
+          <span className="text-muted-foreground text-sm tabular-nums">
+            Page {page} of {totalPages}
+          </span>
+          <Button variant="outline" disabled={page >= totalPages} onClick={() => goToPage(page + 1)}>
+            Next
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function BrowseHeaderTile({
+  browse,
+  kind,
+  fallback,
+}: {
+  browse: DiscoverBrowseResponse | undefined;
+  kind: DiscoverBrowseKind;
+  fallback: string;
+}) {
+  if (!browse) {
+    return <div className="bg-muted h-16 w-28 rounded-md" aria-hidden />;
+  }
+  if (kind === "genre") {
+    return (
+      <div className="bg-muted text-foreground flex h-16 w-28 items-center justify-center rounded-md px-2 text-center text-sm font-semibold">
+        {browse.display_name || fallback}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={cn("flex h-16 w-28 items-center justify-center overflow-hidden rounded-md")}
+      style={{ background: browse.brand_color || "#1f2937" }}
+    >
+      {browse.logo_url ? (
+        <img
+          src={browse.logo_url}
+          alt={browse.display_name}
+          className="max-h-[60%] max-w-[80%] object-contain"
+        />
+      ) : (
+        <span className="px-2 text-center text-xs font-semibold text-white">
+          {browse.display_name || fallback}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function BrowseGridSkeleton() {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+      {Array.from({ length: 12 }).map((_, idx) => (
+        <Skeleton key={idx} className="aspect-[2/3] w-full rounded-md" />
+      ))}
+    </div>
+  );
+}
+
+function normalizeSort(value: string | null): BrowseSort {
+  return SORT_OPTIONS.some((option) => option.value === value) ? (value as BrowseSort) : "popularity";
+}
+
+function normalizeMediaType(value: string | null): RequestMediaType | undefined {
+  return value === "movie" || value === "series" ? value : undefined;
+}
+
+function humanizeSlug(slug: string) {
+  return slug
+    .split("-")
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}