update status with icon

app/src/electron.js

@@ -458,19 +458,25 @@ function createWindow() {
   });
 }
 
-function changeAppUpdateStatus(message) {
-  appUpdateStatus = message;
+function changeAppUpdateStatus(status) {
+  appUpdateStatus = status;
   mainWindow.webContents.send('app-update-status', appUpdateStatus);
 }
 
 autoUpdater.on('checking-for-update', () => {
   console.log('Checking for updates');
-  changeAppUpdateStatus('Checking for updates...');
+  changeAppUpdateStatus({
+    icon: 'icon loading',
+    message: 'Checking for updates...',
+  });
 });
 
 autoUpdater.on('update-available', info => {
   console.log('Update available', info);
-  changeAppUpdateStatus(`New version ${info.version} available`);
+  changeAppUpdateStatus({
+    icon: 'icon download',
+    message: `New version ${info.version} available`,
+  });
   if (!autoUpdater.autoDownload) {
     mainWindow.webContents.send('update-available', info.version);
   }
@@ -478,17 +484,26 @@ autoUpdater.on('update-available', info => {
 
 autoUpdater.on('update-not-available', info => {
   console.log('Update not available', info);
-  changeAppUpdateStatus(`No new updates`);
+  changeAppUpdateStatus({
+    icon: 'icon check',
+    message: `No new updates`,
+  });
 });
 
 autoUpdater.on('update-downloaded', info => {
   console.log('Update downloaded from', info);
-  changeAppUpdateStatus(`Downloaded new version ${info.version}`);
+  changeAppUpdateStatus({
+    icon: 'icon download',
+    message: `Downloaded new version ${info.version}`,
+  });
   mainWindow.webContents.send('downloaded-new-version', info.version);
 });
 
 autoUpdater.on('error', error => {
-  changeAppUpdateStatus(`Autoupdate error`);
+  changeAppUpdateStatus({
+    icon: 'icon error',
+    message: `Autoupdate error`,
+  });
   console.error('Update error', error);
 });
 

packages/web/src/icons/FontIcon.svelte

@@ -140,6 +140,7 @@
     'icon custom-join': 'mdi mdi-arrow-left-right-bold',
     'icon parent-filter': 'mdi mdi-home-alert',
     'icon parent-filter-outline': 'mdi mdi-home-alert-outline',
+    'icon download': 'mdi mdi-download',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',

packages/web/src/stores.ts

@@ -123,7 +123,7 @@ export const commandsCustomized = derived([commands, commandsSettings], ([$comma
     ...$commandsSettings[k],
   }))
 );
-export const appUpdateStatus = writable('');
+export const appUpdateStatus = writable(null);
 export const appUpdaterActive = writable(false);
 
 export const draggingTab = writable(null);
@@ -310,4 +310,4 @@ let appUpdaterActiveValue = false;
 appUpdaterActive.subscribe(value => {
   appUpdaterActiveValue = value;
 });
-export const getAppUpdaterActive = () => appUpdaterActiveValue;
+export const getAppUpdaterActive = () => appUpdaterActiveValue;

packages/web/src/utility/appUpdate.ts

@@ -25,8 +25,8 @@ export function initializeAppUpdates() {
     });
   });
 
-  electron.addEventListener('app-update-status', (e, text) => {
-    appUpdateStatus.set(text);
+  electron.addEventListener('app-update-status', (e, value) => {
+    appUpdateStatus.set(value);
   });
 
   electron.addEventListener('downloaded-new-version', (e, version) => {

packages/web/src/widgets/StatusBar.svelte

@@ -173,7 +173,8 @@
 
     {#if $appUpdateStatus}
       <div class="item">
-        {$appUpdateStatus}
+        <FontIcon icon={$appUpdateStatus.icon} padRight />
+        {$appUpdateStatus.message}
       </div>
     {/if}
   </div>