Fix update button persistence with more robust implementation

- Completely redesigned update notification system with dedicated functions
- Added showUpdateAlert and hideUpdateAlert functions for better control
- Improved update status persistence with namespaced localStorage keys
- Added custom CSS styles with \!important to prevent style overrides
- Modified toggle test functionality to directly show/hide the update alert
- Prevented update notifications from being cleared on errors
- Added forced display styles and higher z-index for visibility
- Added debugging logs to verify update detection

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>

public/index.html

@@ -137,8 +137,8 @@
                                             <div class="mt-2 testing-controls">
                                                 <small><a href="#" id="toggle-test-update-button">Toggle Test Update</a></small>
                                             </div>
-                                            <div id="update-available" class="mt-3 d-none">
+                                            <div id="update-available" class="mt-3">
-                                                <div class="alert alert-info">
+                                                <div class="alert alert-info update-alert" style="display: none;">
                                                     <i class="fas fa-arrow-circle-up"></i> 
                                                     <span>A new version is available!</span>
                                                     <button id="btn-update-now" class="btn btn-sm btn-primary ml-2">
@@ -669,6 +669,26 @@
         </div>
     </div>
 
+    <!-- Update Alert Custom Styles -->
+    <style>
+        /* Custom styles for update alert to ensure it's visible */
+        .update-alert {
+            display: none;
+            margin-top: 10px !important;
+            border: 2px solid #007bff !important;
+            background-color: #cce5ff !important;
+            color: #004085 !important;
+            font-weight: bold !important;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
+            position: relative !important;
+            z-index: 100 !important;
+        }
+        .update-alert span {
+            color: #004085 !important;
+            font-weight: bold !important;
+        }
+    </style>
+    
     <!-- JavaScript Files -->
     <script src="/js/system-status.js"></script>
     <script src="/js/app.js"></script>

public/js/system-status.js

@@ -54,31 +54,61 @@ function initSystemStatus() {
       });
   }
   
-  // Track update check status
+  // More robust update check status tracking
-  let updateAvailable = localStorage.getItem('updateAvailable') === 'true';
+  const UPDATE_KEY = 'trm_update_available';
+  const CURRENT_VERSION_KEY = 'trm_current_version';
+  const REMOTE_VERSION_KEY = 'trm_remote_version';
   let updateCheckInProgress = false;
   
-  // If we have stored update info, restore it
+  // Function to show update alert
-  if (updateAvailable) {
+  function showUpdateAlert(currentVersion, remoteVersion) {
-    const currentVersion = localStorage.getItem('currentVersion');
+    // Set status text
-    const remoteVersion = localStorage.getItem('remoteVersion');
-    
-    if (currentVersion && remoteVersion) {
     updateStatusElement.innerHTML = '<i class="fas fa-exclamation-circle text-warning"></i> Update available';
-      updateAvailableDiv.classList.remove('d-none');
+    
-      updateAvailableDiv.style.display = 'block'; // Force display
+    // Show alert box
-      updateAvailableDiv.querySelector('span').textContent = 
+    const alertBox = updateAvailableDiv.querySelector('.alert');
-        `A new version is available: ${currentVersion} → ${remoteVersion}`;
+    if (alertBox) {
+      alertBox.style.display = 'block';
+      // Update message
+      const spanElement = alertBox.querySelector('span');
+      if (spanElement) {
+        spanElement.textContent = `A new version is available: ${currentVersion} → ${remoteVersion}`;
       }
     }
     
+    // Store in localStorage
+    localStorage.setItem(UPDATE_KEY, 'true');
+    localStorage.setItem(CURRENT_VERSION_KEY, currentVersion);
+    localStorage.setItem(REMOTE_VERSION_KEY, remoteVersion);
+  }
+  
+  // Function to hide update alert
+  function hideUpdateAlert() {
+    const alertBox = updateAvailableDiv.querySelector('.alert');
+    if (alertBox) {
+      alertBox.style.display = 'none';
+    }
+    
+    // Clear localStorage
+    localStorage.removeItem(UPDATE_KEY);
+    localStorage.removeItem(CURRENT_VERSION_KEY);
+    localStorage.removeItem(REMOTE_VERSION_KEY);
+  }
+  
+  // Check localStorage on init
+  (function checkStoredUpdateStatus() {
+    const isUpdateAvailable = localStorage.getItem(UPDATE_KEY) === 'true';
+    if (isUpdateAvailable) {
+      const currentVersion = localStorage.getItem(CURRENT_VERSION_KEY);
+      const remoteVersion = localStorage.getItem(REMOTE_VERSION_KEY);
+      if (currentVersion && remoteVersion) {
+        showUpdateAlert(currentVersion, remoteVersion);
+      }
+    }
+  })();
+  
   // Check for updates
   function checkForUpdates() {
-    // Don't hide update button if an update is available and we're just refreshing
-    if (!updateAvailable) {
-      updateAvailableDiv.classList.add('d-none');
-    }
-    
     updateStatusElement.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Checking...';
     updateCheckInProgress = true;
     
@@ -131,30 +161,21 @@ function initSystemStatus() {
         
         if (data.status === 'success') {
           if (data.data && data.data.updateAvailable) {
-            updateAvailable = true;
+            // Show update alert with version info
-            updateStatusElement.innerHTML = '<i class="fas fa-exclamation-circle text-warning"></i> Update available';
+            showUpdateAlert(data.data.currentVersion, data.data.remoteVersion);
             
-            // Make update button visible immediately
+            // Log to console for debugging
-            updateAvailableDiv.classList.remove('d-none');
+            console.log('Update available detected:', data.data.currentVersion, '->', data.data.remoteVersion);
-            updateAvailableDiv.style.display = 'block'; // Force display
-            
-            updateAvailableDiv.querySelector('span').textContent = 
-              `A new version is available: ${data.data.currentVersion} → ${data.data.remoteVersion}`;
-              
-            // Store update info in localStorage to persist across refreshes
-            localStorage.setItem('updateAvailable', 'true');
-            localStorage.setItem('currentVersion', data.data.currentVersion);
-            localStorage.setItem('remoteVersion', data.data.remoteVersion);
           } else {
-            updateAvailable = false;
+            // No update available
             updateStatusElement.innerHTML = '<i class="fas fa-check-circle text-success"></i> Up to date';
-            localStorage.removeItem('updateAvailable');
+            hideUpdateAlert();
           }
         } else {
           // Error status but with a response
-          updateAvailable = false;
           updateStatusElement.innerHTML = '<i class="fas fa-times-circle text-danger"></i> Check failed';
           showNotification(data.message || 'Failed to check for updates', 'danger');
+          // Don't clear update status on error - keep any previous update notification
         }
       })
       .catch(error => {
@@ -171,6 +192,8 @@ function initSystemStatus() {
         } else {
           showNotification(error.message || 'Failed to connect to server', 'danger');
         }
+        
+        // Don't clear update status on error - keep any previous update notification
       });
   }
   
@@ -305,10 +328,17 @@ function initSystemStatus() {
       localStorage.setItem('showUpdateButton', newSetting);
       testToggle.innerText = newSetting ? 'Disable Test Update' : 'Enable Test Update';
       
-      // Re-check for updates with new setting
+      if (newSetting) {
+        // If enabling test mode, force show update button
+        showUpdateAlert('2.0.10', '2.1.0-test');
+        updateStatusElement.innerHTML = '<i class="fas fa-exclamation-circle text-warning"></i> Update available';
+        showNotification('Test update button enabled', 'info');
+      } else {
+        // If disabling test mode, check for real updates
+        hideUpdateAlert();
         checkForUpdates();
-      
+        showNotification('Test update button disabled', 'info');
-      showNotification(`Test update button ${newSetting ? 'enabled' : 'disabled'}`, 'info');
+      }
     });
   }