import React, { useState } from "react"; import { useFireproof } from "use-fireproof"; import { useVibe, useViewer } from "use-vibes"; import { Badge, Button, Card, Dot, Empty, Eyebrow, Field, Heading, Input, Row, RowCard, Segmented, Spacer, Stack, Text } from "@vibes.diy/pouf"; import { Checkbox, Switch } from "@vibes.diy/pouf/interactive"; const PRIORITIES = [ { value: "low", label: "Low" }, { value: "medium", label: "Medium" }, { value: "high", label: "High" }, ]; const RANK = { high: 0, medium: 1, low: 2 }; const PTONE = { high: "down", medium: "warn", low: "idle" }; function today() { return new Date().toISOString().slice(0, 10); } function TaskForm({ initial, submitLabel, onSubmit, onCancel, lead }) { const [text, setText] = useState(initial.text); const [dueDate, setDueDate] = useState(initial.dueDate); const [priority, setPriority] = useState(initial.priority); function handle(e) { e.preventDefault(); if (!text.trim()) return; onSubmit({ text: text.trim(), dueDate, priority }); if (!onCancel) { setText(""); setDueDate(""); setPriority("medium"); } } return ( ); } function TaskRow({ task, database, can }) { const [editing, setEditing] = useState(false); const overdue = !task.done && task.dueDate && task.dueDate < today(); if (editing) { return ( setEditing(false)} onSubmit={(v) => { database.put({ ...task, ...v }); setEditing(false); }} /> ); } return ( database.put({ ...task, done: checked === true })} /> {task.priority} {task.done ? ( Done ) : overdue ? ( Overdue {task.dueDate} ) : ( {task.dueDate ? `Due ${task.dueDate}` : "No due date"} )} {can.edit(task).ok && ( )} {can.delete(task).ok && ( )} ); } export default function App() { const { database, useLiveQuery } = useFireproof("majorTasks"); const { me, can, ready } = useVibe("majorTasks"); const { viewer, isViewerPending, requestLogin } = useViewer(); const [showDone, setShowDone] = useState(true); const [adding, setAdding] = useState(false); const [renaming, setRenaming] = useState(false); const listId = me?.userHandle ? `default-${me.userHandle}` : "default-anon"; const { docs: tasks } = useLiveQuery("listId", { key: listId }); const { docs: lists } = useLiveQuery("type", { key: "list" }); const list = lists.find((l) => l._id === listId); const listName = list?.name || "Major Tasks"; const mine = tasks.filter((t) => t.type === "task"); const visible = mine .filter((t) => showDone || !t.done) .sort((a, b) => { if (!!a.done !== !!b.done) return a.done ? 1 : -1; const ad = a.dueDate || "9999-99-99"; const bd = b.dueDate || "9999-99-99"; if (ad !== bd) return ad < bd ? -1 : 1; return (RANK[a.priority] ?? 1) - (RANK[b.priority] ?? 1); }); async function ensureList() { if (!me?.userHandle || list) return; await database.put({ _id: listId, type: "list", name: "Major Tasks", creatorHandle: me.userHandle }); } async function addTask(v) { await ensureList(); await database.put({ type: "task", listId, ...v, done: false, authorHandle: me?.userHandle }); setAdding(false); } async function rename(name) { await ensureList(); const base = list || { _id: listId, type: "list", creatorHandle: me?.userHandle }; await database.put({ ...base, name: name || "Major Tasks" }); setRenaming(false); } const draft = { type: "task", listId, text: "x", authorHandle: me?.userHandle }; const canAdd = ready && can.create(draft).ok; const blank = { text: "", dueDate: "", priority: "medium" }; const c = { page: "min-h-screen bg-background text-foreground font-sans p-6", col: "max-w-xl mx-auto", }; return (

{!ready ? ( Checking your access… ) : !canAdd ? ( !isViewerPending && !viewer ? ( ) : ( Sign in to keep your own tasks. ) ) : mine.length === 0 ? ( First one Add your first task ) : adding ? ( setAdding(false)} lead /> ) : ( )}

Up next Tasks {visible.length === 0 ? ( mine.length === 0 ? null : ) : ( visible.map((t) => ) )}

); } function RenameForm({ initial, onSave, onCancel }) { const [name, setName] = useState(initial); return ( ); }