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

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 { getCompleteApiConfig, getCurrentModelType } from '../../api/apiConfig.js';
-import { resetAndReload } from '../../api/modelApiFactory.js';
+import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.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, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ force: false })
+            await performModelUpdateCheck({
+                onComplete: () => {
+                    menuItem?.classList.remove('disabled');
+                    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);
-            showToast(
-                'globalContextMenu.checkModelUpdates.error',
-                { message: error?.message ?? 'Unknown error', type: displayName },
-                'error'
-            );
+            console.error('Failed to check model updates:', error);
         } finally {
-            state.loadingManager?.hide?.();
-            if (typeof state.loadingManager?.restoreProgressBar === 'function') {
-                state.loadingManager.restoreProgressBar();
+            if (this._updateCheckInProgress) {
+                this._updateCheckInProgress = false;
+                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';
 
 /**
@@ -26,7 +27,9 @@ export class PageControls {
         
         // Use global sidebar manager
         this.sidebarManager = sidebarManager;
-        
+
+        this._updateCheckInProgress = false;
+
         // Initialize event listeners
         this.initEventListeners();
         
@@ -156,7 +159,15 @@ export class PageControls {
                 document.querySelector('.dropdown-group.active')?.classList.remove('active');
             });
         }
-        
+
+        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')) {
@@ -166,7 +177,73 @@ 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 };
+}