feat(updates): improve check updates confirmation

static/js/components/controls/PageControls.js

@@ -235,13 +235,22 @@ export class PageControls {
         this._updateCheckInProgress = true;
         setLoadingState(true);
 
+        const handleComplete = () => {
+            this._updateCheckInProgress = false;
+            setLoadingState(false);
+        };
+
         try {
-            await performModelUpdateCheck();
+            await performModelUpdateCheck({
+                onComplete: handleComplete,
+            });
         } catch (error) {
             console.error('Failed to check model updates:', error);
         } finally {
-            this._updateCheckInProgress = false;
-            setLoadingState(false);
+            if (this._updateCheckInProgress) {
+                this._updateCheckInProgress = false;
+                setLoadingState(false);
+            }
             dropdownGroup?.classList.remove('active');
         }
     }

static/js/managers/ModalManager.js

@@ -195,6 +195,18 @@ export class ModalManager {
             });
         }
 
+        // Add checkUpdatesConfirmModal registration
+        const checkUpdatesConfirmModal = document.getElementById('checkUpdatesConfirmModal');
+        if (checkUpdatesConfirmModal) {
+            this.registerModal('checkUpdatesConfirmModal', {
+                element: checkUpdatesConfirmModal,
+                onClose: () => {
+                    this.getModal('checkUpdatesConfirmModal').element.classList.remove('show');
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
+
         // Add helpModal registration
         const helpModal = document.getElementById('helpModal');
         if (helpModal) {
@@ -339,7 +351,8 @@ export class ModalManager {
           id === "duplicateDeleteModal" ||
           id === "modelDuplicateDeleteModal" ||
           id === "clearCacheModal" ||
-          id === "bulkDeleteModal"
+          id === "bulkDeleteModal" ||
+          id === "checkUpdatesConfirmModal"
         ) {
           modal.element.classList.add("show");
         } else {

static/js/utils/updateCheckHelpers.js

@@ -3,6 +3,10 @@ import { translate } from './i18nHelpers.js';
 import { showToast } from './uiHelpers.js';
 import { getCompleteApiConfig, getCurrentModelType } from '../api/apiConfig.js';
 import { resetAndReload } from '../api/modelApiFactory.js';
+import { getStorageItem, setStorageItem } from './storageHelpers.js';
+import { modalManager } from '../managers/ModalManager.js';
+
+const CHECK_UPDATES_CONFIRMATION_KEY = 'ack_check_updates_for_all_models';
 
 /**
  * Perform a model update check using the shared backend endpoint.
@@ -22,6 +26,12 @@ export async function performModelUpdateCheck({ onStart, onComplete } = {}) {
         return { status: 'unsupported', displayName, records: [], error: null };
     }
 
+    const proceed = await ensureCheckUpdatesConfirmation(displayName);
+    if (!proceed) {
+        onComplete?.({ status: 'cancelled', displayName, records: [], error: null });
+        return { status: 'cancelled', displayName, records: [], error: null };
+    }
+
     const loadingMessage = translate(
         'globalContextMenu.checkModelUpdates.loading',
         { type: displayName },
@@ -83,3 +93,101 @@ export async function performModelUpdateCheck({ onStart, onComplete } = {}) {
 
     return { status, displayName, records, error };
 }
+
+function getTypePlural(displayName) {
+    if (!displayName) {
+        return 'models';
+    }
+
+    const lower = displayName.toLowerCase();
+    if (lower.endsWith('s')) {
+        return displayName;
+    }
+
+    return `${displayName}s`;
+}
+
+async function ensureCheckUpdatesConfirmation(displayName) {
+    const hasConfirmed = getStorageItem(CHECK_UPDATES_CONFIRMATION_KEY, false);
+    if (hasConfirmed) {
+        return true;
+    }
+
+    const modalElement = document.getElementById('checkUpdatesConfirmModal');
+    if (!modalElement) {
+        return true;
+    }
+
+    const typePlural = getTypePlural(displayName);
+
+    const titleElement = modalElement.querySelector('[data-role="title"]');
+    if (titleElement) {
+        titleElement.textContent = translate(
+            'modals.checkUpdates.title',
+            { type: displayName, typePlural },
+            `Check updates for all ${typePlural}?`
+        );
+    }
+
+    const messageElement = modalElement.querySelector('[data-role="message"]');
+    if (messageElement) {
+        messageElement.textContent = translate(
+            'modals.checkUpdates.message',
+            { type: displayName, typePlural },
+            `This checks every ${typePlural} in your library for updates. Large collections may take a little longer.`
+        );
+    }
+
+    const tipElement = modalElement.querySelector('[data-role="tip"]');
+    if (tipElement) {
+        tipElement.textContent = translate(
+            'modals.checkUpdates.tip',
+            { type: displayName, typePlural },
+            'To work in smaller batches, switch to bulk mode, pick the ones you need, then use "Check Updates for Selected".'
+        );
+    }
+
+    const confirmButton = modalElement.querySelector('[data-action="confirm-check-updates"]');
+    const cancelButton = modalElement.querySelector('[data-action="cancel-check-updates"]');
+
+    if (!confirmButton || !cancelButton) {
+        return true;
+    }
+
+    return new Promise((resolve) => {
+        let resolved = false;
+
+        const cleanup = () => {
+            confirmButton.removeEventListener('click', handleConfirm);
+            cancelButton.removeEventListener('click', handleCancel);
+        };
+
+        const finalize = (proceed) => {
+            if (resolved) {
+                return;
+            }
+
+            resolved = true;
+            cleanup();
+            resolve(proceed);
+        };
+
+        const handleConfirm = (event) => {
+            event.preventDefault();
+            setStorageItem(CHECK_UPDATES_CONFIRMATION_KEY, true);
+            finalize(true);
+            modalManager.closeModal('checkUpdatesConfirmModal');
+        };
+
+        const handleCancel = (event) => {
+            event.preventDefault();
+            finalize(false);
+            modalManager.closeModal('checkUpdatesConfirmModal');
+        };
+
+        confirmButton.addEventListener('click', handleConfirm);
+        cancelButton.addEventListener('click', handleCancel);
+
+        modalManager.showModal('checkUpdatesConfirmModal', null, () => finalize(false));
+    });
+}