Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6ccd417f2a | |||
| 64967c19a0 | |||
| 8091c7d94d | |||
| e7c092f35d | |||
| d6bd8500e3 | |||
| 0487bc7e4e | |||
| 035a114e58 |
@@ -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"
|
||||
curl -sLo /tmp/ct.zip https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip
|
||||
unzip -q /tmp/ct.zip -d /tmp
|
||||
mv /tmp/cmdline-tools "$HOME/android-sdk/cmdline-tools/latest"
|
||||
yes | "$HOME/android-sdk/cmdline-tools/latest/bin/sdkmanager" --sdk_root="$HOME/android-sdk" --licenses >/dev/null 2>&1 || true
|
||||
"$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
|
||||
if [ ! -d "$HOME/android-sdk/platforms/android-36" ]; then
|
||||
mkdir -p "$HOME/android-sdk/cmdline-tools"
|
||||
curl -sLo /tmp/ct.zip https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip
|
||||
unzip -q /tmp/ct.zip -d /tmp
|
||||
mv /tmp/cmdline-tools "$HOME/android-sdk/cmdline-tools/latest"
|
||||
yes | "$HOME/android-sdk/cmdline-tools/latest/bin/sdkmanager" --sdk_root="$HOME/android-sdk" --licenses >/dev/null 2>&1 || true
|
||||
"$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
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:drawable="@color/splashscreen_background"/>
|
||||
<item>
|
||||
<bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
|
||||
</item>
|
||||
</layer-list>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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"/>
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||
<monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
|
||||
</adaptive-icon>
|
||||
<background android:drawable="@drawable/ic_launcher_background"/>
|
||||
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
|
||||
<monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
|
||||
</adaptive-icon>
|
||||
|
||||
@@ -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"/>
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||
<monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
|
||||
</adaptive-icon>
|
||||
<background android:drawable="@drawable/ic_launcher_background"/>
|
||||
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
|
||||
<monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
|
||||
</adaptive-icon>
|
||||
|
||||
@@ -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
|
||||
|
||||
36
app/package-lock.json
generated
36
app/package-lock.json
generated
@@ -10,12 +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",
|
||||
@@ -27,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",
|
||||
@@ -2192,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",
|
||||
@@ -3771,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",
|
||||
@@ -6434,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",
|
||||
|
||||
@@ -5,12 +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",
|
||||
@@ -22,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",
|
||||
|
||||
@@ -1,22 +1,36 @@
|
||||
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 { hydrate, sync } from "../lib/store";
|
||||
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 sub = AppState.addEventListener("change", (s) => {
|
||||
const appState = AppState.addEventListener("change", (s) => {
|
||||
if (s === "active") void sync();
|
||||
});
|
||||
return () => sub.remove();
|
||||
// Drain the queue the moment connectivity returns (wifi/cellular).
|
||||
const net = NetInfo.addEventListener((s) => {
|
||||
if (s.isConnected) void sync();
|
||||
});
|
||||
// Slow heartbeat as a belt-and-braces retry while changes are queued.
|
||||
const heartbeat = setInterval(() => {
|
||||
if (getState().pending > 0 || getState().offline) void sync();
|
||||
}, 45_000);
|
||||
return () => {
|
||||
appState.remove();
|
||||
net();
|
||||
clearInterval(heartbeat);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<StatusBar style="light" />
|
||||
<Stack
|
||||
screenOptions={{
|
||||
@@ -38,11 +52,13 @@ export default function RootLayout() {
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
139
app/src/app/add.tsx
Normal file
139
app/src/app/add.tsx
Normal file
@@ -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" },
|
||||
});
|
||||
@@ -1,127 +1,113 @@
|
||||
import { useRouter } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
|
||||
import { activeProjects, createTask, tasksByStatus } from "../lib/store";
|
||||
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 Q = {
|
||||
next: { title: "Next up", color: "#3DBF77", bg: "#15301F", border: "#1E4D33" },
|
||||
waiting: { title: "Waiting for", color: "#E0A93E", bg: "#33270F", border: "#544019" },
|
||||
someday: { title: "Someday", color: "#9D8FE8", bg: "#221E38", border: "#38315C" },
|
||||
projects: { title: "Projects", color: "#5B9DE8", bg: "#152538", border: "#1F3D5C" },
|
||||
};
|
||||
|
||||
function Quadrant({
|
||||
kind,
|
||||
count,
|
||||
preview,
|
||||
onPress,
|
||||
}: {
|
||||
kind: keyof typeof Q;
|
||||
count: number;
|
||||
preview: string[];
|
||||
onPress: () => void;
|
||||
}) {
|
||||
const q = Q[kind];
|
||||
return (
|
||||
<Pressable style={[s.quad, { backgroundColor: q.bg, borderColor: q.border }]} onPress={onPress}>
|
||||
<View style={s.quadHead}>
|
||||
<Text style={[s.quadTitle, { color: q.color }]}>{q.title}</Text>
|
||||
<Text style={[s.quadCount, { color: q.color }]}>{count}</Text>
|
||||
</View>
|
||||
{preview.map((p, i) => (
|
||||
<Text key={i} style={s.quadItem} numberOfLines={1}>
|
||||
{p}
|
||||
</Text>
|
||||
))}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
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 [draft, setDraft] = useState("");
|
||||
|
||||
const capture = () => {
|
||||
const title = draft.trim();
|
||||
if (!title) return;
|
||||
setDraft("");
|
||||
createTask({ title });
|
||||
};
|
||||
|
||||
const inbox = tasksByStatus(store, "inbox");
|
||||
const next = tasksByStatus(store, "next");
|
||||
const waiting = tasksByStatus(store, "waiting");
|
||||
const someday = tasksByStatus(store, "someday");
|
||||
const projects = activeProjects(store).filter((p) => p.status === "active");
|
||||
const { overdue } = todayTasks(store);
|
||||
|
||||
return (
|
||||
<View style={s.screen}>
|
||||
<TextInput
|
||||
style={s.capture}
|
||||
placeholder="Capture anything…"
|
||||
placeholderTextColor={C.muted}
|
||||
value={draft}
|
||||
onChangeText={setDraft}
|
||||
onSubmitEditing={capture}
|
||||
submitBehavior="submit"
|
||||
returnKeyType="done"
|
||||
/>
|
||||
<Pressable style={s.inboxPill} onPress={() => router.push("/list/inbox")}>
|
||||
<Text style={s.inboxText}>📥 Inbox</Text>
|
||||
<View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
|
||||
{store.pending > 0 && <Text style={s.pendingDot}>⇅ {store.pending}</Text>}
|
||||
<Text style={[s.inboxText, { color: inbox.length ? C.text : C.muted }]}>{inbox.length}</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
{store.syncError && <Text style={s.error}>{store.syncError}</Text>}
|
||||
<View style={s.grid}>
|
||||
<View style={s.gridRow}>
|
||||
<Quadrant kind="next" count={next.length} preview={next.slice(0, 3).map((t) => t.title)} onPress={() => router.push("/list/next")} />
|
||||
<Quadrant kind="waiting" count={waiting.length} preview={waiting.slice(0, 3).map((t) => t.title)} onPress={() => router.push("/list/waiting")} />
|
||||
</View>
|
||||
<View style={s.gridRow}>
|
||||
<Quadrant kind="someday" count={someday.length} preview={someday.slice(0, 3).map((t) => t.title)} onPress={() => router.push("/list/someday")} />
|
||||
<Quadrant kind="projects" count={projects.length} preview={projects.slice(0, 3).map((p) => p.name)} onPress={() => router.push("/projects")} />
|
||||
</View>
|
||||
<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, padding: 12 },
|
||||
capture: {
|
||||
padding: 14,
|
||||
borderRadius: 12,
|
||||
backgroundColor: C.surface,
|
||||
color: C.text,
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: C.border,
|
||||
},
|
||||
inboxPill: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginTop: 10,
|
||||
paddingVertical: 12,
|
||||
screen: { flex: 1, backgroundColor: C.bg },
|
||||
sectionTitle: {
|
||||
color: C.muted,
|
||||
fontSize: 13,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: 1,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 12,
|
||||
backgroundColor: C.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: C.border,
|
||||
paddingTop: 18,
|
||||
paddingBottom: 6,
|
||||
},
|
||||
inboxText: { color: C.text, fontSize: 16, fontWeight: "600" },
|
||||
pendingDot: { color: C.muted, fontSize: 13 },
|
||||
grid: { flex: 1, marginTop: 10, gap: 10 },
|
||||
gridRow: { flex: 1, flexDirection: "row", gap: 10 },
|
||||
quad: { flex: 1, borderRadius: 16, borderWidth: 1, padding: 14 },
|
||||
quadHead: { flexDirection: "row", justifyContent: "space-between", marginBottom: 8 },
|
||||
quadTitle: { fontSize: 17, fontWeight: "700" },
|
||||
quadCount: { fontSize: 17, fontWeight: "700" },
|
||||
quadItem: { color: C.muted, fontSize: 13, marginBottom: 4 },
|
||||
error: { color: C.danger, marginTop: 8 },
|
||||
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" },
|
||||
});
|
||||
|
||||
@@ -3,7 +3,6 @@ import TaskListScreen from "../../components/TaskListScreen";
|
||||
import type { TaskStatus } from "../../lib/types";
|
||||
|
||||
const TITLES: Record<string, string> = {
|
||||
inbox: "Inbox",
|
||||
next: "Next up",
|
||||
waiting: "Waiting for",
|
||||
scheduled: "Scheduled",
|
||||
@@ -12,8 +11,7 @@ const TITLES: Record<string, string> = {
|
||||
};
|
||||
|
||||
const HINTS: Record<string, string> = {
|
||||
inbox: "Inbox zero. Capture from the home screen.",
|
||||
next: "No next actions. Clarify your inbox.",
|
||||
next: "Nothing next. Tap ＋ on the home screen.",
|
||||
waiting: "Not waiting on anyone.",
|
||||
scheduled: "Nothing scheduled.",
|
||||
someday: "No someday/maybe items.",
|
||||
@@ -22,11 +20,11 @@ const HINTS: Record<string, string> = {
|
||||
|
||||
export default function ListByStatus() {
|
||||
const { status } = useLocalSearchParams<{ status: string }>();
|
||||
const st = (status in TITLES ? status : "inbox") as TaskStatus;
|
||||
const st = (status in TITLES ? status : "next") as TaskStatus;
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: TITLES[st] }} />
|
||||
<TaskListScreen status={st} capture={st === "inbox" || st === "next"} emptyHint={HINTS[st]} />
|
||||
<TaskListScreen status={st} emptyHint={HINTS[st]} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
import { useLocalSearchParams, useRouter } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { ScrollView, Text } from "react-native";
|
||||
import DateField from "../../components/DateField";
|
||||
import PriorityChips from "../../components/PriorityChips";
|
||||
import { Button, Chips, Field } from "../../components/ui";
|
||||
import { activeProjects, trashTask, updateTask } from "../../lib/store";
|
||||
import { C } from "../../lib/theme";
|
||||
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 }>();
|
||||
@@ -31,6 +33,8 @@ export default function TaskDetail() {
|
||||
waiting_for: draft.waiting_for,
|
||||
due_date: draft.due_date,
|
||||
defer_date: draft.defer_date,
|
||||
priority: draft.priority,
|
||||
estimate_min: draft.estimate_min,
|
||||
});
|
||||
router.back();
|
||||
};
|
||||
@@ -42,6 +46,14 @@ export default function TaskDetail() {
|
||||
return (
|
||||
<ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={{ padding: 16 }}>
|
||||
<Field label="Title" value={draft.title} onChangeText={(v) => set({ title: v })} />
|
||||
<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"
|
||||
@@ -65,20 +77,8 @@ export default function TaskDetail() {
|
||||
placeholder="Who or what?"
|
||||
/>
|
||||
)}
|
||||
<Field
|
||||
label="Due date"
|
||||
value={draft.due_date ?? ""}
|
||||
onChangeText={(v) => set({ due_date: v || null })}
|
||||
placeholder="YYYY-MM-DD"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<Field
|
||||
label="Defer until"
|
||||
value={draft.defer_date ?? ""}
|
||||
onChangeText={(v) => set({ defer_date: v || null })}
|
||||
placeholder="YYYY-MM-DD"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<DateField label="Due date" value={draft.due_date} onChange={(v) => set({ due_date: v })} clearable />
|
||||
<DateField label="Defer until" value={draft.defer_date} onChange={(v) => set({ defer_date: v })} clearable />
|
||||
<Field
|
||||
label="Notes"
|
||||
value={draft.notes}
|
||||
|
||||
34
app/src/app/today.tsx
Normal file
34
app/src/app/today.tsx
Normal file
@@ -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 },
|
||||
});
|
||||
228
app/src/components/DateField.tsx
Normal file
228
app/src/components/DateField.tsx
Normal file
@@ -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 },
|
||||
});
|
||||
56
app/src/components/PriorityChips.tsx
Normal file
56
app/src/components/PriorityChips.tsx
Normal file
@@ -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 },
|
||||
});
|
||||
@@ -1,82 +1,44 @@
|
||||
import { useRouter } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
FlatList,
|
||||
Pressable,
|
||||
RefreshControl,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { createTask, sync, tasksByStatus, updateTask } from "../lib/store";
|
||||
import { RefreshControl, StyleSheet, Text, View } from "react-native";
|
||||
import DraggableFlatList, { ScaleDecorator } from "react-native-draggable-flatlist";
|
||||
import { haptic } from "../lib/haptics";
|
||||
import { reorderTask, sync, tasksByStatus } from "../lib/store";
|
||||
import { C } from "../lib/theme";
|
||||
import { useStore } from "../lib/useStore";
|
||||
import type { Task, TaskStatus } from "../lib/types";
|
||||
|
||||
function TaskRow({ task, listStatus }: { task: Task; listStatus: TaskStatus }) {
|
||||
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={() => updateTask(task.id, { status: task.status === "done" ? listStatus : "done" })}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
import type { TaskStatus } from "../lib/types";
|
||||
import TaskRow from "./TaskRow";
|
||||
|
||||
export default function TaskListScreen({
|
||||
status,
|
||||
capture,
|
||||
emptyHint,
|
||||
}: {
|
||||
status: TaskStatus;
|
||||
capture?: boolean;
|
||||
emptyHint: string;
|
||||
}) {
|
||||
const store = useStore();
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [draft, setDraft] = useState("");
|
||||
const tasks = tasksByStatus(store, status);
|
||||
|
||||
const add = () => {
|
||||
const title = draft.trim();
|
||||
if (!title) return;
|
||||
setDraft("");
|
||||
createTask({ title, status });
|
||||
};
|
||||
|
||||
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"
|
||||
/>
|
||||
)}
|
||||
<FlatList
|
||||
<DraggableFlatList
|
||||
data={tasks}
|
||||
keyExtractor={(t) => t.id}
|
||||
renderItem={({ item }) => <TaskRow task={item} listStatus={status} />}
|
||||
activationDistance={12}
|
||||
onDragBegin={() => haptic.pickup()}
|
||||
onDragEnd={({ data, from, to }) => {
|
||||
if (from !== to) {
|
||||
haptic.success();
|
||||
reorderTask(data[to].id, status, to);
|
||||
}
|
||||
}}
|
||||
renderItem={({ item, drag, isActive }) => (
|
||||
<ScaleDecorator activeScale={1.03}>
|
||||
<View style={isActive && s.activeRow}>
|
||||
<TaskRow task={item} uncheckTo={status} onLongPress={drag} />
|
||||
</View>
|
||||
</ScaleDecorator>
|
||||
)}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
@@ -97,37 +59,6 @@ export default function TaskListScreen({
|
||||
|
||||
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 },
|
||||
activeRow: { backgroundColor: C.surface2, borderRadius: 12 },
|
||||
empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
|
||||
});
|
||||
|
||||
83
app/src/components/TaskRow.tsx
Normal file
83
app/src/components/TaskRow.tsx
Normal file
@@ -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 },
|
||||
});
|
||||
24
app/src/lib/haptics.ts
Normal file
24
app/src/lib/haptics.ts
Normal file
@@ -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();
|
||||
},
|
||||
};
|
||||
24
app/src/lib/priority.ts
Normal file
24
app/src/lib/priority.ts
Normal file
@@ -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`;
|
||||
}
|
||||
92
app/src/lib/quickadd.ts
Normal file
92
app/src/lib/quickadd.ts
Normal file
@@ -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;
|
||||
}
|
||||
@@ -18,6 +18,8 @@ export interface State {
|
||||
hydrated: boolean;
|
||||
syncing: boolean;
|
||||
pending: number;
|
||||
/** True when the last sync failed for network reasons — expected offline. */
|
||||
offline: boolean;
|
||||
syncError: string | null;
|
||||
}
|
||||
|
||||
@@ -34,6 +36,7 @@ let state: State = {
|
||||
hydrated: false,
|
||||
syncing: false,
|
||||
pending: 0,
|
||||
offline: false,
|
||||
syncError: null,
|
||||
};
|
||||
let queue: Op[] = [];
|
||||
@@ -78,7 +81,7 @@ function now() {
|
||||
|
||||
// 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", "sort_order"] as const;
|
||||
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> {
|
||||
@@ -111,8 +114,13 @@ export function createTask(data: Partial<Task> & { title: string }): Task {
|
||||
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,
|
||||
sort_order: data.sort_order ?? 0,
|
||||
// New tasks land at the top of their list.
|
||||
sort_order:
|
||||
data.sort_order ??
|
||||
Math.min(0, ...state.tasks.filter((t) => t.status === (data.status ?? "next")).map((t) => t.sort_order)) - 1,
|
||||
created_at: now(),
|
||||
updated_at: now(),
|
||||
};
|
||||
@@ -188,9 +196,13 @@ export async function sync() {
|
||||
setState({});
|
||||
}
|
||||
await pull();
|
||||
setState({ syncError: null });
|
||||
setState({ syncError: null, offline: false });
|
||||
} catch (e) {
|
||||
setState({ syncError: e instanceof Error ? e.message : String(e) });
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
// fetch() network failures (airplane mode, no wifi, DNS) are the expected
|
||||
// offline case, not an error — the queue simply waits for connectivity.
|
||||
const isNetwork = e instanceof TypeError || /network request failed|unable to resolve|fetch failed|timeout/i.test(msg);
|
||||
setState(isNetwork ? { offline: true, syncError: null } : { syncError: msg });
|
||||
} finally {
|
||||
syncRunning = false;
|
||||
setState({ syncing: false });
|
||||
@@ -237,10 +249,49 @@ async function pull() {
|
||||
|
||||
// ---- 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((a, b) => a.sort_order - b.sort_order || b.created_at.localeCompare(a.created_at));
|
||||
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[] {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -7,7 +7,7 @@ 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"];
|
||||
@@ -28,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;
|
||||
}
|
||||
|
||||
@@ -73,12 +76,13 @@ async function handle(req: Request): Promise<Response> {
|
||||
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 (id, title, notes, status, project_id, context, waiting_for, due_date, defer_date, sort_order)
|
||||
values (coalesce($1::uuid, gen_random_uuid()), $2, $3, $4, $5, $6, $7, $8, $9, $10)
|
||||
`insert into tasks (id, title, notes, status, project_id, context, waiting_for, due_date, defer_date, priority, estimate_min, sort_order)
|
||||
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}`,
|
||||
[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,
|
||||
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);
|
||||
@@ -99,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]);
|
||||
}
|
||||
|
||||
@@ -164,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);
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -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(),
|
||||
|
||||
Reference in New Issue
Block a user