Minimal home: top-3 next actions only, bottom icon menu, FAB-only capture, inbox abolished (priority+due required at creation)

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

app/src/app/add.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "expo-router";
 import { useState } from "react";
 import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import PriorityChips from "../components/PriorityChips";
-import { Button, Chips, Field } from "../components/ui";
+import { Chips, Field } from "../components/ui";
 import { haptic } from "../lib/haptics";
 import { activeProjects, createTask } from "../lib/store";
 import { C } from "../lib/theme";
@@ -10,7 +10,6 @@ import { useStore } from "../lib/useStore";
 import type { Task, TaskStatus } from "../lib/types";
 
 const BOXES: { key: TaskStatus; label: string }[] = [
-  { key: "inbox", label: "Inbox" },
   { key: "next", label: "Next up" },
   { key: "waiting", label: "Waiting" },
   { key: "someday", label: "Someday" },
@@ -29,25 +28,29 @@ export default function AddTask() {
   const store = useStore();
   const [title, setTitle] = useState("");
   const [notes, setNotes] = useState("");
-  const [priority, setPriority] = useState<Task["priority"]>(4);
+  const [priority, setPriority] = useState<Task["priority"] | null>(null);
   const [estimate, setEstimate] = useState<number | null>(null);
   const [due, setDue] = useState("");
-  const [box, setBox] = useState<TaskStatus>("inbox");
+  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 (!title.trim()) return;
+    if (!ready || priority === null) return;
     createTask({
       title: title.trim(),
       notes,
       status: box,
       priority,
       estimate_min: estimate,
-      due_date: due.trim() || null,
+      due_date: due.trim(),
       project_id: projectId,
     });
     haptic.success();
@@ -66,6 +69,28 @@ export default function AddTask() {
         style={{ minHeight: 64, textAlignVertical: "top" }}
       />
       <PriorityChips value={priority} onChange={setPriority} />
+      <View style={{ marginBottom: 2 }}>
+        <Text style={s.label}>Due date</Text>
+        <View style={s.rowWrap}>
+          {[
+            { label: "Today", v: isoToday() },
+            { label: "Tomorrow", v: isoToday(1) },
+            { label: "Next week", v: isoToday(7) },
+          ].map(({ label, v }) => (
+            <Pressable
+              key={label}
+              style={[s.chip, due === v && s.chipActive]}
+              onPress={() => {
+                haptic.select();
+                setDue(due === v ? "" : v);
+              }}
+            >
+              <Text style={[s.chipText, due === v && { color: C.text }]}>{label}</Text>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+      <Field label="" value={due} onChangeText={setDue} placeholder="YYYY-MM-DD" autoCapitalize="none" />
       <View style={{ marginBottom: 14 }}>
         <Text style={s.label}>Estimated time</Text>
         <View style={s.rowWrap}>
@@ -88,26 +113,6 @@ export default function AddTask() {
           })}
         </View>
       </View>
-      <View style={{ marginBottom: 2 }}>
-        <View style={s.rowWrap}>
-          {[
-            { label: "Due today", v: isoToday() },
-            { label: "Tomorrow", v: isoToday(1) },
-          ].map(({ label, v }) => (
-            <Pressable
-              key={label}
-              style={[s.chip, due === v && s.chipActive]}
-              onPress={() => {
-                haptic.select();
-                setDue(due === v ? "" : v);
-              }}
-            >
-              <Text style={[s.chipText, due === v && { color: C.text }]}>{label}</Text>
-            </Pressable>
-          ))}
-        </View>
-      </View>
-      <Field label="Due date" value={due} onChangeText={setDue} placeholder="YYYY-MM-DD" autoCapitalize="none" />
       <Chips
         label="Box"
         options={BOXES.map((b) => b.key)}
@@ -125,7 +130,11 @@ export default function AddTask() {
         value={projectId ?? "none"}
         onChange={(v) => setProjectId(v === "none" ? null : v)}
       />
-      <Button title="Add task" onPress={save} />
+      <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>
   );
 }
@@ -143,4 +152,14 @@ const s = StyleSheet.create({
   },
   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" },
 });

app/src/app/index.tsx

@@ -1,226 +1,60 @@
 import { useRouter } from "expo-router";
-import { useRef, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
-import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import TaskRow from "../components/TaskRow";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-} from "react-native-reanimated";
 import { haptic } from "../lib/haptics";
-import { PRIORITY_COLOR } from "../lib/priority";
+import { tasksByStatus, todayTasks } from "../lib/store";
-import { parseQuickAdd } from "../lib/quickadd";
-import { activeProjects, createTask, tasksByStatus, todayTasks, updateTask } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
-import type { Task, TaskStatus } from "../lib/types";
 
-const Q = {
+const MENU = [
-  next: { title: "Next up", color: "#3DBF77", bg: "#15301F", border: "#1E4D33" },
+  { icon: "📅", label: "Today", href: "/today" },
-  waiting: { title: "Waiting for", color: "#E0A93E", bg: "#33270F", border: "#544019" },
+  { icon: "▶️", label: "Next", href: "/list/next" },
-  someday: { title: "Someday", color: "#9D8FE8", bg: "#221E38", border: "#38315C" },
+  { icon: "⏳", label: "Waiting", href: "/list/waiting" },
-  projects: { title: "Projects", color: "#5B9DE8", bg: "#152538", border: "#1F3D5C" },
+  { icon: "💭", label: "Someday", href: "/list/someday" },
-};
+  { icon: "📁", label: "Projects", href: "/projects" },
-
+] as const;
-type DropZone = Extract<TaskStatus, "inbox" | "next" | "waiting" | "someday">;
-type Rect = { x: number; y: number; w: number; h: number };
-type ZoneRects = Partial<Record<DropZone, Rect>>;
-
-const SPRING = { damping: 18, stiffness: 260, mass: 0.6 };
-
-/** Long-press-drag wrapper: spring transforms, haptics, window-coord drop. */
-function Draggable({
-  task,
-  findZone,
-  children,
-}: {
-  task: Task;
-  findZone: (x: number, y: number) => DropZone | null;
-  children: React.ReactNode;
-}) {
-  const tx = useSharedValue(0);
-  const ty = useSharedValue(0);
-  const active = useSharedValue(false);
-
-  const drop = (x: number, y: number) => {
-    const zone = findZone(x, y);
-    if (zone && zone !== task.status) {
-      haptic.success();
-      updateTask(task.id, { status: zone });
-    }
-  };
-
-  const pan = Gesture.Pan()
-    .activateAfterLongPress(180)
-    .onStart(() => {
-      active.value = true;
-      runOnJS(haptic.pickup)();
-    })
-    .onUpdate((e) => {
-      tx.value = e.translationX;
-      ty.value = e.translationY;
-    })
-    .onEnd((e) => {
-      runOnJS(drop)(e.absoluteX, e.absoluteY);
-    })
-    .onFinalize(() => {
-      active.value = false;
-      tx.value = withSpring(0, SPRING);
-      ty.value = withSpring(0, SPRING);
-    });
-
-  const style = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: tx.value },
-      { translateY: ty.value },
-      { scale: withTiming(active.value ? 1.06 : 1, { duration: 120 }) },
-    ],
-    zIndex: active.value ? 100 : 0,
-    elevation: active.value ? 8 : 0,
-    opacity: withTiming(active.value ? 0.92 : 1, { duration: 120 }),
-  }));
-
-  return (
-    <GestureDetector gesture={pan}>
-      <Animated.View style={style}>{children}</Animated.View>
-    </GestureDetector>
-  );
-}
-
-function DragRow({ task, findZone }: { task: Task; findZone: (x: number, y: number) => DropZone | null }) {
-  const router = useRouter();
-  return (
-    <Draggable task={task} findZone={findZone}>
-      <Pressable style={s.dragRow} onPress={() => router.push(`/task/${task.id}`)}>
-        <View style={[s.priorityDot, { backgroundColor: PRIORITY_COLOR[task.priority] }]} />
-        <Text style={s.dragRowText} numberOfLines={1}>
-          {task.title}
-        </Text>
-      </Pressable>
-    </Draggable>
-  );
-}
 
 export default function Home() {
   const router = useRouter();
   const store = useStore();
-  const [draft, setDraft] = useState("");
-  const zones = useRef<ZoneRects>({});
-  const zoneRefs = useRef<Partial<Record<DropZone, View | null>>>({});
-
-  const measureZone = (zone: DropZone) => () => {
-    zoneRefs.current[zone]?.measureInWindow((x, y, w, h) => {
-      zones.current[zone] = { x, y, w, h };
-    });
-  };
-
-  const findZone = (x: number, y: number): DropZone | null => {
-    for (const [zone, r] of Object.entries(zones.current) as [DropZone, Rect][]) {
-      if (x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h) return zone;
-    }
-    return null;
-  };
-
-  const capture = () => {
-    if (!draft.trim()) return;
-    const parsed = parseQuickAdd(draft, store.projects);
-    if (!parsed.title) return;
-    setDraft("");
-    haptic.tap();
-    createTask({ ...parsed, status: "inbox" });
-  };
-
-  const inbox = tasksByStatus(store, "inbox");
   const next = tasksByStatus(store, "next");
-  const waiting = tasksByStatus(store, "waiting");
+  const { overdue } = todayTasks(store);
-  const someday = tasksByStatus(store, "someday");
-  const projects = activeProjects(store).filter((p) => p.status === "active");
-  const { overdue, today } = todayTasks(store);
-
-  const quadrant = (zone: Exclude<DropZone, "inbox">, tasks: Task[], onOpen: () => void) => {
-    const q = Q[zone];
-    return (
-      <View
-        ref={(r) => {
-          zoneRefs.current[zone] = r;
-        }}
-        onLayout={measureZone(zone)}
-        style={[s.quad, { backgroundColor: q.bg, borderColor: q.border }]}
-      >
-        <Pressable style={s.quadHead} onPress={onOpen}>
-          <Text style={[s.quadTitle, { color: q.color }]}>{q.title}</Text>
-          <Text style={[s.quadCount, { color: q.color }]}>{tasks.length}</Text>
-        </Pressable>
-        {tasks.slice(0, 3).map((t) => (
-          <DragRow key={t.id} task={t} findZone={findZone} />
-        ))}
-      </View>
-    );
-  };
 
   return (
     <View style={s.screen}>
-      <TextInput
+      <View style={{ flex: 1 }}>
-        style={s.capture}
+        <Text style={s.sectionTitle}>Next up</Text>
-        placeholder="Capture…  (tomorrow p1 @home #project ~30m)"
+        {next.slice(0, 3).map((t) => (
-        placeholderTextColor={C.muted}
+          <TaskRow key={t.id} task={t} />
-        value={draft}
+        ))}
-        onChangeText={setDraft}
+        {next.length === 0 && <Text style={s.empty}>Nothing next. Tap ＋ to add.</Text>}
-        onSubmitEditing={capture}
+        {next.length > 3 && (
-        submitBehavior="submit"
+          <Pressable onPress={() => router.push("/list/next")}>
-        returnKeyType="done"
+            <Text style={s.viewAll}>all next actions ({next.length}) →</Text>
-      />
-      <View style={s.pillRow}>
-        <View
-          ref={(r) => {
-            zoneRefs.current.inbox = r;
-          }}
-          onLayout={measureZone("inbox")}
-          style={s.pill}
-        >
-          <Pressable style={s.pillPress} onPress={() => router.push("/list/inbox")}>
-            <Text style={s.pillText}>📥 Inbox</Text>
-            <Text style={[s.pillText, { color: inbox.length ? C.text : C.muted }]}>{inbox.length}</Text>
           </Pressable>
-        </View>
+        )}
-        <View style={s.pill}>
+        {overdue.length > 0 && (
-          <Pressable style={s.pillPress} onPress={() => router.push("/today")}>
+          <Pressable onPress={() => router.push("/today")}>
-            <Text style={s.pillText}>📅 Today</Text>
+            <Text style={s.overdue}>{overdue.length} overdue →</Text>
-            <Text style={[s.pillText, { color: overdue.length ? C.danger : today.length ? C.text : C.muted }]}>
-              {overdue.length ? `${overdue.length}!` : today.length}
-            </Text>
           </Pressable>
-        </View>
+        )}
+        {store.syncError && <Text style={s.error}>{store.syncError}</Text>}
       </View>
-      {inbox.slice(0, 3).map((t) => (
+      <View style={s.menu}>
-        <DragRow key={t.id} task={t} findZone={findZone} />
+        {MENU.map((m) => (
-      ))}
+          <Pressable key={m.label} style={s.menuItem} onPress={() => router.push(m.href)}>
-      {store.syncError && <Text style={s.error}>{store.syncError}</Text>}
+            <Text style={s.menuIcon}>{m.icon}</Text>
-      <View style={s.grid}>
+            <Text style={s.menuLabel}>{m.label}</Text>
-        <View style={s.gridRow}>
+          </Pressable>
-          {quadrant("next", next, () => router.push("/list/next"))}
+        ))}
-          {quadrant("waiting", waiting, () => router.push("/list/waiting"))}
-        </View>
-        <View style={s.gridRow}>
-          {quadrant("someday", someday, () => router.push("/list/someday"))}
-          <View style={[s.quad, { backgroundColor: Q.projects.bg, borderColor: Q.projects.border }]}>
-            <Pressable style={{ flex: 1 }} onPress={() => router.push("/projects")}>
-              <View style={s.quadHead}>
-                <Text style={[s.quadTitle, { color: Q.projects.color }]}>{Q.projects.title}</Text>
-                <Text style={[s.quadCount, { color: Q.projects.color }]}>{projects.length}</Text>
-              </View>
-              {projects.slice(0, 3).map((p) => (
-                <Text key={p.id} style={s.quadItem} numberOfLines={1}>
-                  {p.name}
-                </Text>
-              ))}
-            </Pressable>
-          </View>
-        </View>
       </View>
-      <Pressable style={s.fab} onPress={() => { haptic.tap(); router.push("/add"); }}>
+      <Pressable
+        style={s.fab}
+        onPress={() => {
+          haptic.tap();
+          router.push("/add");
+        }}
+      >
         <Text style={s.fabText}>＋</Text>
       </Pressable>
     </View>
@@ -228,58 +62,35 @@ export default function Home() {
 }
 
 const s = StyleSheet.create({
-  screen: { flex: 1, backgroundColor: C.bg, padding: 12 },
+  screen: { flex: 1, backgroundColor: C.bg },
-  capture: {
+  sectionTitle: {
-    padding: 14,
+    color: C.muted,
-    borderRadius: 12,
+    fontSize: 13,
-    backgroundColor: C.surface,
+    textTransform: "uppercase",
-    color: C.text,
+    letterSpacing: 1,
-    fontSize: 16,
+    paddingHorizontal: 16,
-    borderWidth: 1,
+    paddingTop: 18,
-    borderColor: C.border,
+    paddingBottom: 6,
   },
-  pillRow: { flexDirection: "row", gap: 10, marginTop: 10 },
+  empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
-  pill: {
+  viewAll: { color: C.muted, fontSize: 14, padding: 16 },
-    flex: 1,
+  overdue: { color: C.danger, fontSize: 14, paddingHorizontal: 16, paddingBottom: 8 },
-    borderRadius: 12,
+  error: { color: C.danger, paddingHorizontal: 16, paddingTop: 8 },
-    backgroundColor: C.surface,
+  menu: {
-    borderWidth: 1,
-    borderColor: C.border,
-  },
-  pillPress: {
     flexDirection: "row",
-    justifyContent: "space-between",
+    borderTopWidth: StyleSheet.hairlineWidth,
-    alignItems: "center",
+    borderTopColor: C.border,
-    paddingVertical: 12,
+    paddingTop: 10,
-    paddingHorizontal: 14,
+    paddingBottom: 18,
+    backgroundColor: C.bg,
   },
-  pillText: { color: C.text, fontSize: 15, fontWeight: "600" },
+  menuItem: { flex: 1, alignItems: "center", gap: 3 },
-  dragRow: {
+  menuIcon: { fontSize: 20 },
-    flexDirection: "row",
+  menuLabel: { color: C.muted, fontSize: 11 },
-    alignItems: "center",
-    gap: 8,
-    marginTop: 6,
-    paddingVertical: 9,
-    paddingHorizontal: 12,
-    borderRadius: 10,
-    backgroundColor: C.surface2,
-    borderWidth: 1,
-    borderColor: C.border,
-  },
-  dragRowText: { color: C.text, fontSize: 14, flex: 1 },
-  priorityDot: { width: 8, height: 8, borderRadius: 4 },
-  grid: { flex: 1, marginTop: 10, gap: 10 },
-  gridRow: { flex: 1, flexDirection: "row", gap: 10 },
-  quad: { flex: 1, borderRadius: 16, borderWidth: 1, padding: 12, overflow: "visible" },
-  quadHead: { flexDirection: "row", justifyContent: "space-between", marginBottom: 4 },
-  quadTitle: { fontSize: 16, fontWeight: "700" },
-  quadCount: { fontSize: 16, fontWeight: "700" },
-  quadItem: { color: C.muted, fontSize: 13, marginBottom: 4 },
-  error: { color: C.danger, marginTop: 8 },
   fab: {
     position: "absolute",
     right: 20,
-    bottom: 24,
+    bottom: 92,
     width: 58,
     height: 58,
     borderRadius: 29,

app/src/app/list/[status].tsx

@@ -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: "Nothing next. Tap ＋ on the home screen.",
-  next: "No next actions. Clarify your inbox.",
   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]} />
     </>
   );
 }

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

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

app/src/components/PriorityChips.tsx

@@ -8,7 +8,7 @@ export default function PriorityChips({
   value,
   onChange,
 }: {
-  value: Task["priority"];
+  value: Task["priority"] | null;
   onChange: (p: Task["priority"]) => void;
 }) {
   return (

app/src/components/TaskListScreen.tsx

@@ -1,8 +1,6 @@
 import { useState } from "react";
-import { FlatList, RefreshControl, StyleSheet, Text, TextInput, View } from "react-native";
+import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
-import { haptic } from "../lib/haptics";
+import { sync, tasksByStatus } from "../lib/store";
-import { parseQuickAdd } from "../lib/quickadd";
-import { createTask, sync, tasksByStatus } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 import type { TaskStatus } from "../lib/types";
@@ -10,41 +8,17 @@ 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 = () => {
-    if (!draft.trim()) return;
-    const parsed = parseQuickAdd(draft, store.projects);
-    if (!parsed.title) return;
-    setDraft("");
-    haptic.tap();
-    createTask({ ...parsed, 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
         data={tasks}
         keyExtractor={(t) => t.id}
@@ -69,16 +43,5 @@ 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,
-  },
   empty: { color: C.muted, textAlign: "center", marginTop: 48, fontSize: 15 },
 });