some where in the middle

Author: Rishabh4275

src/main/preload.ts

@@ -29,7 +29,9 @@ const validChannels = {
     'check-for-updates',
     'check-for-updates-menu',
     'download-update',
+    'download-and-install',
     'install-update',
+    'enable-auto-install',
     'get-update-status',
     'get-app-version',
   ],

src/main/updater.ts

@@ -114,10 +114,33 @@ export class AppUpdater {
 
     ipcMain.handle('download-update', async () => {
       try {
-        await autoUpdater.downloadUpdate();
-        return { success: true };
+        log.info('[AppUpdater] Download request received');
+        
+        // Check if already downloaded first
+        if (this.lastStatus === 'downloaded') {
+          log.info('[AppUpdater] Update already downloaded, notifying UI');
+          this.sendStatusToWindow('downloaded', this.lastInfo);
+          return { success: true, alreadyDownloaded: true };
+        }
+        
+        // If we have update info but no download yet, start download
+        if (this.lastInfo && this.lastStatus === 'available') {
+          log.info('[AppUpdater] Starting download for available update');
+          this.sendStatusToWindow('downloading', this.lastInfo, undefined, { percent: 0, transferred: 0, total: 0 });
+          
+          await autoUpdater.downloadUpdate();
+          log.info('[AppUpdater] Download completed');
+          return { success: true };
+        }
+        
+        // No update available
+        log.warn('[AppUpdater] No update available to download');
+        this.sendStatusToWindow('error', null, 'No update available to download');
+        return { success: false, error: 'No update available to download' };
+        
       } catch (error) {
         log.error('[AppUpdater] Download failed:', error);
+        this.sendStatusToWindow('error', null, error instanceof Error ? error.message : 'Unknown error');
         return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
       }
     });
@@ -189,6 +212,42 @@ export class AppUpdater {
         this.checkPromise = null;
       }
     });
+
+    ipcMain.handle('enable-auto-install', () => {
+      log.info('[AppUpdater] Enabling auto-install on next quit');
+      autoUpdater.autoInstallOnAppQuit = true;
+      return { success: true };
+    });
+
+    ipcMain.handle('download-and-install', async () => {
+      try {
+        log.info('[AppUpdater] Download and install requested');
+        
+        // Check current status
+        if (this.lastStatus === 'downloaded') {
+          log.info('[AppUpdater] Update already downloaded, ready to install');
+          return { success: true, readyToInstall: true };
+        }
+        
+        if (this.lastStatus === 'available' && this.lastInfo) {
+          log.info('[AppUpdater] Starting download...');
+          this.sendStatusToWindow('downloading', this.lastInfo, undefined, { percent: 0, transferred: 0, total: 0 });
+          
+          // Download the update
+          await autoUpdater.downloadUpdate();
+          
+          log.info('[AppUpdater] Download completed, ready to install');
+          return { success: true, readyToInstall: true };
+        }
+        
+        return { success: false, error: 'No update available to download' };
+        
+      } catch (error) {
+        log.error('[AppUpdater] Download and install failed:', error);
+        this.sendStatusToWindow('error', null, error instanceof Error ? error.message : 'Unknown error');
+        return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
+      }
+    });
   }
 
   private sendStatusToWindow(status: string, info?: any, error?: string, progress?: any) {
@@ -200,7 +259,9 @@ export class AppUpdater {
     log.info(`[AppUpdater] Sending status to window: ${status}`, {
       hasMainWindow: !!this.mainWindow,
       isDestroyed: this.mainWindow?.isDestroyed(),
-      info: info ? { version: info.version } : undefined
+      info: info ? { version: info.version } : undefined,
+      error,
+      progress
     });
 
     if (this.mainWindow && !this.mainWindow.isDestroyed()) {
@@ -210,20 +271,21 @@ export class AppUpdater {
         error,
         progress
       });
+      log.info(`[AppUpdater] Status sent to renderer: ${status}`);
+    } else {
+      log.warn('[AppUpdater] Cannot send status - main window not available');
     }
   }
 
   checkForUpdatesOnStartup() {
     if (!app.isPackaged) {
+      log.info('[AppUpdater] Skipping startup check - not packaged');
       return;
     }
 
-    if (app.isPackaged) {
-      return;
-    }
-
-    // Check for updates 3 seconds after startup to avoid conflicts
+    // Check for updates 3 seconds after startup to avoid conflicts  
     setTimeout(() => {
+      log.info('[AppUpdater] Starting automatic update check');
       this.sendStatusToWindow('checking');
       autoUpdater.checkForUpdatesAndNotify().catch(err => {
         log.error('[AppUpdater] Startup check failed:', err.message);

src/renderer/components/UpdateNotification/UpdateNotification.css

@@ -2,23 +2,24 @@
   position: fixed;
   top: 20px;
   right: 20px;
-  background-color: #2A2F35;
-  border: 1px solid #7CA97E;
-  border-radius: 8px;
+  background: linear-gradient(135deg, #2A2F35 0%, #232831 100%);
+  border: 1px solid rgba(124, 169, 126, 0.3);
+  border-radius: 12px;
   padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(124, 169, 126, 0.1);
   z-index: 1000;
-  animation: slideIn 0.3s ease-out;
-  max-width: 400px;
+  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  max-width: 320px;
+  backdrop-filter: blur(12px);
 }
 
 @keyframes slideIn {
   from {
-    transform: translateX(100%);
+    transform: translateX(100%) scale(0.95);
     opacity: 0;
   }
   to {
-    transform: translateX(0);
+    transform: translateX(0) scale(1);
     opacity: 1;
   }
 }
@@ -42,32 +43,49 @@
 
 .update-content {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 12px;
   color: #C5D8BC;
-  flex: 1;
+}
+
+.update-content.downloaded {
+  gap: 16px;
+}
+
+.update-content span:first-child {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 .update-content.checking,
 .update-content.downloading {
+  flex-direction: row;
+  align-items: center;
   color: #8FB996;
+  font-weight: 500;
 }
 
 .update-content.up-to-date {
   color: #7CA97E;
+  font-weight: 600;
+  text-align: center;
+  padding: 8px 0;
 }
 
 .update-content.error {
-  color: #E53935;
+  color: #FF6B6B;
+  font-weight: 500;
 }
 
 .spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid #8FB996;
-  border-top-color: transparent;
+  width: 18px;
+  height: 18px;
+  border: 2.5px solid rgba(143, 185, 150, 0.2);
+  border-top-color: #8FB996;
   border-radius: 50%;
   animation: spin 1s linear infinite;
+  margin-right: 4px;
 }
 
 @keyframes spin {
@@ -79,42 +97,84 @@
 }
 
 .update-button {
-  padding: 6px 16px;
-  background-color: #7CA97E;
-  color: #1E2329;
+  padding: 12px 16px;
   border: none;
-  border-radius: 4px;
+  border-radius: 8px;
   cursor: pointer;
-  font-weight: 500;
-  transition: background-color 0.2s;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.update-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: left 0.5s;
+}
+
+.update-button:hover::before {
+  left: 100%;
+}
+
+.update-button.primary {
+  background: linear-gradient(135deg, #7CA97E 0%, #6B9A6D 100%);
+  color: white;
+  box-shadow: 0 4px 12px rgba(124, 169, 126, 0.3);
+}
+
+.update-button.secondary {
+  background: rgba(124, 169, 126, 0.1);
+  border: 1.5px solid rgba(124, 169, 126, 0.4);
+  color: #8FB996;
+  backdrop-filter: blur(8px);
 }
 
-.update-button:hover {
-  background-color: #8FB996;
+.update-button.primary:hover {
+  background: linear-gradient(135deg, #8FB996 0%, #7CA97E 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(124, 169, 126, 0.4);
+}
+
+.update-button.secondary:hover {
+  background: rgba(124, 169, 126, 0.2);
+  border-color: rgba(143, 185, 150, 0.6);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(124, 169, 126, 0.2);
 }
 
 .dismiss-button {
-  padding: 6px 12px;
-  background-color: transparent;
+  padding: 8px 12px;
+  background: transparent;
   color: #8A9BA8;
-  border: 1px solid #3A424A;
-  border-radius: 4px;
+  border: 1px solid rgba(138, 155, 168, 0.2);
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
 
 .dismiss-button:hover {
-  border-color: #8A9BA8;
+  border-color: rgba(138, 155, 168, 0.4);
   color: #C5D8BC;
+  background: rgba(138, 155, 168, 0.05);
+  transform: translateY(-1px);
 }
 
 .progress-bar {
-  width: 100px;
-  height: 6px;
-  background-color: #3A424A;
-  border-radius: 3px;
+  width: 100%;
+  height: 4px;
+  background-color: rgba(124, 169, 126, 0.2);
+  border-radius: 2px;
   overflow: hidden;
-  margin-top: 12px;
+  margin: 8px 0;
 }
 
 .progress-fill {
@@ -125,7 +185,7 @@
 
 .progress-text {
   font-size: 12px;
-  color: #8A9BA8;
+  color: #7CA97E;
 }
 
 .error-detail {
@@ -151,4 +211,30 @@
     opacity: 0;
     transform: translateX(100%);
   }
+}
+
+.update-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+/* Add subtle glow effect */
+.update-notification:hover {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(124, 169, 126, 0.2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .update-notification {
+    right: 12px;
+    max-width: 280px;
+    padding: 14px;
+  }
+  
+  .update-button {
+    padding: 10px 14px;
+    font-size: 13px;
+  }
 }