Add routine reordering persistence and API sync

ravishan16 · ravishan16 · commit 65546781a142 · 2026-04-07T14:25:21.000-05:00
diff --git a/client/src/lib/storage.test.ts b/client/src/lib/storage.test.ts
@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { routinesApi } from "./storage";
+import type { Routine } from "./schema";
+
+const ROUTINES_KEY = "rm_routines";
+
+function seedRoutines(routines: Routine[]) {
+  localStorage.setItem(ROUTINES_KEY, JSON.stringify(routines));
+}
+
+describe("routinesApi.reorder", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({
+        ok: true,
+        json: async () => ({ success: true }),
+      }))
+    );
+  });
+
+  it("rewrites local routines in ordered id sequence with sequential sortOrder", async () => {
+    seedRoutines([
+      { id: "a", name: "A", icon: "🅰️", timeCategories: ["AM"], isActive: true, sortOrder: 0 },
+      { id: "b", name: "B", icon: "🅱️", timeCategories: ["PM"], isActive: true, sortOrder: 1 },
+      { id: "c", name: "C", icon: "©️", timeCategories: ["ALL"], isActive: true, sortOrder: 2 },
+    ]);
+
+    await routinesApi.reorder(["c", "a", "b"]);
+
+    const routines = JSON.parse(localStorage.getItem(ROUTINES_KEY) || "[]") as Routine[];
+    expect(routines.map((routine) => routine.id)).toEqual(["c", "a", "b"]);
+    expect(routines.map((routine) => routine.sortOrder)).toEqual([0, 1, 2]);
+  });
+
+  it("does nothing for a single-routine order", async () => {
+    seedRoutines([
+      { id: "only", name: "Only", icon: "✅", timeCategories: ["ALL"], isActive: true, sortOrder: 0 },
+    ]);
+    const fetchMock = vi.mocked(fetch);
+
+    await routinesApi.reorder(["only"]);
+
+    const routines = JSON.parse(localStorage.getItem(ROUTINES_KEY) || "[]") as Routine[];
+    expect(routines).toHaveLength(1);
+    expect(routines[0].id).toBe("only");
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("preserves routine metadata after reorder", async () => {
+    seedRoutines([
+      {
+        id: "r1",
+        name: "Hydrate",
+        icon: "💧",
+        timeCategories: ["AM", "NOON"],
+        isActive: true,
+        sortOrder: 0,
+      },
+      {
+        id: "r2",
+        name: "Walk",
+        icon: "🚶",
+        timeCategories: ["PM"],
+        isActive: true,
+        sortOrder: 1,
+      },
+    ]);
+
+    await routinesApi.reorder(["r2", "r1"]);
+
+    const routines = JSON.parse(localStorage.getItem(ROUTINES_KEY) || "[]") as Routine[];
+    expect(routines[0]).toMatchObject({
+      id: "r2",
+      name: "Walk",
+      icon: "🚶",
+      timeCategories: ["PM"],
+    });
+    expect(routines[1]).toMatchObject({
+      id: "r1",
+      name: "Hydrate",
+      icon: "💧",
+      timeCategories: ["AM", "NOON"],
+    });
+  });
+
+  it("fires sync API call with ordered ids", async () => {
+    seedRoutines([
+      { id: "one", name: "One", icon: "1️⃣", timeCategories: ["ALL"], isActive: true, sortOrder: 0 },
+      { id: "two", name: "Two", icon: "2️⃣", timeCategories: ["ALL"], isActive: true, sortOrder: 1 },
+    ]);
+    const fetchMock = vi.mocked(fetch);
+
+    await routinesApi.reorder(["two", "one"]);
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      expect.stringContaining("/api/routines/reorder"),
+      expect.objectContaining({
+        method: "PUT",
+        body: JSON.stringify({ orderedIds: ["two", "one"] }),
+      })
+    );
+  });
+});
diff --git a/client/src/lib/storage.ts b/client/src/lib/storage.ts
@@ -220,8 +220,10 @@ export const routinesApi = {
     const seenIds = new Set<string>();
     const seenNames = new Set<string>();
     
-    // Sort to put active routines first
+    // Sort by user-defined order, then by active state
     const sorted = [...routines].sort((a, b) => {
+      const orderDiff = (a.sortOrder ?? Number.MAX_SAFE_INTEGER) - (b.sortOrder ?? Number.MAX_SAFE_INTEGER);
+      if (orderDiff !== 0) return orderDiff;
       if (a.isActive && !b.isActive) return -1;
       if (!a.isActive && b.isActive) return 1;
       return 0;
@@ -237,6 +239,41 @@ export const routinesApi = {
     });
   },
 
+  reorder: async (orderedIds: string[]): Promise<void> => {
+    if (orderedIds.length <= 1) return;
+
+    const routines = getFromStorage<Routine[]>(KEYS.routines, []);
+    const routineById = new Map(routines.map((routine) => [routine.id, routine]));
+    const reordered: Routine[] = [];
+
+    orderedIds.forEach((id, index) => {
+      const routine = routineById.get(id);
+      if (routine) {
+        reordered.push({
+          ...routine,
+          sortOrder: index,
+        });
+        routineById.delete(id);
+      }
+    });
+
+    // Keep any routines not included in orderedIds at the end
+    routineById.forEach((routine) => {
+      reordered.push({
+        ...routine,
+        sortOrder: reordered.length,
+      });
+    });
+
+    saveToStorage(KEYS.routines, reordered);
+
+    // Fire-and-forget sync; local order remains authoritative
+    api("/api/routines/reorder", {
+      method: "PUT",
+      body: JSON.stringify({ orderedIds }),
+    });
+  },
+
   getDaily: async (date: string): Promise<(Routine & { 
     completedCategories: string[];
     isFullyCompleted: boolean;
diff --git a/client/src/pages/routines.tsx b/client/src/pages/routines.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { Plus, Pencil, Trash2, Bell, BellOff, Sun, Moon } from "lucide-react";
+import { Plus, Pencil, Trash2, Bell, BellOff, Sun, Moon, GripVertical } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -220,6 +220,8 @@ export default function RoutinesPage() {
   const [editingRoutine, setEditingRoutine] = useState<Routine | null>(null);
   const { theme, toggleTheme } = useTheme();
   const { toast } = useToast();
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
 
   const { data: routines, isLoading } = useQuery<Routine[]>({
     queryKey: ["routines"],
@@ -256,6 +258,35 @@ export default function RoutinesPage() {
     },
   });
 
+  const reorderMutation = useMutation({
+    mutationFn: (orderedIds: string[]) => routinesApi.reorder(orderedIds),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["routines"] });
+      queryClient.invalidateQueries({ queryKey: ["routines", "daily"] });
+      toast({ title: "Routine order updated" });
+    },
+  });
+
+  const reorderRoutines = (fromId: string, toId: string) => {
+    if (!routines || fromId === toId) return;
+    const fromIndex = routines.findIndex((routine) => routine.id === fromId);
+    const toIndex = routines.findIndex((routine) => routine.id === toId);
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
+
+    const reordered = [...routines];
+    const [moved] = reordered.splice(fromIndex, 1);
+    reordered.splice(toIndex, 0, moved);
+    reorderMutation.mutate(reordered.map((routine) => routine.id));
+  };
+
+  const moveByOffset = (routineId: string, offset: -1 | 1) => {
+    if (!routines) return;
+    const currentIndex = routines.findIndex((routine) => routine.id === routineId);
+    const targetIndex = currentIndex + offset;
+    if (currentIndex === -1 || targetIndex < 0 || targetIndex >= routines.length) return;
+    reorderRoutines(routineId, routines[targetIndex].id);
+  };
+
   return (
     <div className="flex flex-col min-h-screen pb-20">
       <header className="sticky top-0 bg-background/95 backdrop-blur-sm z-40 border-b border-border px-4 py-4">
@@ -321,9 +352,54 @@ export default function RoutinesPage() {
           </div>
         ) : (
           routines?.map((routine) => (
-            <Card key={routine.id} className="p-4" data-testid={`card-routine-${routine.id}`}>
+            <Card
+              key={routine.id}
+              className={`p-4 transition-all ${draggedId === routine.id ? "opacity-70 ring-2 ring-primary shadow-lg scale-[1.01]" : ""} ${dragOverId === routine.id ? "ring-2 ring-primary/40" : ""}`}
+              data-testid={`card-routine-${routine.id}`}
+              onDragOver={(e) => {
+                if (!draggedId || draggedId === routine.id) return;
+                e.preventDefault();
+                setDragOverId(routine.id);
+              }}
+              onDrop={(e) => {
+                e.preventDefault();
+                if (!draggedId || draggedId === routine.id) return;
+                reorderRoutines(draggedId, routine.id);
+                setDraggedId(null);
+                setDragOverId(null);
+              }}
+              onDragEnd={() => {
+                setDraggedId(null);
+                setDragOverId(null);
+              }}
+            >
               <div className="flex items-start justify-between gap-3">
-                <div className="flex-1 min-w-0">
+                <div className="flex items-start gap-2 flex-1 min-w-0">
+                  {routines.length > 1 && (
+                    <button
+                      type="button"
+                      draggable
+                      aria-label={`Reorder ${routine.name}`}
+                      className="mt-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-grab active:cursor-grabbing touch-none"
+                      data-testid={`button-reorder-${routine.id}`}
+                      onDragStart={(e) => {
+                        e.dataTransfer.effectAllowed = "move";
+                        setDraggedId(routine.id);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "ArrowUp") {
+                          e.preventDefault();
+                          moveByOffset(routine.id, -1);
+                        } else if (e.key === "ArrowDown") {
+                          e.preventDefault();
+                          moveByOffset(routine.id, 1);
+                        }
+                      }}
+                    >
+                      <GripVertical className="w-4 h-4" />
+                    </button>
+                  )}
+                  <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-2">
                     <span className="text-xl">{routine.icon || "✅"}</span>
                     <h3 className="font-semibold truncate" data-testid={`text-routine-name-${routine.id}`}>
@@ -342,6 +418,7 @@ export default function RoutinesPage() {
                     ))}
                   </div>
                 </div>
+                </div>
                 <div className="flex items-center gap-1">
                   <Dialog
                     open={editingRoutine?.id === routine.id}
diff --git a/client/src/pages/today.tsx b/client/src/pages/today.tsx
@@ -98,6 +98,12 @@ export default function TodayPage() {
     });
   });
 
+  Object.keys(groupedRoutines).forEach((category) => {
+    groupedRoutines[category].sort(
+      (a, b) => (a.routine.sortOrder ?? Number.MAX_SAFE_INTEGER) - (b.routine.sortOrder ?? Number.MAX_SAFE_INTEGER)
+    );
+  });
+
   // Count total tasks (routine × category pairs) and completed ones
   const totalTasks = routines?.reduce((sum, r) => sum + r.timeCategories.length, 0) || 0;
   const completedTasks = routines?.reduce((sum, r) => sum + r.completedCategories.length, 0) || 0;
diff --git a/worker/src/index.ts b/worker/src/index.ts
@@ -255,6 +255,29 @@ app.post('/api/routines', async (c) => {
   return c.json({ id, name, icon: icon || '✅', timeCategories, isActive: true, sortOrder, createdAt });
 });
 
+// Update routine
+app.put('/api/routines/reorder', async (c) => {
+  const userId = c.req.header('X-User-Id');
+  if (!userId) return c.json({ error: 'Unauthorized' }, 401);
+
+  const body = await c.req.json();
+  const orderedIds = Array.isArray(body?.orderedIds) ? body.orderedIds : [];
+
+  if (orderedIds.length === 0) {
+    return c.json({ error: 'orderedIds must be a non-empty array' }, 400);
+  }
+
+  const statements = orderedIds.map((id: string, index: number) =>
+    c.env.DB
+      .prepare('UPDATE routines SET sort_order = ? WHERE id = ? AND user_id = ?')
+      .bind(index, id, userId)
+  );
+
+  await c.env.DB.batch(statements);
+
+  return c.json({ success: true });
+});
+
 // Update routine
 app.put('/api/routines/:id', async (c) => {
   const userId = c.req.header('X-User-Id');
