import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useViewer, useVibe } from "use-vibes"; import { Badge, Button, Card, Empty, Eyebrow, Field, Grid, Heading, Row, RowCard, Skeleton, Spacer, Stack, Text, Textarea } from "@vibes.diy/pouf"; import { CATEGORIES, DEFAULT_TARGETS, allergenBadge, askPotluck, catLabel, readContribution, readContributions } from "./lib/potluck.js"; import ContributionSheet from "./components/ContributionSheet.jsx"; import TableCards, { AllergenPill } from "./components/TableCards.jsx"; import { AttendeeCard, GapsPanel, PlanSettings, UpdatesFeed } from "./components/PlanPanels.jsx"; import { Sheet } from "@vibes.diy/pouf/interactive"; const EXAMPLES = [ "I'll bring a big tray of veggie lasagna, feeds 12, contains milk and gluten", "Maya: 24 lemon bars, nut-free. Sam: two jugs of iced tea, 20 servings", ]; export default function App() { const { database, useLiveQuery, writeRejection, clearWriteRejection } = useFireproof("potluck"); const { me, can, ready } = useVibe("potluck"); const { ViewerTag, HandleInput, requestLogin, isViewerPending, viewer } = useViewer(); const { docs: potlucks } = useLiveQuery("type", { key: "potluck" }); const [pickedId, setPickedId] = useState(null); const ownId = me?.userHandle ? `default-${me.userHandle}` : undefined; const potluck = potlucks.find((p) => p._id === pickedId) ?? potlucks.find((p) => p._id === ownId) ?? potlucks[0]; const potluckId = potluck?._id ?? ""; const { docs: related } = useLiveQuery("potluckId", { key: potluckId }); const order = CATEGORIES.map((x) => x.value); const contribs = related.filter((d) => d.type === "contribution").sort((a, b) => order.indexOf(a.category) - order.indexOf(b.category)); const attendees = related.filter((d) => d.type === "attendee"); const members = related.filter((d) => d.type === "member"); const updates = related.filter((d) => d.type === "update").sort((a, b) => (b.at ?? 0) - (a.at ?? 0)); const [sentence, setSentence] = useState(""); const [current, setCurrent] = useState(undefined); const [selectedId, setSelectedId] = useState(null); const [showPlan, setShowPlan] = useState(false); const [showCards, setShowCards] = useState(false); const [answer, setAnswer] = useState(""); const [busy, setBusy] = useState(false); const [message, setMessage] = useState(""); const [lastWrite, setLastWrite] = useState(undefined); const selected = contribs.find((x) => x._id === selectedId); function declaredBy(item) { const has = item.allergens.length > 0 || item.freeOf.length > 0 || item.confirmsNone; return has ? item.bringer || (me?.userHandle ? `@${me.userHandle}` : "") : ""; } async function submitSentence(event) { event.preventDefault(); if (busy || !ready || !potluck || sentence.trim().length === 0) return; setBusy(true); setMessage(""); try { const target = current === undefined ? undefined : contribs.find((x) => x._id === current._id); if (current !== undefined && target === undefined) throw new Error("Choose a saved dish to correct."); const items = target === undefined ? await readContributions(sentence) : [await readContribution(sentence, target)]; const docs = items.map((item) => target === undefined ? { _id: `contribution:${crypto.randomUUID()}`, type: "contribution", potluckId, authorHandle: me?.userHandle, ...item, declaredBy: declaredBy(item), originalWords: sentence.trim() } : { ...target, ...item, declaredBy: declaredBy(item) } ); if (docs.some((d) => (target === undefined ? !can.create(d).ok : !can.edit(d).ok))) throw new Error("You can't change this potluck right now."); const created = []; for (const d of docs) { await database.put(d); if (target === undefined) created.push(d._id); } setLastWrite({ created, replaced: target }); setSentence(""); setCurrent(undefined); } catch (error) { setMessage(error.reason === "refusal" ? "Try describing the dish another way." : error.message); } finally { setBusy(false); } } async function askRecords() { if (busy || !ready || !potluck || sentence.trim().length === 0) return; setBusy(true); setMessage(""); try { setAnswer(await askPotluck(sentence, potluck, contribs, attendees)); setSentence(""); } catch (error) { setMessage(error.message); } finally { setBusy(false); } } async function undoLast() { if (busy || !lastWrite) return; setBusy(true); try { for (const id of lastWrite.created) await database.del(id); if (lastWrite.replaced) await database.put(lastWrite.replaced); setLastWrite(undefined); setCurrent(undefined); } catch (error) { setMessage(error.message); } finally { setBusy(false); } } async function createPotluck(id) { const doc = { _id: id, type: "potluck", creatorHandle: me?.userHandle, name: "Potluck Road", eventDate: "", location: "", headcount: 20, targets: DEFAULT_TARGETS }; if (!can.create(doc).ok) return; await database.put(doc); setPickedId(id); } const sharedWithMe = potlucks.filter((p) => p.creatorHandle !== me?.userHandle); const c = { page: "min-h-screen bg-background text-foreground font-sans p-6 mx-auto max-w-6xl", meta: "text-muted-foreground", stagger: "transition-all duration-200 ease-out starting:opacity-0 starting:translate-y-1 motion-reduce:transition-none", }; const delay = (i) => ["delay-0", "delay-75", "delay-150", "delay-200", "delay-300"][Math.min(i, 4)]; const draft = { type: "contribution", potluckId, authorHandle: me?.userHandle }; let body; if (!ready || isViewerPending) { body = ; } else if (!potluck) { body = ( {me?.userHandle ? ( ) : ( )} ); } else { const canAdd = can.create(draft).ok; body = (

Add What are you bringing? {canAdd ? (

{(id, describedBy) =>

}
                    </Field>
                    {current !== undefined && (
                      <Row gap={2} align="center" wrap>
                        <Text muted>Changing: {current.dish}</Text>
                        <Button type="button" size="sm" variant="quiet" tone="idle" onClick={() => { setCurrent(undefined); setSentence(""); }}>Add a new dish</Button>
                      </Row>
                    )}
                    <Row gap={2} wrap>
                      <Button type="submit" loading={busy} disabled={sentence.trim().length === 0}>{current === undefined ? "Add dishes" : "Apply correction"}</Button>
                      <Button type="button" variant="quiet" tone="info" disabled={busy || sentence.trim().length === 0} onClick={askRecords}>Ask about the potluck</Button>
                      {lastWrite && <Button type="button" variant="quiet" tone="idle" disabled={busy} onClick={undoLast}>Undo</Button>}
                    </Row>
                    <Row gap={2} wrap>
                      {EXAMPLES.map((ex) => (
                        <Button key={ex} type="button" size="sm" variant="quiet" tone="idle" onClick={() => setSentence(ex)}>{ex.slice(0, 34)}…</Button>
                      ))}
                    </Row>
                  </Stack>
                </form>
              ) : me?.userHandle ? (
                <Text muted>This potluck is for invited guests. Ask the host to add you.</Text>
              ) : (
                <Button type="button" onClick={requestLogin}>Sign in to add your dish</Button>
              )}
              <p role="status" className={c.meta}>{message}</p>
              {answer && <Card><Text>{answer}</Text></Card>}
              {writeRejection && (
                <Row gap={2} align="center" wrap>
                  <p role="status">{writeRejection.message}</p>
                  <Button type="button" size="sm" variant="quiet" tone="idle" onClick={clearWriteRejection}>Dismiss</Button>
                </Row>
              )}
            </Stack>
          </section>

<section id="dishes">
            <Stack gap={3}>
              <Eyebrow>On the table</Eyebrow>
              <Row gap={2} align="center" wrap>
                <Heading level={2}>Dishes</Heading>
                <Spacer />
                {contribs.length > 0 && <Button type="button" size="sm" variant="quiet" tone="info" onClick={() => setShowCards(true)}>Table cards</Button>}
              </Row>
              {contribs.length === 0 && <Empty icon="heart" title="Nothing here yet. Tell us what you'll bring." />}
              {contribs.map((d, i) => {
                const badge = allergenBadge(d);
                return (
                  <div key={d._id} className={`${c.stagger} ${delay(i)}`}>
                    <RowCard selected={d._id === selectedId} onClick={() => setSelectedId(d._id)}>
                      <Stack gap={2}>
                        <Row gap={2} align="center" wrap>
                          <Text>{d.dish}</Text>
                          <Badge tone="info">{catLabel(d.category)}</Badge>
                          <Spacer />
                          <Text num muted>{d.servings} servings</Text>
                        </Row>
                        {d.bringer && <Text size="sm" muted>Brought by {d.bringer}</Text>}
                        <AllergenPill badge={badge} />
                      </Stack>
                    </RowCard>
                  </div>
                );
              })}
            </Stack>
          </section>
        </Stack>

<Stack gap={5}>
          <section id="plan">
            <Stack gap={3}>
              <Eyebrow>The plan</Eyebrow>
              <Heading level={2}>Details</Heading>
              <Card>
                <Stack gap={2}>
                  <Text>{potluck.eventDate ? potluck.eventDate.replace("T", " at ") : "Date and time not set"}</Text>
                  <Text muted>{potluck.location || "Location not set"}</Text>
                  <Text muted>Expecting {potluck.headcount ?? 0} people</Text>
                  {can.edit(potluck).ok && <Row><Button type="button" size="sm" variant="quiet" tone="info" onClick={() => setShowPlan(true)}>Edit plan and invite</Button></Row>}
                </Stack>
              </Card>
            </Stack>
          </section>
          <GapsPanel potluck={potluck} contribs={contribs} attendees={attendees} />
          <AttendeeCard potluck={potluck} attendees={attendees} database={database} can={can} me={me} />
          <UpdatesFeed updates={updates} />
        </Stack>
      </Grid>
    );
  }

if (showCards && potluck) {
    return (
      <main className={c.page}>
        <TableCards dishes={contribs} onClose={() => setShowCards(false)} />
      </main>
    );
  }

return (
    <main className={c.page}>
      <Stack gap={5}>
        <Row gap={3} align="center" wrap>
          <Heading level={1}>Potluck Road</Heading>
          <Spacer />
          {me?.userHandle && potluck && ownId && !potlucks.some((p) => p._id === ownId) && (
            <Button type="button" variant="quiet" tone="info" onClick={() => createPotluck(ownId)}>Start my own potluck</Button>
          )}
          {me?.userHandle && potluck && (
            <Button type="button" variant="quiet" tone="info" onClick={() => createPotluck(`potluck-${crypto.randomUUID()}`)}>New potluck</Button>
          )}
        </Row>
        {potluck && potluck.name !== "Potluck Road" && <Text muted>{potluck.name}</Text>}
        {(potlucks.length > 1) && (
          <section id="potlucks">
            <Stack gap={2}>
              <Eyebrow>Your potlucks</Eyebrow>
              {potlucks.map((p) => (
                <RowCard key={p._id} selected={p._id === potluckId} onClick={() => setPickedId(p._id)}>
                  <Row gap={2} align="center" wrap>
                    <Text>{p.name}</Text>
                    {sharedWithMe.includes(p) && <ViewerTag userHandle={p.creatorHandle} />}
                  </Row>
                </RowCard>
              ))}
            </Stack>
          </section>
        )}
        {body}
      </Stack>
      {selected && (
        <ContributionSheet
          key={selected._id}
          contribution={selected}
          database={database}
          can={can}
          me={me}
          busy={busy}
          onClose={() => setSelectedId(null)}
          onCorrect={(d) => { setCurrent(d); setSentence(""); setSelectedId(null); }}
          onSaved={(previous) => setLastWrite({ created: [], replaced: previous })}
        />
      )}
      {showPlan && potluck && (
        <Sheet title="Plan and guests" open onOpenChange={(o) => !o && setShowPlan(false)} onClose={() => setShowPlan(false)}>
          <PlanSettings potluck={potluck} members={members} database={database} can={can} me={me} HandleInput={HandleInput} ViewerTag={ViewerTag} />
        </Sheet>
      )}
    </main>
  );
}</article></body></html>