Implement Settings context

frontend/src/contexts/SettingsContext.js

@@ -0,0 +1,66 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { fetchUserSettings, saveUserSettings } from '../services/api';
+
+const SettingsContext = createContext();
+
+export const useSettings = () => {
+  return useContext(SettingsContext);
+};
+
+export const SettingsProvider = ({ children }) => {
+  const [settings, setSettings] = useState({
+    theme: 'light',
+    autoSave: false,
+    gitEnabled: false,
+    gitUrl: '',
+    gitUser: '',
+    gitToken: '',
+    gitAutoCommit: false,
+    gitCommitMsgTemplate: '',
+  });
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        const userSettings = await fetchUserSettings(1); // Assuming user ID 1 for now
+        setSettings(userSettings.settings);
+      } catch (error) {
+        console.error('Failed to load user settings:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadSettings();
+  }, []);
+
+  const updateSettings = async (newSettings) => {
+    try {
+      await saveUserSettings({
+        userId: 1, // Assuming user ID 1 for now
+        settings: newSettings,
+      });
+      setSettings(newSettings);
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      throw error;
+    }
+  };
+
+  const updateTheme = (newTheme) => {
+    setSettings((prevSettings) => ({
+      ...prevSettings,
+      theme: newTheme,
+    }));
+  };
+
+  return (
+    <SettingsContext.Provider
+      value={{ settings, updateSettings, updateTheme, loading }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+};