add update indicator

static/js/base.js

@@ -438,25 +438,13 @@ function drawLoadingState(ctx) {
     // Setup coordinate system
     ctx.scale(pixelRatio, pixelRatio);
 
-    // Draw loading text
+    // Draw loading text only
     ctx.fillStyle = '#9ca3af';
     ctx.font = '16px sans-serif';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
     ctx.fillText('Loading pattern...', center, center);
 
-    // Draw spinning circle
-    const time = Date.now() / 1000;
-    const radius = 30;
-
-    ctx.strokeStyle = '#0c7ff2';
-    ctx.lineWidth = 3;
-    ctx.lineCap = 'round';
-
-    ctx.beginPath();
-    ctx.arc(center, center - 40, radius, time * 2, time * 2 + Math.PI * 1.5);
-    ctx.stroke();
-
     ctx.restore();
 }
 

static/js/settings.js

@@ -234,6 +234,23 @@ async function loadLedConfig() {
 document.addEventListener('DOMContentLoaded', async () => {
     // Initialize UI with default disconnected state
     updateConnectionUI({ connected: false });
+
+    // Handle scroll to section if hash is present in URL
+    if (window.location.hash) {
+        setTimeout(() => {
+            const targetSection = document.querySelector(window.location.hash);
+            if (targetSection) {
+                targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                // Add a subtle highlight animation
+                targetSection.style.transition = 'background-color 0.5s ease';
+                const originalBg = targetSection.style.backgroundColor;
+                targetSection.style.backgroundColor = 'rgba(14, 165, 233, 0.1)';
+                setTimeout(() => {
+                    targetSection.style.backgroundColor = originalBg;
+                }, 2000);
+            }
+        }, 300); // Delay to ensure page is fully loaded
+    }
     
     // Load all data asynchronously
     Promise.all([

templates/base.html

@@ -272,6 +272,16 @@
             </a>
           </div>
           <div class="flex items-center gap-2">
+            <!-- Update Available Indicator -->
+            <button
+              id="update-indicator"
+              class="hidden p-1.5 flex rounded-lg hover:bg-green-100 dark:hover:bg-green-900 focus:outline-none focus:ring-2 focus:ring-green-500"
+              aria-label="Update available"
+              title="Software update available - Click to view"
+            >
+              <span class="material-icons text-green-600 dark:text-green-400 animate-pulse">system_update</span>
+            </button>
+
             <button
               id="theme-toggle"
               class="p-1.5 flex rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -722,6 +732,41 @@
           }
         });
       });
+
+      // Update indicator functionality
+      document.addEventListener('DOMContentLoaded', async function() {
+        const updateIndicator = document.getElementById('update-indicator');
+        if (!updateIndicator) return;
+
+        // Check for updates
+        async function checkForUpdates() {
+          try {
+            const response = await fetch('/api/version');
+            const data = await response.json();
+
+            // Show indicator if update is available
+            if (data.update_available) {
+              updateIndicator.classList.remove('hidden');
+            } else {
+              updateIndicator.classList.add('hidden');
+            }
+          } catch (error) {
+            console.error('Failed to check for updates:', error);
+          }
+        }
+
+        // Initial check
+        await checkForUpdates();
+
+        // Check every hour
+        setInterval(checkForUpdates, 3600000);
+
+        // Click handler - navigate to settings and scroll to update section
+        updateIndicator.addEventListener('click', () => {
+          // Navigate to settings page
+          window.location.href = '/settings#software-version-section';
+        });
+      });
     </script>
 
     <!-- Cache All Previews Prompt Modal -->

templates/playlists.html

@@ -17,6 +17,17 @@
   filter: invert(1);
 }
 
+/* Fix checkbox visibility in light mode */
+html:not(.dark) input[type="checkbox"]:checked {
+  background-color: #2563eb !important; /* Darker blue for better contrast */
+  border-color: #2563eb !important;
+}
+
+html:not(.dark) input[type="checkbox"] {
+  background-color: #ffffff !important;
+  border-color: #d1d5db !important;
+}
+
 /* Mobile responsive utilities */
 @media (max-width: 768px) {
   .mobile-hidden {

templates/settings.html

@@ -46,7 +46,8 @@ endblock %}
 }
 .dark .form-input,
 .dark input[type="number"],
-.dark input[type="text"] {
+.dark input[type="text"],
+.dark input[type="time"] {
   background-color: #1f1f1f;
   border-color: #404040;
   color: #e5e5e5;
@@ -58,6 +59,9 @@ endblock %}
   border-color: #0c7ff2;
   ring-color: #0c7ff2;
 }
+.dark input[type="time"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
 .dark .form-select {
   background-color: #1f1f1f;
   border-color: #404040;
@@ -901,7 +905,7 @@ input:checked + .slider:before {
       </div>
     </div>
   </section>
-  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
+  <section id="software-version-section" class="bg-white rounded-xl shadow-sm overflow-hidden">
     <h2
       class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
     >