From e551ab0ca6a9d82c68cf141f1815846d2245d4f5 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: 2026年2月14日 10:19:41 +0000
Subject: [PATCH 01/14] feat: start on modal layout + story for testing
---
 .../src/components/base/BigOptionButton.vue &#124; 30 +++++
 packages/ui/src/components/base/index.ts &#124; 1 +
 .../components/CustomSetupStage.vue &#124; 85 ++++++++++++
 .../components/FinalConfigStage.vue &#124; 64 +++++++++
 .../components/ModpackStage.vue &#124; 119 +++++++++++++++++
 .../components/WorldTypeStage.vue &#124; 37 ++++++
 .../create-world-context.ts &#124; 122 ++++++++++++++++++
 .../flows/create-world-flow-modal/index.vue &#124; 44 +++++++
 .../stages/custom-setup-stage.ts &#124; 29 +++++
 .../stages/final-config-stage.ts &#124; 24 ++++
 .../create-world-flow-modal/stages/index.ts &#124; 13 ++
 .../stages/modpack-stage.ts &#124; 19 +++
 .../stages/world-type-stage.ts &#124; 14 ++
 .../ui/src/components/servers/flows/index.ts &#124; 7 +
 packages/ui/src/components/servers/index.ts &#124; 1 +
 .../servers/CreateWorldFlowModal.stories.ts &#124; 84 ++++++++++++
 16 files changed, 693 insertions(+)
 create mode 100644 packages/ui/src/components/base/BigOptionButton.vue
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/components/CustomSetupStage.vue
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/components/FinalConfigStage.vue
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/components/ModpackStage.vue
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/components/WorldTypeStage.vue
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/create-world-context.ts
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/index.vue
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/stages/custom-setup-stage.ts
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/stages/final-config-stage.ts
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/stages/index.ts
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/stages/modpack-stage.ts
 create mode 100644 packages/ui/src/components/servers/flows/create-world-flow-modal/stages/world-type-stage.ts
 create mode 100644 packages/ui/src/components/servers/flows/index.ts
 create mode 100644 packages/ui/src/stories/servers/CreateWorldFlowModal.stories.ts
diff --git a/packages/ui/src/components/base/BigOptionButton.vue b/packages/ui/src/components/base/BigOptionButton.vue
new file mode 100644
index 0000000000..86017a6137
--- /dev/null
+++ b/packages/ui/src/components/base/BigOptionButton.vue
@@ -0,0 +1,30 @@
+<template>
+	<button + + @click="$emit('click')" +>
+		<div + +>
+			<component :is="icon" stroke- />
+		</div>
+		<div>
+			<span>{{ title }}</span>
+			<span>{{ description }}</span>
+		</div>
+	</button>
+</template>
+
+
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 06813a0af1..fbce3c5b62 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -5,6 +5,7 @@ export { default as AutoBrandIcon } from './AutoBrandIcon.vue'
 export { default as AutoLink } from './AutoLink.vue'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
+export { default as BigOptionButton } from './BigOptionButton.vue'
 export { default as BulletDivider } from './BulletDivider.vue'
 export { default as Button } from './Button.vue'
 export { default as ButtonStyled } from './ButtonStyled.vue'
diff --git a/packages/ui/src/components/servers/flows/create-world-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/servers/flows/create-world-flow-modal/components/CustomSetupStage.vue
new file mode 100644
index 0000000000..cead36d7ed
--- /dev/null
+++ b/packages/ui/src/components/servers/flows/create-world-flow-modal/components/CustomSetupStage.vue
@@ -0,0 +1,85 @@
+<template>
+	<div>
+		<div v-if="!hideLoaderFields">
+			<span>Content loader</span>
+			<chips + v-model="selectedLoader" + :items="loaderItems" + :format-label="capitalize" + :never-empty="false" + />
+		</div>
+
+		<div>
+			<span>Game version</span>
+			
+			<combobox + v-model="selectedGameVersion" + :options="gameVersionOptions" + searchable + placeholder="Select game version" + />
+			<span>It is recommended to use the latest version.</span>
+		</div>
+
+		<div v-if="!hideLoaderFields">
+			<span>Loader version</span>
+			<chips + v-model="loaderVersionType" + :items="loaderVersionTypeItems" + :format-label="capitalize" + />
+			<div v-if="loaderVersionType === 'other'">
+				
+				<combobox + v-model="selectedLoaderVersion" + :options="loaderVersionOptions" + searchable + placeholder="Select loader version" + />
+			</div>
+		</div>
+	</div>
+</template>
+
+
diff --git a/packages/ui/src/components/servers/flows/create-world-flow-modal/components/FinalConfigStage.vue b/packages/ui/src/components/servers/flows/create-world-flow-modal/components/FinalConfigStage.vue
new file mode 100644
index 0000000000..03e5a0ab00
--- /dev/null
+++ b/packages/ui/src/components/servers/flows/create-world-flow-modal/components/FinalConfigStage.vue
@@ -0,0 +1,64 @@
+<template>
+	<div>
+		<div>
+			<span>World name <span>*</span></span>
+			
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ConfirmStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ConfirmStage.vue
index 607653910a..18a319955a 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ConfirmStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ConfirmStage.vue
@@ -1,62 +1,108 @@
 <template>
 	<div>
-		<div>
-			<span>Summary</span>
-			<div>
-				<div v-if="ctx.worldType.value === 'modpack' && ctx.modpackSelection.value">
-					<span>Modpack:</span>
-					{{ ctx.modpackSelection.value.name }}
+		<div + +>
+			<span>Summary</span>
+
+			<div + v-if="ctx.worldType.value === 'modpack' && ctx.modpackSelection.value" + +>
+				<avatar :src="ctx.modpackSelection.value.iconUrl" size="2.5rem" />
+				<div>
+					<span>
+						{{ ctx.modpackSelection.value.name }}
+					</span>
+					<span v-if="selectedVersionLabel">
+						{{ selectedVersionLabel }}
+					</span>
 				</div>
-				<div v-else-if="ctx.worldType.value === 'modpack' && ctx.modpackFile.value">
-					<span>Modpack file:</span>
+			</div>
+
+			<div + v-else-if="ctx.worldType.value === 'modpack' && ctx.modpackFile.value" + +>
+				<fileicon />
+				<span>
 					{{ ctx.modpackFile.value.name }}
-				</div>
-				<template v-else>
-					<div v-if="ctx.selectedLoader.value">
-						<span>Loader:</span>
-						{{ formatLoader(ctx.selectedLoader.value) }}
+				</span>
+			</div>
+
+			<div>
+				<template v-if="ctx.worldType.value !== 'modpack'">
+					<div v-if="ctx.selectedLoader.value">
+						<span>Loader</span>
+						<span>
+							{{ formatLoader(ctx.selectedLoader.value) }}
+						</span>
 					</div>
-					<div>
-						<span>Game version:</span>
-						{{ ctx.selectedGameVersion.value }}
+					<div>
+						<span>Game version</span>
+						<span>
+							{{ ctx.selectedGameVersion.value }}
+						</span>
 					</div>
-					<div v-if="ctx.selectedLoaderVersion.value && !ctx.hideLoaderFields.value">
-						<span>Loader version:</span>
-						{{ ctx.selectedLoaderVersion.value }}
+					<div + v-if="ctx.selectedLoaderVersion.value && !ctx.hideLoaderFields.value" + +>
+						<span>Loader version</span>
+						<span>
+							{{ ctx.selectedLoaderVersion.value }}
+						</span>
 					</div>
 				</template>
+				<div>
+					<span>Gamemode</span>
+					<span>
+						{{ capitalize(ctx.gamemode.value) }}
+					</span>
+				</div>
+				<div>
+					<span>Difficulty</span>
+					<span>
+						{{ capitalize(ctx.difficulty.value) }}
+					</span>
+				</div>
 			</div>
 		</div>
 
-		<div v-if="!ctx.isInitialSetup">
-			<div>
-				<div>
-					<label for="hard-reset">
-						Erase all data
-					</label>
-					<toggle id="hard-reset" v-model="ctx.hardReset.value" />
-				</div>
-				<div>
-					Removes all data on your server, including your worlds, mods, and configuration files,
-					then reinstalls it with the selected version.
-				</div>
-				<div>
-					This does not affect your backups, which are stored off-site.
+		<div + v-if="!ctx.isInitialSetup" + +>
+			<div>
+				<div>
+					<span>Erase all data</span>
+					<span>
+						Removes all data on your server, including your worlds, mods, and configuration files,
+						then reinstalls it with the selected version.
+					</span>
 				</div>
+				<toggle id="hard-reset" v-model="ctx.hardReset.value" />
 			</div>
-
-			<backupwarning backup- />
 		</div>
 	</div>
 </template>
 
 
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
index d411af4da0..6f3877d1ab 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
@@ -1,22 +1,22 @@
 <template>
 	<div>
-		<div>
+		<div v-if="ctx.flowType !== 'server-onboarding'">
 			<span>World name <span>*</span></span>
 			
diff --git a/apps/app-frontend/src/helpers/pack.js b/apps/app-frontend/src/helpers/pack.js
deleted file mode 100644
index 312dfc62aa..0000000000
--- a/apps/app-frontend/src/helpers/pack.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
- * and deserialized into a usable JS object.
- */
-import { invoke } from '@tauri-apps/api/core'
-
-import { create } from './profile'
-
-// Installs pack from a version ID
-export async function create_profile_and_install(
-	projectId,
-	versionId,
-	packTitle,
-	iconUrl,
-	createInstanceCallback = () => {},
-) {
-	const location = {
-		type: 'fromVersionId',
-		project_id: projectId,
-		version_id: versionId,
-		title: packTitle,
-		icon_url: iconUrl,
-	}
-	const profile_creator = await invoke('plugin:pack&#124;pack_get_profile_from_pack', { location })
-	const profile = await create(
-		profile_creator.name,
-		profile_creator.gameVersion,
-		profile_creator.modloader,
-		profile_creator.loaderVersion,
-		null,
-		true,
-	)
-	createInstanceCallback(profile)
-
-	return await invoke('plugin:pack&#124;pack_install', { location, profile })
-}
-
-export async function install_to_existing_profile(projectId, versionId, title, profilePath) {
-	const location = {
-		type: 'fromVersionId',
-		project_id: projectId,
-		version_id: versionId,
-		title,
-	}
-	return await invoke('plugin:pack&#124;pack_install', { location, profile: profilePath })
-}
-
-// Installs pack from a path
-export async function create_profile_and_install_from_file(path) {
-	const location = {
-		type: 'fromFile',
-		path: path,
-	}
-	const profile_creator = await invoke('plugin:pack&#124;pack_get_profile_from_pack', { location })
-	const profile = await create(
-		profile_creator.name,
-		profile_creator.gameVersion,
-		profile_creator.modloader,
-		profile_creator.loaderVersion,
-		null,
-		true,
-	)
-	return await invoke('plugin:pack&#124;pack_install', { location, profile })
-}
diff --git a/apps/app-frontend/src/helpers/pack.ts b/apps/app-frontend/src/helpers/pack.ts
new file mode 100644
index 0000000000..ae1131a3f8
--- /dev/null
+++ b/apps/app-frontend/src/helpers/pack.ts
@@ -0,0 +1,90 @@
+import { invoke } from '@tauri-apps/api/core'
+
+import { create } from './profile'
+import type { InstanceLoader } from './types'
+
+interface PackProfileCreator {
+	name: string
+	gameVersion: string
+	modloader: InstanceLoader
+	loaderVersion: string &#124; null
+}
+
+interface PackLocationVersionId {
+	type: 'fromVersionId'
+	project_id: string
+	version_id: string
+	title: string
+	icon_url?: string
+}
+
+interface PackLocationFile {
+	type: 'fromFile'
+	path: string
+}
+
+export async function create_profile_and_install(
+	projectId: string,
+	versionId: string,
+	packTitle: string,
+	iconUrl?: string,
+	createInstanceCallback: (profile: string) => void = () => {},
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title: packTitle,
+		icon_url: iconUrl,
+	}
+	const profile_creator = await invoke<packprofilecreator>(
+		'plugin:pack&#124;pack_get_profile_from_pack',
+		{ location },
+	)
+	const profile = await create(
+		profile_creator.name,
+		profile_creator.gameVersion,
+		profile_creator.modloader,
+		profile_creator.loaderVersion,
+		null,
+		true,
+	)
+	createInstanceCallback(profile)
+
+	return await invoke('plugin:pack&#124;pack_install', { location, profile })
+}
+
+export async function install_to_existing_profile(
+	projectId: string,
+	versionId: string,
+	title: string,
+	profilePath: string,
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title,
+	}
+	return await invoke('plugin:pack&#124;pack_install', { location, profile: profilePath })
+}
+
+export async function create_profile_and_install_from_file(path: string): Promise<void> {
+	const location: PackLocationFile = {
+		type: 'fromFile',
+		path,
+	}
+	const profile_creator = await invoke<packprofilecreator>(
+		'plugin:pack&#124;pack_get_profile_from_pack',
+		{ location },
+	)
+	const profile = await create(
+		profile_creator.name,
+		profile_creator.gameVersion,
+		profile_creator.modloader,
+		profile_creator.loaderVersion,
+		null,
+		true,
+	)
+	return await invoke('plugin:pack&#124;pack_install', { location, profile })
+}
diff --git a/apps/app-frontend/src/helpers/profile.ts b/apps/app-frontend/src/helpers/profile.ts
index 96b6676712..5107c34b93 100644
--- a/apps/app-frontend/src/helpers/profile.ts
+++ b/apps/app-frontend/src/helpers/profile.ts
@@ -7,7 +7,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import type { ContentItem, ContentOwner } from '@modrinth/ui'
 import { invoke } from '@tauri-apps/api/core'
 
-import { install_to_existing_profile } from '@/helpers/pack.js'
+import { install_to_existing_profile } from '@/helpers/pack'
 
 import type {
 	CacheBehaviour,
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index 93d039fae9..ae96dcac63 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,17 +1,17 @@
 
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
index 1aafe80a4c..26207583bc 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
@@ -19,7 +19,6 @@
 					title="Modpack base"
 					description="Use a popular Modpack as your starting point."
 					:selected="ctx.initialSetupType === 'modpack'"
-					show-chevron
 					@click="setSetupType('modpack')"
 				/>
 				 void
 	setSetupType: (type: SetupType) => void
 	setImportMode: () => void
+	browseModpacks: () => void
 	finish: () => void
 }
 
@@ -153,11 +154,10 @@ export function createCreationFlowContext(
 	const instanceIconUrl = ref<string &#124; null>(null)
 	const instanceIconPath = ref<string &#124; null>(null)
 
-	// Revoke old object URL when icon changes to avoid memory leaks
-	watch(instanceIcon, (_newIcon, _oldIcon) => {
-		if (instanceIconUrl.value) {
-			URL.revokeObjectURL(instanceIconUrl.value)
-			instanceIconUrl.value = null
+	// Revoke old object URL when icon is cleared to avoid memory leaks
+	watch(instanceIconUrl, (_newUrl, oldUrl) => {
+		if (oldUrl && oldUrl.startsWith('blob:')) {
+			URL.revokeObjectURL(oldUrl)
 		}
 	})
 
@@ -207,11 +207,8 @@ export function createCreationFlowContext(
 
 		// Instance-specific
 		instanceName.value = ''
-		if (instanceIconUrl.value) {
-			URL.revokeObjectURL(instanceIconUrl.value)
-		}
-		instanceIcon.value = null
 		instanceIconUrl.value = null
+		instanceIcon.value = null
 		instanceIconPath.value = null
 
 		selectedLoader.value = null
@@ -254,6 +251,11 @@ export function createCreationFlowContext(
 		modal.value?.setStage('import-instance')
 	}
 
+	function browseModpacks() {
+		modal.value?.hide()
+		emit.browseModpacks()
+	}
+
 	function finish() {
 		emit.create(contextValue)
 	}
@@ -309,6 +311,7 @@ export function createCreationFlowContext(
 		reset,
 		setSetupType,
 		setImportMode,
+		browseModpacks,
 		finish,
 	}
 
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
index 50d9f9ced1..7f3cdaf95b 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
@@ -1,10 +1,14 @@
-import { LeftArrowIcon } from '@modrinth/assets'
+import { LeftArrowIcon, PlusIcon, RightArrowIcon } from '@modrinth/assets'
 import { markRaw } from 'vue'
 
 import type { StageConfigInput } from '../../../base'
 import ModpackStage from '../components/ModpackStage.vue'
 import type { CreationFlowContextValue } from '../creation-flow-context'
 
+function hasModpackSelected(ctx: CreationFlowContextValue): boolean {
+	return !!ctx.modpackSelection.value &#124;&#124; !!ctx.modpackFilePath.value
+}
+
 export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
 	id: 'modpack',
 	title: 'Choose Modpack',
@@ -15,6 +19,25 @@ export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
 		icon: LeftArrowIcon,
 		onClick: () => ctx.modal.value?.setStage('setup-type'),
 	}),
-	rightButtonConfig: null,
+	rightButtonConfig: (ctx) => {
+		const selected = hasModpackSelected(ctx)
+		if (ctx.flowType === 'instance') {
+			return {
+				label: 'Create instance',
+				icon: PlusIcon,
+				iconPosition: 'before' as const,
+				color: 'brand' as const,
+				disabled: !selected,
+				onClick: () => ctx.finish(),
+			}
+		}
+		return {
+			label: 'Continue',
+			icon: RightArrowIcon,
+			iconPosition: 'after' as const,
+			disabled: !selected,
+			onClick: () => ctx.modal.value?.setStage('final-config'),
+		}
+	},
 	maxWidth: '520px',
 }
From d4bcb486fdd4640a463271f4e19ef50d8cfcf302 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: 2026年2月18日 14:41:26 +0000
Subject: [PATCH 12/14] fix: lint
---
 apps/app-frontend/src/App.vue &#124; 7 ++++---
 .../src/providers/setup/creation-modal.ts &#124; 16 ++++-----------
 .../src/providers/setup/file-picker.ts &#124; 4 +---
 .../src/providers/setup/instance-import.ts &#124; 8 +-------
 .../hosting/manage/[id]/options/loader.vue &#124; 8 +++-----
 .../components/CustomSetupStage.vue &#124; 12 ++---------
 .../components/ImportInstanceStage.vue &#124; 20 ++++---------------
 .../flows/creation-flow-modal/index.vue &#124; 2 +-
 .../stages/custom-setup-stage.ts &#124; 3 +--
 .../components/servers/ServerSetupModal.vue &#124; 13 +++++++-----
 packages/ui/src/providers/file-picker.ts &#124; 3 +--
 packages/ui/src/providers/index.ts &#124; 2 +-
 12 files changed, 31 insertions(+), 67 deletions(-)
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 93b2f7acd6..5d453a2513 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -77,7 +77,6 @@ import UpdateAvailableToast from '@/components/ui/UpdateAvailableToast.vue'
 import UpdateToast from '@/components/ui/UpdateToast.vue'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
-import { setupProviders } from '@/providers/setup'
 import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
@@ -85,6 +84,7 @@ import { get_user } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { useFetch } from '@/helpers/fetch.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
+import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { list } from '@/helpers/profile.js'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -101,11 +101,11 @@ import {
 	provideAppUpdateDownloadProgress,
 	subscribeToDownloadProgress,
 } from '@/providers/download-progress.ts'
+import { setupProviders } from '@/providers/setup'
 import { useError } from '@/store/error.js'
 import { useInstall } from '@/store/install.js'
 import { useLoading, useTheming } from '@/store/state'
 
-import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
@@ -136,7 +136,8 @@ provideModalBehavior({
 	onHide: () => show_ads_window(),
 })
 
-const { installationModal, handleCreate, handleBrowseModpacks } = setupProviders(notificationManager)
+const { installationModal, handleCreate, handleBrowseModpacks } =
+	setupProviders(notificationManager)
 
 const news = ref([])
 const availableSurvey = ref(false)
diff --git a/apps/app-frontend/src/providers/setup/creation-modal.ts b/apps/app-frontend/src/providers/setup/creation-modal.ts
index 55a2968ab5..9805ae846f 100644
--- a/apps/app-frontend/src/providers/setup/creation-modal.ts
+++ b/apps/app-frontend/src/providers/setup/creation-modal.ts
@@ -22,14 +22,10 @@ export function setupCreationModal(notificationManager: AbstractWebNotificationM
 				for (const [launcherName, instanceSet] of Object.entries(
 					config.importSelectedInstances.value,
 				)) {
-					const launcher = config.importLaunchers.value.find(
-						(l) => l.name === launcherName,
-					)
+					const launcher = config.importLaunchers.value.find((l) => l.name === launcherName)
 					if (!launcher &#124;&#124; instanceSet.size === 0) continue
 					for (const name of instanceSet) {
-						await import_instance(launcher.name, launcher.path, name).catch(
-							handleError,
-						)
+						await import_instance(launcher.name, launcher.path, name).catch(handleError)
 					}
 				}
 				trackEvent('InstanceCreate', { source: 'CreationModalImport' })
@@ -38,17 +34,13 @@ export function setupCreationModal(notificationManager: AbstractWebNotificationM
 
 			if (config.modpackSelection.value) {
 				const { projectId, versionId, name, iconUrl } = config.modpackSelection.value
-				await create_profile_and_install(projectId, versionId, name, iconUrl).catch(
-					handleError,
-				)
+				await create_profile_and_install(projectId, versionId, name, iconUrl).catch(handleError)
 				trackEvent('InstanceCreate', { source: 'CreationModalModpack' })
 				return
 			}
 
 			if (config.modpackFilePath.value) {
-				await create_profile_and_install_from_file(config.modpackFilePath.value).catch(
-					handleError,
-				)
+				await create_profile_and_install_from_file(config.modpackFilePath.value).catch(handleError)
 				trackEvent('InstanceCreate', { source: 'CreationModalModpackFile' })
 				return
 			}
diff --git a/apps/app-frontend/src/providers/setup/file-picker.ts b/apps/app-frontend/src/providers/setup/file-picker.ts
index b27ef120ca..b07bdca63c 100644
--- a/apps/app-frontend/src/providers/setup/file-picker.ts
+++ b/apps/app-frontend/src/providers/setup/file-picker.ts
@@ -7,9 +7,7 @@ export function setupFilePickerProvider() {
 		async pickImage() {
 			const result = await open({
 				multiple: false,
-				filters: [
-					{ name: 'Image', extensions: ['png', 'jpeg', 'jpg', 'svg', 'webp', 'gif'] },
-				],
+				filters: [{ name: 'Image', extensions: ['png', 'jpeg', 'jpg', 'svg', 'webp', 'gif'] }],
 			})
 			if (!result) return null
 			const path = result.path ?? result
diff --git a/apps/app-frontend/src/providers/setup/instance-import.ts b/apps/app-frontend/src/providers/setup/instance-import.ts
index fe8147220e..f926334b8a 100644
--- a/apps/app-frontend/src/providers/setup/instance-import.ts
+++ b/apps/app-frontend/src/providers/setup/instance-import.ts
@@ -13,13 +13,7 @@ export function setupInstanceImportProvider(notificationManager: AbstractWebNoti
 
 	provideInstanceImport({
 		async getDetectedLaunchers() {
-			const launcherNames = [
-				'MultiMC',
-				'GDLauncher',
-				'ATLauncher',
-				'Curseforge',
-				'PrismLauncher',
-			]
+			const launcherNames = ['MultiMC', 'GDLauncher', 'ATLauncher', 'Curseforge', 'PrismLauncher']
 			const launchers = []
 			for (const name of launcherNames) {
 				try {
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
index 1980cf8ad7..aa757e65fb 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
@@ -25,19 +25,17 @@
 					<avatar :src="(debugProject as any).icon_url" size="3rem" />
 					<div>
 						<div>
-							<span>
+							<span>
 								{{ (debugProject as any).title }}
 							</span>
 							<span>
 								by {{ (debugProject as any).team?.name ?? 'Unknown' }}
 							</span>
 						</div>
-						<span>v1.6.1 for 1.21.1</span>
+						<span>v1.6.1 for 1.21.1</span>
 					</div>
 					<div>
-						<div - ->
+						<div>
 							Update available
 						</div>
 						<buttonstyled color="brand">
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
index 40c6b34554..71d2672de3 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
@@ -11,11 +11,7 @@
 					</button>
 				</buttonstyled>
 				<buttonstyled type="outlined">
-					<button - - :disabled="!ctx.instanceIcon.value" - @click="removeIcon" ->
+					<button :disabled="!ctx.instanceIcon.value" @click="removeIcon">
 						<xicon />
 						Remove icon
 					</button>
@@ -92,11 +88,7 @@
 			</div>
 
 			
-			<collapsible - v-else - :collapsed="!selectedLoader &#124;&#124; !selectedGameVersion" - overflow-visible ->
+			<collapsible v-else :collapsed="!selectedLoader &#124;&#124; !selectedGameVersion" overflow-visible>
 				<div>
 					<span>{{ isPaperLike ? 'Build number' : 'Loader version'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
index 56bb30d7f0..adedb01a21 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
@@ -66,18 +66,12 @@
 		</div>
 
 		
-		<div - v-else-if="!loading" - ->
+		<div v-else-if="!loading">
 			No launcher instances detected
 		</div>
 
 		
-		<div - v-if="loading" - ->
+		<div v-if="loading">
 			Detecting launcher instances...
 		</div>
 
@@ -91,15 +85,9 @@
 		</div>
 		<div v-else>
 			<folderopenicon />
-			<styledinput - v-model="newLauncherPath" - placeholder="Path to launcher..." - - />
+			<styledinput v-model="newLauncherPath" placeholder="Path to launcher..." />
 			<buttonstyled>
-				<button :disabled="!newLauncherPath.trim()" @click="addLauncherPath">
-					Add
-				</button>
+				<button :disabled="!newLauncherPath.trim()" @click="addLauncherPath">Add</button>
 			</buttonstyled>
 		</div>
 	</div>
diff --git a/packages/ui/src/components/flows/creation-flow-modal/index.vue b/packages/ui/src/components/flows/creation-flow-modal/index.vue
index 142a3fb98e..3a11035037 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/index.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/index.vue
@@ -11,8 +11,8 @@ import {
 	createCreationFlowContext,
 	type CreationFlowContextValue,
 	type FlowType,
-	type SetupType,
 	provideCreationFlowContext,
+	type SetupType,
 } from './creation-flow-context'
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
index 5cd7b9a292..81bf38958a 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
@@ -7,8 +7,7 @@ import { type CreationFlowContextValue, flowTypeHeadings } from '../creation-flo
 
 function isForwardBlocked(ctx: CreationFlowContextValue): boolean {
 	const baseCheck =
-		!ctx.selectedGameVersion.value &#124;&#124;
-		(!ctx.hideLoaderChips.value && !ctx.selectedLoader.value)
+		!ctx.selectedGameVersion.value &#124;&#124; (!ctx.hideLoaderChips.value && !ctx.selectedLoader.value)
 	if (ctx.flowType === 'instance') {
 		return baseCheck &#124;&#124; !ctx.instanceName.value.trim()
 	}
diff --git a/packages/ui/src/components/servers/ServerSetupModal.vue b/packages/ui/src/components/servers/ServerSetupModal.vue
index d8e0928ef9..8148500213 100644
--- a/packages/ui/src/components/servers/ServerSetupModal.vue
+++ b/packages/ui/src/components/servers/ServerSetupModal.vue
@@ -26,13 +26,16 @@
 import type { ModrinthApiError } from '@modrinth/api-client'
 import { computed, nextTick, ref, useTemplateRef } from 'vue'
 
-import type { CreationFlowContextValue, SetupType } from '../flows/creation-flow-modal/creation-flow-context'
-import { AppearingProgressBar } from '../base'
-import { NewModal } from '../modal'
-import CreationFlowModal from '../flows/creation-flow-modal/index.vue'
 import { injectModrinthClient } from '../../providers/api-client'
 import { injectModrinthServerContext } from '../../providers/server-context'
 import { injectNotificationManager } from '../../providers/web-notifications'
+import { AppearingProgressBar } from '../base'
+import type {
+	CreationFlowContextValue,
+	SetupType,
+} from '../flows/creation-flow-modal/creation-flow-context'
+import CreationFlowModal from '../flows/creation-flow-modal/index.vue'
+import { NewModal } from '../modal'
 
 const client = injectModrinthClient()
 const serverContext = injectModrinthServerContext()
@@ -55,7 +58,7 @@ const props = defineProps<{ }>()
 
 const emit = defineEmits<{ - reinstall: [any?] + reinstall: [args?: { loader: string; lVersion: string; mVersion: string &#124; null }] hide: [] 'browse-modpacks': [] }>()
diff --git a/packages/ui/src/providers/file-picker.ts b/packages/ui/src/providers/file-picker.ts
index 076b58f247..d9eb81ae70 100644
--- a/packages/ui/src/providers/file-picker.ts
+++ b/packages/ui/src/providers/file-picker.ts
@@ -16,5 +16,4 @@ export interface FilePickerProvider {
 	pickModpackFile: () => Promise<pickedfile &#124; null>
 }
 
-export const [injectFilePicker, provideFilePicker] =
-	createContext<filepickerprovider>('FilePicker')
+export const [injectFilePicker, provideFilePicker] = createContext<filepickerprovider>('FilePicker')
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index beb8dd6c57..f4d4c1c669 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -79,8 +79,8 @@ export function createContext<contextvalue>(
 }
 
 export * from './api-client'
-export * from './file-picker'
 export * from './content-manager'
+export * from './file-picker'
 export * from './i18n'
 export * from './instance-import'
 export * from './modal-behavior'
From fd3010dd22ce14ad605386bd25efc2f8fd0c07a4 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: 2026年2月18日 14:53:06 +0000
Subject: [PATCH 13/14] fix: import instance stage
---
 .../components/ImportInstanceStage.vue &#124; 72 +++++++++++--------
 1 file changed, 43 insertions(+), 29 deletions(-)
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
index adedb01a21..3338cadc2b 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
@@ -4,7 +4,12 @@
 		<div>
 			<span>Launcher instances</span>
 			<button - + + :text-surface-5 cursor-default' + : 'text-secondary hover:text-contrast cursor-pointer' + " :disabled="totalSelectedCount === 0" @click="clearAll">
@@ -20,23 +25,19 @@
 		/>
 
 		
-		<div - v-if="ctx.importLaunchers.value.length> 0"
-			class="flex flex-col rounded-xl border border-solid border-surface-4 overflow-hidden"
-	>
+		<div v-if="ctx.importLaunchers.value.length> 0" class="flex flex-col gap-2">
 			<div - v-for="(launcher, index) in ctx.importLaunchers.value" + v-for="launcher in ctx.importLaunchers.value" :key="launcher.name" - - :border-t border-solid border-surface-4': index> 0 }"
+				class="flex flex-col rounded-xl border border-solid border-surface-5 overflow-hidden"
 		>
 				
 				<button - + @click="toggleLauncherExpanded(launcher.name)">
 					<chevronrighticon - + :rotate-90': expandedLaunchers.has(launcher.name) }" />
 					<checkbox @@ -49,19 +50,23 @@ </button>
 
 				
-				<div v-if="expandedLaunchers.has(launcher.name)">
-					<template v-for="instance in filteredInstances(launcher)" :key="instance">
-						<div - ->
-							<checkbox - :model-value="isInstanceSelected(launcher.name, instance)" - @update:model-value="toggleInstance(launcher.name, instance, $event)" - />
-							<span>{{ instance }}</span>
-						</div>
-					</template>
-				</div>
+				<collapsible :collapsed="!expandedLaunchers.has(launcher.name)">
+					<div>
+						<template v-for="(instance, i) in filteredInstances(launcher)" :key="instance">
+							<div + + :bg-surface-2' : 'bg-surface-1.5'" + +>
+								<checkbox + :model-value="isInstanceSelected(launcher.name, instance)" + @update:model-value="toggleInstance(launcher.name, instance, $event)" + />
+								<span>{{ instance }}</span>
+							</div>
+						</template>
+					</div>
+				</collapsible>
 			</div>
 		</div>
 
@@ -77,14 +82,15 @@
 
 		
 		<div v-if="!showAddPath">
-			<buttonstyled type="outlined">
-				<button @click="showAddPath = true">
-					Add launcher path
-				</button>
+			<buttonstyled>
+				<button @click="showAddPath = true">Add launcher path</button>
 			</buttonstyled>
 		</div>
 		<div v-else>
-			<folderopenicon />
+			<buttonstyled icon-only +><button @click="browseForLauncherPath">
+					<foldersearchicon /></button +></buttonstyled>
 			<styledinput v-model="newLauncherPath" placeholder="Path to launcher..." />
 			<buttonstyled>
 				<button :disabled="!newLauncherPath.trim()" @click="addLauncherPath">Add</button>
@@ -94,13 +100,14 @@
 </template>
 
 
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
index 26207583bc..dc6ca329e5 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
@@ -17,13 +17,13 @@
 				
 				
@@ -39,7 +39,7 @@
 				
diff --git a/packages/ui/src/components/flows/creation-flow-modal/index.vue b/packages/ui/src/components/flows/creation-flow-modal/index.vue
index 3a11035037..1eb3e2be79 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/index.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<multistagemodal ref="modal" :stages="ctx.stageConfigs" :con @hide="$emit('hide')" />
+	<multistagemodal ref="modal" :stages="ctx.stageConfigs" :con disable-progress @hide="$emit('hide')" />
 </template>
 
 setup lang="ts">
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/confirm-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/confirm-stage.ts
index 6133d5dd69..84459f713f 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/confirm-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/confirm-stage.ts
@@ -25,4 +25,5 @@ export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
 			onClick: () => ctx.finish(),
 		}
 	},
+	maxWidth: '520px',
 }
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
index 81bf38958a..641a449910 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
@@ -56,4 +56,5 @@ export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
 			},
 		}
 	},
+	maxWidth: '520px',
 }
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
index e9e780ee85..590b1f57be 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
@@ -37,4 +37,5 @@ export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
 			},
 		}
 	},
+	maxWidth: '520px',
 }
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
index 7f3cdaf95b..d6e4c016a5 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
@@ -1,43 +1,15 @@
-import { LeftArrowIcon, PlusIcon, RightArrowIcon } from '@modrinth/assets'
 import { markRaw } from 'vue'
 
 import type { StageConfigInput } from '../../../base'
 import ModpackStage from '../components/ModpackStage.vue'
 import type { CreationFlowContextValue } from '../creation-flow-context'
 
-function hasModpackSelected(ctx: CreationFlowContextValue): boolean {
-	return !!ctx.modpackSelection.value &#124;&#124; !!ctx.modpackFilePath.value
-}
-
 export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
 	id: 'modpack',
-	title: 'Choose Modpack',
+	title: 'Choose modpack',
 	stageContent: markRaw(ModpackStage),
 	skip: (ctx) => ctx.setupType.value !== 'modpack' &#124;&#124; ctx.isImportMode.value,
-	leftButtonConfig: (ctx) => ({
-		label: 'Back',
-		icon: LeftArrowIcon,
-		onClick: () => ctx.modal.value?.setStage('setup-type'),
-	}),
-	rightButtonConfig: (ctx) => {
-		const selected = hasModpackSelected(ctx)
-		if (ctx.flowType === 'instance') {
-			return {
-				label: 'Create instance',
-				icon: PlusIcon,
-				iconPosition: 'before' as const,
-				color: 'brand' as const,
-				disabled: !selected,
-				onClick: () => ctx.finish(),
-			}
-		}
-		return {
-			label: 'Continue',
-			icon: RightArrowIcon,
-			iconPosition: 'after' as const,
-			disabled: !selected,
-			onClick: () => ctx.modal.value?.setStage('final-config'),
-		}
-	},
+	leftButtonConfig: null,
+	rightButtonConfig: null,
 	maxWidth: '520px',
 }
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 5ed52f9a3b..eee1c50a31 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -1,5 +1,7 @@
 import {
 	DownloadIcon,
+	EyeIcon,
+	EyeOffIcon,
 	HeartIcon,
 	SettingsIcon,
 	ShareIcon,
@@ -97,6 +99,83 @@ export const WithSelectedOption: Story = {
 	},
 }
 
+export const SearchMode: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+		],
+		searchMode: true,
+		searchPlaceholder: 'Search actions...',
+		disableSearchFilter: false,
+	},
+}
+
+export const SearchModeWithIcons: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+		],
+		searchMode: true,
+		searchPlaceholder: 'Search modpacks...',
+		noOptionsMessage: 'No modpacks found',
+	},
+}
+
+export const WithDropdownFooter: StoryObj = {
+	render: () => ({
+		components: { Combobox, EyeIcon, EyeOffIcon },
+		data: () => ({
+			selected: '1.20.4',
+			showAll: false,
+		}),
+		computed: {
+			options() {
+				const releases = [
+					{ value: '1.20.4', label: '1.20.4' },
+					{ value: '1.20.3', label: '1.20.3' },
+					{ value: '1.20.2', label: '1.20.2' },
+					{ value: '1.20.1', label: '1.20.1' },
+					{ value: '1.20', label: '1.20' },
+				]
+				const snapshots = [
+					{ value: '24w03a', label: '24w03a' },
+					{ value: '23w51b', label: '23w51b' },
+				]
+				// @ts-ignore
+				return this.showAll ? [...releases, ...snapshots] : releases
+			},
+		},
+		template: /*html*/ `
+			<combobox + v-model="selected" + :options="options" + searchable + placeholder="Select game version" + search-placeholder="Search game versions" +>
+				<template #dropdown-footer>
+					<button + + @mousedown.prevent + @click="showAll = !showAll" +>
+						<eyeofficon v-if="showAll" />
+						<eyeicon v-else />
+						{{ showAll ? 'Hide snapshots' : 'Show all versions' }}
+					</button>
+				</template>
+			</combobox>
+		`,
+	}),
+}
+
 export const WithSelectedOptionAndIcon: Story = {
 	args: {
 		options: [
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/modrinth/code/pull/5383.patch">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/modrinth/code/pull/5383.patch" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>