CRAVE CRUISER

FOOD SPOT SUGGESTOR

{/* MEMBERS BAR */}

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

m.handle && openProfile(m.handle)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0, padding: '4px 10px', border: `2px solid ${NEON_GREEN}`, background: '#111' }}> {m.avatarUrl ? (

{ e.currentTarget.style.display = 'none'; }} /> ) : ( 👤 )} {m.displayName || 'Anon'}

))}

{/* RECENT ACTION TOAST */} {recentAction && (

{recentAction.type === 'added' && `⚡ ADDED: ${recentAction.name}`} {recentAction.type === 'visited' && `✅ CRUSHED IT: ${recentAction.name}`} {recentAction.type === 'imported' && `📋 IMPORTED ${recentAction.count} SPOTS`}

)}

{/* TABS */}

{['spots', 'visited'].map(tab => ( ))}

{/* MAIN CONTENT */}

{/* SUGGESTION CARD */} {suggestion && !isCrunching && (

⚡ SUGGESTED SPOT

{suggestion.isDemo ? `DEMO • ${suggestion.name}` : suggestion.name}

{suggestion.address}

{suggestion.distance != null && (

📍 ~{suggestion.distance.toFixed(1)} mi away

)}

)} {activeTab === 'spots' && ( <> {(unvisitedSpots || []).length === 0 ? (

🍽️

NO SPOTS YET

ADD YOUR FIRST CRAVING BELOW

) : ( (unvisitedSpots || []).map((spot, idx) => (

{spot.isDemo && DEMO} {spot.name}

{spot.address}

{spot.addedBy && !spot.isDemo && (

ADDED BY {(spot.addedBy?.displayName ?? spot._user?.displayName ?? 'someone').toUpperCase()}

)}

)) )} )} {activeTab === 'visited' && ( <> {(visitedSpots || []).length === 0 ? (

🏁

NO VISITS YET

GET OUT THERE AND CRUSH SOME CRAVINGS

) : ( (visitedSpots || []).map(spot => (

{spot.name}

{spot.address}

{spot.visitedBy && (

CRUSHED BY {(spot.visitedBy?.displayName ?? 'someone').toUpperCase()}

)}

)) )} )}

{/* PASTE MODAL (BOTTOM SHEET) */} {showPasteModal && ( <>

setShowPasteModal(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.7)', zIndex: 2000 }} />

📋 PASTE GOOGLE MAPS LIST

COPY YOUR "WANT TO GO" LIST FROM GOOGLE MAPS AND PASTE IT HERE

setPasteText(e.target.value)}
              placeholder={'Paste your list here...\n\n1. The Best Taco Spot\n   123 Main St\n2. Amazing Sushi Place\n   456 Oak Ave\n3. Cozy Coffee Shop'}
              style={{
                ...inputStyle,
                minHeight: 160, resize: 'vertical',
                flex: 1, marginBottom: 12,
              }}
            />
            {pasteText.trim() && (
              <div style={{ fontSize: 12, color: NEON_YELLOW, marginBottom: 12, letterSpacing: 1 }}>
                DETECTED: {parseGoogleMapsList(pasteText).length} SPOTS
              </div>
            )}
            <div style={{ display: 'flex', gap: 12 }}>
              <button onClick={() => setShowPasteModal(false)} style={{ ...btnStyle('#666', false), flex: 1 }}>CANCEL</button>
              <button
                onClick={handlePasteImport}
                disabled={parseGoogleMapsList(pasteText).length === 0}
                style={{ ...btnStyle(NEON_CYAN, true), flex: 2, opacity: parseGoogleMapsList(pasteText).length === 0 ? 0.4 : 1 }}
              >
                ⚡ IMPORT {parseGoogleMapsList(pasteText).length} SPOTS
              </button>
            </div>
          </div>
        </>
      )}

{/* ADD FORM (BOTTOM SHEET) */}
      {showAddForm && (
        <>
          <div onClick={() => setShowAddForm(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.7)', zIndex: 2000 }} />
          <div style={{
            position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 2001,
            background: '#111', borderTop: `${BORDER_WIDTH}px solid ${NEON_GREEN}`,
            paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)',
            paddingLeft: 16, paddingRight: 16,
          }}>
            <div style={{ width: 36, height: 5, background: '#333', margin: '0 auto 16px' }} />
            <div style={{ fontSize: 16, fontWeight: 900, color: NEON_GREEN, letterSpacing: 2, marginBottom: 16, textTransform: 'uppercase' }}>
              ➕ ADD NEW SPOT
            </div>
            <input
              ref={inputRef}
              value={newSpotName}
              onChange={(e) => setNewSpotName(e.target.value)}
              onFocus={() => setInputFocused(true)}
              onBlur={() => setInputFocused(false)}
              placeholder="SPOT NAME"
              style={{ ...inputStyle, borderColor: inputFocused ? NEON_GREEN : STARK_WHITE, boxShadow: inputFocused ? `0 0 10px ${NEON_GREEN}40` : 'none' }}
            />
            <input
              value={newSpotAddress}
              onChange={(e) => setNewSpotAddress(e.target.value)}
              placeholder="ADDRESS (OPTIONAL)"
              style={inputStyle}
            />
            <div style={{ display: 'flex', gap: 12 }}>
              <button onClick={() => setShowAddForm(false)} style={{ ...btnStyle('#666', false), flex: 1 }}>CANCEL</button>
              <button
                onPointerDown={() => setPressedBtn('addspot')}
                onPointerUp={() => setPressedBtn(null)}
                onPointerLeave={() => setPressedBtn(null)}
                onClick={handleAddSubmit}
                disabled={!newSpotName.trim()}
                style={{
                  ...btnStyle(NEON_GREEN, true), flex: 2,
                  opacity: !newSpotName.trim() ? 0.4 : 1,
                  transform: pressedBtn === 'addspot' ? 'translate(2px, 2px)' : 'none',
                  boxShadow: pressedBtn === 'addspot' ? `2px 2px 0 ${NEON_GREEN}` : `4px 4px 0 ${NEON_GREEN}`,
                }}
              >
                ⚡ ADD SPOT
              </button>
            </div>
          </div>
        </>
      )}

{/* STICKY BOTTOM ACTION BAR */}
      <div style={{
        position: 'fixed',
        bottom: 0, left: 0, right: 0,
        background: `linear-gradient(transparent, ${STARK_BLACK} 20%)`,
        paddingTop: 24,
        paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 12px)',
        paddingLeft: 'max(env(safe-area-inset-left, 0px), 16px)',
        paddingRight: 'max(env(safe-area-inset-right, 0px), 16px)',
        zIndex: 100,
      }}>
        <div style={{ maxWidth: 448, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button
            onPointerDown={() => setPressedBtn('suggest')}
            onPointerUp={() => setPressedBtn(null)}
            onPointerLeave={() => setPressedBtn(null)}
            onClick={suggestSpot}
            disabled={(unvisitedSpots || []).length === 0 || isCrunching}
            style={{
              ...btnStyle(NEON_PINK, true),
              opacity: (unvisitedSpots || []).length === 0 ? 0.4 : 1,
              fontSize: 17, letterSpacing: 3,
              boxShadow: pressedBtn === 'suggest' ? `3px 3px 0 ${NEON_PINK}` : `6px 6px 0 ${NEON_PINK}`,
              transform: pressedBtn === 'suggest' ? 'translate(3px, 3px)' : 'none',
              textShadow: `0 0 10px ${STARK_BLACK}`,
            }}
          >
            🔥 SUGGEST A SPOT NEARBY!
          </button>
          <div style={{ display: 'flex', gap: 10 }}>
            <button
              onPointerDown={() => setPressedBtn('add')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              onClick={() => setShowAddForm(true)}
              style={{
                ...btnStyle(NEON_GREEN, false), flex: 1, fontSize: 13,
                transform: pressedBtn === 'add' ? 'translate(2px, 2px)' : 'none',
                boxShadow: pressedBtn === 'add' ? `2px 2px 0 ${NEON_GREEN}` : `4px 4px 0 ${NEON_GREEN}`,
              }}
            >
              ➕ ADD SPOT
            </button>
            <button
              onPointerDown={() => setPressedBtn('paste')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              onClick={() => setShowPasteModal(true)}
              style={{
                ...btnStyle(NEON_CYAN, false), flex: 1, fontSize: 13,
                transform: pressedBtn === 'paste' ? 'translate(2px, 2px)' : 'none',
                boxShadow: pressedBtn === 'paste' ? `2px 2px 0 ${NEON_CYAN}` : `4px 4px 0 ${NEON_CYAN}`,
              }}
            >
              📋 PASTE LIST
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}</article></body></html>