feat: add unknown .mrpack install warning modal (#5942)

* Update modpack button copy * Change outlined button style for standard buttons * add unknown pack warning modal * implementation * Redo download toasts * prepr * improve hit area of window controls * implement "don't show again" * prepr * duplicate modal ref declarations * increase spacing of progress items * address truman review
2026-04-29 09:53:10 -07:00
parent a80cc7e47b
commit dfb6814095
24 changed files with 1208 additions and 587 deletions
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -68,11 +68,13 @@ import { RouterView, useRoute, useRouter } from 'vue-router'

 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
+import AppActionBar from '@/components/ui/AppActionBar.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
+import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
@@ -82,7 +84,6 @@ import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
 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 WindowControls from '@/components/ui/WindowControls.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
@@ -172,6 +173,7 @@ provideModalBehavior({

 const {
 	installationModal,
+	unknownPackWarningModal,
 	fetchExistingInstanceNames,
 	handleCreate,
 	handleBrowseModpacks,
@@ -181,7 +183,7 @@ const {
 	setModpackAlreadyInstalledModal,
 	handleModpackDuplicateCreateAnyway,
 	handleModpackDuplicateGoToInstance,
-} = setupProviders(notificationManager)
+} = setupProviders(notificationManager, popupNotificationManager)

 const news = ref([])
 const availableSurvey = ref(false)
@@ -784,7 +786,9 @@ async function handleCommand(e) {
 	if (e.event === 'RunMRPack') {
 		// RunMRPack should directly install a local mrpack given a path
 		if (e.path.endsWith('.mrpack')) {
-			await create_profile_and_install_from_file(e.path).catch(handleError)
+			await create_profile_and_install_from_file(e.path, (createProfile, fileName) =>
+				unknownPackWarningModal.value?.show(createProfile, fileName),
+			).catch(handleError)
 			trackEvent('InstanceCreate', {
 				source: 'CreationModalFileDrop',
 			})
@@ -1171,7 +1175,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 </script>

 <template>
-	<WindowControls />
 	<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
 	<div id="teleports"></div>
 	<div
@@ -1211,6 +1214,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			@create="handleCreate"
 			@browse-modpacks="handleBrowseModpacks"
 		/>
+		<UnknownPackWarningModal ref="unknownPackWarningModal" />
 		<div
 			class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
 		>
@@ -1367,9 +1371,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</ButtonStyled>
 				<div class="flex mr-3">
 					<Suspense>
-						<RunningAppBar />
+						<AppActionBar />
 					</Suspense>
 				</div>
+				<WindowControls />
 			</section>
 		</div>
 	</div>
--- a/apps/app-frontend/src/components/ui/AppActionBar.vue
+++ b/apps/app-frontend/src/components/ui/AppActionBar.vue
@@ -0,0 +1,434 @@
+<template>
+	<div class="flex gap-4 items-center">
+		<ButtonStyled
+			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
+			color="brand"
+			type="transparent"
+			circular
+		>
+			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
+				<DownloadIcon />
+			</button>
+		</ButtonStyled>
+		<div v-if="offline" class="flex items-center gap-1">
+			<UnplugIcon class="text-secondary" />
+			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
+		</div>
+		<div
+			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
+		>
+			<template v-if="selectedProcess">
+				<OnlineIndicatorIcon />
+				<div class="text-contrast flex items-center gap-2">
+					<router-link
+						v-tooltip="formatMessage(messages.viewInstance)"
+						:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+						class="hover:underline"
+					>
+						{{ selectedProcess.profile.name }}
+					</router-link>
+					<Dropdown
+						v-if="currentProcesses.length > 1"
+						placement="bottom"
+						:triggers="['click']"
+						:hide-triggers="['click']"
+						@show="showProfiles = true"
+						@hide="showProfiles = false"
+					>
+						<ButtonStyled type="transparent" circular size="small">
+							<button
+								v-tooltip="
+									showProfiles
+										? formatMessage(messages.hideMoreRunningInstances)
+										: formatMessage(messages.showMoreRunningInstances)
+								"
+							>
+								<DropdownIcon :class="{ 'rotate-180': !!showProfiles }" />
+							</button>
+						</ButtonStyled>
+						<template #popper>
+							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
+								<div
+									v-for="process in currentProcesses"
+									:key="process.uuid"
+									class="flex w-full items-center gap-2 rounded-xl bg-surface-4 p-2 text-sm"
+								>
+									<button
+										v-tooltip.left="
+											process.uuid === selectedProcess.uuid
+												? formatMessage(messages.primaryInstance)
+												: formatMessage(messages.makePrimaryInstance)
+										"
+										class="flex flex-grow items-center gap-2"
+										:class="{
+											'active:scale-95 transition-transform': process.uuid !== selectedProcess.uuid,
+										}"
+										:disabled="process.uuid === selectedProcess.uuid"
+										@click="selectProcess(process)"
+									>
+										<OnlineIndicatorIcon />
+										<span class="mr-auto text-contrast flex items-center gap-2">
+											{{ process.profile.name }}
+											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
+										</span>
+									</button>
+									<button
+										v-tooltip="formatMessage(messages.stopInstance)"
+										class="active:scale-95 flex"
+										@click.stop="stop(process)"
+									>
+										<StopCircleIcon class="text-red size-5" />
+									</button>
+									<button
+										v-tooltip="formatMessage(messages.viewLogs)"
+										class="active:scale-95 flex"
+										@click.stop="goToTerminal(process.profile.path)"
+									>
+										<TerminalSquareIcon class="text-secondary size-5" />
+									</button>
+								</div>
+							</div>
+						</template>
+					</Dropdown>
+				</div>
+				<button
+					v-tooltip="formatMessage(messages.stopInstance)"
+					class="active:scale-95 flex"
+					@click="stop(selectedProcess)"
+				>
+					<StopCircleIcon class="text-red size-5" />
+				</button>
+				<button
+					v-tooltip="formatMessage(messages.viewLogs)"
+					class="active:scale-95 flex"
+					@click="goToTerminal()"
+				>
+					<TerminalSquareIcon class="text-secondary size-5" />
+				</button>
+			</template>
+			<template v-else>
+				<span class="size-2 rounded-full bg-secondary" />
+				<span class="text-secondary"> {{ formatMessage(messages.noInstancesRunning) }} </span>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	DownloadIcon,
+	DropdownIcon,
+	OnlineIndicatorIcon,
+	StarIcon,
+	StopCircleIcon,
+	TerminalSquareIcon,
+	UnplugIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	injectPopupNotificationManager,
+	type PopupNotification,
+	type PopupNotificationProgressItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { Dropdown } from 'floating-vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { trackEvent } from '@/helpers/analytics'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many as getInstances } from '@/helpers/profile.js'
+import type { LoadingBar } from '@/helpers/state'
+import { progress_bars_list } from '@/helpers/state'
+import type { GameInstance } from '@/helpers/types'
+
+const { handleError } = injectNotificationManager()
+const popupNotificationManager = injectPopupNotificationManager()
+const { formatMessage } = useVIntl()
+
+const router = useRouter()
+
+const showProfiles = ref(false)
+
+interface RunningProcess {
+	uuid: string
+	profile_path: string
+	profile: GameInstance
+}
+
+const messages = defineMessages({
+	offline: {
+		id: 'app.action-bar.offline',
+		defaultMessage: 'Offline',
+	},
+	viewInstance: {
+		id: 'app.action-bar.view-instance',
+		defaultMessage: 'View instance',
+	},
+	showMoreRunningInstances: {
+		id: 'app.action-bar.show-more-running-instances',
+		defaultMessage: 'Show more running instances',
+	},
+	hideMoreRunningInstances: {
+		id: 'app.action-bar.hide-more-running-instances',
+		defaultMessage: 'Hide more running instances',
+	},
+	primaryInstance: {
+		id: 'app.action-bar.primary-instance',
+		defaultMessage: 'Primary instance',
+	},
+	makePrimaryInstance: {
+		id: 'app.action-bar.make-primary-instance',
+		defaultMessage: 'Make primary instance',
+	},
+	stopInstance: {
+		id: 'app.action-bar.stop-instance',
+		defaultMessage: 'Stop instance',
+	},
+	viewLogs: {
+		id: 'app.action-bar.view-logs',
+		defaultMessage: 'View logs',
+	},
+	noInstancesRunning: {
+		id: 'app.action-bar.no-instances-running',
+		defaultMessage: 'No instances running',
+	},
+	downloadingJava: {
+		id: 'app.action-bar.downloading-java',
+		defaultMessage: 'Downloading Java {version}',
+	},
+	downloads: {
+		id: 'app.action-bar.downloads',
+		defaultMessage: 'Downloads',
+	},
+	viewActiveDownloads: {
+		id: 'app.action-bar.view-active-downloads',
+		defaultMessage: 'View active downloads',
+	},
+})
+
+const currentProcesses = ref<RunningProcess[]>([])
+const selectedProcess = ref<RunningProcess | undefined>()
+
+const refresh = async () => {
+	const processes = ((await getRunningProcesses().catch((error) => {
+		handleError(error)
+		return []
+	})) ?? []) as Array<{ uuid: string; profile_path: string }>
+	const paths = processes.map((process) => process.profile_path)
+	const profiles: GameInstance[] = await getInstances(paths).catch((error) => {
+		handleError(error)
+		return []
+	})
+
+	currentProcesses.value = processes
+		.map((process) => {
+			const profile = profiles.find((item) => process.profile_path === item.path)
+			if (!profile) {
+				return null
+			}
+			return {
+				...process,
+				profile,
+			}
+		})
+		.filter((process): process is RunningProcess => process !== null)
+	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
+		selectedProcess.value = currentProcesses.value[0]
+	}
+}
+
+await refresh()
+
+const offline = ref(!navigator.onLine)
+function handleOffline() {
+	offline.value = true
+}
+function handleOnline() {
+	offline.value = false
+}
+
+onMounted(() => {
+	window.addEventListener('offline', handleOffline)
+	window.addEventListener('online', handleOnline)
+})
+
+const unlistenProcess = await process_listener(async () => {
+	await refresh()
+})
+
+const stop = async (process: RunningProcess) => {
+	try {
+		await killProcess(process.uuid).catch(handleError)
+
+		trackEvent('InstanceStop', {
+			loader: process.profile.loader,
+			game_version: process.profile.game_version,
+			source: 'AppBar',
+		})
+	} catch (e) {
+		console.error(e)
+	}
+	await refresh()
+}
+
+function goToTerminal(path?: string) {
+	const selectedPath = path ?? selectedProcess.value?.profile.path
+	if (!selectedPath) {
+		return
+	}
+	router.push(`/instance/${encodeURIComponent(selectedPath)}/logs`)
+}
+
+const currentLoadingBars = ref<LoadingBar[]>([])
+const notificationId = ref<string | number | null>(null)
+const dismissed = ref(false)
+
+function getLoadingBarKey(loadingBar: LoadingBar): string {
+	return `${loadingBar.loading_bar_uuid ?? loadingBar.id}`
+}
+
+function getLoadingProgress(loadingBar: LoadingBar): number {
+	if (!loadingBar.total || loadingBar.total <= 0) {
+		return 0
+	}
+	return Math.max(0, Math.min(1, (loadingBar.current ?? 0) / (loadingBar.total ?? 0)))
+}
+
+function getLoadingText(loadingBar: LoadingBar): string {
+	const percent = Math.floor(getLoadingProgress(loadingBar) * 100)
+	return loadingBar.message ? `${percent}% ${loadingBar.message}` : `${percent}%`
+}
+
+function getNotification(): PopupNotification | null {
+	if (!notificationId.value) {
+		return null
+	}
+	const notification = popupNotificationManager
+		.getNotifications()
+		.find((notification) => notification.id === notificationId.value)
+	return notification ?? null
+}
+
+function removeNotification(): void {
+	if (!notificationId.value) {
+		return
+	}
+	popupNotificationManager.removeNotification(notificationId.value)
+	notificationId.value = null
+}
+
+function buildDownloadItems(): PopupNotificationProgressItem[] {
+	return currentLoadingBars.value.map((bar) => ({
+		id: getLoadingBarKey(bar),
+		title: bar.title ?? '',
+		text: getLoadingText(bar),
+		progress: getLoadingProgress(bar),
+		waiting: !bar.total || bar.total <= 0,
+	}))
+}
+
+const hasVisibleActiveDownloadToasts = computed(() => !!getNotification())
+const hasActiveLoadingBars = computed(() => currentLoadingBars.value.length > 0)
+
+function updateNotification(resummon = false): void {
+	if (resummon) {
+		dismissed.value = false
+	}
+
+	if (currentLoadingBars.value.length === 0) {
+		removeNotification()
+		dismissed.value = false
+		return
+	}
+
+	if (notificationId.value && !getNotification()) {
+		notificationId.value = null
+		dismissed.value = true
+	}
+
+	if (dismissed.value && !resummon) {
+		return
+	}
+
+	let notif = getNotification()
+	const progressItems = buildDownloadItems()
+
+	if (notif) {
+		notif.title = formatMessage(messages.downloads)
+		notif.text = undefined
+		notif.progressItems = progressItems
+		notif.progress = undefined
+		notif.waiting = undefined
+	} else {
+		notif = popupNotificationManager.addPopupNotification({
+			title: formatMessage(messages.downloads),
+			type: 'download',
+			autoCloseMs: null,
+			progressItems,
+		})
+		notificationId.value = notif.id
+	}
+}
+
+function formatLoadingBars(loadingBar: LoadingBar): LoadingBar {
+	const formatted = { ...loadingBar }
+	if (formatted.bar_type?.type === 'java_download') {
+		formatted.title = formatMessage(messages.downloadingJava, {
+			version: formatted.bar_type.version,
+		})
+	}
+	if (formatted.bar_type?.profile_path) {
+		formatted.title = formatted.bar_type.profile_path
+	}
+	if (formatted.bar_type?.pack_name) {
+		formatted.title = formatted.bar_type.pack_name
+	}
+	return formatted
+}
+
+async function refreshLoadingBars() {
+	const bars: Record<string, LoadingBar> = await progress_bars_list().catch((error) => {
+		handleError(error)
+		return {}
+	})
+
+	currentLoadingBars.value = Object.values(bars)
+		.map(formatLoadingBars)
+		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
+
+	currentLoadingBars.value.sort((a, b) => {
+		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
+		const bKey = `${b.loading_bar_uuid ?? b.id ?? ''}`
+		return aKey.localeCompare(bKey)
+	})
+
+	updateNotification()
+}
+
+await refreshLoadingBars()
+
+const unlistenLoading = await loading_listener(async () => {
+	await refreshLoadingBars()
+})
+
+function openDownloadToast() {
+	updateNotification(true)
+}
+
+function selectProcess(process: RunningProcess) {
+	selectedProcess.value = process
+}
+
+onBeforeUnmount(() => {
+	removeNotification()
+	dismissed.value = false
+	window.removeEventListener('offline', handleOffline)
+	window.removeEventListener('online', handleOnline)
+	unlistenProcess()
+	unlistenLoading()
+})
+</script>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -1,476 +0,0 @@
-<template>
-	<div class="action-groups">
-		<ButtonStyled v-if="currentLoadingBars.length > 0" color="brand" type="transparent" circular>
-			<button ref="infoButton" @click="toggleCard()">
-				<DownloadIcon />
-			</button>
-		</ButtonStyled>
-		<div v-if="offline" class="status">
-			<UnplugIcon />
-			<div class="running-text">
-				<span> Offline </span>
-			</div>
-		</div>
-		<div v-if="selectedProcess" class="status">
-			<span class="circle running" />
-			<div ref="profileButton" class="running-text">
-				<router-link
-					class="text-primary"
-					:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
-				>
-					{{ selectedProcess.profile.name }}
-				</router-link>
-				<div
-					v-if="currentProcesses.length > 1"
-					class="arrow button-base"
-					:class="{ rotate: showProfiles }"
-					@click="toggleProfiles()"
-				>
-					<DropdownIcon />
-				</div>
-			</div>
-			<Button
-				v-tooltip="'Stop instance'"
-				icon-only
-				class="icon-button stop"
-				@click="stop(selectedProcess)"
-			>
-				<StopCircleIcon />
-			</Button>
-			<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
-				<TerminalSquareIcon />
-			</Button>
-		</div>
-		<div v-else class="status">
-			<span class="circle stopped" />
-			<span class="running-text"> No instances running </span>
-		</div>
-	</div>
-	<transition name="download">
-		<Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
-			<div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
-				<h3 class="info-title">
-					{{ loadingBar.title }}
-				</h3>
-				<div class="flex flex-col gap-2 w-full">
-					<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
-					<div class="row">
-						{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
-						{{ loadingBar.message }}
-					</div>
-				</div>
-			</div>
-		</Card>
-	</transition>
-	<transition name="download">
-		<Card
-			v-if="showProfiles === true && currentProcesses.length > 0"
-			ref="profiles"
-			class="profile-card"
-		>
-			<Button
-				v-for="process in currentProcesses"
-				:key="process.uuid"
-				class="profile-button"
-				@click="selectProcess(process)"
-			>
-				<div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
-				<Button
-					v-tooltip="'Stop instance'"
-					icon-only
-					class="icon-button stop"
-					@click.stop="stop(process)"
-				>
-					<StopCircleIcon />
-				</Button>
-				<Button
-					v-tooltip="'View logs'"
-					icon-only
-					class="icon-button"
-					@click.stop="goToTerminal(process.profile.path)"
-				>
-					<TerminalSquareIcon />
-				</Button>
-			</Button>
-		</Card>
-	</transition>
-</template>
-
-<script setup>
-import {
-	DownloadIcon,
-	DropdownIcon,
-	StopCircleIcon,
-	TerminalSquareIcon,
-	UnplugIcon,
-} from '@modrinth/assets'
-import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { loading_listener, process_listener } from '@/helpers/events'
-import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import { get_many } from '@/helpers/profile.js'
-import { progress_bars_list } from '@/helpers/state.js'
-
-const { handleError } = injectNotificationManager()
-
-const router = useRouter()
-const card = ref(null)
-const profiles = ref(null)
-const infoButton = ref(null)
-const profileButton = ref(null)
-const showCard = ref(false)
-
-const showProfiles = ref(false)
-
-const currentProcesses = ref([])
-const selectedProcess = ref()
-
-const refresh = async () => {
-	const processes = await getRunningProcesses().catch(handleError)
-	const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)
-
-	currentProcesses.value = processes.map((x) => ({
-		profile: profiles.find((prof) => x.profile_path === prof.path),
-		...x,
-	}))
-	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
-		selectedProcess.value = currentProcesses.value[0]
-	}
-}
-
-await refresh()
-
-const offline = ref(!navigator.onLine)
-window.addEventListener('offline', () => {
-	offline.value = true
-})
-window.addEventListener('online', () => {
-	offline.value = false
-})
-
-const unlistenProcess = await process_listener(async () => {
-	await refresh()
-})
-
-const stop = async (process) => {
-	try {
-		await killProcess(process.uuid).catch(handleError)
-
-		trackEvent('InstanceStop', {
-			loader: process.profile.loader,
-			game_version: process.profile.game_version,
-			source: 'AppBar',
-		})
-	} catch (e) {
-		console.error(e)
-	}
-	await refresh()
-}
-
-const goToTerminal = (path) => {
-	router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
-}
-
-const currentLoadingBars = ref([])
-
-const refreshInfo = async () => {
-	const currentLoadingBarCount = currentLoadingBars.value.length
-	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
-			}
-			if (x.bar_type.profile_path) {
-				x.title = x.bar_type.profile_path
-			}
-			if (x.bar_type.pack_name) {
-				x.title = x.bar_type.pack_name
-			}
-
-			return x
-		})
-		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
-
-	currentLoadingBars.value.sort((a, b) => {
-		if (a.loading_bar_uuid < b.loading_bar_uuid) {
-			return -1
-		}
-		if (a.loading_bar_uuid > b.loading_bar_uuid) {
-			return 1
-		}
-		return 0
-	})
-
-	if (currentLoadingBars.value.length === 0) {
-		showCard.value = false
-	} else if (currentLoadingBarCount < currentLoadingBars.value.length) {
-		showCard.value = true
-	}
-}
-
-await refreshInfo()
-const unlistenLoading = await loading_listener(async () => {
-	await refreshInfo()
-})
-
-const selectProcess = (process) => {
-	selectedProcess.value = process
-	showProfiles.value = false
-}
-
-const handleClickOutsideCard = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		card.value &&
-		card.value.$el !== event.target &&
-		!elements.includes(card.value.$el) &&
-		infoButton.value &&
-		!infoButton.value.contains(event.target)
-	) {
-		showCard.value = false
-	}
-}
-
-const handleClickOutsideProfile = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		profiles.value &&
-		profiles.value.$el !== event.target &&
-		!elements.includes(profiles.value.$el) &&
-		!profileButton.value.contains(event.target)
-	) {
-		showProfiles.value = false
-	}
-}
-
-const toggleCard = async () => {
-	showCard.value = !showCard.value
-	showProfiles.value = false
-	await refreshInfo()
-}
-
-const toggleProfiles = async () => {
-	if (currentProcesses.value.length === 1) return
-	showProfiles.value = !showProfiles.value
-	showCard.value = false
-}
-
-onMounted(() => {
-	window.addEventListener('click', handleClickOutsideCard)
-	window.addEventListener('click', handleClickOutsideProfile)
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener('click', handleClickOutsideCard)
-	window.removeEventListener('click', handleClickOutsideProfile)
-	unlistenProcess()
-	unlistenLoading()
-})
-</script>
-
-<style scoped lang="scss">
-.action-groups {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-md);
-}
-
-.arrow {
-	transition: transform 0.2s ease-in-out;
-	display: flex;
-	align-items: center;
-	&.rotate {
-		transform: rotate(180deg);
-	}
-}
-
-.status {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	border-radius: var(--radius-md);
-	border: 1px solid var(--color-divider);
-	padding: var(--gap-sm) var(--gap-lg);
-}
-
-.running-text {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-xs);
-	white-space: nowrap;
-	overflow: hidden;
-	-webkit-user-select: none; /* Safari */
-	-ms-user-select: none; /* IE 10 and IE 11 */
-	user-select: none;
-
-	&.clickable:hover {
-		cursor: pointer;
-	}
-}
-
-.circle {
-	width: 0.5rem;
-	height: 0.5rem;
-	border-radius: 50%;
-	display: inline-block;
-	margin-right: 0.25rem;
-
-	&.running {
-		background-color: var(--color-brand);
-	}
-
-	&.stopped {
-		background-color: var(--color-base);
-	}
-}
-
-.icon-button {
-	background-color: rgba(0, 0, 0, 0);
-	box-shadow: none;
-	width: 1.25rem !important;
-	height: 1.25rem !important;
-
-	svg {
-		min-width: 1.25rem;
-	}
-
-	&.stop {
-		color: var(--color-red);
-	}
-}
-
-.info-card {
-	position: absolute;
-	top: 3.5rem;
-	right: 2rem;
-	z-index: 9;
-	width: 20rem;
-	background-color: var(--color-raised-bg);
-	box-shadow: var(--shadow-raised);
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	overflow: auto;
-	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-divider);
-
-	&.hidden {
-		transform: translateY(-100%);
-	}
-}
-
-.loading-option {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	margin: 0;
-	padding: 0;
-
-	:hover {
-		background-color: var(--color-raised-bg-hover);
-	}
-}
-
-.loading-text {
-	display: flex;
-	flex-direction: column;
-	margin: 0;
-	padding: 0;
-
-	.row {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 0.5rem;
-	}
-}
-
-.loading-icon {
-	width: 2.25rem;
-	height: 2.25rem;
-	display: block;
-
-	:deep(svg) {
-		left: 1rem;
-		width: 2.25rem;
-		height: 2.25rem;
-	}
-}
-
-.download-enter-active,
-.download-leave-active {
-	transition: opacity 0.3s ease;
-}
-
-.download-enter-from,
-.download-leave-to {
-	opacity: 0;
-}
-
-.progress-bar {
-	width: 100%;
-}
-
-.info-text {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 0.75rem;
-	margin: 0;
-	padding: 0;
-}
-
-.info-title {
-	margin: 0;
-}
-
-.profile-button {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-sm);
-	width: 100%;
-	background-color: var(--color-raised-bg);
-	box-shadow: none;
-
-	.text {
-		margin-right: auto;
-	}
-}
-
-.profile-card {
-	position: absolute;
-	top: 3.5rem;
-	right: 0.5rem;
-	z-index: 9;
-	background-color: var(--color-raised-bg);
-	box-shadow: var(--shadow-raised);
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
-	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-divider);
-	padding: var(--gap-md);
-
-	&.hidden {
-		transform: translateY(-100%);
-	}
-}
-
-.link {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-sm);
-	margin: 0;
-	color: var(--color-text);
-	text-decoration: none;
-}
-</style>
--- a/apps/app-frontend/src/components/ui/WindowControls.vue
+++ b/apps/app-frontend/src/components/ui/WindowControls.vue
@@ -1,18 +1,28 @@
 <template>
-	<section v-if="showControls" class="window-controls" data-tauri-drag-region-exclude>
+	<section
+		v-if="showControls"
+		class="flex items-center gap-2 mr-1.5"
+		data-tauri-drag-region-exclude
+	>
 		<ButtonStyled type="transparent" circular>
-			<button class="titlebar-button" @click="() => getCurrentWindow().minimize()">
+			<button class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
 				<MinimizeIcon />
 			</button>
 		</ButtonStyled>
 		<ButtonStyled type="transparent" circular>
-			<button class="titlebar-button" @click="() => getCurrentWindow().toggleMaximize()">
+			<button class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
 				<RestoreIcon v-if="isMaximized" />
 				<MaximizeIcon v-else />
 			</button>
 		</ButtonStyled>
-		<ButtonStyled type="transparent" circular>
-			<button class="titlebar-button close" @click="handleClose">
+		<ButtonStyled
+			type="transparent"
+			color="red"
+			color-fill="none"
+			hover-color-fill="background"
+			circular
+		>
+			<button class="relative expanded-button" @click="handleClose">
 				<XIcon />
 			</button>
 		</ButtonStyled>
@@ -24,29 +34,24 @@ import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets
 import { ButtonStyled } from '@modrinth/ui'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'

 import { get as getSettings } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils.js'
+import { useTheming } from '@/store/state'

-const WINDOW_CONTROLS_WIDTH = '8rem'
+const themeStore = useTheming()

 const nativeDecorations = ref(true)
 const isMaximized = ref(false)
 const os = ref('')

-const showControls = computed(() => !nativeDecorations.value && os.value !== 'MacOS')
-watch(
-	showControls,
-	(visible) => {
-		if (typeof document === 'undefined') return
-		if (visible) {
-			document.documentElement.style.setProperty('--window-controls-width', WINDOW_CONTROLS_WIDTH)
-		} else {
-			document.documentElement.style.removeProperty('--window-controls-width')
-		}
-	},
-	{ immediate: true },
+const alwaysShowAppControls = computed(() => themeStore.getFeatureFlag('always_show_app_controls'))
+
+const showControls = computed(
+	() =>
+		alwaysShowAppControls.value ||
+		(!nativeDecorations.value && (os.value === 'Windows' || os.value === 'Linux')),
 )

 onMounted(async () => {
@@ -67,7 +72,6 @@ onMounted(async () => {

 	onUnmounted(() => {
 		unlisten()
-		document.documentElement.style.removeProperty('--window-controls-width')
 	})
 })

@@ -76,23 +80,10 @@ const handleClose = async () => {
 	await getCurrentWindow().close()
 }
 </script>
-
-<style lang="scss" scoped>
-.window-controls {
-	position: fixed;
-	top: 0;
-	right: 0;
-	z-index: 10001;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	height: var(--top-bar-height, 3rem);
-	padding-right: 0.5rem;
-	gap: 0.25rem;
-
-	.titlebar-button.close:hover {
-		background-color: var(--color-red);
-		color: var(--color-accent-contrast);
-	}
+<style scoped>
+.expanded-button::before {
+	inset: -6px;
+	content: '';
+	position: absolute;
 }
 </style>
--- a/apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue
@@ -0,0 +1,140 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" :on-hide="reset">
+		<div class="max-w-[31rem] flex flex-col gap-6">
+			<Admonition
+				type="warning"
+				:header="formatMessage(messages.warningTitle)"
+				:body="formatMessage(messages.warningBody)"
+			/>
+			<div v-if="fileName" class="overflow-x-auto whitespace-nowrap text-sm text-secondary">
+				{{ fileName }}
+			</div>
+			<div>
+				<p class="mt-0 leading-tight">
+					{{ formatMessage(messages.body) }}
+				</p>
+				<p class="text-orange font-semibold mb-0 leading-tight">
+					{{ formatMessage(messages.malwareStatement) }}
+				</p>
+			</div>
+			<Checkbox v-model="dontShowAgain" :label="formatMessage(messages.dontShowAgain)" />
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button @click="cancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="orange">
+					<button :disabled="isProceeding" @click="proceed">
+						<SpinnerIcon v-if="isProceeding" class="animate-spin" />
+						<CircleArrowRightIcon v-else />
+						{{ formatMessage(messages.installAnyway) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CircleArrowRightIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref, useTemplateRef } from 'vue'
+
+import { get as getSettings, set as setSettings } from '@/helpers/settings'
+import { useTheming } from '@/store/state'
+import type { FeatureFlag } from '@/store/theme.ts'
+
+const { formatMessage } = useVIntl()
+const themeStore = useTheming()
+const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
+
+const dontShowAgain = ref(false)
+const modal = useTemplateRef('modal')
+const onProceed = ref<() => Promise<void>>()
+const isProceeding = ref(false)
+const fileName = ref('')
+
+const messages = defineMessages({
+	header: {
+		id: 'unknown-pack-warning-modal.header',
+		defaultMessage: 'Confirm installation',
+	},
+	warningTitle: {
+		id: 'unknown-pack-warning-modal.warning.title',
+		defaultMessage: 'Unknown file warning',
+	},
+	warningBody: {
+		id: 'unknown-pack-warning-modal.warning.body',
+		defaultMessage: `We couldn't find this file on Modrinth. We strongly recommend only installing files from sources you trust.`,
+	},
+	body: {
+		id: 'unknown-pack-warning-modal.body',
+		defaultMessage: `A file is only reviewed if it’s uploaded to Modrinth, regardless of its file format (including .mrpack).`,
+	},
+	malwareStatement: {
+		id: 'unknown-pack-warning-modal.malware-statement',
+		defaultMessage: `Malware is often distributed through modpack files by sharing them on platforms like Discord.`,
+	},
+	dontShowAgain: {
+		id: 'unknown-pack-warning-modal.dont-show-again',
+		defaultMessage: `Don't show this warning again`,
+	},
+	installAnyway: {
+		id: 'unknown-pack-warning-modal.install-anyway',
+		defaultMessage: `Install anyway`,
+	},
+})
+
+function show(createInstance: () => Promise<void>, selectedFileName = '') {
+	onProceed.value = createInstance
+	fileName.value = selectedFileName
+	dontShowAgain.value = false
+
+	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
+		// noinspection ES6MissingAwait
+		createInstance()
+		return
+	}
+
+	modal.value?.show()
+}
+
+function reset() {
+	onProceed.value = undefined
+	fileName.value = ''
+}
+
+function cancel() {
+	modal.value?.hide()
+}
+
+async function proceed() {
+	if (!onProceed.value) {
+		return
+	}
+
+	if (dontShowAgain.value) {
+		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
+		const settings = await getSettings()
+		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
+		await setSettings(settings)
+	}
+
+	const createInstance = onProceed.value
+	modal.value?.hide()
+	// noinspection ES6MissingAwait
+	createInstance()
+}
+
+defineExpose({ show })
+</script>
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -31,7 +31,7 @@ const props = defineProps({
 const modal = useTemplateRef('modal')

 defineExpose({
-	show: (e: MouseEvent) => {
+	show: (e?: MouseEvent) => {
 		modal.value?.show(e)
 	},
 	hide: () => {
--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -1,13 +1,106 @@
 <script setup lang="ts">
-import { Combobox, ThemeSelector, Toggle } from '@modrinth/ui'
+import { Combobox, defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
 import { ref, watch } from 'vue'

 import { get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
 import { useTheming } from '@/store/state'
-import type { ColorTheme } from '@/store/theme.ts'
+import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'

 const themeStore = useTheming()
+const { formatMessage } = useVIntl()
+
+const worldsInHomeFeatureFlag = 'worlds_in_home' as FeatureFlag
+const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
+
+const messages = defineMessages({
+	colorThemeTitle: {
+		id: 'app.appearance-settings.color-theme.title',
+		defaultMessage: 'Color theme',
+	},
+	colorThemeDescription: {
+		id: 'app.appearance-settings.color-theme.description',
+		defaultMessage: 'Select your preferred color theme for Modrinth App.',
+	},
+	advancedRenderingTitle: {
+		id: 'app.appearance-settings.advanced-rendering.title',
+		defaultMessage: 'Advanced rendering',
+	},
+	advancedRenderingDescription: {
+		id: 'app.appearance-settings.advanced-rendering.description',
+		defaultMessage:
+			'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
+	},
+	hideNametagTitle: {
+		id: 'app.appearance-settings.hide-nametag.title',
+		defaultMessage: 'Hide nametag',
+	},
+	hideNametagDescription: {
+		id: 'app.appearance-settings.hide-nametag.description',
+		defaultMessage: 'Disables the nametag above your player on the skins page.',
+	},
+	nativeDecorationsTitle: {
+		id: 'app.appearance-settings.native-decorations.title',
+		defaultMessage: 'Native decorations',
+	},
+	nativeDecorationsDescription: {
+		id: 'app.appearance-settings.native-decorations.description',
+		defaultMessage: 'Use system window frame (app restart required).',
+	},
+	minimizeLauncherTitle: {
+		id: 'app.appearance-settings.minimize-launcher.title',
+		defaultMessage: 'Minimize launcher',
+	},
+	minimizeLauncherDescription: {
+		id: 'app.appearance-settings.minimize-launcher.description',
+		defaultMessage: 'Minimize the launcher when a Minecraft process starts.',
+	},
+	defaultLandingPageTitle: {
+		id: 'app.appearance-settings.default-landing-page.title',
+		defaultMessage: 'Default landing page',
+	},
+	defaultLandingPageDescription: {
+		id: 'app.appearance-settings.default-landing-page.description',
+		defaultMessage: 'Change the page to which the launcher opens on.',
+	},
+	defaultLandingPageHome: {
+		id: 'app.appearance-settings.default-landing-page.home',
+		defaultMessage: 'Home',
+	},
+	defaultLandingPageLibrary: {
+		id: 'app.appearance-settings.default-landing-page.library',
+		defaultMessage: 'Library',
+	},
+	selectOption: {
+		id: 'app.appearance-settings.select-option',
+		defaultMessage: 'Select an option',
+	},
+	jumpBackIntoWorldsTitle: {
+		id: 'app.appearance-settings.jump-back-into-worlds.title',
+		defaultMessage: 'Jump back into worlds',
+	},
+	jumpBackIntoWorldsDescription: {
+		id: 'app.appearance-settings.jump-back-into-worlds.description',
+		defaultMessage: 'Includes recent worlds in the "Jump back in" section on the Home page.',
+	},
+	toggleSidebarTitle: {
+		id: 'app.appearance-settings.toggle-sidebar.title',
+		defaultMessage: 'Toggle sidebar',
+	},
+	toggleSidebarDescription: {
+		id: 'app.appearance-settings.toggle-sidebar.description',
+		defaultMessage: 'Enables the ability to toggle the sidebar.',
+	},
+	unknownPackWarningTitle: {
+		id: 'app.appearance-settings.unknown-pack-warning.title',
+		defaultMessage: 'Warn me before installing unknown modpacks',
+	},
+	unknownPackWarningDescription: {
+		id: 'app.appearance-settings.unknown-pack-warning.description',
+		defaultMessage:
+			"If you attempt to install a Modrinth Pack file (.mrpack) that isn't hosted on Modrinth, we'll make sure you understand the risks before installing it.",
+	},
+})

 const os = ref(await getOS())
 const settings = ref(await get())
@@ -21,8 +114,10 @@ watch(
 )
 </script>
 <template>
-	<h2 class="m-0 text-lg font-semibold text-contrast">Color theme</h2>
-	<p class="m-0 mt-1">Select your preferred color theme for Modrinth App.</p>
+	<h2 class="m-0 text-lg font-semibold text-contrast">
+		{{ formatMessage(messages.colorThemeTitle) }}
+	</h2>
+	<p class="m-0 mt-1">{{ formatMessage(messages.colorThemeDescription) }}</p>

 	<ThemeSelector
 		:update-color-theme="
@@ -38,10 +133,11 @@ watch(

 	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Advanced rendering</h2>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.advancedRenderingTitle) }}
+			</h2>
 			<p class="m-0 mt-1">
-				Enables advanced rendering such as blur effects that may cause performance issues without
-				hardware-accelerated rendering.
+				{{ formatMessage(messages.advancedRenderingDescription) }}
 			</p>
 		</div>

@@ -59,55 +155,94 @@ watch(

 	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Hide nametag</h2>
-			<p class="m-0 mt-1">Disables the nametag above your player on the skins page.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.hideNametagTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
 		</div>
 		<Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
 	</div>

 	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Native decorations</h2>
-			<p class="m-0 mt-1">Use system window frame (app restart required).</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.nativeDecorationsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.nativeDecorationsDescription) }}</p>
 		</div>
 		<Toggle id="native-decorations" v-model="settings.native_decorations" />
 	</div>

 	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Minimize launcher</h2>
-			<p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.minimizeLauncherTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.minimizeLauncherDescription) }}</p>
 		</div>
 		<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
 	</div>

 	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Default landing page</h2>
-			<p class="m-0 mt-1">Change the page to which the launcher opens on.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.defaultLandingPageTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.defaultLandingPageDescription) }}</p>
 		</div>
 		<Combobox
 			id="opening-page"
 			v-model="settings.default_page"
 			name="Opening page dropdown"
 			class="max-w-40"
-			:options="['Home', 'Library'].map((v) => ({ value: v, label: v }))"
+			:options="[
+				{
+					value: 'Home',
+					label: formatMessage(messages.defaultLandingPageHome),
+				},
+				{
+					value: 'Library',
+					label: formatMessage(messages.defaultLandingPageLibrary),
+				},
+			]"
 			:display-value="settings.default_page ?? 'Select an option'"
 		/>
 	</div>

 	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Jump back into worlds</h2>
-			<p class="m-0 mt-1">Includes recent worlds in the "Jump back in" section on the Home page.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.jumpBackIntoWorldsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}</p>
 		</div>
 		<Toggle
-			:model-value="themeStore.getFeatureFlag('worlds_in_home')"
+			:model-value="themeStore.getFeatureFlag(worldsInHomeFeatureFlag)"
 			@update:model-value="
 				() => {
-					const newValue = !themeStore.getFeatureFlag('worlds_in_home')
-					themeStore.featureFlags['worlds_in_home'] = newValue
-					settings.feature_flags['worlds_in_home'] = newValue
+					const newValue = !themeStore.getFeatureFlag(worldsInHomeFeatureFlag)
+					themeStore.featureFlags[worldsInHomeFeatureFlag] = newValue
+					settings.feature_flags[worldsInHomeFeatureFlag] = newValue
+				}
+			"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between gap-4">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.unknownPackWarningTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.unknownPackWarningDescription) }}</p>
+		</div>
+		<Toggle
+			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)"
+			@update:model-value="
+				(e) => {
+					const warnBeforeUnknownPackInstall = !!e
+					const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
+					themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
+					settings.feature_flags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
 				}
 			"
 		/>
@@ -115,8 +250,10 @@ watch(

 	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Toggle sidebar</h2>
-			<p class="m-0 mt-1">Enables the ability to toggle the sidebar.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.toggleSidebarTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.toggleSidebarDescription) }}</p>
 		</div>
 		<Toggle
 			id="toggle-sidebar"
--- a/apps/app-frontend/src/helpers/pack.ts
+++ b/apps/app-frontend/src/helpers/pack.ts
@@ -8,6 +8,7 @@ interface PackProfileCreator {
 	gameVersion: string
 	modloader: InstanceLoader
 	loaderVersion: string | null
+	unknownFile: boolean
 }

 interface PackLocationVersionId {
@@ -69,7 +70,10 @@ export async function install_to_existing_profile(
 	return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
 }

-export async function create_profile_and_install_from_file(path: string): Promise<void> {
+export async function create_profile_and_install_from_file(
+	path: string,
+	showUnknownPackWarningModal?: (createProfile: () => Promise<void>, fileName: string) => void,
+): Promise<void> {
 	const location: PackLocationFile = {
 		type: 'fromFile',
 		path,
@@ -78,13 +82,24 @@ export async function create_profile_and_install_from_file(path: string): Promis
 		'plugin:pack|pack_get_profile_from_pack',
 		{ location },
 	)
-	const profile = await create(
-		profile_creator.name,
-		profile_creator.gameVersion,
-		profile_creator.modloader,
-		profile_creator.loaderVersion,
-		null,
-		true,
-	)
-	return await invoke('plugin:pack|pack_install', { location, profile })
+
+	const createProfile = async () => {
+		const profile = await create(
+			profile_creator.name,
+			profile_creator.gameVersion,
+			profile_creator.modloader,
+			profile_creator.loaderVersion,
+			null,
+			true,
+		)
+		await invoke('plugin:pack|pack_install', { location, profile })
+	}
+
+	if (profile_creator.unknownFile && showUnknownPackWarningModal) {
+		const splitPath = path.split(/[\\/]/)
+		const fileName = splitPath ? splitPath[splitPath.length - 1] : path
+		showUnknownPackWarningModal(createProfile, fileName)
+	} else {
+		await createProfile()
+	}
 }
--- a/apps/app-frontend/src/helpers/state.ts
+++ b/apps/app-frontend/src/helpers/state.ts
@@ -5,15 +5,46 @@
 */
 import { invoke } from '@tauri-apps/api/core'

+export interface LoadingBarType {
+	type?: string
+	version?: string
+	profile_path?: string
+	pack_name?: string
+}
+
+export interface LoadingBar {
+	id?: string | number
+	loading_bar_uuid?: string | number
+	title?: string
+	message?: string
+	current?: number
+	total?: number
+	bar_type?: LoadingBarType
+}
+
+export type OpeningCommandEvent =
+	| 'RunMRPack'
+	| 'InstallServer'
+	| 'InstallVersion'
+	| 'InstallMod'
+	| 'InstallModpack'
+	| string
+
+export interface OpeningCommand {
+	event: OpeningCommandEvent
+	id?: string
+	path?: string
+}
+
 // Initialize the theseus API state
 // This should be called during the initializion/opening of the launcher
 export async function initialize_state() {
-	return await invoke('initialize_state')
+	return await invoke<void>('initialize_state')
 }

 // Gets active progress bars
 export async function progress_bars_list() {
-	return await invoke('plugin:utils|progress_bars_list')
+	return await invoke<Record<string, LoadingBar>>('plugin:utils|progress_bars_list')
 }

 // Get opening command
@@ -21,5 +52,5 @@ export async function progress_bars_list() {
 // This should be called once and only when the app is done booting up and ready to receive a command
 // Returns a Command struct- see events.js
 export async function get_opening_command() {
-	return await invoke('plugin:utils|get_opening_command')
+	return await invoke<OpeningCommand | null>('plugin:utils|get_opening_command')
 }
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -1,4 +1,103 @@
 {
+  "app.action-bar.downloading-java": {
+    "message": "Downloading Java {version}"
+  },
+  "app.action-bar.downloads": {
+    "message": "Downloads"
+  },
+  "app.action-bar.hide-more-running-instances": {
+    "message": "Hide more running instances"
+  },
+  "app.action-bar.make-primary-instance": {
+    "message": "Make primary instance"
+  },
+  "app.action-bar.no-instances-running": {
+    "message": "No instances running"
+  },
+  "app.action-bar.offline": {
+    "message": "Offline"
+  },
+  "app.action-bar.primary-instance": {
+    "message": "Primary instance"
+  },
+  "app.action-bar.show-more-running-instances": {
+    "message": "Show more running instances"
+  },
+  "app.action-bar.stop-instance": {
+    "message": "Stop instance"
+  },
+  "app.action-bar.view-active-downloads": {
+    "message": "View active downloads"
+  },
+  "app.action-bar.view-instance": {
+    "message": "View instance"
+  },
+  "app.action-bar.view-logs": {
+    "message": "View logs"
+  },
+  "app.appearance-settings.advanced-rendering.description": {
+    "message": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
+  },
+  "app.appearance-settings.advanced-rendering.title": {
+    "message": "Advanced rendering"
+  },
+  "app.appearance-settings.color-theme.description": {
+    "message": "Select your preferred color theme for Modrinth App."
+  },
+  "app.appearance-settings.color-theme.title": {
+    "message": "Color theme"
+  },
+  "app.appearance-settings.default-landing-page.description": {
+    "message": "Change the page to which the launcher opens on."
+  },
+  "app.appearance-settings.default-landing-page.home": {
+    "message": "Home"
+  },
+  "app.appearance-settings.default-landing-page.library": {
+    "message": "Library"
+  },
+  "app.appearance-settings.default-landing-page.title": {
+    "message": "Default landing page"
+  },
+  "app.appearance-settings.hide-nametag.description": {
+    "message": "Disables the nametag above your player on the skins page."
+  },
+  "app.appearance-settings.hide-nametag.title": {
+    "message": "Hide nametag"
+  },
+  "app.appearance-settings.jump-back-into-worlds.description": {
+    "message": "Includes recent worlds in the \"Jump back in\" section on the Home page."
+  },
+  "app.appearance-settings.jump-back-into-worlds.title": {
+    "message": "Jump back into worlds"
+  },
+  "app.appearance-settings.minimize-launcher.description": {
+    "message": "Minimize the launcher when a Minecraft process starts."
+  },
+  "app.appearance-settings.minimize-launcher.title": {
+    "message": "Minimize launcher"
+  },
+  "app.appearance-settings.native-decorations.description": {
+    "message": "Use system window frame (app restart required)."
+  },
+  "app.appearance-settings.native-decorations.title": {
+    "message": "Native decorations"
+  },
+  "app.appearance-settings.select-option": {
+    "message": "Select an option"
+  },
+  "app.appearance-settings.toggle-sidebar.description": {
+    "message": "Enables the ability to toggle the sidebar."
+  },
+  "app.appearance-settings.toggle-sidebar.title": {
+    "message": "Toggle sidebar"
+  },
+  "app.appearance-settings.unknown-pack-warning.description": {
+    "message": "If you attempt to install a Modrinth Pack file (.mrpack) that isn't hosted on Modrinth, we'll make sure you understand the risks before installing it."
+  },
+  "app.appearance-settings.unknown-pack-warning.title": {
+    "message": "Warn me before installing unknown modpacks"
+  },
  "app.auth-servers.unreachable.body": {
    "message": "Minecraft authentication servers may be down right now. Check your internet connection and try again later."
  },
@@ -50,6 +149,12 @@
  "app.browse.server.installing": {
    "message": "Installing"
  },
+  "app.creation-modal.installing-modpack.description": {
+    "message": "{fileName}"
+  },
+  "app.creation-modal.installing-modpack.title": {
+    "message": "Installing modpack..."
+  },
  "app.export-modal.description-placeholder": {
    "message": "Enter modpack description..."
  },
@@ -610,5 +715,26 @@
  },
  "search.filter.locked.server-loader.title": {
    "message": "Loader is provided by the server"
+  },
+  "unknown-pack-warning-modal.body": {
+    "message": "A file is only reviewed if it’s uploaded to Modrinth, regardless of its file format (including .mrpack)."
+  },
+  "unknown-pack-warning-modal.dont-show-again": {
+    "message": "Don't show this warning again"
+  },
+  "unknown-pack-warning-modal.header": {
+    "message": "Confirm installation"
+  },
+  "unknown-pack-warning-modal.install-anyway": {
+    "message": "Install anyway"
+  },
+  "unknown-pack-warning-modal.malware-statement": {
+    "message": "Malware is often distributed through modpack files by sharing them on platforms like Discord."
+  },
+  "unknown-pack-warning-modal.warning.body": {
+    "message": "We couldn't find this file on Modrinth. We strongly recommend only installing files from sources you trust."
+  },
+  "unknown-pack-warning-modal.warning.title": {
+    "message": "Unknown file warning"
  }
 }
--- a/apps/app-frontend/src/providers/setup.ts
+++ b/apps/app-frontend/src/providers/setup.ts
@@ -1,16 +1,19 @@
-import type { AbstractWebNotificationManager } from '@modrinth/ui'
+import type { AbstractPopupNotificationManager, AbstractWebNotificationManager } from '@modrinth/ui'

 import { setupCreationModal } from './setup/creation-modal'
 import { setupFilePickerProvider } from './setup/file-picker'
 import { setupInstanceImportProvider } from './setup/instance-import'
 import { setupTagsProvider } from './setup/tags'

-export function setupProviders(notificationManager: AbstractWebNotificationManager) {
+export function setupProviders(
+	notificationManager: AbstractWebNotificationManager,
+	popupNotificationManager: AbstractPopupNotificationManager,
+) {
 	setupTagsProvider(notificationManager)
 	setupFilePickerProvider()
 	setupInstanceImportProvider(notificationManager)

 	return {
-		...setupCreationModal(notificationManager),
+		...setupCreationModal(notificationManager, popupNotificationManager),
 	}
 }
--- a/apps/app-frontend/src/providers/setup/creation-modal.ts
+++ b/apps/app-frontend/src/providers/setup/creation-modal.ts
@@ -1,12 +1,15 @@
 import type {
+	AbstractPopupNotificationManager,
 	AbstractWebNotificationManager,
 	CreationFlowContextValue,
 	CreationFlowModal,
 } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@modrinth/ui'
 import { provide, ref, useTemplateRef } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { useRouter } from 'vue-router'

+import type UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import type ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyInstalledModal.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_search_results } from '@/helpers/cache.js'
@@ -16,12 +19,29 @@ import { create_profile_and_install, create_profile_and_install_from_file } from
 import { create, list } from '@/helpers/profile.js'
 import type { InstanceLoader } from '@/helpers/types'

-export function setupCreationModal(notificationManager: AbstractWebNotificationManager) {
+export function setupCreationModal(
+	notificationManager: AbstractWebNotificationManager,
+	popupNotificationManager: AbstractPopupNotificationManager,
+) {
 	const { handleError } = notificationManager
+	const { formatMessage } = useVIntl()
 	const router = useRouter()

+	const messages = defineMessages({
+		installingModpackTitle: {
+			id: 'app.creation-modal.installing-modpack.title',
+			defaultMessage: 'Installing modpack...',
+		},
+		installingModpackDescription: {
+			id: 'app.creation-modal.installing-modpack.description',
+			defaultMessage: '{fileName}',
+		},
+	})
+
 	const installationModal =
 		useTemplateRef<ComponentExposed<typeof CreationFlowModal>>('installationModal')
+	const unknownPackWarningModal =
+		useTemplateRef<InstanceType<typeof UnknownPackWarningModal>>('unknownPackWarningModal')
 	const modpackAlreadyInstalledModal = ref<InstanceType<typeof ModpackAlreadyInstalledModal>>()

 	function setModpackAlreadyInstalledModal(
@@ -88,7 +108,24 @@ export function setupCreationModal(notificationManager: AbstractWebNotificationM
 			}

 			if (config.modpackFilePath.value) {
-				await create_profile_and_install_from_file(config.modpackFilePath.value).catch(handleError)
+				const waitingNotification = popupNotificationManager.addPopupNotification({
+					title: formatMessage(messages.installingModpackTitle),
+					text: formatMessage(messages.installingModpackDescription, {
+						fileName: config.modpackFilePath.value.split('/').pop() ?? config.modpackFilePath.value,
+					}),
+					type: 'info',
+					autoCloseMs: null,
+					waiting: true,
+				})
+
+				await create_profile_and_install_from_file(
+					config.modpackFilePath.value,
+					(createProfile, fileName) => {
+						popupNotificationManager.removeNotification(waitingNotification.id)
+						unknownPackWarningModal.value?.show(createProfile, fileName)
+					},
+				).catch(handleError)
+				popupNotificationManager.removeNotification(waitingNotification.id)
 				trackEvent('InstanceCreate', { source: 'CreationModalModpackFile' })
 				return
 			}
@@ -161,6 +198,7 @@ export function setupCreationModal(notificationManager: AbstractWebNotificationM

 	return {
 		installationModal,
+		unknownPackWarningModal,
 		fetchExistingInstanceNames,
 		handleCreate,
 		handleBrowseModpacks,
--- a/apps/app-frontend/src/store/theme.ts
+++ b/apps/app-frontend/src/store/theme.ts
@@ -7,6 +7,8 @@ export const DEFAULT_FEATURE_FLAGS = {
 	worlds_in_home: true,
 	server_project_qa: false,
 	server_ram_as_bytes_always_on: false,
+	always_show_app_controls: false,
+	skip_unknown_pack_warning: false,
 	i18n_debug: false,
 }

--- a/apps/app/src/api/pack.rs
+++ b/apps/app/src/api/pack.rs
@@ -26,8 +26,8 @@ pub async fn pack_install(
 }

 #[tauri::command]
-pub fn pack_get_profile_from_pack(
+pub async fn pack_get_profile_from_pack(
    location: CreatePackLocation,
 ) -> Result<CreatePackProfile> {
-    Ok(pack::install_from::get_profile_from_pack(location))
+    Ok(pack::install_from::get_profile_from_pack(location).await?)
 }
--- a/packages/app-lib/src/api/pack/install_from.rs
+++ b/packages/app-lib/src/api/pack/install_from.rs
@@ -108,6 +108,7 @@ pub struct CreatePackProfile {
    pub icon: Option<PathBuf>,          // the icon for the profile
    pub icon_url: Option<String>, // the URL icon for a profile (ONLY USED FOR TEMPORARY PROFILES)
    pub linked_data: Option<LinkedData>, // the linked project ID (mainly for modpacks)- used for updating
+    pub unknown_file: bool, // true when pack file isn't found on Modrinth via hash lookup
    pub skip_install_profile: Option<bool>,
    pub no_watch: Option<bool>,
 }
@@ -123,6 +124,7 @@ impl Default for CreatePackProfile {
            icon: None,
            icon_url: None,
            linked_data: None,
+            unknown_file: false,
            skip_install_profile: Some(true),
            no_watch: Some(false),
        }
@@ -145,16 +147,16 @@ pub struct CreatePackDescription {
    pub profile_path: String,
 }

-pub fn get_profile_from_pack(
+pub async fn get_profile_from_pack(
    location: CreatePackLocation,
-) -> CreatePackProfile {
+) -> crate::Result<CreatePackProfile> {
    match location {
        CreatePackLocation::FromVersionId {
            project_id,
            version_id,
            title,
            icon_url,
-        } => CreatePackProfile {
+        } => Ok(CreatePackProfile {
            name: title,
            icon_url,
            linked_data: Some(LinkedData {
@@ -163,7 +165,7 @@ pub fn get_profile_from_pack(
                locked: true,
            }),
            ..Default::default()
-        },
+        }),
        CreatePackLocation::FromFile { path } => {
            let file_name = path
                .file_stem()
@@ -171,10 +173,35 @@ pub fn get_profile_from_pack(
                .to_string_lossy()
                .to_string();

-            CreatePackProfile {
+            let state = State::get().await?;
+            let file_bytes = io::read(&path).await?;
+            let hash =
+                crate::util::fetch::sha1_async(bytes::Bytes::from(file_bytes))
+                    .await?;
+            let is_known_file = match CachedEntry::get_file_many(
+                &[&hash],
+                Some(CacheBehaviour::StaleWhileRevalidateSkipOffline),
+                &state.pool,
+                &state.api_semaphore,
+            )
+            .await
+            {
+                Ok(files) => !files.is_empty(),
+                Err(err) => {
+                    tracing::warn!(
+                        "Failed to check Modrinth file hash for {}: {}",
+                        path.display(),
+                        err
+                    );
+                    false
+                }
+            };
+
+            Ok(CreatePackProfile {
                name: file_name,
+                unknown_file: !is_known_file,
                ..Default::default()
-            }
+            })
        }
    }
 }
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -56,6 +56,8 @@ pub enum FeatureFlag {
    WorldsTab,
    WorldsInHome,
    ServerRamAsBytesAlwaysOn,
+    AlwaysShowAppControls,
+    SkipUnknownPackWarning,
    ServersInApp,
    ServerProjectQa,
    I18nDebug,
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -3,6 +3,8 @@

 import type { FunctionalComponent, SVGAttributes } from 'vue'

+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -51,6 +53,7 @@ import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _ChevronUpIcon from './icons/chevron-up.svg?component'
 import _CircleAlertIcon from './icons/circle-alert.svg?component'
+import _CircleArrowRightIcon from './icons/circle-arrow-right.svg?component'
 import _CircleUserIcon from './icons/circle-user.svg?component'
 import _ClearIcon from './icons/clear.svg?component'
 import _ClientIcon from './icons/client.svg?component'
@@ -392,8 +395,6 @@ import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'

-export type IconComponent = FunctionalComponent<SVGAttributes>
-
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
@@ -442,6 +443,7 @@ export const ChevronLeftIcon = _ChevronLeftIcon
 export const ChevronRightIcon = _ChevronRightIcon
 export const ChevronUpIcon = _ChevronUpIcon
 export const CircleAlertIcon = _CircleAlertIcon
+export const CircleArrowRightIcon = _CircleArrowRightIcon
 export const CircleUserIcon = _CircleUserIcon
 export const ClearIcon = _ClearIcon
 export const ClientIcon = _ClientIcon
--- a/packages/assets/icons/circle-arrow-right.svg
+++ b/packages/assets/icons/circle-arrow-right.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-circle-arrow-right"
+  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"
+>
+  <circle cx="12" cy="12" r="10" />
+  <path d="m12 16 4-4-4-4" />
+  <path d="M8 12h8" />
+</svg>
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -204,9 +204,6 @@ const colorVariables = computed(() => {

 	if (props.type === 'outlined' || props.type === 'transparent') {
 		colors.bg = 'transparent'
-		if (props.hoverColorFill === 'none') {
-			hoverColors.bg = 'transparent'
-		}
 		colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
 		hoverColors = setColorFill(
 			hoverColors,
@@ -245,7 +242,7 @@ const fontSize = computed(() => {
 	<div
 		class="btn-wrapper"
 		:class="[{ outline: type === 'outlined', chip: type === 'chip' }, fontSize]"
-		:style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};`"
+		:style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};--_outline-color:${color === 'standard' && type === 'outlined' ? 'var(--surface-5)' : 'currentColor'}`"
 	>
 		<slot />
 	</div>
@@ -266,10 +263,8 @@ const fontSize = computed(() => {
 	> *:first-child
 	> *:first-child
 	> :is(button, a, .button-like):first-child {
-	@apply flex cursor-pointer flex-row items-center justify-center border-solid border border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
+	@apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
 	box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
-	-webkit-font-smoothing: antialiased;
-	will-change: filter;
 	transition:
 		scale 0.125s ease-in-out,
 		background-color 0.25s ease-in-out,
@@ -328,7 +323,7 @@ const fontSize = computed(() => {
 	> *:first-child
 	> *:first-child
 	> :is(button, a, .button-like):first-child {
-	@apply border-current;
+	@apply border-[--_outline-color,currentColor];
 }

 /*noinspection CssUnresolvedCustomProperty*/
--- a/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
@@ -95,11 +95,11 @@ const messages = defineMessages({
 	},
 	modpackBaseTitle: {
 		id: 'creation-flow.modal.setup-type.option.modpack-base.title',
-		defaultMessage: 'Modpack base',
+		defaultMessage: 'Install modpack',
 	},
 	modpackBaseDescription: {
 		id: 'creation-flow.modal.setup-type.option.modpack-base.description',
-		defaultMessage: 'Use a popular modpack or upload one as your starting point.',
+		defaultMessage: 'Browse modpacks on Modrinth or import one from a file.',
 	},
 	importInstanceTitle: {
 		id: 'creation-flow.modal.setup-type.option.import-instance.title',
--- a/packages/ui/src/components/nav/PopupNotificationPanel.vue
+++ b/packages/ui/src/components/nav/PopupNotificationPanel.vue
@@ -24,11 +24,15 @@
 									:class="{
 										'text-red': item.type === 'error',
 										'text-orange': item.type === 'warning',
+										'text-green': item.type === 'download',
 										'text-contrast': item.type === 'success',
-										'text-blue': !item.type || !['error', 'warning', 'success'].includes(item.type),
+										'text-blue':
+											!item.type ||
+											!['error', 'warning', 'success', 'download'].includes(item.type),
 									}"
 								>
 									<IssuesIcon v-if="item.type === 'warning'" class="h-5 w-5" />
+									<DownloadIcon v-else-if="item.type === 'download'" class="h-5 w-5" />
 									<CheckCircleIcon v-else-if="item.type === 'success'" class="h-5 w-5" />
 									<XCircleIcon v-else-if="item.type === 'error'" class="h-5 w-5" />
 									<InfoIcon v-else class="h-5 w-5" />
@@ -47,6 +51,37 @@
 							{{ item.text }}
 						</span>
 					</div>
+					<div v-if="item.progressItems?.length" class="flex flex-col gap-3">
+						<div
+							v-for="progressItem in item.progressItems"
+							:key="progressItem.id"
+							class="flex flex-col gap-2"
+						>
+							<div class="text-contrast truncate">
+								{{ progressItem.title }}
+							</div>
+							<ProgressBar
+								:progress="progressItem.progress"
+								:max="1"
+								:waiting="progressItem.waiting"
+								:color="progressColorForType(item.type)"
+								:gradient-border="false"
+								full-width
+							/>
+							<div v-if="progressItem.text" class="text-sm text-secondary truncate">
+								{{ progressItem.text }}
+							</div>
+						</div>
+					</div>
+					<ProgressBar
+						v-else-if="item.progress != null || item.waiting"
+						:progress="item.progress ?? 0"
+						:max="1"
+						:waiting="item.waiting ?? false"
+						:color="progressColorForType(item.type)"
+						:gradient-border="false"
+						full-width
+					/>
 					<div v-if="item.buttons?.length" class="flex gap-1.5">
 						<ButtonStyled
 							v-for="(btn, idx) in item.buttons"
@@ -65,7 +100,14 @@
 </template>

 <script setup lang="ts">
-import { CheckCircleIcon, InfoIcon, IssuesIcon, XCircleIcon, XIcon } from '@modrinth/assets'
+import {
+	CheckCircleIcon,
+	DownloadIcon,
+	InfoIcon,
+	IssuesIcon,
+	XCircleIcon,
+	XIcon,
+} from '@modrinth/assets'
 import { computed } from 'vue'

 import {
@@ -74,6 +116,7 @@ import {
 	type PopupNotificationButton,
 } from '../../providers'
 import ButtonStyled from '../base/ButtonStyled.vue'
+import ProgressBar from '../base/ProgressBar.vue'

 const popupNotificationManager = injectPopupNotificationManager()
 const notifications = computed<PopupNotification[]>(() =>
@@ -90,6 +133,21 @@ function handleButtonClick(id: string | number, btn: PopupNotificationButton) {
 	popupNotificationManager.removeNotification(id)
 }

+function progressColorForType(type: PopupNotification['type']) {
+	if (type === 'error') {
+		return 'red'
+	} else if (type === 'warning') {
+		return 'orange'
+	} else if (type === 'download') {
+		return 'green'
+	} else if (type === 'success') {
+		return 'green'
+	} else if (type === 'info') {
+		return 'blue'
+	}
+	return 'green'
+}
+
 withDefaults(
 	defineProps<{
 		hasSidebar?: boolean
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -720,10 +720,10 @@
    "defaultMessage": "Import instance"
  },
  "creation-flow.modal.setup-type.option.modpack-base.description": {
-    "defaultMessage": "Use a popular modpack or upload one as your starting point."
+    "defaultMessage": "Browse modpacks on Modrinth or import one from a file."
  },
  "creation-flow.modal.setup-type.option.modpack-base.title": {
-    "defaultMessage": "Modpack base"
+    "defaultMessage": "Install modpack"
  },
  "creation-flow.modal.setup-type.option.vanilla-minecraft.description": {
    "defaultMessage": "Classic Minecraft with no mods or plugins."
--- a/packages/ui/src/providers/popup-notifications.ts
+++ b/packages/ui/src/providers/popup-notifications.ts
@@ -6,11 +6,22 @@ export interface PopupNotificationButton {
 	color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'standard'
 }

+export interface PopupNotificationProgressItem {
+	id: string
+	title: string
+	text?: string
+	progress: number
+	waiting: boolean
+}
+
 export interface PopupNotification {
 	id: string | number
 	title: string
 	text?: string
-	type?: 'error' | 'warning' | 'success' | 'info'
+	type?: 'error' | 'warning' | 'success' | 'info' | 'download'
+	progress?: number
+	waiting?: boolean
+	progressItems?: PopupNotificationProgressItem[]
 	buttons?: PopupNotificationButton[]
 	autoCloseMs?: number | null
 	timer?: NodeJS.Timeout
--- a/packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts
+++ b/packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts
@@ -107,6 +107,57 @@ export const Default: StoryObj = {
 				})
 			}

+			const showWaitingProgress = () => {
+				popupManager.addPopupNotification({
+					title: 'Installing modpack...',
+					text: 'example-pack-1.0.0.mrpack',
+					type: 'info',
+					autoCloseMs: null,
+					waiting: true,
+				})
+			}
+
+			const showDeterminateProgress = () => {
+				popupManager.addPopupNotification({
+					title: 'Downloading update',
+					text: 'Downloading files...',
+					type: 'success',
+					autoCloseMs: null,
+					progress: 0.62,
+				})
+			}
+
+			const showGroupedDownloads = () => {
+				popupManager.addPopupNotification({
+					title: 'Downloads',
+					type: 'download',
+					autoCloseMs: null,
+					progressItems: [
+						{
+							id: 'java-21',
+							title: 'Downloading Java 21',
+							text: '42% Downloading runtime',
+							progress: 0.42,
+							waiting: false,
+						},
+						{
+							id: 'pack-nebula',
+							title: 'Nebula Pack',
+							text: '8% Resolving files',
+							progress: 0.08,
+							waiting: false,
+						},
+						{
+							id: 'assets',
+							title: 'Assets',
+							text: 'Preparing...',
+							progress: 0,
+							waiting: true,
+						},
+					],
+				})
+			}
+
 			const clearAll = () => {
 				popupManager.clearAllNotifications()
 			}
@@ -118,6 +169,9 @@ export const Default: StoryObj = {
 				showInfo,
 				showNoButtons,
 				showPermanent,
+				showWaitingProgress,
+				showDeterminateProgress,
+				showGroupedDownloads,
 				clearAll,
 			}
 		},
@@ -142,6 +196,15 @@ export const Default: StoryObj = {
 					<ButtonStyled>
 						<button @click="showPermanent">Permanent</button>
 					</ButtonStyled>
+					<ButtonStyled>
+						<button @click="showWaitingProgress">Waiting Progress</button>
+					</ButtonStyled>
+					<ButtonStyled>
+						<button @click="showDeterminateProgress">Determinate Progress</button>
+					</ButtonStyled>
+					<ButtonStyled>
+						<button @click="showGroupedDownloads">Grouped Downloads</button>
+					</ButtonStyled>
 					<ButtonStyled>
 						<button @click="clearAll">Clear All</button>
 					</ButtonStyled>