Add full rebuild option to model refresh functionality and enhance dropdown controls

static/js/api/baseModelApi.js

@@ -499,13 +499,18 @@ export async function refreshModels(options = {}) {
     const { 
         modelType = 'lora',
         scanEndpoint = '/api/loras/scan',
-        resetAndReloadFunction
+        resetAndReloadFunction,
+        fullRebuild = false // New parameter with default value false
     } = options;
     
     try {
-        state.loadingManager.showSimpleLoading(`Refreshing ${modelType}s...`);
+        state.loadingManager.showSimpleLoading(`${fullRebuild ? 'Full rebuild' : 'Refreshing'} ${modelType}s...`);
         
-        const response = await fetch(scanEndpoint);
+        // Add fullRebuild parameter to the request
+        const url = new URL(scanEndpoint, window.location.origin);
+        url.searchParams.append('full_rebuild', fullRebuild);
+        
+        const response = await fetch(url);
         
         if (!response.ok) {
             throw new Error(`Failed to refresh ${modelType}s: ${response.status} ${response.statusText}`);
@@ -515,10 +520,10 @@ export async function refreshModels(options = {}) {
             await resetAndReloadFunction(true); // update folders
         }
         
-        showToast(`Refresh complete`, 'success');
+        showToast(`${fullRebuild ? 'Full rebuild' : 'Refresh'} complete`, 'success');
     } catch (error) {
         console.error(`Refresh failed:`, error);
-        showToast(`Failed to refresh ${modelType}s`, 'error');
+        showToast(`Failed to ${fullRebuild ? 'rebuild' : 'refresh'} ${modelType}s`, 'error');
     } finally {
         state.loadingManager.hide();
         state.loadingManager.restoreProgressBar();

static/js/api/checkpointApi.js

@@ -76,11 +76,12 @@ export async function resetAndReload(updateFolders = false) {
 }
 
 // Refresh checkpoints
-export async function refreshCheckpoints() {
+export async function refreshCheckpoints(fullRebuild = false) {
     return baseRefreshModels({
         modelType: 'checkpoint',
         scanEndpoint: '/api/checkpoints/scan',
-        resetAndReloadFunction: resetAndReload
+        resetAndReloadFunction: resetAndReload,
+        fullRebuild: fullRebuild
     });
 }
 

static/js/api/loraApi.js

@@ -143,11 +143,12 @@ export async function resetAndReload(updateFolders = false) {
     }
 }
 
-export async function refreshLoras() {
+export async function refreshLoras(fullRebuild = false) {
     return baseRefreshModels({
         modelType: 'lora',
         scanEndpoint: '/api/loras/scan',
-        resetAndReloadFunction: resetAndReload
+        resetAndReloadFunction: resetAndReload,
+        fullRebuild: fullRebuild
     });
 }
 

static/js/components/controls/CheckpointsControls.js

@@ -33,8 +33,8 @@ export class CheckpointsControls extends PageControls {
                 return await resetAndReload(updateFolders);
             },
             
-            refreshModels: async () => {
-                return await refreshCheckpoints();
+            refreshModels: async (fullRebuild = false) => {
+                return await refreshCheckpoints(fullRebuild);
             },
             
             // Add fetch from Civitai functionality for checkpoints

static/js/components/controls/LorasControls.js

@@ -36,8 +36,8 @@ export class LorasControls extends PageControls {
                 return await resetAndReload(updateFolders);
             },
             
-            refreshModels: async () => {
-                return await refreshLoras();
+            refreshModels: async (fullRebuild = false) => {
+                return await refreshLoras(fullRebuild);
             },
             
             // LoRA-specific API functions

static/js/components/controls/PageControls.js

@@ -83,9 +83,12 @@ export class PageControls {
         // Refresh button handler
         const refreshBtn = document.querySelector('[data-action="refresh"]');
         if (refreshBtn) {
-            refreshBtn.addEventListener('click', () => this.refreshModels());
+            refreshBtn.addEventListener('click', () => this.refreshModels(false)); // Regular refresh (incremental)
         }
         
+        // Initialize dropdown functionality
+        this.initDropdowns();
+        
         // Toggle folders button
         const toggleFoldersBtn = document.querySelector('.toggle-folders-btn');
         if (toggleFoldersBtn) {
@@ -102,6 +105,61 @@ export class PageControls {
         this.initPageSpecificListeners();
     }
     
+    /**
+     * Initialize dropdown functionality
+     */
+    initDropdowns() {
+        // Handle dropdown toggles
+        const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
+        dropdownToggles.forEach(toggle => {
+            toggle.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent triggering parent button
+                const dropdownGroup = toggle.closest('.dropdown-group');
+                
+                // Close all other open dropdowns first
+                document.querySelectorAll('.dropdown-group.active').forEach(group => {
+                    if (group !== dropdownGroup) {
+                        group.classList.remove('active');
+                    }
+                });
+                
+                // Toggle current dropdown
+                dropdownGroup.classList.toggle('active');
+            });
+        });
+        
+        // Handle quick refresh option
+        const quickRefreshOption = document.querySelector('[data-action="quick-refresh"]');
+        if (quickRefreshOption) {
+            quickRefreshOption.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.refreshModels(false);
+                // Close the dropdown
+                document.querySelector('.dropdown-group.active')?.classList.remove('active');
+            });
+        }
+        
+        // Handle full rebuild option
+        const fullRebuildOption = document.querySelector('[data-action="full-rebuild"]');
+        if (fullRebuildOption) {
+            fullRebuildOption.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.refreshModels(true);
+                // Close the dropdown
+                document.querySelector('.dropdown-group.active')?.classList.remove('active');
+            });
+        }
+        
+        // Close dropdowns when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.dropdown-group')) {
+                document.querySelectorAll('.dropdown-group.active').forEach(group => {
+                    group.classList.remove('active');
+                });
+            }
+        });
+    }
+    
     /**
      * Initialize page-specific event listeners
      */
@@ -327,18 +385,19 @@ export class PageControls {
     
     /**
      * Refresh models list
+     * @param {boolean} fullRebuild - Whether to perform a full rebuild
      */
-    async refreshModels() {
+    async refreshModels(fullRebuild = false) {
         if (!this.api) {
             console.error('API methods not registered');
             return;
         }
 
         try {
-            await this.api.refreshModels();
+            await this.api.refreshModels(fullRebuild);
         } catch (error) {
-            console.error(`Error refreshing ${this.pageType}:`, error);
-            showToast(`Failed to refresh ${this.pageType}: ${error.message}`, 'error');
+            console.error(`Error ${fullRebuild ? 'rebuilding' : 'refreshing'} ${this.pageType}:`, error);
+            showToast(`Failed to ${fullRebuild ? 'rebuild' : 'refresh'} ${this.pageType}: ${error.message}`, 'error');
         }
     }