updates smooth

shivam96anand · shivam96anand · commit 1a29b997c0f8 · 2026-04-14T13:39:20.000+05:30
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "restbro",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A modern API testing tool similar to Postman and Insomnia",
   "main": "dist/main/main/index.js",
   "scripts": {
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -25,6 +25,7 @@ class ApiCourierApp {
     ipcManager.initialize();
     updateManager.initialize();
     this.createWindow();
+    updateManager.notifyIfJustUpdated();
     this.setupEventHandlers();
   }
 
@@ -68,6 +69,10 @@ class ApiCourierApp {
     await storeManager.flush();
     storeManager.stopAutoBackup();
     await aiEngine.flush();
+    // If an update was downloaded, install it on quit so next launch is updated
+    if (updateManager.isUpdateReady()) {
+      updateManager.installOnQuitIfReady();
+    }
     updateManager.destroy();
     console.log('Database flushed successfully');
   }
diff --git a/src/main/modules/update-manager.ts b/src/main/modules/update-manager.ts
@@ -1,17 +1,21 @@
 import { autoUpdater, UpdateInfo } from 'electron-updater';
 import { app, BrowserWindow } from 'electron';
+import { join } from 'path';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
 
 /**
  * UpdateManager — wraps electron-updater with safe defaults.
  *
  * - Only runs in packaged (production) builds; no-ops in dev mode.
  * - Checks for updates immediately on app start and again every 4 hours.
- * - Downloads updates silently; prompts the user before installing.
- * - Forwards progress/status to the renderer via the focused window so the
- *   UI can surface a non-intrusive update badge.
+ * - Downloads updates completely silently in the background.
+ * - Only notifies renderer when download is complete (header button).
+ * - Auto-installs pending updates on quit.
+ * - Detects post-update launch and notifies renderer to show a popup.
  */
 class UpdateManager {
   private checkInterval: NodeJS.Timeout | null = null;
+  private updateReady = false;
   private readonly CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000; // 4 hours
 
   initialize(): void {
@@ -20,7 +24,6 @@ class UpdateManager {
       return;
     }
 
-    // Disable auto-downloading; we want to show a prompt first on macOS.
     autoUpdater.autoDownload = false;
     autoUpdater.autoInstallOnAppQuit = true;
 
@@ -34,9 +37,66 @@ class UpdateManager {
     );
   }
 
+  /**
+   * Check if the app was just updated by comparing current version to
+   * the last stored version. Sends 'update:just-updated' to the renderer
+   * if a version change is detected.
+   */
+  notifyIfJustUpdated(): void {
+    const currentVersion = app.getVersion();
+    const lastVersionPath = join(app.getPath('userData'), '.last-version');
+
+    let justUpdated = false;
+    if (existsSync(lastVersionPath)) {
+      try {
+        const lastVersion = readFileSync(lastVersionPath, 'utf-8').trim();
+        if (lastVersion && lastVersion !== currentVersion) {
+          justUpdated = true;
+        }
+      } catch {
+        // ignore read errors
+      }
+    }
+
+    writeFileSync(lastVersionPath, currentVersion, 'utf-8');
+
+    if (justUpdated) {
+      // Delay slightly so the renderer is ready to receive the event
+      setTimeout(() => {
+        this.send('update:just-updated', { version: currentVersion });
+      }, 2000);
+    }
+  }
+
+  /** Returns true if an update has been downloaded and is ready to install. */
+  isUpdateReady(): boolean {
+    return this.updateReady;
+  }
+
+  /** Installs the pending update and restarts the app. */
+  installAndRestart(): void {
+    autoUpdater.quitAndInstall(false, true);
+  }
+
+  /**
+   * Called during graceful shutdown. If an update is downloaded,
+   * install it so the next launch gets the new version.
+   */
+  installOnQuitIfReady(): void {
+    if (this.updateReady) {
+      autoUpdater.quitAndInstall(true, true);
+    }
+  }
+
+  destroy(): void {
+    if (this.checkInterval) {
+      clearInterval(this.checkInterval);
+      this.checkInterval = null;
+    }
+  }
+
   private checkForUpdates(): void {
     autoUpdater.checkForUpdates().catch((err) => {
-      // Update checks failing (e.g. no network) is non-fatal — log silently.
       console.error('[updater] Update check failed:', err?.message ?? err);
     });
   }
@@ -52,10 +112,7 @@ class UpdateManager {
   private registerListeners(): void {
     autoUpdater.on('update-available', (info: UpdateInfo) => {
       console.log(`[updater] Update available: ${info.version}`);
-      this.send('update:available', { version: info.version });
-
-      // Ask the user before downloading via the renderer (or auto-download here).
-      // For now we trigger download immediately and let the renderer show progress.
+      // Download silently — no UI shown to user
       autoUpdater.downloadUpdate().catch((err) => {
         console.error('[updater] Download failed:', err?.message ?? err);
       });
@@ -66,37 +123,21 @@ class UpdateManager {
     });
 
     autoUpdater.on('download-progress', (progress) => {
-      this.send('update:download-progress', {
-        percent: Math.round(progress.percent),
-        bytesPerSecond: progress.bytesPerSecond,
-        transferred: progress.transferred,
-        total: progress.total,
-      });
+      // Silent — no UI shown to user
+      console.log(`[updater] Download progress: ${Math.round(progress.percent)}%`);
     });
 
     autoUpdater.on('update-downloaded', (info: UpdateInfo) => {
       console.log(`[updater] Update downloaded: ${info.version}`);
-      // Notify the renderer so it can show an "Install & restart" prompt.
+      this.updateReady = true;
+      // Notify the renderer to show the header restart button
       this.send('update:downloaded', { version: info.version });
     });
 
     autoUpdater.on('error', (err: Error) => {
       console.error('[updater] Error:', err?.message ?? err);
-      this.send('update:error', { message: err?.message ?? String(err) });
     });
   }
-
-  /** Called by the renderer (via IPC) when the user accepts the update. */
-  installAndRestart(): void {
-    autoUpdater.quitAndInstall(false, true);
-  }
-
-  destroy(): void {
-    if (this.checkInterval) {
-      clearInterval(this.checkInterval);
-      this.checkInterval = null;
-    }
-  }
 }
 
 export const updateManager = new UpdateManager();
diff --git a/src/preload/index.ts b/src/preload/index.ts
@@ -82,10 +82,8 @@ const IPC_CHANNELS = {
 
   // Auto-updater channels
   UPDATE_INSTALL: 'update:install',
-  UPDATE_AVAILABLE: 'update:available',
-  UPDATE_DOWNLOAD_PROGRESS: 'update:download-progress',
   UPDATE_DOWNLOADED: 'update:downloaded',
-  UPDATE_ERROR: 'update:error',
+  UPDATE_JUST_UPDATED: 'update:just-updated',
 } as const;
 
 // Define types inline to avoid import issues
@@ -630,41 +628,23 @@ const apiCourierAPI = {
   update: {
     install: (): Promise<void> =>
       ipcRenderer.invoke(IPC_CHANNELS.UPDATE_INSTALL),
-    onAvailable: (
+    onDownloaded: (
       callback: (data: { version: string }) => void
     ): (() => void) => {
-      ipcRenderer.on(IPC_CHANNELS.UPDATE_AVAILABLE, (_, data) =>
-        callback(data)
-      );
-      return () =>
-        ipcRenderer.removeAllListeners(IPC_CHANNELS.UPDATE_AVAILABLE);
-    },
-    onDownloadProgress: (
-      callback: (data: {
-        percent: number;
-        bytesPerSecond: number;
-        transferred: number;
-        total: number;
-      }) => void
-    ): (() => void) => {
-      ipcRenderer.on(IPC_CHANNELS.UPDATE_DOWNLOAD_PROGRESS, (_, data) =>
+      ipcRenderer.on(IPC_CHANNELS.UPDATE_DOWNLOADED, (_, data) =>
         callback(data)
       );
       return () =>
-        ipcRenderer.removeAllListeners(IPC_CHANNELS.UPDATE_DOWNLOAD_PROGRESS);
+        ipcRenderer.removeAllListeners(IPC_CHANNELS.UPDATE_DOWNLOADED);
     },
-    onDownloaded: (
+    onJustUpdated: (
       callback: (data: { version: string }) => void
     ): (() => void) => {
-      ipcRenderer.on(IPC_CHANNELS.UPDATE_DOWNLOADED, (_, data) =>
+      ipcRenderer.on(IPC_CHANNELS.UPDATE_JUST_UPDATED, (_, data) =>
         callback(data)
       );
       return () =>
-        ipcRenderer.removeAllListeners(IPC_CHANNELS.UPDATE_DOWNLOADED);
-    },
-    onError: (callback: (data: { message: string }) => void): (() => void) => {
-      ipcRenderer.on(IPC_CHANNELS.UPDATE_ERROR, (_, data) => callback(data));
-      return () => ipcRenderer.removeAllListeners(IPC_CHANNELS.UPDATE_ERROR);
+        ipcRenderer.removeAllListeners(IPC_CHANNELS.UPDATE_JUST_UPDATED);
     },
   },
 };
diff --git a/src/renderer/components/update-notification-manager.ts b/src/renderer/components/update-notification-manager.ts
@@ -1,100 +1,88 @@
 /**
  * UpdateNotificationManager
  *
- * Listens for auto-update events from the main process and shows
- * a non-intrusive banner at the bottom of the app.
- *
- * States: hidden → "downloading vX.Y.Z" → "ready to install" → (user clicks) → restart
+ * - When an update is downloaded, shows a header button "Updates installed, please restart"
+ *   styled like the Time Machine / Theme buttons.
+ * - On post-update launch, shows a centered popup: "RestBro is now up to date" + version.
  */
 export class UpdateNotificationManager {
-  private banner: HTMLElement | null = null;
   private cleanups: (() => void)[] = [];
 
   initialize(): void {
     const api = window.apiCourier?.update;
     if (!api) return;
 
-    this.cleanups.push(
-      api.onAvailable(({ version }) => {
-        this.showBanner('downloading', version);
-      })
-    );
-
-    this.cleanups.push(
-      api.onDownloadProgress(({ percent }) => {
-        this.updateProgress(percent);
-      })
-    );
-
     this.cleanups.push(
       api.onDownloaded(({ version }) => {
-        this.showBanner('ready', version);
+        this.showHeaderButton(version);
       })
     );
 
     this.cleanups.push(
-      api.onError(() => {
-        this.hideBanner();
+      api.onJustUpdated(({ version }) => {
+        this.showUpdatedPopup(version);
       })
     );
   }
 
   destroy(): void {
     this.cleanups.forEach((fn) => fn());
     this.cleanups = [];
-    this.hideBanner();
   }
 
-  private showBanner(state: 'downloading' | 'ready', version: string): void {
-    this.ensureBanner();
-    if (!this.banner) return;
+  private showHeaderButton(version: string): void {
+    // Don't add duplicate
+    if (document.getElementById('update-restart-btn')) return;
 
-    this.banner.className = 'update-banner';
-    this.banner.classList.add(`update-banner--${state}`);
+    const headerRight = document.querySelector('.header-right');
+    if (!headerRight) return;
 
-    if (state === 'downloading') {
-      this.banner.innerHTML = `
-        <span class="update-banner__text">Downloading update v${this.escapeHtml(version)}…</span>
-        <span class="update-banner__progress">0%</span>
-      `;
-    } else {
-      this.banner.innerHTML = `
-        <span class="update-banner__text">RestBro v${this.escapeHtml(version)} is ready</span>
-        <button class="update-banner__action" id="update-install-btn">Restart to update</button>
-        <button class="update-banner__dismiss" id="update-dismiss-btn" title="Dismiss">✕</button>
-      `;
-      document
-        .getElementById('update-install-btn')
-        ?.addEventListener('click', () => {
-          window.apiCourier.update.install();
-        });
-      document
-        .getElementById('update-dismiss-btn')
-        ?.addEventListener('click', () => {
-          this.hideBanner();
-        });
-    }
+    const btn = document.createElement('button');
+    btn.id = 'update-restart-btn';
+    btn.className = 'update-restart-button';
+    btn.title = `RestBro v${this.escapeHtml(version)} is ready to install`;
+    btn.textContent = 'Updates installed, please restart';
+    btn.addEventListener('click', () => {
+      window.apiCourier.update.install();
+    });
 
-    this.banner.style.display = 'flex';
+    // Insert before the first child (left of Time Machine)
+    headerRight.insertBefore(btn, headerRight.firstChild);
   }
 
-  private updateProgress(percent: number): void {
-    if (!this.banner) return;
-    const el = this.banner.querySelector('.update-banner__progress');
-    if (el) el.textContent = `${Math.round(percent)}%`;
-  }
+  private showUpdatedPopup(version: string): void {
+    const overlay = document.createElement('div');
+    overlay.className = 'update-popup-overlay';
 
-  private hideBanner(): void {
-    if (this.banner) this.banner.style.display = 'none';
-  }
+    const popup = document.createElement('div');
+    popup.className = 'update-popup';
+    popup.innerHTML = `
+      <div class="update-popup__title">RestBro is now up to date</div>
+      <div class="update-popup__version">v${this.escapeHtml(version)}</div>
+      <button class="update-popup__ok" id="update-popup-ok">Okay</button>
+    `;
+
+    overlay.appendChild(popup);
+    document.body.appendChild(overlay);
+
+    // Trigger reflow then add visible class for animation
+    requestAnimationFrame(() => {
+      overlay.classList.add('update-popup-overlay--visible');
+    });
 
-  private ensureBanner(): void {
-    if (this.banner) return;
+    const dismiss = () => {
+      overlay.classList.remove('update-popup-overlay--visible');
+      overlay.addEventListener('transitionend', () => overlay.remove(), {
+        once: true,
+      });
+    };
 
-    this.banner = document.createElement('div');
-    this.banner.className = 'update-banner';
-    this.banner.style.display = 'none';
-    document.body.appendChild(this.banner);
+    popup
+      .querySelector('#update-popup-ok')
+      ?.addEventListener('click', dismiss);
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) dismiss();
+    });
   }
 
   private escapeHtml(str: string): string {
diff --git a/src/renderer/styles/_update-banner.scss b/src/renderer/styles/_update-banner.scss
diff --git a/src/shared/ipc.ts b/src/shared/ipc.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "restbro",`
`3`		`- "version": "1.0.9",`
	`3`	`+ "version": "1.0.10",`
`4`	`4`	`"description": "A modern API testing tool similar to Postman and Insomnia",`
`5`	`5`	`"main": "dist/main/main/index.js",`
`6`	`6`	`"scripts": {`