react"; import { useFireproof } from "use-fireproof"; import { useVibe } from "use-vibes"; import { Button, Card, Dot, Empty, Field, Grid, Heading, Input, Row, RowCard, Spacer, Stack, Stat, Text } from "@vibes.diy/pouf"; const DAY = 86400000; function ymd(d) { const m = String(d.getMonth() + 1).padStart(2, "0"); const day = String(d.getDate()).padStart(2, "0"); return `${d.getFullYear()}-${m}-${day}`; } function addDays(d, n) { const x = new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); return x; } function calcStreaks(set) { const today = new Date(); let cur = 0; let cursor = set.has(ymd(today)) ? today : addDays(today, -1); while (set.has(ymd(cursor))) { cur++; cursor = addDays(cursor, -1); } const sorted = [...set].sort(); let best = 0, run = 0, prev = null; for (const s of sorted) { const [y, m, d] = s.split("-").map(Number); const dt = new Date(y, m - 1, d); run = prev && Math.round((dt - prev) / DAY) === 1 ? run + 1 : 1; if (run > best) best = run; prev = dt; } return { cur, best }; } function buildWeeks(count) { const today = new Date(); const start = addDays(today, -today.getDay() - (count - 1) * 7); const todayKey = ymd(today); const weeks = []; for (let w = 0; w < count; w++) { const col = []; for (let i = 0; i < 7; i++) { const key = ymd(addDays(start, w * 7 + i)); col.push({ key, future: key > todayKey }); } weeks.push(col); } return weeks; } const WEEKS = 26; const stagger = ["delay-0", "delay-75", "delay-150", "delay-200", "delay-300"]; const rise = "transition-all duration-200 ease-out starting:opacity-0 starting:translate-y-1 motion-reduce:transition-none"; function AddForm({ onAdd, disabled }) { const [name, setName] = useState(""); return ( ); } function Overview({ weeks, counts, total }) { return (

{weeks.map((col, wi) => (

{col.map((cell) => { const r = total ? (counts[cell.key] || 0) / total : 0; const shade = cell.future ? "bg-transparent" : r === 0 ? "bg-muted" : r < 0.5 ? "bg-primary/30" : r < 1 ? "bg-primary/60" : "bg-primary"; return

; })}

))}

); } function Detail({ habit, dates, weeks, onBack, onToggle, onRename, onDelete }) { const [name, setName] = useState(habit.name); const [asking, setAsking] = useState(false); const { cur, best } = calcStreaks(dates); return ( {habit.name} Last six months

{weeks.map((col, wi) => (

{col.map((cell) => (

))}

Tap a day to mark or unmark it. ); } export default function App() { const { database, useLiveQuery } = useFireproof("dailyChain"); const { can, ready } = useVibe("dailyChain"); const { docs: habits } = useLiveQuery("type", { key: "habit" }); const { docs: checkins } = useLiveQuery("type", { key: "checkin" }); const [selected, setSelected] = useState(null); const [adding, setAdding] = useState(false); const canWrite = ready && can.create({ type: "habit", name: "x" }).ok; const byHabit = {}; const counts = {}; for (const ck of checkins) { (byHabit[ck.habitId] ||= new Set()).add(ck.date); counts[ck.date] = (counts[ck.date] || 0) + 1; } const sorted = [...habits].sort((a, b) => (a.createdAt || 0) - (b.createdAt || 0)); const weeks = buildWeeks(WEEKS); const today = new Date(); const todayKey = ymd(today); const last7 = Array.from({ length: 7 }, (_, i) => ymd(addDays(today, i - 6))); function toggle(habitId, date) { const _id = `checkin:${habitId}:${date}`; if (byHabit[habitId]?.has(date)) return database.del(_id); return database.put({ _id, type: "checkin", habitId, date }); } async function addHabit(name) { await database.put({ type: "habit", name, createdAt: Date.now() }); setAdding(false); } function rename(habit, name) { return database.put({ ...habit, name }); } async function removeHabit(habit) { for (const ck of checkins.filter((x) => x.habitId === habit._id)) await database.del(ck._id); await database.del(habit._id); setSelected(null); } const c = { page: "min-h-screen bg-background text-foreground font-sans p-6 max-w-2xl mx-auto" }; const current = habits.find((h) => h._id === selected); if (current) { return (

setSelected(null)} onToggle={toggle} onRename={rename} onDelete={removeHabit} />

); } return (

{(sorted.length === 0 || adding) && (

{sorted.length === 0 ? "Start your first chain" : "New habit"} {adding && }

)} {sorted.length > 0 && ( <>

Today {sorted.map((h, i) => { const set = byHabit[h._id] || new Set(); const { cur, best } = calcStreaks(set); const done = set.has(todayKey); return (

setSelected(h._id)}> {h.name} 0 ? "up" : "idle"} /> {cur} day streak · best {best} e.stopPropagation()}>

{last7.map((k) => (

))}

); })}

All habits, six months Darker days mean more of your habits got done.

)} {sorted.length === 0 && !adding && ( )}

); }