feat(home): draggable top-3 with a visually distinct NOW slot; web drag via handles

Home preview reorders through the same reorderTask as the Next list, and row
0 gets the NOW treatment (tint, bigger title). On web the drag library's
drop handling never fires, so lists reorder through WebSortableList's
pointer-event grab handles instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YE5FmDZmFnWxH6RXCZLcjj

app/src/app/index.tsx

@@ -1,12 +1,14 @@
 import { useFocusEffect, useRouter } from "expo-router";
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { NestableDraggableFlatList, NestableScrollContainer, ScaleDecorator } from "react-native-draggable-flatlist";
+import WebSortableList from "../components/WebSortableList";
 import Icon, { type IconName } from "../components/Icon";
 import TaskRow, { TaskSeparator } from "../components/TaskRow";
-import { Card, Empty, Screen, SectionHeader, Title } from "../components/ui";
+import { Card, cardEdges, Empty, Screen, SectionHeader, Title } from "../components/ui";
 import { haptic } from "../lib/haptics";
 import { daysSince, useLastReview } from "../lib/review";
-import { todayTasks, visibleTasksByStatus } from "../lib/store";
-import { C, shadow, space, type } from "../lib/theme";
+import { reorderTask, todayTasks, visibleTasksByStatus } from "../lib/store";
+import { C, radius, shadow, space, type } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 
 const MENU: { icon: IconName; label: string; href: string }[] = [
@@ -54,20 +56,49 @@ export default function Home() {
 
   return (
     <Screen>
-      <ScrollView contentContainerStyle={s.content} showsVerticalScrollIndicator={false}>
+      <NestableScrollContainer contentContainerStyle={s.content} showsVerticalScrollIndicator={false}>
         <Title count={next.length}>Next up</Title>
 
         {preview.length === 0 ? (
           <Empty>Nothing queued. Add the next thing on your mind.</Empty>
-        ) : (
-          <Card>
-            {preview.map((t, i) => (
-              <View key={t.id}>
-                {i > 0 && <TaskSeparator />}
-                <TaskRow task={t} />
+        ) : Platform.OS === "web" ? (
+          <WebSortableList
+            data={preview}
+            onReorder={(id, to) => reorderTask(id, "next", to)}
+            separator={<TaskSeparator />}
+            renderItem={(t, i) => (
+              <View style={cardEdges(i, preview.length)}>
+                <TaskRow task={t} emphasized={i === 0} />
               </View>
-            ))}
-          </Card>
+            )}
+          />
+        ) : (
+          // Draggable so the "do this now" slot is a hand-picked choice, not
+          // just whatever sorted first. Preview indices are next[0..N], so a
+          // drop reorders the real Next list.
+          <NestableDraggableFlatList
+            data={preview}
+            keyExtractor={(t) => t.id}
+            activationDistance={12}
+            onDragBegin={() => haptic.pickup()}
+            onDragEnd={({ data, from, to }) => {
+              if (from !== to) {
+                haptic.success();
+                reorderTask(data[to].id, "next", to);
+              }
+            }}
+            renderItem={({ item, drag, isActive, getIndex }) => {
+              const i = getIndex() ?? 0;
+              return (
+                <ScaleDecorator activeScale={1.02}>
+                  <View style={[...cardEdges(i, preview.length), isActive && s.lifted]}>
+                    <TaskRow task={item} emphasized={i === 0} onLongPress={drag} />
+                  </View>
+                </ScaleDecorator>
+              );
+            }}
+            ItemSeparatorComponent={TaskSeparator}
+          />
         )}
 
         {next.length > PREVIEW && (
@@ -116,7 +147,7 @@ export default function Home() {
             </Card>
           </>
         )}
-      </ScrollView>
+      </NestableScrollContainer>
 
       <View style={s.tabBar}>
         {MENU.map((m) => (
@@ -149,6 +180,7 @@ export default function Home() {
 
 const s = StyleSheet.create({
   content: { paddingHorizontal: space.lg, paddingBottom: 120 },
+  lifted: { borderRadius: radius.lg, ...shadow.fab },
 
   viewAll: {
     flexDirection: "row",

app/src/components/TaskListScreen.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Pressable, RefreshControl, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, RefreshControl, ScrollView, StyleSheet, Text, View } from "react-native";
 import DraggableFlatList, { ScaleDecorator } from "react-native-draggable-flatlist";
+import WebSortableList from "./WebSortableList";
 import { haptic } from "../lib/haptics";
 import { reorderTask, sync, tasksByStatus, visibleTasksByStatus } from "../lib/store";
 import { C, radius, shadow, space, type } from "../lib/theme";
@@ -38,6 +39,42 @@ export default function TaskListScreen({
   }
   const hiddenCount = all.length - tasks.length;
 
+  const deferredFooter =
+    hidesDeferred && (hiddenCount > 0 || showDeferred) ? (
+      <Pressable
+        onPress={() => setShowDeferred((v) => !v)}
+        style={({ pressed }) => [s.deferredBtn, pressed && { opacity: 0.6 }]}
+      >
+        <Text style={s.deferredText}>
+          {showDeferred ? "Hide deferred" : `${hiddenCount} deferred — show`}
+        </Text>
+      </Pressable>
+    ) : null;
+
+  // The native drag library's drop handling is dead on react-native-web, so
+  // the web build reorders through WebSortableList's grab handles instead.
+  if (Platform.OS === "web") {
+    return (
+      <View style={s.screen}>
+        <ScrollView contentContainerStyle={s.content} showsVerticalScrollIndicator={false}>
+          {tasks.length === 0 && <Text style={s.empty}>{emptyHint}</Text>}
+          <WebSortableList
+            data={tasks}
+            disabled={archive}
+            onReorder={(id, to) => reorderTask(id, status, to)}
+            separator={<TaskSeparator />}
+            renderItem={(item, i) => (
+              <View style={cardEdges(i, tasks.length)}>
+                <TaskRow task={item} uncheckTo={status === "done" ? "next" : status} />
+              </View>
+            )}
+          />
+          {deferredFooter}
+        </ScrollView>
+      </View>
+    );
+  }
+
   return (
     <View style={s.screen}>
       <DraggableFlatList
@@ -81,18 +118,7 @@ export default function TaskListScreen({
           />
         }
         ListEmptyComponent={<Text style={s.empty}>{emptyHint}</Text>}
-        ListFooterComponent={
-          hidesDeferred && (hiddenCount > 0 || showDeferred) ? (
-            <Pressable
-              onPress={() => setShowDeferred((v) => !v)}
-              style={({ pressed }) => [s.deferredBtn, pressed && { opacity: 0.6 }]}
-            >
-              <Text style={s.deferredText}>
-                {showDeferred ? "Hide deferred" : `${hiddenCount} deferred — show`}
-              </Text>
-            </Pressable>
-          ) : null
-        }
+        ListFooterComponent={deferredFooter}
         contentContainerStyle={s.content}
       />
     </View>

app/src/components/WebSortableList.tsx

@@ -0,0 +1,115 @@
+// Web-only reorderable list. react-native-draggable-flatlist's drop handling
+// never completes on react-native-web (onDragEnd doesn't fire), and the
+// PanResponder path is unreliable there too — so each row gets a grab handle
+// driven by raw pointer events: pointerdown on the handle, window-level
+// move/up listeners, and on release the target slot is computed from measured
+// row heights and handed to onReorder (the same store mutation native uses).
+import { useState, type ReactNode } from "react";
+import { StyleSheet, Text, View, type GestureResponderEvent } from "react-native";
+import { C, space } from "../lib/theme";
+
+export default function WebSortableList<T extends { id: string }>({
+  data,
+  renderItem,
+  onReorder,
+  separator,
+  disabled,
+}: {
+  data: T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Called with the dragged row's id and the index it was dropped at. */
+  onReorder: (id: string, to: number) => void;
+  separator?: ReactNode;
+  disabled?: boolean;
+}) {
+  // Stable mutable array (not a ref: refs may not be read during render).
+  const [heights] = useState<number[]>([]);
+  const [drag, setDrag] = useState<{ index: number; dy: number } | null>(null);
+
+  const targetIndex = (from: number, dy: number) => {
+    let idx = from;
+    let acc = 0;
+    while (dy > 0 && idx < data.length - 1 && dy > acc + (heights[idx + 1] ?? 48) / 2) {
+      acc += heights[idx + 1] ?? 48;
+      idx++;
+    }
+    while (dy < 0 && idx > 0 && -dy > acc + (heights[idx - 1] ?? 48) / 2) {
+      acc += heights[idx - 1] ?? 48;
+      idx--;
+    }
+    return idx;
+  };
+
+  const startDrag = (i: number, e: GestureResponderEvent) => {
+    if (disabled) return;
+    // RNW delivers a real PointerEvent; keep it off the row's Pressable.
+    e.stopPropagation();
+    e.preventDefault();
+    const native = e.nativeEvent as unknown as { clientY?: number; pageY: number };
+    const startY = native.clientY ?? native.pageY;
+    setDrag({ index: i, dy: 0 });
+    let dy = 0;
+    const move = (ev: PointerEvent) => {
+      dy = ev.clientY - startY;
+      setDrag({ index: i, dy });
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      setDrag(null);
+      const to = targetIndex(i, dy);
+      if (to !== i) onReorder(data[i].id, to);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+
+  return (
+    <View>
+      {data.map((item, i) => {
+        const dragging = drag?.index === i;
+        return (
+          <View key={item.id}>
+            {i > 0 && separator}
+            <View
+              onLayout={(e) => (heights[i] = e.nativeEvent.layout.height)}
+              style={dragging && [s.dragging, { transform: [{ translateY: drag.dy }] }]}
+            >
+              {renderItem(item, i)}
+              {!disabled && (
+                <View onPointerDown={(e) => startDrag(i, e as unknown as GestureResponderEvent)} style={s.handle}>
+                  <Text style={s.handleGlyph}>⠿</Text>
+                </View>
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  dragging: {
+    zIndex: 10,
+    elevation: 10,
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+  },
+  handle: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    // @ts-expect-error web-only style
+    cursor: "grab",
+    touchAction: "none",
+    userSelect: "none",
+  },
+  handleGlyph: { color: C.muted, fontSize: 15, paddingHorizontal: space.sm },
+});