React Hono Val Town Starter

\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 onFetchMetadata={(IS_VALTOWN || data?.apiKey)\n ? fetchSingleMetadata\n : null}\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 {(IS_VALTOWN || 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 {(!IS_VALTOWN && !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, {(IS_VALTOWN || 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 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:{\" \"}\n {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 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// ═══════════════════════════════════════════════════════════════════════════════",[],[245,251,257],{"_108":264,"_100":265,"_172":266,"_174":252,"_175":155,"_176":154,"_177":123,"_110":267,"_105":33,"_179":206,"_181":268,"_182":22,"_183":-5,"_184":269,"_104":270},"6f8e87e2-16de-11f1-8156-42dde27851f2","AppComponents.tsx","019cb2e6-e9ae-70ac-b0f6-b6cc4fa7aa91",["D",1772528003510],"/** @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 { IS_VALTOWN, 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 onFetchMetadata,\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 onFetchMetadata={onFetchMetadata}\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 {(IS_VALTOWN || data?.apiKey) && (\n \n +\n \n )}\n \n );\n}\n\n// ── Main App ──",[],[245,251,265],{"_108":272,"_100":273,"_172":274,"_174":252,"_175":155,"_176":154,"_177":123,"_110":275,"_105":33,"_179":206,"_181":276,"_182":22,"_183":-5,"_184":277,"_104":278},"6f8ed6de-16de-11f1-8156-42dde27851f2","platform.tsx","019cb2e6-e9ae-70ac-b0f6-b8682c94361b",["D",1772528003510],"/** @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});",[],[245,251,273],{"_108":280,"_100":281,"_172":282,"_174":252,"_175":155,"_176":154,"_177":123,"_110":283,"_105":33,"_179":206,"_181":284,"_182":22,"_183":-5,"_184":285,"_104":286},"6f8ee372-16de-11f1-8156-42dde27851f2","ui.tsx","019cb2e6-e9ae-70ac-b0f6-bdeb82493e9a",["D",1772528003510],"/** @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\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 {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

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

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

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

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

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

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

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

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

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

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

\n {status}\n

\n )}\n\n \n {importing\n ? \"Importing…\"\n : `Import ${parsed.length} title${\n parsed.length !== 1 ? \"s\" : \"\"\n } to ${user}'s list`}\n \n \n \n );\n}\n\n// ═══════════════════════════════════════════════════════════════════════════════\n// ═══════════════════════════════════════════════════════════════════════════════\n\n// ═══════════════════════════════════════════════════════════════════════════════",[],[245,251,281],[245,251],{"_108":289,"_100":194,"_172":290,"_174":246,"_175":155,"_176":154,"_177":123,"_110":291,"_105":33,"_179":197,"_181":292,"_182":22,"_183":-5,"_184":293,"_104":294},"6f8fab86-16de-11f1-8156-42dde27851f2","019cb2e6-e9ae-70ac-b0f6-c406524006b4",["D",1772528003510],"# 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.",[],[245,194],{"_108":296,"_100":297,"_172":298,"_174":246,"_175":155,"_176":154,"_177":123,"_110":299,"_105":33,"_179":197,"_181":300,"_182":22,"_183":-5,"_184":301,"_104":302},"6f8fb73e-16de-11f1-8156-42dde27851f2","favicon.svg","019cb2e6-e9ae-70ac-b0f6-c9530a2a0420",["D",1772528003510],"",[],[245,297],{"_108":304,"_100":305,"_172":306,"_174":246,"_175":155,"_176":154,"_177":123,"_110":307,"_105":33,"_179":197,"_181":308,"_182":22,"_183":-5,"_184":309,"_104":310},"6f8fbffe-16de-11f1-8156-42dde27851f2","index.html","019cb2e6-e9ae-70ac-b0f6-cd60cbccba68",["D",1772528003510],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[245,305],{"_108":312,"_100":313,"_172":314,"_174":246,"_175":155,"_176":154,"_177":123,"_110":315,"_105":33,"_179":206,"_181":316,"_182":22,"_183":-5,"_184":317,"_104":318},"6f8fc4e0-16de-11f1-8156-42dde27851f2","index.tsx","019cb2e6-e9ae-70ac-b0f6-d1a08d22633a",["D",1772528003510],"/** @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();",[],[245,313],{"_108":320,"_100":321,"_172":322,"_174":246,"_175":155,"_176":154,"_177":123,"_110":323,"_105":33,"_179":197,"_181":324,"_182":22,"_183":-5,"_184":325,"_104":326},"6f8fc9fe-16de-11f1-8156-42dde27851f2","style.css","019cb2e6-e9ae-70ac-b0f6-d539e3a597da",["D",1772528003510],"body {\n font-family:\n -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu,\n Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 0px;\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}",[],[245,321],[245],{"_108":329,"_100":330,"_172":331,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":332,"_105":33,"_179":180,"_181":-5,"_182":22,"_183":-5,"_184":333,"_104":357},"6f8fec7c-16de-11f1-8156-42dde27851f2","shared","019cb2e6-e9ae-70ac-b0f6-e9f47e47bfea",["D",1772528003510],[334,341,349],{"_108":335,"_100":194,"_172":336,"_174":331,"_175":155,"_176":154,"_177":123,"_110":337,"_105":33,"_179":197,"_181":338,"_182":22,"_183":-5,"_184":339,"_104":340},"6f8fd6ce-16de-11f1-8156-42dde27851f2","019cb2e6-e9ae-70ac-b0f6-deecdbe56d90",["D",1772528003510],"# 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.",[],[330,194],{"_108":342,"_100":343,"_172":344,"_174":331,"_175":155,"_176":154,"_177":123,"_110":345,"_105":33,"_179":206,"_181":346,"_182":22,"_183":-5,"_184":347,"_104":348},"6f8fde6c-16de-11f1-8156-42dde27851f2","types.ts","019cb2e6-e9ae-70ac-b0f6-e3e05d86bb9d",["D",1772528003510],"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",[],[330,343],{"_108":350,"_100":351,"_172":352,"_174":331,"_175":155,"_176":154,"_177":123,"_110":353,"_105":33,"_179":206,"_181":354,"_182":22,"_183":-5,"_184":355,"_104":356},"6f8fe470-16de-11f1-8156-42dde27851f2","utils.ts","019cb2e6-e9ae-70ac-b0f6-e78ad4a92e5c",["D",1772528003510],"export interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[330,351],[330],{"_108":359,"_100":194,"_172":360,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":361,"_105":33,"_179":197,"_181":362,"_182":22,"_183":-5,"_184":363,"_104":364},"6f8fede4-16de-11f1-8156-42dde27851f2","019cb2e6-e9ae-70ac-b0f6-ed5465720580",["D",1772528003510],"# 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.",[],[194],{"_108":366,"_100":367,"_172":368,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":369,"_105":33,"_179":370,"_181":371,"_182":22,"_183":-5,"_184":372,"_104":373},"6f8ff712-16de-11f1-8156-42dde27851f2","index.ts","019cb2e6-e9ae-70ac-b0f6-f338807ba733",["D",1772528003510],"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;",[],[367],"files",[169,186,192,201,210,219,226,234,243,249,255,263,271,279,288,295,303,311,319,328,334,341,349,358,365],"counts",{"_378":33,"_379":380,"_381":33,"_382":383,"_387":388},"pulls","branches",2,"forks","envVars",{"_384":385,"_386":33},"count",5,"emptyCount","connections",{"_384":33,"_389":33},"unfilledCount","contents",[392,395,398,401,404],{"_108":170,"_100":171,"_172":173,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":393,"_105":33,"_179":180,"_181":-5,"_182":22,"_183":-5,"_104":394},["D",1772528003510],[171],{"_108":244,"_100":245,"_172":246,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":396,"_105":33,"_179":180,"_181":-5,"_182":22,"_183":-5,"_104":397},["D",1772528003510],[245],{"_108":329,"_100":330,"_172":331,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":399,"_105":33,"_179":180,"_181":-5,"_182":22,"_183":-5,"_104":400},["D",1772528003510],[330],{"_108":359,"_100":194,"_172":360,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":402,"_105":33,"_179":197,"_181":362,"_182":22,"_183":-5,"_104":403},["D",1772528003510],[194],{"_108":366,"_100":367,"_172":368,"_174":-5,"_175":155,"_176":154,"_177":123,"_110":405,"_105":33,"_179":370,"_181":371,"_182":22,"_183":-5,"_104":406},["D",1772528003510],[367],"upstreamProject",{"_108":409,"_100":410,"_116":117,"_118":-5,"_114":115,"_23":411},"41ef0130-f2f5-11ef-891c-569c3dd06744","reactHonoExample",{"_98":412,"_145":413},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_108":158,"_110":416,"_417":418,"_100":46,"_156":109,"_105":419,"_157":420,"_159":421,"_422":423,"_112":-5,"_166":22,"_114":115,"_165":99,"_16":127,"_164":101},["D",1772344422078],"updatedAt",["D",1772534912519],135,"41ef5540-f2f5-11ef-891c-569c3dd06744",244,"lockfileKey","1755661346047-esm.town_v_stevekrouse_reactHonoExample@244-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_98":99,"_100":101,"_102":103,"_106":430,"_436":33,"_437":438,"_439":440,"_446":22,"_447":435,"_448":449,"_452":-5},{"_108":109,"_100":101,"_110":431,"_112":-5,"_113":22,"_114":115,"_116":117,"_118":-5,"_14":119,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":33,"_16":127,"_128":129,"_130":131,"_132":432,"_134":-5,"_135":136,"_137":136,"_138":139,"_140":139,"_141":139,"_142":136,"_143":136,"_23":433,"_147":434,"_152":435,"_166":22},["D",1772344422078],["D",1776306632775],{"_98":99,"_145":146},{"_98":99,"_149":146,"_14":119,"_150":151},{"_105":154,"_100":103,"_108":155,"_156":109,"_157":158,"_159":160,"_161":115,"_162":109,"_163":127,"_164":101,"_165":99},"ahead","behind",26,"diff",{"_441":442,"_182":443,"_444":445},"added",[],[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_108":158,"_110":450,"_417":451,"_100":46,"_156":109,"_105":419,"_157":420,"_159":421,"_422":423,"_112":-5,"_166":22,"_114":115,"_165":99,"_16":127,"_164":101},["D",1772344422078],["D",1772534912519],"pull","actionData","errors"]

n1ck9

BabList

Mergebackup1intomain