feat: add UI notifications and progress bar for auto-updates

Author: PraneethKulukuri26

src/main/index.ts

@@ -650,17 +650,31 @@ ipcMain.handle('delete-vercel-project', async (_event, params: { projectId: stri
 })
 
 // Auto-Updater Configuration
-autoUpdater.on('update-available', () => {
-    console.log('[Updater] Update available')
+autoUpdater.on('checking-for-update', () => {
+    mainWindow?.webContents.send('update-status', 'checking')
 })
 
-autoUpdater.on('update-downloaded', () => {
-    console.log('[Updater] Update downloaded; will install on quit')
-    autoUpdater.quitAndInstall()
+autoUpdater.on('update-available', (info) => {
+    console.log('[Updater] Update available:', info.version)
+    mainWindow?.webContents.send('update-status', 'available', info.version)
+})
+
+autoUpdater.on('update-not-available', () => {
+    mainWindow?.webContents.send('update-status', 'up-to-date')
+})
+
+autoUpdater.on('download-progress', (progressObj) => {
+    mainWindow?.webContents.send('update-progress', Math.round(progressObj.percent))
+})
+
+autoUpdater.on('update-downloaded', (info) => {
+    console.log('[Updater] Update downloaded:', info.version)
+    mainWindow?.webContents.send('update-status', 'downloaded', info.version)
 })
 
 autoUpdater.on('error', (err) => {
     console.error('[Updater] Error:', err)
+    mainWindow?.webContents.send('update-status', 'error', err.message)
 })
 
 app.whenReady().then(() => {

src/preload/index.ts

@@ -46,6 +46,9 @@ export interface ElectronAPI {
     deployToVercel: (params: { databaseUrl: string, adminToken?: string, projectId: string, projectName: string }) => Promise<{ success: boolean; url?: string; error?: string }>
     deleteVercelProject: (params: { projectId: string, projectName: string }) => Promise<{ success: boolean; error?: string }>
     onDeployOutput: (callback: (data: string) => void) => () => void
+    // Updates
+    onUpdateStatus: (callback: (status: string, version?: string) => void) => () => void
+    onUpdateProgress: (callback: (percent: number) => void) => () => void
     // Platform info
     platform: string
 }
@@ -78,6 +81,16 @@ const electronAPI: ElectronAPI = {
         ipcRenderer.on('deploy-output', subscription)
         return () => ipcRenderer.removeListener('deploy-output', subscription)
     },
+    onUpdateStatus: (callback) => {
+        const subscription = (_event: any, status: string, version?: string) => callback(status, version)
+        ipcRenderer.on('update-status', subscription)
+        return () => ipcRenderer.removeListener('update-status', subscription)
+    },
+    onUpdateProgress: (callback) => {
+        const subscription = (_event: any, percent: number) => callback(percent)
+        ipcRenderer.on('update-progress', subscription)
+        return () => ipcRenderer.removeListener('update-progress', subscription)
+    },
     platform: process.platform
 }
 

src/renderer/src/App.tsx

@@ -14,6 +14,7 @@ import { DatabaseSettingsDialog } from './components/DatabaseSettingsDialog'
 import { RbacSettingsDialog } from './components/RbacSettingsDialog'
 import { DeployProxyDialog } from './components/DeployProxyDialog'
 import { GeneralSettingsDialog } from './components/GeneralSettingsDialog'
+import { UpdaterNotifier } from './components/UpdaterNotifier'
 
 export function App() {
     const {
@@ -107,6 +108,9 @@ export function App() {
             {showRbacSettings && <RbacSettingsDialog />}
             {showDeploySettings && <DeployProxyDialog />}
             {showGeneralSettings && <GeneralSettingsDialog />}
+
+            {/* Auto-Updater Visual Layer */}
+            <UpdaterNotifier />
         </div>
     )
 }

src/renderer/src/components/UpdaterNotifier.tsx

@@ -0,0 +1,101 @@
+import { useState, useEffect } from 'react'
+
+export function UpdaterNotifier() {
+    const [status, setStatus] = useState<string | null>(null)
+    const [version, setVersion] = useState<string | null>(null)
+    const [progress, setProgress] = useState<number>(0)
+    const [visible, setVisible] = useState(false)
+
+    useEffect(() => {
+        const removeStatus = (window as any).electronAPI.onUpdateStatus((newStatus: string, newVersion?: string) => {
+            console.log('[UpdaterNotifier] status:', newStatus, newVersion)
+            setStatus(newStatus)
+            if (newVersion) setVersion(newVersion)
+
+            if (['available', 'downloading', 'downloaded', 'error'].includes(newStatus)) {
+                setVisible(true)
+            } else if (newStatus === 'up-to-date') {
+                // Keep hidden
+            }
+        })
+
+        const removeProgress = (window as any).electronAPI.onUpdateProgress((percent: number) => {
+            setProgress(percent)
+            if (percent > 0) setStatus('downloading')
+        })
+
+        return () => {
+            removeStatus()
+            removeProgress()
+        }
+    }, [])
+
+    if (!visible) return null
+
+    return (
+        <div className="fixed bottom-6 right-6 z-[200] animate-in slide-in-from-right-10 duration-500">
+            <div className="bg-[#111] border border-white/10 rounded-2xl p-5 shadow-2xl flex flex-col gap-4 w-[320px] backdrop-blur-xl">
+                <div className="flex items-center gap-3">
+                    <div className="bg-white/5 p-2.5 rounded-xl border border-white/10">
+                        {status === 'downloaded' ? (
+                            <svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                            </svg>
+                        ) : status === 'error' ? (
+                            <svg className="w-5 h-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        ) : (
+                            <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                        )}
+                    </div>
+                    <div>
+                        <h4 className="text-[14px] font-bold text-white mb-0.5">
+                            {status === 'available' && 'Update Available'}
+                            {status === 'downloading' && 'Downloading Update'}
+                            {status === 'downloaded' && 'Update Ready'}
+                            {status === 'error' && 'Update Failed'}
+                        </h4>
+                        <p className="text-[12px] text-neutral-400 font-medium">
+                            {status === 'available' && `Version ${version} is ready`}
+                            {status === 'downloading' && `Fetching software overhaul...`}
+                            {status === 'downloaded' && `Installing v${version} now!`}
+                            {status === 'error' && 'Check connection'}
+                        </p>
+                    </div>
+                </div>
+
+                {(status === 'downloading' || status === 'available') && (
+                    <div className="space-y-2">
+                        <div className="h-1.5 w-100 bg-white/5 rounded-full overflow-hidden">
+                            <div
+                                className="h-full bg-white transition-all duration-300 ease-out"
+                                style={{ width: `${progress}%` }}
+                            />
+                        </div>
+                        <div className="flex justify-between items-center text-[10px] uppercase tracking-widest font-bold text-neutral-500">
+                            <span>{progress}%</span>
+                            <span>Secure Layer</span>
+                        </div>
+                    </div>
+                )}
+
+                {status === 'downloaded' && (
+                    <div className="text-[10px] uppercase tracking-widest font-extrabold text-emerald-500/80 flex items-center gap-2">
+                        <span className="flex h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                        Restarting to apply v{version}
+                    </div>
+                )}
+
+                <button
+                    onClick={() => setVisible(false)}
+                    className="absolute top-3 right-3 text-neutral-600 hover:text-white transition-colors"
+                >
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    )
+}