{/* MAIN APP WINDOW */}

🌐 Campus_Spot_Finder.exe

setSearchQuery(e.target.value)} style={retroInput} />

{/* MEMBERS & ACTIVITY PANEL */} {showMembers && (

👥 Community Members

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

m.handle && openProfile ? openProfile(m.handle) : null} style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '3px 2px', borderBottom: '1px dotted #C0C0C0', cursor: m.handle ? 'pointer' : 'default' }}>

{m.avatarUrl ?

: '👤'}

{m.displayName || m.name || 'User'} {m.role === 'owner' && [Owner]}

))}

{/* Recent Activity Feed */}

📋 Recent Activity

{(appData?.activityFeed ?? []).length === 0 ? (

No activity yet. Check in to a spot!

) : ( (appData?.activityFeed ?? []).slice(0, 20).map((entry, i) => { const entryUser = entry._user ?? {}; const timeAgo = entry._timestamp ? Math.round((Date.now() - entry._timestamp) / 60000) : null; const timeStr = timeAgo !== null ? (timeAgo < 1 ? 'just now' : timeAgo < 60 ? `${timeAgo}m ago` : `${Math.round(timeAgo/60)}h ago`) : ''; return (

entryUser.handle && openProfile ? openProfile(entryUser.handle) : null} style={{ width: '18px', height: '18px', backgroundColor: '#000080', color: '#FFF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '9px', flexShrink: 0, cursor: entryUser.handle ? 'pointer' : 'default' }}> {entryUser.profileImageUrl ?

: '👤'}

entryUser.handle && openProfile ? openProfile(entryUser.handle) : null} style={{ fontWeight: 'bold', color: entryUser.handle ? '#0000FF' : '#000', textDecoration: entryUser.handle ? 'underline' : 'none', cursor: entryUser.handle ? 'pointer' : 'default' }}>{entryUser.displayName || 'User'} {' '}{entry.action === 'checked_in' ? '✅ checked into' : '❌ left'}{' '} {entry.spotName} {timeStr}

); }) )}

)} {/* SPOTS LIST */}

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

No spots found.

) : ( (filteredSpaces || []).map(space => { const checkedInUsers = space.checkedInUsers || []; const isCheckedIn = (checkedInUsers || []).some(u => u.id === user?.id); const busyLevel = space.busyLevel || 0; let busyText = "Quiet"; let busyColor = "#008000"; if (busyLevel > 33) { busyText = "Moderate"; busyColor = "#808000"; } if (busyLevel > 66) { busyText = "Packed"; busyColor = "#FF0000"; } return (

📍 {space.name} {space.isDemo && [DEMO]}

{space.description}

Status: {busyText}

Busyness: handleBusyLevelCommit(space.id, parseInt(e.target.value))} style={{ flex: 1, accentColor: '#000080' }} />

); }) )}

{/* ADD SPOT MODAL */} {isAdding && (

➕ Add_New_Spot.exe

Spot Name: setNewSpace({...newSpace, name: e.target.value})} placeholder="e.g. Library 2nd Floor" />

Description:

setNewSpace({...newSpace, description: e.target.value})} 
                  placeholder="Vibes, noise level, etc."
                />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <button onClick={handlePhotoUpload} style={retroButton}>
                  {uploading ? '⏳ Loading...' : '📸 Upload Photo'}
                </button>
                {newSpace.photoUrl && <span style={{ fontSize: '12px', color: '#008000', fontWeight: 'bold' }}>✓ Attached</span>}
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '8px', borderTop: '2px groove #FFFFFF', paddingTop: '12px' }}>
                <button onClick={() => setIsAdding(false)} style={retroButton}>Cancel</button>
                <button onClick={handleSaveSpace} style={{...retroButton, fontWeight: 'bold'}}>💾 Save</button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* CHECK-IN ROSTER MODAL */}
      {activeCheckInSpotId && activeCheckInSpace && (
        <div style={{ 
          position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.5)', 
          display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: '16px'
        }}>
          <div style={{ ...retroWindow, width: '100%', maxWidth: '320px', boxShadow: '4px 4px 0px #000' }}>
            <div style={retroTitleBar}>
              <span>👥 Who_Is_Here.txt</span>
              <button onClick={() => setActiveCheckInSpotId(null)} style={{...retroButton, padding: '0 4px'}}>X</button>
            </div>
            <div style={{ padding: '12px' }}>
              <h3 style={{ margin: '0 0 12px 0', fontSize: '14px', fontFamily: '"MS Sans Serif", Arial' }}>
                Checked into: {activeCheckInSpace.name}
              </h3>
              
              <div style={{ 
                backgroundColor: '#FFFFFF', 
                borderTop: '2px solid #808080', borderLeft: '2px solid #808080',
                borderBottom: '2px solid #FFFFFF', borderRight: '2px solid #FFFFFF',
                height: '200px', overflowY: 'auto', padding: '4px'
              }}>
                {(activeCheckInSpace.checkedInUsers || []).length === 0 ? (
                  <div style={{ padding: '8px', color: '#808080', fontStyle: 'italic', fontSize: '12px' }}>
                    No one is here right now.
                  </div>
                ) : (
                  (activeCheckInSpace.checkedInUsers || []).map((member, idx) => (
                    <div 
                      key={idx} 
                      onClick={() => member.handle && openProfile ? openProfile(member.handle) : null}
                      style={{ 
                        display: 'flex', alignItems: 'center', gap: '8px', padding: '4px', 
                        borderBottom: '1px dotted #C0C0C0', cursor: member.handle ? 'pointer' : 'default'
                      }}
                    >
                      <div style={{ width: '24px', height: '24px', backgroundColor: '#000080', color: '#FFF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }}>
                        {member.avatarUrl ? <img src={member.avatarUrl} style={{width:'100%', height:'100%', objectFit:'cover'}} alt=""/> : '👤'}
                      </div>
                      <span style={{ fontSize: '12px', fontFamily: '"MS Sans Serif", Arial', color: member.handle ? '#0000FF' : '#000', textDecoration: member.handle ? 'underline' : 'none' }}>
                        {member.displayName || 'User'}
                      </span>
                    </div>
                  ))
                )}
              </div>
              
              <div style={{ display: 'flex', justifyContent: 'center', marginTop: '12px' }}>
                <button onClick={() => setActiveCheckInSpotId(null)} style={retroButton}>OK</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>