Enhance modal toggle functionality and update service interaction

static/js/managers/ModalManager.js

@@ -72,6 +72,12 @@ export class ModalManager {
             }
         });
 
+        // Set up event listeners for modal toggles
+        const supportToggle = document.getElementById('supportToggleBtn');
+        if (supportToggle) {
+            supportToggle.addEventListener('click', () => this.toggleModal('supportModal'));
+        }
+
         document.addEventListener('keydown', this.boundHandleEscape);
         this.initialized = true;
     }
@@ -173,6 +179,20 @@ export class ModalManager {
             }
         }
     }
+
+    toggleModal(id, content = null, onCloseCallback = null) {
+        const modal = this.getModal(id);
+        if (!modal) return;
+        
+        // If this modal is already open, close it
+        if (modal.isOpen) {
+            this.closeModal(id);
+            return;
+        }
+        
+        // Otherwise, show the modal
+        this.showModal(id, content, onCloseCallback);
+    }
 }
 
 // Create and export a singleton instance

static/js/managers/UpdateService.js

@@ -31,9 +31,9 @@ export class UpdateService {
         this.checkForUpdates();
         
         // Set up event listener for update button
-        const updateToggle = document.querySelector('.update-toggle');
+        const updateToggle = document.getElementById('updateToggleBtn');
         if (updateToggle) {
-            updateToggle.addEventListener('click', () => this.showUpdateModal());
+            updateToggle.addEventListener('click', () => this.toggleUpdateModal());
         }
 
         // Immediately update modal content with current values (even if from default)
@@ -165,14 +165,32 @@ export class UpdateService {
         }
     }
     
-    showUpdateModal() {
-        // Force a check for updates when showing the modal
+    toggleUpdateModal() {
+        const updateModal = modalManager.getModal('updateModal');
+        
+        // If modal is already open, just close it
+        if (updateModal && updateModal.isOpen) {
+            modalManager.closeModal('updateModal');
+            return;
+        }
+        
+        // Update the modal content immediately with current data
+        this.updateModalContent();
+        
+        // Show the modal with current data
+        modalManager.showModal('updateModal');
+        
+        // Then check for updates in the background
         this.manualCheckForUpdates().then(() => {
-            // Show the modal after update check completes
-            modalManager.showModal('updateModal');
+            // Update the modal content again after the check completes
+            this.updateModalContent();
         });
     }
     
+    showUpdateModal() {
+        this.toggleUpdateModal();
+    }
+    
     async manualCheckForUpdates() {
         this.lastCheckTime = 0; // Reset last check time to force check
         await this.checkForUpdates();

templates/loras.html

@@ -56,11 +56,11 @@
                 <img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
                 <img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
             </div>
-            <div class="update-toggle" onclick="modalManager.showModal('updateModal')" title="Check Updates">
+            <div class="update-toggle" id="updateToggleBtn" title="Check Updates">
                 <i class="fas fa-bell"></i>
                 <span class="update-badge hidden"></span>
             </div>
-            <div class="support-toggle" onclick="modalManager.showModal('supportModal')" title="Support">
+            <div class="support-toggle" id="supportToggleBtn" title="Support">
                 <i class="fas fa-heart"></i>
             </div>
             <div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">