\n \n \n \n\n",[],[135,153],"525318b0-2336-40cf-9953-5e484e7aaee6","favicon.svg","019ebb7e-81ba-746e-81b0-7c1045a402d1",11,["D",1781263582994],"\n",[],[135,160],"56edf074-fafb-4046-8de7-f980b088a9ce","components","019ebb7e-81ba-746e-81b0-79a707daf880",["D",1781262090577],[173,174,175,176,177],[135,168],{"_36":211,"_13":212,"_66":213,"_68":169,"_70":71,"_72":214,"_73":74,"_38":215,"_17":216,"_77":88,"_78":217,"_80":51,"_81":-5,"_122":218,"_18":219},{"_36":203,"_13":204,"_66":205,"_68":169,"_70":71,"_72":206,"_73":74,"_38":207,"_17":34,"_77":88,"_78":208,"_80":51,"_81":-5,"_122":209,"_18":210},{"_36":195,"_13":196,"_66":197,"_68":169,"_70":71,"_72":198,"_73":74,"_38":199,"_17":103,"_77":88,"_78":200,"_80":51,"_81":-5,"_122":201,"_18":202},{"_36":187,"_13":188,"_66":189,"_68":169,"_70":71,"_72":190,"_73":74,"_38":191,"_17":34,"_77":88,"_78":192,"_80":51,"_81":-5,"_122":193,"_18":194},{"_36":178,"_13":179,"_66":180,"_68":169,"_70":71,"_72":181,"_73":74,"_38":182,"_17":183,"_77":88,"_78":184,"_80":51,"_81":-5,"_122":185,"_18":186},"671f36c8-a891-4661-9060-7ab4e468e5a3","helpers.ts","4b57a328-6651-11f1-98ec-1607ee4eb77e",62,["D",1781268666216],6,"export interface Film {\n id: number;\n themeId: number;\n title: string;\n year: string;\n runtimeMin: number | null;\n language: string;\n genre: string;\n people: string;\n whereToWatch: string;\n notes: string;\n seenL: boolean;\n seenJ: boolean;\n watched: boolean;\n watchedAt: string;\n imdbScore: number | null;\n tmdbScore: number | null;\n posterUrl: string;\n jwPath: string;\n ratingsAt: number | null;\n}\n\nexport interface Theme {\n id: number;\n name: string;\n emoji: string;\n monthLabel: string;\n kind: \"monthly\" | \"ongoing\";\n films: Film[];\n}\n\nexport function fmtRuntime(min: number | null): string {\n if (!min) return \"\";\n const h = Math.floor(min / 60);\n const m = min % 60;\n return h ? `${h}h ${String(m).padStart(2, \"0\")}m` : `${m}m`;\n}\n\nexport function jwUrl(title: string): string {\n return `https://www.justwatch.com/uk/search?q=${encodeURIComponent(title)}`;\n}\n\n/** Exact JustWatch page when we've matched the film, otherwise a search. */\nexport function jwFilmUrl(film: { title: string; jwPath: string }): string {\n return film.jwPath ? `https://www.justwatch.com${film.jwPath}` : jwUrl(film.title);\n}\n\nexport function showtimesUrl(title: string): string {\n return `https://www.google.com/search?q=${encodeURIComponent(`${title} showtimes London`)}`;\n}\n\nexport function letterboxdUrl(title: string): string {\n return `https://letterboxd.com/search/films/${encodeURIComponent(title)}/`;\n}\n\nexport function plexUrl(title: string): string {\n // searches all servers the logged-in Plex account can reach\n return `https://app.plex.tv/desktop/#!/search?query=${encodeURIComponent(title)}`;\n}\n\nexport interface Chip {\n label: string;\n cls: string;\n href?: string;\n}\n\nconst e = encodeURIComponent;\n\n// regex, label, colour classes, search URL on that service (null = no useful link)\nconst SUBS: [RegExp, string, string, ((t: string) => string) | null][] = [\n [/PRIME/i, \"Prime\", \"bg-emerald-900/70 text-emerald-200\", (t) =>\n `https://www.amazon.co.uk/s?k=${e(t)}&i=instant-video`],\n [/NETFLIX/i, \"Netflix\", \"bg-red-900/70 text-red-200\", (t) => `https://www.netflix.com/search?q=${e(t)}`],\n [/DISNEY/i, \"Disney+\", \"bg-blue-900/70 text-blue-200\", (t) => `https://www.disneyplus.com/search?q=${e(t)}`],\n [/MUBI/i, \"MUBI\", \"bg-indigo-900/70 text-indigo-200\", (t) => `https://mubi.com/en/gb/search/films?query=${e(t)}`],\n [/BFI/i, \"BFI Player\", \"bg-teal-900/70 text-teal-200\", (t) => `https://player.bfi.org.uk/search?q=${e(t)}`],\n [/PLEX/i, \"Plex\", \"bg-amber-900/70 text-amber-200\", (t) => plexUrl(t)],\n [/BBC|IPLAYER/i, \"iPlayer\", \"bg-fuchsia-900/70 text-fuchsia-200\", (t) =>\n `https://www.bbc.co.uk/iplayer/search?q=${e(t)}`],\n [/ITV/i, \"ITVX\", \"bg-cyan-900/70 text-cyan-200\", (t) => `https://www.itvx.com/search?q=${e(t)}`],\n [/CHANNEL ?4|ALL ?4/i, \"Channel 4\", \"bg-purple-900/70 text-purple-200\", (t) =>\n `https://www.channel4.com/search?q=${e(t)}`],\n [/PARAMOUNT/i, \"Paramount+\", \"bg-sky-900/70 text-sky-200\", null],\n [/APPLE TV\\+/i, \"Apple TV+\", \"bg-zinc-700 text-zinc-200\", (t) => `https://tv.apple.com/gb/search?term=${e(t)}`],\n [/NOW TV|SKY/i, \"NOW/Sky\", \"bg-sky-900/70 text-sky-200\", null],\n [/SHUDDER/i, \"Shudder\", \"bg-rose-900/70 text-rose-200\", null],\n [/CRITERION/i, \"Criterion\", \"bg-stone-700 text-stone-200\", null],\n [/HBO|\\bMAX\\b/i, \"Max\", \"bg-violet-900/70 text-violet-200\", null],\n [/PIRATE/i, \"🏴‍☠️ Pirate\", \"bg-neutral-800 text-neutral-300\", null],\n [/FREE TRIAL/i, \"Free trial\", \"bg-lime-900/70 text-lime-200\", null],\n];\n\n// Parse free-text \"where to watch\" into clickable coloured service chips —\n// like JustWatch's platform logos, each chip opens that service's page for the film.\n// Only the part before \";\" counts as \"included with a subscription\".\n// Rent/Buy only appears when there's no free/subscription/cinema option —\n// if it's already watchable somewhere, the rental fallback is just noise.\nexport function chipsFor(text: string, title: string): Chip[] {\n if (!text) return [];\n const chips: Chip[] = [];\n if (/cinema/i.test(text)) {\n chips.push({ label: \"🎬 Cinema\", cls: \"bg-pink-900/70 text-pink-200\", href: showtimesUrl(title) });\n }\n const primary = text.split(\";\")[0];\n if (!/^\\s*rent/i.test(primary)) {\n for (const [re, label, cls, url] of SUBS) {\n if (re.test(primary)) chips.push({ label, cls, href: url ? url(title) : jwUrl(title) });\n }\n }\n if (!chips.length && /rent|buy/i.test(text)) {\n chips.push({ label: \"Rent/Buy\", cls: \"bg-neutral-700 text-neutral-300\", href: jwUrl(title) });\n }\n if (!chips.length && /hard to find/i.test(text)) {\n chips.push({ label: \"Hard to find\", cls: \"bg-neutral-800 text-neutral-400\", href: jwUrl(title) });\n }\n return chips.slice(0, 3);\n}\n\nexport async function api(path: string, method = \"GET\", body?: unknown): Promise {\n const r = await fetch(path, {\n method,\n headers: body ? { \"Content-Type\": \"application/json\" } : undefined,\n body: body ? JSON.stringify(body) : undefined,\n });\n if (!r.ok) throw new Error(`${method} ${path} → ${r.status}`);\n return r.json();\n}\n",[],[135,168,179],"27af9397-1788-4e3b-8906-c937a3c5b53a","SeenSetup.tsx","720ffd62-665b-11f1-902f-1607ee4eb77e",45,["D",1781267855520],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, Film, Theme } from \"./helpers.ts\";\n\ninterface PrefillResult {\n L: { user: string; filmCount: number; error: string };\n J: { user: string; filmCount: number; error: string };\n matched: Record;\n}\n\nfunction BigSeenToggle(\n { who, seen, fromLb, onClick }: { who: \"L\" | \"J\"; seen: boolean; fromLb: boolean; onClick: () => void },\n) {\n return (\n \n {who}\n {fromLb && seen && lb}\n \n );\n}\n\n// Point-in-time \"who's seen what\" triage for a theme. Prefills from Letterboxd\n// so you only correct by exception, like before you tracked outside Letterboxd.\nexport function SeenSetup(\n { theme, onToggleSeen, onRefresh, onClose }: {\n theme: Theme;\n onToggleSeen: (film: Film, who: \"L\" | \"J\") => void;\n onRefresh: () => void;\n onClose: () => void;\n },\n) {\n const [status, setStatus] = useState<\"loading\" | \"ready\" | \"error\">(\"loading\");\n const [info, setInfo] = useState(\"\");\n const [matched, setMatched] = useState>({});\n\n useEffect(() => {\n if (theme.films.length === 0) {\n setStatus(\"ready\");\n setInfo(\"Add some films first, then come back here to mark who's seen what.\");\n return;\n }\n let alive = true;\n api(`/api/themes/${theme.id}/prefill-seen`, \"POST\")\n .then((raw) => {\n if (!alive) return;\n const r = raw as PrefillResult;\n setMatched(r.matched ?? {});\n const broken = ([\"L\", \"J\"] as const).filter((w) => r[w]?.error);\n setInfo(\n broken.length\n ? `Couldn't read Letterboxd for ${broken.map((w) => r[w].user).join(\" and \")} — mark those manually.`\n : `Prefilled from Letterboxd (${r.L.user}: ${r.L.filmCount} films, ${r.J.user}: ${r.J.filmCount}). Fix any exceptions below.`,\n );\n setStatus(\"ready\");\n onRefresh(); // prefill wrote seen flags server-side; pull them into the UI\n })\n .catch(() => {\n if (!alive) return;\n setStatus(\"error\");\n setInfo(\"Letterboxd prefill failed — mark seen films manually below.\");\n });\n return () => {\n alive = false;\n };\n }, [theme.id]);\n\n return (\n

👀 Who's seen what?

\n \n

\n {status === \"loading\" ? \"Checking your Letterboxd histories… 🎞 (first run takes a few seconds)\" : info}\n

\n {status !== \"loading\" && theme.films.length > 0 && (\n

\n
\n {f.title} {f.year && `(${f.year})`}\n
\n onToggleSeen(f, \"L\")} />\n onToggleSeen(f, \"J\")} />\n

\n )}\n

\n );\n}\n",[],[135,168,188],"381e2574-cae0-498b-90eb-637a0d429bba","FilmRow.tsx","5cd9678a-6651-11f1-a3f0-1607ee4eb77e",67,["D",1781268689240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { chipsFor, Film, fmtRuntime, jwFilmUrl, letterboxdUrl, plexUrl, showtimesUrl } from \"./helpers.ts\";\n\n// small \"have I seen this before?\" pill, one per person\nfunction SeenPill(\n { who, seen, onClick }: { who: \"L\" | \"J\"; seen: boolean; onClick: () => void },\n) {\n return (\n {\n e.stopPropagation();\n onClick();\n }}\n title={`${who} has ${seen ? \"\" : \"not \"}seen this before`}\n className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold border ${\n seen\n ? \"bg-neutral-700 border-neutral-600 text-neutral-200\"\n : \"border-neutral-700 text-neutral-600\"\n }`}\n >\n {who}{seen ? \" ✓\" : \"\"}\n \n );\n}\n\nconst inputCls =\n \"w-full rounded bg-neutral-800 border border-neutral-700 px-2 py-1.5 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-400\";\n\nfunction EditForm(\n { film, onSave, onCancel, onDelete }: {\n film: Film;\n onSave: (fields: Partial) => void;\n onCancel: () => void;\n onDelete: () => void;\n },\n) {\n const [f, setF] = useState({ ...film });\n const set = (k: string, v: string) => setF((p) => ({ ...p, [k]: v }));\n return (\n

\n set(\"title\", e.target.value)} placeholder=\"Title\" />\n

\n set(\"year\", e.target.value)} placeholder=\"Year\" />\n set(\"runtimeMin\", e.target.value)}\n placeholder=\"Runtime (min)\"\n inputMode=\"numeric\"\n />\n

\n set(\"language\", e.target.value)}\n placeholder=\"Language\"\n />\n set(\"whereToWatch\", e.target.value)}\n placeholder=\"Where to watch (e.g. Prime, Netflix, Plex, Cinema)\"\n />\n set(\"notes\", e.target.value)} placeholder=\"Notes\" />\n {film.watched && (\n \n Watched on (for the calendar)\n set(\"watchedAt\", e.target.value)}\n />\n \n )}\n

\n \n onSave({\n title: f.title,\n year: f.year,\n runtimeMin: Number(f.runtimeMin) || null,\n language: f.language,\n whereToWatch: f.whereToWatch,\n notes: f.notes,\n watchedAt: f.watchedAt,\n })}\n className=\"px-3 py-1.5 rounded bg-amber-400 text-neutral-900 text-sm font-semibold\"\n >\n Save\n \n \n {\n if (confirm(`Delete \"${film.title}\"?`)) onDelete();\n }}\n className=\"ml-auto px-3 py-1.5 rounded text-sm text-red-400 hover:bg-red-950\"\n >\n Delete\n \n

\n );\n}\n\nexport function FilmRow(\n { film, onToggleWatched, onToggleSeen, onSave, onDelete }: {\n film: Film;\n onToggleWatched: () => void;\n onToggleSeen: (who: \"L\" | \"J\") => void;\n onSave: (fields: Partial) => void;\n onDelete: () => void;\n },\n) {\n const [expanded, setExpanded] = useState(false);\n const [editing, setEditing] = useState(false);\n const chips = chipsFor(film.whereToWatch, film.title);\n const isCinema = /cinema/i.test(film.whereToWatch);\n\n // quick action on the right: rate it once watched, otherwise the full JustWatch picture\n const quick = film.watched\n ? { href: letterboxdUrl(film.title), label: \"★ rate\", title: \"Rate it on Letterboxd\" }\n : { href: jwFilmUrl(film), label: \"JW ↗\", title: \"Full availability picture on JustWatch\" };\n\n return (\n

\n \n ✓\n \n

setExpanded((e) => !e)}>\n

\n {film.title} {film.year && ({film.year})}\n

\n {film.imdbScore != null && (\n ⭐ {film.imdbScore.toFixed(1)}\n )}\n {film.tmdbScore != null && (\n \n ❤️ {Math.round(film.tmdbScore * 10)}%\n \n )}\n {film.runtimeMin ? {fmtRuntime(film.runtimeMin)} : null}\n {film.language && · {film.language}}\n {chips.map((ch) =>\n ch.href\n ? (\n e.stopPropagation()}\n title={`Open on ${ch.label}`}\n className={`px-1.5 py-0.5 rounded-full hover:ring-1 hover:ring-amber-400 ${ch.cls}`}\n >\n {ch.label}\n \n )\n : {ch.label}\n )}\n onToggleSeen(\"L\")} />\n onToggleSeen(\"J\")} />\n

\n {film.notes && !expanded && (\n

{film.notes}

\n )}\n

\n e.stopPropagation()}\n title={quick.title}\n className=\"shrink-0 px-2 py-1 rounded bg-neutral-800 text-amber-300 text-xs font-semibold hover:bg-neutral-700\"\n >\n {quick.label}\n \n

\n\n {expanded && !editing && (\n

\n {film.people &&

{film.people}

}\n {film.genre &&

{film.genre}

}\n {film.whereToWatch && (\n

\n Where to watch: {film.whereToWatch}\n

\n )}\n {film.notes &&

{film.notes}

}\n

\n \n JustWatch ↗\n \n \n Plex ↗\n \n \n Letterboxd ↗\n \n {isCinema && (\n \n Showtimes ↗\n \n )}\n \n

\n )}\n\n {expanded && editing && (\n setEditing(false)}\n onDelete={onDelete}\n onSave={(fields) => {\n onSave(fields);\n setEditing(false);\n }}\n />\n )}\n

\n );\n}\n",[],[135,168,196],"4d0149d2-6f77-44a0-a19d-fdfb2d3d1b72","CalendarView.tsx","80dbc68a-665d-11f1-8596-1607ee4eb77e",70,["D",1781268733049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Film, Theme } from \"./helpers.ts\";\n\nconst MONTHS = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n];\n\nfunction parseMonthLabel(label: string): { year: number; month: number } | null {\n const m = label.trim().match(/^([a-z]+)\\s+(\\d{4})$/i);\n if (!m) return null;\n const month = MONTHS.findIndex((name) => name.toLowerCase().startsWith(m[1].toLowerCase().slice(0, 3)));\n if (month < 0) return null;\n return { year: Number(m[2]), month };\n}\n\nfunction Poster({ film, size }: { film: Film; size: string }) {\n return film.posterUrl\n ? (\n \n )\n : (\n \n {film.title.slice(0, 14)}\n \n );\n}\n\nfunction MonthCalendar(\n { themes, year, month, onBack }: { themes: Theme[]; year: number; month: number; onBack: () => void },\n) {\n const prefix = `${year}-${String(month + 1).padStart(2, \"0\")}`;\n const all = themes.flatMap((t) => t.films);\n const byDay = new Map();\n for (const f of all) {\n if (f.watched && f.watchedAt.startsWith(prefix)) {\n const day = Number(f.watchedAt.slice(8, 10));\n byDay.set(day, [...(byDay.get(day) ?? []), f]);\n }\n }\n // the month's theme(s) — for the header and for watched-but-undated films\n const monthThemes = themes.filter((t) => {\n const p = parseMonthLabel(t.monthLabel);\n return p && p.year === year && p.month === month;\n });\n const undated = monthThemes.flatMap((t) => t.films.filter((f) => f.watched && !f.watchedAt));\n\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n const firstWeekday = (new Date(year, month, 1).getDay() + 6) % 7; // Monday-first\n const cells: (number | null)[] = [\n ...Array.from({ length: firstWeekday }, () => null),\n ...Array.from({ length: daysInMonth }, (_, i) => i + 1),\n ];\n\n return (\n

\n {MONTHS[month]} {year}\n {monthThemes.map((t) => {t.emoji} {t.name})}\n

\n \n

\n {[\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"].map((d) =>

{d}

)}\n

\n {cells.map((day, i) => (\n \n {day && (\n <>\n

{day}

\n {(byDay.get(day) ?? []).map((f) => )}\n

\n \n )}\n

\n ))}\n

\n {undated.length > 0 && (\n

\n Watched this month, date unknown — tap a film's edit to set one:\n

\n {undated.map((f) => )}\n

\n )}\n {byDay.size === 0 && undated.length === 0 && (\n

No watches logged this month 🍿

\n )}\n \n );\n}\n\nexport function CalendarView({ themes }: { themes: Theme[] }) {\n const now = new Date();\n const [year, setYear] = useState(now.getFullYear());\n const [month, setMonth] = useState(null);\n\n if (month !== null) {\n return setMonth(null)} />;\n }\n\n return (\n

\n \n

{year}

\n \n

\n {MONTHS.map((name, m) => {\n const monthThemes = themes.filter((t) => {\n const p = parseMonthLabel(t.monthLabel);\n return p && p.year === year && p.month === m;\n });\n const films = monthThemes.flatMap((t) => t.films);\n const watched = films.filter((f) => f.watched).length;\n const pct = films.length ? Math.round((watched / films.length) * 100) : 0;\n const prefix = `${year}-${String(m + 1).padStart(2, \"0\")}`;\n const datedWatches = themes.flatMap((t) => t.films).filter((f) => f.watchedAt.startsWith(prefix)).length;\n const hasContent = monthThemes.length > 0 || datedWatches > 0;\n return (\n setMonth(m)}\n className={`text-left rounded-lg p-3 border ${\n hasContent\n ? \"bg-neutral-900 border-neutral-700 hover:border-amber-400\"\n : \"bg-neutral-900/40 border-neutral-800 text-neutral-600\"\n }`}\n >\n

{name}

\n {monthThemes.length > 0\n ? (\n <>\n

{monthThemes.map((t) => t.emoji).join(\" \")}

\n {monthThemes.map((t) => t.name).join(\" · \")}\n

\n {watched}/{films.length} · {pct}%\n

\n \n )\n : (\n

\n {datedWatches > 0 ? `${datedWatches} watch${datedWatches > 1 ? \"es\" : \"\"} 🍿` : \"—\"}\n

\n )}\n \n );\n })}\n

tap a month for the poster calendar

\n );\n}\n",[],[135,168,204],"c381d358-da3f-4466-b7a3-8f4d1ff563ec","App.tsx","019ebb7e-81ba-746e-81b0-73756a463543",75,["D",1781268762239],24,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, Film, fmtRuntime, Theme } from \"./helpers.ts\";\nimport { FilmRow } from \"./FilmRow.tsx\";\nimport { SeenSetup } from \"./SeenSetup.tsx\";\nimport { CalendarView } from \"./CalendarView.tsx\";\n\nconst inputCls =\n \"rounded bg-neutral-800 border border-neutral-700 px-2 py-1.5 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-400\";\n\nfunction AddFilmForm({ themeId, onAdded }: { themeId: number; onAdded: () => void }) {\n const [open, setOpen] = useState(false);\n const [f, setF] = useState({ title: \"\", year: \"\", runtimeMin: \"\", whereToWatch: \"\", notes: \"\" });\n if (!open) {\n return (\n setOpen(true)}\n className=\"w-full py-2.5 rounded-lg border-2 border-dashed border-neutral-700 text-neutral-400 text-sm hover:border-amber-400 hover:text-amber-300\"\n >\n + Add a film\n \n );\n }\n const set = (k: string, v: string) => setF((p) => ({ ...p, [k]: v }));\n return (\n

\n set(\"title\", e.target.value)}\n placeholder=\"Title *\"\n />\n

\n set(\"year\", e.target.value)} placeholder=\"Year\" />\n set(\"runtimeMin\", e.target.value)}\n placeholder=\"Runtime (min)\"\n inputMode=\"numeric\"\n />\n

\n set(\"whereToWatch\", e.target.value)}\n placeholder=\"Where to watch (Prime, Netflix, Cinema…)\"\n />\n set(\"notes\", e.target.value)} placeholder=\"Notes\" />\n

\n {\n await api(\"/api/films\", \"POST\", {\n themeId,\n title: f.title.trim(),\n year: f.year,\n runtimeMin: Number(f.runtimeMin) || null,\n whereToWatch: f.whereToWatch,\n notes: f.notes,\n });\n setF({ title: \"\", year: \"\", runtimeMin: \"\", whereToWatch: \"\", notes: \"\" });\n setOpen(false);\n onAdded();\n }}\n >\n Add film\n \n \n

\n );\n}\n\nfunction KindSelect({ value, onChange }: { value: string; onChange: (v: string) => void }) {\n return (\n \n );\n}\n\nfunction ThemeSettings({ theme, onDone }: { theme: Theme; onDone: () => void }) {\n const [f, setF] = useState({\n name: theme.name,\n emoji: theme.emoji,\n monthLabel: theme.monthLabel,\n kind: theme.kind,\n });\n const set = (k: string, v: string) => setF((p) => ({ ...p, [k]: v }));\n return (\n

\n set(\"emoji\", e.target.value)} placeholder=\"🎬\" />\n set(\"name\", e.target.value)}\n placeholder=\"Theme name\"\n />\n

\n set(\"kind\", v)} />\n set(\"monthLabel\", e.target.value)}\n placeholder={f.kind === \"monthly\" ? \"Month (e.g. July 2026)\" : \"Label (optional)\"}\n />\n

\n {\n await api(`/api/themes/${theme.id}`, \"PATCH\", f);\n onDone();\n }}\n >\n Save\n \n \n {\n if (!confirm(`Delete \"${theme.name}\" and all ${theme.films.length} films in it?`)) return;\n await api(`/api/themes/${theme.id}`, \"DELETE\");\n onDone();\n }}\n >\n Delete theme\n \n

\n );\n}\n\nfunction NewThemeForm({ onDone }: { onDone: (newId?: number) => void }) {\n const [f, setF] = useState({ name: \"\", emoji: \"\", monthLabel: \"\", kind: \"monthly\" });\n const set = (k: string, v: string) => setF((p) => ({ ...p, [k]: v }));\n return (\n

\n set(\"emoji\", e.target.value)} placeholder=\"🎬\" />\n set(\"name\", e.target.value)}\n placeholder=\"Theme name *\"\n />\n

\n set(\"kind\", v)} />\n set(\"monthLabel\", e.target.value)}\n placeholder={f.kind === \"monthly\" ? \"Month (e.g. July 2026)\" : \"Label (optional)\"}\n />\n

\n {\n const r = (await api(\"/api/themes\", \"POST\", f)) as { id: number };\n onDone(r.id);\n }}\n >\n Create theme\n \n \n

\n );\n}\n\nexport function App() {\n const [themes, setThemes] = useState(null);\n const [activeId, setActiveId] = useState(null);\n const [sortBy, setSortBy] = useState<\"order\" | \"runtime\" | \"year\" | \"title\">(\"order\");\n const [hideWatched, setHideWatched] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [showSettings, setShowSettings] = useState(false);\n const [showNewTheme, setShowNewTheme] = useState(false);\n const [showSeenSetup, setShowSeenSetup] = useState(false);\n const [view, setView] = useState<\"films\" | \"calendar\">(\"films\");\n const [error, setError] = useState(\"\");\n const ratingsTried = useRef(new Set());\n\n const load = async () => {\n try {\n const d = (await api(\"/api/state\")) as { themes: Theme[] };\n setThemes(d.themes);\n setActiveId((cur) => (cur !== null && d.themes.some((t) => t.id === cur)) ? cur : d.themes[0]?.id ?? null);\n setError(\"\");\n } catch {\n setError(\"Couldn't sync — check your connection and pull to refresh.\");\n }\n };\n\n useEffect(() => {\n load();\n const onVis = () => {\n if (document.visibilityState === \"visible\") load();\n };\n document.addEventListener(\"visibilitychange\", onVis);\n window.addEventListener(\"focus\", onVis);\n const iv = setInterval(onVis, 60_000);\n return () => {\n document.removeEventListener(\"visibilitychange\", onVis);\n window.removeEventListener(\"focus\", onVis);\n clearInterval(iv);\n };\n }, []);\n\n const active = themes?.find((t) => t.id === activeId) ?? null;\n\n // fetch IMDb/TMDB ratings + posters for newly added films when a theme is viewed\n useEffect(() => {\n if (!active || ratingsTried.current.has(active.id)) return;\n if (active.films.some((f) => f.ratingsAt === null)) {\n ratingsTried.current.add(active.id);\n api(`/api/themes/${active.id}/fetch-ratings`, \"POST\").then(load).catch(() => {});\n }\n }, [active]);\n\n const films = useMemo(() => {\n if (!active) return [];\n let list = [...active.films];\n if (hideWatched) list = list.filter((f) => !f.watched);\n const q = search.trim().toLowerCase();\n if (q) {\n list = list.filter((f) =>\n [f.title, f.year, f.people, f.genre, f.language, f.notes, f.whereToWatch].join(\" \").toLowerCase().includes(q)\n );\n }\n const cmp: Record number> = {\n order: (a, b) => a.id - b.id,\n runtime: (a, b) => (a.runtimeMin ?? 9999) - (b.runtimeMin ?? 9999),\n year: (a, b) => a.year.localeCompare(b.year),\n title: (a, b) => a.title.localeCompare(b.title),\n };\n return list.sort(cmp[sortBy]);\n }, [active, hideWatched, search, sortBy]);\n\n // optimistic toggles so taps feel instant on phones\n const patchFilm = async (film: Film, key: \"seenL\" | \"seenJ\" | \"watched\") => {\n const next = !film[key];\n setThemes((ts) =>\n ts?.map((t) => ({\n ...t,\n films: t.films.map((f) => f.id === film.id ? { ...f, [key]: next } : f),\n })) ?? null\n );\n try {\n await api(`/api/films/${film.id}`, \"PATCH\", { [key]: next });\n } catch {\n load(); // revert to server truth\n }\n };\n\n if (!themes) {\n return

Loading the watchlist… 🍿

;\n }\n\n const watchedCount = active ? active.films.filter((f) => f.watched).length : 0;\n const total = active?.films.length ?? 0;\n const minsLeft = active\n ? active.films.filter((f) => !f.watched).reduce((s, f) => s + (f.runtimeMin ?? 0), 0)\n : 0;\n const pct = total ? Math.round((watchedCount / total) * 100) : 0;\n const monthly = themes.filter((t) => t.kind !== \"ongoing\");\n const ongoing = themes.filter((t) => t.kind === \"ongoing\");\n\n const themeTab = (t: Theme) => {\n const done = t.films.filter((f) => f.watched).length;\n const isActive = t.id === activeId;\n return (\n {\n setActiveId(t.id);\n setShowSettings(false);\n setSearch(\"\");\n }}\n className={`shrink-0 px-3 py-1.5 rounded-full text-sm whitespace-nowrap border ${\n isActive\n ? \"bg-amber-400 text-neutral-900 border-amber-400 font-semibold\"\n : t.kind === \"ongoing\"\n ? \"bg-neutral-900 border-dashed border-neutral-600 text-neutral-300\"\n : \"bg-neutral-900 border-neutral-700 text-neutral-300\"\n }`}\n >\n {t.emoji} {t.name}{\" \"}\n \n {done}/{t.films.length}\n \n \n );\n };\n\n return (\n

🍿 Movie Months

\n setView((v) => v === \"films\" ? \"calendar\" : \"films\")}\n className=\"px-2.5 py-1 rounded-full border border-neutral-700 text-xs text-neutral-300 hover:border-amber-400\"\n >\n {view === \"films\" ? \"🗓 calendar\" : \"📋 lists\"}\n \n \n L + J\n \n

\n\n {error &&

{error}

}\n\n {view === \"calendar\" && }\n\n {view === \"films\" && (\n <>\n \n\n {showNewTheme && (\n {\n setShowNewTheme(false);\n await load();\n if (newId) {\n // new theme flow: jump straight into the \"who's seen what\" setup\n setActiveId(newId);\n setShowSeenSetup(true);\n }\n }}\n />\n )}\n\n {active && (\n <>\n

\n \n {active.kind === \"ongoing\" ? \"📌 ongoing\" : active.monthLabel}\n \n \n watched {watchedCount}/{total}\n {minsLeft > 0 && <> · {fmtRuntime(minsLeft)} to go}\n \n

\n {\n setShowSeenSetup((s) => !s);\n setShowSettings(false);\n }}\n className=\"text-neutral-500 hover:text-amber-300 text-sm\"\n title=\"Mark who's seen what (prefills from Letterboxd)\"\n >\n 👀\n \n {\n setShowSettings((s) => !s);\n setShowSeenSetup(false);\n }}\n className=\"text-neutral-500 hover:text-amber-300 text-sm\"\n title=\"Theme settings\"\n >\n ⚙︎\n \n

\n\n {showSettings && (\n {\n setShowSettings(false);\n load();\n }}\n />\n )}\n\n {showSeenSetup && (\n patchFilm(f, who === \"L\" ? \"seenL\" : \"seenJ\")}\n onRefresh={load}\n onClose={() => setShowSeenSetup(false)}\n />\n )}\n\n {!showSeenSetup && (\n <>\n

\n setSearch(e.target.value)}\n placeholder={`Search ${total} films…`}\n />\n setSortBy(e.target.value as typeof sortBy)}\n >\n \n \n \n \n \n setHideWatched((h) => !h)}\n className={`shrink-0 px-2.5 py-1.5 rounded text-sm border ${\n hideWatched ? \"bg-amber-400 text-neutral-900 border-amber-400\" : \"border-neutral-700 text-neutral-400\"\n }`}\n title=\"Hide films you've already watched together\"\n >\n {hideWatched ? \"👁 hidden\" : \"hide ✓\"}\n \n

\n\n

patchFilm(f, \"watched\")}\n onToggleSeen={(who) => patchFilm(f, who === \"L\" ? \"seenL\" : \"seenJ\")}\n onSave={async (fields) => {\n await api(`/api/films/${f.id}`, \"PATCH\", fields);\n load();\n }}\n onDelete={async () => {\n await api(`/api/films/${f.id}`, \"DELETE\");\n load();\n }}\n />\n ))}\n {!films.length && (\n

\n {search ? \"No films match.\" : \"Nothing here yet — add your first film!\"}\n

\n )}\n

\n\n \n \n )}\n \n )}\n\n \n

\n );\n}\n",[],[135,168,212],["D",1781263325959],[223,224,225,226],[19],{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":101,"_73":74,"_38":236,"_17":103,"_77":88,"_78":104,"_80":51,"_81":-5,"_122":237,"_18":238},{"_36":91,"_13":92,"_66":93,"_68":69,"_70":71,"_72":94,"_73":74,"_38":233,"_17":76,"_77":88,"_78":96,"_80":51,"_81":-5,"_122":234,"_18":235},{"_36":83,"_13":84,"_66":85,"_68":69,"_70":71,"_72":86,"_73":74,"_38":230,"_17":76,"_77":88,"_78":89,"_80":51,"_81":-5,"_122":231,"_18":232},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":34,"_73":74,"_38":227,"_17":76,"_77":24,"_78":79,"_80":51,"_81":-5,"_122":228,"_18":229},["D",1781263325959],[],[19,65],["D",1781268536967],[],[19,84],["D",1781267763569],[],[19,92],["D",1781268552184],[],[19,99],"a75df466-7e22-4f55-abb0-51d42e329611",["D",1781262090577],"legacyEnvVars","httpPrivacy","description","Shared monthly movie-theme watchlist with live UK watch links","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789523999&sig=ddec8b74ef2383c6f8bc1f92294102b93fbe53e7cc4968800d22e8558cb46b5f","userId","5a7436da-0848-40a3-99eb-c054d70b048c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019eb6c5-7b3a-724a-9353-a03b686955a5","tursoName","a75df4667e224f55abb051d42e329611","tursoHostname","a75df4667e224f55abb051d42e329611-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789445472057],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_288":284},"org",{"_11":12,"_281":282,"_283":284,"_247":248,"_285":286,"_287":51},"branch",{"_17":214,"_13":16,"_36":71,"_42":239,"_45":37,"_46":277,"_278":53,"_279":43,"_280":57,"_58":14,"_54":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Lauren Smith","avatar","https://lh3.googleusercontent.com/a/ACg8ocK1Cg_9prHvfBQxGTfAna1F3ADEaUG2om3O9gdNmG4Ltp_NCw=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":239,"_13":14,"_38":385,"_49":-5,"_241":51,"_52":53,"_242":53,"_243":244,"_245":246,"_247":248,"_249":116,"_250":74,"_251":-5,"_252":-5,"_253":76,"_56":254,"_255":256,"_257":258,"_259":386,"_261":-5,"_262":263,"_264":263,"_265":266,"_267":266,"_268":266,"_269":263,"_270":263,"_271":387,"_273":388,"_275":389,"_50":51},[334,339,349,350],"files",[334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350],"counts",{"_325":76,"_326":137,"_327":76,"_35":328,"_329":330},[317,318,319,320],{"_36":106,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":315,"_17":76,"_77":107,"_78":-5,"_80":51,"_81":-5,"_18":316},"upstreamProject",{"_36":43,"_13":59,"_243":312,"_245":246,"_52":53,"_271":313},"upstreamBranch",{"_36":37,"_38":310,"_40":311,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":55,"_288":314},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789523999&sig=17477bf80bbbb975ec406b5ce9e7fa4b3807c0792d58b2630a6396281d59b65a",["D",1781263325959],[19],{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":101,"_73":74,"_38":102,"_17":103,"_77":88,"_78":104,"_80":51,"_81":-5,"_18":324},{"_36":91,"_13":92,"_66":93,"_68":69,"_70":71,"_72":94,"_73":74,"_38":95,"_17":76,"_77":88,"_78":96,"_80":51,"_81":-5,"_18":323},{"_36":83,"_13":84,"_66":85,"_68":69,"_70":71,"_72":86,"_73":74,"_38":87,"_17":76,"_77":88,"_78":89,"_80":51,"_81":-5,"_18":322},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":34,"_73":74,"_38":75,"_17":76,"_77":24,"_78":79,"_80":51,"_81":-5,"_18":321},[19,65],[19,84],[19,92],[19,99],"pulls","branches","forks",{"_331":76,"_333":76},"connections",{"_331":76,"_332":76},"count","unfilledCount","emptyCount",{"_36":106,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":220,"_17":76,"_77":107,"_78":-5,"_80":51,"_81":-5,"_122":383,"_18":384},{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":101,"_73":74,"_38":236,"_17":103,"_77":88,"_78":104,"_80":51,"_81":-5,"_122":381,"_18":382},{"_36":91,"_13":92,"_66":93,"_68":69,"_70":71,"_72":94,"_73":74,"_38":233,"_17":76,"_77":88,"_78":96,"_80":51,"_81":-5,"_122":379,"_18":380},{"_36":83,"_13":84,"_66":85,"_68":69,"_70":71,"_72":86,"_73":74,"_38":230,"_17":76,"_77":88,"_78":89,"_80":51,"_81":-5,"_122":377,"_18":378},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":34,"_73":74,"_38":227,"_17":76,"_77":24,"_78":79,"_80":51,"_81":-5,"_122":375,"_18":376},{"_36":134,"_13":135,"_66":136,"_68":-5,"_70":71,"_72":137,"_73":74,"_38":138,"_17":76,"_77":107,"_78":-5,"_80":51,"_81":-5,"_122":373,"_18":374},{"_36":167,"_13":168,"_66":169,"_68":136,"_70":71,"_72":137,"_73":74,"_38":170,"_17":76,"_77":107,"_78":-5,"_80":51,"_81":-5,"_122":371,"_18":372},{"_36":211,"_13":212,"_66":213,"_68":169,"_70":71,"_72":214,"_73":74,"_38":215,"_17":216,"_77":88,"_78":217,"_80":51,"_81":-5,"_122":369,"_18":370},{"_36":203,"_13":204,"_66":205,"_68":169,"_70":71,"_72":206,"_73":74,"_38":207,"_17":34,"_77":88,"_78":208,"_80":51,"_81":-5,"_122":367,"_18":368},{"_36":195,"_13":196,"_66":197,"_68":169,"_70":71,"_72":198,"_73":74,"_38":199,"_17":103,"_77":88,"_78":200,"_80":51,"_81":-5,"_122":365,"_18":366},{"_36":187,"_13":188,"_66":189,"_68":169,"_70":71,"_72":190,"_73":74,"_38":191,"_17":34,"_77":88,"_78":192,"_80":51,"_81":-5,"_122":363,"_18":364},{"_36":178,"_13":179,"_66":180,"_68":169,"_70":71,"_72":181,"_73":74,"_38":182,"_17":183,"_77":88,"_78":184,"_80":51,"_81":-5,"_122":361,"_18":362},{"_36":159,"_13":160,"_66":161,"_68":136,"_70":71,"_72":162,"_73":74,"_38":163,"_17":137,"_77":24,"_78":164,"_80":51,"_81":-5,"_122":359,"_18":360},{"_36":152,"_13":153,"_66":154,"_68":136,"_70":71,"_72":103,"_73":74,"_38":155,"_17":137,"_77":24,"_78":156,"_80":51,"_81":-5,"_122":357,"_18":358},{"_36":145,"_13":146,"_66":147,"_68":136,"_70":71,"_72":137,"_73":74,"_38":148,"_17":76,"_77":88,"_78":149,"_80":51,"_81":-5,"_122":355,"_18":356},{"_36":125,"_13":126,"_66":127,"_68":-5,"_70":71,"_72":128,"_73":74,"_38":129,"_17":130,"_77":24,"_78":131,"_80":51,"_81":-5,"_122":353,"_18":354},{"_36":114,"_13":115,"_66":116,"_68":-5,"_70":71,"_72":117,"_73":74,"_38":118,"_17":119,"_77":120,"_78":121,"_80":51,"_81":-5,"_122":351,"_18":352},[],[115],[],[126],[],[135,146],[],[135,153],[],[135,160],[],[135,168,179],[],[135,168,188],[],[135,168,196],[],[135,168,204],[],[135,168,212],[341,342,343,344,345],[135,168],[340,346,347,348],[135],[],[19,65],[],[19,84],[],[19,92],[],[19,99],[335,336,337,338],[19],["D",1781262090577],["D",1789445472057],{"_11":12,"_288":284},{"_11":12,"_281":282,"_283":284,"_247":248,"_285":286,"_287":51},{"_17":214,"_13":16,"_36":71,"_42":239,"_45":37,"_46":277,"_278":53,"_279":43,"_280":57,"_58":14,"_54":12},"ctx",{"_271":-5,"_307":423,"_424":425,"_426":427,"_428":51,"_429":51,"_430":51,"_431":74,"_432":-5,"_433":-7,"_434":-7,"_435":76,"_436":51,"_437":51,"_438":-5,"_439":51,"_440":51,"_441":51,"_442":-5},"ENV",{"_394":395,"_396":397,"_398":16,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]