fix: make search use v3 everywhere (#6840)

packages/ui/src/components/project/card/ProjectCard.vue

@@ -68,11 +68,7 @@
 								class="smart-clickable:allow-pointer-events"
 							/>
 						</template>
-						<ProjectCardEnvironment
-							v-if="environment"
-							:client-side="environment.clientSide"
-							:server-side="environment.serverSide"
-						/>
+						<ProjectCardEnvironment v-if="environment" :environment="environment" />
 						<ProjectCardTags
 							v-if="tags"
 							:tags="tags"
@@ -168,11 +164,7 @@
 								class="smart-clickable:allow-pointer-events"
 							/>
 						</template>
-						<ProjectCardEnvironment
-							v-if="environment"
-							:client-side="environment.clientSide"
-							:server-side="environment.serverSide"
-						/>
+						<ProjectCardEnvironment v-if="environment" :environment="environment" />
 						<ProjectCardTags
 							v-if="tags"
 							:tags="tags"
@@ -213,7 +205,7 @@ import ServerRegion from '../server/ServerRegion.vue'
 import ProjectCardAuthor from './ProjectCardAuthor.vue'
 import ProjectCardDate from './ProjectCardDate.vue'
 import ProjectCardEnvironment, {
-	type ProjectCardEnvironmentProps,
+	type ProjectCardEnvironmentValue,
 } from './ProjectCardEnvironment.vue'
 import ProjectCardStats from './ProjectCardStats.vue'
 import ProjectCardTags from './ProjectCardTags.vue'
@@ -257,7 +249,7 @@ const props = defineProps<{
 	isServerProject?: boolean
 	banner?: string
 	color?: string | number
-	environment?: ProjectCardEnvironmentProps
+	environment?: ProjectCardEnvironmentValue
 	status?: ProjectStatus
 	maxTags?: number
 }>()

packages/ui/src/components/project/card/ProjectCardEnvironment.vue

@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ClientIcon, GlobeIcon, ServerIcon } from '@modrinth/assets'
+import { ClientIcon, GlobeIcon, ServerIcon, UserIcon } from '@modrinth/assets'
+import { computed } from 'vue'
 
 import { defineMessages, useVIntl } from '../../../composables'
 import { TagItem } from '../../base'
 
 const { formatMessage } = useVIntl()
 
-export type ProjectCardEnvironmentProps = {
+export type LegacyProjectEnvironment = {
 	clientSide: Labrinth.Projects.v2.Environment
 	serverSide: Labrinth.Projects.v2.Environment
 }
 
-defineProps<ProjectCardEnvironmentProps>()
+export type ProjectCardEnvironmentValue =
+	| Labrinth.Projects.v3.Environment
+	| LegacyProjectEnvironment
+
+export type ProjectCardEnvironmentProps = {
+	environment?: ProjectCardEnvironmentValue
+	clientSide?: Labrinth.Projects.v2.Environment
+	serverSide?: Labrinth.Projects.v2.Environment
+}
+
+const props = defineProps<ProjectCardEnvironmentProps>()
 
 const messages = defineMessages({
 	clientOrServer: {
@@ -31,36 +42,99 @@ const messages = defineMessages({
 		id: 'project-card.environment.server',
 		defaultMessage: 'Server',
 	},
+	singleplayer: {
+		id: 'project-card.environment.singleplayer',
+		defaultMessage: 'Singleplayer',
+	},
+	dedicatedServer: {
+		id: 'project-card.environment.dedicated-server',
+		defaultMessage: 'Dedicated server',
+	},
+})
+
+const displayEnvironment = computed(() => {
+	const environment =
+		props.environment ??
+		(props.clientSide && props.serverSide
+			? { clientSide: props.clientSide, serverSide: props.serverSide }
+			: undefined)
+
+	if (typeof environment === 'string') {
+		switch (environment) {
+			case 'client_or_server':
+			case 'client_or_server_prefers_both':
+				return 'client-or-server'
+			case 'client_and_server':
+				return 'client-and-server'
+			case 'client_only':
+			case 'client_only_server_optional':
+				return 'client'
+			case 'server_only':
+			case 'server_only_client_optional':
+				return 'server'
+			case 'singleplayer_only':
+				return 'singleplayer'
+			case 'dedicated_server_only':
+				return 'dedicated-server'
+			default:
+				return undefined
+		}
+	}
+
+	if (!environment) {
+		return undefined
+	}
+
+	const { clientSide, serverSide } = environment
+
+	if (clientSide === 'optional' && serverSide === 'optional') {
+		return 'client-or-server'
+	}
+	if (clientSide === 'required' && serverSide === 'required') {
+		return 'client-and-server'
+	}
+	if (
+		(clientSide === 'optional' || clientSide === 'required') &&
+		(serverSide === 'optional' || serverSide === 'unsupported')
+	) {
+		return 'client'
+	}
+	if (
+		(serverSide === 'optional' || serverSide === 'required') &&
+		(clientSide === 'optional' || clientSide === 'unsupported')
+	) {
+		return 'server'
+	}
+
+	return undefined
 })
 </script>
 
 <template>
 	<TagItem class="empty:hidden">
-		<template v-if="clientSide === 'optional' && serverSide === 'optional'">
+		<template v-if="displayEnvironment === 'client-or-server'">
 			<GlobeIcon aria-hidden="true" />
 			{{ formatMessage(messages.clientOrServer) }}
 		</template>
-		<template v-else-if="clientSide === 'required' && serverSide === 'required'">
+		<template v-else-if="displayEnvironment === 'client-and-server'">
 			<GlobeIcon aria-hidden="true" />
 			{{ formatMessage(messages.clientAndServer) }}
 		</template>
-		<template
-			v-else-if="
-				(clientSide === 'optional' || clientSide === 'required') &&
-				(serverSide === 'optional' || serverSide === 'unsupported')
-			"
-		>
+		<template v-else-if="displayEnvironment === 'client'">
 			<ClientIcon aria-hidden="true" />
 			{{ formatMessage(messages.client) }}
 		</template>
-		<template
-			v-else-if="
-				(serverSide === 'optional' || serverSide === 'required') &&
-				(clientSide === 'optional' || clientSide === 'unsupported')
-			"
-		>
+		<template v-else-if="displayEnvironment === 'server'">
 			<ServerIcon aria-hidden="true" />
 			{{ formatMessage(messages.server) }}
 		</template>
+		<template v-else-if="displayEnvironment === 'singleplayer'">
+			<UserIcon aria-hidden="true" />
+			{{ formatMessage(messages.singleplayer) }}
+		</template>
+		<template v-else-if="displayEnvironment === 'dedicated-server'">
+			<ServerIcon aria-hidden="true" />
+			{{ formatMessage(messages.dedicatedServer) }}
+		</template>
 	</TagItem>
 </template>

packages/ui/src/components/servers/flows/index.ts

@@ -6,6 +6,7 @@ export type {
 	Gamemode,
 	GeneratorSettingsMode,
 	LoaderVersionType,
+	ModpackSearchResult,
 	SetupType,
 } from '../../flows/creation-flow-modal/creation-flow-context'
 export { default as CreationFlowModal } from '../../flows/creation-flow-modal/index.vue'