{/* HEADER */}

The Garden

{(memberList || []).slice(0, 3).map((m, i) => (

openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: `2px solid ${THEME.cream}`, marginLeft: i > 0 ? -10 : 0, background: '#ddd', overflow: 'hidden', cursor: 'pointer' }}>

))} {isMultiplayer && ( )}

{/* HERO FLOWER */}

{stats.emoji}

{stats.msg}

{/* INSIGHTS */} {stats.topPattern && stats.topPattern[1] > 1 && (

🦉 Pattern: Multiple entries for {stats.topPattern[0]}.

)} {/* VINE LIST */}

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

🌱

Plant your first truth.

) : ( [...flags].reverse().map((flag, i) => (

{flag.severity === 0 ? '🌿' : (flag.severity > 2 ? '🥀' : '🍂')}

{flag.category} {new Date(flag._timestamp || Date.now()).toLocaleDateString()}

{flag.text}

👤 {flag._user?.displayName || 'Someone'}

)) )}

{/* FAB */}

{/* MODAL */} {isModalOpen && (

setIsModalOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)' }} />

New Observation

setText(e.target.value)} placeholder="What happened?"
              style={{ 
                width: '100%', height: 100, padding: 12, borderRadius: 12, border: '1px solid #ddd',
                fontFamily: THEME.fontBody, fontSize: 16, marginBottom: 16, resize: 'none'
              }}
            />
            <div style={{ display: 'flex', gap: 8, marginBottom: 16, overflowX: 'auto' }}>
              {['General', 'Communication', 'Effort', 'Commitment', 'Respect'].map(c => (
                <button key={c} onClick={() => setCategory(c)} style={{
                  padding: '8px 16px', borderRadius: 20, border: 'none',
                  background: category === c ? THEME.sage : '#f0f0f0', color: category === c ? 'white' : '#666'
                }}>{c}</button>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
              {[0, 1, 2, 3].map(lvl => (
                <button key={lvl} onClick={() => setSeverity(lvl)} style={{
                  flex: 1, height: 44, borderRadius: 8, border: 'none',
                  background: severity === lvl ? getSeverityColor(lvl) : '#f5f5f5',
                  color: severity === lvl ? 'white' : '#999', fontWeight: 'bold'
                }}>
                  {lvl === 0 ? '🌿' : lvl === 1 ? '🍂' : lvl === 2 ? '🥀' : '🚩'}
                </button>
              ))}
            </div>
            <button onClick={handlePlant} style={{ 
              width: '100%', height: 50, borderRadius: 12, background: THEME.earth, 
              color: 'white', border: 'none', fontSize: 16, fontWeight: 'bold'
            }}>Plant It</button>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>