refactor(settings): Update synchronization logic

static/js/core.js

@@ -7,7 +7,7 @@ import { HeaderManager } from './components/Header.js';
 import { settingsManager } from './managers/SettingsManager.js';
 import { moveManager } from './managers/MoveManager.js';
 import { bulkManager } from './managers/BulkManager.js';
-import { exampleImagesManager } from './managers/ExampleImagesManager.js';
+import { ExampleImagesManager } from './managers/ExampleImagesManager.js';
 import { helpManager } from './managers/HelpManager.js';
 import { bannerService } from './managers/BannerService.js';
 import { initTheme, initBackToTop } from './utils/uiHelpers.js';
@@ -50,7 +50,7 @@ export class AppCore {
         bannerService.initialize();
         window.modalManager = modalManager;
         window.settingsManager = settingsManager;
-        window.exampleImagesManager = exampleImagesManager;
+        window.exampleImagesManager = new ExampleImagesManager();
         window.helpManager = helpManager;
         window.moveManager = moveManager;
         window.bulkManager = bulkManager;

static/js/managers/ExampleImagesManager.js

@@ -1,9 +1,10 @@
 import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
+import { settingsManager } from './SettingsManager.js';
 
 // ExampleImagesManager.js
-class ExampleImagesManager {
+export class ExampleImagesManager {
     constructor() {
         this.isDownloading = false;
         this.isPaused = false;
@@ -27,7 +28,12 @@ class ExampleImagesManager {
     }
     
     // Initialize the manager
-    initialize() {
+    async initialize() {
+        // Wait for settings to be initialized before proceeding
+        if (window.settingsManager) {
+            await window.settingsManager.waitForInitialization();
+        }
+        
         // Initialize event listeners
         this.initEventListeners();
         
@@ -78,86 +84,41 @@ class ExampleImagesManager {
             // Get custom path input element
             const pathInput = document.getElementById('exampleImagesPath');
 
-            // Set path from storage if available
-            const savedPath = getStorageItem('example_images_path', '');
-            if (savedPath) {
+            // Set path from backend settings
+            const savedPath = state.global.settings.example_images_path || '';
+            if (pathInput) {
                 pathInput.value = savedPath;
                 // Enable download button if path is set
-                this.updateDownloadButtonState(true);
-                
-                // Sync the saved path with the backend
-                try {
-                    const response = await fetch('/api/settings', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            example_images_path: savedPath
-                        })
-                    });
-                    
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    
-                    const data = await response.json();
-                    if (!data.success) {
-                        console.error('Failed to sync example images path with backend:', data.error);
-                    }
-                } catch (error) {
-                    console.error('Failed to sync saved path with backend:', error);
-                }
-            } else {
-                // Disable download button if no path is set
-                this.updateDownloadButtonState(false);
+                this.updateDownloadButtonState(!!savedPath);
             }
             
             // Add event listener to validate path input
-            pathInput.addEventListener('input', async () => {
-                const hasPath = pathInput.value.trim() !== '';
-                this.updateDownloadButtonState(hasPath);
-                
-                // Save path to storage when changed
-                if (hasPath) {
-                    setStorageItem('example_images_path', pathInput.value);
+            if (pathInput) {
+                pathInput.addEventListener('input', async () => {
+                    const hasPath = pathInput.value.trim() !== '';
+                    this.updateDownloadButtonState(hasPath);
                     
-                    // Update path in backend settings
+                    // Update path in backend settings using settingsManager
                     try {
-                        const response = await fetch('/api/settings', {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                                example_images_path: pathInput.value
-                            })
-                        });
-                        
-                        if (!response.ok) {
-                            throw new Error(`HTTP error! Status: ${response.status}`);
-                        }
-                        
-                        const data = await response.json();
-                        if (!data.success) {
-                            console.error('Failed to update example images path in backend:', data.error);
-                        } else {
+                        await settingsManager.saveSetting('example_images_path', pathInput.value);
+                        if (hasPath) {
                             showToast('toast.exampleImages.pathUpdated', {}, 'success');
                         }
                     } catch (error) {
                         console.error('Failed to update example images path:', error);
+                        showToast('toast.exampleImages.pathUpdateFailed', { message: error.message }, 'error');
                     }
-                }
 
-                // Setup or clear auto download based on path availability
-                if (state.global.settings.autoDownloadExampleImages) {
-                    if (hasPath) {
-                        this.setupAutoDownload();
-                    } else {
-                        this.clearAutoDownload();
+                    // Setup or clear auto download based on path availability
+                    if (state.global.settings.autoDownloadExampleImages) {
+                        if (hasPath) {
+                            this.setupAutoDownload();
+                        } else {
+                            this.clearAutoDownload();
+                        }
                     }
-                }
-            });
+                });
+            }
         } catch (error) {
             console.error('Failed to initialize path options:', error);
         }
@@ -255,7 +216,7 @@ class ExampleImagesManager {
                 return;
             }
             
-            const optimize = document.getElementById('optimizeExampleImages').checked;
+            const optimize = state.global.settings.optimizeExampleImages;
             
             const response = await fetch('/api/download-example-images', {
                 method: 'POST',
@@ -746,7 +707,7 @@ class ExampleImagesManager {
             console.log('Performing auto download check...');
             
             const outputDir = document.getElementById('exampleImagesPath').value;
-            const optimize = document.getElementById('optimizeExampleImages').checked;
+            const optimize = state.global.settings.optimizeExampleImages;
             
             const response = await fetch('/api/download-example-images', {
                 method: 'POST',
@@ -771,6 +732,3 @@ class ExampleImagesManager {
         }
     }
 }
-
-// Create singleton instance
-export const exampleImagesManager = new ExampleImagesManager();

static/js/managers/SettingsManager.js

@@ -47,8 +47,6 @@ export class SettingsManager {
             'autoplayOnHover',
             'displayDensity',
             'cardInfoDisplay',
-            'optimizeExampleImages',
-            'autoDownloadExampleImages',
             'includeTriggerWords'
         ];
 
@@ -76,14 +74,6 @@ export class SettingsManager {
             state.global.settings.autoplayOnHover = false;
         }
 
-        if (state.global.settings.optimizeExampleImages === undefined) {
-            state.global.settings.optimizeExampleImages = true;
-        }
-
-        if (state.global.settings.autoDownloadExampleImages === undefined) {
-            state.global.settings.autoDownloadExampleImages = true;
-        }
-
         if (state.global.settings.cardInfoDisplay === undefined) {
             state.global.settings.cardInfoDisplay = 'always';
         }
@@ -147,7 +137,10 @@ export class SettingsManager {
             proxy_host: '',
             proxy_port: '',
             proxy_username: '',
-            proxy_password: ''
+            proxy_password: '',
+            example_images_path: '',
+            optimizeExampleImages: true,
+            autoDownloadExampleImages: true
         };
 
         Object.keys(backendDefaults).forEach(key => {
@@ -172,8 +165,6 @@ export class SettingsManager {
             'autoplayOnHover', 
             'displayDensity',
             'cardInfoDisplay',
-            'optimizeExampleImages',
-            'autoDownloadExampleImages',
             'includeTriggerWords'
         ];
 
@@ -203,7 +194,10 @@ export class SettingsManager {
             'proxy_host',
             'proxy_port',
             'proxy_username',
-            'proxy_password'
+            'proxy_password',
+            'example_images_path',
+            'optimizeExampleImages',
+            'autoDownloadExampleImages'
         ];
         return backendKeys.includes(settingKey);
     }
@@ -218,7 +212,7 @@ export class SettingsManager {
             try {
                 const payload = {};
                 payload[settingKey] = value;
-                
+
                 const response = await fetch('/api/settings', {
                     method: 'POST',
                     headers: {
@@ -230,6 +224,12 @@ export class SettingsManager {
                 if (!response.ok) {
                     throw new Error('Failed to save setting to backend');
                 }
+
+                // Parse response and check for success
+                const data = await response.json();
+                if (data.success === false) {
+                    throw new Error(data.error || 'Failed to save setting to backend');
+                }
             } catch (error) {
                 console.error(`Failed to save backend setting ${settingKey}:`, error);
                 throw error;
@@ -985,8 +985,6 @@ export class SettingsManager {
                 await this.saveSetting(settingKey, value);
             }
             
-            showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
-            
             // Apply frontend settings immediately
             this.applyFrontendSettings();
             
@@ -999,8 +997,10 @@ export class SettingsManager {
                 if (value === 'compact') densityName = "Compact";
                 
                 showToast('toast.settings.displayDensitySet', { density: densityName }, 'success');
+                return;
             }
             
+            showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
         } catch (error) {
             showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');
         }