feat(frontend): add Other Models page with subtype filter and badges

static/js/components/controls/OtherControls.js

@@ -0,0 +1,60 @@
+// OtherControls.js - Specific implementation for the Other Models page
+import { PageControls } from './PageControls.js';
+import { getModelApiClient, resetAndReload } from '../../api/modelApiFactory.js';
+import { showToast } from '../../utils/uiHelpers.js';
+
+/**
+ * OtherControls class - Extends PageControls for the Other Models page
+ * (VAE, upscalers, text encoders, CLIP vision, ControlNet, ...)
+ */
+export class OtherControls extends PageControls {
+    constructor() {
+        // Initialize with 'other' page type
+        super('other');
+
+        // Register API methods specific to the Other Models page
+        this.registerOtherAPI();
+    }
+
+    /**
+     * Register Other-models-specific API methods
+     */
+    registerOtherAPI() {
+        const otherAPI = {
+            // 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 other models
+            fetchFromCivitai: async () => {
+                return await getModelApiClient().fetchCivitaiMetadata();
+            },
+
+            toggleBulkMode: () => {
+                if (window.bulkManager) {
+                    window.bulkManager.toggleBulkMode();
+                } else {
+                    console.error('Bulk manager not available');
+                }
+            },
+
+            // No clearCustomFilter implementation is needed for other models
+            // as custom filters are currently only used for LoRAs
+            clearCustomFilter: async () => {
+                showToast('toast.filters.noCustomFilterToClear', {}, 'info');
+            }
+        };
+
+        // Register the API
+        this.registerAPI(otherAPI);
+    }
+}

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 { OtherControls } from './OtherControls.js';
 
 // Export the classes
-export { PageControls, LorasControls, CheckpointsControls, EmbeddingsControls };
+export { PageControls, LorasControls, CheckpointsControls, EmbeddingsControls, OtherControls };
 
 /**
  * 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 'other')
  * @returns {PageControls} - The appropriate controls instance
  */
 export function createPageControls(pageType) {
@@ -19,8 +20,10 @@ export function createPageControls(pageType) {
         return new CheckpointsControls();
     } else if (pageType === 'embeddings') {
         return new EmbeddingsControls();
+    } else if (pageType === 'other') {
+        return new OtherControls();
     } else {
         console.error(`Unknown page type: ${pageType}`);
         return null;
     }
-}
+}