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>
API: don't null-out empty notes/title (NOT NULL columns); constraint violations return 400 so offline clients drop bad ops
2026-08-07 23:50:34 -07:00 · 2026-08-07 23:40:31 -07:00 · 2026-08-07 20:47:28 -07:00 · 2026-08-07 20:45:15 -07:00 · 2026-08-07 20:27:36 -07:00 · 2026-08-07 19:46:11 -07:00
36 changed files with 1515 additions and 346 deletions
--- a/.gitea/workflows/release.yml
+++ b/.gitea/workflows/release.yml
@@ -28,14 +28,19 @@ jobs:
          node --version
      - name: Install Android SDK
        # $HOME/android-sdk is a persistent runner volume — skip when warm.
        run: |
-          mkdir -p "$HOME/android-sdk/cmdline-tools"
+          if [ ! -d "$HOME/android-sdk/platforms/android-36" ]; then
-          curl -sLo /tmp/ct.zip https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip
+            mkdir -p "$HOME/android-sdk/cmdline-tools"
-          unzip -q /tmp/ct.zip -d /tmp
+            curl -sLo /tmp/ct.zip https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip
-          mv /tmp/cmdline-tools "$HOME/android-sdk/cmdline-tools/latest"
+            unzip -q /tmp/ct.zip -d /tmp
-          yes | "$HOME/android-sdk/cmdline-tools/latest/bin/sdkmanager" --sdk_root="$HOME/android-sdk" --licenses >/dev/null 2>&1 || true
+            mv /tmp/cmdline-tools "$HOME/android-sdk/cmdline-tools/latest"
-          "$HOME/android-sdk/cmdline-tools/latest/bin/sdkmanager" --sdk_root="$HOME/android-sdk" \
+            yes | "$HOME/android-sdk/cmdline-tools/latest/bin/sdkmanager" --sdk_root="$HOME/android-sdk" --licenses >/dev/null 2>&1 || true
-            "platform-tools" "platforms;android-36" "build-tools;36.0.0" >/dev/null
+            "$HOME/android-sdk/cmdline-tools/latest/bin/sdkmanager" --sdk_root="$HOME/android-sdk" \
              "platform-tools" "platforms;android-36" "build-tools;36.0.0" >/dev/null
          else
            echo "SDK cache warm — skipping install"
          fi
      - name: Install app dependencies
        run: cd app && npm ci --no-audit --no-fund
--- a/app/android/app/src/main/res/drawable/ic_launcher_background.xml
+++ b/app/android/app/src/main/res/drawable/ic_launcher_background.xml
@@ -1,6 +1,18 @@
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+<?xml version="1.0" encoding="utf-8"?>
-  <item android:drawable="@color/splashscreen_background"/>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
-  <item>
+    xmlns:aapt="http://schemas.android.com/aapt"
-    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+    android:width="108dp"
-  </item>
+    android:height="108dp"
-</layer-list>
+    android:viewportWidth="108"
    android:viewportHeight="108">
    <path android:pathData="M0,0h108v108H0z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:type="linear"
                android:startX="54" android:startY="0"
                android:endX="54" android:endY="108"
                android:startColor="#1A1F2B"
                android:endColor="#0B0D12" />
        </aapt:attr>
    </path>
 </vector>
--- a/app/android/app/src/main/res/drawable/ic_launcher_foreground.xml
+++ b/app/android/app/src/main/res/drawable/ic_launcher_foreground.xml
@@ -0,0 +1,63 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- The four GTD quadrants (next/waiting/someday/projects) with a check in
     "next" — matches the app's home screen. Grid spans 32..76 to stay inside
     the adaptive-icon safe zone. -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
    <!-- top-left: next (green) -->
    <path android:pathData="M37,32 h11 a5,5 0 0 1 5,5 v11 a5,5 0 0 1 -5,5 h-11 a5,5 0 0 1 -5,-5 v-11 a5,5 0 0 1 5,-5 z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:type="linear"
                android:startX="34" android:startY="34"
                android:endX="53" android:endY="53"
                android:startColor="#4FD48C"
                android:endColor="#2E9E60" />
        </aapt:attr>
    </path>
    <!-- top-right: waiting (amber) -->
    <path android:pathData="M60,32 h11 a5,5 0 0 1 5,5 v11 a5,5 0 0 1 -5,5 h-11 a5,5 0 0 1 -5,-5 v-11 a5,5 0 0 1 5,-5 z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:type="linear"
                android:startX="57" android:startY="34"
                android:endX="76" android:endY="53"
                android:startColor="#EDBB55"
                android:endColor="#C8912B" />
        </aapt:attr>
    </path>
    <!-- bottom-left: someday (violet) -->
    <path android:pathData="M37,55 h11 a5,5 0 0 1 5,5 v11 a5,5 0 0 1 -5,5 h-11 a5,5 0 0 1 -5,-5 v-11 a5,5 0 0 1 5,-5 z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:type="linear"
                android:startX="34" android:startY="57"
                android:endX="53" android:endY="76"
                android:startColor="#AC9FF0"
                android:endColor="#7E6DD6" />
        </aapt:attr>
    </path>
    <!-- bottom-right: projects (blue) -->
    <path android:pathData="M60,55 h11 a5,5 0 0 1 5,5 v11 a5,5 0 0 1 -5,5 h-11 a5,5 0 0 1 -5,-5 v-11 a5,5 0 0 1 5,-5 z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:type="linear"
                android:startX="57" android:startY="57"
                android:endX="76" android:endY="76"
                android:startColor="#6FAAEE"
                android:endColor="#3F7DC4" />
        </aapt:attr>
    </path>
    <!-- checkmark in the green quadrant -->
    <path
        android:pathData="M38,42.8 L42,46.8 L48.5,38.8"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="3"
        android:strokeLineCap="round"
        android:strokeLineJoin="round"
        android:fillColor="#00000000" />
 </vector>
--- a/app/android/app/src/main/res/drawable/ic_launcher_monochrome.xml
+++ b/app/android/app/src/main/res/drawable/ic_launcher_monochrome.xml
@@ -0,0 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
    <path
        android:pathData="M37,33.5 h11 a3.5,3.5 0 0 1 3.5,3.5 v11 a3.5,3.5 0 0 1 -3.5,3.5 h-11 a3.5,3.5 0 0 1 -3.5,-3.5 v-11 a3.5,3.5 0 0 1 3.5,-3.5 z"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="3"
        android:fillColor="#00000000" />
    <path
        android:pathData="M60,33.5 h11 a3.5,3.5 0 0 1 3.5,3.5 v11 a3.5,3.5 0 0 1 -3.5,3.5 h-11 a3.5,3.5 0 0 1 -3.5,-3.5 v-11 a3.5,3.5 0 0 1 3.5,-3.5 z"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="3"
        android:fillColor="#00000000" />
    <path
        android:pathData="M37,56.5 h11 a3.5,3.5 0 0 1 3.5,3.5 v11 a3.5,3.5 0 0 1 -3.5,3.5 h-11 a3.5,3.5 0 0 1 -3.5,-3.5 v-11 a3.5,3.5 0 0 1 3.5,-3.5 z"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="3"
        android:fillColor="#00000000" />
    <path
        android:pathData="M60,56.5 h11 a3.5,3.5 0 0 1 3.5,3.5 v11 a3.5,3.5 0 0 1 -3.5,3.5 h-11 a3.5,3.5 0 0 1 -3.5,-3.5 v-11 a3.5,3.5 0 0 1 3.5,-3.5 z"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="3"
        android:fillColor="#FFFFFF" />
 </vector>
--- a/app/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/app/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <background android:drawable="@drawable/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
-    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
-</adaptive-icon>
+</adaptive-icon>
--- a/app/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ b/app/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <background android:drawable="@drawable/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
-    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
-</adaptive-icon>
+</adaptive-icon>
--- a/app/android/gradle.properties
+++ b/app/android/gradle.properties
@@ -10,7 +10,7 @@
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+org.gradle.jvmargs=-Xmx8192m -XX:MaxMetaspaceSize=1024m
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
@@ -28,7 +28,9 @@ android.enablePngCrunchInReleaseBuilds=true
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
 # ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+# arm64 only: Pixel is arm64-v8a; x86/v7a builds are wasted time + APK bloat.
 # Add back x86_64 temporarily if an emulator build is ever needed.
 reactNativeArchitectures=arm64-v8a
 # Use this property to enable support to the new architecture.
 # This will allow you to use TurboModules and the Fabric render in
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -10,11 +10,14 @@
      "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",
        "expo-device": "~57.0.1",
        "expo-font": "~57.0.1",
        "expo-glass-effect": "~57.0.1",
        "expo-haptics": "~57.0.1",
        "expo-image": "~57.0.2",
        "expo-linking": "~57.0.5",
        "expo-router": "~57.0.11",
@@ -26,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",
@@ -2191,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",
@@ -3713,6 +3727,15 @@
        "react-native": "*"
      }
    },
    "node_modules/expo-crypto": {
      "version": "57.0.1",
      "resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-57.0.1.tgz",
      "integrity": "sha512-xwegXQw3ATgeL1ZuqbSNrGzOeG+zNeh6Z6DSJk825Qpa3TEQQ1kG3ioE1p3g/SNF373BAVz2iBKUTSytlIbBRA==",
      "license": "MIT",
      "peerDependencies": {
        "expo": "*"
      }
    },
    "node_modules/expo-device": {
      "version": "57.0.1",
      "resolved": "https://registry.npmjs.org/expo-device/-/expo-device-57.0.1.tgz",
@@ -3761,6 +3784,15 @@
        "react-native": "*"
      }
    },
    "node_modules/expo-haptics": {
      "version": "57.0.1",
      "resolved": "https://registry.npmjs.org/expo-haptics/-/expo-haptics-57.0.1.tgz",
      "integrity": "sha512-8VhbnxlIrfXjP0syZr1JT197nafYicQu9119adOJnX62osU9Cw+PdDnAx/6LxuKJRzQdwxOMq7b7eWjhNL5zAQ==",
      "license": "MIT",
      "peerDependencies": {
        "expo": "*"
      }
    },
    "node_modules/expo-image": {
      "version": "57.0.2",
      "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-57.0.2.tgz",
@@ -6424,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",
--- a/app/package.json
+++ b/app/package.json
@@ -5,11 +5,14 @@
  "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",
    "expo-device": "~57.0.1",
    "expo-font": "~57.0.1",
    "expo-glass-effect": "~57.0.1",
    "expo-haptics": "~57.0.1",
    "expo-image": "~57.0.2",
    "expo-linking": "~57.0.5",
    "expo-router": "~57.0.11",
@@ -21,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",
--- a/app/src/app/(tabs)/_layout.tsx
+++ b/app/src/app/(tabs)/_layout.tsx
@@ -1,36 +0,0 @@
 import { Link, Tabs } from "expo-router";
 import { Text } from "react-native";
 import { C } from "../../lib/theme";
 function icon(glyph: string) {
  return ({ focused }: { focused: boolean }) => (
    <Text style={{ fontSize: 20, opacity: focused ? 1 : 0.45 }}>{glyph}</Text>
  );
 }
 export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        headerStyle: { backgroundColor: C.bg },
        headerTintColor: C.text,
        headerShadowVisible: false,
        sceneStyle: { backgroundColor: C.bg },
        tabBarStyle: { backgroundColor: C.bg, borderTopColor: C.border },
        tabBarActiveTintColor: C.text,
        tabBarInactiveTintColor: C.muted,
        headerRight: () => (
          <Link href="/settings" style={{ paddingHorizontal: 16, fontSize: 18 }}>
            ⚙️
          </Link>
        ),
      }}
    >
      <Tabs.Screen name="index" options={{ title: "Inbox", tabBarIcon: icon("📥") }} />
      <Tabs.Screen name="next" options={{ title: "Next", tabBarIcon: icon("▶️") }} />
      <Tabs.Screen name="waiting" options={{ title: "Waiting", tabBarIcon: icon("⏳") }} />
      <Tabs.Screen name="someday" options={{ title: "Someday", tabBarIcon: icon("💭") }} />
      <Tabs.Screen name="projects" options={{ title: "Projects", tabBarIcon: icon("📁") }} />
    </Tabs>
  );
 }
--- a/app/src/app/(tabs)/index.tsx
+++ b/app/src/app/(tabs)/index.tsx
@@ -1,5 +0,0 @@
 import TaskListScreen from "../../components/TaskListScreen";
 export default function Inbox() {
  return <TaskListScreen status="inbox" capture emptyHint="Inbox zero. Capture anything above." />;
 }
--- a/app/src/app/(tabs)/next.tsx
+++ b/app/src/app/(tabs)/next.tsx
@@ -1,5 +0,0 @@
 import TaskListScreen from "../../components/TaskListScreen";
 export default function Next() {
  return <TaskListScreen status="next" capture emptyHint="No next actions. Clarify your inbox." />;
 }
--- a/app/src/app/(tabs)/someday.tsx
+++ b/app/src/app/(tabs)/someday.tsx
@@ -1,5 +0,0 @@
 import TaskListScreen from "../../components/TaskListScreen";
 export default function Someday() {
  return <TaskListScreen status="someday" emptyHint="No someday/maybe items." />;
 }
--- a/app/src/app/(tabs)/waiting.tsx
+++ b/app/src/app/(tabs)/waiting.tsx
@@ -1,5 +0,0 @@
 import TaskListScreen from "../../components/TaskListScreen";
 export default function Waiting() {
  return <TaskListScreen status="waiting" emptyHint="Not waiting on anyone." />;
 }
--- a/app/src/app/_layout.tsx
+++ b/app/src/app/_layout.tsx
@@ -1,10 +1,36 @@
-import { Stack } from "expo-router";
+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 { 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 appState = AppState.addEventListener("change", (s) => {
      if (s === "active") void sync();
    });
    // 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 (
-    <>
+    <GestureHandlerRootView style={{ flex: 1 }}>
      <StatusBar style="light" />
      <Stack
        screenOptions={{
@@ -14,11 +40,25 @@ export default function RootLayout() {
          contentStyle: { backgroundColor: C.bg },
        }}
      >
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen
          name="index"
          options={{
            title: "GTD",
            headerRight: () => (
              <Link href="/settings" style={{ paddingHorizontal: 8, fontSize: 18 }}>
                ⚙️
              </Link>
            ),
          }}
        />
        <Stack.Screen name="list/[status]" />
        <Stack.Screen name="today" options={{ title: "Today" }} />
        <Stack.Screen name="add" options={{ title: "New task", presentation: "modal" }} />
        <Stack.Screen name="projects" options={{ title: "Projects" }} />
        <Stack.Screen name="task/[id]" options={{ title: "Clarify", presentation: "modal" }} />
        <Stack.Screen name="project/[id]" options={{ title: "Project" }} />
        <Stack.Screen name="settings" options={{ title: "Settings", presentation: "modal" }} />
      </Stack>
-    </>
+    </GestureHandlerRootView>
  );
 }
--- a/app/src/app/add.tsx
+++ b/app/src/app/add.tsx
@@ -0,0 +1,139 @@
 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";
 import { activeProjects, createTask } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 import type { Task, TaskStatus } from "../lib/types";
 const BOXES: { key: TaskStatus; label: string }[] = [
  { key: "next", label: "Next up" },
  { key: "waiting", label: "Waiting" },
  { key: "someday", label: "Someday" },
 ];
 const ESTIMATES = [15, 30, 45, 60, 90, 120];
 export default function AddTask() {
  const router = useRouter();
  const store = useStore();
  const [title, setTitle] = useState("");
  const [notes, setNotes] = useState("");
  const [priority, setPriority] = useState<Task["priority"] | null>(null);
  const [estimate, setEstimate] = useState<number | null>(null);
  const [due, setDue] = useState("");
  const [box, setBox] = useState<TaskStatus>("next");
  const [projectId, setProjectId] = useState<string | null>(null);
  const projects = activeProjects(store).filter((p) => p.status === "active");
  const projectOptions = ["none", ...projects.map((p) => p.id)];
  const projectLabels = Object.fromEntries([["none", "None"], ...projects.map((p) => [p.id, p.name])]);
  // Every task must be born fully scoped: title + priority + due date.
  const dueValid = /^\d{4}-\d{2}-\d{2}$/.test(due.trim());
  const ready = title.trim().length > 0 && priority !== null && dueValid;
  const save = () => {
    if (!ready || priority === null) return;
    createTask({
      title: title.trim(),
      notes,
      status: box,
      priority,
      estimate_min: estimate,
      due_date: due.trim(),
      project_id: projectId,
    });
    haptic.success();
    router.back();
  };
  return (
    <ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={{ padding: 16 }}>
      <Field label="Task" value={title} onChangeText={setTitle} placeholder="What needs doing?" autoFocus />
      <Field
        label="Description"
        value={notes}
        onChangeText={setNotes}
        placeholder="Details, links, notes…"
        multiline
        style={{ minHeight: 64, textAlignVertical: "top" }}
      />
      <PriorityChips value={priority} onChange={setPriority} />
      <DateField label="Due date" value={due || null} onChange={(v) => setDue(v ?? "")} />
      <View style={{ marginBottom: 14 }}>
        <Text style={s.label}>Estimated time</Text>
        <View style={s.rowWrap}>
          {ESTIMATES.map((m) => {
            const active = estimate === m;
            return (
              <Pressable
                key={m}
                style={[s.chip, active && s.chipActive]}
                onPress={() => {
                  haptic.select();
                  setEstimate(active ? null : m);
                }}
              >
                <Text style={[s.chipText, active && { color: C.text }]}>
                  {m < 60 ? `${m}m` : m % 60 ? `${Math.floor(m / 60)}h${m % 60}` : `${m / 60}h`}
                </Text>
              </Pressable>
            );
          })}
        </View>
      </View>
      <Chips
        label="Box"
        options={BOXES.map((b) => b.key)}
        labels={Object.fromEntries(BOXES.map((b) => [b.key, b.label]))}
        value={box}
        onChange={(b) => {
          haptic.select();
          setBox(b);
        }}
      />
      <Chips
        label="Project"
        options={projectOptions}
        labels={projectLabels}
        value={projectId ?? "none"}
        onChange={(v) => setProjectId(v === "none" ? null : v)}
      />
      <Pressable style={[s.save, !ready && s.saveDisabled]} onPress={save} disabled={!ready}>
        <Text style={[s.saveText, !ready && { color: C.muted }]}>
          {ready ? "Add task" : "Needs a title, priority & due date"}
        </Text>
      </Pressable>
    </ScrollView>
  );
 }
 const s = StyleSheet.create({
  label: { color: C.muted, fontSize: 13, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 },
  rowWrap: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginBottom: 12 },
  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 },
  save: {
    backgroundColor: C.accent,
    borderRadius: 10,
    padding: 14,
    alignItems: "center",
    marginTop: 8,
    marginBottom: 24,
  },
  saveDisabled: { backgroundColor: C.surface },
  saveText: { color: C.text, fontSize: 16, fontWeight: "600" },
 });
--- a/app/src/app/index.tsx
+++ b/app/src/app/index.tsx
@@ -0,0 +1,113 @@
 import { useRouter } from "expo-router";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import TaskRow from "../components/TaskRow";
 import { haptic } from "../lib/haptics";
 import { tasksByStatus, todayTasks } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 const MENU = [
  { icon: "📅", label: "Today", href: "/today" },
  { icon: "▶️", label: "Next", href: "/list/next" },
  { icon: "⏳", label: "Waiting", href: "/list/waiting" },
  { icon: "💭", label: "Someday", href: "/list/someday" },
  { icon: "📁", label: "Projects", href: "/projects" },
 ] as const;
 export default function Home() {
  const router = useRouter();
  const store = useStore();
  const next = tasksByStatus(store, "next");
  const { overdue } = todayTasks(store);
  return (
    <View style={s.screen}>
      <View style={{ flex: 1 }}>
        <Text style={s.sectionTitle}>Next up</Text>
        {next.slice(0, 3).map((t) => (
          <TaskRow key={t.id} task={t} />
        ))}
        {next.length === 0 && <Text style={s.empty}>Nothing next. Tap ＋ to add.</Text>}
        {next.length > 3 && (
          <Pressable onPress={() => router.push("/list/next")}>
            <Text style={s.viewAll}>all next actions ({next.length}) →</Text>
          </Pressable>
        )}
        {overdue.length > 0 && (
          <Pressable onPress={() => router.push("/today")}>
            <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}>
        {MENU.map((m) => (
          <Pressable key={m.label} style={s.menuItem} onPress={() => router.push(m.href)}>
            <Text style={s.menuIcon}>{m.icon}</Text>
            <Text style={s.menuLabel}>{m.label}</Text>
          </Pressable>
        ))}
      </View>
      <Pressable
        style={s.fab}
        onPress={() => {
          haptic.tap();
          router.push("/add");
        }}
      >
        <Text style={s.fabText}>＋</Text>
      </Pressable>
    </View>
  );
 }
 const s = StyleSheet.create({
  screen: { flex: 1, backgroundColor: C.bg },
  sectionTitle: {
    color: C.muted,
    fontSize: 13,
    textTransform: "uppercase",
    letterSpacing: 1,
    paddingHorizontal: 16,
    paddingTop: 18,
    paddingBottom: 6,
  },
  empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
  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,
    borderTopColor: C.border,
    paddingTop: 10,
    paddingBottom: 18,
    backgroundColor: C.bg,
  },
  menuItem: { flex: 1, alignItems: "center", gap: 3 },
  menuIcon: { fontSize: 20 },
  menuLabel: { color: C.muted, fontSize: 11 },
  fab: {
    position: "absolute",
    right: 20,
    bottom: 92,
    width: 58,
    height: 58,
    borderRadius: 29,
    backgroundColor: C.accent,
    alignItems: "center",
    justifyContent: "center",
    elevation: 6,
    shadowColor: "#000",
    shadowOpacity: 0.35,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
  },
  fabText: { color: "#FFFFFF", fontSize: 28, lineHeight: 32, fontWeight: "600" },
 });
--- a/app/src/app/list/[status].tsx
+++ b/app/src/app/list/[status].tsx
@@ -0,0 +1,30 @@
 import { Stack, useLocalSearchParams } from "expo-router";
 import TaskListScreen from "../../components/TaskListScreen";
 import type { TaskStatus } from "../../lib/types";
 const TITLES: Record<string, string> = {
  next: "Next up",
  waiting: "Waiting for",
  scheduled: "Scheduled",
  someday: "Someday",
  done: "Done",
 };
 const HINTS: Record<string, string> = {
  next: "Nothing next. Tap ＋ on the home screen.",
  waiting: "Not waiting on anyone.",
  scheduled: "Nothing scheduled.",
  someday: "No someday/maybe items.",
  done: "Nothing done yet.",
 };
 export default function ListByStatus() {
  const { status } = useLocalSearchParams<{ status: string }>();
  const st = (status in TITLES ? status : "next") as TaskStatus;
  return (
    <>
      <Stack.Screen options={{ title: TITLES[st] }} />
      <TaskListScreen status={st} emptyHint={HINTS[st]} />
    </>
  );
 }
--- a/app/src/app/project/[id].tsx
+++ b/app/src/app/project/[id].tsx
@@ -1,46 +1,32 @@
-import { Stack, useFocusEffect, useLocalSearchParams, useRouter } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { Button, Chips } from "../../components/ui";
-import { api } from "../../lib/api";
+import { createTask, dropProject, updateProject, updateTask } from "../../lib/store";
 import { C } from "../../lib/theme";
-import type { Project, ProjectStatus, Task } from "../../lib/types";
+import { useStore } from "../../lib/useStore";
 import type { ProjectStatus } from "../../lib/types";
 const STATUSES: ProjectStatus[] = ["active", "someday", "completed"];
 export default function ProjectDetail() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
-  const [project, setProject] = useState<Project | null>(null);
+  const store = useStore();
  const [tasks, setTasks] = useState<Task[]>([]);
  const [draft, setDraft] = useState("");
-  const load = useCallback(async () => {
+  const project = store.projects.find((p) => p.id === id);
-    const [ps, ts] = await Promise.all([api.projects.list(), api.tasks.list({ project_id: id })]);
+  if (!project) return <Text style={{ color: C.muted, margin: 16 }}>Project not found.</Text>;
    setProject(ps.find((p) => p.id === id) ?? null);
    setTasks(ts.filter((t) => t.status !== "done"));
  }, [id]);
-  useFocusEffect(
+  const tasks = store.tasks
-    useCallback(() => {
+    .filter((t) => t.project_id === id && t.status !== "done" && t.status !== "trashed")
-      load();
+    .sort((a, b) => a.sort_order - b.sort_order || b.created_at.localeCompare(a.created_at));
    }, [load]),
  );
-  if (!project) return <Text style={{ color: C.muted, margin: 16 }}>Loading…</Text>;
+  const add = () => {
  const add = async () => {
    const title = draft.trim();
    if (!title) return;
    setDraft("");
-    await api.tasks.create({ title, status: "next", project_id: id });
+    createTask({ title, status: "next", project_id: id });
    load();
  };
  const complete = async (t: Task) => {
    setTasks((cur) => cur.filter((x) => x.id !== t.id));
    await api.tasks.update(t.id, { status: "done" });
    load();
  };
  return (
@@ -51,10 +37,7 @@ export default function ProjectDetail() {
          label="Status"
          options={STATUSES}
          value={project.status}
-          onChange={async (status) => {
+          onChange={(status) => updateProject(project.id, { status })}
            setProject({ ...project, status });
            await api.projects.update(project.id, { status });
          }}
        />
      </View>
      <TextInput
@@ -64,6 +47,7 @@ export default function ProjectDetail() {
        value={draft}
        onChangeText={setDraft}
        onSubmitEditing={add}
        submitBehavior="submit"
        returnKeyType="done"
      />
      <FlatList
@@ -71,7 +55,11 @@ export default function ProjectDetail() {
        keyExtractor={(t) => t.id}
        renderItem={({ item }) => (
          <Pressable style={s.row} onPress={() => router.push(`/task/${item.id}`)}>
-            <Pressable style={s.checkbox} hitSlop={10} onPress={() => complete(item)} />
+            <Pressable
              style={s.checkbox}
              hitSlop={10}
              onPress={() => updateTask(item.id, { status: "done" })}
            />
            <View style={{ flex: 1 }}>
              <Text style={s.title}>{item.title}</Text>
              <Text style={s.meta}>{[item.status, item.context].filter(Boolean).join("  ·  ")}</Text>
@@ -84,8 +72,8 @@ export default function ProjectDetail() {
        <Button
          title="Drop project"
          danger
-          onPress={async () => {
+          onPress={() => {
-            await api.projects.drop(project.id);
+            dropProject(project.id);
            router.back();
          }}
        />
--- a/app/src/app/(tabs)/projects.tsx
+++ b/app/src/app/(tabs)/projects.tsx
@@ -1,37 +1,21 @@
-import { useFocusEffect, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import { api } from "../../lib/api";
+import { activeProjects, createProject, openTaskCount } from "../lib/store";
-import { C } from "../../lib/theme";
+import { C } from "../lib/theme";
-import type { Project } from "../../lib/types";
+import { useStore } from "../lib/useStore";
 export default function Projects() {
  const router = useRouter();
-  const [projects, setProjects] = useState<Project[]>([]);
+  const store = useStore();
  const [draft, setDraft] = useState("");
-  const [error, setError] = useState<string | null>(null);
+  const projects = activeProjects(store);
-  const load = useCallback(async () => {
+  const add = () => {
    try {
      setProjects(await api.projects.list());
      setError(null);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  }, []);
  useFocusEffect(
    useCallback(() => {
      load();
    }, [load]),
  );
  const add = async () => {
    const name = draft.trim();
    if (!name) return;
    setDraft("");
-    await api.projects.create({ name });
+    createProject({ name });
    load();
  };
  return (
@@ -45,7 +29,6 @@ export default function Projects() {
        onSubmitEditing={add}
        returnKeyType="done"
      />
      {error && <Text style={s.error}>{error}</Text>}
      <FlatList
        data={projects}
        keyExtractor={(p) => p.id}
@@ -54,8 +37,7 @@ export default function Projects() {
            <View style={{ flex: 1 }}>
              <Text style={s.title}>{item.name}</Text>
              <Text style={s.meta}>
-                {item.status}
+                {item.status}  ·  {openTaskCount(store, item.id)} open
                {item.open_tasks != null && `  ·  ${item.open_tasks} open`}
              </Text>
            </View>
            <Text style={{ color: C.muted }}>›</Text>
@@ -91,5 +73,4 @@ const s = StyleSheet.create({
  title: { color: C.text, fontSize: 16 },
  meta: { color: C.muted, fontSize: 13, marginTop: 2 },
  empty: { color: C.muted, textAlign: "center", marginTop: 48 },
  error: { color: C.danger, marginHorizontal: 16, marginTop: 8 },
 });
--- a/app/src/app/settings.tsx
+++ b/app/src/app/settings.tsx
@@ -4,6 +4,7 @@ import { ScrollView, Text } from "react-native";
 import { Button, Field } from "../components/ui";
 import { api } from "../lib/api";
 import { DEFAULT_URL, getConfig, setConfig } from "../lib/config";
 import { sync } from "../lib/store";
 import { C } from "../lib/theme";
 export default function Settings() {
@@ -23,6 +24,7 @@ export default function Settings() {
    await setConfig(url, token);
    try {
      await api.tasks.list({ status: "inbox" });
      void sync();
      router.back();
    } catch (e) {
      setStatus(`Connection failed: ${e instanceof Error ? e.message : e}`);
--- a/app/src/app/task/[id].tsx
+++ b/app/src/app/task/[id].tsx
@@ -1,109 +1,100 @@
 import { useLocalSearchParams, useRouter } from "expo-router";
-import { useEffect, useState } from "react";
+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 { api } from "../../lib/api";
+import { activeProjects, trashTask, updateTask } from "../../lib/store";
 import { C } from "../../lib/theme";
-import type { Project, Task, TaskStatus } from "../../lib/types";
+import { useStore } from "../../lib/useStore";
 import type { Task, TaskStatus } from "../../lib/types";
-const STATUSES: TaskStatus[] = ["inbox", "next", "waiting", "scheduled", "someday", "done"];
+const STATUSES: TaskStatus[] = ["next", "waiting", "someday", "done"];
 export default function TaskDetail() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
-  const [task, setTask] = useState<Task | null>(null);
+  const store = useStore();
-  const [projects, setProjects] = useState<Project[]>([]);
+  const original = store.tasks.find((t) => t.id === id);
-  const [error, setError] = useState<string | null>(null);
+  // Draft is local to the screen; nothing is written until Save.
  const [draft, setDraft] = useState<Task | null>(original ?? null);
-  useEffect(() => {
+  if (!draft) return <Text style={{ color: C.muted, margin: 16 }}>Task not found.</Text>;
    Promise.all([api.tasks.get(id), api.projects.list()])
      .then(([t, ps]) => {
        setTask(t);
        setProjects(ps.filter((p) => p.status === "active" || p.id === t.project_id));
      })
      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
  }, [id]);
-  if (error) return <Text style={{ color: C.danger, margin: 16 }}>{error}</Text>;
+  const set = (patch: Partial<Task>) => setDraft({ ...draft, ...patch });
  if (!task) return <Text style={{ color: C.muted, margin: 16 }}>Loading…</Text>;
-  const set = (patch: Partial<Task>) => setTask({ ...task, ...patch });
+  const save = () => {
-
+    updateTask(draft.id, {
-  const save = async () => {
+      title: draft.title,
-    try {
+      notes: draft.notes,
-      await api.tasks.update(task.id, {
+      status: draft.status,
-        title: task.title,
+      project_id: draft.project_id,
-        notes: task.notes,
+      context: draft.context,
-        status: task.status,
+      waiting_for: draft.waiting_for,
-        project_id: task.project_id,
+      due_date: draft.due_date,
-        context: task.context,
+      defer_date: draft.defer_date,
-        waiting_for: task.waiting_for,
+      priority: draft.priority,
-        due_date: task.due_date,
+      estimate_min: draft.estimate_min,
-        defer_date: task.defer_date,
+    });
      });
      router.back();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  };
  const trash = async () => {
    await api.tasks.trash(task.id);
    router.back();
  };
  const projects = activeProjects(store).filter((p) => p.status === "active" || p.id === draft.project_id);
  const projectOptions = ["none", ...projects.map((p) => p.id)];
  const projectLabels = Object.fromEntries([["none", "None"], ...projects.map((p) => [p.id, p.name])]);
  return (
    <ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={{ padding: 16 }}>
-      <Field label="Title" value={task.title} onChangeText={(v) => set({ title: v })} />
+      <Field label="Title" value={draft.title} onChangeText={(v) => set({ title: v })} />
-      <Chips label="List" options={STATUSES} value={task.status} onChange={(status) => set({ status })} />
+      <PriorityChips value={draft.priority} onChange={(priority) => set({ priority })} />
      <Field
        label="Estimate (minutes)"
        value={draft.estimate_min ? String(draft.estimate_min) : ""}
        onChangeText={(v) => set({ estimate_min: Number(v.replace(/\D/g, "")) || null })}
        placeholder="30"
        keyboardType="number-pad"
      />
      <Chips label="List" options={STATUSES} value={draft.status} onChange={(status) => set({ status })} />
      <Chips
        label="Project"
        options={projectOptions}
        labels={projectLabels}
-        value={task.project_id ?? "none"}
+        value={draft.project_id ?? "none"}
        onChange={(v) => set({ project_id: v === "none" ? null : v })}
      />
      <Field
        label="Context"
-        value={task.context ?? ""}
+        value={draft.context ?? ""}
        onChangeText={(v) => set({ context: v || null })}
        placeholder="@home, @computer, @errands…"
        autoCapitalize="none"
      />
-      {task.status === "waiting" && (
+      {draft.status === "waiting" && (
        <Field
          label="Waiting for"
-          value={task.waiting_for ?? ""}
+          value={draft.waiting_for ?? ""}
          onChangeText={(v) => set({ waiting_for: v || null })}
          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={task.due_date ?? ""}
        onChangeText={(v) => set({ due_date: v || null })}
        placeholder="YYYY-MM-DD"
        autoCapitalize="none"
      />
      <Field
        label="Defer until"
        value={task.defer_date ?? ""}
        onChangeText={(v) => set({ defer_date: v || null })}
        placeholder="YYYY-MM-DD"
        autoCapitalize="none"
      />
      <Field
        label="Notes"
-        value={task.notes}
+        value={draft.notes}
        onChangeText={(v) => set({ notes: v })}
        multiline
        style={{ minHeight: 80, textAlignVertical: "top" }}
      />
      <Button title="Save" onPress={save} />
-      <Button title="Delete" onPress={trash} danger />
+      <Button
        title="Delete"
        danger
        onPress={() => {
          trashTask(draft.id);
          router.back();
        }}
      />
    </ScrollView>
  );
 }
--- a/app/src/app/today.tsx
+++ b/app/src/app/today.tsx
@@ -0,0 +1,34 @@
 import { SectionList, StyleSheet, Text } from "react-native";
 import TaskRow from "../components/TaskRow";
 import { todayTasks } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 export default function Today() {
  const store = useStore();
  const { overdue, today } = todayTasks(store);
  const sections = [
    ...(overdue.length ? [{ title: "Overdue", data: overdue, color: C.danger }] : []),
    { title: "Today", data: today, color: C.text },
  ];
  return (
    <SectionList
      style={{ flex: 1, backgroundColor: C.bg }}
      sections={sections}
      keyExtractor={(t) => t.id}
      renderItem={({ item }) => <TaskRow task={item} showStatus />}
      renderSectionHeader={({ section }) => (
        <Text style={[s.header, { color: section.color }]}>{section.title}</Text>
      )}
      ListEmptyComponent={<Text style={s.empty}>Nothing due. Clear runway.</Text>}
      contentContainerStyle={{ paddingBottom: 32 }}
      stickySectionHeadersEnabled={false}
    />
  );
 }
 const s = StyleSheet.create({
  header: { fontSize: 15, fontWeight: "700", paddingHorizontal: 16, paddingTop: 18, paddingBottom: 6 },
  empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
 });
--- a/app/src/components/DateField.tsx
+++ b/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 },
 });
--- a/app/src/components/PriorityChips.tsx
+++ b/app/src/components/PriorityChips.tsx
@@ -0,0 +1,56 @@
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import { haptic } from "../lib/haptics";
 import { PRIORITIES, PRIORITY_COLOR, PRIORITY_LABEL } from "../lib/priority";
 import { C } from "../lib/theme";
 import type { Task } from "../lib/types";
 export default function PriorityChips({
  value,
  onChange,
 }: {
  value: Task["priority"] | null;
  onChange: (p: Task["priority"]) => void;
 }) {
  return (
    <View style={{ marginBottom: 14 }}>
      <Text style={s.label}>Priority</Text>
      <View style={s.rowWrap}>
        {PRIORITIES.map((p) => {
          const active = value === p;
          const color = PRIORITY_COLOR[p];
          return (
            <Pressable
              key={p}
              style={[s.chip, active && { borderColor: color, backgroundColor: `${color}22` }]}
              onPress={() => {
                haptic.select();
                onChange(p);
              }}
            >
              <View style={[s.flag, { backgroundColor: color }]} />
              <Text style={[s.text, active && { color: C.text }]}>{PRIORITY_LABEL[p]}</Text>
            </Pressable>
          );
        })}
      </View>
    </View>
  );
 }
 const s = StyleSheet.create({
  label: { color: C.muted, fontSize: 13, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 },
  rowWrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
  chip: {
    flexDirection: "row",
    alignItems: "center",
    gap: 7,
    paddingVertical: 8,
    paddingHorizontal: 13,
    borderRadius: 20,
    backgroundColor: C.surface,
    borderWidth: 1,
    borderColor: C.border,
  },
  flag: { width: 10, height: 10, borderRadius: 5 },
  text: { color: C.muted, fontSize: 14 },
 });
--- a/app/src/components/TaskListScreen.tsx
+++ b/app/src/components/TaskListScreen.tsx
@@ -1,115 +1,51 @@
-import { useFocusEffect, useRouter } from "expo-router";
+import { useState } from "react";
-import { useCallback, useState } from "react";
+import { RefreshControl, StyleSheet, Text, View } from "react-native";
-import {
+import DraggableFlatList, { ScaleDecorator } from "react-native-draggable-flatlist";
-  FlatList,
+import { haptic } from "../lib/haptics";
-  Pressable,
+import { reorderTask, sync, tasksByStatus } from "../lib/store";
  RefreshControl,
  StyleSheet,
  Text,
  TextInput,
  View,
 } from "react-native";
 import { api } from "../lib/api";
 import { C } from "../lib/theme";
-import type { Task, TaskStatus } from "../lib/types";
+import { useStore } from "../lib/useStore";
-
+import type { TaskStatus } from "../lib/types";
-function TaskRow({ task, onToggle }: { task: Task; onToggle: (t: Task) => void }) {
+import TaskRow from "./TaskRow";
  const router = useRouter();
  const meta = [task.context, task.waiting_for && `→ ${task.waiting_for}`, task.due_date && `due ${task.due_date}`]
    .filter(Boolean)
    .join("  ·  ");
  return (
    <Pressable style={s.row} onPress={() => router.push(`/task/${task.id}`)}>
      <Pressable style={s.checkbox} hitSlop={10} onPress={() => onToggle(task)}>
        {task.status === "done" && <View style={s.checkboxFill} />}
      </Pressable>
      <View style={{ flex: 1 }}>
        <Text style={s.title} numberOfLines={2}>
          {task.title}
        </Text>
        {!!meta && <Text style={s.meta}>{meta}</Text>}
      </View>
    </Pressable>
  );
 }
 export default function TaskListScreen({
  status,
  capture,
  emptyHint,
 }: {
  status: TaskStatus;
  capture?: boolean;
  emptyHint: string;
 }) {
-  const [tasks, setTasks] = useState<Task[]>([]);
+  const store = useStore();
  const [refreshing, setRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const tasks = tasksByStatus(store, status);
  const [draft, setDraft] = useState("");
  const load = useCallback(async () => {
    try {
      setTasks(await api.tasks.list({ status }));
      setError(null);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  }, [status]);
  useFocusEffect(
    useCallback(() => {
      load();
    }, [load]),
  );
  const add = async () => {
    const title = draft.trim();
    if (!title) return;
    setDraft("");
    setTasks((cur) => [{ id: `tmp-${title}`, title, status } as Task, ...cur]);
    try {
      await api.tasks.create({ title, status });
    } finally {
      load();
    }
  };
  const toggle = async (task: Task) => {
    const done = task.status !== "done";
    setTasks((cur) => cur.filter((t) => t.id !== task.id));
    try {
      await api.tasks.update(task.id, { status: done ? "done" : status });
    } finally {
      load();
    }
  };
  return (
    <View style={s.screen}>
-      {capture && (
+      <DraggableFlatList
        <TextInput
          style={s.capture}
          placeholder="Capture anything…"
          placeholderTextColor={C.muted}
          value={draft}
          onChangeText={setDraft}
          onSubmitEditing={add}
          submitBehavior="submit"
          returnKeyType="done"
        />
      )}
      {error && <Text style={s.error}>{error}</Text>}
      <FlatList
        data={tasks}
        keyExtractor={(t) => t.id}
-        renderItem={({ item }) => <TaskRow task={item} onToggle={toggle} />}
+        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}
            tintColor={C.muted}
            onRefresh={async () => {
              setRefreshing(true);
-              await load();
+              await sync();
              setRefreshing(false);
            }}
          />
@@ -123,38 +59,6 @@ export default function TaskListScreen({
 const s = StyleSheet.create({
  screen: { flex: 1, backgroundColor: C.bg },
-  capture: {
+  activeRow: { backgroundColor: C.surface2, borderRadius: 12 },
    margin: 12,
    marginBottom: 4,
    padding: 14,
    borderRadius: 12,
    backgroundColor: C.surface,
    color: C.text,
    fontSize: 16,
    borderWidth: 1,
    borderColor: C.border,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: C.border,
  },
  checkbox: {
    width: 22,
    height: 22,
    borderRadius: 11,
    borderWidth: 2,
    borderColor: C.muted,
    alignItems: "center",
    justifyContent: "center",
  },
  checkboxFill: { width: 12, height: 12, borderRadius: 6, backgroundColor: C.done },
  title: { color: C.text, fontSize: 16 },
  meta: { color: C.muted, fontSize: 13, marginTop: 2 },
  empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
  error: { color: C.danger, marginHorizontal: 16, marginTop: 8 },
 });
--- a/app/src/components/TaskRow.tsx
+++ b/app/src/components/TaskRow.tsx
@@ -0,0 +1,83 @@
 import { useRouter } from "expo-router";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import Animated, { FadeIn } from "react-native-reanimated";
 import { haptic } from "../lib/haptics";
 import { formatEstimate, PRIORITY_COLOR } from "../lib/priority";
 import { updateTask } from "../lib/store";
 import { C } from "../lib/theme";
 import type { Task, TaskStatus } from "../lib/types";
 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 = [
    showStatus ? task.status : null,
    task.context,
    task.waiting_for && `→ ${task.waiting_for}`,
    formatEstimate(task.estimate_min),
    task.due_date && `due ${task.due_date}`,
  ]
    .filter(Boolean)
    .join("  ·  ");
  const toggle = () => {
    const done = task.status !== "done";
    if (done) haptic.success();
    else haptic.tap();
    updateTask(task.id, { status: done ? "done" : uncheckTo });
  };
  return (
    <Animated.View entering={FadeIn.duration(150)}>
      <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}
          onPress={toggle}
        >
          {task.status === "done" && <View style={s.checkboxFill} />}
        </Pressable>
        <View style={{ flex: 1 }}>
          <Text style={s.title} numberOfLines={2}>
            {task.title}
          </Text>
          {!!meta && <Text style={s.meta}>{meta}</Text>}
        </View>
      </Pressable>
    </Animated.View>
  );
 }
 const s = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: C.border,
  },
  checkbox: {
    width: 22,
    height: 22,
    borderRadius: 11,
    borderWidth: 2,
    alignItems: "center",
    justifyContent: "center",
  },
  checkboxFill: { width: 12, height: 12, borderRadius: 6, backgroundColor: C.done },
  title: { color: C.text, fontSize: 16 },
  meta: { color: C.muted, fontSize: 13, marginTop: 2 },
 });
--- a/app/src/lib/api.ts
+++ b/app/src/lib/api.ts
@@ -34,7 +34,7 @@ export const api = {
      return req<Task[]>(`/v1/tasks${q ? `?${q}` : ""}`);
    },
    get: (id: string) => req<Task>(`/v1/tasks/${id}`),
-    create: (data: Partial<Task> & { title: string }) =>
+    create: (data: Partial<Task> & { title: string; id?: string }) =>
      req<Task>("/v1/tasks", { method: "POST", body: JSON.stringify(data) }),
    update: (id: string, data: Partial<Task>) =>
      req<Task>(`/v1/tasks/${id}`, { method: "PATCH", body: JSON.stringify(data) }),
@@ -42,7 +42,7 @@ export const api = {
  },
  projects: {
    list: () => req<Project[]>("/v1/projects"),
-    create: (data: Partial<Project> & { name: string }) =>
+    create: (data: Partial<Project> & { name: string; id?: string }) =>
      req<Project>("/v1/projects", { method: "POST", body: JSON.stringify(data) }),
    update: (id: string, data: Partial<Project>) =>
      req<Project>(`/v1/projects/${id}`, { method: "PATCH", body: JSON.stringify(data) }),
--- a/app/src/lib/haptics.ts
+++ b/app/src/lib/haptics.ts
@@ -0,0 +1,24 @@
 // Haptics that silently no-op on web.
 import * as Haptics from "expo-haptics";
 import { Platform } from "react-native";
 const canBuzz = Platform.OS !== "web";
 export const haptic = {
  /** Light tick — captures, small confirmations. */
  tap: () => {
    if (canBuzz) void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  },
  /** Medium thunk — picking up a draggable. */
  pickup: () => {
    if (canBuzz) void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  },
  /** Success notification — completing a task, landing a drop. */
  success: () => {
    if (canBuzz) void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  },
  /** Selection change — flicking through chips. */
  select: () => {
    if (canBuzz) void Haptics.selectionAsync();
  },
 };
--- a/app/src/lib/priority.ts
+++ b/app/src/lib/priority.ts
@@ -0,0 +1,24 @@
 import type { Task } from "./types";
 export const PRIORITIES: Task["priority"][] = [1, 2, 3, 4];
 export const PRIORITY_LABEL: Record<Task["priority"], string> = {
  1: "Urgent",
  2: "High",
  3: "Medium",
  4: "Low",
 };
 export const PRIORITY_COLOR: Record<Task["priority"], string> = {
  1: "#E05B5B",
  2: "#E0A93E",
  3: "#5B8DEF",
  4: "#6B7280",
 };
 export function formatEstimate(min: number | null): string | null {
  if (!min) return null;
  const h = Math.floor(min / 60);
  const m = min % 60;
  return h ? (m ? `${h}h${m}` : `${h}h`) : `${m}m`;
 }
--- a/app/src/lib/quickadd.ts
+++ b/app/src/lib/quickadd.ts
@@ -0,0 +1,92 @@
 // Natural-language quick add, Todoist style:
 //   "Pay rent tomorrow p1 @home #Sydney ~30m"
 // → title "Pay rent", due tomorrow, priority 1, context @home,
 //   project "Sydney" (matched by name prefix), estimate 30 min.
 import type { Project, Task } from "./types";
 export interface ParsedQuickAdd {
  title: string;
  priority?: Task["priority"];
  due_date?: string;
  context?: string;
  project_id?: string;
  estimate_min?: number;
 }
 const WEEKDAYS = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
 function iso(d: Date): string {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${y}-${m}-${day}`;
 }
 function parseDateWord(word: string): string | undefined {
  const w = word.toLowerCase();
  const today = new Date();
  if (w === "today" || w === "tod") return iso(today);
  if (w === "tomorrow" || w === "tmr" || w === "tom") {
    const d = new Date(today);
    d.setDate(d.getDate() + 1);
    return iso(d);
  }
  if (/^\d{4}-\d{2}-\d{2}$/.test(w)) return w;
  const wd = WEEKDAYS.findIndex((n) => n === w || n.slice(0, 3) === w);
  if (wd >= 0) {
    const d = new Date(today);
    const delta = (wd - d.getDay() + 7) % 7 || 7; // always the *next* occurrence
    d.setDate(d.getDate() + delta);
    return iso(d);
  }
  return undefined;
 }
 function parseEstimate(token: string): number | undefined {
  const m = token.match(/^~(?:(\d+)h)?(\d+)?m?$/i);
  if (!m || (!m[1] && !m[2])) return undefined;
  return (Number(m[1] ?? 0) * 60 + Number(m[2] ?? 0)) || undefined;
 }
 export function parseQuickAdd(input: string, projects: Project[]): ParsedQuickAdd {
  const out: ParsedQuickAdd = { title: "" };
  const rest: string[] = [];
  for (const token of input.trim().split(/\s+/)) {
    const p = token.match(/^p([1-4])$/i);
    if (p && out.priority === undefined) {
      out.priority = Number(p[1]) as Task["priority"];
      continue;
    }
    if (token.startsWith("@") && token.length > 1 && out.context === undefined) {
      out.context = token;
      continue;
    }
    if (token.startsWith("#") && token.length > 1 && out.project_id === undefined) {
      const name = token.slice(1).toLowerCase();
      const match = projects.find(
        (pr) => pr.status === "active" && pr.name.toLowerCase().startsWith(name),
      );
      if (match) {
        out.project_id = match.id;
        continue;
      }
    }
    const est = parseEstimate(token);
    if (est && out.estimate_min === undefined) {
      out.estimate_min = est;
      continue;
    }
    if (out.due_date === undefined) {
      const due = parseDateWord(token);
      if (due) {
        out.due_date = due;
        continue;
      }
    }
    rest.push(token);
  }
  out.title = rest.join(" ");
  return out;
 }
--- a/app/src/lib/store.ts
+++ b/app/src/lib/store.ts
@@ -0,0 +1,305 @@
 // Local-first store — the single source of truth for the UI.
 //
 // Screens render synchronously from the in-memory state (hydrated from
 // AsyncStorage at launch). Mutations apply locally immediately and enqueue an
 // op; a background worker drains the queue to the API and then pulls the
 // server state, so the network is never on the interaction path. Single-user
 // last-write-wins: rows with queued local ops keep their local version during
 // a pull; everything else takes the server's.
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Crypto from "expo-crypto";
 import { api } from "./api";
 import { getConfig } from "./config";
 import type { Project, Task } from "./types";
 export interface State {
  tasks: Task[];
  projects: Project[];
  hydrated: boolean;
  syncing: boolean;
  pending: number;
  /** True when the last sync failed for network reasons — expected offline. */
  offline: boolean;
  syncError: string | null;
 }
 type Op =
  | { kind: "task.create" | "task.update"; id: string; data: Partial<Task> }
  | { kind: "project.create" | "project.update"; id: string; data: Partial<Project> };
 const DATA_KEY = "store_v1";
 const QUEUE_KEY = "queue_v1";
 let state: State = {
  tasks: [],
  projects: [],
  hydrated: false,
  syncing: false,
  pending: 0,
  offline: false,
  syncError: null,
 };
 let queue: Op[] = [];
 const listeners = new Set<() => void>();
 export function getState(): State {
  return state;
 }
 export function subscribe(listener: () => void): () => void {
  listeners.add(listener);
  return () => listeners.delete(listener);
 }
 function setState(patch: Partial<State>) {
  state = { ...state, ...patch, pending: queue.length };
  for (const l of listeners) l();
 }
 function persistData() {
  void AsyncStorage.setItem(DATA_KEY, JSON.stringify({ tasks: state.tasks, projects: state.projects }));
 }
 function persistQueue() {
  void AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(queue));
 }
 export async function hydrate() {
  if (state.hydrated) return;
  const [data, q] = await Promise.all([AsyncStorage.getItem(DATA_KEY), AsyncStorage.getItem(QUEUE_KEY)]);
  if (q) queue = JSON.parse(q);
  const parsed = data ? JSON.parse(data) : { tasks: [], projects: [] };
  setState({ tasks: parsed.tasks, projects: parsed.projects, hydrated: true });
  void sync();
 }
 // ---- mutations (instant; network happens later) ----
 function now() {
  return new Date().toISOString();
 }
 // Fields the API accepts — everything else (timestamps, completed_at) is local
 // bookkeeping until the server's authoritative row arrives via pull().
 const TASK_FIELDS = ["title", "notes", "status", "project_id", "context", "waiting_for", "due_date", "defer_date", "priority", "estimate_min", "sort_order"] as const;
 const PROJECT_FIELDS = ["name", "status", "notes", "sort_order"] as const;
 function pickFields<T>(data: Partial<T>, fields: readonly (keyof T & string)[]): Partial<T> {
  const out: Partial<T> = {};
  for (const f of fields) if (f in data) out[f] = data[f];
  return out;
 }
 function enqueue(op: Op) {
  // Coalesce consecutive updates to the same row into one op.
  const last = queue[queue.length - 1];
  if (last && op.kind === last.kind && op.kind.endsWith("update") && last.id === op.id) {
    last.data = { ...last.data, ...op.data };
  } else {
    queue.push(op);
  }
  persistQueue();
  setState({});
  void sync();
 }
 export function createTask(data: Partial<Task> & { title: string }): Task {
  const task: Task = {
    id: Crypto.randomUUID(),
    title: data.title,
    notes: data.notes ?? "",
    status: data.status ?? "inbox",
    project_id: data.project_id ?? null,
    context: data.context ?? null,
    waiting_for: data.waiting_for ?? null,
    due_date: data.due_date ?? null,
    defer_date: data.defer_date ?? null,
    priority: data.priority ?? 4,
    estimate_min: data.estimate_min ?? null,
    completed_at: null,
    // 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(),
  };
  setState({ tasks: [task, ...state.tasks] });
  persistData();
  enqueue({ kind: "task.create", id: task.id, data: pickFields(task, TASK_FIELDS) });
  return task;
 }
 export function updateTask(id: string, patch: Partial<Task>) {
  setState({
    tasks: state.tasks.map((t) => {
      if (t.id !== id) return t;
      const next = { ...t, ...patch, updated_at: now() };
      // Mirror the server's completed_at rule so the UI is right pre-sync.
      next.completed_at = next.status === "done" ? (t.completed_at ?? now()) : null;
      return next;
    }),
  });
  persistData();
  enqueue({ kind: "task.update", id, data: pickFields(patch, TASK_FIELDS) });
 }
 export function trashTask(id: string) {
  updateTask(id, { status: "trashed" });
 }
 export function createProject(data: Partial<Project> & { name: string }): Project {
  const project: Project = {
    id: Crypto.randomUUID(),
    name: data.name,
    status: data.status ?? "active",
    notes: data.notes ?? "",
    sort_order: data.sort_order ?? 0,
    created_at: now(),
    updated_at: now(),
  };
  setState({ projects: [project, ...state.projects] });
  persistData();
  enqueue({ kind: "project.create", id: project.id, data: pickFields(project, PROJECT_FIELDS) });
  return project;
 }
 export function updateProject(id: string, patch: Partial<Project>) {
  setState({ projects: state.projects.map((p) => (p.id === id ? { ...p, ...patch, updated_at: now() } : p)) });
  persistData();
  enqueue({ kind: "project.update", id, data: pickFields(patch, PROJECT_FIELDS) });
 }
 export function dropProject(id: string) {
  updateProject(id, { status: "dropped" });
 }
 // ---- sync ----
 let syncRunning = false;
 let syncAgain = false;
 export async function sync() {
  if (syncRunning) {
    syncAgain = true;
    return;
  }
  const { token } = await getConfig();
  if (!token) return;
  syncRunning = true;
  setState({ syncing: true });
  try {
    while (queue.length) {
      await push(queue[0]);
      queue.shift();
      persistQueue();
      setState({});
    }
    await pull();
    setState({ syncError: null, offline: false });
  } catch (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 });
    if (syncAgain) {
      syncAgain = false;
      void sync();
    }
  }
 }
 async function push(op: Op) {
  try {
    if (op.kind === "task.create") await api.tasks.create({ id: op.id, ...op.data } as never);
    else if (op.kind === "task.update") await api.tasks.update(op.id, op.data as Partial<Task>);
    else if (op.kind === "project.create") await api.projects.create({ id: op.id, ...op.data } as never);
    else await api.projects.update(op.id, op.data as Partial<Project>);
  } catch (e) {
    // 4xx (bad data, row gone) would poison the queue forever — drop the op.
    // Anything else (offline, 5xx) rethrows and we retry on the next sync.
    const status = (e as { status?: number }).status;
    if (status && status >= 400 && status < 500 && status !== 401) return;
    throw e;
  }
 }
 async function pull() {
  const [tasks, projects] = await Promise.all([api.tasks.list(), api.projects.list()]);
  // Rows with ops still queued keep their local version; the next sync pass
  // pushes those ops and then this merge converges to the server state.
  const dirty = new Set(queue.map((o) => o.id));
  const keepLocal = <T extends { id: string }>(local: T[], server: T[]) => {
    const serverIds = new Set(server.map((r) => r.id));
    return [
      ...server.map((r) => (dirty.has(r.id) ? local.find((l) => l.id === r.id) ?? r : r)),
      ...local.filter((l) => dirty.has(l.id) && !serverIds.has(l.id)),
    ];
  };
  setState({
    tasks: keepLocal(state.tasks, tasks),
    projects: keepLocal(state.projects, projects),
  });
  persistData();
 }
 // ---- selectors ----
 function byPriorityDue(a: Task, b: Task): number {
  return (
    a.priority - b.priority ||
    (a.due_date ?? "9999").localeCompare(b.due_date ?? "9999") ||
    a.sort_order - b.sort_order ||
    b.created_at.localeCompare(a.created_at)
  );
 }
 // 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(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. */
 export function todayTasks(s: State): { overdue: Task[]; today: Task[] } {
  const now = new Date();
  const todayIso = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
  const open = s.tasks.filter((t) => t.status !== "done" && t.status !== "trashed");
  return {
    overdue: open.filter((t) => t.due_date && t.due_date < todayIso).sort(byPriorityDue),
    today: open
      .filter((t) => t.due_date === todayIso || (t.defer_date === todayIso && !t.due_date))
      .sort(byPriorityDue),
  };
 }
 export function activeProjects(s: State): Project[] {
  return s.projects
    .filter((p) => p.status !== "dropped")
    .sort((a, b) => a.sort_order - b.sort_order || b.created_at.localeCompare(a.created_at));
 }
 export function openTaskCount(s: State, projectId: string): number {
  return s.tasks.filter((t) => t.project_id === projectId && t.status !== "done" && t.status !== "trashed").length;
 }
--- a/app/src/lib/types.ts
+++ b/app/src/lib/types.ts
@@ -11,6 +11,8 @@ export interface Task {
  waiting_for: string | null;
  due_date: string | null;
  defer_date: string | null;
  priority: 1 | 2 | 3 | 4;
  estimate_min: number | null;
  completed_at: string | null;
  sort_order: number;
  created_at: string;
--- a/app/src/lib/useStore.ts
+++ b/app/src/lib/useStore.ts
@@ -0,0 +1,8 @@
 import { useSyncExternalStore } from "react";
 import { getState, subscribe, type State } from "./store";
 // Subscribe a component to the local-first store. The whole state object is
 // the snapshot (replaced immutably on every change), so derive lists inline.
 export function useStore(): State {
  return useSyncExternalStore(subscribe, getState, getState);
 }
--- a/server/index.ts
+++ b/server/index.ts
@@ -7,11 +7,12 @@ if (!API_TOKEN) throw new Error("API_TOKEN not set");
 const TASK_COLS = `id, title, notes, status, project_id, context, waiting_for,
  due_date::text as due_date, defer_date::text as defer_date,
-  completed_at, sort_order, created_at, updated_at`;
+  priority, estimate_min, completed_at, sort_order, created_at, updated_at`;
 const PROJECT_COLS = `id, name, status, notes, sort_order, created_at, updated_at`;
 const TASK_STATUSES = ["inbox", "next", "waiting", "scheduled", "someday", "done", "trashed"];
 const PROJECT_STATUSES = ["active", "someday", "completed", "dropped"];
 const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
 const CORS = {
  "Access-Control-Allow-Origin": "*",
@@ -27,12 +28,15 @@ function err(message: string, status: number) {
 }
 // Fields a client may set. completed_at is derived from status server-side.
-const TASK_FIELDS = ["title", "notes", "status", "project_id", "context", "waiting_for", "due_date", "defer_date", "sort_order"];
+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;
 }
@@ -69,13 +73,19 @@ async function handle(req: Request): Promise<Response> {
    const t = pick(body, TASK_FIELDS);
    if (typeof t.title !== "string" || !t.title.trim()) return err("title required", 400);
    if (t.status && !TASK_STATUSES.includes(t.status as string)) return err("bad status", 400);
    const id = typeof body.id === "string" && UUID_RE.test(body.id) ? body.id : null;
    // Client-supplied id + on-conflict no-op make offline-queue retries idempotent.
    const rows = await sql.unsafe(
-      `insert into tasks (title, notes, status, project_id, context, waiting_for, due_date, defer_date, sort_order)
+      `insert into tasks (id, title, notes, status, project_id, context, waiting_for, due_date, defer_date, priority, estimate_min, sort_order)
-       values ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+       values (coalesce($1::uuid, gen_random_uuid()), $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
       on conflict (id) do nothing
       returning ${TASK_COLS}`,
-      [t.title, t.notes ?? "", t.status ?? "inbox", t.project_id ?? null, t.context ?? null,
+      [id, t.title, t.notes ?? "", t.status ?? "inbox", t.project_id ?? null, t.context ?? null,
-       t.waiting_for ?? null, t.due_date ?? null, t.defer_date ?? null, t.sort_order ?? 0]);
+       t.waiting_for ?? null, t.due_date ?? null, t.defer_date ?? null, t.priority ?? 4,
-    return json(rows[0], 201);
+       t.estimate_min ?? null, t.sort_order ?? 0]);
    if (rows.length) return json(rows[0], 201);
    const existing = await sql.unsafe(`select ${TASK_COLS} from tasks where id = $1`, [id]);
    return json(existing[0], 200);
  }
  let m = path.match(/^\/v1\/tasks\/([0-9a-f-]{36})$/);
@@ -93,10 +103,11 @@ async function handle(req: Request): Promise<Response> {
    const completedAt = cur.status === "done" ? (existing[0].completed_at ?? new Date()) : null;
    const rows = await sql.unsafe(
      `update tasks set title=$2, notes=$3, status=$4, project_id=$5, context=$6, waiting_for=$7,
-         due_date=$8, defer_date=$9, completed_at=$10, sort_order=$11, updated_at=now()
+         due_date=$8, defer_date=$9, priority=$10, estimate_min=$11, completed_at=$12, sort_order=$13,
         updated_at=now()
       where id=$1 returning ${TASK_COLS}`,
      [id, cur.title, cur.notes, cur.status, cur.project_id, cur.context, cur.waiting_for,
-       cur.due_date, cur.defer_date, completedAt, cur.sort_order]);
+       cur.due_date, cur.defer_date, cur.priority, cur.estimate_min, completedAt, cur.sort_order]);
    return json(rows[0]);
  }
@@ -115,11 +126,16 @@ async function handle(req: Request): Promise<Response> {
    const p = pick(body, PROJECT_FIELDS);
    if (typeof p.name !== "string" || !p.name.trim()) return err("name required", 400);
    if (p.status && !PROJECT_STATUSES.includes(p.status as string)) return err("bad status", 400);
    const id = typeof body.id === "string" && UUID_RE.test(body.id) ? body.id : null;
    const rows = await sql.unsafe(
-      `insert into projects (name, status, notes, sort_order) values ($1, $2, $3, $4)
+      `insert into projects (id, name, status, notes, sort_order)
       values (coalesce($1::uuid, gen_random_uuid()), $2, $3, $4, $5)
       on conflict (id) do nothing
       returning ${PROJECT_COLS}`,
-      [p.name, p.status ?? "active", p.notes ?? "", p.sort_order ?? 0]);
+      [id, p.name, p.status ?? "active", p.notes ?? "", p.sort_order ?? 0]);
-    return json(rows[0], 201);
+    if (rows.length) return json(rows[0], 201);
    const existing = await sql.unsafe(`select ${PROJECT_COLS} from projects where id = $1`, [id]);
    return json(existing[0], 200);
  }
  m = path.match(/^\/v1\/projects\/([0-9a-f-]{36})$/);
@@ -153,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);
    }),
 });
--- a/server/schema.sql
+++ b/server/schema.sql
@@ -23,6 +23,8 @@ create table if not exists tasks (
    waiting_for  text,           -- who/what is being waited on when status = 'waiting'
    due_date     date,
    defer_date   date,           -- hide from lists until this date
    priority     int not null default 4 check (priority between 1 and 4),  -- 1=urgent … 4=low
    estimate_min int check (estimate_min > 0),
    completed_at timestamptz,
    sort_order   double precision not null default 0,
    created_at   timestamptz not null default now(),
Author	SHA1	Message	Date
Marcus Rehbock	6ccd417f2a	Offline UX: network failures show quiet 'offline, n queued' not errors; auto-sync on connectivity regain + 45s heartbeat All checks were successful Build & Release APK / build (push) Successful in 2m10s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 23:50:34 -07:00
Marcus Rehbock	64967c19a0	API: don't null-out empty notes/title (NOT NULL columns); constraint violations return 400 so offline clients drop bad ops All checks were successful Build & Release APK / build (push) Successful in 2m1s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 23:40:31 -07:00
Marcus Rehbock	8091c7d94d	Drag-to-reorder lists: manual sort_order is canonical, fractional re-slotting, haptic pickup/drop All checks were successful Build & Release APK / build (push) Successful in 2m8s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 20:47:28 -07:00
Marcus Rehbock	e7c092f35d	Interactive date picker: quick chips + inline month calendar (due & defer) All checks were successful Build & Release APK / build (push) Successful in 2m4s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 20:45:15 -07:00
Marcus Rehbock	d6bd8500e3	Minimal home: top-3 next actions only, bottom icon menu, FAB-only capture, inbox abolished (priority+due required at creation) All checks were successful Build & Release APK / build (push) Successful in 1m52s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 20:27:36 -07:00
Marcus Rehbock	0487bc7e4e	Todoist-style: priorities P1-P4, estimates, FAB add form, Today view, natural quick add, drag-and-drop with haptics All checks were successful Build & Release APK / build (push) Successful in 1m53s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 19:46:11 -07:00
Marcus Rehbock	035a114e58	GTD quadrant launcher icon; build speedups: arm64-only, 8G gradle heap, cached SDK step Some checks failed Build & Release APK / build (push) Failing after 14m4s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 19:31:46 -07:00
Marcus Rehbock	ad16522461	Local-first sync: on-device store + offline mutation queue, idempotent server upserts All checks were successful Build & Release APK / build (push) Successful in 10m54s Details Screens render synchronously from an AsyncStorage-backed store; every mutation applies locally and drains to the API in the background (last-write-wins, client-generated UUIDs). Sydney round-trips are off the interaction path and the app works fully offline. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 19:19:51 -07:00
Marcus Rehbock	4d6031d007	Quadrant home screen: Next/Waiting/Someday/Projects grid replaces bottom tabs Some checks failed Build & Release APK / build (push) Has been cancelled Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-08-07 19:10:59 -07:00