Envs v3 frontend (#4267)

* New envs frontend * lint fix * Add blog post, user-facing changes, dashboard warning, project page member warning, and migration reviewing. maybe some other misc stuff * lint * lint * ignore .data in .prettierignore * i18n as fuck * fix proj page * Improve news markdown rendering * improve phrasing of initial paragraph * Fix environments not reloading after save * index.ts instead of underscored name * shrink-0 back on these icons
2025-08-28 15:11:35 -07:00
parent 0ac42344e7
commit 46c325f78a
49 changed files with 2509 additions and 397 deletions
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts" generic="T">
+import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
+import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { type Component, computed } from 'vue'
+
+import { commonMessages } from '../../utils'
+import ButtonStyled from './ButtonStyled.vue'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+	(e: 'reset' | 'save', event: MouseEvent): void
+}>()
+
+const props = withDefaults(
+	defineProps<{
+		canReset?: boolean
+		original: T
+		modified: Partial<T>
+		saving?: boolean
+		text?: MessageDescriptor | string
+		saveLabel?: MessageDescriptor | string
+		savingLabel?: MessageDescriptor | string
+		saveIcon?: Component
+	}>(),
+	{
+		canReset: true,
+		saving: false,
+		text: () =>
+			defineMessage({
+				id: 'ui.component.unsaved-changes-popup.body',
+				defaultMessage: 'You have unsaved changes.',
+			}),
+		saveLabel: () => commonMessages.saveButton,
+		savingLabel: () => commonMessages.savingButton,
+		saveIcon: SaveIcon,
+	},
+)
+
+const shown = computed(() => {
+	let changed = false
+	for (const key of Object.keys(props.modified)) {
+		if (props.original[key] !== props.modified[key]) {
+			changed = true
+		}
+	}
+	return changed
+})
+
+function localizeIfPossible(message: MessageDescriptor | string) {
+	return typeof message === 'string' ? message : formatMessage(message)
+}
+
+const bodyText = computed(() => localizeIfPossible(props.text))
+const saveText = computed(() =>
+	localizeIfPossible(props.saving ? props.savingLabel : props.saveLabel),
+)
+</script>
+
+<template>
+	<Transition name="pop-in">
+		<div v-if="shown" class="fixed w-full z-10 left-0 bottom-0 p-4">
+			<div
+				class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
+			>
+				<p class="m-0 font-semibold">{{ bodyText }}</p>
+				<div class="ml-auto flex gap-2">
+					<ButtonStyled v-if="canReset" type="transparent">
+						<button :disabled="saving" @click="(e) => emit('reset', e)">
+							<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button :disabled="saving" @click="(e) => emit('save', e)">
+							<SpinnerIcon v-if="saving" class="animate-spin" />
+							<component :is="saveIcon" v-else />
+							{{ saveText }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+.pop-in-enter-active {
+	transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
+}
+
+.pop-in-leave-active {
+	transition: all 0.25s ease;
+}
+
+.pop-in-enter-from {
+	scale: 0.5;
+	translate: 0 10rem;
+	opacity: 0;
+}
+
+.pop-in-leave-to {
+	scale: 0.96;
+	translate: 0 0.25rem;
+	opacity: 0;
+}
+</style>