feat(misc): add VAE and Upscaler model management page

static/js/components/controls/MiscControls.js

@@ -0,0 +1,119 @@
+// MiscControls.js - Specific implementation for the Misc (VAE/Upscaler) page
+import { PageControls } from './PageControls.js';
+import { getModelApiClient, resetAndReload } from '../../api/modelApiFactory.js';
+import { getSessionItem, removeSessionItem } from '../../utils/storageHelpers.js';
+import { downloadManager } from '../../managers/DownloadManager.js';
+
+/**
+ * MiscControls class - Extends PageControls for Misc-specific functionality
+ */
+export class MiscControls extends PageControls {
+    constructor() {
+        // Initialize with 'misc' page type
+        super('misc');
+
+        // Register API methods specific to the Misc page
+        this.registerMiscAPI();
+
+        // Check for custom filters (e.g., from recipe navigation)
+        this.checkCustomFilters();
+    }
+
+    /**
+     * Register Misc-specific API methods
+     */
+    registerMiscAPI() {
+        const miscAPI = {
+            // Core API functions
+            loadMoreModels: async (resetPage = false, updateFolders = false) => {
+                return await getModelApiClient().loadMoreWithVirtualScroll(resetPage, updateFolders);
+            },
+
+            resetAndReload: async (updateFolders = false) => {
+                return await resetAndReload(updateFolders);
+            },
+
+            refreshModels: async (fullRebuild = false) => {
+                return await getModelApiClient().refreshModels(fullRebuild);
+            },
+
+            // Add fetch from Civitai functionality for misc models
+            fetchFromCivitai: async () => {
+                return await getModelApiClient().fetchCivitaiMetadata();
+            },
+
+            // Add show download modal functionality
+            showDownloadModal: () => {
+                downloadManager.showDownloadModal();
+            },
+
+            toggleBulkMode: () => {
+                if (window.bulkManager) {
+                    window.bulkManager.toggleBulkMode();
+                } else {
+                    console.error('Bulk manager not available');
+                }
+            },
+
+            clearCustomFilter: async () => {
+                await this.clearCustomFilter();
+            }
+        };
+
+        // Register the API
+        this.registerAPI(miscAPI);
+    }
+
+    /**
+     * Check for custom filters sent from other pages (e.g., recipe modal)
+     */
+    checkCustomFilters() {
+        const filterMiscHash = getSessionItem('recipe_to_misc_filterHash');
+        const filterRecipeName = getSessionItem('filterMiscRecipeName');
+
+        if (filterMiscHash && filterRecipeName) {
+            const indicator = document.getElementById('customFilterIndicator');
+            const filterText = indicator?.querySelector('.customFilterText');
+
+            if (indicator && filterText) {
+                indicator.classList.remove('hidden');
+
+                const displayText = `Viewing misc model from: ${filterRecipeName}`;
+                filterText.textContent = this._truncateText(displayText, 30);
+                filterText.setAttribute('title', displayText);
+
+                const filterElement = indicator.querySelector('.filter-active');
+                if (filterElement) {
+                    filterElement.classList.add('animate');
+                    setTimeout(() => filterElement.classList.remove('animate'), 600);
+                }
+            }
+        }
+    }
+
+    /**
+     * Clear misc custom filter and reload
+     */
+    async clearCustomFilter() {
+        removeSessionItem('recipe_to_misc_filterHash');
+        removeSessionItem('recipe_to_misc_filterHashes');
+        removeSessionItem('filterMiscRecipeName');
+
+        const indicator = document.getElementById('customFilterIndicator');
+        if (indicator) {
+            indicator.classList.add('hidden');
+        }
+
+        await resetAndReload();
+    }
+
+    /**
+     * Helper to truncate text with ellipsis
+     * @param {string} text
+     * @param {number} maxLength
+     * @returns {string}
+     */
+    _truncateText(text, maxLength) {
+        return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
+    }
+}

static/js/components/controls/index.js

@@ -3,13 +3,14 @@ import { PageControls } from './PageControls.js';
 import { LorasControls } from './LorasControls.js';
 import { CheckpointsControls } from './CheckpointsControls.js';
 import { EmbeddingsControls } from './EmbeddingsControls.js';
+import { MiscControls } from './MiscControls.js';
 
 // Export the classes
-export { PageControls, LorasControls, CheckpointsControls, EmbeddingsControls };
+export { PageControls, LorasControls, CheckpointsControls, EmbeddingsControls, MiscControls };
 
 /**
  * Factory function to create the appropriate controls based on page type
- * @param {string} pageType - The type of page ('loras', 'checkpoints', or 'embeddings')
+ * @param {string} pageType - The type of page ('loras', 'checkpoints', 'embeddings', or 'misc')
  * @returns {PageControls} - The appropriate controls instance
  */
 export function createPageControls(pageType) {
@@ -19,6 +20,8 @@ export function createPageControls(pageType) {
         return new CheckpointsControls();
     } else if (pageType === 'embeddings') {
         return new EmbeddingsControls();
+    } else if (pageType === 'misc') {
+        return new MiscControls();
     } else {
         console.error(`Unknown page type: ${pageType}`);
         return null;