Question

{q}

Your response

{layoutLabel}

{respDisplay} {respLong && !expanded && onExpandMore ? ( <> {' '} ) : null}

); } const plain = kudo.text || ''; const isLong = truncateAt > 0 && (plain || []).length > truncateAt; return (

{isLong && !expanded ? ( <> {(plain || []).slice(0, truncateAt)}… ) : ( plain )}

); } const BAD_WORDS = [ 'nigger', 'nigga', 'faggot', 'retard', 'chink', 'spic', 'kike', 'wetback', 'tranny', 'slut', 'whore', 'cunt', 'bitch', 'bastard', 'asshole', 'motherfucker', 'fucker', 'fuck', 'shit', 'dick', 'pussy', 'cock' ]; function hasBlockedWord(text) { const s = String(text || '').toLowerCase(); return (BAD_WORDS || []).some((w) => (s || []).includes(w)); } /** If the platform returns a Promise from setData/setSharedData/patch/push, wait for it. */ async function awaitMaybePromise(v) { if (v != null && typeof v.then === 'function') await v; } /** Hosts often hydrate the feed from `saveData` / shared blob — merge kudos here, not only `pushToSharedArray`. */ async function persistKudosAppend(getLatestAppData, saveData, newKudo, extraPatch, attempts = 3) { for (let i = 0; i < attempts; i++) { const latest = getLatestAppData() || {}; const cur = Array.isArray(latest.kudos) ? latest.kudos : []; const rest = (cur || []).filter((k) => k && k.id !== newKudo.id); await awaitMaybePromise(saveData({ ...latest, ...extraPatch, kudos: [newKudo, ...rest] })); if (i < attempts - 1) await new Promise((r) => setTimeout(r, 45)); } } /** One-time hard-delete matcher for Bryant Wu authored content. */ function isLegacyBryantWuTestUser(u) { if (!u || typeof u !== 'object') return false; const nm = (s) => String(s || '').trim().toLowerCase(); const name = nm(u.name); const handle = nm(u.handle); const displayName = nm(u.displayName); if ((name || []).includes('bryant') && (name || []).includes('wu')) return true; if ((displayName || []).includes('bryant') && (displayName || []).includes('wu')) return true; if (handle === 'bryantwu' || handle === 'bryant_wu') return true; return false; } function isBryantKudoUser(k) { return isLegacyBryantWuTestUser(k?._user || {}); } /** Real signed-in author (exclude guests / anon) — for report + visibility rules. */ function isRealCampusAuthorId(id) { if (id == null || id === '') return false; const s = String(id); if (s === 'anon') return false; if (s.startsWith('guest-')) return false; return true; } /** Prefer `user.id`, then `user._id` — some A1Zap/embed hosts only set one. */ function getAccountUserId(user) { if (!user || typeof user !== 'object') return null; const a = user.id; const b = user._id; const v = a != null && String(a).trim() !== '' ? a : b; if (v == null || String(v).trim() === '') return null; return v; } /** Real A1Zap login — anonymous / guest viewers may still have an id-like field; use getAccountUserId + flags. */ function isA1ZapSignedIn(user) { const uid = getAccountUserId(user); if (uid == null) return false; const s = String(uid); if (s === 'anon' || s === 'anonymous') return false; if (s.startsWith('guest-')) return false; if (user.isGuest === true || user.isAnonymous === true || user.anonymous === true) return false; if (user.sessionType === 'guest' || user.sessionType === 'anonymous') return false; return true; } function canReportKudoAsSpam(kudo, viewerUserId) { if (!viewerUserId || !kudo || kudo.isDemo) return false; if (!isRealCampusAuthorId(kudo._user?.id)) return false; if (String(kudo._user.id) === String(viewerUserId)) return false; return true; } function getKudoImageUrls(kudo, imageUrlsMap) { /** @type {string[]} */ const out = []; if (Array.isArray(kudo.imageUrls) && (kudo.imageUrls || []).length) return kudo.imageUrls; const ids = kudo.imageAssetIds?.length ? kudo.imageAssetIds : (kudo.imageAssetId ? [kudo.imageAssetId] : []); for (const id of ids) { const u = imageUrlsMap[id]; if (u) out.push(u); } if (!(out || []).length && kudo.imageUrl) out.push(kudo.imageUrl); return out; } function KudoImageCarousel({ urls, isDark, primary }) { const [idx, setIdx] = useState(0); const touchStartX = useRef(null); const urlSigRef = useRef(''); const urlSig = (urls || []).join('|'); useEffect(() => { if (urlSig !== urlSigRef.current) { urlSigRef.current = urlSig; setIdx(0); } }, [urlSig]); if (!urls || (urls || []).length === 0) return null; const go = (dir) => { setIdx(i => { const n = (urls || []).length; if (n <= 1) return 0; return (i + dir + n) % n; }); }; const dotOff = isDark ? 'rgba(255,255,255,0.28)' : 'rgba(0,0,0,0.22)'; const single = (urls || []).length === 1; return (

{ touchStartX.current = e.touches[0].clientX; }} onTouchEnd={(e) => { const x = touchStartX.current; if (x == null || single) return; const dx = e.changedTouches[0].clientX - x; if (dx > 52) go(-1); else if (dx < -52) go(1); touchStartX.current = null; }} >

{(urls || []).map((url, i) => (

))}

{!single && (

{(urls || []).map((_, i) => (

)}

); } function IconSun({ color }) { return ( ); } function IconMoon({ color }) { return ( ); } function IconMail({ color }) { return ( ); } function IconBook({ color }) { return ( ); } function IconGlobe({ color }) { return ( ); } function IconUsers({ color }) { return ( ); } function IconHeart({ color }) { return ( ); } function IconDiary({ color }) { return ( ); } function IconUpload({ color }) { return ( ); } function IconChevronRight({ color }) { return ( ); } function App({ trackEventName, user, data, setData, isMultiplayer, sharedData, setSharedData, pushToSharedArray, members, openProfile, openAuth, share, ai, pickAndUploadPhoto, resolveImageUrl, getImageUrl, pickAndUploadVideo, getVideoUrl }) { const personalData = data || {}; const appData = (isMultiplayer && sharedData) ? sharedData : (data || {}); const saveData = isMultiplayer ? setSharedData : setData; const hasGratitudeKudosPlus = appData?.gratitudeKudosPlus === true; const sharedDataRef = useRef(sharedData); const dataRef = useRef(data); const hasHydratedRef = useRef(false); /** One-shot migrations: if `saveData`/`setSharedData` identity changes every render, effects must not re-save stale snapshots (that can wipe a kudo just posted). */ const bryantMigrationDoneRef = useRef(false); const anonymousSeedPostsDoneRef = useRef(false); if (sharedData != null) { sharedDataRef.current = sharedData; if (isMultiplayer) hasHydratedRef.current = true; } if (data !== undefined) { dataRef.current = data ?? {}; if (!isMultiplayer) hasHydratedRef.current = true; } const getLatestAppData = useCallback( () => (isMultiplayer ? (sharedDataRef.current || {}) : (dataRef.current || {})), [isMultiplayer] ); const getLatestPersonalData = useCallback(() => (dataRef.current || {}), []); const getTodayKey = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; }; const [threeLines, setThreeLines] = useState(['', '', '']); const [composeAnonymous, setComposeAnonymous] = useState(false); const [composePublicName, setComposePublicName] = useState(''); const [composeError, setComposeError] = useState(''); const [composePhotos, setComposePhotos] = useState([]); const [composeMedia, setComposeMedia] = useState(null); const [showNewCircleModal, setShowNewCircleModal] = useState(false); const [showFriendModal, setShowFriendModal] = useState(false); const [showInbox, setShowInbox] = useState(false); const [newCircleName, setNewCircleName] = useState(''); const [newCircleMemberIds, setNewCircleMemberIds] = useState([]); const [isPosting, setIsPosting] = useState(false); const [localKudos, setLocalKudos] = useState([]); const [localPostUnlockKey, setLocalPostUnlockKey] = useState(null); const [justPosted, setJustPosted] = useState(false); const [showSavedModal, setShowSavedModal] = useState(false); const [showPastKudosModal, setShowPastKudosModal] = useState(false); const [imageUrls, setImageUrls] = useState({}); const [reactingKudoId, setReactingKudoId] = useState(null); const [expandedKudoId, setExpandedKudoId] = useState(null); const [showGratitudePromptPage, setShowGratitudePromptPage] = useState(false); const [promptComposeAnonymous, setPromptComposeAnonymous] = useState(false); const [gratitudePromptIndex, setGratitudePromptIndex] = useState(0); const [gratitudePromptCustomMode, setGratitudePromptCustomMode] = useState(false); const [gratitudeCustomPromptText, setGratitudeCustomPromptText] = useState(''); /** 0 = one long box, 1 = two boxes, 2 = three boxes (default). */ const [gratitudeAnswerLayout, setGratitudeAnswerLayout] = useState(2); const [gratitudePromptAnswerLines, setGratitudePromptAnswerLines] = useState(['', '', '']); const [showGratitudePaywall, setShowGratitudePaywall] = useState(false); const todayKey = getTodayKey(); const accountUserId = getAccountUserId(user); const reactorId = accountUserId || personalData?.guestId || personalData?.guestReactorId || ''; const DEMO_KUDOS = useMemo(() => [ { id: 'demo-1', text: 'Grateful for my study group pulling an all-nighter at the PCL together. We survived orgo and came out stronger.', imageUrl: null, circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: true, hearts: ['demo-a', 'demo-b', 'demo-c'], emojiReactions: { '🙏': ['demo-a'], '❤️': ['demo-b', 'demo-c'] }, comments: [], _user: { name: 'Alex C', handle: 'alexc', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alex' }, _timestamp: Date.now() - 3600000 }, { id: 'demo-2', text: 'A stranger held the door open at the Union and said "you got this" right before my presentation. I did, in fact, got this.', imageUrl: null, circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: true, hearts: ['demo-c'], emojiReactions: { '✨': ['demo-a'], '😊': ['demo-b'] }, comments: [], _user: { name: 'Jordan K', handle: 'jordank', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jordan' }, _timestamp: Date.now() - 7200000 }, { id: 'demo-3', text: 'The sunset from the Tower tonight was unreal. Moments like these remind me why I chose this school.', imageUrl: null, imageUrls: [ 'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&q=80&w=800', 'https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?auto=format&fit=crop&q=80&w=800', 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&q=80&w=800' ], circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: true, hearts: ['demo-a', 'demo-b', 'demo-c', 'demo-d'], emojiReactions: { '🧡': ['demo-d', 'demo-e'], '🙏': ['demo-a'] }, comments: [], _user: { name: 'Sam W', handle: 'samw', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sam' }, _timestamp: Date.now() - 86400000 } ], [todayKey]); const serverKudosList = useMemo( () => (isMultiplayer ? (sharedData?.kudos || []) : (data?.kudos || [])), [isMultiplayer, sharedData?.kudos, data?.kudos] ); const feed = useMemo(() => { const merged = [...localKudos, ...(serverKudosList || [])]; const unique = (merged || []).filter((k, index, self) => index === (self || []).findIndex((t) => t.id === k.id) ); return unique .filter((k) => !isBryantKudoUser(k)) .sort((a, b) => { const ha = Array.isArray(a?.hearts) ? (a.hearts || []).length : 0; const hb = Array.isArray(b?.hearts) ? (b.hearts || []).length : 0; if (hb !== ha) return hb - ha; return (b._timestamp || 0) - (a._timestamp || 0); }); }, [serverKudosList, localKudos]); const mySpamReportKeys = useMemo(() => { const s = new Set(); if (!accountUserId) return s; const add = (list) => { (Array.isArray(list) ? list : []).forEach((r) => { if (String(r.reporterId) === String(accountUserId) && r.kind && r.targetId != null) { s.add(`${r.kind}:${String(r.targetId)}`); } }); }; add(personalData?.spamReportsV1); add(appData?.spamReportsV1); return s; }, [personalData?.spamReportsV1, appData?.spamReportsV1, accountUserId]); /** Per-device / per-account only — never read from shared `appData` or a stranger's key can skip the composer. */ const lastThreeKudosPostDateKey = personalData?.lastThreeKudosPostDateKey; const hasPostedToday = useMemo(() => { // Guests can browse the public feed without posting. // Signed-in users only need to post once to unlock the feed permanently. if (!accountUserId) return true; if (localPostUnlockKey) return true; if (lastThreeKudosPostDateKey) return true; return (feed || []).some((k) => { if (k.isDemo) return false; if (!reactorId || k._user?.id == null) return false; return String(k._user.id) === String(reactorId); }); }, [accountUserId, feed, reactorId, lastThreeKudosPostDateKey, localPostUnlockKey]); const showDailyGratitudeGate = Boolean(accountUserId && !hasPostedToday); const myHearts = useMemo(() => { if (!reactorId) return []; return (feed || []).filter((k) => { const hearts = Array.isArray(k?.hearts) ? k.hearts : []; return (hearts || []).some((h) => String(h) === String(reactorId)); }); }, [feed, reactorId]); const memberList = useMemo(() => { if (isMultiplayer && Array.isArray(members) && (members || []).length > 0) return members; return [{ id: accountUserId || 'anon', displayName: user?.name || 'You', handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }]; }, [isMultiplayer, members, user, accountUserId]); const getMemberById = useCallback((id) => { if (!id) return null; return (memberList || []).find(m => m && m.id === id) || null; }, [memberList]); // Circles are removed; treat everyone as part of the UT community. const friendsByUser = {}; const customCircles = []; const activeCircleId = CIRCLE_COMMUNITY; const gratitudeMode = 'three'; const myFriendIds = useMemo(() => [], []); const setActiveCircle = useCallback(() => { // Circles are disabled; nothing to switch. }, []); const postTargetCircleId = CIRCLE_COMMUNITY; const filteredFeed = useMemo(() => { const list = feed || []; const heartN = (k) => (Array.isArray(k?.hearts) ? (k.hearts || []).length : 0); return [...list].sort((a, b) => { const hb = heartN(b); const ha = heartN(a); if (hb !== ha) return hb - ha; if (reactorId) { const aMine = String(a?._user?.id || '') === String(reactorId); const bMine = String(b?._user?.id || '') === String(reactorId); if (aMine !== bMine) return aMine ? -1 : 1; } return (b._timestamp || 0) - (a._timestamp || 0); }); }, [feed, reactorId]); useEffect(() => { if (typeof getImageUrl !== 'function') return; (feed || []).forEach(kudo => { const ids = kudo.imageAssetIds?.length ? kudo.imageAssetIds : (kudo.imageAssetId ? [kudo.imageAssetId] : []); (ids || []).forEach(assetId => { if (assetId && !imageUrls[assetId]) { getImageUrl(assetId).then(url => { if (url) setImageUrls(prev => ({ ...prev, [assetId]: url })); }).catch(() => {}); } }); }); }, [feed, getImageUrl, imageUrls]); useEffect(() => { if (accountUserId) return; const personal = getLatestPersonalData(); const needMigrateGuestId = !personal?.guestId && personal?.guestReactorId; const needNewGuestId = !personal?.guestId && !personal?.guestReactorId; if (!needMigrateGuestId && !needNewGuestId) return; void (async () => { if (needNewGuestId) { await awaitMaybePromise( setData({ ...personal, guestId: `guest-${Date.now()}-${Math.random().toString(36).slice(2, 10)}` }) ); } else if (needMigrateGuestId) { await awaitMaybePromise(setData({ ...personal, guestId: personal.guestReactorId })); } })(); }, [accountUserId, getLatestPersonalData, setData]); useEffect(() => { if (!hasHydratedRef.current || bryantMigrationDoneRef.current) return; const latest = getLatestAppData(); if (latest?.bryantNameKudosResetV8) { bryantMigrationDoneRef.current = true; return; } let kudos = Array.isArray(latest?.kudos) ? [...latest.kudos] : []; kudos = (kudos || []).filter((k) => !isBryantKudoUser(k)); bryantMigrationDoneRef.current = true; saveData({ ...latest, kudos, bryantNameKudosResetV8: true }); setLocalKudos((prev) => (Array.isArray(prev) ? (prev || []).filter((k) => !isBryantKudoUser(k)) : prev)); }, [getLatestAppData, saveData]); // One-time seed: add 5 anonymous kudos requested by user. useEffect(() => { if (!hasHydratedRef.current || anonymousSeedPostsDoneRef.current) return; const latest = getLatestAppData(); if (latest?.anonymousSeedKudosV1) { anonymousSeedPostsDoneRef.current = true; return; } const now = Date.now(); const seeded = [ { id: 'seed-anon-1', text: '1. my umbrella\n2. my bestest friends\n3. free handouts in the EER!', circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: false, anonymous: true, hearts: [], emojiReactions: {}, comments: [], _user: { id: 'anon-seed-1', name: 'Anonymous', handle: null, avatarUrl: null }, _timestamp: now - 5000 }, { id: 'seed-anon-2', text: '1. New phone\n2. New shoes\n3. I cleaned my room today', circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: false, anonymous: true, hearts: [], emojiReactions: {}, comments: [], _user: { id: 'anon-seed-2', name: 'Anonymous', handle: null, avatarUrl: null }, _timestamp: now - 4000 }, { id: 'seed-anon-3', text: '1. the girl in the dg sweatshit who gave me the spare hairtie ❤️\n2. iced vanilla late from lucky lab\n3. my big', circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: false, anonymous: true, hearts: [], emojiReactions: {}, comments: [], _user: { id: 'anon-seed-3', name: 'Anonymous', handle: null, avatarUrl: null }, _timestamp: now - 3000 }, { id: 'seed-anon-4', text: '1. PCL 8 hrs\n2. TA actually doing something\n3. Roommate my goat', circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: false, anonymous: true, hearts: [], emojiReactions: {}, comments: [], _user: { id: 'anon-seed-4', name: 'Anonymous', handle: null, avatarUrl: null }, _timestamp: now - 2000 }, { id: 'seed-anon-5', text: '1. Target\n2. Gong Cha\n3. UT pho', circleId: CIRCLE_COMMUNITY, dateKey: todayKey, isDemo: false, anonymous: true, hearts: [], emojiReactions: {}, comments: [], _user: { id: 'anon-seed-5', name: 'Anonymous', handle: null, avatarUrl: null }, _timestamp: now - 1000 } ]; const existing = Array.isArray(latest?.kudos) ? latest.kudos : []; const existingIds = new Set((existing || []).map((k) => String(k?.id || ''))); const toInsert = (seeded || []).filter((k) => !existingIds.has(String(k.id))); anonymousSeedPostsDoneRef.current = true; if (!(toInsert || []).length) { saveData({ ...latest, anonymousSeedKudosV1: true }); return; } saveData({ ...latest, kudos: [...toInsert, ...existing], anonymousSeedKudosV1: true }); setLocalKudos((prev) => { const cur = Array.isArray(prev) ? prev : []; const curIds = new Set((cur || []).map((k) => String(k?.id || ''))); const add = (toInsert || []).filter((k) => !curIds.has(String(k.id))); return (add || []).length ? [...add, ...cur] : cur; }); }, [getLatestAppData, saveData, setLocalKudos, todayKey]); const playChime = () => { try { const win = typeof window !== 'undefined' ? window : null; if (!win) return; let ctx; if (typeof win.AudioContext === 'function') { ctx = new win.AudioContext(); } else if (typeof win.webkitAudioContext === 'function') { ctx = new win.webkitAudioContext(); } else { return; } const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); osc.type = 'sine'; osc.frequency.setValueAtTime(523.25, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(783.99, ctx.currentTime + 0.12); osc.frequency.exponentialRampToValueAtTime(1046.5, ctx.currentTime + 0.24); gain.gain.setValueAtTime(0.15, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4); osc.start(); osc.stop(ctx.currentTime + 0.4); } catch (e) {} }; const handleHeart = useCallback((kudoId) => { if (!reactorId || !hasHydratedRef.current) return; void trackEventName?.("hearted_kudos", { kudoId }); playChime(); void (async () => { const latest = getLatestAppData(); const currentKudos = Array.isArray(latest?.kudos) ? [...latest.kudos] : []; const updated = (currentKudos || []).map((k) => { if (k.id !== kudoId) return k; const hearts = Array.isArray(k.hearts) ? k.hearts : []; const has = (hearts || []).some((id) => String(id) === String(reactorId)); const next = has ? (hearts || []).filter((id) => String(id) !== String(reactorId)) : [...hearts, reactorId]; return { ...k, hearts: next }; }); await awaitMaybePromise(saveData({ ...latest, kudos: updated })); })(); }, [getLatestAppData, reactorId, saveData]); const handleEmojiReact = useCallback((kudoId, emoji) => { if (!reactorId || !hasHydratedRef.current) return; void trackEventName?.("reacted_emoji_kudos", { kudoId, emoji }); setReactingKudoId(kudoId); setTimeout(() => setReactingKudoId(null), 400); void (async () => { const latest = getLatestAppData(); const currentKudos = Array.isArray(latest?.kudos) ? [...latest.kudos] : []; const updated = (currentKudos || []).map((k) => { if (k.id !== kudoId) return k; const reactions = k.emojiReactions || {}; const users = reactions[emoji] || []; const hasReacted = (users || []).some((id) => String(id) === String(reactorId)); const updatedUsers = hasReacted ? (users || []).filter((id) => String(id) !== String(reactorId)) : [...users, reactorId]; return { ...k, emojiReactions: { ...reactions, [emoji]: updatedUsers } }; }); await awaitMaybePromise(saveData({ ...latest, kudos: updated })); })(); }, [getLatestAppData, reactorId, saveData]); const handleReportSpam = useCallback( (kind, targetId) => { if (!accountUserId || !targetId || !hasHydratedRef.current) return; void trackEventName?.("reported_kudos_spam", { kind, targetId: String(targetId) }); const tid = String(targetId); const personal = getLatestPersonalData(); const pList = Array.isArray(personal?.spamReportsV1) ? personal.spamReportsV1 : []; const already = (list) => (Array.isArray(list) ? list : []).some( (r) => String(r.reporterId) === String(accountUserId) && r.kind === kind && String(r.targetId) === tid ); if (already(pList)) return; const row = { id: `spam-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, kind, targetId: tid, reporterId: accountUserId, reason: 'spam', createdAt: Date.now() }; void (async () => { try { await awaitMaybePromise(setData({ ...personal, spamReportsV1: [...pList, row] })); if (isMultiplayer) { const latest = getLatestAppData(); const sList = Array.isArray(latest?.spamReportsV1) ? latest.spamReportsV1 : []; if (!already(sList)) { await awaitMaybePromise(saveData({ ...latest, spamReportsV1: [...sList, row] })); } } } catch (e) { console.error('Report spam failed', e); } })(); }, [accountUserId, getLatestPersonalData, getLatestAppData, setData, saveData, isMultiplayer] ); const handlePickPhoto = useCallback(async () => { if (typeof pickAndUploadPhoto !== 'function') return; try { const result = await pickAndUploadPhoto({ target: isMultiplayer ? 'shared' : 'personal', visibility: 'instance_private' }); if (result && !result.cancelled) { setComposePhotos(prev => [...prev, { assetId: result.assetId, publicUrl: result.publicUrl }]); } } catch (err) { console.error('Photo pick failed:', err); } }, [pickAndUploadPhoto, isMultiplayer]); const handleUploadPhoto = useCallback(async () => { if (typeof pickAndUploadPhoto !== 'function') return; try { const result = await pickAndUploadPhoto({ target: isMultiplayer ? 'shared' : 'personal', visibility: 'instance_private', source: 'camera' }); if (result && !result.cancelled) { setComposePhotos(prev => [...prev, { assetId: result.assetId, publicUrl: result.publicUrl }]); } } catch (err) { // fallback (some surfaces ignore source) try { const result = await pickAndUploadPhoto({ target: isMultiplayer ? 'shared' : 'personal', visibility: 'instance_private' }); if (result && !result.cancelled) { setComposePhotos(prev => [...prev, { assetId: result.assetId, publicUrl: result.publicUrl }]); } } catch (e2) { console.error('Camera failed:', e2); } } }, [pickAndUploadPhoto, isMultiplayer]); const removeComposePhotoAt = useCallback((index) => { setComposePhotos(prev => (prev || []).filter((_, i) => i !== index)); }, []); // Day/Night toggle removed; app stays on a single theme. // (Keeping this function would reintroduce shared/global theme behavior.) const createCustomCircle = useCallback(() => { if (!newCircleName.trim() || !accountUserId || !hasHydratedRef.current) return; const id = 'circle-' + Date.now(); const memberIds = [...new Set([...(newCircleMemberIds || []), accountUserId])]; const latest = getLatestAppData(); const circles = [...(Array.isArray(latest.customCircles) ? latest.customCircles : [])]; circles.push({ id, name: newCircleName.trim(), memberIds, createdBy: accountUserId }); saveData({ ...latest, customCircles: circles, activeCircleId: id }); setNewCircleName(''); setNewCircleMemberIds([]); setShowNewCircleModal(false); }, [newCircleName, newCircleMemberIds, accountUserId, getLatestAppData, saveData]); const toggleNewCircleMember = useCallback((memberId) => { if (!memberId || memberId === accountUserId) return; setNewCircleMemberIds(prev => ((prev || []).includes(memberId) ? (prev || []).filter(x => x !== memberId) : [...prev, memberId])); }, [accountUserId]); const addFriendById = useCallback((friendId) => { if (!accountUserId || friendId === accountUserId || !hasHydratedRef.current) return; const latest = getLatestAppData(); const social = latest.social || {}; const fu = { ...(social.friendsByUser || {}) }; const next = new Set(fu[accountUserId] || []); next.add(friendId); fu[accountUserId] = [...next]; saveData({ ...latest, social: { ...social, friendsByUser: fu } }); setShowFriendModal(false); }, [accountUserId, getLatestAppData, saveData]); const inboxItems = useMemo(() => { const list = Array.isArray(appData?.inbox) ? appData.inbox : []; return list; }, [appData?.inbox]); const unreadCount = useMemo(() => { return (inboxItems || []).filter(n => !n.readAt).length; }, [inboxItems]); const markAllInboxRead = useCallback(() => { if (!hasHydratedRef.current) return; const latest = getLatestAppData(); const list = Array.isArray(latest?.inbox) ? latest.inbox : []; const now = Date.now(); saveData({ ...latest, inbox: (list || []).map(n => (n.readAt ? n : { ...n, readAt: now })) }); }, [getLatestAppData, saveData]); // audio removed (minimal vibe + no mic permission) const composeBodyValid = (threeLines || []).every(l => l && l.trim()); const myPastKudos = useMemo(() => { return (feed || []).filter((k) => { if (!k || k.isDemo) return false; const uid = k?._user?.id; if (!uid || !reactorId) return false; return String(uid) === String(reactorId); }); }, [feed, reactorId]); const handlePostKudo = useCallback(async () => { if (!composeBodyValid) return; void trackEventName?.("submitted_gratitude_kudos", { dateKey: todayKey, hasPhotos: (composePhotos || []).length > 0, anonymous: composeAnonymous }); const rawLines = (threeLines || []).map((l) => String(l || '').trim()); const publicName = String(composePublicName || '').trim(); if ((rawLines || []).some((l) => hasBlockedWord(l)) || hasBlockedWord(publicName)) { setComposeError('Please remove inappropriate language before posting.'); return; } if (!accountUserId) { setComposeError('Sign in to post to the campus feed.'); if (typeof openAuth === 'function') openAuth(); return; } setComposeError(''); setIsPosting(true); try { const authorId = accountUserId; const text = (rawLines || []).map((l, i) => `${i + 1}. ${l}`).join('\n'); const displayAuthorName = composeAnonymous ? 'Anonymous' : (() => { const fromPublic = publicName.trim(); if (fromPublic) return fromPublic; const fromUser = String(user?.name || '').trim(); if (fromUser) return fromUser; return 'UT Student'; })(); const photoIds = (composePhotos || []).map(p => p.assetId).filter(Boolean); const newKudo = { id: `kudo-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, text, circleId: postTargetCircleId, imageAssetIds: (photoIds || []).length ? photoIds : null, imageAssetId: (photoIds || []).length === 1 ? photoIds[0] : (photoIds[0] || null), audioAssetId: null, dateKey: todayKey, isDemo: false, hearts: [], emojiReactions: {}, comments: [], _user: { id: authorId, name: displayAuthorName || 'Anonymous', handle: composeAnonymous ? null : (user?.handle || null), avatarUrl: composeAnonymous ? null : (user?.avatarUrl || null) }, _timestamp: Date.now() }; if (isMultiplayer && typeof pushToSharedArray === 'function') { await awaitMaybePromise(pushToSharedArray('kudos', newKudo)); } await persistKudosAppend( getLatestAppData, saveData, newKudo, isMultiplayer ? {} : { lastThreeKudosPostDateKey: todayKey } ); if (isMultiplayer) { await awaitMaybePromise( setData({ ...getLatestPersonalData(), lastThreeKudosPostDateKey: todayKey }) ); } setLocalKudos((prev) => [newKudo, ...prev]); setLocalPostUnlockKey(todayKey); setThreeLines(['', '', '']); setComposePublicName(''); setComposeAnonymous(false); setComposePhotos([]); setComposeMedia(null); if (typeof window !== 'undefined') window.scrollTo(0, 0); playChime(); } catch (e) { console.error('Post kudo failed', e); setComposeError('Could not save your kudos. Check your connection and try again.'); } finally { setIsPosting(false); } }, [composeBodyValid, threeLines, composePublicName, composeAnonymous, composePhotos, composeMedia, postTargetCircleId, todayKey, getLatestAppData, getLatestPersonalData, saveData, setData, user, accountUserId, isMultiplayer, pushToSharedArray, openAuth]); const unlockGratitudeKudosPlus = useCallback(() => { if (!hasHydratedRef.current) return; const latest = getLatestAppData(); saveData({ ...latest, gratitudeKudosPlus: true }); setShowGratitudePaywall(false); }, [getLatestAppData, saveData]); const handlePostPromptKudo = useCallback(async () => { if (!hasHydratedRef.current || isPosting) return; void trackEventName?.("submitted_prompt_kudos", { layout: gratitudeAnswerLayout, isCustom: gratitudePromptCustomMode, promptIndex: gratitudePromptIndex, anonymous: promptComposeAnonymous }); let promptLine = ''; if (gratitudePromptCustomMode) { if (!hasGratitudeKudosPlus) { setShowGratitudePaywall(true); return; } promptLine = (gratitudeCustomPromptText || '').trim(); if (!promptLine) return; } else { const def = KUDOS_PROMPT_PAGE_LIST[gratitudePromptIndex]; if (!def) return; if (!kudosPromptCanAccess(def, hasGratitudeKudosPlus)) { setShowGratitudePaywall(true); return; } promptLine = (def.text || '').trim(); if (!promptLine && def.category === 'ut') { promptLine = `[UT ${def.id}: add question text in App.tsx]`; } if (!promptLine) return; } const trimmed = trimAnswerLinesForLayout(gratitudeAnswerLayout, gratitudePromptAnswerLines); if ((trimmed || []).some((t) => !t)) return; if ((trimmed || []).some((t) => hasBlockedWord(t)) || hasBlockedWord(promptLine)) return; if (!accountUserId) { if (typeof openAuth === 'function') openAuth(); return; } setIsPosting(true); try { const authorId = accountUserId; const text = formatPromptKudoPlainText(promptLine, gratitudeAnswerLayout, trimmed); const photoIds = (composePhotos || []).map(p => p.assetId).filter(Boolean); const newKudo = { id: `kudo-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, text, promptMeta: { question: String(promptLine || '').trim(), layout: gratitudeAnswerLayout, lines: trimmed }, circleId: postTargetCircleId, imageAssetIds: (photoIds || []).length ? photoIds : null, imageAssetId: (photoIds || []).length === 1 ? photoIds[0] : (photoIds[0] || null), audioAssetId: null, dateKey: todayKey, isDemo: false, hearts: [], emojiReactions: {}, comments: [], _user: { id: authorId, name: promptComposeAnonymous ? 'Anonymous' : (user?.name || 'You'), handle: promptComposeAnonymous ? null : (user?.handle ?? null), avatarUrl: promptComposeAnonymous ? null : (user?.avatarUrl ?? null) }, _timestamp: Date.now() }; if (isMultiplayer && typeof pushToSharedArray === 'function') { await awaitMaybePromise(pushToSharedArray('kudos', newKudo)); } await persistKudosAppend(getLatestAppData, saveData, newKudo, {}); setLocalKudos((prev) => [newKudo, ...prev]); setGratitudePromptAnswerLines(['', '', '']); setGratitudeAnswerLayout(2); setGratitudeCustomPromptText(''); setGratitudePromptCustomMode(false); setGratitudePromptIndex(0); setPromptComposeAnonymous(false); setShowGratitudePromptPage(false); setComposePhotos([]); setComposeMedia(null); setJustPosted(true); playChime(); setTimeout(() => setJustPosted(false), 2500); } finally { setIsPosting(false); } }, [ gratitudePromptCustomMode, gratitudeCustomPromptText, gratitudePromptAnswerLines, gratitudeAnswerLayout, gratitudePromptIndex, hasGratitudeKudosPlus, isPosting, promptComposeAnonymous, composePhotos, postTargetCircleId, todayKey, getLatestAppData, saveData, user, accountUserId, isMultiplayer, pushToSharedArray, openAuth ]); const shareActiveCircle = useCallback(() => { const circle = (customCircles || []).find(c => c.id === activeCircleId); if (!circle) return; const url = typeof window !== 'undefined' && window.location ? String(window.location.href) : ''; const text = `Join my circle "${circle.name}" on KudosUT`; if (typeof share === 'function') { try { share({ title: 'KudosUT', text, url }); } catch (e) { share(text + (url ? '\n' + url : '')); } } else if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText && url) { navigator.clipboard.writeText(url).catch(() => {}); } }, [customCircles, activeCircleId, share]); const formatTimeAgo = (ts) => { if (!ts) return 'just now'; const diff = Date.now() - ts; const mins = Math.floor(diff / 60000); if (mins < 1) return 'just now'; if (mins < 60) return mins + 'm ago'; const hrs = Math.floor(mins / 60); if (hrs < 24) return hrs + 'h ago'; return Math.floor(hrs / 24) + 'd ago'; }; // Day/Night toggle removed; lock to the light theme. const isDark = false; const theme = useMemo(() => { if (isDark) { return { PRIMARY: '#E5E7EB', PRIMARY_LIGHT: 'rgba(229,231,235,0.10)', PRIMARY_DARK: '#E5E7EB', DARK: '#F5F5F7', BG: '#0B0B0C', CARD: '#141416', MUTED: '#A1A1AA', HAIRLINE: 'rgba(255,255,255,0.10)', WARM_GRADIENT: '#141416', HEART_BG: 'rgba(229,231,235,0.10)', HEART_BORDER: 'rgba(229,231,235,0.22)', INPUT_BG: '#1C1C1F', OVERLAY_SCRIM: 'rgba(0,0,0,0.88)', JUST_POSTED_SCRIM: 'rgba(0,0,0,0.94)', REACTION_PICKER_SHADOW: '0 8px 28px rgba(0,0,0,0.55)', DISABLED_BTN: '#3A3A3C' }; } return { PRIMARY: '#111827', PRIMARY_LIGHT: 'rgba(17,24,39,0.06)', PRIMARY_DARK: '#111827', DARK: '#111827', BG: '#FAFAFA', CARD: '#FFFFFF', MUTED: '#6B7280', HAIRLINE: 'rgba(17,24,39,0.10)', WARM_GRADIENT: '#FFFFFF', HEART_BG: 'rgba(17,24,39,0.06)', HEART_BORDER: 'rgba(17,24,39,0.16)', INPUT_BG: '#F3F4F6', OVERLAY_SCRIM: 'rgba(0,0,0,0.4)', JUST_POSTED_SCRIM: 'rgba(255, 251, 235, 0.95)', REACTION_PICKER_SHADOW: '0 4px 16px rgba(0,0,0,0.1)', DISABLED_BTN: '#D1D5DB' }; }, [isDark]); const { PRIMARY, PRIMARY_LIGHT, PRIMARY_DARK, DARK, BG, CARD, MUTED, HAIRLINE, WARM_GRADIENT, HEART_BG, HEART_BORDER, INPUT_BG, OVERLAY_SCRIM, JUST_POSTED_SCRIM, REACTION_PICKER_SHADOW, DISABLED_BTN } = theme; const FONT = '"Space Grotesk", "SF Pro Display", "Helvetica Neue", Arial, sans-serif'; const showGuestA1ZapWarning = !isA1ZapSignedIn(user); /** Guest / anonymous A1Zap: nothing persists; must sign in for real account + campus feed. */ const guestDisclaimerBanner = showGuestA1ZapWarning ? (

Not signed in to A1Zap

Nothing you post here is saved to your account or shown publicly while not signed in. Applies to kudoses on this feed.

) : null; const REACTION_EMOJIS = ['🙏', '❤️', '🧡', '😊', '✨']; const reportSpamFooterStyle = (reported) => ({ position: 'absolute', right: 8, bottom: 6, background: 'transparent', border: 'none', padding: '2px 4px', fontSize: 10, fontWeight: 500, color: MUTED, opacity: reported ? 0.38 : 0.55, cursor: reported ? 'default' : 'pointer', fontFamily: FONT, zIndex: 2, WebkitTapHighlightColor: 'transparent' }); const todayPostCount = (feed || []).filter(k => k.dateKey === todayKey && !k.isDemo).length; const a1zapPickableMembers = useMemo(() => { return (memberList || []).filter(m => m && m.id && m.id !== accountUserId); }, [memberList, accountUserId]); return (

{!showDailyGratitudeGate ? null : (

)} {/* HEADER + guest strip — sticky so it stays visible while scrolling */}

{accountUserId ? ( ) : null} {hasPostedToday ? ( ) : null}

kudos

@UT

{guestDisclaimerBanner}

{/* CIRCLES — removed (UT-only feed) */} {false && (

{[ { id: CIRCLE_MINE, label: 'my kudoses', icon: }, { id: CIRCLE_COMMUNITY, label: 'UT Austin', icon: }, ...(customCircles || []).map(c => ({ id: c.id, label: c.name, icon: })), { id: CIRCLE_FRIENDS, label: 'Friends', icon: } ].map(chip => { const active = activeCircleId === chip.id; return ( ); })}

{activeCircleId === CIRCLE_FRIENDS && isMultiplayer && accountUserId && (

{(myFriendIds || []).length > 0 && (

{(myFriendIds || []).length} friend{(myFriendIds || []).length === 1 ? '' : 's'} · each person sees their own friend list in this view

)}

)} {activeCircleId !== CIRCLE_COMMUNITY && activeCircleId !== CIRCLE_MINE && (

{activeCircleId === CIRCLE_FRIENDS ? ( 'Posts from you and people you’ve added as friends.' ) : ( <>

Posts shared to this circle (invite A1Zap members when you create it).

{(customCircles || []).some(c => c.id === activeCircleId) && ( )} )}

)}

)} {/* MAIN CONTENT */}

{/* COMPOSE — guests only (signed-in first post uses full-screen modal over dimmed home) */} {!accountUserId && (

{accountUserId ? 'Share your gratitude to unlock the feed' : 'Share gratitude to the UT feed'}

Posting to: UT Austin students

{[0, 1, 2].map(i => ( { const next = [...threeLines]; next[i] = e.target.value; setThreeLines(next); }} style={{ width: '100%', background: INPUT_BG, border: 'none', borderRadius: 12, color: DARK, padding: '12px 14px', fontSize: 15, fontFamily: FONT, fontWeight: 400, boxSizing: 'border-box' }} /> ))}

{(composePhotos || []).length > 0 && (

{(composePhotos || []).map((ph, i) => (

))}

)} {composeError ? (

{composeError}

) : null}

{typeof pickAndUploadPhoto === 'function' && ( )} {typeof pickAndUploadPhoto === 'function' && ( )}

)} {/* GATE — blurred preview for signed-in users until first post today */} {!hasPostedToday && accountUserId && (

{(feed || []).slice(0, 3).map(kudo => (

{kudo.promptMeta?.question || kudo.text}

))}

🔒

Share your gratitude above once to unlock the feed

Everyone shares before they scroll

)} {/* UNLOCKED FEED */} {hasPostedToday && ( <> {/* FEED CARDS */} {(filteredFeed || []).map((kudo, idx) => { const isHearted = reactorId && Array.isArray(kudo.hearts) && (kudo.hearts || []).some((h) => String(h) === String(reactorId)); const heartCount = Array.isArray(kudo.hearts) ? (kudo.hearts || []).length : 0; const isExpanded = expandedKudoId === kudo.id; const imgUrls = getKudoImageUrls(kudo, imageUrls); const reportKey = `kudo:${kudo.id}`; const alreadyReportedSpam = mySpamReportKeys.has(reportKey); return (

{kudo.isDemo && (

Demo

)} {/* Author row */}

kudo._user?.handle && typeof openProfile === 'function' && openProfile(kudo._user.handle)} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, cursor: kudo._user?.handle ? 'pointer' : 'default' }} >

{!(kudo._user?.avatarUrl || kudo._user?.profileImageUrl) && (kudo._user?.name || kudo._user?.displayName || 'U').charAt(0).toUpperCase()}

{kudo._user?.name || kudo._user?.displayName || 'Anonymous'}

{formatTimeAgo(kudo._timestamp)}

{/* Gratitude text */}

setExpandedKudoId(kudo.id)} />

{(imgUrls || []).length > 0 && ( )} {/* Reactions + heart */}

{(REACTION_EMOJIS || []).map(emoji => { const reactions = kudo.emojiReactions || {}; const users = reactions[emoji] || []; const count = (users || []).length; const iReacted = reactorId && (users || []).some((uid) => String(uid) === String(reactorId)); if (count === 0 && !iReacted) return null; return ( ); })} {/* Add reaction */}

{reactingKudoId === kudo.id && (

{(REACTION_EMOJIS || []).map(emoji => ( ))}

)}

{accountUserId && canReportKudoAsSpam(kudo, accountUserId) ? ( ) : null}

); })} {(filteredFeed || []).length === 0 && (

🌱

No gratitude posts from UT students yet

Share a gratitude to start today’s UT feed.

)} )}

{showGratitudePromptPage && (() => { const listLen = (KUDOS_PROMPT_PAGE_LIST || []).length; const curDef = KUDOS_PROMPT_PAGE_LIST[gratitudePromptIndex] || KUDOS_PROMPT_PAGE_LIST[0]; const builtInLabel = !curDef.text?.trim() && curDef.category === 'ut' ? `[UT ${curDef.id}] Blank in code. Add your question in App.tsx.` : (curDef.text || ''); const goBuiltIn = (delta) => { const n = (gratitudePromptIndex + delta + listLen) % listLen; const p = KUDOS_PROMPT_PAGE_LIST[n]; if (!kudosPromptCanAccess(p, hasGratitudeKudosPlus)) { setShowGratitudePaywall(true); return; } setGratitudePromptIndex(n); }; const postTargetLabel = 'UT Austin students'; const trimmedForPost = trimAnswerLinesForLayout(gratitudeAnswerLayout, gratitudePromptAnswerLines); const answersComplete = (trimmedForPost || []).every((t) => (t || []).length > 0); const customPromptOk = !gratitudePromptCustomMode || (gratitudeCustomPromptText || '').trim(); const canPostPrompt = !!accountUserId && answersComplete && customPromptOk; const goLayout = (delta) => { setGratitudeAnswerLayout((prev) => Math.max(0, Math.min(2, prev + delta))); }; const layoutLabels = ['One longer answer', 'Two text boxes', 'Three text boxes']; const setLine = (idx, val) => { setGratitudePromptAnswerLines((prev) => { const next = [...prev]; next[idx] = val; return next; }); }; return (

{guestDisclaimerBanner}

New kudos

Posting to: {postTargetLabel}

{!gratitudePromptCustomMode ? ( <>

{curDef.category === 'ut' ? 'UT prompt' : 'Gratitude prompt'} {kudosPromptNeedsPlus(curDef) && !hasGratitudeKudosPlus ? ' · Plus' : ''}

{builtInLabel}

) : ( <>

Custom prompt (Plus)

setGratitudeCustomPromptText(e.target.value)}
                    placeholder="Write the exact question you want to answer."
                    rows={3}
                    style={{
                      width: '100%',
                      boxSizing: 'border-box',
                      borderRadius: 14,
                      border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG,
                      color: DARK,
                      padding: '12px 14px',
                      fontSize: 15,
                      fontFamily: FONT,
                      resize: 'vertical',
                      marginBottom: 16
                    }}
                  />
                </>
              )}

<div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.5, color: MUTED, textTransform: 'uppercase', marginBottom: 8 }}>
                Answer layout
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                <button
                  type="button"
                  aria-label="Fewer answer boxes"
                  onClick={() => goLayout(-1)}
                  disabled={gratitudeAnswerLayout <= 0}
                  style={{
                    flexShrink: 0,
                    width: 44,
                    height: 44,
                    borderRadius: 12,
                    border: '1px solid ' + HAIRLINE,
                    background: INPUT_BG,
                    cursor: gratitudeAnswerLayout <= 0 ? 'default' : 'pointer',
                    opacity: gratitudeAnswerLayout <= 0 ? 0.45 : 1,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <span style={{ display: 'block', transform: 'scaleX(-1)' }}>
                    <IconChevronRight color={DARK} />
                  </span>
                </button>
                <input
                  type="range"
                  min={0}
                  max={2}
                  step={1}
                  value={gratitudeAnswerLayout}
                  onChange={(e) => setGratitudeAnswerLayout(Number(e.target.value))}
                  style={{ flex: 1, accentColor: PRIMARY }}
                  aria-valuemin={0}
                  aria-valuemax={2}
                  aria-valuenow={gratitudeAnswerLayout}
                  aria-label="Answer layout"
                />
                <button
                  type="button"
                  aria-label="More answer boxes"
                  onClick={() => goLayout(1)}
                  disabled={gratitudeAnswerLayout >= 2}
                  style={{
                    flexShrink: 0,
                    width: 44,
                    height: 44,
                    borderRadius: 12,
                    border: '1px solid ' + HAIRLINE,
                    background: INPUT_BG,
                    cursor: gratitudeAnswerLayout >= 2 ? 'default' : 'pointer',
                    opacity: gratitudeAnswerLayout >= 2 ? 0.45 : 1,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <IconChevronRight color={DARK} />
                </button>
              </div>
              <div style={{ fontSize: 12, color: MUTED, marginBottom: 16, textAlign: 'center' }}>
                {layoutLabels[gratitudeAnswerLayout]}
              </div>

<div style={{ fontSize: 11, fontWeight: 600, color: MUTED, marginBottom: 8 }}>Your answer</div>
              {gratitudeAnswerLayout === 0 ? (
                <textarea
                  value={gratitudePromptAnswerLines[0] || ''}
                  onChange={(e) => setLine(0, e.target.value)}
                  placeholder="Write everything here in one place."
                  rows={8}
                  style={{
                    width: '100%',
                    boxSizing: 'border-box',
                    borderRadius: 14,
                    border: '1px solid ' + HAIRLINE,
                    background: INPUT_BG,
                    color: DARK,
                    padding: '12px 14px',
                    fontSize: 15,
                    fontFamily: FONT,
                    lineHeight: 1.45,
                    resize: 'vertical',
                    marginBottom: 18
                  }}
                />
              ) : gratitudeAnswerLayout === 1 ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
                  <textarea
                    value={gratitudePromptAnswerLines[0] || ''}
                    onChange={(e) => setLine(0, e.target.value)}
                    placeholder="Part 1"
                    rows={4}
                    style={{
                      width: '100%',
                      boxSizing: 'border-box',
                      borderRadius: 14,
                      border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG,
                      color: DARK,
                      padding: '12px 14px',
                      fontSize: 15,
                      fontFamily: FONT,
                      lineHeight: 1.45,
                      resize: 'vertical'
                    }}
                  />
                  <textarea
                    value={gratitudePromptAnswerLines[1] || ''}
                    onChange={(e) => setLine(1, e.target.value)}
                    placeholder="Part 2"
                    rows={4}
                    style={{
                      width: '100%',
                      boxSizing: 'border-box',
                      borderRadius: 14,
                      border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG,
                      color: DARK,
                      padding: '12px 14px',
                      fontSize: 15,
                      fontFamily: FONT,
                      lineHeight: 1.45,
                      resize: 'vertical'
                    }}
                  />
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
                  <textarea
                    value={gratitudePromptAnswerLines[0] || ''}
                    onChange={(e) => setLine(0, e.target.value)}
                    placeholder="Line 1"
                    rows={3}
                    style={{
                      width: '100%',
                      boxSizing: 'border-box',
                      borderRadius: 14,
                      border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG,
                      color: DARK,
                      padding: '12px 14px',
                      fontSize: 15,
                      fontFamily: FONT,
                      lineHeight: 1.45,
                      resize: 'vertical'
                    }}
                  />
                  <textarea
                    value={gratitudePromptAnswerLines[1] || ''}
                    onChange={(e) => setLine(1, e.target.value)}
                    placeholder="Line 2"
                    rows={3}
                    style={{
                      width: '100%',
                      boxSizing: 'border-box',
                      borderRadius: 14,
                      border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG,
                      color: DARK,
                      padding: '12px 14px',
                      fontSize: 15,
                      fontFamily: FONT,
                      lineHeight: 1.45,
                      resize: 'vertical'
                    }}
                  />
                  <textarea
                    value={gratitudePromptAnswerLines[2] || ''}
                    onChange={(e) => setLine(2, e.target.value)}
                    placeholder="Line 3"
                    rows={3}
                    style={{
                      width: '100%',
                      boxSizing: 'border-box',
                      borderRadius: 14,
                      border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG,
                      color: DARK,
                      padding: '12px 14px',
                      fontSize: 15,
                      fontFamily: FONT,
                      lineHeight: 1.45,
                      resize: 'vertical'
                    }}
                  />
                </div>
              )}

{accountUserId ? (
                <div style={{ marginTop: 14, marginBottom: 16 }}>
                  <button
                    type="button"
                    onClick={() => setPromptComposeAnonymous(v => !v)}
                    style={{
                      width: '100%',
                      border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG,
                      borderRadius: 12,
                      padding: '11px 12px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      cursor: 'pointer',
                      fontFamily: FONT,
                      color: DARK
                    }}
                    aria-pressed={promptComposeAnonymous}
                  >
                    <span style={{ fontSize: 14, fontWeight: 600 }}>Post anonymously</span>
                    <span style={{
                      width: 42,
                      height: 24,
                      borderRadius: 999,
                      background: promptComposeAnonymous ? PRIMARY : HAIRLINE,
                      padding: 2,
                      boxSizing: 'border-box',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: promptComposeAnonymous ? 'flex-end' : 'flex-start',
                      transition: 'all 0.2s ease'
                    }}>
                      <span style={{
                        width: 20,
                        height: 20,
                        borderRadius: '50%',
                        background: CARD,
                        display: 'block'
                      }} />
                    </span>
                  </button>
                  <div style={{ fontSize: 11, color: MUTED, marginTop: 8, lineHeight: 1.4 }}>
                    Your account still authors the post for moderation; the feed only shows Anonymous.
                  </div>
                </div>
              ) : null}

<button
                type="button"
                onClick={() => {
                  if (!accountUserId) {
                    if (typeof openAuth === 'function') openAuth();
                    return;
                  }
                  handlePostPromptKudo();
                }}
                disabled={isPosting || (!!accountUserId && !canPostPrompt)}
                style={{
                  width: '100%',
                  padding: '14px 16px',
                  borderRadius: 14,
                  border: 'none',
                  background: (!isPosting && (!accountUserId || canPostPrompt)) ? PRIMARY : DISABLED_BTN,
                  color: CARD,
                  fontSize: 15,
                  fontWeight: 600,
                  cursor: !isPosting && (!accountUserId || canPostPrompt) ? 'pointer' : 'default',
                  fontFamily: FONT
                }}
              >
                {isPosting ? 'Posting…' : !accountUserId ? 'Sign in to post' : 'Post'}
              </button>
            </div>
          </div>
        );
      })()}

{showGratitudePaywall && (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="gratitude-paywall-title"
          onClick={() => setShowGratitudePaywall(false)}
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 60,
            background: OVERLAY_SCRIM,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: 'max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom))'
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            onMouseDown={(e) => e.stopPropagation()}
            style={{
              background: CARD,
              color: DARK,
              width: '100%',
              maxWidth: 400,
              borderRadius: 18,
              padding: 20,
              border: '1px solid ' + HAIRLINE,
              fontFamily: FONT
            }}
          >
            <h3 id="gratitude-paywall-title" style={{ margin: '0 0 10px', fontSize: 18, fontWeight: 600 }}>Kudos Plus</h3>
            <p style={{ margin: '0 0 16px', fontSize: 13, color: MUTED, lineHeight: 1.5 }}>
              Plus unlocks the paid gratitude prompts, all UT prompt slots, and custom prompts you write yourself. This build uses a demo unlock instead of a real purchase.
            </p>
            <button
              type="button"
              onClick={unlockGratitudeKudosPlus}
              style={{
                width: '100%',
                padding: '12px 14px',
                borderRadius: 12,
                border: 'none',
                background: PRIMARY,
                color: CARD,
                fontSize: 14,
                fontWeight: 600,
                cursor: 'pointer',
                fontFamily: FONT,
                marginBottom: 10
              }}
            >
              Unlock Plus (demo)
            </button>
            <button
              type="button"
              onClick={() => setShowGratitudePaywall(false)}
              style={{
                width: '100%',
                padding: '10px 14px',
                borderRadius: 12,
                border: '1px solid ' + HAIRLINE,
                background: 'transparent',
                color: DARK,
                fontSize: 13,
                fontWeight: 600,
                cursor: 'pointer',
                fontFamily: FONT
              }}
            >
              Not now
            </button>
          </div>
        </div>
      )}

{/* POSTED OVERLAY */}
      {justPosted && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 100,
          pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: JUST_POSTED_SCRIM,
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)'
        }}>
          <div style={{ textAlign: 'center', animation: 'fadeIn 0.3s ease-out' }}>
            <div style={{ fontSize: 48, marginBottom: 12 }}>🙏</div>
            <h2 style={{ fontFamily: FONT, margin: 0, color: DARK, fontSize: 24, fontWeight: 600, letterSpacing: -0.3 }}>
              Kudos shared!
            </h2>
            <p style={{ margin: '8px 0 0', color: MUTED, fontSize: 13, fontWeight: 400 }}>
              Your gratitude is now on the feed
            </p>
          </div>
        </div>
      )}

{/* BOTTOM NAV */}
      <nav style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        height: 'calc(env(safe-area-inset-bottom, 20px) + 52px)',
        background: CARD,
        borderTop: '1px solid ' + HAIRLINE,
        display: 'flex', justifyContent: 'center', alignItems: 'flex-start',
        paddingTop: 12,
        maxWidth: 500, margin: '0 auto',
        zIndex: 30
      }}>
        <button
          type="button"
          onClick={() => { if (typeof window !== 'undefined') window.scrollTo(0, 0); }}
          style={{
            background: 'none', border: 'none',
            color: DARK,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            fontSize: 11,
            fontWeight: 600,
            fontFamily: FONT,
            cursor: 'pointer'
          }}
        >
          Home
          <div style={{ width: 4, height: 4, borderRadius: 2, background: PRIMARY, marginTop: 2 }} />
        </button>
      </nav>

{showNewCircleModal && (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="new-circle-title"
          onClick={() => setShowNewCircleModal(false)}
          style={{
            position: 'fixed', inset: 0, background: OVERLAY_SCRIM, zIndex: 240,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 'max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom))'
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            onMouseDown={(e) => e.stopPropagation()}
            style={{
              background: CARD, color: DARK, width: '100%', maxWidth: 500,
              borderRadius: 20, padding: 20, maxHeight: 'min(88dvh, 100%)', overflowY: 'auto',
              border: '1px solid ' + HAIRLINE
            }}
          >
            <h3 id="new-circle-title" style={{ margin: '0 0 8px', fontSize: 18, fontWeight: 600 }}>New circle</h3>
            <p style={{ margin: '0 0 16px', fontSize: 12, color: MUTED, lineHeight: 1.5 }}>
              Name it and add A1Zap members from this session. Posts go to the circle you have selected when you share.
            </p>
            <input
              value={newCircleName}
              onChange={(e) => setNewCircleName(e.target.value)}
              placeholder="e.g family, study crew, epic freshmen..."
              style={{
                width: '100%', padding: 12, borderRadius: 10, border: '1px solid ' + HAIRLINE,
                marginBottom: 14, fontSize: 15, fontFamily: FONT, background: INPUT_BG, color: DARK, boxSizing: 'border-box'
              }}
            />
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.6, color: MUTED, textTransform: 'uppercase', marginBottom: 8 }}>Add A1Zap members</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 220, overflowY: 'auto', marginBottom: 16 }}>
              {(a1zapPickableMembers || []).length === 0 ? (
                <div style={{ fontSize: 12, color: MUTED, lineHeight: 1.45 }}>
                  You’re the only one here right now. Share the session link so friends join, then add them to your circle.
                </div>
              ) : (
                (a1zapPickableMembers || []).map(m => {
                  const picked = (newCircleMemberIds || []).includes(m.id);
                  return (
                    <button
                      key={m.id}
                      type="button"
                      onMouseDown={(e) => { e.stopPropagation(); }}
                      onClick={(e) => { e.preventDefault(); e.stopPropagation(); toggleNewCircleMember(m.id); }}
                      style={{
                        display: 'flex', alignItems: 'center', gap: 10, padding: 10, borderRadius: 10,
                        border: '1px solid ' + (picked ? PRIMARY : HAIRLINE),
                        cursor: 'pointer', fontSize: 14, width: '100%', textAlign: 'left',
                        background: picked ? PRIMARY_LIGHT : INPUT_BG,
                        color: DARK,
                        fontFamily: FONT,
                        WebkitTapHighlightColor: 'transparent',
                        touchAction: 'manipulation',
                        position: 'relative',
                        zIndex: 2
                      }}
                    >
                      <span style={{
                        width: 22, height: 22, borderRadius: 6, border: '2px solid ' + (picked ? PRIMARY : HAIRLINE),
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 12, fontWeight: 700, color: PRIMARY, flexShrink: 0,
                        background: CARD
                      }}>{picked ? '✓' : ''}</span>
                      <span style={{ flex: 1 }}>{m.displayName || m.name || 'Member'}</span>
                    </button>
                  );
                })
              )}
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <button
                type="button"
                onClick={() => setShowNewCircleModal(false)}
                style={{
                  flex: 1, padding: 12, borderRadius: 12, border: '1px solid ' + HAIRLINE,
                  background: 'transparent', color: DARK, fontFamily: FONT, cursor: 'pointer', fontSize: 14
                }}
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={createCustomCircle}
                disabled={!newCircleName.trim() || !accountUserId}
                style={{
                  flex: 1, padding: 12, borderRadius: 12, border: 'none',
                  background: newCircleName.trim() && accountUserId ? PRIMARY : DISABLED_BTN,
                  color: CARD, fontWeight: 600, fontFamily: FONT,
                  cursor: newCircleName.trim() && accountUserId ? 'pointer' : 'default', fontSize: 14
                }}
              >
                Create
              </button>
            </div>
          </div>
        </div>
      )}

{showFriendModal && (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="friend-modal-title"
          onClick={() => setShowFriendModal(false)}
          style={{
            position: 'fixed', inset: 0, background: OVERLAY_SCRIM, zIndex: 240,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 'max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom))'
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: CARD, color: DARK, width: '100%', maxWidth: 500,
              borderRadius: 20, padding: 20, maxHeight: 'min(88dvh, 100%)', overflowY: 'auto',
              border: '1px solid ' + HAIRLINE
            }}
          >
            <h3 id="friend-modal-title" style={{ margin: '0 0 8px', fontSize: 18, fontWeight: 600 }}>Add friends</h3>
            <p style={{ margin: '0 0 16px', fontSize: 12, color: MUTED, lineHeight: 1.5 }}>
              People you add appear in your Friends circle. Everyone sees their own friend list—your friends see their friends, not necessarily yours.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 280, overflowY: 'auto', marginBottom: 12 }}>
              {(a1zapPickableMembers || []).filter(m => !(myFriendIds || []).includes(m.id)).length === 0 ? (
                <div style={{ fontSize: 12, color: MUTED }}>
                  {(a1zapPickableMembers || []).length === 0
                    ? 'Share the session link so others join first.'
                    : 'Everyone here is already on your friends list.'}
                </div>
              ) : (
                (a1zapPickableMembers || []).filter(m => !(myFriendIds || []).includes(m.id)).map(m => (
                  <button
                    key={m.id}
                    type="button"
                    onClick={() => addFriendById(m.id)}
                    style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      padding: 12, borderRadius: 12, border: '1px solid ' + HAIRLINE,
                      background: INPUT_BG, color: DARK, cursor: 'pointer', fontFamily: FONT, fontSize: 14
                    }}
                  >
                    <span>{m.displayName || m.name || 'Member'}</span>
                    <span style={{ color: PRIMARY, fontWeight: 600 }}>Add</span>
                  </button>
                ))
              )}
            </div>
            <button
              type="button"
              onClick={() => setShowFriendModal(false)}
              style={{
                width: '100%', padding: 12, borderRadius: 12, border: '1px solid ' + HAIRLINE,
                background: 'transparent', color: DARK, fontFamily: FONT, cursor: 'pointer', fontSize: 14
              }}
            >
              Done
            </button>
          </div>
        </div>
      )}

{showInbox && (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="inbox-title"
          onClick={() => setShowInbox(false)}
          style={{
            position: 'fixed', inset: 0, background: OVERLAY_SCRIM, zIndex: 240,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 'max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom))'
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: CARD, color: DARK, width: '100%', maxWidth: 500,
              borderRadius: 20, padding: 20, maxHeight: 'min(88dvh, 100%)', overflowY: 'auto',
              border: '1px solid ' + HAIRLINE
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <h3 id="inbox-title" style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Inbox</h3>
              <button
                type="button"
                onClick={() => { markAllInboxRead(); }}
                style={{
                  background: 'transparent',
                  border: '1px solid ' + HAIRLINE,
                  color: MUTED,
                  borderRadius: 999,
                  padding: '6px 10px',
                  fontSize: 11,
                  cursor: 'pointer',
                  fontFamily: FONT
                }}
              >
                Mark all read
              </button>
            </div>
            {(inboxItems || []).length === 0 ? (
              <div style={{ padding: '30px 0', textAlign: 'center', color: MUTED, fontSize: 13, lineHeight: 1.5 }}>
                No notifications yet. Hearts and comments will show up here.
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {(inboxItems || []).slice().reverse().map((n, i) => (
                  <div
                    key={n.id || i}
                    style={{
                      padding: 12,
                      borderRadius: 12,
                      border: '1px solid ' + HAIRLINE,
                      background: n.readAt ? 'transparent' : PRIMARY_LIGHT
                    }}
                  >
                    <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4, color: DARK }}>
                      {n.title || 'Activity'}
                    </div>
                    <div style={{ fontSize: 12, color: MUTED, lineHeight: 1.45 }}>
                      {n.body || 'Someone interacted with your kudos.'}
                    </div>
                  </div>
                ))}
              </div>
            )}
            <button
              type="button"
              onClick={() => setShowInbox(false)}
              style={{
                width: '100%',
                padding: 12,
                borderRadius: 12,
                border: '1px solid ' + HAIRLINE,
                background: 'transparent',
                color: DARK,
                fontFamily: FONT,
                cursor: 'pointer',
                fontSize: 14,
                marginTop: 14
              }}
            >
              Close
            </button>
          </div>
        </div>
      )}

{showPastKudosModal && (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="past-kudos-title"
          onClick={() => setShowPastKudosModal(false)}
          style={{
            position: 'fixed', inset: 0, background: OVERLAY_SCRIM, zIndex: 240,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 'max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom))'
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: CARD, color: DARK, width: '100%', maxWidth: 500,
              borderRadius: 20, padding: 20, maxHeight: 'min(88dvh, 100%)', overflowY: 'auto',
              border: '1px solid ' + HAIRLINE
            }}
          >
            <h3 id="past-kudos-title" style={{ margin: '0 0 14px', fontSize: 18, fontWeight: 600 }}>Past Kudoses</h3>
            {(myPastKudos || []).length === 0 ? (
              <div style={{ padding: '24px 0', textAlign: 'center' }}>
                <div style={{ fontSize: 32, marginBottom: 8 }}>✨</div>
                <p style={{ fontSize: 15, fontWeight: 600, margin: '0 0 6px', color: DARK }}>No kudoses yet</p>
                <p style={{ fontSize: 13, color: MUTED, margin: 0 }}>Posts you share on Home show up here.</p>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {(myPastKudos || []).map((kudo) => {
                  const pastImgUrls = getKudoImageUrls(kudo, imageUrls);
                  return (
                    <div key={kudo.id} style={{
                      background: INPUT_BG, borderRadius: 14, padding: 16,
                      border: '1px solid ' + HAIRLINE
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                        <div style={{
                          width: 28, height: 28, borderRadius: '50%',
                          background: (kudo._user?.avatarUrl || kudo._user?.profileImageUrl)
                            ? `url(${kudo._user.avatarUrl || kudo._user.profileImageUrl}) center/cover`
                            : PRIMARY_LIGHT,
                          flexShrink: 0,
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 11, color: PRIMARY_DARK, fontWeight: 600
                        }}>
                          {!(kudo._user?.avatarUrl || kudo._user?.profileImageUrl) && (kudo._user?.name || kudo._user?.displayName || 'U').charAt(0).toUpperCase()}
                        </div>
                        <span style={{ fontSize: 13, fontWeight: 500, color: DARK }}>{kudo._user?.name || kudo._user?.displayName || 'Anonymous'}</span>
                        <span style={{ fontSize: 11, color: MUTED, marginLeft: 'auto' }}>{formatTimeAgo(kudo._timestamp)}</span>
                      </div>
                      <KudoPromptOrPlainBody
                        kudo={kudo}
                        DARK={DARK}
                        MUTED={MUTED}
                        FONT={FONT}
                        PRIMARY={PRIMARY}
                        truncateAt={0}
                        expanded
                        onExpandMore={null}
                      />
                      {(pastImgUrls || []).length > 0 && (
                        <div style={{ marginTop: 10 }}>
                          <KudoImageCarousel urls={pastImgUrls} isDark={isDark} primary={PRIMARY} />
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}
            <button
              type="button"
              onClick={() => setShowPastKudosModal(false)}
              style={{
                width: '100%',
                padding: 12,
                borderRadius: 12,
                border: '1px solid ' + HAIRLINE,
                background: 'transparent',
                color: DARK,
                fontFamily: FONT,
                cursor: 'pointer',
                fontSize: 14,
                marginTop: 14
              }}
            >
              Close
            </button>
          </div>
        </div>
      )}

{showSavedModal && (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="saved-title"
          onClick={() => setShowSavedModal(false)}
          style={{
            position: 'fixed', inset: 0, background: OVERLAY_SCRIM, zIndex: 240,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 'max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom))'
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: CARD, color: DARK, width: '100%', maxWidth: 500,
              borderRadius: 20, padding: 20, maxHeight: 'min(88dvh, 100%)', overflowY: 'auto',
              border: '1px solid ' + HAIRLINE
            }}
          >
            <h3 id="saved-title" style={{ margin: '0 0 14px', fontSize: 18, fontWeight: 600 }}>Saved</h3>
            {(myHearts || []).length === 0 ? (
              <div style={{ padding: '24px 0', textAlign: 'center' }}>
                <div style={{ fontSize: 32, marginBottom: 8 }}>💛</div>
                <p style={{ fontSize: 15, fontWeight: 600, margin: '0 0 6px', color: DARK }}>No saved kudos yet</p>
                <p style={{ fontSize: 13, color: MUTED, margin: 0 }}>Heart posts from Home to save them here.</p>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {(myHearts || []).map(kudo => {
                  const savedImgUrls = getKudoImageUrls(kudo, imageUrls);
                  const savedReportKey = `kudo:${kudo.id}`;
                  const savedReported = mySpamReportKeys.has(savedReportKey);
                  return (
                    <div key={kudo.id} style={{
                      background: INPUT_BG, borderRadius: 14, padding: '16px 14px 32px',
                      border: '1px solid ' + HAIRLINE,
                      position: 'relative'
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                        <div style={{
                          width: 28, height: 28, borderRadius: '50%',
                          background: (kudo._user?.avatarUrl || kudo._user?.profileImageUrl)
                            ? `url(${kudo._user.avatarUrl || kudo._user.profileImageUrl}) center/cover`
                            : PRIMARY_LIGHT,
                          flexShrink: 0,
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 11, color: PRIMARY_DARK, fontWeight: 600
                        }}>
                          {!(kudo._user?.avatarUrl || kudo._user?.profileImageUrl) && (kudo._user?.name || kudo._user?.displayName || 'U').charAt(0).toUpperCase()}
                        </div>
                        <span style={{ fontSize: 13, fontWeight: 500, color: DARK }}>{kudo._user?.name || kudo._user?.displayName || 'Anonymous'}</span>
                        <span style={{ fontSize: 11, color: MUTED, marginLeft: 'auto' }}>{formatTimeAgo(kudo._timestamp)}</span>
                      </div>
                      <KudoPromptOrPlainBody
                        kudo={kudo}
                        DARK={DARK}
                        MUTED={MUTED}
                        FONT={FONT}
                        PRIMARY={PRIMARY}
                        truncateAt={0}
                        expanded
                        onExpandMore={null}
                      />
                      {(savedImgUrls || []).length > 0 && (
                        <div style={{ marginTop: 10 }}>
                          <KudoImageCarousel urls={savedImgUrls} isDark={isDark} primary={PRIMARY} />
                        </div>
                      )}
                      {accountUserId && canReportKudoAsSpam(kudo, accountUserId) ? (
                        <button
                          type="button"
                          disabled={savedReported}
                          title={savedReported ? 'Report sent' : 'Report spam'}
                          onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            handleReportSpam('kudo', kudo.id);
                          }}
                          style={reportSpamFooterStyle(savedReported)}
                        >
                          {savedReported ? 'Reported' : 'Report spam'}
                        </button>
                      ) : null}
                    </div>
                  );
                })}
              </div>
            )}
            <button
              type="button"
              onClick={() => setShowSavedModal(false)}
              style={{
                width: '100%',
                padding: 12,
                borderRadius: 12,
                border: '1px solid ' + HAIRLINE,
                background: 'transparent',
                color: DARK,
                fontFamily: FONT,
                cursor: 'pointer',
                fontSize: 14,
                marginTop: 14
              }}
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>