feat(updater): show feedback when manually checking for updates

Vrtak-CZ · claude · Vrtak-CZ · commit e72a38b00ca9 · 2026-03-02T17:18:35.000+01:00
The "Check for Updates..." menu item silently discarded the result,
leaving users with no feedback. Now sends the check result to the
webview via a new checkForUpdatesResult message, which displays a
temporary notification banner (auto-dismisses after 5s) showing
"You're up to date", error details, or availability info.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/bun/index.ts b/src/bun/index.ts
@@ -200,6 +200,9 @@ Electrobun.events.on("application-menu-clicked", (e) => {
     case "checkForUpdates":
       getUpdateManager()
         .check()
+        .then((result) => {
+          win.webview.rpc?.send.checkForUpdatesResult(result);
+        })
         .catch(() => {});
       break;
   }
diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
@@ -54,7 +54,8 @@ export function App() {
   const [settingsTab, setSettingsTab] = useState<SettingsTab>("general");
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchSessions, setSearchSessions] = useState<GlobalSessionResult[]>([]);
-  const { updateStatus, updateDismissed, dismissUpdate } = useUpdateStatus();
+  const { updateStatus, updateDismissed, dismissUpdate, manualCheckResult, dismissManualCheck } =
+    useUpdateStatus();
 
   const fetchSearchSessions = useCallback(() => {
     getRPC()
@@ -247,6 +248,8 @@ export function App() {
           status={updateStatus}
           dismissed={updateDismissed}
           onDismiss={dismissUpdate}
+          manualCheckResult={manualCheckResult}
+          onDismissManualCheck={dismissManualCheck}
         />
         <ErrorBoundary>
           {view.kind === "home" && (
diff --git a/src/frontend/components/UpdateNotification.test.tsx b/src/frontend/components/UpdateNotification.test.tsx
@@ -1,85 +1,110 @@
 import { afterEach, describe, expect, mock, test } from "bun:test";
 import { cleanup, fireEvent, render } from "@testing-library/react";
+import type { UpdateStatus } from "../../shared/rpc-types.ts";
 import { setupMockRPC } from "../test-helpers/mock-rpc.ts";
 import { UpdateNotification } from "./UpdateNotification.tsx";
 
 const VERSION_READY_PATTERN = /v2\.0\.0 is ready/;
 
+function defaultProps() {
+  return {
+    status: { status: "up-to-date", currentVersion: "1.0.0" } as UpdateStatus,
+    dismissed: false,
+    onDismiss: mock(),
+    manualCheckResult: null as UpdateStatus | null,
+    onDismissManualCheck: mock(),
+  };
+}
+
 describe("UpdateNotification", () => {
   afterEach(cleanup);
 
   test("renders nothing when status is up-to-date", () => {
-    const { container } = render(
-      <UpdateNotification
-        status={{ status: "up-to-date", currentVersion: "1.0.0" }}
-        dismissed={false}
-        onDismiss={() => {}}
-      />,
-    );
+    const { container } = render(<UpdateNotification {...defaultProps()} />);
     expect(container.innerHTML).toBe("");
   });
 
   test("renders nothing when dismissed", () => {
     setupMockRPC();
-    const { container } = render(
-      <UpdateNotification
-        status={{ status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" }}
-        dismissed={true}
-        onDismiss={() => {}}
-      />,
-    );
+    const props = defaultProps();
+    props.status = { status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" };
+    props.dismissed = true;
+    const { container } = render(<UpdateNotification {...props} />);
     expect(container.innerHTML).toBe("");
   });
 
   test("renders notification when status is ready", () => {
     setupMockRPC();
-    const { getByText } = render(
-      <UpdateNotification
-        status={{ status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" }}
-        dismissed={false}
-        onDismiss={() => {}}
-      />,
-    );
+    const props = defaultProps();
+    props.status = { status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" };
+    const { getByText } = render(<UpdateNotification {...props} />);
     expect(getByText(VERSION_READY_PATTERN)).toBeDefined();
   });
 
   test("renders Restart button when ready", () => {
     setupMockRPC();
-    const { getByRole } = render(
-      <UpdateNotification
-        status={{ status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" }}
-        dismissed={false}
-        onDismiss={() => {}}
-      />,
-    );
+    const props = defaultProps();
+    props.status = { status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" };
+    const { getByRole } = render(<UpdateNotification {...props} />);
     expect(getByRole("button", { name: "Restart to update" })).toBeDefined();
   });
 
   test("calls onDismiss when dismiss button clicked", () => {
     setupMockRPC();
-    const onDismiss = mock();
-    const { getByLabelText } = render(
-      <UpdateNotification
-        status={{ status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" }}
-        dismissed={false}
-        onDismiss={onDismiss}
-      />,
-    );
+    const props = defaultProps();
+    props.status = { status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" };
+    const { getByLabelText } = render(<UpdateNotification {...props} />);
     fireEvent.click(getByLabelText("Dismiss"));
-    expect(onDismiss).toHaveBeenCalled();
+    expect(props.onDismiss).toHaveBeenCalled();
   });
 
   test("calls applyUpdate RPC when Restart clicked", () => {
     const applyUpdate = mock(() => Promise.resolve({ ok: true }));
     setupMockRPC({ applyUpdate });
-    const { getByRole } = render(
-      <UpdateNotification
-        status={{ status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" }}
-        dismissed={false}
-        onDismiss={() => {}}
-      />,
-    );
+    const props = defaultProps();
+    props.status = { status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" };
+    const { getByRole } = render(<UpdateNotification {...props} />);
     fireEvent.click(getByRole("button", { name: "Restart to update" }));
     expect(applyUpdate).toHaveBeenCalled();
   });
+
+  test("shows up-to-date message for manual check result", () => {
+    const props = defaultProps();
+    props.manualCheckResult = { status: "up-to-date", currentVersion: "1.0.0" };
+    const { getByText } = render(<UpdateNotification {...props} />);
+    expect(getByText("You're up to date")).toBeDefined();
+  });
+
+  test("shows error message for manual check result", () => {
+    const props = defaultProps();
+    props.manualCheckResult = {
+      status: "error",
+      currentVersion: "1.0.0",
+      error: "Network timeout",
+    };
+    const { getByText } = render(<UpdateNotification {...props} />);
+    expect(getByText(/Network timeout/)).toBeDefined();
+  });
+
+  test("calls onDismissManualCheck when dismissing manual check result", () => {
+    const props = defaultProps();
+    props.manualCheckResult = { status: "up-to-date", currentVersion: "1.0.0" };
+    const { getByLabelText } = render(<UpdateNotification {...props} />);
+    fireEvent.click(getByLabelText("Dismiss"));
+    expect(props.onDismissManualCheck).toHaveBeenCalled();
+  });
+
+  test("manual check result with ready status falls through to normal notification", () => {
+    setupMockRPC();
+    const props = defaultProps();
+    props.status = { status: "ready", currentVersion: "1.0.0", latestVersion: "2.0.0" };
+    props.manualCheckResult = {
+      status: "ready",
+      currentVersion: "1.0.0",
+      latestVersion: "2.0.0",
+    };
+    const { getByText, getByRole } = render(<UpdateNotification {...props} />);
+    expect(getByText(VERSION_READY_PATTERN)).toBeDefined();
+    expect(getByRole("button", { name: "Restart to update" })).toBeDefined();
+  });
 });
diff --git a/src/frontend/components/UpdateNotification.tsx b/src/frontend/components/UpdateNotification.tsx
@@ -6,9 +6,55 @@ interface UpdateNotificationProps {
   status: UpdateStatus;
   dismissed: boolean;
   onDismiss: () => void;
+  manualCheckResult: UpdateStatus | null;
+  onDismissManualCheck: () => void;
 }
 
-export function UpdateNotification({ status, dismissed, onDismiss }: UpdateNotificationProps) {
+function formatManualCheckResult(status: UpdateStatus): string {
+  if (status.status === "up-to-date") {
+    return "You're up to date";
+  }
+  if (status.status === "error") {
+    return `Update check failed: ${status.error ?? "Unknown error"}`;
+  }
+  if (status.status === "available") {
+    return `v${status.latestVersion} is available`;
+  }
+  if (status.status === "downloading") {
+    return `Downloading v${status.latestVersion}...`;
+  }
+  if (status.status === "ready") {
+    return `v${status.latestVersion} is ready to install`;
+  }
+  return "Check complete";
+}
+
+export function UpdateNotification({
+  status,
+  dismissed,
+  onDismiss,
+  manualCheckResult,
+  onDismissManualCheck,
+}: UpdateNotificationProps) {
+  // Manual check result takes priority (temporary banner)
+  if (manualCheckResult && manualCheckResult.status !== "ready") {
+    return (
+      <div className="update-notification">
+        <span className="update-notification-text">
+          {formatManualCheckResult(manualCheckResult)}
+        </span>
+        <button
+          type="button"
+          className="update-notification-dismiss"
+          aria-label="Dismiss"
+          onClick={onDismissManualCheck}
+        >
+          &times;
+        </button>
+      </div>
+    );
+  }
+
   if (dismissed || status.status !== "ready" || !status.latestVersion) {
     return null;
   }
diff --git a/src/frontend/hooks/useUpdateStatus.ts b/src/frontend/hooks/useUpdateStatus.ts
@@ -1,14 +1,18 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { UpdateStatus } from "../../shared/rpc-types.ts";
 
 const DEFAULT_STATUS: UpdateStatus = {
   status: "up-to-date",
   currentVersion: "",
 };
 
+const MANUAL_CHECK_DISMISS_MS = 5_000;
+
 export function useUpdateStatus() {
   const [updateStatus, setUpdateStatus] = useState<UpdateStatus>(DEFAULT_STATUS);
   const [updateDismissed, setUpdateDismissed] = useState(false);
+  const [manualCheckResult, setManualCheckResult] = useState<UpdateStatus | null>(null);
+  const manualCheckTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     const handleUpdateStatus = (e: Event) => {
@@ -18,13 +22,41 @@ export function useUpdateStatus() {
         setUpdateDismissed(false);
       }
     };
+    const handleManualCheck = (e: Event) => {
+      const detail = (e as CustomEvent).detail as UpdateStatus;
+      if (detail) {
+        setManualCheckResult(detail);
+        if (manualCheckTimerRef.current) {
+          clearTimeout(manualCheckTimerRef.current);
+        }
+        manualCheckTimerRef.current = setTimeout(() => {
+          setManualCheckResult(null);
+          manualCheckTimerRef.current = null;
+        }, MANUAL_CHECK_DISMISS_MS);
+      }
+    };
     window.addEventListener("klovi:updateStatus", handleUpdateStatus);
-    return () => window.removeEventListener("klovi:updateStatus", handleUpdateStatus);
+    window.addEventListener("klovi:checkForUpdatesResult", handleManualCheck);
+    return () => {
+      window.removeEventListener("klovi:updateStatus", handleUpdateStatus);
+      window.removeEventListener("klovi:checkForUpdatesResult", handleManualCheck);
+      if (manualCheckTimerRef.current) {
+        clearTimeout(manualCheckTimerRef.current);
+      }
+    };
   }, []);
 
   return {
     updateStatus,
     updateDismissed,
     dismissUpdate: () => setUpdateDismissed(true),
+    manualCheckResult,
+    dismissManualCheck: () => {
+      setManualCheckResult(null);
+      if (manualCheckTimerRef.current) {
+        clearTimeout(manualCheckTimerRef.current);
+        manualCheckTimerRef.current = null;
+      }
+    },
   };
 }
diff --git a/src/shared/rpc-types.ts b/src/shared/rpc-types.ts
@@ -111,6 +111,7 @@ export interface KloviRPC {
       togglePresentation: Record<string, never>;
       openSettings: Record<string, never>;
       updateStatus: UpdateStatus;
+      checkForUpdatesResult: UpdateStatus;
     };
   }>;
 }
diff --git a/src/views/main/index.ts b/src/views/main/index.ts
@@ -34,6 +34,9 @@ const rpc = Electroview.defineRPC<KloviRPC>({
       updateStatus: (data) => {
         window.dispatchEvent(new CustomEvent("klovi:updateStatus", { detail: data }));
       },
+      checkForUpdatesResult: (data) => {
+        window.dispatchEvent(new CustomEvent("klovi:checkForUpdatesResult", { detail: data }));
+      },
     },
   },
 });

Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,7 @@ export interface KloviRPC {`
`111`	`111`	`togglePresentation: Record<string, never>;`
`112`	`112`	`openSettings: Record<string, never>;`
`113`	`113`	`updateStatus: UpdateStatus;`
	`114`	`+ checkForUpdatesResult: UpdateStatus;`
`114`	`115`	`};`
`115`	`116`	`}>;`
`116`	`117`	`}`