+
+ {LISTS.map(list => (
+
+
+
+ Canonical lists
+
+
+ + The books and ballots +
++ Films that show up on every "best of" list - filtered to ones you don't own yet. +
+
+
+
+ By decade
+
+
+
+
+ -
+ {DECADES.map(d => (
+
+ {/* Toolbar */}
+
+ {panelOpen && (
+
+
+ )}
+
+
+ )
+}
+
+function KindToggle({
+ value,
+ onChange,
+}: {
+ value: 'movie' | 'tv'
+ onChange: (k: 'movie' | 'tv') => void
+}) {
+ return (
+
+ onChange({ ...filters, kind: k, status: null, runtimeGte: null, runtimeLte: null })}
+ />
+
+
+
+
+
+ {/* Filter panel */}
+
+
+
+
+
+
+ {([
+ { v: 'movie' as const, label: 'Movies', Icon: FilmIcon },
+ { v: 'tv' as const, label: 'TV', Icon: Tv2 },
+ ]).map(opt => {
+ const isActive = value === opt.v
+ return (
+
+ )
+ })}
+
+ )
+}
+
+/* ────────────────────────────────────────────────────────────── */
+/* Expandable filter panel */
+/* ────────────────────────────────────────────────────────────── */
+
+function FilterPanel({ filters, onChange, region }: Props) {
+ const set =
+ {/* Genres - always full row, can be many */}
+
+ )
+}
+
+function Field({
+ label,
+ icon,
+ value,
+ children,
+}: {
+ label: string
+ icon?: React.ReactNode
+ value?: string
+ children: React.ReactNode
+}) {
+ return (
+
+ {genres.map(g => (
+ toggleGenre(g.id)}
+ >
+ {g.label}
+
+ ))}
+
+
+
+ {/* Streaming providers - always full row */}
+
+ {COMMON_PROVIDERS.map(p => (
+ toggleProvider(p.id)}
+ >
+ {p.label}
+
+ ))}
+
+
+
+ {/* Two-column grid for the smaller fields */}
+
+
+
+ set('yearFrom', v)}
+ placeholder="From"
+ />
+ to
+ set('yearTo', v)}
+ placeholder="To"
+ />
+
+
+
+
+ set('voteAverageGte', Number(e.target.value) === 0 ? null : Number(e.target.value))}
+ aria-label="Minimum rating"
+ className="slider flex-1"
+ />
+
+ {filters.voteAverageGte ?? 0}
+
+
+
+
+
+
+ )
+}
+
+function YearInput({
+ value,
+ onChange,
+ placeholder,
+}: {
+ value: number | null
+ onChange: (v: number | null) => void
+ placeholder: string
+}) {
+ return (
+ {
+ const n = Number(e.target.value)
+ onChange(e.target.value === '' || Number.isNaN(n) ? null : n)
+ }}
+ placeholder={placeholder}
+ className="flex-1 h-9 px-3 rounded-md bg-void/50 hover:bg-void/70 ring-1 ring-border focus:ring-accent/50 focus:ring-2 outline-none text-[12.5px] tabular-nums text-text-1 placeholder:text-text-4 transition-all duration-150 font-mono"
+ />
+ )
+}
+
+/** Convert filter state to TMDB discover query params. */
+export function filtersToTmdbParams(f: DiscoverFilterState): Record
+
+ {children}
+ + {icon && {icon}} + {label} +
+ {value && ( ++ {value} +
+ )} +
+
+ {gaps.map(g => (
+
+
+
+ Library gaps
+
+
+ + What your shelves are missing +
++ You have plenty of {topGenre || '...'}{' '} + but barely anything in {gaps.map((g, i) => ( + + {i > 0 && (i === gaps.length - 1 ? ' or ' : ', ')} + {g.genre.toLowerCase()} + ({g.count}) + + ))}. A few top-rated picks worth adding: +
+
+
+ )
+}
+
+function MoodChipButton({
+ mood,
+ active,
+ disabled,
+ onClick,
+}: {
+ mood: DiscoverMood
+ active: boolean
+ disabled: boolean
+ onClick: () => void
+}) {
+ const Icon = mood.icon
+ return (
+
+
+
+ In the mood for
+
+
+
+
+ -
+ {DISCOVER_MOODS.map(mood => {
+ const available = kind === 'movie' ? !!mood.movieParams : !!mood.tvParams
+ return (
+
+
+
+
+
+
+ This week in cinema
+
+
+ + What dropped around {formatToday(today)} - across the decades. +
+
+
+ -
+ {picks.map((pick, i) => (
+
+
+
+ {backdrop && (
+ 
+ )}
+
+
+
+
+
+ {/* Body */}
+
+
+
+ Pick for you
+
+ {mood && (
+
+ - {mood.label}
+
+ )}
+
+
+
+
+ {poster ? (
+ 
+ ) : (
+
+
+
+
+
+ {/* Actions */}
+
+ ?
+
+ )}
+
+
+
+
+
+
+ + {title || (isLoading ? 'Spinning...' : 'No matches')} +
+
+ {year && {year}}
+ {year && rating && ·}
+ {rating && (
+
+
+ + {overview || (isLoading ? 'Pulling a pick...' : 'Try a different mood - this pool came back empty.')} +
+
+
+
+
+ {pool.length > 0 ? `${pool.length} in pool` : ''}
+
+
+