import React from "react" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" export default function App() { const { viewer, can } = useViewer(); const { useDocument, useLiveQuery, database } = useFireproof("campfire-gathering"); const { doc: gathering, merge: mergeGathering, save: saveGathering } = useDocument({ _id: "active-gathering", spot: "", until: "", type: "gathering" }); const [editing, setEditing] = React.useState(false); const [suggesting, setSuggesting] = React.useState(false); const [nameInput, setNameInput] = React.useState(""); const [joining, setJoining] = React.useState(false); const { docs: attendees } = useLiveQuery("type", { key: "attendee", descending: true }); async function suggestSpot() { setSuggesting(true); try { const { callAI } = await import("call-ai"); const res = await callAI("Suggest one creative, evocative spot name for a road trip gathering (a pull-off, overlook, diner, etc). Just the name, nothing else.", { schema: { properties: { spot: { type: "string" } } } }); const parsed = JSON.parse(res); mergeGathering({ spot: parsed.spot }); } finally { setSuggesting(false); } } async function joinGathering(e) { e.preventDefault(); if (!nameInput.trim()) return; setJoining(true); try { await database.put({ type: "attendee", name: nameInput.trim(), joinedAt: Date.now(), userSlug: viewer?.userSlug || null, avatarUrl: viewer?.avatarUrl || null, }); setNameInput(""); } finally { setJoining(false); } } const c = { page: "min-h-screen bg-gradient-to-b from-[#2a1a3a] to-[#1a0f2a] text-white font-['Nunito',sans-serif]", header: "px-5 pt-8 pb-4 border-b border-white/10", title: "text-3xl font-bold font-['Fredoka',sans-serif] text-[#f4c95d]", tagline: "text-sm text-white/60 mt-1", main: "px-5 py-6 max-w-xl mx-auto space-y-6", section: "bg-[#4a3470]/40 border border-white/10 rounded-2xl p-5 shadow-lg", h2: "text-xl font-bold font-['Fredoka',sans-serif] text-[#f4c95d] mb-3", input: "w-full bg-[#1a0f2a]/60 border border-white/15 rounded-lg px-3 py-3 text-white placeholder-white/40 focus:outline-none focus:border-[#f4c95d] min-h-[44px]", btn: "w-full bg-[#6d4a9e] hover:bg-[#7d5aae] text-white font-semibold rounded-lg px-4 py-3 min-h-[44px] transition", btnAccent: "w-full bg-[#f4c95d] hover:bg-[#f5d177] text-[#2a1a3a] font-bold rounded-lg px-4 py-3 min-h-[44px] transition", btnSmall: "text-xs bg-white/10 hover:bg-white/20 px-2 py-1 rounded text-white/80", label: "block text-xs uppercase tracking-wider text-white/50 mb-1", detail: "text-2xl font-bold font-['Fredoka',sans-serif]", detailSub: "text-[#8fcfa3] mt-1", rosterRow: "flex items-center gap-3 py-2 border-b border-white/5 last:border-0", avatar: "w-10 h-10 rounded-full bg-[#6d4a9e] border-2 border-[#f4c95d]/40", rosterName: "font-semibold", empty: "text-white/40 text-sm italic py-3", }; return (

The Spot

{editing && can("write") ? (

Where mergeGathering({ spot: e.target.value })} placeholder="e.g. Riverside Pull-Off" />

Here until mergeGathering({ until: e.target.value })} />

) : ( <>

Where

{gathering.spot || No spot yet}

Here until

{gathering.until ? new Date(gathering.until).toLocaleString([], { weekday: "short", hour: "numeric", minute: "2-digit" }) : Not set}

{can("write") ? ( ) : (

Read-only — only the owner can edit.

)} )}

Around the Fire ({attendees.length})

No one's here yet. Be the first to tap in.
{a.avatarUrl ? ( ) : (
{a.name.charAt(0).toUpperCase()}
)}

{a.name}

joined {new Date(a.joinedAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}

{(can("write") || a.userSlug === viewer?.userSlug) && ( )}

) }

The Spot

Around the Fire (0)