checkpoint

static/css/style.css

@@ -1154,4 +1154,61 @@ body.modal-open {
     padding: var(--space-1);
     max-height: 200px;
     overflow-y: auto;
+}
+
+/* Settings styles */
+.settings-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.settings-toggle:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.settings-modal {
+    max-width: 500px;
+}
+
+.api-key-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.api-key-input input {
+    padding-right: 40px;
+}
+
+.api-key-input .toggle-visibility {
+    position: absolute;
+    right: 8px;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    opacity: 0.6;
+    cursor: pointer;
+    padding: 4px 8px;
+}
+
+.api-key-input .toggle-visibility:hover {
+    opacity: 1;
+}
+
+.input-help {
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.8;
+    margin-top: 4px;
 }

static/js/main.js

@@ -21,6 +21,7 @@ import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
 import { SearchManager } from './utils/search.js';
 import { DownloadManager } from './managers/DownloadManager.js';
+import { SettingsManager, toggleApiKeyVisibility } from './managers/SettingsManager.js';
 
 // Export all functions that need global access
 window.loadMoreLoras = loadMoreLoras;
@@ -39,6 +40,8 @@ window.refreshLoras = refreshLoras;
 window.openCivitai = openCivitai;
 window.showToast = showToast
 window.toggleFolderTags = toggleFolderTags;
+window.settingsManager = new SettingsManager();
+window.toggleApiKeyVisibility = toggleApiKeyVisibility;
 
 // Initialize everything when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {

static/js/managers/ModalManager.js

@@ -34,6 +34,15 @@ export class ModalManager {
             }
         });
 
+        // Add settingsModal registration
+        this.registerModal('settingsModal', {
+            element: document.getElementById('settingsModal'),
+            onClose: () => {
+                this.getModal('settingsModal').element.style.display = 'none';
+                document.body.classList.remove('modal-open');
+            }
+        });
+
         document.addEventListener('keydown', this.boundHandleEscape);
         this.initialized = true;
     }

static/js/managers/SettingsManager.js

@@ -0,0 +1,52 @@
+import { modalManager } from './ModalManager.js';
+import { showToast } from '../utils/uiHelpers.js';
+
+export class SettingsManager {
+    constructor() {
+        this.initialized = false;
+    }
+
+    showSettings() {
+        console.log('Opening settings modal...'); // Debug log
+        modalManager.showModal('settingsModal');
+    }
+
+    async saveSettings() {
+        const apiKey = document.getElementById('civitaiApiKey').value;
+        
+        try {
+            const response = await fetch('/api/settings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    civitai_api_key: apiKey
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to save settings');
+            }
+
+            showToast('Settings saved successfully', 'success');
+            modalManager.closeModal('settingsModal');
+        } catch (error) {
+            showToast('Failed to save settings: ' + error.message, 'error');
+        }
+    }
+}
+
+// Helper function for toggling API key visibility
+export function toggleApiKeyVisibility(button) {
+    const input = button.parentElement.querySelector('input');
+    const icon = button.querySelector('i');
+    
+    if (input.type === 'password') {
+        input.type = 'text';
+        icon.className = 'fas fa-eye-slash';
+    } else {
+        input.type = 'password';
+        icon.className = 'fas fa-eye';
+    }
+}