add and edit

.prettierignore

@@ -2,4 +2,4 @@
 pnpm-lock.yaml
 **/.claude/**
 **/public/flutter/**
-**/z-timeline/**
+**/z-flutter/**

apps/web/src/components/item-form-drawer.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useCallback, useEffect } from "react";
 import { useForm } from "@tanstack/react-form";
 import { useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 
 import { Button } from "./ui/button";
 import { FieldControl, FieldError, FieldLabel, FieldRoot } from "./ui/field";
+import { inputClasses } from "./ui/input";
 import {
   DrawerClose,
   DrawerContent,
@@ -12,63 +13,101 @@ import {
   DrawerPortal,
   DrawerRoot,
   DrawerTitle,
-  DrawerTrigger,
   DrawerViewport,
 } from "./ui/drawer";
+import type { NormalizedGroup, NormalizedItem } from "@/functions/get-timeline";
+import { updateTimelineItem } from "@/functions/update-timeline-item";
 import { createTimelineItem } from "@/functions/create-timeline-item";
 
-export default function ItemFormDrawer({
+type ItemFormDrawerProps = {
-  timelineGroupId,
+  open: boolean;
-  timelineId,
+  onOpenChange: (open: boolean) => void;
-}: {
-  timelineGroupId: string;
   timelineId: string;
-}) {
+  groups: Record<string, NormalizedGroup | undefined>;
-  const [open, setOpen] = useState(false);
+  groupOrder: Array<string>;
+  editItem?: NormalizedItem | null;
+};
+
+export default function ItemFormDrawer({
+  open,
+  onOpenChange,
+  timelineId,
+  groups,
+  groupOrder,
+  editItem,
+}: ItemFormDrawerProps) {
+  const isEdit = !!editItem;
   const queryClient = useQueryClient();
 
+  const getDefaultValues = useCallback(
+    () => ({
+      title: editItem?.title ?? "",
+      description: editItem?.description ?? "",
+      start: editItem
+        ? editItem.start.toISOString().split("T")[0]
+        : new Date().toISOString().split("T")[0],
+      end: editItem?.end ? editItem.end.toISOString().split("T")[0] : "",
+      groupId: (editItem?.groupId ?? groupOrder[0]) || "",
+    }),
+    [editItem, groupOrder]
+  );
+
   const form = useForm({
-    defaultValues: {
+    defaultValues: getDefaultValues(),
-      title: "",
-      description: "",
-      start: new Date().toISOString().split("T")[0],
-      end: "",
-    },
     onSubmit: async ({ value }) => {
       try {
+        if (isEdit) {
+          await updateTimelineItem({
+            data: {
+              id: editItem.id,
+              title: value.title,
+              description: value.description,
+              start: value.start,
+              end: value.end || null,
+              timelineGroupId: value.groupId,
+              lane: editItem.lane,
+            },
+          });
+          toast.success("Item updated");
+        } else {
           await createTimelineItem({
             data: {
               title: value.title,
               description: value.description,
               start: value.start,
-            end: value.end || undefined,
+              end: value.end || null,
-            timelineGroupId,
+              timelineGroupId: value.groupId,
             },
           });
+          toast.success("Item created");
+        }
         await queryClient.invalidateQueries({
           queryKey: ["timeline", timelineId],
         });
-        setOpen(false);
+        onOpenChange(false);
         form.reset();
-        toast.success("Item created");
       } catch (error) {
         toast.error(
-          error instanceof Error ? error.message : "Failed to create item"
+          error instanceof Error
+            ? error.message
+            : `Failed to ${isEdit ? "update" : "create"} item`
         );
       }
     },
   });
 
+  useEffect(() => {
+    if (!open) return;
+    form.reset(getDefaultValues());
+  }, [open, getDefaultValues, form]);
+
   return (
-    <DrawerRoot open={open} onOpenChange={setOpen}>
+    <DrawerRoot open={open} onOpenChange={onOpenChange}>
-      <DrawerTrigger render={<Button variant="outline" size="sm" />}>
-        Add Item
-      </DrawerTrigger>
       <DrawerPortal>
         <DrawerViewport>
           <DrawerPopup>
             <div className="flex items-center justify-between border-b border-border p-4">
-              <DrawerTitle>New Item</DrawerTitle>
+              <DrawerTitle>{isEdit ? "Edit Item" : "New Item"}</DrawerTitle>
               <DrawerClose render={<Button variant="outline" size="sm" />}>
                 Close
               </DrawerClose>
@@ -122,6 +161,26 @@ export default function ItemFormDrawer({
                   )}
                 </form.Field>
 
+                <form.Field name="groupId">
+                  {(field) => (
+                    <FieldRoot>
+                      <FieldLabel>Group</FieldLabel>
+                      <select
+                        className={inputClasses}
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                      >
+                        {groupOrder.map((id) => (
+                          <option key={id} value={id}>
+                            {groups[id]?.title ?? id}
+                          </option>
+                        ))}
+                      </select>
+                    </FieldRoot>
+                  )}
+                </form.Field>
+
                 <form.Field name="start">
                   {(field) => (
                     <FieldRoot>
@@ -168,7 +227,13 @@ export default function ItemFormDrawer({
                       type="submit"
                       disabled={!state.canSubmit || state.isSubmitting}
                     >
-                      {state.isSubmitting ? "Creating..." : "Create Item"}
+                      {state.isSubmitting
+                        ? isEdit
+                          ? "Saving..."
+                          : "Creating..."
+                        : isEdit
+                          ? "Save Changes"
+                          : "Create Item"}
                     </Button>
                   )}
                 </form.Subscribe>

apps/web/src/components/ui/drawer.tsx

@@ -26,7 +26,14 @@ const { viewport, popup, title, description, close, content } = drawerStyles();
 type DrawerRootProps = React.ComponentProps<typeof BaseDrawer.Root>;
 
 function DrawerRoot(props: DrawerRootProps) {
-  return <BaseDrawer.Root modal={false} swipeDirection="right" {...props} />;
+  return (
+    <BaseDrawer.Root
+      modal={false}
+      swipeDirection="right"
+      disablePointerDismissal
+      {...props}
+    />
+  );
 }
 
 type DrawerTriggerProps = React.ComponentProps<typeof BaseDrawer.Trigger>;

apps/web/src/functions/create-timeline-item.ts

@@ -15,8 +15,8 @@ export const createTimelineItem = createServerFn({ method: "POST" })
       start: z.string().transform((s) => new Date(s)),
       end: z
         .string()
-        .optional()
+        .nullable()
-        .transform((s) => (s ? new Date(s) : undefined)),
+        .transform((s) => (s ? new Date(s) : null)),
       timelineGroupId: z.string().uuid(),
     })
   )

apps/web/src/functions/update-timeline-item.ts

@@ -17,6 +17,8 @@ export const updateTimelineItem = createServerFn({ method: "POST" })
         .transform((s) => (s ? new Date(s) : null)),
       timelineGroupId: z.string().uuid(),
       lane: z.number().int().min(1),
+      title: z.string().min(1).optional(),
+      description: z.string().optional(),
     })
   )
   .handler(async ({ data }) => {
@@ -27,6 +29,10 @@ export const updateTimelineItem = createServerFn({ method: "POST" })
         end: data.end,
         timelineGroupId: data.timelineGroupId,
         lane: data.lane,
+        ...(data.title !== undefined && { title: data.title }),
+        ...(data.description !== undefined && {
+          description: data.description,
+        }),
       })
       .where(eq(timelineItem.id, data.id))
       .returning();

apps/web/src/lib/assign-lane.ts

@@ -6,7 +6,7 @@
  * lanes on item creation.
  */
 export function assignLane(
-  existingItems: { start: Date; end: Date | null; lane: number }[],
+  existingItems: Array<{ start: Date; end: Date | null; lane: number }>,
   newStart: Date,
   newEnd: Date | null
 ): number {

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>
   );
 }

packages/db/src/scripts/fix-lanes.ts

@@ -24,7 +24,7 @@ interface ItemForLane {
 }
 
 function assignLane(
-  existing: ItemForLane[],
+  existing: Array<ItemForLane>,
   newStart: Date,
   newEnd: Date | null
 ): number {
@@ -57,7 +57,7 @@ async function main() {
 
     if (items.length === 0) continue;
 
-    const assigned: ItemForLane[] = [];
+    const assigned: Array<ItemForLane> = [];
     let updated = 0;
 
     for (const item of items) {

packages/z-flutter/lib/main.dart

@@ -125,6 +125,14 @@ class _MainAppState extends State<MainApp> {
     return (start: earliest.subtract(padding), end: latest.add(padding));
   }
 
+  void _onEntrySelected(TimelineEntry entry) {
+    emitEvent('item_selected', {'itemId': entry.id});
+  }
+
+  void _onBackgroundTap() {
+    emitEvent('item_deselected');
+  }
+
   void _onEntryMoved(
     TimelineEntry entry,
     DateTime newStart,
@@ -346,6 +354,7 @@ class _MainAppState extends State<MainApp> {
                       const ZTimelineTieredHeader(),
                       Expanded(
                         child: ZTimelineInteractor(
+                          onBackgroundTap: _onBackgroundTap,
                           child: ZTimelineView(
                             groups: _groups,
                             entries: _entries,
@@ -355,6 +364,8 @@ class _MainAppState extends State<MainApp> {
                             enableDrag: true,
                             onEntryMoved: _onEntryMoved,
                             onEntryResized: _onEntryResized,
+                            onEntrySelected: _onEntrySelected,
+                            selectedEntryId: _state?.selectedItemId,
                           ),
                         ),
                       ),

packages/z-flutter/packages/z_timeline/lib/src/widgets/event_pill.dart

@@ -5,10 +5,16 @@ import '../constants.dart';
 /// A standalone event pill widget with entry color, rounded corners,
 /// and auto text color based on brightness.
 class EventPill extends StatelessWidget {
-  const EventPill({required this.color, required this.label, super.key});
+  const EventPill({
+    required this.color,
+    required this.label,
+    this.isSelected = false,
+    super.key,
+  });
 
   final Color color;
   final String label;
+  final bool isSelected;
 
   @override
   Widget build(BuildContext context) {
@@ -17,6 +23,8 @@ class EventPill extends StatelessWidget {
         ? Colors.white
         : Colors.black87;
 
+    final primaryColor = Theme.of(context).colorScheme.primary;
+
     return Container(
       padding: ZTimelineConstants.pillPadding,
       decoration: BoxDecoration(
@@ -24,6 +32,9 @@ class EventPill extends StatelessWidget {
         borderRadius: BorderRadius.circular(
           ZTimelineConstants.pillBorderRadius,
         ),
+        border: isSelected
+            ? Border.all(color: primaryColor, width: 2)
+            : null,
       ),
       alignment: Alignment.centerLeft,
       child: Text(

packages/z-flutter/packages/z_timeline/lib/src/widgets/event_point.dart

@@ -10,11 +10,13 @@ class EventPoint extends StatelessWidget {
     required this.color,
     required this.label,
     this.maxTextWidth,
+    this.isSelected = false,
     super.key,
   });
 
   final Color color;
   final String label;
+  final bool isSelected;
 
   /// Maximum width for the label text. When provided, text truncates with
   /// ellipsis. When null the text sizes naturally.
@@ -49,6 +51,12 @@ class EventPoint extends StatelessWidget {
           decoration: BoxDecoration(
             color: color,
             shape: BoxShape.circle,
+            border: isSelected
+                ? Border.all(
+                    color: Theme.of(context).colorScheme.primary,
+                    width: 2,
+                  )
+                : null,
           ),
         ),
         if (showText) ...[

packages/z-flutter/packages/z_timeline/lib/src/widgets/interactive_event_pill.dart

@@ -31,6 +31,8 @@ class InteractiveEventPill extends StatefulWidget {
     this.allEntries = const [],
     this.onEntryResized,
     this.onEntryMoved,
+    this.onEntrySelected,
+    this.selectedEntryId,
     this.groupRegistry,
     this.nextEntryStartX,
     super.key,
@@ -46,6 +48,8 @@ class InteractiveEventPill extends StatefulWidget {
   final List<TimelineEntry> allEntries;
   final OnEntryResized? onEntryResized;
   final OnEntryMoved? onEntryMoved;
+  final OnEntrySelected? onEntrySelected;
+  final String? selectedEntryId;
   final TimelineGroupRegistry? groupRegistry;
 
   /// Normalized startX of the next entry in the same lane, used to compute
@@ -285,6 +289,7 @@ class _InteractiveEventPillState extends State<InteractiveEventPill> {
     final isPoint = !widget.entry.entry.hasEnd;
     final color = widget.colorBuilder(widget.entry.entry);
     final label = widget.labelBuilder(widget.entry.entry);
+    final isSelected = widget.entry.entry.id == widget.selectedEntryId;
 
     final top = LayoutCoordinateService.laneToY(
       lane: widget.entry.entry.lane,
@@ -312,6 +317,7 @@ class _InteractiveEventPillState extends State<InteractiveEventPill> {
         color: color,
         label: label,
         maxTextWidth: maxTextWidth > 0 ? maxTextWidth : 0,
+        isSelected: isSelected,
       );
 
       if (!widget.enableDrag) {
@@ -355,7 +361,7 @@ class _InteractiveEventPillState extends State<InteractiveEventPill> {
     }
 
     // Range event (hasEnd == true)
-    final pill = EventPill(color: color, label: label);
+    final pill = EventPill(color: color, label: label, isSelected: isSelected);
     final width = _pillWidth;
 
     if (!widget.enableDrag) {
@@ -434,6 +440,7 @@ class _InteractiveEventPillState extends State<InteractiveEventPill> {
         onExit: (_) => _onHoverExit(),
         child: GestureDetector(
           behavior: HitTestBehavior.opaque,
+          onTap: () => widget.onEntrySelected?.call(widget.entry.entry),
           onPanDown: _onPanDown,
           onPanStart: _onPanStart,
           onPanUpdate: _onPanUpdate,
@@ -453,6 +460,7 @@ class _InteractiveEventPillState extends State<InteractiveEventPill> {
       onExit: (_) => _onHoverExit(),
       child: GestureDetector(
         behavior: HitTestBehavior.opaque,
+        onTap: () => widget.onEntrySelected?.call(widget.entry.entry),
         onPanDown: _onPanDown,
         onPanStart: _onPanStart,
         onPanUpdate: _onPanUpdate,

packages/z-flutter/packages/z_timeline/lib/src/widgets/timeline_interactor.dart

@@ -27,6 +27,7 @@ class ZTimelineInteractor extends StatefulWidget {
   const ZTimelineInteractor({
     required this.child,
     this.autofocus = true,
+    this.onBackgroundTap,
     super.key,
   });
 
@@ -36,6 +37,9 @@ class ZTimelineInteractor extends StatefulWidget {
   /// Whether to automatically focus this widget for keyboard input.
   final bool autofocus;
 
+  /// Called when the user taps empty space (not on a pill/entry).
+  final VoidCallback? onBackgroundTap;
+
   @override
   State<ZTimelineInteractor> createState() => _ZTimelineInteractorState();
 }
@@ -231,6 +235,7 @@ class _ZTimelineInteractorState extends State<ZTimelineInteractor> {
               );
             },
             child: GestureDetector(
+              onTap: widget.onBackgroundTap,
               onScaleStart: _handleScaleStart,
               onScaleUpdate: _handleScaleUpdate,
               onScaleEnd: _handleScaleEnd,

packages/z-flutter/packages/z_timeline/lib/src/widgets/timeline_view.dart

@@ -33,6 +33,9 @@ typedef OnEntryResized =
       int newLane,
     );
 
+/// Callback signature for when an entry is tapped / selected.
+typedef OnEntrySelected = void Function(TimelineEntry entry);
+
 /// Base timeline view: renders groups with between-group headers and
 /// lane rows containing event pills.
 class ZTimelineView extends StatelessWidget {
@@ -47,7 +50,9 @@ class ZTimelineView extends StatelessWidget {
     this.groupHeaderHeight = ZTimelineConstants.groupHeaderHeight,
     this.onEntryMoved,
     this.onEntryResized,
+    this.onEntrySelected,
     this.enableDrag = true,
+    this.selectedEntryId,
   });
 
   final List<TimelineGroup> groups;
@@ -67,9 +72,15 @@ class ZTimelineView extends StatelessWidget {
   /// Callback invoked when an entry is resized via edge drag.
   final OnEntryResized? onEntryResized;
 
+  /// Callback invoked when an entry is tapped / selected.
+  final OnEntrySelected? onEntrySelected;
+
   /// Whether drag-and-drop is enabled.
   final bool enableDrag;
 
+  /// ID of the currently selected entry, if any.
+  final String? selectedEntryId;
+
   @override
   Widget build(BuildContext context) {
     return AnimatedBuilder(
@@ -112,6 +123,8 @@ class ZTimelineView extends StatelessWidget {
                       enableDrag: enableDrag,
                       onEntryResized: onEntryResized,
                       onEntryMoved: onEntryMoved,
+                      onEntrySelected: onEntrySelected,
+                      selectedEntryId: selectedEntryId,
                     ),
                   ],
                 );
@@ -171,6 +184,8 @@ class _GroupLanes extends StatefulWidget {
     required this.enableDrag,
     this.onEntryResized,
     this.onEntryMoved,
+    this.onEntrySelected,
+    this.selectedEntryId,
   });
 
   final TimelineGroup group;
@@ -185,6 +200,8 @@ class _GroupLanes extends StatefulWidget {
   final bool enableDrag;
   final OnEntryResized? onEntryResized;
   final OnEntryMoved? onEntryMoved;
+  final OnEntrySelected? onEntrySelected;
+  final String? selectedEntryId;
 
   @override
   State<_GroupLanes> createState() => _GroupLanesState();
@@ -330,6 +347,8 @@ class _GroupLanesState extends State<_GroupLanes> {
               allEntries: widget.allEntries,
               onEntryResized: widget.onEntryResized,
               onEntryMoved: widget.onEntryMoved,
+              onEntrySelected: widget.onEntrySelected,
+              selectedEntryId: widget.selectedEntryId,
               groupRegistry: scope?.groupRegistry,
               nextEntryStartX: _findNextEntryStartX(
                 widget.entries,

packages/z-flutter/web/index.html

@@ -269,9 +269,11 @@
         }
         case "item_selected":
           currentState.selectedItemId = event.payload.itemId;
+          pushState(currentState);
           break;
         case "item_deselected":
           currentState.selectedItemId = null;
+          pushState(currentState);
           break;
       }
     }