always set lane

apps/web/src/routes/timeline.$timelineId.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from "react";
 import { createFileRoute } from "@tanstack/react-router";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useSuspenseQuery, useQueryClient } from "@tanstack/react-query";
 import { timelineQueryOptions } from "@/functions/get-timeline";
+import { updateTimelineItem } from "@/functions/update-timeline-item";
 import { FlutterView } from "@/components/flutter-view";
 
 export const Route = createFileRoute("/timeline/$timelineId")({
@@ -17,6 +18,7 @@ function RouteComponent() {
   const { timelineId } = Route.useParams();
   const timelineQuery = useSuspenseQuery(timelineQueryOptions(timelineId));
   const timeline = timelineQuery.data;
+  const queryClient = useQueryClient();
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
   const flutterState = useMemo(
@@ -34,6 +36,7 @@ function RouteComponent() {
             description: item.description,
             start: item.start,
             end: item.end,
+            lane: item.lane,
           })),
         })),
       },
@@ -56,9 +59,75 @@ function RouteComponent() {
         case "item_deselected":
           setSelectedItemId(null);
           break;
+        case "entry_moved": {
+          const p = event.payload;
+          if (!p) break;
+          const entryId = p.entryId as string;
+          const newStart = p.newStart as string;
+          const newEnd = p.newEnd as string;
+          const newGroupId = p.newGroupId as string;
+          const newLane = p.newLane as number;
+
+          // Optimistic cache update
+          queryClient.setQueryData(
+            ["timeline", timelineId],
+            (old: typeof timeline | undefined) => {
+              if (!old) return old;
+              let movedItem:
+                | (typeof old.groups)[number]["items"][number]
+                | undefined;
+
+              const groups = old.groups.map((group) => {
+                const filtered = group.items.filter((item) => {
+                  if (item.id === entryId) {
+                    movedItem = item;
+                    return false;
+                  }
+                  return true;
+                });
+                return { ...group, items: filtered };
+              });
+
+              if (!movedItem) return old;
+
+              return {
+                ...old,
+                groups: groups.map((group) =>
+                  group.id === newGroupId
+                    ? {
+                        ...group,
+                        items: [
+                          ...group.items,
+                          {
+                            ...movedItem!,
+                            start: newStart,
+                            end: newEnd,
+                            lane: newLane,
+                            timelineGroupId: newGroupId,
+                          },
+                        ],
+                      }
+                    : group
+                ),
+              };
+            }
+          );
+
+          // Persist to DB
+          updateTimelineItem({
+            data: {
+              id: entryId,
+              start: newStart,
+              end: newEnd,
+              timelineGroupId: newGroupId,
+              lane: newLane,
+            },
+          });
+          break;
+        }
       }
     },
-    []
+    [queryClient, timelineId]
   );
 
   return (