feat(updater): self-update via GitHub Releases with launch check and settings UI

Phase 3 of the 0.1.0 release prep: - tauri-plugin-updater + tauri-plugin-process wired into the builder, with updater:default / process:allow-restart capabilities - bundle.createUpdaterArtifacts: true; endpoint points at the GitHub releases latest.json, pubkey baked into tauri.conf.json - store: update status state machine (check / download progress / install) with a quiet launch check (prod only) that stays silent on network errors - UI: dismissible update toast with download progress, plus an Updates group in Settings > General showing current version and manual check/install
2026-06-12 19:00:12 +01:00
parent 34ced67fe1
commit 890c23bdce
13 changed files with 381 additions and 2 deletions
@@ -0,0 +1,67 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useGalleryStore } from "../store";
+
+export function UpdateToast() {
+  const updateStatus = useGalleryStore((s) => s.updateStatus);
+  const updateVersion = useGalleryStore((s) => s.updateVersion);
+  const updateProgress = useGalleryStore((s) => s.updateProgress);
+  const updateDismissed = useGalleryStore((s) => s.updateDismissed);
+  const installUpdate = useGalleryStore((s) => s.installUpdate);
+  const dismissUpdate = useGalleryStore((s) => s.dismissUpdate);
+
+  const visible =
+    !updateDismissed &&
+    (updateStatus === "available" || updateStatus === "downloading" || updateStatus === "installing");
+
+  return (
+    <AnimatePresence>
+      {visible ? (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 12 }}
+          transition={{ duration: 0.18 }}
+          className="fixed bottom-4 right-4 z-50 w-80 rounded-lg border border-white/10 bg-gray-900 p-4 shadow-xl"
+        >
+          {updateStatus === "available" ? (
+            <>
+              <p className="text-sm font-medium text-white">Update available</p>
+              <p className="mt-1 text-xs text-gray-500">
+                Phokus v{updateVersion} is ready to download and install.
+              </p>
+              <div className="mt-3 flex items-center gap-2">
+                <button
+                  className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
+                  onClick={() => void installUpdate()}
+                >
+                  Install &amp; restart
+                </button>
+                <button
+                  className="rounded-md border border-transparent px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-gray-200"
+                  onClick={dismissUpdate}
+                >
+                  Later
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-sm font-medium text-white">
+                {updateStatus === "installing" ? "Installing update..." : "Downloading update..."}
+              </p>
+              <div className="mt-3 h-1 overflow-hidden rounded-full bg-white/10">
+                <div
+                  className={`h-full rounded-full bg-emerald-400/80 transition-[width] duration-200 ${
+                    updateProgress === null ? "w-full animate-pulse" : ""
+                  }`}
+                  style={updateProgress !== null ? { width: `${Math.round(updateProgress * 100)}%` } : undefined}
+                />
+              </div>
+              <p className="mt-2 text-xs text-gray-600">The app will restart when it finishes.</p>
+            </>
+          )}
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}