Refactor API structure to unify model operations

- Introduced MODEL_TYPES and MODEL_CONFIG for centralized model type management.
- Created a unified API client for checkpoints and loras to streamline operations.
- Updated all API calls in checkpointApi.js and loraApi.js to use the new client.
- Simplified context menus and model card operations to leverage the unified API client.
- Enhanced state management to accommodate new model types and their configurations.
- Added virtual scrolling functions for recipes and improved loading states.
- Refactored modal utilities to handle model exclusion and deletion generically.
- Improved error handling and user feedback across various operations.

static/js/utils/modalUtils.js

@@ -1,15 +1,13 @@
 import { modalManager } from '../managers/ModalManager.js';
-import { excludeLora, deleteModel as deleteLora } from '../api/loraApi.js';
-import { excludeCheckpoint, deleteCheckpoint } from '../api/checkpointApi.js';
+import { getModelApiClient } from '../api/baseModelApi.js';
+
+const apiClient = getModelApiClient();
 
 let pendingDeletePath = null;
-let pendingModelType = null;
 let pendingExcludePath = null;
-let pendingExcludeModelType = null;
 
-export function showDeleteModal(filePath, modelType = 'lora') {
+export function showDeleteModal(filePath) {
     pendingDeletePath = filePath;
-    pendingModelType = modelType;
     
     const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
     const modelName = card ? card.dataset.name : filePath.split('/').pop();
@@ -29,12 +27,7 @@ export async function confirmDelete() {
     if (!pendingDeletePath) return;
     
     try {
-        // Use appropriate delete function based on model type
-        if (pendingModelType === 'checkpoint') {
-            await deleteCheckpoint(pendingDeletePath);
-        } else {
-            await deleteLora(pendingDeletePath);
-        }
+        await apiClient.deleteModel(pendingDeletePath);
         
         closeDeleteModal();
 
@@ -54,9 +47,8 @@ export function closeDeleteModal() {
 }
 
 // Functions for the exclude modal
-export function showExcludeModal(filePath, modelType = 'lora') {
+export function showExcludeModal(filePath) {
     pendingExcludePath = filePath;
-    pendingExcludeModelType = modelType;
     
     const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
     const modelName = card ? card.dataset.name : filePath.split('/').pop();
@@ -82,12 +74,7 @@ export async function confirmExclude() {
     if (!pendingExcludePath) return;
     
     try {
-        // Use appropriate exclude function based on model type
-        if (pendingExcludeModelType === 'checkpoint') {
-            await excludeCheckpoint(pendingExcludePath);
-        } else {
-            await excludeLora(pendingExcludePath);
-        }
+        await apiClient.excludeModel(pendingExcludePath);
         
         closeExcludeModal();
 

static/js/utils/uiHelpers.js

@@ -615,4 +615,31 @@ export async function openExampleImagesFolder(modelHash) {
     showToast('Failed to open example images folder', 'error');
     return false;
   }
+}
+
+/**
+     * Update the folder tags display with new folder list
+     * @param {Array} folders - List of folder names
+     */
+export function updateFolderTags(folders) {
+  const folderTagsContainer = document.querySelector('.folder-tags');
+  if (!folderTagsContainer) return;
+
+  // Keep track of currently selected folder
+  const currentFolder = this.pageState.activeFolder;
+
+  // Create HTML for folder tags
+  const tagsHTML = folders.map(folder => {
+      const isActive = folder === currentFolder;
+      return `<div class="tag ${isActive ? 'active' : ''}" data-folder="${folder}">${folder}</div>`;
+  }).join('');
+
+  // Update the container
+  folderTagsContainer.innerHTML = tagsHTML;
+
+  // Scroll active folder into view (no need to reattach click handlers)
+  const activeTag = folderTagsContainer.querySelector(`.tag[data-folder="${currentFolder}"]`);
+  if (activeTag) {
+      activeTag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
 }