\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}","deleted","label",[183,184,165],"frontend","components","permalink","https://www.val.town/x/n1ck9/BabList/code/frontend/components/ui.tsx","extension","actionData","errors"]