feat: updater ui change + win restart fix (#6339)

* feat: updater ui change

* fix: fix width

* fix: impl fork tauri updater plugin

* fix: lint

apps/app-frontend/src/components/ui/AppActionBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex gap-4 items-center">
+	<div class="flex gap-2 items-center">
 		<ButtonStyled
 			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
 			color="brand"
@@ -14,6 +14,31 @@
 			<UnplugIcon class="text-secondary" />
 			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
 		</div>
+		<ButtonStyled color="brand" type="outlined" hover-color-fill="background">
+			<button
+				v-if="showUpdatePill"
+				type="button"
+				class="!h-[34px] overflow-hidden text-sm !transition-[width,opacity,transform,background-color,color,filter] !duration-200 ease-out"
+				:class="[
+					updatePillWidthClass,
+					{
+						'update-pill-ready-hidden': finishedDownloading && !animateReadyPill,
+						'update-pill-ready-visible': finishedDownloading && animateReadyPill,
+					},
+				]"
+				:disabled="isUpdateDownloading"
+				:aria-busy="isUpdateDownloading"
+				@click="handleUpdateClick"
+			>
+				<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
+				<DownloadIcon v-else />
+				<span v-if="isUpdateDownloading">
+					{{ formatMessage(messages.downloadingUpdate) }}
+					<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
+				</span>
+				<span v-else>{{ updateLabel }}</span>
+			</button>
+		</ButtonStyled>
 		<div
 			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
 		>
@@ -119,6 +144,7 @@ import {
 	DownloadIcon,
 	DropdownIcon,
 	OnlineIndicatorIcon,
+	RefreshCwIcon,
 	StarIcon,
 	StopCircleIcon,
 	TerminalSquareIcon,
@@ -135,7 +161,7 @@ import {
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { Dropdown } from 'floating-vue'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { trackEvent } from '@/helpers/analytics'
@@ -145,6 +171,11 @@ import { get_many as getInstances } from '@/helpers/profile.js'
 import type { LoadingBar } from '@/helpers/state'
 import { progress_bars_list } from '@/helpers/state'
 import type { GameInstance } from '@/helpers/types'
+import {
+	appUpdateState,
+	downloadAvailableAppUpdate,
+	installAvailableAppUpdate,
+} from '@/providers/app-update'
 
 const { handleError } = injectNotificationManager()
 const popupNotificationManager = injectPopupNotificationManager()
@@ -209,8 +240,96 @@ const messages = defineMessages({
 		id: 'app.action-bar.view-active-downloads',
 		defaultMessage: 'View active downloads',
 	},
+	update: {
+		id: 'app.action-bar.update',
+		defaultMessage: 'Update',
+	},
+	downloadingUpdate: {
+		id: 'app.action-bar.downloading-update',
+		defaultMessage: 'Downloading update',
+	},
+	reloadToUpdate: {
+		id: 'app.action-bar.reload-to-update',
+		defaultMessage: 'Reload to update',
+	},
 })
 
+const {
+	downloading,
+	downloadPercent,
+	downloadProgress,
+	finishedDownloading,
+	isVisible: isUpdateVisible,
+	metered,
+	restarting,
+} = appUpdateState
+
+const isUpdateDownloading = computed(
+	() =>
+		downloading.value ||
+		(downloadProgress.value > 0 && downloadProgress.value < 1 && !finishedDownloading.value),
+)
+const showUpdatePill = computed(
+	() => isUpdateVisible.value && (finishedDownloading.value || metered.value),
+)
+const animateReadyPill = ref(false)
+const updateLabel = computed(() => {
+	if (isUpdateDownloading.value) {
+		return formatMessage(messages.downloadingUpdate)
+	}
+
+	if (finishedDownloading.value) {
+		return formatMessage(messages.reloadToUpdate)
+	}
+
+	return formatMessage(messages.update)
+})
+const updatePillWidthClass = computed(() => {
+	if (isUpdateDownloading.value) {
+		return 'w-[219px]'
+	}
+
+	if (finishedDownloading.value) {
+		return 'w-[166px]'
+	}
+
+	return '!w-[96px]'
+})
+let readyPillAnimationFrame: number | null = null
+watch([showUpdatePill, finishedDownloading], async ([show, ready], [wasShown, wasReady]) => {
+	if (readyPillAnimationFrame !== null) {
+		cancelAnimationFrame(readyPillAnimationFrame)
+		readyPillAnimationFrame = null
+	}
+
+	if (!show || !ready) {
+		animateReadyPill.value = false
+		return
+	}
+
+	if (wasShown && wasReady) {
+		return
+	}
+
+	animateReadyPill.value = false
+	await nextTick()
+	readyPillAnimationFrame = requestAnimationFrame(() => {
+		animateReadyPill.value = true
+		readyPillAnimationFrame = null
+	})
+})
+async function handleUpdateClick() {
+	if (isUpdateDownloading.value) {
+		return
+	}
+
+	if (finishedDownloading.value) {
+		await installAvailableAppUpdate()
+	} else {
+		await downloadAvailableAppUpdate()
+	}
+}
+
 const currentProcesses = ref<RunningProcess[]>([])
 const selectedProcess = ref<RunningProcess | undefined>()
 
@@ -469,5 +588,20 @@ onBeforeUnmount(() => {
 	window.removeEventListener('online', handleOnline)
 	unlistenProcess()
 	unlistenLoading()
+	if (readyPillAnimationFrame !== null) {
+		cancelAnimationFrame(readyPillAnimationFrame)
+	}
 })
 </script>
+
+<style scoped>
+.update-pill-ready-hidden {
+	opacity: 0;
+	transform: scale(0.96);
+}
+
+.update-pill-ready-visible {
+	opacity: 1;
+	transform: scale(1);
+}
+</style>