add and edit

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

@@ -7,6 +7,7 @@ import { timelineQueryOptions } from "@/functions/get-timeline";
 import { FlutterView } from "@/components/flutter-view";
 import { Button } from "@/components/ui/button";
 import UserMenu from "@/components/user-menu";
+import ItemFormDrawer from "@/components/item-form-drawer";
 import { useEntryMovedMutation } from "@/hooks/use-entry-moved-mutation";
 import { useEntryResizedMutation } from "@/hooks/use-entry-resized-mutation";
 import { useTheme } from "@/lib/theme";
@@ -24,11 +25,16 @@ function RouteComponent() {
   const { timelineId } = Route.useParams();
   const { data: timeline } = useSuspenseQuery(timelineQueryOptions(timelineId));
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const [flutterHeight, setFlutterHeight] = useState<number | undefined>();
   const entryMoved = useEntryMovedMutation(timelineId);
   const entryResized = useEntryResizedMutation(timelineId);
   const { theme, toggleTheme } = useTheme();
 
+  const editItem = selectedItemId
+    ? (timeline.items[selectedItemId] ?? null)
+    : null;
+
   const flutterState: FlutterTimelineState = useMemo(
     () => ({
       timeline: { id: timeline.id, title: timeline.title },
@@ -62,9 +68,11 @@ function RouteComponent() {
           break;
         case "item_selected":
           setSelectedItemId(event.payload.itemId);
+          setDrawerOpen(true);
           break;
         case "item_deselected":
           setSelectedItemId(null);
+          setDrawerOpen(false);
           break;
         case "entry_moved":
           entryMoved.mutate(event.payload);
@@ -77,6 +85,18 @@ function RouteComponent() {
     [entryMoved, entryResized]
   );
 
+  const handleDrawerOpenChange = useCallback((open: boolean) => {
+    setDrawerOpen(open);
+    if (!open) {
+      setSelectedItemId(null);
+    }
+  }, []);
+
+  const handleAddItem = useCallback(() => {
+    setSelectedItemId(null);
+    setDrawerOpen(true);
+  }, []);
+
   return (
     <div className="flex flex-col">
       <div className="flex flex-row items-center justify-between px-2 py-1">
@@ -91,7 +111,7 @@ function RouteComponent() {
           <h1 className="text-lg font-serif font-bold">{timeline.title}</h1>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm">
+          <Button variant="outline" size="sm" onClick={handleAddItem}>
             <Plus className="size-4" />
             Add Item
           </Button>
@@ -120,6 +140,15 @@ function RouteComponent() {
         className="overflow-hidden"
         height={flutterHeight}
       />
+
+      <ItemFormDrawer
+        open={drawerOpen}
+        onOpenChange={handleDrawerOpenChange}
+        timelineId={timelineId}
+        groups={timeline.groups}
+        groupOrder={timeline.groupOrder}
+        editItem={editItem}
+      />
     </div>
   );
 }