feat: add resizable flow column width with state persistence and delete confirmation dialog

Author: Korolev, Alexey (ak3140)

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 
 ### Added
+- **Flow Column Resizing**: Navigational flow row columns on the left can now be fully resized by horizontally dragging their edges, and are permanently tracked via `localStorage` alongside JSON outputs.
 - **Event Duplication**: Added a 'Duplicate' button when hovering over events that seamlessly clones the event and places it sequentially into the earliest non-overlapping slot.
 - **Cross-Flow Drag**: Allowed dragging and dropping events vertically between different flows seamlessly.
 - **Undo/Redo**: Integrated `zundo` for state management and created `UndoRedoControls` component.

src/components/FlowRow.tsx

@@ -15,7 +15,7 @@ interface FlowRowProps {
 export const FlowRow: React.FC<FlowRowProps> = (
   { flow, events, maxEndTime }
 ) => {
-  const { removeFlow, updateFlowTitle, toggleFlowVisibility } =
+  const { removeFlow, updateFlowTitle, toggleFlowVisibility, flowColumnWidth } =
     useTimelineStore();
   const [isRenaming, setIsRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState(flow.title);
@@ -49,9 +49,10 @@ export const FlowRow: React.FC<FlowRowProps> = (
         transition-colors ${hidden ? 'h-8' : 'h-14'}
         ${hidden ? 'bg-gray-100/50 opacity-60' : 'hover:bg-gray-50/50'}`}
     >
-      <div className="w-48 shrink-0 bg-gray-100 border-r border-gray-200
-        flex items-center px-2 py-1 relative z-10
-        shadow-[1px_0_0_rgba(0,0,0,0.1)] justify-between">
+      <div 
+        className="shrink-0 bg-gray-100 border-r border-gray-200 flex items-center px-2 py-1 relative z-10 justify-between shadow-[1px_0_0_rgba(0,0,0,0.1)] bg-gray-100 sticky left-0"
+        style={{ width: flowColumnWidth, minWidth: flowColumnWidth, maxWidth: flowColumnWidth }}
+      >
         <div className="flex items-center gap-1 overflow-hidden">
           <div {...attributes} {...listeners}
             className="cursor-grab text-gray-400 hover:text-gray-600">
@@ -86,7 +87,11 @@ export const FlowRow: React.FC<FlowRowProps> = (
             title={hidden ? 'Show Flow' : 'Hide Flow'}>
             {hidden ? <EyeOff size={14} /> : <Eye size={14} />}
           </button>
-          <button onClick={() => removeFlow(flow.id)}
+          <button onClick={() => {
+            if (window.confirm('Are you sure you want to delete this flow and all its events?')) {
+              removeFlow(flow.id);
+            }
+          }}
             className="text-gray-400 hover:text-red-500
               opacity-0 group-hover:opacity-100 transition-opacity p-1"
             title="Delete Flow">

src/components/Timeline/TimelineAxis.tsx

@@ -1,15 +1,58 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
+import { useTimelineStore } from '../../store/timelineStore';
 
 interface TimelineAxisProps {
   ticks: number[];
   maxEndTime: number;
 }
 
 export const TimelineAxis: React.FC<TimelineAxisProps> = ({ ticks, maxEndTime }) => {
+  const { flowColumnWidth, setFlowColumnWidth } = useTimelineStore();
+  const draggingRef = useRef<boolean>(false);
+  const startXRef = useRef<number>(0);
+  const startWidthRef = useRef<number>(0);
+
+  useEffect(() => {
+    const handlePointerMove = (e: PointerEvent) => {
+      if (!draggingRef.current) return;
+      
+      const delta = e.pageX - startXRef.current;
+      const newWidth = Math.max(100, Math.min(600, startWidthRef.current + delta));
+      setFlowColumnWidth(newWidth);
+    };
+
+    const handlePointerUp = () => {
+      if (draggingRef.current) {
+        draggingRef.current = false;
+        document.body.style.cursor = '';
+      }
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [setFlowColumnWidth]);
+
   return (
     <div className="flex bg-gray-50 border-b border-gray-200 sticky top-0 z-10">
-      <div className="w-48 shrink-0 bg-gray-100 border-r border-gray-200 flex items-center p-2 text-gray-700 font-semibold sticky left-0 z-20 shadow-[1px_0_0_rgba(0,0,0,0.1)]">
-        Flows
+      <div 
+        className="shrink-0 bg-gray-100 border-r border-gray-200 flex items-center p-2 text-gray-700 font-semibold sticky left-0 z-20 shadow-[1px_0_0_rgba(0,0,0,0.1)] relative"
+        style={{ width: flowColumnWidth, minWidth: flowColumnWidth, maxWidth: flowColumnWidth }}
+      >
+        <span>Flows</span>
+        <div 
+          className="absolute top-0 right-0 bottom-0 w-2 cursor-col-resize hover:bg-blue-400 z-30 opacity-50 transition-colors translate-x-1/2"
+          onPointerDown={(e) => {
+            e.preventDefault();
+            draggingRef.current = true;
+            startXRef.current = e.pageX;
+            startWidthRef.current = flowColumnWidth;
+            document.body.style.cursor = 'col-resize';
+          }}
+        />
       </div>
       <div className="flex-grow relative h-10 min-w-[600px]">
         {ticks.map((tick) => (

src/components/Timeline/TimelineGrid.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
+import { useTimelineStore } from '../../store/timelineStore';
 
 interface TimelineGridProps {
   maxEndTime: number;
 }
 
 export const TimelineGrid: React.FC<TimelineGridProps> = ({ maxEndTime }) => {
+  const { flowColumnWidth } = useTimelineStore();
   const numMajorTicks = Math.ceil(maxEndTime / 1000);
   const majorTicks = Array.from({ length: numMajorTicks + 1 }, (_, i) => i * 1000);
 
   const numMinorTicks = Math.ceil(maxEndTime / 100);
   const minorTicks = Array.from({ length: numMinorTicks + 1 }, (_, i) => i * 100);
 
   return (
-    <div className="absolute top-0 bottom-0 left-48 right-0 pointer-events-none z-0 overflow-hidden">
+    <div 
+      className="absolute top-0 bottom-0 right-0 pointer-events-none z-0 overflow-hidden" 
+      style={{ left: flowColumnWidth }}
+    >
       {minorTicks.map((tick) => (
         <div
           key={`minor-${tick}`}

src/store/timelineStore.ts

@@ -10,6 +10,8 @@ interface TimelineState {
   events: TimelineEvent[];
   maxDuration: number;
   zoom: number;
+  flowColumnWidth: number;
+  setFlowColumnWidth: (width: number) => void;
   addFlow: (title: string) => void;
   removeFlow: (id: string) => void;
   updateFlowTitle: (id: string, title: string) => void;
@@ -32,7 +34,9 @@ export const useTimelineStore = create<TimelineState>()(
         events: [],
         maxDuration: 10000,
         zoom: 1,
+        flowColumnWidth: 192,
 
+        setFlowColumnWidth: (flowColumnWidth) => set({ flowColumnWidth }),
         setMaxDuration: (maxDuration) => set({ maxDuration }),
         setZoom: (zoom) => set({ zoom }),
         importData: (data) =>
@@ -119,6 +123,7 @@ export const useTimelineStore = create<TimelineState>()(
         events: state.events,
         maxDuration: state.maxDuration,
         zoom: state.zoom,
+        flowColumnWidth: state.flowColumnWidth,
       }),
     }
   )