function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, openProfile, share, members, openAuth }) { const [isComposeOpen, setComposeOpen] = useState(false); const [composeText, setComposeText] = useState(''); const [isDissolving, setDissolving] = useState(false); const [particles, setParticles] = useState([]); const [activeItem, setActiveItem] = useState(null); const [mounted, setMounted] = useState(false); const appData = isMultiplayer ? sharedData : data; const memberList = isMultiplayer && members?.length > 0 ? members : [{ id: user?.id, displayName: user?.displayName || user?.name || 'You', handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }]; const writePatch = useCallback((patch) => { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData({ ...(data || {}), ...patch }); } }, [isMultiplayer, patchSharedData, setData, data]); useEffect(() => { setMounted(true); }, []); const DEMO_ITEMS = [ { id: 'd1', text: "my ai tutor is kinda... 😳 he generated a poem for me instead of explaining calculus.", reactions: {'🎀': 12, '✨': 44, '💅': 8}, isDemo: true, timestamp: Date.now() - 3600000 }, { id: 'd2', text: "dropping out to become a full time coquette girlie in the metaverse. catch me floating in my virtual silk gown. 💅✨", reactions: {'💖': 89, '🛸': 12}, isDemo: true, timestamp: Date.now() - 7200000 }, { id: 'd3', text: "saw him at main library level 3... holographic jacket, reading vintage poetry. i'm literally malfunctioning. 🤖💘", reactions: {'🛸': 28, '✨': 55}, isDemo: true, timestamp: Date.now() - 86400000 }, ]; const currentConfessions = appData?.confessions?.length > 0 ? appData.confessions : DEMO_ITEMS; const sortedFeed = [...currentConfessions].sort((a, b) => b.timestamp - a.timestamp); const triggerConfetti = (x, y, emoji) => { const newParticles = Array.from({ length: 12 }).map((_, i) => { const angle = (Math.PI * 2 * i) / 12; const velocity = 40 + Math.random() * 40; return { id: Date.now() + i + Math.random(), x, y, emoji, tx: Math.cos(angle) * velocity, ty: Math.sin(angle) * velocity - 20, rot: Math.random() * 360, scale: 0.5 + Math.random() * 1 }; }); setParticles(p => [...p, ...newParticles]); setTimeout(() => { setParticles(p => (p || []).filter(part => !(newParticles || []).find(np => np.id === part.id))); }, 800); }; const handleReact = (id, emoji, e) => { const rect = e.currentTarget.getBoundingClientRect(); triggerConfetti(rect.left + rect.width / 2, rect.top + rect.height / 2, emoji); const updated = (currentConfessions || []).map(c => { if (c.id === id) { return { ...c, reactions: { ...(c.reactions || {}), [emoji]: ((c.reactions || {})[emoji] || 0) + 1 }, isDemo: false }; } return { ...c, isDemo: false }; }); writePatch({ confessions: updated }); }; const submitPost = () => { if (!composeText.trim()) return; setDissolving(true); setTimeout(() => { const ts = Date.now(); const newItem = { id: (ts ?? '').toString(), text: composeText, reactions: {}, timestamp: ts, isDemo: false, isNew: true, _user: { id: user?.id, displayName: user?.displayName || user?.name || 'Anonymous', handle: user?.handle, profileImageUrl: user?.profileImageUrl || user?.avatarUrl }, _timestamp: ts }; if (isMultiplayer && typeof pushToSharedArray === 'function') { pushToSharedArray('confessions', newItem); } else { const baseArray = appData?.confessions?.length > 0 ? appData.confessions : (DEMO_ITEMS || []).map(d => ({...d, isDemo: false})); writePatch({ confessions: [...baseArray, newItem] }); } setComposeText(''); setComposeOpen(false); setDissolving(false); setActiveItem(newItem.id); setTimeout(() => setActiveItem(null), 2000); }, 500); }; return (