Refactor updating how widgets work and removed prop drilling

client/src/components/Canvas/views/Admin.jsx

@@ -4,7 +4,7 @@ import { ProjectCollector } from './AdminTabs/ProjectCollector';
 import { NASApplication } from './AdminTabs/NASApplication';
 import { IVANS } from './AdminTabs/IVANS'
 import { SearchBar } from "../CanvasComponents/SearchBar";
-import { SettingsButton } from "../CanvasComponents/SettingsButton";
+import { SettingsButton } from "../../SettingsButton.jsx";
 import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
 import { ADMIN_TABS } from '@/constants/viewKeys';
 

client/src/components/Canvas/views/Home.jsx

@@ -1,13 +1,13 @@
 import { HStack, Flex, Box } from "@chakra-ui/react";
 import { NavLink, Outlet, useLocation } from "react-router-dom";
 import { SearchBar } from "../CanvasComponents/SearchBar";
-import { SettingsButton } from "../CanvasComponents/SettingsButton";
+import { SettingsButton } from "../../SettingsButton.jsx";
 
 export default function Home() {
   const location = useLocation();
   const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
 
-  // 1. 🎨 CSS Magic: Replicates Chakra's `<Tabs variant="line">` exactly
+  // 1. CSS making this look like how we want it, TODO turn to theme?
   const tabStyles = {
     fontSize: "lg",
     fontWeight: "normal",

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -1,74 +1,70 @@
-import GridLayout, { WidthProvider } from 'react-grid-layout';
-import { useSlotRecipe, chakra, Flex, SimpleGrid } from '@chakra-ui/react';
-import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
-import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
+import { Box, Text, Flex } from "@chakra-ui/react";
+import { Responsive, WidthProvider } from "react-grid-layout";
+import { useDashboardStore } from "@/store/useDashboardStore.jsx";
 
-export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
-  const recipe = useSlotRecipe({ key: "widget" });
-  const styles = recipe(); // using root recipe for widget below
-  const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
-  const handleDragStart = () => { document.body.style.userSelect = "none"; }; // don't allow text highlighting when dragging
-  const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
-  let merged = [];
+// React-Grid-Layout requires this wrapper to automatically calculate screen width
+const ResponsiveGridLayout = WidthProvider(Responsive);
 
-  if (widgetArray.length && layout.length) {
-    const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
-    merged = layout.map(item => {
-      return {
-        ...item,
-        ...widgetMap.get(item.i)
-      };
-    });
-  }
+export default function MyDashboard() {
+  // 1. ☁️ Connect to the Cloud (Zustand)
+  const widgets = useDashboardStore(state => state.widgets);
+  const isEditing = useDashboardStore(state => state.isEditing);
+  const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
 
-  // Show large 'Add Widget' button when dashboard is empty
-  if ( !layout.length ) {
-    return (
-      <Flex
-        align="center"
-        justify="center"
-        h="100%"
-        w="100%"
-        bg="gray.150"
-        borderRadius="md"
-      >
-        <FirstWidgetButton appendWidget={ appendWidget } />
-      </Flex>
-    );
-  }
+  // 2. 🛠️ Format the data for RGL
+  // RGL expects a very specific array format for its layout prop
+  const rglLayout = widgets.map(w => ({
+    i: w.id,
+    x: w.x,
+    y: w.y,
+    w: w.w,
+    h: w.h,
+    isResizable: false // 🚫 The magic lock! No resizing allowed globally.
+  }));
 
-  // Show responsive grid of widgets 
   return (
-    <ResponsiveGridLayout
-      useCSSTransforms={false}  // remove the sliding animation of the widgets
-      className="layout"
-      layout={layout}
-      cols={16} // Total columns in grid
-      rowHeight={40} // Height of a single row in px
-      isBounded={true} // Total width of the grid
-      margin={[15, 5]} // [horizontal, vertical] gap
-      onLayoutChange={onLayoutChange}
-      draggableHandle=".widget-handle" // Make only the header draggable
-      onDragStart={handleDragStart}
-      onDragStop={handleDragStop}
-      position="relative"
-      resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
-    >
-       { merged.map((item) => {
-          const Widget = item.widget;
-          return (
-            <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
-              <Widget
-                id={item.i}
-                isEditable={isEditable}
-                isDelete={isDelete}
-                DeleteWidget={DeleteWidget}
-                appendWidget={appendWidget}
-              />
+      <Box width="100%" height="100%">
+        <ResponsiveGridLayout
+            className="layout"
+            layouts={{ lg: rglLayout }} // We feed it the formatted layout map
+            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+            cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} // Our 12-column master grid
+            rowHeight={30}
+            isDraggable={isEditing}     // Only allows dragging when your Settings tools toggle this
+            isResizable={false}         // Double lock-down
+            onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
+            compactType="vertical"      // Auto-packs widgets to the top
+        >
+          {/* 3. 🎨 Paint the Widgets */}
+          {widgets.map(widget => (
+              <Box
+                  key={widget.id}
+                  bg="white"
+                  borderRadius="md"
+                  boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
+                  border={isEditing ? "2px dashed gray" : "1px solid"}
+                  borderColor={isEditing ? "gray.400" : "gray.200"}
+                  overflow="hidden"
+                  cursor={isEditing ? "grab" : "default"}
+              >
+                {/* 🚧 Temporary Placeholder!
+              Eventually, we will swap this block out for a dynamic component loader
+              that looks at widget.type and loads the correct graph or table.
+            */}
+                <Flex width="100%" height="100%" align="center" justify="center" direction="column">
+                  <Text fontWeight="bold" color="gray.600">{widget.type}</Text>
+                  <Text fontSize="sm" color="gray.400">Size: {widget.size}</Text>
+                </Flex>
+              </Box>
+          ))}
+        </ResponsiveGridLayout>
+
+        {/* Empty State Helper */}
+        {widgets.length === 0 && (
+            <Flex width="100%" height="200px" align="center" justify="center">
+              <Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
             </Flex>
-          );
-        })
-      }
-    </ResponsiveGridLayout>
+        )}
+      </Box>
   );
-}
+}

client/src/components/Canvas/views/Volcano.jsx

@@ -8,7 +8,7 @@ import { Reports } from './VolcanoTabs/Reports';
 import { OfficialInstitutions } from './VolcanoTabs/OfficialInstitutions';
 import { SocialMedia } from './VolcanoTabs/SocialMedia';
 import { SearchBar } from "../CanvasComponents/SearchBar";
-import { SettingsButton } from "../CanvasComponents/SettingsButton";
+import { SettingsButton } from "../../SettingsButton.jsx";
 
 export default function Volcano() {
     return (