BELLE
BLOOM

{Math.round(progress)}% MAXED

{/* 📜 LIST */}

{(tips || []).map(tip => { const isExpanded = expandedId === tip.id; const completer = tip.completed ? getMember(tip.completedBy) : null; return (

{/* Main Row */}

setExpandedId(isExpanded ? null : tip.id)} style={{ display: 'flex', gap: 16, cursor: 'pointer', alignItems: 'flex-start' }} > {/* Checkbox */}

{ e.stopPropagation(); toggleTip(tip.id); }} style={{ width: 32, height: 32, flexShrink: 0, border: '2px solid #1A1A1A', borderRadius: '50%', // Pearl shape display: 'flex', alignItems: 'center', justifyContent: 'center', background: tip.completed ? '#D42426' : 'transparent', color: '#FFFCF5', fontSize: 18, transition: 'background 0.2s' }} > {tip.completed ? '🎀' : ''}

{/* Content */}

{tip.title}

{/* Multiplayer context line */}

{tip.completed ? ( <> Completed by {completer?.displayName || 'someone'} ) : ( Tap to expand details )} {tip.likes?.length > 0 && ( ❤️ {(tip.likes || []).length} )}

{/* Expanded Details - "Silk Unfurl" */} {isExpanded && (

{tip.details}

Recommended by: {getMember(tip.addedBy)?.displayName || 'Editorial Team'}

)}

); })} {/* Empty State / End of List Decoration */}

🏮

End of scroll. Keep glowing.

{/* 🎀 ADD BUTTON / MODAL */} {!isAdding && (

)} {/* 🧧 BOTTOM SHEET INPUT */} {isAdding && (

setIsAdding(false)}>

e.stopPropagation()} style={{ width: '100%', background: '#FFFCF5', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: '24px 20px calc(env(safe-area-inset-bottom, 20px) + 20px) 20px', boxShadow: '0 -4px 20px rgba(0,0,0,0.2)', animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }} >

NEW ENTRY

setNewTipTitle(e.target.value)} style={{ width: '100%', border: 'none', background: 'transparent', fontSize: 32, fontWeight: 800, fontFamily: 'Helvetica, Arial, sans-serif', marginBottom: 16, outline: 'none', color: '#1A1A1A', textTransform: 'uppercase' }} />

setNewTipDetails(e.target.value)}
              style={{
                width: '100%',
                border: 'none',
                background: 'transparent',
                fontSize: 18,
                fontFamily: 'Times New Roman, serif',
                fontStyle: 'italic',
                marginBottom: 24,
                outline: 'none',
                resize: 'none',
                minHeight: 80
              }}
            />

<button 
              onClick={addNewTip}
              disabled={!newTipTitle.trim()}
              style={{
                width: '100%',
                padding: 16,
                background: '#1A1A1A',
                color: '#FFFCF5',
                border: 'none',
                borderRadius: 0,
                fontSize: 16,
                fontWeight: 'bold',
                textTransform: 'uppercase',
                opacity: newTipTitle.trim() ? 1 : 0.5
              }}
            >
              Add to Compendium
            </button>
          </div>
        </div>
      )}
      <style>{`@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }`}</style>
    </div>
  );
}</article></body></html>