feat: add update available indicator to model cards

- Add CSS custom properties for update badge styling in both light and dark themes
- Create new card header info layout with flexbox for better content organization
- Implement model-update-badge component with glow effects and proper spacing
- Add has-update class to cards when updates are available with visual border indicators
- Update ModelCard.js to conditionally render update badges based on model data
- Include internationalization support for update badge labels and tooltips

The changes provide users with clear visual indicators when model updates are available, improving the user experience by making update status immediately visible without requiring manual checks.

static/js/components/shared/ModelCard.js

@@ -432,6 +432,8 @@ export function createModelCard(model, modelType) {
     card.dataset.notes = model.notes || '';
     card.dataset.base_model = model.base_model || 'Unknown';
     card.dataset.favorite = model.favorite ? 'true' : 'false';
+    const hasUpdateAvailable = Boolean(model.update_available);
+    card.dataset.update_available = hasUpdateAvailable ? 'true' : 'false';
 
     // LoRA specific data
     if (modelType === MODEL_TYPES.LORA) {
@@ -507,6 +509,9 @@ export function createModelCard(model, modelType) {
 
     // Get favorite status from model data
     const isFavorite = model.favorite === true;
+    if (hasUpdateAvailable) {
+        card.classList.add('has-update');
+    }
 
     // Generate action icons based on model type with i18n support
     const favoriteTitle = isFavorite ? 
@@ -531,6 +536,8 @@ export function createModelCard(model, modelType) {
         copyTitle = translate('modelCard.actions.copyLoRASyntax', {}, 'Copy value');
     }
 
+    const updateBadgeLabel = translate('modelCard.badges.update', {}, 'Update');
+    const updateBadgeTooltip = translate('modelCard.badges.updateAvailable', {}, 'Update available');
     const actionIcons = `
         <i class="${isFavorite ? 'fas fa-star favorite-active' : 'far fa-star'}" 
            title="${favoriteTitle}">
@@ -568,9 +575,16 @@ export function createModelCard(model, modelType) {
                   `<button class="toggle-blur-btn" title="${toggleBlurTitle}">
                       <i class="fas fa-eye"></i>
                   </button>` : ''}
-                <span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${model.base_model}">
-                    ${model.base_model}
-                </span>
+                <div class="card-header-info">
+                    <span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${model.base_model}">
+                        ${model.base_model}
+                    </span>
+                    ${hasUpdateAvailable ? `
+                        <span class="model-update-badge" title="${updateBadgeTooltip}">
+                            ${updateBadgeLabel}
+                        </span>
+                    ` : ''}
+                </div>
                 <div class="card-actions">
                     ${actionIcons}
                 </div>