Fix settings not closing on submit bug

backend/internal/api/handlers.go

@@ -120,6 +120,15 @@ func UpdateSettings(db *db.DB) http.HandlerFunc {
 			return
 		}
 
+		// Fetch the saved settings to return
+		savedSettings, err := db.GetSettings(settings.UserID)
+		if err != nil {
+			http.Error(w, "Settings saved but could not be retrieved", http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
 		w.WriteHeader(http.StatusOK)
+		json.NewEncoder(w).Encode(savedSettings)
 	}
 }

frontend/src/App.js

@@ -34,15 +34,15 @@ function App() {
     loadUserSettings();
   }, [userId]);
 
-  const toggleTheme = () => {
+  const setTheme = (newTheme) => {
-    setThemeType(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+    setThemeType(newTheme);
   };
 
   return (
     <GeistProvider themeType={themeType}>
       <CssBaseline />
       <Page>
-        <Header currentTheme={themeType} onThemeChange={toggleTheme} />
+        <Header currentTheme={themeType} onThemeChange={setTheme} />
         <Page.Content>
           <MainContent
             content={content}

frontend/src/components/Settings.js

@@ -1,30 +1,35 @@
 import React, { useState } from 'react';
-import { Modal, Text, Toggle, Tooltip, Spacer, useTheme } from '@geist-ui/core';
+import { Modal, Text, Toggle, Tooltip, Spacer, useTheme, useToasts } from '@geist-ui/core';
 import { saveUserSettings } from '../services/api';
 
 const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
   const theme = useTheme();
   const [autoSave, setAutoSave] = useState(false);
   const userId = 1;
+  const { setToast } = useToasts();
 
   const handleSubmit = async () => {
     try {
-      await saveUserSettings({
+      const savedSettings = await saveUserSettings({
         userId: userId,
         settings: {
           theme: currentTheme,
           autoSave: autoSave
         }
       });
+      setToast({ text: 'Settings saved successfully', type: 'success' });
+      // Update local state with saved settings
+      setAutoSave(savedSettings.settings.autoSave);
+      onThemeChange(savedSettings.settings.theme);
       onClose();
     } catch (error) {
       console.error('Failed to save settings:', error);
-      // You might want to show an error message to the user here
+      setToast({ text: 'Failed to save settings: ' + error.message, type: 'error' });
     }
   };
 
   const handleThemeChange = () => {
-    onThemeChange();
+    onThemeChange(currentTheme === 'light' ? 'dark' : 'light');
   };
 
   const disabledMessage = "This feature is not yet implemented";

frontend/src/services/api.js

@@ -64,10 +64,14 @@ export const saveUserSettings = async (settings) => {
             },
             body: JSON.stringify(settings),
         });
+
         if (!response.ok) {
-            throw new Error('Failed to save user settings');
+            const errorData = await response.json().catch(() => null);
+            throw new Error(errorData?.message || `HTTP error! status: ${response.status}`);
         }
-        return await response.json();
+
+        const savedSettings = await response.json();
+        return savedSettings;
     } catch (error) {
         console.error('Error saving user settings:', error);
         throw error;