const { useState, useEffect, useRef } = React; /* ─── data ─────────────────────────────────────────────────────────────── */ // Celebrity photo categories const CATEGORIES = [ 'Red Carpet', 'Candid', 'Events', 'Award Shows', 'Premieres', 'Interviews', 'Behind the Scenes', 'Photoshoots', 'Portraits', 'Magazine', 'Fashion', 'Street Style', 'Concerts', 'Performances', 'Public Appearances', 'Promotional', 'Movie Stills', 'TV Stills', 'Game Characters', 'Game Screenshots', 'Character Art', 'Concept Art', 'Official Artwork', 'Anime', 'Cosplay', 'Fan Art', 'Wallpapers', 'Group Photos', 'Selfies', 'Throwbacks', 'Rare Photos', 'Archives', 'Other' ]; function initial(name) { return (name || '?').split(' ').map(w => w[0]).join('').toUpperCase(); } function fmt(n) { if (n >= 1e6) return (Math.round(n / 1e5) / 10) + 'M'; if (n >= 1e3) return (Math.round(n / 1e2) / 10) + 'K'; return String(n); } // Deterministic color per name, since celebrities are created by users // rather than seeded with a fixed palette. function hueFromName(name) { let hash = 0; for (let i = 0; i < (name || '').length; i++) hash = (hash * 31 + name.charCodeAt(i)) % 360; return hash < 0 ? hash + 360 : hash; } // Curated gradient pairs (not a raw hue-from-name) so a banner never lands // in an ugly high-chroma olive/yellow-green zone — every pair is drawn from // hues that already appear in the ambient background blobs, so profile // banners always feel like part of the same glass palette. const BANNER_GRADIENTS = [ ['oklch(66% 0.19 350)', 'oklch(60% 0.16 290)'], ['oklch(64% 0.17 255)', 'oklch(70% 0.13 205)'], ['oklch(62% 0.18 290)', 'oklch(66% 0.19 350)'], ['oklch(68% 0.14 205)', 'oklch(64% 0.17 255)'], ['oklch(68% 0.17 320)', 'oklch(64% 0.17 255)'], ['oklch(66% 0.19 350)', 'oklch(70% 0.13 205)'], ]; function bannerGradient(name) { const [a, b] = BANNER_GRADIENTS[hueFromName(name) % BANNER_GRADIENTS.length]; return `linear-gradient(135deg, ${a}, ${b})`; } // Smart celebrity search: case-insensitive fuzzy matching that guesses what you're looking for function searchCelebrities(query, celebList) { if (!query || !query.trim()) return []; const q = query.toLowerCase().trim(); // Score each celebrity based on match quality const scored = celebList.map(c => { const name = c.name.toLowerCase(); let score = 0; // Exact match (highest priority) if (name === q) score = 1000; // Starts with query else if (name.startsWith(q)) score = 500; // Contains query as whole word (e.g., "taylor" in "taylor swift") else if (name.split(/\s+/).some(word => word.startsWith(q))) score = 300; // Contains query anywhere else if (name.includes(q)) score = 100; // Fuzzy: all chars of query are in name in order (loose matching) else { let qIdx = 0; for (let i = 0; i < name.length && qIdx < q.length; i++) { if (name[i] === q[qIdx]) qIdx++; } if (qIdx === q.length) score = 50; } return { ...c, score }; }).filter(c => c.score > 0) .sort((a, b) => b.score - a.score); return scored.slice(0, 5); } // Category names as rule34-style tags ("Red Carpet" -> "red_carpet"), so // category is just another tag rather than a separate filter mechanism. function slugTag(str) { return (str || '').toLowerCase().trim().replace(/\s+/g, '_'); } function itemTags(item) { return [...new Set([...(item.tags || []).map(t => t.toLowerCase()), slugTag(item.category)])]; } // Tag frequency across all media, for the popular-tags cloud and autocomplete. function tagCounts(mediaList) { const counts = {}; mediaList.forEach(m => itemTags(m).forEach(t => { counts[t] = (counts[t] || 0) + 1; })); return Object.entries(counts).sort((a, b) => b[1] - a[1]); } // Parse a rule34-style space-separated tag query; every token must match. function parseTagQuery(query) { return query.toLowerCase().trim().split(/\s+/).filter(Boolean); } function getInitialDarkMode() { try { const saved = localStorage.getItem('r34vault-theme'); if (saved) return saved === 'dark'; } catch (e) {} return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); } // Tiny hash router: '#/c/' profile, '#/m/' media page, '#/f/' // public folder, '#/folders' explore public folders, '#/me' library, else home. function parseHash(hash) { const parts = (hash || '').replace(/^#\/?/, '').split('/').filter(Boolean); if (parts[0] === 'c' && parts[1]) return { view: 'profile', id: parts[1] }; if (parts[0] === 'm' && parts[1]) return { view: 'media', id: parts[1] }; if (parts[0] === 'f' && parts[1]) return { view: 'folder', id: parts[1] }; if (parts[0] === 'folders') return { view: 'explore' }; if (parts[0] === 'me') return { view: 'me' }; return { view: 'home' }; } function freshDraft() { return { file: null, fileSelected: false, fileType: null, previewUrl: null, celebrityQuery: '', celebrityId: null, newCelebName: null, category: null, caption: '', tagsInput: '', }; } /* ─── theme ──────────────────────────────────────────────────────────────── */ function makeTheme(dark) { // Glass surfaces need a translucent, blurred background so the floating // color blobs behind the page show through — everything here is // deliberately semi-transparent rather than a flat fill. return dark ? { dark: true, bg: 'transparent', text: 'oklch(96% 0.006 75)', muted: 'oklch(76% 0.012 75)', card: 'oklch(28% 0.02 275 / 0.42)', subtle: 'oklch(32% 0.02 275 / 0.35)', border: 'oklch(100% 0 0 / 0.14)', glassHighlight: 'oklch(100% 0 0 / 0.22)', navBg: 'oklch(14% 0.02 275 / 0.55)', overlay: 'oklch(8% 0.02 275 / 0.55)', accent: 'oklch(68% 0.19 350)', accent2: 'oklch(66% 0.16 255)', accentBorder: 'oklch(68% 0.19 350 / 0.5)', glow: 'oklch(68% 0.19 350 / 0.55)', danger: 'oklch(75% 0.16 25)', dangerBg: 'oklch(35% 0.08 25 / 0.4)', } : { dark: false, bg: 'transparent', text: 'oklch(24% 0.02 275)', muted: 'oklch(42% 0.02 275)', card: 'oklch(100% 0 0 / 0.45)', subtle: 'oklch(100% 0 0 / 0.32)', border: 'oklch(100% 0 0 / 0.5)', glassHighlight: 'oklch(100% 0 0 / 0.75)', navBg: 'oklch(100% 0 0 / 0.4)', overlay: 'oklch(20% 0.02 275 / 0.35)', accent: 'oklch(60% 0.19 350)', accent2: 'oklch(58% 0.16 255)', accentBorder: 'oklch(60% 0.19 350 / 0.5)', glow: 'oklch(60% 0.19 350 / 0.45)', danger: 'oklch(55% 0.18 25)', dangerBg: 'oklch(96% 0.03 25 / 0.7)', }; } /* CSS custom properties so plain CSS (index.html) can share theme colors for hover states that inline styles can't express (:hover, :active). */ function themeVars(theme) { return { '--glass-hover': theme.subtle, '--glass-border': theme.glassHighlight, '--glow': theme.glow }; } /* Frosted-glass surface: translucent fill + blur + a bright top/left inner highlight, which is what reads as "glass" rather than plain transparency. */ function glassStyle(theme, { strong } = {}) { return { background: strong ? theme.card : theme.subtle, backdropFilter: `blur(${strong ? 22 : 14}px) saturate(160%)`, WebkitBackdropFilter: `blur(${strong ? 22 : 14}px) saturate(160%)`, border: `1px solid ${theme.border}`, boxShadow: `inset 0 1px 0 ${theme.glassHighlight}, 0 8px 30px oklch(0% 0 0 / ${theme.dark ? 0.35 : 0.12})`, }; } /* ─── Icon: Google Material Symbols instead of emoji, so glyphs render consistently across OS/browser font support instead of relying on the system emoji font. ── */ function Icon({ name, size = 18, filled = false, style, className }) { return ( ); } /* ─── style helpers ─────────────────────────────────────────────────────── */ const chipBase = { padding: '8px 16px', borderRadius: '999px', fontSize: '13px', fontWeight: '600', cursor: 'pointer', whiteSpace: 'nowrap', userSelect: 'none' }; const chipOff = theme => ({ ...chipBase, ...glassStyle(theme), color: theme.text }); const chipOn = theme => ({ ...chipBase, border: `1px solid ${theme.accentBorder}`, background: `linear-gradient(135deg, ${theme.accent}, ${theme.accent2})`, color: 'white', boxShadow: `0 4px 16px ${theme.glow}` }); /* ─── Avatar (real Wikipedia photo when available, else colored initials) ── */ function Avatar({ name, thumbnail, size, border }) { const hue = hueFromName(name); return (
{!thumbnail && initial(name)}
); } /* ─── MediaCard ─────────────────────────────────────────────────────────── */ // Cards keep the image's natural aspect ratio in the masonry flow (no // cropping) so any photo — tall portrait or wide landscape — sits right; a // short fade-in on load smooths the pop-in for slow or very large images. function MediaCard({ item, showCelebName, liked, canDelete, saved, theme, onOpen, onLike, onDelete, onSave }) { const [hovered, setHovered] = useState(false); const [loaded, setLoaded] = useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ breakInside: 'avoid', marginBottom: '18px', borderRadius: '20px', overflow: 'hidden', position: 'relative', cursor: 'pointer', ...glassStyle(theme) }} > {item.type === 'video' ? (
); } /* ─── App ────────────────────────────────────────────────────────────────── */ function App() { const [view, setView] = useState('home'); const [selectedId, setSelectedId] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [searchFocused, setSearchFocused] = useState(false); const [profileTab, setProfileTab] = useState('All'); const [myTab, setMyTab] = useState('All'); const [currentUser, setCurrentUser] = useState(null); const [signInOpen, setSignInOpen] = useState(false); const [signInEmail, setSignInEmail] = useState(''); const [signInPassword, setSignInPassword] = useState(''); const [authError, setAuthError] = useState(null); const [authBusy, setAuthBusy] = useState(false); const [pendingAction, setPendingAction] = useState(null); const [uploadOpen, setUploadOpen] = useState(false); const [uploadStep, setUploadStep] = useState(1); const [submitting, setSubmitting] = useState(false); const [draft, setDraft] = useState(freshDraft); const [mediaId, setMediaId] = useState(null); const [darkMode, setDarkMode] = useState(getInitialDarkMode); const [toast, setToast] = useState(null); const [celebs, setCelebs] = useState([]); const [media, setMedia] = useState([]); const [wikiCache, setWikiCache] = useState({}); const [initError, setInitError] = useState(null); const [uploadCountToday, setUploadCountToday] = useState(0); const [addCelebOpen, setAddCelebOpen] = useState(false); const [addCelebQuery, setAddCelebQuery] = useState(''); const [addCelebPreview, setAddCelebPreview] = useState(null); const [addCelebLoading, setAddCelebLoading] = useState(false); const [addCelebImage, setAddCelebImage] = useState(null); const [addCelebImagePreview, setAddCelebImagePreview] = useState(null); const [addCelebImageUrl, setAddCelebImageUrl] = useState(''); const [editCelebOpen, setEditCelebOpen] = useState(false); const [editCelebId, setEditCelebId] = useState(null); const [editCelebName, setEditCelebName] = useState(''); const [editCelebBio, setEditCelebBio] = useState(''); const [editCelebImage, setEditCelebImage] = useState(null); const [editCelebImageUrl, setEditCelebImageUrl] = useState(''); const [editCelebImagePreview, setEditCelebImagePreview] = useState(null); const [editCelebLoading, setEditCelebLoading] = useState(false); const [folders, setFolders] = useState([]); const [libraryFolder, setLibraryFolder] = useState('all'); // 'all' | 'liked' | a folder id const [viewFolderId, setViewFolderId] = useState(null); const [viewedFolder, setViewedFolder] = useState(undefined); // undefined = loading, null = not found/private const [privacyCache, setPrivacyCache] = useState({}); // uid -> current isPrivate, looked up live (not frozen at upload time) const [publicFolders, setPublicFolders] = useState([]); const [exploreCat, setExploreCat] = useState('All'); const [saveModalItem, setSaveModalItem] = useState(null); const [editProfileOpen, setEditProfileOpen] = useState(false); const [editProfileName, setEditProfileName] = useState(''); const [editProfileImage, setEditProfileImage] = useState(null); const [editProfileImagePreview, setEditProfileImagePreview] = useState(null); const [editProfilePrivate, setEditProfilePrivate] = useState(false); const [editProfileLoading, setEditProfileLoading] = useState(false); const toastTimer = useRef(null); const searchInputRef = useRef(null); const getCeleb = id => celebs.find(c => c.id === id); const theme = makeTheme(darkMode); useEffect(() => { try { localStorage.setItem('r34vault-theme', darkMode ? 'dark' : 'light'); } catch (e) {} document.body.classList.toggle('dark', darkMode); }, [darkMode]); /* ── hash routing: URL drives view/selectedId/mediaId, so profiles and media pages are directly linkable and back/forward work as expected ── */ useEffect(() => { const applyRoute = () => { const route = parseHash(window.location.hash); if (route.view === 'profile') { setView('profile'); setSelectedId(route.id); setProfileTab('All'); setSearchQuery(''); } else if (route.view === 'media') { setView('media'); setMediaId(route.id); } else if (route.view === 'folder') { setView('folder'); setViewFolderId(route.id); } else if (route.view === 'explore') { setView('explore'); setExploreCat('All'); } else if (route.view === 'me') { setView('me'); setSearchQuery(''); } else { setView('home'); setSelectedId(null); } }; applyRoute(); window.addEventListener('hashchange', applyRoute); return () => window.removeEventListener('hashchange', applyRoute); }, []); const showToast = msg => { if (toastTimer.current) clearTimeout(toastTimer.current); setToast(msg); toastTimer.current = setTimeout(() => setToast(null), 2600); }; /* ── live data ── */ useEffect(() => { let unsubAuth, unsubCelebs, unsubMedia; window.BackendReady.then(() => { unsubAuth = window.Backend.onAuthChange(setCurrentUser); unsubCelebs = window.Backend.subscribeCelebrities(setCelebs); unsubMedia = window.Backend.subscribeMedia(setMedia); }).catch(err => { console.error(err); setInitError(err.message || String(err)); }); return () => { unsubAuth && unsubAuth(); unsubCelebs && unsubCelebs(); unsubMedia && unsubMedia(); }; }, []); /* ── keep the "X/5 used today" count fresh on My Library, not just when the upload modal is opened — otherwise it shows a stale 0 on devices/sessions where the upload modal was never opened ── */ useEffect(() => { if (view !== 'me' || !currentUser) return; window.Backend.getUploadCountToday(currentUser.uid) .then(setUploadCountToday) .catch(err => console.error(err)); }, [view, currentUser]); /* ── personal save/bookmark folders — subscribed whenever signed in, regardless of view, so the save-to-folder button works from anywhere ── */ useEffect(() => { if (!currentUser) { setFolders([]); setLibraryFolder('all'); return; } const unsub = window.Backend.subscribeFolders(currentUser.uid, setFolders); return () => unsub && unsub(); }, [currentUser]); /* ── public folder page (#/f/) — a plain one-off fetch, not a subscription; the security rule decides whether it comes back at all ── */ useEffect(() => { if (view !== 'folder' || !viewFolderId) return; setViewedFolder(undefined); window.Backend.getFolder(viewFolderId) .then(f => setViewedFolder(f && (f.isPublic || (currentUser && f.ownerUid === currentUser.uid)) ? f : null)) .catch(() => setViewedFolder(null)); }, [view, viewFolderId, currentUser]); /* ── explore public folders (#/folders) ── */ useEffect(() => { if (view !== 'explore') return; const unsub = window.Backend.subscribePublicFolders(setPublicFolders); return () => unsub && unsub(); }, [view]); /* ── Wikipedia enrichment for celebrity avatars/bios ── */ useEffect(() => { celebs.forEach(c => { if (wikiCache[c.name] !== undefined) return; setWikiCache(prev => (prev[c.name] !== undefined ? prev : { ...prev, [c.name]: null })); window.Backend.fetchWikiSummary(c.name) .then(summary => setWikiCache(prev => ({ ...prev, [c.name]: summary }))) .catch(() => {}); }); // eslint-disable-next-line }, [celebs]); /* ── live privacy lookup for the media page's "Uploaded by" line — the poster's *current* isPrivate setting governs every post they've ever made, not just posts uploaded after they flipped it, so this can't use the posterIsPrivate value frozen onto the media doc at upload time ── */ useEffect(() => { const item = mediaId ? media.find(m => m.id === mediaId) : null; if (!item || privacyCache[item.uploaderUid] !== undefined) return; window.Backend.getUserSettings(item.uploaderUid) .then(settings => setPrivacyCache(prev => ({ ...prev, [item.uploaderUid]: !!settings.isPrivate }))) .catch(() => {}); // eslint-disable-next-line }, [mediaId, media]); // Safe here (after all hooks above, before any hooks below) — an early // return can't sit between two hook calls without breaking the Rules of // Hooks, but nothing after this point in the component calls a hook. if (initError) { return (
Couldn't connect
{initError}
); } /* navigation — pushing a hash keeps profile/media pages linkable and lets browser back/forward work; the hashchange listener above applies the resulting state */ const goHome = () => { window.location.hash = ''; setView('home'); setSelectedId(null); }; const openProfile = id => { window.location.hash = `#/c/${id}`; setView('profile'); setSelectedId(id); setProfileTab('All'); setSearchQuery(''); }; const openMedia = id => { window.location.hash = `#/m/${id}`; setView('media'); setMediaId(id); }; /* tag search: clicking a popular tag toggles it in the query (AND search); clicking an autocomplete suggestion completes whatever's being typed. */ const toggleSearchTag = tag => { const tokens = parseTagQuery(searchQuery); const idx = tokens.indexOf(tag); const next = idx >= 0 ? tokens.filter((_, i) => i !== idx) : [...tokens, tag]; setSearchQuery(next.join(' ')); }; const applyTagSuggestion = tag => { const tokens = parseTagQuery(searchQuery); tokens[tokens.length - 1] = tag; setSearchQuery(tokens.join(' ') + ' '); if (searchInputRef.current) searchInputRef.current.focus(); }; /* auth gate: run `action(user)` now if signed in, else prompt sign-in first and run it once that succeeds. Passes the fresh user object from the sign-in result rather than relying on `currentUser` state, since the onAuthChange listener updating that state can lag slightly behind the sign-in promise resolving. */ const requireAuth = action => { if (currentUser) { action(currentUser); return; } setPendingAction(() => action); setSignInOpen(true); }; const finishSignIn = user => { setSignInOpen(false); setSignInEmail(''); setSignInPassword(''); setAuthError(null); if (pendingAction) { const action = pendingAction; setPendingAction(null); action(user); } }; const onSignInSubmit = async e => { e.preventDefault(); setAuthError(null); setAuthBusy(true); try { const cred = await window.Backend.signInOrSignUp(signInEmail, signInPassword); finishSignIn(cred.user); } catch (err) { setAuthError(err.message.replace('Firebase: ', '')); } finally { setAuthBusy(false); } }; const onGoogleSignIn = async () => { setAuthError(null); setAuthBusy(true); try { const cred = await window.Backend.signInGoogle(); finishSignIn(cred.user); } catch (err) { setAuthError(err.message.replace('Firebase: ', '')); } finally { setAuthBusy(false); } }; const onSignOut = () => window.Backend.signOutUser(); /* navigation: your own library, mirrors a celebrity profile page */ const goToMyLibrary = () => { requireAuth(() => { window.location.hash = '#/me'; setView('me'); setSearchQuery(''); }); }; /* follow / like */ const toggleFollow = (id, e) => { if (e) e.stopPropagation(); requireAuth(async user => { const celeb = getCeleb(id); if (!celeb) return; const isFollowing = celeb.followedBy.includes(user.uid); try { await window.Backend.toggleFollow(id, user.uid, isFollowing); } catch (err) { console.error(err); showToast('Could not update follow — try again.'); } }); }; const toggleLike = (id, e) => { if (e) e.stopPropagation(); requireAuth(async user => { const item = media.find(m => m.id === id); if (!item) return; const isLiked = item.likedBy.includes(user.uid); try { await window.Backend.toggleLike(id, user.uid, isLiked); } catch (err) { console.error(err); showToast('Could not update like — try again.'); } }); }; const deleteMedia = (id, e) => { if (e) e.stopPropagation(); if (!confirm('Delete this upload? This can\'t be undone.')) return; window.Backend.deleteMedia(id) .then(() => { if (mediaId === id) goHome(); }) .catch(err => { console.error(err); showToast('Could not delete — try again.'); }); }; /* folders: personal save/bookmark boards, always private to the owner */ const selectLibraryFolder = key => { setLibraryFolder(key); setMyTab('All'); }; const openNewFolder = () => { requireAuth(async user => { const name = (prompt('Folder name:') || '').trim(); if (!name) return; try { const id = await window.Backend.createFolder(user.uid, name); selectLibraryFolder(id); } catch (err) { console.error(err); showToast('Could not create folder — try again.'); } }); }; const renameActiveFolder = folder => { const name = (prompt('Rename folder:', folder.name) || '').trim(); if (!name || name === folder.name) return; window.Backend.renameFolder(folder.id, name).catch(err => { console.error(err); showToast('Could not rename folder — try again.'); }); }; const deleteActiveFolder = folder => { if (!confirm(`Delete "${folder.name}"? This can't be undone.`)) return; window.Backend.deleteFolder(folder.id) .then(() => selectLibraryFolder('all')) .catch(err => { console.error(err); showToast('Could not delete folder — try again.'); }); }; const toggleActiveFolderPublic = folder => { window.Backend.setFolderPublic(folder.id, !folder.isPublic).catch(err => { console.error(err); showToast('Could not update folder — try again.'); }); }; const setActiveFolderCategory = (folder, category) => { window.Backend.setFolderCategory(folder.id, category || null).catch(err => { console.error(err); showToast('Could not update folder — try again.'); }); }; const copyFolderLink = folder => { const url = `${window.location.origin}${window.location.pathname}#/f/${folder.id}`; navigator.clipboard.writeText(url) .then(() => showToast('Folder link copied.')) .catch(() => showToast(url)); }; const openSaveModal = (item, e) => { if (e) e.stopPropagation(); requireAuth(() => setSaveModalItem(item)); }; const closeSaveModal = () => setSaveModalItem(null); const toggleSaveInFolder = (folder, mediaItem) => { const inFolder = (folder.mediaIds || []).includes(mediaItem.id); window.Backend.toggleFolderItem(folder.id, mediaItem.id, inFolder).catch(err => { console.error(err); showToast('Could not update folder — try again.'); }); }; const createFolderAndSave = () => { requireAuth(async user => { const name = (prompt('Folder name:') || '').trim(); if (!name || !saveModalItem) return; try { const id = await window.Backend.createFolder(user.uid, name); await window.Backend.toggleFolderItem(id, saveModalItem.id, false); } catch (err) { console.error(err); showToast('Could not create folder — try again.'); } }); }; /* profile: name, photo, privacy */ const openEditProfile = () => { if (!currentUser) return; setEditProfileName(currentUser.displayName || ''); setEditProfileImage(null); setEditProfileImagePreview(currentUser.photoURL || null); setEditProfilePrivate(false); setEditProfileOpen(true); window.Backend.getUserSettings(currentUser.uid) .then(settings => setEditProfilePrivate(!!settings.isPrivate)) .catch(err => console.error(err)); }; const closeEditProfile = () => { if (editProfileImagePreview && !editProfileImagePreview.startsWith('http')) { URL.revokeObjectURL(editProfileImagePreview); } setEditProfileOpen(false); setEditProfileImage(null); setEditProfileImagePreview(null); }; const handleEditProfileImageChange = e => { const file = e.target.files[0]; if (!file) return; setEditProfileImage(file); setEditProfileImagePreview(URL.createObjectURL(file)); }; const submitEditProfile = async () => { if (!editProfileName.trim() || !currentUser) return; setEditProfileLoading(true); try { let photoURL = editProfileImagePreview; if (editProfileImage) { const uploaded = await window.Backend.uploadToR2(editProfileImage); photoURL = uploaded.url; } await window.Backend.updateUserProfile({ displayName: editProfileName.trim(), photoURL: photoURL || null }); await window.Backend.setUserPrivate(currentUser.uid, editProfilePrivate); // updateProfile mutates the same auth.currentUser object in place, so // React won't see a changed reference — force a re-render with a copy. setCurrentUser(u => u ? { ...u } : u); closeEditProfile(); showToast('Profile updated.'); } catch (err) { console.error(err); showToast('Could not update profile — try again.'); } finally { setEditProfileLoading(false); } }; /* upload */ const openUpload = () => { requireAuth(async user => { setUploadOpen(true); setUploadStep(1); setDraft(freshDraft()); try { setUploadCountToday(await window.Backend.getUploadCountToday(user.uid)); } catch (err) { console.error(err); } }); }; const closeUpload = () => { if (draft.previewUrl) URL.revokeObjectURL(draft.previewUrl); setUploadOpen(false); setUploadStep(1); setDraft(freshDraft()); }; const handleFileChange = e => { const file = e.target.files[0]; if (!file) return; const fileType = file.type.startsWith('video/') ? 'video' : 'image'; const previewUrl = URL.createObjectURL(file); setDraft(d => ({ ...d, file, fileSelected: true, fileType, previewUrl })); }; const submitUpload = async () => { setSubmitting(true); try { let celebId = draft.celebrityId; let celebName; if (celebId === '__new__') { const newName = draft.newCelebName || draft.celebrityQuery || 'New celebrity'; celebId = await window.Backend.createCelebrity({ name: newName, bio: '' }); celebName = newName; } else { celebName = (getCeleb(celebId) || {}).name; } const tags = draft.tagsInput.split(',').map(t => t.trim()).filter(Boolean); const category = draft.category || 'Candid'; await window.Backend.uploadMedia({ file: draft.file, celebrityId: celebId, category, caption: draft.caption || '', tags: tags.length ? tags : [celebName ? celebName.toLowerCase() : 'new'], uploaderUid: currentUser.uid, uploaderHandle: currentUser.displayName || (currentUser.email || '').split('@')[0] || 'user', }); setUploadCountToday(n => n + 1); closeUpload(); showToast(`Uploaded to ${celebName || 'new page'} · ${category}`); } catch (err) { console.error(err); showToast(`Upload failed: ${err.message}`); } finally { setSubmitting(false); } }; /* add celebrity by name with Wikipedia preview */ const openAddCeleb = () => { setAddCelebOpen(true); setAddCelebQuery(''); setAddCelebPreview(null); }; const closeAddCeleb = () => { if (addCelebImagePreview) URL.revokeObjectURL(addCelebImagePreview); setAddCelebOpen(false); setAddCelebQuery(''); setAddCelebPreview(null); setAddCelebImage(null); setAddCelebImagePreview(null); setAddCelebImageUrl(''); }; const handleAddCelebImageChange = e => { const file = e.target.files[0]; if (!file) return; const previewUrl = URL.createObjectURL(file); setAddCelebImage(file); setAddCelebImagePreview(previewUrl); setAddCelebImageUrl(''); }; const handleAddCelebImageUrl = (url) => { setAddCelebImageUrl(url); if (url.trim()) { setAddCelebImage(null); setAddCelebImagePreview(url); } else { setAddCelebImagePreview(null); } }; const openEditCeleb = (celebId) => { const celeb = getCeleb(celebId); if (!celeb) return; setEditCelebId(celebId); setEditCelebName(celeb.name); setEditCelebBio(celeb.bio || ''); const currentThumbnail = celeb.thumbnail || wikiCache[celeb.name]?.thumbnail || ''; setEditCelebImageUrl(''); setEditCelebImage(null); setEditCelebImagePreview(currentThumbnail); setEditCelebOpen(true); }; const closeEditCeleb = () => { if (editCelebImagePreview && !editCelebImagePreview.startsWith('http')) { URL.revokeObjectURL(editCelebImagePreview); } setEditCelebOpen(false); setEditCelebId(null); setEditCelebName(''); setEditCelebBio(''); setEditCelebImage(null); setEditCelebImageUrl(''); setEditCelebImagePreview(null); }; const handleEditCelebImageChange = e => { const file = e.target.files[0]; if (!file) return; const previewUrl = URL.createObjectURL(file); setEditCelebImage(file); setEditCelebImagePreview(previewUrl); setEditCelebImageUrl(''); }; const handleEditCelebImageUrl = (url) => { setEditCelebImageUrl(url); if (url.trim()) { setEditCelebImage(null); setEditCelebImagePreview(url); } else { setEditCelebImagePreview(null); } }; const submitEditCeleb = async () => { if (!editCelebName.trim() || !editCelebId) return; setEditCelebLoading(true); try { let thumbnailUrl = editCelebImagePreview; // Upload file if selected if (editCelebImage) { try { const uploaded = await window.Backend.uploadToR2(editCelebImage); thumbnailUrl = uploaded.url; } catch (err) { console.error('Image upload failed:', err); } } await window.Backend.updateCelebrity(editCelebId, { name: editCelebName, bio: editCelebBio, thumbnail: thumbnailUrl || null }); setWikiCache(prev => ({ ...prev, [editCelebName]: { title: editCelebName, description: editCelebBio, thumbnail: thumbnailUrl } })); closeEditCeleb(); showToast(`Updated ${editCelebName}!`); } catch (err) { console.error(err); showToast(`Error updating celebrity: ${err.message}`); } finally { setEditCelebLoading(false); } }; const handleSearchCeleb = async (name) => { if (!name.trim()) { setAddCelebPreview(null); return; } setAddCelebLoading(true); try { const preview = await window.Backend.fetchWikiSummary(name); setAddCelebPreview(preview); } catch (err) { setAddCelebPreview({ name, error: 'Could not find Wikipedia entry. You can still create a page manually.' }); } finally { setAddCelebLoading(false); } }; const submitAddCeleb = async () => { const name = addCelebQuery.trim(); if (!name) return; setAddCelebLoading(true); try { let celebThumbnail = null; let celebBio = ''; const hasCustomImage = addCelebImage || addCelebImageUrl.trim(); // Only use wiki info if no custom image provided if (!hasCustomImage) { celebThumbnail = addCelebPreview?.thumbnail || null; celebBio = addCelebPreview?.description || ''; } // Upload custom image if provided if (addCelebImage) { try { const uploaded = await window.Backend.uploadToR2(addCelebImage); celebThumbnail = uploaded.url; } catch (err) { console.error('Image upload failed:', err); } } else if (addCelebImageUrl.trim()) { celebThumbnail = addCelebImageUrl.trim(); } const celebId = await window.Backend.createCelebrity({ name, bio: celebBio, thumbnail: celebThumbnail || null }); setWikiCache(prev => ({ ...prev, [name]: { title: name, description: celebBio, thumbnail: celebThumbnail } })); closeAddCeleb(); showToast(`Added ${name} to r34vault!`); openProfile(celebId); } catch (err) { console.error(err); showToast(`Error creating celebrity: ${err.message}`); } finally { setAddCelebLoading(false); } }; const MAX_UPLOADS_PER_DAY = window.Backend?.MAX_UPLOADS_PER_DAY || 5; const dailyLimitReached = uploadCountToday >= MAX_UPLOADS_PER_DAY; /* ── computed ── */ const q = searchQuery.trim().toLowerCase(); // rule34-style search: space-separated tags, every token must match a tag // (exact or prefix) on the item — category counts as a tag too. const allTagCounts = tagCounts(media); const popularTags = allTagCounts.slice(0, 24); const searchTokens = parseTagQuery(searchQuery); const homeMedia = (() => { let ms = media; if (searchTokens.length) { ms = ms.filter(m => { const tags = itemTags(m); return searchTokens.every(tok => tags.some(t => t === tok || t.startsWith(tok))); }); } return ms.map(m => ({ ...m, celebName: (getCeleb(m.celebrityId) || {}).name || '' })); })(); // Autocomplete: suggest full tags completing whatever's currently being typed. const searchPartial = (searchQuery && !searchQuery.endsWith(' ')) ? (searchTokens[searchTokens.length - 1] || '') : ''; const tagSuggestions = (searchFocused && searchPartial) ? allTagCounts.filter(([t]) => t !== searchPartial && t.startsWith(searchPartial)).slice(0, 8) : []; const matchingCelebs = q ? searchCelebrities(searchQuery, celebs) : []; const selectedCeleb = selectedId ? getCeleb(selectedId) : null; const profileMedia = selectedCeleb ? media.filter(m => m.celebrityId === selectedCeleb.id) : []; const profileCats = [...new Set(profileMedia.map(m => m.category))]; const profileFiltered = profileTab === 'All' ? profileMedia : profileMedia.filter(m => m.category === profileTab); const mItem = mediaId ? media.find(m => m.id === mediaId) : null; const mCeleb = mItem ? getCeleb(mItem.celebrityId) : null; const mMore = mItem ? media.filter(m => m.celebrityId === mItem.celebrityId && m.id !== mItem.id).slice(0, 8) : []; const myMedia = currentUser ? media.filter(m => m.uploaderUid === currentUser.uid).map(m => ({ ...m, celebName: (getCeleb(m.celebrityId) || {}).name || '' })) : []; const likedMedia = currentUser ? media.filter(m => m.likedBy.includes(currentUser.uid)).map(m => ({ ...m, celebName: (getCeleb(m.celebrityId) || {}).name || '' })) : []; const activeFolder = (libraryFolder !== 'all' && libraryFolder !== 'liked') ? folders.find(f => f.id === libraryFolder) : null; const folderMedia = activeFolder ? media.filter(m => (activeFolder.mediaIds || []).includes(m.id)).map(m => ({ ...m, celebName: (getCeleb(m.celebrityId) || {}).name || '' })) : []; // Reset to 'all' if the selected folder got deleted out from under us. const libraryBase = libraryFolder === 'all' ? myMedia : libraryFolder === 'liked' ? likedMedia : (activeFolder ? folderMedia : myMedia); const myCats = [...new Set(libraryBase.map(m => m.category))]; const myFiltered = myTab === 'All' ? libraryBase : libraryBase.filter(m => m.category === myTab); const isSaved = id => folders.some(f => (f.mediaIds || []).includes(id)); const viewedFolderMedia = viewedFolder ? media.filter(m => (viewedFolder.mediaIds || []).includes(m.id)).map(m => ({ ...m, celebName: (getCeleb(m.celebrityId) || {}).name || '' })) : []; const exploreCats = [...new Set(publicFolders.map(f => f.category).filter(Boolean))]; const exploreFiltered = exploreCat === 'All' ? publicFolders : publicFolders.filter(f => f.category === exploreCat); /* upload draft helpers */ const chosenCeleb = draft.celebrityId && draft.celebrityId !== '__new__' ? getCeleb(draft.celebrityId) : null; const isNewCeleb = draft.celebrityId === '__new__'; const suggestions = (draft.celebrityQuery && !draft.celebrityId) ? searchCelebrities(draft.celebrityQuery, celebs) : []; const step2Valid = !!(chosenCeleb || isNewCeleb) && !!draft.category; const stepValid = (uploadStep === 1 && draft.fileSelected) || (uploadStep === 2 && step2Valid) || uploadStep >= 3; const reviewCelebName = isNewCeleb ? (draft.newCelebName || draft.celebrityQuery || 'New celebrity') : (chosenCeleb ? chosenCeleb.name : '—'); const chosenLabel = isNewCeleb ? `New page: "${draft.newCelebName || draft.celebrityQuery}"` : (chosenCeleb ? chosenCeleb.name : ''); /* ── render ── */ return (
{/* ── Navbar: frosted glass bar floating over the color blobs ── */}
R34VAULT
setSearchQuery(e.target.value)} onFocus={() => setSearchFocused(true)} onBlur={() => setTimeout(() => setSearchFocused(false), 120)} style={{ width: '100%', padding: '10px 16px', borderRadius: '999px', ...glassStyle(theme), color: theme.text }} /> {tagSuggestions.length > 0 && (
{tagSuggestions.map(([tag, count]) => (
applyTagSuggestion(tag)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '9px 14px', cursor: 'pointer', fontSize: '13px' }}> #{tag} {fmt(count)}
))}
)}
{currentUser ? (
) : ( )}
{/* ── Home ── */} {view === 'home' && (
{/* Celebrity strip */} {celebs.length === 0 ? (
No celebrity pages yet — upload a photo to create the first one.
) : (
{celebs.map(c => (
openProfile(c.id)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px', cursor: 'pointer', flex: 'none', width: '76px' }}>
{c.name}
))}
)} {/* Popular tags — rule34-style tag cloud, click to add/remove from the search */} {popularTags.length > 0 && (
Popular tags
{popularTags.map(([tag, count]) => (
toggleSearchTag(tag)} style={searchTokens.includes(tag) ? chipOn(theme) : chipOff(theme)}> #{tag} {fmt(count)}
))}
)} {/* People results */} {q && matchingCelebs.length > 0 && (
People
{matchingCelebs.map(mc => (
openProfile(mc.id)} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 16px 8px 8px', borderRadius: '999px', cursor: 'pointer', ...glassStyle(theme) }}>
{mc.name}
))}
)} {/* Masonry grid */} {homeMedia.length === 0 ? (
No photos yet — be the first to upload one!
) : (
{homeMedia.map(item => ( openMedia(item.id)} onLike={e => toggleLike(item.id, e)} onDelete={e => deleteMedia(item.id, e)} onSave={e => openSaveModal(item, e)} /> ))}
)}
)} {/* ── Profile ── */} {view === 'profile' && selectedCeleb && (
← Back to r34vault
{/* Banner — a saturated color wash the glass panel below will overlap */}
{/* Frosted glass info panel — its own negative margin overlaps the banner, but the panel's height is independent (grows downward with content), so long names/bios never get clipped. */}
{selectedCeleb.name}
{wikiCache[selectedCeleb.name]?.description || selectedCeleb.bio || 'No bio yet'} · {fmt(selectedCeleb.followedBy.length)} followers
{/* Profile tabs */}
{['All', ...profileCats].map(cat => (
setProfileTab(cat)} style={cat === profileTab ? chipOn(theme) : chipOff(theme)}>{cat}
))}
{/* Profile masonry */} {profileFiltered.length === 0 ? (
No photos for {selectedCeleb.name} yet.
) : (
{profileFiltered.map(item => ( openMedia(item.id)} onLike={e => toggleLike(item.id, e)} onDelete={e => deleteMedia(item.id, e)} onSave={e => openSaveModal(item, e)} /> ))}
)}
)} {/* ── My Library ── */} {view === 'me' && currentUser && (
← Back to r34vault
{/* Banner */}
{/* Frosted glass info panel */}
{currentUser.displayName || currentUser.email}
{myMedia.length} upload{myMedia.length === 1 ? '' : 's'} · {uploadCountToday}/{MAX_UPLOADS_PER_DAY} used today
{/* Folders: your uploads, a private Liked folder, and any custom save/bookmark folders you've created ── */}
selectLibraryFolder('all')} style={libraryFolder === 'all' ? chipOn(theme) : chipOff(theme)}> All uploads
selectLibraryFolder('liked')} style={libraryFolder === 'liked' ? chipOn(theme) : chipOff(theme)}> Liked
{folders.map(f => (
selectLibraryFolder(f.id)} style={libraryFolder === f.id ? chipOn(theme) : chipOff(theme)}> {f.name}{f.isPublic && }
))}
+ New folder
{activeFolder && (
renameActiveFolder(activeFolder)} style={{ cursor: 'pointer', fontWeight: '600', color: theme.muted }}>Rename folder
toggleActiveFolderPublic(activeFolder)} style={{ cursor: 'pointer', fontWeight: '600', color: theme.muted }}> {activeFolder.isPublic ? 'Make private' : 'Make public'}
deleteActiveFolder(activeFolder)} style={{ cursor: 'pointer', fontWeight: '600', color: theme.danger }}>Delete folder
{activeFolder.isPublic && (
copyFolderLink(activeFolder)} style={{ cursor: 'pointer', fontWeight: '600', color: theme.muted }}>Copy link
Listed in Explore folders so others can find it.
 )}
)} {libraryFolder === 'liked' && (
Only visible to you.
)} {/* Library tabs */}
{['All', ...myCats].map(cat => (
setMyTab(cat)} style={cat === myTab ? chipOn(theme) : chipOff(theme)}>{cat}
))}
{/* Library masonry */} {myFiltered.length === 0 ? (
{libraryFolder === 'all' && "You haven't uploaded anything yet."} {libraryFolder === 'liked' && "You haven't liked anything yet."} {activeFolder && 'This folder is empty — save posts here from anywhere on the site.'}
) : (
{myFiltered.map(item => ( openMedia(item.id)} onLike={e => toggleLike(item.id, e)} onDelete={e => deleteMedia(item.id, e)} onSave={e => openSaveModal(item, e)} /> ))}
)}
)} {/* ── Public folder page (#/f/) — the folder owner's identity is never shown here, even though the caller is authorized to view the folder: exposing "created by @handle" would undermine a private profile's whole point if that same user made one folder public. ── */} {view === 'folder' && (
← Back to r34vault
{viewedFolder === undefined ? (
Loading…
) : viewedFolder === null ? (
This folder is private or doesn't exist.
) : (
{viewedFolder.name}
{viewedFolderMedia.length} item{viewedFolderMedia.length === 1 ? '' : 's'}
{viewedFolderMedia.length === 0 ? (
This folder is empty.
) : (
{viewedFolderMedia.map(item => ( openMedia(item.id)} onLike={e => toggleLike(item.id, e)} onDelete={e => deleteMedia(item.id, e)} onSave={e => openSaveModal(item, e)} /> ))}
)} )}
)} {/* ── Explore public folders (#/folders) — the only way to find a public folder without already having its link. Folder ownership is never shown here either, same reasoning as the folder page itself. ── */} {view === 'explore' && (
Explore folders
Public folders other people have shared.
{['All', ...exploreCats].map(cat => (
setExploreCat(cat)} style={cat === exploreCat ? chipOn(theme) : chipOff(theme)}>{cat}
))}
{exploreFiltered.length === 0 ? (
No public folders yet — make one of yours public from My Library.
) : (
{exploreFiltered.map(f => (
{ window.location.hash = `#/f/${f.id}`; setView('folder'); setViewFolderId(f.id); }} style={{ width: '220px', padding: '18px', borderRadius: '18px', cursor: 'pointer', ...glassStyle(theme) }}>
{f.name}
{(f.mediaIds || []).length} item{(f.mediaIds || []).length === 1 ? '' : 's'}{f.category ? ` · ${f.category}` : ''}
))}
)}
)} {/* ── Media page: every photo/video gets its own linkable, shareable page (#/m/) instead of a modal, so it can be opened directly or shared. ── */} {view === 'media' && (
{!mItem ? (
{media.length === 0 ? 'Loading…' : "This upload doesn't exist or was removed."}
) : (
mCeleb ? openProfile(mCeleb.id) : goHome()} style={{ padding: '16px 16px 0', fontSize: '13px', fontWeight: '600', color: theme.muted, cursor: 'pointer', width: 'fit-content' }}> ← Back to {mCeleb ? mCeleb.name : 'r34vault'}
{/* Media */}
{mItem.type === 'video' ? (
{/* Details */}
{mCeleb && (
openProfile(mCeleb.id)} style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
{mCeleb.name}
)}
{mItem.caption}
{mItem.category}
{mItem.tags.map(tag => (
#{tag}
))}
toggleLike(mItem.id, e)} className="glass-chip" style={(currentUser && mItem.likedBy.includes(currentUser.uid)) ? { display: 'inline-flex', alignItems: 'center', gap: '5px', fontSize: '13px', fontWeight: '700', padding: '7px 14px', borderRadius: '999px', cursor: 'pointer', background: `linear-gradient(135deg, ${theme.accent}, ${theme.accent2})`, color: 'white', boxShadow: `0 4px 16px ${theme.glow}` } : { display: 'inline-flex', alignItems: 'center', gap: '5px', fontSize: '13px', fontWeight: '700', padding: '7px 14px', borderRadius: '999px', cursor: 'pointer', color: theme.text, ...glassStyle(theme) }}> {fmt(mItem.likedBy.length)}
openSaveModal(mItem, e)} className="glass-chip" style={isSaved(mItem.id) ? { display: 'inline-flex', alignItems: 'center', gap: '5px', fontSize: '13px', fontWeight: '700', padding: '7px 14px', borderRadius: '999px', cursor: 'pointer', background: `linear-gradient(135deg, ${theme.accent}, ${theme.accent2})`, color: 'white', boxShadow: `0 4px 16px ${theme.glow}` } : { display: 'inline-flex', alignItems: 'center', gap: '5px', fontSize: '13px', fontWeight: '700', padding: '7px 14px', borderRadius: '999px', cursor: 'pointer', color: theme.text, ...glassStyle(theme) }}> Save
{(privacyCache[mItem.uploaderUid] ?? mItem.posterIsPrivate) ? 'Posted by r34vault' : `Uploaded by @${mItem.uploaderHandle}`}
showToast('Reported — thanks for flagging this.')} style={{ fontSize: '12px', color: theme.danger, cursor: 'pointer', width: 'fit-content' }}> Report content
{currentUser && mItem.uploaderUid === currentUser.uid && (
deleteMedia(mItem.id, e)} style={{ fontSize: '12px', color: theme.danger, cursor: 'pointer', width: 'fit-content', fontWeight: '600' }}> Delete this upload
)}
{/* More from this celeb */} {mCeleb && mMore.length > 0 && (
More from {mCeleb.name}
{mMore.map(item => ( openMedia(item.id)} onLike={e => toggleLike(item.id, e)} onDelete={e => deleteMedia(item.id, e)} onSave={e => openSaveModal(item, e)} /> ))}
)} )}
)} {/* ── Sign In ── */} {signInOpen && (
{ setSignInOpen(false); setPendingAction(null); setAuthError(null); }} style={{ position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, background: theme.overlay, backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', zIndex: 110, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
e.stopPropagation()} onSubmit={onSignInSubmit} style={{ padding: '32px', borderRadius: '24px', width: '360px', maxWidth: '90vw', display: 'flex', flexDirection: 'column', gap: '14px', ...glassStyle(theme, { strong: true }) }}>
Sign in to r34vault
New here? Just enter an email + password — an account is created automatically.
setSignInEmail(e.target.value)} style={{ padding: '11px 14px', borderRadius: '10px', border: `1px solid ${theme.border}`, background: theme.subtle, color: theme.text, fontSize: '14px' }} /> setSignInPassword(e.target.value)} style={{ padding: '11px 14px', borderRadius: '10px', border: `1px solid ${theme.border}`, background: theme.subtle, color: theme.text, fontSize: '14px' }} /> {authError &&
{authError}
}
or
)} {/* ── Upload ── */} {uploadOpen && (
e.stopPropagation()} style={{ borderRadius: '24px', width: '480px', maxWidth: '100%', maxHeight: '90vh', overflow: 'auto', padding: '28px', display: 'flex', flexDirection: 'column', gap: '20px', ...glassStyle(theme, { strong: true }) }}> {/* Header */}
Upload to r34vault
{/* Step dots */}
{[1, 2, 3, 4].map(i => (
))}
{dailyLimitReached ? (
You've used all {MAX_UPLOADS_PER_DAY} uploads for today — try again tomorrow.
) : (
{uploadCountToday} of {MAX_UPLOADS_PER_DAY} uploads used today
)} {/* Step 1 — file */} {uploadStep === 1 && (
Choose a photo or video
{draft.previewUrl && ( draft.fileType === 'video' ? (
)} {/* Step 2 — celebrity + category */} {uploadStep === 2 && (
Tag the celebrity
{!(chosenCeleb || isNewCeleb) ? (
{ const v = e.target.value; setDraft(d => ({ ...d, celebrityQuery: v, celebrityId: null, newCelebName: null })); }} style={{ width: '100%', padding: '11px 14px', borderRadius: '10px', border: `1px solid ${theme.border}`, background: theme.subtle, color: theme.text, fontSize: '14px' }} /> {suggestions.length > 0 && (
{suggestions.map(s => (
setDraft(d => ({ ...d, celebrityId: s.id, celebrityQuery: s.name }))} style={{ padding: '10px 14px', cursor: 'pointer', fontSize: '13px', borderBottom: `1px solid ${theme.border}` }}> {s.name}
))}
)} {draft.celebrityQuery && suggestions.length === 0 && (
setDraft(d => ({ ...d, newCelebName: d.celebrityQuery, celebrityId: '__new__' }))} style={{ marginTop: '6px', padding: '10px 14px', borderRadius: '10px', border: `1px dashed ${theme.border}`, fontSize: '13px', cursor: 'pointer', color: theme.accent, fontWeight: '600' }}> + Create new page for "{draft.celebrityQuery}"
)}
) : (
{chosenLabel}
setDraft(d => ({ ...d, celebrityId: null, newCelebName: null, celebrityQuery: '' }))} style={{ cursor: 'pointer', fontSize: '12px', color: theme.muted, fontWeight: '600' }}>Change
)}
Category
{CATEGORIES.map(cat => (
setDraft(d => ({ ...d, category: cat }))} style={cat === draft.category ? chipOn(theme) : chipOff(theme)}>{cat}
))}
)} {/* Step 3 — caption + tags */} {uploadStep === 3 && (
Add details