feat: Implement Git-based update functionality with nightly mode support and UI enhancements

static/css/base.css

@@ -50,8 +50,8 @@ html, body {
     --lora-border: oklch(90% 0.02 256 / 0.15);
     --lora-text: oklch(95% 0.02 256);
     --lora-error: oklch(75% 0.32 29);
-    --lora-warning: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h)); /* Modified to be used with oklch() */
-    --lora-success: oklch(var(--lora-success-l) var(--lora-success-c) var(--lora-success-h)); /* New green success color */
+    --lora-warning: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h));
+    --lora-success: oklch(var(--lora-success-l) var(--lora-success-c) var(--lora-success-h));
     
     /* Spacing Scale */
     --space-1: calc(8px * 1);

static/css/components/header.css

@@ -223,11 +223,6 @@
   opacity: 1;
 }
 
-.update-badge.hidden,
-.update-badge:not(.visible) {
-  opacity: 0;
-}
-
 /* Mobile adjustments */
 @media (max-width: 768px) {
   .app-title {

static/css/components/modal.css

@@ -172,6 +172,91 @@ body.modal-open {
     opacity: 1;
 }
 
+/* Update Modal specific styles */
+.update-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    align-items: stretch;
+    flex-wrap: nowrap;
+}
+
+.update-link {
+    color: var(--lora-accent);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.95em;
+}
+
+.update-link:hover {
+    text-decoration: underline;
+}
+
+/* Update progress styles */
+.update-progress {
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+    padding: var(--space-2);
+    margin: var(--space-2) 0;
+}
+
+[data-theme="dark"] .update-progress {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.progress-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.progress-text {
+    font-size: 0.9em;
+    color: var(--text-color);
+    opacity: 0.8;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+[data-theme="dark"] .progress-bar {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.progress-fill {
+    height: 100%;
+    background-color: var(--lora-accent);
+    width: 0%;
+    transition: width 0.3s ease;
+    border-radius: 4px;
+}
+
+/* Update button states */
+#updateBtn {
+    min-width: 120px;
+}
+
+#updateBtn.updating {
+    background-color: var(--lora-warning);
+    cursor: not-allowed;
+}
+
+#updateBtn.success {
+    background-color: var(--lora-success);
+}
+
+#updateBtn.error {
+    background-color: var(--lora-error);
+}
+
 /* Settings styles */
 .settings-toggle {
     width: 36px;