Add new add widget behavior. Edit mode is enabled upon 'Add Widget' and user must either Save/Cancel their changes before navigating away from My Dashboard

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -14,42 +14,53 @@ import DeleteAllButton from "../components/DeleteAllButton";
 export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
   const [newCounter, setNewCounter] = useState(3);
 
+  // Adding a widget triggers Edit mode
   const onAddWidget = () => {
     const newId = newCounter.toString();
+    
     setLayout(prev => [
-    ...prev,
+      ...prev,
     {
       i: newId,
       x: (prev.length * 3) % 12,
       y: Infinity, 
       w: 3, 
       h: 3,
+      static: false,
     }
     ]);
     setNewCounter(prev => prev + 1);
+    onEditWidgets();
   };
 
-  useEffect(() => {
-    console.log("static change effect");
-    setLayout(prevLayout => 
-      prevLayout.map(item => ({
-        ...item,
-        static: !isEditable  // static false means resizable/editable
-      }))
-    );
-  }, [isEditable]);
-
   const onEditWidgets = () => {
     console.log("widgets are now editable");
     setOriginalLayout(layout); // Backup layout before editing
+    
+    // Set all widgets to editable, static: false
+    setLayout(prevLayout =>
+      prevLayout.map(item => ({
+        ...item, 
+        static: false
+      }))
+    );
     setIsEditable(true); // Enable edit mode
   }
 
   const onSave = () => {
     console.log("saving widgets...");
+
+    // Set all widgets back to static: true
+    setLayout(prevLayout => 
+      prevLayout.map(item => ({
+        ...item,
+        static: true
+    }))
+  );
+
     setIsEditable(false);
     setIsDelete(false);
-    setOriginalLayout([]) // Clear backup layout
+    setOriginalLayout([]); // Clear backup layout
   }
 
   const onDeleteWidgets = () => {