React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_387":388,"_389":390},"routes/_app.x.$handle.$name",{"_105":104,"_32":46,"_113":91,"_27":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_20":-5,"_125":126,"_127":128,"_129":25,"_130":131,"_132":60,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",75,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/ui.tsx","latestPath","fileId","8ceea0c0-153e-11f1-81c3-42dde27851f2","name","ui.tsx","fileType","script","content","/** @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\";\n\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 ──\nexport const SCROLL_ZONE = 120;\nexport const SCROLL_SPEED_MIN = 60;\nexport const SCROLL_SPEED_MAX = 500;\nexport const 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({ apiKey, 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() || !apiKey) return;\n setLoading(true);\n setError(\"\");\n try {\n setResults(await searchTmdb(q, apiKey));\n } catch (e) {\n setError(e.message);\n } finally {\n setLoading(false);\n }\n }, [apiKey]);\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 ──\nfunction 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(\n { apiKey, user, existingTitles, onAddTitle, onClose },\n) {\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}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nexport const USERS = [\"Nathan\", \"Faith\"];\nexport const 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 onFetchMetadata,\n}) {\n const [moveToVal, setMoveToVal] = useState(\"\");\n const [fetchStatus, setFetchStatus] = useState(null); // null | \"fetching\" | { fields, skipped, error, raw }\n const doFetch = useCallback(async () => {\n if (!onFetchMetadata) return;\n setFetchStatus(\"fetching\");\n try {\n const result = await onFetchMetadata(title.tmdbId, title.title);\n setFetchStatus(result);\n } catch (e) {\n setFetchStatus({ error: e?.message || String(e) });\n }\n }, [onFetchMetadata, title.tmdbId, title.title]);\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 {/* Critic scores + runtime */}\n {(title.criticScores?.rt != null || title.criticScores?.mc != null ||\n title.runtime || title.numEpisodes) && (\n \n \n \n \n )}\n\n {/* Single-title metadata fetch */}\n {onFetchMetadata && (\n

\n \n {fetchStatus === \"fetching\" ? \"Fetching…\" : \"🔄 Fetch metadata\"}\n \n {fetchStatus && fetchStatus !== \"fetching\" && (\n

\n {fetchStatus.error && (\n

\n ✗ Error: {fetchStatus.error}\n

\n )}\n {fetchStatus.fields?.length > 0 && (\n

\n ✓ Updated: {fetchStatus.fields.join(\", \")}\n

\n )}\n {fetchStatus.skipped && (\n

\n – {fetchStatus.skipped}\n

\n )}\n {fetchStatus.raw && (\n

\n \n Raw API response\n \n {JSON.stringify(fetchStatus.raw, null, 2)}\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 {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 {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 );\n })}\n \n \n\n {expanded && (\n \n {title.overview && (\n \n {title.overview}\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 {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(\n { apiKey, user, existingTitles, onAddTitle, onClose },\n) {\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 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\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// ═══════════════════════════════════════════════════════════════════════════════\n// ═══════════════════════════════════════════════════════════════════════════════\n\n// ═══════════════════════════════════════════════════════════════════════════════","createdAt",["D",1772466256946],"branchVersion","branchId","0086f980-1533-11f1-aa5e-42dde27851f2","id","008209de-1533-11f1-aa5e-42dde27851f2","BabList",["D",1772344422078],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Example with client-side React & Hono server","imageUrl","019ca7f2-6e63-76d8-9993-9700c5c563ce","pinnedFileId","019ca7f5-af18-74e8-a9ff-d1bc6982c02f","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019ca7f2-6e63-76d8-9993-9a76aa36e3e7","tursoName","008209de153311f1aa5e42dde27851f2","tursoHostname","008209de153311f1aa5e42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789455661654],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_112":108},"org",{"_105":104,"_106":-5,"_107":108,"_18":56,"_109":110,"_111":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":94,"_95":96,"_97":51,"_98":99,"_100":101,"_102":46,"_103":104},"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",{"_44":45,"_32":46,"_39":382,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":383,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":384,"_85":385,"_87":386,"_89":25},"tree",[197,205,216,220,221],"files",[197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221],"counts",{"_185":64,"_186":187,"_188":64,"_189":190,"_191":192},"contents",[146,147,148,149,150],"upstreamProject",{"_44":99,"_32":143,"_53":54,"_55":-5,"_50":51,"_83":144},"upstreamBranch",{"_44":94,"_39":137,"_138":139,"_32":91,"_92":99,"_13":96,"_93":-5,"_95":-5,"_140":141,"_48":-5,"_89":25,"_50":51,"_103":142,"_65":101,"_102":143},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740432065884],"updatedAt",["D",1755285423526],"lockfileKey","1755661346047-esm.town_v_stevekrouse_reactHonoExample@244-main","stevekrouse","reactHonoExample",{"_105":142,"_112":145},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_44":180,"_32":181,"_30":182,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":183,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_27":184},{"_44":175,"_32":176,"_30":177,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":178,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_27":179},{"_44":169,"_32":170,"_30":171,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":172,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_27":174},{"_44":162,"_32":163,"_30":164,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":166,"_13":64,"_34":20,"_36":167,"_24":25,"_160":-5,"_27":168},{"_44":151,"_32":152,"_30":58,"_153":-5,"_42":43,"_41":154,"_155":25,"_39":156,"_13":157,"_34":158,"_36":159,"_24":25,"_160":-5,"_27":161},"7c922346-1593-11f1-a010-42dde27851f2","index.ts","parentId",51,"latest",["D",1772385861936],4,"http","import { 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\napp.onError((err, c) => {\n throw err;\n});\n\napp.route(\"/api\", api);\n\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\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",[152],"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.",[163],"008bf5b6-1533-11f1-aa5e-42dde27851f2","shared","019ca7f5-af18-74e8-a9ff-c8aa1dd6bc5e",["D",1772344422078],"directory",[170],"008bea9e-1533-11f1-aa5e-42dde27851f2","frontend","019ca7f5-af18-74e8-a9ff-be3510c4ec20",["D",1772344422078],[176],"008ba750-1533-11f1-aa5e-42dde27851f2","backend","019ca7f5-af18-74e8-a9ff-9a8a979962bf",["D",1772344422078],[181],"pulls","branches",2,"forks","envVars",{"_193":195,"_196":64},"connections",{"_193":64,"_194":64},"count","unfilledCount",5,"emptyCount",{"_44":180,"_32":181,"_30":182,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":379,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_223":380,"_27":381},{"_44":375,"_32":361,"_30":356,"_153":182,"_42":43,"_41":165,"_155":60,"_39":376,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_223":377,"_27":378},{"_44":369,"_32":163,"_30":370,"_153":356,"_42":43,"_41":165,"_155":60,"_39":371,"_13":64,"_34":20,"_36":372,"_24":25,"_160":-5,"_223":373,"_27":374},{"_44":362,"_32":363,"_30":364,"_153":356,"_42":43,"_41":165,"_155":60,"_39":365,"_13":64,"_34":35,"_36":366,"_24":25,"_160":-5,"_223":367,"_27":368},{"_44":353,"_32":354,"_30":355,"_153":356,"_42":43,"_41":165,"_155":60,"_39":357,"_13":64,"_34":35,"_36":358,"_24":25,"_160":-5,"_223":359,"_27":360},{"_44":347,"_32":163,"_30":348,"_153":182,"_42":43,"_41":165,"_155":60,"_39":349,"_13":64,"_34":20,"_36":350,"_24":25,"_160":-5,"_223":351,"_27":352},{"_44":338,"_32":339,"_30":340,"_153":182,"_42":43,"_41":341,"_155":25,"_39":342,"_13":343,"_34":35,"_36":344,"_24":25,"_160":-5,"_223":345,"_27":346},{"_44":330,"_32":331,"_30":332,"_153":182,"_42":43,"_41":333,"_155":25,"_39":334,"_13":302,"_34":35,"_36":335,"_24":25,"_160":-5,"_223":336,"_27":337},{"_44":175,"_32":176,"_30":177,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":327,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_223":328,"_27":329},{"_44":323,"_32":296,"_30":291,"_153":177,"_42":43,"_41":165,"_155":60,"_39":324,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_223":325,"_27":326},{"_44":314,"_32":315,"_30":316,"_153":291,"_42":43,"_41":317,"_155":25,"_39":318,"_13":319,"_34":35,"_36":320,"_24":25,"_160":-5,"_223":321,"_27":322},{"_44":306,"_32":307,"_30":308,"_153":291,"_42":43,"_41":309,"_155":25,"_39":310,"_13":302,"_34":35,"_36":311,"_24":25,"_160":-5,"_223":312,"_27":313},{"_44":297,"_32":298,"_30":299,"_153":291,"_42":43,"_41":300,"_155":25,"_39":301,"_13":302,"_34":35,"_36":303,"_24":25,"_160":-5,"_223":304,"_27":305},{"_44":290,"_32":33,"_30":31,"_153":291,"_42":43,"_41":14,"_155":25,"_39":292,"_13":293,"_34":35,"_36":38,"_24":25,"_160":-5,"_223":294,"_27":295},{"_44":284,"_32":163,"_30":285,"_153":177,"_42":43,"_41":165,"_155":60,"_39":286,"_13":64,"_34":20,"_36":287,"_24":25,"_160":-5,"_223":288,"_27":289},{"_44":277,"_32":278,"_30":279,"_153":177,"_42":43,"_41":165,"_155":60,"_39":280,"_13":64,"_34":20,"_36":281,"_24":25,"_160":-5,"_223":282,"_27":283},{"_44":269,"_32":270,"_30":271,"_153":177,"_42":43,"_41":272,"_155":25,"_39":273,"_13":195,"_34":20,"_36":274,"_24":25,"_160":-5,"_223":275,"_27":276},{"_44":260,"_32":261,"_30":262,"_153":177,"_42":43,"_41":263,"_155":25,"_39":264,"_13":265,"_34":35,"_36":266,"_24":25,"_160":-5,"_223":267,"_27":268},{"_44":253,"_32":254,"_30":255,"_153":177,"_42":43,"_41":165,"_155":25,"_39":256,"_13":64,"_34":20,"_36":257,"_24":25,"_160":-5,"_223":258,"_27":259},{"_44":169,"_32":170,"_30":171,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":250,"_13":64,"_34":173,"_36":-5,"_24":25,"_160":-5,"_223":251,"_27":252},{"_44":244,"_32":163,"_30":245,"_153":171,"_42":43,"_41":165,"_155":60,"_39":246,"_13":64,"_34":20,"_36":247,"_24":25,"_160":-5,"_223":248,"_27":249},{"_44":236,"_32":237,"_30":238,"_153":171,"_42":43,"_41":239,"_155":25,"_39":240,"_13":157,"_34":35,"_36":241,"_24":25,"_160":-5,"_223":242,"_27":243},{"_44":229,"_32":230,"_30":231,"_153":171,"_42":43,"_41":165,"_155":60,"_39":232,"_13":64,"_34":35,"_36":233,"_24":25,"_160":-5,"_223":234,"_27":235},{"_44":162,"_32":163,"_30":164,"_153":-5,"_42":43,"_41":165,"_155":60,"_39":226,"_13":64,"_34":20,"_36":167,"_24":25,"_160":-5,"_223":227,"_27":228},{"_44":151,"_32":152,"_30":58,"_153":-5,"_42":43,"_41":154,"_155":25,"_39":222,"_13":157,"_34":158,"_36":159,"_24":25,"_160":-5,"_223":224,"_27":225},["D",1772385861936],"children",[],[152],["D",1772344422078],[],[163],"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;",[],[170,230],"8fefafa8-1593-11f1-9275-42dde27851f2","types.ts","46ce0960-153d-11f1-80b9-42dde27851f2",52,["D",1772385894394],"export const USERS = [\"Nathan\", \"Faith\"];\nconst DEFAULT_TAGS = [\n \"Date Night\",\n \"Solo Watch\",\n \"Background\",\n \"Must See\",\n \"Short & Sweet\",\n];\n\nexport function blankData() {\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}\n\n// Also add TypeScript interfaces for WatchData, Title if desired",[],[170,237],"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.",[],[170,163],["D",1772344422078],[217,218,219],[170],"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}",[],[176,254],"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();",[],[176,261],"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",[],[176,270],"008bcbfe-1533-11f1-aa5e-42dde27851f2","favicon.svg","019ca7f5-af18-74e8-a9ff-ac34c1920ced",["D",1772344422078],"",[],[176,278],"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.",[],[176,163],"abbafb32-164e-11f1-9431-42dde27851f2","019ca7f5-af18-74e8-a9ff-a43a26c53e65",["D",1772466256946],12,[],[176,296,33],"components","d6478424-1595-11f1-b974-42dde27851f2","platform.tsx","8d5f9810-1594-11f1-9f4a-42dde27851f2",67,["D",1772386871444],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport const IS_VALTOWN = true;\n\n// ── Platform shims (Val Town: fetch /api/* proxy) ──\n\nexport async 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}\n\nexport async 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\nexport async function searchTmdb(query) {\n const res = await fetch(`/api/tmdb/search?q=${encodeURIComponent(query)}`);\n if (!res.ok) throw new Error(\"Search failed\");\n const data = await res.json();\n return data.results || [];\n}\n\nexport async 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\nexport async function pushToNotion() {\n const res = await fetch(\"/api/notion/push\", { method: \"POST\" });\n if (!res.ok) throw new Error(\"Push failed\");\n return await res.json();\n}\n\nexport async function pullFromNotion() {\n const res = await fetch(\"/api/notion/pull\", { method: \"POST\" });\n if (!res.ok) throw new Error(\"Pull failed\");\n return await res.json();\n}\n\n// ── Config ──\nexport const USERS = [\"Nathan\", \"Faith\"];\nexport const DEFAULT_TAGS = [\n \"Date Night\",\n \"Solo Watch\",\n \"Background\",\n \"Must See\",\n \"Short & Sweet\",\n];\nexport const TMDB_IMG = \"https://image.tmdb.org/t/p/w185\";\n\nexport const 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});",[],[176,296,298],"76236b24-1597-11f1-b516-42dde27851f2","AppComponents.tsx","7b7e2d6e-1594-11f1-be27-42dde27851f2",70,["D",1772387569134],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n AggRow,\n baseBtn,\n C,\n CriticChip,\n ICO,\n Icon,\n Poster,\n RatingInput,\n RuntimeBadge,\n TagChip,\n TitleRow,\n useDragReorder,\n} from \"./ui.tsx\";\nimport { USERS } from \"./platform.tsx\";\n\nexport function ApiKeyInput({ value, onChange }) {\n const [show, setShow] = useState(false);\n return (\n

\n \n \n \n \n TMDB API Key\n \n

\n \n Free from themoviedb.org → Settings → API. Needed for search.\n

\n onChange(e.target.value)}\n placeholder=\"Paste your API key…\"\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 setShow(!show)}\n style={{\n ...baseBtn,\n padding: \"8px 12px\",\n background: C.surfaceHover,\n color: C.textDim,\n fontSize: 12,\n }}\n >\n {show ? \"Hide\" : \"Show\"}\n \n

\n \n \n );\n}\n\n// ── Tab bar ──\nexport function 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) ──\nexport function 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?.apiKey && (\n \n +\n \n )}\n \n );\n}\n\n// ── Main App ──",[],[176,296,307],"445258e8-1598-11f1-8e2e-42dde27851f2","App.tsx","019ca7f5-af18-74e8-a9ff-9cb9f659580d",74,["D",1772387915055],13,"/** @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\";\nimport {\n blank,\n DEFAULT_TAGS,\n fetchTitleMetadata,\n IS_VALTOWN,\n load,\n pullFromNotion,\n pushToNotion,\n save,\n searchTmdb,\n TMDB_IMG,\n USERS,\n} from \"./platform.tsx\";\nimport { ApiKeyInput, MyListTab, TabBar } from \"./AppComponents.tsx\";\n\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 // One-time: inject sample titles to preview critic scores display\n if (!saved._sampleV3) {\n const samples = [\n {\n tmdbId: \"movie-278\",\n title: \"The Shawshank Redemption\",\n year: \"1994\",\n type: \"movie\",\n poster:\n \"https://image.tmdb.org/t/p/w185/9cjIGRiQI8GBPJcOA3A4bFYJpEd.jpg\",\n overview:\n \"Imprisoned in the 1940s for the double murder of his wife and her lover, upstanding banker Andy Dufresne begins a new life at the Shawshank prison, where he puts his accounting skills to work for an pointedly wicked warden. During his long stretch in prison, Dufresne comes to be admired by the other inmates for his integrity and unquenchable sense of hope.\",\n rating: 8.7,\n runtime: 142,\n criticScores: { rt: 91, mc: 82, imdbId: \"tt0111161\" },\n tags: [\"Must See\"],\n addedAt: Date.now(),\n },\n {\n tmdbId: \"movie-550\",\n title: \"Fight Club\",\n year: \"1999\",\n type: \"movie\",\n poster:\n \"https://image.tmdb.org/t/p/w185/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg\",\n overview:\n \"A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground fight clubs forming in every town, until an escalating spiral of violence threatens to destroy everything.\",\n rating: 8.4,\n runtime: 139,\n criticScores: { rt: 79, mc: 66, imdbId: \"tt0137523\" },\n tags: [],\n addedAt: Date.now(),\n },\n {\n tmdbId: \"tv-1396\",\n title: \"Breaking Bad\",\n year: \"2008\",\n type: \"tv\",\n poster:\n \"https://image.tmdb.org/t/p/w185/ggFHVNu6YYI5L9pCfOacjizRGt.jpg\",\n overview:\n \"Walter White, a New Mexico chemistry teacher, is diagnosed with Stage III cancer and given a prognosis of two years left to live. He becomes filled with a sense of fearlessness and an unrelenting desire to secure his family's financial future at any cost as he enters the dangerous world of drugs and crime.\",\n rating: 8.9,\n numSeasons: 5,\n numEpisodes: 62,\n episodeRuntime: 47,\n criticScores: { rt: 96, mc: 87, imdbId: \"tt0903747\" },\n tags: [\"Must See\"],\n addedAt: Date.now(),\n },\n {\n tmdbId: \"movie-680\",\n title: \"Pulp Fiction\",\n year: \"1994\",\n type: \"movie\",\n poster:\n \"https://image.tmdb.org/t/p/w185/d5iIlFn5s0ImszYzBPb8JPIfbXD.jpg\",\n overview:\n \"The lives of two mob hitmen, a boxer, a gangster and his wife, and a pair of diner bandits intertwine in four tales of violence and redemption.\",\n rating: 8.5,\n runtime: 154,\n criticScores: { rt: 92, mc: 94, imdbId: \"tt0110912\" },\n tags: [],\n addedAt: Date.now(),\n },\n ];\n for (const s of samples) {\n if (!saved.titles[s.tmdbId]) {\n saved.titles[s.tmdbId] = s;\n if (!saved.userUnranked[\"Nathan\"].includes(s.tmdbId)) {\n saved.userUnranked[\"Nathan\"].push(s.tmdbId);\n }\n } else {\n // Update existing sample titles with new fields (runtime, episodes, etc.)\n const existing = saved.titles[s.tmdbId];\n if (s.runtime && !existing.runtime) existing.runtime = s.runtime;\n if (s.numSeasons && !existing.numSeasons) {\n existing.numSeasons = s.numSeasons;\n }\n if (s.numEpisodes && !existing.numEpisodes) {\n existing.numEpisodes = s.numEpisodes;\n }\n if (s.episodeRuntime && !existing.episodeRuntime) {\n existing.episodeRuntime = s.episodeRuntime;\n }\n if (s.criticScores && !existing.criticScores) {\n existing.criticScores = s.criticScores;\n }\n if (s.overview && !existing.overview) {\n existing.overview = s.overview;\n }\n }\n }\n saved._sampleV3 = true;\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 (IS_VALTOWN || data?.apiKey) && result.tmdbId &&\n !result.tmdbId.startsWith(\"manual-\")\n ) {\n fetchTitleMetadata(result.tmdbId, data.apiKey, data.omdbKey).then(\n (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 }\n }, [update, activeUser, data?.apiKey, data?.omdbKey]);\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 const tmdbApiKey = data?.apiKey;\n const omdbKey = data?.omdbKey;\n if (!tmdbApiKey || !tmdbId) return;\n const meta = await fetchTitleMetadata(tmdbId, tmdbApiKey, omdbKey);\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?.apiKey, data?.omdbKey, update]);\n\n // Backfill metadata for all titles missing data\n const [backfillStatus, setBackfillStatus] = useState(null);\n const [backfillResults, setBackfillResults] = useState(null); // { updated: [], skipped: [], errored: [] }\n const backfillMetadata = useCallback(async () => {\n const tmdbApiKey = data?.apiKey;\n const omdbKey = data?.omdbKey;\n if (!IS_VALTOWN && !tmdbApiKey) return;\n setBackfillResults(null);\n const allTitles = Object.values(data?.titles || {});\n\n // Categorize titles\n const manual = allTitles.filter((t) =>\n !t.tmdbId || t.tmdbId.startsWith(\"manual-\")\n );\n const needsLookup = allTitles.filter((t) =>\n t.tmdbId?.startsWith(\"netflix-\")\n );\n const hasTmdbId = allTitles.filter((t) =>\n t.tmdbId && !t.tmdbId.startsWith(\"manual-\") &&\n !t.tmdbId.startsWith(\"netflix-\")\n );\n const alreadyComplete = hasTmdbId.filter((t) =>\n t.criticScores && t.runtime\n );\n const needsMetadata = hasTmdbId.filter((t) =>\n !t.criticScores || !t.runtime\n );\n\n // Everything that needs work: titles needing TMDB lookup + titles needing metadata\n const toProcess = [...needsLookup, ...needsMetadata];\n\n if (toProcess.length === 0) {\n setBackfillStatus(null);\n setBackfillResults({\n updated: [],\n skipped: [\n ...alreadyComplete.map((t) => ({\n title: t.title,\n reason: \"Already has metadata\",\n })),\n ...manual.map((t) => ({\n title: t.title,\n reason: \"Manual title (no TMDB ID)\",\n })),\n ],\n errored: [],\n });\n return;\n }\n\n setBackfillStatus(`Fetching 0/${toProcess.length}…`);\n const results = { updated: [], skipped: [], errored: [] };\n\n for (const t of alreadyComplete) {\n results.skipped.push({ title: t.title, reason: \"Already has metadata\" });\n }\n for (const t of manual) {\n results.skipped.push({\n title: t.title,\n reason: \"Manual title (no TMDB ID)\",\n });\n }\n\n let done = 0;\n for (const title of toProcess) {\n try {\n let effectiveId = title.tmdbId;\n\n // For netflix- titles, search TMDB by name to get a real ID\n if (title.tmdbId.startsWith(\"netflix-\")) {\n const searchResults = await searchTmdb(title.title, tmdbApiKey);\n if (searchResults.length > 0) {\n const match = searchResults[0];\n effectiveId = match.tmdbId;\n // Update the title's tmdbId and other info from search\n update((d) => {\n const old = d.titles[title.tmdbId];\n if (!old) return;\n // Move to new key\n delete d.titles[title.tmdbId];\n d.titles[effectiveId] = {\n ...old,\n tmdbId: effectiveId,\n type: match.type,\n poster: match.poster || old.poster,\n year: match.year || old.year,\n overview: match.overview || old.overview,\n rating: match.rating || old.rating,\n };\n // Update all references in lists\n for (const u of USERS) {\n d.userLists[u] = d.userLists[u].map((x) =>\n x === title.tmdbId ? effectiveId : x\n );\n d.userUnranked[u] = d.userUnranked[u].map((x) =>\n x === title.tmdbId ? effectiveId : x\n );\n if (d.watched[u]?.[title.tmdbId] !== undefined) {\n d.watched[u][effectiveId] = d.watched[u][title.tmdbId];\n delete d.watched[u][title.tmdbId];\n }\n if (d.scores[u]?.[title.tmdbId] !== undefined) {\n d.scores[u][effectiveId] = d.scores[u][title.tmdbId];\n delete d.scores[u][title.tmdbId];\n }\n }\n });\n } else {\n results.skipped.push({\n title: title.title,\n reason: \"No TMDB match found by name\",\n });\n done++;\n setBackfillStatus(`Fetching ${done}/${toProcess.length}…`);\n await new Promise((r) => setTimeout(r, 250));\n continue;\n }\n }\n\n const meta = await fetchTitleMetadata(effectiveId, tmdbApiKey, omdbKey);\n if (meta) {\n const fields = [];\n if (meta.runtime && !title.runtime) fields.push(\"runtime\");\n if (meta.numEpisodes && !title.numEpisodes) fields.push(\"episodes\");\n if (meta.numSeasons && !title.numSeasons) fields.push(\"seasons\");\n if (meta.episodeRuntime && !title.episodeRuntime) {\n fields.push(\"ep runtime\");\n }\n if (meta.criticScores?.rt != null && !title.criticScores?.rt) {\n fields.push(\"RT\");\n }\n if (meta.criticScores?.mc != null && !title.criticScores?.mc) {\n fields.push(\"MC\");\n }\n if (meta.criticScores?.imdbId && !title.criticScores?.imdbId) {\n fields.push(\"IMDB ID\");\n }\n if (effectiveId !== title.tmdbId) fields.push(\"TMDB ID\");\n\n if (fields.length > 0) {\n update((d) => {\n const t = d.titles[effectiveId];\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 results.updated.push({ title: title.title, fields });\n } else {\n results.skipped.push({\n title: title.title,\n reason: \"API returned no new data\",\n });\n }\n } else {\n results.skipped.push({\n title: title.title,\n reason: \"TMDB returned nothing (bad ID?)\",\n });\n }\n } catch (e) {\n results.errored.push({\n title: title.title,\n reason: e?.message || String(e),\n });\n }\n done++;\n setBackfillStatus(`Fetching ${done}/${toProcess.length}…`);\n await new Promise((r) => setTimeout(r, 250));\n }\n setBackfillStatus(null);\n setBackfillResults(results);\n }, [data?.apiKey, data?.omdbKey, data?.titles, update]);\n\n // ── Notion Sync ──\n const [notionSyncStatus, setNotionSyncStatus] = useState(null);\n const notionConfigured = !!(data?.notionToken && data?.notionDbId);\n\n const pushNotion = useCallback(async () => {\n if (!notionConfigured) return;\n setNotionSyncStatus(\"Pushing…\");\n try {\n const result = await pushToNotion(\n data,\n data.notionToken,\n data.notionDbId,\n (done, total) => setNotionSyncStatus(`Pushing ${done}/${total}…`),\n );\n // Store any new notionPageIds back\n update((d) => {\n for (const t of Object.values(data.titles)) {\n if (t.notionPageId && d.titles[t.tmdbId]) {\n d.titles[t.tmdbId].notionPageId = t.notionPageId;\n }\n }\n });\n setNotionSyncStatus(\n `Pushed! ${result.created} created, ${result.updated} updated.`,\n );\n } catch (e) {\n setNotionSyncStatus(`Error: ${e.message}`);\n }\n }, [data, notionConfigured, update]);\n\n const pullNotion = useCallback(async () => {\n if (!notionConfigured) return;\n setNotionSyncStatus(\"Pulling…\");\n try {\n const rows = await pullFromNotion(\n data.notionToken,\n data.notionDbId,\n (fetched) => setNotionSyncStatus(`Pulling… ${fetched} rows`),\n );\n update((d) => {\n for (const { title, userData } of rows) {\n // Merge title data\n d.titles[title.tmdbId] = {\n ...(d.titles[title.tmdbId] || {}),\n ...title,\n };\n\n // Merge per-user data\n for (const u of USERS) {\n const ud = userData[u];\n if (!ud) continue;\n\n // Watched\n if (!d.watched[u]) d.watched[u] = {};\n d.watched[u][title.tmdbId] = ud.watched;\n\n // Scores\n if (!d.scores[u]) d.scores[u] = {};\n if (ud.score) d.scores[u][title.tmdbId] = ud.score;\n\n // Lists\n if (!d.userLists[u]) d.userLists[u] = [];\n if (!d.userUnranked[u]) d.userUnranked[u] = [];\n\n // Remove from both lists first\n d.userLists[u] = d.userLists[u].filter((x) => x !== title.tmdbId);\n d.userUnranked[u] = d.userUnranked[u].filter((x) =>\n x !== title.tmdbId\n );\n\n if (ud.rank != null && ud.rank > 0) {\n // Insert at correct rank position (rank is 1-based)\n const insertAt = Math.min(ud.rank - 1, d.userLists[u].length);\n d.userLists[u].splice(insertAt, 0, title.tmdbId);\n } else if (ud.onList) {\n d.userUnranked[u].push(title.tmdbId);\n }\n }\n }\n });\n setNotionSyncStatus(`Pulled ${rows.length} titles from Notion.`);\n } catch (e) {\n setNotionSyncStatus(`Error: ${e.message}`);\n }\n }, [data?.notionToken, data?.notionDbId, notionConfigured, update]);\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?.apiKey && (\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?.apiKey && (\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 \n update((d) => {\n d.apiKey = key;\n })}\n />\n\n {/* OMDB API Key */}\n

\n \n \n \n \n OMDB API Key\n \n

\n \n Free from omdbapi.com (1,000 requests/day). Provides Rotten\n Tomatoes & Metacritic scores.\n

\n \n update((d) => {\n d.omdbKey = e.target.value;\n })}\n placeholder=\"Paste your OMDB key…\"\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 {(IS_VALTOWN || data?.apiKey) && (\n

\n \n {backfillStatus?.startsWith(\"Fetching\")\n ? backfillStatus\n : \"Fetch Metadata for All Titles\"}\n \n

\n Runtime, episodes, {data?.omdbKey\n ? \"RT & Metacritic scores\"\n : \"add OMDB key above for RT & Metacritic\"}\n

\n {backfillResults && (\n

\n {/* Summary line */}\n \n {backfillResults.updated.length > 0 && (\n \n ✓ {backfillResults.updated.length} updated\n \n )}\n {backfillResults.updated.length > 0 &&\n (backfillResults.skipped.length > 0 ||\n backfillResults.errored.length > 0) &&\n \" · \"}\n {backfillResults.skipped.length > 0 && (\n \n {backfillResults.skipped.length} skipped\n \n )}\n {backfillResults.skipped.length > 0 &&\n backfillResults.errored.length > 0 && \" · \"}\n {backfillResults.errored.length > 0 && (\n \n {backfillResults.errored.length} errors\n \n )}\n

\n {/* Expandable details */}\n

\n \n Details\n \n \n {backfillResults.updated.map((r, i) => (\n

\n ✓{\" \"}\n {r.title}{\" \"}\n \n — {r.fields.join(\", \")}\n \n

\n ))}\n {backfillResults.errored.map((r, i) => (\n

\n ✗{\" \"}\n {r.title}{\" \"}\n \n — {r.reason}\n \n

\n ))}\n {backfillResults.skipped.map((r, i) => (\n

\n –{\" \"}\n \n {r.title} — {r.reason}\n \n

\n ))}\n

\n \n

\n )}\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

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

\n \n Sync your watchlist to a Notion database. Create an internal\n integration at notion.so/my-integrations, then share a database\n with it. Requires self-hosting (blocked by CSP in claude.ai).\n

\n \n \n update((d) => {\n d.notionToken = e.target.value;\n })}\n placeholder=\"Integration token (secret_…)\"\n style={{\n background: C.bg,\n border: `1px solid ${C.border}`,\n borderRadius: 8,\n color: C.text,\n fontSize: 13,\n padding: \"8px 12px\",\n fontFamily: \"inherit\",\n outline: \"none\",\n }}\n />\n \n update((d) => {\n d.notionDbId = e.target.value;\n })}\n placeholder=\"Database ID (32-char hex from URL)\"\n style={{\n background: C.bg,\n border: `1px solid ${C.border}`,\n borderRadius: 8,\n color: C.text,\n fontSize: 13,\n padding: \"8px 12px\",\n fontFamily: \"inherit\",\n outline: \"none\",\n }}\n />\n \n {notionConfigured && (\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 Required DB properties: Title (title), TMDB ID (text), Type\n (select), Year (text), Overview (text), Poster (url), TMDB\n Rating (number), Runtime (number), Seasons (number),\n Episodes (number), Episode Runtime (number), RT Score\n (number), MC Score (number), IMDB ID (text), Tags\n (multi-select), and per user: {USERS.map((u) =>\n `${u} Rank (number), ${u} On List (checkbox), ${u} Watched (checkbox), ${u} Score (number)`\n ).join(\"; \")}.\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}\n// ═══════════════════════════════════════════════════════════════════════════════\n\n// ═══════════════════════════════════════════════════════════════════════════════",[],[176,296,315],"008bb86c-1533-11f1-aa5e-42dde27851f2",["D",1772344422078],[207,208,209,210],[176,296],["D",1772344422078],[206,211,212,213,214,215],[176],"a1dd4cb6-1593-11f1-a70f-42dde27851f2","notion.ts","ab49a76a-153c-11f1-b136-42dde27851f2",54,["D",1772385924510],"import { USERS } from \"../shared/types.ts\";\n\nconst NOTION_API = \"https://api.notion.com/v1\";\nconst NOTION_VERSION = \"2022-06-28\";\n\nasync function notionFetch(path, notionToken, options = {}) {\n const res = await fetch(`${NOTION_API}${path}`, {\n ...options,\n headers: {\n \"Authorization\": `Bearer ${notionToken}`,\n \"Notion-Version\": NOTION_VERSION,\n \"Content-Type\": \"application/json\",\n ...(options.headers || {}),\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\n// Map our title + user data → Notion page properties\nfunction titleToNotionProps(title, data) {\n const props = {\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 // Poster as URL\n if (title.poster) {\n props[\"Poster\"] = { url: title.poster };\n }\n // Overview — truncated to 2000 chars for Notion rich_text limit\n if (title.overview) {\n props[\"Overview\"] = {\n rich_text: [{ text: { content: title.overview.slice(0, 2000) } }],\n };\n }\n // Tags as multi-select\n if (title.tags?.length > 0) {\n props[\"Tags\"] = { multi_select: title.tags.map((t) => ({ name: t })) };\n }\n // Per-user data\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\n props[`${u} Rank`] = { number: rankIdx >= 0 ? rankIdx + 1 : null };\n props[`${u} On List`] = { checkbox: isOnList };\n props[`${u} Watched`] = {\n checkbox: !!(data?.watched?.[u]?.[title.tmdbId]),\n };\n props[`${u} Score`] = { number: data?.scores?.[u]?.[title.tmdbId] || null };\n }\n return props;\n}\n\n// Map Notion page → our title data + user state\nfunction notionPageToTitle(page) {\n const p = page.properties;\n const getText = (prop) =>\n prop?.rich_text?.[0]?.text?.content || prop?.title?.[0]?.text?.content ||\n \"\";\n const getNum = (prop) => prop?.number ?? null;\n const getBool = (prop) => prop?.checkbox ?? false;\n\n const tmdbId = getText(p[\"TMDB ID\"]);\n if (!tmdbId) return null;\n\n const title = {\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) => 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 = {};\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\n// Push all local data → Notion (create or update pages)\nexport async function pushToNotion(data, notionToken, notionDbId, onProgress) {\n const titles = Object.values(data?.titles || {});\n if (titles.length === 0) return { created: 0, updated: 0 };\n\n // Fetch existing pages to find those with matching TMDB IDs\n const existingMap = {};\n let hasMore = true;\n let startCursor = undefined;\n while (hasMore) {\n const query = await notionFetch(\n `/databases/${notionDbId}/query`,\n notionToken,\n {\n method: \"POST\",\n body: JSON.stringify({\n page_size: 100,\n ...(startCursor ? { start_cursor: startCursor } : {}),\n }),\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 (let i = 0; i < titles.length; i++) {\n const title = titles[i];\n const props = titleToNotionProps(title, data);\n const existingPageId = existingMap[title.tmdbId] || title.notionPageId;\n\n try {\n if (existingPageId) {\n await notionFetch(`/pages/${existingPageId}`, notionToken, {\n method: \"PATCH\",\n body: JSON.stringify({ properties: props }),\n });\n updated++;\n } else {\n const created_page = await notionFetch(\"/pages\", notionToken, {\n method: \"POST\",\n body: JSON.stringify({\n parent: { database_id: notionDbId },\n properties: props,\n }),\n });\n // Store the Notion page ID back\n title.notionPageId = created_page.id;\n created++;\n }\n } catch (e) {\n console.error(`Notion sync failed for ${title.title}:`, e);\n }\n\n if (onProgress) onProgress(i + 1, titles.length);\n // Rate limit: Notion allows ~3 req/sec\n await new Promise((r) => setTimeout(r, 350));\n }\n return { created, updated };\n}\n\n// Pull from Notion → local data\nexport async function pullFromNotion(notionToken, notionDbId, onProgress) {\n const pages = [];\n let hasMore = true;\n let startCursor = undefined;\n let fetched = 0;\n\n while (hasMore) {\n const query = await notionFetch(\n `/databases/${notionDbId}/query`,\n notionToken,\n {\n method: \"POST\",\n body: JSON.stringify({\n page_size: 100,\n ...(startCursor ? { start_cursor: startCursor } : {}),\n }),\n },\n );\n pages.push(...query.results);\n fetched += query.results.length;\n if (onProgress) onProgress(fetched);\n hasMore = query.has_more;\n startCursor = query.next_cursor;\n }\n\n return pages.map(notionPageToTitle).filter(Boolean);\n}",[],[181,331],"8357d280-1597-11f1-a82a-42dde27851f2","api.ts","4d00b766-153c-11f1-9d28-42dde27851f2",71,["D",1772387591285],9,"import { Hono } from \"https://esm.sh/hono@4.4.2\";\nimport { blankData, USERS } from \"../shared/types.ts\";\nimport { pullFromNotion, pushToNotion } from \"./notion.ts\";\n\n// import { Hono } from \"https://esm.sh/hono@4.4.2\";\n// import { blankData, USERS } from \"../shared/types.ts\";\n// import { pushToNotion, pullFromNotion } 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\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) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n await blob.setJSON(BLOB_KEY, data);\n}\n\nfunction env(key) {\n return Deno.env.get(key) || \"\";\n}\n\n// ── Data CRUD ──\napi.get(\"/data\", async (c) => {\n const data = await loadData();\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 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) => r.media_type === \"movie\" || r.media_type === \"tv\")\n .slice(0, 10)\n .map((r) => ({\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 (single title) ──\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 let tmdbData = 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 = {\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(ert.reduce((a, b) => a + b, 0) / ert.length)\n : null;\n }\n\n const imdbId = tmdbData.external_ids?.imdb_id || tmdbData.imdb_id || null;\n\n if (imdbId && omdbKey) {\n try {\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 result.criticScores = { rt, mc, imdbId };\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 (with per-title results + Netflix lookup) ──\napi.post(\"/tmdb/backfill\", async (c) => {\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 data = await loadData();\n const allTitles = Object.values(data.titles || {});\n\n const manual = allTitles.filter((t) =>\n !t.tmdbId || t.tmdbId.startsWith(\"manual-\")\n );\n const needsLookup = allTitles.filter((t) => t.tmdbId?.startsWith(\"netflix-\"));\n const hasTmdbId = allTitles.filter((t) =>\n t.tmdbId && !t.tmdbId.startsWith(\"manual-\") &&\n !t.tmdbId.startsWith(\"netflix-\")\n );\n const alreadyComplete = hasTmdbId.filter((t) => t.criticScores && t.runtime);\n const needsMetadata = hasTmdbId.filter((t) => !t.criticScores || !t.runtime);\n\n const toProcess = [...needsLookup, ...needsMetadata];\n\n const results = {\n updated: [],\n skipped: [\n ...alreadyComplete.map((t) => ({\n title: t.title,\n reason: \"Already has metadata\",\n })),\n ...manual.map((t) => ({\n title: t.title,\n reason: \"Manual title (no TMDB ID)\",\n })),\n ],\n errored: [],\n };\n\n for (const title of toProcess) {\n try {\n let effectiveId = title.tmdbId;\n\n // For netflix- titles, search TMDB by name\n if (title.tmdbId.startsWith(\"netflix-\")) {\n const searchUrl =\n `https://api.themoviedb.org/3/search/multi?api_key=${tmdbKey}&query=${\n encodeURIComponent(title.title)\n }&include_adult=false`;\n const searchRes = await fetch(searchUrl);\n if (searchRes.ok) {\n const searchData = await searchRes.json();\n const match = searchData.results?.find((r) =>\n r.media_type === \"movie\" || r.media_type === \"tv\"\n );\n if (match) {\n effectiveId = `${match.media_type}-${match.id}`;\n // Migrate title to new ID\n const old = data.titles[title.tmdbId];\n delete data.titles[title.tmdbId];\n data.titles[effectiveId] = {\n ...old,\n tmdbId: effectiveId,\n type: match.media_type,\n poster: match.poster_path\n ? \"https://image.tmdb.org/t/p/w185\" + match.poster_path\n : old.poster,\n year:\n (match.release_date || match.first_air_date || \"\").slice(\n 0,\n 4,\n ) || old.year,\n };\n // Update list references\n const USERS = [\"Nathan\", \"Faith\"];\n for (const u of USERS) {\n if (data.userLists[u]) {\n data.userLists[u] = data.userLists[u].map((x) =>\n x === title.tmdbId ? effectiveId : x\n );\n }\n if (data.userUnranked[u]) {\n data.userUnranked[u] = data.userUnranked[u].map((x) =>\n x === title.tmdbId ? effectiveId : x\n );\n }\n if (data.watched[u]?.[title.tmdbId] !== undefined) {\n data.watched[u][effectiveId] = data.watched[u][title.tmdbId];\n delete data.watched[u][title.tmdbId];\n }\n if (data.scores[u]?.[title.tmdbId] !== undefined) {\n data.scores[u][effectiveId] = data.scores[u][title.tmdbId];\n delete data.scores[u][title.tmdbId];\n }\n }\n } else {\n results.skipped.push({\n title: title.title,\n reason: \"No TMDB match found by name\",\n });\n continue;\n }\n } else {\n results.errored.push({\n title: title.title,\n reason: `TMDB search HTTP ${searchRes.status}`,\n });\n continue;\n }\n }\n\n // Fetch metadata for the effective TMDB ID\n const parts = effectiveId.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) {\n results.errored.push({\n title: title.title,\n reason: `TMDB HTTP ${res.status}`,\n });\n continue;\n }\n const d = await res.json();\n const fields = [];\n const t = data.titles[effectiveId];\n\n if (mediaType === \"movie\") {\n if (d.runtime && !t.runtime) {\n t.runtime = d.runtime;\n fields.push(\"runtime\");\n }\n } else {\n if (d.number_of_episodes && !t.numEpisodes) {\n t.numEpisodes = d.number_of_episodes;\n fields.push(\"episodes\");\n }\n if (d.number_of_seasons && !t.numSeasons) {\n t.numSeasons = d.number_of_seasons;\n fields.push(\"seasons\");\n }\n const ert = d.episode_run_time;\n if (Array.isArray(ert) && ert.length > 0 && !t.episodeRuntime) {\n t.episodeRuntime = Math.round(\n ert.reduce((a, b) => a + b, 0) / ert.length,\n );\n fields.push(\"ep runtime\");\n }\n }\n\n const imdbId = d.external_ids?.imdb_id || d.imdb_id;\n if (imdbId && omdbKey) {\n try {\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 if (!t.criticScores?.rt && rt) fields.push(\"RT\");\n if (!t.criticScores?.mc && mc) fields.push(\"MC\");\n if (!t.criticScores?.imdbId) fields.push(\"IMDB ID\");\n t.criticScores = { rt, mc, imdbId };\n if (!t.runtime && omdb.Runtime && omdb.Runtime !== \"N/A\") {\n t.runtime = parseInt(omdb.Runtime) || null;\n if (t.runtime) fields.push(\"runtime\");\n }\n }\n }\n } catch {}\n } else if (imdbId && !t.criticScores?.imdbId) {\n t.criticScores = { rt: null, mc: null, imdbId };\n fields.push(\"IMDB ID\");\n }\n\n if (effectiveId !== title.tmdbId) fields.push(\"TMDB ID\");\n\n if (fields.length > 0) {\n results.updated.push({ title: title.title, fields });\n } else {\n results.skipped.push({\n title: title.title,\n reason: \"API returned no new data\",\n });\n }\n } catch (e) {\n results.errored.push({\n title: title.title,\n reason: e?.message || String(e),\n });\n }\n await new Promise((r) => setTimeout(r, 300));\n }\n\n await saveData(data);\n return c.json(results);\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 = await loadData();\n const result = await pushToNotion(data, token, dbId);\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 = await loadData();\n\n for (const row of rows) {\n if (!row) continue;\n const { title, userData } = row;\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) => x !== title.tmdbId);\n data.userUnranked[u] = data.userUnranked[u].filter((x) =>\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;",[],[181,339],"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.",[],[181,163],"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}",[],[181,361,354],"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}",[],[181,361,363],"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.",[],[181,361,163],"008b940e-1533-11f1-aa5e-42dde27851f2",["D",1772344422078],[199,200,201],[181,361],["D",1772344422078],[198,202,203,204],[181],["D",1772344422078],["D",1789455661654],{"_105":104,"_112":108},{"_105":104,"_106":-5,"_107":108,"_18":56,"_109":110,"_111":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":94,"_95":96,"_97":51,"_98":99,"_100":101,"_102":46,"_103":104},"ctx",{"_83":-5,"_134":420,"_421":422,"_423":424,"_425":25,"_426":25,"_427":25,"_428":60,"_429":-5,"_430":-7,"_431":-7,"_432":64,"_433":25,"_434":25,"_435":-5,"_436":25,"_437":25,"_438":25,"_439":-5},"ENV",{"_391":392,"_393":394,"_395":91,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419},"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 · v75