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