Fiber Fueled

Happy gut, happy you! 🌱

{/* 💡 NUTRIENT NUGGET */}

💡

{nugget}

{/* 📊 MAIN DASHBOARD */}

{/* SVG Progress Circle */}

{myTotal}g of {dailyGoal}g goal

{myTotal >= dailyGoal ? (

You nailed it! 🎉

) : (

{dailyGoal - myTotal}g to go! You got this!

)}

{/* 👥 FIBER FRIENDS (Multiplayer or Solo) */}

🤝 Fiber Friends

{(memberList || []).map(member => { const total = getUserTotal(member.id); const isMe = member.id === user.id; return (

member.handle && openProfile(member.handle)} style={{ minWidth: 70, textAlign: 'center', opacity: total > 0 ? 1 : 0.6, transform: isMe ? 'scale(1.05)' : 'scale(1)', transition: 'transform 0.2s' }} >

{!member.avatarUrl && 👤} {total >= dailyGoal && (

⭐

)}

{member.displayName.split(' ')[0]}

{total}g

); })} {(memberList || []).length === 1 && (

➕

Invite

)}

{/* 🥬 RECENT LOGS */}

Recent Fibers

{(entries || []).length === 0 ? (

🥬

No fiber yet today!

) : ( (entries || []).sort((a,b) => b.timestamp - a.timestamp).map(entry => (

{entry.emoji || '🥬'}

{entry.food}

{(memberList || []).find(m => m.id === entry.userId)?.displayName || 'Unknown'}

+{entry.grams}g

)) )}

{/* ➕ FAB */}

{/* 🧾 ADD MODAL (Bottom Sheet) */}

Add Fiber

{/* Quick Suggestions */}

{[ { name: 'Apple', g: 4, e: '🍎' }, { name: 'Banana', g: 3, e: '🍌' }, { name: 'Oats', g: 4, e: '🥣' }, { name: 'Broccoli', g: 2, e: '🥦' }, { name: 'Beans', g: 7, e: '🫘' }, { name: 'Avocado', g: 10, e: '🥑' } ].map(item => ( ))}

setNewFood(e.target.value)} style={{ flex: 2, height: 48, borderRadius: 12, border: '1px solid #eee', padding: '0 12px', fontSize: 16 }} /> setNewGrams(e.target.value)} style={{ flex: 1, height: 48, borderRadius: 12, border: '1px solid #eee', padding: '0 12px', fontSize: 16 }} />

{/* OVERLAY for modal */} {isAddOpen && (

setIsAddOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 90 }} /> )}

); }