{user?.name ?? 'My'}'s Scrapbook

a pressed garden of circles & makings

{/* Share affordance */}

{/* Tab toggle */}

{[{ k: 'herbarium', l: '🌿 Herbarium' }, { k: 'loom', l: '🧵 Build Loom' }].map(t => ( ))}

{/* HERBARIUM VIEW */} {view === 'herbarium' && (

{/* Gardeners (members) social surface */}

~ Gardeners in this Circle ~

{(memberList || []).map((m) => { const handle = m?.handle; const name = m?.displayName ?? m?.name ?? 'Friend'; const avatar = m?.avatarUrl ?? m?.profileImageUrl; return ( ); })}

{/* Recent activity feed */} {((circles || []).length > 0 || (threads || []).length > 0) && (

~ RECENT BLOOMS ~

{[...(circles || []).map(c => ({ ...c, _kind: 'circle' })), ...(threads || []).map(t => ({ ...t, _kind: 'thread' }))] .sort((a,b) => (b?._timestamp ?? 0) - (a?._timestamp ?? 0)) .slice(0, 3) .map((entry, idx) => { const u = entry?._user || {}; const name = u.displayName || entry?.addedBy || entry?.by || 'Someone'; const handle = u.handle; return (

{entry._kind === 'circle' ? ` pressed ${entry?.plant ?? '🌿'} ${entry?.name ?? ''}` : ` wove a ${entry?.role ?? ''} thread`}

); })}

)}

~ My Circle Herbarium ~

{(circles || []).length === 0 && !showAddCircle && (

🌱

Your garden awaits its first bloom.
Press a Circle to remember it forever.

)} {(circles || []).length > 0 && (

{(circles || []).map((c) => { const isBlooming = bloomingId === c?.id; return ( ); })}

)}

{/* Stats footer */} {(circles || []).length > 0 && (

{(circles || []).length}

circles pressed

{(memberList || []).length}

in this garden

{(threads || []).length}

threads woven

)}

)} {/* LOOM VIEW */} {view === 'loom' && (

~ Build Together Loom ~

{editingProject ? (

saveProjectName(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') saveProjectName(e.target.value); }} placeholder="Name your project..." style={{ flex: 1, padding: '6px 10px', border: '1px dashed #C4A77D', borderRadius: 8, background: 'rgba(255,250,240,0.8)', fontFamily: "'Caveat', cursive", fontSize: 18, color: '#5C4A3A', }} />

) : ( )} {/* Loom board */}

{/* Loom pegs */} {[0,1,2,3,4,5,6,7].map(i => (

))} {[0,1,2,3,4,5,6,7].map(i => (

))} {/* Threads */} {(threads || []).length === 0 && (

pull a thread below
to start weaving ~

)}

{/* Thread spools */}

~ PULL A ROLE ~

{(threadColors || []).map(tc => ( ))}

{(threads || []).length > 0 && ( )}

)} {/* Add Circle Modal */} {showAddCircle && (

setShowAddCircle(false)}>

e.stopPropagation()} style={{ background: paperBg, borderRadius: 16, padding: 20, width: '100%', maxWidth: 340, border: '2px solid #C4A77D', boxShadow: '0 20px 50px rgba(0,0,0,0.3)', animation: 'bloomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)', }}>

Press a New Circle ✿

setNewCircleName(e.target.value)} placeholder="Circle name (e.g., Sustainability)" style={{ width: '100%', padding: '10px 12px', marginBottom: 8, border: '1px dashed #C4A77D', borderRadius: 8, background: 'rgba(255,250,240,0.8)', fontFamily: 'inherit', fontSize: 15, color: '#5C4A3A', boxSizing: 'border-box', }} /> setNewCircleRole(e.target.value)} placeholder="Your role (e.g., Organizer)" style={{ width: '100%', padding: '10px 12px', marginBottom: 8, border: '1px dashed #C4A77D', borderRadius: 8, background: 'rgba(255,250,240,0.8)', fontFamily: 'inherit', fontSize: 15, color: '#5C4A3A', boxSizing: 'border-box', }} />

setNewCircleMemory(e.target.value)} placeholder="A small memory..." rows={2} style={{
              width: '100%', padding: '10px 12px', marginBottom: 12,
              border: '1px dashed #C4A77D', borderRadius: 8,
              background: 'rgba(255,250,240,0.8)', fontFamily: "'Caveat', cursive",
              fontSize: 16, color: '#5C4A3A', boxSizing: 'border-box', resize: 'none',
            }} />
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => setShowAddCircle(false)} style={{
                flex: 1, padding: '10px', background: 'transparent',
                border: '1px solid #8B7355', borderRadius: 8, color: '#8B7355',
                fontFamily: 'inherit', fontSize: 14, cursor: 'pointer',
              }}>cancel</button>
              <button onClick={addCircle} style={{
                flex: 2, padding: '10px',
                background: 'linear-gradient(135deg, #9CAF88, #8B9B7A)',
                border: 'none', borderRadius: 8, color: '#FFF8E8',
                fontFamily: 'inherit', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                boxShadow: '0 3px 8px rgba(156,175,136,0.4)',
              }}>✿ Press into garden</button>
            </div>
          </div>
        </div>
      )}

{/* Circle Detail Modal */}
      {activeCircle && (
        <div style={{
          position: 'fixed', inset: 0,
          background: 'rgba(92,74,58,0.5)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 20, zIndex: 100,
          animation: 'fadeIn 0.3s',
        }} onClick={() => setActiveCircle(null)}>
          <div onClick={(e) => e.stopPropagation()} style={{
            background: paperBg,
            borderRadius: 16,
            padding: 24,
            width: '100%',
            maxWidth: 340,
            border: `2px solid ${activeCircle?.color ?? '#C4A77D'}`,
            boxShadow: '0 20px 50px rgba(0,0,0,0.3)',
            animation: 'bloomIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
            textAlign: 'center',
            position: 'relative',
          }}>
            <div style={{ fontSize: 72, marginBottom: 8, animation: 'sway 3s ease-in-out infinite' }}>{activeCircle?.plant ?? '🌿'}</div>
            <div style={{ fontSize: 11, letterSpacing: 3, color: '#8B7355', marginBottom: 4 }}>{(activeCircle?.plantName ?? '').toUpperCase()}</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 26, margin: '0 0 4px', color: '#5C4A3A', fontStyle: 'italic' }}>
              {activeCircle?.name ?? ''}
            </h2>
            <div style={{
              display: 'inline-block',
              padding: '4px 14px',
              background: `${activeCircle?.color ?? '#9CAF88'}33`,
              border: `1px dashed ${activeCircle?.color ?? '#9CAF88'}`,
              borderRadius: 20,
              fontSize: 13,
              color: '#5C4A3A',
              marginBottom: 14,
            }}>my role: {activeCircle?.role ?? 'Member'}</div>
            {activeCircle?.memory && (
              <div style={{
                background: 'rgba(255,250,240,0.6)',
                border: '1px dashed #C4A77D',
                borderRadius: 10,
                padding: 12,
                fontFamily: "'Caveat', cursive",
                fontSize: 17,
                color: '#5C4A3A',
                fontStyle: 'italic',
                lineHeight: 1.4,
              }}>"{activeCircle.memory}"</div>
            )}
            <button onClick={() => setActiveCircle(null)} style={{
              marginTop: 16, padding: '10px 24px',
              background: `linear-gradient(135deg, ${activeCircle?.color ?? '#9CAF88'}, ${activeCircle?.color ?? '#9CAF88'}cc)`,
              border: 'none', borderRadius: 20, color: '#FFF8E8',
              fontFamily: 'inherit', fontSize: 14, fontWeight: 600, cursor: 'pointer',
            }}>close the page</button>
          </div>
        </div>
      )}