Inline app/ (was an embedded git repo)

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

app/.claude/settings.json

@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "expo@claude-plugins-official": true
+  }
+}

app/.gitignore

@@ -0,0 +1,43 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+example
+
+# generated native folders
+/ios
+/android

app/.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["expo.vscode-expo-tools"] }

app/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}

app/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/README.md

@@ -0,0 +1,56 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+### Other setup steps
+
+- To set up ESLint for linting, run `npx expo lint`, or follow our guide on ["Using ESLint and Prettier"](https://docs.expo.dev/guides/using-eslint/)
+- If you'd like to set up unit testing, follow our guide on ["Unit Testing with Jest"](https://docs.expo.dev/develop/unit-testing/)
+- Learn more about the TypeScript setup in this template in our guide on ["Using TypeScript"](https://docs.expo.dev/guides/typescript/)
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

app/app.json

@@ -0,0 +1,42 @@
+{
+  "expo": {
+    "name": "GTD",
+    "slug": "gtd",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "gtd",
+    "userInterfaceStyle": "automatic",
+    "ios": {
+      "icon": "./assets/expo.icon"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "backgroundColor": "#208AEF",
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 76
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

app/assets/expo.icon/Assets/expo-symbol 2.svg

@@ -0,0 +1,3 @@
+<svg width="652" height="606" viewBox="0 0 652 606" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M353.554 0H298.446C273.006 0 249.684 14.6347 237.962 37.9539L4.37994 502.646C-1.04325 513.435 -1.45067 526.178 3.2716 537.313L22.6123 582.918C34.6475 611.297 72.5404 614.156 88.4414 587.885L309.863 222.063C313.34 216.317 319.439 212.826 326 212.826C332.561 212.826 338.659 216.317 342.137 222.063L563.559 587.885C579.46 614.156 617.352 611.297 629.388 582.918L648.728 537.313C653.451 526.178 653.043 513.435 647.62 502.646L414.038 37.9539C402.316 14.6347 378.994 0 353.554 0Z" fill="white"/>
+</svg>

app/assets/expo.icon/icon.json

@@ -0,0 +1,40 @@
+{
+  "fill" : {
+    "automatic-gradient" : "extended-srgb:0.00000,0.47843,1.00000,1.00000"
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "image-name" : "expo-symbol 2.svg",
+          "name" : "expo-symbol 2",
+          "position" : {
+            "scale" : 1,
+            "translation-in-points" : [
+              1.1008400065293245e-05,
+              -16.046875
+            ]
+          }
+        },
+        {
+          "image-name" : "grid.png",
+          "name" : "grid"
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}

app/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "app",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "dependencies": {
+    "@expo/ui": "~57.0.9",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "expo": "~57.0.11",
+    "expo-constants": "~57.0.9",
+    "expo-device": "~57.0.1",
+    "expo-font": "~57.0.1",
+    "expo-glass-effect": "~57.0.1",
+    "expo-image": "~57.0.2",
+    "expo-linking": "~57.0.5",
+    "expo-router": "~57.0.11",
+    "expo-splash-screen": "~57.0.5",
+    "expo-status-bar": "~57.0.1",
+    "expo-symbols": "~57.0.2",
+    "expo-system-ui": "~57.0.2",
+    "expo-web-browser": "~57.0.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.10.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "typescript": "~6.0.3"
+  },
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "private": true
+}

app/scripts/reset-project.js

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It deletes or moves the /src and /scripts directories to /example based on user input and creates a new /src/app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const readline = require("readline");
+
+const root = process.cwd();
+const oldDirs = ["src", "scripts"];
+const exampleDir = "example";
+const newAppDir = "src/app";
+const exampleDirPath = path.join(root, exampleDir);
+
+const indexContent = `import { Text, View, StyleSheet } from "react-native";
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <Text>Edit src/app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack />;
+}
+`;
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const moveDirectories = async (userInput) => {
+  try {
+    if (userInput === "y") {
+      // Create the app-example directory
+      await fs.promises.mkdir(exampleDirPath, { recursive: true });
+      console.log(`📁 /${exampleDir} directory created.`);
+    }
+
+    // Move old directories to new app-example directory or delete them
+    for (const dir of oldDirs) {
+      const oldDirPath = path.join(root, dir);
+      if (fs.existsSync(oldDirPath)) {
+        if (userInput === "y") {
+          const newDirPath = path.join(root, exampleDir, dir);
+          await fs.promises.rename(oldDirPath, newDirPath);
+          console.log(`➡️ /${dir} moved to /${exampleDir}/${dir}.`);
+        } else {
+          await fs.promises.rm(oldDirPath, { recursive: true, force: true });
+          console.log(`❌ /${dir} deleted.`);
+        }
+      } else {
+        console.log(`➡️ /${dir} does not exist, skipping.`);
+      }
+    }
+
+    // Create new /src/app directory
+    const newAppDirPath = path.join(root, newAppDir);
+    await fs.promises.mkdir(newAppDirPath, { recursive: true });
+    console.log("\n📁 New /src/app directory created.");
+
+    // Create index.tsx
+    const indexPath = path.join(newAppDirPath, "index.tsx");
+    await fs.promises.writeFile(indexPath, indexContent);
+    console.log("📄 src/app/index.tsx created.");
+
+    // Create _layout.tsx
+    const layoutPath = path.join(newAppDirPath, "_layout.tsx");
+    await fs.promises.writeFile(layoutPath, layoutContent);
+    console.log("📄 src/app/_layout.tsx created.");
+
+    console.log("\n✅ Project reset complete. Next steps:");
+    console.log(
+      `1. Run \`npx expo start\` to start a development server.\n2. Edit src/app/index.tsx to edit the main screen.\n3. Put all your application code in /src, only screens and layout files should be in /src/app.${
+        userInput === "y"
+          ? `\n4. Delete the /${exampleDir} directory when you're done referencing it.`
+          : ""
+      }`
+    );
+  } catch (error) {
+    console.error(`❌ Error during script execution: ${error.message}`);
+  }
+};
+
+rl.question(
+  "Do you want to move existing files to /example instead of deleting them? (Y/n): ",
+  (answer) => {
+    const userInput = answer.trim().toLowerCase() || "y";
+    if (userInput === "y" || userInput === "n") {
+      moveDirectories(userInput).finally(() => rl.close());
+    } else {
+      console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
+      rl.close();
+    }
+  }
+);

app/src/app/(tabs)/_layout.tsx

@@ -0,0 +1,36 @@
+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>
+  );
+}

app/src/app/(tabs)/index.tsx

@@ -0,0 +1,5 @@
+import TaskListScreen from "../../components/TaskListScreen";
+
+export default function Inbox() {
+  return <TaskListScreen status="inbox" capture emptyHint="Inbox zero. Capture anything above." />;
+}

app/src/app/(tabs)/next.tsx

@@ -0,0 +1,5 @@
+import TaskListScreen from "../../components/TaskListScreen";
+
+export default function Next() {
+  return <TaskListScreen status="next" capture emptyHint="No next actions. Clarify your inbox." />;
+}

app/src/app/(tabs)/projects.tsx

@@ -0,0 +1,95 @@
+import { useFocusEffect, useRouter } from "expo-router";
+import { useCallback, useState } from "react";
+import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { api } from "../../lib/api";
+import { C } from "../../lib/theme";
+import type { Project } from "../../lib/types";
+
+export default function Projects() {
+  const router = useRouter();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    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 });
+    load();
+  };
+
+  return (
+    <View style={s.screen}>
+      <TextInput
+        style={s.capture}
+        placeholder="New project…"
+        placeholderTextColor={C.muted}
+        value={draft}
+        onChangeText={setDraft}
+        onSubmitEditing={add}
+        returnKeyType="done"
+      />
+      {error && <Text style={s.error}>{error}</Text>}
+      <FlatList
+        data={projects}
+        keyExtractor={(p) => p.id}
+        renderItem={({ item }) => (
+          <Pressable style={s.row} onPress={() => router.push(`/project/${item.id}`)}>
+            <View style={{ flex: 1 }}>
+              <Text style={s.title}>{item.name}</Text>
+              <Text style={s.meta}>
+                {item.status}
+                {item.open_tasks != null && `  ·  ${item.open_tasks} open`}
+              </Text>
+            </View>
+            <Text style={{ color: C.muted }}>›</Text>
+          </Pressable>
+        )}
+        ListEmptyComponent={<Text style={s.empty}>No projects yet.</Text>}
+      />
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: C.bg },
+  capture: {
+    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",
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: C.border,
+  },
+  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 },
+});

app/src/app/(tabs)/someday.tsx

@@ -0,0 +1,5 @@
+import TaskListScreen from "../../components/TaskListScreen";
+
+export default function Someday() {
+  return <TaskListScreen status="someday" emptyHint="No someday/maybe items." />;
+}

app/src/app/(tabs)/waiting.tsx

@@ -0,0 +1,5 @@
+import TaskListScreen from "../../components/TaskListScreen";
+
+export default function Waiting() {
+  return <TaskListScreen status="waiting" emptyHint="Not waiting on anyone." />;
+}

app/src/app/_layout.tsx

@@ -0,0 +1,24 @@
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { C } from "../lib/theme";
+
+export default function RootLayout() {
+  return (
+    <>
+      <StatusBar style="light" />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: C.bg },
+          headerTintColor: C.text,
+          headerShadowVisible: false,
+          contentStyle: { backgroundColor: C.bg },
+        }}
+      >
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <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>
+    </>
+  );
+}

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

@@ -0,0 +1,122 @@
+import { Stack, useFocusEffect, useLocalSearchParams, useRouter } from "expo-router";
+import { useCallback, 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 { C } from "../../lib/theme";
+import type { Project, ProjectStatus, Task } 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 [tasks, setTasks] = useState<Task[]>([]);
+  const [draft, setDraft] = useState("");
+
+  const load = useCallback(async () => {
+    const [ps, ts] = await Promise.all([api.projects.list(), api.tasks.list({ project_id: id })]);
+    setProject(ps.find((p) => p.id === id) ?? null);
+    setTasks(ts.filter((t) => t.status !== "done"));
+  }, [id]);
+
+  useFocusEffect(
+    useCallback(() => {
+      load();
+    }, [load]),
+  );
+
+  if (!project) return <Text style={{ color: C.muted, margin: 16 }}>Loading…</Text>;
+
+  const add = async () => {
+    const title = draft.trim();
+    if (!title) return;
+    setDraft("");
+    await api.tasks.create({ 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 (
+    <View style={{ flex: 1, backgroundColor: C.bg }}>
+      <Stack.Screen options={{ title: project.name }} />
+      <View style={{ padding: 16, paddingBottom: 0 }}>
+        <Chips
+          label="Status"
+          options={STATUSES}
+          value={project.status}
+          onChange={async (status) => {
+            setProject({ ...project, status });
+            await api.projects.update(project.id, { status });
+          }}
+        />
+      </View>
+      <TextInput
+        style={s.capture}
+        placeholder="Add next action…"
+        placeholderTextColor={C.muted}
+        value={draft}
+        onChangeText={setDraft}
+        onSubmitEditing={add}
+        returnKeyType="done"
+      />
+      <FlatList
+        data={tasks}
+        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)} />
+            <View style={{ flex: 1 }}>
+              <Text style={s.title}>{item.title}</Text>
+              <Text style={s.meta}>{[item.status, item.context].filter(Boolean).join("  ·  ")}</Text>
+            </View>
+          </Pressable>
+        )}
+        ListEmptyComponent={<Text style={s.empty}>No open tasks in this project.</Text>}
+      />
+      <View style={{ padding: 16 }}>
+        <Button
+          title="Drop project"
+          danger
+          onPress={async () => {
+            await api.projects.drop(project.id);
+            router.back();
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  capture: {
+    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 },
+  title: { color: C.text, fontSize: 16 },
+  meta: { color: C.muted, fontSize: 13, marginTop: 2 },
+  empty: { color: C.muted, textAlign: "center", marginTop: 48 },
+});

app/src/app/settings.tsx

@@ -0,0 +1,47 @@
+import { useRouter } from "expo-router";
+import { useEffect, useState } from "react";
+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 { C } from "../lib/theme";
+
+export default function Settings() {
+  const router = useRouter();
+  const [url, setUrl] = useState(DEFAULT_URL);
+  const [token, setToken] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+
+  useEffect(() => {
+    getConfig().then((c) => {
+      setUrl(c.url);
+      setToken(c.token);
+    });
+  }, []);
+
+  const save = async () => {
+    await setConfig(url, token);
+    try {
+      await api.tasks.list({ status: "inbox" });
+      router.back();
+    } catch (e) {
+      setStatus(`Connection failed: ${e instanceof Error ? e.message : e}`);
+    }
+  };
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={{ padding: 16 }}>
+      <Field label="Server" value={url} onChangeText={setUrl} autoCapitalize="none" autoCorrect={false} />
+      <Field
+        label="API token"
+        value={token}
+        onChangeText={setToken}
+        autoCapitalize="none"
+        autoCorrect={false}
+        secureTextEntry
+      />
+      <Button title="Save & test" onPress={save} />
+      {status && <Text style={{ color: C.danger }}>{status}</Text>}
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,109 @@
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useEffect, useState } from "react";
+import { ScrollView, Text } from "react-native";
+import { Button, Chips, Field } from "../../components/ui";
+import { api } from "../../lib/api";
+import { C } from "../../lib/theme";
+import type { Project, Task, TaskStatus } from "../../lib/types";
+
+const STATUSES: TaskStatus[] = ["inbox", "next", "waiting", "scheduled", "someday", "done"];
+
+export default function TaskDetail() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const router = useRouter();
+  const [task, setTask] = useState<Task | null>(null);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    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>;
+  if (!task) return <Text style={{ color: C.muted, margin: 16 }}>Loading…</Text>;
+
+  const set = (patch: Partial<Task>) => setTask({ ...task, ...patch });
+
+  const save = async () => {
+    try {
+      await api.tasks.update(task.id, {
+        title: task.title,
+        notes: task.notes,
+        status: task.status,
+        project_id: task.project_id,
+        context: task.context,
+        waiting_for: task.waiting_for,
+        due_date: task.due_date,
+        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 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 })} />
+      <Chips label="List" options={STATUSES} value={task.status} onChange={(status) => set({ status })} />
+      <Chips
+        label="Project"
+        options={projectOptions}
+        labels={projectLabels}
+        value={task.project_id ?? "none"}
+        onChange={(v) => set({ project_id: v === "none" ? null : v })}
+      />
+      <Field
+        label="Context"
+        value={task.context ?? ""}
+        onChangeText={(v) => set({ context: v || null })}
+        placeholder="@home, @computer, @errands…"
+        autoCapitalize="none"
+      />
+      {task.status === "waiting" && (
+        <Field
+          label="Waiting for"
+          value={task.waiting_for ?? ""}
+          onChangeText={(v) => set({ waiting_for: v || null })}
+          placeholder="Who or what?"
+        />
+      )}
+      <Field
+        label="Due date"
+        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}
+        onChangeText={(v) => set({ notes: v })}
+        multiline
+        style={{ minHeight: 80, textAlignVertical: "top" }}
+      />
+      <Button title="Save" onPress={save} />
+      <Button title="Delete" onPress={trash} danger />
+    </ScrollView>
+  );
+}

app/src/components/TaskListScreen.tsx

@@ -0,0 +1,160 @@
+import { useFocusEffect, useRouter } from "expo-router";
+import { useCallback, useState } from "react";
+import {
+  FlatList,
+  Pressable,
+  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";
+
+function TaskRow({ task, onToggle }: { task: Task; onToggle: (t: Task) => void }) {
+  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 [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  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 && (
+        <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} />}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            tintColor={C.muted}
+            onRefresh={async () => {
+              setRefreshing(true);
+              await load();
+              setRefreshing(false);
+            }}
+          />
+        }
+        ListEmptyComponent={<Text style={s.empty}>{emptyHint}</Text>}
+        contentContainerStyle={{ paddingBottom: 32 }}
+      />
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: C.bg },
+  capture: {
+    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 },
+});

app/src/components/ui.tsx

@@ -0,0 +1,94 @@
+import { Pressable, StyleSheet, Text, TextInput, View, type TextInputProps } from "react-native";
+import { C } from "../lib/theme";
+
+export function Field({ label, ...props }: TextInputProps & { label: string }) {
+  return (
+    <View style={{ marginBottom: 14 }}>
+      <Text style={u.label}>{label}</Text>
+      <TextInput style={u.input} placeholderTextColor={C.muted} {...props} />
+    </View>
+  );
+}
+
+export function Chips<T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+  labels,
+}: {
+  label: string;
+  options: T[];
+  value: T | null;
+  onChange: (v: T) => void;
+  labels?: Record<string, string>;
+}) {
+  return (
+    <View style={{ marginBottom: 14 }}>
+      <Text style={u.label}>{label}</Text>
+      <View style={u.chipRow}>
+        {options.map((o) => (
+          <Pressable
+            key={o}
+            style={[u.chip, value === o && u.chipActive]}
+            onPress={() => onChange(o)}
+          >
+            <Text style={[u.chipText, value === o && { color: C.text }]}>{labels?.[o] ?? o}</Text>
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+export function Button({
+  title,
+  onPress,
+  danger,
+}: {
+  title: string;
+  onPress: () => void;
+  danger?: boolean;
+}) {
+  return (
+    <Pressable
+      style={[u.button, danger && { backgroundColor: "transparent", borderColor: C.danger, borderWidth: 1 }]}
+      onPress={onPress}
+    >
+      <Text style={[u.buttonText, danger && { color: C.danger }]}>{title}</Text>
+    </Pressable>
+  );
+}
+
+const u = StyleSheet.create({
+  label: { color: C.muted, fontSize: 13, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 },
+  input: {
+    backgroundColor: C.surface,
+    color: C.text,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: C.border,
+    padding: 12,
+    fontSize: 16,
+  },
+  chipRow: { 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 },
+  button: {
+    backgroundColor: C.accent,
+    borderRadius: 10,
+    padding: 14,
+    alignItems: "center",
+    marginTop: 8,
+    marginBottom: 12,
+  },
+  buttonText: { color: C.text, fontSize: 16, fontWeight: "600" },
+});

app/src/lib/api.ts

@@ -0,0 +1,52 @@
+import { getConfig } from "./config";
+import type { Project, Task } from "./types";
+
+class ApiError extends Error {
+  constructor(public status: number, message: string) {
+    super(message);
+  }
+}
+
+async function req<T>(path: string, init?: RequestInit): Promise<T> {
+  const { url, token } = await getConfig();
+  if (!token) throw new ApiError(401, "No API token set — open Settings");
+  const res = await fetch(`${url}${path}`, {
+    ...init,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+      ...init?.headers,
+    },
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({ error: res.statusText }));
+    throw new ApiError(res.status, (body as { error?: string }).error ?? `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+export const api = {
+  tasks: {
+    list: (params: { status?: string; project_id?: string } = {}) => {
+      const q = new URLSearchParams(
+        Object.entries(params).filter(([, v]) => v != null) as [string, string][],
+      ).toString();
+      return req<Task[]>(`/v1/tasks${q ? `?${q}` : ""}`);
+    },
+    get: (id: string) => req<Task>(`/v1/tasks/${id}`),
+    create: (data: Partial<Task> & { title: 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) }),
+    trash: (id: string) => req<Task>(`/v1/tasks/${id}`, { method: "DELETE" }),
+  },
+  projects: {
+    list: () => req<Project[]>("/v1/projects"),
+    create: (data: Partial<Project> & { name: 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) }),
+    drop: (id: string) => req<Project>(`/v1/projects/${id}`, { method: "DELETE" }),
+  },
+  contexts: { list: () => req<string[]>("/v1/contexts") },
+};

app/src/lib/config.ts

@@ -0,0 +1,24 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export const DEFAULT_URL = "https://gtd.rehbock.xyz/api";
+
+let cached: { url: string; token: string } | null = null;
+
+export async function getConfig() {
+  if (!cached) {
+    const [url, token] = await Promise.all([
+      AsyncStorage.getItem("api_url"),
+      AsyncStorage.getItem("api_token"),
+    ]);
+    cached = { url: url || DEFAULT_URL, token: token || "" };
+  }
+  return cached;
+}
+
+export async function setConfig(url: string, token: string) {
+  cached = { url: url.trim().replace(/\/$/, "") || DEFAULT_URL, token: token.trim() };
+  await Promise.all([
+    AsyncStorage.setItem("api_url", cached.url),
+    AsyncStorage.setItem("api_token", cached.token),
+  ]);
+}

app/src/lib/theme.ts

@@ -0,0 +1,11 @@
+export const C = {
+  bg: "#0F1115",
+  surface: "#1A1D24",
+  surface2: "#232733",
+  border: "#2C313D",
+  text: "#E6E8EC",
+  muted: "#8A909C",
+  accent: "#5B8DEF",
+  done: "#4CAF7D",
+  danger: "#E05B5B",
+};

app/src/lib/types.ts

@@ -0,0 +1,29 @@
+export type TaskStatus = "inbox" | "next" | "waiting" | "scheduled" | "someday" | "done" | "trashed";
+export type ProjectStatus = "active" | "someday" | "completed" | "dropped";
+
+export interface Task {
+  id: string;
+  title: string;
+  notes: string;
+  status: TaskStatus;
+  project_id: string | null;
+  context: string | null;
+  waiting_for: string | null;
+  due_date: string | null;
+  defer_date: string | null;
+  completed_at: string | null;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  status: ProjectStatus;
+  notes: string;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+  open_tasks?: number;
+}

app/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@/assets/*": [
+        "./assets/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}