import React, { useState } from "react"; import { useFireproof } from "use-fireproof"; import { ImgGen } from "use-vibes"; import { useViewer } from "use-vibes"; import { useVibe } from "use-vibes"; import { callAI } from "use-vibes"; function AddForm({ database, can, me }) { const [title, setTitle] = useState(""); const [desc, setDesc] = useState(""); const [isLoading, setIsLoading] = useState(false); async function suggest() { setIsLoading(true); try { const res = JSON.parse( await callAI("Suggest one fun, specific wishlist milestone someone might want to celebrate one day (like 'Run a 5k' or 'Publish a zine'). Give a short title and one sentence description.", { schema: { properties: { title: { type: "string" }, description: { type: "string" } } }, }) ); setTitle(res.title || ""); setDesc(res.description || ""); } catch (e) { // ignore refusal } finally { setIsLoading(false); } } function handleSubmit(e) { e.preventDefault(); if (!title.trim()) return; database.put({ type: "wish", title: title.trim(), description: desc.trim(), authorHandle: me?.userHandle, achieved: false, createdAt: Date.now(), }); setTitle(""); setDesc(""); } const c = { input: "w-full border-[length:var(--border-width)] border-[var(--border)] rounded-[var(--radius)] px-3 py-2 bg-[var(--surface)] text-[var(--text-primary)] min-h-[44px]", btn: "bg-[var(--primary)] text-[var(--text-primary)] rounded-[var(--radius)] px-4 py-2 min-h-[44px] font-semibold", aiBtn: "bg-[var(--secondary)] text-[var(--text-primary)] rounded-[var(--radius)] px-3 py-2 text-sm min-h-[44px]", }; if (!can.create({ type: "wish", authorHandle: me?.userHandle }).ok && can.create({ type: "wish", authorHandle: me?.userHandle }).pending) { return

Checking...

; } const verdict = can.create({ type: "wish", authorHandle: me?.userHandle }); if (!verdict.ok) { return

; } return ( ); } function VictoryScreen({ item, database, c }) { return (

Latest win

{item.title}

{item.blurb || item.description}

{item.achievedBy &&

Achieved by {item.achievedBy}

}

); } function WishItem({ doc, database, can, me, isLatest }) { const [busy, setBusy] = useState(false); async function markAchieved() { if (busy) return; setBusy(true); const optimistic = { ...doc, achieved: true, achievedBy: me?.userHandle || "someone" }; database.put(optimistic); try { const res = JSON.parse( await callAI( `Write a short, warm, one-sentence celebratory blurb for someone who just achieved this personal milestone: "${doc.title}" (${doc.description || "no extra details"}). Keep it under 25 words.`, { schema: { properties: { blurb: { type: "string" } } } } ) ); database.put({ ...optimistic, blurb: res.blurb }); } catch (e) { database.put({ ...optimistic, blurb: "A milestone achieved is a celebration earned!" }); } finally { setBusy(false); } } const editVerdict = can.edit(doc); const c = { row: "flex items-start gap-3 p-3 border-[length:var(--border-width)] border-[var(--border)] rounded-[var(--radius)] bg-[var(--surface)]", mark: "size-[calc(var(--border-width)*4)] shrink-0 mt-1", btn: "bg-[var(--primary)] text-[var(--text-primary)] rounded-[var(--radius)] px-3 py-2 text-sm min-h-[44px]", }; if (doc.achieved && isLatest) return null; // shown in victory screen already return (

); } export default function App() { const { useLiveQuery, database } = useFireproof("wishlist"); const { can, ready, me } = useVibe("wishlist"); const { docs } = useLiveQuery("createdAt", { descending: true }); const achieved = docs.filter((d) => d.achieved); const pending = docs.filter((d) => !d.achieved); const latest = achieved[0]; const c = { bg: "bg-[var(--background)]", header: "bg-[var(--surface)] border-b-[length:var(--border-width)] border-[var(--border)]", card: "bg-[var(--surface)] border-[length:var(--border-width)] border-[var(--border)]", section: "max-w-md mx-auto w-full px-4", }; return (

{!ready ? (

Checking...

) : ( )}

{latest ? ( ) : (

Latest win

No wins yet — add your first milestone below, and mark one achieved to see it celebrated here.

)}

On the list

{docs.length === 0 ? (

Nothing here yet. Add a milestone above to get started.

) : (

))} {achieved.slice(1).map((doc) => ( ))}

)}

); }