added submenu to settings

widget information is now stored in two arrays. One array (widgetArray) holds the id and name/type of the widget. The second array (layout) holds the id, position, width, height, and static info

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

@@ -14,22 +14,21 @@ import DeleteAllButton from "../components/DeleteAllButton";
 export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
-  const [newCounter, setNewCounter] = useState(3);
   const [originalLayout, setOriginalLayout] = useState([]);
+  const [widgetArray, setWidgetArray] = useState([]);
 
-  const onAddWidget = () => {
-    const newId = newCounter.toString();
+  const onAddWidget = (ID) => {
     setLayout(prev => [
-    ...prev,
-    {
-      i: newId,
-      x: (prev.length * 3) % 12,
-      y: Infinity, 
-      w: 3, 
-      h: 3,
-    }
+      ...prev,
+      {
+        i: ID,
+        x: (prev.length * 3) % 12,
+        y: Infinity, 
+        w: 3, 
+        h: 3,
+        static: false
+      }
     ]);
-    setNewCounter(prev => prev + 1);
   };
 
   useEffect(() => {
@@ -78,6 +77,7 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
   const DeleteWidget = (id) => {
     console.log("Deleting widget with id: ", id);
     setLayout(layout => layout.filter(w => w.i !== id));
+    // add removal for widgetArray here
   }
 
   const DeleteAll = () => {
@@ -86,6 +86,7 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
     );
     if (confirm) {
       setLayout([]);
+      setWidgetArray([]);
       onSave();
     }
     else return;
@@ -157,6 +158,8 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
                 onAddWidget={ onAddWidget }
                 onEditWidgets={ onEditWidgets }
                 onDeleteWidgets={ onDeleteWidgets }
+                setWidgetArray={ setWidgetArray }
+                widgetArray={ widgetArray }
               />
             </>
           )}
@@ -166,11 +169,13 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       {/* CANVAS */}
       <Tabs.Content value="widget">
         <WidgetCanvas 
-          layout={layout}
-          onLayoutChange={onLayoutChange}
-          isEditable={isEditable}
-          isDelete={isDelete}
-          DeleteWidget={DeleteWidget}
+          layout={ layout }
+          onLayoutChange={ onLayoutChange }
+          isEditable={ isEditable }
+          isDelete={ isDelete }
+          DeleteWidget={ DeleteWidget }
+          setWidgetArray={ setWidgetArray }
+          widgetArray={ widgetArray }
         />
       </Tabs.Content>
       <Tabs.Content value="gas">