fix: app problems post release qa (#5554)

* fix: app problems post release qa

* fix: lint

* fix: dont prefill

* fix: toggle gap

* feat: macs thing

* fix: lint

packages/ui/src/components/base/Toggle.vue

@@ -7,7 +7,7 @@
 		:disabled="disabled"
 		class="relative inline-flex shrink-0 rounded-full m-0 transition-all duration-200 cursor-pointer border-none"
 		:class="[
-			small ? 'h-5 !w-[38px]' : 'h-8 !w-[52px]',
+			small ? 'h-5 !w-[40px]' : 'h-8 !w-[60px]',
 			modelValue ? 'bg-brand' : 'bg-button-bg',
 			disabled ? 'opacity-50 cursor-not-allowed' : 'btn-wrapper',
 		]"
@@ -16,11 +16,11 @@
 		<span
 			class="absolute rounded-full transition-all duration-200"
 			:class="[
-				small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[18px] h-[18px] top-[7px] left-[7px]',
+				small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[24px] h-[24px] top-1 left-1',
 				modelValue
 					? small
-						? 'translate-x-[18px] bg-black/90'
-						: 'translate-x-5 bg-black/90'
+						? 'translate-x-5 bg-black/90'
+						: 'translate-x-7 bg-black/90'
 					: 'bg-gray',
 			]"
 		/>

packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue

@@ -22,7 +22,10 @@
 		<!-- Instance-specific: Name field -->
 		<div v-if="ctx.flowType === 'instance'" class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">Name</span>
-			<StyledInput v-model="ctx.instanceName.value" placeholder="Enter instance name" />
+			<StyledInput
+				v-model="ctx.instanceName.value"
+				:placeholder="ctx.autoInstanceName.value || 'Enter instance name'"
+			/>
 		</div>
 
 		<!-- Loader chips -->

packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts

@@ -3,6 +3,7 @@ import { computed, type ComputedRef, type Ref, ref, type ShallowRef, watch } fro
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 import { useDebugLogger } from '#ui/composables/debug-logger'
+import { formatLoaderLabel } from '#ui/utils/loaders'
 
 import { createContext } from '../../../providers'
 import type { ImportableLauncher } from '../../../providers/instance-import'
@@ -77,6 +78,7 @@ export interface CreationFlowContextValue {
 
 	// Instance-specific state
 	instanceName: Ref<string>
+	autoInstanceName: ComputedRef<string>
 	instanceIcon: Ref<File | null>
 	instanceIconUrl: Ref<string | null>
 	instanceIconPath: Ref<string | null>
@@ -121,7 +123,7 @@ export interface CreationFlowContextValue {
 	onBack: (() => void) | null
 
 	// Methods
-	reset: (instanceCount?: number) => void
+	reset: (instanceCount?: number) => Promise<void>
 	setSetupType: (type: SetupType) => void
 	setImportMode: () => void
 	browseModpacks: () => void
@@ -138,7 +140,6 @@ export const [injectCreationFlowContext, provideCreationFlowContext] =
 
 // TODO: replace with actual world count from the world list once available
 let worldCounter = 0
-let instanceCounter = 0
 
 export interface CreationFlowOptions {
 	availableLoaders?: string[]
@@ -147,6 +148,7 @@ export interface CreationFlowOptions {
 	isInitialSetup?: boolean
 	initialLoader?: string
 	initialGameVersion?: string
+	fetchExistingInstanceNames?: () => Promise<string[]>
 	onBack?: () => void
 	searchModpacks?: (query: string, limit?: number) => Promise<ModpackSearchResult>
 	getProjectVersions?: (projectId: string) => Promise<{ id: string }[]>
@@ -183,6 +185,8 @@ export function createCreationFlowContext(
 
 	// Instance-specific state
 	const instanceName = ref('')
+	const existingInstanceNames = ref<string[]>([])
+	const fetchExistingInstanceNames = options.fetchExistingInstanceNames ?? null
 	const instanceIcon = ref<File | null>(null)
 	const instanceIconUrl = ref<string | null>(null)
 	const instanceIconPath = ref<string | null>(null)
@@ -200,6 +204,24 @@ export function createCreationFlowContext(
 	const selectedLoaderVersion = ref<string | null>(null)
 	const showSnapshots = ref(false)
 
+	const autoInstanceName = computed(() => {
+		const loader = selectedLoader.value
+		const version = selectedGameVersion.value
+		if (!version) return ''
+
+		const loaderName = loader ? formatLoaderLabel(loader) : 'Vanilla'
+		const baseName = `${loaderName} ${version}`
+
+		const names = new Set(existingInstanceNames.value)
+		if (!names.has(baseName)) return baseName
+
+		let counter = 1
+		while (names.has(`${baseName} (${counter})`)) {
+			counter++
+		}
+		return `${baseName} (${counter})`
+	})
+
 	const modpackSelection = ref<ModpackSelection | null>(null)
 	const modpackFile = ref<File | null>(null)
 	const modpackFilePath = ref<string | null>(null)
@@ -227,15 +249,14 @@ export function createCreationFlowContext(
 		() => setupType.value === 'vanilla' || selectedLoader.value === 'vanilla',
 	)
 
-	function reset(instanceCount?: number) {
+	async function reset() {
+		if (fetchExistingInstanceNames) {
+			existingInstanceNames.value = await fetchExistingInstanceNames()
+		}
 		setupType.value = null
 		isImportMode.value = false
 		worldCounter++
 		worldName.value = flowType === 'world' ? `World ${worldCounter}` : ''
-		if (instanceCount != null) {
-			instanceCounter = instanceCount
-		}
-		instanceCounter++
 		gamemode.value = 'survival'
 		difficulty.value = 'normal'
 		worldSeed.value = ''
@@ -245,7 +266,7 @@ export function createCreationFlowContext(
 		generatorSettingsCustom.value = ''
 
 		// Instance-specific
-		instanceName.value = flowType === 'instance' ? `New instance (${instanceCounter})` : ''
+		instanceName.value = ''
 		instanceIconUrl.value = null
 		instanceIcon.value = null
 		instanceIconPath.value = null
@@ -356,6 +377,7 @@ export function createCreationFlowContext(
 		generatorSettingsMode,
 		generatorSettingsCustom,
 		instanceName,
+		autoInstanceName,
 		instanceIcon,
 		instanceIconUrl,
 		instanceIconPath,

packages/ui/src/components/flows/creation-flow-modal/index.vue

@@ -31,6 +31,7 @@ const props = withDefaults(
 		isInitialSetup?: boolean
 		initialLoader?: string
 		initialGameVersion?: string
+		fetchExistingInstanceNames?: () => Promise<string[]>
 		onBack?: (() => void) | null
 		fade?: 'standard' | 'warning' | 'danger'
 		searchModpacks?: (query: string, limit?: number) => Promise<ModpackSearchResult>
@@ -44,6 +45,7 @@ const props = withDefaults(
 		isInitialSetup: false,
 		initialLoader: undefined,
 		initialGameVersion: undefined,
+		fetchExistingInstanceNames: undefined,
 		onBack: null,
 	},
 )
@@ -69,6 +71,7 @@ const ctx = createCreationFlowContext(
 		isInitialSetup: props.isInitialSetup,
 		initialLoader: props.initialLoader,
 		initialGameVersion: props.initialGameVersion,
+		fetchExistingInstanceNames: props.fetchExistingInstanceNames,
 		onBack: props.onBack ?? undefined,
 		searchModpacks: props.searchModpacks,
 		getProjectVersions: props.getProjectVersions,
@@ -76,8 +79,8 @@ const ctx = createCreationFlowContext(
 )
 provideCreationFlowContext(ctx)
 
-function show(instanceCount?: number) {
-	ctx.reset(instanceCount)
+async function show() {
+	await ctx.reset()
 	modal.value?.setStage(0)
 	modal.value?.show()
 }

packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts

@@ -6,7 +6,6 @@ import CustomSetupStage from '../components/CustomSetupStage.vue'
 import { type CreationFlowContextValue, flowTypeHeadings } from '../creation-flow-context'
 
 function isForwardBlocked(ctx: CreationFlowContextValue): boolean {
-	if (ctx.flowType === 'instance' && !ctx.instanceName.value?.trim()) return true
 	if (!ctx.selectedGameVersion.value) return true
 	if (!ctx.hideLoaderChips.value && !ctx.selectedLoader.value) return true
 	if (