Add auto updater

src/app/app.html

@@ -6,6 +6,40 @@
   <main class="flex-1 min-w-0 relative overflow-hidden">
     <!-- Custom draggable title bar -->
     <app-title-bar />
+
+    @if (desktopUpdateState().restartRequired) {
+    <div class="absolute inset-x-0 top-10 z-20 px-4 pt-4 pointer-events-none">
+      <div class="pointer-events-auto mx-auto max-w-4xl rounded-xl border border-primary/30 bg-primary/10 p-4 shadow-2xl backdrop-blur-sm">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <p class="text-sm font-semibold text-foreground">Update ready to install</p>
+            <p class="mt-1 text-sm text-muted-foreground">
+              MetoYou {{ desktopUpdateState().targetVersion || 'update' }} has been downloaded. Restart the app to finish applying it.
+            </p>
+          </div>
+
+          <div class="flex flex-wrap gap-2">
+            <button
+              type="button"
+              (click)="openUpdatesSettings()"
+              class="inline-flex items-center rounded-lg border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
+            >
+              Update settings
+            </button>
+
+            <button
+              type="button"
+              (click)="restartToApplyUpdate()"
+              class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              Restart now
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    }
+
     <!-- Content area fills below the title bar without global scroll -->
     <div class="absolute inset-x-0 top-10 bottom-0 overflow-auto">
       <router-outlet />
@@ -16,6 +50,47 @@
   <app-floating-voice-controls />
 </div>
 
+@if (desktopUpdateState().serverBlocked) {
+<div class="fixed inset-0 z-[80] flex items-center justify-center bg-background/95 px-6 py-10 backdrop-blur-sm">
+  <div class="w-full max-w-xl rounded-2xl border border-red-500/30 bg-card p-6 shadow-2xl">
+    <h2 class="text-xl font-semibold text-foreground">Server update required</h2>
+    <p class="mt-3 text-sm text-muted-foreground">
+      {{ desktopUpdateState().serverBlockMessage || 'The connected server must be updated before this desktop app can continue.' }}
+    </p>
+
+    <div class="mt-5 grid gap-4 rounded-xl border border-border bg-secondary/20 p-4 text-sm text-muted-foreground sm:grid-cols-2">
+      <div>
+        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Connected server</p>
+        <p class="mt-2 text-foreground">{{ desktopUpdateState().serverVersion || 'Not reported' }}</p>
+      </div>
+
+      <div>
+        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Required minimum</p>
+        <p class="mt-2 text-foreground">{{ desktopUpdateState().minimumServerVersion || 'Unknown' }}</p>
+      </div>
+    </div>
+
+    <div class="mt-6 flex flex-wrap gap-3">
+      <button
+        type="button"
+        (click)="refreshDesktopUpdateContext()"
+        class="inline-flex items-center rounded-lg border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
+      >
+        Retry
+      </button>
+
+      <button
+        type="button"
+        (click)="openNetworkSettings()"
+        class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+      >
+        Open network settings
+      </button>
+    </div>
+  </div>
+</div>
+}
+
 <!-- Unified Settings Modal -->
 <app-settings-modal />