Drag-to-reorder lists: manual sort_order is canonical, fractional re-slotting, haptic pickup/drop

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

app/package-lock.json

@@ -28,6 +28,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",
@@ -6444,6 +6445,20 @@
         }
       }
     },
+    "node_modules/react-native-draggable-flatlist": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-native-draggable-flatlist/-/react-native-draggable-flatlist-4.0.3.tgz",
+      "integrity": "sha512-2F4x5BFieWdGq9SetD2nSAR7s7oQCSgNllYgERRXXtNfSOuAGAVbDb/3H3lP0y5f7rEyNwabKorZAD/SyyNbDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/preset-typescript": "^7.17.12"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.64.0",
+        "react-native-gesture-handler": ">=2.0.0",
+        "react-native-reanimated": ">=2.8.0"
+      }
+    },
     "node_modules/react-native-drawer-layout": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-4.2.10.tgz",

app/package.json

@@ -23,6 +23,7 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.86.2",
+    "react-native-draggable-flatlist": "^4.0.3",
     "react-native-gesture-handler": "~2.32.0",
     "react-native-reanimated": "4.5.1",
     "react-native-safe-area-context": "~5.7.0",

app/src/components/TaskListScreen.tsx

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

app/src/components/TaskRow.tsx

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

app/src/lib/store.ts

@@ -114,7 +114,10 @@ export function createTask(data: Partial<Task> & { title: string }): Task {
     priority: data.priority ?? 4,
     estimate_min: data.estimate_min ?? null,
     completed_at: null,
-    sort_order: data.sort_order ?? 0,
+    // New tasks land at the top of their list.
+    sort_order:
+      data.sort_order ??
+      Math.min(0, ...state.tasks.filter((t) => t.status === (data.status ?? "next")).map((t) => t.sort_order)) - 1,
     created_at: now(),
     updated_at: now(),
   };
@@ -248,8 +251,27 @@ function byPriorityDue(a: Task, b: Task): number {
   );
 }
 
+// Manual arrangement wins: sort_order is the canonical list order (set by
+// drag-to-reorder); priority/due only break ties for rows that never moved.
+function byManualOrder(a: Task, b: Task): number {
+  return a.sort_order - b.sort_order || byPriorityDue(a, b);
+}
+
 export function tasksByStatus(s: State, status: Task["status"]): Task[] {
-  return s.tasks.filter((t) => t.status === status).sort(byPriorityDue);
+  return s.tasks.filter((t) => t.status === status).sort(byManualOrder);
+}
+
+/** Re-slot a task at `index` within its status list (fractional sort_order). */
+export function reorderTask(id: string, status: Task["status"], index: number) {
+  const list = tasksByStatus(getState(), status).filter((t) => t.id !== id);
+  const prev = list[index - 1]?.sort_order;
+  const next = list[index]?.sort_order;
+  const sort_order =
+    prev !== undefined && next !== undefined ? (prev + next) / 2
+    : prev !== undefined ? prev + 1
+    : next !== undefined ? next - 1
+    : 0;
+  updateTask(id, { sort_order });
 }
 
 /** Overdue + due-today + deferred-arriving-today, across all open lists. */