{/* --- HEADER --- */}

Notices

UNSENT LETTERS & SECRETS

{/* --- FEED --- */}

{(posts || []).map((post, index) => (

setActivePostId(post.id)} style={{ backgroundColor: '#fff', border: `2px solid ${swissBlack}`, padding: '24px', boxShadow: '8px 8px 0px rgba(0,0,0,1)', cursor: 'pointer', transition: 'transform 0.2s, opacity 0.4s, filter 0.4s', // DELETE ANIMATION: Shred effect opacity: deletingId === post.id ? 0 : 1, transform: deletingId === post.id ? 'scale(0.9) skewX(20deg) translateY(20px)' : 'scale(1)', filter: deletingId === post.id ? 'blur(10px)' : 'none', position: 'relative', animation: `fadeIn 0.5s ease-out backwards`, animationDelay: `${index * 0.1}s` }} >

{post.persona}

{post.content}

{formatTime(post.createdAt)} {(post.comments?.length ?? 0)} replies • {(Object.values(post.reactions ?? {}).reduce((a,b)=>a+b,0))} reactions

))} {/* Spacer for FAB */}

{/* --- FAB (WRITE) --- */} {/* --- DETAIL MODAL --- */} {activePost && (

{/* Toolbar */}

{/* Big Date */}

{formatTime(activePost.createdAt).toUpperCase()} • {activePost.persona.toUpperCase()}

{/* Massive Content */}

{activePost.content}

{/* Delete Option (Owner Only) */} {activePost.authorId === user.id && ( )}

{/* Reactions */}

Reactions

{['❤️', '🔥', '🥺', '✨', '🍷'].map(emoji => ( ))}

{/* Comments */}

Echoes

{(activePost.comments ?? []).map(comment => (

{comment.authorAvatar ? ( avatar

) : (

👤

)}

{comment.authorName}

{/* Highlight mentions in blue */}

{comment.text.split(/(@\w+)/g).map((part, i) => part.startsWith('@') ? {part} : part )}

))} {(!activePost.comments || (activePost.comments || []).length === 0) && (

No echoes yet. Be the first.

)}

{/* MENTION SUGGESTIONS POPUP */} {mentionQuery !== null && (suggestedMembers || []).length > 0 && (

Mention...

{(suggestedMembers || []).map(m => ( ))}

)} {/* Comment Input */}

)} {/* --- WRITE MODAL --- */} {isWriting && (

Signed As {/* Preset Personas */}

{(PERSONAS || []).map(p => ( ))}

{/* Custom Persona Input */}

setSelectedPersona(e.target.value)} placeholder="Or type custom signature..." style={{ width: '100%', padding: '12px 16px', borderRadius: 8, border: '1px solid #ddd', fontSize: 14, fontWeight: 500, backgroundColor: '#f9f9f9', outline: 'none' }} />

✒️

setNewLetter(e.target.value)}
            placeholder="What is on your heart?"
            autoFocus
            style={{
              flex: 1,
              width: '100%',
              border: 'none',
              resize: 'none',
              fontSize: 32,
              fontWeight: 800,
              fontFamily: 'inherit',
              letterSpacing: '-0.02em',
              lineHeight: 1.3,
              outline: 'none',
              padding: 0
            }}
          />
          
          <div style={{ marginTop: 20, fontSize: 13, color: '#888' }}>
            Your letter will be posted anonymously under the signature: <strong style={{ color: swissBlack }}>{selectedPersona || 'Anonymous'}</strong>
          </div>
        </div>
      )}

{/* --- GLOBAL STYLES FOR ANIMATION --- */}
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}</article></body></html>