[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_293":294,"_295":296},"routes/_app.x.$handle.$name",{"_106":105,"_32":46,"_115":92,"_27":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_20":-5,"_127":128,"_129":130,"_131":25,"_132":133,"_134":61,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",32,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","019ebb7e-81ba-746e-81b0-73756a463543","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, Film, fmtRuntime, Theme } from \"./helpers.ts\";\nimport { FilmRow } from \"./FilmRow.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: () => 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 await api(\"/api/themes\", \"POST\", f);\n onDone();\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 [error, setError] = useState(\"\");\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 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 \n L + J\n \n

\n\n {error &&

{error}

}\n\n \n\n {showNewTheme && (\n {\n setShowNewTheme(false);\n load();\n }}\n />\n )}\n\n {active && (\n <>\n

\n {active.monthLabel && {active.monthLabel}}\n \n watched together {seenBoth}/{total}\n {minsLeft > 0 && <> · {fmtRuntime(minsLeft)} to go}\n \n

\n setShowSettings((s) => !s)}\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

\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 setHideSeen((h) => !h)}\n className={`shrink-0 px-2.5 py-1.5 rounded text-sm border ${\n hideSeen ? \"bg-amber-400 text-neutral-900 border-amber-400\" : \"border-neutral-700 text-neutral-400\"\n }`}\n title=\"Hide films you've both seen\"\n >\n {hideSeen ? \"unseen only\" : \"all\"}\n \n

\n\n

toggleSeen(f, who)}\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","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, Film, fmtRuntime, Theme } from \"./helpers.ts\";\nimport { FilmRow } from \"./FilmRow.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

Diff · v32