Fix settings persistence across different browsers and devices

- Added server-side storage for user settings
- Created API endpoints for user settings
- Updated client-side code to save and load settings from server
- Improved synchronization logic for all settings
- Updated CHANGELOG.md

Author: blink-zero

CHANGELOG.md

@@ -23,6 +23,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Added visual indicators showing whether Slack webhook is configured
   - Added visual indicators showing whether Email notifications are configured
   - Improved user experience with clear configuration status
+- Server-side storage for user settings:
+  - Added user_settings table to store user-specific settings
+  - Created API endpoints for retrieving and updating user settings
+  - Implemented server-side storage for session timeout settings
+  - Ensured settings persistence across different browsers and devices
 
 ### Fixed
 - Fixed automatic logout not working correctly on mobile devices:
@@ -32,6 +37,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Added localStorage-based timestamp tracking for more reliable inactivity detection
   - Improved logging for better debugging of activity detection
   - Updated tests to cover new mobile-specific functionality
+- Fixed settings not being saved properly across different browsers and devices:
+  - Implemented server-side storage for session timeout settings
+  - Improved synchronization logic for notification settings
+  - Added explicit save functionality to ensure settings are properly persisted
+  - Prioritized server settings over localStorage settings
+  - Enhanced error handling for failed server requests
 
 ### Improved
 - Enhanced documentation organization:
@@ -42,6 +53,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Added dedicated tab for application information
   - Improved navigation with clear tab labels and icons
   - Added status badges to notification settings for better visibility
+- Improved settings synchronization:
+  - Better handling of settings loading from server
+  - More reliable saving of settings to server
+  - Clearer feedback when settings are saved successfully
 
 ## [1.8.2] - 2025-02-28
 

client/src/components/notifications/NotificationSettings.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import axios from 'axios';
 import { FiBell, FiSave, FiChevronDown, FiChevronRight } from 'react-icons/fi';
 import { useSettings } from '../../context/SettingsContext';
 import DiscordNotificationSettings from './DiscordNotificationSettings';
@@ -16,7 +15,7 @@ import NotificationHistory from './NotificationHistory';
  * sections to reduce visual clutter and improve user experience.
  */
 const NotificationSettings = ({ setError, setSuccess }) => {
-  const { settings, updateSetting } = useSettings();
+  const { settings, updateSetting, saveNotificationSettings } = useSettings();
   const [isSaving, setIsSaving] = useState(false);
   const [expandedSections, setExpandedSections] = useState({
     discord: false,
@@ -38,27 +37,14 @@ const NotificationSettings = ({ setError, setSuccess }) => {
   const handleSaveSettings = async () => {
     setIsSaving(true);
     try {
-      // Convert client settings format to server format
-      const serverSettings = {
-        discord_webhook_url: settings.discordWebhookUrl,
-        slack_webhook_url: settings.slackWebhookUrl,
-        notifications_enabled: settings.notifications,
-        battery_notifications: settings.batteryNotifications,
-        low_battery_notifications: settings.lowBatteryNotifications,
-        email_notifications: settings.emailNotifications,
-        email_recipients: settings.emailRecipients
-      };
-
-      // Send settings to server
-      const response = await axios.post('/api/notifications/settings', serverSettings);
+      // Use the context function to save settings to server
+      await saveNotificationSettings();
 
       setSuccess('Notification settings saved successfully');
       setTimeout(() => setSuccess(null), 3000);
-      console.log('Saved notification settings to server:', response.data);
     } catch (err) {
       setError(err.response?.data?.message || 'Failed to save notification settings');
       setTimeout(() => setError(null), 5000);
-      console.error('Error saving settings to server:', err);
     } finally {
       setIsSaving(false);
     }

client/src/components/settings/PollingSettings.jsx

@@ -1,14 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FiSave, FiClock } from 'react-icons/fi';
 import { useSettings } from '../../context/SettingsContext';
 
 const PollingSettings = ({ pollInterval, setPollInterval, setSuccess }) => {
-  const { settings, updateSetting } = useSettings();
+  const { settings, updateSetting, saveUserSettings } = useSettings();
+  const [isSaving, setIsSaving] = useState(false);
 
-  const savePollInterval = () => {
-    updateSetting('pollInterval', pollInterval);
-    setSuccess('Poll interval updated successfully');
-    setTimeout(() => setSuccess(null), 3000);
+  const savePollInterval = async () => {
+    setIsSaving(true);
+    try {
+      // Update local setting
+      updateSetting('pollInterval', pollInterval);
+      
+      // Save to server
+      await saveUserSettings();
+      
+      setSuccess('Poll interval updated successfully and saved to server');
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (error) {
+      console.error('Error saving poll interval to server:', error);
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   return (
@@ -39,10 +52,11 @@ const PollingSettings = ({ pollInterval, setPollInterval, setSuccess }) => {
           <span className="text-sm font-medium text-gray-900 dark:text-white">{pollInterval}s</span>
           <button
             onClick={savePollInterval}
-            className="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+            disabled={isSaving}
+            className="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <FiSave className="mr-2 -ml-1 h-4 w-4" />
-            Save
+            {isSaving ? 'Saving...' : 'Save'}
           </button>
         </div>
       </div>

client/src/components/settings/ResetSettings.jsx

@@ -1,15 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FiRefreshCw } from 'react-icons/fi';
 import { useSettings } from '../../context/SettingsContext';
 
 const ResetSettings = ({ setPollInterval, setSuccess }) => {
-  const { resetSettings } = useSettings();
+  const { resetSettings, saveAllSettings } = useSettings();
+  const [isResetting, setIsResetting] = useState(false);
 
-  const handleResetSettings = () => {
-    resetSettings();
-    setPollInterval(30); // Default value
-    setSuccess('Settings reset to defaults');
-    setTimeout(() => setSuccess(null), 3000);
+  const handleResetSettings = async () => {
+    setIsResetting(true);
+    try {
+      // Reset local settings
+      resetSettings();
+      setPollInterval(30); // Default value
+      
+      // Save reset settings to server
+      await saveAllSettings();
+      
+      setSuccess('Settings reset to defaults and saved to server');
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (error) {
+      console.error('Error saving reset settings to server:', error);
+    } finally {
+      setIsResetting(false);
+    }
   };
 
   return (
@@ -21,10 +34,11 @@ const ResetSettings = ({ setPollInterval, setSuccess }) => {
       <div className="mt-2">
         <button
           onClick={handleResetSettings}
-          className="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+          disabled={isResetting}
+          className="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           <FiRefreshCw className="mr-2 -ml-1 h-4 w-4" />
-          Reset to Defaults
+          {isResetting ? 'Resetting...' : 'Reset to Defaults'}
         </button>
       </div>
     </div>

client/src/context/AuthContext.jsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import useInactivityTimer from '../hooks/useInactivityTimer';
-import { authAPI } from '../services/api';
+import { authAPI, userSettingsAPI } from '../services/api';
 import axios from 'axios'; // Still needed for setting default headers
 
 const AuthContext = createContext();
@@ -11,7 +11,7 @@ export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [inactivityTimeout, setInactivityTimeout] = useState(30); // Default 30 minutes
+  const [inactivityTimeout, setInactivityTimeout] = useState(30); // Default 30 minutes, will be updated from server
 
   // Logout user
   const logout = useCallback(() => {
@@ -29,6 +29,17 @@ export const AuthProvider = ({ children }) => {
     if (storedUser && token) {
       setUser(JSON.parse(storedUser));
       axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      
+      // Load user settings from server
+      userSettingsAPI.getSettings()
+        .then(response => {
+          if (response.data && response.data.inactivity_timeout) {
+            setInactivityTimeout(response.data.inactivity_timeout);
+          }
+        })
+        .catch(error => {
+          console.error('Error loading user settings:', error);
+        });
     }
 
     setLoading(false);
@@ -44,6 +55,15 @@ export const AuthProvider = ({ children }) => {
   // Update inactivity timeout
   const updateInactivityTimeout = useCallback((minutes) => {
     setInactivityTimeout(minutes);
+    
+    // Save to server
+    userSettingsAPI.updateSettings({ inactivity_timeout: minutes })
+      .then(response => {
+        console.log('Inactivity timeout saved to server:', response.data);
+      })
+      .catch(error => {
+        console.error('Error saving inactivity timeout to server:', error);
+      });
   }, []);
 
   // Check if this is the first time setup