React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_369":370,"_371":372},"routes/_app.x.$handle.$name",{"_104":103,"_32":45,"_112":90,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":125,"_126":127,"_128":49,"_129":130,"_131":25,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":49},"version",47,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","frontend/components/MessageInput.tsx","latestPath","fileId","019ca7f5-af18-74e8-a9ff-a1a2f8ee992b","name","MessageInput.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../shared/types.ts\";\n\nexport function MessageInput({ onSubmit }: { onSubmit: () => void }) {\n const [message, setMessage] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n const response = await fetch(\"/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ content: message }),\n });\n\n if (response.ok) {\n onSubmit();\n setMessage(\"\");\n }\n } catch (error) {\n console.error(\"Message submission failed\", error);\n }\n };\n\n return (\n

\n setMessage(e.target.value)}\n placeholder=\"Type a message...\"\n />\n \n \n );\n}","createdAt",["D",1772352466214],"branchVersion","branchId","0086f980-1533-11f1-aa5e-42dde27851f2","id","008209de-1533-11f1-aa5e-42dde27851f2","BabList",["D",1772344422078],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","Example with client-side React & Hono server","imageUrl","019ca7f2-6e63-76d8-9993-9700c5c563ce","pinnedFileId","019ca7f5-af18-74e8-a9ff-d1bc6982c02f","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019ca7f2-6e63-76d8-9993-9a76aa36e3e7","tursoName","008209de153311f1aa5e42dde27851f2","tursoHostname","008209de153311f1aa5e42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789542643120],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_18":56,"_108":109,"_110":49},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":93,"_94":95,"_96":51,"_97":98,"_99":100,"_101":45,"_102":103},"isOwned",135,"main","projectId","forkedBranchId","41ef5540-f2f5-11ef-891c-569c3dd06744","forkedBranchVersion",244,"forkedProjectPrivacy","forkedProjectId","41ef0130-f2f5-11ef-891c-569c3dd06744","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","n1ck9","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNBS2JRNGRhQkMyVWppTHhDNDNTNTBhZlNIRCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":364,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":365,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":366,"_84":367,"_86":368,"_88":49},"tree",[196,204,213,217,218],"files",[196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218],"counts",{"_184":63,"_185":186,"_187":63,"_188":189,"_190":191},"contents",[145,146,147,148,149],"upstreamProject",{"_43":98,"_32":142,"_53":54,"_55":-5,"_50":51,"_82":143},"upstreamBranch",{"_43":93,"_38":136,"_137":138,"_32":90,"_91":98,"_13":95,"_92":-5,"_94":-5,"_139":140,"_47":-5,"_88":49,"_50":51,"_102":141,"_64":100,"_101":142},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740432065884],"updatedAt",["D",1755285423526],"lockfileKey","1755661346047-esm.town_v_stevekrouse_reactHonoExample@244-main","stevekrouse","reactHonoExample",{"_104":141,"_111":144},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_43":179,"_32":180,"_30":181,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":182,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_27":183},{"_43":174,"_32":175,"_30":176,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":177,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_27":178},{"_43":168,"_32":169,"_30":170,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":171,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_27":173},{"_43":161,"_32":162,"_30":163,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":165,"_13":63,"_34":20,"_36":166,"_24":49,"_159":-5,"_27":167},{"_43":150,"_32":151,"_30":58,"_152":-5,"_41":42,"_40":153,"_154":49,"_38":155,"_13":156,"_34":157,"_36":158,"_24":49,"_159":-5,"_27":160},"1db9a69c-1542-11f1-ad68-42dde27851f2","index.ts","parentId",39,"latest",["D",1772350913579],3,"http","// index.ts — Val Town entry point\nimport { Hono } from \"https://esm.sh/hono@4.4.2\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport api from \"./backend/api.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see full stack traces\napp.onError((err, c) => {\n throw err;\n});\n\n// Mount API routes\napp.route(\"/api\", api);\n\n// Serve frontend files (Val Town transpiles .tsx automatically)\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve index.html for all other routes\napp.get(\"*\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;","label",[151],"008bf6f6-1533-11f1-aa5e-42dde27851f2","README.md","019ca7f5-af18-74e8-a9ff-cc600af8bfc9",1,["D",1772344422078],"# React Hono Val Town Project Starter Template\n\nThis is a starter template for a full-stack app in a Val Town Project. The app\nitself is a simple persistent message board.\n\nThe entrypoint of this app is [`index.ts`](./index.ts), which is the Hono HTTP\nserver, which serves the HTML, CSS, and JS, which run client-side.\n\nThis app is broken up into three folders, corresponding to where the code in\nthose folders run:\n\n- `backend/` - runs on Val Town serverless infrastructure in Deno\n- `frontend/` - runs in the user's browser\n- `shared/` - runs in both the frontend and backend\n\nYou can click into each of those folders to view their respective READMEs.",[162],"008bf5b6-1533-11f1-aa5e-42dde27851f2","shared","019ca7f5-af18-74e8-a9ff-c8aa1dd6bc5e",["D",1772344422078],"directory",[169],"008bea9e-1533-11f1-aa5e-42dde27851f2","frontend","019ca7f5-af18-74e8-a9ff-be3510c4ec20",["D",1772344422078],[175],"008ba750-1533-11f1-aa5e-42dde27851f2","backend","019ca7f5-af18-74e8-a9ff-9a8a979962bf",["D",1772344422078],[180],"pulls","branches",2,"forks","envVars",{"_192":194,"_195":63},"connections",{"_192":63,"_193":63},"count","unfilledCount",5,"emptyCount",{"_43":179,"_32":180,"_30":181,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":361,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_220":362,"_27":363},{"_43":357,"_32":343,"_30":338,"_152":181,"_41":42,"_40":164,"_154":25,"_38":358,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_220":359,"_27":360},{"_43":351,"_32":162,"_30":352,"_152":338,"_41":42,"_40":164,"_154":25,"_38":353,"_13":63,"_34":20,"_36":354,"_24":49,"_159":-5,"_220":355,"_27":356},{"_43":344,"_32":345,"_30":346,"_152":338,"_41":42,"_40":164,"_154":25,"_38":347,"_13":63,"_34":35,"_36":348,"_24":49,"_159":-5,"_220":349,"_27":350},{"_43":335,"_32":336,"_30":337,"_152":338,"_41":42,"_40":164,"_154":25,"_38":339,"_13":63,"_34":35,"_36":340,"_24":49,"_159":-5,"_220":341,"_27":342},{"_43":329,"_32":162,"_30":330,"_152":181,"_41":42,"_40":164,"_154":25,"_38":331,"_13":63,"_34":20,"_36":332,"_24":49,"_159":-5,"_220":333,"_27":334},{"_43":321,"_32":322,"_30":323,"_152":181,"_41":42,"_40":324,"_154":49,"_38":325,"_13":194,"_34":35,"_36":326,"_24":49,"_159":-5,"_220":327,"_27":328},{"_43":313,"_32":314,"_30":315,"_152":181,"_41":42,"_40":316,"_154":49,"_38":317,"_13":186,"_34":35,"_36":318,"_24":49,"_159":-5,"_220":319,"_27":320},{"_43":174,"_32":175,"_30":176,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":310,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_220":311,"_27":312},{"_43":306,"_32":297,"_30":290,"_152":176,"_41":42,"_40":164,"_154":25,"_38":307,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_220":308,"_27":309},{"_43":298,"_32":299,"_30":300,"_152":290,"_41":42,"_40":301,"_154":49,"_38":302,"_13":194,"_34":35,"_36":303,"_24":49,"_159":-5,"_220":304,"_27":305},{"_43":287,"_32":288,"_30":289,"_152":290,"_41":42,"_40":291,"_154":49,"_38":292,"_13":293,"_34":35,"_36":294,"_24":49,"_159":-5,"_220":295,"_27":296},{"_43":281,"_32":162,"_30":282,"_152":176,"_41":42,"_40":164,"_154":25,"_38":283,"_13":63,"_34":20,"_36":284,"_24":49,"_159":-5,"_220":285,"_27":286},{"_43":274,"_32":275,"_30":276,"_152":176,"_41":42,"_40":164,"_154":25,"_38":277,"_13":63,"_34":20,"_36":278,"_24":49,"_159":-5,"_220":279,"_27":280},{"_43":266,"_32":267,"_30":268,"_152":176,"_41":42,"_40":269,"_154":49,"_38":270,"_13":194,"_34":20,"_36":271,"_24":49,"_159":-5,"_220":272,"_27":273},{"_43":257,"_32":258,"_30":259,"_152":176,"_41":42,"_40":260,"_154":49,"_38":261,"_13":262,"_34":35,"_36":263,"_24":49,"_159":-5,"_220":264,"_27":265},{"_43":250,"_32":251,"_30":252,"_152":176,"_41":42,"_40":164,"_154":49,"_38":253,"_13":63,"_34":20,"_36":254,"_24":49,"_159":-5,"_220":255,"_27":256},{"_43":168,"_32":169,"_30":170,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":247,"_13":63,"_34":172,"_36":-5,"_24":49,"_159":-5,"_220":248,"_27":249},{"_43":241,"_32":162,"_30":242,"_152":170,"_41":42,"_40":164,"_154":25,"_38":243,"_13":63,"_34":20,"_36":244,"_24":49,"_159":-5,"_220":245,"_27":246},{"_43":233,"_32":234,"_30":235,"_152":170,"_41":42,"_40":236,"_154":49,"_38":237,"_13":156,"_34":35,"_36":238,"_24":49,"_159":-5,"_220":239,"_27":240},{"_43":226,"_32":227,"_30":228,"_152":170,"_41":42,"_40":164,"_154":25,"_38":229,"_13":63,"_34":35,"_36":230,"_24":49,"_159":-5,"_220":231,"_27":232},{"_43":161,"_32":162,"_30":163,"_152":-5,"_41":42,"_40":164,"_154":25,"_38":223,"_13":63,"_34":20,"_36":166,"_24":49,"_159":-5,"_220":224,"_27":225},{"_43":150,"_32":151,"_30":58,"_152":-5,"_41":42,"_40":153,"_154":49,"_38":219,"_13":156,"_34":157,"_36":158,"_24":49,"_159":-5,"_220":221,"_27":222},["D",1772350913579],"children",[],[151],["D",1772344422078],[],[162],"008bf30e-1533-11f1-aa5e-42dde27851f2","utils.ts","019ca7f5-af18-74e8-a9ff-c56824fa09b5",["D",1772344422078],"export interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[169,227],"50758010-153d-11f1-8e12-42dde27851f2","types.ts","46ce0960-153d-11f1-80b9-42dde27851f2",19,["D",1772348851216],"// shared/types.ts — Shared type definitions\n\nexport const USERS = [\"Nathan\", \"Faith\"];\nexport const DEFAULT_TAGS = [\n \"Date Night\",\n \"Solo Watch\",\n \"Background\",\n \"Must See\",\n \"Short & Sweet\",\n];\n\nexport interface CriticScores {\n rt: number | null;\n mc: number | null;\n imdbId: string;\n}\n\nexport interface Title {\n tmdbId: string;\n title: string;\n year: string;\n type: \"movie\" | \"tv\";\n poster: string | null;\n overview: string;\n rating: number;\n runtime: number | null;\n numSeasons: number | null;\n numEpisodes: number | null;\n episodeRuntime: number | null;\n criticScores: CriticScores | null;\n tags: string[];\n addedAt: number;\n notionPageId?: string;\n}\n\nexport interface WatchData {\n titles: Record;\n tags: string[];\n userLists: Record;\n userUnranked: Record;\n watched: Record>;\n scores: Record>;\n showSynopsis: boolean;\n // API keys are NOT stored here — they live in Val Town env vars\n}\n\nexport function blankData(): WatchData {\n return {\n titles: {},\n tags: [...DEFAULT_TAGS],\n userLists: Object.fromEntries(USERS.map((u) => [u, []])),\n userUnranked: Object.fromEntries(USERS.map((u) => [u, []])),\n watched: Object.fromEntries(USERS.map((u) => [u, {}])),\n scores: Object.fromEntries(USERS.map((u) => [u, {}])),\n showSynopsis: false,\n };\n}",[],[169,234],"008bebfc-1533-11f1-aa5e-42dde27851f2","019ca7f5-af18-74e8-a9ff-c19d64fcee7f",["D",1772344422078],"# Shared\n\nIt's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:\n\n![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)\n\nFor example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support \"web-standards\", but there are definitely edge cases to look out for.",[],[169,162],["D",1772344422078],[214,215,216],[169],"008be274-1533-11f1-aa5e-42dde27851f2","style.css","019ca7f5-af18-74e8-a9ff-bb262050bac3",["D",1772344422078],"body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.message-board {\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n}\n\n.message-input {\n display: flex;\n margin-top: 20px;\n}\n\n.message-input input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-right: 10px;\n}\n\n.message-input button {\n padding: 10px 15px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.message-list {\n max-height: 400px;\n overflow-y: auto;\n}\n\n.message-item {\n background-color: #f9f9f9;\n border-radius: 4px;\n padding: 10px;\n margin-bottom: 10px;\n}\n\n.message-item p {\n margin: 0 0 5px 0;\n}\n\n.message-item small {\n color: #888;\n font-size: 0.7em;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n}",[],[175,251],"9a5f0ab6-1542-11f1-9dd4-42dde27851f2","index.tsx","019ca7f5-af18-74e8-a9ff-b42a6cb12730",45,["D",1772351122700],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { type Message } from \"../shared/utils.ts\";\nimport App from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {\n initialMessages?: Message[];\n thisProjectURL?: string;\n };\n }\n}\n\ncreateRoot(root).render();",[],[175,258],"24098300-1542-11f1-8a4d-42dde27851f2","index.html","d560405e-1541-11f1-b852-42dde27851f2",40,["D",1772350924125],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[175,267],"008bcbfe-1533-11f1-aa5e-42dde27851f2","favicon.svg","019ca7f5-af18-74e8-a9ff-ac34c1920ced",["D",1772344422078],"",[],[175,275],"008bb9d4-1533-11f1-aa5e-42dde27851f2","019ca7f5-af18-74e8-a9ff-a8679610273e",["D",1772344422078],"# Frontend\n\nThis template is a classic client-side-only React app.\n\n## `index.html`\n\nThe **entrypoint** for the frontend is\n[`/frontend/index.html`](/frontend/index.html). This is the HTML page that is\nreturned at the root from [`../index.ts`](../index.ts).\n\nThis HTML file imports `/frontend/style.css` from [`/public/style.css`] and\n`/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/`\nis mapped to `/public` by `/backend/index.ts`. This is just a convention. You\ncould import & serve everything out of the same folder name.\n\nThis HTML file has a `

`, which is where we mount the React\napp.\n\nThis HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is\nthe **entrypoint** for all frontend JavaScript, including all the React. It is\nnot a problem that it imports a file with a `.tsx` extension becaues browsers\nignore file extensions. They only pay attention to content-types, which is\ngreat, because all these files will be returned as transpiled JS with the\nappropriate JS content type by\n[std/utils](https://www.val.town/x/std/utils/code) functions.\n\n## [`index.tsx`](./index.tsx)\n\nThis file is the **entrypoint** for frontend JavaScript. It imports the React\napp from `/frontend/components/App.tsx` and mounts it on\n`

`.\n\nIt also looks for _bootstrapped_ JSON data at `window.__INITIAL_DATA`, and\npasses that only to the ``.\n\n## [`favicon.svg`](./favicon.svg)\n\nAs of this writing Val Town only supports text files, which is why the favicon\nis an SVG and not an .ico or any other binary image format. If you need binary\nfile storage, check out [Blob Storage](https://docs.val.town/std/blob/).\n\n## `components/`\n\nThis directory is where the React components are stored. They're pretty standard\nclient-side React components.",[],[175,162],"a9a8511c-1542-11f1-9a56-42dde27851f2","ui.tsx","8ceea0c0-153e-11f1-81c3-42dde27851f2","019ca7f5-af18-74e8-a9ff-a43a26c53e65",46,["D",1772351148343],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nconst USERS = [\"Nathan\", \"Faith\"];\nconst TMDB_IMG = \"https://image.tmdb.org/t/p/w185\";\n\n// ── Styles ──\nexport const C = {\n bg: \"#0f0f0f\",\n surface: \"#1a1a1a\",\n surfaceHover: \"#242424\",\n border: \"#2a2a2a\",\n accent: \"#e50914\",\n accentDim: \"#b0060f\",\n accentSoft: \"rgba(229,9,20,0.12)\",\n text: \"#e5e5e5\",\n textDim: \"#888\",\n textMuted: \"#555\",\n tagBg: \"#262626\",\n tagActive: \"rgba(229,9,20,0.2)\",\n gold: \"#f5c518\",\n green: \"#46d369\",\n greenDim: \"rgba(70,211,105,0.15)\",\n};\n\nexport const baseBtn = {\n border: \"none\",\n borderRadius: 8,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n fontWeight: 600,\n transition: \"all 0.15s ease\",\n};\n\n// ── Icons ──\nexport function Icon({ d, size = 18, stroke = \"currentColor\", fill = \"none\" }) {\n return (\n \n \n \n );\n}\n\nexport const ICO = {\n search: \"M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z\",\n plus: \"M12 5v14M5 12h14\",\n x: \"M18 6L6 18M6 6l12 12\",\n check: \"M20 6L9 17l-5-5\",\n chevDown: \"M6 9l6 6 6-6\",\n chevUp: \"M18 15l-6-6-6 6\",\n tag:\n \"M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82zM7 7h.01\",\n users:\n \"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4-4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\",\n star:\n \"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\",\n list: \"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01\",\n upload: \"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12\",\n settings: \"M12 15a3 3 0 100-6 3 3 0 000 6z\",\n film: \"M2 2h20v20H2zM7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5\",\n tv: \"M2 7h20v13H2zM17 2l-5 5-5-5\",\n trash:\n \"M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2\",\n move: \"M12 2v20M5 9l-3 3 3 3M19 9l3 3-3 3\",\n key:\n \"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\",\n};\n\n// ── Critic score chip (combined RT + MC) ──\nexport function CriticChip({ title }) {\n const rt = title.criticScores?.rt;\n const mc = title.criticScores?.mc;\n if (rt == null && mc == null) return null;\n // Use the average for color, or whichever exists\n const avg = rt != null && mc != null ? (rt + mc) / 2 : (rt ?? mc);\n const color = avg >= 75 ? \"#46d369\" : avg >= 50 ? \"#f5c518\" : \"#e50914\";\n const bg = avg >= 75\n ? \"rgba(70,211,105,0.15)\"\n : avg >= 50\n ? \"rgba(245,197,24,0.15)\"\n : \"rgba(229,9,20,0.12)\";\n const parts = [];\n if (rt != null) parts.push(`🍅${rt}`);\n if (mc != null) parts.push(`MC ${mc}`);\n return (\n \n {parts.join(\" · \")}\n \n );\n}\n\n// ── Runtime / episode info display ──\nexport function RuntimeBadge({ title }) {\n if (title.type === \"movie\" && title.runtime) {\n const h = Math.floor(title.runtime / 60);\n const m = title.runtime % 60;\n return (\n \n {h > 0 ? `${h}h${m > 0 ? `${m}m` : \"\"}` : `${m}m`}\n \n );\n }\n if (title.type === \"tv\") {\n const parts = [];\n if (title.numSeasons) parts.push(`${title.numSeasons}S`);\n if (title.numEpisodes) parts.push(`${title.numEpisodes}ep`);\n if (title.episodeRuntime) parts.push(`~${title.episodeRuntime}m`);\n if (parts.length === 0) return null;\n return (\n \n {parts.join(\" · \")}\n \n );\n }\n return null;\n}\n\n// ── Pill / Tag chip ──\nexport function TagChip({ label, active, onClick, removable, onRemove }) {\n return (\n \n {label}\n {removable && (\n {\n e.stopPropagation();\n onRemove();\n }}\n style={{ marginLeft: 2, cursor: \"pointer\", opacity: 0.6 }}\n >\n ×\n \n )}\n \n );\n}\n\n// ── Poster placeholder ──\nexport function Poster({ src, type, size = 56 }) {\n const [err, setErr] = useState(false);\n if (src && !err) {\n return (\n setErr(true)}\n style={{\n width: size,\n height: size * 1.5,\n borderRadius: 6,\n objectFit: \"cover\",\n flexShrink: 0,\n }}\n />\n );\n }\n return (\n \n {type === \"tv\" ? \"TV\" : \"🎬\"}\n \n );\n}\n\n// ── Title row in list ──\n// ── Rating component: 0–10 with 0.5 steps ──\nexport function RatingInput({ value, onChange, compact = false }) {\n const [editing, setEditing] = useState(false);\n const [tempVal, setTempVal] = useState(\"\");\n\n if (compact && !editing && value > 0) {\n return (\n {\n setEditing(true);\n setTempVal(String(value));\n }}\n style={{\n color: C.gold,\n fontSize: 12,\n fontWeight: 700,\n cursor: \"pointer\",\n }}\n >\n ★ {value.toFixed(1)}\n \n );\n }\n\n if (editing || (compact && value === 0)) {\n return (\n e.stopPropagation()}\n >\n ★\n 0 ? value.toFixed(1) : \"—\"}\n autoFocus\n onChange={(e) => setTempVal(e.target.value)}\n onBlur={() => {\n const n = parseFloat(tempVal);\n if (!isNaN(n) && n >= 0 && n <= 10) {\n onChange(Math.round(n * 10) / 10);\n }\n setEditing(false);\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") e.target.blur();\n }}\n style={{\n width: 48,\n padding: \"4px 6px\",\n background: C.bg,\n border: `1px solid ${C.border}`,\n borderRadius: 6,\n color: C.text,\n fontSize: 13,\n fontFamily: \"inherit\",\n outline: \"none\",\n textAlign: \"center\",\n }}\n />\n /10\n \n );\n }\n\n // Full rating: slider + display\n return (\n e.stopPropagation()}\n >\n ★\n onChange(parseFloat(e.target.value))}\n style={{\n flex: 1,\n height: 4,\n accentColor: C.gold,\n cursor: \"pointer\",\n background: C.border,\n borderRadius: 2,\n outline: \"none\",\n }}\n />\n {\n setEditing(true);\n setTempVal(value > 0 ? String(value) : \"\");\n }}\n style={{\n color: value > 0 ? C.gold : C.textMuted,\n fontSize: 14,\n fontWeight: 700,\n minWidth: 36,\n textAlign: \"right\",\n cursor: \"pointer\",\n }}\n >\n {value > 0 ? value.toFixed(1) : \"—\"}\n \n \n );\n}\n\nexport function TitleRow({\n title,\n index,\n total,\n onMoveUp,\n onMoveDown,\n onRemove,\n onTagToggle,\n allTags,\n onExpand,\n expanded,\n dragHandleProps,\n onMoveTo,\n watched,\n userScore,\n onToggleWatched,\n onSetScore,\n isRanked,\n onUnrank,\n showSynopsis,\n}) {\n const [moveToVal, setMoveToVal] = useState(\"\");\n return (\n \n \n {/* Drag handle + rank */}\n \n \n \n {index + 1}\n \n \n\n \n \n

\n \n {title.title}\n \n

\n \n \n {title.year}\n {title.year && title.type ? \" · \" : \"\"}\n {title.type === \"tv\"\n ? \"TV\"\n : title.type === \"movie\"\n ? \"Film\"\n : \"\"}\n \n \n {title.rating > 0 && (\n \n ★ {title.rating.toFixed(1)}\n \n )}\n \n {watched && (\n \n ✓ Watched\n \n )}\n {watched && userScore > 0 && (\n \n ★ {userScore.toFixed(1)}\n \n )}\n \n {title.tags?.length > 0 && (\n \n {title.tags.map((t) => (\n \n {t}\n \n ))}\n \n )}\n {showSynopsis && !expanded && title.overview && (\n \n {title.overview}\n

\n )}\n \n\n \n \n \n \n\n {/* Watched items: show score inline without expanding */}\n {watched && !expanded && userScore === 0 && (\n \n Rate:\n \n \n )}\n\n {expanded && (\n \n {title.overview && (\n \n {title.overview}\n

\n )}\n\n {/* Critic scores + runtime */}\n {(title.criticScores?.rt != null || title.criticScores?.mc != null ||\n title.runtime || title.numEpisodes) && (\n \n \n \n \n )}\n\n {/* Watch toggle + score */}\n \n \n {watched ? \"✓ Watched\" : \"Mark watched\"}\n \n

\n \n

\n \n\n {/* Reorder + move to + remove */}\n \n \n ▲\n \n \n ▼\n \n

\n Move to #\n setMoveToVal(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n const target = parseInt(moveToVal);\n if (\n target >= 1 && target <= total && target !== index + 1\n ) {\n onMoveTo(target - 1);\n setMoveToVal(\"\");\n }\n }\n }}\n style={{\n width: 52,\n padding: \"6px 8px\",\n background: C.bg,\n border: `1px solid ${C.border}`,\n borderRadius: 6,\n color: C.text,\n fontSize: 13,\n fontFamily: \"inherit\",\n outline: \"none\",\n textAlign: \"center\",\n }}\n />\n {\n const target = parseInt(moveToVal);\n if (target >= 1 && target <= total && target !== index + 1) {\n onMoveTo(target - 1);\n setMoveToVal(\"\");\n }\n }}\n style={{\n ...baseBtn,\n padding: \"6px 10px\",\n background: C.surfaceHover,\n color: C.text,\n fontSize: 12,\n }}\n >\n Go\n \n

\n {isRanked && onUnrank && (\n \n Unrank\n \n )}\n \n Remove\n \n

\n\n {/* Tags */}\n

\n {allTags.map((tag) => (\n onTagToggle(tag)}\n />\n ))}\n

\n \n )}\n \n );\n}\n\n// ── Touch drag-and-drop hook ──\nconst SCROLL_ZONE = 120;\nconst SCROLL_SPEED_MIN = 60;\nconst SCROLL_SPEED_MAX = 500;\nconst SCROLL_ACCEL_MS = 800; // time to reach max speed\n\nexport function useDragReorder(listRef, items, onReorder) {\n const [renderTick, setRenderTick] = useState(0);\n const rerender = () => setRenderTick((t) => t + 1);\n\n const ref = useRef({\n dragging: false,\n dragIdx: -1,\n hoverIdx: -1,\n startY: 0,\n offsetY: 0,\n scrollStartTop: 0,\n lastClientY: 0,\n scrollInterval: null,\n scrollingSince: 0,\n });\n\n const itemsRef = useRef(items);\n itemsRef.current = items;\n const onReorderRef = useRef(onReorder);\n onReorderRef.current = onReorder;\n\n // Cache rects per render tick to avoid repeated DOM reads\n const cachedRectsRef = useRef({ tick: -1, rects: [] });\n\n const getLiveRects = () => {\n if (cachedRectsRef.current.tick === renderTick) {\n return cachedRectsRef.current.rects;\n }\n const container = listRef.current;\n if (!container) return [];\n const rects = [...container.children].map((c) => c.getBoundingClientRect());\n cachedRectsRef.current = { tick: renderTick, rects };\n return rects;\n };\n\n const calcHoverIdx = () => {\n const r = ref.current;\n const rects = getLiveRects();\n if (!rects.length) return r.dragIdx;\n\n const dragRect = rects[r.dragIdx];\n if (!dragRect) return r.dragIdx;\n\n // Where is the dragged item's center right now (accounting for transform)?\n const dragCenter = dragRect.top + dragRect.height / 2 + r.offsetY;\n\n let best = r.dragIdx, bestDist = Infinity;\n for (let i = 0; i < itemsRef.current.length; i++) {\n if (i === r.dragIdx) continue;\n const rect = rects[i];\n if (!rect) continue;\n const slotCenter = rect.top + rect.height / 2;\n const dist = Math.abs(dragCenter - slotCenter);\n if (dist < bestDist) {\n bestDist = dist;\n best = i;\n }\n }\n return best;\n };\n\n const updateOffset = () => {\n const r = ref.current;\n const scrollDelta = document.documentElement.scrollTop - r.scrollStartTop;\n r.offsetY = r.lastClientY - r.startY + scrollDelta;\n r.hoverIdx = calcHoverIdx();\n rerender();\n };\n\n const startAutoScroll = () => {\n if (ref.current.scrollInterval) return;\n ref.current.scrollInterval = setInterval(() => {\n const r = ref.current;\n if (!r.dragging) return;\n const y = r.lastClientY;\n const vh = window.innerHeight;\n let edgeIntensity = 0;\n if (y > vh - SCROLL_ZONE) {\n edgeIntensity = 1 - (vh - y) / SCROLL_ZONE;\n } else if (y < SCROLL_ZONE) {\n edgeIntensity = -(1 - y / SCROLL_ZONE);\n }\n if (edgeIntensity !== 0) {\n if (r.scrollingSince === 0) r.scrollingSince = Date.now();\n const elapsed = Date.now() - r.scrollingSince;\n const accelFactor = Math.min(1, elapsed / SCROLL_ACCEL_MS);\n const speed = SCROLL_SPEED_MIN +\n (SCROLL_SPEED_MAX - SCROLL_SPEED_MIN) * accelFactor;\n const amount = Math.ceil(speed * Math.abs(edgeIntensity)) *\n Math.sign(edgeIntensity);\n document.documentElement.scrollTop += amount;\n updateOffset();\n } else {\n r.scrollingSince = 0;\n }\n }, 16);\n };\n\n const stopAutoScroll = () => {\n if (ref.current.scrollInterval) {\n clearInterval(ref.current.scrollInterval);\n ref.current.scrollInterval = null;\n }\n };\n\n const startDrag = (index, clientY) => {\n const r = ref.current;\n r.dragging = true;\n r.dragIdx = index;\n r.hoverIdx = index;\n r.startY = clientY;\n r.lastClientY = clientY;\n r.offsetY = 0;\n r.scrollStartTop = document.documentElement.scrollTop;\n rerender();\n startAutoScroll();\n };\n\n const moveDrag = (clientY) => {\n if (!ref.current.dragging) return;\n ref.current.lastClientY = clientY;\n updateOffset();\n };\n\n const endDrag = () => {\n const r = ref.current;\n if (!r.dragging) return;\n stopAutoScroll();\n const fromIdx = r.dragIdx;\n const toIdx = r.hoverIdx;\n r.dragging = false;\n r.dragIdx = -1;\n r.hoverIdx = -1;\n r.offsetY = 0;\n rerender();\n if (fromIdx !== toIdx && toIdx >= 0) {\n onReorderRef.current(fromIdx, toIdx);\n }\n };\n\n useEffect(() => {\n const onTouchMove = (e) => {\n if (!ref.current.dragging) return;\n e.preventDefault();\n moveDrag(e.touches[0].clientY);\n };\n const onTouchEnd = () => endDrag();\n window.addEventListener(\"touchmove\", onTouchMove, { passive: false });\n window.addEventListener(\"touchend\", onTouchEnd);\n return () => {\n window.removeEventListener(\"touchmove\", onTouchMove);\n window.removeEventListener(\"touchend\", onTouchEnd);\n stopAutoScroll();\n };\n }, []);\n\n const getHandleProps = (index) => ({\n onTouchStart: (e) => {\n e.stopPropagation();\n startDrag(index, e.touches[0].clientY);\n },\n onPointerDown: (e) => {\n if (e.pointerType === \"touch\") return;\n e.stopPropagation();\n startDrag(index, e.clientY);\n const onMove = (ev) => moveDrag(ev.clientY);\n const onUp = () => {\n endDrag();\n window.removeEventListener(\"pointermove\", onMove);\n window.removeEventListener(\"pointerup\", onUp);\n };\n window.addEventListener(\"pointermove\", onMove);\n window.addEventListener(\"pointerup\", onUp);\n },\n });\n\n const getItemStyle = (index) => {\n const r = ref.current;\n if (!r.dragging) return {};\n\n if (index === r.dragIdx) {\n return {\n transform: `translateY(${r.offsetY}px)`,\n zIndex: 10,\n position: \"relative\",\n opacity: 0.92,\n boxShadow: \"0 8px 30px rgba(0,0,0,0.5)\",\n transition: \"box-shadow 0.15s\",\n };\n }\n\n // Shift items between drag and hover positions by the dragged item's height\n const rects = getLiveRects();\n const draggedH = rects[r.dragIdx]?.height || 60;\n const lo = Math.min(r.dragIdx, r.hoverIdx);\n const hi = Math.max(r.dragIdx, r.hoverIdx);\n if (index >= lo && index <= hi) {\n const shift = r.dragIdx < r.hoverIdx ? -draggedH : draggedH;\n return {\n transform: `translateY(${shift}px)`,\n transition: \"transform 0.2s ease\",\n position: \"relative\",\n zIndex: 1,\n };\n }\n return { transition: \"transform 0.2s ease\" };\n };\n\n return { getHandleProps, getItemStyle, isDragging: ref.current.dragging };\n}\n\n// ── Aggregate row ──\nexport function AggRow(\n {\n title,\n scores,\n watchedData,\n scoresData,\n unrankedData,\n expanded,\n onExpand,\n allTags,\n onTagToggle,\n onToggleWatched,\n onSetScore,\n onAddToList,\n onRemoveFromList,\n showSynopsis,\n },\n) {\n const validScores = (scores || []).filter((s) => s != null);\n const avgRank = validScores.length\n ? validScores.reduce((a, b) => a + b, 0) / validScores.length\n : null;\n return (\n \n \n

\n \n

\n \n {title.title}\n

\n {title.tags?.length > 0 && (\n \n {title.tags.map((t) => (\n \n {t}\n \n ))}\n

\n )}\n \n \n {showSynopsis && !expanded && title.overview && (\n \n {title.overview}\n

\n )}\n \n \n {avgRank != null && (\n \n {(avgRank + 1).toFixed(0)}\n \n )}\n \n \n \n \n \n {/* Per-user summary */}\n

\n {USERS.map((u, i) => {\n const rank = scores[i];\n const isUnranked = (unrankedData?.[u] || []).includes(title.tmdbId);\n const watched = watchedData?.[u]?.[title.tmdbId];\n const rating = scoresData?.[u]?.[title.tmdbId] || 0;\n return (\n \n {u}\n {rank != null\n ? (\n \n #{rank + 1}\n \n )\n : isUnranked\n ? (\n \n unranked\n \n )\n : —}\n {watched && (\n ✓\n )}\n {rating > 0 && (\n \n ★{rating.toFixed(1)}\n \n )}\n

\n );\n })}\n \n \n\n {expanded && (\n \n {title.overview && (\n \n {title.overview}\n

\n )}\n\n {/* Per-user edit sections */}\n {USERS.map((u, i) => {\n const rank = scores[i];\n const isUnranked = (unrankedData?.[u] || []).includes(title.tmdbId);\n const onList = rank != null || isUnranked;\n const watched = !!watchedData?.[u]?.[title.tmdbId];\n const rating = scoresData?.[u]?.[title.tmdbId] || 0;\n return (\n \n \n \n {u}\n \n {rank != null\n ? (\n \n Ranked · #{rank + 1}\n \n )\n : isUnranked\n ? (\n \n Unranked\n \n )\n : (\n \n Not on list\n \n )}\n

\n {!onList\n ? (\n onAddToList(u, title.tmdbId)}\n style={{\n ...baseBtn,\n padding: \"4px 10px\",\n background: C.accentSoft,\n color: C.accent,\n fontSize: 11,\n }}\n >\n + Add\n \n )\n : (\n onRemoveFromList(u, title.tmdbId)}\n style={{\n ...baseBtn,\n padding: \"4px 10px\",\n background: \"rgba(229,9,20,0.1)\",\n color: C.accent,\n fontSize: 11,\n }}\n >\n Remove\n \n )}\n

\n \n onToggleWatched(u, title.tmdbId)}\n style={{\n ...baseBtn,\n padding: \"5px 12px\",\n background: watched\n ? \"rgba(70,211,105,0.15)\"\n : C.surfaceHover,\n color: watched ? C.green : C.text,\n fontSize: 11,\n fontWeight: 600,\n }}\n >\n {watched ? \"✓ Watched\" : \"Mark watched\"}\n \n

\n onSetScore(u, title.tmdbId, s)}\n />\n

\n \n \n );\n })}\n\n {/* Tags (shared) */}\n

\n Tags (shared)\n

\n {allTags.map((tag) => (\n onTagToggle(title.tmdbId, tag)}\n />\n ))}\n

\n \n )}\n \n );\n}\n\n// ── Search modal ──\nexport function SearchModal({ onAdd, existingIds, onClose }) {\n const [query, setQuery] = useState(\"\");\n const [results, setResults] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const inputRef = useRef(null);\n const debounceRef = useRef(null);\n\n useEffect(() => {\n inputRef.current?.focus();\n }, []);\n\n const doSearch = useCallback(async (q) => {\n if (!q.trim()) return;\n setLoading(true);\n setError(\"\");\n try {\n const results = await searchTmdb(q);\n setResults(results);\n } catch (e) {\n setError(e.message);\n } finally {\n setLoading(false);\n }\n }, []);\n\n const handleInput = (val) => {\n setQuery(val);\n clearTimeout(debounceRef.current);\n debounceRef.current = setTimeout(() => doSearch(val), 400);\n };\n\n return (\n \n {/* Search bar */}\n \n \n \n handleInput(e.target.value)}\n placeholder=\"Search movies & TV shows…\"\n style={{\n flex: 1,\n background: \"none\",\n border: \"none\",\n outline: \"none\",\n color: C.text,\n fontSize: 15,\n fontFamily: \"inherit\",\n }}\n />\n {query && (\n {\n setQuery(\"\");\n setResults([]);\n }}\n style={{ cursor: \"pointer\", color: C.textMuted }}\n >\n \n \n )}\n \n \n Done\n \n \n\n {/* Results */}\n \n {error && (\n \n {error}\n \n )}\n {loading && (\n \n Searching…\n \n )}\n {!loading && query && results.length === 0 && !error && (\n \n No results\n \n )}\n {results.map((r) => {\n const added = existingIds.has(r.tmdbId);\n return (\n \n \n

\n \n {r.title}\n

\n {r.year}\n {r.type === \"tv\" ? \" · TV\" : \" · Film\"}\n {r.rating > 0 && (\n \n ★ {r.rating.toFixed(1)}\n \n )}\n

\n \n !added && onAdd(r)}\n disabled={added}\n style={{\n ...baseBtn,\n padding: \"8px 14px\",\n fontSize: 13,\n background: added ? C.greenDim : C.accentSoft,\n color: added ? C.green : C.accent,\n }}\n >\n {added ? \"✓ Added\" : \"+ Add\"}\n \n \n );\n })}\n \n \n );\n}\n\n// ── Parse imported text into title names ──\nexport function parseImportText(text) {\n const trimmed = text.trim();\n if (!trimmed) return [];\n\n // Try JSON first\n try {\n const parsed = JSON.parse(trimmed);\n if (Array.isArray(parsed)) {\n // [\"Title1\", \"Title2\"] — array of strings\n if (typeof parsed[0] === \"string\") {\n return parsed.map((s) => s.trim()).filter(Boolean);\n }\n // [{name: \"Title1\", link: \"...\"}, ...] — console script output\n if (parsed[0]?.name) {\n return parsed.map((o) => o.name?.trim()).filter(Boolean);\n }\n // [{title: \"Title1\"}, ...] — some extensions\n if (parsed[0]?.title) {\n return parsed.map((o) => o.title?.trim()).filter(Boolean);\n }\n // [[\"Title1\", \"url\"], ...] — bracket format from some scripts\n if (Array.isArray(parsed[0])) {\n return parsed.map((a) => (typeof a[0] === \"string\" ? a[0].trim() : \"\"))\n .filter(Boolean);\n }\n }\n } catch {\n // Not JSON, continue to plain text\n }\n\n // CSV: if lines contain commas and first line looks like a header, skip it\n const lines = trimmed.split(\"\\n\").map((l) => l.trim()).filter(Boolean);\n if (lines.length > 1 && /title/i.test(lines[0]) && lines[0].includes(\",\")) {\n // CSV with header — take first column, skip header\n return lines.slice(1).map((l) => {\n const match = l.match(/^\"?([^\",]+)\"?/);\n return match ? match[1].trim() : l.split(\",\")[0].trim();\n }).filter(Boolean);\n }\n\n // Plain text: one title per line, strip leading numbers/bullets\n return lines.map((l) =>\n l.replace(/^\\d+[\\.\\)]\\s*/, \"\").replace(/^[-•]\\s*/, \"\").trim()\n ).filter(Boolean);\n}\n\n// ── Bulk import modal ──\nexport function ImportModal({ user, existingTitles, onAddTitle, onClose }) {\n const [text, setText] = useState(\"\");\n const [status, setStatus] = useState(\"\");\n const [importing, setImporting] = useState(false);\n const [showHelp, setShowHelp] = useState(false);\n\n const parsed = useMemo(() => parseImportText(text), [text]);\n\n const doImport = async () => {\n if (!parsed.length) return;\n setImporting(true);\n\n // Also extract any extra metadata from the raw JSON (videoId, etc.)\n let metaMap = {};\n try {\n const raw = JSON.parse(text.trim());\n if (Array.isArray(raw) && raw[0] && typeof raw[0] === \"object\") {\n for (const item of raw) {\n const name = item.name || item.title;\n if (name) metaMap[name.trim().toLowerCase()] = item;\n }\n }\n } catch {}\n\n let added = 0, dupes = 0;\n const existingNames = new Set(\n Object.values(existingTitles).map((t) => t.title.toLowerCase()),\n );\n for (const name of parsed) {\n if (existingNames.has(name.toLowerCase())) {\n dupes++;\n continue;\n }\n const meta = metaMap[name.toLowerCase()] || {};\n const id = meta.videoId\n ? `netflix-${meta.videoId}`\n : `manual-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n onAddTitle({\n tmdbId: id,\n title: name,\n year: \"\",\n type: \"movie\",\n poster: null,\n overview: \"\",\n rating: 0,\n netflixId: meta.videoId || null,\n });\n existingNames.add(name.toLowerCase());\n added++;\n // Yield to UI every 50 items\n if (added % 50 === 0) {\n setStatus(`${added} added so far…`);\n await new Promise((r) => setTimeout(r, 0));\n }\n }\n setStatus(\n `Done! ${added} added${dupes ? `, ${dupes} duplicates skipped` : \"\"}.`,\n );\n setImporting(false);\n };\n\n return (\n \n \n \n \n Import from Netflix\n \n \n Close\n \n \n\n {!showHelp\n ? (\n setShowHelp(true)}\n style={{\n ...baseBtn,\n padding: \"10px 14px\",\n background: C.surface,\n color: C.accent,\n fontSize: 13,\n textAlign: \"left\",\n border: `1px solid ${C.border}`,\n }}\n >\n 📋 How do I export my Netflix list? ▸\n \n )\n : (\n \n \n Option 1: Console script\n \n

\n 1. On desktop, go to{\" \"}\n \n netflix.com/browse/my-list\n \n
\n 2. Scroll all the way to the bottom so every title loads
\n 3. Open browser console:{\" \"}\n Ctrl+Shift+J (Win) /{\" \"}\n Cmd+Option+J (Mac)
\n 4. Paste this and press Enter:\n

\n \n {`copy(JSON.stringify([...document.querySelectorAll(\n '.title-card a[aria-label]'\n)].map(a => ({\n name: a.getAttribute('aria-label'),\n url: location.origin\n + a.getAttribute('href').split('?')[0]\n})), null, 2))`}\n \n

\n 5. It's now on your clipboard — paste it in the box below\n

\n\n \n Option 2: Chrome extension\n \n

\n Install \"\n Netflix Watch List Manager\n \" from the Chrome Web Store → go to My List → click\n Export → open the downloaded JSON file and paste its contents\n below.\n

\n\n \n Option 3: Just type them\n \n

\n Type or paste title names, one per line. No special format\n needed.\n

\n setShowHelp(false)}\n style={{\n ...baseBtn,\n padding: \"6px 0\",\n background: \"none\",\n color: C.accent,\n fontSize: 12,\n marginTop: 8,\n }}\n >\n ▴ Hide instructions\n \n \n )}\n\n

\n setText(e.target.value)}\n placeholder={\"Paste here — accepts:\\n• Plain text (one title per line)\\n• JSON from console script\\n• Chrome extension export\\n• CSV from Watchlist Exporter\"}\n rows={8}\n style={{\n width: \"100%\",\n background: C.surface,\n border: `1px solid ${C.border}`,\n borderRadius: 10,\n color: C.text,\n fontSize: 14,\n padding: 12,\n fontFamily: \"inherit\",\n resize: \"vertical\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n

\n\n {text.trim() && (\n \n {parsed.length\n ? `✓ Detected ${parsed.length} title${\n parsed.length !== 1 ? \"s\" : \"\"\n }`\n : \"⚠ Could not parse any titles\"}\n \n )}\n\n {status && (\n

\n {status}\n

\n )}\n\n \n {importing\n ? \"Importing…\"\n : `Import ${parsed.length} title${\n parsed.length !== 1 ? \"s\" : \"\"\n } to ${user}'s list`}\n \n \n \n );\n}\n\n// ── API key setup ──",[],[175,297,288],"components","88289150-1542-11f1-baff-42dde27851f2","App.tsx","019ca7f5-af18-74e8-a9ff-9cb9f659580d",43,["D",1772351092146],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport {\n AggRow,\n baseBtn,\n C,\n CriticChip,\n ICO,\n Icon,\n ImportModal,\n Poster,\n RatingInput,\n RuntimeBadge,\n SearchModal,\n TagChip,\n TitleRow,\n useDragReorder,\n} from \"./ui.tsx\";\n\n// ── Config ──\nconst USERS = [\"Nathan\", \"Faith\"];\nconst DEFAULT_TAGS = [\n \"Date Night\",\n \"Solo Watch\",\n \"Background\",\n \"Must See\",\n \"Short & Sweet\",\n];\nconst TMDB_IMG = \"https://image.tmdb.org/t/p/w185\";\n\n// ── Persistence (Val Town backend API) ──\nasync function load() {\n try {\n const res = await fetch(\"/api/data\");\n if (!res.ok) return null;\n return await res.json();\n } catch {\n return null;\n }\n}\nasync function save(d) {\n try {\n await fetch(\"/api/data\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(d),\n });\n } catch (e) {\n console.error(\"Save failed\", e);\n }\n}\n\n// ── API Proxy calls (all external APIs go through backend) ──\nasync function fetchTitleMetadata(tmdbId) {\n try {\n const res = await fetch(`/api/tmdb/metadata/${tmdbId}`);\n if (!res.ok) return null;\n return await res.json();\n } catch {\n return null;\n }\n}\n\nasync function searchTmdb(query) {\n try {\n const res = await fetch(`/api/tmdb/search?q=${encodeURIComponent(query)}`);\n if (!res.ok) return [];\n const data = await res.json();\n return data.results || [];\n } catch {\n return [];\n }\n}\n\nasync function backfillAllMetadata() {\n const res = await fetch(\"/api/tmdb/backfill\", { method: \"POST\" });\n if (!res.ok) throw new Error(\"Backfill failed\");\n return await res.json();\n}\n\nasync function notionPush() {\n const res = await fetch(\"/api/notion/push\", { method: \"POST\" });\n if (!res.ok) throw new Error((await res.json()).error || \"Push failed\");\n return await res.json();\n}\n\nasync function notionPull() {\n const res = await fetch(\"/api/notion/pull\", { method: \"POST\" });\n if (!res.ok) throw new Error((await res.json()).error || \"Pull failed\");\n return await res.json();\n}\n\n// ── Data model ──\nconst blank = () => ({\n titles: {},\n tags: [...DEFAULT_TAGS],\n userLists: Object.fromEntries(USERS.map((u) => [u, []])),\n userUnranked: Object.fromEntries(USERS.map((u) => [u, []])),\n watched: Object.fromEntries(USERS.map((u) => [u, {}])),\n scores: Object.fromEntries(USERS.map((u) => [u, {}])),\n showSynopsis: false,\n _config: { hasTmdb: false, hasOmdb: false, hasNotion: false },\n});\n\n// ── Tab bar ──\nfunction TabBar({ tabs, active, onSelect }) {\n return (\n \n {tabs.map((t) => (\n onSelect(t.id)}\n style={{\n ...baseBtn,\n background: \"none\",\n borderRadius: 0,\n padding: \"12px 14px\",\n fontSize: 13,\n fontWeight: 600,\n color: active === t.id ? C.accent : C.textDim,\n borderBottom: `2px solid ${\n active === t.id ? C.accent : \"transparent\"\n }`,\n whiteSpace: \"nowrap\",\n }}\n >\n {t.label}\n \n ))}\n \n );\n}\n\n// ── My List Tab (with drag-and-drop) ──\nfunction MyListTab({\n filteredList,\n myList,\n data,\n activeUser,\n expandedIds,\n toggleExpanded,\n moveInList,\n reorderList,\n removeFromList,\n toggleTag,\n toggleWatched,\n setScore,\n onShowSearch,\n rankTitle,\n unrankTitle,\n update,\n showSynopsis,\n}) {\n const listRef = useRef(null);\n const rankedList = filteredList.ranked || [];\n const unrankedList = filteredList.unranked || [];\n const fullRankedList = (data?.userLists || {})[activeUser] || [];\n const rankedCount = rankedList.length;\n\n // Flat combined list for drag (no sentinel)\n const allItems = [...rankedList, ...unrankedList];\n const allIds = allItems.map((t) => t.tmdbId);\n\n const { getHandleProps, getItemStyle, isDragging } = useDragReorder(\n listRef,\n allIds,\n (fromIdx, toIdx) => {\n const itemId = allIds[fromIdx];\n const fromIsRanked = fromIdx < rankedCount;\n const toIsRanked = toIdx < rankedCount;\n\n if (fromIsRanked && toIsRanked) {\n // Reorder within ranked\n const fromFull = fullRankedList.indexOf(itemId);\n const toId = allIds[toIdx];\n const toFull = fullRankedList.indexOf(toId);\n if (fromFull >= 0 && toFull >= 0 && fromFull !== toFull) {\n reorderList(fromFull, toFull);\n }\n } else if (fromIsRanked && !toIsRanked) {\n unrankTitle(itemId);\n } else if (!fromIsRanked && toIsRanked) {\n // Unranked → Ranked at specific position — do it in one update\n const toId = allIds[toIdx];\n update((d) => {\n const user = activeUser;\n // Remove from unranked\n if (d.userUnranked?.[user]) {\n d.userUnranked[user] = d.userUnranked[user].filter((x) =>\n x !== itemId\n );\n }\n // Insert into ranked at the right position\n if (!d.userLists[user]) d.userLists[user] = [];\n if (!d.userLists[user].includes(itemId)) {\n const targetIdx = d.userLists[user].indexOf(toId);\n if (targetIdx >= 0) {\n d.userLists[user].splice(targetIdx, 0, itemId);\n } else {\n d.userLists[user].push(itemId);\n }\n }\n });\n }\n // Unranked → Unranked: no-op (sorted by rating)\n },\n );\n\n const isEmpty = allItems.length === 0;\n\n return (\n

\n {isEmpty && (\n \n

🍿

\n {myList.length === 0\n ? \"Your queue is empty. Add some titles!\"\n : \"No titles match this filter.\"}\n

\n )}\n\n {allItems.length > 0 && (\n \n Ranked ({rankedCount})\n \n )}\n\n

\n {allItems.map((title, i) => {\n const isRanked = i < rankedCount;\n const watched = !!data?.watched?.[activeUser]?.[title.tmdbId];\n const userScore = data?.scores?.[activeUser]?.[title.tmdbId] || 0;\n\n // Show \"Unranked\" divider before first unranked item\n const showUnrankedHeader = i === rankedCount &&\n unrankedList.length > 0;\n\n return (\n

\n {showUnrankedHeader && (\n \n Unranked ({unrankedList.length})\n

\n )}\n

\n {isRanked\n ? (\n toggleExpanded(title.tmdbId)}\n onMoveUp={() => moveInList(title.tmdbId, -1)}\n onMoveDown={() => moveInList(title.tmdbId, 1)}\n onMoveTo={(toIdx) => {\n const fromIdx = fullRankedList.indexOf(title.tmdbId);\n if (fromIdx >= 0) reorderList(fromIdx, toIdx);\n }}\n onRemove={() => removeFromList(title.tmdbId)}\n allTags={data?.tags || []}\n onTagToggle={(tag) => toggleTag(title.tmdbId, tag)}\n watched={watched}\n userScore={userScore}\n onToggleWatched={() => toggleWatched(title.tmdbId)}\n onSetScore={(s) => setScore(title.tmdbId, s)}\n dragHandleProps={getHandleProps(i)}\n isRanked={true}\n onUnrank={() => unrankTitle(title.tmdbId)}\n showSynopsis={showSynopsis}\n />\n )\n : (\n \n \n \n \n \n \n \n \n \n

\n \n toggleExpanded(title.tmdbId)}\n >\n \n {title.title}\n

\n \n \n {title.year}\n {title.year && title.type ? \" · \" : \"\"}\n {title.type === \"tv\"\n ? \"TV\"\n : title.type === \"movie\"\n ? \"Film\"\n : \"\"}\n \n {watched && (\n \n ✓ Watched\n \n )}\n {userScore > 0 && (\n \n ★ {userScore.toFixed(1)}\n \n )}\n \n \n \n {showSynopsis && !expandedIds.has(title.tmdbId) &&\n title.overview && (\n \n {title.overview}\n

\n )}\n \n toggleExpanded(title.tmdbId)}\n style={{\n color: C.textMuted,\n flexShrink: 0,\n transform: expandedIds.has(title.tmdbId)\n ? \"rotate(180deg)\"\n : \"none\",\n transition: \"transform 0.2s\",\n cursor: \"pointer\",\n padding: 4,\n }}\n >\n \n \n \n {expandedIds.has(title.tmdbId) && (\n \n {title.overview && (\n \n {title.overview}\n

\n )}\n \n toggleWatched(title.tmdbId)}\n style={{\n ...baseBtn,\n padding: \"5px 12px\",\n background: watched\n ? \"rgba(70,211,105,0.15)\"\n : C.surfaceHover,\n color: watched ? C.green : C.text,\n fontSize: 11,\n fontWeight: 600,\n }}\n >\n {watched ? \"✓ Watched\" : \"Mark watched\"}\n \n

\n setScore(title.tmdbId, s)}\n />\n

\n \n \n rankTitle(title.tmdbId)}\n style={{\n ...baseBtn,\n padding: \"6px 12px\",\n background: C.surfaceHover,\n color: C.text,\n fontSize: 11,\n }}\n >\n ↑ Rank this\n \n

\n removeFromList(title.tmdbId)}\n style={{\n ...baseBtn,\n padding: \"6px 12px\",\n background: \"rgba(229,9,20,0.1)\",\n color: C.accent,\n fontSize: 11,\n }}\n >\n Remove\n \n

\n \n {(data?.tags || []).map((tag) => (\n toggleTag(title.tmdbId, tag)}\n />\n ))}\n \n \n )}\n \n )}\n \n \n );\n })}\n \n\n {/* FAB */}\n {data?._config?.hasTmdb && (\n \n +\n \n )}\n \n );\n}\n\n// ── Main App ──\nexport default function WatchQueue() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [activeUser, setActiveUser] = useState(USERS[0]);\n const [tab, setTab] = useState(\"mylist\");\n const [showSearch, setShowSearch] = useState(false);\n const [showImport, setShowImport] = useState(false);\n const [expandedIds, setExpandedIds] = useState(new Set());\n const toggleExpanded = useCallback((id) => {\n setExpandedIds((prev) => {\n const next = new Set(prev);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n return next;\n });\n }, []);\n const [filterTag, setFilterTag] = useState(null);\n const [filterType, setFilterType] = useState(null);\n const [filterWatched, setFilterWatched] = useState(null);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [newTag, setNewTag] = useState(\"\");\n const [showTagMgmt, setShowTagMgmt] = useState(false);\n\n // Load on mount\n useEffect(() => {\n (async () => {\n let saved = await load();\n if (saved) {\n // Migrate: ensure userUnranked exists\n if (!saved.userUnranked) {\n saved.userUnranked = {};\n // Move ALL existing ranked items to unranked (one-time clear)\n USERS.forEach((u) => {\n saved.userUnranked[u] = [...(saved.userLists[u] || [])];\n saved.userLists[u] = [];\n });\n }\n // Ensure watched/scores exist\n if (!saved.watched) saved.watched = {};\n if (!saved.scores) saved.scores = {};\n USERS.forEach((u) => {\n if (!saved.watched[u]) saved.watched[u] = {};\n if (!saved.scores[u]) saved.scores[u] = {};\n if (!saved.userUnranked[u]) saved.userUnranked[u] = [];\n if (!saved.userLists[u]) saved.userLists[u] = [];\n });\n }\n setData(saved || blank());\n setLoading(false);\n })();\n }, []);\n\n // Auto-save\n const saveTimeout = useRef(null);\n useEffect(() => {\n if (!data || loading) return;\n clearTimeout(saveTimeout.current);\n saveTimeout.current = setTimeout(() => save(data), 500);\n }, [data, loading]);\n\n // Helpers\n const update = useCallback((fn) => {\n setData((prev) => {\n const next = JSON.parse(JSON.stringify(prev));\n // Ensure structure\n if (!next.userUnranked) next.userUnranked = {};\n if (!next.watched) next.watched = {};\n if (!next.scores) next.scores = {};\n if (!next.userLists) next.userLists = {};\n if (!next.titles) next.titles = {};\n USERS.forEach((u) => {\n if (!next.userLists[u]) next.userLists[u] = [];\n if (!next.userUnranked[u]) next.userUnranked[u] = [];\n if (!next.watched[u]) next.watched[u] = {};\n if (!next.scores[u]) next.scores[u] = {};\n });\n fn(next);\n return next;\n });\n }, []);\n\n const existingIds = useMemo(() => {\n if (!data) return new Set();\n return new Set(Object.keys(data?.titles || {}));\n }, [data?.titles]);\n\n const myRanked = useMemo(() => {\n if (!data) return [];\n return ((data?.userLists || {})[activeUser] || [])\n .map((id) => (data?.titles || {})[id])\n .filter(Boolean);\n }, [data, activeUser]);\n\n const myUnranked = useMemo(() => {\n if (!data) return [];\n return (data?.userUnranked?.[activeUser] || [])\n .map((id) => (data?.titles || {})[id])\n .filter(Boolean);\n }, [data, activeUser]);\n\n const myList = useMemo(() => [...myRanked, ...myUnranked], [\n myRanked,\n myUnranked,\n ]);\n\n const filteredList = useMemo(() => {\n let ranked = myRanked;\n let unranked = myUnranked;\n const applyFilters = (list) => {\n if (searchQuery) {\n const q = searchQuery.toLowerCase();\n list = list.filter((t) => t.title.toLowerCase().includes(q));\n }\n if (filterTag) list = list.filter((t) => t.tags?.includes(filterTag));\n if (filterType) list = list.filter((t) => t.type === filterType);\n if (filterWatched === true) {\n list = list.filter((t) => (data?.watched?.[activeUser]?.[t.tmdbId]));\n }\n if (filterWatched === false) {\n list = list.filter((t) => !(data?.watched?.[activeUser]?.[t.tmdbId]));\n }\n return list;\n };\n ranked = applyFilters(ranked);\n unranked = applyFilters(unranked);\n // Sort unranked: unwatched first, then watched at bottom; within each group by rating desc\n const scores = data?.scores?.[activeUser] || {};\n const watched = data?.watched?.[activeUser] || {};\n unranked = [...unranked].sort((a, b) => {\n const aW = watched[a.tmdbId] ? 1 : 0;\n const bW = watched[b.tmdbId] ? 1 : 0;\n if (aW !== bW) return aW - bW;\n return (scores[b.tmdbId] || 0) - (scores[a.tmdbId] || 0);\n });\n return { ranked, unranked };\n }, [\n myRanked,\n myUnranked,\n filterTag,\n filterType,\n filterWatched,\n data,\n activeUser,\n searchQuery,\n ]);\n\n const aggregateList = useMemo(() => {\n if (!data) return [];\n const allIds = new Set();\n USERS.forEach((u) => {\n ((data?.userLists || {})[u] || []).forEach((id) => allIds.add(id));\n (data?.userUnranked?.[u] || []).forEach((id) => allIds.add(id));\n });\n\n return [...allIds]\n .map((id) => {\n const title = (data?.titles || {})[id];\n if (!title) return null;\n const scores = USERS.map((u) => {\n const idx = ((data?.userLists || {})[u] || []).indexOf(id);\n return idx >= 0 ? idx : null;\n });\n const onList = USERS.map((u) =>\n ((data?.userLists || {})[u] || []).includes(id) ||\n (data?.userUnranked?.[u] || []).includes(id)\n );\n const onBothLists = onList.every(Boolean);\n const validScores = (scores || []).filter((s) => s != null);\n const avg = validScores.length\n ? validScores.reduce((a, b) => a + b, 0) / validScores.length\n : 999;\n return { title, scores, avg, onBothLists };\n })\n .filter(Boolean)\n .sort((a, b) => {\n if (a.onBothLists && !b.onBothLists) return -1;\n if (!a.onBothLists && b.onBothLists) return 1;\n return a.avg - b.avg;\n });\n }, [data]);\n\n const filteredAggregate = useMemo(() => {\n let list = aggregateList;\n if (searchQuery) {\n const q = searchQuery.toLowerCase();\n list = list.filter((x) => x.title.title.toLowerCase().includes(q));\n }\n if (filterTag) list = list.filter((x) => x.title.tags?.includes(filterTag));\n if (filterType) list = list.filter((x) => x.title.type === filterType);\n return list;\n }, [aggregateList, filterTag, filterType, searchQuery]);\n\n // Actions\n const addTitle = useCallback((result) => {\n update((d) => {\n const t = { ...result, tags: [], addedAt: Date.now() };\n d.titles[t.tmdbId] = t;\n if (!d.userUnranked) d.userUnranked = {};\n if (!d.userUnranked[activeUser]) d.userUnranked[activeUser] = [];\n const inRanked = (d.userLists[activeUser] || []).includes(t.tmdbId);\n const inUnranked = d.userUnranked[activeUser].includes(t.tmdbId);\n if (!inRanked && !inUnranked) d.userUnranked[activeUser].push(t.tmdbId);\n });\n // Background fetch metadata (critic scores + runtime)\n if (\n data?._config?.hasTmdb && result.tmdbId &&\n !result.tmdbId.startsWith(\"manual-\")\n ) {\n fetchTitleMetadata(result.tmdbId).then((meta) => {\n if (meta) {\n update((d) => {\n const t = d.titles[result.tmdbId];\n if (!t) return;\n if (meta.criticScores) t.criticScores = meta.criticScores;\n if (meta.runtime) t.runtime = meta.runtime;\n if (meta.numEpisodes) t.numEpisodes = meta.numEpisodes;\n if (meta.numSeasons) t.numSeasons = meta.numSeasons;\n if (meta.episodeRuntime) t.episodeRuntime = meta.episodeRuntime;\n });\n }\n });\n }\n }, [update, activeUser, data?._config?.hasTmdb]);\n\n const addTitleToLibraryOnly = useCallback((result) => {\n update((d) => {\n if (!d.titles[result.tmdbId]) {\n d.titles[result.tmdbId] = { ...result, tags: [], addedAt: Date.now() };\n }\n });\n }, [update]);\n\n // Fetch metadata for a single title and store\n const fetchAndStoreMetadata = useCallback(async (tmdbId) => {\n if (!data?._config?.hasTmdb || !tmdbId) return;\n const meta = await fetchTitleMetadata(tmdbId);\n if (meta) {\n update((d) => {\n const t = d.titles[tmdbId];\n if (!t) return;\n if (meta.criticScores) t.criticScores = meta.criticScores;\n if (meta.runtime) t.runtime = meta.runtime;\n if (meta.numEpisodes) t.numEpisodes = meta.numEpisodes;\n if (meta.numSeasons) t.numSeasons = meta.numSeasons;\n if (meta.episodeRuntime) t.episodeRuntime = meta.episodeRuntime;\n });\n }\n }, [data?._config?.hasTmdb, update]);\n\n // Backfill metadata via backend (handles all API calls server-side)\n const [backfillStatus, setBackfillStatus] = useState(null);\n const backfillMetadata = useCallback(async () => {\n if (!data?._config?.hasTmdb) return;\n setBackfillStatus(\"Fetching…\");\n try {\n const result = await backfillAllMetadata();\n setBackfillStatus(\n `Done! Updated ${result.updated}/${result.total} titles.`,\n );\n // Reload data from backend to get updated titles\n const fresh = await load();\n if (fresh) setData(fresh);\n } catch (e) {\n setBackfillStatus(`Error: ${e.message}`);\n }\n }, [data?._config?.hasTmdb]);\n\n // ── Notion Sync ──\n const [notionSyncStatus, setNotionSyncStatus] = useState(null);\n const hasNotion = !!data?._config?.hasNotion;\n\n const pushNotionHandler = useCallback(async () => {\n if (!hasNotion) return;\n setNotionSyncStatus(\"Pushing…\");\n try {\n const result = await notionPush();\n setNotionSyncStatus(\n `Pushed! ${result.created} created, ${result.updated} updated.`,\n );\n } catch (e) {\n setNotionSyncStatus(`Error: ${e.message}`);\n }\n }, [hasNotion]);\n\n const pullNotionHandler = useCallback(async () => {\n if (!hasNotion) return;\n setNotionSyncStatus(\"Pulling…\");\n try {\n const result = await notionPull();\n setNotionSyncStatus(`Pulled ${result.pulled} titles from Notion.`);\n // Reload data from backend\n const fresh = await load();\n if (fresh) setData(fresh);\n } catch (e) {\n setNotionSyncStatus(`Error: ${e.message}`);\n }\n }, [hasNotion]);\n\n const removeFromList = useCallback((id) => {\n update((d) => {\n d.userLists[activeUser] = (d.userLists[activeUser] || []).filter((x) =>\n x !== id\n );\n if (d.userUnranked?.[activeUser]) {\n d.userUnranked[activeUser] = d.userUnranked[activeUser].filter((x) =>\n x !== id\n );\n }\n });\n }, [update, activeUser]);\n\n const moveInList = useCallback((id, dir) => {\n update((d) => {\n const list = d.userLists[activeUser] || [];\n const idx = list.indexOf(id);\n if (idx < 0) return;\n const newIdx = idx + dir;\n if (newIdx < 0 || newIdx >= list.length) return;\n [list[idx], list[newIdx]] = [list[newIdx], list[idx]];\n });\n }, [update, activeUser]);\n\n const reorderList = useCallback((fromIdx, toIdx) => {\n update((d) => {\n const list = d.userLists[activeUser] || [];\n const [item] = list.splice(fromIdx, 1);\n list.splice(toIdx, 0, item);\n });\n }, [update, activeUser]);\n\n const rankTitle = useCallback((id) => {\n update((d) => {\n // Move from unranked to end of ranked\n if (d.userUnranked?.[activeUser]) {\n d.userUnranked[activeUser] = d.userUnranked[activeUser].filter((x) =>\n x !== id\n );\n }\n if (!d.userLists[activeUser]) d.userLists[activeUser] = [];\n if (!d.userLists[activeUser].includes(id)) {\n d.userLists[activeUser].push(id);\n }\n });\n }, [update, activeUser]);\n\n const unrankTitle = useCallback((id) => {\n update((d) => {\n // Move from ranked to unranked\n d.userLists[activeUser] = (d.userLists[activeUser] || []).filter((x) =>\n x !== id\n );\n if (!d.userUnranked[activeUser]) d.userUnranked[activeUser] = [];\n if (!d.userUnranked[activeUser].includes(id)) {\n d.userUnranked[activeUser].push(id);\n }\n });\n }, [update, activeUser]);\n\n const listRef = useRef(null);\n\n const toggleTag = useCallback((titleId, tag) => {\n update((d) => {\n const t = d.titles[titleId];\n if (!t) return;\n if (!t.tags) t.tags = [];\n const idx = t.tags.indexOf(tag);\n if (idx >= 0) t.tags.splice(idx, 1);\n else t.tags.push(tag);\n });\n }, [update]);\n\n const toggleWatched = useCallback((titleId) => {\n update((d) => {\n if (!d.watched) d.watched = {};\n if (!d.watched[activeUser]) d.watched[activeUser] = {};\n const nowWatched = !d.watched[activeUser][titleId];\n d.watched[activeUser][titleId] = nowWatched;\n if (nowWatched) {\n // Move from ranked to unranked\n const rankedIdx = (d.userLists[activeUser] || []).indexOf(titleId);\n if (rankedIdx >= 0) {\n d.userLists[activeUser].splice(rankedIdx, 1);\n if (!d.userUnranked[activeUser]) d.userUnranked[activeUser] = [];\n if (!d.userUnranked[activeUser].includes(titleId)) {\n d.userUnranked[activeUser].push(titleId);\n }\n }\n }\n });\n }, [update, activeUser]);\n\n const toggleWatchedForUser = useCallback((user, titleId) => {\n update((d) => {\n if (!d.watched) d.watched = {};\n if (!d.watched[user]) d.watched[user] = {};\n const nowWatched = !d.watched[user][titleId];\n d.watched[user][titleId] = nowWatched;\n if (nowWatched) {\n const rankedIdx = (d.userLists[user] || []).indexOf(titleId);\n if (rankedIdx >= 0) {\n d.userLists[user].splice(rankedIdx, 1);\n if (!d.userUnranked[user]) d.userUnranked[user] = [];\n if (!d.userUnranked[user].includes(titleId)) {\n d.userUnranked[user].push(titleId);\n }\n }\n }\n });\n }, [update]);\n\n const setScore = useCallback((titleId, score) => {\n update((d) => {\n if (!d.scores) d.scores = {};\n if (!d.scores[activeUser]) d.scores[activeUser] = {};\n d.scores[activeUser][titleId] = score;\n });\n }, [update, activeUser]);\n\n const setScoreForUser = useCallback((user, titleId, score) => {\n update((d) => {\n if (!d.scores) d.scores = {};\n if (!d.scores[user]) d.scores[user] = {};\n d.scores[user][titleId] = score;\n });\n }, [update]);\n\n const addToListForUser = useCallback((user, id) => {\n update((d) => {\n if (!d.userUnranked[user]) d.userUnranked[user] = [];\n const inRanked = (d.userLists[user] || []).includes(id);\n const inUnranked = d.userUnranked[user].includes(id);\n if (!inRanked && !inUnranked) d.userUnranked[user].push(id);\n });\n }, [update]);\n\n const removeFromListForUser = useCallback((user, id) => {\n update((d) => {\n d.userLists[user] = (d.userLists[user] || []).filter((x) => x !== id);\n if (d.userUnranked?.[user]) {\n d.userUnranked[user] = d.userUnranked[user].filter((x) => x !== id);\n }\n });\n }, [update]);\n\n const addToMyList = useCallback((id) => {\n update((d) => {\n if (!d.userUnranked[activeUser]) d.userUnranked[activeUser] = [];\n const inRanked = (d.userLists[activeUser] || []).includes(id);\n const inUnranked = d.userUnranked[activeUser].includes(id);\n if (!inRanked && !inUnranked) d.userUnranked[activeUser].push(id);\n });\n }, [update, activeUser]);\n\n // Library = all titles not on current user's list\n const libraryTitles = useMemo(() => {\n if (!data) return [];\n const myIds = new Set((data?.userLists || {})[activeUser] || []);\n return Object.values(data?.titles || {}).filter((t) =>\n !myIds.has(t.tmdbId)\n );\n }, [data, activeUser]);\n\n if (loading) {\n return (\n \n Loading…\n \n );\n }\n\n const tabs = [\n { id: \"mylist\", label: `${activeUser}'s List` },\n { id: \"together\", label: \"Together\" },\n { id: \"library\", label: \"All Titles\" },\n { id: \"settings\", label: \"⚙\" },\n ];\n\n return (\n \n \n\n {/* Header */}\n \n

\n \n Watch\n Queue\n \n

\n {\n setActiveUser(e.target.value);\n setExpandedIds(new Set());\n setFilterTag(null);\n }}\n style={{\n background: C.surface,\n border: `1px solid ${C.border}`,\n borderRadius: 8,\n color: C.text,\n fontSize: 14,\n fontWeight: 600,\n padding: \"6px 12px\",\n fontFamily: \"inherit\",\n outline: \"none\",\n cursor: \"pointer\",\n appearance: \"none\",\n WebkitAppearance: \"none\",\n backgroundImage:\n `url(\"data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E\")`,\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"right 10px center\",\n paddingRight: 28,\n }}\n >\n {USERS.map((u) => )}\n \n \n\n {/* Tabs */}\n {\n setTab(t);\n setFilterTag(null);\n setFilterType(null);\n setFilterWatched(null);\n setSearchQuery(\"\");\n setExpandedIds(new Set());\n }}\n />\n\n {/* Filter bar */}\n {(tab === \"mylist\" || tab === \"together\") && (\n \n {\n setFilterTag(null);\n setFilterType(null);\n setFilterWatched(null);\n }}\n />\n \n setFilterWatched(filterWatched === false ? null : false)}\n />\n \n setFilterWatched(filterWatched === true ? null : true)}\n />\n \n \n setFilterType(filterType === \"movie\" ? null : \"movie\")}\n />\n setFilterType(filterType === \"tv\" ? null : \"tv\")}\n />\n \n {(data?.tags || []).map((t) => (\n setFilterTag(filterTag === t ? null : t)}\n />\n ))}\n \n )}\n\n {/* Search bar */}\n {(tab === \"mylist\" || tab === \"together\" || tab === \"library\") && (\n

\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search titles…\"\n style={{\n width: \"100%\",\n boxSizing: \"border-box\",\n padding: \"8px 32px 8px 12px\",\n background: C.surface,\n border: `1px solid ${C.border}`,\n borderRadius: 8,\n color: C.text,\n fontSize: 13,\n fontFamily: \"inherit\",\n outline: \"none\",\n }}\n />\n {searchQuery && (\n setSearchQuery(\"\")}\n style={{\n position: \"absolute\",\n right: 8,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n color: C.textMuted,\n cursor: \"pointer\",\n fontSize: 16,\n lineHeight: 1,\n padding: 4,\n }}\n >\n ✕\n \n )}\n

\n )}\n {tab === \"mylist\" && (\n setShowSearch(true)}\n rankTitle={rankTitle}\n unrankTitle={unrankTitle}\n update={update}\n showSynopsis={!!data?.showSynopsis}\n />\n )}\n\n {/* ── TOGETHER ── */}\n {tab === \"together\" && (\n

\n {filteredAggregate.length === 0 && (\n \n No titles yet. Both users need to add titles to their lists.\n

\n )}\n {filteredAggregate.filter((x) => x.onBothLists).length > 0 && (\n \n On both lists — avg rank\n \n )}\n {filteredAggregate.filter((x) => x.onBothLists).map((\n { title, scores, avg },\n ) => (\n toggleExpanded(title.tmdbId)}\n allTags={data?.tags || []}\n onTagToggle={(id, tag) => toggleTag(id, tag)}\n onToggleWatched={(user, id) => toggleWatchedForUser(user, id)}\n onSetScore={(user, id, s) => setScoreForUser(user, id, s)}\n onAddToList={(user, id) => addToListForUser(user, id)}\n onRemoveFromList={(user, id) => removeFromListForUser(user, id)}\n showSynopsis={!!data?.showSynopsis}\n />\n ))}\n {filteredAggregate.filter((x) => !x.onBothLists).length > 0 && (\n \n On one list only\n \n )}\n {filteredAggregate.filter((x) => !x.onBothLists).map((\n { title, scores },\n ) => (\n toggleExpanded(title.tmdbId)}\n allTags={data?.tags || []}\n onTagToggle={(id, tag) => toggleTag(id, tag)}\n onToggleWatched={(user, id) => toggleWatchedForUser(user, id)}\n onSetScore={(user, id, s) => setScoreForUser(user, id, s)}\n onAddToList={(user, id) => addToListForUser(user, id)}\n onRemoveFromList={(user, id) => removeFromListForUser(user, id)}\n showSynopsis={!!data?.showSynopsis}\n />\n ))}\n \n )}\n\n {/* ── LIBRARY ── */}\n {tab === \"library\" && (\n

\n \n All titles in the library. Tap \"+\" to add to {activeUser}'s list.\n

\n {Object.values(data?.titles || {}).length === 0 && (\n \n No titles yet. Use search or import to add some.\n

\n )}\n {Object.values(data?.titles || {})\n .filter((title) =>\n !searchQuery ||\n title.title.toLowerCase().includes(searchQuery.toLowerCase())\n )\n .map((title) => {\n const onMyList =\n ((data?.userLists || {})[activeUser] || []).includes(\n title.tmdbId,\n ) ||\n (data?.userUnranked?.[activeUser] || []).includes(title.tmdbId);\n return (\n \n \n

\n \n {title.title}\n

\n {title.year} · {title.type === \"tv\" ? \"TV\" : \"Film\"}\n {USERS.filter((u) =>\n ((data?.userLists || {})[u] || []).includes(\n title.tmdbId,\n ) ||\n (data?.userUnranked?.[u] || []).includes(title.tmdbId)\n ).map((u) => (\n \n ✓{u}\n \n ))}\n

\n \n {!onMyList\n ? (\n addToMyList(title.tmdbId)}\n style={{\n ...baseBtn,\n padding: \"6px 12px\",\n background: C.accentSoft,\n color: C.accent,\n fontSize: 12,\n }}\n >\n + Add\n \n )\n : (\n \n On list\n \n )}\n \n );\n })}\n\n {data?._config?.hasTmdb && (\n

\n setShowSearch(true)}\n style={{\n ...baseBtn,\n flex: 1,\n padding: \"12px 0\",\n background: C.surface,\n color: C.text,\n fontSize: 14,\n border: `1px solid ${C.border}`,\n }}\n >\n 🔍 Search TMDB\n \n setShowImport(true)}\n style={{\n ...baseBtn,\n flex: 1,\n padding: \"12px 0\",\n background: C.surface,\n color: C.text,\n fontSize: 14,\n border: `1px solid ${C.border}`,\n }}\n >\n 📋 Import from Netflix\n \n

\n )}\n {!data?._config?.hasTmdb && (\n

\n setShowImport(true)}\n style={{\n ...baseBtn,\n width: \"100%\",\n padding: \"12px 0\",\n background: C.surface,\n color: C.text,\n fontSize: 14,\n border: `1px solid ${C.border}`,\n }}\n >\n 📋 Import from Netflix\n \n

\n )}\n \n )}\n\n {/* ── SETTINGS ── */}\n {tab === \"settings\" && (\n

\n {/* API Status */}\n

\n \n \n API Configuration\n \n \n API keys are set as environment variables in your Val Town\n settings.\n

\n \n \n TMDB — {data?._config?.hasTmdb\n ? \"Connected\"\n : \"Set TMDB_API_KEY env var\"}\n \n

\n \n \n OMDB — {data?._config?.hasOmdb\n ? \"Connected\"\n : \"Set OMDB_API_KEY env var (optional)\"}\n \n

\n \n \n Notion — {data?._config?.hasNotion\n ? \"Connected\"\n : \"Set NOTION_TOKEN & NOTION_DB_ID (optional)\"}\n \n

\n {data?._config?.hasTmdb && (\n

\n \n {backfillStatus?.includes(\"…\")\n ? backfillStatus\n : \"Fetch Metadata for All Titles\"}\n \n {backfillStatus && !backfillStatus.includes(\"…\") && (\n \n {backfillStatus}\n

\n )}\n

\n \n\n {/* Display settings */}\n

\n \n \n Display\n \n \n \n update((d) => {\n d.showSynopsis = !d.showSynopsis;\n })}\n style={{\n width: 40,\n height: 22,\n borderRadius: 11,\n position: \"relative\",\n background: data?.showSynopsis ? C.green : C.surfaceHover,\n transition: \"background 0.2s\",\n flexShrink: 0,\n cursor: \"pointer\",\n }}\n >\n \n

\n \n Show synopses on collapsed cards\n \n \n \n \n\n {/* Notion Sync */}\n {hasNotion && (\n

\n \n \n 📓\n \n Notion Sync\n \n

\n \n {notionSyncStatus?.startsWith(\"Pushing\")\n ? notionSyncStatus\n : \"Push → Notion\"}\n \n \n {notionSyncStatus?.startsWith(\"Pulling\")\n ? notionSyncStatus\n : \"Pull ← Notion\"}\n \n

\n {notionSyncStatus && !notionSyncStatus.includes(\"…\") && (\n

\n {notionSyncStatus}\n

\n )}\n \n \n )}\n\n {/* Tag management */}\n

\n \n \n \n \n Manage Tags\n \n

\n \n {(data?.tags || []).map((t) => (\n \n update((d) => {\n d.tags = d.tags.filter((x) => x !== t);\n })}\n />\n ))}\n \n

\n setNewTag(e.target.value)}\n placeholder=\"New tag…\"\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && newTag.trim()) {\n update((d) => {\n if (!d.tags.includes(newTag.trim())) {\n d.tags.push(newTag.trim());\n }\n });\n setNewTag(\"\");\n }\n }}\n style={{\n flex: 1,\n background: C.bg,\n border: `1px solid ${C.border}`,\n borderRadius: 8,\n color: C.text,\n fontSize: 14,\n padding: \"8px 12px\",\n fontFamily: \"inherit\",\n outline: \"none\",\n }}\n />\n {\n if (newTag.trim()) {\n update((d) => {\n if (!d.tags.includes(newTag.trim())) {\n d.tags.push(newTag.trim());\n }\n });\n setNewTag(\"\");\n }\n }}\n style={{\n ...baseBtn,\n padding: \"8px 16px\",\n background: C.accentSoft,\n color: C.accent,\n fontSize: 13,\n }}\n >\n Add\n \n

\n \n \n\n {/* Data management */}\n

\n \n \n Data\n \n

\n {Object.keys(data?.titles || {}).length} titles ·{\" \"}\n {USERS.map((u) =>\n `${u}: ${((data?.userLists || {})[u] || []).length}`\n ).join(\" · \")}\n

\n {\n const json = JSON.stringify(data, null, 2);\n const blob = new Blob([json], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"watchqueue-backup.json\";\n a.click();\n URL.revokeObjectURL(url);\n }}\n style={{\n ...baseBtn,\n flex: 1,\n padding: \"10px 0\",\n background: C.surfaceHover,\n color: C.text,\n fontSize: 13,\n }}\n >\n Export JSON\n \n {\n if (confirm(\"Reset all data? This cannot be undone.\")) {\n setData(blank());\n }\n }}\n style={{\n ...baseBtn,\n flex: 1,\n padding: \"10px 0\",\n background: \"rgba(229,9,20,0.1)\",\n color: C.accent,\n fontSize: 13,\n }}\n >\n Reset All\n \n

\n \n\n {/* User names note */}\n

\n Users are currently hardcoded as{\" \"}\n {USERS.join(\" & \")}. Edit the USERS array in source to change.\n

\n \n )}\n\n {/* Modals */}\n {showSearch && (\n addTitle(r)}\n onClose={() => setShowSearch(false)}\n />\n )}\n {showImport && (\n {\n update((d) => {\n if (!d.titles[r.tmdbId]) {\n d.titles[r.tmdbId] = { ...r, tags: [], addedAt: Date.now() };\n }\n if (!d.userUnranked[activeUser]) d.userUnranked[activeUser] = [];\n const inRanked = (d.userLists[activeUser] || []).includes(\n r.tmdbId,\n );\n const inUnranked = d.userUnranked[activeUser].includes(r.tmdbId);\n if (!inRanked && !inUnranked) {\n d.userUnranked[activeUser].push(r.tmdbId);\n }\n });\n }}\n onClose={() => setShowImport(false)}\n />\n )}\n \n );\n}",[],[175,297,299],"008bb86c-1533-11f1-aa5e-42dde27851f2",["D",1772344422078],[206,207],[175,297],["D",1772344422078],[205,208,209,210,211,212],[175],"b64f15a0-153c-11f1-9763-42dde27851f2","notion.ts","ab49a76a-153c-11f1-b136-42dde27851f2",13,["D",1772348592593],"// backend/notion.ts — Notion sync logic\nimport { USERS } from \"../shared/types.ts\";\nimport type { Title, WatchData } from \"../shared/types.ts\";\n\nconst NOTION_API = \"https://api.notion.com/v1\";\nconst NOTION_VERSION = \"2022-06-28\";\n\nasync function notionFetch(\n path: string,\n token: string,\n options: RequestInit = {},\n) {\n const res = await fetch(`${NOTION_API}${path}`, {\n ...options,\n headers: {\n Authorization: `Bearer ${token}`,\n \"Notion-Version\": NOTION_VERSION,\n \"Content-Type\": \"application/json\",\n ...(options.headers as Record || {}),\n },\n });\n if (!res.ok) {\n const err = await res.json().catch(() => ({}));\n throw new Error(err.message || `Notion API ${res.status}`);\n }\n return res.json();\n}\n\nfunction titleToNotionProps(title: Title, data: WatchData) {\n const props: Record = {\n Title: { title: [{ text: { content: title.title || \"\" } }] },\n \"TMDB ID\": { rich_text: [{ text: { content: title.tmdbId || \"\" } }] },\n Type: { select: { name: title.type === \"tv\" ? \"TV\" : \"Movie\" } },\n Year: { rich_text: [{ text: { content: title.year || \"\" } }] },\n \"TMDB Rating\": { number: title.rating || null },\n Runtime: { number: title.runtime || null },\n Seasons: { number: title.numSeasons || null },\n Episodes: { number: title.numEpisodes || null },\n \"Episode Runtime\": { number: title.episodeRuntime || null },\n \"RT Score\": { number: title.criticScores?.rt || null },\n \"MC Score\": { number: title.criticScores?.mc || null },\n \"IMDB ID\": {\n rich_text: [{ text: { content: title.criticScores?.imdbId || \"\" } }],\n },\n };\n if (title.poster) props.Poster = { url: title.poster };\n if (title.overview) {\n props.Overview = {\n rich_text: [{ text: { content: title.overview.slice(0, 2000) } }],\n };\n }\n if (title.tags?.length > 0) {\n props.Tags = { multi_select: title.tags.map((t) => ({ name: t })) };\n }\n for (const u of USERS) {\n const rankedList = data.userLists?.[u] || [];\n const unrankedList = data.userUnranked?.[u] || [];\n const rankIdx = rankedList.indexOf(title.tmdbId);\n const isOnList = rankIdx >= 0 || unrankedList.includes(title.tmdbId);\n props[`${u} Rank`] = { number: rankIdx >= 0 ? rankIdx + 1 : null };\n props[`${u} On List`] = { checkbox: isOnList };\n props[`${u} Watched`] = { checkbox: !!(data.watched?.[u]?.[title.tmdbId]) };\n props[`${u} Score`] = { number: data.scores?.[u]?.[title.tmdbId] || null };\n }\n return props;\n}\n\nfunction notionPageToTitle(page: any) {\n const p = page.properties;\n const getText = (prop: any) =>\n prop?.rich_text?.[0]?.text?.content || prop?.title?.[0]?.text?.content ||\n \"\";\n const getNum = (prop: any) => prop?.number ?? null;\n const getBool = (prop: any) => prop?.checkbox ?? false;\n\n const tmdbId = getText(p[\"TMDB ID\"]);\n if (!tmdbId) return null;\n\n const title: any = {\n tmdbId,\n title: getText(p.Title),\n type: p.Type?.select?.name === \"TV\" ? \"tv\" : \"movie\",\n year: getText(p.Year),\n overview: getText(p.Overview),\n poster: p.Poster?.url || null,\n rating: getNum(p[\"TMDB Rating\"]) || 0,\n runtime: getNum(p.Runtime),\n numSeasons: getNum(p.Seasons),\n numEpisodes: getNum(p.Episodes),\n episodeRuntime: getNum(p[\"Episode Runtime\"]),\n tags: (p.Tags?.multi_select || []).map((t: any) => t.name),\n notionPageId: page.id,\n addedAt: new Date(page.created_time).getTime(),\n };\n\n const imdbId = getText(p[\"IMDB ID\"]);\n const rt = getNum(p[\"RT Score\"]);\n const mc = getNum(p[\"MC Score\"]);\n if (imdbId || rt != null || mc != null) {\n title.criticScores = { rt, mc, imdbId };\n }\n\n const userData: Record = {};\n for (const u of USERS) {\n userData[u] = {\n rank: getNum(p[`${u} Rank`]),\n onList: getBool(p[`${u} On List`]),\n watched: getBool(p[`${u} Watched`]),\n score: getNum(p[`${u} Score`]),\n };\n }\n return { title, userData };\n}\n\nexport async function pushToNotion(\n data: WatchData,\n token: string,\n dbId: string,\n) {\n const titles = Object.values(data.titles || {});\n if (titles.length === 0) return { created: 0, updated: 0 };\n\n // Index existing pages by TMDB ID\n const existingMap: Record = {};\n let hasMore = true;\n let startCursor: string | undefined;\n while (hasMore) {\n const query: any = await notionFetch(`/databases/${dbId}/query`, token, {\n method: \"POST\",\n body: JSON.stringify({\n page_size: 100,\n ...(startCursor ? { start_cursor: startCursor } : {}),\n }),\n });\n for (const page of query.results) {\n const tmdbId = page.properties?.[\"TMDB ID\"]?.rich_text?.[0]?.text\n ?.content;\n if (tmdbId) existingMap[tmdbId] = page.id;\n }\n hasMore = query.has_more;\n startCursor = query.next_cursor;\n }\n\n let created = 0, updated = 0;\n for (const title of titles) {\n const props = titleToNotionProps(title, data);\n const existingPageId = existingMap[title.tmdbId] || title.notionPageId;\n try {\n if (existingPageId) {\n await notionFetch(`/pages/${existingPageId}`, token, {\n method: \"PATCH\",\n body: JSON.stringify({ properties: props }),\n });\n updated++;\n } else {\n const createdPage: any = await notionFetch(\"/pages\", token, {\n method: \"POST\",\n body: JSON.stringify({\n parent: { database_id: dbId },\n properties: props,\n }),\n });\n title.notionPageId = createdPage.id;\n created++;\n }\n } catch (e) {\n console.error(`Notion sync failed for ${title.title}:`, e);\n }\n await new Promise((r) => setTimeout(r, 350));\n }\n return { created, updated, titles: data.titles };\n}\n\nexport async function pullFromNotion(token: string, dbId: string) {\n const pages: any[] = [];\n let hasMore = true;\n let startCursor: string | undefined;\n while (hasMore) {\n const query: any = await notionFetch(`/databases/${dbId}/query`, token, {\n method: \"POST\",\n body: JSON.stringify({\n page_size: 100,\n ...(startCursor ? { start_cursor: startCursor } : {}),\n }),\n });\n pages.push(...query.results);\n hasMore = query.has_more;\n startCursor = query.next_cursor;\n }\n return pages.map(notionPageToTitle).filter(Boolean);\n}",[],[180,314],"8405645a-153c-11f1-9d28-42dde27851f2","api.ts","4d00b766-153c-11f1-9d28-42dde27851f2",9,["D",1772348508212],"// backend/api.ts — API routes\nimport { Hono } from \"https://esm.sh/hono@4.4.2\";\nimport { blankData, USERS } from \"../shared/types.ts\";\nimport { pullFromNotion, pushToNotion } from \"./notion.ts\";\n\nconst TMDB_IMG = \"https://image.tmdb.org/t/p/w185\";\nconst BLOB_KEY = \"watchqueue-data\";\n\nconst api = new Hono();\n\n// ── Helpers ──\nasync function loadData() {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const data = await blob.getJSON(BLOB_KEY);\n return data || blankData();\n}\n\nasync function saveData(data: any) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n await blob.setJSON(BLOB_KEY, data);\n}\n\nfunction env(key: string): string {\n return Deno.env.get(key) || \"\";\n}\n\n// ── Data CRUD ──\napi.get(\"/data\", async (c) => {\n const data = await loadData();\n // Include config flags so frontend knows what's available\n return c.json({\n ...data,\n _config: {\n hasTmdb: !!env(\"TMDB_API_KEY\"),\n hasOmdb: !!env(\"OMDB_API_KEY\"),\n hasNotion: !!(env(\"NOTION_TOKEN\") && env(\"NOTION_DB_ID\")),\n },\n });\n});\n\napi.post(\"/data\", async (c) => {\n const body = await c.req.json();\n // Strip _config before saving\n const { _config, ...data } = body;\n await saveData(data);\n return c.json({ ok: true });\n});\n\n// ── TMDB Search ──\napi.get(\"/tmdb/search\", async (c) => {\n const q = c.req.query(\"q\");\n const apiKey = env(\"TMDB_API_KEY\");\n if (!apiKey) return c.json({ error: \"TMDB API key not configured\" }, 500);\n if (!q) return c.json({ results: [] });\n\n const url =\n `https://api.themoviedb.org/3/search/multi?api_key=${apiKey}&query=${\n encodeURIComponent(q)\n }&include_adult=false`;\n const res = await fetch(url);\n if (!res.ok) return c.json({ error: \"TMDB search failed\" }, res.status);\n const data = await res.json();\n\n const results = data.results\n .filter((r: any) => r.media_type === \"movie\" || r.media_type === \"tv\")\n .slice(0, 10)\n .map((r: any) => ({\n tmdbId: `${r.media_type}-${r.id}`,\n title: r.title || r.name,\n year: (r.release_date || r.first_air_date || \"\").slice(0, 4),\n type: r.media_type,\n poster: r.poster_path ? TMDB_IMG + r.poster_path : null,\n overview: r.overview || \"\",\n rating: r.vote_average || 0,\n }));\n\n return c.json({ results });\n});\n\n// ── TMDB + OMDB Metadata ──\napi.get(\"/tmdb/metadata/:tmdbId\", async (c) => {\n const tmdbId = c.req.param(\"tmdbId\");\n const tmdbKey = env(\"TMDB_API_KEY\");\n const omdbKey = env(\"OMDB_API_KEY\");\n if (!tmdbKey) return c.json({ error: \"TMDB API key not configured\" }, 500);\n\n const parts = tmdbId.split(\"-\");\n if (parts.length < 2) return c.json({ error: \"Invalid tmdbId\" }, 400);\n const mediaType = parts[0];\n const id = parts.slice(1).join(\"-\");\n\n // Fetch TMDB details with external IDs\n let tmdbData: any = null;\n try {\n const url =\n `https://api.themoviedb.org/3/${mediaType}/${id}?api_key=${tmdbKey}&append_to_response=external_ids`;\n const res = await fetch(url);\n if (res.ok) tmdbData = await res.json();\n } catch {}\n\n const result: any = {\n runtime: null,\n numSeasons: null,\n numEpisodes: null,\n episodeRuntime: null,\n criticScores: null,\n };\n\n if (tmdbData) {\n if (mediaType === \"movie\") {\n result.runtime = tmdbData.runtime || null;\n } else {\n result.numEpisodes = tmdbData.number_of_episodes || null;\n result.numSeasons = tmdbData.number_of_seasons || null;\n const ert = tmdbData.episode_run_time;\n result.episodeRuntime = Array.isArray(ert) && ert.length > 0\n ? Math.round(\n ert.reduce((a: number, b: number) => a + b, 0) / ert.length,\n )\n : null;\n }\n\n // Get IMDB ID for OMDB lookup\n const imdbId = tmdbData.external_ids?.imdb_id || tmdbData.imdb_id || null;\n\n if (imdbId && omdbKey) {\n try {\n const omdbUrl =\n `https://www.omdbapi.com/?i=${imdbId}&apikey=${omdbKey}`;\n const omdbRes = await fetch(omdbUrl);\n if (omdbRes.ok) {\n const omdb = await omdbRes.json();\n if (omdb.Response !== \"False\") {\n let rt = null, mc = null;\n if (omdb.Ratings) {\n for (const r of omdb.Ratings) {\n if (r.Source === \"Rotten Tomatoes\") {\n rt = parseInt(r.Value) || null;\n }\n if (r.Source === \"Metacritic\") mc = parseInt(r.Value) || null;\n }\n }\n if (mc == null && omdb.Metascore && omdb.Metascore !== \"N/A\") {\n mc = parseInt(omdb.Metascore) || null;\n }\n result.criticScores = { rt, mc, imdbId };\n // Fallback runtime from OMDB\n if (!result.runtime && omdb.Runtime && omdb.Runtime !== \"N/A\") {\n result.runtime = parseInt(omdb.Runtime) || null;\n }\n }\n }\n } catch {}\n } else if (imdbId) {\n result.criticScores = { rt: null, mc: null, imdbId };\n }\n }\n\n return c.json(result);\n});\n\n// ── Backfill metadata for all titles ──\napi.post(\"/tmdb/backfill\", async (c) => {\n const tmdbKey = env(\"TMDB_API_KEY\");\n if (!tmdbKey) return c.json({ error: \"TMDB API key not configured\" }, 500);\n\n const data: any = await loadData();\n const titles = Object.values(data.titles || {}) as any[];\n const missing = titles.filter(\n (t: any) =>\n (!t.criticScores || !t.runtime) && t.tmdbId &&\n !t.tmdbId.startsWith(\"manual-\") && !t.tmdbId.startsWith(\"netflix-\"),\n );\n\n let updated = 0;\n for (const title of missing) {\n try {\n // Reuse the metadata endpoint logic inline\n const parts = title.tmdbId.split(\"-\");\n const mediaType = parts[0];\n const id = parts.slice(1).join(\"-\");\n const url =\n `https://api.themoviedb.org/3/${mediaType}/${id}?api_key=${tmdbKey}&append_to_response=external_ids`;\n const res = await fetch(url);\n if (!res.ok) continue;\n const d = await res.json();\n\n if (mediaType === \"movie\") {\n if (d.runtime) title.runtime = d.runtime;\n } else {\n if (d.number_of_episodes) title.numEpisodes = d.number_of_episodes;\n if (d.number_of_seasons) title.numSeasons = d.number_of_seasons;\n const ert = d.episode_run_time;\n if (Array.isArray(ert) && ert.length > 0) {\n title.episodeRuntime = Math.round(\n ert.reduce((a: number, b: number) => a + b, 0) / ert.length,\n );\n }\n }\n\n const imdbId = d.external_ids?.imdb_id || d.imdb_id;\n const omdbKey = env(\"OMDB_API_KEY\");\n if (imdbId && omdbKey) {\n const omdbRes = await fetch(\n `https://www.omdbapi.com/?i=${imdbId}&apikey=${omdbKey}`,\n );\n if (omdbRes.ok) {\n const omdb = await omdbRes.json();\n if (omdb.Response !== \"False\") {\n let rt = null, mc = null;\n if (omdb.Ratings) {\n for (const r of omdb.Ratings) {\n if (r.Source === \"Rotten Tomatoes\") {\n rt = parseInt(r.Value) || null;\n }\n if (r.Source === \"Metacritic\") mc = parseInt(r.Value) || null;\n }\n }\n if (mc == null && omdb.Metascore && omdb.Metascore !== \"N/A\") {\n mc = parseInt(omdb.Metascore) || null;\n }\n title.criticScores = { rt, mc, imdbId };\n if (!title.runtime && omdb.Runtime && omdb.Runtime !== \"N/A\") {\n title.runtime = parseInt(omdb.Runtime) || null;\n }\n }\n }\n } else if (imdbId) {\n title.criticScores = { rt: null, mc: null, imdbId };\n }\n updated++;\n } catch {}\n await new Promise((r) => setTimeout(r, 300));\n }\n\n await saveData(data);\n return c.json({ updated, total: missing.length });\n});\n\n// ── Notion Sync ──\napi.post(\"/notion/push\", async (c) => {\n const token = env(\"NOTION_TOKEN\");\n const dbId = env(\"NOTION_DB_ID\");\n if (!token || !dbId) return c.json({ error: \"Notion not configured\" }, 500);\n\n const data: any = await loadData();\n const result = await pushToNotion(data, token, dbId);\n // Save back any new notionPageIds\n if (result.titles) {\n data.titles = result.titles;\n await saveData(data);\n }\n return c.json({ created: result.created, updated: result.updated });\n});\n\napi.post(\"/notion/pull\", async (c) => {\n const token = env(\"NOTION_TOKEN\");\n const dbId = env(\"NOTION_DB_ID\");\n if (!token || !dbId) return c.json({ error: \"Notion not configured\" }, 500);\n\n const rows = await pullFromNotion(token, dbId);\n const data: any = await loadData();\n\n for (const row of rows) {\n if (!row) continue;\n const { title, userData } = row;\n\n data.titles[title.tmdbId] = {\n ...(data.titles[title.tmdbId] || {}),\n ...title,\n };\n\n for (const u of USERS) {\n const ud = userData[u];\n if (!ud) continue;\n if (!data.watched[u]) data.watched[u] = {};\n data.watched[u][title.tmdbId] = ud.watched;\n if (!data.scores[u]) data.scores[u] = {};\n if (ud.score) data.scores[u][title.tmdbId] = ud.score;\n if (!data.userLists[u]) data.userLists[u] = [];\n if (!data.userUnranked[u]) data.userUnranked[u] = [];\n data.userLists[u] = data.userLists[u].filter((x: string) =>\n x !== title.tmdbId\n );\n data.userUnranked[u] = data.userUnranked[u].filter((x: string) =>\n x !== title.tmdbId\n );\n if (ud.rank != null && ud.rank > 0) {\n const insertAt = Math.min(ud.rank - 1, data.userLists[u].length);\n data.userLists[u].splice(insertAt, 0, title.tmdbId);\n } else if (ud.onList) {\n data.userUnranked[u].push(title.tmdbId);\n }\n }\n }\n\n await saveData(data);\n return c.json({ pulled: rows.length });\n});\n\nexport default api;",[],[180,322],"008b9576-1533-11f1-aa5e-42dde27851f2","019ca7f5-af18-74e8-a9ff-965ba58fef68",["D",1772344422078],"# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n- [`../index.ts`](../index.ts) - this is the **entrypoint** for this whole\n project, which is why it's in the folder above this one, even though it's\n technically part of the backend\n- `database/` - this contains the code for interfacing with the app's SQLite\n database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) as the API framework. You can think of\nHono as a replacement for [ExpressJS](https://expressjs.com/) that works in\nserverless environments like Val Town or Cloudflare Workers. If you come from\nPython or Ruby, Hono is also a lot like\n[Flask](https://github.com/pallets/flask) or\n[Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis backend HTTP server is responsible for serving all static assets to the\nbrowser to render the app, including HTML, JavaScript (including all client-side\nReact), CSS, and even the favicon SVG.\n\nWe use helper functions from [std/utils](https://www.val.town/x/std/utils/code)\nfor getting files and serving them.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app\n(like most apps) we serve it at the root, ie `GET /`.\n\nWe _bootstrap_ `index.html` with some initial data from the server, so that it\ngets dynamically injected JSON data without having to make another round-trip\nrequest to the server to get that data on the frontend. This is a common pattern\nfor client-side rendered apps.\n\n## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages\ntable. They both speak JSON, which is standard. They import their functions from\n`/backend/database/queries.ts`. These routes are called from the React app to\nrefresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off\nthis default behavior by re-throwing errors, because we think most of the time\nyou'll want to see the full stack trace instead of merely \"Internal Server\nError\". You can customize how you want errors to appear.",[],[180,162],"008b8c20-1533-11f1-aa5e-42dde27851f2","queries.ts","019ca7f5-af18-74e8-a9ff-8ec9374c4cbc","019ca7f5-af18-74e8-a9ff-938a93d3ff72",["D",1772344422078],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { createTables, tableName } from \"./migrations.ts\";\n\n// This will create the database table if it doesn't exist.\n// This will run every time the app starts up. You can\n// comment out this line for a modest (30ms) perforamnce improvement\n// on cold starts. It's left in to ensure the database tables are\n// automatically set up correctly for users who fork this app.\nawait createTables();\n\nexport async function getMessages(limit = MESSAGE_LIMIT): Promise {\n const messages = await sqlite.execute(\n `SELECT * FROM ${tableName} \n ORDER BY timestamp DESC \n LIMIT ?`,\n [limit],\n );\n return messages.rows as unknown as Message[];\n}\n\nexport async function insertMessage(content: string) {\n await sqlite.execute(\n `INSERT INTO ${tableName} (content) \n VALUES (?)`,\n [content],\n );\n}",[],[180,343,336],"database","008b859a-1533-11f1-aa5e-42dde27851f2","migrations.ts","019ca7f5-af18-74e8-a9ff-8ac85485069d",["D",1772344422078],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const tableName = \"reactHonoStarter_messages\";\n\nexport async function createTables() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS ${tableName} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n content TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )`,\n /* Add any other tables or migrations you want here\n\n However, you should know that SQLite has much more limited\n support for altering existing tables as compared to other databases.\n Often it's easier to create new tables with the schema you want, and then\n copy the data over. */\n ]);\n}",[],[180,343,345],"008b5980-1533-11f1-aa5e-42dde27851f2","019ca7f5-af18-74e8-a9ff-84b93dac82e9",["D",1772344422078],"# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage\ndata. Every Val Town account comes with a free SQLite database, hosted on\n[Turso](https://turso.tech/). This folder is broken up into two files:\n\n- [`migrations.ts`](./migrations.ts) - code to set up the database tables the\n app needs\n- [`queries.ts`](./queries.ts) - functions to run queries against those tables,\n which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table\n`reactHonoStarter_messages` to store messages.\n\nThis \"migration\" runs once on every app startup because it's imported in\n`index.ts`. You can comment this line out for a slight (30ms) performance\nimprovement on cold starts. It's left in so that users who fork this project\nwill have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to\nother databases. Often it's easier to create new tables with the schema you\nwant, and then copy the data over. Happily LLMs are quite good at those sort of\ndatabase operations, but please reach out in the\n[Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries\n\nThe queries file is where running the migrations happen in this app. It'd also\nbe reasonable for that to happen in index.ts, or as is said above, for that line\nto be commented out, and only run when actual changes are made to your database\nschema.\n\nThe queries file exports functions to get and write data. It relies on shared\ntypes and data imported from the `/shared` directory.",[],[180,343,162],"008b940e-1533-11f1-aa5e-42dde27851f2",["D",1772344422078],[198,199,200],[180,343],["D",1772344422078],[197,201,202,203],[180],["D",1772344422078],["D",1789542643120],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_18":56,"_108":109,"_110":49},{"_13":89,"_32":90,"_43":42,"_91":44,"_92":93,"_94":95,"_96":51,"_97":98,"_99":100,"_101":45,"_102":103},"ctx",{"_82":-5,"_133":402,"_403":404,"_405":406,"_407":49,"_408":49,"_409":49,"_410":25,"_411":-5,"_412":-7,"_413":-7,"_414":63,"_415":49,"_416":49,"_417":-5,"_418":49,"_419":49,"_420":49,"_421":-5},"ENV",{"_373":374,"_375":376,"_377":90,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401},"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"]

Diff · v47