Fix settings saving

frontend/src/components/Editor.js

@@ -8,7 +8,7 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { useWorkspace } from '../contexts/WorkspaceContext';
 
 const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
-  const { settings } = useWorkspace();
+  const { colorScheme } = useWorkspace();
   const editorRef = useRef();
   const viewRef = useRef();
 
@@ -27,12 +27,12 @@ const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
         overflow: 'auto',
       },
       '.cm-gutters': {
-        backgroundColor: settings.theme === 'dark' ? '#1e1e1e' : '#f5f5f5',
-        color: settings.theme === 'dark' ? '#858585' : '#999',
+        backgroundColor: colorScheme === 'dark' ? '#1e1e1e' : '#f5f5f5',
+        color: colorScheme === 'dark' ? '#858585' : '#999',
         border: 'none',
       },
       '.cm-activeLineGutter': {
-        backgroundColor: settings.theme === 'dark' ? '#2c313a' : '#e8e8e8',
+        backgroundColor: colorScheme === 'dark' ? '#2c313a' : '#e8e8e8',
       },
     });
 
@@ -56,7 +56,7 @@ const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
           }
         }),
         theme,
-        settings.theme === 'dark' ? oneDark : [],
+        colorScheme === 'dark' ? oneDark : [],
       ],
     });
 
@@ -70,7 +70,7 @@ const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
     return () => {
       view.destroy();
     };
-  }, [settings.theme, handleContentChange]);
+  }, [colorScheme, handleContentChange]);
 
   useEffect(() => {
     if (viewRef.current && content !== viewRef.current.state.doc.toString()) {

frontend/src/components/Layout.js

@@ -36,8 +36,8 @@ const Layout = () => {
           p={0}
           style={{
             display: 'flex',
-            height: 'calc(100vh - 60px - 2rem)',
-            overflow: 'hidden',
+            height: 'calc(100vh - 60px - 2rem)', // Subtracting header height and vertical padding
+            overflow: 'hidden', // Prevent scrolling in the container
           }}
         >
           <Sidebar

frontend/src/components/Settings.js

@@ -38,19 +38,13 @@ function settingsReducer(state, action) {
         initialSettings: state.localSettings,
         hasUnsavedChanges: false,
       };
-    case 'RESET':
-      return {
-        ...state,
-        localSettings: state.initialSettings,
-        hasUnsavedChanges: false,
-      };
     default:
       return state;
   }
 }
 
 const Settings = () => {
-  const { settings, updateSettings, colorScheme } = useWorkspace();
+  const { settings, updateSettings } = useWorkspace();
   const { settingsModalVisible, setSettingsModalVisible } = useModalContext();
   const [state, dispatch] = useReducer(settingsReducer, initialState);
   const isInitialMount = useRef(true);
@@ -62,13 +56,6 @@ const Settings = () => {
     }
   }, [settings]);
 
-  useEffect(() => {
-    dispatch({
-      type: 'UPDATE_LOCAL_SETTINGS',
-      payload: { theme: colorScheme },
-    });
-  }, [colorScheme]);
-
   const handleInputChange = useCallback((key, value) => {
     dispatch({ type: 'UPDATE_LOCAL_SETTINGS', payload: { [key]: value } });
   }, []);
@@ -92,11 +79,8 @@ const Settings = () => {
   };
 
   const handleClose = useCallback(() => {
-    if (state.hasUnsavedChanges) {
-      dispatch({ type: 'RESET' });
-    }
     setSettingsModalVisible(false);
-  }, [state.hasUnsavedChanges, setSettingsModalVisible]);
+  }, [setSettingsModalVisible]);
 
   return (
     <Modal

frontend/src/components/settings/AppearanceSettings.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { Text, Switch, Group, Box, Title } from '@mantine/core';
 import { useWorkspace } from '../../contexts/WorkspaceContext';
 
-const AppearanceSettings = ({ onThemeChange }) => {
-  const { colorScheme, toggleColorScheme } = useWorkspace();
+const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
+  const { colorScheme, updateColorScheme } = useWorkspace();
 
   const handleThemeChange = () => {
-    toggleColorScheme();
-    onThemeChange(colorScheme === 'dark' ? 'light' : 'dark');
+    const newTheme = colorScheme === 'dark' ? 'light' : 'dark';
+    updateColorScheme(newTheme);
+    onThemeChange(newTheme);
   };
 
   return (