From 125fb7df35c58241baf4c5c721e3fdd56fad4fbd Mon Sep 17 00:00:00 2001 From: marcuspaico Date: Wed, 2 Sep 2026 18:07:00 +1000 Subject: [PATCH] =?UTF-8?q?feat(task):=20undo=20toast=20for=20completing?= =?UTF-8?q?=20=E2=80=94=20mis-taps=20are=20one=20tap=20to=20take=20back?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit completeTask returns an undo closure that restores status + sort slot and trashes the occurrence a repeat spawned. One global snackbar (5s, replace-on-new) mounted in the root layout; every checkbox and Clarify's save-as-done go through completeWithUndo. bun tests for the store. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01YE5FmDZmFnWxH6RXCZLcjj --- app/src/app/_layout.tsx | 2 + app/src/app/project/[id].tsx | 8 ++- app/src/app/review.tsx | 6 +-- app/src/app/task/[id].tsx | 10 +++- app/src/components/TaskRow.tsx | 30 ++++++++--- app/src/components/Toast.tsx | 98 ++++++++++++++++++++++++++++++++++ app/src/lib/store.test.ts | 63 ++++++++++++++++++++++ app/src/lib/store.ts | 28 ++++++++-- app/src/lib/undo.ts | 13 +++++ app/tsconfig.json | 3 ++ 10 files changed, 240 insertions(+), 21 deletions(-) create mode 100644 app/src/components/Toast.tsx create mode 100644 app/src/lib/store.test.ts create mode 100644 app/src/lib/undo.ts diff --git a/app/src/app/_layout.tsx b/app/src/app/_layout.tsx index 69d13dc..dda5c4a 100644 --- a/app/src/app/_layout.tsx +++ b/app/src/app/_layout.tsx @@ -6,6 +6,7 @@ import { AppState, Pressable } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import { getState, hydrate, subscribe, sync } from "../lib/store"; import Icon from "../components/Icon"; +import { ToastHost } from "../components/Toast"; import { C, space } from "../lib/theme"; import { refreshNextUpWidget } from "../widget/refresh"; @@ -74,6 +75,7 @@ export default function RootLayout() { + ); } diff --git a/app/src/app/project/[id].tsx b/app/src/app/project/[id].tsx index 8fb8377..2fa815a 100644 --- a/app/src/app/project/[id].tsx +++ b/app/src/app/project/[id].tsx @@ -4,7 +4,8 @@ import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from "react-na import Icon from "../../components/Icon"; import { Button, cardEdges, Chips, Empty, Separator } from "../../components/ui"; import { haptic } from "../../lib/haptics"; -import { createTask, dropProject, updateProject, updateTask } from "../../lib/store"; +import { createTask, dropProject, updateProject } from "../../lib/store"; +import { completeWithUndo } from "../../lib/undo"; import { C, radius, space, type } from "../../lib/theme"; import { useStore } from "../../lib/useStore"; import type { ProjectStatus } from "../../lib/types"; @@ -68,10 +69,7 @@ export default function ProjectDetail() { { - haptic.success(); - updateTask(item.id, { status: "done" }); - }} + onPress={() => completeWithUndo(item)} /> diff --git a/app/src/app/review.tsx b/app/src/app/review.tsx index e06e0a5..772f9be 100644 --- a/app/src/app/review.tsx +++ b/app/src/app/review.tsx @@ -10,6 +10,7 @@ import { haptic } from "../lib/haptics"; import { PRIORITY_COLOR } from "../lib/priority"; import { daysSince, markReviewed, useLastReview } from "../lib/review"; import { reviewBuckets, trashTask, updateTask } from "../lib/store"; +import { completeWithUndo } from "../lib/undo"; import { C, radius, space, type } from "../lib/theme"; import { useStore } from "../lib/useStore"; import type { Task } from "../lib/types"; @@ -34,10 +35,7 @@ function ReviewRow({ { - haptic.success(); - updateTask(task.id, { status: "done" }); - })} + onPress={() => completeWithUndo(task)} > diff --git a/app/src/app/task/[id].tsx b/app/src/app/task/[id].tsx index 66f672e..3172569 100644 --- a/app/src/app/task/[id].tsx +++ b/app/src/app/task/[id].tsx @@ -5,6 +5,7 @@ import TaskForm, { CAPTURE_BOXES, type TaskDraft } from "../../components/TaskFo import { Button, Empty } from "../../components/ui"; import { haptic } from "../../lib/haptics"; import { trashTask, updateTask } from "../../lib/store"; +import { completeWithUndo } from "../../lib/undo"; import { C, space, type } from "../../lib/theme"; import { useStore } from "../../lib/useStore"; import type { Task, TaskStatus } from "../../lib/types"; @@ -37,8 +38,13 @@ export default function TaskDetail() { if (!original || !draft) return Task not found.; const save = () => { - updateTask(original.id, { ...draft, priority: draft.priority ?? 3 }); - haptic.success(); + const { status, ...rest } = draft; + const completing = status === "done" && original.status !== "done"; + // Completing from Clarify gets the same Undo as a checkbox; the toast + // lives in the root layout so it outlives this modal. + updateTask(original.id, { ...rest, ...(completing ? {} : { status }), priority: draft.priority ?? 3 }); + if (completing) completeWithUndo(original, original.status); + else haptic.success(); router.back(); }; diff --git a/app/src/components/TaskRow.tsx b/app/src/components/TaskRow.tsx index 9b43dbb..d29c935 100644 --- a/app/src/components/TaskRow.tsx +++ b/app/src/components/TaskRow.tsx @@ -6,6 +6,7 @@ import { haptic } from "../lib/haptics"; import { formatEstimate, PRIORITY_COLOR } from "../lib/priority"; import { updateTask } from "../lib/store"; import { C, radius, space, type } from "../lib/theme"; +import { completeWithUndo } from "../lib/undo"; import type { Task, TaskStatus } from "../lib/types"; export default function TaskRow({ @@ -13,6 +14,7 @@ export default function TaskRow({ uncheckTo = "next", showStatus, onLongPress, + emphasized, }: { task: Task; /** Status to revert to when un-checking a done task. */ @@ -20,6 +22,8 @@ export default function TaskRow({ showStatus?: boolean; /** Drag handle for reorderable lists. */ onLongPress?: () => void; + /** The one thing to do now — bigger, tinted, labelled. */ + emphasized?: boolean; }) { const router = useRouter(); const done = task.status === "done"; @@ -41,16 +45,18 @@ export default function TaskRow({ const flag = PRIORITY_COLOR[task.priority]; const toggle = () => { - const next = task.status !== "done"; - if (next) haptic.success(); - else haptic.tap(); - updateTask(task.id, { status: next ? "done" : uncheckTo }); + if (!done) { + completeWithUndo(task); + return; + } + haptic.tap(); + updateTask(task.id, { status: uncheckTo }); }; return ( [s.row, pressed && s.rowPressed]} + style={({ pressed }) => [s.row, emphasized && s.rowEmphasized, pressed && s.rowPressed]} onPress={() => router.push(`/task/${task.id}`)} onLongPress={onLongPress} delayLongPress={200} @@ -59,14 +65,20 @@ export default function TaskRow({ The border carries the priority colour, so priority is legible at a glance without spending a whole column on a flag. */} {done && ✓} - + {emphasized && NOW} + {task.title} {!!meta && ( @@ -92,6 +104,10 @@ const s = StyleSheet.create({ backgroundColor: C.surface, }, rowPressed: { backgroundColor: C.surface2 }, + rowEmphasized: { backgroundColor: C.accentSoft, paddingVertical: space.lg + 2 }, + checkboxEmphasized: { width: 26, height: 26, borderRadius: 8 }, + nowLabel: { fontSize: 10, fontWeight: "700", letterSpacing: 1.2, color: C.accent, marginBottom: 2 }, + titleEmphasized: { fontSize: 19, fontWeight: "600", lineHeight: 24 }, checkbox: { width: 22, height: 22, diff --git a/app/src/components/Toast.tsx b/app/src/components/Toast.tsx new file mode 100644 index 0000000..b898b32 --- /dev/null +++ b/app/src/components/Toast.tsx @@ -0,0 +1,98 @@ +// One app-wide snackbar, mounted once in the root layout. `showToast` is a +// plain function so stores and rows can call it without a context hop. A new +// toast replaces the current one (last action wins) and the timer restarts. +import { useEffect, useState } from "react"; +import { Pressable, StyleSheet, Text } from "react-native"; +import Animated, { FadeInDown, FadeOutDown } from "react-native-reanimated"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { haptic } from "../lib/haptics"; +import { C, radius, shadow, space, type } from "../lib/theme"; + +export interface ToastSpec { + message: string; + action?: { label: string; onPress: () => void }; +} + +const DURATION_MS = 5000; +// Sits on the home FAB's baseline (index.tsx `fab.bottom`) — above the +// launcher bar, and the right padding leaves the FAB itself uncovered. +const FAB_BOTTOM = 104; +const FAB_CLEARANCE = space.xl + 56 + space.md; + +let setCurrent: ((t: ToastSpec | null) => void) | null = null; + +export function showToast(spec: ToastSpec) { + setCurrent?.(spec); +} + +export function ToastHost() { + const [toast, setToast] = useState(null); + const insets = useSafeAreaInsets(); + + useEffect(() => { + setCurrent = setToast; + return () => { + if (setCurrent === setToast) setCurrent = null; + }; + }, []); + + useEffect(() => { + if (!toast) return; + const timer = setTimeout(() => setToast(null), DURATION_MS); + return () => clearTimeout(timer); + }, [toast]); + + if (!toast) return null; + const { action } = toast; + return ( + + setToast(null)}> + + {toast.message} + + {action && ( + { + haptic.tap(); + setToast(null); + action.onPress(); + }} + style={({ pressed }) => [s.action, pressed && { opacity: 0.6 }]} + > + {action.label} + + )} + + + ); +} + +const s = StyleSheet.create({ + wrap: { + position: "absolute", + left: space.lg, + right: FAB_CLEARANCE, + alignItems: "flex-start", + }, + toast: { + flexDirection: "row", + alignItems: "center", + gap: space.lg, + maxWidth: 420, + paddingVertical: space.md, + paddingLeft: space.lg, + paddingRight: space.md, + borderRadius: radius.pill, + backgroundColor: C.text, + ...shadow.fab, + }, + message: { ...type.row, color: C.bg, flexShrink: 1 }, + action: { paddingVertical: space.xs, paddingHorizontal: space.sm }, + actionText: { ...type.row, color: C.accentSoft, fontWeight: "600" }, +}); diff --git a/app/src/lib/store.test.ts b/app/src/lib/store.test.ts new file mode 100644 index 0000000..f2cb301 --- /dev/null +++ b/app/src/lib/store.test.ts @@ -0,0 +1,63 @@ +// Store unit tests — run with `bun test src/lib`. Expo/native modules are +// mocked so the local-first mutations run in plain Bun. +import { beforeEach, describe, expect, mock, test } from "bun:test"; + +const storage = new Map(); +mock.module("@react-native-async-storage/async-storage", () => ({ + default: { + getItem: async (k: string) => storage.get(k) ?? null, + setItem: async (k: string, v: string) => void storage.set(k, v), + }, +})); +let seq = 0; +mock.module("expo-crypto", () => ({ + randomUUID: () => `00000000-0000-4000-8000-${String(++seq).padStart(12, "0")}`, +})); +mock.module("./api", () => ({ api: {} })); +mock.module("./config", () => ({ getConfig: async () => ({ token: "" }) })); + +const store = await import("./store"); + +beforeEach(async () => { + storage.clear(); + await store.hydrate(); +}); + +const find = (id: string) => store.getState().tasks.find((t) => t.id === id)!; + +describe("completeTask", () => { + test("marks done and undo restores the original status in place", () => { + const a = store.createTask({ title: "a", status: "waiting", sort_order: 5 }); + const undo = store.completeTask(a.id); + expect(find(a.id).status).toBe("done"); + expect(find(a.id).completed_at).not.toBeNull(); + undo!(); + expect(find(a.id).status).toBe("waiting"); + expect(find(a.id).completed_at).toBeNull(); + expect(find(a.id).sort_order).toBe(5); + }); + + test("revertTo overrides the status undo returns to", () => { + const a = store.createTask({ title: "a", status: "next" }); + store.completeTask(a.id, "someday")!(); + expect(find(a.id).status).toBe("someday"); + }); + + test("undo of a repeating task trashes the spawned occurrence", () => { + const a = store.createTask({ title: "rent", repeat: "monthly", due_date: "2026-09-01" }); + const known = new Set(store.getState().tasks.map((t) => t.id)); + const undo = store.completeTask(a.id)!; + const spawned = store.getState().tasks.filter((t) => !known.has(t.id)); + expect(spawned).toHaveLength(1); + expect(spawned[0].status).toBe("next"); + undo(); + expect(find(a.id).status).toBe("next"); + expect(find(spawned[0].id).status).toBe("trashed"); + }); + + test("returns null for an already-done or unknown task", () => { + const a = store.createTask({ title: "a", status: "done" }); + expect(store.completeTask(a.id)).toBeNull(); + expect(store.completeTask("nope")).toBeNull(); + }); +}); diff --git a/app/src/lib/store.ts b/app/src/lib/store.ts index dc66948..9d3ef00 100644 --- a/app/src/lib/store.ts +++ b/app/src/lib/store.ts @@ -136,6 +136,11 @@ export function createTask(data: Partial & { title: string }): Task { } export function updateTask(id: string, patch: Partial) { + applyTaskUpdate(id, patch); +} + +/** Applies a patch; returns the next occurrence if completing spawned one. */ +function applyTaskUpdate(id: string, patch: Partial): Task | null { const before = state.tasks.find((t) => t.id === id); setState({ tasks: state.tasks.map((t) => { @@ -152,11 +157,28 @@ export function updateTask(id: string, patch: Partial) { // done row later leaves the spawn in place — it's one tap to trash, versus // silently deleting a row the user may have edited. if (before && before.repeat && before.status !== "done" && patch.status === "done") { - spawnNextOccurrence(before); + return spawnNextOccurrence(before); } + return null; } -function spawnNextOccurrence(t: Task) { +/** + * Complete a task and hand back an undo. Undo puts the task back where it was + * (same status and sort slot) and trashes the occurrence a repeat spawned, so + * a mis-tap leaves no trace. Returns null when there's nothing to complete. + */ +export function completeTask(id: string, revertTo?: Task["status"]): (() => void) | null { + const before = state.tasks.find((t) => t.id === id); + if (!before || before.status === "done") return null; + const spawned = applyTaskUpdate(id, { status: "done" }); + const back = revertTo ?? before.status; + return () => { + updateTask(id, { status: back }); + if (spawned) trashTask(spawned.id); + }; +} + +function spawnNextOccurrence(t: Task): Task { const today = todayIso(); const due = t.due_date ? nextOccurrence(t.due_date, t.repeat!, today) : null; // Keep the same lead time between defer and due (e.g. "surfaces 3 days before"). @@ -168,7 +190,7 @@ function spawnNextOccurrence(t: Task) { : t.defer_date ? nextOccurrence(t.defer_date, t.repeat!, today) : null; - createTask({ + return createTask({ title: t.title, notes: t.notes, status: t.status, diff --git a/app/src/lib/undo.ts b/app/src/lib/undo.ts new file mode 100644 index 0000000..d812cd5 --- /dev/null +++ b/app/src/lib/undo.ts @@ -0,0 +1,13 @@ +// Complete + "Undo" toast, shared by every checkbox in the app so a mis-tap +// is one tap to take back wherever it happened. +import { showToast } from "../components/Toast"; +import { haptic } from "./haptics"; +import { completeTask } from "./store"; +import type { Task, TaskStatus } from "./types"; + +export function completeWithUndo(task: Pick, revertTo?: TaskStatus) { + const undo = completeTask(task.id, revertTo); + if (!undo) return; + haptic.success(); + showToast({ message: `Completed “${task.title}”`, action: { label: "Undo", onPress: undo } }); +} diff --git a/app/tsconfig.json b/app/tsconfig.json index 2e9a669..2345d97 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -16,5 +16,8 @@ "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts" + ], + "exclude": [ + "**/*.test.ts" ] }