{/* Global Floating Emoji Elements for WOW effects */}

{(floatingEmojis || []).map(item => (

{item.emoji}

))}

{/* Main Container */}

{/* Header */}

{ e.currentTarget.style.display = 'none'; }} />

YELLOWBOARD

@unsw community hub

{/* Active Campus Members Panel */}

📍 Currently Active {(memberList || []).length} Online

{(memberList || []).map(member => (

openProfile(member.handle)} style={{ textAlign: 'center', cursor: 'pointer', minWidth: 60 }} >

{!member.avatarUrl && '🎓'}

{member.displayName?.split(' ')[0] || 'You'}

))}

{/* Segmented Tab Bar */}

{[ { id: 'intros', label: '👋 Intros', desc: 'Survival cards' }, { id: 'pulse', label: '⚡ Pulse Feed', desc: 'Live announcements' }, { id: 'vault', label: '🔑 Vault', desc: 'Campus hacks' } ].map(tab => { const isSelected = activeTab === tab.id; return ( ); })}

{/* Content Area */}

{/* TAB 1: INTROS */} {activeTab === 'intros' && (

🐝 Campus Introductions

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

👋

Be the First!

Drop your campus card, claim your tag, and let UNSW peer connections ignite.

) : (

{(intros || []).map(item => { const isTargetSparkling = showSparkles === item.id; return (

{/* Profile & Avatar Photo */}

openProfile(item._user?.handle)} style={{ width: 60, height: 60, borderRadius: 12, background: resolvedImages[item.photoAssetId] ? `url(${resolvedImages[item.photoAssetId]}) center/cover` : '#333', border: '2px solid #FDB515', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }} > {!resolvedImages[item.photoAssetId] && '🐝'}

openProfile(item._user?.handle)} style={{ margin: 0, fontSize: 16, fontWeight: 800, color: '#FFF', cursor: 'pointer' }} > {item._user?.displayName || 'UNSW Legend'}

{item.year}

📚 {item.major}

{/* Quirky Tag */} {item.tag}

{item.bio}

🕒 {new Date(item._timestamp ?? Date.now()).toLocaleDateString()}

); })}

)}

)} {/* TAB 2: PULSE FEED */} {activeTab === 'pulse' && (

📢 UNSW Pulse Feed

{/* Pulse Submission Form */}

setPulseText(e.target.value)}
                    placeholder="Free sausage sizzle? Lost keys? Drop a dynamic campus shout!"
                    style={{
                      flex: 1,
                      background: 'transparent',
                      border: 'none',
                      color: '#FFF',
                      fontSize: 16,
                      resize: 'none',
                      minHeight: 60,
                      outline: 'none'
                    }}
                  />
                </div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'flex-end',
                  borderTop: '1px solid #222',
                  paddingTop: 12,
                  marginTop: 8
                }}>
                  <button
                    type="submit"
                    disabled={!pulseText.trim()}
                    style={{
                      background: pulseText.trim() ? '#FDB515' : '#333',
                      color: '#000',
                      border: 'none',
                      padding: '8px 16px',
                      borderRadius: 10,
                      fontWeight: 700,
                      cursor: 'pointer'
                    }}
                  >
                    📣 Shout!
                  </button>
                </div>
              </form>

{/* Pulse Feed Posts */}
              {(pulseFeed || []).length === 0 ? (
                <div style={{
                  textAlign: 'center',
                  padding: '40px 20px',
                  background: '#111',
                  borderRadius: 20,
                  border: '1px dashed #444'
                }}>
                  <span style={{ fontSize: 44 }}>⚡</span>
                  <h3 style={{ margin: '12px 0 4px', color: '#FDB515' }}>Feed is Quiet</h3>
                  <p style={{ color: '#888', fontSize: 14, margin: 0 }}>
                    Be the first to shout out what\'s happening on campus right now.
                  </p>
                </div>
              ) : (
                <div style={{ display: 'grid', gap: 12 }}>
                  {(pulseFeed || []).map(post => (
                    <div
                      key={post.id}
                      style={{
                        background: '#1A1A1A',
                        borderRadius: 16,
                        padding: 14,
                        border: '1px solid #333'
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                        <div
                          onClick={() => openProfile(post._user?.handle)}
                          style={{
                            width: 32,
                            height: 32,
                            borderRadius: '50%',
                            background: post._user?.profileImageUrl ? `url(${post._user.profileImageUrl}) center/cover` : '#FDB515',
                            cursor: 'pointer'
                          }}
                        />
                        <div>
                          <div
                            onClick={() => openProfile(post._user?.handle)}
                            style={{ fontSize: 14, fontWeight: 700, cursor: 'pointer', color: '#FDB515' }}
                          >
                            {post._user?.displayName || 'UNSW Legend'}
                          </div>
                          <div style={{ fontSize: 10, color: '#555' }}>
                            {new Date(post._timestamp ?? Date.now()).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                          </div>
                        </div>
                      </div>

{/* Reaction Badges */}
                      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                        {['👍', '🔥', '🐝', '🎓'].map(emoji => {
                          const count = post.reactions?.[emoji] ?? 0;
                          return (
                            <button
                              key={emoji}
                              onClick={() => handlePulseReaction(post.id, emoji)}
                              style={{
                                background: '#111',
                                border: '1px solid #333',
                                color: '#FFF',
                                padding: '6px 12px',
                                borderRadius: 12,
                                fontSize: 13,
                                cursor: 'pointer',
                                display: 'flex',
                                alignItems: 'center',
                                gap: 6
                              }}
                            >
                              <span>{emoji}</span>
                              <span style={{ fontSize: 11, fontWeight: 700, color: '#FDB515' }}>{count}</span>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

{/* TAB 3: SURVIVAL VAULT */}
          {activeTab === 'vault' && (
            <div>
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: 16
              }}>
                <h2 style={{ fontSize: 18, margin: 0, fontWeight: 800, color: '#FDB515' }}>🔑 Survival Vault</h2>
                <button
                  onClick={() => setShowVaultModal(true)}
                  style={{
                    background: '#E54B4B',
                    color: '#FFF',
                    border: 'none',
                    padding: '10px 16px',
                    borderRadius: 12,
                    fontWeight: 700,
                    cursor: 'pointer'
                  }}
                >
                  ➕ Add Tip
                </button>
              </div>

{(survivalVault || []).length === 0 ? (
                <div style={{
                  textAlign: 'center',
                  padding: '40px 20px',
                  background: '#111',
                  borderRadius: 20,
                  border: '1px dashed #444'
                }}>
                  <span style={{ fontSize: 48 }}>📖</span>
                  <h3 style={{ margin: '12px 0 4px', color: '#FDB515' }}>No Survival Hacks Yet</h3>
                  <p style={{ color: '#888', fontSize: 14, margin: '0 0 16px 0' }}>
                    Drop the absolute best study nooks, cheap eats, or campus secrets.
                  </p>
                  <button
                    onClick={() => setShowVaultModal(true)}
                    style={{
                      background: '#FDB515',
                      color: '#000',
                      border: 'none',
                      padding: '12px 24px',
                      borderRadius: 12,
                      fontWeight: 700,
                      cursor: 'pointer'
                    }}
                  >
                    ✨ Submit First Hack
                  </button>
                </div>
              ) : (
                <div style={{ display: 'grid', gap: 14 }}>
                  {(survivalVault || []).map(item => {
                    const isVoted = votedItemId === item.id;
                    const userHasVoted = Array.isArray(item.votedBy) && (item.votedBy || []).includes(user?.id || 'guest');
                    return (
                      <div
                        key={item.id}
                        style={{
                          background: '#1A1A1A',
                          borderRadius: 18,
                          padding: 16,
                          border: '1px solid #333',
                          boxShadow: userHasVoted ? '0 0 12px rgba(253, 181, 21, 0.2)' : 'none',
                          transition: 'all 0.3s ease'
                        }}
                      >
                        <div style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'flex-start',
                          gap: 12
                        }}>
                          <div>
                            <span style={{
                              fontSize: 11,
                              background: '#333',
                              color: '#FFF',
                              padding: '4px 8px',
                              borderRadius: 6,
                              fontWeight: 700
                            }}>
                              {item.category}
                            </span>
                            <h3 style={{ fontSize: 16, fontWeight: 800, color: '#FFF', margin: '8px 0 4px 0' }}>
                              {item.title}
                            </h3>
                          </div>

{/* Upvote controller */}
                          <button
                            onClick={() => handleUpvote(item)}
                            style={{
                              background: userHasVoted ? '#FDB515' : '#222',
                              color: userHasVoted ? '#000' : '#FFF',
                              border: '1px solid #444',
                              borderRadius: 12,
                              padding: '8px 12px',
                              cursor: 'pointer',
                              display: 'flex',
                              flexDirection: 'column',
                              alignItems: 'center',
                              minWidth: 44,
                              animation: isVoted ? 'coinBounce 0.4s ease' : 'none'
                            }}
                          >
                            <span style={{ fontSize: 14 }}>🪙</span>
                            <span style={{ fontSize: 12, fontWeight: 900, marginTop: 2 }}>
                              {item.votes ?? 0}
                            </span>
                          </button>
                        </div>

<div style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: 6,
                          marginTop: 12,
                          borderTop: '1px solid #222',
                          paddingTop: 10,
                          fontSize: 11,
                          color: '#666'
                        }}>
                          <span>By {item._user?.displayName || 'UNSW Legend'}</span>
                          <span>•</span>
                          <span>{new Date(item._timestamp ?? Date.now()).toLocaleDateString()}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          )}
        </div>

{/* BOTTOM SHEET: INTRODUCE MYSELF */}
        {showIntroModal && (
          <div style={{
            position: 'fixed',
            top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(0,0,0,0.85)',
            zIndex: 1000,
            display: 'flex',
            alignItems: 'flex-end'
          }}>
            <div style={{
              width: '100%',
              maxHeight: '90vh',
              background: '#1A1A1A',
              borderTopLeftRadius: 24,
              borderTopRightRadius: 24,
              padding: 20,
              boxSizing: 'border-box',
              overflowY: 'auto',
              borderTop: '3px solid #FDB515'
            }}>
              {/* Drag Handle */}
              <div style={{
                width: 40,
                height: 5,
                background: '#444',
                borderRadius: 3,
                margin: '0 auto 16px'
              }} />

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                <h3 style={{ margin: 0, fontSize: 20, color: '#FDB515', fontWeight: 800 }}>👋 Create Campus Card</h3>
                <button
                  onClick={() => setShowIntroModal(false)}
                  style={{ background: 'transparent', border: 'none', color: '#FFF', fontSize: 22, cursor: 'pointer' }}
                >
                  ✕
                </button>
              </div>

<form onSubmit={submitIntro}>
                <div style={{ marginBottom: 16 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                    Major/Degree
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. Bachelor of Computer Science"
                    value={introForm.major}
                    onChange={e => setIntroForm({ ...introForm, major: e.target.value })}
                    style={{
                      width: '100%',
                      height: 48,
                      borderRadius: 12,
                      background: '#111',
                      border: '1px solid #444',
                      color: '#FFF',
                      padding: '0 12px',
                      fontSize: 15,
                      outline: 'none',
                      boxSizing: 'border-box'
                    }}
                  />
                </div>

<div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
                  <div style={{ flex: 1 }}>
                    <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                      Study Year
                    </label>
                    <select
                      value={introForm.year}
                      onChange={e => setIntroForm({ ...introForm, year: e.target.value })}
                      style={{
                        width: '100%',
                        height: 48,
                        borderRadius: 12,
                        background: '#111',
                        border: '1px solid #444',
                        color: '#FFF',
                        padding: '0 12px',
                        fontSize: 15,
                        outline: 'none'
                      }}
                    >
                      {['1st Year', '2nd Year', '3rd Year', 'Honours / Postgrad', 'PhD Candidate'].map(yr => (
                        <option key={yr} value={yr}>{yr}</option>
                      ))}
                    </select>
                  </div>

<div style={{ flex: 1 }}>
                    <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                      UNSW Persona Tag
                    </label>
                    <select
                      value={introForm.tag}
                      onChange={e => setIntroForm({ ...introForm, tag: e.target.value })}
                      style={{
                        width: '100%',
                        height: 48,
                        borderRadius: 12,
                        background: '#111',
                        border: '1px solid #444',
                        color: '#FFF',
                        padding: '0 12px',
                        fontSize: 15,
                        outline: 'none'
                      }}
                    >
                      {[
                        'Free Food Hunter 🍕',
                        'Level 2 Library Camper 🏕️',
                        '9AM Class Survivor 😴',
                        'Anzac Parade Runner 🏃',
                        'Main Library Legend 📚',
                        'Lost on Campus Finder 🗺️'
                      ].map(tg => (
                        <option key={tg} value={tg}>{tg}</option>
                      ))}
                    </select>
                  </div>
                </div>

<div style={{ marginBottom: 16 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                    Self-Intro Bio
                  </label>
                  <textarea
                    required
                    placeholder="Introduce yourself! Share your study spots, goals, or what societies you are joining..."
                    value={introForm.bio}
                    onChange={e => setIntroForm({ ...introForm, bio: e.target.value })}
                    style={{
                      width: '100%',
                      height: 80,
                      borderRadius: 12,
                      background: '#111',
                      border: '1px solid #444',
                      color: '#FFF',
                      padding: '12px',
                      fontSize: 15,
                      outline: 'none',
                      resize: 'none',
                      boxSizing: 'border-box'
                    }}
                  />
                </div>

{/* Optional Photo Upload Component */}
                <div style={{ marginBottom: 24 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                    Add a Photo (Optional)
                  </label>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <button
                      type="button"
                      onClick={handleUploadPhoto}
                      style={{
                        background: '#222',
                        border: '1px solid #FDB515',
                        color: '#FFF',
                        padding: '10px 16px',
                        borderRadius: 12,
                        fontSize: 14,
                        fontWeight: 700,
                        cursor: 'pointer'
                      }}
                    >
                      {isUploadingPhoto ? '⏳ Uploading...' : '📷 Select Photo'}
                    </button>
                    {uploadedPhotoUrl && (
                      <div style={{
                        width: 44,
                        height: 44,
                        borderRadius: 8,
                        background: `url(${uploadedPhotoUrl}) center/cover`,
                        border: '1px solid #FDB515'
                      }} />
                    )}
                  </div>
                </div>

<button
                  type="submit"
                  style={{
                    width: '100%',
                    minHeight: 52,
                    background: '#FDB515',
                    color: '#000',
                    border: 'none',
                    borderRadius: 16,
                    fontSize: 16,
                    fontWeight: 800,
                    cursor: 'pointer'
                  }}
                >
                  🔥 Share Card to Intro Wall
                </button>
              </form>
            </div>
          </div>
        )}

{/* BOTTOM SHEET: ADD SURVIVAL TIP */}
        {showVaultModal && (
          <div style={{
            position: 'fixed',
            top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(0,0,0,0.85)',
            zIndex: 1000,
            display: 'flex',
            alignItems: 'flex-end'
          }}>
            <div style={{
              width: '100%',
              maxHeight: '90vh',
              background: '#1A1A1A',
              borderTopLeftRadius: 24,
              borderTopRightRadius: 24,
              padding: 20,
              boxSizing: 'border-box',
              overflowY: 'auto',
              borderTop: '3px solid #FDB515'
            }}>
              {/* Drag Handle */}
              <div style={{
                width: 40,
                height: 5,
                background: '#444',
                borderRadius: 3,
                margin: '0 auto 16px'
              }} />

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                <h3 style={{ margin: 0, fontSize: 20, color: '#FDB515', fontWeight: 800 }}>🔑 Share Campus Secret</h3>
                <button
                  onClick={() => setShowVaultModal(false)}
                  style={{ background: 'transparent', border: 'none', color: '#FFF', fontSize: 22, cursor: 'pointer' }}
                >
                  ✕
                </button>
              </div>

<form onSubmit={submitVault}>
                <div style={{ marginBottom: 16 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                    Tip Title
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. Best silent study spot on Level 8"
                    value={vaultForm.title}
                    onChange={e => setVaultForm({ ...vaultForm, title: e.target.value })}
                    style={{
                      width: '100%',
                      height: 48,
                      borderRadius: 12,
                      background: '#111',
                      border: '1px solid #444',
                      color: '#FFF',
                      padding: '0 12px',
                      fontSize: 15,
                      outline: 'none',
                      boxSizing: 'border-box'
                    }}
                  />
                </div>

<div style={{ marginBottom: 16 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                    Category
                  </label>
                  <select
                    value={vaultForm.category}
                    onChange={e => setVaultForm({ ...vaultForm, category: e.target.value })}
                    style={{
                      width: '100%',
                      height: 48,
                      borderRadius: 12,
                      background: '#111',
                      border: '1px solid #444',
                      color: '#FFF',
                      padding: '0 12px',
                      fontSize: 15,
                      outline: 'none'
                    }}
                  >
                    {['🍔 Food & Drink', '📖 Study Spots', '⚡ Life Hacks', '🎉 Social / Events'].map(cat => (
                      <option key={cat} value={cat}>{cat}</option>
                    ))}
                  </select>
                </div>

<div style={{ marginBottom: 24 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, marginBottom: 6, color: '#FDB515' }}>
                    The Hack Detail
                  </label>
                  <textarea
                    required
                    placeholder="Detail how peers can benefit, locations, pricing, or timing hacks..."
                    value={vaultForm.desc}
                    onChange={e => setVaultForm({ ...vaultForm, desc: e.target.value })}
                    style={{
                      width: '100%',
                      height: 100,
                      borderRadius: 12,
                      background: '#111',
                      border: '1px solid #444',
                      color: '#FFF',
                      padding: '12px',
                      fontSize: 15,
                      outline: 'none',
                      resize: 'none',
                      boxSizing: 'border-box'
                    }}
                  />
                </div>

<button
                  type="submit"
                  style={{
                    width: '100%',
                    minHeight: 52,
                    background: '#FDB515',
                    color: '#000',
                    border: 'none',
                    borderRadius: 16,
                    fontSize: 16,
                    fontWeight: 800,
                    cursor: 'pointer'
                  }}
                >
                  🪙 Upvote & Post Tip
                </button>
              </form>
            </div>
          </div>
        )}

</div>
    </div>
  );
}</article></body></html>