ComfyUI-Lora-Manager/static/js/components/controls/MiscControls.js

// 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;
    }
}