chore: v1.18

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01THT7qz2Nt5ibWULZ4nvfTa

app/app.json

@@ -57,6 +57,12 @@
     "experiments": {
       "typedRoutes": true,
       "reactCompiler": true
+    },
+    "extra": {
+      "router": {},
+      "eas": {
+        "projectId": "7a0325dd-ba60-415e-b367-e414890bacb3"
+      }
     }
   }
 }

app/eas.json

@@ -0,0 +1,18 @@
+{
+  "cli": {
+    "version": ">= 20.0.0",
+    "appVersionSource": "local"
+  },
+  "build": {
+    "production": {
+      "android": {
+        "buildType": "apk"
+      },
+      "env": {
+        "VERSION_CODE": "18",
+        "VERSION_NAME": "1.18"
+      },
+      "node": "22.20.0"
+    }
+  }
+}

app/public/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "GTD",
+  "short_name": "GTD",
+  "description": "Capture, clarify, do.",
+  "start_url": "/today",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#F7F7F9",
+  "theme_color": "#F7F7F9",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

app/src/app/+html.tsx

@@ -0,0 +1,49 @@
+// The HTML shell for the web build.
+//
+// The web export is the iPhone story — there is no iOS binary, so Safari's "Add
+// to Home Screen" has to produce something that opens full-screen and looks
+// installed rather than a bookmark with a browser chrome on top. That takes the
+// manifest, the apple-* meta tags and a viewport that covers the notch; none of
+// them are reachable from app.json, so the shell is written out by hand.
+import { ScrollViewStyleReset } from "expo-router/html";
+import type { PropsWithChildren } from "react";
+
+// Match the app background on both schemes so the status bar and the rubber-band
+// overscroll never flash white against a dark list.
+const background = `
+:root { color-scheme: light dark; }
+body { background-color: #F7F7F9; overscroll-behavior-y: none; }
+@media (prefers-color-scheme: dark) { body { background-color: #0C0C0F; } }
+`;
+
+export default function Root({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        {/* viewport-fit=cover lets the layout run under the notch; disabling
+            user scaling stops iOS zooming in every time a title field focuses. */}
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+        />
+
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="application-name" content="GTD" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-title" content="GTD" />
+        {/* "default" keeps the iOS status bar legible over a light header. */}
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png" />
+        <meta name="theme-color" media="(prefers-color-scheme: light)" content="#F7F7F9" />
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0C0C0F" />
+
+        <ScrollViewStyleReset />
+        <style dangerouslySetInnerHTML={{ __html: background }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

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() {
         <Stack.Screen name="review" options={{ title: "Weekly review" }} />
         <Stack.Screen name="settings" options={{ title: "Settings", presentation: "modal" }} />
       </Stack>
+      <ToastHost />
     </GestureHandlerRootView>
   );
 }

app/src/app/index.tsx

@@ -1,12 +1,14 @@
 import { useFocusEffect, useRouter } from "expo-router";
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { NestableDraggableFlatList, NestableScrollContainer, ScaleDecorator } from "react-native-draggable-flatlist";
+import WebSortableList from "../components/WebSortableList";
 import Icon, { type IconName } from "../components/Icon";
 import TaskRow, { TaskSeparator } from "../components/TaskRow";
-import { Card, Empty, Screen, SectionHeader, Title } from "../components/ui";
+import { Card, cardEdges, Empty, Screen, SectionHeader, Title } from "../components/ui";
 import { haptic } from "../lib/haptics";
 import { daysSince, useLastReview } from "../lib/review";
-import { todayTasks, visibleTasksByStatus } from "../lib/store";
+import { reorderTask, todayTasks, visibleTasksByStatus } from "../lib/store";
-import { C, shadow, space, type } from "../lib/theme";
+import { C, radius, shadow, space, type } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 
 const MENU: { icon: IconName; label: string; href: string }[] = [
@@ -54,20 +56,49 @@ export default function Home() {
 
   return (
     <Screen>
-      <ScrollView contentContainerStyle={s.content} showsVerticalScrollIndicator={false}>
+      <NestableScrollContainer contentContainerStyle={s.content} showsVerticalScrollIndicator={false}>
         <Title count={next.length}>Next up</Title>
 
         {preview.length === 0 ? (
           <Empty>Nothing queued. Add the next thing on your mind.</Empty>
-        ) : (
+        ) : Platform.OS === "web" ? (
-          <Card>
+          <WebSortableList
-            {preview.map((t, i) => (
+            data={preview}
-              <View key={t.id}>
+            onReorder={(id, to) => reorderTask(id, "next", to)}
-                {i > 0 && <TaskSeparator />}
+            separator={<TaskSeparator />}
-                <TaskRow task={t} />
+            renderItem={(t, i) => (
+              <View style={cardEdges(i, preview.length)}>
+                <TaskRow task={t} emphasized={i === 0} />
               </View>
-            ))}
+            )}
-          </Card>
+          />
+        ) : (
+          // Draggable so the "do this now" slot is a hand-picked choice, not
+          // just whatever sorted first. Preview indices are next[0..N], so a
+          // drop reorders the real Next list.
+          <NestableDraggableFlatList
+            data={preview}
+            keyExtractor={(t) => t.id}
+            activationDistance={12}
+            onDragBegin={() => haptic.pickup()}
+            onDragEnd={({ data, from, to }) => {
+              if (from !== to) {
+                haptic.success();
+                reorderTask(data[to].id, "next", to);
+              }
+            }}
+            renderItem={({ item, drag, isActive, getIndex }) => {
+              const i = getIndex() ?? 0;
+              return (
+                <ScaleDecorator activeScale={1.02}>
+                  <View style={[...cardEdges(i, preview.length), isActive && s.lifted]}>
+                    <TaskRow task={item} emphasized={i === 0} onLongPress={drag} />
+                  </View>
+                </ScaleDecorator>
+              );
+            }}
+            ItemSeparatorComponent={TaskSeparator}
+          />
         )}
 
         {next.length > PREVIEW && (
@@ -116,7 +147,7 @@ export default function Home() {
             </Card>
           </>
         )}
-      </ScrollView>
+      </NestableScrollContainer>
 
       <View style={s.tabBar}>
         {MENU.map((m) => (
@@ -149,6 +180,7 @@ export default function Home() {
 
 const s = StyleSheet.create({
   content: { paddingHorizontal: space.lg, paddingBottom: 120 },
+  lifted: { borderRadius: radius.lg, ...shadow.fab },
 
   viewAll: {
     flexDirection: "row",

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() {
             <Pressable
               style={s.checkbox}
               hitSlop={10}
-              onPress={() => {
+              onPress={() => completeWithUndo(item)}
-                haptic.success();
-                updateTask(item.id, { status: "done" });
-              }}
             />
             <View style={{ flex: 1 }}>
               <Text style={s.title} numberOfLines={2}>

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({
       <Pressable
         style={s.check}
         hitSlop={8}
-        onPress={act(() => {
+        onPress={() => completeWithUndo(task)}
-          haptic.success();
-          updateTask(task.id, { status: "done" });
-        })}
       >
         <View style={[s.checkbox, { borderColor: PRIORITY_COLOR[task.priority] }]} />
       </Pressable>

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 <Empty>Task not found.</Empty>;
 
   const save = () => {
-    updateTask(original.id, { ...draft, priority: draft.priority ?? 3 });
+    const { status, ...rest } = draft;
-    haptic.success();
+    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();
   };
 

app/src/components/DateField.tsx

@@ -1,5 +1,6 @@
-// Interactive date field: quick chips (Today / Tomorrow / Next week) plus an
+// Interactive date field: quick chips (Today / Tomorrow / Next week, plus an
-// expandable month calendar. Pure RN views — identical on Android, iOS, web.
+// optional Someday) and an expandable month calendar. Pure RN views —
+// identical on Android, iOS, web.
 import { useMemo, useState } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import { haptic } from "../lib/haptics";
@@ -100,11 +101,14 @@ export default function DateField({
   value,
   onChange,
   clearable,
+  someday,
 }: {
   label?: string;
   value: string | null;
   onChange: (v: string | null) => void;
   clearable?: boolean;
+  /** Offers a dateless "Someday" chip — the pile, not a day on the calendar. */
+  someday?: { active: boolean; onPress: () => void };
 }) {
   const [open, setOpen] = useState(false);
   const today = new Date();
@@ -134,6 +138,16 @@ export default function DateField({
             }}
           />
         ))}
+        {someday && (
+          <OptionChip
+            label="Someday"
+            active={someday.active}
+            onPress={() => {
+              haptic.select();
+              someday.onPress();
+            }}
+          />
+        )}
         <OptionChip
           label={value && !quick.some((q) => q.v === value) ? friendlyDate(value) : "Pick a date…"}
           active={open}

app/src/components/TaskForm.tsx

@@ -81,7 +81,20 @@ export default function TaskForm({
       icon: "today",
       placeholder: "When",
       value: d.due_date ? friendlyDate(d.due_date) : null,
-      panel: <DateField value={d.due_date} onChange={(due_date) => onChange({ due_date })} clearable />,
+      panel: (
+        <DateField
+          value={d.due_date}
+          onChange={(due_date) => onChange({ due_date })}
+          clearable
+          someday={{
+            active: d.status === "someday",
+            onPress: () =>
+              d.status === "someday"
+                ? onChange({ status: "next" })
+                : onChange({ status: "someday", due_date: null }),
+          }}
+        />
+      ),
       onClear: () => onChange({ due_date: null }),
     },
     {

app/src/components/TaskListScreen.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Pressable, RefreshControl, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, RefreshControl, ScrollView, StyleSheet, Text, View } from "react-native";
 import DraggableFlatList, { ScaleDecorator } from "react-native-draggable-flatlist";
+import WebSortableList from "./WebSortableList";
 import { haptic } from "../lib/haptics";
 import { reorderTask, sync, tasksByStatus, visibleTasksByStatus } from "../lib/store";
 import { C, radius, shadow, space, type } from "../lib/theme";
@@ -38,6 +39,42 @@ export default function TaskListScreen({
   }
   const hiddenCount = all.length - tasks.length;
 
+  const deferredFooter =
+    hidesDeferred && (hiddenCount > 0 || showDeferred) ? (
+      <Pressable
+        onPress={() => setShowDeferred((v) => !v)}
+        style={({ pressed }) => [s.deferredBtn, pressed && { opacity: 0.6 }]}
+      >
+        <Text style={s.deferredText}>
+          {showDeferred ? "Hide deferred" : `${hiddenCount} deferred — show`}
+        </Text>
+      </Pressable>
+    ) : null;
+
+  // The native drag library's drop handling is dead on react-native-web, so
+  // the web build reorders through WebSortableList's grab handles instead.
+  if (Platform.OS === "web") {
+    return (
+      <View style={s.screen}>
+        <ScrollView contentContainerStyle={s.content} showsVerticalScrollIndicator={false}>
+          {tasks.length === 0 && <Text style={s.empty}>{emptyHint}</Text>}
+          <WebSortableList
+            data={tasks}
+            disabled={archive}
+            onReorder={(id, to) => reorderTask(id, status, to)}
+            separator={<TaskSeparator />}
+            renderItem={(item, i) => (
+              <View style={cardEdges(i, tasks.length)}>
+                <TaskRow task={item} uncheckTo={status === "done" ? "next" : status} />
+              </View>
+            )}
+          />
+          {deferredFooter}
+        </ScrollView>
+      </View>
+    );
+  }
+
   return (
     <View style={s.screen}>
       <DraggableFlatList
@@ -81,18 +118,7 @@ export default function TaskListScreen({
           />
         }
         ListEmptyComponent={<Text style={s.empty}>{emptyHint}</Text>}
-        ListFooterComponent={
+        ListFooterComponent={deferredFooter}
-          hidesDeferred && (hiddenCount > 0 || showDeferred) ? (
-            <Pressable
-              onPress={() => setShowDeferred((v) => !v)}
-              style={({ pressed }) => [s.deferredBtn, pressed && { opacity: 0.6 }]}
-            >
-              <Text style={s.deferredText}>
-                {showDeferred ? "Hide deferred" : `${hiddenCount} deferred — show`}
-              </Text>
-            </Pressable>
-          ) : null
-        }
         contentContainerStyle={s.content}
       />
     </View>

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 (!done) {
-    if (next) haptic.success();
+      completeWithUndo(task);
-    else haptic.tap();
+      return;
-    updateTask(task.id, { status: next ? "done" : uncheckTo });
+    }
+    haptic.tap();
+    updateTask(task.id, { status: uncheckTo });
   };
 
   return (
     <Animated.View entering={FadeIn.duration(150)}>
       <Pressable
-        style={({ pressed }) => [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. */}
         <Pressable
-          style={[s.checkbox, { borderColor: done ? C.done : flag }, done && s.checkboxDone]}
+          style={[
+            s.checkbox,
+            emphasized && s.checkboxEmphasized,
+            { borderColor: done ? C.done : flag },
+            done && s.checkboxDone,
+          ]}
           hitSlop={10}
           onPress={toggle}
         >
           {done && <Text style={s.check}>✓</Text>}
         </Pressable>
         <View style={{ flex: 1 }}>
-          <Text style={[s.title, done && s.titleDone]} numberOfLines={2}>
+          {emphasized && <Text style={s.nowLabel}>NOW</Text>}
+          <Text style={[s.title, emphasized && s.titleEmphasized, done && s.titleDone]} numberOfLines={2}>
             {task.title}
           </Text>
           {!!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,

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<ToastSpec | null>(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 (
+    <Animated.View
+      entering={FadeInDown.duration(180)}
+      exiting={FadeOutDown.duration(150)}
+      style={[s.wrap, { bottom: FAB_BOTTOM + insets.bottom }]}
+      pointerEvents="box-none"
+    >
+      <Pressable style={s.toast} onPress={() => setToast(null)}>
+        <Text style={s.message} numberOfLines={1}>
+          {toast.message}
+        </Text>
+        {action && (
+          <Pressable
+            hitSlop={12}
+            onPress={() => {
+              haptic.tap();
+              setToast(null);
+              action.onPress();
+            }}
+            style={({ pressed }) => [s.action, pressed && { opacity: 0.6 }]}
+          >
+            <Text style={s.actionText}>{action.label}</Text>
+          </Pressable>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+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" },
+});

app/src/components/WebSortableList.tsx

@@ -0,0 +1,115 @@
+// Web-only reorderable list. react-native-draggable-flatlist's drop handling
+// never completes on react-native-web (onDragEnd doesn't fire), and the
+// PanResponder path is unreliable there too — so each row gets a grab handle
+// driven by raw pointer events: pointerdown on the handle, window-level
+// move/up listeners, and on release the target slot is computed from measured
+// row heights and handed to onReorder (the same store mutation native uses).
+import { useState, type ReactNode } from "react";
+import { StyleSheet, Text, View, type GestureResponderEvent } from "react-native";
+import { C, space } from "../lib/theme";
+
+export default function WebSortableList<T extends { id: string }>({
+  data,
+  renderItem,
+  onReorder,
+  separator,
+  disabled,
+}: {
+  data: T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Called with the dragged row's id and the index it was dropped at. */
+  onReorder: (id: string, to: number) => void;
+  separator?: ReactNode;
+  disabled?: boolean;
+}) {
+  // Stable mutable array (not a ref: refs may not be read during render).
+  const [heights] = useState<number[]>([]);
+  const [drag, setDrag] = useState<{ index: number; dy: number } | null>(null);
+
+  const targetIndex = (from: number, dy: number) => {
+    let idx = from;
+    let acc = 0;
+    while (dy > 0 && idx < data.length - 1 && dy > acc + (heights[idx + 1] ?? 48) / 2) {
+      acc += heights[idx + 1] ?? 48;
+      idx++;
+    }
+    while (dy < 0 && idx > 0 && -dy > acc + (heights[idx - 1] ?? 48) / 2) {
+      acc += heights[idx - 1] ?? 48;
+      idx--;
+    }
+    return idx;
+  };
+
+  const startDrag = (i: number, e: GestureResponderEvent) => {
+    if (disabled) return;
+    // RNW delivers a real PointerEvent; keep it off the row's Pressable.
+    e.stopPropagation();
+    e.preventDefault();
+    const native = e.nativeEvent as unknown as { clientY?: number; pageY: number };
+    const startY = native.clientY ?? native.pageY;
+    setDrag({ index: i, dy: 0 });
+    let dy = 0;
+    const move = (ev: PointerEvent) => {
+      dy = ev.clientY - startY;
+      setDrag({ index: i, dy });
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      setDrag(null);
+      const to = targetIndex(i, dy);
+      if (to !== i) onReorder(data[i].id, to);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+
+  return (
+    <View>
+      {data.map((item, i) => {
+        const dragging = drag?.index === i;
+        return (
+          <View key={item.id}>
+            {i > 0 && separator}
+            <View
+              onLayout={(e) => (heights[i] = e.nativeEvent.layout.height)}
+              style={dragging && [s.dragging, { transform: [{ translateY: drag.dy }] }]}
+            >
+              {renderItem(item, i)}
+              {!disabled && (
+                <View onPointerDown={(e) => startDrag(i, e as unknown as GestureResponderEvent)} style={s.handle}>
+                  <Text style={s.handleGlyph}>⠿</Text>
+                </View>
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  dragging: {
+    zIndex: 10,
+    elevation: 10,
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+  },
+  handle: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    // @ts-expect-error web-only style
+    cursor: "grab",
+    touchAction: "none",
+    userSelect: "none",
+  },
+  handleGlyph: { color: C.muted, fontSize: 15, paddingHorizontal: space.sm },
+});

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<string, string>();
+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();
+  });
+});

app/src/lib/store.ts

@@ -136,6 +136,11 @@ export function createTask(data: Partial<Task> & { title: string }): Task {
 }
 
 export function updateTask(id: string, patch: Partial<Task>) {
+  applyTaskUpdate(id, patch);
+}
+
+/** Applies a patch; returns the next occurrence if completing spawned one. */
+function applyTaskUpdate(id: string, patch: Partial<Task>): 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<Task>) {
   // 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,

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<Task, "id" | "title">, revertTo?: TaskStatus) {
+  const undo = completeTask(task.id, revertTo);
+  if (!undo) return;
+  haptic.success();
+  showToast({ message: `Completed “${task.title}”`, action: { label: "Undo", onPress: undo } });
+}

app/tsconfig.json

@@ -16,5 +16,8 @@
     "**/*.tsx",
     ".expo/types/**/*.ts",
     "expo-env.d.ts"
+  ],
+  "exclude": [
+    "**/*.test.ts"
   ]
 }