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/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
      */