Fix creating projects from mod install flow (#5402)

* Explicitly state if a mod is incompatible when installing

* wip: debug create instance modal

* Fix mod install createInstance

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

@@ -49,19 +49,14 @@ const creatingInstance = ref(false)
 const profiles = ref([])
 
 const shownProfiles = computed(() =>
-	profiles.value
+	profiles.value.filter((profile) => {
-		.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-			return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	}),
-		})
-		.filter((profile) => {
-			const version = {
-				game_versions: versions.value.flatMap((v) => v.game_versions),
-				loaders: versions.value.flatMap((v) => v.loaders),
-			}
-			return isVersionCompatible(version, project.value, profile)
-		}),
 )
 
+const isProfileCompatible = (profile) =>
+	versions.value?.some((version) => isVersionCompatible(version, project.value, profile))
+
 const onInstall = ref(() => {})
 
 defineExpose({
@@ -164,13 +159,13 @@ const createInstance = async () => {
 	const gameVersion = gameVersions[0]
 
 	const loaders = versions.value[0].loaders
-	const loader = loaders.contains('fabric')
+	const loader = loaders.includes('fabric')
 		? 'fabric'
-		: loaders.contains('neoforge')
+		: loaders.includes('neoforge')
 			? 'neoforge'
-			: loaders.contains('forge')
+			: loaders.includes('forge')
 				? 'forge'
-				: loaders.contains('quilt')
+				: loaders.includes('quilt')
 					? 'quilt'
 					: 'vanilla'
 
@@ -240,17 +235,23 @@ const createInstance = async () => {
 						"
 					>
 						<Button
-							:disabled="profile.installedMod || profile.installing"
+							:disabled="
+								!isProfileCompatible(profile) || profile.installedMod || profile.installing
+							"
 							@click="install(profile)"
 						>
-							<DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+							<DownloadIcon
+								v-if="isProfileCompatible(profile) && !profile.installedMod && !profile.installing"
+							/>
 							<CheckIcon v-else-if="profile.installedMod" />
 							{{
 								profile.installing
 									? 'Installing...'
 									: profile.installedMod
 										? 'Installed'
-										: 'Install'
+										: !isProfileCompatible(profile)
+											? 'Incompatible'
+											: 'Install'
 							}}
 						</Button>
 					</div>