Improve update UI

src-angular/app/components/settings/settings.component.html

@@ -139,10 +139,10 @@
 
 	<div class="absolute bottom-8 right-8 flex gap-6">
 		<div class="join">
-			<button *ngIf="updateAvailable" class="join-item btn btn-primary" (click)="downloadUpdate()">
+			<button *ngIf="updateAvailable === 'yes'" class="join-item btn btn-primary" (click)="downloadUpdate()">
 				<i class="bi text-xl" [ngClass]="updateDownloaded ? 'bi-arrow-repeat' : 'bi-cloud-arrow-down'"></i>{{ downloadUpdateText }}
 			</button>
-			<button *ngIf="updateAvailable === null" class="join-item btn btn-warning" [class.disabled]="updateRetrying" (click)="retryUpdate()">
+			<button *ngIf="updateAvailable === 'error'" class="join-item btn btn-warning" [class.disabled]="updateRetrying" (click)="retryUpdate()">
 				<i class="bi bi-arrow-repeat text-xl" [class.loading]="updateRetrying"></i>{{ retryUpdateText }}
 			</button>
 			<button class="join-item btn btn-outline btn-disabled">{{ currentVersion }}</button>

src-angular/app/components/settings/settings.component.ts

@@ -15,9 +15,9 @@ export class SettingsComponent implements OnInit {
 	public isSng: FormControl<boolean>
 	public isCompactTable: FormControl<boolean>
 
-	updateAvailable: boolean | null = false
+	updateAvailable: 'yes' | 'no' | 'error' = 'no'
 	loginClicked = false
-	downloadUpdateText = 'Update available'
+	downloadUpdateText = 'Download Update'
 	retryUpdateText = 'Failed to check for update'
 	updateDownloading = false
 	updateDownloaded = false
@@ -36,18 +36,18 @@ export class SettingsComponent implements OnInit {
 
 	async ngOnInit() {
 		window.electron.on.updateAvailable(result => {
-			this.updateAvailable = result !== null
+			this.updateAvailable = result !== null ? 'yes' : 'no'
 			this.updateRetrying = false
 			if (result !== null) {
-				this.downloadUpdateText = `Update available (${result.version})`
+				this.downloadUpdateText = `Download Update (${result.version})`
 			}
 			this.ref.detectChanges()
 		})
 		window.electron.on.updateError(err => {
 			console.log(err)
-			this.updateAvailable = null
+			this.updateAvailable = 'error'
 			this.updateRetrying = false
-			this.retryUpdateText = `Failed to check for update: ${err}`
+			this.retryUpdateText = 'Failed to check for update'
 			this.ref.detectChanges()
 		})
 		window.electron.invoke.getCurrentVersion().then(version => {
@@ -94,22 +94,26 @@ export class SettingsComponent implements OnInit {
 		return _.capitalize(text)
 	}
 
-	downloadUpdate() {
+	async downloadUpdate() {
 		if (this.updateDownloaded) {
 			window.electron.emit.quitAndInstall()
 		} else if (!this.updateDownloading) {
-			this.updateDownloading = true
+			if (await window.electron.invoke.getPlatform() === 'darwin') { // Thanks Apple...
-			window.electron.emit.downloadUpdate()
+				this.openUrl('https://github.com/Geomitron/Bridge/releases/latest')
-			this.downloadUpdateText = 'Downloading... (0%)'
+			} else {
-			window.electron.on.updateProgress(result => {
+				this.updateDownloading = true
-				this.downloadUpdateText = `Downloading... (${result.percent.toFixed(0)}%)`
+				window.electron.emit.downloadUpdate()
-				this.ref.detectChanges()
+				this.downloadUpdateText = 'Downloading... (0%)'
-			})
+				window.electron.on.updateProgress(result => {
-			window.electron.on.updateDownloaded(() => {
+					this.downloadUpdateText = `Downloading... (${result.percent.toFixed(0)}%)`
-				this.downloadUpdateText = 'Quit and install update'
+					this.ref.detectChanges()
-				this.updateDownloaded = true
+				})
-				this.ref.detectChanges()
+				window.electron.on.updateDownloaded(() => {
-			})
+					this.downloadUpdateText = 'Quit and install update'
+					this.updateDownloaded = true
+					this.ref.detectChanges()
+				})
+			}
 		}
 	}
 

src-angular/app/components/toolbar/toolbar.component.html

@@ -1,11 +1,11 @@
 <div class="navbar p-0 min-h-0 bg-base-100" style="-webkit-app-region: drag">
 	<div style="-webkit-app-region: no-drag">
-		<button class="btn btn-square btn-ghost rounded-none px-11" routerLinkActive="btn-active" routerLink="/browse">Browse</button>
+		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/browse">Browse</button>
-		<!-- TODO <a class="btn btn-square btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/library">Library</a> -->
+		<!-- TODO <a class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/library">Library</a> -->
-		<button class="btn btn-square btn-ghost rounded-none px-11 flex flex-nowrap" routerLinkActive="btn-active" routerLink="/settings">
+		<button class="btn btn-ghost rounded-none flex flex-nowrap" routerLinkActive="btn-active" routerLink="/settings">
-			<div *ngIf="updateAvailable" class="badge badge-accent badge-xs"></div>
+			<i *ngIf="updateAvailable === 'error'" class="bi bi-exclamation-triangle-fill text-warning"></i>
-			<i *ngIf="updateAvailable === null" class="bi bi-exclamation-triangle-fill text-warning"></i>
 			Settings
+			<div *ngIf="updateAvailable === 'yes'" class="badge badge-accent badge-sm">Update Available</div>
 		</button>
 	</div>
 	<div class="flex-1"></div>

src-angular/app/components/toolbar/toolbar.component.ts

@@ -7,7 +7,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
 export class ToolbarComponent implements OnInit {
 
 	isMaximized: boolean
-	updateAvailable: boolean | null = false
+	updateAvailable: 'yes' | 'no' | 'error' = 'no'
 
 	constructor(private ref: ChangeDetectorRef) { }
 
@@ -23,11 +23,11 @@ export class ToolbarComponent implements OnInit {
 		})
 
 		window.electron.on.updateAvailable(result => {
-			this.updateAvailable = result !== null
+			this.updateAvailable = result !== null ? 'yes' : 'no'
 			this.ref.detectChanges()
 		})
 		window.electron.on.updateError(() => {
-			this.updateAvailable = null
+			this.updateAvailable = 'error'
 			this.ref.detectChanges()
 		})
 		this.updateAvailable = await window.electron.invoke.getUpdateAvailable()

src-electron/IpcHandler.ts

@@ -2,12 +2,13 @@ import { IpcInvokeHandlers, IpcToMainEmitHandlers } from '../src-shared/interfac
 import { download } from './ipc/DownloadHandler.ipc.js'
 import { getSettings, setSettings } from './ipc/SettingsHandler.ipc.js'
 import { downloadUpdate, getCurrentVersion, getUpdateAvailable, quitAndInstall, retryUpdate } from './ipc/UpdateHandler.ipc.js'
-import { isMaximized, maximize, minimize, openUrl, quit, restore, showFile, showFolder, showOpenDialog, toggleDevTools } from './ipc/UtilHandlers.ipc.js'
+import { getPlatform, isMaximized, maximize, minimize, openUrl, quit, restore, showFile, showFolder, showOpenDialog, toggleDevTools } from './ipc/UtilHandlers.ipc.js'
 
 export function getIpcInvokeHandlers(): IpcInvokeHandlers {
 	return {
 		getSettings,
 		getCurrentVersion,
+		getPlatform,
 		getUpdateAvailable,
 		isMaximized,
 		showOpenDialog,

src-electron/ipc/UpdateHandler.ipc.ts

@@ -4,24 +4,24 @@ import { inspect } from 'util'
 import { UpdateProgress } from '../../src-shared/interfaces/update.interface.js'
 import { emitIpcEvent } from '../main.js'
 
-let updateAvailable: boolean | null = false
+let updateAvailable: 'yes' | 'no' | 'error' = 'no'
 let downloading = false
 
 electronUpdater.autoUpdater.autoDownload = false
 electronUpdater.autoUpdater.logger = null
 
 electronUpdater.autoUpdater.on('error', (err: Error) => {
-	updateAvailable = null
+	updateAvailable = 'error'
 	emitIpcEvent('updateError', inspect(err))
 })
 
 electronUpdater.autoUpdater.on('update-available', (info: electronUpdater.UpdateInfo) => {
-	updateAvailable = true
+	updateAvailable = 'yes'
 	emitIpcEvent('updateAvailable', info)
 })
 
 electronUpdater.autoUpdater.on('update-not-available', () => {
-	updateAvailable = false
+	updateAvailable = 'no'
 	emitIpcEvent('updateAvailable', null)
 })
 
@@ -30,7 +30,7 @@ export async function retryUpdate() {
 	try {
 		await electronUpdater.autoUpdater.checkForUpdates()
 	} catch (err) {
-		updateAvailable = null
+		updateAvailable = 'error'
 		emitIpcEvent('updateError', inspect(err))
 	}
 }

src-electron/ipc/UtilHandlers.ipc.ts

@@ -44,3 +44,7 @@ export function showFolder(folderPath: string) {
 export function showFile(filePath: string) {
 	shell.showItemInFolder(filePath)
 }
+
+export async function getPlatform() {
+	return process.platform
+}

src-electron/preload.ts

@@ -20,6 +20,7 @@ const electronApi: ContextBridgeApi = {
 	invoke: {
 		getSettings: getInvoker('getSettings'),
 		getCurrentVersion: getInvoker('getCurrentVersion'),
+		getPlatform: getInvoker('getPlatform'),
 		getUpdateAvailable: getInvoker('getUpdateAvailable'),
 		isMaximized: getInvoker('isMaximized'),
 		showOpenDialog: getInvoker('showOpenDialog'),

src-shared/interfaces/ipc.interface.ts

@@ -1,9 +1,9 @@
 import { OpenDialogOptions, OpenDialogReturnValue } from 'electron'
 import { UpdateInfo } from 'electron-updater'
 
-import { Settings } from '../Settings'
+import { Settings } from '../Settings.js'
-import { Download, DownloadProgress } from './download.interface'
+import { Download, DownloadProgress } from './download.interface.js'
-import { UpdateProgress } from './update.interface'
+import { UpdateProgress } from './update.interface.js'
 
 export interface ContextBridgeApi {
 	invoke: IpcInvokeHandlers
@@ -29,9 +29,13 @@ export interface IpcInvokeEvents {
 		input: void
 		output: string
 	}
+	getPlatform: {
+		input: void
+		output: NodeJS.Platform
+	}
 	getUpdateAvailable: {
 		input: void
-		output: boolean | null
+		output: 'yes' | 'no' | 'error'
 	}
 	isMaximized: {
 		input: void