switch to props on new step (#50)

Author: ctate

components/workflow/workflow-canvas.tsx

@@ -34,6 +34,7 @@ import {
   nodesAtom,
   onEdgesChangeAtom,
   onNodesChangeAtom,
+  propertiesPanelActiveTabAtom,
   rightPanelWidthAtom,
   selectedEdgeAtom,
   selectedNodeAtom,
@@ -95,6 +96,7 @@ export function WorkflowCanvas() {
   const addNode = useSetAtom(addNodeAtom);
   const setHasUnsavedChanges = useSetAtom(hasUnsavedChangesAtom);
   const triggerAutosave = useSetAtom(autosaveAtom);
+  const setActiveTab = useSetAtom(propertiesPanelActiveTabAtom);
   const { screenToFlowPosition, fitView, getViewport, setViewport } =
     useReactFlow();
 
@@ -369,6 +371,7 @@ export function WorkflowCanvas() {
 
         addNode(newNode);
         setSelectedNode(newNode.id);
+        setActiveTab("properties");
 
         // Deselect all other nodes and select only the new node
         // Need to do this after a delay because panOnDrag will clear selection
@@ -411,6 +414,7 @@ export function WorkflowCanvas() {
       setEdges,
       setNodes,
       setSelectedNode,
+      setActiveTab,
       setHasUnsavedChanges,
       triggerAutosave,
     ]

components/workflow/workflow-context-menu.tsx

@@ -11,6 +11,7 @@ import {
   deleteEdgeAtom,
   deleteNodeAtom,
   nodesAtom,
+  propertiesPanelActiveTabAtom,
   selectedNodeAtom,
   type WorkflowNode,
 } from "@/lib/workflow-store";
@@ -39,6 +40,7 @@ export function WorkflowContextMenu({
   const deleteEdge = useSetAtom(deleteEdgeAtom);
   const addNode = useSetAtom(addNodeAtom);
   const setSelectedNode = useSetAtom(selectedNodeAtom);
+  const setActiveTab = useSetAtom(propertiesPanelActiveTabAtom);
   const menuRef = useRef<HTMLDivElement>(null);
 
   const handleDeleteNode = useCallback(() => {
@@ -76,9 +78,10 @@ export function WorkflowContextMenu({
       };
       addNode(newNode);
       setSelectedNode(newNode.id);
+      setActiveTab("properties");
     }
     onClose();
-  }, [menuState, addNode, setSelectedNode, onClose]);
+  }, [menuState, addNode, setSelectedNode, setActiveTab, onClose]);
 
   // Close menu when clicking outside
   useEffect(() => {

components/workflow/workflow-toolbar.tsx

@@ -686,6 +686,8 @@ function ToolbarActions({
     };
 
     state.addNode(newNode);
+    state.setSelectedNodeId(newNode.id);
+    state.setActiveTab("properties");
   };
 
   return (