{/* Status dot */}

{run.title} {isPending && ( Pending )}

{run.dateLong} · {run.area}

{isPending ? 'Awaiting ' : ''}{host.name.split(' ')[0]}

); } function ProfileScreen({ nav, onSelectRun }) { const stats = [ { l: 'Runs attended', v: ME.attended }, { l: 'Crew met', v: 12 }, ]; // Split & date-sort my runs const dateRank = (r) => RUNS.findIndex(x => x.id === r.runId); // their order in RUNS roughly chronological const going = MY_RUNS.filter(r => r.status === 'going').sort((a, b) => dateRank(a) - dateRank(b)); const pending = MY_RUNS.filter(r => r.status === 'pending').sort((a, b) => dateRank(a) - dateRank(b)); return (

{/* Settings button (top-right) */}

{/* Top: identity */}

{ME.firstName}

{ME.paceMin}–{ME.paceMax}/km · {ME.neighborhood}

Phone verified

{/* Stats */}

{stats.map(s => (

{s.v}

{s.l}

))}

{/* Your runs */}

Your runs

{going.length + pending.length} upcoming

{pending.length > 0 && ( <>

Awaiting approval · {pending.length}

{pending.map(r => ( onSelectRun && onSelectRun(r.runId, 'pending')}/> ))}

)} {going.length > 0 && ( <>

Going · {going.length}

{going.map(r => ( onSelectRun && onSelectRun(r.runId, 'approved')}/> ))}

)}

{/* Pace + distance summary */}

Your defaults

{[ ['Pace', `${ME.paceMin}–${ME.paceMax}/km`, 'pace'], ['Distance', ME.distancePref, 'run'], ['Neighborhood', ME.neighborhood, 'pin'], ].map(([l, v, icon]) => (

{l} {v}

))}

); } // ───────────────────────────────────────────────────────────── // Inspect mode — click any element to copy its outerHTML // ───────────────────────────────────────────────────────────── function InspectMode() { const [active, setActive] = React.useState(false); const btnRef = React.useRef(null); const lastHighlightRef = React.useRef(null); const clearHighlight = () => { if (lastHighlightRef.current) { lastHighlightRef.current.style.outline = ''; lastHighlightRef.current.style.outlineOffset = ''; lastHighlightRef.current = null; } }; React.useEffect(() => { if (!active) return; document.body.style.cursor = 'crosshair'; const onMove = (e) => { if (btnRef.current && btnRef.current.contains(e.target)) { clearHighlight(); return; } clearHighlight(); lastHighlightRef.current = e.target; e.target.style.outline = '2px solid rgba(212,255,58,0.85)'; e.target.style.outlineOffset = '-1px'; }; const onClick = (e) => { if (btnRef.current && btnRef.current.contains(e.target)) return; e.preventDefault(); e.stopPropagation(); clearHighlight(); navigator.clipboard.writeText(e.target.outerHTML); setActive(false); }; document.addEventListener('mousemove', onMove, true); document.addEventListener('click', onClick, true); return () => { document.body.style.cursor = ''; clearHighlight(); document.removeEventListener('mousemove', onMove, true); document.removeEventListener('click', onClick, true); }; }, [active]); const btn = ( ); return ReactDOM.createPortal(btn, document.body); } // ───────────────────────────────────────────────────────────── // Prototype disclaimer splash // ───────────────────────────────────────────────────────────── function SplashScreen({ onDismiss }) { return (

This is a design prototype

You're looking at an interactive mockup — not a real app.

There's nothing to sign up for. Just tap around and explore the concept.

); } // ───────────────────────────────────────────────────────────── // Main app // ───────────────────────────────────────────────────────────── function App() { // Screens: home | runDetail | joinRequest | chat | create | hostIndex | hostRequests | profile const [screen, setScreen] = React.useState('home'); const [selectedRunId, setSelectedRunId] = React.useState('r1'); const [runState, setRunState] = React.useState('browse'); // browse | pending | approved const [decisions, setDecisions] = React.useState({}); const [completedOnboarding, setCompletedOnboarding] = React.useState(false); const [editRunId, setEditRunId] = React.useState(null); const [showSplash, setShowSplash] = React.useState(true); const run = RUNS.find(r => r.id === selectedRunId); const nav = (s) => setScreen(s); const onSelectRun = (id, initialState) => { setSelectedRunId(id); const run = RUNS.find(r => r.id === id); setRunState(initialState || (run && run.openToJoin ? 'open' : 'browse')); setScreen('runDetail'); }; // Tap "Request to join" on the run detail → opens the message screen const handleRequestJoin = () => { setScreen('joinRequest'); }; // Send the request → go to pending and stay there const handleSendRequest = () => { setRunState('pending'); setScreen('runDetail'); }; const handleDecide = (user, decision) => { setDecisions(prev => ({ ...prev, [user]: decision })); }; if (showSplash) { return setShowSplash(false)}/>; } if (!completedOnboarding) { return { setCompletedOnboarding(true); setScreen('home'); }}/>; } const showTabBar = ['home', 'profile', 'hostIndex'].includes(screen); const hasNewRequest = MY_HOSTED.some(r => r.pending > 0); return (

{screen === 'home' && } {screen === 'runDetail' && ( setScreen('chat')} /> )} {screen === 'joinRequest' && ( )} {screen === 'chat' && setScreen('runDetail')}/>} {screen === 'create' && { setEditRunId(null); setScreen(editRunId ? 'hostRequests' : 'home'); }} initialRun={editRunId ? RUNS.find(r => r.id === editRunId) : null} editMode={!!editRunId}/>} {screen === 'hostIndex' && ( setScreen('hostRequests')}/> )} {screen === 'hostRequests' && ( setScreen('hostIndex')} decisions={decisions} onDecide={handleDecide} onViewRun={() => { setSelectedRunId('r1'); setRunState('approved'); setScreen('runDetail'); }} onOpenChat={() => { setSelectedRunId('r1'); setScreen('chat'); }} onEditRun={() => { setEditRunId('r1'); setScreen('create'); }} /> )} {screen === 'profile' && } {screen === 'settings' && } {showTabBar && } {/* Floating debug button to restart onboarding */}

); } Object.assign(window, { App, TabBar, ProfileScreen, ProfileMyRunRow, InspectMode });