Fix lora page header

static/js/components/Header.js

@@ -1,3 +1,5 @@
+import { updateService } from '../managers/UpdateService.js';
+
 /**
  * Header.js - Manages the application header behavior across different pages
  * Handles initialization of appropriate search and filter managers based on current page
@@ -76,7 +78,7 @@ export class HeaderManager {
       const settingsToggle = document.querySelector('.settings-toggle');
       if (settingsToggle) {
         settingsToggle.addEventListener('click', () => {
-          if (window.settingsManager && typeof window.settingsManager.toggleSettings === 'function') {
+          if (window.settingsManager) {
             window.settingsManager.toggleSettings();
           }
         });
@@ -86,7 +88,7 @@ export class HeaderManager {
       const updateToggle = document.getElementById('updateToggleBtn');
       if (updateToggle) {
         updateToggle.addEventListener('click', () => {
-          // Handle update check logic
+          updateService.toggleUpdateModal();
         });
       }
       
@@ -148,8 +150,3 @@ export class HeaderManager {
       }
     }
   }
-  
-// Initialize the header manager when the DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-window.headerManager = new HeaderManager();
-});

static/js/main.js

@@ -3,6 +3,7 @@ import { LoadingManager } from './managers/LoadingManager.js';
 import { modalManager } from './managers/ModalManager.js';
 import { updateService } from './managers/UpdateService.js';
 import { state, initSettings } from './state/index.js';
+import { initializeCommonComponents } from './common.js';
 import { showLoraModal } from './components/LoraModal.js';
 import { toggleShowcase, scrollToTop } from './components/LoraModal.js';
 import { loadMoreLoras, fetchCivitai, deleteModel, replacePreview, resetAndReload, refreshLoras } from './api/loraApi.js';
@@ -22,16 +23,13 @@ import {
 } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
-import { SearchManager } from './managers/SearchManager.js';
 import { DownloadManager } from './managers/DownloadManager.js';
 import { SettingsManager, toggleApiKeyVisibility } from './managers/SettingsManager.js';
 import { LoraContextMenu } from './components/ContextMenu.js';
 import { moveManager } from './managers/MoveManager.js';
-import { FilterManager } from './managers/FilterManager.js';
 import { createLoraCard, updateCardsForBulkMode } from './components/LoraCard.js';
 import { bulkManager } from './managers/BulkManager.js';
 import { HeaderManager } from './components/Header.js';
-
 // Add bulk mode to state
 state.bulkMode = false;
 state.selectedLoras = new Set();
@@ -73,6 +71,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Ensure settings are initialized
     initSettings();
     
+    initializeCommonComponents();
+    window.headerManager = new HeaderManager();
     state.loadingManager = new LoadingManager();
     modalManager.initialize();  // Initialize modalManager after DOM is loaded
     updateService.initialize(); // Initialize updateService after modalManager
@@ -104,19 +104,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Update positions on window resize
     window.addEventListener('resize', updatePanelPositions);
 
-    // Initialize search manager with LoRA-specific options
-    const loraSearchManager = new SearchManager({
-        searchCallback: (query, options, recursive) => {
-            // LoRA-specific search implementation
-            // This could call your API with the right parameters
-            fetchLoras({
-                search: query,
-                search_options: options,
-                recursive: recursive
-            });
-        }
-    });
-
     // Set the current page for proper context
     document.body.dataset.page = 'loras';
 });

static/js/managers/LoraSearchManager.js

@@ -10,7 +10,6 @@ import { showToast } from '../utils/uiHelpers.js';
 
 export class LoraSearchManager extends SearchManager {
   constructor(options = {}) {
-    console.log("initializing lora search manager");
     super({
       page: 'loras',
       ...options

static/js/managers/UpdateService.js

@@ -34,10 +34,10 @@ export class UpdateService {
         });
         
         // Set up event listener for update button
-        const updateToggle = document.getElementById('updateToggleBtn');
-        if (updateToggle) {
-            updateToggle.addEventListener('click', () => this.toggleUpdateModal());
-        }
+        // const updateToggle = document.getElementById('updateToggleBtn');
+        // if (updateToggle) {
+        //     updateToggle.addEventListener('click', () => this.toggleUpdateModal());
+        // }
 
         // Immediately update modal content with current values (even if from default)
         this.updateModalContent();
@@ -226,10 +226,6 @@ export class UpdateService {
         });
     }
     
-    showUpdateModal() {
-        this.toggleUpdateModal();
-    }
-    
     async manualCheckForUpdates() {
         this.lastCheckTime = 0; // Reset last check time to force check
         await this.checkForUpdates();

static/js/recipes.js

@@ -161,6 +161,7 @@ class RecipeManager {
 // Initialize components
 document.addEventListener('DOMContentLoaded', () => {
     initializeCommonComponents();
+    window.headerManager = new HeaderManager();
     window.recipeManager = new RecipeManager();
     
     // Make importRecipes function available globally

templates/components/header.html

@@ -36,11 +36,11 @@
     <div class="header-actions">
       <!-- Integrated corner controls -->
       <div class="header-controls">
-        <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
+        <div class="theme-toggle" title="Toggle theme">
           <i class="fas fa-moon dark-icon"></i>
           <i class="fas fa-sun light-icon"></i>
         </div>
-        <div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
+        <div class="settings-toggle" title="Settings">
           <i class="fas fa-cog"></i>
         </div>
         <div class="update-toggle" id="updateToggleBtn" title="Check Updates">
@@ -149,31 +149,5 @@
     } else if (currentPath === '/checkpoints') {
       checkpointsNavItem.classList.add('active');
     }
-    
-    // Initialize search options panel toggle
-    const searchOptionsToggle = document.getElementById('searchOptionsToggle');
-    const searchOptionsPanel = document.getElementById('searchOptionsPanel');
-    
-    if (searchOptionsToggle && searchOptionsPanel) {
-      searchOptionsToggle.addEventListener('click', function() {
-        const isHidden = searchOptionsPanel.classList.contains('hidden');
-        if (isHidden) {
-          searchOptionsPanel.classList.remove('hidden');
-          searchOptionsToggle.classList.add('active');
-        } else {
-          searchOptionsPanel.classList.add('hidden');
-          searchOptionsToggle.classList.remove('active');
-        }
-      });
-      
-      // Close search options panel when clicking the close button
-      const closeSearchOptions = document.getElementById('closeSearchOptions');
-      if (closeSearchOptions) {
-        closeSearchOptions.addEventListener('click', function() {
-          searchOptionsPanel.classList.add('hidden');
-          searchOptionsToggle.classList.remove('active');
-        });
-      }
-    }
   });
 </script>