Merge commit '7fa442fb28a2b9156690ff147206275163e7aec8' into beta

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

@@ -19,7 +19,7 @@ import { install } from '@/helpers/profile.js'
 import { cancel_directory_change } from '@/helpers/settings.ts'
 import { handleSevereError } from '@/store/error.js'
 
-// [AR] Feature
+// [AR] Imports
 import { applyMigrationFix } from '@/helpers/utils.js'
 import { restartApp } from '@/helpers/utils.js'
 
@@ -29,7 +29,6 @@ const errorModal = ref()
 const error = ref()
 const closable = ref(true)
 const errorCollapsed = ref(false)
-const language = ref('en')
 const migrationFixSuccess = ref(null) // null | true | false
 const migrationFixCallbackModel = ref()
 
@@ -79,7 +78,7 @@ defineExpose({
 			supportLink.value = 'https://support.modrinth.com'
 			metadata.value.profilePath = context.profilePath
 		} else if (source === 'state_init') {
-			title.value = 'Error initializing Modrinth App'
+			title.value = 'Error initializing AstralRinth App'
 			errorType.value = 'state_init'
 			supportLink.value = 'https://support.modrinth.com'
 		} else {
@@ -158,10 +157,6 @@ async function copyToClipboard(text) {
 	}, 3000)
 }
 
-function toggleLanguage() {
-  language.value = language.value === 'en' ? 'ru' : 'en'
-}
-
 async function onApplyMigrationFix(eol) {
   console.log(`[AR] • Attempting to apply migration ${eol.toUpperCase()} fix`)
   try {
@@ -191,7 +186,7 @@ async function onApplyMigrationFix(eol) {
 					<template v-if="metadata.network">
 						<h3>Network issues</h3>
 						<p>
-							It looks like there were issues with the Modrinth App connecting to Microsoft's
+							It looks like there were issues with the AstralRinth App connecting to Microsoft's
 							servers. This is often the result of a poor connection, so we recommend trying again
 							to see if it works. If issues continue to persist, follow the steps in
 							<a
@@ -205,7 +200,7 @@ async function onApplyMigrationFix(eol) {
 					<template v-else-if="metadata.hostsFile">
 						<h3>Network issues</h3>
 						<p>
-							The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
+							The AstralRinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
 							remote server rejected the connection. This may indicate that these services are
 							blocked by the hosts file. Please visit
 							<a
@@ -244,7 +239,7 @@ async function onApplyMigrationFix(eol) {
 					<template v-if="metadata.readOnly">
 						<h3>Change directory permissions</h3>
 						<p>
-							It looks like the Modrinth App is unable to write to the directory you selected.
+							It looks like the AstralRinth App is unable to write to the directory you selected.
 							Please adjust the permissions of the directory and try again or cancel the directory
 							change.
 						</p>
@@ -258,7 +253,7 @@ async function onApplyMigrationFix(eol) {
 					</template>
 					<template v-else>
 						<p>
-							The Modrinth App is unable to migrate to the new directory you selected. Please
+							The AstralRinth App is unable to migrate to the new directory you selected. Please
 							contact support for help or cancel the directory change.
 						</p>
 					</template>
@@ -288,7 +283,7 @@ async function onApplyMigrationFix(eol) {
 				</div>
 				<template v-else-if="errorType === 'state_init'">
 					<p>
-						Modrinth App failed to load correctly. This may be because of a corrupted file, or
+						AstralRinth App failed to load correctly. This may be because of a corrupted file, or
 						because the app is missing crucial files.
 					</p>
 					<p>You may be able to fix it through one of the following ways:</p>
@@ -298,7 +293,7 @@ async function onApplyMigrationFix(eol) {
 					</ul>
 				</template>
 				<template v-else-if="errorType === 'no_loader_version'">
-					<p>The Modrinth App failed to find the loader version for this instance.</p>
+					<p>The AstralRinth App failed to find the loader version for this instance.</p>
 					<p>To resolve this, you need to repair the instance. Click the button below to do so.</p>
 					<div class="cta-button">
 						<button class="btn btn-primary" :disabled="loadingRepair" @click="repairInstance">
@@ -351,70 +346,40 @@ async function onApplyMigrationFix(eol) {
 					</Collapsible>
 				</div>
 				<template v-if="errorType === 'state_init'">
-        		  <div class="notice">
-        		    <div class="flex justify-between items-center">
-        		      <h3 v-if="language === 'en'" class="notice__title">⚠️ Migration Issue • Important Notice ⚠️</h3>
-        		      <h3 v-if="language === 'ru'" class="notice__title">⚠️ Проблема миграции • Важное уведомление ⚠️</h3>
-        		      <ButtonStyled>
-        		        <button @click="toggleLanguage">
-        		          {{ language === 'en' ? '📖 Русский' : '📖 English' }}
-        		        </button>
-        		      </ButtonStyled>
-        		    </div>
-        		      <p v-if="language === 'en'" class="notice__text">
-        		        We're experiencing an issue with our database migration system due to differences in how different operating systems handle line endings. This might cause problems with our app's functionality.
-        		      </p>
-        		      <p v-if="language === 'en'" class="notice__text">
-        		        <strong>What's happening?</strong> When we build our app, we use a system that checks the integrity of our database migrations. However, this system can get confused when it encounters different line endings (like CRLF vs LF) used by different operating systems. This can lead to errors and make our app unusable.
-        		      </p>
-        		      <p v-if="language === 'en'" class="notice__text">
-        		        <strong>Why is this happening?</strong> This issue is caused by a combination of factors, including different operating systems handling line endings differently, Git's line ending conversion settings, and our app's build process.
-        		      </p>
-        		      <p v-if="language === 'en'" class="notice__text">
-        		        <strong>What are we doing about it?</strong> We're working to resolve this issue and ensure that our app works smoothly for all users. In the meantime, we apologize for any inconvenience this might cause and appreciate your patience and understanding.
-        		      </p>
-        		      <p v-if="language === 'ru'" class="notice__text">
-        		        Мы сталкиваемся с проблемой в нашей системе миграции базы данных из-за различий в том, как разные операционные системы обрабатывают окончания строк. Это может вызвать проблемы с функциональностью нашего приложения.
-        		      </p>
-        		      <p v-if="language === 'ru'" class="notice__text">
-        		        <strong>Что происходит?</strong> Когда мы строим наше приложение, мы используем систему, которая проверяет целостность наших миграций базы данных. Однако эта система может сбиваться, когда сталкивается с различными окончаниями строк (например, CRLF против LF), используемыми разными операционными системами. Это может привести к ошибкам и сделать наше приложение неработоспособным.
-        		      </p>
-        		      <p v-if="language === 'ru'" class="notice__text">
-        		        <strong>Почему это происходит?</strong> Эта проблема вызвана сочетанием факторов, включая различную обработку окончаний строк разными операционными системами, настройки преобразования окончаний строк в Git и процесс сборки нашего приложения.
-        		      </p>
-        		      <p v-if="language === 'ru'" class="notice__text">
-        		        <strong>Что мы с этим делаем?</strong> Мы работаем над решением этой проблемы и обеспечением бесперебойной работы нашего приложения для всех пользователей. В это время мы извиняемся за возможные неудобства и благодарим вас за терпение и понимание.
-        		      </p>
-        		    </div>
-        		    <h2 class="text-lg font-bold text-contrast">
-        		      <template v-if="language === 'en'">Possible fix in real time:</template>
-        		      <template v-if="language === 'ru'">Возможное исправление в реальном времени:</template>
-        		    </h2>
+        			<h2>⚠️ Migration Issue • Important Notice</h2>
+        			<p>We've detected a problem with our database migration system caused by inconsistent line endings between operating systems (Windows vs. macOS/Linux). This may affect app stability.</p>
+        			<p><strong>What’s happening?</strong> Our migration validator misreads modified migrations when line endings differ (CRLF ↔ LF), which can make the app unusable.</p>
+        			<p><strong>Why?</strong> Git’s automatic line-ending conversions and OS differences can cause these inconsistencies during builds.</p>
+        			<p><strong>What’s next?</strong> We’re working on a permanent fix. In the meantime, you can apply one of the quick fixes below depending on your system.</p>
+        			<h3>Do I need to apply a fix now?</h3>
+					<div>
+						<p class="notice__text">
+							If you're encountering an error while applying migrations, such as "Error while applying migrations: migration XXXXXXXXXX was previously applied but has been modified", or a similar issue with migration, the following actions might help:
+						</p>
+						<p>If none of the above steps help, you can try saving a copy of the file <code>app.db</code> to a safe location, such as <code>%appdata%\Roaming\AstralRinthApp</code>
+							on Windows or <code>~/Library/Application Support/AstralRinthApp</code> on macOS, then deleting the original file and letting the app re-create the database file.
+							Note that this may cause data loss inside the app, so make sure to back up your launcher data before applying this fixes.
+						</p>
+					</div>
         		    <div class="flex justify-between">
         		      <ol class="flex flex-col gap-3">
         		        <li>
         		          <ButtonStyled class="neon-button neon">
         		            <button
-        		              :title="language === 'en'
-        		                ? 'Convert all line endings in migration files to LF (Unix-style: \\n)'
-        		                : 'Преобразовать все окончания строк в файлах миграций в LF (Unix-стиль: \\n)'"
-        		              aria-label="LF"
+        		              title="Convert all line endings in migration files to LF (Unix-style: \\n)"
         		              @click="onApplyMigrationFix('lf')"
         		            >
-        		              {{ language === 'en' ? 'Apply LF Migration Fix' : 'Применить исправление миграции LF' }}
+        		            	Apply fix for Unix like systems (Debian, Ubuntu, macOS and others)
         		            </button>
         		          </ButtonStyled>
         		        </li>
         		        <li>
         		          <ButtonStyled class="neon-button neon">
         		            <button
-        		              :title="language === 'en'
-        		                ? 'Convert all line endings in migration files to CRLF (Windows-style: \\r\\n)'
-        		                : 'Преобразовать все окончания строк в файлах миграций в CRLF (Windows-стиль: \\r\\n)'"
-        		              aria-label="CRLF"
+        		              title="Convert all line endings in migration files to CRLF (Windows-style: \\r\\n)"
         		              @click="onApplyMigrationFix('crlf')"
         		            >
-        		              {{ language === 'en' ? 'Apply CRLF Migration Fix' : 'Применить исправление миграции CRLF' }}
+								Apply fix for Windows
         		            </button>
         		          </ButtonStyled>
         		        </li>
@@ -426,37 +391,25 @@ async function onApplyMigrationFix(eol) {
 	</ModalWrapper>
 	<ModalWrapper
   	  ref="migrationFixCallbackModel"
-  	  :header="language === 'en'
-  	    ? '💡 Migration fix report'
-  	    : '💡 Отчет об исправлении миграции'"
+  	  header="💡 Migration fix report"
   	  :closable="closable">
   	  <div class="modal-body">
   	    <h2 class="text-lg font-bold text-contrast space-y-2">
   	      <template v-if="migrationFixSuccess === true">
   	        <p class="flex items-center gap-2 neon-text">
-  	          ✅
-  	          {{ language === 'en'
-  	            ? 'The migration fix has been applied successfully. Please restart the launcher and try to log in to the game :)'
-  	            : 'Исправление миграции успешно применено. Пожалуйста, перезапустите лаунчер и попробуйте снова авторизоваться в игре :)' }}
+  	        	✅ The migration fix has been applied successfully. Please restart the launcher and try to log in to the game :)
   	        </p>
   	        <p class="mt-2 text-sm neon-text">
-  	          {{ language === 'en'
-  	            ? 'If the problem persists, please try the other fix.'
-  	            : 'Если проблема сохраняется, пожалуйста, попробуйте другой способ.' }}
+				If the problem persists, please try the other fix.
   	        </p>
   	      </template>
 
   	      <template v-else-if="migrationFixSuccess === false">
   	        <p class="flex items-center gap-2 neon-text">
-  	          ❌
-  	          {{ language === 'en'
-  	            ? 'The migration fix failed or had no effect.'
-  	            : 'Исправление миграции не было успешно применено или не имело эффекта.' }}
+  	        	❌ The migration fix failed or had no effect.
   	        </p>
   	        <p class="mt-2 text-sm neon-text">
-  	          {{ language === 'en'
-  	            ? 'If the problem persists, please try the other fix.'
-  	            : 'Если проблема сохраняется, пожалуйста, попробуйте другой способ.' }}
+				If the problem persists, please try the other fix.
   	        </p>
   	      </template>
   	    </h2>
@@ -479,6 +432,13 @@ async function onApplyMigrationFix(eol) {
 @import '../../../../../packages/assets/styles/neon-button.scss';
 @import '../../../../../packages/assets/styles/neon-text.scss';
 
+code {
+  background: linear-gradient(90deg, #005eff, #00cfff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
 .cta-button {
 	display: flex;
 	align-items: center;

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

@@ -45,19 +45,14 @@
 						open-direction="top"
 						:show-labels="false"
 					/>
-					<Checkbox
-						v-if="showAdvanced"
-						v-model="showSnapshots"
-						class="filter-checkbox"
-						label="Include snapshots"
-					/>
+					<Checkbox v-model="showSnapshots" class="filter-checkbox" label="Show all versions" />
 				</div>
 			</div>
-			<div v-if="showAdvanced && loader !== 'vanilla'" class="input-row">
+			<div v-if="loader !== 'vanilla'" class="input-row">
 				<p class="input-label">Loader version</p>
 				<Chips v-model="loader_version" :items="['stable', 'latest', 'other']" />
 			</div>
-			<div v-if="showAdvanced && loader_version === 'other' && loader !== 'vanilla'">
+			<div v-if="loader_version === 'other' && loader !== 'vanilla'">
 				<div v-if="game_version" class="input-row">
 					<p class="input-label">Select version</p>
 					<multiselect
@@ -75,10 +70,6 @@
 				</div>
 			</div>
 			<div class="input-group push-right">
-				<Button @click="toggle_advanced">
-					<CodeIcon />
-					{{ showAdvanced ? 'Hide advanced' : 'Show advanced' }}
-				</Button>
 				<Button @click="hide()">
 					<XIcon />
 					Cancel
@@ -110,7 +101,7 @@
 							placeholder="Path to launcher"
 							@change="setPath"
 						/>
-						<Button class="r-btn" @click="() => (selectedLauncherPath = '')">
+						<Button class="r-btn" @click="() => (selectedProfileType.path = '')">
 							<XIcon />
 						</Button>
 					</div>
@@ -207,7 +198,6 @@
 
 <script setup>
 import {
-	CodeIcon,
 	FolderOpenIcon,
 	FolderSearchIcon,
 	InfoIcon,
@@ -247,7 +237,6 @@ const loader_version = ref('stable')
 const specified_loader_version = ref('')
 const icon = ref(null)
 const display_icon = ref(null)
-const showAdvanced = ref(false)
 const creating = ref(false)
 const showSnapshots = ref(false)
 const creationType = ref('custom')
@@ -259,7 +248,6 @@ defineExpose({
 		specified_loader_version.value = ''
 		profile_name.value = ''
 		creating.value = false
-		showAdvanced.value = false
 		showSnapshots.value = false
 		loader.value = 'vanilla'
 		loader_version.value = 'stable'
@@ -434,10 +422,6 @@ const selectable_versions = computed(() => {
 	return []
 })
 
-const toggle_advanced = () => {
-	showAdvanced.value = !showAdvanced.value
-}
-
 const openFile = async () => {
 	const newProject = await open({ multiple: false })
 	if (!newProject) return

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,

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>

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) {

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

@@ -1,10 +1,14 @@
 <template>
 	<div v-if="!hidden" class="splash-screen dark" :class="{ 'fade-out': doneLoading }">
 		<div v-if="os !== 'MacOS'" class="app-buttons">
-			<button class="btn icon-only transparent" icon-only @click="() => getCurrent().minimize()">
+			<button
+				class="btn icon-only transparent"
+				icon-only
+				@click="() => getCurrentWindow().minimize()"
+			>
 				<MinimizeIcon />
 			</button>
-			<button class="btn icon-only transparent" @click="() => getCurrent().toggleMaximize()">
+			<button class="btn icon-only transparent" @click="() => getCurrentWindow().toggleMaximize()">
 				<MaximizeIcon />
 			</button>
 			<button class="btn icon-only transparent" @click="handleClose">
@@ -110,7 +114,7 @@ watch(loading, (newValue) => {
 			setTimeout(() => {
 				hidden.value = true
 				loading.setEnabled(true)
-			}, 250)
+			}, 50)
 		}
 	}
 })
@@ -131,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...'

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="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-divider border-solid border-[2px]"
+		:class="{
+			'download-complete': progress === 1,
+		}"
+	>
+		<div class="flex min-w-[25rem] gap-4">
+			<h2 class="whitespace-nowrap 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>

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -250,7 +250,13 @@ onUnmounted(() => {
 		<div class="mb-4">
 			<h2 class="m-0 text-lg font-extrabold text-contrast">Username</h2>
 			<p class="m-0 mt-1 leading-tight">You can add friends with their Modrinth username.</p>
-			<input v-model="username" class="mt-2 w-full" type="text" placeholder="Enter username..." />
+			<input
+				v-model="username"
+				class="mt-2 w-full"
+				type="text"
+				placeholder="Enter username..."
+				@keyup.enter="addFriendFromModal"
+			/>
 		</div>
 		<ButtonStyled color="brand">
 			<button :disabled="username.length === 0" @click="addFriendFromModal">

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -22,7 +22,11 @@ import {
 	get,
 	list,
 } from '@/helpers/profile'
-import { installVersionDependencies } from '@/store/install.js'
+import {
+	findPreferredVersion,
+	installVersionDependencies,
+	isVersionCompatible,
+} from '@/store/install.js'
 
 const { handleError } = injectNotificationManager()
 const router = useRouter()
@@ -49,14 +53,11 @@ const shownProfiles = computed(() =>
 			return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
 		})
 		.filter((profile) => {
-			const loaders = versions.value.flatMap((v) => v.loaders)
-
-			return (
-				versions.value.flatMap((v) => v.game_versions).includes(profile.game_version) &&
-				(project.value.project_type === 'mod'
-					? loaders.includes(profile.loader) || loaders.includes('minecraft')
-					: true)
-			)
+			const version = {
+				game_versions: versions.value.flatMap((v) => v.game_versions),
+				loaders: versions.value.flatMap((v) => v.loaders),
+			}
+			return isVersionCompatible(version, project.value, profile)
 		}),
 )
 
@@ -94,14 +95,7 @@ defineExpose({
 
 async function install(instance) {
 	instance.installing = true
-	const version = versions.value.find((v) => {
-		return (
-			v.game_versions.includes(instance.game_version) &&
-			(project.value.project_type === 'mod'
-				? v.loaders.includes(instance.loader) || v.loaders.includes('minecraft')
-				: true)
-		)
-	})
+	const version = findPreferredVersion(versions.value, project.value, instance)
 
 	if (!version) {
 		instance.installing = false

apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue

@@ -11,10 +11,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'
@@ -25,6 +25,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'
+
 // [AR] Imports
 import { installState, getRemote, updateState } from '@/helpers/update.js'
 
@@ -42,6 +43,7 @@ const initDownload = async () => {
     updateRequestFailView.value.show()
   }
 }
+import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
 import { useTheming } from '@/store/state'
 
 const themeStore = useTheming()
@@ -117,6 +119,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()
@@ -142,6 +146,13 @@ function devModeCount() {
 		}
 	}
 }
+
+const messages = defineMessages({
+	downloading: {
+		id: 'app.settings.downloading',
+		defaultMessage: 'Downloading v{version}',
+	},
+})
 </script>
 <template>
 	<ModalWrapper ref="modal">
@@ -154,6 +165,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, { version: downloadingVersion }) }}
+							</p>
+							<ProgressBar :progress="progress" />
+						</template>
+					</div>
 					<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
 						{{ formatMessage(developerModeEnabled) }}
 					</p>
@@ -171,7 +190,7 @@ function devModeCount() {
 						<div>
 							<p class="m-0">AstralRinth 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>

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>

apps/app-frontend/src/components/ui/world/RecentWorldsList.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { GameVersion } from '@modrinth/ui'
 import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
@@ -10,11 +11,14 @@ import { trackEvent } from '@/helpers/analytics'
 import { process_listener, profile_listener } from '@/helpers/events'
 import { get_all } from '@/helpers/process'
 import { kill, run } from '@/helpers/profile'
+import { get_game_versions } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 import {
 	get_profile_protocol_version,
 	get_recent_worlds,
 	getWorldIdentifier,
+	hasServerQuickPlaySupport,
+	hasWorldQuickPlaySupport,
 	type ProtocolVersion,
 	refreshServerData,
 	type ServerData,
@@ -37,6 +41,7 @@ const theme = useTheming()
 const jumpBackInItems = ref<JumpBackInItem[]>([])
 const serverData = ref<Record<string, ServerData>>({})
 const protocolVersions = ref<Record<string, ProtocolVersion | null>>({})
+const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
 
 const MIN_JUMP_BACK_IN = 3
 const MAX_JUMP_BACK_IN = 6
@@ -255,7 +260,14 @@ onUnmounted(() => {
 							? serverData[item.world.address].refreshing && !serverData[item.world.address].status
 							: undefined
 					"
-					supports-quick-play
+					:supports-server-quick-play="
+						item.world.type === 'server' &&
+						hasServerQuickPlaySupport(gameVersions, item.instance.game_version || '')
+					"
+					:supports-world-quick-play="
+						item.world.type === 'singleplayer' &&
+						hasWorldQuickPlaySupport(gameVersions, item.instance.game_version || '')
+					"
 					:server-status="
 						item.world.type === 'server' ? serverData[item.world.address].status : undefined
 					"

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -336,17 +336,21 @@ const messages = defineMessages({
 				<ButtonStyled v-else>
 					<button
 						v-tooltip="
-							world.type == 'server' && !supportsServerQuickPlay
-								? formatMessage(messages.noServerQuickPlay)
-								: world.type == 'singleplayer' && !supportsWorldQuickPlay
-									? formatMessage(messages.noSingleplayerQuickPlay)
-									: playingOtherWorld || locked
+							world.type === 'server'
+								? !supportsServerQuickPlay
+									? formatMessage(messages.noServerQuickPlay)
+									: playingOtherWorld
 										? formatMessage(messages.gameAlreadyOpen)
 										: !serverStatus
 											? formatMessage(messages.noContact)
 											: serverIncompatible
 												? formatMessage(messages.incompatibleServer)
 												: null
+								: !supportsWorldQuickPlay
+									? formatMessage(messages.noSingleplayerQuickPlay)
+									: playingOtherWorld || locked
+										? formatMessage(messages.gameAlreadyOpen)
+										: null
 						"
 						:disabled="
 							playingOtherWorld ||