From 241c4bfeacd59bf9216b652eb884a381e810a972 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 12:50:05 -0800
Subject: [PATCH 01/26] add environment to version page metadata card

---
 .../stages/AddDetailsStage.vue                | 47 +------------------
 apps/frontend/src/pages/[type]/[id].vue       |  2 +-
 .../pages/[type]/[id]/version/[version].vue   |  7 +++
 .../settings/environment/Environments.ts      | 47 +++++++++++++++++++
 .../src/components/project/settings/index.ts  |  1 +
 5 files changed, 58 insertions(+), 46 deletions(-)
 create mode 100644 packages/ui/src/components/project/settings/environment/Environments.ts

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
index e757627339..fd3083c0f3 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
@@ -155,7 +155,7 @@
 
 <script lang="ts" setup>
 import { EditIcon } from '@modrinth/assets'
-import { ButtonStyled, Chips, TagItem } from '@modrinth/ui'
+import { ButtonStyled, Chips, ENVIRONMENTS_COPY, TagItem } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 
 import { useGeneratedState } from '~/composables/generated'
@@ -222,51 +222,8 @@ const environmentCopy = computed(() => {
 	}
 	if (!draftVersion.value.environment) return emptyMessage
 
-	const envCopy: Record<string, { title: string; description: string }> = {
-		client_only: {
-			title: 'Client-side only',
-			description: 'All functionality is done client-side and is compatible with vanilla servers.',
-		},
-		server_only: {
-			title: 'Server-side only',
-			description: 'All functionality is done server-side and is compatible with vanilla clients.',
-		},
-		singleplayer_only: {
-			title: 'Singleplayer only',
-			description: 'Only functions in Singleplayer or when not connected to a Multiplayer server.',
-		},
-		dedicated_server_only: {
-			title: 'Server-side only',
-			description: 'All functionality is done server-side and is compatible with vanilla clients.',
-		},
-		client_and_server: {
-			title: 'Client and server',
-			description: 'Has some functionality on both the client and server, even if only partially.',
-		},
-		client_only_server_optional: {
-			title: 'Client and server',
-			description: 'Has some functionality on both the client and server, even if only partially.',
-		},
-		server_only_client_optional: {
-			title: 'Client and server',
-			description: 'Has some functionality on both the client and server, even if only partially.',
-		},
-		client_or_server: {
-			title: 'Client and server',
-			description: 'Has some functionality on both the client and server, even if only partially.',
-		},
-		client_or_server_prefers_both: {
-			title: 'Client and server',
-			description: 'Has some functionality on both the client and server, even if only partially.',
-		},
-		unknown: {
-			title: 'Unknown environment',
-			description: 'The environment for this version could not be determined.',
-		},
-	}
-
 	return (
-		envCopy[draftVersion.value.environment] || {
+		ENVIRONMENTS_COPY[draftVersion.value.environment] || {
 			title: 'Unknown environment',
 			description: `The environment: "${draftVersion.value.environment}" is not recognized.`,
 		}
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index ec39508903..a74302b6c2 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1512,7 +1512,7 @@ try {
 			useBaseFetch(`project/${projectId.value}/dependencies`, {}),
 		),
 		useAsyncData(`project/${projectId.value}/version`, () =>
-			useBaseFetch(`project/${projectId.value}/version`),
+			useBaseFetch(`project/${projectId.value}/version`, { apiVersion: 3 }),
 		),
 		useAsyncData(`project/${projectId.value}/organization`, () =>
 			useBaseFetch(`project/${projectId.value}/organization`, { apiVersion: 3 }),
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 6675d802d0..22ec745cf3 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -560,6 +560,12 @@
 					</template>
 					<span v-else>{{ $formatVersion(version.game_versions) }}</span>
 				</div>
+				<div v-if="!isEditing && version.environment">
+					<h4>Environment</h4>
+					<span>
+						{{ ENVIRONMENTS_COPY[version.environment]?.title || version.environment }}
+					</span>
+				</div>
 				<div v-if="!isEditing">
 					<h4>Downloads</h4>
 					<span>{{ version.downloads }}</span>
@@ -635,6 +641,7 @@ import {
 	Checkbox,
 	ConfirmModal,
 	CopyCode,
+	ENVIRONMENTS_COPY,
 	injectNotificationManager,
 	MarkdownEditor,
 } from '@modrinth/ui'
diff --git a/packages/ui/src/components/project/settings/environment/Environments.ts b/packages/ui/src/components/project/settings/environment/Environments.ts
new file mode 100644
index 0000000000..ac57048746
--- /dev/null
+++ b/packages/ui/src/components/project/settings/environment/Environments.ts
@@ -0,0 +1,47 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+export const ENVIRONMENTS_COPY: Record<
+	Labrinth.Projects.v3.Environment,
+	{ title: string; description: string }
+> = {
+	client_only: {
+		title: 'Client-side only',
+		description: 'All functionality is done client-side and is compatible with vanilla servers.',
+	},
+	server_only: {
+		title: 'Server-side only',
+		description: 'All functionality is done server-side and is compatible with vanilla clients.',
+	},
+	singleplayer_only: {
+		title: 'Singleplayer only',
+		description: 'Only functions in Singleplayer or when not connected to a Multiplayer server.',
+	},
+	dedicated_server_only: {
+		title: 'Server-side only',
+		description: 'All functionality is done server-side and is compatible with vanilla clients.',
+	},
+	client_and_server: {
+		title: 'Client and server',
+		description: 'Has some functionality on both the client and server, even if only partially.',
+	},
+	client_only_server_optional: {
+		title: 'Client and server',
+		description: 'Has some functionality on both the client and server, even if only partially.',
+	},
+	server_only_client_optional: {
+		title: 'Client and server',
+		description: 'Has some functionality on both the client and server, even if only partially.',
+	},
+	client_or_server: {
+		title: 'Client and server',
+		description: 'Has some functionality on both the client and server, even if only partially.',
+	},
+	client_or_server_prefers_both: {
+		title: 'Client and server',
+		description: 'Has some functionality on both the client and server, even if only partially.',
+	},
+	unknown: {
+		title: 'Unknown environment',
+		description: 'The environment for this version could not be determined.',
+	},
+}
diff --git a/packages/ui/src/components/project/settings/index.ts b/packages/ui/src/components/project/settings/index.ts
index dc2fb0c137..8195a20fb1 100644
--- a/packages/ui/src/components/project/settings/index.ts
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -1,2 +1,3 @@
 // Environment
+export { ENVIRONMENTS_COPY } from './environment/Environments'
 export { default as ProjectSettingsEnvSelector } from './environment/ProjectSettingsEnvSelector.vue'

From 3cbd96bffbe7cdd0bb7950cba4ce26bf085cc0a0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 13:08:41 -0800
Subject: [PATCH 02/26] remove environment migration warnings

---
 apps/frontend/src/pages/[type]/[id].vue       | 64 -------------------
 .../frontend/src/pages/dashboard/projects.vue | 15 -----
 2 files changed, 79 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index a74302b6c2..3200d947bb 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -746,43 +746,6 @@
 					:auth="auth"
 					:tags="tags"
 				/>
-				<Admonition
-					v-if="
-						currentMember &&
-						projectV3.side_types_migration_review_status === 'pending' &&
-						projectV3.environment?.length === 1 &&
-						projectV3.environment[0] !== 'unknown'
-					"
-					type="warning"
-					:header="
-						formatMessage(
-							hasEditDetailsPermission
-								? messages.environmentMigrationTitle
-								: messages.environmentMigrationNoPermissionTitle,
-						)
-					"
-					class="mt-3"
-				>
-					{{
-						formatMessage(
-							hasEditDetailsPermission
-								? messages.environmentMigrationMessage
-								: messages.environmentMigrationNoPermissionMessage,
-						)
-					}}
-					<nuxt-link
-						to="/news/article/new-environments"
-						target="_blank"
-						class="mt-1 block w-fit font-semibold text-orange hover:underline"
-					>
-						{{ formatMessage(messages.environmentMigrationLink) }}
-					</nuxt-link>
-					<ButtonStyled v-if="hasEditDetailsPermission" color="orange">
-						<nuxt-link :to="`/project/${project.id}/settings/environment`" class="mt-3 w-fit">
-							<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
-						</nuxt-link>
-					</ButtonStyled>
-				</Admonition>
 				<MessageBanner v-if="project.status === 'archived'" message-type="warning" class="my-4">
 					{{ formatMessage(messages.archivedMessage, { title: project.title }) }}
 				</MessageBanner>
@@ -966,7 +929,6 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	Admonition,
 	Avatar,
 	ButtonStyled,
 	Checkbox,
@@ -1182,28 +1144,6 @@ const messages = defineMessages({
 		id: 'project.error.loading',
 		defaultMessage: 'Error loading project data{message}',
 	},
-	environmentMigrationMessage: {
-		id: 'project.environment.migration.message',
-		defaultMessage:
-			"We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct.",
-	},
-	environmentMigrationTitle: {
-		id: 'project.environment.migration.title',
-		defaultMessage: 'Please review environment metadata',
-	},
-	environmentMigrationNoPermissionMessage: {
-		id: 'project.environment.migration-no-permission.message',
-		defaultMessage:
-			"We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified.",
-	},
-	environmentMigrationNoPermissionTitle: {
-		id: 'project.environment.migration-no-permission.title',
-		defaultMessage: 'Environment metadata needs to be reviewed',
-	},
-	environmentMigrationLink: {
-		id: 'project.environment.migration.learn-more',
-		defaultMessage: 'Learn more about this change',
-	},
 	followersStat: {
 		id: 'project.stats.followers-label',
 		defaultMessage: 'follower{count, plural, one {} other {s}}',
@@ -1300,10 +1240,6 @@ const messages = defineMessages({
 		id: 'project.notification.updated.message',
 		defaultMessage: 'Your project has been updated.',
 	},
-	reviewEnvironmentSettings: {
-		id: 'project.environment.migration.review-button',
-		defaultMessage: 'Review environment settings',
-	},
 	reviewProject: {
 		id: 'project.actions.review-project',
 		defaultMessage: 'Review project',
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index f2259ee00e..a82adb6303 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -281,20 +281,6 @@
 						</div>
 
 						<div class="flex !flex-row items-center !justify-end gap-2">
-							<ButtonStyled
-								v-if="projectsWithMigrationWarning.includes(project.id)"
-								circular
-								color="orange"
-							>
-								<nuxt-link
-									v-tooltip="'Please review environment metadata'"
-									:to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
-										project.slug ? project.slug : project.id
-									}/settings/environment`"
-								>
-									<TriangleAlertIcon />
-								</nuxt-link>
-							</ButtonStyled>
 							<ButtonStyled circular>
 								<nuxt-link
 									v-tooltip="formatMessage(commonMessages.settingsLabel)"
@@ -323,7 +309,6 @@ import {
 	SortAscIcon,
 	SortDescIcon,
 	TrashIcon,
-	TriangleAlertIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {

From 5123f906f0b6a7f14288ef9e5d2fb075e0e51698 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 13:44:47 -0800
Subject: [PATCH 03/26] show settings/environments in nav only for staff

---
 apps/frontend/src/pages/[type]/[id]/settings.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue
index ec85ee9184..7b0730a1cf 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings.vue
@@ -15,7 +15,7 @@ import {
 	commonProjectSettingsMessages,
 	injectNotificationManager,
 } from '@modrinth/ui'
-import type { Project, ProjectV3Partial } from '@modrinth/utils'
+import { isStaff, type Project, type ProjectV3Partial } from '@modrinth/utils'
 import { useVIntl } from '@vintl/vintl'
 import { useLocalStorage, useScroll } from '@vueuse/core'
 import { computed } from 'vue'
@@ -25,7 +25,7 @@ import NavStack from '~/components/ui/NavStack.vue'
 
 const { formatMessage } = useVIntl()
 
-defineProps<{
+const props = defineProps<{
 	currentMember: any
 	patchProject: any
 	patchIcon: any
@@ -47,6 +47,11 @@ const organization = defineModel<any>('organization')
 
 const navItems = computed(() => {
 	const base = `${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`
+
+	const showEnvironment =
+		projectV3.value.project_types.some((type) => ['mod', 'modpack'].includes(type)) &&
+		isStaff(props.currentMember.user)
+
 	const items = [
 		{
 			link: `/${base}/settings`,
@@ -101,6 +106,13 @@ const navItems = computed(() => {
 			label: formatMessage(commonProjectSettingsMessages.analytics),
 			icon: ChartIcon,
 		},
+		{ type: 'heading', label: 'moderation', shown: showEnvironment },
+		{
+			link: `/${base}/settings/environment`,
+			label: formatMessage(commonProjectSettingsMessages.environment),
+			icon: ChartIcon,
+			shown: showEnvironment,
+		},
 	]
 	return items.filter(Boolean) as any[]
 })

From b2c470c801b03414bd27d6eeca90f1ba3d03fc8b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 15:02:11 -0800
Subject: [PATCH 04/26] use v2 versions route due to regressions

---
 apps/frontend/src/pages/[type]/[id].vue             |  2 +-
 .../src/pages/[type]/[id]/version/[version].vue     | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 3200d947bb..052106b94e 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1448,7 +1448,7 @@ try {
 			useBaseFetch(`project/${projectId.value}/dependencies`, {}),
 		),
 		useAsyncData(`project/${projectId.value}/version`, () =>
-			useBaseFetch(`project/${projectId.value}/version`, { apiVersion: 3 }),
+			useBaseFetch(`project/${projectId.value}/version`),
 		),
 		useAsyncData(`project/${projectId.value}/organization`, () =>
 			useBaseFetch(`project/${projectId.value}/organization`, { apiVersion: 3 }),
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 22ec745cf3..13305ede16 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -563,7 +563,7 @@
 				<div v-if="!isEditing && version.environment">
 					<h4>Environment</h4>
 					<span>
-						{{ ENVIRONMENTS_COPY[version.environment]?.title || version.environment }}
+						{{ environmentTitle }}
 					</span>
 				</div>
 				<div v-if="!isEditing">
@@ -824,6 +824,12 @@ export default defineNuxtComponent({
 			if (!version) {
 				version = props.versions.find((x) => x.displayUrlEnding === route.params.version)
 			}
+
+			const versionV3 = await useBaseFetch(
+				`project/${props.project.id}/version/${route.params.version}`,
+				{ apiVersion: 3 },
+			)
+			if (versionV3) version.environment = versionV3.environment
 		}
 
 		if (!version) {
@@ -940,6 +946,11 @@ export default defineNuxtComponent({
 				(a, b) => order.indexOf(a.dependency_type) - order.indexOf(b.dependency_type),
 			)
 		},
+		environmentTitle() {
+			return (
+				ENVIRONMENTS_COPY[this.version.environment]?.title || this.version.environment || 'Unknown'
+			)
+		},
 	},
 	watch: {
 		'$route.path'() {

From 13131f73927576446b4dcf518e3a19abec38217b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 15:17:05 -0800
Subject: [PATCH 05/26] add modpack incorrect loaders migration

---
 .../create-project-version/CreateProjectVersionModal.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
index 98fa4f8632..cebc54907f 100644
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -32,6 +32,15 @@ async function openEditVersionModal(versionId: string, projectId: string, stageI
 	try {
 		const versionData = await labrinth.versions_v3.getVersion(versionId)
 
+		// migrate any non "mrpack" loaders into mrpack_loaders. modpack loader field is always only "mrpack"
+		if (projectV2.value.project_type === 'modpack') {
+			const nonMrpackLoaders = versionData.loaders?.filter((loader) => loader !== 'mrpack') ?? []
+			versionData.mrpack_loaders = [
+				...new Set([...nonMrpackLoaders, ...(versionData.mrpack_loaders ?? [])]), // set to avoid duplicates
+			]
+			versionData.loaders = ['mrpack']
+		}
+
 		const draftVersionData: Labrinth.Versions.v3.DraftVersion = {
 			project_id: projectId,
 			version_id: versionId,

From edd5903047a638d3f86bfa4eb0d7af8f2113e56d Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 16:42:44 -0800
Subject: [PATCH 06/26] remove modpack migration step

---
 .../create-project-version/CreateProjectVersionModal.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
index cebc54907f..98fa4f8632 100644
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -32,15 +32,6 @@ async function openEditVersionModal(versionId: string, projectId: string, stageI
 	try {
 		const versionData = await labrinth.versions_v3.getVersion(versionId)
 
-		// migrate any non "mrpack" loaders into mrpack_loaders. modpack loader field is always only "mrpack"
-		if (projectV2.value.project_type === 'modpack') {
-			const nonMrpackLoaders = versionData.loaders?.filter((loader) => loader !== 'mrpack') ?? []
-			versionData.mrpack_loaders = [
-				...new Set([...nonMrpackLoaders, ...(versionData.mrpack_loaders ?? [])]), // set to avoid duplicates
-			]
-			versionData.loaders = ['mrpack']
-		}
-
 		const draftVersionData: Labrinth.Versions.v3.DraftVersion = {
 			project_id: projectId,
 			version_id: versionId,

From 624e79243164ff4c9149fe216c6c4113b443aae6 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 16:44:18 -0800
Subject: [PATCH 07/26] remove unused var

---
 apps/frontend/src/pages/[type]/[id].vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 052106b94e..e56f650923 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1582,11 +1582,6 @@ const currentMember = computed(() => {
 	return val
 })
 
-const hasEditDetailsPermission = computed(() => {
-	const EDIT_DETAILS = 1 << 2
-	return (currentMember.value?.permissions & EDIT_DETAILS) === EDIT_DETAILS
-})
-
 versions.value = data.$computeVersions(versions.value, allMembers.value)
 
 const projectTypeDisplay = computed(() =>

From 158357abf6a1ec5a3334a08bb8bf4b1b1c3bd800 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 22 Dec 2025 17:03:26 -0800
Subject: [PATCH 08/26] run pnpm intl:extract

---
 apps/frontend/src/locales/en-US/index.json | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 04e03a5099..5f40633053 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2117,24 +2117,6 @@
   "project.download.title": {
     "message": "Download {title}"
   },
-  "project.environment.migration-no-permission.message": {
-    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified."
-  },
-  "project.environment.migration-no-permission.title": {
-    "message": "Environment metadata needs to be reviewed"
-  },
-  "project.environment.migration.learn-more": {
-    "message": "Learn more about this change"
-  },
-  "project.environment.migration.message": {
-    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct."
-  },
-  "project.environment.migration.review-button": {
-    "message": "Review environment settings"
-  },
-  "project.environment.migration.title": {
-    "message": "Please review environment metadata"
-  },
   "project.error.loading": {
     "message": "Error loading project data{message}"
   },

From c406f6c6009cac222e281588bf9ee18917ee481a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 23 Dec 2025 11:10:22 -0800
Subject: [PATCH 09/26] componentize environment migration page

---
 .../[type]/[id]/settings/environment.vue      | 179 +-----------------
 .../environment/EnvironmentMigration.vue      | 177 +++++++++++++++++
 .../environment/ProjectEnvironmentModal.vue   |  26 +++
 .../ProjectSettingsEnvSelector.vue            |  13 +-
 .../src/components/project/settings/index.ts  |   1 +
 5 files changed, 216 insertions(+), 180 deletions(-)
 create mode 100644 packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
 create mode 100644 packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue

diff --git a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
index 8a43a07776..c483d8f1ff 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
@@ -1,176 +1,7 @@
-<script setup lang="ts">
-import { CheckIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	commonProjectSettingsMessages,
-	injectModrinthClient,
-	injectNotificationManager,
-	injectProjectPageContext,
-	ProjectSettingsEnvSelector,
-	UnsavedChangesPopup,
-	useSavable,
-} from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-
-const { formatMessage } = useVIntl()
-
-const { currentMember, projectV2, projectV3, refreshProject } = injectProjectPageContext()
-const { handleError } = injectNotificationManager()
-const client = injectModrinthClient()
-
-const saving = ref(false)
-
-const supportsEnvironment = computed(() =>
-	projectV3.value.project_types.some((type) => ['mod', 'modpack'].includes(type)),
-)
-
-const needsToVerify = computed(
-	() =>
-		projectV3.value.side_types_migration_review_status === 'pending' &&
-		(projectV3.value.environment?.length ?? 0) > 0 &&
-		projectV3.value.environment?.[0] !== 'unknown' &&
-		supportsEnvironment.value,
-)
-
-const hasPermission = computed(() => {
-	const EDIT_DETAILS = 1 << 2
-	return (currentMember.value?.permissions & EDIT_DETAILS) === EDIT_DETAILS
-})
-
-function getInitialEnv() {
-	return projectV3.value.environment?.length === 1 ? projectV3.value.environment[0] : undefined
-}
-
-const { saved, current, reset, save } = useSavable(
-	() => ({
-		environment: getInitialEnv(),
-		side_types_migration_review_status: projectV3.value.side_types_migration_review_status,
-	}),
-	({ environment, side_types_migration_review_status }) => {
-		saving.value = true
-		side_types_migration_review_status = 'reviewed'
-		client.labrinth.projects_v3
-			.edit(projectV2.value.id, { environment, side_types_migration_review_status })
-			.then(() => refreshProject().then(reset))
-			.catch(handleError)
-			.finally(() => (saving.value = false))
-	},
-)
-// Set current to reviewed, which will trigger unsaved changes popup.
-// It should not be possible to save without reviewing it.
-const originalEnv = getInitialEnv()
-if (originalEnv && originalEnv !== 'unknown') {
-	current.value.side_types_migration_review_status = 'reviewed'
-}
-
-const messages = defineMessages({
-	verifyButton: {
-		id: 'project.settings.environment.verification.verify-button',
-		defaultMessage: 'Verify',
-	},
-	verifyLabel: {
-		id: 'project.settings.environment.verification.verify-text',
-		defaultMessage: `Verify that this project's environment is set correctly.`,
-	},
-	wrongProjectTypeTitle: {
-		id: 'project.settings.environment.notice.wrong-project-type.title',
-		defaultMessage: `This project type does not support environment metadata`,
-	},
-	wrongProjectTypeDescription: {
-		id: 'project.settings.environment.notice.wrong-project-type.description',
-		defaultMessage: `Only mod or modpack projects can have environment metadata.`,
-	},
-	missingEnvTitle: {
-		id: 'project.settings.environment.notice.missing-env.title',
-		defaultMessage: `Please select an environment for your project`,
-	},
-	missingEnvDescription: {
-		id: 'project.settings.environment.notice.missing-env.description',
-		defaultMessage: `Your project is missing environment metadata, please select the appropriate option below.`,
-	},
-	multipleEnvironmentsTitle: {
-		id: 'project.settings.environment.notice.multiple-environments.title',
-		defaultMessage: 'Your project has multiple environments',
-	},
-	multipleEnvironmentsDescription: {
-		id: 'project.settings.environment.notice.multiple-environments.description',
-		defaultMessage:
-			"Different versions of your project have different environments selected, so you can't edit them globally at this time.",
-	},
-	reviewOptionsTitle: {
-		id: 'project.settings.environment.notice.review-options.title',
-		defaultMessage: 'Please review the options below',
-	},
-	reviewOptionsDescription: {
-		id: 'project.settings.environment.notice.review-options.description',
-		defaultMessage:
-			"We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!",
-	},
-})
-</script>
 <template>
-	<div>
-		<div class="card experimental-styles-within">
-			<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">
-				{{ formatMessage(commonProjectSettingsMessages.environment) }}
-			</h2>
-			<Admonition
-				v-if="!supportsEnvironment"
-				type="critical"
-				:header="formatMessage(messages.wrongProjectTypeTitle)"
-				:body="formatMessage(messages.wrongProjectTypeDescription)"
-				class="mb-3"
-			/>
-			<template v-else>
-				<Admonition
-					v-if="!hasPermission"
-					type="critical"
-					:header="formatMessage(commonProjectSettingsMessages.noPermissionTitle)"
-					:body="formatMessage(commonProjectSettingsMessages.noPermissionDescription)"
-					class="mb-3"
-				/>
-				<Admonition
-					v-else-if="
-						!projectV3.environment ||
-						projectV3.environment.length === 0 ||
-						(projectV3.environment.length === 1 && projectV3.environment[0] === 'unknown')
-					"
-					type="critical"
-					:header="formatMessage(messages.missingEnvTitle)"
-					:body="formatMessage(messages.missingEnvDescription)"
-					class="mb-3"
-				/>
-				<Admonition
-					v-else-if="projectV3.environment.length > 1"
-					type="info"
-					:header="formatMessage(messages.multipleEnvironmentsTitle)"
-					:body="formatMessage(messages.multipleEnvironmentsDescription)"
-					class="mb-3"
-				/>
-				<Admonition
-					v-else-if="needsToVerify"
-					type="warning"
-					:header="formatMessage(messages.reviewOptionsTitle)"
-					:body="formatMessage(messages.reviewOptionsDescription)"
-					class="mb-3"
-				/>
-				<ProjectSettingsEnvSelector
-					v-model="current.environment"
-					:disabled="!hasPermission || (projectV3?.environment?.length ?? 0) > 1"
-				/>
-			</template>
-		</div>
-		<UnsavedChangesPopup
-			v-if="supportsEnvironment && hasPermission && (projectV3?.environment?.length ?? 0) <= 1"
-			:original="saved"
-			:modified="current"
-			:saving="saving"
-			:can-reset="!needsToVerify"
-			:text="needsToVerify ? messages.verifyLabel : undefined"
-			:save-label="needsToVerify ? messages.verifyButton : undefined"
-			:save-icon="needsToVerify ? CheckIcon : undefined"
-			@reset="reset"
-			@save="save"
-		/>
-	</div>
+	<EnvironmentMigration />
 </template>
+
+<script setup lang="ts">
+import { EnvironmentMigration } from '@modrinth/ui'
+</script>
diff --git a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
new file mode 100644
index 0000000000..c22938ba5c
--- /dev/null
+++ b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { CheckIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	commonProjectSettingsMessages,
+	injectModrinthClient,
+	injectNotificationManager,
+	injectProjectPageContext,
+	ProjectSettingsEnvSelector,
+	UnsavedChangesPopup,
+	useSavable,
+} from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const { currentMember, projectV2, projectV3, refreshProject } = injectProjectPageContext()
+const { handleError } = injectNotificationManager()
+const client = injectModrinthClient()
+
+const saving = ref(false)
+
+const supportsEnvironment = computed(() =>
+	projectV3.value.project_types.some((type) => ['mod', 'modpack'].includes(type)),
+)
+
+const needsToVerify = computed(
+	() =>
+		projectV3.value.side_types_migration_review_status === 'pending' &&
+		(projectV3.value.environment?.length ?? 0) > 0 &&
+		projectV3.value.environment?.[0] !== 'unknown' &&
+		supportsEnvironment.value,
+)
+
+const hasPermission = computed(() => {
+	const EDIT_DETAILS = 1 << 2
+	return (currentMember.value?.permissions & EDIT_DETAILS) === EDIT_DETAILS
+})
+
+function getInitialEnv() {
+	return projectV3.value.environment?.length === 1 ? projectV3.value.environment[0] : undefined
+}
+
+const { saved, current, reset, save } = useSavable(
+	() => ({
+		environment: getInitialEnv(),
+		side_types_migration_review_status: projectV3.value.side_types_migration_review_status,
+	}),
+	({ environment, side_types_migration_review_status }) => {
+		saving.value = true
+		side_types_migration_review_status = 'reviewed'
+		client.labrinth.projects_v3
+			.edit(projectV2.value.id, { environment, side_types_migration_review_status })
+			.then(() => refreshProject().then(reset))
+			.catch(handleError)
+			.finally(() => (saving.value = false))
+	},
+)
+// Set current to reviewed, which will trigger unsaved changes popup.
+// It should not be possible to save without reviewing it.
+const originalEnv = getInitialEnv()
+if (originalEnv && originalEnv !== 'unknown') {
+	current.value.side_types_migration_review_status = 'reviewed'
+}
+
+const messages = defineMessages({
+	verifyButton: {
+		id: 'project.settings.environment.verification.verify-button',
+		defaultMessage: 'Verify',
+	},
+	verifyLabel: {
+		id: 'project.settings.environment.verification.verify-text',
+		defaultMessage: `Verify that this project's environment is set correctly.`,
+	},
+	wrongProjectTypeTitle: {
+		id: 'project.settings.environment.notice.wrong-project-type.title',
+		defaultMessage: `This project type does not support environment metadata`,
+	},
+	wrongProjectTypeDescription: {
+		id: 'project.settings.environment.notice.wrong-project-type.description',
+		defaultMessage: `Only mod or modpack projects can have environment metadata.`,
+	},
+	missingEnvTitle: {
+		id: 'project.settings.environment.notice.missing-env.title',
+		defaultMessage: `Please select an environment for your project`,
+	},
+	missingEnvDescription: {
+		id: 'project.settings.environment.notice.missing-env.description',
+		defaultMessage: `Your project is missing environment metadata, please select the appropriate option below.`,
+	},
+	multipleEnvironmentsTitle: {
+		id: 'project.settings.environment.notice.multiple-environments.title',
+		defaultMessage: 'Your project has multiple environments',
+	},
+	multipleEnvironmentsDescription: {
+		id: 'project.settings.environment.notice.multiple-environments.description',
+		defaultMessage:
+			"Different versions of your project have different environments selected, so you can't edit them globally at this time.",
+	},
+	reviewOptionsTitle: {
+		id: 'project.settings.environment.notice.review-options.title',
+		defaultMessage: 'Please review the options below',
+	},
+	reviewOptionsDescription: {
+		id: 'project.settings.environment.notice.review-options.description',
+		defaultMessage:
+			"We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!",
+	},
+})
+</script>
+<template>
+	<div>
+		<div class="card experimental-styles-within">
+			<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">
+				{{ formatMessage(commonProjectSettingsMessages.environment) }}
+			</h2>
+			<Admonition
+				v-if="!supportsEnvironment"
+				type="critical"
+				:header="formatMessage(messages.wrongProjectTypeTitle)"
+				:body="formatMessage(messages.wrongProjectTypeDescription)"
+				class="mb-3"
+			/>
+			<template v-else>
+				<Admonition
+					v-if="!hasPermission"
+					type="critical"
+					:header="formatMessage(commonProjectSettingsMessages.noPermissionTitle)"
+					:body="formatMessage(commonProjectSettingsMessages.noPermissionDescription)"
+					class="mb-3"
+				/>
+				<Admonition
+					v-else-if="
+						!projectV3.environment ||
+						projectV3.environment.length === 0 ||
+						(projectV3.environment.length === 1 && projectV3.environment[0] === 'unknown')
+					"
+					type="critical"
+					:header="formatMessage(messages.missingEnvTitle)"
+					:body="formatMessage(messages.missingEnvDescription)"
+					class="mb-3"
+				/>
+				<Admonition
+					v-else-if="projectV3.environment.length > 1"
+					type="info"
+					:header="formatMessage(messages.multipleEnvironmentsTitle)"
+					:body="formatMessage(messages.multipleEnvironmentsDescription)"
+					class="mb-3"
+				/>
+				<Admonition
+					v-else-if="needsToVerify"
+					type="warning"
+					:header="formatMessage(messages.reviewOptionsTitle)"
+					:body="formatMessage(messages.reviewOptionsDescription)"
+					class="mb-3"
+				/>
+				<ProjectSettingsEnvSelector
+					v-model="current.environment"
+					:disabled="!hasPermission || (projectV3?.environment?.length ?? 0) > 1"
+				/>
+			</template>
+		</div>
+		<UnsavedChangesPopup
+			v-if="supportsEnvironment && hasPermission && (projectV3?.environment?.length ?? 0) <= 1"
+			:original="saved"
+			:modified="current"
+			:saving="saving"
+			:can-reset="!needsToVerify"
+			:text="needsToVerify ? messages.verifyLabel : undefined"
+			:save-label="needsToVerify ? messages.verifyButton : undefined"
+			:save-icon="needsToVerify ? CheckIcon : undefined"
+			@reset="reset"
+			@save="save"
+		/>
+	</div>
+</template>
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
new file mode 100644
index 0000000000..5b9f101d93
--- /dev/null
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<NewModal ref="modal" :scrollable="true" max-content-height="72vh" :closable="true">
+		<EnvironmentMigration />
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { NewModal } from '../../../modal'
+import EnvironmentMigration from './EnvironmentMigration.vue'
+
+const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+
+function show() {
+	modal.value?.show()
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({
+	show,
+	hide,
+})
+</script>
diff --git a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
index 9de9cde182..fc661859f3 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
@@ -33,7 +33,10 @@ const optionLabelFormat = defineMessage({
 	defaultMessage: '{title}: {description}',
 })
 
-const OUTER_OPTIONS = {
+const OUTER_OPTIONS: Record<
+	string,
+	EnvironmentRadioOption & { suboptions: Record<string, EnvironmentRadioOption> }
+> = {
 	client: {
 		title: defineMessage({
 			id: 'project.settings.environment.client_only.title',
@@ -125,10 +128,8 @@ const OUTER_OPTIONS = {
 		}),
 		suboptions: {},
 	},
-} as const satisfies Record<
-	string,
-	EnvironmentRadioOption & { suboptions: Record<string, EnvironmentRadioOption> }
->
+} as const
+
 type OuterOptionKey = keyof typeof OUTER_OPTIONS
 type SubOptionKey = ValidKeys<(typeof OUTER_OPTIONS)[keyof typeof OUTER_OPTIONS]['suboptions']>
 
@@ -248,7 +249,7 @@ const simulateSave = ref(false)
 				:aria-label="
 					formatMessage(optionLabelFormat, {
 						title: formatMessage(title),
-						description: formatMessage(description),
+						description: description ? formatMessage(description) : '',
 					})
 				"
 				@select="
diff --git a/packages/ui/src/components/project/settings/index.ts b/packages/ui/src/components/project/settings/index.ts
index 8195a20fb1..a4ccfff58d 100644
--- a/packages/ui/src/components/project/settings/index.ts
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -1,3 +1,4 @@
 // Environment
+export { default as EnvironmentMigration } from './environment/EnvironmentMigration.vue'
 export { ENVIRONMENTS_COPY } from './environment/Environments'
 export { default as ProjectSettingsEnvSelector } from './environment/ProjectSettingsEnvSelector.vue'

From ea1b3870bc6ee0f7b93620d4ec7c25f5fd72491c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 23 Dec 2025 11:10:46 -0800
Subject: [PATCH 10/26] rename environment selector

---
 .../{ProjectSettingsEnvSelector.vue => EnvironmentSelector.vue}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/ui/src/components/project/settings/environment/{ProjectSettingsEnvSelector.vue => EnvironmentSelector.vue} (100%)

diff --git a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue b/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue
similarity index 100%
rename from packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
rename to packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue

From 18a335164da5c746174c531ef098f4b74697fe32 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 23 Dec 2025 11:12:13 -0800
Subject: [PATCH 11/26] rename environment selector pt2

---
 .../ui/create-project-version/stages/AddEnvironmentStage.vue  | 4 ++--
 .../project/settings/environment/EnvironmentMigration.vue     | 4 ++--
 packages/ui/src/components/project/settings/index.ts          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue
index ee04d8a614..f115f6c0b0 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="sm:w-[512px]">
-		<ProjectSettingsEnvSelector v-model="draftVersion.environment" />
+		<EnvironmentSelector v-model="draftVersion.environment" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ProjectSettingsEnvSelector } from '@modrinth/ui'
+import { EnvironmentSelector } from '@modrinth/ui'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
diff --git a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
index c22938ba5c..40d5753a00 100644
--- a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
+++ b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
@@ -3,10 +3,10 @@ import { CheckIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	commonProjectSettingsMessages,
+	EnvironmentSelector,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	ProjectSettingsEnvSelector,
 	UnsavedChangesPopup,
 	useSavable,
 } from '@modrinth/ui'
@@ -155,7 +155,7 @@ const messages = defineMessages({
 					:body="formatMessage(messages.reviewOptionsDescription)"
 					class="mb-3"
 				/>
-				<ProjectSettingsEnvSelector
+				<EnvironmentSelector
 					v-model="current.environment"
 					:disabled="!hasPermission || (projectV3?.environment?.length ?? 0) > 1"
 				/>
diff --git a/packages/ui/src/components/project/settings/index.ts b/packages/ui/src/components/project/settings/index.ts
index a4ccfff58d..5916fa3029 100644
--- a/packages/ui/src/components/project/settings/index.ts
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -1,4 +1,4 @@
 // Environment
 export { default as EnvironmentMigration } from './environment/EnvironmentMigration.vue'
 export { ENVIRONMENTS_COPY } from './environment/Environments'
-export { default as ProjectSettingsEnvSelector } from './environment/ProjectSettingsEnvSelector.vue'
+export { default as EnvironmentSelector } from './environment/EnvironmentSelector.vue'

From d19a192b350779f3f2022257d533dbe5fed41823 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 23 Dec 2025 14:27:20 -0800
Subject: [PATCH 12/26] add migration modal to admonition

---
 apps/frontend/src/pages/[type]/[id].vue       | 77 ++++++++++++++++
 .../[type]/[id]/settings/environment.vue      |  5 +-
 .../environment/EnvironmentMigration.vue      | 87 +++++++++----------
 .../environment/ProjectEnvironmentModal.vue   |  9 +-
 .../src/components/project/settings/index.ts  |  1 +
 5 files changed, 130 insertions(+), 49 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index e56f650923..79dd4ea9d4 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -746,6 +746,43 @@
 					:auth="auth"
 					:tags="tags"
 				/>
+				<Admonition
+					v-if="
+						currentMember &&
+						projectV3.side_types_migration_review_status === 'pending' &&
+						projectV3.environment?.length === 1 &&
+						projectV3.environment[0] !== 'unknown'
+					"
+					type="warning"
+					:header="
+						formatMessage(
+							hasEditDetailsPermission
+								? messages.environmentMigrationTitle
+								: messages.environmentMigrationNoPermissionTitle,
+						)
+					"
+					class="mt-3"
+				>
+					{{
+						formatMessage(
+							hasEditDetailsPermission
+								? messages.environmentMigrationMessage
+								: messages.environmentMigrationNoPermissionMessage,
+						)
+					}}
+					<nuxt-link
+						to="/news/article/new-environments"
+						target="_blank"
+						class="mt-1 block w-fit font-semibold text-orange hover:underline"
+					>
+						{{ formatMessage(messages.environmentMigrationLink) }}
+					</nuxt-link>
+					<ButtonStyled v-if="hasEditDetailsPermission" color="orange">
+						<button v-on:click="() => projectEnvironmentModal.show()" class="mt-3 w-fit">
+							<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
+						</button>
+					</ButtonStyled>
+				</Admonition>
 				<MessageBanner v-if="project.status === 'archived'" message-type="warning" class="my-4">
 					{{ formatMessage(messages.archivedMessage, { title: project.title }) }}
 				</MessageBanner>
@@ -899,6 +936,10 @@
 			@toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
 		/>
 	</div>
+
+	<template v-if="hasEditDetailsPermission">
+		<ProjectEnvironmentModal ref="projectEnvironmentModal" />
+	</template>
 </template>
 
 <script setup>
@@ -929,6 +970,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	Admonition,
 	Avatar,
 	ButtonStyled,
 	Checkbox,
@@ -938,6 +980,7 @@ import {
 	OverflowMenu,
 	PopoutMenu,
 	ProjectBackgroundGradient,
+	ProjectEnvironmentModal,
 	ProjectHeader,
 	ProjectSidebarCompatibility,
 	ProjectSidebarCreators,
@@ -957,6 +1000,7 @@ import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 
 import { navigateTo } from '#app'
+import { useTemplateRef } from 'vue'
 import Accordion from '~/components/ui/Accordion.vue'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import AutomaticAccordion from '~/components/ui/AutomaticAccordion.vue'
@@ -998,6 +1042,8 @@ const gameVersionFilterInput = ref()
 
 const versionFilter = ref('')
 
+const projectEnvironmentModal = useTemplateRef('projectEnvironmentModal')
+
 const baseId = useId()
 
 const currentGameVersion = computed(() => {
@@ -1144,6 +1190,28 @@ const messages = defineMessages({
 		id: 'project.error.loading',
 		defaultMessage: 'Error loading project data{message}',
 	},
+	environmentMigrationMessage: {
+		id: 'project.environment.migration.message',
+		defaultMessage:
+			"We've just overhauled the Environments system on Modrinth and new options are now available. Please verify that the metadata is correct.",
+	},
+	environmentMigrationTitle: {
+		id: 'project.environment.migration.title',
+		defaultMessage: 'Please review environment metadata',
+	},
+	environmentMigrationNoPermissionMessage: {
+		id: 'project.environment.migration-no-permission.message',
+		defaultMessage:
+			"We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified.",
+	},
+	environmentMigrationNoPermissionTitle: {
+		id: 'project.environment.migration-no-permission.title',
+		defaultMessage: 'Environment metadata needs to be reviewed',
+	},
+	environmentMigrationLink: {
+		id: 'project.environment.migration.learn-more',
+		defaultMessage: 'Learn more about this change',
+	},
 	followersStat: {
 		id: 'project.stats.followers-label',
 		defaultMessage: 'follower{count, plural, one {} other {s}}',
@@ -1240,6 +1308,10 @@ const messages = defineMessages({
 		id: 'project.notification.updated.message',
 		defaultMessage: 'Your project has been updated.',
 	},
+	reviewEnvironmentSettings: {
+		id: 'project.environment.migration.review-button',
+		defaultMessage: 'Review environment settings',
+	},
 	reviewProject: {
 		id: 'project.actions.review-project',
 		defaultMessage: 'Review project',
@@ -1582,6 +1654,11 @@ const currentMember = computed(() => {
 	return val
 })
 
+const hasEditDetailsPermission = computed(() => {
+	const EDIT_DETAILS = 1 << 2
+	return (currentMember.value?.permissions & EDIT_DETAILS) === EDIT_DETAILS
+})
+
 versions.value = data.$computeVersions(versions.value, allMembers.value)
 
 const projectTypeDisplay = computed(() =>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
index c483d8f1ff..d3317e67f3 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
@@ -1,5 +1,8 @@
 <template>
-	<EnvironmentMigration />
+	<div class="card experimental-styles-within">
+		<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">Project environment</h2>
+		<EnvironmentMigration />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
index 40d5753a00..7d90445125 100644
--- a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
+++ b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
@@ -111,56 +111,51 @@ const messages = defineMessages({
 </script>
 <template>
 	<div>
-		<div class="card experimental-styles-within">
-			<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">
-				{{ formatMessage(commonProjectSettingsMessages.environment) }}
-			</h2>
+		<Admonition
+			v-if="!supportsEnvironment"
+			type="critical"
+			:header="formatMessage(messages.wrongProjectTypeTitle)"
+			:body="formatMessage(messages.wrongProjectTypeDescription)"
+			class="mb-3"
+		/>
+		<template v-else>
+			<Admonition
+				v-if="!hasPermission"
+				type="critical"
+				:header="formatMessage(commonProjectSettingsMessages.noPermissionTitle)"
+				:body="formatMessage(commonProjectSettingsMessages.noPermissionDescription)"
+				class="mb-3"
+			/>
 			<Admonition
-				v-if="!supportsEnvironment"
+				v-else-if="
+					!projectV3.environment ||
+					projectV3.environment.length === 0 ||
+					(projectV3.environment.length === 1 && projectV3.environment[0] === 'unknown')
+				"
 				type="critical"
-				:header="formatMessage(messages.wrongProjectTypeTitle)"
-				:body="formatMessage(messages.wrongProjectTypeDescription)"
+				:header="formatMessage(messages.missingEnvTitle)"
+				:body="formatMessage(messages.missingEnvDescription)"
+				class="mb-3"
+			/>
+			<Admonition
+				v-else-if="projectV3.environment.length > 1"
+				type="info"
+				:header="formatMessage(messages.multipleEnvironmentsTitle)"
+				:body="formatMessage(messages.multipleEnvironmentsDescription)"
+				class="mb-3"
+			/>
+			<Admonition
+				v-else-if="needsToVerify"
+				type="warning"
+				:header="formatMessage(messages.reviewOptionsTitle)"
+				:body="formatMessage(messages.reviewOptionsDescription)"
 				class="mb-3"
 			/>
-			<template v-else>
-				<Admonition
-					v-if="!hasPermission"
-					type="critical"
-					:header="formatMessage(commonProjectSettingsMessages.noPermissionTitle)"
-					:body="formatMessage(commonProjectSettingsMessages.noPermissionDescription)"
-					class="mb-3"
-				/>
-				<Admonition
-					v-else-if="
-						!projectV3.environment ||
-						projectV3.environment.length === 0 ||
-						(projectV3.environment.length === 1 && projectV3.environment[0] === 'unknown')
-					"
-					type="critical"
-					:header="formatMessage(messages.missingEnvTitle)"
-					:body="formatMessage(messages.missingEnvDescription)"
-					class="mb-3"
-				/>
-				<Admonition
-					v-else-if="projectV3.environment.length > 1"
-					type="info"
-					:header="formatMessage(messages.multipleEnvironmentsTitle)"
-					:body="formatMessage(messages.multipleEnvironmentsDescription)"
-					class="mb-3"
-				/>
-				<Admonition
-					v-else-if="needsToVerify"
-					type="warning"
-					:header="formatMessage(messages.reviewOptionsTitle)"
-					:body="formatMessage(messages.reviewOptionsDescription)"
-					class="mb-3"
-				/>
-				<EnvironmentSelector
-					v-model="current.environment"
-					:disabled="!hasPermission || (projectV3?.environment?.length ?? 0) > 1"
-				/>
-			</template>
-		</div>
+			<EnvironmentSelector
+				v-model="current.environment"
+				:disabled="!hasPermission || (projectV3?.environment?.length ?? 0) > 1"
+			/>
+		</template>
 		<UnsavedChangesPopup
 			v-if="supportsEnvironment && hasPermission && (projectV3?.environment?.length ?? 0) <= 1"
 			:original="saved"
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index 5b9f101d93..33a25c28fc 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -1,6 +1,11 @@
 <template>
-	<NewModal ref="modal" :scrollable="true" max-content-height="72vh" :closable="true">
-		<EnvironmentMigration />
+	<NewModal ref="modal" :scrollable="true" max-content-height="82vh" :closable="true">
+		<template #title>
+			<span class="text-lg font-extrabold text-contrast">Edit project Environment</span>
+		</template>
+		<div class="mb-24 max-w-[600px]">
+			<EnvironmentMigration />
+		</div>
 	</NewModal>
 </template>
 
diff --git a/packages/ui/src/components/project/settings/index.ts b/packages/ui/src/components/project/settings/index.ts
index 5916fa3029..19e1491fc3 100644
--- a/packages/ui/src/components/project/settings/index.ts
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -2,3 +2,4 @@
 export { default as EnvironmentMigration } from './environment/EnvironmentMigration.vue'
 export { ENVIRONMENTS_COPY } from './environment/Environments'
 export { default as EnvironmentSelector } from './environment/EnvironmentSelector.vue'
+export { default as ProjectEnvironmentModal } from './environment/ProjectEnvironmentModal.vue'

From 7407e818c2c862498590d030807c48d82561d4c1 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 23 Dec 2025 14:39:01 -0800
Subject: [PATCH 13/26] hide environments in settings and show message

---
 .../[type]/[id]/settings/environment.vue      | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
index d3317e67f3..90e1f1a56d 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
@@ -1,10 +1,36 @@
 <template>
-	<div class="card experimental-styles-within">
+	<div v-if="showEnvironmentMigration" class="card experimental-styles-within">
 		<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">Project environment</h2>
 		<EnvironmentMigration />
 	</div>
+	<div v-else class="grid place-content-center py-32">
+		<div class="flex flex-col items-center gap-5 text-center">
+			<div class="flex flex-col gap-2">
+				<div class="text-xl font-semibold text-contrast">
+					Environments are now managed per version.
+				</div>
+				<div>Visit Project Settings to manage environments for each version.</div>
+			</div>
+			<ButtonStyled color="green">
+				<nuxt-link
+					:to="`/${projectV2.project_type}/${projectV2.id}/settings/versions`"
+					class="items flex"
+				>
+					<SettingsIcon /> Edit versions
+				</nuxt-link>
+			</ButtonStyled>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { EnvironmentMigration } from '@modrinth/ui'
+import { SettingsIcon } from '@modrinth/assets'
+import { ButtonStyled, EnvironmentMigration, injectProjectPageContext } from '@modrinth/ui'
+import { isStaff } from '@modrinth/utils'
+
+const { currentMember, projectV2 } = injectProjectPageContext()
+
+const showEnvironmentMigration = computed(() => {
+	return isStaff(currentMember.value.user)
+})
 </script>

From 6fd3589a2f3900f2e5500f18367d5ae0bb407558 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 23 Dec 2025 21:25:33 -0800
Subject: [PATCH 14/26] show environment in project versions table

---
 apps/frontend/src/pages/[type]/[id].vue       | 26 +++++++++++--
 .../project/ProjectPageVersions.vue           | 39 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 79dd4ea9d4..94528a813f 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -43,7 +43,12 @@
 			<NuxtPage
 				v-model:project="project"
 				v-model:project-v3="projectV3"
-				v-model:versions="versions"
+				:versions="
+					versions.map((v) => ({
+						...v,
+						environment: versionsV3.value.find((v3) => v3.id === v.id)?.environment,
+					}))
+				"
 				v-model:members="members"
 				v-model:all-members="allMembers"
 				v-model:dependencies="dependencies"
@@ -1466,21 +1471,25 @@ let project,
 	resetMembers,
 	dependencies,
 	versions,
-	resetVersions,
+	versionsV3,
+	resetVersionsV2,
 	organization,
 	resetOrganization,
 	projectV2Error,
 	projectV3Error,
 	membersError,
 	dependenciesError,
-	versionsError
+	versionsError,
+	versionsV3Error,
+	resetVersionsV3
 try {
 	;[
 		{ data: project, error: projectV2Error, refresh: resetProjectV2 },
 		{ data: projectV3, error: projectV3Error, refresh: resetProjectV3 },
 		{ data: allMembers, error: membersError, refresh: resetMembers },
 		{ data: dependencies, error: dependenciesError },
-		{ data: versions, error: versionsError, refresh: resetVersions },
+		{ data: versions, error: versionsError, refresh: resetVersionsV2 },
+		{ data: versionsV3, error: versionsV3Error, refresh: resetVersionsV3 },
 		{ data: organization, refresh: resetOrganization },
 	] = await Promise.all([
 		useAsyncData(`project/${projectId.value}`, () => useBaseFetch(`project/${projectId.value}`), {
@@ -1522,6 +1531,9 @@ try {
 		useAsyncData(`project/${projectId.value}/version`, () =>
 			useBaseFetch(`project/${projectId.value}/version`),
 		),
+		useAsyncData(`project/${projectId.value}/version`, () =>
+			useBaseFetch(`project/${projectId.value}/version`, { apiVersion: 3 }),
+		),
 		useAsyncData(`project/${projectId.value}/organization`, () =>
 			useBaseFetch(`project/${projectId.value}/organization`, { apiVersion: 3 }),
 		),
@@ -1562,6 +1574,11 @@ async function resetProject() {
 	await resetProjectV3()
 }
 
+async function resetVersions() {
+	await resetVersionsV2()
+	await resetVersionsV3()
+}
+
 function handleError(err, project = false) {
 	if (err.value && err.value.statusCode) {
 		throw createError({
@@ -1580,6 +1597,7 @@ handleError(projectV3Error)
 handleError(membersError)
 handleError(dependenciesError)
 handleError(versionsError)
+handleError(versionsV3Error)
 
 if (!project.value) {
 	throw createError({
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index 8301ed5cd4..b353cd7fc4 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -42,7 +42,12 @@
 	</div>
 	<div
 		v-if="versions.length > 0"
-		class="flex flex-col gap-4 rounded-2xl bg-bg-raised px-6 pb-8 pt-4 supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[1fr_min-content] sm:px-8 supports-[grid-template-columns:subgrid]:sm:grid-cols-[min-content_auto_auto_auto_min-content] supports-[grid-template-columns:subgrid]:xl:grid-cols-[min-content_auto_auto_auto_auto_auto_min-content]"
+		class="flex flex-col gap-4 rounded-2xl bg-bg-raised px-6 pb-8 pt-4 supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[1fr_min-content] sm:px-8 supports-[grid-template-columns:subgrid]:sm:grid-cols-[min-content_auto_auto_auto_min-content]"
+		:class="[
+			hasMultipleEnvironments
+				? 'supports-[grid-template-columns:subgrid]:xl:grid-cols-[min-content_auto_auto_auto_auto_auto_auto_min-content] has-environment'
+				: 'supports-[grid-template-columns:subgrid]:xl:grid-cols-[min-content_auto_auto_auto_auto_auto_min-content] no-environment',
+		]"
 	>
 		<div class="versions-grid-row">
 			<div class="w-9 max-sm:hidden"></div>
@@ -57,6 +62,12 @@
 			>
 				Platforms
 			</div>
+			<div
+				v-if="hasMultipleEnvironments"
+				class="text-sm font-bold text-contrast max-sm:hidden sm:max-xl:collapse sm:max-xl:hidden"
+			>
+				Environment
+			</div>
 			<div
 				class="text-sm font-bold text-contrast max-sm:hidden sm:max-xl:collapse sm:max-xl:hidden"
 			>
@@ -144,6 +155,15 @@
 									</TagItem>
 								</div>
 							</div>
+							<div
+								class="flex items-center"
+								v-if="hasMultipleEnvironments && version.environment"
+								v-tooltip="ENVIRONMENTS_COPY[version.environment]?.description"
+							>
+								<TagItem class="z-[1] text-center">
+									{{ ENVIRONMENTS_COPY[version.environment]?.title }}
+								</TagItem>
+							</div>
 						</div>
 						<div
 							class="flex flex-col justify-center gap-1 max-sm:flex-row max-sm:justify-start max-sm:gap-3 xl:contents"
@@ -215,12 +235,14 @@ import { commonMessages } from '../../utils/common-messages'
 import AutoLink from '../base/AutoLink.vue'
 import TagItem from '../base/TagItem.vue'
 import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
+import { ENVIRONMENTS_COPY } from './settings/environment/Environments'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 
 type VersionWithDisplayUrlEnding = Version & {
 	displayUrlEnding: string
+	environment?: Labrinth.Projects.v3.Environment
 }
 
 const props = withDefaults(
@@ -260,6 +282,11 @@ const selectedPlatforms: Ref<string[]> = computed(
 )
 const selectedChannels: Ref<string[]> = computed(() => versionFilters.value?.selectedChannels ?? [])
 
+const hasMultipleEnvironments = computed(() => {
+	const environments = new Set(props.versions.map((v) => v.environment).filter(Boolean))
+	return environments.size > 1
+})
+
 const filteredVersions = computed(() => {
 	return props.versions.filter(
 		(version) =>
@@ -321,6 +348,14 @@ function updateQuery(newQueries: Record<string, string | string[] | undefined |
 </script>
 <style scoped>
 .versions-grid-row {
-	@apply grid grid-cols-[1fr_min-content] gap-4 supports-[grid-template-columns:subgrid]:col-span-full supports-[grid-template-columns:subgrid]:!grid-cols-subgrid sm:grid-cols-[min-content_1fr_1fr_1fr_min-content] xl:grid-cols-[min-content_1fr_1fr_1fr_1fr_1fr_min-content];
+	@apply grid grid-cols-[1fr_min-content] gap-4 supports-[grid-template-columns:subgrid]:col-span-full supports-[grid-template-columns:subgrid]:!grid-cols-subgrid sm:grid-cols-[min-content_1fr_1fr_1fr_min-content];
+}
+
+.has-environment .versions-grid-row {
+	@apply xl:grid-cols-[min-content_1fr_1fr_1fr_1fr_1fr_1fr_min-content];
+}
+
+.no-environment .versions-grid-row {
+	@apply xl:grid-cols-[min-content_1fr_1fr_1fr_1fr_1fr_min-content];
 }
 </style>

From 486b19def8770b6979b795f4961a275ef5988187 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 11:24:08 -0800
Subject: [PATCH 15/26] pnpm fix

---
 apps/frontend/src/pages/[type]/[id].vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 94528a813f..ece97b0a16 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -43,16 +43,16 @@
 			<NuxtPage
 				v-model:project="project"
 				v-model:project-v3="projectV3"
+				v-model:members="members"
+				v-model:all-members="allMembers"
+				v-model:dependencies="dependencies"
+				v-model:organization="organization"
 				:versions="
 					versions.map((v) => ({
 						...v,
 						environment: versionsV3.value.find((v3) => v3.id === v.id)?.environment,
 					}))
 				"
-				v-model:members="members"
-				v-model:all-members="allMembers"
-				v-model:dependencies="dependencies"
-				v-model:organization="organization"
 				:current-member="currentMember"
 				:patch-project="patchProject"
 				:patch-icon="patchIcon"
@@ -783,7 +783,7 @@
 						{{ formatMessage(messages.environmentMigrationLink) }}
 					</nuxt-link>
 					<ButtonStyled v-if="hasEditDetailsPermission" color="orange">
-						<button v-on:click="() => projectEnvironmentModal.show()" class="mt-3 w-fit">
+						<button class="mt-3 w-fit" @click="() => projectEnvironmentModal.show()">
 							<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
 						</button>
 					</ButtonStyled>
@@ -1003,9 +1003,9 @@ import { IntlFormatted } from '@vintl/vintl/components'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
+import { useTemplateRef } from 'vue'
 
 import { navigateTo } from '#app'
-import { useTemplateRef } from 'vue'
 import Accordion from '~/components/ui/Accordion.vue'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import AutomaticAccordion from '~/components/ui/AutomaticAccordion.vue'

From 7918b90272b7b806196ddc9a1f2bc09c9e8c38d5 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 11:38:37 -0800
Subject: [PATCH 16/26] pnpm fix on ui package

---
 packages/ui/src/components/project/ProjectPageVersions.vue      | 2 +-
 .../project/settings/environment/ProjectEnvironmentModal.vue    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index b353cd7fc4..16ad274d84 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -156,9 +156,9 @@
 								</div>
 							</div>
 							<div
-								class="flex items-center"
 								v-if="hasMultipleEnvironments && version.environment"
 								v-tooltip="ENVIRONMENTS_COPY[version.environment]?.description"
+								class="flex items-center"
 							>
 								<TagItem class="z-[1] text-center">
 									{{ ENVIRONMENTS_COPY[version.environment]?.title }}
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index 33a25c28fc..6f76258631 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -11,6 +11,7 @@
 
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
+
 import { NewModal } from '../../../modal'
 import EnvironmentMigration from './EnvironmentMigration.vue'
 

From 2a5be6bf94b675df24c17bbc0ebf20f668cdd891 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 11:49:59 -0800
Subject: [PATCH 17/26] intl:extract

---
 apps/frontend/src/locales/en-US/index.json | 48 ++++++++--------------
 packages/ui/src/locales/en-US/index.json   | 30 ++++++++++++++
 2 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 5f40633053..7bf4cc6e2c 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2117,6 +2117,24 @@
   "project.download.title": {
     "message": "Download {title}"
   },
+  "project.environment.migration-no-permission.message": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified."
+  },
+  "project.environment.migration-no-permission.title": {
+    "message": "Environment metadata needs to be reviewed"
+  },
+  "project.environment.migration.learn-more": {
+    "message": "Learn more about this change"
+  },
+  "project.environment.migration.message": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please verify that the metadata is correct."
+  },
+  "project.environment.migration.review-button": {
+    "message": "Review environment settings"
+  },
+  "project.environment.migration.title": {
+    "message": "Please review environment metadata"
+  },
   "project.error.loading": {
     "message": "Error loading project data{message}"
   },
@@ -2156,36 +2174,6 @@
   "project.notification.updated.title": {
     "message": "Project updated"
   },
-  "project.settings.environment.notice.missing-env.description": {
-    "message": "Your project is missing environment metadata, please select the appropriate option below."
-  },
-  "project.settings.environment.notice.missing-env.title": {
-    "message": "Please select an environment for your project"
-  },
-  "project.settings.environment.notice.multiple-environments.description": {
-    "message": "Different versions of your project have different environments selected, so you can't edit them globally at this time."
-  },
-  "project.settings.environment.notice.multiple-environments.title": {
-    "message": "Your project has multiple environments"
-  },
-  "project.settings.environment.notice.review-options.description": {
-    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!"
-  },
-  "project.settings.environment.notice.review-options.title": {
-    "message": "Please review the options below"
-  },
-  "project.settings.environment.notice.wrong-project-type.description": {
-    "message": "Only mod or modpack projects can have environment metadata."
-  },
-  "project.settings.environment.notice.wrong-project-type.title": {
-    "message": "This project type does not support environment metadata"
-  },
-  "project.settings.environment.verification.verify-button": {
-    "message": "Verify"
-  },
-  "project.settings.environment.verification.verify-text": {
-    "message": "Verify that this project's environment is set correctly."
-  },
   "project.settings.general.name.description": {
     "message": "Avoid prefixes, suffixes, parentheticals, or added descriptions—just the project's actual name."
   },
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 5e75d51289..942cb1b807 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -710,6 +710,30 @@
   "project.settings.environment.client_only.title": {
     "defaultMessage": "Client-side only"
   },
+  "project.settings.environment.notice.missing-env.description": {
+    "defaultMessage": "Your project is missing environment metadata, please select the appropriate option below."
+  },
+  "project.settings.environment.notice.missing-env.title": {
+    "defaultMessage": "Please select an environment for your project"
+  },
+  "project.settings.environment.notice.multiple-environments.description": {
+    "defaultMessage": "Different versions of your project have different environments selected, so you can't edit them globally at this time."
+  },
+  "project.settings.environment.notice.multiple-environments.title": {
+    "defaultMessage": "Your project has multiple environments"
+  },
+  "project.settings.environment.notice.review-options.description": {
+    "defaultMessage": "We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!"
+  },
+  "project.settings.environment.notice.review-options.title": {
+    "defaultMessage": "Please review the options below"
+  },
+  "project.settings.environment.notice.wrong-project-type.description": {
+    "defaultMessage": "Only mod or modpack projects can have environment metadata."
+  },
+  "project.settings.environment.notice.wrong-project-type.title": {
+    "defaultMessage": "This project type does not support environment metadata"
+  },
   "project.settings.environment.server_only.dedicated_only.title": {
     "defaultMessage": "Dedicated server only"
   },
@@ -737,6 +761,12 @@
   "project.settings.environment.title": {
     "defaultMessage": "Environment"
   },
+  "project.settings.environment.verification.verify-button": {
+    "defaultMessage": "Verify"
+  },
+  "project.settings.environment.verification.verify-text": {
+    "defaultMessage": "Verify that this project's environment is set correctly."
+  },
   "project.settings.gallery.title": {
     "defaultMessage": "Gallery"
   },

From 94b99ce9675b7bebeb6fc68a172f6fcf22c92bd6 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 24 Dec 2025 21:25:53 +0000
Subject: [PATCH 18/26] fix: .value

---
 apps/frontend/src/pages/[type]/[id].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 04b45b019a..fd0f266568 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -50,7 +50,7 @@
 				:versions="
 					versions.map((v) => ({
 						...v,
-						environment: versionsV3.value.find((v3) => v3.id === v.id)?.environment,
+						environment: versionsV3?.find((v3) => v3.id === v.id)?.environment,
 					}))
 				"
 				:current-member="currentMember"

From 22691472a68a2cd9b3aa8d9a37bae41dcf4a82d0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 14:22:22 -0800
Subject: [PATCH 19/26] lower case file

---
 .../settings/environment/{Environments.ts => environments.ts}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/ui/src/components/project/settings/environment/{Environments.ts => environments.ts} (100%)

diff --git a/packages/ui/src/components/project/settings/environment/Environments.ts b/packages/ui/src/components/project/settings/environment/environments.ts
similarity index 100%
rename from packages/ui/src/components/project/settings/environment/Environments.ts
rename to packages/ui/src/components/project/settings/environment/environments.ts

From 24c23687b2a1d4aaa98eb1e1499566c8bf632389 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 15:17:11 -0800
Subject: [PATCH 20/26] add icon to environment tags and use i18n

---
 .../stages/AddDetailsStage.vue                |  52 ++++++--
 .../pages/[type]/[id]/version/[version].vue   |  19 +--
 .../project/ProjectPageVersions.vue           |  15 ++-
 .../project/ProjectSidebarCompatibility.vue   |   3 +-
 .../settings/environment/environments.ts      | 123 +++++++++++++++---
 .../src/components/project/settings/index.ts  |   3 +-
 6 files changed, 171 insertions(+), 44 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
index fd3083c0f3..2e508b5897 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
@@ -157,6 +157,7 @@
 import { EditIcon } from '@modrinth/assets'
 import { ButtonStyled, Chips, ENVIRONMENTS_COPY, TagItem } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
@@ -215,18 +216,51 @@ const usingDetectedLoaders = computed(() => {
 	return loadersMatch
 })
 
+const { formatMessage } = useVIntl()
+
+const noEnvironmentMessage = defineMessages({
+	title: {
+		id: 'version.environment.none.title',
+		defaultMessage: 'No environment set',
+	},
+	description: {
+		id: 'version.environment.none.description',
+		defaultMessage: 'The environment for this version has not been specified.',
+	},
+})
+
+const unknownEnvironmentMessage = defineMessages({
+	title: {
+		id: 'version.environment.unknown.title',
+		defaultMessage: 'Unknown environment',
+	},
+	description: {
+		id: 'version.environment.unknown.description',
+		defaultMessage: 'The environment: "{environment}" is not recognized.',
+	},
+})
+
 const environmentCopy = computed(() => {
-	const emptyMessage = {
-		title: 'No environment set',
-		description: 'The environment for this version has not been specified.',
+	if (!draftVersion.value.environment) {
+		return {
+			title: formatMessage(noEnvironmentMessage.title),
+			description: formatMessage(noEnvironmentMessage.description),
+		}
 	}
-	if (!draftVersion.value.environment) return emptyMessage
 
-	return (
-		ENVIRONMENTS_COPY[draftVersion.value.environment] || {
-			title: 'Unknown environment',
-			description: `The environment: "${draftVersion.value.environment}" is not recognized.`,
+	const envCopy = ENVIRONMENTS_COPY[draftVersion.value.environment]
+	if (envCopy) {
+		return {
+			title: formatMessage(envCopy.title),
+			description: formatMessage(envCopy.description),
 		}
-	)
+	}
+
+	return {
+		title: formatMessage(unknownEnvironmentMessage.title),
+		description: formatMessage(unknownEnvironmentMessage.description, {
+			environment: draftVersion.value.environment,
+		}),
+	}
 })
 </script>
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 13305ede16..62399f4a49 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -560,11 +560,16 @@
 					</template>
 					<span v-else>{{ $formatVersion(version.game_versions) }}</span>
 				</div>
-				<div v-if="!isEditing && version.environment">
+				<div v-if="!isEditing && environment">
 					<h4>Environment</h4>
-					<span>
-						{{ environmentTitle }}
-					</span>
+					<div class="flex items-center gap-1.5">
+						<template v-if="environment.icon">
+							<component :is="environment.icon" />
+						</template>
+						<span>
+							{{ environment.title.defaultMessage }}
+						</span>
+					</div>
 				</div>
 				<div v-if="!isEditing">
 					<h4>Downloads</h4>
@@ -946,10 +951,8 @@ export default defineNuxtComponent({
 				(a, b) => order.indexOf(a.dependency_type) - order.indexOf(b.dependency_type),
 			)
 		},
-		environmentTitle() {
-			return (
-				ENVIRONMENTS_COPY[this.version.environment]?.title || this.version.environment || 'Unknown'
-			)
+		environment() {
+			return ENVIRONMENTS_COPY[this.version.environment]
 		},
 	},
 	watch: {
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index 16ad274d84..504c2103b1 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -157,11 +157,20 @@
 							</div>
 							<div
 								v-if="hasMultipleEnvironments && version.environment"
-								v-tooltip="ENVIRONMENTS_COPY[version.environment]?.description"
+								v-tooltip="
+									ENVIRONMENTS_COPY[version.environment]?.description
+										? formatMessage(ENVIRONMENTS_COPY[version.environment].description)
+										: undefined
+								"
 								class="flex items-center"
 							>
 								<TagItem class="z-[1] text-center">
-									{{ ENVIRONMENTS_COPY[version.environment]?.title }}
+									<component :is="ENVIRONMENTS_COPY[version.environment]?.icon" />
+									{{
+										ENVIRONMENTS_COPY[version.environment]?.title
+											? formatMessage(ENVIRONMENTS_COPY[version.environment].title)
+											: ''
+									}}
 								</TagItem>
 							</div>
 						</div>
@@ -235,7 +244,7 @@ import { commonMessages } from '../../utils/common-messages'
 import AutoLink from '../base/AutoLink.vue'
 import TagItem from '../base/TagItem.vue'
 import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
-import { ENVIRONMENTS_COPY } from './settings/environment/Environments'
+import { ENVIRONMENTS_COPY } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index 9365b15aa3..068837d725 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -21,7 +21,7 @@
 					:action="() => router.push(`/${project.project_type}s?g=categories:${platform}`)"
 					:style="`--_color: var(--color-platform-${platform})`"
 				>
-					<svg v-html="tags.loaders.find((x) => x.name === platform).icon"></svg>
+					<svg v-html="tags.loaders.find((x) => x.name === platform)?.icon"></svg>
 					{{ formatCategory(platform) }}
 				</TagItem>
 			</div>
@@ -69,6 +69,7 @@
 				</TagItem>
 				<TagItem
 					v-if="
+						// @ts-ignore
 						project.project_type !== 'datapack' &&
 						project.client_side !== 'unsupported' &&
 						project.server_side !== 'unsupported' &&
diff --git a/packages/ui/src/components/project/settings/environment/environments.ts b/packages/ui/src/components/project/settings/environment/environments.ts
index ac57048746..6961a9f510 100644
--- a/packages/ui/src/components/project/settings/environment/environments.ts
+++ b/packages/ui/src/components/project/settings/environment/environments.ts
@@ -1,47 +1,128 @@
 import type { Labrinth } from '@modrinth/api-client'
+import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
+import { defineMessage, type MessageDescriptor } from '@vintl/vintl'
+import type { Component } from 'vue'
 
 export const ENVIRONMENTS_COPY: Record<
 	Labrinth.Projects.v3.Environment,
-	{ title: string; description: string }
+	{ title: MessageDescriptor; description: MessageDescriptor; icon?: Component }
 > = {
 	client_only: {
-		title: 'Client-side only',
-		description: 'All functionality is done client-side and is compatible with vanilla servers.',
+		title: defineMessage({
+			id: 'project.environment.client-only.title',
+			defaultMessage: 'Client-side only',
+		}),
+		description: defineMessage({
+			id: 'project.environment.client-only.description',
+			defaultMessage:
+				'All functionality is done client-side and is compatible with vanilla servers.',
+		}),
+		icon: ClientIcon,
 	},
 	server_only: {
-		title: 'Server-side only',
-		description: 'All functionality is done server-side and is compatible with vanilla clients.',
+		title: defineMessage({
+			id: 'project.environment.server-only.title',
+			defaultMessage: 'Server-side only',
+		}),
+		description: defineMessage({
+			id: 'project.environment.server-only.description',
+			defaultMessage:
+				'All functionality is done server-side and is compatible with vanilla clients.',
+		}),
+		icon: ServerIcon,
 	},
 	singleplayer_only: {
-		title: 'Singleplayer only',
-		description: 'Only functions in Singleplayer or when not connected to a Multiplayer server.',
+		title: defineMessage({
+			id: 'project.environment.singleplayer-only.title',
+			defaultMessage: 'Singleplayer only',
+		}),
+		description: defineMessage({
+			id: 'project.environment.singleplayer-only.description',
+			defaultMessage:
+				'Only functions in Singleplayer or when not connected to a Multiplayer server.',
+		}),
+		icon: UserIcon,
 	},
 	dedicated_server_only: {
-		title: 'Server-side only',
-		description: 'All functionality is done server-side and is compatible with vanilla clients.',
+		title: defineMessage({
+			id: 'project.environment.dedicated-server-only.title',
+			defaultMessage: 'Server-side only',
+		}),
+		description: defineMessage({
+			id: 'project.environment.dedicated-server-only.description',
+			defaultMessage:
+				'All functionality is done server-side and is compatible with vanilla clients.',
+		}),
+		icon: ServerIcon,
 	},
 	client_and_server: {
-		title: 'Client and server',
-		description: 'Has some functionality on both the client and server, even if only partially.',
+		title: defineMessage({
+			id: 'project.environment.client-and-server.title',
+			defaultMessage: 'Client and server',
+		}),
+		description: defineMessage({
+			id: 'project.environment.client-and-server.description',
+			defaultMessage:
+				'Has some functionality on both the client and server, even if only partially.',
+		}),
+		icon: MonitorSmartphoneIcon,
 	},
 	client_only_server_optional: {
-		title: 'Client and server',
-		description: 'Has some functionality on both the client and server, even if only partially.',
+		title: defineMessage({
+			id: 'project.environment.client-only-server-optional.title',
+			defaultMessage: 'Client and server',
+		}),
+		description: defineMessage({
+			id: 'project.environment.client-only-server-optional.description',
+			defaultMessage:
+				'Has some functionality on both the client and server, even if only partially.',
+		}),
+		icon: MonitorSmartphoneIcon,
 	},
 	server_only_client_optional: {
-		title: 'Client and server',
-		description: 'Has some functionality on both the client and server, even if only partially.',
+		title: defineMessage({
+			id: 'project.environment.server-only-client-optional.title',
+			defaultMessage: 'Client and server',
+		}),
+		description: defineMessage({
+			id: 'project.environment.server-only-client-optional.description',
+			defaultMessage:
+				'Has some functionality on both the client and server, even if only partially.',
+		}),
+		icon: MonitorSmartphoneIcon,
 	},
 	client_or_server: {
-		title: 'Client and server',
-		description: 'Has some functionality on both the client and server, even if only partially.',
+		title: defineMessage({
+			id: 'project.environment.client-or-server.title',
+			defaultMessage: 'Client and server',
+		}),
+		description: defineMessage({
+			id: 'project.environment.client-or-server.description',
+			defaultMessage:
+				'Has some functionality on both the client and server, even if only partially.',
+		}),
+		icon: MonitorSmartphoneIcon,
 	},
 	client_or_server_prefers_both: {
-		title: 'Client and server',
-		description: 'Has some functionality on both the client and server, even if only partially.',
+		title: defineMessage({
+			id: 'project.environment.client-or-server-prefers-both.title',
+			defaultMessage: 'Client and server',
+		}),
+		description: defineMessage({
+			id: 'project.environment.client-or-server-prefers-both.description',
+			defaultMessage:
+				'Has some functionality on both the client and server, even if only partially.',
+		}),
+		icon: MonitorSmartphoneIcon,
 	},
 	unknown: {
-		title: 'Unknown environment',
-		description: 'The environment for this version could not be determined.',
+		title: defineMessage({
+			id: 'project.environment.unknown.title',
+			defaultMessage: 'Unknown environment',
+		}),
+		description: defineMessage({
+			id: 'project.environment.unknown.description',
+			defaultMessage: 'The environment for this version could not be determined.',
+		}),
 	},
 }
diff --git a/packages/ui/src/components/project/settings/index.ts b/packages/ui/src/components/project/settings/index.ts
index 19e1491fc3..d538f8adfe 100644
--- a/packages/ui/src/components/project/settings/index.ts
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -1,5 +1,4 @@
-// Environment
 export { default as EnvironmentMigration } from './environment/EnvironmentMigration.vue'
-export { ENVIRONMENTS_COPY } from './environment/Environments'
+export { ENVIRONMENTS_COPY } from './environment/environments'
 export { default as EnvironmentSelector } from './environment/EnvironmentSelector.vue'
 export { default as ProjectEnvironmentModal } from './environment/ProjectEnvironmentModal.vue'

From 31a0800aef5ab25e782ae62017552aa6e0da946e Mon Sep 17 00:00:00 2001
From: Truman Gao <106889354+tdgao@users.noreply.github.com>
Date: Wed, 24 Dec 2025 15:17:55 -0800
Subject: [PATCH 21/26] Update apps/frontend/src/pages/[type]/[id].vue

Co-authored-by: Calum H. <contact@cal.engineer>
Signed-off-by: Truman Gao <106889354+tdgao@users.noreply.github.com>
---
 apps/frontend/src/pages/[type]/[id].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index fd0f266568..98b5dddb04 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1530,7 +1530,7 @@ try {
 		useAsyncData(`project/${projectId.value}/version`, () =>
 			useBaseFetch(`project/${projectId.value}/version`),
 		),
-		useAsyncData(`project/${projectId.value}/version`, () =>
+		useAsyncData(`project/${projectId.value}/version/v3`, () =>
 			useBaseFetch(`project/${projectId.value}/version`, { apiVersion: 3 }),
 		),
 		useAsyncData(`project/${projectId.value}/organization`, () =>

From 39937f7e74afdab2aa5d89ef2c4c7c20be23fd62 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 15:23:02 -0800
Subject: [PATCH 22/26] open migration modal from warning icon in project
 dashboard

---
 apps/frontend/src/pages/dashboard/projects.vue        | 11 +++++++++++
 .../settings/environment/ProjectEnvironmentModal.vue  |  9 ++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index a82adb6303..9cc0103e15 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -281,6 +281,16 @@
 						</div>
 
 						<div class="flex !flex-row items-center !justify-end gap-2">
+							<ButtonStyled v-if="true" circular color="orange">
+								<nuxt-link
+									v-tooltip="'Please review environment metadata'"
+									:to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
+										project.slug ? project.slug : project.id
+									}?showEnvironmentMigrationWarning=true`"
+								>
+									<TriangleAlertIcon />
+								</nuxt-link>
+							</ButtonStyled>
 							<ButtonStyled circular>
 								<nuxt-link
 									v-tooltip="formatMessage(commonMessages.settingsLabel)"
@@ -310,6 +320,7 @@ import {
 	SortDescIcon,
 	TrashIcon,
 	XIcon,
+	TriangleAlertIcon,
 } from '@modrinth/assets'
 import {
 	Avatar,
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index 6f76258631..2580fa5512 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { useTemplateRef, onMounted } from 'vue'
 
 import { NewModal } from '../../../modal'
 import EnvironmentMigration from './EnvironmentMigration.vue'
@@ -25,6 +25,13 @@ function hide() {
 	modal.value?.hide()
 }
 
+onMounted(() => {
+	const urlParams = new URLSearchParams(window.location.search)
+	if (urlParams.get('showEnvironmentMigrationWarning') === 'true') {
+		show()
+	}
+})
+
 defineExpose({
 	show,
 	hide,

From 22539d7389e32ba70f19906606f3a902f5cc2d76 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 15:25:39 -0800
Subject: [PATCH 23/26] fix settings side nav icon

---
 apps/frontend/src/pages/[type]/[id]/settings.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue
index 7b0730a1cf..8524c491f6 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings.vue
@@ -9,6 +9,7 @@ import {
 	TagsIcon,
 	UsersIcon,
 	VersionIcon,
+	GlobeIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
@@ -110,7 +111,7 @@ const navItems = computed(() => {
 		{
 			link: `/${base}/settings/environment`,
 			label: formatMessage(commonProjectSettingsMessages.environment),
-			icon: ChartIcon,
+			icon: GlobeIcon,
 			shown: showEnvironment,
 		},
 	]

From c5aa7d0288a51a524805624b90cedb1200363b39 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 15:28:54 -0800
Subject: [PATCH 24/26] use useRoute composable

---
 apps/frontend/src/pages/dashboard/projects.vue              | 6 +++++-
 .../settings/environment/ProjectEnvironmentModal.vue        | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 9cc0103e15..dde97f5d70 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -281,7 +281,11 @@
 						</div>
 
 						<div class="flex !flex-row items-center !justify-end gap-2">
-							<ButtonStyled v-if="true" circular color="orange">
+							<ButtonStyled
+								v-if="projectsWithMigrationWarning.includes(project.id)"
+								circular
+								color="orange"
+							>
 								<nuxt-link
 									v-tooltip="'Please review environment metadata'"
 									:to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index 2580fa5512..ca13fdb87f 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -26,8 +26,8 @@ function hide() {
 }
 
 onMounted(() => {
-	const urlParams = new URLSearchParams(window.location.search)
-	if (urlParams.get('showEnvironmentMigrationWarning') === 'true') {
+	const route = useRoute()
+	if (route.query.showEnvironmentMigrationWarning === 'true') {
 		show()
 	}
 })

From 9ff1701d345bf6f08999e97b737276fbb7123f33 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 15:37:16 -0800
Subject: [PATCH 25/26] pnpm fix

---
 apps/frontend/src/pages/[type]/[id]/settings.vue                | 2 +-
 apps/frontend/src/pages/dashboard/projects.vue                  | 2 +-
 .../project/settings/environment/ProjectEnvironmentModal.vue    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue
index 8524c491f6..dc9737c9d7 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings.vue
@@ -3,13 +3,13 @@ import {
 	AlignLeftIcon,
 	BookTextIcon,
 	ChartIcon,
+	GlobeIcon,
 	ImageIcon,
 	InfoIcon,
 	LinkIcon,
 	TagsIcon,
 	UsersIcon,
 	VersionIcon,
-	GlobeIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index dde97f5d70..2ce08b2ea7 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -323,8 +323,8 @@ import {
 	SortAscIcon,
 	SortDescIcon,
 	TrashIcon,
-	XIcon,
 	TriangleAlertIcon,
+	XIcon,
 } from '@modrinth/assets'
 import {
 	Avatar,
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index ca13fdb87f..789541dc36 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef, onMounted } from 'vue'
+import { onMounted, useTemplateRef } from 'vue'
 
 import { NewModal } from '../../../modal'
 import EnvironmentMigration from './EnvironmentMigration.vue'

From 519c59914d0dea0e14d35d5e77a22a4b58f319ab Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 24 Dec 2025 15:48:26 -0800
Subject: [PATCH 26/26] intl:extract

---
 apps/frontend/src/locales/en-US/index.json | 12 +++++
 packages/ui/src/locales/en-US/index.json   | 60 ++++++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 7bf4cc6e2c..7932362717 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2929,5 +2929,17 @@
   },
   "ui.latest-news-row.view-all": {
     "message": "View all news"
+  },
+  "version.environment.none.description": {
+    "message": "The environment for this version has not been specified."
+  },
+  "version.environment.none.title": {
+    "message": "No environment set"
+  },
+  "version.environment.unknown.description": {
+    "message": "The environment: \"{environment}\" is not recognized."
+  },
+  "version.environment.unknown.title": {
+    "message": "Unknown environment"
   }
 }
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 942cb1b807..8c8d74e0b4 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -677,6 +677,66 @@
   "project.about.links.wiki": {
     "defaultMessage": "Visit wiki"
   },
+  "project.environment.client-and-server.description": {
+    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
+  },
+  "project.environment.client-and-server.title": {
+    "defaultMessage": "Client and server"
+  },
+  "project.environment.client-only-server-optional.description": {
+    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
+  },
+  "project.environment.client-only-server-optional.title": {
+    "defaultMessage": "Client and server"
+  },
+  "project.environment.client-only.description": {
+    "defaultMessage": "All functionality is done client-side and is compatible with vanilla servers."
+  },
+  "project.environment.client-only.title": {
+    "defaultMessage": "Client-side only"
+  },
+  "project.environment.client-or-server-prefers-both.description": {
+    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
+  },
+  "project.environment.client-or-server-prefers-both.title": {
+    "defaultMessage": "Client and server"
+  },
+  "project.environment.client-or-server.description": {
+    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
+  },
+  "project.environment.client-or-server.title": {
+    "defaultMessage": "Client and server"
+  },
+  "project.environment.dedicated-server-only.description": {
+    "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
+  },
+  "project.environment.dedicated-server-only.title": {
+    "defaultMessage": "Server-side only"
+  },
+  "project.environment.server-only-client-optional.description": {
+    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
+  },
+  "project.environment.server-only-client-optional.title": {
+    "defaultMessage": "Client and server"
+  },
+  "project.environment.server-only.description": {
+    "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
+  },
+  "project.environment.server-only.title": {
+    "defaultMessage": "Server-side only"
+  },
+  "project.environment.singleplayer-only.description": {
+    "defaultMessage": "Only functions in Singleplayer or when not connected to a Multiplayer server."
+  },
+  "project.environment.singleplayer-only.title": {
+    "defaultMessage": "Singleplayer only"
+  },
+  "project.environment.unknown.description": {
+    "defaultMessage": "The environment for this version could not be determined."
+  },
+  "project.environment.unknown.title": {
+    "defaultMessage": "Unknown environment"
+  },
   "project.settings.analytics.title": {
     "defaultMessage": "Analytics"
   },