feat: complete hosted mod sync and launcher interface updates

Add pack sync markers, tagged mod updates, parallel progress, JWT downloads and retry recovery. Include pending onboarding, about scene, compatibility data pack and download fixes.

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

@@ -1,25 +1,61 @@
 <script setup lang="ts">
 import { FolderOpenIcon, LeftArrowIcon, SparklesIcon } from '@modrinth/assets'
 import { BigOptionButton, Button, defineMessages, useVIntl } from '@modrinth/ui'
-import { inject, ref } from 'vue'
+import { inject, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import InstanceModeOptions from '@/components/instance/InstanceModeOptions.vue'
+import HostedPackProgress from '@/components/instance/HostedPackProgress.vue'
 import type { InstanceMode } from '@/helpers/hosted-packs'
+import { useHostedCreation } from '@/composables/useHostedCreation'
 
 const { formatMessage } = useVIntl()
 const router = useRouter()
-const instanceMode = ref<InstanceMode>('local')
+const { installing, installError, createdInstance, completed, acknowledge, install } =
+	useHostedCreation()
+const instanceMode = ref<InstanceMode>(
+	installing.value || createdInstance.value ? 'starlight' : 'local',
+)
+async function openCompleted(instanceId: string) {
+	try {
+		const failure = await router.push(`/instance/${encodeURIComponent(instanceId)}/`)
+		if (!failure) acknowledge(instanceId)
+		else installError.value = failure.message
+	} catch (cause) {
+		installError.value = String(cause)
+	}
+}
+watch(
+	() => (completed.value ? createdInstance.value : undefined),
+	(instanceId) => {
+		if (instanceId) void openCompleted(instanceId)
+	},
+	{ immediate: true },
+)
 
 const showModal = inject<
 	(options?: {
 		skipSetupType?: boolean
 		initialMode?: 'custom' | 'import'
-		instanceMode?: InstanceMode
 		onBack?: () => void
 	}) => void
 >('showCreationModalWithOptions')
 
 const messages = defineMessages({
+	openInstance: { id: 'app.hosted-packs.open-instance', defaultMessage: 'Open installed instance' },
+	autoInstall: {
+		id: 'app.hosted-packs.auto-install',
+		defaultMessage: 'Install the StarLight modpack',
+	},
+	autoDescription: {
+		id: 'app.hosted-packs.auto-description',
+		defaultMessage:
+			'Download and automatically install the modpack from StarLight to play on the StarLight server with one click.',
+	},
+	autoInstalling: {
+		id: 'app.hosted-packs.auto-installing',
+		defaultMessage: 'Downloading and installing the server modpack…',
+	},
+	retryInstall: { id: 'app.hosted-packs.retry-install', defaultMessage: 'Retry installation' },
 	title: {
 		id: 'create.title',
 		defaultMessage: 'Create Instance',
@@ -60,11 +96,19 @@ const messages = defineMessages({
 
 const navigateBack = () => router.push('/library')
 
-function handleStartFresh() {
+async function handleStartFresh() {
+	if (installing.value) return
+	if (instanceMode.value === 'starlight') {
+		if (completed.value && createdInstance.value) {
+			await openCompleted(createdInstance.value)
+			return
+		}
+		await install()
+		return
+	}
 	showModal?.({
 		skipSetupType: true,
 		initialMode: 'custom',
-		instanceMode: instanceMode.value,
 		onBack: () => router.push('/create'),
 	})
 }
@@ -73,7 +117,6 @@ function handleImportExisting() {
 	showModal?.({
 		skipSetupType: true,
 		initialMode: 'import',
-		instanceMode: 'local',
 		onBack: () => router.push('/create'),
 	})
 }
@@ -91,13 +134,36 @@ function handleImportExisting() {
 				</p>
 			</div>
 
-			<InstanceModeOptions v-model="instanceMode" data-onboarding-id="creation-instance-mode" />
+			<InstanceModeOptions
+				v-model="instanceMode"
+				:disabled="installing"
+				data-onboarding-id="creation-instance-mode"
+			/>
 			<div data-onboarding-id="creation-methods" class="flex flex-col gap-4 sm:flex-row">
 				<BigOptionButton
-					data-onboarding-id="creation-method-custom"
+					:data-onboarding-id="
+						instanceMode === 'starlight' ? 'creation-method-starlight' : 'creation-method-custom'
+					"
+					:disabled="installing"
 					:icon="SparklesIcon"
-					:title="formatMessage(messages.newTitle)"
-					:description="formatMessage(messages.newDescription)"
+					:title="
+						formatMessage(
+							instanceMode === 'starlight'
+								? installing
+									? messages.autoInstalling
+									: completed
+										? messages.openInstance
+										: createdInstance
+											? messages.retryInstall
+											: messages.autoInstall
+								: messages.newTitle,
+						)
+					"
+					:description="
+						formatMessage(
+							instanceMode === 'starlight' ? messages.autoDescription : messages.newDescription,
+						)
+					"
 					no-icon-box
 					@click="handleStartFresh"
 				/>
@@ -113,7 +179,9 @@ function handleImportExisting() {
 				/>
 			</div>
 
-			<p class="m-0 text-sm text-secondary">
+			<HostedPackProgress :instance-id="createdInstance" :active="installing" />
+			<p v-if="installError" class="m-0 text-red" role="alert">{{ installError }}</p>
+			<p v-if="instanceMode === 'local'" class="m-0 text-sm text-secondary">
 				{{ formatMessage(messages.pclHmclHint) }}
 				{{ ' ' }}
 				<RouterLink