import React, { useState, useEffect } from "react"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("parking-spot-memory"); const [view, setView] = useState("list"); const [selectedId, setSelectedId] = useState(null); const [now, setNow] = useState(Date.now()); const [dragOver, setDragOver] = useState(false); useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []); const { doc, merge, submit, reset } = useDocument({ type: "spot", location: "", notes: "", parkedAt: Date.now(), timerMins: 60, retrieved: false, }); const { docs: spots } = useLiveQuery("type", { key: "spot", descending: true }); const { docs: detailDocs } = useLiveQuery("_id", { key: selectedId }); const detailDoc = detailDocs?.[0] || null; const handleSubmit = (e) => { e.preventDefault(); if (!doc.location.trim()) return; merge({ parkedAt: Date.now() }); submit(); setView("list"); }; const handleDrop = (e) => { e.preventDefault(); setDragOver(false); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("image/")) merge({ _files: { photo: file } }); }; const handleFileInput = (e) => { const file = e.target.files[0]; if (file) merge({ _files: { photo: file } }); }; const markRetrieved = (spot) => { database.put({ ...spot, retrieved: true, retrievedAt: Date.now() }); }; const deleteSpot = (id) => { database.del(id); setView("list"); }; const formatCountdown = (parkedAt, timerMins) => { const expiry = parkedAt + timerMins * 60000; const diff = expiry - now; if (diff <= 0) return { label: "EXPIRED", expired: true }; const h = Math.floor(diff / 3600000); const m = Math.floor((diff % 3600000) / 60000); const s = Math.floor((diff % 60000) / 1000); const label = h > 0 ? `${h}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}` : `${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`; return { label, expired: false }; }; const formatAgo = (ts) => { const diff = now - ts; const m = Math.floor(diff / 60000); if (m < 1) return "just now"; if (m < 60) return `${m} min ago`; const h = Math.floor(m / 60); if (h < 24) return `${h} hr ago`; return `${Math.floor(h / 24)}d ago`; }; const activeSpots = spots.filter((s) => !s.retrieved); const pastSpots = spots.filter((s) => s.retrieved); const c = { pageBg: "bg-[#1a1a2e]", card: "bg-[#0f0f1a] border-2 border-[#f5c518]", cardWhite: "bg-[#f0ede6] border-2 border-[#1a1a2e]", ink: "text-[#f0ede6]", inkDark: "text-[#1a1a2e]", muted: "text-[#9998aa]", yellow: "bg-[#f5c518]", yellowText: "text-[#f5c518]", red: "bg-[#e63946]", redText: "text-[#e63946]", green: "bg-[#2dc653]", greenText: "text-[#2dc653]", blue: "bg-[#3a86ff]", blueText: "text-[#3a86ff]", mono: "font-['JetBrains_Mono',monospace]", heading: "font-bold uppercase tracking-tight", label: "text-[0.6rem] uppercase tracking-[0.18em] text-[#9998aa]", radius: "rounded-[3px]", input: "w-full bg-[#0f0f1a] border-2 border-[#f5c518] rounded-[3px] px-3 py-2 text-sm text-[#f0ede6] font-['Space_Grotesk',sans-serif] focus:outline-none focus:border-[#f5c518] focus:bg-[#1a1a2e] transition-all duration-150 placeholder-[#9998aa]", btnPrimary: "bg-[#f5c518] text-[#1a1a2e] border-2 border-[#1a1a2e] rounded-[3px] px-5 py-2.5 text-[0.75rem] uppercase tracking-[0.1em] font-black cursor-pointer hover:bg-[#ffe566] active:brightness-90 transition-all duration-150 disabled:opacity-50", btnRed: "bg-[#e63946] text-[#f0ede6] border-2 border-[#f0ede6] rounded-[3px] px-5 py-2.5 text-[0.75rem] uppercase tracking-[0.1em] font-black cursor-pointer hover:brightness-110 active:brightness-90 transition-all duration-150", btnGhost: "bg-transparent text-[#9998aa] border-2 border-[#9998aa] rounded-[3px] px-5 py-2.5 text-[0.75rem] uppercase tracking-[0.1em] font-black cursor-pointer hover:text-[#f0ede6] hover:border-[#f0ede6] transition-all duration-150", divider: "border-t border-[#f5c518] border-opacity-20", }; return ( <>

{/* NAV / HEADER */}

Parking Spot Memory

Transit-style spot tracker

{/* LIVE TICKER */}

LIVE

{new Date(now).toLocaleTimeString()} {activeSpots.length} ACTIVE · {pastSpots.length} ARCHIVED

{/* FORM VIEW */} {view === "form" && (

NEW Log Parking Spot

Stop / Location * merge({ location: e.target.value })} />

Notes

merge({ notes: e.target.value })} />
                </div>
                <div>
                  <label className={`${c.label} block mb-1.5`}>Time Limit (minutes)</label>
                  <input className={c.input} type="number" min={1} max={999} value={doc.timerMins}
                    onChange={e => merge({ timerMins: parseInt(e.target.value) || 60 })} />
                </div>
                <div>
                  <label className={`${c.label} block mb-1.5`}>Photo</label>
                  <div
                    className={`border-2 ${dragOver ? "border-[#3a86ff]" : "border-[#f5c518]"} border-dashed ${c.radius} p-5 text-center cursor-pointer transition-colors duration-150`}
                    onDrop={handleDrop}
                    onDragOver={e => { e.preventDefault(); setDragOver(true); }}
                    onDragLeave={() => setDragOver(false)}
                    onClick={() => document.getElementById("photo-input").click()}
                  >
                    <input id="photo-input" type="file" accept="image/*" className="hidden" onChange={handleFileInput} />
                    {doc._files?.photo ? (
                      <span className={`${c.greenText} font-bold text-sm`}>{doc._files.photo.name}</span>
                    ) : (
                      <div className="flex flex-col items-center gap-2">
                        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#9998aa" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <rect x="3" y="3" width="18" height="18" rx="2"/>
                          <circle cx="8.5" cy="8.5" r="1.5"/>
                          <polyline points="21 15 16 10 5 21"/>
                        </svg>
                        <span className={`${c.muted} text-xs`}>Drop photo or tap to browse</span>
                      </div>
                    )}
                  </div>
                </div>
                <div className="flex gap-2 pt-1">
                  <button type="submit" className={c.btnPrimary}>Log Spot</button>
                  <button type="button" className={c.btnGhost} onClick={() => { reset(); setView("list"); }}>Cancel</button>
                </div>
              </form>
            </div>
          )}

{/* DETAIL VIEW */}
          {view === "detail" && detailDoc && (
            <div className={`${c.card} ${c.radius} overflow-hidden mb-5`}>
              <div className="board-header">
                <div className="flex items-center gap-2">
                  <span className={`route-badge ${detailDoc.retrieved ? "" : "green"}`} style={{minWidth:28,height:28,fontSize:'0.65rem'}}>
                    {detailDoc.retrieved ? "DONE" : "LIVE"}
                  </span>
                  <span className={`${c.inkDark} font-black uppercase tracking-tight text-sm truncate max-w-[200px]`}>{detailDoc.location}</span>
                </div>
                <button onClick={() => setView("list")} className="text-[#1a1a2e] font-black text-xs uppercase tracking-widest hover:opacity-70 transition-opacity">
                  Back
                </button>
              </div>

<div className="p-4 flex flex-col gap-4">
                {/* Timer display */}
                {!detailDoc.retrieved && (() => {
                  const ct = formatCountdown(detailDoc.parkedAt, detailDoc.timerMins);
                  return (
                    <div className={`${c.radius} border-2 ${ct.expired ? "border-[#e63946]" : "border-[#f5c518]"} p-4 text-center`}>
                      <div className={c.label}>Time Remaining</div>
                      <div className={`${c.mono} font-black text-4xl mt-1 ${ct.expired ? c.redText : c.yellowText} tracking-tight`}>
                        {ct.label}
                      </div>
                      {ct.expired && <div className={`${c.redText} text-xs font-bold uppercase tracking-widest mt-1`}>Return to vehicle</div>}
                    </div>
                  );
                })()}

{/* Stats row */}
                <div className="grid grid-cols-2 gap-3">
                  <div className={`${c.radius} border border-[rgba(245,197,24,0.2)] p-3`}>
                    <div className={c.label}>Parked</div>
                    <div className={`${c.mono} ${c.ink} font-bold text-sm mt-0.5`}>{formatAgo(detailDoc.parkedAt)}</div>
                  </div>
                  <div className={`${c.radius} border border-[rgba(245,197,24,0.2)] p-3`}>
                    <div className={c.label}>Limit</div>
                    <div className={`${c.mono} ${c.ink} font-bold text-sm mt-0.5`}>{detailDoc.timerMins} min</div>
                  </div>
                </div>

{detailDoc.notes && (
                  <div className={`${c.radius} border border-[rgba(245,197,24,0.2)] p-3`}>
                    <div className={c.label}>Notes</div>
                    <div className={`${c.ink} text-sm mt-1`}>{detailDoc.notes}</div>
                  </div>
                )}

{detailDoc._files?.photo && (
                  <img src={URL.createObjectURL(detailDoc._files.photo)} alt="Parking spot"
                    className={`w-full max-h-52 object-cover border-2 border-[#f5c518] ${c.radius}`} />
                )}

<div className="flex gap-2 flex-wrap pt-1">
                  {!detailDoc.retrieved && (
                    <button className={c.btnPrimary} onClick={() => { markRetrieved(detailDoc); setView("list"); }}>
                      Mark Retrieved
                    </button>
                  )}
                  <button className={c.btnRed} onClick={() => deleteSpot(detailDoc._id)}>Delete</button>
                </div>
              </div>
            </div>
          )}

{/* LIST VIEW */}
          {view === "list" && (
            <div className="flex flex-col gap-5">
              {/* Active departure board */}
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <span className="route-badge green" style={{minWidth:24,height:24,fontSize:'0.6rem'}}>ON</span>
                  <span className={c.label}>Active Spots</span>
                </div>
                {activeSpots.length === 0 ? (
                  <div className="departure-board">
                    <div className="board-header">
                      <span className={`${c.inkDark} font-black uppercase tracking-tight text-xs`}>Active Spots</span>
                      <span className="ticker" style={{color:'#1a1a2e'}}>0 stops</span>
                    </div>
                    <div className="p-6 text-center">
                      <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#9998aa" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-3">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="12" y1="8" x2="12" y2="12"/>
                        <line x1="12" y1="16" x2="12.01" y2="16"/>
                      </svg>
                      <p className={`${c.muted} text-sm`}>No active spots logged</p>
                      <button className={`${c.btnPrimary} mt-3`} onClick={() => { reset(); setView("form"); }}>Log First Spot</button>
                    </div>
                  </div>
                ) : (
                  <div className="departure-board">
                    <div className="board-header">
                      <span className={`${c.inkDark} font-black uppercase tracking-tight text-xs`}>Active Spots</span>
                      <span className="ticker" style={{color:'#1a1a2e'}}>{activeSpots.length} active</span>
                    </div>
                    {activeSpots.map((spot) => {
                      const ct = formatCountdown(spot.parkedAt, spot.timerMins);
                      return (
                        <div key={spot._id} className="departure-row"
                          onClick={() => { setSelectedId(spot._id); setView("detail"); }}>
                          <span className={`stop-dot ${ct.expired ? "bg-[#e63946]" : "bg-[#2dc653]"}`} />
                          <div className="flex-1 min-w-0">
                            <div className={`${c.ink} font-bold text-sm truncate`}>{spot.location}</div>
                            {spot.notes && <div className={`${c.muted} text-xs truncate`}>{spot.notes}</div>}
                          </div>
                          <div className="flex flex-col items-end shrink-0 gap-0.5">
                            <span className={`${c.mono} font-black text-sm ${ct.expired ? c.redText : c.yellowText}`}>{ct.label}</span>
                            <span className="ticker">{formatAgo(spot.parkedAt)}</span>
                          </div>
                          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#9998aa" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                            <polyline points="9 18 15 12 9 6"/>
                          </svg>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>

{/* Archived */}
              {pastSpots.length > 0 && (
                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <span className="route-badge" style={{background:'#9998aa',color:'#1a1a2e',minWidth:24,height:24,fontSize:'0.6rem'}}>EX</span>
                    <span className={c.label}>Archived</span>
                  </div>
                  <div className="departure-board" style={{opacity:0.7}}>
                    {pastSpots.map((spot) => (
                      <div key={spot._id} className="departure-row"
                        onClick={() => { setSelectedId(spot._id); setView("detail"); }}>
                        <span className="stop-dot bg-[#9998aa]" />
                        <div className="flex-1 min-w-0">
                          <div className={`${c.ink} font-bold text-sm truncate`}>{spot.location}</div>
                        </div>
                        <span className="ticker">{formatAgo(spot.parkedAt)}</span>
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#9998aa" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <polyline points="9 18 15 12 9 6"/>
                        </svg>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

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