add timeline pkg to flutter

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

@@ -1,8 +1,10 @@
+import { useCallback, useMemo, useState } from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { timelineQueryOptions } from "@/functions/get-timeline";
 import GroupFormDrawer from "@/components/group-form-drawer";
 import ItemFormDrawer from "@/components/item-form-drawer";
+import { FlutterView } from "@/components/flutter-view";
 
 export const Route = createFileRoute("/timeline/$timelineId")({
   loader: async ({ context, params }) => {
@@ -17,48 +19,54 @@ function RouteComponent() {
   const { timelineId } = Route.useParams();
   const timelineQuery = useSuspenseQuery(timelineQueryOptions(timelineId));
   const timeline = timelineQuery.data;
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  const flutterState = useMemo(
+    () => ({
+      timeline: {
+        id: timeline.id,
+        title: timeline.title,
+        groups: timeline.groups.map((group) => ({
+          id: group.id,
+          title: group.title,
+          sortOrder: group.sortOrder,
+          items: group.items.map((item) => ({
+            id: item.id,
+            title: item.title,
+            description: item.description,
+            start: item.start,
+            end: item.end,
+          })),
+        })),
+      },
+      selectedItemId,
+    }),
+    [timeline, selectedItemId]
+  );
+
+  const handleEvent = useCallback(
+    (event: { type: string; payload?: Record<string, unknown> }) => {
+      switch (event.type) {
+        case "item_selected":
+          setSelectedItemId((event.payload?.itemId as string) ?? null);
+          break;
+        case "item_deselected":
+          setSelectedItemId(null);
+          break;
+      }
+    },
+    []
+  );
 
   return (
-    <div className="container mx-auto max-w-3xl px-4 py-6 space-y-6">
-      <h1 className="text-3xl font-serif font-bold">{timeline.title}</h1>
+    <div className="flex h-screen flex-col px-4 py-6">
+      <h1 className="text-3xl font-serif font-bold mb-6">{timeline.title}</h1>
 
-      {timeline.groups.length === 0 && (
-        <p className="text-muted-foreground">
-          No groups yet. Add a group to start building your timeline.
-        </p>
-      )}
-
-      <div className="space-y-6">
-        {timeline.groups.map((group) => (
-          <div key={group.id} className="border border-border rounded-lg p-4 space-y-3">
-            <div className="flex items-center justify-between">
-              <h2 className="text-xl font-semibold">{group.title}</h2>
-              <ItemFormDrawer timelineGroupId={group.id} timelineId={timelineId} />
-            </div>
-
-            {group.items.length === 0 && (
-              <p className="text-sm text-muted-foreground">No items in this group yet.</p>
-            )}
-
-            <ul className="space-y-2">
-              {group.items.map((item) => (
-                <li key={item.id} className="border border-border rounded p-3">
-                  <div className="font-medium">{item.title}</div>
-                  {item.description && (
-                    <p className="text-sm text-muted-foreground">{item.description}</p>
-                  )}
-                  <p className="text-xs text-muted-foreground mt-1">
-                    {new Date(item.start).toLocaleDateString()}
-                    {item.end && ` — ${new Date(item.end).toLocaleDateString()}`}
-                  </p>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-
-      <GroupFormDrawer timelineId={timelineId} />
+      <FlutterView
+        state={flutterState}
+        onEvent={handleEvent}
+        className="min-h-0 flex-1 rounded-lg overflow-hidden"
+      />
     </div>
   );
 }