Pick a photo for {item.text}
{[['auto','🔍'],['generate','🪄'],['url','🔗'],['upload','📷']].map(([k,lbl]) => (
))}
{tab==='auto' && (
Search free stock photos (Pexels). Type a custom query or use the title below.
setSearchQ(e.target.value)} onKeyDown={e=>e.key==='Enter'&&runSearch()} style={{paddingRight:48}} autoCorrect="on" autoCapitalize="sentences"/>
{searching &&
searching…
}
{searchResults.length > 0 && (
{searchResults.map(p => (
))}
)}
{searchResults.length > 0 && (
Photos via Pexels · tap one to use
)}
)}
{tab==='generate' && (
Generate a custom image with AI. Leave the prompt blank to use "{item.text}" as-is, or describe exactly what you want.
setGenPrompt(e.target.value)} autoCorrect="on" autoCapitalize="sentences"/>
{saving ? 'generating… (~5-10s)' : '🪄 Generate image'}
{genPreview && (
)}
)}
{tab==='url' && (
setUrlVal(e.target.value)} autoFocus autoCorrect="off" autoCapitalize="none" spellCheck="false"/>
{urlVal && /^https?:\/\//.test(urlVal) && (
{e.target.style.display='none';}}/>
)}
Save
)}
{tab==='upload' && (
From your device · auto-resized to ~900px wide.
onFile(e.target.files?.[0])}/>
)}
{err && {err}
}
{item.photo && (
)}
);
}
// ---------- ACTIVITY FEED SHEET (full history w/ reactions) ----------
function ActivityFeedSheet({ open, onClose, me }){
const activity = useActivity();
const d = useData();
const [filter, setFilter] = useState('all'); // all | mine | theirs
const [reactionsDoc, setReactionsDoc] = useState({});
// Subscribe to activity reactions (stored on a dedicated doc)
useEffect(() => {
if(!open) return;
const ref = window.FT.db.collection('lists').doc('activity_reactions');
const unsub = ref.onSnapshot(doc => {
setReactionsDoc(doc.exists ? (doc.data() || {}) : {});
});
return unsub;
}, [open]);
const toggleReaction = (entryKey, emoji) => {
if(!me) return;
const ref = window.FT.db.collection('lists').doc('activity_reactions');
ref.get().then(doc => {
const data = doc.exists ? (doc.data() || {}) : {};
const entry = data[entryKey] || {};
entry[emoji] = entry[emoji] || [];
const i = entry[emoji].indexOf(me);
if(i > -1) entry[emoji].splice(i, 1);
else entry[emoji].push(me);
if(!entry[emoji].length) delete entry[emoji];
if(!Object.keys(entry).length) delete data[entryKey];
else data[entryKey] = entry;
ref.set(data);
});
};
const timeAgo = (ts) => {
if(!ts) return '';
const s = Math.floor((Date.now()-ts)/1000);
if(s<60) return 'just now';
if(s<3600) return Math.floor(s/60)+'m';
if(s<86400) return Math.floor(s/3600)+'h';
const days = Math.floor(s/86400);
if(days < 30) return days+'d';
return new Date(ts).toLocaleDateString('en', {month:'short', day:'numeric'});
};
const filtered = useMemo(() => {
if(!activity) return [];
if(filter==='mine') return activity.filter(a => a.who === me);
if(filter==='theirs') return activity.filter(a => a.who !== me);
return activity;
}, [activity, filter, me]);
// Group by day for nice headers
const grouped = useMemo(() => {
const byDay = {};
filtered.forEach(a => {
const d = new Date(a.ts);
const key = d.toDateString();
(byDay[key] = byDay[key] || []).push(a);
});
const today = new Date().toDateString();
const yest = new Date(Date.now()-86400000).toDateString();
return Object.entries(byDay).map(([k, items]) => {
const d = new Date(k);
const label = k===today ? 'today' : k===yest ? 'yesterday' : d.toLocaleDateString('en',{weekday:'long', month:'short', day:'numeric'});
return { key:k, label, items };
});
}, [filtered]);
const navigateTo = (a) => {
if(!a.cat) return;
onClose();
setTimeout(() => window.FTAPP?.navigate?.('list', a.cat, a.itemId), 50);
};
const REACTIONS = ['❤️','🥰','😍','🤣','✨','👀'];
return (
everything y'all have added, done, or sent — react to any of it ♡
{[['all','All'],['mine','Me'],['theirs','Them']].map(([k,lbl]) => (
))}
{grouped.length === 0 && (
nothing yet — go do something together ♡
)}
{grouped.map(g => (
{g.label}
{g.items.map((a, i) => {
const entryKey = `${a.ts}-${a.who}`;
const reactions = reactionsDoc[entryKey] || {};
const activeEmojis = Object.keys(reactions).filter(e => reactions[e]?.length);
return (
navigateTo(a)} style={{cursor:a.cat?'pointer':'default'}}>
{a.who} {a.detail}
{timeAgo(a.ts)}
{a.cat && d?.[a.cat] && (
{d[a.cat].emoji} {d[a.cat].title?.replace(/^[^\w]+\s*/,'')}
)}
{activeEmojis.map(e => {
const mine = reactions[e].includes(me);
return (
);
})}
{REACTIONS.map(e => (
))}
);
})}
))}
);
}
// export
Object.assign(window, { AddPhotoSheet, ActivityFeedSheet });
})();