Added saves state of dashboard and reloads it now

client/src/components/dashboard/SettingsButton.jsx

@@ -20,14 +20,21 @@ export function SettingsButton() {
     // 1. ☁Store connections
     const isEditing = useDashboardStore(state => state.isEditing);
     const enterEditMode = useDashboardStore(state => state.enterEditMode);
+
+    // This now handles both local UI lock AND database saving!
     const saveEdit = useDashboardStore(state => state.saveEdit);
+
     const cancelEdit = useDashboardStore(state => state.cancelEdit);
     const addWidget = useDashboardStore(state => state.addWidget);
 
-    // 2. Local state to control the Widget Library popup independently of the dropdown
     const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
-    // 3. Categorize widgets for the tabs
+    // Smart Add Handler
+    const handleAddWidget = (widgetId, sizeKey) => {
+        enterEditMode();
+        addWidget(widgetId, sizeKey);
+    };
+
     const categorizedWidgets = useMemo(() => {
         return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
             const cat = widget.category || 'General';
@@ -46,24 +53,24 @@ export function SettingsButton() {
                 <Menu.Trigger asChild>
                     <IconButton
                         aria-label="Settings"
-                        bg="vdap.darkGreen" // Or #1a2e24
+                        bg="vdap.darkGreen"
                         color="white"
                         size="sm"
                         borderRadius="md"
-                        _hover={{ bg: "vdap.darkGreenHover" }} // Or #111f18
+                        _hover={{ bg: "vdap.darkGreenHover" }}
                     >
                         <Settings size={18} />
                     </IconButton>
                 </Menu.Trigger>
 
                 <Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
-
-                    {/* Dynamic Menu Options: What shows up depends on isEditing */}
                     {isEditing ? (
                         <>
+                            {/* WIRE DIRECTLY TO saveEdit */}
                             <Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
                                 <Save size={16} style={{ marginRight: '8px' }} /> Save Layout
                             </Menu.Item>
+
                             <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
                                 <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
                             </Menu.Item>
@@ -79,7 +86,6 @@ export function SettingsButton() {
                     <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
                         <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
                     </Menu.Item>
-
                 </Menu.Content>
             </Menu.Root>
 
@@ -88,7 +94,6 @@ export function SettingsButton() {
                 <Dialog.Backdrop bg="blackAlpha.600" />
                 <Dialog.Positioner>
                     <Dialog.Content bg="gray.50" borderRadius="xl" overflow="hidden" boxShadow="xl" maxW="800px">
-
                         <Dialog.Header bg="vdap.darkGreen" color="white" py={4}>
                             <Dialog.Title fontSize="xl" fontWeight="bold">Add Dashboard Widgets</Dialog.Title>
                         </Dialog.Header>
@@ -116,7 +121,7 @@ export function SettingsButton() {
                                                                 <Badge
                                                                     key={sizeKey}
                                                                     as="button"
-                                                                    onClick={() => addWidget(widget.id, sizeKey)}
+                                                                    onClick={() => handleAddWidget(widget.id, sizeKey)}
                                                                     colorScheme="gray"
                                                                     variant="subtle"
                                                                     px={3}