Add nsfw browse control part 1

static/js/managers/SettingsManager.js

@@ -1,5 +1,6 @@
 import { modalManager } from './ModalManager.js';
 import { showToast } from '../utils/uiHelpers.js';
+import { state, saveSettings } from '../state/index.js';
 
 export class SettingsManager {
     constructor() {
@@ -20,6 +21,11 @@ export class SettingsManager {
                 mutations.forEach((mutation) => {
                     if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                         this.isOpen = settingsModal.style.display === 'block';
+                        
+                        // When modal is opened, update checkbox state from current settings
+                        if (this.isOpen) {
+                            this.loadSettingsToUI();
+                        }
                     }
                 });
             });
@@ -30,6 +36,16 @@ export class SettingsManager {
         this.initialized = true;
     }
 
+    loadSettingsToUI() {
+        // Set frontend settings from state
+        const blurMatureContentCheckbox = document.getElementById('blurMatureContent');
+        if (blurMatureContentCheckbox) {
+            blurMatureContentCheckbox.checked = state.settings.blurMatureContent;
+        }
+        
+        // Backend settings are loaded from the template directly
+    }
+
     toggleSettings() {
         if (this.isOpen) {
             modalManager.closeModal('settingsModal');
@@ -40,16 +56,27 @@ export class SettingsManager {
     }
 
     async saveSettings() {
+        // Get frontend settings from UI
+        const blurMatureContent = document.getElementById('blurMatureContent').checked;
+        
+        // Update frontend state and save to localStorage
+        state.settings.blurMatureContent = blurMatureContent;
+        saveSettings();
+        
+        // Get backend settings
         const apiKey = document.getElementById('civitaiApiKey').value;
+        const showOnlySFW = document.getElementById('showOnlySFW').checked;
         
         try {
+            // Save backend settings via API
             const response = await fetch('/api/settings', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    civitai_api_key: apiKey
+                    civitai_api_key: apiKey,
+                    show_only_sfw: showOnlySFW
                 })
             });
 
@@ -59,10 +86,25 @@ export class SettingsManager {
 
             showToast('Settings saved successfully', 'success');
             modalManager.closeModal('settingsModal');
+            
+            // Apply frontend settings immediately
+            this.applyFrontendSettings();
         } catch (error) {
             showToast('Failed to save settings: ' + error.message, 'error');
         }
     }
+
+    applyFrontendSettings() {
+        // Apply blur setting to existing content
+        const blurSetting = state.settings.blurMatureContent;
+        document.querySelectorAll('.lora-card[data-nsfw="true"] .card-image').forEach(img => {
+            if (blurSetting) {
+                img.classList.add('nsfw-blur');
+            } else {
+                img.classList.remove('nsfw-blur');
+            }
+        });
+    }
 }
 
 // Helper function for toggling API key visibility