// Accounts & moderation — mock auth, login modal, sidebar account block, // toast dispatcher, and shared loading/empty/error states. // All state is mocked; no real Clerk/Turnstile/network calls. // ── Extra icons (merged into the shared ic map) ───────────────────────────── const ic2 = { user: , login: , logout: , upload: , inbox: , gear: , shield: , lock: , ban: , mute: , users: , list2: , gauge: , trash: , empty: , google: , discord: , }; const AVATAR_COLORS = [ 'oklch(0.62 0.16 25)', 'oklch(0.62 0.15 50)', 'oklch(0.60 0.14 145)', 'oklch(0.58 0.15 200)', 'oklch(0.56 0.16 265)', 'oklch(0.58 0.17 310)', 'oklch(0.60 0.15 95)', 'oklch(0.58 0.15 170)', ]; const NICK_ADJ = ['Pixel', 'Spike', 'Cherry', 'Quantum', 'Neon', 'Turbo', 'Velvet', 'Cosmic', 'Iron', 'Lunar', 'Static', 'Crimson', 'Echo', 'Frost']; const NICK_NOUN = ['Drifter', 'Runner', 'Jumper', 'Phantom', 'Voyager', 'Saver', 'Maverick', 'Specter', 'Climber', 'Nomad', 'Glider', 'Warden']; function genIdentity() { const a = NICK_ADJ[Math.floor(Math.random() * NICK_ADJ.length)]; const n = NICK_NOUN[Math.floor(Math.random() * NICK_NOUN.length)]; const num = Math.floor(Math.random() * 90) + 10; const nick = `${a}${n}${num}`; const color = AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)]; return { nick, color, initial: a[0].toUpperCase() }; } // Persisted identity so the nickname stays stable across reloads. function loadIdentity() { try { const saved = localStorage.getItem('archive_identity'); if (saved) return JSON.parse(saved); } catch (e) {} const id = genIdentity(); try { localStorage.setItem('archive_identity', JSON.stringify(id)); } catch (e) {} return id; } // ── Avatar ────────────────────────────────────────────────────────────────── function Avatar({ identity, size = 26, className = '' }) { return ( {identity.initial} ); } // ── Toast dispatcher ───────────────────────────────────────────────────────── // App registers window.__pushToast; this helper is the public surface. function pushToast(title, sub, kind) { if (window.__pushToast) window.__pushToast({ title, sub: sub || '', kind: kind || 'success' }); } // ── Clerk-style login modal (mock) ────────────────────────────────────────── function LoginModal({ onClose, onAuthed, identity }) { const [mode, setMode] = React.useState('signin'); // signin | signup const [email, setEmail] = React.useState(''); const [busy, setBusy] = React.useState(null); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const authViaSocial = (provider) => { setBusy(provider); setTimeout(() => { onAuthed(); pushToast('Signed in', 'Welcome back, ' + identity.nick, 'success'); }, 850); }; const authViaEmail = (e) => { e.preventDefault(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { pushToast('Invalid email', 'Enter a valid address', 'error'); return; } setBusy('email'); setTimeout(() => { onAuthed(); pushToast('Signed in', 'Welcome, ' + identity.nick, 'success'); }, 850); }; return (
e.stopPropagation()}>

{mode === 'signin' ? 'Sign in to Archive' : 'Create your account'}

{mode === 'signin' ? 'Welcome back — pick a method to continue' : 'Join to submit games and post reviews'}

or
setEmail(e.target.value)} disabled={!!busy} />
{ic2.lock} Secured by Clerk
{mode === 'signin' ? <>No account? setMode('signup')}>Sign up : <>Have an account? setMode('signin')}>Sign in}
); } function Spinner({ light }) { return ; } // ── Sidebar account block ─────────────────────────────────────────────────── function AccountBlock({ auth, identity, onOpenLogin, onLogout, onView }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); if (auth === 'out') { return (
); } const isAdmin = auth === 'admin'; return (
{open && (
{identity.nick}
{isAdmin ? 'Administrator' : 'Member'}
{isAdmin && ( setOpen(false)}> {ic2.shield}Admin Dashboard {window.ic.ext} )}
)}
); } // ── Shared states: Skeleton / Empty / Error ───────────────────────────────── function SkeletonList({ rows = 3 }) { return (
{Array.from({ length: rows }).map((_, i) => (
))}
); } function EmptyState({ icon, title, sub }) { return (
{icon || ic2.empty}

{title}

{sub &&

{sub}

}
); } function ErrorState({ title, sub, onRetry }) { return (
{window.ic.warning}

{title || 'Something went wrong'}

{sub &&

{sub}

} {onRetry && }
); } // ── Turnstile mock ────────────────────────────────────────────────────────── function Turnstile({ verified, onVerify }) { const [loading, setLoading] = React.useState(false); const trigger = () => { if (verified || loading) return; setLoading(true); setTimeout(() => { setLoading(false); onVerify(true); }, 900); }; return (
{!loading && window.ic.check}
{loading ? 'Verifying…' : verified ? 'Verified' : "I'm not a robot"} CLOUDFLARE
Privacy · Terms
); } // Merge extra icons into the shared map and export. Object.assign(window.ic, ic2); Object.assign(window, { ic2, AVATAR_COLORS, genIdentity, loadIdentity, Avatar, pushToast, LoginModal, Spinner, AccountBlock, SkeletonList, EmptyState, ErrorState, Turnstile, });