import React, { useState, useEffect, useRef } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { ImgGen } from "use-vibes"; import { useViewer } from "use-vibes"; import { useVibe } from "use-vibes"; const GOAL = 500; export default function App() { const { useLiveQuery, database } = useFireproof("sliceTracker"); const { can, me, ready } = useVibe("sliceTracker"); const { ViewerTag, viewer, isViewerPending, requestLogin } = useViewer(); const { docs: slices } = useLiveQuery("type", { key: "slice", descending: true, limit: 500 }); const { docs: cheers } = useLiveQuery("type", { key: "cheer" }); const [wishlistItem, setWishlistItem] = useState(""); const [sliceName, setSliceName] = useState(""); const [isSuggesting, setIsSuggesting] = useState(false); const [isCheering, setIsCheering] = useState(false); const listRef = useRef(null); const total = slices.length; const pct = Math.min(100, Math.round((total / GOAL) * 100)); const hasCheer = cheers.some((c) => c.milestone === GOAL); useEffect(() => { if (total >= GOAL && !hasCheer && !isCheering && ready && can.create({ type: "cheer", milestone: GOAL }).ok) { setIsCheering(true); callAI( `A group just logged their 500th cake slice on a shared wishlist tracker called Slice Tracker. Write a short, joyful 1-2 sentence celebration message. Answer as an enthusiastic party host.`, { schema: { properties: { message: { type: "string" } } } } ) .then((res) => { const { message } = JSON.parse(res); database.put({ type: "cheer", milestone: GOAL, message, createdAt: Date.now() }); }) .catch((err) => { database.put({ type: "cheer", milestone: GOAL, message: err?.reason === "refusal" ? "500 slices! Time to celebrate!" : "500 slices! Amazing work, everyone!", createdAt: Date.now(), }); }) .finally(() => setIsCheering(false)); } }, [total, hasCheer, isCheering, ready, can, database]); function handleAddSlice(e) { e.preventDefault(); const item = wishlistItem.trim(); if (!item) return; const draft = { type: "slice", wishlistItem: item, name: sliceName.trim() || item, authorHandle: me?.userHandle, createdAt: Date.now(), }; if (!can.create(draft).ok) return; database.put(draft); setWishlistItem(""); setSliceName(""); } function handleSuggest() { if (!wishlistItem.trim()) return; setIsSuggesting(true); callAI( `Suggest a short, playful cake-slice name (3-6 words) inspired by this wishlist item: "${wishlistItem.trim()}". This is for a fun cake-themed wishlist tracker.`, { schema: { properties: { name: { type: "string" } } } } ) .then((res) => setSliceName(JSON.parse(res).name)) .catch(() => setSliceName(`The ${wishlistItem.trim()} Slice`)) .finally(() => setIsSuggesting(false)); } const settledSignedOut = !isViewerPending && !viewer; const hasSomethingToKeep = slices.some((s) => s.authorHandle === undefined); const createVerdict = ready ? can.create({ type: "slice", wishlistItem: "x", authorHandle: me?.userHandle }) : { pending: true }; const latestCheer = cheers.sort((a, b) => b.createdAt - a.createdAt)[0]; const c = { bg: "bg-[var(--background)]", surface: "bg-[var(--surface)]", overlay: "bg-[var(--surface-overlay)]", ink: "text-[var(--text-primary)]", sub: "text-[var(--text-secondary)]", border: "border-[var(--border)]", accent: "bg-[var(--primary)] text-[var(--text-primary)]", label: "uppercase tracking-[var(--letter-spacing-wide)] text-[var(--text-secondary)] text-xs", focus: "focus-visible:outline-none focus-visible:ring-[length:var(--border-width)] focus-visible:ring-[var(--primary)]", }; return (

Total slices logged

{total}

out of {GOAL} to reach the celebration

{pct}% to goal

{latestCheer && (

Milestone reached

{latestCheer.message}

)} {isCheering && (

Preparing the celebration…

)}

Add a slice

{createVerdict.pending || !ready ? (

Checking…

) : createVerdict.ok ? ( ) : (

)} {settledSignedOut && hasSomethingToKeep && (

Your slices are saved on this device.

)}

Recent slices

{slices.length === 0 ? (

No slices yet — add the first wishlist item above.

) : (

{s.name} {s.authorHandle ? : "anon"}

)}

); } function Spinner() { return ( ); }