fix: replace save banner in env migration modal with physical bn (#6028)

* feat: dont use save banner for project env modal

* fix: modal btn gap

* fix: lint

* Update packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue

Signed-off-by: Calum H. <hendersoncal117@gmail.com>

* fix: lint

* fix: import

---------

Signed-off-by: Calum H. <hendersoncal117@gmail.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

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"

packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue

@@ -3,20 +3,68 @@
 		<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 mt-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 '#ui/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 +74,18 @@ function hide() {
 	modal.value?.hide()
 }
 
+function resetEnvironment() {
+	environmentMigration.value?.reset()
+}
+
+function saveEnvironment() {
+	const shouldVerify = !!needsToVerify.value
+	environmentMigration.value?.save()
+	if (shouldVerify) {
+		hide()
+	}
+}
+
 onMounted(() => {
 	const route = useRoute()
 	if (route.query.showEnvironmentMigrationWarning === 'true') {