feat(ui): improve update controls styling and error handling

- Add disabled and loading states for control group buttons with appropriate cursor and opacity styling
- Enhance dropdown toggle active state styling for update filter group
- Improve dropdown toggle layout with flex centering
- Add disabled state styling for dropdown items
- Refactor model update check to use shared helper function, removing redundant success handling and simplifying error flow
- Maintain existing functionality while improving user experience and code maintainability

locales/de.json

@@ -435,7 +435,10 @@
             },
             "updates": {
                 "title": "Nur Modelle mit verfügbaren Updates anzeigen",
-                "action": "Updates"
+                "action": "Updates",
+                "menuLabel": "Weitere Update-Optionen anzeigen",
+                "check": "Updates prüfen",
+                "checkTooltip": "Die Aktualisierungssuche kann einige Zeit dauern."
             }
         },
         "bulkOperations": {

locales/en.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "Show models with updates available",
-                "action": "Updates"
+                "action": "Updates",
+                "menuLabel": "Show update options",
+                "check": "Check updates",
+                "checkTooltip": "Checking updates may take a while."
             }
         },
         "bulkOperations": {

locales/es.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "Mostrar solo modelos con actualizaciones disponibles",
-                "action": "Actualizaciones"
+                "action": "Actualizaciones",
+                "menuLabel": "Mostrar opciones de actualización",
+                "check": "Buscar actualizaciones",
+                "checkTooltip": "Comprobar actualizaciones puede tardar."
             }
         },
         "bulkOperations": {

locales/fr.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "Afficher uniquement les modèles avec des mises à jour disponibles",
-                "action": "Mises à jour"
+                "action": "Mises à jour",
+                "menuLabel": "Afficher les options de mise à jour",
+                "check": "Rechercher des mises à jour",
+                "checkTooltip": "La vérification peut prendre du temps."
             }
         },
         "bulkOperations": {

locales/he.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "הצג רק דגמים עם עדכונים זמינים",
-                "action": "עדכונים"
+                "action": "עדכונים",
+                "menuLabel": "הצגת אפשרויות עדכון",
+                "check": "בדוק עדכונים",
+                "checkTooltip": "בדיקת עדכונים עלולה לקחת זמן."
             }
         },
         "bulkOperations": {

locales/ja.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "アップデート可能なモデルのみ表示",
-                "action": "アップデート"
+                "action": "アップデート",
+                "menuLabel": "更新オプションを表示",
+                "check": "アップデートを確認",
+                "checkTooltip": "確認には時間がかかる場合があります。"
             }
         },
         "bulkOperations": {

locales/ko.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "업데이트 가능한 모델만 표시",
-                "action": "업데이트"
+                "action": "업데이트",
+                "menuLabel": "업데이트 옵션 표시",
+                "check": "업데이트 확인",
+                "checkTooltip": "업데이트 확인에는 시간이 걸릴 수 있습니다."
             }
         },
         "bulkOperations": {

locales/ru.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "Показывать только модели с доступными обновлениями",
-                "action": "Обновления"
+                "action": "Обновления",
+                "menuLabel": "Показать параметры обновления",
+                "check": "Проверить обновления",
+                "checkTooltip": "Проверка может занять время."
             }
         },
         "bulkOperations": {

locales/zh-CN.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "仅显示可用更新的模型",
-                "action": "更新"
+                "action": "更新",
+                "menuLabel": "显示更新选项",
+                "check": "检查更新",
+                "checkTooltip": "检查更新可能耗时。"
             }
         },
         "bulkOperations": {

locales/zh-TW.json

@@ -434,7 +434,10 @@
             },
             "updates": {
                 "title": "僅顯示可用更新的模型",
-                "action": "更新"
+                "action": "更新",
+                "menuLabel": "顯示更新選項",
+                "check": "檢查更新",
+                "checkTooltip": "檢查更新可能耗時。"
             }
         },
         "bulkOperations": {

static/css/layout.css

@@ -104,6 +104,19 @@
     opacity: 1;
 }
 
+.control-group button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.control-group button.loading,
+.dropdown-toggle.loading {
+    cursor: wait;
+    opacity: 0.7;
+    pointer-events: none;
+}
+
 /* Controls */
 .control-group button.favorite-filter,
 .control-group button.update-filter {
@@ -135,6 +148,16 @@
     color: white;
 }
 
+.update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle {
+    background: var(--lora-accent);
+    border-color: var(--lora-accent);
+    color: white;
+}
+
+.update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle i {
+    color: inherit;
+}
+
 /* Active state for buttons that can be toggled */
 .control-group button.active {
     background: var(--lora-accent);
@@ -322,6 +345,9 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     padding: 0 !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .dropdown-menu {
@@ -354,6 +380,12 @@
     transition: background-color 0.2s ease;
 }
 
+.dropdown-item.disabled {
+    cursor: default;
+    opacity: 0.6;
+    pointer-events: none;
+}
+
 .dropdown-item:hover {
     background-color: oklch(var(--lora-accent) / 0.1);
 }

static/js/components/ContextMenu/GlobalContextMenu.js

@@ -1,9 +1,7 @@
 import { BaseContextMenu } from './BaseContextMenu.js';
 import { showToast } from '../../utils/uiHelpers.js';
 import { state } from '../../state/index.js';
-import { translate } from '../../utils/i18nHelpers.js';
+import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.js';
-import { getCompleteApiConfig, getCurrentModelType } from '../../api/apiConfig.js';
-import { resetAndReload } from '../../api/modelApiFactory.js';
 
 export class GlobalContextMenu extends BaseContextMenu {
     constructor() {
@@ -116,68 +114,23 @@ export class GlobalContextMenu extends BaseContextMenu {
             return;
         }
 
-        const modelType = getCurrentModelType();
-        const apiConfig = getCompleteApiConfig(modelType);
-
-        if (!apiConfig?.endpoints?.refreshUpdates) {
-            console.warn('Refresh updates endpoint not configured for model type:', modelType);
-            return;
-        }
-
         this._updateCheckInProgress = true;
         menuItem?.classList.add('disabled');
 
-        const displayName = apiConfig.config?.displayName ?? 'Model';
-        const loadingMessage = translate(
-            'globalContextMenu.checkModelUpdates.loading',
-            { type: displayName },
-            `Checking for ${displayName} updates...`
-        );
-
-        state.loadingManager?.showSimpleLoading?.(loadingMessage);
-
         try {
-            const response = await fetch(apiConfig.endpoints.refreshUpdates, {
+            await performModelUpdateCheck({
-                method: 'POST',
+                onComplete: () => {
-                headers: { 'Content-Type': 'application/json' },
+                    menuItem?.classList.remove('disabled');
-                body: JSON.stringify({ force: false })
+                    this._updateCheckInProgress = false;
+                }
             });
-
-            let payload = {};
-            try {
-                payload = await response.json();
-            } catch {
-                payload = {};
-            }
-
-            if (!response.ok || payload.success !== true) {
-                const errorMessage = payload?.error || response.statusText || 'Unknown error';
-                throw new Error(errorMessage);
-            }
-
-            const records = Array.isArray(payload.records) ? payload.records : [];
-
-            if (records.length > 0) {
-                showToast('globalContextMenu.checkModelUpdates.success', { count: records.length, type: displayName }, 'success');
-            } else {
-                showToast('globalContextMenu.checkModelUpdates.none', { type: displayName }, 'info');
-            }
-
-            await resetAndReload(false);
         } catch (error) {
-            console.error('Error checking model updates:', error);
+            console.error('Failed to check model updates:', error);
-            showToast(
-                'globalContextMenu.checkModelUpdates.error',
-                { message: error?.message ?? 'Unknown error', type: displayName },
-                'error'
-            );
         } finally {
-            state.loadingManager?.hide?.();
+            if (this._updateCheckInProgress) {
-            if (typeof state.loadingManager?.restoreProgressBar === 'function') {
+                this._updateCheckInProgress = false;
-                state.loadingManager.restoreProgressBar();
+                menuItem?.classList.remove('disabled');
             }
-            menuItem?.classList.remove('disabled');
-            this._updateCheckInProgress = false;
         }
     }
 }

static/js/components/controls/PageControls.js

@@ -2,6 +2,7 @@
 import { getCurrentPageState, setCurrentPageType } from '../../state/index.js';
 import { getStorageItem, setStorageItem, getSessionItem, setSessionItem } from '../../utils/storageHelpers.js';
 import { showToast } from '../../utils/uiHelpers.js';
+import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.js';
 import { sidebarManager } from '../SidebarManager.js';
 
 /**
@@ -27,6 +28,8 @@ export class PageControls {
         // Use global sidebar manager
         this.sidebarManager = sidebarManager;
 
+        this._updateCheckInProgress = false;
+
         // Initialize event listeners
         this.initEventListeners();
         
@@ -157,6 +160,14 @@ export class PageControls {
             });
         }
 
+        const checkUpdatesOption = document.getElementById('checkUpdatesMenuItem');
+        if (checkUpdatesOption) {
+            checkUpdatesOption.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                await this.handleCheckModelUpdates(e.currentTarget);
+            });
+        }
+
         // Close dropdowns when clicking outside
         document.addEventListener('click', (e) => {
             if (!e.target.closest('.dropdown-group')) {
@@ -167,6 +178,72 @@ export class PageControls {
         });
     }
 
+    async handleCheckModelUpdates(menuItem) {
+        if (this._updateCheckInProgress) {
+            return;
+        }
+
+        const updateFilterBtn = document.getElementById('updateFilterBtn');
+        const dropdownToggle = document.getElementById('updateFilterMenuToggle');
+        const dropdownGroup = menuItem?.closest('.dropdown-group');
+        const iconElement = updateFilterBtn?.querySelector('i');
+
+        const setLoadingState = (isLoading) => {
+            if (updateFilterBtn) {
+                updateFilterBtn.disabled = isLoading;
+                updateFilterBtn.classList.toggle('loading', isLoading);
+                updateFilterBtn.setAttribute('aria-busy', isLoading ? 'true' : 'false');
+
+                if (iconElement) {
+                    if (isLoading) {
+                        if (!iconElement.dataset.originalClass) {
+                            iconElement.dataset.originalClass = iconElement.className;
+                        }
+                        iconElement.className = 'fas fa-spinner fa-spin';
+                    } else {
+                        const originalClass = iconElement.dataset.originalClass;
+                        if (originalClass) {
+                            iconElement.className = originalClass;
+                            delete iconElement.dataset.originalClass;
+                        } else {
+                            iconElement.classList.remove('fa-spinner', 'fa-spin');
+                            if (!iconElement.classList.contains('fa-exclamation-circle')) {
+                                iconElement.classList.add('fa-exclamation-circle');
+                            }
+                        }
+                    }
+                }
+            }
+
+            if (dropdownToggle) {
+                dropdownToggle.disabled = isLoading;
+                dropdownToggle.classList.toggle('loading', isLoading);
+            }
+
+            if (menuItem) {
+                menuItem.classList.toggle('disabled', isLoading);
+                if (isLoading) {
+                    menuItem.setAttribute('aria-disabled', 'true');
+                } else {
+                    menuItem.removeAttribute('aria-disabled');
+                }
+            }
+        };
+
+        this._updateCheckInProgress = true;
+        setLoadingState(true);
+
+        try {
+            await performModelUpdateCheck();
+        } catch (error) {
+            console.error('Failed to check model updates:', error);
+        } finally {
+            this._updateCheckInProgress = false;
+            setLoadingState(false);
+            dropdownGroup?.classList.remove('active');
+        }
+    }
+
     /**
      * Initialize page-specific event listeners
      */

static/js/utils/updateCheckHelpers.js

@@ -0,0 +1,85 @@
+import { state } from '../state/index.js';
+import { translate } from './i18nHelpers.js';
+import { showToast } from './uiHelpers.js';
+import { getCompleteApiConfig, getCurrentModelType } from '../api/apiConfig.js';
+import { resetAndReload } from '../api/modelApiFactory.js';
+
+/**
+ * Perform a model update check using the shared backend endpoint.
+ * @param {Object} [options]
+ * @param {Function} [options.onStart] - Callback invoked before the request is sent.
+ * @param {Function} [options.onComplete] - Callback invoked after the request settles.
+ * @returns {Promise<{status: 'success' | 'error' | 'unsupported', displayName: string, records: Array, error: Error | null}>}
+ */
+export async function performModelUpdateCheck({ onStart, onComplete } = {}) {
+    const modelType = getCurrentModelType();
+    const apiConfig = getCompleteApiConfig(modelType);
+    const displayName = apiConfig?.config?.displayName ?? 'Model';
+
+    if (!apiConfig?.endpoints?.refreshUpdates) {
+        console.warn('Refresh updates endpoint not configured for model type:', modelType);
+        onComplete?.({ status: 'unsupported', displayName, records: [], error: null });
+        return { status: 'unsupported', displayName, records: [], error: null };
+    }
+
+    const loadingMessage = translate(
+        'globalContextMenu.checkModelUpdates.loading',
+        { type: displayName },
+        `Checking for ${displayName} updates...`
+    );
+
+    onStart?.({ displayName, loadingMessage });
+
+    state.loadingManager?.showSimpleLoading?.(loadingMessage);
+
+    let status = 'success';
+    let records = [];
+    let error = null;
+
+    try {
+        const response = await fetch(apiConfig.endpoints.refreshUpdates, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ force: false })
+        });
+
+        let payload = {};
+        try {
+            payload = await response.json();
+        } catch {
+            payload = {};
+        }
+
+        if (!response.ok || payload.success !== true) {
+            const errorMessage = payload?.error || response.statusText || 'Unknown error';
+            throw new Error(errorMessage);
+        }
+
+        records = Array.isArray(payload.records) ? payload.records : [];
+
+        if (records.length > 0) {
+            showToast('globalContextMenu.checkModelUpdates.success', { count: records.length, type: displayName }, 'success');
+        } else {
+            showToast('globalContextMenu.checkModelUpdates.none', { type: displayName }, 'info');
+        }
+
+        await resetAndReload(false);
+    } catch (err) {
+        status = 'error';
+        error = err instanceof Error ? err : new Error(String(err));
+        console.error('Error checking model updates:', error);
+        showToast(
+            'globalContextMenu.checkModelUpdates.error',
+            { message: error?.message ?? 'Unknown error', type: displayName },
+            'error'
+        );
+    } finally {
+        state.loadingManager?.hide?.();
+        if (typeof state.loadingManager?.restoreProgressBar === 'function') {
+            state.loadingManager.restoreProgressBar();
+        }
+        onComplete?.({ status, displayName, records, error });
+    }
+
+    return { status, displayName, records, error };
+}

templates/components/controls.html

@@ -56,10 +56,18 @@
                     <i class="fas fa-star"></i> <span>{{ t('loras.controls.favorites.action') }}</span>
                 </button>
             </div>
-            <div class="control-group">
+            <div class="control-group dropdown-group update-filter-group">
-                <button id="updateFilterBtn" data-action="toggle-updates" class="update-filter" title="{{ t('loras.controls.updates.title') }}">
+                <button id="updateFilterBtn" data-action="toggle-updates" class="dropdown-main update-filter" title="{{ t('loras.controls.updates.title') }}">
                     <i class="fas fa-exclamation-circle"></i> <span>{{ t('loras.controls.updates.action') }}</span>
                 </button>
+                <button id="updateFilterMenuToggle" class="dropdown-toggle" aria-label="{{ t('loras.controls.updates.menuLabel') }}">
+                    <i class="fas fa-caret-down"></i>
+                </button>
+                <div class="dropdown-menu">
+                    <div id="checkUpdatesMenuItem" class="dropdown-item" data-action="check-updates" title="{{ t('loras.controls.updates.checkTooltip') }}">
+                        <i class="fas fa-sync-alt"></i> <span>{{ t('loras.controls.updates.check') }}</span>
+                    </div>
+                </div>
             </div>
             <div id="customFilterIndicator" class="control-group hidden">
                 <div class="filter-active">

tests/frontend/components/pageControls.filtering.test.js

@@ -28,6 +28,8 @@ const sidebarManagerMock = {
 
 const createAlphabetBarMock = vi.fn(() => ({ destroy: vi.fn() }));
 
+const performModelUpdateCheckMock = vi.fn();
+
 getModelApiClientMock.mockReturnValue(apiClientMock);
 
 vi.mock('../../../static/js/api/modelApiFactory.js', () => ({
@@ -52,6 +54,10 @@ vi.mock('../../../static/js/components/alphabet/index.js', () => ({
   createAlphabetBar: createAlphabetBarMock,
 }));
 
+vi.mock('../../../static/js/utils/updateCheckHelpers.js', () => ({
+  performModelUpdateCheck: performModelUpdateCheckMock,
+}));
+
 beforeEach(() => {
   vi.resetModules();
   vi.clearAllMocks();
@@ -61,6 +67,7 @@ beforeEach(() => {
   fetchCivitaiMetadataMock.mockResolvedValue(undefined);
   resetAndReloadMock.mockResolvedValue(undefined);
   getModelApiClientMock.mockReturnValue(apiClientMock);
+  performModelUpdateCheckMock.mockResolvedValue({ status: 'success', displayName: 'LoRA', records: [] });
 
   sidebarManagerMock.isInitialized = false;
   sidebarManagerMock.initialize.mockImplementation(async () => {
@@ -135,8 +142,20 @@ function renderControlsDom(pageKey) {
           <div class="control-group">
             <button id="favoriteFilterBtn" class="favorite-filter"></button>
           </div>
-          <div class="control-group">
+          <div class="control-group dropdown-group update-filter-group">
-            <button id="updateFilterBtn" class="update-filter"></button>
+            <button id="updateFilterBtn" class="dropdown-main update-filter" aria-busy="false">
+              <i class="fas fa-exclamation-circle"></i>
+              <span>Updates</span>
+            </button>
+            <button id="updateFilterMenuToggle" class="dropdown-toggle">
+              <i class="fas fa-caret-down"></i>
+            </button>
+            <div class="dropdown-menu">
+              <div id="checkUpdatesMenuItem" class="dropdown-item" data-action="check-updates">
+                <i class="fas fa-sync-alt"></i>
+                <span>Check updates</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -149,6 +168,15 @@ function renderControlsDom(pageKey) {
   `;
 }
 
+function createDeferred() {
+  let resolve;
+  const promise = new Promise((res) => {
+    resolve = res;
+  });
+
+  return { promise, resolve };
+}
+
 describe('SearchManager filtering scenarios', () => {
   it.each([
     ['loras'],
@@ -390,6 +418,63 @@ describe('PageControls favorites, sorting, and duplicates scenarios', () => {
     expect(resetAndReloadMock).toHaveBeenCalledWith(true);
   });
 
+  it('disables update controls while checking for model updates and restores them afterwards', async () => {
+    const deferred = createDeferred();
+    performModelUpdateCheckMock.mockImplementation(async () => {
+      await deferred.promise;
+      return { status: 'success', displayName: 'LoRA', records: [] };
+    });
+
+    renderControlsDom('loras');
+    const stateModule = await import('../../../static/js/state/index.js');
+    stateModule.initPageState('loras');
+    const { LorasControls } = await import('../../../static/js/components/controls/LorasControls.js');
+
+    new LorasControls();
+
+    const updateButton = document.getElementById('updateFilterBtn');
+    const toggleButton = document.getElementById('updateFilterMenuToggle');
+    const menuItem = document.getElementById('checkUpdatesMenuItem');
+    const dropdownGroup = menuItem.closest('.dropdown-group');
+    const icon = updateButton.querySelector('i');
+
+    expect(updateButton.disabled).toBe(false);
+    expect(toggleButton.disabled).toBe(false);
+    expect(menuItem.classList.contains('disabled')).toBe(false);
+
+    menuItem.dispatchEvent(new Event('click', { bubbles: true }));
+
+    expect(performModelUpdateCheckMock).toHaveBeenCalledTimes(1);
+    expect(updateButton.disabled).toBe(true);
+    expect(updateButton.classList.contains('loading')).toBe(true);
+    expect(updateButton.getAttribute('aria-busy')).toBe('true');
+    expect(toggleButton.disabled).toBe(true);
+    expect(toggleButton.classList.contains('loading')).toBe(true);
+    expect(menuItem.classList.contains('disabled')).toBe(true);
+    expect(menuItem.getAttribute('aria-disabled')).toBe('true');
+    expect(icon.classList.contains('fa-spinner')).toBe(true);
+    expect(icon.classList.contains('fa-spin')).toBe(true);
+
+    deferred.resolve();
+    await performModelUpdateCheckMock.mock.results[0].value;
+    await Promise.resolve();
+
+    await vi.waitFor(() => {
+      expect(updateButton.disabled).toBe(false);
+      expect(updateButton.classList.contains('loading')).toBe(false);
+      expect(toggleButton.disabled).toBe(false);
+      expect(toggleButton.classList.contains('loading')).toBe(false);
+      expect(menuItem.classList.contains('disabled')).toBe(false);
+    });
+
+    expect(updateButton.getAttribute('aria-busy')).toBe('false');
+    expect(menuItem.hasAttribute('aria-disabled')).toBe(false);
+    expect(icon.classList.contains('fa-spinner')).toBe(false);
+    expect(icon.classList.contains('fa-spin')).toBe(false);
+    expect(icon.classList.contains('fa-exclamation-circle')).toBe(true);
+    expect(dropdownGroup.classList.contains('active')).toBe(false);
+  });
+
   it('saves sort selection and reloads models', async () => {
     renderControlsDom('loras');
     const stateModule = await import('../../../static/js/state/index.js');