fix(app): show download icon for shell updates (#3471)

fluxer_app/src/features/app/state/Updater.ts

@@ -155,6 +155,7 @@ class Updater {
 	private unsubscribeNativeEvents: (() => void) | null = null;
 	private unsubscribeDesktopUpdate: (() => void) | null = null;
 	private desktopUpdateReported = false;
+	private desktopUpdateReportedReplacesShell = false;
 	private desktopUpdateRunning = false;
 	private olderShellModuleUpdateReady = false;
 	private olderShellUpdateDownloaded = false;
@@ -203,6 +204,10 @@ class Updater {
 		return this.desktopUpdateReported || this.olderShellModuleUpdateReady || this.olderShellUpdateAvailable;
 	}
 
+	get desktopUpdateReplacesShell(): boolean {
+		return (this.desktopUpdateReported && this.desktopUpdateReportedReplacesShell) || this.olderShellUpdateAvailable;
+	}
+
 	private get olderShellUpdateAvailable(): boolean {
 		const electronApi = getElectronAPI();
 		if (electronApi == null || electronApi.desktopUpdate != null || electronApi.updaterInstall == null) {
@@ -281,6 +286,7 @@ class Updater {
 		this.unsubscribeDesktopUpdate = desktopUpdate.onStateChanged((state) => {
 			runInAction(() => {
 				this.desktopUpdateReported = state.available;
+				this.desktopUpdateReportedReplacesShell = state.replacesShell === true;
 				this.desktopUpdateRunning = state.updating === true;
 			});
 		});
@@ -314,6 +320,7 @@ class Updater {
 			const state = await desktopUpdate.state();
 			runInAction(() => {
 				this.desktopUpdateReported = state.available;
+				this.desktopUpdateReportedReplacesShell = state.replacesShell === true;
 				this.desktopUpdateRunning = state.updating === true;
 			});
 		} catch (error) {
@@ -669,6 +676,7 @@ class Updater {
 			this.unsubscribeDesktopUpdate = null;
 		}
 		this.desktopUpdateReported = false;
+		this.desktopUpdateReportedReplacesShell = false;
 		this.desktopUpdateRunning = false;
 		this.olderShellModuleUpdateReady = false;
 		this.olderShellUpdateDownloaded = false;

fluxer_app/src/features/channel/components/channel_header_components/UpdaterIcon.tsx

@@ -8,7 +8,7 @@ import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {Tooltip} from '@app/features/ui/tooltip/Tooltip';
 import {msg} from '@lingui/core/macro';
 import {useLingui} from '@lingui/react/macro';
-import {ArrowClockwiseIcon} from '@phosphor-icons/react';
+import {ArrowClockwiseIcon, DownloadSimpleIcon} from '@phosphor-icons/react';
 import {observer} from 'mobx-react-lite';
 import {useCallback} from 'react';
 
@@ -67,6 +67,10 @@ export const UpdaterIcon = observer(() => {
 			? i18n._(CLICK_TO_RELOAD_AND_UPDATE_DESCRIPTOR, {version, productName: RuntimeConfig.productName})
 			: i18n._(CLICK_TO_RELOAD_AND_UPDATE_2_DESCRIPTOR, {productName: RuntimeConfig.productName});
 	}
+	const Icon =
+		affordance === 'manual' || (affordance === 'desktop' && Updater.desktopUpdateReplacesShell)
+			? DownloadSimpleIcon
+			: ArrowClockwiseIcon;
 	return (
 		<Tooltip text={tooltip} position="bottom" data-flx="channel.channel-header-components.updater-icon.tooltip">
 			<FocusRing offset={-2} data-flx="channel.channel-header-components.updater-icon.focus-ring">
@@ -79,7 +83,7 @@ export const UpdaterIcon = observer(() => {
 					aria-label={tooltip}
 					data-flx="channel.channel-header-components.updater-icon.button.click"
 				>
-					<ArrowClockwiseIcon
+					<Icon
 						weight="bold"
 						className={affordance === 'updating' ? styles.updateIconSpinning : styles.updateIcon}
 						data-flx="channel.channel-header-components.updater-icon.update-icon"