Add provider registry with direct watch links and overflow popover

Introduces a local provider registry (lib/providers.ts) mapping TMDB
provider IDs to search URL templates for ~20 streaming services. Provider
badges on title pages are now clickable links that open the service's
search page with the title pre-filled. Categories with more than 4
providers show a "+N" overflow badge with a hover popover listing the rest.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-05 20:46:53 -05:00
co-authored by Claude Opus 4.6
parent cd4b2908d8
commit 522c03588d
2 changed files with 105 additions and 22 deletions
+13 -6
View File
@@ -13,7 +13,7 @@ import { useHotkey, useHotkeySequence } from "@tanstack/react-hotkeys";
import { useAtom } from "jotai";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useProgress } from "@/components/navigation-progress";
import {
Command,
@@ -86,15 +86,22 @@ export function CommandPalette() {
}
}, [commandPaletteOpen]);
// Save to recent searches when results arrive
// Save to recent searches after user stops typing for a while
const saveTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
useEffect(() => {
if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
const trimmed = debouncedQuery.trim();
if (trimmed && results.length > 0) {
setRecentSearches((prev) => {
const filtered = prev.filter((q) => q !== trimmed);
return [trimmed, ...filtered].slice(0, MAX_RECENT);
});
saveTimerRef.current = setTimeout(() => {
setRecentSearches((prev) => {
const filtered = prev.filter((q) => q !== trimmed);
return [trimmed, ...filtered].slice(0, MAX_RECENT);
});
}, 2000);
}
return () => {
if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
};
}, [debouncedQuery, results, setRecentSearches]);
const handleSelect = useCallback(