feat(model-modal): add dynamic update availability indicators, see #715

- Add update badge to versions tab button when model has updates
- Sync update status between modal and model cards in gallery
- Pass `onUpdateStatusChange` callback to versions tab for real-time updates
- Introduce `updateAvailabilityState` to track update status changes
- Improve user awareness of available model updates across UI components

static/js/components/shared/ModelModal.js

@@ -312,6 +312,8 @@ export async function showModelModal(model, modelType) {
         ].join('\n')
         : '';
     const hasUpdateAvailable = Boolean(modelWithFullData.update_available);
+    const updateAvailabilityState = { hasUpdateAvailable };
+    const updateBadgeTooltip = translate('modelCard.badges.updateAvailable', {}, 'Update available');
     
     // Prepare LoRA specific data with complete civitai data
     const escapedWords = (modelType === 'loras' || modelType === 'embeddings') && modelWithFullData.civitai?.trainedWords?.length ? 
@@ -521,6 +523,82 @@ export async function showModelModal(model, modelType) {
         </div>
     `;
     
+    function updateVersionsTabBadge(hasUpdate) {
+        const modalElement = document.getElementById(modalId);
+        if (!modalElement) return;
+
+        const tabButton = modalElement.querySelector('.tab-btn[data-tab="versions"]');
+        if (!tabButton) return;
+
+        tabButton.classList.toggle('tab-btn--has-update', hasUpdate);
+
+        let badge = tabButton.querySelector('.tab-badge--update');
+        if (hasUpdate) {
+            if (!badge) {
+                badge = document.createElement('span');
+                badge.className = 'tab-badge tab-badge--update';
+                badge.textContent = versionsBadgeLabel;
+                badge.title = updateBadgeTooltip;
+                tabButton.appendChild(badge);
+            } else {
+                badge.textContent = versionsBadgeLabel;
+                badge.title = updateBadgeTooltip;
+            }
+        } else if (badge) {
+            badge.remove();
+        }
+    }
+
+    function updateCardUpdateAvailability(hasUpdate) {
+        const filePath = modelWithFullData.file_path;
+        if (!filePath) return;
+
+        let updatedViaScroller = false;
+        if (state.virtualScroller?.updateSingleItem) {
+            updatedViaScroller = state.virtualScroller.updateSingleItem(filePath, {
+                update_available: hasUpdate,
+            });
+        }
+
+        if (updatedViaScroller) {
+            return;
+        }
+
+        const escapedPath = window.CSS && typeof window.CSS.escape === 'function'
+            ? window.CSS.escape(filePath)
+            : filePath.replace(/["\\]/g, '\\$&');
+        const card = document.querySelector(`.model-card[data-filepath="${escapedPath}"]`);
+        if (!card) return;
+
+        card.dataset.update_available = hasUpdate ? 'true' : 'false';
+        card.classList.toggle('has-update', hasUpdate);
+
+        const headerInfo = card.querySelector('.card-header-info');
+        if (!headerInfo) return;
+
+        let badge = headerInfo.querySelector('.model-update-badge');
+        if (hasUpdate) {
+            if (!badge) {
+                badge = document.createElement('span');
+                badge.className = 'model-update-badge';
+                badge.title = updateBadgeTooltip;
+                badge.textContent = versionsBadgeLabel;
+                headerInfo.appendChild(badge);
+            }
+        } else if (badge) {
+            badge.remove();
+        }
+    }
+
+    function handleUpdateStatusChange(hasUpdate) {
+        if (updateAvailabilityState.hasUpdateAvailable === hasUpdate) {
+            return;
+        }
+        updateAvailabilityState.hasUpdateAvailable = hasUpdate;
+        updateVersionsTabBadge(hasUpdate);
+        updateCardUpdateAvailability(hasUpdate);
+    }
+    
     let showcaseCleanup;
 
     const onCloseCallback = function() {
@@ -542,11 +620,14 @@ export async function showModelModal(model, modelType) {
     if (activeModalElement) {
         activeModalElement.dataset.filePath = modelWithFullData.file_path || '';
     }
+    updateVersionsTabBadge(updateAvailabilityState.hasUpdateAvailable);
     const versionsTabController = initVersionsTab({
         modalId,
         modelType,
         modelId: civitaiModelId,
         currentVersionId: civitaiVersionId,
+        currentBaseModel: modelWithFullData.base_model,
+        onUpdateStatusChange: handleUpdateStatusChange,
     });
     setupEditableFields(modelWithFullData.file_path, modelType);
     showcaseCleanup = setupShowcaseScroll(modalId);

static/js/components/shared/ModelVersionsTab.js

@@ -228,6 +228,64 @@ function getCurrentVersionBaseModel(record, versionId) {
     };
 }
 
+function resolveUpdateAvailability(record, baseModel, currentVersionId) {
+    if (!record) {
+        return false;
+    }
+
+    const strategy = state?.global?.settings?.update_flag_strategy;
+    const sameBaseMode = strategy === DISPLAY_FILTER_MODES.SAME_BASE;
+
+    if (!sameBaseMode) {
+        return Boolean(record?.hasUpdate);
+    }
+
+    const normalizedBase = normalizeBaseModelName(baseModel);
+    if (!normalizedBase || !Array.isArray(record.versions)) {
+        return false;
+    }
+
+    const normalizedCurrentVersionId =
+        typeof currentVersionId === 'number'
+            ? currentVersionId
+            : currentVersionId
+            ? Number(currentVersionId)
+            : null;
+
+    let threshold = null;
+    for (const version of record.versions) {
+        if (!version.isInLibrary) {
+            continue;
+        }
+        const versionBase = normalizeBaseModelName(version.baseModel);
+        if (versionBase !== normalizedBase) {
+            continue;
+        }
+        if (threshold === null || version.versionId > threshold) {
+            threshold = version.versionId;
+        }
+    }
+
+    if (threshold === null) {
+        threshold = normalizedCurrentVersionId;
+    }
+
+    if (threshold === null) {
+        return false;
+    }
+
+    return record.versions.some(version => {
+        if (version.isInLibrary || version.shouldIgnore) {
+            return false;
+        }
+        const versionBase = normalizeBaseModelName(version.baseModel);
+        if (versionBase !== normalizedBase) {
+            return false;
+        }
+        return typeof version.versionId === 'number' && version.versionId > threshold;
+    });
+}
+
 function getAutoplaySetting() {
     try {
         return Boolean(state?.global?.settings?.autoplay_on_hover);
@@ -490,6 +548,8 @@ export function initVersionsTab({
     modelType,
     modelId,
     currentVersionId,
+    currentBaseModel,
+    onUpdateStatusChange,
 }) {
     const pane = document.querySelector(`#${modalId} #versions-tab`);
     const container = pane ? pane.querySelector('.model-versions-tab') : null;
@@ -513,6 +573,10 @@ export function initVersionsTab({
         record: null,
     };
 
+    const updateStatusChangeHandler =
+        typeof onUpdateStatusChange === 'function' ? onUpdateStatusChange : null;
+    let lastNotifiedUpdateState = null;
+
     let displayMode = getDefaultDisplayMode();
 
     let apiClient;
@@ -619,6 +683,18 @@ function render(record) {
     `;
 
         setupMediaHoverInteractions(container);
+
+        if (updateStatusChangeHandler) {
+            const resolvedFlag = resolveUpdateAvailability(
+                record,
+                currentBaseModel,
+                normalizedCurrentVersionId
+            );
+            if (resolvedFlag !== lastNotifiedUpdateState) {
+                lastNotifiedUpdateState = resolvedFlag;
+                updateStatusChangeHandler(resolvedFlag, record);
+            }
+        }
     }
 
     async function loadVersions({ forceRefresh = false, eager = false } = {}) {