Offline UX: network failures show quiet 'offline, n queued' not errors; auto-sync on connectivity regain + 45s heartbeat

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@expo/ui": "~57.0.9",
         "@react-native-async-storage/async-storage": "2.2.0",
+        "@react-native-community/netinfo": "12.0.1",
         "expo": "~57.0.11",
         "expo-constants": "~57.0.9",
         "expo-crypto": "~57.0.1",
@@ -28,6 +29,7 @@
         "react": "19.2.3",
         "react-dom": "19.2.3",
         "react-native": "0.86.2",
+        "react-native-draggable-flatlist": "^4.0.3",
         "react-native-gesture-handler": "~2.32.0",
         "react-native-reanimated": "4.5.1",
         "react-native-safe-area-context": "~5.7.0",
@@ -2193,6 +2195,16 @@
         "react-native": "^0.0.0-0 || >=0.65 <1.0"
       }
     },
+    "node_modules/@react-native-community/netinfo": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-12.0.1.tgz",
+      "integrity": "sha512-P/3caXIvfYSJG8AWJVefukg+ZGRPs+M4Lp3pNJtgcTYoJxCjWrKQGNnCkj/Cz//zWa/avGed0i/wzm0T8vV2IQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.59"
+      }
+    },
     "node_modules/@react-native-masked-view/masked-view": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@react-native-masked-view/masked-view/-/masked-view-0.3.2.tgz",
@@ -6444,6 +6456,20 @@
         }
       }
     },
+    "node_modules/react-native-draggable-flatlist": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-native-draggable-flatlist/-/react-native-draggable-flatlist-4.0.3.tgz",
+      "integrity": "sha512-2F4x5BFieWdGq9SetD2nSAR7s7oQCSgNllYgERRXXtNfSOuAGAVbDb/3H3lP0y5f7rEyNwabKorZAD/SyyNbDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/preset-typescript": "^7.17.12"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.64.0",
+        "react-native-gesture-handler": ">=2.0.0",
+        "react-native-reanimated": ">=2.8.0"
+      }
+    },
     "node_modules/react-native-drawer-layout": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-4.2.10.tgz",

app/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@expo/ui": "~57.0.9",
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/netinfo": "12.0.1",
     "expo": "~57.0.11",
     "expo-constants": "~57.0.9",
     "expo-crypto": "~57.0.1",
@@ -23,6 +24,7 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.86.2",
+    "react-native-draggable-flatlist": "^4.0.3",
     "react-native-gesture-handler": "~2.32.0",
     "react-native-reanimated": "4.5.1",
     "react-native-safe-area-context": "~5.7.0",

app/src/app/_layout.tsx

@@ -1,19 +1,32 @@
+import NetInfo from "@react-native-community/netinfo";
 import { Link, Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
 import { AppState } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { hydrate, sync } from "../lib/store";
+import { getState, hydrate, sync } from "../lib/store";
 import { C } from "../lib/theme";
 
 export default function RootLayout() {
   useEffect(() => {
     void hydrate();
     // Re-sync whenever the app returns to the foreground.
-    const sub = AppState.addEventListener("change", (s) => {
+    const appState = AppState.addEventListener("change", (s) => {
       if (s === "active") void sync();
     });
-    return () => sub.remove();
+    // Drain the queue the moment connectivity returns (wifi/cellular).
+    const net = NetInfo.addEventListener((s) => {
+      if (s.isConnected) void sync();
+    });
+    // Slow heartbeat as a belt-and-braces retry while changes are queued.
+    const heartbeat = setInterval(() => {
+      if (getState().pending > 0 || getState().offline) void sync();
+    }, 45_000);
+    return () => {
+      appState.remove();
+      net();
+      clearInterval(heartbeat);
+    };
   }, []);
 
   return (

app/src/app/add.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from "expo-router";
 import { useState } from "react";
 import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import DateField from "../components/DateField";
 import PriorityChips from "../components/PriorityChips";
 import { Chips, Field } from "../components/ui";
 import { haptic } from "../lib/haptics";
@@ -17,12 +18,6 @@ const BOXES: { key: TaskStatus; label: string }[] = [
 
 const ESTIMATES = [15, 30, 45, 60, 90, 120];
 
-function isoToday(offset = 0): string {
-  const d = new Date();
-  d.setDate(d.getDate() + offset);
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-}
-
 export default function AddTask() {
   const router = useRouter();
   const store = useStore();
@@ -69,28 +64,7 @@ export default function AddTask() {
         style={{ minHeight: 64, textAlignVertical: "top" }}
       />
       <PriorityChips value={priority} onChange={setPriority} />
-      <View style={{ marginBottom: 2 }}>
+      <DateField label="Due date" value={due || null} onChange={(v) => setDue(v ?? "")} />
-        <Text style={s.label}>Due date</Text>
-        <View style={s.rowWrap}>
-          {[
-            { label: "Today", v: isoToday() },
-            { label: "Tomorrow", v: isoToday(1) },
-            { label: "Next week", v: isoToday(7) },
-          ].map(({ label, v }) => (
-            <Pressable
-              key={label}
-              style={[s.chip, due === v && s.chipActive]}
-              onPress={() => {
-                haptic.select();
-                setDue(due === v ? "" : v);
-              }}
-            >
-              <Text style={[s.chipText, due === v && { color: C.text }]}>{label}</Text>
-            </Pressable>
-          ))}
-        </View>
-      </View>
-      <Field label="" value={due} onChangeText={setDue} placeholder="YYYY-MM-DD" autoCapitalize="none" />
       <View style={{ marginBottom: 14 }}>
         <Text style={s.label}>Estimated time</Text>
         <View style={s.rowWrap}>

app/src/app/index.tsx

@@ -38,6 +38,11 @@ export default function Home() {
             <Text style={s.overdue}>{overdue.length} overdue →</Text>
           </Pressable>
         )}
+        {store.offline && (
+          <Text style={s.offline}>
+            offline{store.pending > 0 ? ` — ${store.pending} change${store.pending === 1 ? "" : "s"} queued` : ""}
+          </Text>
+        )}
         {store.syncError && <Text style={s.error}>{store.syncError}</Text>}
       </View>
       <View style={s.menu}>
@@ -76,6 +81,7 @@ const s = StyleSheet.create({
   viewAll: { color: C.muted, fontSize: 14, padding: 16 },
   overdue: { color: C.danger, fontSize: 14, paddingHorizontal: 16, paddingBottom: 8 },
   error: { color: C.danger, paddingHorizontal: 16, paddingTop: 8 },
+  offline: { color: C.muted, fontSize: 13, paddingHorizontal: 16, paddingTop: 8 },
   menu: {
     flexDirection: "row",
     borderTopWidth: StyleSheet.hairlineWidth,

app/src/app/task/[id].tsx

@@ -1,6 +1,7 @@
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useState } from "react";
 import { ScrollView, Text } from "react-native";
+import DateField from "../../components/DateField";
 import PriorityChips from "../../components/PriorityChips";
 import { Button, Chips, Field } from "../../components/ui";
 import { activeProjects, trashTask, updateTask } from "../../lib/store";
@@ -76,20 +77,8 @@ export default function TaskDetail() {
           placeholder="Who or what?"
         />
       )}
-      <Field
+      <DateField label="Due date" value={draft.due_date} onChange={(v) => set({ due_date: v })} clearable />
-        label="Due date"
+      <DateField label="Defer until" value={draft.defer_date} onChange={(v) => set({ defer_date: v })} clearable />
-        value={draft.due_date ?? ""}
-        onChangeText={(v) => set({ due_date: v || null })}
-        placeholder="YYYY-MM-DD"
-        autoCapitalize="none"
-      />
-      <Field
-        label="Defer until"
-        value={draft.defer_date ?? ""}
-        onChangeText={(v) => set({ defer_date: v || null })}
-        placeholder="YYYY-MM-DD"
-        autoCapitalize="none"
-      />
       <Field
         label="Notes"
         value={draft.notes}

app/src/components/DateField.tsx

@@ -0,0 +1,228 @@
+// Interactive date field: quick chips (Today / Tomorrow / Next week) plus 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";
+import { C } from "../lib/theme";
+
+const DAY_MS = 86_400_000;
+const WEEKDAYS = ["M", "T", "W", "T", "F", "S", "S"];
+const MONTHS = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
+
+function iso(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+function fromIso(s: string): Date {
+  const [y, m, d] = s.split("-").map(Number);
+  return new Date(y, m - 1, d);
+}
+
+function pretty(s: string): string {
+  const d = fromIso(s);
+  const today = new Date();
+  const diff = Math.round((d.getTime() - new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime()) / DAY_MS);
+  if (diff === 0) return "Today";
+  if (diff === 1) return "Tomorrow";
+  if (diff === -1) return "Yesterday";
+  const wd = d.toLocaleDateString("en-AU", { weekday: "short" });
+  return `${wd} ${d.getDate()} ${MONTHS[d.getMonth()].slice(0, 3)}${d.getFullYear() !== today.getFullYear() ? ` ${d.getFullYear()}` : ""}`;
+}
+
+function Calendar({ value, onPick }: { value: string | null; onPick: (v: string) => void }) {
+  const initial = value ? fromIso(value) : new Date();
+  const [year, setYear] = useState(initial.getFullYear());
+  const [month, setMonth] = useState(initial.getMonth());
+  const todayIso = iso(new Date());
+
+  const weeks = useMemo(() => {
+    const first = new Date(year, month, 1);
+    const start = new Date(first);
+    start.setDate(1 - ((first.getDay() + 6) % 7)); // back to Monday
+    return Array.from({ length: 6 }, (_, w) =>
+      Array.from({ length: 7 }, (_, i) => {
+        const d = new Date(start);
+        d.setDate(start.getDate() + w * 7 + i);
+        return d;
+      }),
+    );
+  }, [year, month]);
+
+  const shift = (delta: number) => {
+    haptic.select();
+    const d = new Date(year, month + delta, 1);
+    setYear(d.getFullYear());
+    setMonth(d.getMonth());
+  };
+
+  return (
+    <View style={s.calendar}>
+      <View style={s.calHead}>
+        <Pressable onPress={() => shift(-1)} hitSlop={10} style={s.arrow}>
+          <Text style={s.arrowText}>‹</Text>
+        </Pressable>
+        <Text style={s.calTitle}>
+          {MONTHS[month]} {year}
+        </Text>
+        <Pressable onPress={() => shift(1)} hitSlop={10} style={s.arrow}>
+          <Text style={s.arrowText}>›</Text>
+        </Pressable>
+      </View>
+      <View style={s.week}>
+        {WEEKDAYS.map((w, i) => (
+          <Text key={i} style={s.weekday}>
+            {w}
+          </Text>
+        ))}
+      </View>
+      {weeks.map((week, wi) => (
+        <View key={wi} style={s.week}>
+          {week.map((d) => {
+            const dIso = iso(d);
+            const inMonth = d.getMonth() === month;
+            const selected = dIso === value;
+            const isToday = dIso === todayIso;
+            return (
+              <Pressable
+                key={dIso}
+                style={[s.day, selected && s.daySelected, !selected && isToday && s.dayToday]}
+                onPress={() => {
+                  haptic.select();
+                  onPick(dIso);
+                }}
+              >
+                <Text
+                  style={[
+                    s.dayText,
+                    !inMonth && { color: C.border },
+                    selected && { color: "#FFFFFF", fontWeight: "700" },
+                    !selected && isToday && { color: C.accent },
+                  ]}
+                >
+                  {d.getDate()}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export default function DateField({
+  label,
+  value,
+  onChange,
+  clearable,
+}: {
+  label: string;
+  value: string | null;
+  onChange: (v: string | null) => void;
+  clearable?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const today = new Date();
+  const quick = [
+    { label: "Today", v: iso(today) },
+    { label: "Tomorrow", v: iso(new Date(today.getTime() + DAY_MS)) },
+    { label: "Next week", v: iso(new Date(today.getTime() + 7 * DAY_MS)) },
+  ];
+
+  return (
+    <View style={{ marginBottom: 14 }}>
+      <View style={s.labelRow}>
+        <Text style={s.label}>{label}</Text>
+        {value != null && <Text style={s.chosen}>{pretty(value)}</Text>}
+      </View>
+      <View style={s.rowWrap}>
+        {quick.map((q) => (
+          <Pressable
+            key={q.label}
+            style={[s.chip, value === q.v && s.chipActive]}
+            onPress={() => {
+              haptic.select();
+              onChange(value === q.v && clearable ? null : q.v);
+            }}
+          >
+            <Text style={[s.chipText, value === q.v && { color: C.text }]}>{q.label}</Text>
+          </Pressable>
+        ))}
+        <Pressable
+          style={[s.chip, open && s.chipActive]}
+          onPress={() => {
+            haptic.select();
+            setOpen(!open);
+          }}
+        >
+          <Text style={[s.chipText, open && { color: C.text }]}>📆 Pick…</Text>
+        </Pressable>
+        {clearable && value != null && (
+          <Pressable
+            style={s.chip}
+            onPress={() => {
+              haptic.tap();
+              onChange(null);
+            }}
+          >
+            <Text style={s.chipText}>Clear</Text>
+          </Pressable>
+        )}
+      </View>
+      {open && (
+        <Calendar
+          value={value}
+          onPick={(v) => {
+            onChange(v);
+            setOpen(false);
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  labelRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 },
+  label: { color: C.muted, fontSize: 13, textTransform: "uppercase", letterSpacing: 0.5 },
+  chosen: { color: C.accent, fontSize: 14, fontWeight: "600" },
+  rowWrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  chip: {
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 20,
+    backgroundColor: C.surface,
+    borderWidth: 1,
+    borderColor: C.border,
+  },
+  chipActive: { backgroundColor: C.surface2, borderColor: C.accent },
+  chipText: { color: C.muted, fontSize: 14 },
+  calendar: {
+    marginTop: 10,
+    backgroundColor: C.surface,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: C.border,
+    padding: 10,
+  },
+  calHead: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 6 },
+  calTitle: { color: C.text, fontSize: 15, fontWeight: "600" },
+  arrow: { paddingHorizontal: 14, paddingVertical: 4 },
+  arrowText: { color: C.accent, fontSize: 22, fontWeight: "600" },
+  week: { flexDirection: "row" },
+  weekday: { flex: 1, textAlign: "center", color: C.muted, fontSize: 11, paddingVertical: 4 },
+  day: {
+    flex: 1,
+    aspectRatio: 1.15,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 999,
+    margin: 1,
+  },
+  daySelected: { backgroundColor: C.accent },
+  dayToday: { borderWidth: 1, borderColor: C.accent },
+  dayText: { color: C.text, fontSize: 14 },
+});

app/src/components/TaskListScreen.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
-import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
+import { RefreshControl, StyleSheet, Text, View } from "react-native";
-import { sync, tasksByStatus } from "../lib/store";
+import DraggableFlatList, { ScaleDecorator } from "react-native-draggable-flatlist";
+import { haptic } from "../lib/haptics";
+import { reorderTask, sync, tasksByStatus } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 import type { TaskStatus } from "../lib/types";
@@ -19,10 +21,24 @@ export default function TaskListScreen({
 
   return (
     <View style={s.screen}>
-      <FlatList
+      <DraggableFlatList
         data={tasks}
         keyExtractor={(t) => t.id}
-        renderItem={({ item }) => <TaskRow task={item} uncheckTo={status} />}
+        activationDistance={12}
+        onDragBegin={() => haptic.pickup()}
+        onDragEnd={({ data, from, to }) => {
+          if (from !== to) {
+            haptic.success();
+            reorderTask(data[to].id, status, to);
+          }
+        }}
+        renderItem={({ item, drag, isActive }) => (
+          <ScaleDecorator activeScale={1.03}>
+            <View style={isActive && s.activeRow}>
+              <TaskRow task={item} uncheckTo={status} onLongPress={drag} />
+            </View>
+          </ScaleDecorator>
+        )}
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -43,5 +59,6 @@ export default function TaskListScreen({
 
 const s = StyleSheet.create({
   screen: { flex: 1, backgroundColor: C.bg },
+  activeRow: { backgroundColor: C.surface2, borderRadius: 12 },
   empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
 });

app/src/components/TaskRow.tsx

@@ -11,11 +11,14 @@ export default function TaskRow({
   task,
   uncheckTo = "next",
   showStatus,
+  onLongPress,
 }: {
   task: Task;
   /** Status to revert to when un-checking a done task. */
   uncheckTo?: TaskStatus;
   showStatus?: boolean;
+  /** Drag handle for reorderable lists. */
+  onLongPress?: () => void;
 }) {
   const router = useRouter();
   const meta = [
@@ -37,7 +40,7 @@ export default function TaskRow({
 
   return (
     <Animated.View entering={FadeIn.duration(150)}>
-      <Pressable style={s.row} onPress={() => router.push(`/task/${task.id}`)}>
+      <Pressable style={s.row} onPress={() => router.push(`/task/${task.id}`)} onLongPress={onLongPress} delayLongPress={200}>
         <Pressable
           style={[s.checkbox, { borderColor: PRIORITY_COLOR[task.priority] }]}
           hitSlop={10}

app/src/lib/store.ts

@@ -18,6 +18,8 @@ export interface State {
   hydrated: boolean;
   syncing: boolean;
   pending: number;
+  /** True when the last sync failed for network reasons — expected offline. */
+  offline: boolean;
   syncError: string | null;
 }
 
@@ -34,6 +36,7 @@ let state: State = {
   hydrated: false,
   syncing: false,
   pending: 0,
+  offline: false,
   syncError: null,
 };
 let queue: Op[] = [];
@@ -114,7 +117,10 @@ export function createTask(data: Partial<Task> & { title: string }): Task {
     priority: data.priority ?? 4,
     estimate_min: data.estimate_min ?? null,
     completed_at: null,
-    sort_order: data.sort_order ?? 0,
+    // New tasks land at the top of their list.
+    sort_order:
+      data.sort_order ??
+      Math.min(0, ...state.tasks.filter((t) => t.status === (data.status ?? "next")).map((t) => t.sort_order)) - 1,
     created_at: now(),
     updated_at: now(),
   };
@@ -190,9 +196,13 @@ export async function sync() {
       setState({});
     }
     await pull();
-    setState({ syncError: null });
+    setState({ syncError: null, offline: false });
   } catch (e) {
-    setState({ syncError: e instanceof Error ? e.message : String(e) });
+    const msg = e instanceof Error ? e.message : String(e);
+    // fetch() network failures (airplane mode, no wifi, DNS) are the expected
+    // offline case, not an error — the queue simply waits for connectivity.
+    const isNetwork = e instanceof TypeError || /network request failed|unable to resolve|fetch failed|timeout/i.test(msg);
+    setState(isNetwork ? { offline: true, syncError: null } : { syncError: msg });
   } finally {
     syncRunning = false;
     setState({ syncing: false });
@@ -248,8 +258,27 @@ function byPriorityDue(a: Task, b: Task): number {
   );
 }
 
+// Manual arrangement wins: sort_order is the canonical list order (set by
+// drag-to-reorder); priority/due only break ties for rows that never moved.
+function byManualOrder(a: Task, b: Task): number {
+  return a.sort_order - b.sort_order || byPriorityDue(a, b);
+}
+
 export function tasksByStatus(s: State, status: Task["status"]): Task[] {
-  return s.tasks.filter((t) => t.status === status).sort(byPriorityDue);
+  return s.tasks.filter((t) => t.status === status).sort(byManualOrder);
+}
+
+/** Re-slot a task at `index` within its status list (fractional sort_order). */
+export function reorderTask(id: string, status: Task["status"], index: number) {
+  const list = tasksByStatus(getState(), status).filter((t) => t.id !== id);
+  const prev = list[index - 1]?.sort_order;
+  const next = list[index]?.sort_order;
+  const sort_order =
+    prev !== undefined && next !== undefined ? (prev + next) / 2
+    : prev !== undefined ? prev + 1
+    : next !== undefined ? next - 1
+    : 0;
+  updateTask(id, { sort_order });
 }
 
 /** Overdue + due-today + deferred-arriving-today, across all open lists. */

server/index.ts

@@ -31,9 +31,12 @@ function err(message: string, status: number) {
 const TASK_FIELDS = ["title", "notes", "status", "project_id", "context", "waiting_for", "due_date", "defer_date", "priority", "estimate_min", "sort_order"];
 const PROJECT_FIELDS = ["name", "status", "notes", "sort_order"];
 
+// Only these may be cleared to NULL; notes/title are NOT NULL and keep "".
+const NULLABLE = new Set(["project_id", "context", "waiting_for", "due_date", "defer_date", "estimate_min"]);
+
 function pick(body: Record<string, unknown>, fields: string[]) {
   const out: Record<string, unknown> = {};
-  for (const f of fields) if (f in body) out[f] = body[f] === "" ? null : body[f];
+  for (const f of fields) if (f in body) out[f] = body[f] === "" && NULLABLE.has(f) ? null : body[f];
   return out;
 }
 
@@ -166,6 +169,10 @@ Bun.serve({
   fetch: (req) =>
     handle(req).catch((e) => {
       console.error(e);
+      // Constraint violations are bad input, not server faults — 400 so
+      // offline clients drop the op instead of retrying it forever.
+      const errno = (e as { errno?: string }).errno ?? "";
+      if (errno.startsWith("23")) return err(`constraint violation: ${(e as Error).message}`, 400);
       return err("internal error", 500);
     }),
 });