feat(detail): add collapsible Content Advisory section with IMDb criteria

src/lib/detail-customization.ts

@@ -38,6 +38,20 @@ export function orderedSectionKeys(available: string[], c: DetailCustomization):
   for (const k of available) {
     if (!seen.has(k)) out.push(k);
   }
+  const pgIdx =
+    out.indexOf("parentsGuide") >= 0 ? out.indexOf("parentsGuide") : out.indexOf("contentAdvisory");
+  const castIdx = Math.max(out.indexOf("cast"), out.indexOf("animeCharacters"));
+  if (
+    pgIdx >= 0 &&
+    castIdx >= 0 &&
+    pgIdx > castIdx + 1 &&
+    (out.includes("moreLikeThis") || out.includes("collection") || out.includes("letterboxdPanel"))
+  ) {
+    const key = out[pgIdx];
+    out.splice(pgIdx, 1);
+    const newCastIdx = Math.max(out.indexOf("cast"), out.indexOf("animeCharacters"));
+    out.splice(newCastIdx + 1, 0, key);
+  }
   return out;
 }
 

src/lib/providers/imdb-parents-guide.ts

@@ -0,0 +1,230 @@
+import { lruSet } from "@/lib/cache";
+import { registerEvictable } from "@/lib/maintenance";
+import { safeFetch } from "@/lib/safe-fetch";
+
+export type ParentsGuideItem = {
+  text: string;
+  isSpoiler: boolean;
+};
+
+export type ParentsGuideCategory = {
+  id: string;
+  label: string;
+  severity: "None" | "Mild" | "Moderate" | "Severe" | string;
+  severityVotes: number;
+  totalVotes: number;
+  items: ParentsGuideItem[];
+};
+
+export type ParentsGuideResult = {
+  categories: ParentsGuideCategory[];
+};
+
+const guideCache = new Map<string, ParentsGuideResult | null>();
+const guideInflight = new Map<string, Promise<ParentsGuideResult | null>>();
+
+registerEvictable("imdb-parents-guide", (aggressive) => {
+  if (aggressive) guideCache.clear();
+});
+
+const GRAPHQL_ENDPOINT = "https://graphql.imdb.com/";
+
+const PARENTS_GUIDE_QUERY = `
+query ParentsGuide($id: ID!) {
+  title(id: $id) {
+    parentsGuide {
+      categories {
+        category { id text }
+        severity { text voteType votedFor }
+        totalSeverityVotes
+        guideItems(first: 30) {
+          edges {
+            node {
+              isSpoiler
+              text { plainText }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
+export function severityLevel(severity: string): number {
+  switch (severity.toLowerCase()) {
+    case "none":
+      return 1;
+    case "mild":
+      return 2;
+    case "moderate":
+      return 3;
+    case "severe":
+      return 4;
+    default:
+      return 0;
+  }
+}
+
+export type SeverityColorStyle = {
+  badgeClass: string;
+  barClass: string;
+  textClass: string;
+  borderClass: string;
+  glowClass: string;
+};
+
+export function severityColorStyle(severity: string): SeverityColorStyle {
+  switch (severity.toLowerCase()) {
+    case "none":
+      return {
+        badgeClass: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
+        barClass: "bg-emerald-400",
+        textClass: "text-emerald-400",
+        borderClass: "border-emerald-500/30",
+        glowClass: "shadow-[0_0_15px_-4px_rgba(74,222,128,0.20)]",
+      };
+    case "mild":
+      return {
+        badgeClass: "bg-yellow-500/15 text-yellow-400 border-yellow-500/30",
+        barClass: "bg-yellow-400",
+        textClass: "text-yellow-400",
+        borderClass: "border-yellow-500/30",
+        glowClass: "shadow-[0_0_15px_-4px_rgba(250,204,21,0.20)]",
+      };
+    case "moderate":
+      return {
+        badgeClass: "bg-orange-500/15 text-orange-400 border-orange-500/30",
+        barClass: "bg-orange-400",
+        textClass: "text-orange-400",
+        borderClass: "border-orange-500/30",
+        glowClass: "shadow-[0_0_15px_-4px_rgba(251,146,60,0.20)]",
+      };
+    case "severe":
+      return {
+        badgeClass: "bg-rose-500/15 text-rose-400 border-rose-500/30",
+        barClass: "bg-rose-400",
+        textClass: "text-rose-400",
+        borderClass: "border-rose-500/30",
+        glowClass: "shadow-[0_0_15px_-4px_rgba(244,63,94,0.20)]",
+      };
+    default:
+      return {
+        badgeClass: "bg-white/[0.08] text-ink-muted border-white/[0.12]",
+        barClass: "bg-white/40",
+        textClass: "text-ink-muted",
+        borderClass: "border-white/10",
+        glowClass: "",
+      };
+  }
+}
+
+export async function fetchImdbParentsGuide(imdbId: string): Promise<ParentsGuideResult | null> {
+  const cleanId = imdbId.trim();
+  if (!/^tt\d+$/.test(cleanId)) return null;
+
+  if (guideCache.has(cleanId)) {
+    return guideCache.get(cleanId) ?? null;
+  }
+
+  const pending = guideInflight.get(cleanId);
+  if (pending) return pending;
+
+  const request = (async (): Promise<ParentsGuideResult | null> => {
+    try {
+      const res = await safeFetch(GRAPHQL_ENDPOINT, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          Referer: "https://www.imdb.com/",
+        },
+        body: JSON.stringify({
+          query: PARENTS_GUIDE_QUERY,
+          variables: { id: cleanId },
+        }),
+        signal: AbortSignal.timeout(6000),
+      });
+
+      if (!res.ok) {
+        guideCache.set(cleanId, null);
+        return null;
+      }
+
+      type RawEdge = {
+        node?: {
+          isSpoiler?: boolean;
+          text?: { plainText?: string };
+        };
+      };
+
+      type RawCategory = {
+        category?: { id?: string; text?: string };
+        severity?: { text?: string; voteType?: string; votedFor?: number };
+        totalSeverityVotes?: number;
+        guideItems?: { edges?: RawEdge[] };
+      };
+
+      type ImdbResponse = {
+        data?: {
+          title?: {
+            parentsGuide?: {
+              categories?: RawCategory[];
+            };
+          };
+        };
+      };
+
+      const json = (await res.json()) as ImdbResponse;
+      const rawCategories = json.data?.title?.parentsGuide?.categories;
+
+      if (!rawCategories || !Array.isArray(rawCategories) || rawCategories.length === 0) {
+        guideCache.set(cleanId, null);
+        return null;
+      }
+
+      const categories: ParentsGuideCategory[] = [];
+      for (const raw of rawCategories) {
+        const cat = raw.category;
+        const sev = raw.severity;
+        const edges = raw.guideItems?.edges ?? [];
+
+        const items: ParentsGuideItem[] = [];
+        for (const edge of edges) {
+          const text = edge.node?.text?.plainText?.trim();
+          if (text) {
+            items.push({
+              text,
+              isSpoiler: Boolean(edge.node?.isSpoiler),
+            });
+          }
+        }
+
+        categories.push({
+          id: cat?.id ?? "",
+          label: cat?.text ?? "",
+          severity: (sev?.text ?? "None") as "None" | "Mild" | "Moderate" | "Severe",
+          severityVotes: Number(sev?.votedFor) || 0,
+          totalVotes: Number(raw.totalSeverityVotes) || 0,
+          items,
+        });
+      }
+
+      if (categories.length === 0) {
+        guideCache.set(cleanId, null);
+        return null;
+      }
+
+      const result: ParentsGuideResult = { categories };
+      lruSet(guideCache, cleanId, result, 150);
+      return result;
+    } catch {
+      return null;
+    } finally {
+      guideInflight.delete(cleanId);
+    }
+  })();
+
+  guideInflight.set(cleanId, request);
+  return request;
+}

src/views/detail.tsx

@@ -198,6 +198,8 @@ import { useAnimeAnilistDetails } from "./detail/use-anime-anilist-details";
 import { useAnimeCharacters } from "./detail/use-anime-characters";
 import { TraktComments } from "./detail/trakt-comments";
 import { LetterboxdPanel } from "./detail/letterboxd-panel";
+import { ParentsGuidePanel } from "./detail/parents-guide-panel";
+import { useImdbId } from "./play-picker/use-imdb-id";
 import { RateButton } from "@/components/ratings/rate-button";
 import { detailImdbRating, fetchDetailImdbRating } from "@/lib/detail-imdb-rating";
 import { ratingTarget } from "@/lib/ratings/types";
@@ -409,6 +411,7 @@ export function DetailView({
   const titleHomeServers = useTitleMediaServers(meta.id, detail?.imdbId);
   const { toggle: toggleFavorite } = useMediaFavorites();
   const isFav = useIsFavorite(meta.id, [detail?.imdbId]);
+  const inferredImdb = useImdbId(meta, settings.tmdbKey);
   const inSession = roomSnapshot.state === "joined" && roomSnapshot.participants.length >= 2;
   useScrollMemory(`meta:${meta.id}`, scrollRef, settings.resumeDetailScroll, true);
 
@@ -2932,6 +2935,19 @@ export function DetailView({
               node: <DetailCharacterRail characters={animeCharacters} />,
             });
           }
+
+          const resolvedParentsGuideImdb =
+            detail?.imdbId ??
+            animeEpisodes.find((e) => e.imdbId)?.imdbId ??
+            (meta.id.startsWith("tt") ? meta.id : null) ??
+            inferredImdb.id;
+
+          railSections.push({
+            key: "parentsGuide",
+            label: t("Content Advisory"),
+            minHeight: 120,
+            node: <ParentsGuidePanel imdbId={resolvedParentsGuideImdb} />,
+          });
           if (detail?.collection) {
             railSections.push({
               key: "collection",
@@ -3133,6 +3149,7 @@ export function DetailView({
               ),
             });
           }
+
           if (railSections.length === 0) return null;
           return <DetailLayoutEditor sections={railSections} />;
         })()}