The Quad Verses

── late-night verses from campus ──

{/* Members strip */} {(memberList || []).length > 0 && (

POETS:

{(memberList || []).slice(0, 8).map((m) => ( ))}

)} {/* Filters */}

◆ WHERE ◆

{(LOCATIONS || []).map(loc => ( ))}

◆ MOOD ◆

{(MOODS || []).map(mood => ( ))}

{/* Feed */}

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

✒️

The Quad is quiet tonight.

{(poems || []).length === 0 ? 'Be the first to leave a verse.' : 'No poems match these filters.'}

) : ( (filteredPoems || []).map((poem, idx) => { if (!poem) return null; const loc = (LOCATIONS || []).find(l => l.id === poem.location) || LOCATIONS[1]; const isExpanded = expandedId === poem.id; const authorName = poem.anonymous ? 'Anonymous' : (poem._user?.displayName || 'A Poet'); const authorAvatar = poem.anonymous ? null : poem._user?.profileImageUrl; const authorHandle = poem.anonymous ? null : poem._user?.handle; const inkedBy = Array.isArray(poem.inkedBy) ? poem.inkedBy : []; const hasInked = (inkedBy || []).includes(user?.id); const rotation = ((idx % 3) - 1) * 0.6; return (

inkPoem(poem.id, e)} style={{ background: paperColor, border: `1px solid ${inkColor}`, borderLeft: `4px solid ${loc.color}`, padding: 18, marginBottom: 16, transform: `rotate(${rotation}deg)`, boxShadow: '3px 4px 0 rgba(0,0,0,0.12)', animation: 'drift 0.5s ease-out', position: 'relative', borderRadius: 2 }} > {/* Location tag */}

{loc.emoji} {poem.location}

{poem.mood}

{/* Title */} {poem.title && (

{poem.title}

)} {/* Poem body */}

{poem.text}

{poem.text && (poem.text || []).length > 220 && !isExpanded && ( )} {/* Footer */}

{authorHandle && authorHandle !== user?.handle && ( )}

); }) )} {/* Drafts section */} {(drafts || []).length > 0 && (

✎ YOUR DRAFTS ({(drafts || []).length})

{(drafts || []).map(d => d && (

{d.location} · {d.mood}

{d.text}

))}

)}

{/* Floating quill button */} {!showComposer && ( )} {/* Composer sheet */} {showComposer && (

setShowComposer(false)} >

e.stopPropagation()} style={{ width: '100%', maxWidth: 520, maxHeight: '92dvh', background: paperColor, borderTopLeftRadius: 20, borderTopRightRadius: 20, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', paddingLeft: 20, paddingRight: 20, boxSizing: 'border-box', overflowY: 'auto', WebkitOverflowScrolling: 'touch', borderTop: `3px solid ${crimson}` }} >

◆ TYPEWRITER STUDIO ◆

Compose a verse

setComposerTitle(e.target.value)} placeholder="Title (optional)" maxLength={80} style={{ width: '100%', minHeight: 48, fontSize: 18, fontFamily: serifFont, fontStyle: 'italic', fontWeight: 700, border: 'none', borderBottom: `1.5px solid ${inkColor}`, background: 'transparent', color: navy, padding: '8px 4px', boxSizing: 'border-box', marginBottom: 12, outline: 'none' }} />

setComposerText(e.target.value)}
              placeholder={"the fig tree drops leaves like\nunread notifications\nand still we sit here..."}
              rows={10}
              maxLength={2000}
              style={{
                width: '100%',
                fontSize: 16,
                fontFamily: typewriterFont,
                lineHeight: 1.8,
                border: `1px dashed ${'#8B7355'}`,
                background: 'rgba(253,251,245,0.6)',
                color: inkColor,
                padding: 14,
                boxSizing: 'border-box',
                borderRadius: 2,
                resize: 'vertical',
                outline: 'none',
                minHeight: 200
              }}
            />

<div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: typewriterFont, fontSize: 10, color: '#8B7355', marginTop: 6, letterSpacing: 1 }}>
              <span>{charCount} chars · {lineCount} lines</span>
              <span>{2000 - charCount} left</span>
            </div>

<div style={{ marginTop: 16 }}>
              <div style={{ fontFamily: typewriterFont, fontSize: 10, letterSpacing: 2, color: '#6B5D4F', marginBottom: 6 }}>WHERE ARE YOU?</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {(LOCATIONS || []).map(loc => (
                  <button
                    key={loc.id}
                    onClick={() => setComposerLocation(loc.id)}
                    style={{
                      minHeight: 36,
                      padding: '0 10px',
                      background: composerLocation === loc.id ? navy : 'transparent',
                      color: composerLocation === loc.id ? gold : inkColor,
                      border: `1.5px solid ${navy}`,
                      fontFamily: typewriterFont,
                      fontSize: 11,
                      borderRadius: 2,
                      cursor: 'pointer',
                      letterSpacing: 0.5
                    }}
                  >
                    {loc.emoji} {loc.id}
                  </button>
                ))}
              </div>
            </div>

<div style={{ marginTop: 14 }}>
              <div style={{ fontFamily: typewriterFont, fontSize: 10, letterSpacing: 2, color: '#6B5D4F', marginBottom: 6 }}>MOOD</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {(MOODS || []).map(mood => (
                  <button
                    key={mood}
                    onClick={() => setComposerMood(mood)}
                    style={{
                      minHeight: 32,
                      padding: '0 10px',
                      background: composerMood === mood ? crimson : 'transparent',
                      color: composerMood === mood ? '#fff' : crimson,
                      border: `1.5px solid ${crimson}`,
                      fontFamily: typewriterFont,
                      fontSize: 11,
                      borderRadius: 20,
                      cursor: 'pointer'
                    }}
                  >
                    {mood}
                  </button>
                ))}
              </div>
            </div>

<div style={{
              marginTop: 16,
              padding: 12,
              background: 'rgba(253,181,21,0.15)',
              border: `1px dashed ${'#8B6914'}`,
              borderRadius: 2,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: 8
            }}>
              <div>
                <div style={{ fontFamily: typewriterFont, fontSize: 12, color: inkColor, letterSpacing: 0.5 }}>Drop Anonymous</div>
                <div style={{ fontFamily: serifFont, fontStyle: 'italic', fontSize: 12, color: '#6B5D4F' }}>for secret admirers & midnight philosophers</div>
              </div>
              <button
                onClick={() => setIsAnonymous(!isAnonymous)}
                style={{
                  width: 52,
                  height: 30,
                  borderRadius: 15,
                  background: isAnonymous ? navy : '#ccc',
                  border: 'none',
                  position: 'relative',
                  cursor: 'pointer',
                  transition: 'background 0.2s'
                }}
              >
                <div style={{
                  position: 'absolute',
                  top: 3,
                  left: isAnonymous ? 25 : 3,
                  width: 24,
                  height: 24,
                  borderRadius: 12,
                  background: '#fff',
                  transition: 'left 0.2s'
                }} />
              </button>
            </div>

<div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              <button
                onClick={saveDraft}
                disabled={!composerText.trim()}
                style={{
                  flex: 1,
                  minHeight: 52,
                  background: 'transparent',
                  border: `1.5px solid ${inkColor}`,
                  fontFamily: typewriterFont,
                  fontSize: 13,
                  color: inkColor,
                  borderRadius: 2,
                  letterSpacing: 1,
                  cursor: composerText.trim() ? 'pointer' : 'not-allowed',
                  opacity: composerText.trim() ? 1 : 0.5
                }}
              >
                ✎ SAVE DRAFT
              </button>
              <button
                onClick={publishPoem}
                disabled={!composerText.trim() || busy}
                style={{
                  flex: 2,
                  minHeight: 52,
                  background: composerText.trim() ? crimson : '#ccc',
                  border: `1.5px solid ${navy}`,
                  fontFamily: typewriterFont,
                  fontSize: 14,
                  color: '#fff',
                  borderRadius: 2,
                  letterSpacing: 1.5,
                  cursor: composerText.trim() ? 'pointer' : 'not-allowed',
                  fontWeight: 700
                }}
              >
                {busy ? '⏳ POSTING...' : '⬤ PUBLISH TO QUAD'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>