Add in-app updater functionality

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte";
   import { open as openDialog } from "@tauri-apps/plugin-dialog";
+  import { check, type DownloadEvent, type Update } from "@tauri-apps/plugin-updater";
   import { AlertCircle, Check, FolderOpen, GitBranch, GitMerge, LoaderCircle } from "@lucide/svelte";
 
   import TitleBar from "./lib/TitleBar.svelte";
@@ -15,6 +16,7 @@
   import HistoryPanel from "./lib/components/HistoryPanel.svelte";
   import ResolveDialog from "./lib/components/ResolveDialog.svelte";
   import StatusPanel from "./lib/components/StatusPanel.svelte";
+  import UpdateToast from "./lib/components/UpdateToast.svelte";
 
   import {
     checkoutBranch,
@@ -71,6 +73,8 @@
     stripAuthPrefix,
   } from "./lib/credentials";
 
+  type UpdateToastState = "available" | "downloading" | "installed" | "error";
+
   // ── State ──────────────────────────────────────────────────────────────────
 
   let repoPath = "";
@@ -111,6 +115,16 @@
   let lastStatusFingerprint = "";
   const AUTO_REFRESH_INTERVAL = 4000;
   let autoRefreshTimer: ReturnType<typeof setInterval> | undefined;
+  let updateToastOpen = false;
+  let updateToastState: UpdateToastState = "available";
+  let pendingUpdate: Update | null = null;
+  let updateVersion = "";
+  let updateCurrentVersion = "";
+  let updateProgress = 0;
+  let updateError = "";
+  let updateCheckInFlight = false;
+  let updateDownloadTotal = 0;
+  let updateDownloadedBytes = 0;
 
   // ── Derived ────────────────────────────────────────────────────────────────
 
@@ -133,6 +147,7 @@
 
   onMount(() => {
     autoRefreshTimer = setInterval(() => { void autoRefreshTick(); }, AUTO_REFRESH_INTERVAL);
+    void checkForUpdates();
   });
 
   onDestroy(() => {
@@ -166,6 +181,78 @@
     if (autoRefreshEnabled) void autoRefreshTick();
   }
 
+  // ── Updates ────────────────────────────────────────────────────────────────
+
+  async function checkForUpdates() {
+    if (updateCheckInFlight || updateToastState === "downloading") return;
+    updateCheckInFlight = true;
+
+    try {
+      const update = await check();
+      if (!update) return;
+
+      if (pendingUpdate && pendingUpdate !== update) {
+        void pendingUpdate.close().catch(() => {});
+      }
+
+      pendingUpdate = update;
+      updateVersion = update.version;
+      updateCurrentVersion = update.currentVersion;
+      updateProgress = 0;
+      updateError = "";
+      updateToastState = "available";
+      updateToastOpen = true;
+    } catch {
+      // Update checks should be quiet when offline or when the endpoint is unavailable.
+    } finally {
+      updateCheckInFlight = false;
+    }
+  }
+
+  function updateDownloadProgress(event: DownloadEvent) {
+    if (event.event === "Started") {
+      updateProgress = 0;
+      updateDownloadTotal = event.data.contentLength ?? 0;
+      updateDownloadedBytes = 0;
+      return;
+    }
+
+    if (event.event === "Progress") {
+      updateDownloadedBytes += event.data.chunkLength;
+      updateProgress = updateDownloadTotal > 0
+        ? Math.min(99, Math.round((updateDownloadedBytes / updateDownloadTotal) * 100))
+        : 0;
+      return;
+    }
+
+    updateProgress = 100;
+  }
+
+  async function installPendingUpdate() {
+    if (!pendingUpdate || updateToastState === "downloading") return;
+
+    updateToastState = "downloading";
+    updateProgress = 0;
+    updateError = "";
+    updateToastOpen = true;
+    updateDownloadTotal = 0;
+    updateDownloadedBytes = 0;
+
+    try {
+      await pendingUpdate.downloadAndInstall(updateDownloadProgress);
+      updateProgress = 100;
+      updateToastState = "installed";
+    } catch (error) {
+      updateToastState = "error";
+      updateError = errorToMessage(error);
+    }
+  }
+
+  function dismissUpdateToast() {
+    if (updateToastState === "downloading") return;
+    updateToastOpen = false;
+  }
+
   // ── Utilities ──────────────────────────────────────────────────────────────
 
   function applyStatus(nextStatus: GitStatus) {
@@ -1009,6 +1096,19 @@
   </div>
 </main>
 
+{#if updateToastOpen}
+  <UpdateToast
+    state={updateToastState}
+    version={updateVersion}
+    currentVersion={updateCurrentVersion}
+    progress={updateProgress}
+    error={updateError}
+    onInstall={installPendingUpdate}
+    onLater={dismissUpdateToast}
+    onDismiss={dismissUpdateToast}
+  />
+{/if}
+
 <!-- Compare diff dialog -->
 {#if compareDialogOpen && comparison}
   <CompareDialog

src/app.css

@@ -397,6 +397,179 @@
     color: #f0c070;
   }
 
+  /* --- Update toast --- */
+
+  .update-toast {
+    position: fixed;
+    right: 18px;
+    bottom: 18px;
+    z-index: 70;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 12px;
+    width: min(430px, calc(100vw - 32px));
+    padding: 14px;
+    overflow: hidden;
+    border: 1px solid rgba(100, 108, 255, 0.42);
+    border-radius: 14px;
+    color: var(--color-ink);
+    background:
+      linear-gradient(135deg, rgba(100,108,255,0.22), rgba(189,52,254,0.12) 42%, rgba(65,209,255,0.08)),
+      rgba(12, 13, 24, 0.96);
+    box-shadow: 0 24px 72px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.04) inset;
+    backdrop-filter: blur(18px);
+  }
+  .update-toast.error {
+    border-color: rgba(232,96,96,0.45);
+    background:
+      linear-gradient(135deg, rgba(232,96,96,0.16), rgba(100,108,255,0.11)),
+      rgba(12, 13, 24, 0.96);
+  }
+  .update-toast.installed {
+    border-color: rgba(78,202,118,0.38);
+    background:
+      linear-gradient(135deg, rgba(78,202,118,0.15), rgba(65,209,255,0.1), rgba(100,108,255,0.12)),
+      rgba(12, 13, 24, 0.96);
+  }
+
+  .update-toast-glow {
+    position: absolute;
+    inset: auto 18px -46px auto;
+    width: 170px;
+    height: 95px;
+    border-radius: 999px;
+    background: rgba(65,209,255,0.18);
+    filter: blur(34px);
+    pointer-events: none;
+  }
+
+  .update-toast-icon {
+    display: grid;
+    place-items: center;
+    width: 42px;
+    height: 42px;
+    flex: 0 0 auto;
+    border: 1px solid rgba(255,255,255,0.14);
+    border-radius: 12px;
+    color: #ffffff;
+    background: linear-gradient(135deg, rgba(65,209,255,0.28), rgba(100,108,255,0.54), rgba(189,52,254,0.42));
+    box-shadow: 0 14px 32px rgba(100,108,255,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
+  }
+  .update-toast-icon.busy { color: #bfefff; }
+
+  .update-toast-content {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    gap: 9px;
+    min-width: 0;
+  }
+
+  .update-toast-top {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .update-toast-copy { min-width: 0; }
+  .update-toast-kicker {
+    display: block;
+    overflow: hidden;
+    color: var(--color-accent);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 800;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .update-toast h2 {
+    margin: 2px 0 0;
+    color: #ffffff;
+    font-size: 15px;
+    font-weight: 800;
+    line-height: 1.2;
+  }
+  .update-toast p {
+    margin: 0;
+    color: var(--color-ink-muted);
+    font-size: 12.5px;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .update-toast-close {
+    width: 28px;
+    min-width: 28px;
+    min-height: 28px;
+    padding: 0;
+    border-color: rgba(255,255,255,0.1);
+    border-radius: 8px;
+    color: var(--color-ink-dim);
+    background: rgba(255,255,255,0.04);
+  }
+  .update-toast-close:hover:not(:disabled) {
+    border-color: rgba(255,255,255,0.2);
+    color: #ffffff;
+    background: rgba(255,255,255,0.1);
+  }
+
+  .update-progress {
+    position: relative;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.09);
+  }
+  .update-progress span {
+    position: absolute;
+    inset: 0 auto 0 0;
+    min-width: 0;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #41d1ff, #646cff, #bd34fe);
+    transition: width 160ms ease;
+  }
+  .update-progress.indeterminate span {
+    width: 42% !important;
+    animation: update-progress-slide 1.1s ease-in-out infinite;
+  }
+  .update-progress-label {
+    margin-top: -3px;
+    color: var(--color-ink-faint);
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  .update-toast-actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .update-toast-primary,
+  .update-toast-secondary {
+    min-height: 32px;
+    border-radius: 8px;
+    font-size: 12.5px;
+    font-weight: 800;
+  }
+  .update-toast-primary {
+    border-color: rgba(100,108,255,0.72);
+    color: #ffffff;
+    background: linear-gradient(135deg, #646cff, #bd34fe);
+  }
+  .update-toast-primary:hover:not(:disabled) {
+    border-color: rgba(65,209,255,0.74);
+    color: #ffffff;
+    background: linear-gradient(135deg, #747bff, #c966ff);
+  }
+  .update-toast-secondary {
+    border-color: rgba(255,255,255,0.1);
+    color: var(--color-ink-muted);
+    background: rgba(255,255,255,0.05);
+  }
+
   /* --- Workspace layout --- */
 
   .workspace {
@@ -1677,6 +1850,11 @@
 }
 
 @keyframes spin { to { transform: rotate(360deg); } }
+@keyframes update-progress-slide {
+  0% { transform: translateX(-120%); }
+  50% { transform: translateX(120%); }
+  100% { transform: translateX(320%); }
+}
 
 /* --- Responsive breakpoints --- */
 

src/lib/components/UpdateToast.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import {
+    AlertCircle,
+    Download,
+    LoaderCircle,
+    PackageCheck,
+    Sparkles,
+    X,
+  } from "@lucide/svelte";
+
+  type UpdateToastState = "available" | "downloading" | "installed" | "error";
+
+  interface Props {
+    state: UpdateToastState;
+    version: string;
+    currentVersion: string;
+    progress: number;
+    error: string;
+    onInstall: () => void;
+    onLater: () => void;
+    onDismiss: () => void;
+  }
+
+  let {
+    state,
+    version,
+    currentVersion = "",
+    progress = 0,
+    error = "",
+    onInstall,
+    onLater,
+    onDismiss,
+  }: Props = $props();
+
+  const clampedProgress = $derived(Math.max(0, Math.min(100, Math.round(progress))));
+  const title = $derived(
+    state === "installed"
+      ? "Update installed"
+      : state === "downloading"
+        ? "Installing update"
+        : state === "error"
+          ? "Update failed"
+          : "Update available",
+  );
+  const description = $derived(
+    state === "installed"
+      ? "Restart GitLite to use the new version."
+      : state === "downloading"
+        ? "Download and installation are running in the background."
+        : state === "error"
+          ? (error || "The update could not be installed.")
+          : "Do you want to install this version now?",
+  );
+  const versionLabel = $derived(
+    version && currentVersion
+      ? `${currentVersion} -> ${version}`
+      : version
+        ? `Version ${version}`
+        : "New version",
+  );
+  const showProgress = $derived(state === "downloading" || state === "installed");
+  const isBusy = $derived(state === "downloading");
+</script>
+
+<section
+  class="update-toast"
+  class:error={state === "error"}
+  class:installed={state === "installed"}
+  role={state === "error" ? "alert" : "status"}
+  aria-live={state === "error" ? "assertive" : "polite"}
+>
+  <div class="update-toast-glow" aria-hidden="true"></div>
+
+  <div class="update-toast-icon" class:busy={isBusy}>
+    {#if state === "downloading"}
+      <LoaderCircle class="spin" size={21} aria-hidden="true" />
+    {:else if state === "installed"}
+      <PackageCheck size={21} aria-hidden="true" />
+    {:else if state === "error"}
+      <AlertCircle size={21} aria-hidden="true" />
+    {:else}
+      <Sparkles size={21} aria-hidden="true" />
+    {/if}
+  </div>
+
+  <div class="update-toast-content">
+    <div class="update-toast-top">
+      <div class="update-toast-copy">
+        <span class="update-toast-kicker">{versionLabel}</span>
+        <h2>{title}</h2>
+      </div>
+
+      {#if !isBusy}
+        <button class="update-toast-close" type="button" onclick={onDismiss} title="Close" aria-label="Close">
+          <X size={15} aria-hidden="true" />
+        </button>
+      {/if}
+    </div>
+
+    <p>{description}</p>
+
+    {#if showProgress}
+      <div
+        class="update-progress"
+        class:indeterminate={state === "downloading" && clampedProgress === 0}
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow={clampedProgress}
+      >
+        <span style={`width: ${clampedProgress}%`}></span>
+      </div>
+      <div class="update-progress-label">
+        {state === "installed" ? "100% complete" : clampedProgress > 0 ? `${clampedProgress}%` : "Waiting for download size"}
+      </div>
+    {/if}
+
+    <div class="update-toast-actions">
+      {#if state === "installed"}
+        <button class="update-toast-secondary" type="button" onclick={onDismiss}>
+          Got it
+        </button>
+      {:else if state === "error"}
+        <button class="update-toast-secondary" type="button" onclick={onDismiss}>
+          Close
+        </button>
+        <button class="update-toast-primary" type="button" onclick={onInstall}>
+          <Download size={14} aria-hidden="true" />
+          Try again
+        </button>
+      {:else}
+        <button class="update-toast-secondary" type="button" onclick={onLater} disabled={isBusy}>
+          Later
+        </button>
+        <button class="update-toast-primary" type="button" onclick={onInstall} disabled={isBusy}>
+          {#if isBusy}
+            <LoaderCircle class="spin" size={14} aria-hidden="true" />
+            Installing
+          {:else}
+            <Download size={14} aria-hidden="true" />
+            Install
+          {/if}
+        </button>
+      {/if}
+    </div>
+  </div>
+</section>