From 4e6baf8a336915e34920b3420e778762f1987136 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 7 May 2026 15:56:54 +0100
Subject: [PATCH 1/4] feat: dont use save banner for project env modal

---
 .../environment/EnvironmentMigration.vue      | 33 +++++++++-
 .../environment/ProjectEnvironmentModal.vue   | 61 ++++++++++++++++++-
 2 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
index 6f4a5e21fe..dcc1eb051e 100644
--- a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
+++ b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
@@ -16,6 +16,15 @@ import { computed } from 'vue'
 
 const { formatMessage } = useVIntl()
 
+const props = withDefaults(
+	defineProps<{
+		showFloatingSave?: boolean
+	}>(),
+	{
+		showFloatingSave: true,
+	},
+)
+
 const { currentMember, projectV2, projectV3, invalidate } = injectProjectPageContext()
 const { handleError } = injectNotificationManager()
 const client = injectModrinthClient()
@@ -42,7 +51,7 @@ function getInitialEnv() {
 	return env?.length === 1 ? env[0] : undefined
 }
 
-const { saved, current, saving, reset, save } = useSavable(
+const { saved, current, saving, reset, save, hasChanges } = useSavable(
 	() => ({
 		environment: getInitialEnv(),
 		side_types_migration_review_status: projectV3.value?.side_types_migration_review_status,
@@ -67,6 +76,24 @@ if (originalEnv && originalEnv !== 'unknown') {
 	current.value.side_types_migration_review_status = 'reviewed'
 }
 
+const canReset = computed(() => !needsToVerify.value)
+const canSave = computed(
+	() =>
+		supportsEnvironment.value &&
+		hasPermission.value &&
+		(projectV3.value?.environment?.length ?? 0) <= 1,
+)
+
+defineExpose({
+	hasChanges,
+	saving,
+	canReset,
+	canSave,
+	needsToVerify,
+	reset,
+	save,
+})
+
 const messages = defineMessages({
 	verifyButton: {
 		id: 'project.settings.environment.verification.verify-button',
@@ -160,11 +187,11 @@ const messages = defineMessages({
 			/>
 		</template>
 		<UnsavedChangesPopup
-			v-if="supportsEnvironment && hasPermission && (projectV3?.environment?.length ?? 0) <= 1"
+			v-if="props.showFloatingSave && canSave"
 			:original="saved"
 			:modified="current"
 			:saving="saving"
-			:can-reset="!needsToVerify"
+			:can-reset="canReset"
 			:text="needsToVerify ? messages.verifyLabel : undefined"
 			:save-label="needsToVerify ? messages.verifyButton : undefined"
 			:save-icon="needsToVerify ? CheckIcon : undefined"
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index f6e3b0871a..86befba50a 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -3,20 +3,67 @@
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">Edit project Environment</span>
 		</template>
-		<div class="mb-24 max-w-[600px]">
-			<EnvironmentMigration />
+		<div class="max-w-[600px]">
+			<EnvironmentMigration ref="environmentMigration" :show-floating-save="false" />
 		</div>
+		<template #actions>
+			<div v-if="canSave" class="flex justify-end gap-2">
+				<ButtonStyled v-if="canReset" type="transparent">
+					<button :disabled="saving || !hasChanges" @click="resetEnvironment">
+						<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="saving || !hasChanges" @click="saveEnvironment">
+						<SpinnerIcon v-if="saving" class="animate-spin" />
+						<CheckIcon v-else-if="needsToVerify" />
+						<SaveIcon v-else />
+						{{ saveButtonLabel }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
-import { onMounted, useTemplateRef } from 'vue'
+import { CheckIcon, HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
+import { computed, onMounted, unref, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
 
+import { defineMessages, useVIntl } from '../../../../composables/i18n'
+import { commonMessages } from '../../../../utils/common-messages'
+import ButtonStyled from '../../../base/ButtonStyled.vue'
 import { NewModal } from '../../../modal'
 import EnvironmentMigration from './EnvironmentMigration.vue'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	verifyButton: {
+		id: 'project.settings.environment.verification.verify-button',
+		defaultMessage: 'Verify',
+	},
+})
+
 const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const environmentMigration =
+	useTemplateRef<InstanceType<typeof EnvironmentMigration>>('environmentMigration')
+
+const hasChanges = computed(() => unref(environmentMigration.value?.hasChanges) ?? false)
+const saving = computed(() => unref(environmentMigration.value?.saving) ?? false)
+const canReset = computed(() => unref(environmentMigration.value?.canReset) ?? false)
+const canSave = computed(() => unref(environmentMigration.value?.canSave) ?? false)
+const needsToVerify = computed(() => unref(environmentMigration.value?.needsToVerify) ?? false)
+const saveButtonLabel = computed(() => {
+	if (saving.value) {
+		return formatMessage(commonMessages.savingButton)
+	}
+	if (needsToVerify.value) {
+		return formatMessage(messages.verifyButton)
+	}
+	return formatMessage(commonMessages.saveButton)
+})
 
 function show() {
 	modal.value?.show()
@@ -26,6 +73,14 @@ function hide() {
 	modal.value?.hide()
 }
 
+function resetEnvironment() {
+	environmentMigration.value?.reset()
+}
+
+function saveEnvironment() {
+	environmentMigration.value?.save()
+}
+
 onMounted(() => {
 	const route = useRoute()
 	if (route.query.showEnvironmentMigrationWarning === 'true') {

From 6684edc61da51e9554112f3815066c754c65ccd6 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 7 May 2026 15:59:52 +0100
Subject: [PATCH 2/4] fix: modal btn gap

---
 .../settings/environment/ProjectEnvironmentModal.vue        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index 86befba50a..447616ee35 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -7,7 +7,7 @@
 			<EnvironmentMigration ref="environmentMigration" :show-floating-save="false" />
 		</div>
 		<template #actions>
-			<div v-if="canSave" class="flex justify-end gap-2">
+			<div v-if="canSave" class="flex justify-end gap-2 mt-2">
 				<ButtonStyled v-if="canReset" type="transparent">
 					<button :disabled="saving || !hasChanges" @click="resetEnvironment">
 						<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
@@ -78,7 +78,11 @@ function resetEnvironment() {
 }
 
 function saveEnvironment() {
+	let shouldVerify = !!needsToVerify.value
 	environmentMigration.value?.save()
+	if (shouldVerify) {
+		hide()
+	}
 }
 
 onMounted(() => {

From 5eecf14259c1bbbafa998dfba61fdc021cc556d3 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 7 May 2026 16:01:15 +0100
Subject: [PATCH 3/4] fix: lint

---
 .../project/settings/environment/ProjectEnvironmentModal.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index 447616ee35..809f82f37c 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -78,7 +78,7 @@ function resetEnvironment() {
 }
 
 function saveEnvironment() {
-	let shouldVerify = !!needsToVerify.value
+	const shouldVerify = !!needsToVerify.value
 	environmentMigration.value?.save()
 	if (shouldVerify) {
 		hide()

From 9b123b2cfe0f9249985ef65ca321c747f1a322c1 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Thu, 7 May 2026 16:28:31 +0100
Subject: [PATCH 4/4] Update
 packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue

Signed-off-by: Calum H. <hendersoncal117@gmail.com>
---
 .../project/settings/environment/ProjectEnvironmentModal.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index 809f82f37c..b7b1788aac 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -31,7 +31,7 @@ import { CheckIcon, HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import { computed, onMounted, unref, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { defineMessages, useVIntl } from '../../../../composables/i18n'
+import { defineMessages, useVIntl } from '#composables/i18n'
 import { commonMessages } from '../../../../utils/common-messages'
 import ButtonStyled from '../../../base/ButtonStyled.vue'
 import { NewModal } from '../../../modal'