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