Reworked app update flow (#3960)

* Make theseus capable of logging messages from the `log` crate * Move update checking entirely into JS and open a modal if an update is available * Fix formatjs on Windows and run formatjs * Add in the buttons and body * Fix lint * Show update size in modal * Fix update not being rechecked if the update modal was directly dismissed * Slight UI tweaks * Fix lint * Implement skipping the update * Implement the Update Now button * Implement updating at next exit * Turn download progress into an error bar on failure * Restore 5 minute update check instead of 30 seconds * Fix PendingUpdateData being seen as a unit struct * Fix lint * Make CI also lint updater code * feat: create AppearingProgressBar component * feat: polish update available modal * feat: add error handling * Open changelog with tauri-plugin-opener * Run intl:extract * Update completion toasts (#3978) * Use single LAUNCHER_USER_AGENT constant for all user agents * Fix build on Mac * Request the update size with HEAD instead of GET * UI tweaks * lint * Fix lint * fix: hide modal header & add "Hide update reminder" button w/ tooltip * Run intl:extract * fix: lint issues * fix: merge issues * notifications.js no longer exists * Add metered network checking * Add a timeout to macOS is_network_metered * Fix tauri.conf.json * vibe debugging * Set a dispatch queue * Have a popup that asks you if you'd like to disable automatic file downloads if you're on a metered network * Move UpdateModal to modal package * Fix lint * Add a toggle for automatic downloads * Fix type Co-authored-by: Alejandro González <7822554+AlexTMjugador@users.noreply.github.com> Signed-off-by: Josiah Glosson <soujournme@gmail.com> * Redo updating UI and experience * lint * fix unlistener issue * remove unneeded translation keys * Fix expose issue * temp disable cranelift, tweak some messages * change version back * Clean up App.vue * move toast to top right * update reload icon * Fixed the bug!!!!!!!!!!!! * improve messages * intl:extract * Add liquid glass icon file * not you! * use dependency injection * lint on apple icon * Fix imports, move download size to button * change update check back to 5 mins * lint + move to providers * intl:extract --------- Signed-off-by: Cal H. <hendersoncal117@gmail.com> Signed-off-by: Josiah Glosson <soujournme@gmail.com> Co-authored-by: Calum <calum@modrinth.com> Co-authored-by: Prospector <prospectordev@gmail.com> Co-authored-by: Cal H. <hendersoncal117@gmail.com> Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com> Co-authored-by: Alejandro González <7822554+AlexTMjugador@users.noreply.github.com>
2025-09-29 09:28:31 -06:00
parent f6f66a313f
commit a538b99c18
49 changed files with 1487 additions and 284 deletions
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -14,6 +14,7 @@ import {
 	NewspaperIcon,
 	NotepadTextIcon,
 	PlusIcon,
+	RefreshCwIcon,
 	RestoreIcon,
 	RightArrowIcon,
 	SettingsIcon,
@@ -24,9 +25,11 @@ import {
 	Avatar,
 	Button,
 	ButtonStyled,
+	commonMessages,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
+	ProgressSpinner,
 	provideNotificationManager,
 } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
@@ -35,8 +38,8 @@ import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
-import { check } from '@tauri-apps/plugin-updater'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import { $fetch } from 'ofetch'
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
@@ -58,6 +61,7 @@ import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
+import UpdateToast from '@/components/ui/UpdateToast.vue'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads.js'
@@ -67,9 +71,20 @@ import { command_listener, warning_listener } from '@/helpers/events.js'
 import { useFetch } from '@/helpers/fetch.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
 import { list } from '@/helpers/profile.js'
-import { get } from '@/helpers/settings.ts'
+import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
-import { getOS, isDev, restartApp } from '@/helpers/utils.js'
+import {
+	areUpdatesEnabled,
+	enqueueUpdateForInstallation,
+	getOS,
+	getUpdateSize,
+	isDev,
+	isNetworkMetered,
+} from '@/helpers/utils.js'
+import {
+	provideAppUpdateDownloadProgress,
+	subscribeToDownloadProgress,
+} from '@/providers/download-progress.ts'
 import { useError } from '@/store/error.js'
 import { useInstall } from '@/store/install.js'
 import { useLoading, useTheming } from '@/store/state'
@@ -114,11 +129,39 @@ onMounted(async () => {

 	document.querySelector('body').addEventListener('click', handleClick)
 	document.querySelector('body').addEventListener('auxclick', handleAuxClick)
+
+	checkUpdates()
 })

-onUnmounted(() => {
+onUnmounted(async () => {
 	document.querySelector('body').removeEventListener('click', handleClick)
 	document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
+
+	await unlistenUpdateDownload?.()
+})
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	updateInstalledToastTitle: {
+		id: 'app.update.complete-toast.title',
+		defaultMessage: 'Version {version} was successfully installed!',
+	},
+	updateInstalledToastText: {
+		id: 'app.update.complete-toast.text',
+		defaultMessage: 'Click here to view the changelog.',
+	},
+	reloadToUpdate: {
+		id: 'app.update.reload-to-update',
+		defaultMessage: 'Reload to install update',
+	},
+	downloadUpdate: {
+		id: 'app.update.download-update',
+		defaultMessage: 'Download update',
+	},
+	downloadingUpdate: {
+		id: 'app.update.downloading-update',
+		defaultMessage: 'Downloading update ({percent}%)',
+	},
 })

 async function setupApp() {
@@ -134,7 +177,8 @@ async function setupApp() {
 		toggle_sidebar,
 		developer_mode,
 		feature_flags,
-	} = await get()
+		pending_update_toast_for_version,
+	} = await getSettings()

 	if (default_page === 'Library') {
 		await router.push('/library')
@@ -221,7 +265,6 @@ async function setupApp() {
 		})

 	get_opening_command().then(handleCommand)
-	checkUpdates()
 	fetchCredentials()

 	try {
@@ -232,6 +275,22 @@ async function setupApp() {
 		console.warn('Failed to generate skin previews in app setup.', error)
 	}

+	if (pending_update_toast_for_version !== null) {
+		const settings = await getSettings()
+		settings.pending_update_toast_for_version = null
+		await setSettings(settings)
+
+		const version = await getVersion()
+		if (pending_update_toast_for_version === version) {
+			notifications.addNotification({
+				type: 'success',
+				title: formatMessage(messages.updateInstalledToastTitle, { version }),
+				text: formatMessage(messages.updateInstalledToastText),
+				clickAction: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
+			})
+		}
+	}
+
 	if (osType === 'windows') {
 		await processPendingSurveys()
 	} else {
@@ -377,19 +436,113 @@ async function handleCommand(e) {
 	}
 }

-const updateAvailable = ref(false)
-async function checkUpdates() {
-	const update = await check()
-	updateAvailable.value = !!update
+const appUpdateDownload = {
+	progress: ref(0),
+	version: ref(),
+}
+let unlistenUpdateDownload

+const downloadProgress = computed(() => appUpdateDownload.progress.value)
+const downloadPercent = computed(() => Math.trunc(appUpdateDownload.progress.value * 100))
+
+const metered = ref(true)
+const finishedDownloading = ref(false)
+const restarting = ref(false)
+const updateToastDismissed = ref(false)
+const availableUpdate = ref(null)
+const updateSize = ref(null)
+async function checkUpdates() {
+	if (!(await areUpdatesEnabled())) {
+		console.log('Skipping update check as updates are disabled in this build')
+		return
+	}
+
+	async function performCheck() {
+		const update = await invoke('plugin:updater|check')
+		const isExistingUpdate = update.version === availableUpdate.value?.version
+
+		if (!update) {
+			console.log('No update available')
+			return
+		}
+
+		if (isExistingUpdate) {
+			console.log('Update is already known')
+			return
+		}
+
+		appUpdateDownload.progress.value = 0
+		finishedDownloading.value = false
+		updateToastDismissed.value = false
+
+		console.log(`Update ${update.version} is available.`)
+
+		metered.value = await isNetworkMetered()
+		if (!metered.value) {
+			console.log('Starting download of update')
+			downloadUpdate(update)
+		} else {
+			console.log(`Metered connection detected, not auto-downloading update.`)
+		}
+
+		getUpdateSize(update.rid).then((size) => (updateSize.value = size))
+
+		availableUpdate.value = update
+	}
+
+	await performCheck()
 	setTimeout(
 		() => {
 			checkUpdates()
 		},
-		5 * 1000 * 60,
+		5 /* min */ * 60 /* sec */ * 1000 /* ms */,
 	)
 }

+async function showUpdateToast() {
+	updateToastDismissed.value = false
+}
+
+async function downloadAvailableUpdate() {
+	return downloadUpdate(availableUpdate.value)
+}
+
+async function downloadUpdate(versionToDownload) {
+	if (!versionToDownload) {
+		handleError(`Failed to download update: no version available`)
+	}
+
+	if (appUpdateDownload.progress.value !== 0) {
+		console.error(`Update ${versionToDownload.version} already downloading`)
+		return
+	}
+
+	console.log(`Downloading update ${versionToDownload.version}`)
+
+	try {
+		enqueueUpdateForInstallation(versionToDownload.rid).then(() => {
+			finishedDownloading.value = true
+			unlistenUpdateDownload?.().then(() => {
+				unlistenUpdateDownload = null
+			})
+			console.log('Finished downloading!')
+		})
+		unlistenUpdateDownload = await subscribeToDownloadProgress(
+			appUpdateDownload,
+			versionToDownload.version,
+		)
+	} catch (e) {
+		handleError(e)
+	}
+}
+
+async function installUpdate() {
+	restarting.value = true
+	setTimeout(async () => {
+		await handleClose()
+	}, 250)
+}
+
 function handleClick(e) {
 	let target = e.target
 	while (target != null) {
@@ -534,12 +687,47 @@ async function processPendingSurveys() {
 		console.info('No user survey to show')
 	}
 }
+
+provideAppUpdateDownloadProgress(appUpdateDownload)
 </script>

 <template>
 	<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
 	<div id="teleports"></div>
 	<div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative">
+		<Suspense>
+			<Transition name="toast">
+				<UpdateToast
+					v-if="
+						!!availableUpdate &&
+						!updateToastDismissed &&
+						!restarting &&
+						(finishedDownloading || metered)
+					"
+					:version="availableUpdate.version"
+					:size="updateSize"
+					:metered="metered"
+					@close="updateToastDismissed = true"
+					@restart="installUpdate"
+					@download="downloadAvailableUpdate"
+				/>
+			</Transition>
+		</Suspense>
+		<Transition name="fade">
+			<div
+				v-if="restarting"
+				data-tauri-drag-region
+				class="inset-0 fixed bg-black/80 backdrop-blur z-[200] flex items-center justify-center"
+			>
+				<span
+					data-tauri-drag-region
+					class="flex items-center gap-4 text-contrast font-semibold text-xl select-none cursor-default"
+				>
+					<RefreshCwIcon data-tauri-drag-region class="animate-spin w-6 h-6" />
+					Restarting...
+				</span>
+			</div>
+		</Transition>
 		<Suspense>
 			<AppSettingsModal ref="settingsModal" />
 		</Suspense>
@@ -593,10 +781,50 @@ async function processPendingSurveys() {
 				<PlusIcon />
 			</NavButton>
 			<div class="flex flex-grow"></div>
-			<NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
-				<DownloadIcon />
-			</NavButton>
-			<NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
+			<Transition name="nav-button-animated">
+				<div
+					v-if="
+						availableUpdate &&
+						updateToastDismissed &&
+						!restarting &&
+						(finishedDownloading || metered)
+					"
+				>
+					<NavButton
+						v-tooltip.right="
+							formatMessage(
+								finishedDownloading
+									? messages.reloadToUpdate
+									: downloadProgress === 0
+										? messages.downloadUpdate
+										: messages.downloadingUpdate,
+								{
+									percent: downloadPercent,
+								},
+							)
+						"
+						:to="
+							finishedDownloading
+								? installUpdate
+								: downloadProgress > 0 && downloadProgress < 1
+									? showUpdateToast
+									: downloadAvailableUpdate
+						"
+					>
+						<ProgressSpinner
+							v-if="downloadProgress > 0 && downloadProgress < 1"
+							class="text-brand"
+							:progress="downloadProgress"
+						/>
+						<RefreshCwIcon v-else-if="finishedDownloading" class="text-brand" />
+						<DownloadIcon v-else class="text-brand" />
+					</NavButton>
+				</div>
+			</Transition>
+			<NavButton
+				v-tooltip.right="formatMessage(commonMessages.settingsLabel)"
+				:to="() => $refs.settingsModal.show()"
+			>
 				<SettingsIcon />
 			</NavButton>
 			<ButtonStyled v-if="credentials" type="transparent" circular>
@@ -1022,6 +1250,84 @@ async function processPendingSurveys() {
 	opacity: 0;
 	transform: translateY(10rem) scale(0.8) scaleY(1.6);
 }
+
+.toast-enter-active {
+	transition: opacity 0.25s linear;
+}
+
+.toast-enter-from,
+.toast-leave-to {
+	opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.toast-enter-active,
+	.nav-button-animated-enter-active {
+		transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
+	}
+
+	.toast-leave-active,
+	.nav-button-animated-leave-active {
+		transition: all 0.25s ease;
+	}
+
+	.toast-enter-from {
+		scale: 0.5;
+		translate: 0 -10rem;
+		opacity: 0;
+	}
+
+	.toast-leave-to {
+		scale: 0.96;
+		translate: 20rem 0;
+		opacity: 0;
+	}
+
+	.nav-button-animated-enter-active {
+		position: relative;
+	}
+
+	.nav-button-animated-enter-active::before {
+		content: '';
+		inset: 0;
+		border-radius: 100vw;
+		background-color: var(--color-brand-highlight);
+		position: absolute;
+		animation: pop 0.5s ease-in forwards;
+		opacity: 0;
+	}
+
+	@keyframes pop {
+		0% {
+			scale: 0.5;
+		}
+		50% {
+			opacity: 0.5;
+		}
+		100% {
+			scale: 1.5;
+		}
+	}
+
+	.nav-button-animated-enter-from {
+		scale: 0.5;
+		translate: -2rem 0;
+		opacity: 0;
+	}
+
+	.nav-button-animated-leave-to {
+		scale: 0.75;
+		opacity: 0;
+	}
+
+	.fade-enter-active {
+		transition: 0.25s ease-in-out;
+	}
+
+	.fade-enter-from {
+		opacity: 0;
+	}
+}
 </style>
 <style>
 .mac {