feat: instance sharing thru shared-instances service (#6569)

* feat: implement instance share page + search_users backend call * feat: invite players modal * feat: use tanstack queries for friends sync across app pages * feat: base shared instances implementation * fix: admon style * feat: impl instance admonitions like server panel * fix: impl get + del usage * feat: support modpack links * feat: invite notif accepting * fix: lint + fmt * feat: impl install to play * feat: impl usage of UpdateToPlayModal * feat: warnings on deleting/disabling shared-instance version content * fix: send instance name * feat: align with backend * feat: shared instances qa * feat: wrong account protection * feat: qa * fix: smartly apply updates * fix: install bug * fix: 401/404 differentiation * fix: fmt+prepr * feat: qa * feat: qa * fix: signing out messes up revoke/deleted checks * feat: qa * fix: fmt + lint * feat: lock content if part of shared instance * fix: lint * [do not merge] feat: rough invite links impl temp (#6666) * fix: wrong cmd * feat: invite page * fix: server-manager DTO mismatch * fix: drop anonymous invite link acceptance * refactor: structured shared-instance unavailable errors * refactor: centralise error presentations * refactor: dedupe shared instance diff detection * fix: logging in reqwests * refactor: move app.vue shared instances into handler * refactor: break up Share.vue * refactor: split up shared instances state outside of instance index * refactor: dedicated shared instances install/update modals + split up page * refactor: centralized managed content * refactor: split up install shared to own runner + shared.rs split up * refactor: dedupe sql for instance metadata enrichmnt * refactor: friends composable + dedupe friends logic across usages * chore: reduced unused code * fix: align with backend * fix: lint * fix: file sha changes * fix: invite links not working due to icon signed * feat: qa * feat: reporting frontend dummy * fix: try use header * remove: file hash field * fix: pin box * feat: malware warning for shared instances * fix: cache rule * feat: config files syncing * feat: disable config sharing * fix: header * fix: use mark ready * fix: dont cause push update for configs * fix: lint * feat: sharing page in settings * feat: move config + change flow * fix: qa * fix: lint prepr * feat: proxy file upload thru shared instances backend * fix: use collapisible * fix: push config * fix: config * feat: swap out sign in modal for new one * fix: report flow * fix: exclude configs.zip from external warnings * fix: nuxi init * fix: config bundle downloading * fix: error notif * fix: polling * fix: qa * fix: lint + prepr * feat: shared instances moderation frontend + hook up report flow * fix: report copy * fix: lint * fix: lint * fix: modrinth ids being undefined * feat: instance quarantining * fix: prepr + fmt * fix: quarantined -> locked terminology * fix: missing endpoint impls + fmt * fix: missing api in build.rs * fix: share tab jittery * fix: fmt *PT bug * fix: invites count as users even if pending * fix: prepr * fix: invite page owner in users list * fix: lint * fix: qa * fix: lint * fix: members stale not clearing * fix: invite use joined_at field * fix: lint * fix: qa --------- Co-authored-by: sychic <47618543+Sychic@users.noreply.github.com>
2026-08-26 17:44:50 +00:00 · 2026-07-24 13:06:38 +00:00
parent 2e0d797bb0
commit e58af98f21
269 changed files with 18202 additions and 2579 deletions
@@ -66,6 +66,7 @@ const checkProcess = async () => {

 const play = async (e, context) => {
 	e?.stopPropagation()
+	if (props.instance.quarantined) return
 	loading.value = true
 	await run(props.instance.id)
 		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
@@ -94,6 +95,7 @@ const stop = async (e, context) => {

 const repair = async (e) => {
 	e?.stopPropagation()
+	if (props.instance.quarantined) return

 	if (
 		props.instance.install_stage !== 'pack_installed' &&
@@ -116,6 +118,7 @@ const openFolder = async () => {
 }

 const addContent = async () => {
+	if (props.instance.quarantined) return
 	await router.push({
 		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
 		query: { i: props.instance.id },
@@ -142,7 +145,9 @@ const unlisten = await process_listener((e) => {
 	}
 })

-onMounted(() => checkProcess())
+onMounted(() => {
+	checkProcess()
+})
 onUnmounted(() => unlisten())
 </script>

@@ -173,7 +178,11 @@ onUnmounted(() => unlisten())
 						<SpinnerIcon class="animate-spin" />
 					</button>
 				</ButtonStyled>
-				<ButtonStyled v-else :color="first ? 'brand' : 'standard'" circular>
+				<ButtonStyled
+					v-else-if="!instance.quarantined"
+					:color="first ? 'brand' : 'standard'"
+					circular
+				>
 					<button
 						v-tooltip="'Play'"
 						@click="(e) => play(e, 'InstanceCard')"
@@ -227,7 +236,12 @@ onUnmounted(() => unlisten())
 						class="animate-spin w-8 h-8"
 						tabindex="-1"
 					/>
-					<ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
+					<ButtonStyled
+						v-else-if="!installed && !instance.quarantined"
+						size="large"
+						color="brand"
+						circular
+					>
 						<button
 							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"
@@ -236,7 +250,7 @@ onUnmounted(() => unlisten())
 							<DownloadIcon />
 						</button>
 					</ButtonStyled>
-					<ButtonStyled v-else size="large" color="brand" circular>
+					<ButtonStyled v-else-if="!instance.quarantined" size="large" color="brand" circular>
 						<button
 							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"
@@ -10,18 +10,12 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, ref } from 'vue'

 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { friend_listener } from '@/helpers/events'
-import {
-	add_friend,
-	friends,
-	type FriendWithUserData,
-	remove_friend,
-	transformFriends,
-} from '@/helpers/friends.ts'
+import { useFriends } from '@/composables/use-friends'
+import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'

 const { formatMessage } = useVIntl()
@@ -35,36 +29,23 @@ const props = defineProps<{
 }>()

 const userCredentials = computed(() => props.credentials)
+const {
+	friends: userFriends,
+	loading,
+	requestFriend,
+	acceptFriend,
+	removeFriend: removeFriendRecord,
+} = useFriends({
+	currentUserId: () => userCredentials.value?.user_id,
+	getCredentials: () => userCredentials.value,
+	onError: handleError,
+})

 const search = ref('')
 const friendInvitesModal = ref()
-
 const username = ref('')
 const addFriendModal = ref()
-async function addFriendFromModal() {
-	addFriendModal.value.hide()
-	await add_friend(username.value).catch(handleError)
-	username.value = ''
-	await loadFriends()
-}

-async function addFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await add_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
-
-async function removeFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await remove_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
-
-const userFriends = ref<FriendWithUserData[]>([])
 const sortedFriends = computed<FriendWithUserData[]>(() =>
 	userFriends.value.slice().sort((a, b) => {
 		if (a.last_updated === null && b.last_updated === null) {
@@ -108,42 +89,22 @@ const incomingRequests = computed(() =>
 		.sort((a, b) => b.created.diff(a.created)),
 )

-const loading = ref(true)
-async function loadFriends(timeout = false) {
-	loading.value = timeout
+function addFriendFromModal() {
+	const target = username.value.trim()
+	if (!target) return

-	try {
-		const friendsList = await friends()
-		userFriends.value = await transformFriends(friendsList, userCredentials.value)
-		loading.value = false
-	} catch (e) {
-		console.error('Error loading friends', e)
-		if (timeout) {
-			setTimeout(() => loadFriends(), 15 * 1000)
-		}
-	}
+	addFriendModal.value.hide()
+	requestFriend({ id: target, username: target })
+	username.value = ''
 }

-watch(
-	userCredentials,
-	() => {
-		if (userCredentials.value === undefined) {
-			userFriends.value = []
-			loading.value = false
-		} else if (userCredentials.value === null) {
-			userFriends.value = []
-			loading.value = false
-		} else {
-			loadFriends(true)
-		}
-	},
-	{ immediate: true },
-)
+function addFriend(friend: FriendWithUserData) {
+	acceptFriend(friend)
+}

-const unlisten = await friend_listener(() => loadFriends())
-onUnmounted(() => {
-	unlisten()
-})
+function removeFriend(friend: FriendWithUserData) {
+	removeFriendRecord(friend)
+}

 const messages = defineMessages({
 	addFriend: {
@@ -4,23 +4,57 @@
 			<Avatar :src="iconSrc" :alt="instance.name" size="64px" :tint-by="instance.id" />
 		</template>

+		<template v-if="instance.shared_instance || instance.quarantined" #badges>
+			<PageHeaderBadgeItem
+				v-if="instance.quarantined"
+				:icon="LockIcon"
+				aria-label="Locked instance information"
+				class="!border-orange !bg-highlight-orange !text-orange"
+			>
+				Locked
+			</PageHeaderBadgeItem>
+			<PageHeaderBadgeItem
+				v-else
+				:icon="UnknownIcon"
+				:tooltip="sharedInstanceTooltip"
+				aria-label="Shared instance information"
+				class="!border-blue !bg-highlight-blue !text-blue"
+			>
+				Shared
+			</PageHeaderBadgeItem>
+		</template>
+
 		<template #metadata>
-			<InstanceHeaderServerMetadata
-				v-if="isServerInstance"
-				:loading-server-ping="loadingServerPing"
-				:players-online="playersOnline"
-				:status-online="statusOnline"
-				:recent-plays="recentPlays"
-				:ping="ping"
-				:minecraft-server="minecraftServer"
-				:linked-project-v3="linkedProjectV3"
-				:instance-id="instance.id"
-			/>
+			<div v-if="isServerInstance" class="flex flex-wrap items-center gap-2">
+				<InstanceHeaderServerMetadata
+					:loading-server-ping="loadingServerPing"
+					:players-online="playersOnline"
+					:status-online="statusOnline"
+					:recent-plays="recentPlays"
+					:ping="ping"
+					:minecraft-server="minecraftServer"
+					:linked-project-v3="linkedProjectV3"
+					:instance-id="instance.id"
+				/>
+				<PageHeaderMetadataItem v-if="sharedInstanceManager" :action="sharedInstanceManagerAction">
+					{{ sharedInstanceManagerLabel }}
+					<Avatar
+						:src="sharedInstanceManager.avatarUrl"
+						:alt="sharedInstanceManager.name"
+						:tint-by="sharedInstanceManager.tintBy"
+						size="24px"
+						:circle="sharedInstanceManager.type === 'user'"
+						no-shadow
+					/>
+					<span class="min-w-0 truncate">{{ sharedInstanceManager.name }}</span>
+				</PageHeaderMetadataItem>
+			</div>
 			<PageHeaderMetadata v-else>
 				<PageHeaderMetadataItem :icon="Gamepad2Icon" tooltip="Minecraft version">
 					Minecraft {{ instance.game_version }}
 				</PageHeaderMetadataItem>
 				<PageHeaderMetadataItem
+					v-if="sharedInstanceManager?.type !== 'user'"
 					:icon="ServerLoaderIcon"
 					:icon-props="{ loader: loaderDisplayName }"
 					tooltip="Mod loader"
@@ -34,6 +68,18 @@
 				>
 					{{ playtimeLabel }}
 				</PageHeaderMetadataItem>
+				<PageHeaderMetadataItem v-if="sharedInstanceManager" :action="sharedInstanceManagerAction">
+					{{ sharedInstanceManagerLabel }}
+					<Avatar
+						:src="sharedInstanceManager.avatarUrl"
+						:alt="sharedInstanceManager.name"
+						:tint-by="sharedInstanceManager.tintBy"
+						size="24px"
+						:circle="sharedInstanceManager.type === 'user'"
+						no-shadow
+					/>
+					<span class="min-w-0 truncate">{{ sharedInstanceManager.name }}</span>
+				</PageHeaderMetadataItem>
 			</PageHeaderMetadata>
 		</template>

@@ -44,12 +90,6 @@
 						{{ formatMessage(commonMessages.installingLabel) }}
 					</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>
 				<ButtonStyled v-else-if="playing" color="red" size="large">
 					<button type="button" :disabled="stopping" @click="emit('stop')">
 						<StopCircleIcon />
@@ -58,6 +98,18 @@
 						}}
 					</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
 					v-else-if="!loading && isServerInstance"
 					:actions="serverPlayActions"
@@ -104,13 +156,16 @@ import {
 	DownloadIcon,
 	ExternalIcon,
 	FolderOpenIcon,
+	LockIcon,
 	MoreVerticalIcon,
 	PackageIcon,
 	PlayIcon,
+	ReportIcon,
 	SettingsIcon,
 	StopCircleIcon,
 	TagCategoryGamepad2Icon as Gamepad2Icon,
 	TimerIcon,
+	UnknownIcon,
 } from '@modrinth/assets'
 import {
 	Avatar,
@@ -123,6 +178,7 @@ import {
 	LoaderIcon as ServerLoaderIcon,
 	PageHeader,
 	PageHeaderActions,
+	PageHeaderBadgeItem,
 	PageHeaderMetadata,
 	PageHeaderMetadataItem,
 	type ServerLoader,
@@ -130,6 +186,7 @@ import {
 	type TeleportOverflowMenuItem,
 	useVIntl,
 } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed } from 'vue'

 import type { GameInstance } from '@/helpers/types'
@@ -169,6 +226,10 @@ const messages = defineMessages({
 		id: 'instance.action.repair',
 		defaultMessage: 'Repair',
 	},
+	lockedPlayTooltip: {
+		id: 'instance.locked.play-tooltip',
+		defaultMessage: 'This instance has been locked',
+	},
 	starting: {
 		id: 'instance.action.starting',
 		defaultMessage: 'Starting...',
@@ -177,6 +238,14 @@ const messages = defineMessages({
 		id: 'instance.action.stopping',
 		defaultMessage: 'Stopping...',
 	},
+	sharedInstanceTooltip: {
+		id: 'instance.shared-instance.tooltip',
+		defaultMessage: "This instance's content is being managed by someone else.",
+	},
+	sharedInstanceOwnerTooltip: {
+		id: 'instance.shared-instance.owner-tooltip',
+		defaultMessage: "This instance's content is being shared to other users.",
+	},
 })

 const props = withDefaults(
@@ -196,6 +265,12 @@ const props = withDefaults(
 		ping?: number
 		minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
 		linkedProjectV3?: Labrinth.Projects.v3.Project
+		sharedInstanceManager?: {
+			type: 'user' | 'server'
+			name: string
+			avatarUrl?: string
+			tintBy: string
+		} | null
 	}>(),
 	{
 		iconSrc: null,
@@ -212,6 +287,7 @@ const props = withDefaults(
 		ping: undefined,
 		minecraftServer: undefined,
 		linkedProjectV3: undefined,
+		sharedInstanceManager: null,
 	},
 )

@@ -224,6 +300,7 @@ const emit = defineEmits<{
 	openFolder: []
 	export: []
 	createShortcut: []
+	report: [event?: MouseEvent]
 }>()

 const installingStages = [
@@ -241,6 +318,21 @@ const loaderDisplayName = computed(() => formatLoaderLabel(props.instance.loader
 const loaderLabel = computed(() =>
 	[loaderDisplayName.value, props.instance.loader_version].filter(Boolean).join(' '),
 )
+const sharedInstanceTooltip = computed(() =>
+	formatMessage(
+		props.instance.shared_instance?.role === 'owner'
+			? messages.sharedInstanceOwnerTooltip
+			: messages.sharedInstanceTooltip,
+	),
+)
+const sharedInstanceManagerLabel = computed(() =>
+	props.sharedInstanceManager?.type === 'server' ? 'Linked to' : 'Managed by',
+)
+const sharedInstanceManagerAction = computed(() => {
+	const manager = props.sharedInstanceManager
+	if (manager?.type !== 'user') return undefined
+	return () => openUrl(`https://modrinth.com/user/${encodeURIComponent(manager.name)}`)
+})
 const playtimeLabel = computed(() => {
 	if (props.timePlayed <= 0) return formatMessage(messages.neverPlayed)

@@ -271,24 +363,46 @@ const serverPlayActions = computed<JoinedButtonAction[]>(() => [
 		action: () => emit('play'),
 	},
 ])
-const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
-	{
-		id: 'open-folder',
-		label: formatMessage(messages.openFolder),
-		icon: FolderOpenIcon,
-		action: () => emit('openFolder'),
-	},
-	{
-		id: 'export-mrpack',
-		label: formatMessage(messages.exportModpack),
-		icon: PackageIcon,
-		action: () => emit('export'),
-	},
-	{
-		id: 'create-shortcut',
-		label: formatMessage(messages.createShortcut),
-		icon: ExternalIcon,
-		action: () => emit('createShortcut'),
-	},
-])
+const moreActions = computed<TeleportOverflowMenuItem[]>(() => {
+	const actions: TeleportOverflowMenuItem[] = [
+		{
+			id: 'open-folder',
+			label: formatMessage(messages.openFolder),
+			icon: FolderOpenIcon,
+			action: () => emit('openFolder'),
+		},
+	]
+
+	if (!props.instance.quarantined) {
+		actions.push(
+			{
+				id: 'export-mrpack',
+				label: formatMessage(messages.exportModpack),
+				icon: PackageIcon,
+				action: () => emit('export'),
+			},
+			{
+				id: 'create-shortcut',
+				label: formatMessage(messages.createShortcut),
+				icon: ExternalIcon,
+				action: () => emit('createShortcut'),
+			},
+		)
+	}
+
+	if (props.instance.shared_instance?.role === 'member') {
+		actions.push(
+			{ divider: true },
+			{
+				id: 'report-shared-instance',
+				label: formatMessage(commonMessages.reportButton),
+				icon: ReportIcon,
+				color: 'red',
+				action: (event) => emit('report', event),
+			},
+		)
+	}
+
+	return actions
+})
 </script>
@@ -0,0 +1,116 @@
+<template>
+	<StackedAdmonitions v-bind="$attrs" :items="stackItems" class="w-full">
+		<template #item="{ item, dismissible }">
+			<InstanceAdmonitionsSharedInstanceStale
+				v-if="item.kind === 'shared-instance-stale'"
+				:instance="instance"
+				@published="emit('published')"
+			/>
+			<InstanceAdmonitionsSharedInstanceWrongAccount
+				v-else-if="item.kind === 'shared-instance-wrong-account'"
+				:expected-user-id="sharedInstanceExpectedUserId"
+				:role="sharedInstanceRole"
+				:signed-out="sharedInstanceSignedOut"
+			/>
+			<InstanceAdmonitionsSharedInstanceUnavailable
+				v-else-if="item.kind === 'shared-instance-unavailable'"
+				:reason="displayedSharedInstanceUnavailableReason"
+				:manager="sharedInstanceUnavailableManager"
+				:dismissible="dismissible"
+				@dismiss="sharedInstanceUnavailableDismissed = true"
+				@delete="emit('delete')"
+			/>
+		</template>
+	</StackedAdmonitions>
+</template>
+
+<script setup lang="ts">
+import { StackedAdmonitions } from '@modrinth/ui'
+import { computed, ref, watch } from 'vue'
+
+import type { SharedInstanceUnavailableReason } from '@/helpers/install'
+import type { GameInstance } from '@/helpers/types'
+
+import InstanceAdmonitionsSharedInstanceStale from './instance-admonitions-shared-instance-stale.vue'
+import InstanceAdmonitionsSharedInstanceUnavailable from './instance-admonitions-shared-instance-unavailable.vue'
+import InstanceAdmonitionsSharedInstanceWrongAccount from './instance-admonitions-shared-instance-wrong-account.vue'
+import type { InstanceAdmonitionItem, SharedInstanceRole } from './types'
+
+defineOptions({
+	inheritAttrs: false,
+})
+
+const props = defineProps<{
+	instance: GameInstance
+	sharedInstanceUnavailableReason?: SharedInstanceUnavailableReason | null
+	sharedInstanceUnavailableManager?: string | null
+	sharedInstanceWrongAccount?: boolean
+	sharedInstanceExpectedUserId?: string | null
+	sharedInstanceRole?: SharedInstanceRole | null
+	sharedInstanceSignedOut?: boolean
+}>()
+
+const emit = defineEmits<{
+	published: []
+	delete: []
+}>()
+
+const sharedInstanceWrongAccount = computed(() => props.sharedInstanceWrongAccount ?? false)
+const displayedSharedInstanceUnavailableReason = computed<SharedInstanceUnavailableReason | null>(
+	() =>
+		props.instance.quarantined ? 'quarantined' : (props.sharedInstanceUnavailableReason ?? null),
+)
+const sharedInstanceUnavailableDismissed = ref(false)
+const showSharedInstancePublishAdmonition = computed(
+	() =>
+		!sharedInstanceWrongAccount.value &&
+		props.instance.install_stage === 'installed' &&
+		props.instance.shared_instance?.role === 'owner' &&
+		props.instance.shared_instance.status === 'stale',
+)
+
+const stackItems = computed<InstanceAdmonitionItem[]>(() => {
+	const items: InstanceAdmonitionItem[] = []
+
+	if (sharedInstanceWrongAccount.value) {
+		items.push({
+			id: 'shared-instance-wrong-account',
+			type: 'warning',
+			dismissible: false,
+			kind: 'shared-instance-wrong-account',
+		})
+	}
+
+	const unavailableReason = displayedSharedInstanceUnavailableReason.value
+	const sharedInstanceQuarantined = unavailableReason === 'quarantined'
+	if (
+		unavailableReason &&
+		(sharedInstanceQuarantined || !sharedInstanceUnavailableDismissed.value)
+	) {
+		items.push({
+			id: 'shared-instance-unavailable',
+			type: 'warning',
+			dismissible: !sharedInstanceQuarantined,
+			kind: 'shared-instance-unavailable',
+		})
+	}
+
+	if (showSharedInstancePublishAdmonition.value) {
+		items.push({
+			id: 'shared-instance-stale',
+			type: 'warning',
+			dismissible: false,
+			kind: 'shared-instance-stale',
+		})
+	}
+
+	return items
+})
+
+watch(
+	() => [props.instance.id, displayedSharedInstanceUnavailableReason.value],
+	() => {
+		sharedInstanceUnavailableDismissed.value = false
+	},
+)
+</script>
@@ -0,0 +1,69 @@
+import { defineMessages } from '@modrinth/ui'
+
+export const instanceAdmonitionsMessages = defineMessages({
+	sharedInstanceChangesHeader: {
+		id: 'app.instance.admonitions.shared-instance.changes-header',
+		defaultMessage: "Your changes haven't been shared yet",
+	},
+	sharedInstanceChangesBody: {
+		id: 'app.instance.admonitions.shared-instance.changes-body',
+		defaultMessage: "Your local instance is ahead of the users you've shared it with.",
+	},
+	sharedInstancePublishButton: {
+		id: 'app.instance.admonitions.shared-instance.publish-button',
+		defaultMessage: 'Push update',
+	},
+	sharedInstancePublishingButton: {
+		id: 'app.instance.admonitions.shared-instance.publishing-button',
+		defaultMessage: 'Pushing...',
+	},
+	sharedInstanceReviewingButton: {
+		id: 'app.instance.admonitions.shared-instance.reviewing-button',
+		defaultMessage: 'Reviewing...',
+	},
+	sharedInstanceReviewHeader: {
+		id: 'app.instance.admonitions.shared-instance.review-header',
+		defaultMessage: 'Review changes',
+	},
+	sharedInstanceReviewAdmonitionHeader: {
+		id: 'app.instance.admonitions.shared-instance.review-admonition-header',
+		defaultMessage: 'Push update',
+	},
+	sharedInstanceReviewDescription: {
+		id: 'app.instance.admonitions.shared-instance.review-description',
+		defaultMessage:
+			'Review the content changes that will be shared with everyone using this instance.',
+	},
+	sharedInstanceAddedLabel: {
+		id: 'app.instance.admonitions.shared-instance.added-label',
+		defaultMessage: 'Added',
+	},
+	sharedInstanceRemovedLabel: {
+		id: 'app.instance.admonitions.shared-instance.removed-label',
+		defaultMessage: 'Removed',
+	},
+	sharedInstanceWrongAccountHeader: {
+		id: 'app.instance.shared-instance-wrong-account.warning-header',
+		defaultMessage: 'You are using the wrong Modrinth account',
+	},
+	sharedInstanceSignedOutHeader: {
+		id: 'app.instance.shared-instance-wrong-account.signed-out-header',
+		defaultMessage: 'You need to sign in to Modrinth',
+	},
+	sharedInstanceWrongAccountSignInAs: {
+		id: 'app.instance.shared-instance-wrong-account.sign-in-as-label',
+		defaultMessage: 'Sign in as',
+	},
+	sharedInstanceWrongAccountUserBody: {
+		id: 'app.instance.shared-instance-wrong-account.user-admonition-body-v2',
+		defaultMessage: 'to receive updates for this shared instance.',
+	},
+	sharedInstanceWrongAccountOwnerBody: {
+		id: 'app.instance.shared-instance-wrong-account.owner-admonition-body-v2',
+		defaultMessage: "to manage this shared instance. You won't be able to push updates to users.",
+	},
+	sharedInstanceWrongAccountFallbackUsername: {
+		id: 'app.instance.shared-instance-wrong-account.fallback-username',
+		defaultMessage: 'the linked account',
+	},
+})
@@ -0,0 +1,66 @@
+<template>
+	<Admonition
+		type="info"
+		inline-actions
+		:header="formatMessage(messages.sharedInstanceChangesHeader)"
+	>
+		{{ 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>
+		</template>
+	</Admonition>
+
+	<SharedInstancePublishModal
+		ref="publishModal"
+		:instance="instance"
+		@published="emit('published')"
+		@state-change="publishState = $event"
+	/>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import SharedInstancePublishModal from '@/components/ui/shared-instances/SharedInstancePublishModal.vue'
+import type { GameInstance } from '@/helpers/types'
+
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
+
+defineProps<{
+	instance: GameInstance
+}>()
+
+const emit = defineEmits<{
+	published: []
+}>()
+
+const { formatMessage } = useVIntl()
+const publishModal = ref<InstanceType<typeof SharedInstancePublishModal>>()
+const publishState = ref<'idle' | 'reviewing' | 'publishing'>('idle')
+const isPublishing = computed(() => publishState.value === 'publishing')
+const isReviewingPublish = computed(() => publishState.value === 'reviewing')
+
+const isPublishButtonDisabled = computed(() => isPublishing.value || isReviewingPublish.value)
+
+function reviewChanges(e?: MouseEvent) {
+	publishModal.value?.show(e)
+}
+</script>
@@ -0,0 +1,51 @@
+<template>
+	<Admonition
+		type="warning"
+		:inline-actions="reason === 'quarantined'"
+		:header="formatMessage(sharedInstanceUnavailableTitleMessage(reason ?? null))"
+		:dismissible="dismissible"
+		@dismiss="emit('dismiss')"
+	>
+		{{ 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>
+		</template>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { TrashIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+
+import type { SharedInstanceUnavailableReason } from '@/helpers/install'
+import {
+	sharedInstanceUnavailableTitleMessage,
+	useSharedInstanceErrors,
+} from '@/helpers/shared-instance-errors'
+
+defineProps<{
+	reason?: SharedInstanceUnavailableReason | null
+	manager?: string | null
+	dismissible?: boolean
+}>()
+
+const emit = defineEmits<{
+	dismiss: []
+	delete: []
+}>()
+
+const { formatMessage } = useVIntl()
+const { formatSharedInstanceUnavailable } = useSharedInstanceErrors()
+
+const messages = defineMessages({
+	deleteInstance: {
+		id: 'instance.locked.delete-button',
+		defaultMessage: 'Delete instance',
+	},
+})
+</script>
@@ -0,0 +1,78 @@
+<template>
+	<Admonition type="warning" :header="formatMessage(headerMessage)">
+		<span class="flex flex-wrap items-center gap-x-1.5 gap-y-1">
+			<span>{{ formatMessage(messages.sharedInstanceWrongAccountSignInAs) }}</span>
+			<span
+				v-if="sharedInstanceExpectedUser"
+				class="inline-flex max-w-full min-w-0 items-center gap-1.5 align-middle font-semibold text-contrast"
+			>
+				<Avatar
+					:src="sharedInstanceExpectedUser.avatarUrl"
+					:alt="sharedInstanceExpectedUsername"
+					:tint-by="sharedInstanceExpectedUser.tintBy"
+					size="20px"
+					circle
+					no-shadow
+				/>
+				<span class="min-w-0 truncate">{{ sharedInstanceExpectedUsername }}</span>
+			</span>
+			<span v-else class="font-semibold">{{ sharedInstanceExpectedUsername }}</span>
+			<span>{{ formatMessage(bodyMessage) }}</span>
+		</span>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { Admonition, Avatar, useVIntl } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import { get_user } from '@/helpers/cache'
+
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
+import type { SharedInstanceRole } from './types'
+
+const props = defineProps<{
+	expectedUserId?: string | null
+	role?: SharedInstanceRole | null
+	signedOut?: boolean
+}>()
+
+const { formatMessage } = useVIntl()
+const expectedUserId = computed(() => props.expectedUserId ?? null)
+const expectedUserQuery = useQuery({
+	queryKey: computed(() => ['user', expectedUserId.value]),
+	queryFn: async () => {
+		if (!expectedUserId.value) return null
+
+		return await get_user(expectedUserId.value, 'bypass').catch(() => null)
+	},
+	enabled: () => !!expectedUserId.value,
+	staleTime: 30_000,
+})
+const sharedInstanceExpectedUser = computed(() => {
+	const user = expectedUserQuery.data.value
+	if (!user) return null
+
+	return {
+		username: user.username,
+		avatarUrl: user.avatar_url ?? undefined,
+		tintBy: user.id,
+	}
+})
+const sharedInstanceExpectedUsername = computed(
+	() =>
+		sharedInstanceExpectedUser.value?.username ||
+		formatMessage(messages.sharedInstanceWrongAccountFallbackUsername),
+)
+const headerMessage = computed(() =>
+	props.signedOut
+		? messages.sharedInstanceSignedOutHeader
+		: messages.sharedInstanceWrongAccountHeader,
+)
+const bodyMessage = computed(() =>
+	props.role === 'owner'
+		? messages.sharedInstanceWrongAccountOwnerBody
+		: messages.sharedInstanceWrongAccountUserBody,
+)
+</script>
@@ -0,0 +1,12 @@
+import type { StackedAdmonitionItem } from '@modrinth/ui'
+
+export type InstanceAdmonitionKind =
+	| 'shared-instance-stale'
+	| 'shared-instance-unavailable'
+	| 'shared-instance-wrong-account'
+
+export type InstanceAdmonitionItem = StackedAdmonitionItem & {
+	kind: InstanceAdmonitionKind
+}
+
+export type SharedInstanceRole = 'owner' | 'member'
@@ -7,7 +7,6 @@ import {
 	injectFilePicker,
 	injectNotificationManager,
 	InstallationSettingsLayout,
-	provideAppBackup,
 	provideInstallationSettings,
 	useDebugLogger,
 	useVIntl,
@@ -16,24 +15,25 @@ import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'

+import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
+import { useManagedContentPolicy } from '@/composables/instances/use-managed-content-policy'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version } from '@/helpers/cache'
 import {
-	install_duplicate_instance,
 	install_existing_instance,
 	install_pack_to_existing_instance,
-	installJobInstanceId,
 	wait_for_install_job,
 } from '@/helpers/install'
 import {
 	edit,
 	get_linked_modpack_info,
-	list,
+	unlink_shared_instance,
 	update_managed_modrinth_version,
 	update_repair_modrinth,
 } from '@/helpers/instance'
 import { get_loader_versions } from '@/helpers/metadata'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
+import { provideInstanceBackup } from '@/providers/instance-backup'
 import { injectInstanceSettings } from '@/providers/instance-settings'
 import { useTheming } from '@/store/state'

@@ -47,6 +47,7 @@ const debug = useDebugLogger('AppInstallationSettings')
 const themeStore = useTheming()

 const { instance, offline, isMinecraftServer, onUnlinked, closeModal } = injectInstanceSettings()
+const managedContentPolicy = useManagedContentPolicy(instance)
 const skipNonEssentialWarnings = computed(() =>
 	themeStore.getFeatureFlag('skip_non_essential_warnings'),
 )
@@ -111,9 +112,14 @@ debug('metadata queries configured', {
 const isModrinthLinkedModpack = computed(
 	() =>
 		instance.value.link?.type === 'modrinth_modpack' ||
-		instance.value.link?.type === 'server_project_modpack',
+		instance.value.link?.type === 'server_project_modpack' ||
+		(instance.value.link?.type === 'shared_instance' &&
+			!!instance.value.link.modpack_project_id &&
+			!!instance.value.link.modpack_version_id),
 )
 const isImportedModpack = computed(() => instance.value.link?.type === 'imported_modpack')
+const isSharedInstanceManagedModpack = managedContentPolicy.isManagedModpack
+const canUnlinkSharedInstance = managedContentPolicy.canUnlink

 const modpackInfoQuery = useQuery({
 	queryKey: computed(() => ['linkedModpackInfo', instance.value.id]),
@@ -124,12 +130,43 @@ const modpackInfo = modpackInfoQuery.data

 const repairing = ref(false)
 const reinstalling = ref(false)
+const unlinkingSharedInstance = ref(false)
+const installationSettingsBusy = computed(
+	() =>
+		instance.value.quarantined ||
+		instance.value.install_stage !== 'installed' ||
+		repairing.value ||
+		reinstalling.value ||
+		unlinkingSharedInstance.value ||
+		!!offline,
+)
+const installationSettingsBusyMessage = computed(() =>
+	instance.value.quarantined ? formatMessage(messages.locked) : null,
+)
+
+async function unlinkSharedInstance() {
+	unlinkingSharedInstance.value = true
+	try {
+		await unlink_shared_instance(instance.value.id)
+		await queryClient.invalidateQueries({ queryKey: ['sharedInstanceUsers', instance.value.id] })
+		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
+		onUnlinked()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		unlinkingSharedInstance.value = false
+	}
+}

 const messages = defineMessages({
 	loaderVersion: {
 		id: 'instance.settings.tabs.installation.loader-version',
 		defaultMessage: '{loader} version',
 	},
+	locked: {
+		id: 'instance.settings.tabs.installation.locked',
+		defaultMessage: 'Installation settings are unavailable while this instance is locked.',
+	},
 })

 function getManifest(loader: string) {
@@ -162,27 +199,7 @@ async function installLocalModpackFromPicker() {
 	return !!completed
 }

-provideAppBackup({
-	async createBackup() {
-		debug('createBackup: start', {
-			instanceId: instance.value.id,
-			instanceName: instance.value.name,
-		})
-		const allInstances = await list()
-		const prefix = `${instance.value.name} - Backup #`
-		const existingNums = allInstances
-			.filter((p) => p.name.startsWith(prefix))
-			.map((p) => parseInt(p.name.slice(prefix.length), 10))
-			.filter((n) => !isNaN(n))
-		const nextNum = existingNums.length > 0 ? Math.max(...existingNums) + 1 : 1
-		const job = await install_duplicate_instance(instance.value.id)
-		const newInstanceId = installJobInstanceId(job)
-		if (newInstanceId) {
-			await edit(newInstanceId, { name: `${prefix}${nextNum}` })
-		}
-		debug('createBackup: done', { newInstanceId, backupName: `${prefix}${nextNum}` })
-	},
-})
+provideInstanceBackup(instance)

 provideInstallationSettings({
 	closeSettings: closeModal,
@@ -208,14 +225,14 @@ provideInstallationSettings({
 		}
 		return rows
 	}),
-	isLinked: computed(() => isModrinthLinkedModpack.value || isImportedModpack.value),
-	isBusy: computed(
+	isLinked: computed(
 		() =>
-			instance.value.install_stage !== 'installed' ||
-			repairing.value ||
-			reinstalling.value ||
-			!!offline,
+			isModrinthLinkedModpack.value ||
+			isImportedModpack.value ||
+			isSharedInstanceManagedModpack.value,
 	),
+	isBusy: installationSettingsBusy,
+	busyMessage: installationSettingsBusyMessage,
 	skipNonEssentialWarnings,
 	modpack: computed(() => {
 		if (isImportedModpack.value && instance.value.link?.type === 'imported_modpack') {
@@ -452,14 +469,28 @@ provideInstallationSettings({
 	isServer: false,
 	isApp: true,
 	showModpackVersionActions: computed(
-		() => isModrinthLinkedModpack.value && !isMinecraftServer.value,
+		() =>
+			isModrinthLinkedModpack.value &&
+			!isMinecraftServer.value &&
+			!isSharedInstanceManagedModpack.value,
 	),
 	isLocalFile: isImportedModpack,
+	isManagedModpack: isSharedInstanceManagedModpack,
+	managedModpackWarning: managedContentPolicy.managedModpackWarning,
 	repairing,
 	reinstalling,
 })
 </script>

 <template>
-	<InstallationSettingsLayout />
+	<InstallationSettingsLayout>
+		<template #extra>
+			<SharedInstanceInstallationSettingsControls
+				:can-unlink="canUnlinkSharedInstance"
+				:busy="installationSettingsBusy"
+				:unlinking="unlinkingSharedInstance"
+				:unlink="unlinkSharedInstance"
+			/>
+		</template>
+	</InstallationSettingsLayout>
 </template>
@@ -0,0 +1,42 @@
+<template>
+	<div>
+		<SharedInstanceInstallationSettingsControls
+			can-unpublish
+			:busy="isBusy"
+			:unpublishing="unpublishing"
+			:unpublish="unpublishSharedInstance"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { injectNotificationManager } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
+import { unpublish_shared_instance } from '@/helpers/instance'
+import { injectInstanceSettings } from '@/providers/instance-settings'
+
+const { instance, offline, onUnlinked } = injectInstanceSettings()
+const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()
+const unpublishing = ref(false)
+const isBusy = computed(
+	() => instance.value.install_stage !== 'installed' || unpublishing.value || !!offline,
+)
+
+async function unpublishSharedInstance() {
+	unpublishing.value = true
+	try {
+		await unpublish_shared_instance(instance.value.id)
+		queryClient.setQueryData(['sharedInstanceUsers', instance.value.id], [])
+		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
+		onUnlinked()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		unpublishing.value = false
+	}
+}
+</script>
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
-import { ref } from 'vue'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-
-defineProps({
-	onFlowCancel: {
-		type: Function,
-		default() {
-			return async () => {}
-		},
-	},
-})
-
-const modal = ref()
-
-function show() {
-	modal.value.show()
-}
-
-function hide() {
-	modal.value.hide()
-}
-
-defineExpose({ show, hide })
-</script>
-<template>
-	<ModalWrapper ref="modal" @hide="onFlowCancel">
-		<template #title>
-			<span class="items-center gap-2 text-lg font-extrabold text-contrast">
-				<LogInIcon /> Sign in
-			</span>
-		</template>
-
-		<div class="flex justify-center gap-2">
-			<SpinnerIcon class="w-12 h-12 animate-spin" />
-		</div>
-		<p class="text-sm text-secondary">
-			Please sign in at the browser window that just opened to continue.
-		</p>
-	</ModalWrapper>
-</template>
@@ -4,8 +4,8 @@
 		:header="formatMessage(messages.installToPlay)"
 		:closable="true"
 		:on-hide="show_ads_window"
-		max-width="640px"
-		width="640px"
+		max-width="544px"
+		width="544px"
 	>
 		<div v-if="requiredContentProject" class="flex w-full flex-col gap-6">
 			<p class="m-0 text-primary">
@@ -423,8 +423,8 @@ const messages = defineMessages({
 		defaultMessage: 'Install anyway',
 	},
 	dontInstall: {
-		id: 'app.modal.install-to-play.dont-install',
-		defaultMessage: 'Dont install',
+		id: 'app.modal.install-to-play.external-files-dont-install',
+		defaultMessage: "Don't install",
 	},
 })

@@ -6,6 +6,7 @@ import {
 	CoffeeIcon,
 	InfoIcon,
 	MonitorIcon,
+	UsersIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
 import {
@@ -25,6 +26,7 @@ import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.v
 import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
 import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
+import SharingSettings from '@/components/ui/instance_settings/SharingSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import { get_project_v3 } from '@/helpers/cache'
 import { get_linked_modpack_info } from '@/helpers/instance'
@@ -97,6 +99,15 @@ const tabs = computed<TabbedModalTab[]>(() => [
 		icon: WrenchIcon,
 		content: InstallationSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'instance.settings.tabs.sharing',
+			defaultMessage: 'Sharing',
+		}),
+		icon: UsersIcon,
+		content: SharingSettings,
+		shown: props.instance.shared_instance?.role === 'owner' && !props.instance.quarantined,
+	},
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.window',
@@ -0,0 +1,265 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(authenticating ? messages.signingInHeader : messages.header)"
+		:on-hide="handleHide"
+		no-padding
+		max-width="548px"
+		width="100%"
+	>
+		<div v-if="authenticating === null" class="flex w-full flex-col gap-6 p-6">
+			<div class="flex flex-col gap-2 px-3">
+				<h2 class="m-0 text-xl font-semibold leading-7 text-contrast">
+					{{ formatMessage(messages.signInHeading) }}
+				</h2>
+				<p class="m-0 text-base leading-6 text-primary">
+					{{ formatMessage(messages.description) }}
+				</p>
+			</div>
+
+			<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>
+				</div>
+
+				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
+					<IntlFormatted :message-id="messages.supportPrompt">
+						<template #support="{ children }">
+							<button
+								type="button"
+								class="inline cursor-pointer border-0 bg-transparent p-0 text-base font-medium leading-6 text-blue hover:underline"
+								@click="openSupport"
+							>
+								<component :is="() => children" />
+							</button>
+						</template>
+					</IntlFormatted>
+				</p>
+			</div>
+		</div>
+
+		<div v-else class="flex w-full flex-col gap-6 p-6">
+			<div class="flex flex-col gap-2.5 px-3">
+				<div class="flex flex-col gap-2">
+					<h2 class="m-0 text-xl font-semibold leading-7 text-contrast">
+						{{ formatMessage(messages.continueInBrowserHeading) }}
+					</h2>
+					<p class="m-0 text-base leading-6 text-primary">
+						{{ formatMessage(messages.browserDescription) }}
+					</p>
+				</div>
+				<div class="flex items-center gap-1.5 text-primary">
+					<SpinnerIcon aria-hidden="true" class="h-5 w-5 shrink-0 animate-spin" />
+					<span class="text-base leading-6">
+						{{ formatMessage(messages.waitingForBrowser) }}
+					</span>
+				</div>
+			</div>
+
+			<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"
+							:disabled="reopeningBrowser"
+							@click="reopenBrowser"
+						>
+							<RefreshCwIcon aria-hidden="true" />
+							{{ formatMessage(messages.openBrowserAgainButton) }}
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
+					<IntlFormatted :message-id="messages.supportPrompt">
+						<template #support="{ children }">
+							<button
+								type="button"
+								class="inline cursor-pointer border-0 bg-transparent p-0 text-base font-medium leading-6 text-blue hover:underline"
+								@click="openSupport"
+							>
+								<component :is="() => children" />
+							</button>
+						</template>
+					</IntlFormatted>
+				</p>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { LogInIcon, RefreshCwIcon, SpinnerIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { ref } from 'vue'
+
+import { cancelLogin, type ModrinthAuthFlow } from '@/helpers/mr_auth'
+
+const props = defineProps<{
+	requestAuth: (flow: ModrinthAuthFlow) => Promise<boolean>
+}>()
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal>>()
+const authenticating = ref<ModrinthAuthFlow | null>(null)
+const reopeningBrowser = ref(false)
+let resolveShow: ((signedIn: boolean) => void) | undefined
+let authenticationId = 0
+let activeAuthentication: Promise<void> | undefined
+
+function show(event?: MouseEvent) {
+	resetAuthentication(true)
+	resolveShow?.(false)
+	const modalInstance = modal.value
+	if (!modalInstance) return Promise.resolve(false)
+
+	return new Promise<boolean>((resolve) => {
+		resolveShow = resolve
+		modalInstance.show(event)
+	})
+}
+
+function showSigningIn(flow: ModrinthAuthFlow = 'sign-in', event?: MouseEvent) {
+	const result = show(event)
+	authenticate(flow)
+	return result
+}
+
+function finish(signedIn: boolean) {
+	resolveShow?.(signedIn)
+	resolveShow = undefined
+}
+
+function authenticate(flow: ModrinthAuthFlow) {
+	const id = ++authenticationId
+	authenticating.value = flow
+
+	const authentication = (async () => {
+		try {
+			if ((await props.requestAuth(flow)) && authenticationId === id) {
+				authenticating.value = null
+				activeAuthentication = undefined
+				finish(true)
+				modal.value?.hide()
+			}
+		} finally {
+			if (authenticationId === id) {
+				authenticating.value = null
+				activeAuthentication = undefined
+			}
+		}
+	})()
+
+	activeAuthentication = authentication
+}
+
+async function reopenBrowser() {
+	const flow = authenticating.value
+	if (!flow || reopeningBrowser.value) return
+
+	reopeningBrowser.value = true
+	const previousAuthentication = activeAuthentication
+	++authenticationId
+
+	try {
+		await cancelLogin()
+		await previousAuthentication?.catch(() => undefined)
+		if (authenticating.value === flow) authenticate(flow)
+	} finally {
+		reopeningBrowser.value = false
+	}
+}
+
+function resetAuthentication(cancelActive: boolean) {
+	const wasAuthenticating = authenticating.value !== null
+	++authenticationId
+	activeAuthentication = undefined
+	authenticating.value = null
+	reopeningBrowser.value = false
+
+	if (cancelActive && wasAuthenticating) void cancelLogin()
+}
+
+function handleHide() {
+	resetAuthentication(true)
+	finish(false)
+}
+
+function openSupport() {
+	openUrl('https://support.modrinth.com')
+}
+
+const messages = defineMessages({
+	header: {
+		id: 'modal.modrinth-account-required.header',
+		defaultMessage: 'Account required',
+	},
+	signingInHeader: {
+		id: 'modal.modrinth-account-required.signing-in-header',
+		defaultMessage: 'Signing in',
+	},
+	signInHeading: {
+		id: 'modal.modrinth-account-required.sign-in-heading',
+		defaultMessage: 'Sign in to a Modrinth account',
+	},
+	description: {
+		id: 'modal.modrinth-account-required.description',
+		defaultMessage:
+			"You'll need to sign into your Modrinth account before you can use this feature.",
+	},
+	createAccountButton: {
+		id: 'modal.modrinth-account-required.create-account-button',
+		defaultMessage: 'Create an account',
+	},
+	signInButton: {
+		id: 'modal.modrinth-account-required.sign-in-button',
+		defaultMessage: 'Sign in to Modrinth',
+	},
+	continueInBrowserHeading: {
+		id: 'modal.modrinth-account-required.continue-in-browser-heading',
+		defaultMessage: 'Continue in your browser',
+	},
+	browserDescription: {
+		id: 'modal.modrinth-account-required.browser-description',
+		defaultMessage:
+			'A new tab opened to sign in. Complete the sign in there, then return to the app.',
+	},
+	waitingForBrowser: {
+		id: 'modal.modrinth-account-required.waiting-for-browser',
+		defaultMessage: 'Waiting for browser confirmation...',
+	},
+	cancelButton: {
+		id: 'modal.modrinth-account-required.cancel-button',
+		defaultMessage: 'Cancel',
+	},
+	openBrowserAgainButton: {
+		id: 'modal.modrinth-account-required.open-browser-again-button',
+		defaultMessage: 'Open browser again',
+	},
+	supportPrompt: {
+		id: 'modal.modrinth-account-required.support-prompt',
+		defaultMessage: 'Having trouble signing in? <support>Get support</support>',
+	},
+})
+
+defineExpose({ show, showSigningIn })
+</script>
@@ -8,6 +8,7 @@
 		:diffs="normalizedDiffs"
 		:version-date="versionDate"
 		:show-external-warnings="showExternalWarnings"
+		:external-warning-description="formatMessage(messages.externalWarningDescription)"
 		:confirm-label="formatMessage(commonMessages.updateButton)"
 		:confirm-icon="DownloadIcon"
 		:removed-label="formatMessage(messages.removed)"
@@ -76,10 +77,15 @@ const { formatMessage } = useVIntl()
 const { startInstallingServer, stopInstallingServer } = injectServerInstall()
 type UpdateCompleteCallback = () => void | Promise<void>

-defineProps<{
+const { showExternalWarnings } = defineProps<{
 	showExternalWarnings?: boolean
 }>()

+const emit = defineEmits<{
+	cancel: []
+	complete: []
+}>()
+
 const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
 const instance = ref<GameInstance | null>(null)
 const onUpdateComplete = ref<UpdateCompleteCallback>(() => {})
@@ -87,16 +93,16 @@ const diffs = ref<DependencyDiff[]>([])
 const modpackVersionId = ref<string | null>(null)
 const modpackVersion = ref<Version | null>(null)

-const normalizedDiffs = computed<ContentDiffItem[]>(() =>
-	diffs.value.map((diff) => ({
+const normalizedDiffs = computed<ContentDiffItem[]>(() => {
+	return diffs.value.map((diff) => ({
 		type: diff.type,
 		external: Boolean(diff.fileName && !diff.project),
 		projectName: diff.project?.title,
 		fileName: diff.fileName,
 		currentVersionName: diff.currentVersion?.version_number,
 		newVersionName: diff.newVersion?.version_number,
-	})),
-)
+	}))
+})

 const versionDate = computed(() =>
 	modpackVersion.value?.date_published
@@ -242,7 +248,6 @@ async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[
 }

 async function handleUpdate() {
-	hide()
 	const serverProjectId = instance.value?.link?.project_id
 	if (serverProjectId) startInstallingServer(serverProjectId)
 	try {
@@ -255,11 +260,12 @@ async function handleUpdate() {
 		console.error('Error updating instance:', error)
 	} finally {
 		if (serverProjectId) stopInstallingServer(serverProjectId)
+		emit('complete')
 	}
 }

 function handleDecline() {
-	hide()
+	emit('cancel')
 }

 function show(
@@ -293,12 +299,17 @@ const messages = defineMessages({
 	updateRequiredDescription: {
 		id: 'app.modal.update-to-play.update-required-description',
 		defaultMessage:
-			'An update is required to play {name}. Please update to the latest version to launch the game.',
+			'An update is required to play {name}. Please update to latest version to launch the game.',
 	},
 	removed: {
 		id: 'app.modal.update-to-play.removed',
 		defaultMessage: 'Removed',
 	},
+	externalWarningDescription: {
+		id: 'app.modal.update-to-play.server-modpack-unknown-files-description',
+		defaultMessage:
+			'This server modpack update contains files that aren’t published on Modrinth. We strongly recommend only installing files from sources you trust.',
+	},
 })

 const hasUpdate = computed(() => {
@@ -0,0 +1,100 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+		<p class="m-0 text-secondary">
+			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
+				<template #bold="{ children }">
+					<span class="font-medium text-contrast"><component :is="() => children" /></span>
+				</template>
+			</IntlFormatted>
+		</p>
+
+		<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>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { DownloadIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'app.instance.shared-instance-already-installed.header',
+		defaultMessage: 'Shared instance already installed',
+	},
+	body: {
+		id: 'app.instance.shared-instance-already-installed.body',
+		defaultMessage:
+			'This shared instance is already installed as <bold>{instanceName}</bold>. Are you sure you want to install another copy?',
+	},
+	instance: {
+		id: 'app.instance.shared-instance-already-installed.instance',
+		defaultMessage: 'Instance',
+	},
+	installAnyway: {
+		id: 'app.instance.shared-instance-already-installed.install-anyway',
+		defaultMessage: 'Install anyway',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'cancel' | 'go-to-instance' | 'install-anyway'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const instanceName = ref('')
+
+function show(name: string) {
+	instanceName.value = name
+	modal.value?.show()
+}
+
+function handleCancel() {
+	modal.value?.hide()
+	emit('cancel')
+}
+
+function handleGoToInstance() {
+	modal.value?.hide()
+	emit('go-to-instance')
+}
+
+function handleInstallAnyway() {
+	modal.value?.hide()
+	emit('install-anyway')
+}
+
+defineExpose({
+	show,
+})
+</script>
@@ -0,0 +1,195 @@
+<template>
+	<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>
+		</div>
+		<span class="text-primary">{{ formatMessage(messages.unpublishDescription) }}</span>
+	</div>
+	<div v-if="canUnlink" class="flex flex-col gap-2.5">
+		<span class="text-lg font-semibold text-contrast">{{
+			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>
+		</div>
+		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
+	</div>
+
+	<NewModal
+		ref="unpublishModal"
+		:header="formatMessage(messages.unpublishModalHeader)"
+		fade="warning"
+		max-width="500px"
+	>
+		<Admonition type="warning" :header="formatMessage(messages.unpublishModalAdmonitionHeader)">{{
+			formatMessage(messages.unpublishModalBody)
+		}}</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
+				>
+			</div></template
+		>
+	</NewModal>
+	<NewModal
+		ref="unlinkModal"
+		:header="formatMessage(messages.unlinkModalHeader)"
+		fade="warning"
+		max-width="500px"
+		:on-hide="() => backupCreator?.cancelBackup()"
+	>
+		<div class="flex flex-col gap-6">
+			<Admonition type="warning" :header="formatMessage(messages.unlinkModalAdmonitionHeader)">{{
+				formatMessage(messages.unlinkModalBody)
+			}}</Admonition>
+			<InlineBackupCreator
+				ref="backupCreator"
+				backup-name="Before unlinking shared instance"
+				@update:buttons-disabled="backupBusy = $event"
+			/>
+		</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
+				>
+			</div></template
+		>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon, UnlinkIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	InlineBackupCreator,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		canUnpublish?: boolean
+		canUnlink?: boolean
+		busy: boolean
+		unpublishing?: boolean
+		unlinking?: boolean
+		unpublish?: () => Promise<void>
+		unlink?: () => Promise<void>
+	}>(),
+	{
+		canUnpublish: false,
+		canUnlink: false,
+		unpublishing: false,
+		unlinking: false,
+		unpublish: undefined,
+		unlink: undefined,
+	},
+)
+const { formatMessage } = useVIntl()
+const unpublishModal = ref<InstanceType<typeof NewModal>>()
+const unlinkModal = ref<InstanceType<typeof NewModal>>()
+const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
+const backupBusy = ref(false)
+
+async function confirmUnpublish() {
+	unpublishModal.value?.hide()
+	await props.unpublish?.()
+}
+async function confirmUnlink() {
+	unlinkModal.value?.hide()
+	await props.unlink?.()
+}
+
+const messages = defineMessages({
+	title: {
+		id: 'installation-settings.shared-instance.title',
+		defaultMessage: 'Unpublish instance',
+	},
+	linkedTitle: {
+		id: 'installation-settings.shared-instance.linked-title',
+		defaultMessage: 'Linked shared instance',
+	},
+	unpublishButton: {
+		id: 'installation-settings.shared-instance.unpublish-button',
+		defaultMessage: 'Unpublish shared instance',
+	},
+	unpublishingButton: {
+		id: 'installation-settings.shared-instance.unpublishing-button',
+		defaultMessage: 'Unpublishing...',
+	},
+	unpublishDescription: {
+		id: 'installation-settings.shared-instance.unpublish-description',
+		defaultMessage:
+			'Remove this shared instance from Modrinth and stop sending updates to anyone using it. Your local instance will not be affected.',
+	},
+	unlinkButton: {
+		id: 'installation-settings.shared-instance.unlink-button',
+		defaultMessage: 'Unlink shared instance',
+	},
+	unlinkingButton: {
+		id: 'installation-settings.shared-instance.unlinking-button',
+		defaultMessage: 'Unlinking...',
+	},
+	unlinkDescription: {
+		id: 'installation-settings.shared-instance.unlink-description',
+		defaultMessage: 'Disconnect this local instance from future shared updates.',
+	},
+	unpublishModalHeader: {
+		id: 'installation-settings.unpublish-shared-instance.modal.header',
+		defaultMessage: 'Unpublish shared instance',
+	},
+	unpublishModalAdmonitionHeader: {
+		id: 'installation-settings.unpublish-shared-instance.modal.admonition-header',
+		defaultMessage: 'Unpublishing shared instance',
+	},
+	unpublishModalBody: {
+		id: 'installation-settings.unpublish-shared-instance.modal.admonition-body',
+		defaultMessage:
+			"This deletes the shared instance from Modrinth's servers. People using it in the Modrinth App will stop receiving updates, but your local instance and its content will stay on this device.",
+	},
+	unlinkModalHeader: {
+		id: 'installation-settings.unlink-shared-instance.modal.header',
+		defaultMessage: 'Unlink shared instance',
+	},
+	unlinkModalAdmonitionHeader: {
+		id: 'installation-settings.unlink-shared-instance.modal.admonition-header',
+		defaultMessage: 'Unlinking shared instance',
+	},
+	unlinkModalBody: {
+		id: 'installation-settings.unlink-shared-instance.modal.admonition-body',
+		defaultMessage:
+			'This only affects your local instance. Your installed content will stay on this device, and the shared instance and other people using it will not be affected.',
+	},
+})
+</script>
@@ -0,0 +1,189 @@
+<template>
+	<ContentDiffModal
+		ref="publishReviewModal"
+		:header="formatMessage(messages.header)"
+		:admonition-header="formatMessage(messages.admonitionHeader)"
+		:description="formatMessage(messages.description)"
+		:diffs="publishDiffs"
+		:confirm-label="formatMessage(messages.publishButton)"
+		:confirm-icon="UploadIcon"
+		:confirm-disabled="publishDiffs.length === 0 && selectedConfigPaths.length === 0"
+		:added-label="formatMessage(messages.addedLabel)"
+		:removed-label="formatMessage(messages.removedLabel)"
+		@confirm="publishChanges"
+		@cancel="finishReview"
+	>
+		<template #additional-content>
+			<Accordion
+				class="min-w-0"
+				overflow-visible
+				button-class="w-full bg-transparent m-0 p-0 border-none"
+			>
+				<template #title>
+					<FileCogIcon class="size-4 shrink-0 text-primary" />
+					<span class="text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.configTitle) }}
+					</span>
+				</template>
+				<div class="flex min-w-0 flex-col gap-3 pt-4">
+					<div class="max-h-[292px] overflow-y-auto rounded-[20px]">
+						<FileTreeSelect
+							v-model="selectedConfigPaths"
+							:items="configFileItems"
+							:show-size="false"
+							:show-modified="false"
+						/>
+					</div>
+				</div>
+			</Accordion>
+		</template>
+	</ContentDiffModal>
+</template>
+
+<script setup lang="ts">
+import { FileCogIcon, UploadIcon } from '@modrinth/assets'
+import {
+	Accordion,
+	type ContentDiffItem,
+	ContentDiffModal,
+	defineMessages,
+	FileTreeSelect,
+	type FileTreeSelectItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import {
+	getSharedInstanceUnavailableReason,
+	isSharedInstanceUnavailableError,
+} from '@/helpers/install'
+import { get_shared_instance_publish_preview, publish_shared_instance } from '@/helpers/instance'
+import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
+import type { GameInstance } from '@/helpers/types'
+
+type SharedInstancePublishState = 'idle' | 'reviewing' | 'publishing'
+
+const props = defineProps<{
+	instance: GameInstance
+}>()
+
+const emit = defineEmits<{
+	published: []
+	'state-change': [state: SharedInstancePublishState]
+}>()
+
+const { formatMessage } = useVIntl()
+const { notifySharedInstanceError, notifySharedInstanceUnavailable } = useSharedInstanceErrors()
+const publishReviewModal = ref<InstanceType<typeof ContentDiffModal>>()
+const publishDiffs = ref<ContentDiffItem[]>([])
+const configFilePaths = ref<string[]>([])
+const selectedConfigPaths = ref<string[]>([])
+const state = ref<SharedInstancePublishState>('idle')
+const configFileItems = computed<FileTreeSelectItem[]>(() =>
+	configFilePaths.value.map((path) => ({ path, type: 'file' })),
+)
+
+async function show(e?: MouseEvent) {
+	if (state.value !== 'idle') return
+
+	setState('reviewing')
+	let reviewOpened = false
+	try {
+		const preview = await get_shared_instance_publish_preview(props.instance.id)
+		if (!preview) {
+			notifySharedInstanceUnavailable()
+			emit('published')
+			return
+		}
+
+		publishDiffs.value = preview.diffs.map((diff) => ({
+			type: diff.type,
+			projectName: diff.projectName ?? undefined,
+			fileName: diff.fileName ?? undefined,
+			currentVersionName: diff.currentVersionName ?? undefined,
+			newVersionName: diff.newVersionName ?? undefined,
+			fileCount: diff.configFileCount ?? undefined,
+			disabled: diff.disabled,
+		}))
+		configFilePaths.value = preview.configFiles
+		selectedConfigPaths.value = []
+		if (!publishReviewModal.value) return
+
+		publishReviewModal.value.show(e)
+		reviewOpened = true
+	} catch (error) {
+		handlePublishError(error)
+	} finally {
+		if (!reviewOpened) finishReview()
+	}
+}
+
+async function publishChanges() {
+	if (state.value !== 'reviewing') return
+
+	setState('publishing')
+	try {
+		await publish_shared_instance(props.instance.id, selectedConfigPaths.value)
+		emit('published')
+	} catch (error) {
+		handlePublishError(error)
+	} finally {
+		setState('idle')
+	}
+}
+
+function finishReview() {
+	if (state.value === 'reviewing') {
+		setState('idle')
+	}
+}
+
+function handlePublishError(error: unknown) {
+	if (isSharedInstanceUnavailableError(error)) {
+		notifySharedInstanceUnavailable(getSharedInstanceUnavailableReason(error))
+		emit('published')
+		return
+	}
+
+	notifySharedInstanceError(error)
+}
+
+function setState(nextState: SharedInstancePublishState) {
+	state.value = nextState
+	emit('state-change', nextState)
+}
+
+const messages = defineMessages({
+	header: {
+		id: 'instance.shared-instance.publish-review.header',
+		defaultMessage: 'Review changes',
+	},
+	admonitionHeader: {
+		id: 'instance.shared-instance.publish-review.admonition-header',
+		defaultMessage: 'Push update to players',
+	},
+	description: {
+		id: 'instance.shared-instance.publish-review.description',
+		defaultMessage:
+			'Review the content changes and choose any config files to include in this update.',
+	},
+	publishButton: {
+		id: 'instance.shared-instance.publish-review.publish-button',
+		defaultMessage: 'Push update',
+	},
+	addedLabel: {
+		id: 'instance.shared-instance.publish-review.added-label',
+		defaultMessage: 'Added',
+	},
+	removedLabel: {
+		id: 'instance.shared-instance.publish-review.removed-label',
+		defaultMessage: 'Removed',
+	},
+	configTitle: {
+		id: 'instance.shared-instance.publish-review.config-title-v2',
+		defaultMessage: 'Select config files',
+	},
+})
+
+defineExpose({ show })
+</script>
@@ -0,0 +1,131 @@
+<template>
+	<ContentDiffModal
+		ref="modal"
+		:header="formatMessage(messages.updateToPlay)"
+		:admonition-header="formatMessage(messages.updateRequired)"
+		:description="instance ? formatMessage(messages.description, { name: instance.name }) : ''"
+		:diffs="diffs"
+		:confirm-label="formatMessage(commonMessages.updateButton)"
+		:confirm-icon="DownloadIcon"
+		:added-label="formatMessage(messages.addedLabel)"
+		:removed-label="formatMessage(messages.removedLabel)"
+		show-report-button
+		show-external-warnings
+		:external-warning-description="formatMessage(messages.externalWarningDescription)"
+		@confirm="update"
+		@cancel="emit('cancel')"
+		@report="emit('report', $event)"
+	/>
+</template>
+
+<script setup lang="ts">
+import { DownloadIcon } from '@modrinth/assets'
+import {
+	commonMessages,
+	type ContentDiffItem,
+	ContentDiffModal,
+	defineMessages,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import {
+	getSharedInstanceUnavailableReason,
+	install_update_shared_instance,
+	isSharedInstanceUnavailableError,
+	type SharedInstanceUnavailableReason,
+	type SharedInstanceUpdatePreview,
+	wait_for_install_job,
+} from '@/helpers/install'
+import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
+import type { GameInstance } from '@/helpers/types'
+
+type UpdateCompleteCallback = () => void | Promise<void>
+
+const emit = defineEmits<{
+	cancel: []
+	complete: []
+	report: [event?: MouseEvent]
+	sharedInstanceUnavailable: [reason: SharedInstanceUnavailableReason | null]
+}>()
+const modal = ref<InstanceType<typeof ContentDiffModal>>()
+const instance = ref<GameInstance | null>(null)
+const preview = ref<SharedInstanceUpdatePreview | null>(null)
+const onComplete = ref<UpdateCompleteCallback>(() => {})
+const { formatMessage } = useVIntl()
+const { notifySharedInstanceError } = useSharedInstanceErrors()
+const diffs = computed<ContentDiffItem[]>(
+	() =>
+		preview.value?.diffs.map((diff) => ({
+			type: diff.type,
+			projectName: diff.projectName ?? undefined,
+			fileName: diff.fileName ?? undefined,
+			currentVersionName: diff.currentVersionName ?? undefined,
+			newVersionName: diff.newVersionName ?? undefined,
+			fileCount: diff.configFileCount ?? undefined,
+			disabled: diff.disabled,
+			external: diff.type === 'added' && !diff.projectId && !!diff.fileName,
+		})) ?? [],
+)
+
+async function update() {
+	try {
+		if (instance.value) {
+			const job = await install_update_shared_instance(instance.value.id)
+			await wait_for_install_job(job.job_id)
+			await onComplete.value()
+		}
+	} catch (error) {
+		if (isSharedInstanceUnavailableError(error)) {
+			emit('sharedInstanceUnavailable', getSharedInstanceUnavailableReason(error))
+			return
+		}
+		notifySharedInstanceError(error)
+	} finally {
+		emit('complete')
+	}
+}
+
+function show(
+	instanceValue: GameInstance,
+	previewValue: SharedInstanceUpdatePreview,
+	callback: UpdateCompleteCallback = () => {},
+	event?: MouseEvent,
+) {
+	instance.value = instanceValue
+	preview.value = previewValue
+	onComplete.value = callback
+	modal.value?.show(event)
+}
+function hide() {
+	modal.value?.hide()
+}
+
+const messages = defineMessages({
+	updateToPlay: { id: 'app.modal.update-to-play.header', defaultMessage: 'Update to play' },
+	updateRequired: {
+		id: 'app.modal.update-to-play.update-required',
+		defaultMessage: 'Update required',
+	},
+	description: {
+		id: 'app.modal.update-to-play.update-required-description',
+		defaultMessage:
+			'An update is required to play {name}. Please update to latest version to launch the game.',
+	},
+	addedLabel: {
+		id: 'app.modal.update-to-play.shared-instance-added-label',
+		defaultMessage: 'Added',
+	},
+	removedLabel: {
+		id: 'app.modal.update-to-play.shared-instance-removed-label',
+		defaultMessage: 'Removed',
+	},
+	externalWarningDescription: {
+		id: 'app.modal.update-to-play.shared-instance-unknown-files-description',
+		defaultMessage:
+			'This shared instance update contains files that aren’t published on Modrinth. We strongly recommend only installing files from sources you trust.',
+	},
+})
+
+defineExpose({ show, hide })
+</script>
@@ -0,0 +1,533 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="
+			reportMode
+				? formatMessage(messages.reportSharedInstance)
+				: formatMessage(messages.installToPlay)
+		"
+		:closable="!submitLoading"
+		:on-hide="handleHide"
+		:max-width="reportMode ? '816px' : '544px'"
+		:width="reportMode ? '816px' : '544px'"
+		:no-padding="reportMode"
+		:scrollable="reportMode"
+	>
+		<div v-if="preview" class="flex w-full flex-col gap-6" :class="{ 'p-6 pb-2': reportMode }">
+			<Admonition v-if="reportMode" type="info">
+				<div class="flex flex-col gap-2">
+					<p class="m-0">
+						<IntlFormatted :message-id="messages.reportDescription">
+							<template #rules-link="{ children }">
+								<AutoLink class="text-link hover:underline" to="https://modrinth.com/legal/rules">
+									<component :is="() => children" />
+								</AutoLink>
+							</template>
+							<template #terms-link="{ children }">
+								<AutoLink class="text-link hover:underline" to="https://modrinth.com/legal/terms">
+									<component :is="() => children" />
+								</AutoLink>
+							</template>
+						</IntlFormatted>
+					</p>
+					<ul class="m-0 list-disc pl-5">
+						<li>
+							<IntlFormatted :message-id="messages.supportAndBugReports">
+								<template #support-link="{ children }">
+									<AutoLink class="text-link hover:underline" to="https://support.modrinth.com">
+										<component :is="() => children" />
+									</AutoLink>
+								</template>
+								<template #github-link="{ children }">
+									<AutoLink
+										class="text-link hover:underline"
+										to="https://github.com/modrinth/code/issues"
+									>
+										<component :is="() => children" />
+									</AutoLink>
+								</template>
+							</IntlFormatted>
+						</li>
+						<li>
+							<IntlFormatted :message-id="messages.legalClaims">
+								<template #copyright-link="{ children }">
+									<AutoLink
+										class="text-link hover:underline"
+										to="https://modrinth.com/legal/copyright"
+									>
+										<component :is="() => children" />
+									</AutoLink>
+								</template>
+							</IntlFormatted>
+						</li>
+					</ul>
+				</div>
+			</Admonition>
+			<p v-else class="m-0 text-primary">
+				{{ formatMessage(messages.inviteWarning) }}
+			</p>
+			<SharedInstanceInstallSummary
+				:preview="preview"
+				:heading="reportMode ? formatMessage(messages.contentYouAreReporting) : undefined"
+				@view-contents="openViewContents"
+			/>
+			<Transition
+				enter-active-class="overflow-hidden transition-all duration-200 ease-out"
+				enter-from-class="max-h-0 opacity-0"
+				enter-to-class="max-h-[400px] opacity-100"
+				leave-active-class="overflow-hidden transition-all duration-200 ease-in"
+				leave-from-class="max-h-[400px] opacity-100"
+				leave-to-class="max-h-0 opacity-0"
+			>
+				<div v-if="reportMode" class="flex flex-col gap-6">
+					<div class="flex flex-col gap-2.5">
+						<span class="font-semibold text-contrast">
+							{{ formatMessage(messages.reportReason) }}
+						</span>
+						<Combobox v-model="reportReason" :options="reportReasonOptions" />
+					</div>
+					<div class="flex flex-col gap-2.5">
+						<span class="font-semibold text-contrast">
+							{{ formatMessage(messages.additionalContext) }}
+						</span>
+						<MarkdownEditor
+							v-model="additionalContext"
+							:placeholder="formatMessage(messages.additionalContextPlaceholder)"
+							:on-image-upload="onImageUpload"
+							:min-height="120"
+							:max-height="240"
+						/>
+					</div>
+					<div v-if="reportOnly" class="flex flex-col gap-2">
+						<Checkbox v-model="deleteInstance" :label="formatMessage(messages.deleteInstance)" />
+					</div>
+				</div>
+			</Transition>
+			<Admonition
+				v-if="!reportMode && hasExternalFiles"
+				type="warning"
+				:header="formatMessage(messages.unknownFilesWarning)"
+			>
+				{{ formatMessage(messages.unknownFilesDescription) }}
+			</Admonition>
+
+			<div v-if="!reportMode && hasExternalFiles" class="relative w-full">
+				<div
+					ref="externalFileTable"
+					class="max-h-[242px] overflow-y-auto rounded-2xl"
+					@scroll="checkTableScrollState"
+				>
+					<Table
+						:columns="externalFileColumns"
+						:data="externalFileRows"
+						row-key="id"
+						virtualized
+						:virtual-row-height="48"
+						class="shadow-sm"
+					>
+						<template #cell-name="{ value }">
+							<span class="block truncate" :title="String(value)">{{ value }}</span>
+						</template>
+					</Table>
+				</div>
+				<Transition
+					enter-active-class="transition-all duration-200 ease-out"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-2"
+					leave-active-class="transition-all duration-200 ease-in"
+					leave-from-class="opacity-100 max-h-2"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<div
+						v-if="showTableTopFade"
+						class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-2 bg-gradient-to-b from-bg-raised to-transparent"
+					/>
+				</Transition>
+				<Transition
+					enter-active-class="transition-all duration-200 ease-out"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-2"
+					leave-active-class="transition-all duration-200 ease-in"
+					leave-from-class="opacity-100 max-h-2"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<div
+						v-if="showTableBottomFade"
+						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-2 bg-gradient-to-t from-bg-raised to-transparent"
+					/>
+				</Transition>
+			</div>
+
+			<p v-if="!reportMode && hasExternalFiles" class="m-0 text-primary">
+				{{ 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>
+				<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>
+					</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>
+					</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>
+			</div>
+		</template>
+	</NewModal>
+	<ModpackContentModal
+		ref="contentModal"
+		:header="formatMessage(messages.sharedInstanceContent)"
+		:modpack-name="preview?.name ?? ''"
+		:modpack-icon-url="preview?.iconUrl ?? undefined"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { BanIcon, DownloadIcon, ReportIcon, SendIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	AutoLink,
+	ButtonStyled,
+	Checkbox,
+	Combobox,
+	type ComboboxOption,
+	commonMessages,
+	defineMessages,
+	injectModrinthClient,
+	injectNotificationManager,
+	IntlFormatted,
+	MarkdownEditor,
+	ModpackContentModal,
+	NewModal,
+	Table,
+	type TableColumn,
+	useScrollIndicator,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, nextTick, ref } from 'vue'
+
+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 SharedInstanceInstallSummary from './shared-instance-install-summary.vue'
+import { useSharedInstancePreviewContent } from './use-shared-instance-preview-content'
+
+type ExternalFileColumn = 'name'
+type ExternalFileRow = {
+	id: string
+	name: string
+}
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const contentModal = ref<InstanceType<typeof ModpackContentModal>>()
+const externalFileTable = ref<HTMLElement | null>(null)
+const preview = ref<SharedInstanceInstallPreview | null>(null)
+const install = ref<() => void | Promise<void>>(() => {})
+const reportMode = ref(false)
+const reportOnly = ref(false)
+type ReportReason = 'malicious' | 'inappropriate' | 'spam'
+const reportReason = ref<ReportReason>('malicious')
+const additionalContext = ref('')
+const deleteInstance = ref(true)
+const submitLoading = ref(false)
+const uploadedImageIDs = ref<string[]>([])
+const emit = defineEmits<{
+	reported: [deleteInstance: boolean]
+}>()
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const { addNotification, handleError } = injectNotificationManager()
+const { load } = useSharedInstancePreviewContent()
+const {
+	showTopFade: showTableTopFade,
+	showBottomFade: showTableBottomFade,
+	checkScrollState: checkTableScrollState,
+	forceCheck: forceCheckTableScroll,
+} = useScrollIndicator(externalFileTable)
+const hasExternalFiles = computed(() => Boolean(preview.value?.externalFiles.length))
+const externalFileRows = computed<ExternalFileRow[]>(() =>
+	(preview.value?.externalFiles ?? [])
+		.map((file, index) => ({
+			id: `${index}-${file.fileType}-${file.fileName}`,
+			name: file.fileName,
+		}))
+		.sort((left, right) => left.name.localeCompare(right.name)),
+)
+const reportReasonOptions = computed<ComboboxOption<ReportReason>[]>(() => [
+	{ value: 'malicious', label: formatMessage(messages.maliciousReason) },
+	{ value: 'inappropriate', label: formatMessage(messages.inappropriateReason) },
+	{ value: 'spam', label: formatMessage(messages.spamReason) },
+])
+const canSubmitReport = computed(
+	() => Boolean(preview.value && additionalContext.value.trim()) && !submitLoading.value,
+)
+
+async function accept() {
+	hide()
+	try {
+		await install.value()
+	} catch (error) {
+		console.error('Failed to install shared instance:', error)
+	}
+}
+async function openViewContents() {
+	if (!preview.value) return
+	contentModal.value?.showLoading()
+	try {
+		contentModal.value?.show(await load(preview.value))
+	} catch (error) {
+		console.error('Failed to load shared instance contents:', error)
+		contentModal.value?.show([])
+	}
+}
+async function submitReport() {
+	const reportPreview = preview.value
+	const body = additionalContext.value.trim()
+	if (!reportPreview || !body || submitLoading.value) return
+
+	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 shouldDeleteInstance = reportOnly.value && deleteInstance.value
+		hide()
+		addNotification({
+			type: 'success',
+			title: formatMessage(messages.reportSubmitted),
+		})
+		emit('reported', shouldDeleteInstance)
+	} catch (error) {
+		handleError(toError(error))
+	} finally {
+		submitLoading.value = false
+	}
+}
+async function onImageUpload(file: File) {
+	const imageExtensionByType: Partial<Record<string, Labrinth.Images.v3.ImageExtension>> = {
+		'image/gif': 'gif',
+		'image/jpeg': 'jpeg',
+		'image/png': 'png',
+		'image/webp': 'webp',
+	}
+	const extension = imageExtensionByType[file.type]
+	if (!extension) {
+		throw new Error(formatMessage(messages.invalidImageType))
+	}
+	if (file.size > 1024 * 1024) {
+		throw new Error(formatMessage(messages.imageTooLarge))
+	}
+
+	const image = await client.labrinth.images_v3.uploadImage(file, extension, {
+		context: 'report',
+	}).promise
+	uploadedImageIDs.value.push(image.id)
+	return image.url
+}
+function handleCancel() {
+	if (reportMode.value && !reportOnly.value) {
+		reportMode.value = false
+		void nextTick(() => forceCheckTableScroll())
+		return
+	}
+	hide()
+}
+function handleHide() {
+	resetReportState()
+	show_ads_window()
+}
+function resetReportState() {
+	reportMode.value = false
+	reportOnly.value = false
+	reportReason.value = 'malicious'
+	additionalContext.value = ''
+	deleteInstance.value = true
+	submitLoading.value = false
+	uploadedImageIDs.value = []
+}
+function show(
+	previewValue: SharedInstanceInstallPreview,
+	installValue: () => void | Promise<void>,
+	event?: MouseEvent,
+) {
+	resetReportState()
+	install.value = installValue
+	showPreview(previewValue, event)
+}
+function showReport(previewValue: SharedInstanceInstallPreview, event?: MouseEvent) {
+	resetReportState()
+	reportMode.value = true
+	reportOnly.value = true
+	install.value = () => {}
+	showPreview(previewValue, event)
+}
+function showPreview(previewValue: SharedInstanceInstallPreview, event?: MouseEvent) {
+	preview.value = previewValue
+	hide_ads_window()
+	modal.value?.show(event)
+	void nextTick(() => forceCheckTableScroll())
+}
+function hide() {
+	modal.value?.hide()
+}
+
+const messages = defineMessages({
+	installToPlay: { id: 'app.modal.install-to-play.header', defaultMessage: 'Install to play' },
+	reportSharedInstance: {
+		id: 'app.modal.install-to-play.report-shared-instance-header',
+		defaultMessage: 'Report shared instance',
+	},
+	reportSubmitted: {
+		id: 'app.modal.install-to-play.report-submitted',
+		defaultMessage: 'Report submitted',
+	},
+	sharedInstanceContent: {
+		id: 'app.modal.install-to-play.shared-instance-content',
+		defaultMessage: 'Shared instance content',
+	},
+	inviteWarning: {
+		id: 'app.modal.install-to-play.invite-warning',
+		defaultMessage:
+			'This invite was created by another Modrinth user, not Modrinth. Only accept invites from people you trust.',
+	},
+	reportDescription: {
+		id: 'app.modal.install-to-play.report-description',
+		defaultMessage:
+			'Use this form to report instances that may violate our <rules-link>Rules</rules-link> or <terms-link>Terms of Use</terms-link>.',
+	},
+	supportAndBugReports: {
+		id: 'app.modal.install-to-play.report-support-and-bugs',
+		defaultMessage:
+			'For support requests, contact our <support-link>support team</support-link>. For bug reports, open a <github-link>GitHub issue</github-link>.',
+	},
+	legalClaims: {
+		id: 'app.modal.install-to-play.report-legal-claims',
+		defaultMessage:
+			'For DMCA notices or other legal claims, see our <copyright-link>Copyright Policy</copyright-link>.',
+	},
+	contentYouAreReporting: {
+		id: 'app.modal.install-to-play.content-you-are-reporting',
+		defaultMessage: 'Instance you’re reporting',
+	},
+	reportReason: {
+		id: 'app.modal.install-to-play.report-reason',
+		defaultMessage: 'Which rule does this instance violate?',
+	},
+	maliciousReason: {
+		id: 'app.modal.install-to-play.report-reason.malicious',
+		defaultMessage: 'Malicious',
+	},
+	inappropriateReason: {
+		id: 'app.modal.install-to-play.report-reason.inappropriate',
+		defaultMessage: 'Inappropriate',
+	},
+	spamReason: {
+		id: 'app.modal.install-to-play.report-reason.spam',
+		defaultMessage: 'Spam',
+	},
+	additionalContext: {
+		id: 'app.modal.install-to-play.additional-context',
+		defaultMessage: 'Additional context',
+	},
+	additionalContextPlaceholder: {
+		id: 'app.modal.install-to-play.additional-context-placeholder',
+		defaultMessage: 'Include links and images if possible and relevant',
+	},
+	invalidImageType: {
+		id: 'app.modal.install-to-play.report-image-invalid-type',
+		defaultMessage: 'File is not an accepted image type',
+	},
+	imageTooLarge: {
+		id: 'app.modal.install-to-play.report-image-too-large',
+		defaultMessage: 'File exceeds the 1 MiB size limit',
+	},
+	deleteInstance: {
+		id: 'app.modal.install-to-play.delete-instance',
+		defaultMessage: 'Delete instance',
+	},
+	unknownFilesWarning: {
+		id: 'app.modal.install-to-play.unknown-files-warning',
+		defaultMessage: 'Unknown files warning',
+	},
+	unknownFilesDescription: {
+		id: 'app.modal.install-to-play.shared-instance-unknown-files-description',
+		defaultMessage:
+			'This shared instance contains files that aren’t published on Modrinth. We strongly recommend only installing files from sources you trust.',
+	},
+	unrecognizedFiles: {
+		id: 'app.modal.install-to-play.unrecognized-files',
+		defaultMessage: 'Unrecognized files',
+	},
+	reviewedFiles: {
+		id: 'app.modal.install-to-play.reviewed-files',
+		defaultMessage:
+			'A file is only reviewed if it’s published to Modrinth, regardless of its file format (including .mrpack).',
+	},
+	installAnyway: {
+		id: 'app.modal.install-to-play.install-anyway',
+		defaultMessage: 'Install anyway',
+	},
+	dontInstall: {
+		id: 'app.modal.install-to-play.external-files-dont-install',
+		defaultMessage: "Don't install",
+	},
+	installButton: { id: 'app.modal.install-to-play.install-button', defaultMessage: 'Install' },
+})
+
+const externalFileColumns = computed<TableColumn<ExternalFileColumn>[]>(() => [
+	{
+		key: 'name',
+		label: formatMessage(messages.unrecognizedFiles),
+		cellClass: '!h-12',
+	},
+])
+
+defineExpose({ show, showReport, hide })
+</script>
@@ -0,0 +1,60 @@
+<template>
+	<div class="flex flex-col gap-2.5">
+		<div class="flex items-center justify-between">
+			<span class="font-semibold text-contrast">{{
+				heading ?? formatMessage(messages.sharedInstance)
+			}}</span>
+			<ButtonStyled type="transparent">
+				<button @click="emit('viewContents')">
+					<EyeIcon />
+					{{ formatMessage(messages.viewContents) }}
+				</button>
+			</ButtonStyled>
+		</div>
+		<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
+			<Avatar
+				:src="preview.iconUrl"
+				:alt="preview.name"
+				size="56px"
+				no-shadow
+				class="!rounded-2xl"
+			/>
+			<div class="flex min-w-0 flex-col gap-0.5">
+				<span class="truncate font-semibold text-contrast">{{ preview.name }}</span>
+				<span class="truncate text-sm font-medium text-secondary">
+					{{ loaderDisplay }} {{ preview.gameVersion }}
+					<template v-if="preview.modCount">
+						· {{ formatMessage(messages.modCount, { count: preview.modCount }) }}
+					</template>
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { EyeIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, defineMessages, formatLoader, useVIntl } from '@modrinth/ui'
+import { computed, toRefs } from 'vue'
+
+import type { SharedInstanceInstallPreview } from '@/helpers/install'
+
+const props = defineProps<{ preview: SharedInstanceInstallPreview; heading?: string }>()
+const { preview, heading } = toRefs(props)
+const emit = defineEmits<{ viewContents: [] }>()
+const { formatMessage } = useVIntl()
+const loaderDisplay = computed(() =>
+	preview.value.loader ? formatLoader(formatMessage, preview.value.loader) : '',
+)
+const messages = defineMessages({
+	sharedInstance: {
+		id: 'app.modal.install-to-play.shared-instance',
+		defaultMessage: 'Shared instance',
+	},
+	viewContents: { id: 'app.modal.install-to-play.view-contents', defaultMessage: 'View contents' },
+	modCount: {
+		id: 'app.modal.install-to-play.mod-count',
+		defaultMessage: '{count, plural, one {# mod} other {# mods}}',
+	},
+})
+</script>
@@ -0,0 +1,135 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { ContentItem } from '@modrinth/ui'
+
+import { get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
+import type { SharedInstanceInstallPreview } from '@/helpers/install'
+
+type VersionDependency = Labrinth.Versions.v2.Dependency & { version_id?: string }
+
+export function useSharedInstancePreviewContent() {
+	async function load(preview: SharedInstanceInstallPreview): Promise<ContentItem[]> {
+		return [
+			...preview.externalFiles.map(externalFileContentItem),
+			...(await modpackContentItems(preview)),
+			...(await contentItemsFromVersionIds(
+				preview.contentVersionIds.filter((id) => id !== preview.modpackVersionId),
+			)),
+		]
+	}
+
+	async function modpackContentItems(preview: SharedInstanceInstallPreview) {
+		if (!preview.modpackVersionId) return []
+		const version = await get_version(preview.modpackVersionId, 'must_revalidate')
+		return await contentItemsFromDependencies(version?.dependencies ?? [])
+	}
+
+	async function contentItemsFromDependencies(dependencies: Labrinth.Versions.v2.Dependency[]) {
+		const deps = dependencies as VersionDependency[]
+		const projectIds = unique(deps.map((dep) => dep.project_id).filter((id): id is string => !!id))
+		const versionIds = unique(deps.map((dep) => dep.version_id).filter((id): id is string => !!id))
+		const [projects, versions]: [Labrinth.Projects.v2.Project[], Labrinth.Versions.v2.Version[]] =
+			await Promise.all([
+				projectIds.length ? get_project_many(projectIds, 'must_revalidate') : [],
+				versionIds.length ? get_version_many(versionIds, 'must_revalidate') : [],
+			])
+		const projectMap = new Map(projects.map((project) => [project.id, project]))
+		const versionMap = new Map(versions.map((version) => [version.id, version]))
+
+		return deps.map((dependency): ContentItem => {
+			const project = dependency.project_id ? projectMap.get(dependency.project_id) : null
+			const version = dependency.version_id ? versionMap.get(dependency.version_id) : null
+			const fileName =
+				version?.files?.[0]?.filename ?? dependency.file_name ?? project?.title ?? 'Unknown'
+			return contentItem(
+				version?.id ?? project?.id ?? fileName,
+				fileName,
+				project,
+				version,
+				!project && !version,
+				dependency.project_id ?? fileName,
+				dependency.file_name ?? fileName,
+			)
+		})
+	}
+
+	async function contentItemsFromVersionIds(versionIds: string[]) {
+		const versions: Labrinth.Versions.v2.Version[] = versionIds.length
+			? await get_version_many(unique(versionIds), 'must_revalidate')
+			: []
+		const projectIds = unique(versions.map((version) => version.project_id).filter(Boolean))
+		const projects: Labrinth.Projects.v2.Project[] = projectIds.length
+			? await get_project_many(projectIds, 'must_revalidate')
+			: []
+		const projectMap = new Map(projects.map((project) => [project.id, project]))
+		return versions.map((version): ContentItem => {
+			const project = projectMap.get(version.project_id)
+			const fileName = version.files?.[0]?.filename ?? project?.title ?? version.name ?? 'Unknown'
+			return contentItem(
+				version.id,
+				fileName,
+				project,
+				version,
+				false,
+				version.project_id,
+				version.name,
+			)
+		})
+	}
+
+	return { load }
+}
+
+function contentItem(
+	id: string,
+	fileName: string,
+	project?: Labrinth.Projects.v2.Project | null,
+	version?: Labrinth.Versions.v2.Version | null,
+	external = false,
+	fallbackProjectId = id,
+	fallbackTitle = fileName,
+	projectType = project?.project_type ?? 'mod',
+): ContentItem {
+	return {
+		id,
+		file_name: fileName,
+		project_type: projectType,
+		has_update: false,
+		update_version_id: null,
+		external,
+		project: {
+			id: project?.id ?? fallbackProjectId,
+			slug: project?.slug ?? fallbackProjectId,
+			title: project?.title ?? fallbackTitle,
+			icon_url: project?.icon_url ?? undefined,
+		},
+		...(version
+			? {
+					version: {
+						id: version.id,
+						file_name: fileName,
+						version_number: version.version_number ?? undefined,
+						date_published: version.date_published ?? undefined,
+					},
+				}
+			: {}),
+	}
+}
+
+function externalFileContentItem(
+	file: SharedInstanceInstallPreview['externalFiles'][number],
+): ContentItem {
+	return contentItem(
+		`external:${file.fileType}:${file.fileName}`,
+		file.fileName,
+		null,
+		null,
+		true,
+		file.fileName,
+		file.fileName,
+		file.fileType,
+	)
+}
+
+function unique<T>(values: T[]) {
+	return Array.from(new Set(values))
+}
@@ -0,0 +1,46 @@
+<template>
+	<ModrinthAccountRequiredModal ref="accountRequiredModal" :request-auth="requestAuth" />
+	<SharedInstanceInstallModal ref="installModal" />
+	<SharedInstanceAlreadyInstalledModal
+		ref="alreadyInstalledModal"
+		@cancel="handleAlreadyInstalledCancel"
+		@go-to-instance="handleAlreadyInstalledGoToInstance"
+		@install-anyway="handleAlreadyInstalledInstallAnyway"
+	/>
+</template>
+
+<script setup lang="ts">
+import { injectAuth } from '@modrinth/ui'
+import { nextTick, ref } from 'vue'
+
+import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue'
+import SharedInstanceInstallModal from '@/components/ui/shared-instances/shared-instance-install-modal/index.vue'
+import SharedInstanceAlreadyInstalledModal from '@/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue'
+import type { ModrinthAuthFlow } from '@/helpers/mr_auth'
+
+import type { SharedInstanceInviteHandler } from './shared-instance-invite-types'
+import { useSharedInstanceInviteHandler } from './use-shared-instance-invite-handler'
+
+const auth = injectAuth()
+const installModal = ref<InstanceType<typeof SharedInstanceInstallModal>>()
+const alreadyInstalledModal = ref<InstanceType<typeof SharedInstanceAlreadyInstalledModal>>()
+const accountRequiredModal = ref<InstanceType<typeof ModrinthAccountRequiredModal>>()
+const {
+	handleNotification,
+	installFromInviteId,
+	handleAlreadyInstalledCancel,
+	handleAlreadyInstalledGoToInstance,
+	handleAlreadyInstalledInstallAnyway,
+} = useSharedInstanceInviteHandler(installModal, alreadyInstalledModal, accountRequiredModal)
+
+async function requestAuth(flow: ModrinthAuthFlow) {
+	await auth.requestSignIn('', flow, { showModal: false })
+	await nextTick()
+	return !!auth.session_token.value
+}
+
+defineExpose<SharedInstanceInviteHandler>({
+	handleNotification,
+	installFromInviteId,
+})
+</script>
@@ -0,0 +1,29 @@
+import type {
+	AppNotification,
+	SharedInstanceInvite,
+	SharedInstanceInviteNotificationBody,
+} from './shared-instance-invite-types'
+
+function optionalString(value: unknown) {
+	return typeof value === 'string' ? value : null
+}
+
+export function parseSharedInstanceInviteNotification(
+	notification: AppNotification,
+): SharedInstanceInvite | null {
+	if (notification.body?.type !== 'shared_instance_invite') return null
+
+	const body = notification.body as SharedInstanceInviteNotificationBody
+	const sharedInstanceId = optionalString(body.shared_instance_id)
+	const sharedInstanceName = optionalString(body.shared_instance_name)
+	if (!sharedInstanceId || !sharedInstanceName) return null
+
+	return {
+		sharedInstanceId,
+		sharedInstanceName,
+		invitedById: optionalString(body.invited_by),
+		invitedByUsername: optionalString(body.invited_by_username),
+		invitedByAvatarUrl: optionalString(body.invited_by_avatar_url),
+		instanceIconUrl: optionalString(body.shared_instance_icon),
+	}
+}
@@ -0,0 +1,29 @@
+export type SharedInstanceInviteNotificationBody = {
+	type: 'shared_instance_invite'
+	shared_instance_id?: unknown
+	shared_instance_name?: unknown
+	invited_by?: unknown
+	invited_by_username?: unknown
+	invited_by_avatar_url?: unknown
+	shared_instance_icon?: unknown
+}
+
+export type AppNotification = {
+	id: string | number
+	read?: boolean
+	body?: { type?: unknown } & Record<string, unknown>
+}
+
+export type SharedInstanceInvite = {
+	sharedInstanceId: string
+	sharedInstanceName: string
+	invitedById: string | null
+	invitedByUsername: string | null
+	invitedByAvatarUrl: string | null
+	instanceIconUrl: string | null
+}
+
+export type SharedInstanceInviteHandler = {
+	handleNotification(notification: AppNotification): Promise<boolean>
+	installFromInviteId(inviteId: string): Promise<void>
+}
@@ -0,0 +1,252 @@
+import { ModrinthApiError } from '@modrinth/api-client'
+import {
+	injectAuth,
+	injectModrinthClient,
+	injectNotificationManager,
+	injectPopupNotificationManager,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { type Ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { config } from '@/config'
+import { get_user } from '@/helpers/cache'
+import { toError } from '@/helpers/errors'
+import {
+	install_accept_shared_instance_invite,
+	install_get_shared_instance_preview,
+	install_shared_instance,
+} from '@/helpers/install'
+import { list } from '@/helpers/instance'
+import { useTheming } from '@/store/state'
+
+import { parseSharedInstanceInviteNotification } from './shared-instance-invite-parser'
+import type { AppNotification, SharedInstanceInvite } from './shared-instance-invite-types'
+
+type InstallModal = {
+	show(
+		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
+		install: () => Promise<void>,
+	): void
+}
+
+type AccountRequiredModal = {
+	show(event?: MouseEvent): Promise<boolean>
+}
+
+type AlreadyInstalledModal = {
+	show(instanceName: string): void
+}
+
+export function useSharedInstanceInviteHandler(
+	installModal: Ref<InstallModal | undefined>,
+	alreadyInstalledModal: Ref<AlreadyInstalledModal | undefined>,
+	accountRequiredModal: Ref<AccountRequiredModal | undefined>,
+) {
+	const auth = injectAuth()
+	const client = injectModrinthClient()
+	const { handleError } = injectNotificationManager()
+	const { addPopupNotification } = injectPopupNotificationManager()
+	const queryClient = useQueryClient()
+	const router = useRouter()
+	const themeStore = useTheming()
+	const displayedNotifications = new Set<string | number>()
+	let pendingAlreadyInstalled:
+		| {
+				instanceId: string
+				preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>
+				install: () => Promise<void>
+				onGoToInstance?: () => void | Promise<void>
+		  }
+		| undefined
+
+	async function markNotificationRead(notification: AppNotification) {
+		try {
+			await client.labrinth.notifications_v2.markAsRead(String(notification.id))
+		} catch (error) {
+			if (error instanceof ModrinthApiError && error.statusCode === 404) return
+			throw error
+		}
+	}
+
+	async function resolveInvite(invite: SharedInstanceInvite) {
+		const [invitedBy, sharedInstance] = await Promise.all([
+			!invite.invitedByUsername && invite.invitedById
+				? get_user(invite.invitedById, 'bypass').catch(() => null)
+				: null,
+			client.sharedinstances.instances_v1.get(invite.sharedInstanceId).catch(() => null),
+		])
+
+		return {
+			...invite,
+			invitedByUsername: invite.invitedByUsername ?? invitedBy?.username ?? null,
+			invitedByAvatarUrl: invite.invitedByAvatarUrl ?? invitedBy?.avatar_url ?? null,
+			instanceIconUrl: sharedInstance ? sharedInstance.icon : invite.instanceIconUrl,
+		}
+	}
+
+	function showInstall(
+		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
+		install: () => Promise<void>,
+	) {
+		if (!installModal.value) throw new Error('Shared instance install modal is not available.')
+		installModal.value.show(preview, install)
+	}
+
+	async function showInstallOrAlreadyInstalled(
+		sharedInstanceId: string,
+		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
+		install: () => Promise<void>,
+		onGoToInstance?: () => void | Promise<void>,
+	) {
+		const existingInstance = (await list()).find(
+			(instance) => instance.shared_instance?.id === sharedInstanceId,
+		)
+
+		if (!existingInstance || themeStore.getFeatureFlag('skip_non_essential_warnings')) {
+			showInstall(preview, install)
+			return
+		}
+
+		if (!alreadyInstalledModal.value) {
+			throw new Error('Shared instance already installed modal is not available.')
+		}
+
+		pendingAlreadyInstalled = {
+			instanceId: existingInstance.id,
+			preview,
+			install,
+			onGoToInstance,
+		}
+		alreadyInstalledModal.value.show(existingInstance.name)
+	}
+
+	function handleAlreadyInstalledCancel() {
+		pendingAlreadyInstalled = undefined
+	}
+
+	async function handleAlreadyInstalledGoToInstance() {
+		const pending = pendingAlreadyInstalled
+		pendingAlreadyInstalled = undefined
+		if (!pending) return
+
+		if (pending.onGoToInstance) {
+			try {
+				await pending.onGoToInstance()
+			} catch (error) {
+				handleError(toError(error))
+			}
+		}
+		await router.push(`/instance/${encodeURIComponent(pending.instanceId)}/`)
+	}
+
+	function handleAlreadyInstalledInstallAnyway() {
+		const pending = pendingAlreadyInstalled
+		pendingAlreadyInstalled = undefined
+		if (!pending) return
+		showInstall(pending.preview, pending.install)
+	}
+
+	async function acceptNotification(notification: AppNotification, invite: SharedInstanceInvite) {
+		try {
+			const preview = await install_get_shared_instance_preview(
+				invite.sharedInstanceId,
+				invite.sharedInstanceName,
+			)
+			if (invite.instanceIconUrl) preview.iconUrl = invite.instanceIconUrl
+
+			await showInstallOrAlreadyInstalled(
+				invite.sharedInstanceId,
+				preview,
+				async () => {
+					await install_shared_instance(
+						invite.sharedInstanceId,
+						invite.sharedInstanceName,
+						invite.invitedById,
+						null,
+						null,
+						invite.instanceIconUrl,
+					)
+					await markNotificationRead(notification)
+					await queryClient.invalidateQueries({ queryKey: ['instances'] })
+				},
+				() => markNotificationRead(notification),
+			)
+		} catch (error) {
+			handleError(toError(error))
+		}
+	}
+
+	async function handleNotification(notification: AppNotification) {
+		const parsedInvite = parseSharedInstanceInviteNotification(notification)
+		if (!parsedInvite) return false
+		if (displayedNotifications.has(notification.id)) return true
+
+		displayedNotifications.add(notification.id)
+		const invite = await resolveInvite(parsedInvite)
+		addPopupNotification({
+			title: invite.sharedInstanceName,
+			autoCloseMs: null,
+			toast: {
+				type: 'instance-invite',
+				actorName: invite.invitedByUsername,
+				actorAvatarUrl: invite.invitedByAvatarUrl ?? undefined,
+				entityName: invite.sharedInstanceName,
+				entityIconUrl: invite.instanceIconUrl ?? undefined,
+				onAccept: () => acceptNotification(notification, invite),
+				onDecline: () =>
+					markNotificationRead(notification).catch((error) => handleError(toError(error))),
+				onOpenActor: () => {
+					if (invite.invitedByUsername) {
+						openUrl(`${config.siteUrl}/user/${encodeURIComponent(invite.invitedByUsername)}`)
+					}
+				},
+			},
+		})
+		return true
+	}
+
+	async function requireAccount() {
+		if (!auth.isReady?.value) {
+			await new Promise<void>((resolve) => {
+				const stop = watch(auth.isReady!, (ready) => {
+					if (ready) {
+						stop()
+						resolve()
+					}
+				})
+			})
+		}
+		if (auth.session_token.value) return true
+		return (await accountRequiredModal.value?.show()) ?? false
+	}
+
+	async function installFromInviteId(inviteId: string) {
+		try {
+			if (!(await requireAccount())) return
+			const invite = await install_accept_shared_instance_invite(inviteId)
+			await showInstallOrAlreadyInstalled(invite.sharedInstanceId, invite.preview, async () => {
+				await install_shared_instance(
+					invite.sharedInstanceId,
+					invite.preview.name,
+					invite.managerId,
+					invite.serverManagerName,
+					invite.serverManagerIconUrl,
+					invite.instanceIconUrl,
+				)
+				await queryClient.invalidateQueries({ queryKey: ['instances'] })
+			})
+		} catch (error) {
+			handleError(toError(error))
+		}
+	}
+
+	return {
+		handleNotification,
+		installFromInviteId,
+		handleAlreadyInstalledCancel,
+		handleAlreadyInstalledGoToInstance,
+		handleAlreadyInstalledInstallAnyway,
+	}
+}
@@ -80,6 +80,7 @@ const playing = ref(false)

 const play = async (event: MouseEvent) => {
 	event?.stopPropagation()
+	if (props.instance.quarantined) return
 	loading.value = true
 	await run(props.instance.id)
 		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
@@ -192,8 +193,14 @@ onUnmounted(() => {
 				</ButtonStyled>
 				<ButtonStyled v-else>
 					<button
-						v-tooltip="playing ? 'Instance is already open' : null"
-						:disabled="playing || loading"
+						v-tooltip="
+							instance.quarantined
+								? 'This instance has been locked'
+								: playing
+									? 'Instance is already open'
+									: null
+						"
+						:disabled="instance.quarantined || playing || loading"
 						@click="play"
 					>
 						<SpinnerIcon v-if="loading" class="animate-spin" />
@@ -176,6 +176,7 @@ function refreshServer(address: string, instanceId: string) {
 }

 async function joinWorld(world: WorldWithInstance, instance?: GameInstance) {
+	if (instance?.quarantined) return
 	console.log(`Joining world ${getWorldIdentifier(world)}`)
 	if (world.type === 'server') {
 		await start_join_server(world.instance_id, world.address).catch(handleError)
@@ -192,6 +193,7 @@ async function joinWorld(world: WorldWithInstance, instance?: GameInstance) {
 }

 async function playInstance(instance: GameInstance) {
+	if (instance.quarantined) return
 	await run(instance.id)
 		.catch((err) => handleSevereError(err, { instanceId: instance.id }))
 		.finally(() => {
@@ -300,6 +302,7 @@ onUnmounted(() => {
 						item.world.type === 'singleplayer' &&
 						hasWorldQuickPlaySupport(gameVersions, item.instance.game_version || '')
 					"
+					:quarantined="item.instance.quarantined"
 					:server-status="
 						item.world.type === 'server' ? serverData[item.world.address].status : undefined
 					"
@@ -77,6 +77,7 @@ const props = withDefaults(
 		startingInstance?: boolean
 		supportsServerQuickPlay?: boolean
 		supportsWorldQuickPlay?: boolean
+		quarantined?: boolean
 		currentProtocol?: ProtocolVersion | null
 		highlighted?: boolean

@@ -105,6 +106,7 @@ const props = withDefaults(
 		startingInstance: false,
 		supportsServerQuickPlay: true,
 		supportsWorldQuickPlay: false,
+		quarantined: false,
 		currentProtocol: null,

 		refreshing: false,
@@ -139,7 +141,7 @@ const managed = computed(() => props.managed)
 const shortcutInstanceId = computed(() => props.shortcutInstanceId ?? props.instanceId)

 async function createShortcut() {
-	if (!shortcutInstanceId.value) return
+	if (!shortcutInstanceId.value || props.quarantined) return

 	try {
 		const shortcutPath = await createInstanceShortcut(
@@ -422,23 +424,26 @@ const messages = defineMessages({
 				<ButtonStyled v-else>
 					<button
 						v-tooltip="
-							world.type === 'server'
-								? !supportsServerQuickPlay
-									? formatMessage(messages.noServerQuickPlay)
-									: playingOtherWorld
-										? formatMessage(messages.gameAlreadyOpen)
-										: !serverStatus
-											? formatMessage(messages.noContact)
-											: serverIncompatible
-												? formatMessage(messages.incompatibleServer)
-												: null
-								: !supportsWorldQuickPlay
-									? formatMessage(messages.noSingleplayerQuickPlay)
-									: playingOtherWorld || locked
-										? formatMessage(messages.gameAlreadyOpen)
-										: null
+							quarantined
+								? 'This instance has been locked'
+								: world.type === 'server'
+									? !supportsServerQuickPlay
+										? formatMessage(messages.noServerQuickPlay)
+										: playingOtherWorld
+											? formatMessage(messages.gameAlreadyOpen)
+											: !serverStatus
+												? formatMessage(messages.noContact)
+												: serverIncompatible
+													? formatMessage(messages.incompatibleServer)
+													: null
+									: !supportsWorldQuickPlay
+										? formatMessage(messages.noSingleplayerQuickPlay)
+										: playingOtherWorld || locked
+											? formatMessage(messages.gameAlreadyOpen)
+											: null
 						"
 						:disabled="
+							quarantined ||
 							playingOtherWorld ||
 							startingInstance ||
 							(world.type == 'server' && !supportsServerQuickPlay) ||
@@ -457,7 +462,7 @@ const messages = defineMessages({
 							{
 								id: 'play-instance',
 								shown: !!instanceId,
-								disabled: playingInstance,
+								disabled: playingInstance || quarantined,
 								action: () => emit('play-instance'),
 							},
 							{
@@ -511,7 +516,7 @@ const messages = defineMessages({
 							},
 							{
 								id: 'create-shortcut',
-								shown: !!shortcutInstanceId,
+								shown: !!shortcutInstanceId && !quarantined,
 								action: () => createShortcut(),
 							},
 							{