feat(settings): add About update controls with download progress

Author: mweinbach

src/App.tsx

@@ -2132,7 +2132,10 @@ function MainApp() {
     onDeleteWorktree: handleSidebarDeleteWorktree,
     onLoadOlderThreads: handleSidebarLoadOlderThreads,
     onReloadWorkspaceThreads: handleSidebarReloadWorkspaceThreads,
-    updaterState,
+    updaterState:
+      settingsOpen && settingsSection === "about"
+        ? { stage: "idle" as const }
+        : updaterState,
     onUpdate: startUpdate,
     onDismissUpdate: dismissUpdate,
     postUpdateNotice,

src/features/settings/components/sections/SettingsAboutSection.tsx

@@ -1,8 +1,26 @@
 import { useEffect, useState } from "react";
 import { getAppBuildType, type AppBuildType } from "@services/tauri";
+import { useUpdater } from "@/features/update/hooks/useUpdater";
+
+function formatBytes(value: number) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB"];
+  let size = value;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unitIndex]}`;
+}
 
 export function SettingsAboutSection() {
   const [appBuildType, setAppBuildType] = useState<AppBuildType | "unknown">("unknown");
+  const { state: updaterState, checkForUpdates, startUpdate } = useUpdater({
+    enabled: false,
+  });
 
   useEffect(() => {
     let active = true;
@@ -49,6 +67,69 @@ export function SettingsAboutSection() {
           Build date: <code>{buildDateLabel}</code>
         </div>
       </div>
+      <div className="settings-field">
+        <div className="settings-label">App Updates</div>
+        <div className="settings-help">
+          Currently running version <code>{__APP_VERSION__}</code>
+        </div>
+
+        {updaterState.stage === "error" && (
+          <div className="settings-help ds-text-danger">
+            Update failed: {updaterState.error}
+          </div>
+        )}
+
+        {updaterState.stage === "downloading" ||
+        updaterState.stage === "installing" ||
+        updaterState.stage === "restarting" ? (
+          <div className="settings-help">
+            {updaterState.stage === "downloading" ? (
+              <>
+                Downloading update...{" "}
+                {updaterState.progress?.totalBytes
+                  ? `${Math.round((updaterState.progress.downloadedBytes / updaterState.progress.totalBytes) * 100)}%`
+                  : formatBytes(updaterState.progress?.downloadedBytes ?? 0)}
+              </>
+            ) : updaterState.stage === "installing" ? (
+              "Installing update..."
+            ) : (
+              "Restarting..."
+            )}
+          </div>
+        ) : updaterState.stage === "available" ? (
+          <div className="settings-help">
+            Version <code>{updaterState.version}</code> is available.
+          </div>
+        ) : updaterState.stage === "latest" ? (
+          <div className="settings-help">You are on the latest version.</div>
+        ) : null}
+
+        <div className="settings-controls">
+          {updaterState.stage === "available" ? (
+            <button
+              type="button"
+              className="primary"
+              onClick={() => void startUpdate()}
+            >
+              Download & Install
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="ghost"
+              disabled={
+                updaterState.stage === "checking" ||
+                updaterState.stage === "downloading" ||
+                updaterState.stage === "installing" ||
+                updaterState.stage === "restarting"
+              }
+              onClick={() => void checkForUpdates({ announceNoUpdate: true })}
+            >
+              {updaterState.stage === "checking" ? "Checking..." : "Check for updates"}
+            </button>
+          )}
+        </div>
+      </div>
     </section>
   );
 }