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 {
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -6,6 +6,7 @@
 		:class="{
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),
+			disabled: disabled,
 		}"
 		class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
 	>
@@ -15,6 +16,7 @@
 		v-else
 		v-bind="$attrs"
 		class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+		:disabled="disabled"
 		@click="to"
 	>
 		<slot />
@@ -29,12 +31,18 @@ const route = useRoute()

 type RouteFunction = (route: RouteLocationNormalizedLoaded) => boolean

-defineProps<{
-	to: (() => void) | string
-	isPrimary?: RouteFunction
-	isSubpage?: RouteFunction
-	highlightOverride?: boolean
-}>()
+withDefaults(
+	defineProps<{
+		to: (() => void) | string
+		isPrimary?: RouteFunction
+		isSubpage?: RouteFunction
+		highlightOverride?: boolean
+		disabled?: boolean
+	}>(),
+	{
+		disabled: false,
+	},
+)

 defineOptions({
 	inheritAttrs: false,
--- a/apps/app-frontend/src/components/ui/ProgressBar.vue
+++ b/apps/app-frontend/src/components/ui/ProgressBar.vue
@@ -1,6 +1,12 @@
 <template>
 	<div class="progress-bar">
-		<div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
+		<div
+			class="progress-bar__fill"
+			:style="{
+				width: `${progress}%`,
+				'background-color': error ? 'var(--color-red)' : 'var(--color-brand)',
+			}"
+		></div>
 	</div>
 </template>

@@ -13,6 +19,10 @@ defineProps({
 			return value >= 0 && value <= 100
 		},
 	},
+	error: {
+		type: Boolean,
+		default: false,
+	},
 })
 </script>

@@ -27,7 +37,6 @@ defineProps({

 .progress-bar__fill {
 	height: 100%;
-	background-color: var(--color-brand);
 	transition: width 0.3s;
 }
 </style>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -177,8 +177,8 @@ const currentLoadingBars = ref([])

 const refreshInfo = async () => {
 	const currentLoadingBarCount = currentLoadingBars.value.length
-	currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError)).map(
-		(x) => {
+	currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError))
+		.map((x) => {
 			if (x.bar_type.type === 'java_download') {
 				x.title = 'Downloading Java ' + x.bar_type.version
 			}
@@ -190,8 +190,8 @@ const refreshInfo = async () => {
 			}

 			return x
-		},
-	)
+		})
+		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')

 	currentLoadingBars.value.sort((a, b) => {
 		if (a.loading_bar_uuid < b.loading_bar_uuid) {
--- a/apps/app-frontend/src/components/ui/SplashScreen.vue
+++ b/apps/app-frontend/src/components/ui/SplashScreen.vue
@@ -114,7 +114,7 @@ watch(loading, (newValue) => {
 			setTimeout(() => {
 				hidden.value = true
 				loading.setEnabled(true)
-			}, 250)
+			}, 50)
 		}
 	}
 })
@@ -135,9 +135,6 @@ loading_listener(async (e) => {
 	if (e.event.type === 'directory_move') {
 		loadingProgress.value = 100 * (e.fraction ?? 1)
 		message.value = 'Updating app directory...'
-	} else if (e.event.type === 'launcher_update') {
-		loadingProgress.value = 100 * (e.fraction ?? 1)
-		message.value = 'Updating Modrinth App...'
 	} else if (e.event.type === 'checking_for_updates') {
 		loadingProgress.value = 100 * (e.fraction ?? 1)
 		message.value = 'Checking for updates...'
--- a/apps/app-frontend/src/components/ui/UpdateToast.vue
+++ b/apps/app-frontend/src/components/ui/UpdateToast.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { DownloadIcon, ExternalIcon, RefreshCwIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, ProgressBar } from '@modrinth/ui'
+import { formatBytes } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { ref } from 'vue'
+
+import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+	(e: 'close' | 'restart' | 'download'): void
+}>()
+
+defineProps<{
+	version: string
+	size: number | null
+	metered: boolean
+}>()
+
+const downloading = ref(false)
+const { progress } = injectAppUpdateDownloadProgress()
+
+function download() {
+	emit('download')
+	downloading.value = true
+}
+
+const messages = defineMessages({
+	title: {
+		id: 'app.update-toast.title',
+		defaultMessage: 'Update available',
+	},
+	body: {
+		id: 'app.update-toast.body',
+		defaultMessage:
+			'Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App.',
+	},
+	reload: {
+		id: 'app.update-toast.reload',
+		defaultMessage: 'Reload',
+	},
+	download: {
+		id: 'app.update-toast.download',
+		defaultMessage: 'Download ({size})',
+	},
+	downloading: {
+		id: 'app.update-toast.downloading',
+		defaultMessage: 'Downloading...',
+	},
+	changelog: {
+		id: 'app.update-toast.changelog',
+		defaultMessage: 'Changelog',
+	},
+	meteredBody: {
+		id: 'app.update-toast.body.metered',
+		defaultMessage: `Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it.`,
+	},
+	downloadCompleteTitle: {
+		id: 'app.update-toast.title.download-complete',
+		defaultMessage: 'Download complete',
+	},
+	downloadedBody: {
+		id: 'app.update-toast.body.download-complete',
+		defaultMessage: `Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App.`,
+	},
+})
+</script>
+<template>
+	<div
+		class="fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 w-[25rem] bg-bg-raised border-divider border-solid border-[2px]"
+		:class="{
+			'download-complete': progress === 1,
+		}"
+	>
+		<div class="flex">
+			<h2 class="text-base text-contrast font-semibold m-0 grow">
+				{{
+					formatMessage(metered && progress === 1 ? messages.downloadCompleteTitle : messages.title)
+				}}
+			</h2>
+			<ButtonStyled size="small" circular>
+				<button v-tooltip="formatMessage(commonMessages.closeButton)" @click="emit('close')">
+					<XIcon />
+				</button>
+			</ButtonStyled>
+		</div>
+		<p class="text-sm mt-2 mb-0">
+			{{
+				formatMessage(
+					metered
+						? progress === 1
+							? messages.downloadedBody
+							: messages.meteredBody
+						: messages.body,
+					{ version },
+				)
+			}}
+		</p>
+		<p
+			v-if="metered && progress < 1"
+			class="text-sm text-secondary mt-2 mb-0 flex items-center gap-1"
+		>
+			<template v-if="progress > 0">
+				<ProgressBar :progress="progress" class="max-w-[unset]" />
+			</template>
+		</p>
+		<div class="flex gap-2 mt-4">
+			<ButtonStyled color="brand">
+				<button v-if="metered && progress < 1" :disabled="downloading" @click="download">
+					<SpinnerIcon v-if="downloading" class="animate-spin" />
+					<DownloadIcon v-else />
+					{{
+						formatMessage(downloading ? messages.downloading : messages.download, {
+							size: formatBytes(size ?? 0),
+						})
+					}}
+				</button>
+				<button v-else @click="emit('restart')">
+					<RefreshCwIcon /> {{ formatMessage(messages.reload) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a href="https://modrinth.com/news/changelog?filter=app">
+					{{ formatMessage(messages.changelog) }} <ExternalIcon />
+				</a>
+			</ButtonStyled>
+		</div>
+	</div>
+</template>
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -9,10 +9,10 @@ import {
 	SettingsIcon,
 	ShieldIcon,
 } from '@modrinth/assets'
-import { TabbedModal } from '@modrinth/ui'
+import { ProgressBar, TabbedModal } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { defineMessage, useVIntl } from '@vintl/vintl'
+import { defineMessage, defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'

 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -23,6 +23,7 @@ import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
 import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
+import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
 import { useTheming } from '@/store/state'

 const themeStore = useTheming()
@@ -98,6 +99,8 @@ const isOpen = computed(() => modal.value?.isOpen)

 defineExpose({ show, isOpen })

+const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
+
 const version = await getVersion()
 const osPlatform = getOsPlatform()
 const osVersion = getOsVersion()
@@ -123,6 +126,13 @@ function devModeCount() {
 		}
 	}
 }
+
+const messages = defineMessages({
+	downloading: {
+		id: 'app.settings.downloading',
+		defaultMessage: 'Downloading v{version}',
+	},
+})
 </script>
 <template>
 	<ModalWrapper ref="modal">
@@ -135,6 +145,14 @@ function devModeCount() {
 		<TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
 			<template #footer>
 				<div class="mt-auto text-secondary text-sm">
+					<div class="mb-3">
+						<template v-if="progress > 0 && progress < 1">
+							<p class="m-0 mb-2">
+								{{ formatMessage(messages.downloading, { downloadingVersion }) }}
+							</p>
+							<ProgressBar :progress="progress" />
+						</template>
+					</div>
 					<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
 						{{ formatMessage(developerModeEnabled) }}
 					</p>
@@ -152,7 +170,7 @@ function devModeCount() {
 						<div>
 							<p class="m-0">Modrinth App {{ version }}</p>
 							<p class="m-0">
-								<span v-if="osPlatform === 'macos'">MacOS</span>
+								<span v-if="osPlatform === 'macos'">macOS</span>
 								<span v-else class="capitalize">{{ osPlatform }}</span>
 								{{ osVersion }}
 							</p>
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -12,6 +12,10 @@ const props = defineProps({
 		type: String,
 		default: null,
 	},
+	hideHeader: {
+		type: Boolean,
+		default: false,
+	},
 	closable: {
 		type: Boolean,
 		default: true,
@@ -49,7 +53,14 @@ function onModalHide() {
 </script>

 <template>
-	<Modal ref="modal" :header="header" :noblur="!themeStore.advancedRendering" @hide="onModalHide">
+	<Modal
+		ref="modal"
+		:header="header"
+		:noblur="!themeStore.advancedRendering"
+		:closable="closable"
+		:hide-header="hideHeader"
+		@hide="onModalHide"
+	>
 		<template #title>
 			<slot name="title" />
 		</template>
--- a/apps/app-frontend/src/helpers/settings.ts
+++ b/apps/app-frontend/src/helpers/settings.ts
@@ -63,6 +63,10 @@ export type AppSettings = {

 	developer_mode: boolean
 	feature_flags: Record<FeatureFlag, boolean>
+
+	skipped_update: string | null
+	pending_update_toast_for_version: string | null
+	auto_download_updates: boolean | null
 }

 // Get full settings object
--- a/apps/app-frontend/src/helpers/utils.js
+++ b/apps/app-frontend/src/helpers/utils.js
@@ -6,11 +6,31 @@ export async function isDev() {
 	return await invoke('is_dev')
 }

+export async function areUpdatesEnabled() {
+	return await invoke('are_updates_enabled')
+}
+
+export async function getUpdateSize(updateRid) {
+	return await invoke('get_update_size', { rid: updateRid })
+}
+
+export async function enqueueUpdateForInstallation(updateRid) {
+	return await invoke('enqueue_update_for_installation', { rid: updateRid })
+}
+
+export async function removeEnqueuedUpdate() {
+	return await invoke('remove_enqueued_update')
+}
+
 // One of 'Windows', 'Linux', 'MacOS'
 export async function getOS() {
 	return await invoke('plugin:utils|get_os')
 }

+export async function isNetworkMetered() {
+	return await invoke('plugin:utils|is_network_metered')
+}
+
 export async function openPath(path) {
 	return await invoke('plugin:utils|open_path', { path })
 }
@@ -38,13 +58,6 @@ export async function restartApp() {
 	return await invoke('restart_app')
 }

-/**
- * @deprecated This method is no longer needed, and just returns its parameter
- */
-export function sanitizePotentialFileUrl(url) {
-	return url
-}
-
 export const releaseColor = (releaseType) => {
 	switch (releaseType) {
 		case 'release':
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -2,6 +2,9 @@
  "app.settings.developer-mode-enabled": {
    "message": "Developer mode enabled."
  },
+  "app.settings.downloading": {
+    "message": "Downloading v{version}"
+  },
  "app.settings.tabs.appearance": {
    "message": "Appearance"
  },
@@ -20,6 +23,48 @@
  "app.settings.tabs.resource-management": {
    "message": "Resource management"
  },
+  "app.update-toast.body": {
+    "message": "Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App."
+  },
+  "app.update-toast.body.download-complete": {
+    "message": "Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App."
+  },
+  "app.update-toast.body.metered": {
+    "message": "Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it."
+  },
+  "app.update-toast.changelog": {
+    "message": "Changelog"
+  },
+  "app.update-toast.download": {
+    "message": "Download ({size})"
+  },
+  "app.update-toast.downloading": {
+    "message": "Downloading..."
+  },
+  "app.update-toast.reload": {
+    "message": "Reload"
+  },
+  "app.update-toast.title": {
+    "message": "Update available"
+  },
+  "app.update-toast.title.download-complete": {
+    "message": "Download complete"
+  },
+  "app.update.complete-toast.text": {
+    "message": "Click here to view the changelog."
+  },
+  "app.update.complete-toast.title": {
+    "message": "Version {version} was successfully installed!"
+  },
+  "app.update.download-update": {
+    "message": "Download update"
+  },
+  "app.update.downloading-update": {
+    "message": "Downloading update ({percent}%)"
+  },
+  "app.update.reload-to-update": {
+    "message": "Reload to install update"
+  },
  "instance.add-server.add-and-play": {
    "message": "Add and play"
  },
--- a/apps/app-frontend/src/providers/download-progress.ts
+++ b/apps/app-frontend/src/providers/download-progress.ts
@@ -0,0 +1,36 @@
+import { createContext } from '@modrinth/ui'
+import type { Ref } from 'vue'
+
+import { loading_listener } from '@/helpers/events'
+
+export interface AppDownloadProgressContext {
+	progress: Ref<number>
+	version: Ref<string | undefined>
+}
+
+/* returns unlisten function */
+export async function subscribeToDownloadProgress(
+	context: AppDownloadProgressContext,
+	version: string,
+) {
+	return await loading_listener(
+		(event: {
+			event: {
+				type: 'launcher_update'
+				version: string
+			}
+			fraction?: number
+		}) => {
+			if (event.event.type === 'launcher_update') {
+				if (!version || event.event.version === version) {
+					context.progress.value = event.fraction ?? 1.0
+					context.version.value = event.event.version
+					console.log(`Progress: ${context.progress.value} ${context.version.value}`)
+				}
+			}
+		},
+	)
+}
+
+export const [injectAppUpdateDownloadProgress, provideAppUpdateDownloadProgress] =
+	createContext<AppDownloadProgressContext>('root', 'appUpdateDownloadProgress')