fix: qa

This reverts commit 96d65902d7.

.github/workflows/theseus-build.yml

@@ -74,10 +74,10 @@ jobs:
         uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
         with:
           rustflags: ''
-          target: ${{ contains(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
+          target: ${{ contains(matrix.artifact-target-name, 'darwin') && 'x86_64-apple-darwin' || '' }}
 
       - name: Setup mold
-        if: contains(matrix.platform, 'ubuntu')
+        if: contains(matrix.artifact-target-name, 'linux')
         uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
 
       - name: Setup sccache
@@ -92,7 +92,6 @@ jobs:
         run: corepack enable
 
       - name: Set up caches
-        if: contains(matrix.platform, 'ubuntu') || contains(matrix.platform, 'macos')
         uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
         with:
           cache: |
@@ -100,7 +99,6 @@ jobs:
             pnpm
 
       - name: Configure sccache
-        if: contains(matrix.platform, 'ubuntu') || contains(matrix.platform, 'macos')
         run: nsc cache sccache setup --cache_name default >> "$GITHUB_ENV"
 
       - name: Generate tauri-dev.conf.json
@@ -119,7 +117,7 @@ jobs:
           EOF
 
       - name: Install Linux build dependencies
-        if: contains(matrix.platform, 'ubuntu')
+        if: contains(matrix.artifact-target-name, 'linux')
         run: |
           sudo apt-get update
           sudo apt-get install -y libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
@@ -136,7 +134,7 @@ jobs:
           repo: TomWright/dasel
           tag: v2.8.1
           extension-matching: disable
-          rename-to: ${{ contains(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
+          rename-to: ${{ contains(matrix.artifact-target-name, 'windows') && 'dasel.exe' || 'dasel' }}
           chmod: 0755
 
       - name: Set application version and environment
@@ -159,7 +157,7 @@ jobs:
         run: pnpm install
 
       - name: Set up Windows code signing
-        if: contains(matrix.platform, 'windows')
+        if: contains(matrix.artifact-target-name, 'windows')
         shell: bash
         run: |
           if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
@@ -170,7 +168,7 @@ jobs:
 
       - name: Build macOS app
         run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
-        if: contains(matrix.platform, 'macos')
+        if: contains(matrix.artifact-target-name, 'darwin')
         env:
           TAURI_BUNDLER_DMG_IGNORE_CI: 'true'
           ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
@@ -185,7 +183,7 @@ jobs:
 
       - name: Build Linux app
         run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
-        if: contains(matrix.platform, 'ubuntu')
+        if: contains(matrix.artifact-target-name, 'linux')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -197,7 +195,7 @@ jobs:
           $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
           ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
           Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: contains(matrix.platform, 'windows')
+        if: contains(matrix.artifact-target-name, 'windows')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}

apps/app-frontend/src/App.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ButtonLink, IconButton, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	AuthFeature,
 	ModrinthApiError,
@@ -10,50 +11,23 @@ import {
 } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
-	ChangeSkinIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon,
 	CompassIcon,
-	ExternalIcon,
 	HomeIcon,
-	LeftArrowIcon,
 	LibraryIcon,
 	LogInIcon,
 	LogOutIcon,
 	NewspaperIcon,
-	NotepadTextIcon,
 	PlusIcon,
 	RefreshCwIcon,
 	RightArrowIcon,
 	ServerStackIcon,
 	SettingsIcon,
+	ShirtIcon,
 	UserIcon,
-	WorldIcon,
-	XIcon,
 } from '@modrinth/assets'
-import {
-	Admonition,
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	ContentInstallModal,
-	ContentUpdaterModal,
-	CreationFlowModal,
-	defineMessages,
-	I18nDebugPanel,
-	LoadingBar,
-	NewsArticleCard,
-	NotificationPanel,
-	OverflowMenu,
-	PopupNotificationPanel,
-	provideModalBehavior,
-	provideModrinthClient,
-	provideNotificationManager,
-	providePageContext,
-	providePopupNotificationManager,
-	useDebugLogger,
-	useFormatBytes,
-	useHostingIntercom,
-	useVIntl,
-} from '@modrinth/ui'
+import { Admonition, Avatar, commonMessages, ContentInstallModal, ContentUpdaterModal, CreationFlowModal, defineMessages, I18nDebugPanel, IntlFormatted, LoadingBar, NewsArticleCard, NotificationPanel, PopupNotificationPanel, provideModalBehavior, provideModrinthClient, provideNotificationManager, providePageContext, providePopupNotificationManager, TextLogo, useDebugLogger, useFormatBytes, useHostingIntercom, useVIntl } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
@@ -63,11 +37,9 @@ import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { $fetch } from 'ofetch'
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 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'
@@ -88,6 +60,7 @@ import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import SharedInstanceInviteHandler from '@/components/ui/shared-instances/shared-instance-invite-handler/index.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
+import SurveyPopup from '@/components/ui/SurveyPopup.vue'
 import WindowControls from '@/components/ui/WindowControls.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { config } from '@/config'
@@ -104,12 +77,7 @@ import { check_reachable } from '@/helpers/auth.js'
 import { get_user, get_version } from '@/helpers/cache.js'
 import { command_listener, notification_listener, warning_listener } from '@/helpers/events.js'
 import { install_create_modpack_instance, install_get_modpack_preview } from '@/helpers/install'
-import {
-	can_current_user_use_shared_instances,
-	get as getInstance,
-	list,
-	run,
-} from '@/helpers/instance'
+import { can_current_user_use_shared_instances, get as getInstance, run } from '@/helpers/instance'
 import { get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
 import { mergeUrlQuery, parseModrinthLink } from '@/helpers/project-links.ts'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -137,6 +105,7 @@ import {
 	openAppUpdateChangelog,
 	setAppUpdateActions,
 } from '@/providers/app-update.ts'
+import { createBreadcrumbManager, provideBreadcrumbManager } from '@/providers/breadcrumbs'
 import { createContentInstall, provideContentInstall } from '@/providers/content-install'
 import {
 	provideAppUpdateDownloadProgress,
@@ -148,15 +117,30 @@ import { setupAuthProvider } from '@/providers/setup/auth'
 import { setupLoadingStateProvider } from '@/providers/setup/loading-state'
 import { useError } from '@/store/error.js'
 import { useTheming } from '@/store/state'
+import { appMessages } from '@/utils/app-messages'
 
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
 import { AppPopupNotificationManager } from './providers/app-popup-notifications'
+import { appSettingsModalOpenProfileKey } from './providers/app-settings-modal'
 
 const themeStore = useTheming()
 const router = useRouter()
 const route = useRoute()
+const breadcrumbManager = createBreadcrumbManager()
+provideBreadcrumbManager(breadcrumbManager)
+const canNavigateBack = ref(false)
+const canNavigateForward = ref(false)
+
+function updateHistoryNavigationState() {
+	const historyState = window.history.state
+	canNavigateBack.value = historyState?.back != null
+	canNavigateForward.value = historyState?.forward != null
+}
+
+updateHistoryNavigationState()
+
 const APP_LEFT_NAV_WIDTH = '4rem'
 const APP_SIDEBAR_WIDTH = 300
 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
@@ -289,7 +273,6 @@ const {
 } = setupProviders(notificationManager, popupNotificationManager)
 
 const news = ref([])
-const availableSurvey = ref(false)
 const displayedServerInviteNotifications = new Set()
 const serverInvitePopupNotificationIds = new Set()
 let liveNotificationGeneration = 0
@@ -403,6 +386,54 @@ const messages = defineMessages({
 		id: 'app.ads-consent.accept',
 		defaultMessage: 'Accept all',
 	},
+	home: {
+		id: 'app.nav.home',
+		defaultMessage: 'Home',
+	},
+	library: {
+		id: 'app.nav.library',
+		defaultMessage: 'Library',
+	},
+	modrinthHosting: {
+		id: 'app.nav.modrinth-hosting',
+		defaultMessage: 'Modrinth Hosting',
+	},
+	createNewInstance: {
+		id: 'app.nav.create-new-instance',
+		defaultMessage: 'Create new instance',
+	},
+	modrinthAccount: {
+		id: 'app.nav.modrinth-account',
+		defaultMessage: 'Modrinth account',
+	},
+	signedInAs: {
+		id: 'app.nav.signed-in-as',
+		defaultMessage: 'Signed in as <user>{username}</user>',
+	},
+	signInToModrinthAccount: {
+		id: 'app.nav.sign-in-to-modrinth-account',
+		defaultMessage: 'Sign in to a Modrinth account',
+	},
+	restarting: {
+		id: 'app.restarting',
+		defaultMessage: 'Restarting...',
+	},
+	upgradeToModrinthPlus: {
+		id: 'app.nav.upgrade-to-modrinth-plus',
+		defaultMessage: 'Upgrade to Modrinth+',
+	},
+	news: {
+		id: 'app.news.title',
+		defaultMessage: 'News',
+	},
+	viewAllNews: {
+		id: 'app.news.view-all',
+		defaultMessage: 'View all news',
+	},
+	playingAs: {
+		id: 'app.sidebar.playing-as',
+		defaultMessage: 'Playing as',
+	},
 })
 
 function handleAdsConsentRequired(required) {
@@ -571,12 +602,6 @@ async function setupApp() {
 		settings.pending_update_toast_for_version = null
 		await setSettings(settings)
 	}
-
-	if (osType === 'windows') {
-		await processPendingSurveys()
-	} else {
-		console.info('Skipping user surveys on non-Windows platforms')
-	}
 }
 
 const stateFailed = ref(false)
@@ -620,6 +645,7 @@ router.beforeEach(() => {
 	routerToken = loading.begin()
 })
 router.afterEach((to, from, failure) => {
+	updateHistoryNavigationState()
 	trackEvent('PageView', {
 		path: to.path,
 		fromPath: from.path,
@@ -761,6 +787,8 @@ const sharedInstanceInviteHandler = ref()
 const updateToPlayModal = ref()
 
 const modrinthLoginModal = ref()
+const appSettingsModal = ref()
+provide(appSettingsModalOpenProfileKey, () => appSettingsModal.value?.showProfile())
 
 watch(incompatibilityWarningModal, (modal) => {
 	if (modal) {
@@ -1439,115 +1467,6 @@ function handleAuxClick(e) {
 	}
 }
 
-function cleanupOldSurveyDisplayData() {
-	const threeWeeksAgo = new Date()
-	threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21)
-
-	for (let i = 0; i < localStorage.length; i++) {
-		const key = localStorage.key(i)
-
-		if (key.startsWith('survey-') && key.endsWith('-display')) {
-			const dateValue = new Date(localStorage.getItem(key))
-			if (dateValue < threeWeeksAgo) {
-				localStorage.removeItem(key)
-			}
-		}
-	}
-}
-
-async function openSurvey() {
-	if (!availableSurvey.value) {
-		console.error('No survey to open')
-		return
-	}
-
-	const creds = await getCreds().catch(handleError)
-	const userId = creds?.user_id
-
-	const formId = availableSurvey.value.tally_id
-
-	const popupOptions = {
-		layout: 'modal',
-		width: 700,
-		autoClose: 2000,
-		hideTitle: true,
-		hiddenFields: {
-			user_id: userId,
-		},
-		onOpen: () => console.info('Opened user survey'),
-		onClose: () => {
-			console.info('Closed user survey')
-			show_ads_window()
-		},
-		onSubmit: () => console.info('Active user survey submitted'),
-	}
-
-	try {
-		hide_ads_window()
-		if (window.Tally?.openPopup) {
-			console.info(`Opening Tally popup for user survey (form ID: ${formId})`)
-			dismissSurvey()
-			window.Tally.openPopup(formId, popupOptions)
-		} else {
-			console.warn('Tally script not yet loaded')
-			show_ads_window()
-		}
-	} catch (e) {
-		console.error('Error opening Tally popup:', e)
-		show_ads_window()
-	}
-
-	console.info(`Found user survey to show with tally_id: ${formId}`)
-	window.Tally.openPopup(formId, popupOptions)
-}
-
-function dismissSurvey() {
-	localStorage.setItem(`survey-${availableSurvey.value.id}-display`, new Date())
-	availableSurvey.value = undefined
-}
-
-async function processPendingSurveys() {
-	function isWithinLastTwoWeeks(date) {
-		const twoWeeksAgo = new Date()
-		twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
-		return date >= twoWeeksAgo
-	}
-
-	cleanupOldSurveyDisplayData()
-
-	const creds = await getCreds().catch(handleError)
-	const userId = creds?.user_id
-
-	const instances = (await list().catch(handleError)) ?? []
-	const isActivePlayer = instances.some(
-		(instance) =>
-			isWithinLastTwoWeeks(instance.last_played) && !isWithinLastTwoWeeks(instance.created),
-	)
-
-	let surveys = []
-	try {
-		surveys = await $fetch('https://api.modrinth.com/v2/surveys')
-	} catch (e) {
-		console.error('Error fetching surveys:', e)
-	}
-
-	const surveyToShow = surveys.find(
-		(survey) =>
-			!!(
-				localStorage.getItem(`survey-${survey.id}-display`) === null &&
-				survey.type === 'tally_app' &&
-				((survey.condition === 'active_player' && isActivePlayer) ||
-					(survey.assigned_users?.includes(userId) && !survey.dismissed_users?.includes(userId)))
-			),
-	)
-
-	if (surveyToShow) {
-		availableSurvey.value = surveyToShow
-	} else {
-		console.info('No user survey to show')
-	}
-}
-
 provideAppUpdateDownloadProgress(appUpdateDownload)
 </script>
 
@@ -1570,12 +1489,12 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					class="flex items-center gap-4 text-contrast font-semibold text-xl select-none cursor-default"
 				>
 					<RefreshCwIcon data-tauri-drag-region class="animate-spin w-6 h-6" />
-					Restarting...
+					{{ formatMessage(messages.restarting) }}
 				</span>
 			</div>
 		</Transition>
 		<Suspense>
-			<AppSettingsModal ref="settingsModal" />
+			<AppSettingsModal ref="appSettingsModal" />
 		</Suspense>
 		<Suspense>
 			<ModrinthAccountRequiredModal ref="modrinthLoginModal" :request-auth="requestModrinthAuth" />
@@ -1593,27 +1512,24 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		/>
 		<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]"
+			class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.25rem] w-[--left-bar-width]"
 		>
-			<NavButton v-tooltip.right="'Home'" to="/">
+			<NavButton v-tooltip.right="formatMessage(messages.home)" to="/">
 				<HomeIcon />
 			</NavButton>
-			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
-				<WorldIcon />
-			</NavButton>
 			<NavButton
-				v-tooltip.right="'Discover content'"
+				v-tooltip.right="formatMessage(commonMessages.discoverContentLabel)"
 				to="/browse/modpack"
 				:is-primary="() => route.path.startsWith('/browse') && !route.query.i"
 				:is-subpage="(route) => route.path.startsWith('/project') && !route.query.i"
 			>
 				<CompassIcon />
 			</NavButton>
-			<NavButton v-tooltip.right="'Skin selector'" to="/skins">
-				<ChangeSkinIcon />
+			<NavButton v-tooltip.right="formatMessage(appMessages.skinSelectorLabel)" to="/skins">
+				<ShirtIcon />
 			</NavButton>
 			<NavButton
-				v-tooltip.right="'Library'"
+				v-tooltip.right="formatMessage(messages.library)"
 				to="/library"
 				:is-primary="(r) => r.path === '/library' || r.path === '/library'"
 				:is-subpage="
@@ -1626,19 +1542,18 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				<LibraryIcon />
 			</NavButton>
 			<NavButton
-				v-tooltip.right="'Modrinth Hosting'"
+				v-tooltip.right="formatMessage(messages.modrinthHosting)"
 				to="/hosting/manage"
 				:is-primary="(r) => r.path === '/hosting/manage' || r.path === '/hosting/manage/'"
 				:is-subpage="(r) => r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/'"
 			>
 				<ServerStackIcon />
 			</NavButton>
-			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
 			</suspense>
 			<NavButton
-				v-tooltip.right="'Create new instance'"
+				v-tooltip.right="formatMessage(messages.createNewInstance)"
 				:to="() => installationModal?.show()"
 				:disabled="offline"
 			>
@@ -1647,82 +1562,95 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<div class="flex flex-grow"></div>
 			<NavButton
 				v-tooltip.right="formatMessage(commonMessages.settingsLabel)"
-				:to="() => $refs.settingsModal.show()"
+				:to="() => appSettingsModal?.show()"
 			>
 				<SettingsIcon />
 			</NavButton>
-			<OverflowMenu
+			<TeleportOverflowMenu label="More options"
 				v-if="credentials?.user"
-				v-tooltip.right="`Modrinth account`"
+				v-tooltip.right="formatMessage(messages.modrinthAccount)"
 				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 border-0 cursor-pointer"
 				:options="[
 					{
 						id: 'view-profile',
+						label: formatMessage(messages.signedInAs, {
+							username: credentials.user.username,
+						}),
 						action: () => router.push(`/user/${encodeURIComponent(credentials.user.username)}`),
 					},
 					{
 						id: 'sign-out',
+						label: formatMessage(commonMessages.signOutButton),
 						action: () => logOut(),
-						color: 'danger',
 					},
 				]"
-				placement="right-end"
+				placement="bottom-start"
 			>
 				<Avatar :src="credentials?.user?.avatar_url" alt="" size="32px" circle />
 				<template #view-profile>
 					<UserIcon />
 					<span class="inline-flex items-center gap-1">
-						Signed in as
-						<span class="inline-flex items-center gap-1 text-contrast font-semibold">
-							<Avatar :src="credentials?.user?.avatar_url" alt="" size="20px" circle />
-							{{ credentials?.user?.username }}
-						</span>
+						<IntlFormatted
+							:message-id="messages.signedInAs"
+							:values="{ username: credentials?.user?.username }"
+						>
+							<template #user="{ children }">
+								<span class="inline-flex items-center gap-1 text-contrast font-semibold">
+									<Avatar :src="credentials?.user?.avatar_url" alt="" size="20px" circle />
+									<component :is="() => children" />
+								</span>
+							</template>
+						</IntlFormatted>
 					</span>
-					<ExternalIcon />
 				</template>
-				<template #sign-out> <LogOutIcon /> Sign out </template>
-			</OverflowMenu>
+				<template #sign-out>
+					<LogOutIcon />
+					{{ formatMessage(commonMessages.signOutButton) }}
+				</template>
+			</TeleportOverflowMenu>
 			<NavButton
 				v-else
-				v-tooltip.right="'Sign in to a Modrinth account'"
+				v-tooltip.right="formatMessage(messages.signInToModrinthAccount)"
 				:to="() => requestSignIn()"
 			>
 				<LogInIcon class="text-brand" />
 			</NavButton>
 		</div>
 		<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
-			<div data-tauri-drag-region class="flex min-w-0 flex-1 overflow-hidden p-3">
-				<ModrinthAppLogo class="h-full w-auto shrink-0 text-contrast pointer-events-none" />
-				<div data-tauri-drag-region class="flex shrink-0 items-center gap-1 ml-3">
-					<button
-						class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
-						@click="router.back()"
-					>
-						<LeftArrowIcon />
-					</button>
-					<button
-						class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
-						@click="router.forward()"
-					>
-						<RightArrowIcon />
-					</button>
+			<div data-tauri-drag-region class="flex min-w-0 flex-1 items-center overflow-hidden p-2">
+				<TextLogo class="h-7 w-auto shrink-0 text-contrast pointer-events-none" />
+				<div data-tauri-drag-region class="ml-2 flex shrink-0 items-center gap-2">
+					<IconButton type="outlined" label="Go back"
+							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+							:disabled="!canNavigateBack"
+							@click="router.back()"
+						>
+						<ChevronLeftIcon
+							class="!size-4 !text-primary"
+							:class="{ 'opacity-20': !canNavigateBack }"
+						/>
+					</IconButton>
+					<IconButton type="outlined" label="Go forward"
+							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+							:disabled="!canNavigateForward"
+							@click="router.forward()"
+						>
+						<ChevronRightIcon
+							class="!size-4 !text-primary"
+							:class="{ 'opacity-20': !canNavigateForward }"
+						/>
+					</IconButton>
 				</div>
-				<Breadcrumbs class="pt-[2px]" />
+				<Breadcrumbs />
 			</div>
 			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
-				<ButtonStyled
-					v-if="!forceSidebar && themeStore.toggleSidebar"
-					:type="sidebarToggled ? 'standard' : 'transparent'"
-					circular
-				>
-					<button
+				<IconButton :type="sidebarToggled ? 'base' : 'quiet'" label="Next image" v-if="!forceSidebar && themeStore.toggleSidebar"
 						class="mr-3 transition-transform"
 						:class="{ 'rotate-180': !sidebarToggled }"
 						@click="sidebarToggled = !sidebarToggled"
 					>
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
+					<RightArrowIcon />
+				</IconButton>
 				<div class="flex mr-3">
 					<Suspense>
 						<AppActionBar />
@@ -1741,28 +1669,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		}"
 	>
 		<div class="app-viewport flex-grow router-view">
-			<transition name="popup-survey">
-				<div
-					v-if="availableSurvey"
-					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-surface-5 border-[1px] border-solid border-b-0 p-4"
-				>
-					<h2 class="text-lg font-extrabold mt-0 mb-2">Hey there Modrinth user!</h2>
-					<p class="m-0 leading-tight">
-						Would you mind answering a few questions about your experience with Modrinth App?
-					</p>
-					<p class="mt-3 mb-4 leading-tight">
-						This feedback will go directly to the Modrinth team and help guide future updates!
-					</p>
-					<div class="flex gap-2">
-						<ButtonStyled color="brand">
-							<button @click="openSurvey"><NotepadTextIcon /> Take survey</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button @click="dismissSurvey"><XIcon /> No thanks</button>
-						</ButtonStyled>
-					</div>
-				</div>
-			</transition>
+			<SurveyPopup />
 			<div
 				class="loading-indicator-container h-8 fixed z-50 pointer-events-none"
 				:style="{
@@ -1826,7 +1733,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
 				<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
 					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
-						<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
+						<h3 class="text-base text-primary font-medium m-0">
+							{{ formatMessage(messages.playingAs) }}
+						</h3>
 						<suspense>
 							<AccountsCard ref="accounts" />
 						</suspense>
@@ -1841,18 +1750,19 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
 					/>
 					<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
-						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
+						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">
+							{{ formatMessage(messages.news) }}
+						</h3>
 						<div class="space-y-4 flex flex-col items-center w-full">
 							<NewsArticleCard
 								v-for="(item, index) in news"
 								:key="`news-${index}`"
 								:article="item"
 							/>
-							<ButtonStyled color="brand" size="large">
-								<a href="https://modrinth.com/news" target="_blank" class="my-4">
-									<NewspaperIcon /> View all news
-								</a>
-							</ButtonStyled>
+							<ButtonLink type="colored" color="brand" size="xl" href="https://modrinth.com/news" target="_blank" class="my-4">
+								<NewspaperIcon />
+								{{ formatMessage(messages.viewAllNews) }}
+							</ButtonLink>
 						</div>
 					</div>
 				</div>
@@ -1863,7 +1773,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					class="absolute bottom-[250px] w-full flex justify-center items-center gap-1 px-4 py-3 text-purple font-medium hover:underline z-10"
 					target="_blank"
 				>
-					<ArrowBigUpDashIcon class="text-2xl" /> Upgrade to Modrinth+
+					<ArrowBigUpDashIcon class="text-2xl" />
+					{{ formatMessage(messages.upgradeToModrinthPlus) }}
 				</a>
 				<PromotionWrapper />
 			</template>
@@ -2075,26 +1986,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	display: contents;
 }
 
-.popup-survey-enter-active {
-	transition:
-		opacity 0.25s ease,
-		transform 0.25s cubic-bezier(0.51, 1.08, 0.35, 1.15);
-	transform-origin: top center;
-}
-
-.popup-survey-leave-active {
-	transition:
-		opacity 0.25s ease,
-		transform 0.25s cubic-bezier(0.68, -0.17, 0.23, 0.11);
-	transform-origin: top center;
-}
-
-.popup-survey-enter-from,
-.popup-survey-leave-to {
-	opacity: 0;
-	transform: translateY(10rem) scale(0.8) scaleY(1.6);
-}
-
 @media (prefers-reduced-motion: no-preference) {
 	.nav-button-animated-enter-active {
 		transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);

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

@@ -4,13 +4,11 @@
 		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
 	>
 		<span>{{ formatMessage(messages.notSignedIn) }}</span>
-		<ButtonStyled color="brand">
-			<button color="primary" :disabled="loginDisabled" @click="login()">
-				<LogInIcon v-if="!loginDisabled" />
-				<SpinnerIcon v-else class="animate-spin" />
-				{{ formatMessage(messages.signInToMinecraft) }}
-			</button>
-		</ButtonStyled>
+		<Button type="colored" color="brand" :disabled="loginDisabled" @click="login()">
+			<LogInIcon v-if="!loginDisabled" />
+			<SpinnerIcon v-else class="animate-spin" />
+			{{ formatMessage(messages.signInToMinecraft) }}
+		</Button>
 	</div>
 	<Accordion
 		v-else
@@ -60,30 +58,27 @@
 							{{ account.profile.name }}
 						</p>
 					</button>
-					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
-						<button
+					<IconButton type="quiet" color="red" :label="formatMessage(messages.removeAccount)"
 							v-tooltip="formatMessage(messages.removeAccount)"
-							class="mr-2"
+							class="mr-2 hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
 							@click="logout(account.profile.id)"
 						>
-							<TrashIcon />
-						</button>
-					</ButtonStyled>
+						<TrashIcon />
+					</IconButton>
 				</div>
 			</template>
 			<div class="flex flex-col gap-2 px-2 pt-2">
-				<ButtonStyled v-if="accounts.length > 0" class="w-full">
-					<button :disabled="loginDisabled" @click="login()">
-						<PlusIcon />
-						{{ formatMessage(messages.addAccount) }}
-					</button>
-				</ButtonStyled>
+				<Button v-if="accounts.length > 0" class="w-full" :disabled="loginDisabled" @click="login()">
+					<PlusIcon />
+					{{ formatMessage(messages.addAccount) }}
+				</Button>
 			</div>
 		</div>
 	</Accordion>
 </template>
 
 <script setup lang="ts">
+import { Button, IconButton } from '@modrinth/ui'
 import {
 	LogInIcon,
 	PlusIcon,
@@ -95,7 +90,6 @@ import {
 import {
 	Accordion,
 	Avatar,
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	useVIntl,

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
+import { injectNotificationManager } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
@@ -36,27 +37,24 @@ const handleSearchContent = async () => {
 
 <template>
 	<div class="joined-buttons">
-		<ButtonStyled>
-			<button @click="handleSearchContent">
-				<PlusIcon />
-				Install content
-			</button>
-		</ButtonStyled>
-		<ButtonStyled>
-			<OverflowMenu
+		<Button @click="handleSearchContent">
+			<PlusIcon />
+			Install content
+		</Button>
+		<TeleportOverflowMenu label="More options"
 				:options="[
 					{
 						id: 'from_file',
+						label: 'Add from file',
 						action: handleAddContentFromFile,
 					},
 				]"
-			>
-				<DropdownIcon />
-				<template #from_file>
-					<FolderOpenIcon />
-					<span class="no-wrap"> Add from file </span>
-				</template>
-			</OverflowMenu>
-		</ButtonStyled>
+			 class="!w-auto !px-2.5 !rounded-xl">
+			<DropdownIcon />
+			<template #from_file>
+				<FolderOpenIcon />
+				<span class="no-wrap"> Add from file </span>
+			</template>
+		</TeleportOverflowMenu>
 	</div>
 </template>

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

@@ -1,15 +1,8 @@
 <template>
 	<div class="flex gap-2 items-center">
-		<ButtonStyled
-			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
-			color="brand"
-			type="transparent"
-			circular
-		>
-			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
-				<DownloadIcon />
-			</button>
-		</ButtonStyled>
+		<IconButton type="quiet" color="brand" :label="formatMessage(messages.viewActiveDownloads)" v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts" v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
+			<DownloadIcon />
+		</IconButton>
 		<div v-if="offline" class="flex items-center gap-1">
 			<UnplugIcon class="text-secondary" />
 			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
@@ -36,17 +29,19 @@
 						@show="showInstances = true"
 						@hide="showInstances = false"
 					>
-						<ButtonStyled type="transparent" circular size="small">
-							<button
+						<IconButton class="!size-6" type="quiet" size="xs" :label="
+									showInstances
+										? formatMessage(messages.hideMoreRunningInstances)
+										: formatMessage(messages.showMoreRunningInstances)
+								"
 								v-tooltip="
 									showInstances
 										? formatMessage(messages.hideMoreRunningInstances)
 										: formatMessage(messages.showMoreRunningInstances)
 								"
 							>
-								<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
-							</button>
-						</ButtonStyled>
+							<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
+						</IconButton>
 						<template #popper>
 							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
 								<div
@@ -116,6 +111,7 @@
 </template>
 
 <script setup lang="ts">
+import { IconButton } from '@modrinth/ui'
 import {
 	DownloadIcon,
 	DropdownIcon,
@@ -126,7 +122,6 @@ import {
 	UnplugIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	injectPopupNotificationManager,

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

@@ -2,7 +2,7 @@
 	<div
 		ref="outerRef"
 		data-tauri-drag-region
-		class="min-w-0 overflow-hidden pl-3"
+		class="min-w-0 overflow-hidden pl-4"
 		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
 		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
 		@mouseenter="onMouseEnter"
@@ -11,30 +11,48 @@
 		<div
 			ref="innerRef"
 			data-tauri-drag-region
-			class="flex w-fit items-center gap-1"
+			class="flex w-fit items-center gap-2 pr-4"
 			:class="{ 'breadcrumbs-scroll': isAnimating }"
 			@animationiteration="onAnimationIteration"
 		>
-			{{ breadcrumbData.resetToNames(breadcrumbs) }}
-			<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
-				<router-link
-					v-if="breadcrumb.link"
-					:to="{
-						path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id as string)),
-						query: breadcrumb.query,
-					}"
-					class="shrink-0 whitespace-nowrap text-primary"
+			<template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.slot">
+				<component
+					:is="index < breadcrumbs.length - 1 && breadcrumb.to ? RouterLink : 'span'"
+					v-bind="index < breadcrumbs.length - 1 && breadcrumb.to ? { to: breadcrumb.to } : {}"
+					:data-tauri-drag-region="index === breadcrumbs.length - 1 ? '' : undefined"
+					class="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-base font-medium leading-6"
+					:class="
+						index === breadcrumbs.length - 1
+							? 'cursor-default select-none text-contrast'
+							: 'text-primary hover:text-contrast'
+					"
+					:aria-current="index === breadcrumbs.length - 1 ? 'page' : undefined"
 				>
-					{{ resolveLabel(breadcrumb.name) }}
-				</router-link>
-				<span
-					v-else
+					<Avatar
+						v-if="breadcrumb.visual?.type === 'image'"
+						:src="breadcrumb.visual.src"
+						:alt="breadcrumb.visual.alt ?? breadcrumb.label"
+						:circle="breadcrumb.visual.circle"
+						:tint-by="breadcrumb.visual.tintBy ?? breadcrumb.id"
+						size="20px"
+						no-shadow
+						raised
+						class="inline-block shrink-0 align-middle"
+						:class="{ '!rounded-md': !breadcrumb.visual.circle }"
+					/>
+					<component
+						:is="breadcrumb.visual.component"
+						v-else-if="breadcrumb.visual?.type === 'icon'"
+						class="size-5 shrink-0 text-primary"
+						aria-hidden="true"
+					/>
+					<span>{{ breadcrumb.label }}</span>
+				</component>
+				<ChevronRightIcon
+					v-if="index < breadcrumbs.length - 1"
 					data-tauri-drag-region
-					class="shrink-0 whitespace-nowrap text-contrast font-semibold cursor-default select-none"
-				>
-					{{ resolveLabel(breadcrumb.name) }}
-				</span>
-				<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5 shrink-0" />
+					class="size-5 shrink-0 text-primary"
+				/>
 			</template>
 		</div>
 	</div>
@@ -42,34 +60,13 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { Avatar } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { RouterLink } from 'vue-router'
 
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { injectBreadcrumbManager } from '@/providers/breadcrumbs'
 
-interface Breadcrumb {
-	name: string
-	link?: string
-	query?: Record<string, string>
-}
-
-const route = useRoute()
-const breadcrumbData = useBreadcrumbs()
-
-const breadcrumbs = computed<Breadcrumb[]>(() => {
-	const additionalContext =
-		route.meta.useContext === true
-			? breadcrumbData.context
-			: route.meta.useRootContext === true
-				? breadcrumbData.rootContext
-				: null
-	const crumbs = (route.meta.breadcrumb ?? []) as Breadcrumb[]
-	return additionalContext ? [additionalContext as Breadcrumb, ...crumbs] : crumbs
-})
-
-function resolveLabel(name: string): string {
-	return name.charAt(0) === '?' ? breadcrumbData.getName(name.slice(1)) : name
-}
+const { entries: breadcrumbs } = injectBreadcrumbManager()
 
 // Overflow detection
 const outerRef = ref<HTMLDivElement | null>(null)
@@ -83,9 +80,13 @@ let stopping = false
 
 function checkOverflow() {
 	if (!outerRef.value || !innerRef.value) return
-	const overflow = innerRef.value.scrollWidth - outerRef.value.clientWidth
+	const outerStyles = window.getComputedStyle(outerRef.value)
+	const horizontalPadding =
+		Number.parseFloat(outerStyles.paddingLeft) + Number.parseFloat(outerStyles.paddingRight)
+	const availableWidth = outerRef.value.clientWidth - horizontalPadding
+	const overflow = innerRef.value.scrollWidth - availableWidth
 	isOverflowing.value = overflow > 0
-	overflowAmount.value = overflow + 12
+	overflowAmount.value = overflow
 }
 
 function onMouseEnter() {

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

@@ -1,4 +1,5 @@
 <script setup>
+import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
 	CheckIcon,
 	CopyIcon,
@@ -9,7 +10,7 @@ import {
 	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { Collapsible, injectNotificationManager } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { ChatIcon } from '@/assets/icons'
@@ -273,12 +274,8 @@ async function copyToClipboard(text) {
 				</template>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonStyled>
-					<a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-				</ButtonStyled>
-				<ButtonStyled v-if="closable">
-					<button @click="errorModal.hide()"><XIcon /> Close</button>
-				</ButtonStyled>
+				<ButtonLink :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</ButtonLink>
+				<Button v-if="closable" @click="errorModal.hide()"><XIcon /> Close</Button>
 			</div>
 			<template v-if="hasDebugInfo">
 				<div class="flex flex-col gap-2">
@@ -307,16 +304,14 @@ async function copyToClipboard(text) {
 								>
 									{{ debugInfo }}
 								</div>
-								<ButtonStyled circular>
-									<button
+								<IconButton :label="'Copy debug info'"
 										v-tooltip="'Copy debug info'"
 										:disabled="copied"
 										@click="copyToClipboard(debugInfo)"
 									>
-										<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-										<template v-else> <CopyIcon /> </template>
-									</button>
-								</ButtonStyled>
+									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+									<template v-else> <CopyIcon /> </template>
+								</IconButton>
 							</div>
 						</Collapsible>
 					</div>

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

@@ -1,7 +1,7 @@
 <script setup>
+import { Button } from '@modrinth/ui'
 import { XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	FileTreeSelect,
@@ -286,18 +286,14 @@ function isExportCandidateDisabled(path) {
 		</div>
 		<template #actions>
 			<div class="flex items-center justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="exportModal.hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button @click="exportPack">
-						<PackageIcon />
-						{{ formatMessage(messages.exportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="exportModal.hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" @click="exportPack">
+					<PackageIcon />
+					{{ formatMessage(messages.exportButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { IconButton } from '@modrinth/ui'
 import {
 	DownloadIcon,
 	GameIcon,
@@ -7,7 +8,7 @@ import {
 	StopCircleIcon,
 	TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
+import { Avatar, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -168,30 +169,24 @@ onUnmounted(() => unlisten())
 				<span class="line-clamp-2">{{ instance.name }}</span>
 			</div>
 			<div class="flex items-center">
-				<ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
-					<button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
-						<StopCircleIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="modLoading" color="standard" circular>
-					<button v-tooltip="'Instance is loading...'" disabled>
-						<SpinnerIcon class="animate-spin" />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled
+				<IconButton type="colored" color="red" :label="'Stop'" v-if="playing" @mouseenter="checkProcess" v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
+					<StopCircleIcon />
+				</IconButton>
+				<IconButton :label="'Instance is loading...'" v-else-if="modLoading" v-tooltip="'Instance is loading...'" disabled>
+					<SpinnerIcon class="animate-spin" />
+				</IconButton>
+				<IconButton
 					v-else-if="!instance.quarantined"
-					:color="first ? 'brand' : 'standard'"
-					circular
-				>
-					<button
+					:type="first ? 'colored' : 'base'"
+					:color="first ? 'brand' : undefined"
+					label="Play"
 						v-tooltip="'Play'"
 						@click="(e) => play(e, 'InstanceCard')"
-						@mousehover="checkProcess"
+						@mouseenter="checkProcess"
 					>
-						<!-- Translate for optical centering -->
-						<PlayIcon class="translate-x-[1px]" />
-					</button>
-				</ButtonStyled>
+					<!-- Translate for optical centering -->
+					<PlayIcon class="translate-x-[1px]" />
+				</IconButton>
 			</div>
 			<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
 				<TimerIcon />
@@ -219,47 +214,36 @@ onUnmounted(() => unlisten())
 					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
 				/>
 				<div class="absolute inset-0 flex items-center justify-center">
-					<ButtonStyled v-if="playing" size="large" color="red" circular>
-						<button
+					<IconButton type="colored" color="red" size="xl" :label="'Stop'" v-if="playing"
 							v-tooltip="'Stop'"
 							:class="{ 'scale-100 opacity-100': playing }"
 							class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
 							@click="(e) => stop(e, 'InstanceCard')"
-							@mousehover="checkProcess"
+							@mouseenter="checkProcess"
 						>
-							<StopCircleIcon />
-						</button>
-					</ButtonStyled>
+						<StopCircleIcon />
+					</IconButton>
 					<SpinnerIcon
 						v-else-if="modLoading || installing"
 						v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
 						class="animate-spin w-8 h-8"
 						tabindex="-1"
 					/>
-					<ButtonStyled
-						v-else-if="!installed && !instance.quarantined"
-						size="large"
-						color="brand"
-						circular
-					>
-						<button
+					<IconButton type="colored" color="brand" size="xl" :label="'Repair'" v-else-if="!installed && !instance.quarantined"
 							v-tooltip="'Repair'"
 							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
 							@click="(e) => repair(e)"
 						>
-							<DownloadIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else-if="!instance.quarantined" size="large" color="brand" circular>
-						<button
+						<DownloadIcon />
+					</IconButton>
+					<IconButton type="colored" color="brand" size="xl" :label="'Play'" v-else-if="!instance.quarantined"
 							v-tooltip="'Play'"
 							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
 							@click="(e) => play(e, 'InstanceCard')"
-							@mousehover="checkProcess"
+							@mouseenter="checkProcess"
 						>
-							<PlayIcon class="translate-x-[2px]" />
-						</button>
-					</ButtonStyled>
+						<PlayIcon class="translate-x-[2px]" />
+					</IconButton>
 				</div>
 			</div>
 			<div class="flex flex-col gap-1">

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { ButtonLink } from '@modrinth/ui'
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
+import { Avatar, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed } from 'vue'
 
@@ -48,9 +49,7 @@ const instanceLink = computed(() => {
 				</span>
 			</span>
 		</router-link>
-		<ButtonStyled>
-			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
-		</ButtonStyled>
+		<ButtonLink :to="instanceLink"> <LeftArrowIcon /> Back to instance </ButtonLink>
 	</div>
 </template>
 

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

@@ -14,18 +14,14 @@
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex items-center justify-end">
-						<ButtonStyled v-if="currentSelected.path === row.path">
-							<button class="!shadow-none" disabled>
-								<CheckIcon aria-hidden="true" />
-								{{ formatMessage(messages.selected) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-else>
-							<button class="!shadow-none" @click="setJavaInstall(row)">
-								<PlusIcon aria-hidden="true" />
-								{{ formatMessage(messages.select) }}
-							</button>
-						</ButtonStyled>
+						<Button v-if="currentSelected.path === row.path" disabled>
+							<CheckIcon aria-hidden="true" />
+							{{ formatMessage(messages.selected) }}
+						</Button>
+						<Button v-else @click="setJavaInstall(row)">
+							<PlusIcon aria-hidden="true" />
+							{{ formatMessage(messages.select) }}
+						</Button>
 					</div>
 				</template>
 				<template #empty-state>
@@ -35,23 +31,21 @@
 				</template>
 			</Table>
 			<div class="flex justify-end">
-				<ButtonStyled type="outlined">
-					<button
-						class="!shadow-none !border-surface-4 !border"
+				<Button type="outlined"
+						class="!border-surface-4 !border"
 						@click="$refs.detectJavaModal.hide()"
 					>
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(messages.cancel) }}
-					</button>
-				</ButtonStyled>
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(messages.cancel) }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
+import { Button } from '@modrinth/ui'
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	Table,

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

@@ -17,69 +17,78 @@
 					}
 				"
 			/>
-			<ButtonStyled
+			<Button
+				type="quiet"
 				:color="
 					!hoveringTest && !testingJava
 						? testingJavaSuccess === true
 							? 'green'
 							: 'red'
-						: 'standard'
+						: undefined
 				"
-				color-fill="text"
-			>
-				<button
 					:aria-label="formatMessage(messages.testJavaInstallation)"
-					class="!shadow-none"
+					class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
 					:disabled="testingJava || props.disabled"
 					@click="runTest(props.modelValue?.path)"
 					@mouseenter="!props.disabled && (hoveringTest = true)"
 					@mouseleave="hoveringTest = false"
-				>
-					<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-					<CheckCircleIcon
-						v-else-if="testingJavaSuccess === true && !hoveringTest"
-						class="h-4 w-4"
-					/>
-					<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
-					<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
-				</button>
-			</ButtonStyled>
+				 :style="{ '--legacy-button-color': (
+					!hoveringTest && !testingJava
+						? testingJavaSuccess === true
+							? 'green'
+							: 'red'
+						: 'standard'
+				) && (
+					!hoveringTest && !testingJava
+						? testingJavaSuccess === true
+							? 'green'
+							: 'red'
+						: 'standard'
+				) !== 'standard' ? `var(--color-${
+					!hoveringTest && !testingJava
+						? testingJavaSuccess === true
+							? 'green'
+							: 'red'
+						: 'standard'
+				})` : undefined }">
+				<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+				<CheckCircleIcon
+					v-else-if="testingJavaSuccess === true && !hoveringTest"
+					class="h-4 w-4"
+				/>
+				<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
+				<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
+			</Button>
 		</div>
 		<span class="installation-buttons">
-			<ButtonStyled v-if="props.version">
-				<button
+			<Button v-if="props.version"
 					v-tooltip="
 						testingJavaSuccess === true ? formatMessage(messages.alreadyInstalled) : undefined
 					"
-					class="!shadow-none"
 					:disabled="props.disabled || installingJava || testingJavaSuccess === true"
 					@click="reinstallJava"
 				>
-					<DownloadIcon />
-					{{
-						installingJava
-							? formatMessage(messages.installing)
-							: formatMessage(messages.installRecommended)
-					}}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="autoDetect">
-					<SearchIcon />
-					{{ formatMessage(messages.detect) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="handleJavaFileInput()">
-					<FolderSearchIcon />
-					{{ formatMessage(messages.browse) }}
-				</button>
-			</ButtonStyled>
+				<DownloadIcon />
+				{{
+					installingJava
+						? formatMessage(messages.installing)
+						: formatMessage(messages.installRecommended)
+				}}
+			</Button>
+			<Button :disabled="props.disabled" @click="autoDetect">
+				<SearchIcon />
+				{{ formatMessage(messages.detect) }}
+			</Button>
+			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
+				<FolderSearchIcon />
+				{{ formatMessage(messages.browse) }}
+			</Button>
 		</span>
 	</div>
 </template>
 
 <script setup>
+import { Button } from '@modrinth/ui'
 import {
 	CheckCircleIcon,
 	DownloadIcon,
@@ -90,7 +99,6 @@ import {
 	XCircleIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	StyledInput,

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

@@ -1,6 +1,7 @@
 <script setup>
+import { IconButton } from '@modrinth/ui'
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Badge } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { SwapIcon } from '@/assets/icons/index.js'
@@ -74,18 +75,16 @@ const onHide = () => {
 							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
-								<ButtonStyled
-									circular
-									:color="version.id === installedVersion ? 'standard' : 'brand'"
-								>
-									<button
+								<IconButton
+									:type="version.id === installedVersion ? 'base' : 'colored'"
+									:color="version.id === installedVersion ? undefined : 'brand'"
+									label="Switch version"
 										:disabled="inProgress || installing || version.id === installedVersion"
 										@click.stop="() => switchVersion(version.id)"
 									>
-										<SwapIcon v-if="version.id !== installedVersion" />
-										<CheckIcon v-else />
-									</button>
-								</ButtonStyled>
+									<SwapIcon v-if="version.id !== installedVersion" />
+									<CheckIcon v-else />
+								</IconButton>
 							</div>
 							<div class="name-cell table-cell table-text">
 								<div class="version-link">

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

@@ -1,41 +1,151 @@
 <script setup>
 import { SpinnerIcon } from '@modrinth/assets'
-import { Avatar, injectNotificationManager } from '@modrinth/ui'
+import { Avatar, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
-import { onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import NavButton from '@/components/ui/NavButton.vue'
 import { instance_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/instance'
 
+const ITEM_SIZE = 52
+const APPROX_USED_VERTICAL_SPACE = 513 // doesn't need to be exact lol just close enough so there's a little gap and no overflow
+const STORAGE_KEY = 'modrinth-quick-instance-count'
+
 const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()
+
+const { formatMessage } = useVIntl()
+
+const maxAuto = ref(0)
+const allInstances = ref([])
+const dragging = ref(false)
+
+const stored = localStorage.getItem(STORAGE_KEY)
+const userLimit = ref(stored === null ? null : Number(stored))
+
+const maxVisible = computed(() => Math.min(maxAuto.value, allInstances.value.length))
+const visibleCount = computed(() => Math.min(userLimit.value ?? maxVisible.value, maxVisible.value))
+const recentInstances = computed(() => allInstances.value.slice(0, visibleCount.value))
+const canDrag = computed(() => maxVisible.value > 0)
+const showOverdrag = ref(false)
+
+const updateMaxAuto = () => {
+	maxAuto.value = Math.max(
+		0,
+		Math.floor((window.innerHeight - APPROX_USED_VERTICAL_SPACE) / ITEM_SIZE),
+	)
+}
+
+const setLimit = (count) => {
+	const clamped = Math.max(0, Math.min(count, maxVisible.value))
+	if (clamped >= maxVisible.value) {
+		userLimit.value = null
+		localStorage.removeItem(STORAGE_KEY)
+	} else {
+		userLimit.value = clamped
+		localStorage.setItem(STORAGE_KEY, String(clamped))
+	}
+}
+
+let dragStartY = 0
+let dragStartCount = 0
+let wasOverdragging = false
+let overdragTimeout = null
+
+const clearOverdragFlash = () => {
+	showOverdrag.value = false
+	if (overdragTimeout !== null) {
+		clearTimeout(overdragTimeout)
+		overdragTimeout = null
+	}
+}
+
+const flashOverdrag = () => {
+	showOverdrag.value = true
+	if (overdragTimeout !== null) {
+		clearTimeout(overdragTimeout)
+	}
+	overdragTimeout = setTimeout(() => {
+		showOverdrag.value = false
+		overdragTimeout = null
+	}, 500)
+}
+
+const onDividerPointerDown = (event) => {
+	if (!canDrag.value) {
+		return
+	}
+	event.preventDefault()
+	dragging.value = true
+	wasOverdragging = false
+	clearOverdragFlash()
+	dragStartY = event.clientY
+	dragStartCount = visibleCount.value
+	document.body.classList.add('quick-instance-dragging')
+	event.currentTarget.setPointerCapture(event.pointerId)
+}
+
+const onDividerPointerMove = (event) => {
+	if (!dragging.value) {
+		return
+	}
+	const delta = event.clientY - dragStartY
+	const target = dragStartCount + Math.round(delta / ITEM_SIZE)
+	const isOverdragging = target < 0 || target > maxAuto.value
+	if (isOverdragging && !wasOverdragging) {
+		flashOverdrag()
+	}
+	wasOverdragging = isOverdragging
+	setLimit(target)
+}
+
+const endDrag = (event) => {
+	if (!dragging.value) {
+		return
+	}
+	dragging.value = false
+	wasOverdragging = false
+	clearOverdragFlash()
+	document.body.classList.remove('quick-instance-dragging')
+	if (event?.currentTarget?.hasPointerCapture?.(event.pointerId)) {
+		event.currentTarget.releasePointerCapture(event.pointerId)
+	}
+}
+
+const onDividerPointerUp = (event) => {
+	endDrag(event)
+}
 
-const recentInstances = ref([])
 const getInstances = async () => {
 	const instances = await list().catch(handleError)
 
-	recentInstances.value = instances
-		.sort((a, b) => {
-			const dateACreated = dayjs(a.created)
-			const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
+	for (const instance of instances) {
+		queryClient.setQueryData(['instances', 'summary', instance.id], instance)
+	}
 
-			const dateBCreated = dayjs(b.created)
-			const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
+	allInstances.value = instances.sort((a, b) => {
+		const dateACreated = dayjs(a.created)
+		const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
 
-			const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
-			const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
+		const dateBCreated = dayjs(b.created)
+		const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
 
-			if (dateA.isSame(dateB)) {
-				return a.name.localeCompare(b.name)
-			}
+		const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
+		const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
 
-			return dateB - dateA
-		})
-		.slice(0, 3)
+		if (dateA.isSame(dateB)) {
+			return a.name.localeCompare(b.name)
+		}
+
+		return dateB - dateA
+	})
 }
 
 await getInstances()
+updateMaxAuto()
 
 const unlistenInstance = await instance_listener(async (event) => {
 	if (event.event !== 'synced') {
@@ -43,29 +153,157 @@ const unlistenInstance = await instance_listener(async (event) => {
 	}
 })
 
+onMounted(() => {
+	window.addEventListener('resize', updateMaxAuto)
+})
+
 onUnmounted(() => {
+	window.removeEventListener('resize', updateMaxAuto)
+	document.body.classList.remove('quick-instance-dragging')
+	clearOverdragFlash()
 	unlistenInstance()
 })
+
+const messages = defineMessages({
+	dragTooltip: {
+		id: 'app.quick-instance-switcher.drag-tooltip',
+		defaultMessage: 'Drag to resize',
+	},
+	dragShowTooltip: {
+		id: 'app.quick-instance-switcher.drag-show-tooltip',
+		defaultMessage: 'Drag to show recent instances',
+	},
+})
+
+const dividerTooltip = computed(() => {
+	if (!canDrag.value || dragging.value) {
+		return null
+	}
+	return formatMessage(visibleCount.value === 0 ? messages.dragShowTooltip : messages.dragTooltip)
+})
 </script>
 
 <template>
-	<div v-for="instance in recentInstances" :key="instance.id" v-tooltip.right="instance.name">
-		<NavButton :to="`/instance/${encodeURIComponent(instance.id)}`" class="relative">
-			<Avatar
-				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-				size="28px"
-				:tint-by="instance.id"
-				:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
-			/>
-			<div
-				v-if="instance.install_stage !== 'installed'"
-				class="absolute inset-0 flex items-center justify-center z-10 pointer-events-none"
-			>
-				<SpinnerIcon class="animate-spin w-4 h-4" />
-			</div>
-		</NavButton>
+	<Transition name="top-divider">
+		<div
+			v-if="recentInstances.length > 0"
+			class="top-divider flex items-center justify-center overflow-hidden"
+		>
+			<div class="h-px w-8 bg-surface-5 shrink-0"></div>
+		</div>
+	</Transition>
+	<TransitionGroup name="quick-instance" tag="div" class="flex flex-col items-center">
+		<div
+			v-for="instance in recentInstances"
+			:key="instance.id"
+			v-tooltip.right="instance.name"
+			class="quick-instance-item"
+		>
+			<NavButton :to="`/instance/${encodeURIComponent(instance.id)}`" class="relative">
+				<Avatar
+					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+					size="28px"
+					:tint-by="instance.id"
+					:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+				/>
+				<div
+					v-if="instance.install_stage !== 'installed'"
+					class="absolute inset-0 flex items-center justify-center z-10 pointer-events-none"
+				>
+					<SpinnerIcon class="animate-spin w-4 h-4" />
+				</div>
+			</NavButton>
+		</div>
+	</TransitionGroup>
+	<div
+		v-tooltip.right="dividerTooltip"
+		class="flex items-center justify-center py-2 select-none"
+		:class="canDrag ? 'cursor-ns-resize touch-none group' : ''"
+		@pointerdown="onDividerPointerDown"
+		@pointermove="onDividerPointerMove"
+		@pointerup="onDividerPointerUp"
+		@pointercancel="onDividerPointerUp"
+	>
+		<div
+			class="h-px w-8 transition-colors duration-200"
+			:class="
+				showOverdrag ? 'bg-red' : canDrag ? 'bg-surface-5 group-hover:bg-secondary' : 'bg-surface-5'
+			"
+		></div>
 	</div>
-	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.top-divider {
+	height: calc(1rem + 1px);
+}
+
+.top-divider-enter-active,
+.top-divider-leave-active {
+	transition:
+		opacity 0.25s ease,
+		height 0.25s ease;
+}
+
+.top-divider-enter-from,
+.top-divider-leave-to {
+	opacity: 0;
+	height: 0;
+}
+
+.quick-instance-item {
+	height: 3rem;
+	overflow: hidden;
+
+	& + & {
+		margin-top: 0.25rem;
+	}
+}
+
+.quick-instance-enter-active,
+.quick-instance-leave-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s ease,
+		height 0.25s ease,
+		margin-top 0.25s ease;
+}
+
+.quick-instance-enter-from,
+.quick-instance-leave-to {
+	opacity: 0;
+	transform: scale(0.5);
+	height: 0;
+	margin-top: 0 !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.top-divider-enter-active,
+	.top-divider-leave-active,
+	.quick-instance-enter-active,
+	.quick-instance-leave-active {
+		transition: none;
+	}
+
+	.top-divider-enter-from,
+	.top-divider-leave-to {
+		opacity: 1;
+		height: calc(1rem + 1px);
+	}
+
+	.quick-instance-enter-from,
+	.quick-instance-leave-to {
+		opacity: 1;
+		transform: none;
+		height: 3rem;
+		margin-top: unset !important;
+	}
+}
+</style>
+
+<style lang="scss">
+body.quick-instance-dragging,
+body.quick-instance-dragging * {
+	cursor: ns-resize !important;
+}
+</style>

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

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { NotepadTextIcon, XIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { type } from '@tauri-apps/plugin-os'
+import { $fetch } from 'ofetch'
+import { onMounted, ref } from 'vue'
+
+import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { list } from '@/helpers/instance'
+import { get as getCreds } from '@/helpers/mr_auth.ts'
+
+type Survey = {
+	id: string
+	tally_id: string
+	type: string
+	condition?: string
+	assigned_users?: string[]
+	dismissed_users?: string[]
+}
+
+type TallyApi = {
+	openPopup: (formId: string, options: object) => void
+}
+
+const tallyWindow = window as Window & { Tally?: TallyApi }
+
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+
+const availableSurvey = ref<Survey | null>(null)
+
+const messages = defineMessages({
+	surveyTitle: {
+		id: 'app.survey.title',
+		defaultMessage: 'Hey there Modrinth user!',
+	},
+	surveyBody: {
+		id: 'app.survey.body',
+		defaultMessage:
+			'Would you mind answering a few questions about your experience with Modrinth App?',
+	},
+	surveyFooter: {
+		id: 'app.survey.footer',
+		defaultMessage:
+			'This feedback will go directly to the Modrinth team and help guide future updates!',
+	},
+	takeSurvey: {
+		id: 'app.survey.take-survey',
+		defaultMessage: 'Take survey',
+	},
+	surveyNoThanks: {
+		id: 'app.survey.no-thanks',
+		defaultMessage: 'No thanks',
+	},
+})
+
+function cleanupOldSurveyDisplayData() {
+	const threeWeeksAgo = new Date()
+	threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21)
+
+	for (let i = 0; i < localStorage.length; i++) {
+		const key = localStorage.key(i)
+
+		if (key?.startsWith('survey-') && key.endsWith('-display')) {
+			const dateValue = new Date(localStorage.getItem(key) ?? '')
+			if (dateValue < threeWeeksAgo) {
+				localStorage.removeItem(key)
+			}
+		}
+	}
+}
+
+async function openSurvey() {
+	if (!availableSurvey.value) {
+		console.error('No survey to open')
+		return
+	}
+
+	const creds = await getCreds().catch(handleError)
+	const userId = creds?.user_id
+
+	const formId = availableSurvey.value.tally_id
+
+	const popupOptions = {
+		layout: 'modal',
+		width: 700,
+		autoClose: 2000,
+		hideTitle: true,
+		hiddenFields: {
+			user_id: userId,
+		},
+		onOpen: () => console.info('Opened user survey'),
+		onClose: () => {
+			console.info('Closed user survey')
+			show_ads_window()
+		},
+		onSubmit: () => console.info('Active user survey submitted'),
+	}
+
+	try {
+		hide_ads_window()
+		if (tallyWindow.Tally?.openPopup) {
+			console.info(`Opening Tally popup for user survey (form ID: ${formId})`)
+			dismissSurvey()
+			tallyWindow.Tally.openPopup(formId, popupOptions)
+		} else {
+			console.warn('Tally script not yet loaded')
+			show_ads_window()
+		}
+	} catch (e) {
+		console.error('Error opening Tally popup:', e)
+		show_ads_window()
+	}
+
+	console.info(`Found user survey to show with tally_id: ${formId}`)
+	tallyWindow.Tally?.openPopup(formId, popupOptions)
+}
+
+function dismissSurvey() {
+	if (!availableSurvey.value) return
+	localStorage.setItem(`survey-${availableSurvey.value.id}-display`, String(new Date()))
+	availableSurvey.value = null
+}
+
+async function processPendingSurveys() {
+	function isWithinLastTwoWeeks(date: string | Date | null | undefined) {
+		if (!date) return false
+		const twoWeeksAgo = new Date()
+		twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
+		return new Date(date) >= twoWeeksAgo
+	}
+
+	cleanupOldSurveyDisplayData()
+
+	const creds = await getCreds().catch(handleError)
+	const userId = creds?.user_id
+
+	const instances = (await list().catch(handleError)) ?? []
+	const isActivePlayer = instances.some(
+		(instance) =>
+			isWithinLastTwoWeeks(instance.last_played) && !isWithinLastTwoWeeks(instance.created),
+	)
+
+	let surveys: Survey[] = []
+	try {
+		surveys = await $fetch('https://api.modrinth.com/v2/surveys')
+	} catch (e) {
+		console.error('Error fetching surveys:', e)
+	}
+
+	const surveyToShow = surveys.find(
+		(survey) =>
+			!!(
+				localStorage.getItem(`survey-${survey.id}-display`) === null &&
+				survey.type === 'tally_app' &&
+				((survey.condition === 'active_player' && isActivePlayer) ||
+					(!!userId &&
+						survey.assigned_users?.includes(userId) &&
+						!survey.dismissed_users?.includes(userId)))
+			),
+	)
+
+	if (surveyToShow) {
+		availableSurvey.value = surveyToShow
+	} else {
+		console.info('No user survey to show')
+	}
+}
+
+onMounted(async () => {
+	const osType = await type()
+	if (osType === 'windows') {
+		await processPendingSurveys()
+	} else {
+		console.info('Skipping user surveys on non-Windows platforms')
+	}
+})
+</script>
+
+<template>
+	<transition name="popup-survey">
+		<div
+			v-if="availableSurvey"
+			class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-surface-5 border-[1px] border-solid border-b-0 p-4"
+		>
+			<h2 class="text-lg font-extrabold mt-0 mb-2">
+				{{ formatMessage(messages.surveyTitle) }}
+			</h2>
+			<p class="m-0 leading-tight">
+				{{ formatMessage(messages.surveyBody) }}
+			</p>
+			<p class="mt-3 mb-4 leading-tight">
+				{{ formatMessage(messages.surveyFooter) }}
+			</p>
+			<div class="flex gap-2">
+				<Button type="colored" color="brand" @click="openSurvey">
+					<NotepadTextIcon />
+					{{ formatMessage(messages.takeSurvey) }}
+				</Button>
+				<Button @click="dismissSurvey">
+					<XIcon />
+					{{ formatMessage(messages.surveyNoThanks) }}
+				</Button>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<style scoped>
+.popup-survey-enter-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s cubic-bezier(0.51, 1.08, 0.35, 1.15);
+	transform-origin: top center;
+}
+
+.popup-survey-leave-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s cubic-bezier(0.68, -0.17, 0.23, 0.11);
+	transform-origin: top center;
+}
+
+.popup-survey-enter-from,
+.popup-survey-leave-to {
+	opacity: 0;
+	transform: translateY(10rem) scale(0.8) scaleY(1.6);
+}
+</style>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { injectNotificationManager, ProjectCard, Button } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -69,9 +69,7 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<ButtonStyled color="brand">
-						<button @click="install">Install</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="install">Install</Button>
 				</div>
 			</div>
 		</div>

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

@@ -4,34 +4,23 @@
 		class="flex items-center gap-2 mr-1.5"
 		data-tauri-drag-region-exclude
 	>
-		<ButtonStyled type="transparent" circular>
-			<button class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
-				<MinimizeIcon />
-			</button>
-		</ButtonStyled>
-		<ButtonStyled type="transparent" circular>
-			<button class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
-				<RestoreIcon v-if="isMaximized" />
-				<MaximizeIcon v-else />
-			</button>
-		</ButtonStyled>
-		<ButtonStyled
-			type="transparent"
-			color="red"
-			color-fill="none"
-			hover-color-fill="background"
-			circular
-		>
-			<button class="relative expanded-button close-button" @click="handleClose">
-				<XIcon />
-			</button>
-		</ButtonStyled>
+		<IconButton type="quiet" label="Minimize window" class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
+			<MinimizeIcon />
+		</IconButton>
+		<IconButton type="quiet" label="Toggle maximize window" class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
+			<RestoreIcon v-if="isMaximized" />
+			<MaximizeIcon v-else />
+		</IconButton>
+		<IconButton type="quiet" color="red" label="Close window" class="relative expanded-button close-button hover:!bg-red focus-visible:!bg-red" @click="handleClose">
+			<XIcon />
+		</IconButton>
 	</section>
 </template>
 
 <script setup>
+import { IconButton } from '@modrinth/ui'
 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 } from 'vue'

apps/app-frontend/src/components/ui/app-update-button/index.vue

@@ -1,9 +1,8 @@
 <template>
-	<ButtonStyled color="brand" type="outlined" hover-color-fill="background">
-		<button
+	<Button type="outlined"
 			v-if="showUpdatePill"
-			type="button"
-			class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out"
+			native-type="button"
+			class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
 			:class="{
 				'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
 				'opacity-100 scale-100': finishedDownloading && animateReadyPill,
@@ -12,20 +11,20 @@
 			:aria-busy="isUpdateDownloading"
 			@click="handleUpdateClick"
 		>
-			<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
-			<DownloadIcon v-else />
-			<span v-if="isUpdateDownloading">
-				{{ formatMessage(messages.downloadingUpdate) }}
-				<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
-			</span>
-			<span v-else>{{ updateLabel }}</span>
-		</button>
-	</ButtonStyled>
+		<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
+		<DownloadIcon v-else />
+		<span v-if="isUpdateDownloading">
+			{{ formatMessage(messages.downloadingUpdate) }}
+			<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
+		</span>
+		<span v-else>{{ updateLabel }}</span>
+	</Button>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { DownloadIcon, RefreshCwIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import {

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Button, IconButton } from '@modrinth/ui'
 import { MailIcon, SearchIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
@@ -197,26 +197,20 @@ const messages = defineMessages({
 					</div>
 					<div class="flex gap-2">
 						<template v-if="friend.id === userCredentials?.user_id">
-							<ButtonStyled color="brand">
-								<button @click="addFriend(friend)">
-									<UserPlusIcon />
-									Accept
-								</button>
-							</ButtonStyled>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Ignore
-								</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="addFriend(friend)">
+								<UserPlusIcon />
+								Accept
+							</Button>
+							<Button @click="removeFriend(friend)">
+								<XIcon />
+								Ignore
+							</Button>
 						</template>
 						<template v-else>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Cancel
-								</button>
-							</ButtonStyled>
+							<Button @click="removeFriend(friend)">
+								<XIcon />
+								Cancel
+							</Button>
 						</template>
 					</div>
 				</div>
@@ -240,26 +234,21 @@ const messages = defineMessages({
 					wrapper-class="flex-1"
 					@keyup.enter="addFriendFromModal"
 				/>
-				<ButtonStyled color="brand">
-					<button :disabled="username.length === 0" @click="addFriendFromModal">
-						<SendIcon />
-						{{ formatMessage(messages.sendFriendRequest) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="username.length === 0" @click="addFriendFromModal">
+					<SendIcon />
+					{{ formatMessage(messages.sendFriendRequest) }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
-			<ButtonStyled circular type="transparent">
-				<button
+			<IconButton type="quiet" :label="formatMessage(messages.addFriend)"
 					v-tooltip="formatMessage(messages.addFriend)"
-					:aria-label="formatMessage(messages.addFriend)"
 					@click="addFriendModal.show"
 				>
-					<UserPlusIcon />
-				</button>
-			</ButtonStyled>
+				<UserPlusIcon />
+			</IconButton>
 			<StyledInput
 				v-model="search"
 				:icon="SearchIcon"
@@ -274,23 +263,20 @@ const messages = defineMessages({
 		<h3 v-else class="w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
-		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
-			<button
+		<IconButton type="quiet" :label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })" v-if="incomingRequests.length > 0"
 				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
 				class="relative"
-				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
 				@click="friendInvitesModal.show"
 			>
-				<MailIcon />
-				<span
-					v-if="incomingRequests.length > 0"
-					aria-hidden="true"
-					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
-				>
-					{{ incomingRequests.length }}
-				</span>
-			</button>
-		</ButtonStyled>
+			<MailIcon />
+			<span
+				v-if="incomingRequests.length > 0"
+				aria-hidden="true"
+				class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+			>
+				{{ incomingRequests.length }}
+			</span>
+		</IconButton>
 	</div>
 	<div class="flex flex-col gap-3">
 		<h3 v-if="loading" class="text-base text-primary font-medium m-0">

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

@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import { IconButton, TeleportOverflowMenu } from '@modrinth/ui'
 import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
 import {
 	Accordion,
 	Avatar,
-	ButtonStyled,
 	defineMessages,
-	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
@@ -123,68 +122,62 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
+					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"
 				>
-					<div class="relative">
-						<Avatar
-							:src="friend.avatar"
-							:class="{ grayscale: !friend.online && friend.accepted }"
-							class="w-12 h-12 rounded-full"
-							size="32px"
-							circle
-						/>
-						<span
-							v-if="friend.online"
-							aria-hidden="true"
-							class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-						/>
-					</div>
-					<div class="flex flex-col">
-						<span
-							class="text-sm m-0"
-							:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
-						>
-							{{ friend.username }}
-						</span>
-						<span v-if="!friend.accepted" class="m-0 text-xs">
-							{{ formatMessage(messages.friendRequestSent) }}
-						</span>
-						<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
-					</div>
-					<ButtonStyled v-if="friend.accepted" circular type="transparent">
-						<OverflowMenu
+					<RouterLink
+						:to="`/user/${encodeURIComponent(friend.username)}`"
+						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline"
+					>
+						<div class="relative">
+							<Avatar
+								:src="friend.avatar"
+								:class="{ grayscale: !friend.online && friend.accepted }"
+								class="w-12 h-12 rounded-full"
+								size="32px"
+								circle
+							/>
+							<span
+								v-if="friend.online"
+								aria-hidden="true"
+								class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
+							/>
+						</div>
+						<div class="flex flex-col">
+							<span
+								class="text-sm m-0"
+								:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
+							>
+								{{ friend.username }}
+							</span>
+							<span v-if="!friend.accepted" class="m-0 text-xs">
+								{{ formatMessage(messages.friendRequestSent) }}
+							</span>
+							<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
+						</div>
+					</RouterLink>
+					<TeleportOverflowMenu type="quiet" label="More options" v-if="friend.accepted"
 							class="opacity-0 group-hover:opacity-100 transition-opacity"
 							:options="[
-								{
-									id: 'view-profile',
-									action: () => openProfile(friend.username),
-								},
 								{
 									id: 'remove-friend',
+									label: formatMessage(messages.removeFriend),
 									action: () => removeFriend(friend),
-									color: 'red',
+									tone: 'red',
 								},
 							]"
 						>
-							<MoreVerticalIcon />
-							<template #view-profile>
-								<UserIcon />
-								{{ formatMessage(messages.viewProfile) }}
-							</template>
-							<template #remove-friend>
-								<TrashIcon />
-								{{ formatMessage(messages.removeFriend) }}
-							</template>
-						</OverflowMenu>
-					</ButtonStyled>
-					<ButtonStyled v-else type="transparent" circular>
-						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
-							<XIcon />
-						</button>
-					</ButtonStyled>
+						<MoreVerticalIcon />
+						<template #remove-friend>
+							<TrashIcon />
+							{{ formatMessage(messages.removeFriend) }}
+						</template>
+					</TeleportOverflowMenu>
+					<IconButton type="quiet" :label="formatMessage(messages.cancelRequest)" v-else v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
+						<XIcon />
+					</IconButton>
 				</div>
 			</div>
 		</template>

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

@@ -1,9 +1,9 @@
 <script setup>
+import { Button } from '@modrinth/ui'
 import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
 	injectNotificationManager,
 	StyledInput,
 } from '@modrinth/ui'
@@ -109,19 +109,15 @@ async function addServer(instance) {
 						/>
 						{{ instance.name }}
 					</router-link>
-					<ButtonStyled>
-						<button :disabled="instance.added || instance.adding" @click="addServer(instance)">
-							<PlusIcon v-if="!instance.added && !instance.adding" />
-							<CheckIcon v-else-if="instance.added" />
-							{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
-						</button>
-					</ButtonStyled>
+					<Button :disabled="instance.added || instance.adding" @click="addServer(instance)">
+						<PlusIcon v-if="!instance.added && !instance.adding" />
+						<CheckIcon v-else-if="instance.added" />
+						{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
+					</Button>
 				</div>
 			</div>
 			<div class="input-group push-right">
-				<ButtonStyled>
-					<button @click="modal.hide()">Cancel</button>
-				</ButtonStyled>
+				<Button @click="modal.hide()">Cancel</Button>
 			</div>
 		</div>
 	</ModalWrapper>

apps/app-frontend/src/components/ui/instance-page-header/index.vue

@@ -85,72 +85,60 @@
 
 		<template #actions>
 			<PageHeaderActions>
-				<ButtonStyled v-if="isInstalling" color="brand" size="large">
-					<button type="button" disabled>
-						{{ formatMessage(commonMessages.installingLabel) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="playing" color="red" size="large">
-					<button type="button" :disabled="stopping" @click="emit('stop')">
-						<StopCircleIcon />
-						{{
-							stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
-						}}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="instance.quarantined" color="brand" size="large">
-					<button v-tooltip="formatMessage(messages.lockedPlayTooltip)" type="button" disabled>
-						<PlayIcon />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="instance.install_stage !== 'installed'" color="brand" size="large">
-					<button type="button" @click="emit('repair')">
-						<DownloadIcon />
-						{{ formatMessage(messages.repair) }}
-					</button>
-				</ButtonStyled>
-				<JoinedButtons
+				<Button type="colored" color="brand" size="xl" v-if="isInstalling" native-type="button" disabled>
+					{{ formatMessage(commonMessages.installingLabel) }}
+				</Button>
+				<Button type="colored" color="red" size="xl" v-else-if="playing" native-type="button" :disabled="stopping" @click="emit('stop')">
+					<StopCircleIcon />
+					{{
+						stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
+					}}
+				</Button>
+				<Button type="colored" color="brand" size="xl" v-else-if="instance.quarantined" v-tooltip="formatMessage(messages.lockedPlayTooltip)" native-type="button" disabled>
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<Button type="colored" color="brand" size="xl" v-else-if="instance.install_stage !== 'installed'" native-type="button" @click="emit('repair')">
+					<DownloadIcon />
+					{{ formatMessage(messages.repair) }}
+				</Button>
+				<SplitButton
 					v-else-if="!loading && isServerInstance"
-					:actions="serverPlayActions"
+					type="colored"
 					color="brand"
-					size="large"
-				/>
-				<ButtonStyled v-else-if="!loading" color="brand" size="large">
-					<button type="button" @click="emit('play')">
-						<PlayIcon />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else color="brand" size="large">
-					<button type="button" disabled>{{ formatMessage(messages.starting) }}</button>
-				</ButtonStyled>
+					size="xl"
+					:options="serverPlayOptions"
+					:menu-label="formatMessage(messages.launchInstance)"
+					@click="emit('playServer')"
+				>
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</SplitButton>
+				<Button type="colored" color="brand" size="xl" v-else-if="!loading" native-type="button" @click="emit('play')">
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<Button type="colored" color="brand" size="xl" v-else native-type="button" disabled>{{ formatMessage(messages.starting) }}</Button>
 
-				<ButtonStyled circular size="large">
-					<button
+				<IconButton size="xl" :label="formatMessage(messages.instanceSettings)"
 						v-tooltip="formatMessage(messages.instanceSettings)"
-						type="button"
-						:aria-label="formatMessage(messages.instanceSettings)"
+						native-type="button"
 						@click="emit('settings')"
 					>
-						<SettingsIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular size="large" type="transparent">
-					<TeleportOverflowMenu
+					<SettingsIcon />
+				</IconButton>
+				<TeleportOverflowMenu type="quiet" size="xl" :label="formatMessage(messages.moreActions)"
 						:options="moreActions"
-						:tooltip="formatMessage(messages.moreActions)"
-						:aria-label="formatMessage(messages.moreActions)"
 					>
-						<MoreVerticalIcon />
-					</TeleportOverflowMenu>
-				</ButtonStyled>
+					<MoreVerticalIcon />
+				</TeleportOverflowMenu>
 			</PageHeaderActions>
 		</template>
 	</PageHeader>
 </template>
 
 <script setup lang="ts">
+import { Button, IconButton, SplitButton, TeleportOverflowMenu } from '@modrinth/ui'
 import type { Labrinth } from '@modrinth/api-client'
 import {
 	DownloadIcon,
@@ -169,12 +157,9 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	formatLoaderLabel,
-	type JoinedButtonAction,
-	JoinedButtons,
 	LoaderIcon as ServerLoaderIcon,
 	PageHeader,
 	PageHeaderActions,
@@ -182,8 +167,7 @@ import {
 	PageHeaderMetadata,
 	PageHeaderMetadataItem,
 	type ServerLoader,
-	TeleportOverflowMenu,
-	type TeleportOverflowMenuItem,
+	type OverflowMenuOption,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed } from 'vue'
@@ -350,13 +334,7 @@ const playtimeLabel = computed(() => {
 	const seconds = Math.floor(props.timePlayed)
 	return `${seconds} second${seconds > 1 ? 's' : ''}`
 })
-const serverPlayActions = computed<JoinedButtonAction[]>(() => [
-	{
-		id: 'join_server',
-		label: formatMessage(commonMessages.playButton),
-		icon: PlayIcon,
-		action: () => emit('playServer'),
-	},
+const serverPlayOptions = computed<OverflowMenuOption[]>(() => [
 	{
 		id: 'launch_instance',
 		label: formatMessage(messages.launchInstance),
@@ -364,8 +342,8 @@ const serverPlayActions = computed<JoinedButtonAction[]>(() => [
 		action: () => emit('play'),
 	},
 ])
-const moreActions = computed<TeleportOverflowMenuItem[]>(() => {
-	const actions: TeleportOverflowMenuItem[] = [
+const moreActions = computed<OverflowMenuOption[]>(() => {
+	const actions: OverflowMenuOption[] = [
 		{
 			id: 'open-folder',
 			label: formatMessage(messages.openFolder),
@@ -393,12 +371,12 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => {
 
 	if (props.instance.shared_instance?.role === 'member') {
 		actions.push(
-			{ divider: true },
+			{ type: 'divider' },
 			{
 				id: 'report-shared-instance',
 				label: formatMessage(commonMessages.reportButton),
 				icon: ReportIcon,
-				color: 'red',
+				tone: 'red',
 				action: (event) => emit('report', event),
 			},
 		)

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-stale.vue

@@ -6,23 +6,21 @@
 	>
 		{{ formatMessage(messages.sharedInstanceChangesBody) }}
 		<template #actions>
-			<ButtonStyled color="blue">
-				<button class="!h-10" :disabled="isPublishButtonDisabled" @click="reviewChanges">
-					<SpinnerIcon
-						v-if="isReviewingPublish || isPublishing"
-						class="animate-spin"
-						aria-hidden="true"
-					/>
-					<UploadIcon v-else aria-hidden="true" />
-					{{
-						isPublishing
-							? formatMessage(messages.sharedInstancePublishingButton)
-							: isReviewingPublish
-								? formatMessage(messages.sharedInstanceReviewingButton)
-								: formatMessage(messages.sharedInstancePublishButton)
-					}}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="blue" class="!h-10" :disabled="isPublishButtonDisabled" @click="reviewChanges">
+				<SpinnerIcon
+					v-if="isReviewingPublish || isPublishing"
+					class="animate-spin"
+					aria-hidden="true"
+				/>
+				<UploadIcon v-else aria-hidden="true" />
+				{{
+					isPublishing
+						? formatMessage(messages.sharedInstancePublishingButton)
+						: isReviewingPublish
+							? formatMessage(messages.sharedInstanceReviewingButton)
+							: formatMessage(messages.sharedInstancePublishButton)
+				}}
+			</Button>
 		</template>
 	</Admonition>
 
@@ -35,8 +33,9 @@
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
+import { Admonition, useVIntl } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import SharedInstancePublishModal from '@/components/ui/shared-instances/SharedInstancePublishModal.vue'

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-unavailable.vue

@@ -8,19 +8,18 @@
 	>
 		{{ formatSharedInstanceUnavailable(reason ?? null, manager) }}
 		<template v-if="reason === 'quarantined'" #actions>
-			<ButtonStyled color="orange">
-				<button class="!h-10" @click="emit('delete')">
-					<TrashIcon aria-hidden="true" />
-					{{ formatMessage(messages.deleteInstance) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="orange" class="!h-10" @click="emit('delete')">
+				<TrashIcon aria-hidden="true" />
+				{{ formatMessage(messages.deleteInstance) }}
+			</Button>
 		</template>
 	</Admonition>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { TrashIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import { Admonition, defineMessages, useVIntl } from '@modrinth/ui'
 
 import type { SharedInstanceUnavailableReason } from '@/helpers/install'
 import {

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-update-available.vue

@@ -6,19 +6,18 @@
 	>
 		{{ formatMessage(messages.sharedInstanceUpdateAvailableBody, { name: instanceName }) }}
 		<template #actions>
-			<ButtonStyled color="blue">
-				<button class="!h-10" @click="emit('review', $event)">
-					<DownloadIcon aria-hidden="true" />
-					{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="blue" class="!h-10" @click="emit('review', $event)">
+				<DownloadIcon aria-hidden="true" />
+				{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
+			</Button>
 		</template>
 	</Admonition>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { DownloadIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
+import { Admonition, useVIntl } from '@modrinth/ui'
 
 import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
 

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -1,16 +1,7 @@
 <script setup lang="ts">
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	Checkbox,
-	Chips,
-	defineMessages,
-	injectNotificationManager,
-	OverflowMenu,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Avatar, Checkbox, Chips, defineMessages, injectNotificationManager, StyledInput, useVIntl } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
@@ -298,17 +289,20 @@ const messages = defineMessages({
 			<div class="flex flex-col gap-1">
 				<span class="text-lg font-semibold text-contrast">Icon</span>
 				<div class="group relative w-fit">
-					<OverflowMenu
+					<TeleportOverflowMenu :label="formatMessage(messages.editIcon)"
 						v-tooltip="formatMessage(messages.editIcon)"
 						class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
 						:options="[
 							{
 								id: 'select',
+								label: icon
+									? formatMessage(messages.replaceIcon)
+									: formatMessage(messages.selectIcon),
 								action: () => setIcon(),
 							},
 							{
 								id: 'remove',
-								color: 'danger',
+								label: formatMessage(messages.removeIcon),
 								action: () => resetIcon(),
 								shown: !!icon,
 							},
@@ -331,7 +325,7 @@ const messages = defineMessages({
 							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
 						</template>
 						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-					</OverflowMenu>
+					</TeleportOverflowMenu>
 				</div>
 			</div>
 		</div>
@@ -352,17 +346,15 @@ const messages = defineMessages({
 				<h2 id="duplicate-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 					{{ formatMessage(messages.duplicateInstance) }}
 				</h2>
-				<ButtonStyled>
-					<button
+				<Button
 						v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
 						aria-labelledby="duplicate-instance-label"
 						:disabled="installing"
-						class="w-max !shadow-none"
+						class="w-max"
 						@click="duplicateInstance"
 					>
-						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
-					</button>
-				</ButtonStyled>
+					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+				</Button>
 				<p class="m-0">
 					{{ formatMessage(messages.duplicateInstanceDescription) }}
 				</p>
@@ -388,11 +380,9 @@ const messages = defineMessages({
 						class="w-full max-w-[300px]"
 						@submit="() => addCategory"
 					/>
-					<ButtonStyled>
-						<button class="w-fit !shadow-none" @click="() => addCategory()">
-							<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-						</button>
-					</ButtonStyled>
+					<Button class="w-fit" @click="() => addCategory()">
+						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+					</Button>
 				</div>
 			</div>
 			<p class="m-0">
@@ -421,22 +411,20 @@ const messages = defineMessages({
 			<h2 id="delete-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 				{{ formatMessage(messages.deleteInstance) }}
 			</h2>
-			<ButtonStyled color="red">
-				<button
+			<Button type="colored" color="red"
 					aria-labelledby="delete-instance-label"
 					:disabled="removing"
-					class="w-fit !shadow-none"
+					class="w-fit"
 					@click="deleteConfirmModal.show()"
 				>
-					<SpinnerIcon v-if="removing" class="animate-spin" />
-					<TrashIcon v-else />
-					{{
-						removing
-							? formatMessage(messages.deletingInstanceButton)
-							: formatMessage(messages.deleteInstanceButton)
-					}}
-				</button>
-			</ButtonStyled>
+				<SpinnerIcon v-if="removing" class="animate-spin" />
+				<TrashIcon v-else />
+				{{
+					removing
+						? formatMessage(messages.deletingInstanceButton)
+						: formatMessage(messages.deleteInstanceButton)
+				}}
+			</Button>
 			<p class="m-0">
 				{{ formatMessage(messages.deleteInstanceDescription) }}
 			</p>

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import {
 	CheckCircleIcon,
 	CoffeeIcon,
@@ -9,7 +10,6 @@ import {
 	XCircleIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
@@ -224,45 +224,56 @@ const messages = defineMessages({
 							wrapper-class="flex-1 min-w-0"
 							@update:model-value="(val) => (javaPath = String(val))"
 						/>
-						<ButtonStyled
+						<Button
+							type="quiet"
 							:color="
 								!hoveringTest && !testingJava
 									? javaTestResult === true
 										? 'green'
 										: 'red'
-									: 'standard'
+									: undefined
 							"
-							color-fill="text"
-						>
-							<button
 								:disabled="!overrideJavaInstall || testingJava"
 								@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
 								@mouseenter="overrideJavaInstall && (hoveringTest = true)"
 								@mouseleave="hoveringTest = false"
-							>
-								<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-								<CheckCircleIcon
-									v-else-if="javaTestResult === true && !hoveringTest"
-									class="h-4 w-4"
-								/>
-								<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
-								<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
-							</button>
-						</ButtonStyled>
+							 :style="{ '--legacy-button-color': (
+								!hoveringTest && !testingJava
+									? javaTestResult === true
+										? 'green'
+										: 'red'
+									: 'standard'
+							) && (
+								!hoveringTest && !testingJava
+									? javaTestResult === true
+										? 'green'
+										: 'red'
+									: 'standard'
+							) !== 'standard' ? `var(--color-${
+								!hoveringTest && !testingJava
+									? javaTestResult === true
+										? 'green'
+										: 'red'
+									: 'standard'
+							})` : undefined }" class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]">
+							<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+							<CheckCircleIcon
+								v-else-if="javaTestResult === true && !hoveringTest"
+								class="h-4 w-4"
+							/>
+							<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
+							<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
+						</Button>
 					</div>
 					<div v-if="overrideJavaInstall" class="flex gap-2">
-						<ButtonStyled>
-							<button @click="handleDetectJava">
-								<SearchIcon />
-								Detect
-							</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button @click="handleBrowseJava">
-								<FolderSearchIcon />
-								Browse
-							</button>
-						</ButtonStyled>
+						<Button @click="handleDetectJava">
+							<SearchIcon />
+							Detect
+						</Button>
+						<Button @click="handleBrowseJava">
+							<FolderSearchIcon />
+							Browse
+						</Button>
 					</div>
 				</div>
 			</div>

apps/app-frontend/src/components/ui/instance_settings/SharingSettings.vue

@@ -13,7 +13,14 @@
 			<Table :columns="inviteColumns" :data="activeInvites" row-key="id" table-min-width="36rem">
 				<template #empty-state>
 					<div class="flex h-40 items-center justify-center text-secondary">
-						{{ formatMessage(messages.noActiveInvites) }}
+						<SpinnerIcon
+							v-if="activeInvitesQuery.isLoading.value"
+							class="animate-spin"
+							aria-hidden="true"
+						/>
+						<template v-else>
+							{{ formatMessage(messages.noActiveInvites) }}
+						</template>
 					</div>
 				</template>
 				<template #cell-id="{ row }">
@@ -33,20 +40,26 @@
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex justify-end">
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="formatMessage(messages.revokeInvite)"
-								:aria-label="
+						<IconButton type="quiet" :label="
 									formatMessage(messages.revokeInviteWithCode, {
 										code: row.id,
 									})
 								"
+								v-tooltip="formatMessage(messages.revokeInvite)"
+								:disabled="revokeInviteMutation.isPending.value || isBusy"
 								class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
 								@click="revokeInviteModal?.show(row.id)"
 							>
-								<XIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
+							<SpinnerIcon
+								v-if="
+									revokeInviteMutation.isPending.value &&
+									revokeInviteMutation.variables.value?.inviteId === row.id
+								"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<XIcon v-else aria-hidden="true" />
+						</IconButton>
 					</div>
 				</template>
 			</Table>
@@ -64,9 +77,9 @@
 </template>
 
 <script setup lang="ts">
-import { XIcon } from '@modrinth/assets'
+import { IconButton } from '@modrinth/ui'
+import { SpinnerIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	CopyCode,
 	defineMessages,
 	Table,
@@ -75,13 +88,18 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
 import ConfirmRevokeSharedInstanceInviteModal from '@/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue'
 import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
 import { config } from '@/config'
-import { type SharedInstanceInvite, unpublish_shared_instance } from '@/helpers/instance'
+import {
+	get_shared_instance_invites,
+	revoke_shared_instance_invite,
+	type SharedInstanceInvite,
+	unpublish_shared_instance,
+} from '@/helpers/instance'
 import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
 import { injectInstanceSettings } from '@/providers/instance-settings'
 
@@ -93,11 +111,51 @@ const unpublishing = ref(false)
 const revokeInviteModal = ref<InstanceType<typeof ConfirmRevokeSharedInstanceInviteModal>>()
 const formatRelativeTime = useRelativeTime()
 const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
-const isBusy = computed(
-	() => instance.value.install_stage !== 'installed' || unpublishing.value || !!offline,
-)
 
 type InviteTableColumn = 'id' | 'uses' | 'expiration' | 'actions'
+type ActiveInvitesQueryKey = readonly ['sharedInstanceInvites', string]
+
+const activeInvitesQueryKey = computed(
+	() => ['sharedInstanceInvites', instance.value.id] as const satisfies ActiveInvitesQueryKey,
+)
+const activeInvitesQuery = useQuery({
+	queryKey: activeInvitesQueryKey,
+	queryFn: async ({ queryKey }) => {
+		try {
+			return await get_shared_instance_invites(queryKey[1])
+		} catch (error) {
+			notifySharedInstanceError(error)
+			throw error
+		}
+	},
+	enabled: () => !!instance.value.id && !offline,
+	retry: false,
+	staleTime: Infinity,
+	refetchOnMount: 'always',
+	refetchOnReconnect: false,
+	refetchOnWindowFocus: false,
+})
+const activeInvites = computed(() => activeInvitesQuery.data.value ?? [])
+
+const revokeInviteMutation = useMutation({
+	mutationFn: ({ instanceId, inviteId }: { instanceId: string; inviteId: string }) =>
+		revoke_shared_instance_invite(instanceId, inviteId),
+	onSuccess: (_data, { instanceId, inviteId }) => {
+		queryClient.setQueryData<SharedInstanceInvite[]>(
+			['sharedInstanceInvites', instanceId],
+			(invites = []) => invites.filter((invite) => invite.id !== inviteId),
+		)
+	},
+	onError: notifySharedInstanceError,
+})
+
+const isBusy = computed(
+	() =>
+		instance.value.install_stage !== 'installed' ||
+		unpublishing.value ||
+		revokeInviteMutation.isPending.value ||
+		!!offline,
+)
 
 const inviteColumns = computed<TableColumn<InviteTableColumn>[]>(() => [
 	{
@@ -123,32 +181,9 @@ const inviteColumns = computed<TableColumn<InviteTableColumn>[]>(() => [
 	},
 ])
 
-const now = Date.now()
-
-// TODO: Use actual endpoint
-const activeInvites = ref<SharedInstanceInvite[]>([
-	{
-		id: 'wqHPxNagZr',
-		expiration: new Date(now + 6 * 24 * 60 * 60 * 1000).toISOString(),
-		maxUses: 10,
-		uses: 0,
-	},
-	{
-		id: 'GbRGfY7hbs',
-		expiration: new Date(now + 3 * 24 * 60 * 60 * 1000).toISOString(),
-		maxUses: 10,
-		uses: 2,
-	},
-	{
-		id: 'k9mvD2QxLc',
-		expiration: new Date(now + 90 * 60 * 1000).toISOString(),
-		maxUses: 5,
-		uses: 4,
-	},
-])
-
 function revokeInvite(inviteId: string) {
-	activeInvites.value = activeInvites.value.filter((invite) => invite.id !== inviteId)
+	if (revokeInviteMutation.isPending.value) return
+	revokeInviteMutation.mutate({ instanceId: instance.value.id, inviteId })
 }
 
 async function unpublishSharedInstance() {

apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
 	CheckIcon,
 	CopyIcon,
@@ -7,7 +8,7 @@ import {
 	MessagesSquareIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
+import { Admonition, Collapsible, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
@@ -137,16 +138,12 @@ async function copyToClipboard(text: string) {
 
 			<!-- Action buttons -->
 			<div class="flex items-center gap-2">
-				<ButtonStyled>
-					<a href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
-						<MessagesSquareIcon /> Contact support
-					</a>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
-						<LogInIcon /> Sign in again
-					</button>
-				</ButtonStyled>
+				<ButtonLink href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
+					<MessagesSquareIcon /> Contact support
+				</ButtonLink>
+				<Button type="colored" color="brand" :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
+					<LogInIcon /> Sign in again
+				</Button>
 			</div>
 
 			<div class="flex flex-col gap-2">
@@ -176,16 +173,14 @@ async function copyToClipboard(text: string) {
 							>
 								{{ debugInfo }}
 							</div>
-							<ButtonStyled circular>
-								<button
+							<IconButton :label="'Copy debug info'"
 									v-tooltip="'Copy debug info'"
 									:disabled="copied"
 									@click="copyToClipboard(debugInfo)"
 								>
-									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-									<template v-else> <CopyIcon /> </template>
-								</button>
-							</ButtonStyled>
+								<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+								<template v-else> <CopyIcon /> </template>
+							</IconButton>
 						</div>
 					</Collapsible>
 				</div>

apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue

@@ -21,38 +21,34 @@
 
 		<div class="flex flex-col gap-6 px-6 pb-6">
 			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<a class="w-full !shadow-none" href="https://support.modrinth.com" @click="modal?.hide()">
-						<MessagesSquareIcon />
-						{{ formatMessage(messages.getSupport) }}
-					</a>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button class="w-full !shadow-none" :disabled="loadingSignIn" @click="signIn">
-						<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
-						<svg
-							v-else
-							width="20"
-							height="20"
-							viewBox="0 0 20 20"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect
-								x="10.75"
-								y="10.75"
-								width="9.25"
-								height="9.25"
-								fill="black"
-								fill-opacity="0.9"
-							/>
-						</svg>
-						{{ formatMessage(messages.signIn) }}
-					</button>
-				</ButtonStyled>
+				<ButtonLink class="w-full" href="https://support.modrinth.com" @click="modal?.hide()">
+					<MessagesSquareIcon />
+					{{ formatMessage(messages.getSupport) }}
+				</ButtonLink>
+				<Button type="colored" color="brand" class="w-full" :disabled="loadingSignIn" @click="signIn">
+					<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
+					<svg
+						v-else
+						width="20"
+						height="20"
+						viewBox="0 0 20 20"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect
+							x="10.75"
+							y="10.75"
+							width="9.25"
+							height="9.25"
+							fill="black"
+							fill-opacity="0.9"
+						/>
+					</svg>
+					{{ formatMessage(messages.signIn) }}
+				</Button>
 			</div>
 			<p class="m-0 text-center text-sm text-secondary">
 				{{ formatMessage(messages.dontHaveAccount) }}
@@ -68,8 +64,9 @@
 </template>
 
 <script setup lang="ts">
+import { Button, ButtonLink } from '@modrinth/ui'
 import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { defineMessages, NewModal, useVIntl } from '@modrinth/ui'
 import { inject, type Ref, ref } from 'vue'
 
 import steveImage from '@/assets/steve-look-up-left.webp'

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

@@ -3,12 +3,14 @@ import {
 	CoffeeIcon,
 	GameIcon,
 	GaugeIcon,
+	HeartHandshakeIcon,
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
 	Settings2Icon,
 	ShieldIcon,
 	ToggleRightIcon,
+	UserIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
@@ -17,13 +19,16 @@ import {
 	defineMessages,
 	ProgressBar,
 	TabbedModal,
+	UnsavedChangesPopup,
 	useVIntl,
 } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { computed, ref, watch } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 
 import PrivacySettings from '@/components/ui/settings/account/PrivacySettings.vue'
+import ProfileSettings from '@/components/ui/settings/account/ProfileSettings.vue'
+import SocialSettings from '@/components/ui/settings/account/SocialSettings.vue'
 import AppearanceSettings from '@/components/ui/settings/display/AppearanceSettings.vue'
 import BehaviorSettings from '@/components/ui/settings/display/BehaviorSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/display/FeatureFlagSettings.vue'
@@ -32,6 +37,10 @@ import DefaultInstanceSettings from '@/components/ui/settings/instances/DefaultI
 import JavaSettings from '@/components/ui/settings/instances/JavaSettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/instances/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
+import {
+	appSettingsModalContextKey,
+	type UnsavedChangesController,
+} from '@/providers/app-settings-modal'
 import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
 import { useTheming } from '@/store/state'
 
@@ -98,6 +107,18 @@ const tabs = [
 		content: FeatureFlagSettings,
 		developerOnly: true,
 	},
+	{
+		name: commonSettingsMessages.profile,
+		category: tabCategories.account,
+		icon: UserIcon,
+		content: ProfileSettings,
+	},
+	{
+		name: commonSettingsMessages.social,
+		category: tabCategories.account,
+		icon: HeartHandshakeIcon,
+		content: SocialSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.privacy',
@@ -110,7 +131,7 @@ const tabs = [
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.default-instance-options',
-			defaultMessage: 'Default instance options',
+			defaultMessage: 'Default game options',
 		}),
 		category: tabCategories.instances,
 		icon: GameIcon,
@@ -139,12 +160,58 @@ const tabs = [
 const availableTabs = computed(() => tabs.filter((tab) => !tab.developerOnly || themeStore.devMode))
 
 const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
+const unsavedChangesPopup = ref<{ nudge: () => void } | null>(null)
+const unsavedChangesController = ref<UnsavedChangesController | null>(null)
+const emptyUnsavedChangesState: Record<string, unknown> = {}
+const originalUnsavedChangesState = computed(
+	() => unsavedChangesController.value?.getOriginal() ?? emptyUnsavedChangesState,
+)
+const modifiedUnsavedChangesState = computed(
+	() => unsavedChangesController.value?.getModified() ?? emptyUnsavedChangesState,
+)
+const savingUnsavedChanges = computed(() => unsavedChangesController.value?.isSaving() ?? false)
+const hasUnsavedChanges = computed(() => unsavedChangesController.value?.hasChanges() ?? false)
+
+function canLeaveCurrentTab(): boolean {
+	if (!unsavedChangesController.value?.hasChanges()) return true
+	unsavedChangesPopup.value?.nudge()
+	return false
+}
+
+function close(): boolean {
+	return modal.value?.hide() ?? false
+}
+
+function registerUnsavedChangesController(controller: UnsavedChangesController | null): void {
+	unsavedChangesController.value = controller
+}
+
+provide(appSettingsModalContextKey, {
+	close,
+	registerUnsavedChangesController,
+})
+
+function resetUnsavedChanges(): void {
+	unsavedChangesController.value?.reset()
+}
+
+function saveUnsavedChanges(): void {
+	void unsavedChangesController.value?.save()
+}
 
 function show() {
 	modal.value?.show()
 }
 
-defineExpose({ show })
+function showProfile(): void {
+	const profileTabIndex = availableTabs.value.findIndex((tab) => tab.content === ProfileSettings)
+	if (profileTabIndex >= 0) {
+		modal.value?.setTab(profileTabIndex)
+	}
+	modal.value?.show()
+}
+
+defineExpose({ show, showProfile })
 
 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
 
@@ -197,12 +264,30 @@ const messages = defineMessages({
 })
 </script>
 <template>
-	<TabbedModal ref="modal" :tabs="availableTabs" :width="'min(928px, calc(95vw - 10rem))'">
+	<TabbedModal
+		ref="modal"
+		:tabs="availableTabs"
+		:width="'min(928px, calc(95vw - 10rem))'"
+		:before-hide="canLeaveCurrentTab"
+		:before-tab-change="canLeaveCurrentTab"
+		:floating-action-bar-shown="hasUnsavedChanges"
+	>
 		<template #title>
 			<span class="text-2xl font-semibold text-contrast">
 				{{ formatMessage(commonMessages.settingsLabel) }}
 			</span>
 		</template>
+		<template #floating-action-bar>
+			<UnsavedChangesPopup
+				ref="unsavedChangesPopup"
+				:original="originalUnsavedChangesState"
+				:modified="modifiedUnsavedChangesState"
+				:saving="savingUnsavedChanges"
+				inline
+				@reset="resetUnsavedChanges"
+				@save="saveUnsavedChanges"
+			/>
+		</template>
 		<template #footer>
 			<div class="mt-auto text-secondary text-sm">
 				<div class="mb-3">

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

@@ -6,28 +6,24 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="confirm">
-						<TrashIcon />
-						{{ formatMessage(messages.deleteButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="confirm">
+					<TrashIcon />
+					{{ formatMessage(messages.deleteButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	NewModal,

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

@@ -18,12 +18,10 @@
 						{{ formatMessage(messages.sharedInstance) }}
 					</span>
 
-					<ButtonStyled type="transparent">
-						<button @click="openViewContents">
-							<EyeIcon />
-							{{ formatMessage(messages.viewContents) }}
-						</button>
-					</ButtonStyled>
+					<Button type="quiet" @click="openViewContents">
+						<EyeIcon />
+						{{ formatMessage(messages.viewContents) }}
+					</Button>
 				</div>
 
 				<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
@@ -113,40 +111,30 @@
 			</p>
 
 			<div class="flex w-full items-center justify-between gap-2">
-				<ButtonStyled type="transparent" color="red">
-					<button @click="handleReport">
-						<ReportIcon />
-						{{ formatMessage(commonMessages.reportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" color="red" @click="handleReport">
+					<ReportIcon />
+					{{ formatMessage(commonMessages.reportButton) }}
+				</Button>
 
 				<div class="flex items-center gap-2">
 					<template v-if="hasExternalFiles">
-						<ButtonStyled type="transparent" color="orange">
-							<button @click="handleAccept">
-								{{ formatMessage(messages.installAnyway) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleDecline">
-								<BanIcon />
-								{{ formatMessage(messages.dontInstall) }}
-							</button>
-						</ButtonStyled>
+						<Button type="quiet" color="orange" @click="handleAccept">
+							{{ formatMessage(messages.installAnyway) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleDecline">
+							<BanIcon />
+							{{ formatMessage(messages.dontInstall) }}
+						</Button>
 					</template>
 					<template v-else>
-						<ButtonStyled>
-							<button @click="handleDecline">
-								<XIcon />
-								{{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleAccept">
-								<DownloadIcon />
-								{{ formatMessage(messages.installButton) }}
-							</button>
-						</ButtonStyled>
+						<Button @click="handleDecline">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleAccept">
+							<DownloadIcon />
+							{{ formatMessage(messages.installButton) }}
+						</Button>
 					</template>
 				</div>
 			</div>
@@ -161,12 +149,12 @@
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import type { Labrinth } from '@modrinth/api-client'
 import { BanIcon, DownloadIcon, EyeIcon, ReportIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	type ContentItem,
 	defineMessages,

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

@@ -10,33 +10,27 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="handleGoToInstance">
-						{{ formatMessage(messages.instance) }}
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button @click="handleCreateAnyway">
-						<PlusIcon />
-						{{ formatMessage(messages.create) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button @click="handleGoToInstance">
+					{{ formatMessage(messages.instance) }}
+					<RightArrowIcon />
+				</Button>
+				<Button type="colored" color="orange" @click="handleCreateAnyway">
+					<PlusIcon />
+					{{ formatMessage(messages.create) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { PlusIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,

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

@@ -19,18 +19,14 @@
 
 			<div class="flex flex-col gap-6">
 				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-					<ButtonStyled>
-						<button class="w-full !shadow-none" type="button" @click="authenticate('sign-up')">
-							<UserPlusIcon aria-hidden="true" />
-							{{ formatMessage(messages.createAccountButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button class="w-full" type="button" @click="authenticate('sign-in')">
-							<LogInIcon aria-hidden="true" />
-							{{ formatMessage(messages.signInButton) }}
-						</button>
-					</ButtonStyled>
+					<Button class="w-full" native-type="button" @click="authenticate('sign-up')">
+						<UserPlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createAccountButton) }}
+					</Button>
+					<Button type="colored" color="brand" class="w-full" native-type="button" @click="authenticate('sign-in')">
+						<LogInIcon aria-hidden="true" />
+						{{ formatMessage(messages.signInButton) }}
+					</Button>
 				</div>
 
 				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
@@ -69,23 +65,19 @@
 
 			<div class="flex flex-col gap-6">
 				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-					<ButtonStyled type="outlined">
-						<button class="w-full" type="button" @click="modal?.hide()">
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(messages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button
-							class="w-full !shadow-none"
-							type="button"
+					<Button type="outlined" class="w-full" native-type="button" @click="modal?.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.cancelButton) }}
+					</Button>
+					<Button
+							class="w-full"
+							native-type="button"
 							:disabled="reopeningBrowser"
 							@click="reopenBrowser"
 						>
-							<RefreshCwIcon aria-hidden="true" />
-							{{ formatMessage(messages.openBrowserAgainButton) }}
-						</button>
-					</ButtonStyled>
+						<RefreshCwIcon aria-hidden="true" />
+						{{ formatMessage(messages.openBrowserAgainButton) }}
+					</Button>
 				</div>
 
 				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
@@ -107,8 +99,9 @@
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { LogInIcon, RefreshCwIcon, SpinnerIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
+import { defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { ref } from 'vue'
 

apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { Settings2Icon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	injectPageContext,
@@ -78,12 +78,10 @@ watch(
 			{{ formatMessage(messages.adsConsentTitle) }}
 		</h2>
 		<div class="mt-2 flex flex-col gap-2.5 items-start">
-			<ButtonStyled>
-				<button class="!shadow-none" @click="manageAdsPreferences">
-					<Settings2Icon aria-hidden="true" />
-					{{ formatMessage(messages.adsConsentManage) }}
-				</button>
-			</ButtonStyled>
+			<Button @click="manageAdsPreferences">
+				<Settings2Icon aria-hidden="true" />
+				{{ formatMessage(messages.adsConsentManage) }}
+			</Button>
 			<div>
 				{{ formatMessage(messages.adsConsentIntro) }}
 			</div>

apps/app-frontend/src/components/ui/settings/account/ProfileSettings.vue

@@ -0,0 +1,70 @@
+<template>
+	<AccountProfileSettings
+		ref="profileSettings"
+		:patch-user="patchUser"
+		:change-avatar="changeAvatar"
+		:delete-avatar="deleteAvatar"
+		:get-authenticated-user="getAuthenticatedUser"
+		@profile-link-click="handleProfileLinkClick"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { AccountProfileSettings, injectAuth } from '@modrinth/ui'
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import {
+	change_user_avatar,
+	delete_user_avatar,
+	get_user_profile,
+	patch_user,
+} from '@/helpers/users'
+import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
+
+const settingsModal = inject(appSettingsModalContextKey, null)
+const auth = injectAuth()
+const profileSettings = ref<InstanceType<typeof AccountProfileSettings> | null>(null)
+
+onMounted(() => {
+	settingsModal?.registerUnsavedChangesController({
+		hasChanges: () => profileSettings.value?.hasChanges ?? false,
+		getOriginal: () => profileSettings.value?.originalState ?? {},
+		getModified: () => profileSettings.value?.modifiedState ?? {},
+		isSaving: () => profileSettings.value?.saving ?? false,
+		reset: () => profileSettings.value?.reset(),
+		save: () => profileSettings.value?.save(),
+	})
+})
+
+onBeforeUnmount(() => {
+	settingsModal?.registerUnsavedChangesController(null)
+})
+
+function handleProfileLinkClick(event: MouseEvent): void {
+	if (settingsModal && !settingsModal.close()) {
+		event.preventDefault()
+	}
+}
+
+function patchUser(
+	userId: string,
+	patch: Partial<Pick<Labrinth.Users.v2.User, 'bio' | 'username'>>,
+): Promise<void> {
+	return patch_user(userId, patch)
+}
+
+async function changeAvatar(userId: string, file: Blob, extension: string): Promise<void> {
+	await change_user_avatar(userId, new Uint8Array(await file.arrayBuffer()), extension)
+}
+
+function deleteAvatar(userId: string): Promise<void> {
+	return delete_user_avatar(userId)
+}
+
+function getAuthenticatedUser(): Promise<Labrinth.Users.v3.User> {
+	const userId = auth.user.value?.id
+	if (!userId) throw new Error('Cannot refresh a signed-out user.')
+	return get_user_profile(userId)
+}
+</script>

apps/app-frontend/src/components/ui/settings/account/SocialSettings.vue

@@ -0,0 +1,20 @@
+<template>
+	<AccountSocialSettings
+		:get-blocked-users="get_blocked_users"
+		:get-users="getUsers"
+		:unblock-user="unblock_user"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { AccountSocialSettings, injectModrinthClient } from '@modrinth/ui'
+
+import { get_blocked_users, unblock_user } from '@/helpers/users'
+
+const client = injectModrinthClient()
+
+function getUsers(userIds: string[]): Promise<Labrinth.Users.v2.User[]> {
+	return client.labrinth.users_v2.getMultiple(userIds)
+}
+</script>

apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ButtonStyled, Toggle } from '@modrinth/ui'
+import { Toggle, Button } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -25,7 +25,7 @@ watch(
 )
 </script>
 <template>
-	<div class="flex flex-col gap-2.5 min-w-[600px]">
+	<div class="flex flex-col gap-2.5">
 		<div v-for="option in options" :key="option" class="flex items-center justify-between">
 			<div>
 				<h2 class="m-0 text-lg font-semibold text-contrast capitalize">
@@ -33,14 +33,12 @@ watch(
 				</h2>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonStyled type="transparent">
-					<button
+				<Button type="quiet"
 						:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
 						@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
 					>
-						Reset to default
-					</button>
-				</ButtonStyled>
+					Reset to default
+				</Button>
 				<Toggle
 					id="advanced-rendering"
 					:model-value="themeStore.getFeatureFlag(option)"

apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue

@@ -1,7 +1,7 @@
 <script setup>
+import { IconButton } from '@modrinth/ui'
 import { BoxIcon, FolderOpenIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	Slider,
@@ -183,16 +183,13 @@ async function findLauncherDir() {
 				wrapper-class="w-full"
 			>
 				<template #right>
-					<ButtonStyled circular>
-						<button
+					<IconButton :label="formatMessage(messages.browseAppDirectory)"
 							v-tooltip="formatMessage(messages.browseAppDirectory)"
-							:aria-label="formatMessage(messages.browseAppDirectory)"
 							class="ml-1.5"
 							@click="findLauncherDir"
 						>
-							<FolderSearchIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+						<FolderSearchIcon aria-hidden="true" />
+					</IconButton>
 				</template>
 			</StyledInput>
 			<p class="m-0 leading-tight text-secondary">

apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue

@@ -10,28 +10,24 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="confirm">
-						<XIcon />
-						{{ formatMessage(messages.revokeButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="confirm">
+					<XIcon />
+					{{ formatMessage(messages.revokeButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue

@@ -10,33 +10,27 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="handleGoToInstance">
-						{{ formatMessage(messages.instance) }}
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button @click="handleInstallAnyway">
-						<DownloadIcon />
-						{{ formatMessage(messages.installAnyway) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button @click="handleGoToInstance">
+					{{ formatMessage(messages.instance) }}
+					<RightArrowIcon />
+				</Button>
+				<Button type="colored" color="orange" @click="handleInstallAnyway">
+					<DownloadIcon />
+					{{ formatMessage(messages.installAnyway) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { DownloadIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue

@@ -2,13 +2,11 @@
 	<div v-if="canUnpublish" class="flex flex-col gap-2.5">
 		<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.title) }}</span>
 		<div>
-			<ButtonStyled color="orange">
-				<button :disabled="busy" @click="unpublishModal?.show()">
-					<SpinnerIcon v-if="unpublishing" class="animate-spin" />
-					<UnlinkIcon v-else class="size-5" />
-					{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="orange" :disabled="busy" @click="unpublishModal?.show()">
+				<SpinnerIcon v-if="unpublishing" class="animate-spin" />
+				<UnlinkIcon v-else class="size-5" />
+				{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
+			</Button>
 		</div>
 		<span class="text-primary">{{ formatMessage(messages.unpublishDescription) }}</span>
 	</div>
@@ -17,13 +15,11 @@
 			formatMessage(messages.linkedTitle)
 		}}</span>
 		<div>
-			<ButtonStyled color="orange">
-				<button :disabled="busy" @click="unlinkModal?.show()">
-					<SpinnerIcon v-if="unlinking" class="animate-spin" />
-					<UnlinkIcon v-else class="size-5" />
-					{{ formatMessage(unlinking ? messages.unlinkingButton : messages.unlinkButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="orange" :disabled="busy" @click="unlinkModal?.show()">
+				<SpinnerIcon v-if="unlinking" class="animate-spin" />
+				<UnlinkIcon v-else class="size-5" />
+				{{ formatMessage(unlinking ? messages.unlinkingButton : messages.unlinkButton) }}
+			</Button>
 		</div>
 		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
 	</div>
@@ -39,15 +35,11 @@
 		}}</Admonition>
 		<template #actions
 			><div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined"
-					><button class="!border" @click="unpublishModal?.hide()">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button></ButtonStyled
-				><ButtonStyled color="orange"
-					><button :disabled="busy" @click="confirmUnpublish">
-						<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
-					</button></ButtonStyled
-				>
+				<Button type="outlined" class="!border" @click="unpublishModal?.hide()">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button><Button type="colored" color="orange" :disabled="busy" @click="confirmUnpublish">
+					<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
+				</Button>
 			</div></template
 		>
 	</NewModal>
@@ -70,31 +62,20 @@
 		</div>
 		<template #actions
 			><div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined"
-					><button class="!border" @click="unlinkModal?.hide()">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button></ButtonStyled
-				><ButtonStyled color="orange"
-					><button :disabled="busy || backupBusy" @click="confirmUnlink">
-						<UnlinkIcon />{{ formatMessage(messages.unlinkButton) }}
-					</button></ButtonStyled
-				>
+				<Button type="outlined" class="!border" @click="unlinkModal?.hide()">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button><Button type="colored" color="orange" :disabled="busy || backupBusy" @click="confirmUnlink">
+					<UnlinkIcon />{{ formatMessage(messages.unlinkButton) }}
+				</Button>
 			</div></template
 		>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { SpinnerIcon, UnlinkIcon, XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	InlineBackupCreator,
-	NewModal,
-	useVIntl,
-} from '@modrinth/ui'
+import { Admonition, commonMessages, defineMessages, InlineBackupCreator, NewModal, useVIntl } from '@modrinth/ui'
 import { ref } from 'vue'
 
 const props = withDefaults(

apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue

@@ -26,12 +26,13 @@
 					</span>
 				</template>
 				<div class="flex min-w-0 flex-col gap-3 pt-4">
-					<div class="max-h-[292px] overflow-y-auto rounded-[20px]">
+					<div ref="configFileTreeContainer" class="max-h-[292px] overflow-y-auto rounded-[20px]">
 						<FileTreeSelect
 							v-model="selectedConfigPaths"
 							:items="configFileItems"
 							:show-size="false"
 							:show-modified="false"
+							@navigate="scrollConfigFileTreeToTop"
 						/>
 					</div>
 				</div>
@@ -75,6 +76,7 @@ const emit = defineEmits<{
 const { formatMessage } = useVIntl()
 const { notifySharedInstanceError, notifySharedInstanceUnavailable } = useSharedInstanceErrors()
 const publishReviewModal = ref<InstanceType<typeof ContentDiffModal>>()
+const configFileTreeContainer = ref<HTMLElement>()
 const publishDiffs = ref<ContentDiffItem[]>([])
 const configFilePaths = ref<string[]>([])
 const selectedConfigPaths = ref<string[]>([])
@@ -132,6 +134,12 @@ async function publishChanges() {
 	}
 }
 
+function scrollConfigFileTreeToTop() {
+	if (configFileTreeContainer.value) {
+		configFileTreeContainer.value.scrollTop = 0
+	}
+}
+
 function finishReview() {
 	if (state.value === 'reviewing') {
 		setState('idle')

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue

@@ -120,8 +120,17 @@
 							:max-height="240"
 						/>
 					</div>
-					<div v-if="reportOnly" class="flex flex-col gap-2">
-						<Checkbox v-model="deleteInstance" :label="formatMessage(messages.deleteInstance)" />
+					<div v-if="reportOnly || blockTargetUserId" class="flex flex-col gap-2">
+						<Checkbox
+							v-if="reportOnly"
+							v-model="deleteInstance"
+							:label="formatMessage(messages.deleteInstance)"
+						/>
+						<Checkbox
+							v-if="blockTargetUserId"
+							v-model="blockUser"
+							:label="formatMessage(messages.blockUser)"
+						/>
 					</div>
 				</div>
 			</Transition>
@@ -184,53 +193,39 @@
 				{{ formatMessage(messages.reviewedFiles) }}
 			</p>
 			<div v-if="!reportMode" class="flex w-full items-center justify-between gap-2">
-				<ButtonStyled color="red" type="transparent">
-					<button @click="reportMode = true">
-						<ReportIcon />{{ formatMessage(commonMessages.reportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" color="red" @click="reportMode = true">
+					<ReportIcon />{{ formatMessage(commonMessages.reportButton) }}
+				</Button>
 				<div class="flex items-center gap-2">
 					<template v-if="hasExternalFiles">
-						<ButtonStyled type="transparent" color="orange">
-							<button @click="accept">
-								{{ formatMessage(messages.installAnyway) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleCancel">
-								<BanIcon />{{ formatMessage(messages.dontInstall) }}
-							</button>
-						</ButtonStyled>
+						<Button type="quiet" color="orange" @click="accept">
+							{{ formatMessage(messages.installAnyway) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleCancel">
+							<BanIcon />{{ formatMessage(messages.dontInstall) }}
+						</Button>
 					</template>
 					<template v-else>
-						<ButtonStyled type="outlined">
-							<button class="!border" @click="handleCancel">
-								<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="accept">
-								<DownloadIcon />{{ formatMessage(messages.installButton) }}
-							</button>
-						</ButtonStyled>
+						<Button type="outlined" class="!border" @click="handleCancel">
+							<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button type="colored" color="brand" @click="accept">
+							<DownloadIcon />{{ formatMessage(messages.installButton) }}
+						</Button>
 					</template>
 				</div>
 			</div>
 		</div>
 		<template v-if="reportMode" #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button class="!border" :disabled="submitLoading" @click="handleCancel">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!canSubmitReport" @click="submitReport">
-						<SpinnerIcon v-if="submitLoading" class="animate-spin" />
-						<SendIcon v-else />
-						{{ formatMessage(commonMessages.reportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" class="!border" :disabled="submitLoading" @click="handleCancel">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!canSubmitReport" @click="submitReport">
+					<SpinnerIcon v-if="submitLoading" class="animate-spin" />
+					<SendIcon v-else />
+					{{ formatMessage(commonMessages.reportButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -243,18 +238,20 @@
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import type { Labrinth } from '@modrinth/api-client'
 import { BanIcon, DownloadIcon, ReportIcon, SendIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	AutoLink,
 	Avatar,
-	ButtonStyled,
+	blockedUsersQueryKey,
 	Checkbox,
 	Combobox,
 	type ComboboxOption,
 	commonMessages,
 	defineMessages,
+	injectAuth,
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
@@ -266,6 +263,7 @@ import {
 	useScrollIndicator,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, nextTick, ref } from 'vue'
 
@@ -274,6 +272,7 @@ import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { toError } from '@/helpers/errors'
 import type { SharedInstanceInstallPreview } from '@/helpers/install'
 import { create_report } from '@/helpers/reports'
+import { block_user } from '@/helpers/users'
 
 import SharedInstanceInstallSummary from './shared-instance-install-summary.vue'
 import { useSharedInstancePreviewContent } from './use-shared-instance-preview-content'
@@ -284,6 +283,7 @@ type ExternalFileRow = {
 	name: string
 }
 type SharedInstanceCreator = {
+	id: string | null
 	username: string
 	avatarUrl: string | null
 }
@@ -300,13 +300,17 @@ type ReportReason = 'malicious' | 'inappropriate' | 'spam'
 const reportReason = ref<ReportReason>('malicious')
 const additionalContext = ref('')
 const deleteInstance = ref(true)
+const blockUser = ref(true)
+const blockTargetUserId = ref<string | null>(null)
 const submitLoading = ref(false)
 const uploadedImageIDs = ref<string[]>([])
 const emit = defineEmits<{
 	reported: [deleteInstance: boolean]
 }>()
 const { formatMessage } = useVIntl()
+const auth = injectAuth()
 const client = injectModrinthClient()
+const queryClient = useQueryClient()
 const { addNotification, handleError } = injectNotificationManager()
 const { load } = useSharedInstancePreviewContent()
 const {
@@ -365,13 +369,39 @@ async function submitReport() {
 	submitLoading.value = true
 	try {
 		const uploadedImages = uploadedImageIDs.value.slice(-10)
-		await create_report({
-			report_type: reportReason.value,
-			item_type: 'shared-instance',
-			item_id: `${reportPreview.sharedInstanceId}/${reportPreview.version}`,
-			body,
-			uploaded_images: uploadedImages,
-		})
+		const blockTarget = blockUser.value ? blockTargetUserId.value : null
+		const [reportResult, blockResult] = await Promise.allSettled([
+			create_report({
+				report_type: reportReason.value,
+				item_type: 'shared-instance',
+				item_id: `${reportPreview.sharedInstanceId}/${reportPreview.version}`,
+				body,
+				uploaded_images: uploadedImages,
+			}),
+			blockTarget ? block_user(blockTarget) : Promise.resolve(),
+		])
+
+		if (blockTarget) {
+			if (blockResult.status === 'fulfilled') {
+				blockUser.value = false
+				const authUserId = auth.user.value?.id
+				if (authUserId) {
+					queryClient.setQueryData<Labrinth.BlockedUsers.v3.BlockedUserId[]>(
+						blockedUsersQueryKey(authUserId),
+						(blockedUsers = []) =>
+							blockedUsers.includes(blockTarget) ? blockedUsers : [...blockedUsers, blockTarget],
+					)
+				}
+				addNotification({
+					type: 'success',
+					title: formatMessage(messages.userBlocked),
+				})
+			} else {
+				handleError(toError(blockResult.reason))
+			}
+		}
+
+		if (reportResult.status === 'rejected') throw reportResult.reason
 
 		const shouldDeleteInstance = reportOnly.value && deleteInstance.value
 		hide()
@@ -426,6 +456,8 @@ function resetReportState() {
 	reportReason.value = 'malicious'
 	additionalContext.value = ''
 	deleteInstance.value = true
+	blockUser.value = true
+	blockTargetUserId.value = null
 	submitLoading.value = false
 	uploadedImageIDs.value = []
 }
@@ -437,12 +469,18 @@ function show(
 ) {
 	resetReportState()
 	creator.value = creatorValue ?? null
+	blockTargetUserId.value = creatorValue?.id ?? null
 	install.value = installValue
 	showPreview(previewValue, event)
 }
-function showReport(previewValue: SharedInstanceInstallPreview, event?: MouseEvent) {
+function showReport(
+	previewValue: SharedInstanceInstallPreview,
+	blockTargetUserIdValue?: string | null,
+	event?: MouseEvent,
+) {
 	resetReportState()
 	creator.value = null
+	blockTargetUserId.value = blockTargetUserIdValue ?? null
 	reportMode.value = true
 	reportOnly.value = true
 	install.value = () => {}
@@ -537,6 +575,14 @@ const messages = defineMessages({
 		id: 'app.modal.install-to-play.delete-instance',
 		defaultMessage: 'Delete instance',
 	},
+	blockUser: {
+		id: 'app.modal.install-to-play.block-user',
+		defaultMessage: 'Block user',
+	},
+	userBlocked: {
+		id: 'app.modal.install-to-play.user-blocked',
+		defaultMessage: 'User blocked',
+	},
 	unknownFilesWarning: {
 		id: 'app.modal.install-to-play.unknown-files-warning',
 		defaultMessage: 'Unknown files warning',

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue

@@ -4,12 +4,10 @@
 			<span class="font-semibold text-contrast">{{
 				heading ?? formatMessage(messages.sharedInstance)
 			}}</span>
-			<ButtonStyled type="transparent">
-				<button @click="emit('viewContents')">
-					<EyeIcon />
-					{{ formatMessage(messages.viewContents) }}
-				</button>
-			</ButtonStyled>
+			<Button type="quiet" @click="emit('viewContents')">
+				<EyeIcon />
+				{{ formatMessage(messages.viewContents) }}
+			</Button>
 		</div>
 		<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
 			<Avatar
@@ -33,8 +31,9 @@
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { EyeIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, defineMessages, formatLoader, useVIntl } from '@modrinth/ui'
+import { Avatar, defineMessages, formatLoader, useVIntl } from '@modrinth/ui'
 import { computed, toRefs } from 'vue'
 
 import type { SharedInstanceInstallPreview } from '@/helpers/install'

apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts

@@ -32,6 +32,7 @@ type InstallModal = {
 }
 
 type SharedInstanceCreator = {
+	id: string | null
 	username: string
 	avatarUrl: string | null
 }
@@ -190,6 +191,7 @@ export function useSharedInstanceInviteHandler(
 				},
 				invite.invitedByUsername
 					? {
+							id: invite.invitedById,
 							username: invite.invitedByUsername,
 							avatarUrl: invite.invitedByAvatarUrl,
 						}
@@ -294,6 +296,7 @@ export function useSharedInstanceInviteHandler(
 				},
 				manager
 					? {
+							id: manager.id,
 							username: manager.username,
 							avatarUrl: manager.avatar_url ?? null,
 						}

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -22,11 +22,9 @@
 			<div class="flex flex-col gap-4 w-full min-h-[20rem]">
 				<section v-if="mode === 'edit' && canEditTextureAndModel">
 					<h2 class="text-base font-semibold mb-2">{{ formatMessage(messages.textureSection) }}</h2>
-					<ButtonStyled>
-						<button class="!shadow-none" @click="openTextureFileBrowser">
-							<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="openTextureFileBrowser">
+						<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
+					</Button>
 					<input
 						ref="textureFileInput"
 						type="file"
@@ -112,28 +110,24 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button :disabled="isSaving" @click="hide">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
-						<SpinnerIcon v-if="isSaving" class="animate-spin" />
-						<CheckIcon v-else-if="mode === 'new'" />
-						<SaveIcon v-else />
-						{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" :disabled="isSaving" @click="hide">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
+					<SpinnerIcon v-if="isSaving" class="animate-spin" />
+					<CheckIcon v-else-if="mode === 'new'" />
+					<SaveIcon v-else />
+					{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { CheckIcon, SaveIcon, SpinnerIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	CapeButton,
 	CapeLikeTextButton,
 	commonMessages,

apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Button, IconButton } from '@modrinth/ui'
 import { DropdownIcon, EditIcon, PlusIcon, TrashIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	Accordion,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	SkinButton,
@@ -463,25 +463,20 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
+									<Button type="colored" color="brand"
 											:aria-label="formatMessage(messages.editSkinButton)"
 											class="pointer-events-auto"
 											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
 										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
+										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+									</Button>
+									<IconButton type="colored" color="red" :label="formatMessage(messages.deleteSkinButton)" v-show="!skin.is_equipped"
 											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
 											class="!rounded-[100%] pointer-events-auto"
 											@click.stop="emit('delete', skin)"
 										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
+										<TrashIcon />
+									</IconButton>
 								</template>
 							</SkinButton>
 						</div>
@@ -503,25 +498,20 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
+									<Button type="colored" color="brand"
 											:aria-label="formatMessage(messages.editSkinButton)"
 											class="pointer-events-auto"
 											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
 										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
+										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+									</Button>
+									<IconButton type="colored" color="red" :label="formatMessage(messages.deleteSkinButton)" v-show="!skin.is_equipped"
 											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
 											class="!rounded-[100%] pointer-events-auto"
 											@click.stop="emit('delete', skin)"
 										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
+										<TrashIcon />
+									</IconButton>
 								</template>
 							</SkinButton>
 						</div>
@@ -545,15 +535,13 @@ defineExpose({ getAddSkinButtonElement })
 						@select="emit('select', skin)"
 					>
 						<template #overlay-buttons>
-							<ButtonStyled color="brand">
-								<button
+							<Button type="colored" color="brand"
 									:aria-label="formatMessage(messages.editSkinButton)"
 									class="pointer-events-auto"
 									@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
 								>
-									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
+								<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+							</Button>
 						</template>
 					</SkinButton>
 				</div>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	EyeIcon,
 	FolderOpenIcon,
@@ -9,10 +10,8 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	SmartClickable,
 	useFormatDateTime,
 	useRelativeTime,
@@ -185,14 +184,11 @@ onUnmounted(() => {
 				</div>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<ButtonStyled v-if="playing && !loading" color="red">
-					<button @click="stop">
-						<StopCircleIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.stopButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button
+				<Button type="colored" color="red" v-if="playing && !loading" @click="stop">
+					<StopCircleIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.stopButton) }}
+				</Button>
+				<Button v-else
 						v-tooltip="
 							instance.quarantined
 								? 'This instance has been locked'
@@ -203,36 +199,35 @@ onUnmounted(() => {
 						:disabled="instance.quarantined || playing || loading"
 						@click="play"
 					>
-						<SpinnerIcon v-if="loading" class="animate-spin" />
-						<PlayIcon v-else aria-hidden="true" />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
+					<SpinnerIcon v-if="loading" class="animate-spin" />
+					<PlayIcon v-else aria-hidden="true" />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<TeleportOverflowMenu type="quiet" label="More options"
 						:options="[
 							{
 								id: 'open-instance',
+								label: 'View instance',
 								shown: !!instance.id,
 								action: () => router.push(encodeURI(`/instance/${instance.id}`)),
 							},
 							{
 								id: 'open-folder',
+								label: formatMessage(commonMessages.openFolderButton),
 								action: () => showInstanceInFolder(instance.id),
 							},
 						]"
 					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #open-instance>
-							<EyeIcon aria-hidden="true" />
-							View instance
-						</template>
-						<template #open-folder>
-							<FolderOpenIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.openFolderButton) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #open-instance>
+						<EyeIcon aria-hidden="true" />
+						View instance
+					</template>
+					<template #open-folder>
+						<FolderOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.openFolderButton) }}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</SmartClickable>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { LoaderCircleIcon } from '@modrinth/assets'
 import type { GameVersion } from '@modrinth/ui'
-import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import { GAME_MODES, injectNotificationManager } from '@modrinth/ui'
 import { platform } from '@tauri-apps/plugin-os'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
@@ -268,13 +268,7 @@ onUnmounted(() => {
 		</div>
 	</div>
 	<div v-else-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
-		<HeadingLink v-if="theme.getFeatureFlag('worlds_tab')" to="/worlds" class="mt-1">
-			Jump back in
-		</HeadingLink>
-		<span
-			v-else
-			class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold"
-		>
+		<span class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold">
 			Jump back in
 		</span>
 		<div class="grid-when-huge flex flex-col w-full gap-2">

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	ClipboardCopyIcon,
 	EditIcon,
@@ -21,11 +22,9 @@ import {
 import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	SmartClickable,
 	TagItem,
 	useFormatDateTime,
@@ -412,17 +411,11 @@ const messages = defineMessages({
 				</template>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<ButtonStyled
-					v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-					color="red"
-				>
-					<button @click="emit('stop')">
-						<StopCircleIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.stopButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button
+				<Button type="colored" color="red" v-if="(playingWorld || (locked && playingInstance)) && !startingInstance" @click="emit('stop')">
+					<StopCircleIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.stopButton) }}
+				</Button>
+				<Button v-else
 						v-tooltip="
 							quarantined
 								? 'This instance has been locked'
@@ -451,37 +444,40 @@ const messages = defineMessages({
 						"
 						@click="emit('play')"
 					>
-						<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-						<PlayIcon v-else aria-hidden="true" />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
+					<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+					<PlayIcon v-else aria-hidden="true" />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<TeleportOverflowMenu type="quiet" label="More options"
 						:options="[
 							{
 								id: 'play-instance',
+								label: formatMessage(messages.playInstance),
 								shown: !!instanceId,
 								disabled: playingInstance || quarantined,
 								action: () => emit('play-instance'),
 							},
 							{
 								id: 'open-instance',
+								label: formatMessage(messages.viewInstance),
 								shown: !!instanceId,
 								action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
 							},
 							{
 								id: 'refresh',
+								label: formatMessage(commonMessages.refreshButton),
 								shown: world.type === 'server',
 								action: () => emit('refresh'),
 							},
 							{
 								id: 'copy-address',
+								label: formatMessage(messages.copyAddress),
 								shown: world.type === 'server',
 								action: () => copyToClipboard((world as ServerWorld).address),
 							},
 							{
 								id: 'edit',
+								label: formatMessage(commonMessages.editButton),
 								action: () => emit('edit'),
 								shown: !instanceId,
 								disabled: locked || managed,
@@ -493,15 +489,17 @@ const messages = defineMessages({
 							},
 							{
 								id: 'open-folder',
+								label: formatMessage(commonMessages.openFolderButton),
 								shown: world.type === 'singleplayer',
 								action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
 							},
 							{
-								divider: true,
+								type: 'divider',
 								shown: !!instanceId,
 							},
 							{
 								id: 'dont-show-on-home',
+								label: formatMessage(messages.dontShowOnHome),
 								shown: !!instanceId,
 								action: () => {
 									set_world_display_status(
@@ -516,17 +514,22 @@ const messages = defineMessages({
 							},
 							{
 								id: 'create-shortcut',
+								label: formatMessage(messages.createShortcut),
 								shown: !!shortcutInstanceId && !quarantined,
 								action: () => createShortcut(),
 							},
 							{
-								divider: true,
+								type: 'divider',
 								shown: !instanceId,
 							},
 							{
 								id: 'delete',
-								color: 'red',
-								hoverFilled: true,
+								label: formatMessage(
+									world.type === 'server'
+										? commonMessages.removeButton
+										: commonMessages.deleteLabel,
+								),
+								tone: 'red',
 								action: () => emit('delete'),
 								shown: !instanceId,
 								disabled: locked || managed,
@@ -538,51 +541,50 @@ const messages = defineMessages({
 							},
 						]"
 					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #play-instance>
-							<PlayIcon aria-hidden="true" />
-							{{ formatMessage(messages.playInstance) }}
-						</template>
-						<template #open-instance>
-							<EyeIcon aria-hidden="true" />
-							{{ formatMessage(messages.viewInstance) }}
-						</template>
-						<template #edit>
-							<EditIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.editButton) }}
-						</template>
-						<template #open-folder>
-							<FolderOpenIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.openFolderButton) }}
-						</template>
-						<template #copy-address>
-							<ClipboardCopyIcon aria-hidden="true" />
-							{{ formatMessage(messages.copyAddress) }}
-						</template>
-						<template #refresh>
-							<UpdatedIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.refreshButton) }}
-						</template>
-						<template #create-shortcut>
-							<ExternalIcon aria-hidden="true" />
-							{{ formatMessage(messages.createShortcut) }}
-						</template>
-						<template #dont-show-on-home>
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(messages.dontShowOnHome) }}
-						</template>
-						<template #delete>
-							<TrashIcon aria-hidden="true" />
-							{{
-								formatMessage(
-									world.type === 'server'
-										? commonMessages.removeButton
-										: commonMessages.deleteLabel,
-								)
-							}}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #play-instance>
+						<PlayIcon aria-hidden="true" />
+						{{ formatMessage(messages.playInstance) }}
+					</template>
+					<template #open-instance>
+						<EyeIcon aria-hidden="true" />
+						{{ formatMessage(messages.viewInstance) }}
+					</template>
+					<template #edit>
+						<EditIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.editButton) }}
+					</template>
+					<template #open-folder>
+						<FolderOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.openFolderButton) }}
+					</template>
+					<template #copy-address>
+						<ClipboardCopyIcon aria-hidden="true" />
+						{{ formatMessage(messages.copyAddress) }}
+					</template>
+					<template #refresh>
+						<UpdatedIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.refreshButton) }}
+					</template>
+					<template #create-shortcut>
+						<ExternalIcon aria-hidden="true" />
+						{{ formatMessage(messages.createShortcut) }}
+					</template>
+					<template #dont-show-on-home>
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.dontShowOnHome) }}
+					</template>
+					<template #delete>
+						<TrashIcon aria-hidden="true" />
+						{{
+							formatMessage(
+								world.type === 'server'
+									? commonMessages.removeButton
+									: commonMessages.deleteLabel,
+							)
+						}}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</SmartClickable>

apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -96,24 +96,18 @@ defineExpose({ show, hide })
 		/>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button :disabled="!address" @click="addServer(false)">
-						<PlusIcon />
-						{{ formatMessage(messages.addServer) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="addServer(true)">
-						<PlayIcon />
-						{{ formatMessage(messages.addAndPlay) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button :disabled="!address" @click="addServer(false)">
+					<PlusIcon />
+					{{ formatMessage(messages.addServer) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!address" @click="addServer(true)">
+					<PlayIcon />
+					{{ formatMessage(messages.addAndPlay) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	NewModal,
@@ -106,18 +106,14 @@ defineExpose({ show, hide })
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="!isServer && !isSingleplayer" @click="confirm">
-						<TrashIcon />
-						{{ formatMessage(actionMessage) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" :disabled="!isServer && !isSingleplayer" @click="confirm">
+					<TrashIcon />
+					{{ formatMessage(actionMessage) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
@@ -105,18 +105,14 @@ const titleMessage = defineMessage({
 		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="saveServer">
-						<SaveIcon />
-						{{ formatMessage(commonMessages.saveChangesButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!address" @click="saveServer">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -113,24 +113,18 @@ const messages = defineMessages({
 			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		</div>
 		<div class="flex gap-2 mt-4">
-			<ButtonStyled color="brand">
-				<button @click="saveWorld">
-					<SaveIcon />
-					{{ formatMessage(commonMessages.saveChangesButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button :disabled="removeIcon || !icon" @click="removeIcon = true">
-					<UndoIcon />
-					{{ formatMessage(messages.resetIcon) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="saveWorld">
+				<SaveIcon />
+				{{ formatMessage(commonMessages.saveChangesButton) }}
+			</Button>
+			<Button :disabled="removeIcon || !icon" @click="removeIcon = true">
+				<UndoIcon />
+				{{ formatMessage(messages.resetIcon) }}
+			</Button>
+			<Button @click="hide()">
+				<XIcon />
+				{{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
 		</div>
 	</ModalWrapper>
 </template>

apps/app-frontend/src/helpers/users.ts

@@ -50,7 +50,31 @@ export async function get_user_collections(
 
 export async function patch_user(
 	userId: string,
-	patch: Partial<Pick<Labrinth.Users.v3.User, 'badges' | 'role'>>,
+	patch: Partial<Pick<Labrinth.Users.v2.User, 'badges' | 'bio' | 'role' | 'username'>>,
 ): Promise<void> {
 	await invoke('plugin:users|patch_user', { userId, patch })
 }
+
+export async function change_user_avatar(
+	userId: string,
+	image: Uint8Array,
+	extension: string,
+): Promise<void> {
+	await invoke('plugin:users|change_user_avatar', { userId, image, extension })
+}
+
+export async function delete_user_avatar(userId: string): Promise<void> {
+	await invoke('plugin:users|delete_user_avatar', { userId })
+}
+
+export async function block_user(userId: string): Promise<void> {
+	await invoke('plugin:users|block_user', { userId })
+}
+
+export async function unblock_user(userId: string): Promise<void> {
+	await invoke('plugin:users|unblock_user', { userId })
+}
+
+export async function get_blocked_users(): Promise<Labrinth.BlockedUsers.v3.BlockedUserId[]> {
+	return await invoke<Labrinth.BlockedUsers.v3.BlockedUserId[]>('plugin:users|get_blocked_users')
+}

apps/app-frontend/src/locales/ar-SA/index.json

@@ -233,9 +233,6 @@
   "app.browse.back-to-instance": {
     "message": "العودة للنموذج"
   },
-  "app.browse.discover-content": {
-    "message": "استكشف محتوى"
-  },
   "app.browse.discover-servers": {
     "message": "استكشف خوادم"
   },

apps/app-frontend/src/locales/cs-CZ/index.json

@@ -164,9 +164,6 @@
   "app.browse.back-to-instance": {
     "message": "Zpět k instanci"
   },
-  "app.browse.discover-content": {
-    "message": "Objevit obsah"
-  },
   "app.browse.discover-servers": {
     "message": "Objevit servery"
   },

apps/app-frontend/src/locales/da-DK/index.json

@@ -218,9 +218,6 @@
   "app.browse.back-to-instance": {
     "message": "Tilbage til instance"
   },
-  "app.browse.discover-content": {
-    "message": "Opdag indhold"
-  },
   "app.browse.discover-servers": {
     "message": "Opdag servere"
   },

apps/app-frontend/src/locales/de-CH/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Zu Instanz zurückgehen"
   },
-  "app.browse.discover-content": {
-    "message": "Inhalte entdecken"
-  },
   "app.browse.discover-servers": {
     "message": "Server entdecken"
   },

apps/app-frontend/src/locales/de-DE/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Zurück zur Instanz"
   },
-  "app.browse.discover-content": {
-    "message": "Inhalte entdecken"
-  },
   "app.browse.discover-servers": {
     "message": "Server entdecken"
   },

apps/app-frontend/src/locales/en-US/index.json

@@ -251,8 +251,8 @@
   "app.browse.back-to-instance": {
     "message": "Back to instance"
   },
-  "app.browse.discover-content": {
-    "message": "Discover content"
+  "app.browse.discover-project-type": {
+    "message": "Discover {projectType}"
   },
   "app.browse.discover-servers": {
     "message": "Discover servers"
@@ -260,6 +260,9 @@
   "app.browse.hide-added-servers": {
     "message": "Hide servers already added"
   },
+  "app.browse.hide-installed-modpacks": {
+    "message": "Hide already installed"
+  },
   "app.browse.project-type.modpacks": {
     "message": "Modpacks"
   },
@@ -653,6 +656,9 @@
   "app.modal.install-to-play.additional-context-placeholder": {
     "message": "Include links and images if possible and relevant"
   },
+  "app.modal.install-to-play.block-user": {
+    "message": "Block user"
+  },
   "app.modal.install-to-play.content-you-are-reporting": {
     "message": "Instance you’re reporting"
   },
@@ -734,6 +740,9 @@
   "app.modal.install-to-play.unrecognized-files": {
     "message": "Unrecognized files"
   },
+  "app.modal.install-to-play.user-blocked": {
+    "message": "User blocked"
+  },
   "app.modal.install-to-play.view-contents": {
     "message": "View contents"
   },
@@ -761,6 +770,36 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "An update is required to play {name}. Please update to latest version to launch the game."
   },
+  "app.nav.create-new-instance": {
+    "message": "Create new instance"
+  },
+  "app.nav.home": {
+    "message": "Home"
+  },
+  "app.nav.library": {
+    "message": "Library"
+  },
+  "app.nav.modrinth-account": {
+    "message": "Modrinth account"
+  },
+  "app.nav.modrinth-hosting": {
+    "message": "Modrinth Hosting"
+  },
+  "app.nav.sign-in-to-modrinth-account": {
+    "message": "Sign in to a Modrinth account"
+  },
+  "app.nav.signed-in-as": {
+    "message": "Signed in as <user>{username}</user>"
+  },
+  "app.nav.upgrade-to-modrinth-plus": {
+    "message": "Upgrade to Modrinth+"
+  },
+  "app.news.title": {
+    "message": "News"
+  },
+  "app.news.view-all": {
+    "message": "View all news"
+  },
   "app.project.install-button.already-installed": {
     "message": "This project is already installed"
   },
@@ -770,6 +809,9 @@
   "app.project.install-context.back-to-browse": {
     "message": "Back to discover"
   },
+  "app.project.install-context.back-to-instance": {
+    "message": "Back to instance"
+  },
   "app.project.version.all-versions": {
     "message": "All versions"
   },
@@ -782,6 +824,15 @@
   "app.project.versions.already-installed": {
     "message": "Already installed"
   },
+  "app.quick-instance-switcher.drag-show-tooltip": {
+    "message": "Drag to show recent instances"
+  },
+  "app.quick-instance-switcher.drag-tooltip": {
+    "message": "Drag to resize"
+  },
+  "app.restarting": {
+    "message": "Restarting..."
+  },
   "app.settings.app-version": {
     "message": "Modrinth App {version}"
   },
@@ -954,7 +1005,7 @@
     "message": "Behavior"
   },
   "app.settings.tabs.default-instance-options": {
-    "message": "Default instance options"
+    "message": "Default game options"
   },
   "app.settings.tabs.java-installations": {
     "message": "Java installations"
@@ -968,6 +1019,9 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
+  "app.sidebar.playing-as": {
+    "message": "Playing as"
+  },
   "app.skins.add-button": {
     "message": "Add skin"
   },
@@ -1127,6 +1181,21 @@
   "app.skins.toggle-ears-features-on": {
     "message": "Toggle on"
   },
+  "app.survey.body": {
+    "message": "Would you mind answering a few questions about your experience with Modrinth App?"
+  },
+  "app.survey.footer": {
+    "message": "This feedback will go directly to the Modrinth team and help guide future updates!"
+  },
+  "app.survey.no-thanks": {
+    "message": "No thanks"
+  },
+  "app.survey.take-survey": {
+    "message": "Take survey"
+  },
+  "app.survey.title": {
+    "message": "Hey there Modrinth user!"
+  },
   "app.update-popup.body.download-complete": {
     "message": "Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App."
   },

apps/app-frontend/src/locales/es-419/index.json

@@ -224,9 +224,6 @@
   "app.browse.back-to-instance": {
     "message": "Volver a instancia"
   },
-  "app.browse.discover-content": {
-    "message": "Descubrir contenido"
-  },
   "app.browse.discover-servers": {
     "message": "Descubrir servidores"
   },

apps/app-frontend/src/locales/es-ES/index.json

@@ -158,9 +158,6 @@
   "app.browse.back-to-instance": {
     "message": "Volver a la instancia"
   },
-  "app.browse.discover-content": {
-    "message": "Descubrir contenido"
-  },
   "app.browse.discover-servers": {
     "message": "Descubrir servidores"
   },

apps/app-frontend/src/locales/fi-FI/index.json

@@ -170,9 +170,6 @@
   "app.browse.back-to-instance": {
     "message": "Takaisin instanssiin"
   },
-  "app.browse.discover-content": {
-    "message": "Löydä sisältöä"
-  },
   "app.browse.discover-servers": {
     "message": "Löydä palvelimia"
   },

apps/app-frontend/src/locales/fil-PH/index.json

@@ -137,9 +137,6 @@
   "app.browse.back-to-instance": {
     "message": "Bumalik sa instansiya"
   },
-  "app.browse.discover-content": {
-    "message": "Tumuklas ng kontento"
-  },
   "app.browse.discover-servers": {
     "message": "Tumuklas ng mga server"
   },

apps/app-frontend/src/locales/fr-FR/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Retour à l'instance"
   },
-  "app.browse.discover-content": {
-    "message": "Découvrir du contenu"
-  },
   "app.browse.discover-servers": {
     "message": "Découvrir des serveurs"
   },

apps/app-frontend/src/locales/he-IL/index.json

@@ -44,9 +44,6 @@
   "app.browse.already-added": {
     "message": "כבר נוסף"
   },
-  "app.browse.discover-content": {
-    "message": "גלה תוכן"
-  },
   "app.browse.discover-servers": {
     "message": "גלה שרתים"
   },

apps/app-frontend/src/locales/hu-HU/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Vissza a játékpéldányhoz"
   },
-  "app.browse.discover-content": {
-    "message": "Tartalom böngészése"
-  },
   "app.browse.discover-servers": {
     "message": "Szerverek böngészése"
   },

apps/app-frontend/src/locales/id-ID/index.json

@@ -137,9 +137,6 @@
   "app.browse.back-to-instance": {
     "message": "Kembali ke instans"
   },
-  "app.browse.discover-content": {
-    "message": "Temukan konten"
-  },
   "app.browse.discover-servers": {
     "message": "Temukan server"
   },

apps/app-frontend/src/locales/it-IT/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Torna all'istanza"
   },
-  "app.browse.discover-content": {
-    "message": "Esplora i contenuti"
-  },
   "app.browse.discover-servers": {
     "message": "Sfoglia i server"
   },

apps/app-frontend/src/locales/ja-JP/index.json

@@ -239,9 +239,6 @@
   "app.browse.back-to-instance": {
     "message": "インスタンスに戻る"
   },
-  "app.browse.discover-content": {
-    "message": "コンテンツを探す"
-  },
   "app.browse.discover-servers": {
     "message": "サーバーを探す"
   },

apps/app-frontend/src/locales/ko-KR/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "인스턴스로 돌아가기"
   },
-  "app.browse.discover-content": {
-    "message": "콘텐츠 탐색하기"
-  },
   "app.browse.discover-servers": {
     "message": "서버 탐색하기"
   },

apps/app-frontend/src/locales/ms-MY/index.json

@@ -134,9 +134,6 @@
   "app.browse.back-to-instance": {
     "message": "Kembali ke pemasangan"
   },
-  "app.browse.discover-content": {
-    "message": "Temui kandungan"
-  },
   "app.browse.discover-servers": {
     "message": "Temui pelayan"
   },

apps/app-frontend/src/locales/nl-NL/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Terug naar instantie"
   },
-  "app.browse.discover-content": {
-    "message": "Inhoud ontdekken"
-  },
   "app.browse.discover-servers": {
     "message": "Ontdek servers"
   },

apps/app-frontend/src/locales/no-NO/index.json

@@ -140,9 +140,6 @@
   "app.browse.back-to-instance": {
     "message": "Tilbake til tilfelle"
   },
-  "app.browse.discover-content": {
-    "message": "Oppdag innhold"
-  },
   "app.browse.discover-servers": {
     "message": "Oppdag servere"
   },

apps/app-frontend/src/locales/pl-PL/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Powrót do instancji"
   },
-  "app.browse.discover-content": {
-    "message": "Odkrywaj zawartość"
-  },
   "app.browse.discover-servers": {
     "message": "Odkryj serwery"
   },

apps/app-frontend/src/locales/pt-BR/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Voltar à instância"
   },
-  "app.browse.discover-content": {
-    "message": "Descobrir conteúdo"
-  },
   "app.browse.discover-servers": {
     "message": "Descobrir servidores"
   },

apps/app-frontend/src/locales/pt-PT/index.json

@@ -239,9 +239,6 @@
   "app.browse.back-to-instance": {
     "message": "Voltar à instância"
   },
-  "app.browse.discover-content": {
-    "message": "Descobrir conteúdo"
-  },
   "app.browse.discover-servers": {
     "message": "Descobrir servidores"
   },

apps/app-frontend/src/locales/ru-RU/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Вернуться к сборке"
   },
-  "app.browse.discover-content": {
-    "message": "Поиск проектов"
-  },
   "app.browse.discover-servers": {
     "message": "Поиск серверов"
   },

apps/app-frontend/src/locales/sr-CS/index.json

@@ -224,9 +224,6 @@
   "app.browse.back-to-instance": {
     "message": "Nazad na instancu"
   },
-  "app.browse.discover-content": {
-    "message": "Otkrij sadržaj"
-  },
   "app.browse.discover-servers": {
     "message": "Otkrij servere"
   },

apps/app-frontend/src/locales/sv-SE/index.json

@@ -224,9 +224,6 @@
   "app.browse.back-to-instance": {
     "message": "Tillbaka till instans"
   },
-  "app.browse.discover-content": {
-    "message": "Upptäck innehåll"
-  },
   "app.browse.discover-servers": {
     "message": "Upptäck servrar"
   },

apps/app-frontend/src/locales/th-TH/index.json

@@ -152,9 +152,6 @@
   "app.browse.back-to-instance": {
     "message": "กลับสู่อินสแตนซ์"
   },
-  "app.browse.discover-content": {
-    "message": "สำรวจเนื้อหา"
-  },
   "app.browse.discover-servers": {
     "message": "สำรวจเซิร์ฟเวอร์"
   },

apps/app-frontend/src/locales/tr-TR/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Kuruluma dön"
   },
-  "app.browse.discover-content": {
-    "message": "İçerik keşfet"
-  },
   "app.browse.discover-servers": {
     "message": "Sunucuları keşfet"
   },

apps/app-frontend/src/locales/uk-UA/index.json

@@ -239,9 +239,6 @@
   "app.browse.back-to-instance": {
     "message": "Назад до профілю"
   },
-  "app.browse.discover-content": {
-    "message": "Дослідити вміст"
-  },
   "app.browse.discover-servers": {
     "message": "Дослідити сервери"
   },

apps/app-frontend/src/locales/vi-VN/index.json

@@ -233,9 +233,6 @@
   "app.browse.back-to-instance": {
     "message": "Quay lại phiên bản"
   },
-  "app.browse.discover-content": {
-    "message": "Khám phá nội dung"
-  },
   "app.browse.discover-servers": {
     "message": "Khám phá máy chủ"
   },

apps/app-frontend/src/locales/zh-CN/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "返回实例"
   },
-  "app.browse.discover-content": {
-    "message": "发现内容"
-  },
   "app.browse.discover-servers": {
     "message": "发现服务器"
   },

apps/app-frontend/src/locales/zh-TW/index.json

@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "回到實例"
   },
-  "app.browse.discover-content": {
-    "message": "探索內容"
-  },
   "app.browse.discover-servers": {
     "message": "探索伺服器"
   },

apps/app-frontend/src/pages/Browse.vue

@@ -3,9 +3,11 @@ import type { Labrinth } from '@modrinth/api-client'
 import {
 	CheckIcon,
 	ClipboardCopyIcon,
+	CompassIcon,
 	ExternalIcon,
 	GlobeIcon,
 	PlusIcon,
+	ServerStackIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
 import type { BrowseInstallContentType, CardAction, ProjectType, Tags } from '@modrinth/ui'
@@ -15,6 +17,7 @@ import {
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
+	formatProjectTypeSentence,
 	getLatestMatchingInstallVersion,
 	getSelectedInstallPreferences,
 	getTargetInstallPreferences,
@@ -22,6 +25,7 @@ import {
 	preferencesDiffer,
 	provideBrowseManager,
 	requestInstall,
+	resolveInstallPlan,
 	stripServerRuntimeInstallFilters,
 	stripServerRuntimeInstallOverrides,
 	useBrowseSearch,
@@ -31,9 +35,9 @@ import {
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
-import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import { useAppServerBrowse } from '@/composables/browse/use-app-server-browse'
@@ -47,18 +51,23 @@ import { instance_listener } from '@/helpers/events.js'
 import {
 	get as getInstance,
 	get_installed_project_ids as getInstalledProjectIds,
+	list as listInstances,
 } from '@/helpers/instance'
 import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import { get_instance_worlds } from '@/helpers/worlds'
+import {
+	type BreadcrumbDefinition,
+	useBreadcrumb,
+	useRootBreadcrumb,
+} from '@/providers/breadcrumbs'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import {
 	createServerInstallContent,
 	provideServerInstallContent,
 } from '@/providers/setup/server-install-content'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useTheming } from '@/store/state'
 
 const { handleError } = injectNotificationManager()
@@ -71,6 +80,40 @@ const debugLog = useDebugLogger('Browse')
 
 const router = useRouter()
 const route = useRoute()
+const displayedBrowseRoute = shallowRef(router.currentRoute.value)
+watch(
+	() => router.currentRoute.value,
+	(nextRoute) => {
+		if (nextRoute.path.startsWith('/browse/')) {
+			displayedBrowseRoute.value = nextRoute
+		}
+	},
+	{ immediate: true },
+)
+const breadcrumbMessages = defineMessages({
+	discoverProjectType: {
+		id: 'app.browse.discover-project-type',
+		defaultMessage: 'Discover {projectType}',
+	},
+	discoverServers: {
+		id: 'app.browse.discover-servers',
+		defaultMessage: 'Discover servers',
+	},
+})
+const breadcrumbLabel = computed(() => {
+	const browseRoute = displayedBrowseRoute.value
+	if (browseRoute.query.from === 'worlds' || browseRoute.params.projectType === 'server') {
+		return formatMessage(breadcrumbMessages.discoverServers)
+	}
+
+	return formatMessage(breadcrumbMessages.discoverProjectType, {
+		projectType: formatProjectTypeSentence(
+			formatMessage,
+			String(browseRoute.params.projectType ?? ''),
+			2,
+		),
+	})
+})
 const themeStore = useTheming()
 const browseRouteActive = computed(() => route.path.startsWith('/browse/'))
 const serverSetupModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
@@ -111,6 +154,86 @@ const {
 	markServerProjectInstalled,
 } = serverInstallContent
 
+type Instance = {
+	game_version: string
+	loader: string
+	path: string
+	install_stage: string
+	icon_path?: string
+	name: string
+	link?: {
+		type: string
+		project_id: string
+		version_id: string
+	}
+}
+
+const initialInstanceId = String(route.query.i ?? '')
+const instance: Ref<Instance | null> = ref(
+	queryClient.getQueryData<Instance>(['instances', 'summary', initialInstanceId]) ?? null,
+)
+const installedProjectIds: Ref<string[] | null> = ref(null)
+const instanceHideInstalled = ref(route.query.ai === 'true')
+const newlyInstalled = ref<string[]>([])
+const hiddenInstanceProjectIds = ref<Set<string>>(new Set())
+const hiddenInstanceProjectIdsInitialized = ref(false)
+const isServerInstance = ref(false)
+
+const instanceBreadcrumb = route.query.i
+	? useBreadcrumb({
+			slot: 'instance',
+			id: () => `instance:${String(displayedBrowseRoute.value.query.i ?? '')}`,
+			label: () => instance.value?.name ?? formatMessage(commonMessages.loadingLabel),
+			visual: () => ({
+				type: 'image',
+				src: instance.value?.icon_path ? convertFileSrc(instance.value.icon_path) : undefined,
+				alt: instance.value?.name,
+				tintBy: String(displayedBrowseRoute.value.query.i ?? ''),
+			}),
+			to: () => {
+				const instancePath = `/instance/${encodeURIComponent(
+					String(displayedBrowseRoute.value.query.i ?? ''),
+				)}`
+				return displayedBrowseRoute.value.query.from === 'worlds'
+					? `${instancePath}/worlds`
+					: instancePath
+			},
+		})
+	: undefined
+const serverBreadcrumbTo = ref(serverBackUrl.value)
+watch(serverBackUrl, (value) => {
+	if (route.path.startsWith('/browse/')) {
+		serverBreadcrumbTo.value = value
+	}
+})
+const serverBreadcrumb =
+	!instanceBreadcrumb && serverIdQuery.value
+		? useBreadcrumb({
+				slot: 'server',
+				id: () => `server:${String(displayedBrowseRoute.value.query.sid ?? '')}`,
+				label: () =>
+					serverContextServerData.value?.name ?? formatMessage(commonMessages.loadingLabel),
+				visual: { type: 'icon', component: ServerStackIcon },
+				to: serverBreadcrumbTo,
+			})
+		: undefined
+const breadcrumbParent = instanceBreadcrumb ?? serverBreadcrumb
+const breadcrumbDefinition = {
+	slot: 'browse',
+	id: () =>
+		`browse:${String(displayedBrowseRoute.value.params.projectType ?? '')}:${String(
+			displayedBrowseRoute.value.query.i ?? '',
+		)}:${String(displayedBrowseRoute.value.query.sid ?? '')}:${String(
+			displayedBrowseRoute.value.query.from ?? '',
+		)}`,
+	label: breadcrumbLabel,
+	to: () => displayedBrowseRoute.value.fullPath,
+	visual: { type: 'icon', component: CompassIcon },
+} satisfies BreadcrumbDefinition
+const browseBreadcrumb = breadcrumbParent
+	? useBreadcrumb(breadcrumbDefinition, { parent: breadcrumbParent })
+	: useRootBreadcrumb(breadcrumbDefinition)
+
 debugLog('fetching tags (categories, loaders, gameVersions)')
 const [categories, loaders, availableGameVersions] = await Promise.all([
 	get_categories()
@@ -130,28 +253,6 @@ const tags: Ref<Tags> = computed(() => ({
 	categories: categories.value ?? [],
 }))
 
-type Instance = {
-	game_version: string
-	loader: string
-	path: string
-	install_stage: string
-	icon_path?: string
-	name: string
-	link?: {
-		type: string
-		project_id: string
-		version_id: string
-	}
-}
-
-const instance: Ref<Instance | null> = ref(null)
-const installedProjectIds: Ref<string[] | null> = ref(null)
-const instanceHideInstalled = ref(false)
-const newlyInstalled = ref<string[]>([])
-const hiddenInstanceProjectIds = ref<Set<string>>(new Set())
-const hiddenInstanceProjectIdsInitialized = ref(false)
-const isServerInstance = ref(false)
-
 if (isFromWorlds.value && route.params.projectType !== 'server') {
 	router.replace({
 		path: '/browse/server',
@@ -189,7 +290,17 @@ watchServerContextChanges()
 await initInstanceContext()
 
 async function refreshInstalledProjectIds() {
-	if (!route.query.i) return
+	if (!route.query.i) {
+		const instances = await listInstances().catch(handleError)
+		if (!instances) return
+
+		const ids = instances
+			.map((gameInstance) => gameInstance.link?.project_id)
+			.filter((id): id is string => !!id)
+		debugLog('installedInstanceProjectIds loaded', { count: ids.length })
+		installedProjectIds.value = ids
+		return
+	}
 
 	if (route.query.from === 'worlds') {
 		const worlds = await get_instance_worlds(route.query.i as string).catch(handleError)
@@ -219,6 +330,7 @@ async function initInstanceContext() {
 		queryFrom: route.query.from,
 	})
 	await initServerContext()
+	await refreshInstalledProjectIds()
 
 	if (route.query.i) {
 		instance.value = (await getInstance(route.query.i as string).catch(handleError)) ?? null
@@ -228,8 +340,6 @@ async function initInstanceContext() {
 			gameVersion: instance.value?.game_version,
 		})
 
-		await refreshInstalledProjectIds()
-
 		if (instance.value?.link?.project_id) {
 			debugLog('checking linked project for server status', instance.value.link.project_id)
 			const projectV3 = await get_project_v3(
@@ -242,13 +352,23 @@ async function initInstanceContext() {
 			}
 		}
 	}
-
-	if (route.query.ai && !(route.params.projectType === 'modpack')) {
-		debugLog('setting instanceHideInstalled from query', route.query.ai)
-		instanceHideInstalled.value = route.query.ai === 'true'
-	}
 }
 
+function setBrowseHideInstalledFlag(flag: 'hide_installed_modpacks', value: boolean) {
+	themeStore.featureFlags[flag] = value
+	getSettings()
+		.then((settings) => {
+			settings.feature_flags[flag] = value
+			return setSettings(settings)
+		})
+		.catch(handleError)
+}
+
+const hideInstalledModpacks = computed({
+	get: () => themeStore.getFeatureFlag('hide_installed_modpacks'),
+	set: (value: boolean) => setBrowseHideInstalledFlag('hide_installed_modpacks', value),
+})
+
 const instanceFilters = computed(() => {
 	const filters = []
 
@@ -268,11 +388,15 @@ const instanceFilters = computed(() => {
 		if (isServerInstance.value) {
 			filters.push({ type: 'environment', option: 'client' })
 		}
+	}
 
-		if (instanceHideInstalled.value && hiddenInstanceProjectIds.value.size > 0) {
-			for (const id of hiddenInstanceProjectIds.value) {
-				filters.push({ type: 'project_id', option: `project_id:${id}`, negative: true })
-			}
+	if (
+		(instance.value || projectType.value === 'modpack') &&
+		(projectType.value === 'modpack' ? hideInstalledModpacks.value : instanceHideInstalled.value) &&
+		hiddenInstanceProjectIds.value.size > 0
+	) {
+		for (const id of hiddenInstanceProjectIds.value) {
+			filters.push({ type: 'project_id', option: `project_id:${id}`, negative: true })
 		}
 	}
 
@@ -331,6 +455,12 @@ const serverContextFilters = computed(() => {
 			{ type: 'environment', option: 'client' },
 			{ type: 'environment', option: 'server' },
 		)
+
+		if (hideInstalledModpacks.value && hiddenInstanceProjectIds.value.size > 0) {
+			for (const id of hiddenInstanceProjectIds.value) {
+				filters.push({ type: 'project_id', option: `project_id:${id}`, negative: true })
+			}
+		}
 	}
 
 	if (serverHideInstalled.value && hiddenServerContentProjectIds.value.size > 0) {
@@ -385,14 +515,6 @@ const messages = defineMessages({
 		id: 'app.browse.add-to-an-instance',
 		defaultMessage: 'Add to an instance',
 	},
-	discoverContent: {
-		id: 'app.browse.discover-content',
-		defaultMessage: 'Discover content',
-	},
-	discoverServers: {
-		id: 'app.browse.discover-servers',
-		defaultMessage: 'Discover servers',
-	},
 	environmentProvidedByServer: {
 		id: 'search.filter.locked.server-environment.title',
 		defaultMessage: 'Only client-side mods can be added to the server instance',
@@ -409,6 +531,10 @@ const messages = defineMessages({
 		id: 'app.browse.hide-added-servers',
 		defaultMessage: 'Hide servers already added',
 	},
+	hideInstalledModpacks: {
+		id: 'app.browse.hide-installed-modpacks',
+		defaultMessage: 'Hide already installed',
+	},
 	installingToServer: {
 		id: 'app.browse.server.installing',
 		defaultMessage: 'Installing',
@@ -448,29 +574,6 @@ const messages = defineMessages({
 	},
 })
 
-const breadcrumbs = useBreadcrumbs()
-const browseTitle = computed(() =>
-	formatMessage(isFromWorlds.value ? messages.discoverServers : messages.discoverContent),
-)
-breadcrumbs.setName('BrowseTitle', browseTitle.value)
-if (instance.value) {
-	const instanceLink = `/instance/${encodeURIComponent(instance.value.id)}`
-	breadcrumbs.setContext({
-		name: instance.value.name,
-		link: isFromWorlds.value ? `${instanceLink}/worlds` : instanceLink,
-	})
-} else {
-	breadcrumbs.setContext(null)
-}
-
-onBeforeRouteLeave(() => {
-	breadcrumbs.setContext({
-		name: browseTitle.value,
-		link: `/browse/${projectType.value}`,
-		query: route.query,
-	})
-})
-
 const projectType = ref<ProjectType>(route.params.projectType as ProjectType)
 
 function resetInstanceContext() {
@@ -484,8 +587,8 @@ function resetInstanceContext() {
 	hiddenInstanceProjectIds.value = new Set()
 	hiddenInstanceProjectIdsInitialized.value = false
 	isServerInstance.value = false
-	breadcrumbs.setName('BrowseTitle', formatMessage(messages.discoverContent))
-	breadcrumbs.setContext(null)
+	browseBreadcrumb.reset()
+	void refreshInstalledProjectIds()
 }
 
 watch(
@@ -696,6 +799,27 @@ async function chooseInstanceInstallVersion(
 	return { versionId: selectedVersion.id }
 }
 
+async function chooseFilterMatchingInstallVersion(
+	project: Labrinth.Search.v3.ResultSearchProject,
+	projectTypeValue: string,
+) {
+	const plan = await resolveInstallPlan({
+		project: {
+			project_id: project.project_id,
+			title: project.title,
+			icon_url: project.icon_url,
+		},
+		contentType: projectTypeValue as BrowseInstallContentType,
+		selectedFilters: searchState.currentFilters.value,
+		providedFilters: combinedProvidedFilters.value,
+		overriddenProvidedFilterTypes: searchState.overriddenProvidedFilterTypes.value,
+		targetPreferences: {},
+		getProjectVersions: getInstallProjectVersions,
+	})
+
+	return { versionId: plan.versionId }
+}
+
 function getCardActions(
 	result: Labrinth.Search.v3.ResultSearchProject,
 	currentProjectType: string,
@@ -714,6 +838,7 @@ function getCardActions(
 		serverContentProjectIds.value.has(projectResult.project_id || '') ||
 		serverContextServerData.value?.upstream?.project_id === projectResult.project_id
 	const isInstalling = installingProjectIds.value.has(projectResult.project_id)
+	const showAsInstalled = isInstalled && currentProjectType !== 'modpack'
 
 	if (
 		isServerContext.value &&
@@ -723,7 +848,7 @@ function getCardActions(
 		const isInstallingSelection = isInstallingQueuedServerInstalls.value
 		const validatingInstall =
 			isInstalling && currentProjectType !== 'modpack' && !isInstallingSelection
-		const installLabel = isInstalled
+		const installLabel = showAsInstalled
 			? commonMessages.installedLabel
 			: isQueued
 				? isInstalling || isInstallingSelection
@@ -743,11 +868,11 @@ function getCardActions(
 				icon:
 					isInstalling || isInstallingSelection
 						? SpinnerIcon
-						: isQueued || isInstalled
+						: isQueued || showAsInstalled
 							? CheckIcon
 							: PlusIcon,
 				iconClass: isInstalling || isInstallingSelection ? 'animate-spin' : undefined,
-				disabled: isInstalled || isInstalling || isInstallingSelection,
+				disabled: showAsInstalled || isInstalling || isInstallingSelection,
 				color: isQueued && !isInstalling && !isInstallingSelection ? 'green' : 'brand',
 				type: 'outlined',
 				onClick: async () => {
@@ -808,15 +933,15 @@ function getCardActions(
 			label: formatMessage(
 				isInstalling
 					? messages.installingToServer
-					: isInstalled
+					: showAsInstalled
 						? commonMessages.installedLabel
 						: shouldUseInstallIcon
 							? commonMessages.installButton
 							: messages.addToAnInstance,
 			),
-			icon: isInstalling ? SpinnerIcon : isInstalled ? CheckIcon : PlusIcon,
+			icon: isInstalling ? SpinnerIcon : showAsInstalled ? CheckIcon : PlusIcon,
 			iconClass: isInstalling ? 'animate-spin' : undefined,
-			disabled: isInstalled || isInstalling,
+			disabled: showAsInstalled || isInstalling,
 			color: 'brand',
 			type: 'outlined',
 			onClick: async () => {
@@ -824,7 +949,9 @@ function getCardActions(
 				try {
 					const selectedInstall = instance.value
 						? await chooseInstanceInstallVersion(projectResult, currentProjectType)
-						: { versionId: null as string | null }
+						: isModpack
+							? await chooseFilterMatchingInstallVersion(projectResult, currentProjectType)
+							: { versionId: null as string | null }
 					if (selectedInstall === null) {
 						setProjectInstalling(projectResult.project_id, false)
 						return
@@ -903,6 +1030,14 @@ async function search(requestParams: string) {
 		}
 	}
 
+	for (const hit of rawResults.result.hits) {
+		for (const identifier of [hit.project_id, hit.slug]) {
+			if (identifier) {
+				queryClient.setQueryData(['projects', 'summary', identifier], hit)
+			}
+		}
+	}
+
 	if (isServer) {
 		const hits = rawResults.result.hits ?? []
 		updateServerHits(hits)
@@ -919,10 +1054,11 @@ async function search(requestParams: string) {
 			...hit,
 		}
 
-		if (instance.value || isServerContext.value) {
-			const installedIds = instance.value
-				? new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])])
-				: serverContentProjectIds.value
+		if (instance.value || isServerContext.value || projectType.value === 'modpack') {
+			const installedIds =
+				isServerContext.value && projectType.value !== 'modpack'
+					? serverContentProjectIds.value
+					: new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])])
 			mapped.installed = installedIds.has(hit.project_id)
 		}
 
@@ -982,9 +1118,9 @@ watch(
 		() => projectType.value,
 	],
 	() => {
-		if (isServerContext.value) {
+		if (isServerContext.value && projectType.value !== 'modpack') {
 			syncHiddenServerContentProjectIds()
-		} else if (instance.value) {
+		} else if (instance.value || projectType.value === 'modpack') {
 			syncHiddenInstanceProjectIds()
 		}
 	},
@@ -1016,6 +1152,18 @@ let unlistenInstances: UnlistenFn | null = null
 
 onMounted(() => {
 	instance_listener(async (event: { event: string; instance_id: string }) => {
+		if (event.event === 'added' || event.event === 'created' || event.event === 'removed') {
+			if (!route.query.i) {
+				await refreshInstalledProjectIds()
+				if (projectType.value === 'modpack') {
+					if (event.event === 'removed') {
+						syncHiddenInstanceProjectIds()
+					}
+					await searchState.refreshSearch()
+				}
+			}
+		}
+
 		if (instance.value && event.instance_id === instance.value.id && event.event === 'synced') {
 			await refreshInstalledProjectIds()
 			await searchState.refreshSearch()
@@ -1081,8 +1229,17 @@ provideBrowseManager({
 	installContext,
 	providedFilters: combinedProvidedFilters,
 	hideInstalled: computed({
-		get: () => (isServerContext.value ? serverHideInstalled.value : instanceHideInstalled.value),
+		get: () => {
+			if (projectType.value === 'modpack') return hideInstalledModpacks.value
+			if (isServerContext.value) return serverHideInstalled.value
+			return instanceHideInstalled.value
+		},
 		set: (val: boolean) => {
+			if (projectType.value === 'modpack') {
+				hideInstalledModpacks.value = val
+				if (val) syncHiddenInstanceProjectIds()
+				return
+			}
 			if (isServerContext.value) {
 				serverHideInstalled.value = val
 				if (val) syncHiddenServerContentProjectIds()
@@ -1093,11 +1250,18 @@ provideBrowseManager({
 		},
 	}),
 	showHideInstalled: computed(
-		() => (isServerContext.value && projectType.value !== 'modpack') || !!instance.value,
+		() =>
+			projectType.value === 'modpack' ||
+			(isServerContext.value && projectType.value !== 'modpack') ||
+			!!instance.value,
 	),
 	hideInstalledLabel: computed(() =>
 		formatMessage(
-			isFromWorlds.value ? messages.hideAddedServers : commonMessages.hideInstalledContentLabel,
+			isFromWorlds.value
+				? messages.hideAddedServers
+				: projectType.value === 'modpack'
+					? messages.hideInstalledModpacks
+					: commonMessages.hideInstalledContentLabel,
 		),
 	),
 	hideSelected: hideSelectedServerInstalls,

apps/app-frontend/src/pages/Index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { HomeIcon } from '@modrinth/assets'
 import { injectNotificationManager } from '@modrinth/ui'
 import type { SearchResult } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
 import RowDisplay from '@/components/RowDisplay.vue'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
@@ -11,13 +11,17 @@ import { get_search_results } from '@/helpers/cache.js'
 import { instance_listener } from '@/helpers/events'
 import { list } from '@/helpers/instance'
 import type { GameInstance } from '@/helpers/types'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 
 const { handleError } = injectNotificationManager()
-const route = useRoute()
-const breadcrumbs = useBreadcrumbs()
 
-breadcrumbs.setRootContext({ name: 'Home', link: route.path })
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'home',
+	label: 'Home',
+	to: '/',
+	visual: { type: 'icon', component: HomeIcon },
+})
 
 const instances = ref<GameInstance[]>([])
 

apps/app-frontend/src/pages/Servers.vue

@@ -1,15 +1,26 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
+import { ServerStackIcon } from '@modrinth/assets'
 import { injectModrinthClient, ServersManagePageIndex } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+
 import { config } from '../config'
 
 const stripePublishableKey = (config.stripePublishableKey as string) || ''
 
 const client = injectModrinthClient()
 
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'servers',
+	label: 'Servers',
+	to: '/hosting/manage/',
+	visual: { type: 'icon', component: ServerStackIcon },
+})
+
 const { data: products } = useQuery({
 	queryKey: ['billing', 'products'],
 	queryFn: () => client.labrinth.billing_internal.getProducts(),

apps/app-frontend/src/pages/Skins.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import {
 	CheckIcon,
 	EditIcon,
@@ -6,10 +7,10 @@ import {
 	EyeIcon,
 	LogInIcon,
 	RotateCounterClockwiseIcon,
+	ShirtIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	ConfirmModal,
 	defineMessages,
@@ -56,8 +57,18 @@ import {
 	set_custom_skin_order,
 } from '@/helpers/skins.ts'
 import { hasPride26Badge } from '@/helpers/user-campaigns.ts'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { handleSevereError } from '@/store/error'
 import { useTheming } from '@/store/state'
+import { appMessages } from '@/utils/app-messages'
+
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'skins',
+	label: 'Skin selector',
+	to: '/skins',
+	visual: { type: 'icon', component: ShirtIcon },
+})
 
 type UnlistenFn = () => void
 type VirtualSkinSectionListExpose = {
@@ -68,10 +79,6 @@ const PENDING_SKIN_REFRESH_DELAY_MS = 11_000
 const DEFAULT_SKIN_SECTION_SORT_ORDER = ['Default skins', 'Modrinth Pride']
 const EARS_NOTICE_PLACEHOLDER = '__EARS_MOD_NAME__'
 const messages = defineMessages({
-	skinSelectorTitle: {
-		id: 'app.skins.title',
-		defaultMessage: 'Skin selector',
-	},
 	modrinthPrideSection: {
 		id: 'app.skins.section.modrinth-pride',
 		defaultMessage: 'Modrinth Pride',
@@ -1071,7 +1078,7 @@ await loadSkins()
 	<div v-if="currentUser" class="skin-layout box-border min-h-full p-4">
 		<div class="sticky top-6 self-start p-2 pt-0">
 			<h1 class="m-0 text-2xl font-bold flex items-center gap-2">
-				{{ formatMessage(messages.skinSelectorTitle) }}
+				{{ formatMessage(appMessages.skinSelectorLabel) }}
 			</h1>
 			<div
 				class="ml-5 mt-4 flex h-[calc(80vh-1rem)] items-center justify-center max-[700px]:h-[calc(50vh-1rem)]"
@@ -1173,8 +1180,7 @@ await loadSkins()
 										>Ears</router-link
 									>
 								</div>
-								<ButtonStyled type="outlined">
-									<button
+								<Button type="outlined"
 										class="ears-feature-toggle-button !h-10 !rounded-[14px] !px-4 shadow-md"
 										:aria-pressed="earsFeaturesEnabled"
 										:aria-label="
@@ -1186,15 +1192,14 @@ await loadSkins()
 										"
 										@click="earsFeaturesEnabled = !earsFeaturesEnabled"
 									>
-										{{
-											formatMessage(
-												earsFeaturesEnabled
-													? messages.toggleEarsFeaturesOff
-													: messages.toggleEarsFeaturesOn,
-											)
-										}}
-									</button>
-								</ButtonStyled>
+									{{
+										formatMessage(
+											earsFeaturesEnabled
+												? messages.toggleEarsFeaturesOff
+												: messages.toggleEarsFeaturesOn,
+										)
+									}}
+								</Button>
 								<Toggle
 									v-model="earsFeaturesEnabled"
 									v-tooltip="
@@ -1271,13 +1276,11 @@ await loadSkins()
 				<p class="text-lg m-0">
 					{{ formatMessage(messages.signInDescription) }}
 				</p>
-				<ButtonStyled v-show="accountsCard" color="brand" :disabled="accountsCard.loginDisabled">
-					<button :disabled="accountsCard.loginDisabled" @click="login">
-						<LogInIcon v-if="!accountsCard.loginDisabled" />
-						<SpinnerIcon v-else class="animate-spin" />
-						{{ formatMessage(messages.signInButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" v-show="accountsCard" :disabled="accountsCard.loginDisabled" @click="login">
+					<LogInIcon v-if="!accountsCard.loginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
+					{{ formatMessage(messages.signInButton) }}
+				</Button>
 			</div>
 		</div>
 	</div>

apps/app-frontend/src/pages/User.vue

@@ -1,40 +1,49 @@
 <template>
-	<div class="w-full pt-2">
+	<div class="w-full px-2 pt-2">
 		<UserProfilePageLayout
 			:user-id="userId"
 			:project-type="projectType"
 			variant="app"
 			site-url="https://modrinth.com"
 			project-link-mode="app"
+			:edit-profile-link="openProfileSettings"
 			external-navigation
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { provideUserProfile, UserProfilePageLayout } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, watch } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 
 import {
+	block_user,
+	get_blocked_users,
 	get_user_collections,
 	get_user_organizations,
 	get_user_profile,
 	get_user_projects,
 	patch_user,
+	unblock_user,
 } from '@/helpers/users'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { appSettingsModalOpenProfileKey } from '@/providers/app-settings-modal'
+import { useBreadcrumb } from '@/providers/breadcrumbs'
 
 const route = useRoute()
+const openProfileSettings = inject(appSettingsModalOpenProfileKey, () => {})
 const queryClient = useQueryClient()
-const breadcrumbs = useBreadcrumbs()
 const userProfile = provideUserProfile({
 	getUser: get_user_profile,
 	getProjects: get_user_projects,
 	getOrganizations: get_user_organizations,
 	getCollections: get_user_collections,
 	patchUser: patch_user,
+	getBlockedUsers: get_blocked_users,
+	blockUser: block_user,
+	unblockUser: unblock_user,
 })
 
 const userId = computed(() => {
@@ -46,17 +55,54 @@ const projectType = computed(() => {
 	return Array.isArray(value) ? value[0] : value
 })
 
+function getCachedUserSummary(id: string) {
+	return queryClient.getQueryData<Labrinth.Users.v3.User>(['users', 'summary', id])
+}
+
+const { data: user } = useQuery({
+	queryKey: computed(() => ['user', userId.value]),
+	queryFn: () => userProfile.getUser(userId.value),
+	enabled: false,
+	staleTime: 30_000,
+})
+
+const breadcrumbUserId = ref(userId.value)
+const breadcrumbLabel = ref(getCachedUserSummary(userId.value)?.username ?? userId.value)
+const breadcrumbTo = ref(route.fullPath)
+watch(
+	[userId, user, () => route.fullPath],
+	([currentUserId, currentUser, currentPath]) => {
+		if (route.name !== 'User') return
+		breadcrumbUserId.value = currentUserId
+		breadcrumbLabel.value = currentUser?.username ?? currentUserId
+		breadcrumbTo.value = currentPath
+	},
+	{ immediate: true, flush: 'sync' },
+)
+
+useBreadcrumb({
+	slot: 'user',
+	id: () => `user:${breadcrumbUserId.value}`,
+	label: breadcrumbLabel,
+	to: breadcrumbTo,
+	visual: () => ({
+		type: 'image',
+		src: user.value?.avatar_url ?? getCachedUserSummary(breadcrumbUserId.value)?.avatar_url,
+		alt: breadcrumbLabel.value,
+		circle: true,
+		tintBy: breadcrumbUserId.value,
+	}),
+})
+
 async function ensureUserProfileData(id: string): Promise<void> {
 	if (!id) return
 
-	let breadcrumbName = id
 	try {
-		const user = await queryClient.ensureQueryData({
+		await queryClient.ensureQueryData({
 			queryKey: ['user', id],
 			queryFn: () => userProfile.getUser(id),
 			staleTime: 30_000,
 		})
-		breadcrumbName = user.username
 	} catch {
 		// Let the mounted layout's useQuery surface errors; do not fail route setup.
 	}
@@ -78,8 +124,6 @@ async function ensureUserProfileData(id: string): Promise<void> {
 			staleTime: 30_000,
 		}),
 	])
-
-	breadcrumbs.setName('User', breadcrumbName)
 }
 
 onBeforeRouteUpdate(async (to) => {
@@ -88,21 +132,5 @@ onBeforeRouteUpdate(async (to) => {
 	await ensureUserProfileData(id)
 })
 
-breadcrumbs.setName('User', userId.value)
 await ensureUserProfileData(userId.value)
-
-const { data: user } = useQuery({
-	queryKey: computed(() => ['user', userId.value]),
-	queryFn: () => userProfile.getUser(userId.value),
-	enabled: false,
-	staleTime: 30_000,
-})
-
-watch(
-	[userId, user],
-	([currentUserId, value]) => {
-		breadcrumbs.setName('User', value?.username ?? currentUserId)
-	},
-	{ immediate: true },
-)
 </script>

apps/app-frontend/src/pages/Worlds.vue

@@ -1,4 +0,0 @@
-<script setup lang="ts"></script>
-<template>
-	<div class="p-6 flex flex-col gap-2">Worlds</div>
-</template>

apps/app-frontend/src/pages/hosting/manage/Index.vue

@@ -48,15 +48,22 @@
 
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
-import { injectAuth, injectModrinthClient, ServersManageRootLayout } from '@modrinth/ui'
+import { ServerStackIcon } from '@modrinth/assets'
+import {
+	commonMessages,
+	injectAuth,
+	injectModrinthClient,
+	ServersManageRootLayout,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { get_user } from '@/helpers/cache'
 import { get as getCreds } from '@/helpers/mr_auth'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { provideBreadcrumbParent, useBreadcrumb } from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/theme'
 
 const route = useRoute()
@@ -65,47 +72,63 @@ const auth = injectAuth()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const themeStore = useTheming()
-const breadcrumbs = useBreadcrumbs()
+const { formatMessage } = useVIntl()
 
 const isContainedServerRoute = computed(() => route.name === 'ServerManageOverview')
 
 const serverId = computed(() => {
 	const rawId = route.params.id
-	return Array.isArray(rawId) ? rawId[0] : (rawId ?? '')
+	return Array.isArray(rawId) ? (rawId[0] ?? '') : (rawId ?? '')
 })
 
-if (serverId.value) {
-	try {
-		await queryClient.ensureQueryData({
-			queryKey: ['servers', 'detail', serverId.value],
-			queryFn: () => client.archon.servers_v0.get(serverId.value)!,
-			staleTime: 30_000,
-		})
-	} catch {
-		// Let mounted layouts' useQuery surface errors; do not fail route setup.
-	}
+function getCachedServerName(id: string): string | undefined {
+	return queryClient
+		.getQueryData<Archon.Servers.v0.ServerGetResponse>(['servers'])
+		?.servers.find((server) => server.server_id === id)?.name
 }
 
 const { data: serverData } = useQuery({
 	queryKey: computed(() => ['servers', 'detail', serverId.value]),
-	queryFn: () => null as unknown as Archon.Servers.v0.Server,
-	enabled: false,
+	queryFn: () => client.archon.servers_v0.get(serverId.value),
+	enabled: computed(() => Boolean(serverId.value)),
+	placeholderData: () =>
+		queryClient
+			.getQueryData<Archon.Servers.v0.ServerGetResponse>(['servers'])
+			?.servers.find((server) => server.server_id === serverId.value),
+	staleTime: 30_000,
 })
 
+const breadcrumbServerId = ref(serverId.value)
+const breadcrumbLabel = ref(
+	getCachedServerName(serverId.value) ?? formatMessage(commonMessages.loadingLabel),
+)
+watch(
+	serverId,
+	(value) => {
+		if (!route.path.startsWith('/hosting/manage/') || route.name === 'Servers') return
+		breadcrumbServerId.value = value
+		breadcrumbLabel.value = getCachedServerName(value) ?? formatMessage(commonMessages.loadingLabel)
+	},
+	{ flush: 'sync' },
+)
 watch(
 	serverData,
 	(server) => {
-		if (server?.name) {
-			breadcrumbs.setName('Server', server.name)
-			breadcrumbs.setContext({
-				name: server.name,
-				link: `/hosting/manage/${serverId.value}/content`,
-			})
-		}
+		if (!route.path.startsWith('/hosting/manage/') || !server?.name) return
+		breadcrumbLabel.value = server.name
 	},
 	{ immediate: true },
 )
 
+const serverBreadcrumb = useBreadcrumb({
+	slot: 'server',
+	id: () => `server:${breadcrumbServerId.value}`,
+	label: breadcrumbLabel,
+	visual: { type: 'icon', component: ServerStackIcon },
+	to: () => `/hosting/manage/${encodeURIComponent(breadcrumbServerId.value)}`,
+})
+provideBreadcrumbParent(serverBreadcrumb)
+
 watch(
 	() => auth.user.value,
 	(user, previousUser) => {

apps/app-frontend/src/pages/index.js

@@ -3,6 +3,5 @@ import Index from './Index.vue'
 import Servers from './Servers.vue'
 import Skins from './Skins.vue'
 import User from './User.vue'
-import Worlds from './Worlds.vue'
 
-export { Browse, Index, Servers, Skins, User, Worlds }
+export { Browse, Index, Servers, Skins, User }

apps/app-frontend/src/pages/instance/Index.vue

@@ -138,7 +138,14 @@ import {
 	UserPlusIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { injectAuth, injectNotificationManager, NavTabs, useLoadingBarToken } from '@modrinth/ui'
+import {
+	commonMessages,
+	injectAuth,
+	injectNotificationManager,
+	NavTabs,
+	useLoadingBarToken,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
@@ -185,9 +192,10 @@ import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
 import type { GameInstance } from '@/helpers/types'
 import { createInstanceShortcut, showInstanceInFolder } from '@/helpers/utils.js'
 import { refreshWorlds, type ServerStatus } from '@/helpers/worlds'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
-import { useBreadcrumbs, useTheming } from '@/store/state'
+import { useTheming } from '@/store/state'
 
 import { provideSharedInstanceState, useSharedInstanceState } from './use-shared-instance-state'
 
@@ -198,10 +206,10 @@ const { playServerProject } = injectServerInstall()
 const auth = injectAuth()
 const queryClient = useQueryClient()
 const route = useRoute()
+const { formatMessage } = useVIntl()
 
 const router = useRouter()
 const displayedInstanceRoute = shallowRef(router.currentRoute.value)
-const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 const showInstancePlayTime = computed(() => themeStore.getFeatureFlag('show_instance_play_time'))
 const contentSubpageRouteNames = new Set(['Mods', 'ModsFilter'])
@@ -214,7 +222,23 @@ window.addEventListener('online', () => {
 	offline.value = false
 })
 
-const instance = ref<GameInstance>()
+const initialInstanceId = String(displayedInstanceRoute.value.params.id ?? '')
+const instance = ref<GameInstance | undefined>(
+	queryClient.getQueryData<GameInstance>(['instances', 'summary', initialInstanceId]),
+)
+useRootBreadcrumb({
+	slot: 'instance',
+	id: () => `instance:${String(displayedInstanceRoute.value.params.id ?? '')}`,
+	label: () => instance.value?.name ?? formatMessage(commonMessages.loadingLabel),
+	visual: () => ({
+		type: 'image',
+		src: instance.value?.icon_path ? convertFileSrc(instance.value.icon_path) : undefined,
+		alt: instance.value?.name,
+		tintBy: instance.value?.id ?? String(displayedInstanceRoute.value.params.id ?? ''),
+	}),
+	to: () => `/instance/${encodeURIComponent(String(displayedInstanceRoute.value.params.id ?? ''))}`,
+})
+
 const preloadedContent = ref<InstanceContentData | null>(null)
 const playing = ref(false)
 const loading = ref(false)
@@ -339,6 +363,9 @@ async function fetchInstance() {
 	}
 
 	instance.value = nextInstance ?? undefined
+	if (nextInstance) {
+		queryClient.setQueryData(['instances', 'summary', nextInstance.id], nextInstance)
+	}
 	displayedInstanceRoute.value = nextRoute
 	sharedInstanceState.reset()
 	sharedInstanceState.refreshAvailability()
@@ -503,20 +530,6 @@ watch(
 	{ immediate: true },
 )
 
-if (instance.value) {
-	breadcrumbs.setName(
-		'Instance',
-		instance.value.name.length > 40
-			? instance.value.name.substring(0, 40) + '...'
-			: instance.value.name,
-	)
-	breadcrumbs.setContext({
-		name: instance.value.name,
-		link: displayedInstanceRoute.value.path,
-		query: displayedInstanceRoute.value.query,
-	})
-}
-
 const options = ref<InstanceType<typeof ContextMenu> | null>(null)
 
 const launchInstance = async (context: string) => {
@@ -701,7 +714,7 @@ async function reportSharedInstance(event?: MouseEvent, closeUpdateModal = false
 		)
 		if (instance.value?.id !== reportInstance.id) return
 		if (closeUpdateModal) sharedInstanceUpdateModal.value?.hide()
-		sharedInstanceReportModal.value?.showReport(preview, event)
+		sharedInstanceReportModal.value?.showReport(preview, sharedInstance.manager_id, event)
 	} catch (error) {
 		notifySharedInstanceError(error)
 	}

apps/app-frontend/src/pages/instance/Mods.vue

@@ -1310,14 +1310,16 @@ function getOverflowOptions(item: ContentItem): OverflowMenuOption[] {
 	const options: OverflowMenuOption[] = []
 
 	options.push({
-		id: formatMessage(commonMessages.showFileButton),
+		id: 'show-file',
+		label: formatMessage(commonMessages.showFileButton),
 		icon: FolderOpenIcon,
 		action: () => highlightModInInstance(props.instance.id, item.file_path),
 	})
 
 	if (item.project?.slug) {
 		options.push({
-			id: formatMessage(commonMessages.copyLinkButton),
+			id: 'copy-link',
+			label: formatMessage(commonMessages.copyLinkButton),
 			icon: ClipboardCopyIcon,
 			action: async () => {
 				await navigator.clipboard.writeText(

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -35,23 +35,19 @@
 					"
 				/>
 				<div class="flex gap-2">
-					<ButtonStyled type="outlined">
-						<button class="!h-10" @click="addServerModal?.show()">
-							<PlusIcon class="size-5" />
-							{{ formatMessage(messages.addServer) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button
+					<Button type="outlined" class="!h-10" @click="addServerModal?.show()">
+						<PlusIcon class="size-5" />
+						{{ formatMessage(messages.addServer) }}
+					</Button>
+					<Button type="colored" color="brand"
 							class="!h-10 flex items-center gap-2"
 							@click="
 								router.push({ path: '/browse/server', query: { i: instance.id, from: 'worlds' } })
 							"
 						>
-							<CompassIcon class="size-5" />
-							<span>{{ formatMessage(messages.browseServers) }}</span>
-						</button>
-					</ButtonStyled>
+						<CompassIcon class="size-5" />
+						<span>{{ formatMessage(messages.browseServers) }}</span>
+					</Button>
 				</div>
 			</div>
 			<div class="flex flex-wrap items-center justify-between gap-2">
@@ -72,12 +68,10 @@
 						{{ option.label }}
 					</button>
 				</div>
-				<ButtonStyled type="transparent" hover-color-fill="none">
-					<button :disabled="refreshingAll" @click="refreshAllWorlds">
-						<RefreshCwIcon :class="refreshingAll ? 'animate-spin' : ''" />
-						{{ formatMessage(commonMessages.refreshButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" :disabled="refreshingAll" @click="refreshAllWorlds" class="hover:!bg-transparent focus-visible:!bg-transparent">
+					<RefreshCwIcon :class="refreshingAll ? 'animate-spin' : ''" />
+					{{ formatMessage(commonMessages.refreshButton) }}
+				</Button>
 			</div>
 			<div class="flex flex-col w-full gap-2">
 				<WorldItem
@@ -123,31 +117,27 @@
 			:description="formatMessage(messages.noWorldsDescription)"
 		>
 			<template #actions>
-				<ButtonStyled type="outlined">
-					<button class="!h-10" @click="addServerModal?.show()">
-						<PlusIcon class="size-5" />
-						{{ formatMessage(messages.addServer) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
+				<Button type="outlined" class="!h-10" @click="addServerModal?.show()">
+					<PlusIcon class="size-5" />
+					{{ formatMessage(messages.addServer) }}
+				</Button>
+				<Button type="colored" color="brand"
 						class="!h-10 flex items-center gap-2"
 						@click="
 							router.push({ path: '/browse/server', query: { i: instance.id, from: 'worlds' } })
 						"
 					>
-						<CompassIcon class="size-5" />
-						<span>{{ formatMessage(messages.browseServers) }}</span>
-					</button>
-				</ButtonStyled>
+					<CompassIcon class="size-5" />
+					<span>{{ formatMessage(messages.browseServers) }}</span>
+				</Button>
 			</template>
 		</EmptyState>
 	</ReadyTransition>
 </template>
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { CompassIcon, FilterIcon, PlusIcon, RefreshCwIcon, SearchIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	EmptyState,