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/Cargo.lock
+++ b/Cargo.lock
@@ -1388,6 +1388,21 @@ dependencies = [
 "stacker",
 ]

+[[package]]
+name = "cidre"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ebe72b7127090407349fdb577f063dc6508e5cce89d9bd21dc77c1c84f5d4703"
+dependencies = [
+ "cidre-macros",
+]
+
+[[package]]
+name = "cidre-macros"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82bc2f84c0baaa09299da3a03864491549685912c1e338a54211e00589dc1e4c"
+
 [[package]]
 name = "cityhash-rs"
 version = "1.0.1"
@@ -9026,6 +9041,7 @@ dependencies = [
 "bytes",
 "chardetng",
 "chrono",
+ "cidre",
 "daedalus",
 "dashmap",
 "data-url",
@@ -9075,7 +9091,10 @@ dependencies = [
 "url",
 "uuid 1.17.0",
 "whoami",
+ "windows",
+ "windows-core",
 "winreg 0.55.0",
+ "zbus",
 "zip",
 ]

@@ -9354,6 +9373,7 @@ dependencies = [
 "futures-io",
 "futures-sink",
 "pin-project-lite",
+ "slab",
 "tokio",
 ]

--- a/Cargo.toml
+++ b/Cargo.toml
@@ -40,6 +40,7 @@ bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
 chrono = "0.4.41"
+cidre = { version = "0.11.2", default-features = false, features = ["macos_15_0"] }
 clap = "4.5.43"
 clickhouse = "0.13.3"
 color-thief = "0.2.2"
@@ -173,9 +174,12 @@ uuid = "1.17.0"
 validator = "0.20.0"
 webp = { version = "0.3.0", default-features = false }
 whoami = "1.6.0"
+windows = "0.61.3"
+windows-core = "0.61.2"
 winreg = "0.55.0"
 woothee = "0.13.0"
 yaserde = "0.12.0"
+zbus = "5.9.0"
 zip = { version = "4.3.0", default-features = false, features = [
 	"bzip2",
 	"deflate",
--- 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')
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -223,6 +223,7 @@ fn main() {
                InlinedPlugin::new()
                    .commands(&[
                        "get_os",
+                        "is_network_metered",
                        "should_disable_mouseover",
                        "highlight_in_folder",
                        "open_path",
--- a/apps/app/icons/apple.icon/Assets/Modrinth
+++ b/apps/app/icons/apple.icon/Assets/Modrinth
@@ -0,0 +1,19 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_6205_20699)">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M196.578 126.025C200.159 112.688 200.94 98.7557 198.873 85.1028C196.806 71.4499 191.934 58.3724 184.565 46.6928C177.196 35.0132 167.488 24.9843 156.053 17.2368C144.618 9.48941 131.703 4.19112 118.12 1.67522C104.537 -0.840683 90.5797 -0.519744 77.1267 2.61785C63.6738 5.75544 51.0159 11.6418 39.9494 19.9066C28.8828 28.1715 19.647 38.636 12.8229 50.642C5.99878 62.6479 1.73402 75.9356 0.296875 89.669H17.2335C19.5541 71.3251 27.9415 54.2826 41.0629 41.2496C54.1843 28.2167 71.2869 19.941 89.653 17.7376C108.019 15.5342 126.595 19.5296 142.429 29.0887C158.263 38.6479 170.447 53.2225 177.044 70.4965L160.588 74.8982C156.908 66.0554 151.338 58.1243 144.267 51.6612C137.196 45.198 128.797 40.3593 119.658 37.4843L116.623 54.597C125.592 57.8879 133.386 63.757 139.025 71.4657C144.664 79.1743 147.896 88.3781 148.314 97.9185C148.732 107.459 146.317 116.91 141.374 125.082C136.43 133.254 129.179 139.781 120.533 143.843L125.035 160.631C138.378 155.108 149.527 145.342 156.755 132.845C163.983 120.348 166.888 105.817 165.019 91.5031L181.42 87.1296C183.151 98.0656 182.643 109.239 179.924 119.973L196.578 126.025Z"
+			fill="#1BD96A"
+		/>
+		<path
+			d="M125.797 196.578C111.561 200.398 96.6581 201.029 82.1508 198.426C67.6435 195.823 53.8902 190.049 41.8733 181.519C29.8563 172.988 19.8721 161.91 12.6337 149.076C5.39538 136.242 1.08144 121.969 0 107.276H16.9366C17.3772 111.998 18.2176 116.676 19.4489 121.256C20.7334 126.061 22.4481 130.74 24.5722 135.237L39.6458 126.194C35.2357 115.982 33.4908 104.819 34.5746 93.7491C35.6584 82.6794 39.5355 72.0657 45.8425 62.9024C52.1496 53.739 60.6804 46.3258 70.6357 41.3571C80.5911 36.3883 91.6452 34.0267 102.763 34.4934L99.7001 51.6062C92.2843 51.64 84.975 53.3723 78.3335 56.6702C71.6919 59.968 65.895 64.7436 61.3879 70.6302C56.8808 76.5167 53.7835 83.3576 52.3339 90.6273C50.8843 97.8969 51.1209 105.402 53.0257 112.566C53.4632 114.16 53.929 115.74 54.5359 117.151L73.8153 105.597L68.0428 90.2475L86.2496 71.5546L109.269 66.6028L115.889 74.8277L105.275 85.5637L96.0305 88.4699L89.4111 95.2699L92.6573 104.271C92.6573 104.271 99.2061 111.24 99.2202 111.24L108.493 108.785L115.084 101.548L129.48 96.9769L133.714 106.627L118.923 124.812L94.0264 132.67L82.8482 120.241L63.3852 131.936C68.3953 137.636 74.6712 142.083 81.7102 144.923C88.7492 147.762 96.3556 148.914 103.92 148.287L108.422 165.118C97.1879 166.584 85.7649 165.124 75.2606 160.88C64.7563 156.636 55.5269 149.752 48.4669 140.895L33.4498 149.895C42.0264 161.15 53.3399 170.026 66.315 175.679C79.2902 181.331 93.496 183.574 107.582 182.193C121.669 180.811 135.168 175.853 146.797 167.787C158.426 159.722 167.798 148.818 174.024 136.112L190.678 142.164C184.512 155.432 175.504 167.182 164.293 176.585C153.081 185.988 139.939 192.813 125.797 196.578Z"
+			fill="#1BD96A"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_6205_20699">
+			<rect width="200" height="200" fill="white" />
+		</clipPath>
+	</defs>
+</svg>
--- a/apps/app/icons/apple.icon/icon.json
+++ b/apps/app/icons/apple.icon/icon.json
@@ -0,0 +1,73 @@
+{
+	"fill": {
+		"linear-gradient": [
+			"display-p3:0.18127,0.41301,0.28212,1.00000",
+			"display-p3:0.09652,0.20392,0.15411,1.00000"
+		]
+	},
+	"groups": [
+		{
+			"blur-material": 0.5,
+			"layers": [
+				{
+					"blend-mode-specializations": [
+						{
+							"appearance": "tinted",
+							"value": "normal"
+						}
+					],
+					"fill-specializations": [
+						{
+							"value": {
+								"linear-gradient": [
+									"display-p3:0.49491,0.92226,0.57293,1.00000",
+									"display-p3:0.10588,0.85098,0.41569,1.00000"
+								]
+							}
+						},
+						{
+							"appearance": "tinted",
+							"value": "automatic"
+						}
+					],
+					"glass": true,
+					"image-name": "Modrinth logo.svg",
+					"name": "Modrinth logo",
+					"opacity-specializations": [
+						{
+							"appearance": "tinted",
+							"value": 1
+						}
+					],
+					"position": {
+						"scale": 4.1,
+						"translation-in-points": [0, 0]
+					}
+				}
+			],
+			"lighting": "individual",
+			"opacity-specializations": [
+				{
+					"value": 1
+				},
+				{
+					"appearance": "tinted",
+					"value": 1
+				}
+			],
+			"shadow": {
+				"kind": "neutral",
+				"opacity": 0.5
+			},
+			"specular": true,
+			"translucency": {
+				"enabled": true,
+				"value": 0.5
+			}
+		}
+	],
+	"supported-platforms": {
+		"circles": ["watchOS"],
+		"squares": "shared"
+	}
+}
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -5,9 +5,9 @@
 		"build": "tauri build",
 		"dev": "tauri dev",
 		"test": "cargo nextest run --all-targets --no-fail-fast",
-		"lint": "cargo fmt --check && cargo clippy --all-targets",
+		"lint": "cargo fmt --check && cargo clippy --all-targets && cargo clippy --all-targets --features updater",
 		"lint:ancillary": "prettier --check .",
-		"fix": "cargo clippy --all-targets --fix --allow-dirty && cargo fmt",
+		"fix": "cargo clippy --all-targets --fix --allow-dirty && cargo clippy --all-targets --features updater --fix --allow-dirty && cargo fmt",
 		"fix:ancillary": "prettier --write ."
 	},
 	"devDependencies": {
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -47,8 +47,12 @@ pub enum TheseusSerializableError {
    Tauri(#[from] tauri::Error),

    #[cfg(feature = "updater")]
-    #[error("Tauri updater error: {0}")]
-    TauriUpdater(#[from] tauri_plugin_updater::Error),
+    #[error("Updater error: {0}")]
+    Updater(#[from] tauri_plugin_updater::Error),
+
+    #[cfg(feature = "updater")]
+    #[error("HTTP error: {0}")]
+    Http(#[from] tauri_plugin_http::reqwest::Error),
 }

 // Generic implementation of From<T> for ErrorTypeA
@@ -106,5 +110,6 @@ impl_serialize! {
 impl_serialize! {
    IO,
    Tauri,
-    TauriUpdater,
+    Updater,
+    Http,
 }
--- a/apps/app/src/api/utils.rs
+++ b/apps/app/src/api/utils.rs
@@ -12,10 +12,11 @@ use std::path::{Path, PathBuf};
 use theseus::prelude::canonicalize;
 use url::Url;

-pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
+pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
    tauri::plugin::Builder::new("utils")
        .invoke_handler(tauri::generate_handler![
            get_os,
+            is_network_metered,
            should_disable_mouseover,
            highlight_in_folder,
            open_path,
@@ -26,6 +27,14 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
        .build()
 }

+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[allow(clippy::enum_variant_names)]
+pub enum OS {
+    Windows,
+    Linux,
+    MacOS,
+}
+
 /// Gets OS
 #[tauri::command]
 pub fn get_os() -> OS {
@@ -38,12 +47,9 @@ pub fn get_os() -> OS {
    os
 }

-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[allow(clippy::enum_variant_names)]
-pub enum OS {
-    Windows,
-    Linux,
-    MacOS,
+#[tauri::command]
+pub async fn is_network_metered() -> Result<bool> {
+    Ok(theseus::prelude::is_network_metered().await?)
 }

 // Lists active progress bars
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -14,6 +14,11 @@ mod error;
 #[cfg(target_os = "macos")]
 mod macos;

+#[cfg(feature = "updater")]
+mod updater_impl;
+#[cfg(not(feature = "updater"))]
+mod updater_impl_noop;
+
 // Should be called in launcher initialization
 #[tracing::instrument(skip_all)]
 #[tauri::command]
@@ -21,75 +26,9 @@ async fn initialize_state(app: tauri::AppHandle) -> api::Result<()> {
    tracing::info!("Initializing app event state...");
    theseus::EventState::init(app.clone()).await?;

-    #[cfg(feature = "updater")]
-    'updater: {
-        if env::var("MODRINTH_EXTERNAL_UPDATE_PROVIDER").is_ok() {
-            State::init().await?;
-            break 'updater;
-        }
+    tracing::info!("Initializing app state...");
+    State::init().await?;

-        use tauri_plugin_updater::UpdaterExt;
-
-        let updater = app.updater_builder().build()?;
-
-        let update_fut = updater.check();
-
-        tracing::info!("Initializing app state...");
-        State::init().await?;
-
-        let check_bar = theseus::init_loading(
-            theseus::LoadingBarType::CheckingForUpdates,
-            1.0,
-            "Checking for updates...",
-        )
-        .await?;
-
-        tracing::info!("Checking for updates...");
-        let update = update_fut.await;
-
-        drop(check_bar);
-
-        if let Some(update) = update.ok().flatten() {
-            tracing::info!("Update found: {:?}", update.download_url);
-            let loader_bar_id = theseus::init_loading(
-                theseus::LoadingBarType::LauncherUpdate {
-                    version: update.version.clone(),
-                    current_version: update.current_version.clone(),
-                },
-                1.0,
-                "Updating Modrinth App...",
-            )
-            .await?;
-
-            // 100 MiB
-            const DEFAULT_CONTENT_LENGTH: u64 = 1024 * 1024 * 100;
-
-            update
-                .download_and_install(
-                    |chunk_length, content_length| {
-                        let _ = theseus::emit_loading(
-                            &loader_bar_id,
-                            (chunk_length as f64)
-                                / (content_length
-                                    .unwrap_or(DEFAULT_CONTENT_LENGTH)
-                                    as f64),
-                            None,
-                        );
-                    },
-                    || {},
-                )
-                .await?;
-
-            app.restart();
-        }
-    }
-
-    #[cfg(not(feature = "updater"))]
-    {
-        State::init().await?;
-    }
-
-    tracing::info!("Finished checking for updates!");
    let state = State::get().await?;
    app.asset_protocol_scope()
        .allow_directory(state.directories.caches_dir(), true)?;
@@ -125,6 +64,17 @@ fn is_dev() -> bool {
    cfg!(debug_assertions)
 }

+#[tauri::command]
+fn are_updates_enabled() -> bool {
+    cfg!(feature = "updater")
+}
+
+#[cfg(feature = "updater")]
+pub use updater_impl::*;
+
+#[cfg(not(feature = "updater"))]
+pub use updater_impl_noop::*;
+
 // Toggles decorations
 #[tauri::command]
 async fn toggle_decorations(b: bool, window: tauri::Window) -> api::Result<()> {
@@ -166,7 +116,17 @@ fn main() {

    #[cfg(feature = "updater")]
    {
-        builder = builder.plugin(tauri_plugin_updater::Builder::new().build());
+        use tauri_plugin_http::reqwest::header::{HeaderValue, USER_AGENT};
+        use theseus::LAUNCHER_USER_AGENT;
+        builder = builder.plugin(
+            tauri_plugin_updater::Builder::new()
+                .header(
+                    USER_AGENT,
+                    HeaderValue::from_str(LAUNCHER_USER_AGENT).unwrap(),
+                )
+                .unwrap()
+                .build(),
+        );
    }

    builder = builder
@@ -266,9 +226,14 @@ fn main() {
        .plugin(api::ads::init())
        .plugin(api::friends::init())
        .plugin(api::worlds::init())
+        .manage(PendingUpdateData::default())
        .invoke_handler(tauri::generate_handler![
            initialize_state,
            is_dev,
+            are_updates_enabled,
+            get_update_size,
+            enqueue_update_for_installation,
+            remove_enqueued_update,
            toggle_decorations,
            show_window,
            restart_app,
@@ -280,8 +245,41 @@ fn main() {
    match app {
        Ok(app) => {
            app.run(|app, event| {
-                #[cfg(not(target_os = "macos"))]
+                #[cfg(not(any(feature = "updater", target_os = "macos")))]
                drop((app, event));
+
+                #[cfg(feature = "updater")]
+                if matches!(event, tauri::RunEvent::Exit) {
+                    let update_data = app.state::<PendingUpdateData>().inner();
+                    if let Some((update, data)) = &*update_data.0.lock().unwrap() {
+                        fn set_changelog_toast(version: Option<String>) {
+                            let toast_result: theseus::Result<()> = tauri::async_runtime::block_on(async move {
+                                let mut settings = settings::get().await?;
+                                settings.pending_update_toast_for_version = version;
+                                settings::set(settings).await?;
+                                Ok(())
+                            });
+                            if let Err(e) = toast_result {
+                                tracing::warn!("Failed to set pending_update_toast: {e}")
+                            }
+                        }
+
+                        set_changelog_toast(Some(update.version.clone()));
+                        if let Err(e) = update.install(data) {
+                            tracing::error!("Error while updating: {e}");
+                            set_changelog_toast(None);
+
+                            DialogBuilder::message()
+                                .set_level(MessageLevel::Error)
+                                .set_title("Update error")
+                                .set_text(format!("Failed to install update due to an error:\n{e}"))
+                                .alert()
+                                .show()
+                                .unwrap();
+                        }
+                    }
+                }
+
                #[cfg(target_os = "macos")]
                if let tauri::RunEvent::Opened { urls } = event {
                    tracing::info!("Handling webview open {urls:?}");
@@ -309,6 +307,8 @@ fn main() {
            });
        }
        Err(e) => {
+            tracing::error!("Error while running tauri application: {:?}", e);
+
            #[cfg(target_os = "windows")]
            {
                // tauri doesn't expose runtime errors, so matching a string representation seems like the only solution
@@ -337,7 +337,6 @@ fn main() {
                .show()
                .unwrap();

-            tracing::error!("Error while running tauri application: {:?}", e);
            panic!("{1}: {:?}", e, "error while running tauri application")
        }
    }
--- a/apps/app/src/updater_impl.rs
+++ b/apps/app/src/updater_impl.rs
@@ -0,0 +1,121 @@
+use crate::api::Result;
+use std::sync::{Arc, Mutex};
+use tauri::http::HeaderValue;
+use tauri::http::header::ACCEPT;
+use tauri::{Manager, ResourceId, Runtime, Webview};
+use tauri_plugin_http::reqwest;
+use tauri_plugin_http::reqwest::ClientBuilder;
+use tauri_plugin_updater::Error;
+use tauri_plugin_updater::Update;
+use theseus::{
+    LAUNCHER_USER_AGENT, LoadingBarType, emit_loading, init_loading,
+};
+use tokio::time::Instant;
+
+#[derive(Default)]
+pub struct PendingUpdateData(pub Mutex<Option<(Arc<Update>, Vec<u8>)>>);
+
+// Reimplementation of Update::download mostly, minus the actual download part
+#[tauri::command]
+pub async fn get_update_size<R: Runtime>(
+    webview: Webview<R>,
+    rid: ResourceId,
+) -> Result<Option<u64>> {
+    let update = webview.resources_table().get::<Update>(rid)?;
+
+    let mut headers = update.headers.clone();
+    if !headers.contains_key(ACCEPT) {
+        headers.insert(
+            ACCEPT,
+            HeaderValue::from_static("application/octet-stream"),
+        );
+    }
+
+    let mut request = ClientBuilder::new().user_agent(LAUNCHER_USER_AGENT);
+    if let Some(timeout) = update.timeout {
+        request = request.timeout(timeout);
+    }
+    if let Some(ref proxy) = update.proxy {
+        let proxy = reqwest::Proxy::all(proxy.as_str())?;
+        request = request.proxy(proxy);
+    }
+    let response = request
+        .build()?
+        .head(update.download_url.clone())
+        .headers(headers)
+        .send()
+        .await?;
+
+    if !response.status().is_success() {
+        return Err(Error::Network(format!(
+            "Download request failed with status: {}",
+            response.status()
+        ))
+        .into());
+    }
+
+    let content_length = response
+        .headers()
+        .get("Content-Length")
+        .and_then(|value| value.to_str().ok())
+        .and_then(|value| value.parse().ok());
+
+    Ok(content_length)
+}
+
+#[tauri::command]
+pub async fn enqueue_update_for_installation<R: Runtime>(
+    webview: Webview<R>,
+    rid: ResourceId,
+) -> Result<()> {
+    let pending_data = webview.state::<PendingUpdateData>().inner();
+
+    let update = webview.resources_table().get::<Update>(rid)?;
+
+    let progress = init_loading(
+        LoadingBarType::LauncherUpdate {
+            version: update.version.clone(),
+            current_version: update.current_version.clone(),
+        },
+        1.0,
+        "Downloading update...",
+    )
+    .await?;
+
+    let download_start = Instant::now();
+    let update_data = update
+        .download(
+            |chunk_size, total_size| {
+                let Some(total_size) = total_size else {
+                    return;
+                };
+                if let Err(e) = emit_loading(
+                    &progress,
+                    chunk_size as f64 / total_size as f64,
+                    None,
+                ) {
+                    tracing::error!(
+                        "Failed to update download progress bar: {e}"
+                    );
+                }
+            },
+            || {},
+        )
+        .await?;
+    let download_duration = download_start.elapsed();
+    tracing::info!("Downloaded update in {download_duration:?}");
+
+    pending_data
+        .0
+        .lock()
+        .unwrap()
+        .replace((update, update_data));
+
+    Ok(())
+}
+
+#[tauri::command]
+pub fn remove_enqueued_update<R: Runtime>(webview: Webview<R>) {
+    let pending_data = webview.state::<PendingUpdateData>().inner();
+    pending_data.0.lock().unwrap().take();
+}
--- a/apps/app/src/updater_impl_noop.rs
+++ b/apps/app/src/updater_impl_noop.rs
@@ -0,0 +1,26 @@
+use crate::api::Result;
+use theseus::ErrorKind;
+
+#[derive(Default)]
+pub struct PendingUpdateData(());
+
+#[tauri::command]
+pub fn get_update_size() -> Result<()> {
+    updates_are_disabled()
+}
+
+#[tauri::command]
+pub fn enqueue_update_for_installation() -> Result<()> {
+    updates_are_disabled()
+}
+
+fn updates_are_disabled() -> Result<()> {
+    let error: theseus::Error = ErrorKind::OtherError(
+        "Updates are disabled in this build.".to_string(),
+    )
+    .into();
+    Err(error.into())
+}
+
+#[tauri::command]
+pub fn remove_enqueued_update() {}
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -10,7 +10,7 @@
 		"postinstall": "nuxi prepare",
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",
-		"intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+		"intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
 		"test": "nuxi build"
 	},
 	"devDependencies": {
--- a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
@@ -1,36 +1,7 @@
 <template>
 	<NewModal ref="mrpackModal" header="Uploading mrpack" :closable="!isLoading" @show="onShow">
 		<div class="flex flex-col gap-4 md:w-[600px]">
-			<Transition
-				enter-active-class="transition-all duration-300 ease-out"
-				enter-from-class="opacity-0 max-h-0"
-				enter-to-class="opacity-100 max-h-20"
-				leave-active-class="transition-all duration-200 ease-in"
-				leave-from-class="opacity-100 max-h-20"
-				leave-to-class="opacity-0 max-h-0"
-			>
-				<div v-if="isLoading" class="w-full">
-					<div class="mb-2 flex justify-between text-sm">
-						<Transition name="phrase-fade" mode="out-in">
-							<span :key="currentPhrase" class="text-lg font-medium text-contrast">{{
-								currentPhrase
-							}}</span>
-						</Transition>
-						<div class="flex flex-col items-end">
-							<span class="text-secondary">{{ Math.round(uploadProgress) }}%</span>
-							<span class="text-xs text-secondary"
-								>{{ formatBytes(uploadedBytes) }} / {{ formatBytes(totalBytes) }}</span
-							>
-						</div>
-					</div>
-					<div class="h-2 w-full rounded-full bg-divider">
-						<div
-							class="h-2 animate-pulse rounded-full bg-brand transition-all duration-300 ease-out"
-							:style="{ width: `${uploadProgress}%` }"
-						></div>
-					</div>
-				</div>
-			</Transition>
+			<AppearingProgressBar :max-value="totalBytes" :current-value="uploadedBytes" />

 			<Transition
 				enter-active-class="transition-all duration-300 ease-out"
@@ -151,8 +122,14 @@ import {
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { BackupWarning, ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
-import { formatBytes, ModrinthServersFetchError } from '@modrinth/utils'
+import {
+	AppearingProgressBar,
+	BackupWarning,
+	ButtonStyled,
+	injectNotificationManager,
+	NewModal,
+} from '@modrinth/ui'
+import { ModrinthServersFetchError } from '@modrinth/utils'
 import { onMounted, onUnmounted } from 'vue'

 import type { ModrinthServer } from '~/composables/servers/modrinth-servers'
@@ -190,50 +167,9 @@ const hardReset = ref(false)
 const isLoading = ref(false)
 const loadingServerCheck = ref(false)
 const mrpackFile = ref<File | null>(null)
-const uploadProgress = ref(0)
 const uploadedBytes = ref(0)
 const totalBytes = ref(0)

-const uploadPhrases = [
-	'Removing Herobrine...',
-	'Feeding parrots...',
-	'Teaching villagers new trades...',
-	'Convincing creepers to be friendly...',
-	'Polishing diamonds...',
-	'Training wolves to fetch...',
-	'Building pixel art...',
-	'Explaining redstone to beginners...',
-	'Collecting all the cats...',
-	'Negotiating with endermen...',
-	'Planting suspicious stew ingredients...',
-	'Calibrating TNT blast radius...',
-	'Teaching chickens to fly...',
-	'Sorting inventory alphabetically...',
-	'Convincing iron golems to smile...',
-]
-
-const currentPhrase = ref('Uploading...')
-let phraseInterval: NodeJS.Timeout | null = null
-const usedPhrases = ref(new Set<number>())
-
-const getNextPhrase = () => {
-	if (usedPhrases.value.size >= uploadPhrases.length) {
-		const currentPhraseIndex = uploadPhrases.indexOf(currentPhrase.value)
-		usedPhrases.value.clear()
-		if (currentPhraseIndex !== -1) {
-			usedPhrases.value.add(currentPhraseIndex)
-		}
-	}
-	const availableIndices = uploadPhrases
-		.map((_, index) => index)
-		.filter((index) => !usedPhrases.value.has(index))
-
-	const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)]
-	usedPhrases.value.add(randomIndex)
-
-	return uploadPhrases[randomIndex]
-}
-
 const isDangerous = computed(() => hardReset.value)
 const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value)

@@ -261,31 +197,17 @@ const handleReinstall = async () => {
 	}

 	isLoading.value = true
-	uploadProgress.value = 0
-	uploadProgress.value = 0
 	uploadedBytes.value = 0
 	totalBytes.value = mrpackFile.value.size

-	currentPhrase.value = getNextPhrase()
-	phraseInterval = setInterval(() => {
-		currentPhrase.value = getNextPhrase()
-	}, 4500)
-
 	const { onProgress, promise } = props.server.general.reinstallFromMrpack(
 		mrpackFile.value,
 		hardReset.value,
 	)

-	onProgress(({ loaded, total, progress }) => {
-		uploadProgress.value = progress
+	onProgress(({ loaded, total }) => {
 		uploadedBytes.value = loaded
 		totalBytes.value = total
-
-		if (phraseInterval && progress >= 100) {
-			clearInterval(phraseInterval)
-			phraseInterval = null
-			currentPhrase.value = 'Installing modpack...'
-		}
 	})

 	try {
@@ -316,10 +238,6 @@ const handleReinstall = async () => {
 		}
 	} finally {
 		isLoading.value = false
-		if (phraseInterval) {
-			clearInterval(phraseInterval)
-			phraseInterval = null
-		}
 	}
 }
 const onShow = () => {
@@ -328,15 +246,8 @@ const onShow = () => {
 	loadingServerCheck.value = false
 	isLoading.value = false
 	mrpackFile.value = null
-	uploadProgress.value = 0
 	uploadedBytes.value = 0
 	totalBytes.value = 0
-	currentPhrase.value = 'Uploading...'
-	usedPhrases.value.clear()
-	if (phraseInterval) {
-		clearInterval(phraseInterval)
-		phraseInterval = null
-	}
 }

 const show = () => mrpackModal.value?.show()
@@ -349,14 +260,4 @@ defineExpose({ show, hide })
 .stylized-toggle:checked::after {
 	background: var(--color-accent-contrast) !important;
 }
-
-.phrase-fade-enter-active,
-.phrase-fade-leave-active {
-	transition: opacity 0.3s ease;
-}
-
-.phrase-fade-enter-from,
-.phrase-fade-leave-to {
-	opacity: 0;
-}
 </style>
--- a/apps/labrinth/Cargo.toml
+++ b/apps/labrinth/Cargo.toml
@@ -35,12 +35,7 @@ paste.workspace = true

 meilisearch-sdk = { workspace = true, features = ["reqwest"] }
 rust-s3.workspace = true
-reqwest = { workspace = true, features = [
-	"http2",
-	"rustls-tls-webpki-roots",
-	"json",
-	"multipart",
-] }
+reqwest = { workspace = true, features = ["http2", "rustls-tls-webpki-roots", "json", "multipart"] }
 hyper-rustls.workspace = true
 hyper-util.workspace = true

@@ -90,10 +85,7 @@ sqlx = { workspace = true, features = [
 	"rust_decimal",
 	"json",
 ] }
-rust_decimal = { workspace = true, features = [
-	"serde-with-float",
-	"serde-with-str",
-] }
+rust_decimal = { workspace = true, features = ["serde-with-float", "serde-with-str"] }
 redis = { workspace = true, features = ["tokio-comp", "ahash", "r2d2"] }
 deadpool-redis.workspace = true
 clickhouse = { workspace = true, features = ["uuid", "time"] }
@@ -132,12 +124,7 @@ lettre.workspace = true

 rust_iso3166.workspace = true

-async-stripe = { workspace = true, features = [
-	"billing",
-	"checkout",
-	"connect",
-	"webhook-events",
-] }
+async-stripe = { workspace = true, features = ["billing", "checkout", "connect", "webhook-events"] }
 rusty-money.workspace = true
 json-patch.workspace = true

--- a/packages/app-lib/.sqlx/query-6e3fa492c085ebb8e7280dd4d55cdcf73da199ea6ac05ee3ee798ece80d877cf.json
+++ b/packages/app-lib/.sqlx/query-6e3fa492c085ebb8e7280dd4d55cdcf73da199ea6ac05ee3ee798ece80d877cf.json
@@ -41,7 +41,7 @@
      {
        "name": "display_claims!: serde_json::Value",
        "ordinal": 7,
-        "type_info": "Null"
+        "type_info": "Text"
      }
    ],
    "parameters": {
--- a/packages/app-lib/.sqlx/query-7dc83d7ffa3d583fc5ffaf13811a8dab4d0b9ded6200f827b9de7ac32e5318d5.json
+++ b/packages/app-lib/.sqlx/query-7dc83d7ffa3d583fc5ffaf13811a8dab4d0b9ded6200f827b9de7ac32e5318d5.json
@@ -1,6 +1,6 @@
 {
  "db_name": "SQLite",
-  "query": "\n            SELECT\n                max_concurrent_writes, max_concurrent_downloads,\n                theme, default_page, collapsed_navigation, hide_nametag_skins_page, advanced_rendering, native_decorations,\n                discord_rpc, developer_mode, telemetry, personalized_ads,\n                onboarded,\n                json(extra_launch_args) extra_launch_args, json(custom_env_vars) custom_env_vars,\n                mc_memory_max, mc_force_fullscreen, mc_game_resolution_x, mc_game_resolution_y, hide_on_process_start,\n                hook_pre_launch, hook_wrapper, hook_post_exit,\n                custom_dir, prev_custom_dir, migrated, json(feature_flags) feature_flags, toggle_sidebar\n            FROM settings\n            ",
+  "query": "\n            SELECT\n                max_concurrent_writes, max_concurrent_downloads,\n                theme, default_page, collapsed_navigation, hide_nametag_skins_page, advanced_rendering, native_decorations,\n                discord_rpc, developer_mode, telemetry, personalized_ads,\n                onboarded,\n                json(extra_launch_args) extra_launch_args, json(custom_env_vars) custom_env_vars,\n                mc_memory_max, mc_force_fullscreen, mc_game_resolution_x, mc_game_resolution_y, hide_on_process_start,\n                hook_pre_launch, hook_wrapper, hook_post_exit,\n                custom_dir, prev_custom_dir, migrated, json(feature_flags) feature_flags, toggle_sidebar,\n                skipped_update, pending_update_toast_for_version, auto_download_updates\n            FROM settings\n            ",
  "describe": {
    "columns": [
      {
@@ -142,6 +142,21 @@
        "name": "toggle_sidebar",
        "ordinal": 27,
        "type_info": "Integer"
+      },
+      {
+        "name": "skipped_update",
+        "ordinal": 28,
+        "type_info": "Text"
+      },
+      {
+        "name": "pending_update_toast_for_version",
+        "ordinal": 29,
+        "type_info": "Text"
+      },
+      {
+        "name": "auto_download_updates",
+        "ordinal": 30,
+        "type_info": "Integer"
      }
    ],
    "parameters": {
@@ -175,8 +190,11 @@
      true,
      false,
      null,
-      false
+      false,
+      true,
+      true,
+      true
    ]
  },
-  "hash": "5193f519f021b2e7013cdb67a6e1a31ae4bd7532d02f8b00b43d5645351941ca"
+  "hash": "7dc83d7ffa3d583fc5ffaf13811a8dab4d0b9ded6200f827b9de7ac32e5318d5"
 }
--- a/packages/app-lib/.sqlx/query-eb95fac3043d0ffd10caef69cc469474cc5c0d36cc0698c4cc0852da81fed158.json
+++ b/packages/app-lib/.sqlx/query-eb95fac3043d0ffd10caef69cc469474cc5c0d36cc0698c4cc0852da81fed158.json
@@ -1,12 +1,12 @@
 {
  "db_name": "SQLite",
-  "query": "\n            UPDATE settings\n            SET\n                max_concurrent_writes = $1,\n                max_concurrent_downloads = $2,\n\n                theme = $3,\n                default_page = $4,\n                collapsed_navigation = $5,\n                advanced_rendering = $6,\n                native_decorations = $7,\n\n                discord_rpc = $8,\n                developer_mode = $9,\n                telemetry = $10,\n                personalized_ads = $11,\n\n                onboarded = $12,\n\n                extra_launch_args = jsonb($13),\n                custom_env_vars = jsonb($14),\n                mc_memory_max = $15,\n                mc_force_fullscreen = $16,\n                mc_game_resolution_x = $17,\n                mc_game_resolution_y = $18,\n                hide_on_process_start = $19,\n\n                hook_pre_launch = $20,\n                hook_wrapper = $21,\n                hook_post_exit = $22,\n\n                custom_dir = $23,\n                prev_custom_dir = $24,\n                migrated = $25,\n\n                toggle_sidebar = $26,\n                feature_flags = $27,\n                hide_nametag_skins_page = $28\n            ",
+  "query": "\n            UPDATE settings\n            SET\n                max_concurrent_writes = $1,\n                max_concurrent_downloads = $2,\n\n                theme = $3,\n                default_page = $4,\n                collapsed_navigation = $5,\n                advanced_rendering = $6,\n                native_decorations = $7,\n\n                discord_rpc = $8,\n                developer_mode = $9,\n                telemetry = $10,\n                personalized_ads = $11,\n\n                onboarded = $12,\n\n                extra_launch_args = jsonb($13),\n                custom_env_vars = jsonb($14),\n                mc_memory_max = $15,\n                mc_force_fullscreen = $16,\n                mc_game_resolution_x = $17,\n                mc_game_resolution_y = $18,\n                hide_on_process_start = $19,\n\n                hook_pre_launch = $20,\n                hook_wrapper = $21,\n                hook_post_exit = $22,\n\n                custom_dir = $23,\n                prev_custom_dir = $24,\n                migrated = $25,\n\n                toggle_sidebar = $26,\n                feature_flags = $27,\n                hide_nametag_skins_page = $28,\n\n                skipped_update = $29,\n                pending_update_toast_for_version = $30,\n                auto_download_updates = $31\n            ",
  "describe": {
    "columns": [],
    "parameters": {
-      "Right": 28
+      "Right": 31
    },
    "nullable": []
  },
-  "hash": "3613473fb4d836ee0fb3c292e6bf5e50912064c29ebf1a1e5ead79c44c37e64c"
+  "hash": "eb95fac3043d0ffd10caef69cc469474cc5c0d36cc0698c4cc0852da81fed158"
 }
--- a/packages/app-lib/Cargo.toml
+++ b/packages/app-lib/Cargo.toml
@@ -80,7 +80,7 @@ tokio = { workspace = true, features = [
 	"macros",
 	"process",
 ] }
-tokio-util = { workspace = true, features = ["compat", "io", "io-util"] }
+tokio-util = { workspace = true, features = ["compat", "io", "io-util", "time"] }
 async-recursion.workspace = true
 fs4 = { workspace = true, features = ["tokio"] }
 async-walkdir.workspace = true
@@ -109,12 +109,19 @@ sqlx = { workspace = true, features = [
 ] }

 quartz_nbt = { workspace = true, features = ["serde"] }
+
 hickory-resolver.workspace = true
+zbus.workspace = true

 ariadne.workspace = true

 [target.'cfg(windows)'.dependencies]
 winreg.workspace = true
+windows = { workspace = true, features = ["Networking_Connectivity"] }
+windows-core.workspace = true
+
+[target.'cfg(target_os = "macos")'.dependencies]
+cidre = { workspace = true, features = ["nw", "blocks"] }

 [build-dependencies]
 dotenvy.workspace = true
--- a/packages/app-lib/migrations/20250815164653_updater-settings.sql
+++ b/packages/app-lib/migrations/20250815164653_updater-settings.sql
@@ -0,0 +1,6 @@
+ALTER TABLE settings
+ADD COLUMN skipped_update TEXT NULL;
+ALTER TABLE settings
+ADD COLUMN pending_update_toast_for_version TEXT NULL;
+ALTER TABLE settings
+ADD COLUMN auto_download_updates INT NULL;
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -37,7 +37,7 @@ pub mod prelude {
        settings,
        util::{
            io::{IOError, canonicalize},
-            network::tcp_listen_any_loopback,
+            network::{is_network_metered, tcp_listen_any_loopback},
        },
    };
 }
--- a/packages/app-lib/src/error.rs
+++ b/packages/app-lib/src/error.rs
@@ -166,6 +166,13 @@ pub enum ErrorKind {

    #[error("RPC error: {0}")]
    RpcError(String),
+
+    #[cfg(windows)]
+    #[error("Windows error: {0}")]
+    WindowsError(#[from] windows_core::Error),
+
+    #[error("zbus error: {0}")]
+    ZbusError(#[from] zbus::Error),
 }

 #[derive(Debug)]
--- a/packages/app-lib/src/event/mod.rs
+++ b/packages/app-lib/src/event/mod.rs
@@ -176,7 +176,6 @@ pub enum LoadingBarType {
        import_location: PathBuf,
        profile_name: String,
    },
-    CheckingForUpdates,
    LauncherUpdate {
        version: String,
        current_version: String,
--- a/packages/app-lib/src/lib.rs
+++ b/packages/app-lib/src/lib.rs
@@ -25,3 +25,9 @@ pub use event::{
 };
 pub use logger::start_logger;
 pub use state::State;
+
+pub const LAUNCHER_USER_AGENT: &str = concat!(
+    "modrinth/theseus/",
+    env!("CARGO_PKG_VERSION"),
+    " (support@modrinth.com)"
+);
--- a/packages/app-lib/src/logger.rs
+++ b/packages/app-lib/src/logger.rs
@@ -25,12 +25,11 @@ pub fn start_logger() -> Option<()> {
        .unwrap_or_else(|_| {
            tracing_subscriber::EnvFilter::new("theseus=info,theseus_gui=info")
        });
-    let subscriber = tracing_subscriber::registry()
+    tracing_subscriber::registry()
        .with(tracing_subscriber::fmt::layer())
        .with(filter)
-        .with(tracing_error::ErrorLayer::default());
-    tracing::subscriber::set_global_default(subscriber)
-        .expect("setting default subscriber failed");
+        .with(tracing_error::ErrorLayer::default())
+        .init();
    Some(())
 }

@@ -76,7 +75,7 @@ pub fn start_logger() -> Option<()> {
    let filter = tracing_subscriber::EnvFilter::try_from_default_env()
        .unwrap_or_else(|_| tracing_subscriber::EnvFilter::new("theseus=info"));

-    let subscriber = tracing_subscriber::registry()
+    tracing_subscriber::registry()
        .with(
            tracing_subscriber::fmt::layer()
                .with_writer(file)
@@ -84,10 +83,8 @@ pub fn start_logger() -> Option<()> {
                .with_timer(ChronoLocal::rfc_3339()),
        )
        .with(filter)
-        .with(tracing_error::ErrorLayer::default());
-
-    tracing::subscriber::set_global_default(subscriber)
-        .expect("Setting default subscriber failed");
+        .with(tracing_error::ErrorLayer::default())
+        .init();

    Some(())
 }
--- a/packages/app-lib/src/state/friends.rs
+++ b/packages/app-lib/src/state/friends.rs
@@ -1,4 +1,5 @@
 use crate::ErrorKind;
+use crate::LAUNCHER_USER_AGENT;
 use crate::data::ModrinthCredentials;
 use crate::event::FriendPayload;
 use crate::event::emit::emit_friend;
@@ -82,13 +83,9 @@ impl FriendsSocket {
            )
            .into_client_request()?;

-            let user_agent = format!(
-                "modrinth/theseus/{} (support@modrinth.com)",
-                env!("CARGO_PKG_VERSION")
-            );
            request.headers_mut().insert(
                "User-Agent",
-                HeaderValue::from_str(&user_agent).unwrap(),
+                HeaderValue::from_str(LAUNCHER_USER_AGENT).unwrap(),
            );

            let res = connect_async(request).await;
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -38,6 +38,10 @@ pub struct Settings {

    pub developer_mode: bool,
    pub feature_flags: HashMap<FeatureFlag, bool>,
+
+    pub skipped_update: Option<String>,
+    pub pending_update_toast_for_version: Option<String>,
+    pub auto_download_updates: Option<bool>,
 }

 #[derive(Serialize, Deserialize, Debug, Clone, Copy, Eq, Hash, PartialEq)]
@@ -63,7 +67,8 @@ impl Settings {
                json(extra_launch_args) extra_launch_args, json(custom_env_vars) custom_env_vars,
                mc_memory_max, mc_force_fullscreen, mc_game_resolution_x, mc_game_resolution_y, hide_on_process_start,
                hook_pre_launch, hook_wrapper, hook_post_exit,
-                custom_dir, prev_custom_dir, migrated, json(feature_flags) feature_flags, toggle_sidebar
+                custom_dir, prev_custom_dir, migrated, json(feature_flags) feature_flags, toggle_sidebar,
+                skipped_update, pending_update_toast_for_version, auto_download_updates
            FROM settings
            "
        )
@@ -117,6 +122,10 @@ impl Settings {
                .as_ref()
                .and_then(|x| serde_json::from_str(x).ok())
                .unwrap_or_default(),
+            skipped_update: res.skipped_update,
+            pending_update_toast_for_version: res
+                .pending_update_toast_for_version,
+            auto_download_updates: res.auto_download_updates.map(|x| x == 1),
        })
    }

@@ -170,7 +179,11 @@ impl Settings {

                toggle_sidebar = $26,
                feature_flags = $27,
-                hide_nametag_skins_page = $28
+                hide_nametag_skins_page = $28,
+
+                skipped_update = $29,
+                pending_update_toast_for_version = $30,
+                auto_download_updates = $31
            ",
            max_concurrent_writes,
            max_concurrent_downloads,
@@ -199,7 +212,10 @@ impl Settings {
            self.migrated,
            self.toggle_sidebar,
            feature_flags,
-            self.hide_nametag_skins_page
+            self.hide_nametag_skins_page,
+            self.skipped_update,
+            self.pending_update_toast_for_version,
+            self.auto_download_updates,
        )
        .execute(exec)
        .await?;
--- a/packages/app-lib/src/util/fetch.rs
+++ b/packages/app-lib/src/util/fetch.rs
@@ -1,6 +1,7 @@
 //! Functions for fetching information from the Internet
 use super::io::{self, IOError};
 use crate::ErrorKind;
+use crate::LAUNCHER_USER_AGENT;
 use crate::event::LoadingBarId;
 use crate::event::emit::emit_loading;
 use bytes::Bytes;
@@ -20,11 +21,8 @@ pub struct FetchSemaphore(pub Semaphore);

 pub static REQWEST_CLIENT: LazyLock<reqwest::Client> = LazyLock::new(|| {
    let mut headers = reqwest::header::HeaderMap::new();
-    let header = reqwest::header::HeaderValue::from_str(&format!(
-        "modrinth/theseus/{} (support@modrinth.com)",
-        env!("CARGO_PKG_VERSION")
-    ))
-    .unwrap();
+    let header =
+        reqwest::header::HeaderValue::from_str(LAUNCHER_USER_AGENT).unwrap();
    headers.insert(reqwest::header::USER_AGENT, header);
    reqwest::Client::builder()
        .tcp_keepalive(Some(time::Duration::from_secs(10)))
--- a/packages/app-lib/src/util/network.rs
+++ b/packages/app-lib/src/util/network.rs
@@ -1,3 +1,4 @@
+use crate::Result;
 use std::io;
 use std::net::{IpAddr, Ipv4Addr, Ipv6Addr, SocketAddr};
 use tokio::net::TcpListener;
@@ -15,3 +16,78 @@ pub async fn tcp_listen_any_loopback() -> io::Result<TcpListener> {

    TcpListener::bind(ANY_LOOPBACK_SOCKET).await
 }
+
+#[cfg(windows)]
+pub async fn is_network_metered() -> Result<bool> {
+    use windows::Networking::Connectivity::{
+        NetworkCostType, NetworkInformation,
+    };
+
+    let cost_type = NetworkInformation::GetInternetConnectionProfile()?
+        .GetConnectionCost()?
+        .NetworkCostType()?;
+    Ok(matches!(
+        cost_type,
+        NetworkCostType::Fixed | NetworkCostType::Variable
+    ))
+}
+
+#[cfg(target_os = "macos")]
+pub async fn is_network_metered() -> Result<bool> {
+    use crate::ErrorKind;
+    use cidre::dispatch::Queue;
+    use cidre::nw::PathMonitor;
+    use std::time::Duration;
+    use tokio::sync::mpsc;
+    use tokio_util::future::FutureExt;
+
+    let (sender, mut receiver) = mpsc::channel(1);
+
+    let queue = Queue::new();
+    let mut monitor = PathMonitor::new();
+    monitor.set_queue(&queue);
+    monitor.set_update_handler(move |path| {
+        let _ = sender.try_send(path.is_constrained() || path.is_expensive());
+    });
+
+    monitor.start();
+    let result = receiver
+        .recv()
+        .timeout(Duration::from_millis(100))
+        .await
+        .ok()
+        .flatten();
+    monitor.cancel();
+
+    result.ok_or_else(|| {
+        ErrorKind::OtherError(
+            "NWPathMonitor didn't provide an NWPath in time".to_string(),
+        )
+        .into()
+    })
+}
+
+#[cfg(target_os = "linux")]
+pub async fn is_network_metered() -> Result<bool> {
+    // Thanks to https://github.com/Hakanbaban53/rclone-manager for showing how to do this
+    use zbus::{Connection, Proxy};
+
+    let connection = Connection::system().await?;
+    let proxy = Proxy::new(
+        &connection,
+        "org.freedesktop.NetworkManager",
+        "/org/freedesktop/NetworkManager",
+        "org.freedesktop.NetworkManager",
+    )
+    .await?;
+    let metered = proxy.get_property("Metered").await?;
+    Ok(matches!(metered, 1 | 3))
+}
+
+#[cfg(not(any(windows, target_os = "macos", target_os = "linux")))]
+pub async fn is_network_metered() -> Result<bool> {
+    tracing::warn!(
+        "is_network_metered called on unsupported platform. Assuming unmetered."
+    );
+    Ok(false)
+}
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -136,6 +136,7 @@ import _RadioButtonIcon from './icons/radio-button.svg?component'
 import _RadioButtonCheckedIcon from './icons/radio-button-checked.svg?component'
 import _ReceiptTextIcon from './icons/receipt-text.svg?component'
 import _RedoIcon from './icons/redo.svg?component'
+import _RefreshCwIcon from './icons/refresh-cw.svg?component'
 import _ReplyIcon from './icons/reply.svg?component'
 import _ReportIcon from './icons/report.svg?component'
 import _RestoreIcon from './icons/restore.svg?component'
@@ -335,6 +336,7 @@ export const RadioButtonCheckedIcon = _RadioButtonCheckedIcon
 export const RadioButtonIcon = _RadioButtonIcon
 export const ReceiptTextIcon = _ReceiptTextIcon
 export const RedoIcon = _RedoIcon
+export const RefreshCwIcon = _RefreshCwIcon
 export const ReplyIcon = _ReplyIcon
 export const ReportIcon = _ReportIcon
 export const RestoreIcon = _RestoreIcon
--- a/packages/assets/icons/refresh-cw.svg
+++ b/packages/assets/icons/refresh-cw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw-icon lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
--- a/packages/ui/src/components/base/AppearingProgressBar.vue
+++ b/packages/ui/src/components/base/AppearingProgressBar.vue
@@ -0,0 +1,140 @@
+<template>
+	<Transition
+		enter-active-class="transition-all duration-300 ease-out"
+		enter-from-class="opacity-0 max-h-0"
+		enter-to-class="opacity-100 max-h-20"
+		leave-active-class="transition-all duration-200 ease-in"
+		leave-from-class="opacity-100 max-h-20"
+		leave-to-class="opacity-0 max-h-0"
+	>
+		<div v-if="isVisible" class="w-full">
+			<div class="mb-2 flex justify-between text-sm">
+				<Transition name="phrase-fade" mode="out-in">
+					<span :key="currentPhrase" class="text-md font-semibold">{{ currentPhrase }}</span>
+				</Transition>
+				<div class="flex flex-col items-end">
+					<span class="text-secondary">{{ Math.round(progress) }}%</span>
+					<span class="text-xs text-secondary"
+						>{{ formatBytes(currentValue) }} / {{ formatBytes(maxValue) }}</span
+					>
+				</div>
+			</div>
+			<div class="h-2 w-full rounded-full bg-divider">
+				<div
+					class="h-2 animate-pulse bg-brand rounded-full transition-all duration-300 ease-out"
+					:style="{ width: `${progress}%` }"
+				></div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<script setup lang="ts">
+import { formatBytes } from '@modrinth/utils'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+interface Props {
+	maxValue: number
+	currentValue: number
+	tips?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	tips: () => [
+		'Removing Herobrine...',
+		'Feeding parrots...',
+		'Teaching villagers new trades...',
+		'Convincing creepers to be friendly...',
+		'Polishing diamonds...',
+		'Training wolves to fetch...',
+		'Building pixel art...',
+		'Explaining redstone to beginners...',
+		'Collecting all the cats...',
+		'Negotiating with endermen...',
+		'Planting suspicious stew ingredients...',
+		'Calibrating TNT blast radius...',
+		'Teaching chickens to fly...',
+		'Sorting inventory alphabetically...',
+		'Convincing iron golems to smile...',
+	],
+})
+
+const currentPhrase = ref('')
+const usedPhrases = ref(new Set<number>())
+let phraseInterval: NodeJS.Timeout | null = null
+
+const progress = computed(() => {
+	if (props.maxValue === 0) return 0
+	return Math.min((props.currentValue / props.maxValue) * 100, 100)
+})
+
+const isVisible = computed(() => props.maxValue > 0 && props.currentValue >= 0)
+
+function getNextPhrase() {
+	if (usedPhrases.value.size >= props.tips.length) {
+		const currentPhraseIndex = props.tips.indexOf(currentPhrase.value)
+		usedPhrases.value.clear()
+		if (currentPhraseIndex !== -1) {
+			usedPhrases.value.add(currentPhraseIndex)
+		}
+	}
+	const availableIndices = props.tips
+		.map((_, index) => index)
+		.filter((index) => !usedPhrases.value.has(index))
+
+	const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)]
+	usedPhrases.value.add(randomIndex)
+
+	return props.tips[randomIndex]
+}
+
+function startPhraseRotation() {
+	if (phraseInterval) {
+		clearInterval(phraseInterval)
+	}
+
+	currentPhrase.value = getNextPhrase()
+	phraseInterval = setInterval(() => {
+		currentPhrase.value = getNextPhrase()
+	}, 4500)
+}
+
+function stopPhraseRotation() {
+	if (phraseInterval) {
+		clearInterval(phraseInterval)
+		phraseInterval = null
+	}
+}
+
+watch(isVisible, (newVisible) => {
+	if (newVisible) {
+		startPhraseRotation()
+	} else {
+		stopPhraseRotation()
+		usedPhrases.value.clear()
+	}
+})
+
+watch(progress, (newProgress) => {
+	if (newProgress >= 100) {
+		stopPhraseRotation()
+		currentPhrase.value = 'Installing modpack...'
+	}
+})
+
+onUnmounted(() => {
+	stopPhraseRotation()
+})
+</script>
+
+<style scoped>
+.phrase-fade-enter-active,
+.phrase-fade-leave-active {
+	transition: opacity 0.3s ease;
+}
+
+.phrase-fade-enter-from,
+.phrase-fade-leave-to {
+	opacity: 0;
+}
+</style>
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ b/packages/ui/src/components/base/JoinedButtons.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="joined-buttons">
+		<ButtonStyled :color="color">
+			<button :disabled="disabled" @click="handlePrimaryAction">
+				<component :is="primaryAction.icon" v-if="primaryAction.icon" aria-hidden="true" />
+				{{ primaryAction.label }}
+			</button>
+		</ButtonStyled>
+		<ButtonStyled v-if="dropdownActions.length > 0" :color="color">
+			<OverflowMenu class="btn-dropdown-animation" :options="dropdownOptions" :disabled="disabled">
+				<DropdownIcon />
+				<template v-for="action in dropdownActions" :key="action.id" #[action.id]>
+					<component :is="action.icon" v-if="action.icon" aria-hidden="true" />
+					{{ action.label }}
+				</template>
+			</OverflowMenu>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+
+import { ButtonStyled, OverflowMenu } from '../index'
+
+// TODO: This should be moved to a shared types file.
+type Colors = 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+
+export interface JoinedButtonAction {
+	id: string
+	label: string
+	icon?: Component
+	action: () => void
+	color?: Colors
+	hoverFilled?: boolean
+}
+
+interface Props {
+	actions: JoinedButtonAction[]
+	color?: Colors
+	disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	color: 'standard',
+	disabled: false,
+})
+
+const primaryAction = computed(() => props.actions[0])
+
+const dropdownActions = computed(() => props.actions.slice(1))
+
+const colorMap: Record<
+	Colors,
+	| 'red'
+	| 'orange'
+	| 'green'
+	| 'blue'
+	| 'purple'
+	| 'highlight'
+	| 'primary'
+	| 'danger'
+	| 'secondary'
+	| undefined
+> = {
+	standard: 'secondary',
+	brand: 'primary',
+	red: 'red',
+	orange: 'orange',
+	green: 'green',
+	blue: 'blue',
+	purple: 'purple',
+}
+
+const dropdownOptions = computed(() =>
+	dropdownActions.value.map((action) => ({
+		id: action.id,
+		color: action.color ? colorMap[action.color] : undefined,
+		action: action.action,
+		hoverFilled: action.hoverFilled ?? true,
+	})),
+)
+
+function handlePrimaryAction() {
+	if (primaryAction.value && !props.disabled) {
+		primaryAction.value.action()
+	}
+}
+</script>
+
+<style scoped>
+.joined-buttons {
+	display: flex;
+	align-items: center;
+}
+
+.joined-buttons > :deep(.btn) {
+	border-radius: 0;
+}
+
+.joined-buttons > :deep(.btn:first-child) {
+	border-top-left-radius: var(--radius-md);
+	border-bottom-left-radius: var(--radius-md);
+}
+
+.joined-buttons > :deep(.btn:last-child) {
+	border-top-right-radius: var(--radius-md);
+	border-bottom-right-radius: var(--radius-md);
+	margin-left: -1px;
+}
+
+.joined-buttons > :deep(.btn:not(:last-child)) {
+	border-right: none;
+}
+
+.btn-dropdown-animation {
+	padding: 0.5rem !important;
+}
+</style>
--- a/packages/ui/src/components/base/ProgressSpinner.vue
+++ b/packages/ui/src/components/base/ProgressSpinner.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		progress: number
+		max?: number
+	}>(),
+	{
+		max: 1,
+	},
+)
+
+const percent = computed(() => props.progress / props.max)
+</script>
+<template>
+	<span class="relative flex items-center justify-center">
+		<svg
+			width="24"
+			height="24"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="absolute"
+		>
+			<circle opacity="0.25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+		</svg>
+		<svg
+			:style="{ '--_progress': `${percent * 100}%` }"
+			width="24"
+			height="24"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="absolute progress-circle"
+		>
+			<circle opacity="0.75" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+		</svg>
+	</span>
+</template>
+
+<style scoped lang="scss">
+@property --_progress {
+	syntax: '<percentage>';
+	inherits: false;
+	initial-value: 0%;
+}
+
+.progress-circle {
+	transition: --_progress 0.125s ease-in-out;
+	mask-image: conic-gradient(
+		black 0%,
+		black var(--_progress),
+		transparent calc(var(--_progress) + 1%),
+		transparent 100%
+	);
+}
+</style>
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,6 +1,7 @@
 // Base content
 export { default as Accordion } from './base/Accordion.vue'
 export { default as Admonition } from './base/Admonition.vue'
+export { default as AppearingProgressBar } from './base/AppearingProgressBar.vue'
 export { default as AutoLink } from './base/AutoLink.vue'
 export { default as Avatar } from './base/Avatar.vue'
 export { default as Badge } from './base/Badge.vue'
@@ -23,6 +24,8 @@ export type { FilterBarOption } from './base/FilterBar.vue'
 export { default as FilterBar } from './base/FilterBar.vue'
 export { default as HeadingLink } from './base/HeadingLink.vue'
 export { default as IconSelect } from './base/IconSelect.vue'
+export type { JoinedButtonAction } from './base/JoinedButtons.vue'
+export { default as JoinedButtons } from './base/JoinedButtons.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
@@ -34,6 +37,7 @@ export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
 export { default as PreviewSelectButton } from './base/PreviewSelectButton.vue'
 export { default as ProgressBar } from './base/ProgressBar.vue'
+export { default as ProgressSpinner } from './base/ProgressSpinner.vue'
 export { default as ProjectCard } from './base/ProjectCard.vue'
 export { default as RadialHeader } from './base/RadialHeader.vue'
 export { default as RadioButtons } from './base/RadioButtons.vue'
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -21,6 +21,7 @@
 		<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
 			<div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
 				<div
+					v-if="!hideHeader"
 					data-tauri-drag-region
 					class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
 				>
@@ -61,6 +62,7 @@ const props = withDefaults(
 		closeOnClickOutside?: boolean
 		warnOnClose?: boolean
 		header?: string
+		hideHeader?: boolean
 		onHide?: () => void
 		onShow?: () => void
 	}>(),
@@ -72,6 +74,7 @@ const props = withDefaults(
 		closeOnEsc: true,
 		warnOnClose: false,
 		header: undefined,
+		hideHeader: false,
 		onHide: () => {},
 		onShow: () => {},
 	},
@@ -135,7 +138,7 @@ function updateMousePosition(event: { clientX: number; clientY: number }) {
 }

 function handleKeyDown(event: KeyboardEvent) {
-	if (props.closeOnEsc && event.key === 'Escape') {
+	if (props.closeOnEsc && event.key === 'Escape' && props.closable) {
 		hide()
 		mouseX.value = window.innerWidth / 2
 		mouseY.value = window.innerHeight / 2
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -17,6 +17,9 @@
  "button.cancel": {
    "defaultMessage": "Cancel"
  },
+  "button.close": {
+    "defaultMessage": "Close"
+  },
  "button.continue": {
    "defaultMessage": "Continue"
  },
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -25,6 +25,10 @@ export const commonMessages = defineMessages({
 		id: 'button.cancel',
 		defaultMessage: 'Cancel',
 	},
+	closeButton: {
+		id: 'button.close',
+		defaultMessage: 'Close',
+	},
 	changesSavedLabel: {
 		id: 'label.changes-saved',
 		defaultMessage: 'Changes saved',
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw-icon lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>`