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/IconSelect.vue
+++ b/packages/ui/src/components/base/IconSelect.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { EditIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+
+import { Avatar, OverflowMenu } from '../index'
+
+const { formatMessage } = useVIntl()
+
+const icon = defineModel<string | undefined>()
+const emit = defineEmits<{
+	(e: 'select' | 'reset' | 'remove'): void
+}>()
+
+type IconSelectOption = 'select' | 'replace' | 'reset' | 'remove'
+
+withDefaults(
+	defineProps<{
+		options?: IconSelectOption[]
+	}>(),
+	{
+		options: () => ['select', 'replace', 'reset', 'remove'],
+	},
+)
+
+const messages = defineMessages({
+	editIcon: {
+		id: 'icon-select.edit',
+		defaultMessage: 'Edit icon',
+	},
+	selectIcon: {
+		id: 'icon-select.select',
+		defaultMessage: 'Select icon',
+	},
+	replaceIcon: {
+		id: 'icon-select.replace',
+		defaultMessage: 'Replace icon',
+	},
+	removeIcon: {
+		id: 'icon-select.remove',
+		defaultMessage: 'Remove icon',
+	},
+})
+</script>
+
+<template>
+	<OverflowMenu
+		v-tooltip="formatMessage(messages.editIcon)"
+		class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+		:options="[
+			{
+				id: 'select',
+				action: () => emit('select'),
+			},
+			{
+				id: 'remove',
+				color: 'danger',
+				action: () => emit('remove'),
+				shown: !!icon,
+			},
+		]"
+	>
+		<Avatar :src="icon" size="108px" class="!border-4 group-hover:brightness-75" no-shadow />
+		<div class="absolute right-0 top-0 m-2">
+			<div
+				class="hovering-icon-shadow m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
+			>
+				<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+			</div>
+		</div>
+		<template #select>
+			<UploadIcon />
+			{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+		</template>
+		<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+	</OverflowMenu>
+</template>
--- a/packages/ui/src/components/base/LargeRadioButton.vue
+++ b/packages/ui/src/components/base/LargeRadioButton.vue
@@ -0,0 +1,22 @@
+<template>
+	<button
+		class="px-4 py-3 text-left border-0 font-medium border-2 border-button-bg border-solid flex gap-2 transition-all cursor-pointer active:scale-[0.98] hover:bg-button-bg hover:brightness-[--hover-brightness] rounded-xl"
+		:class="selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent'"
+		@click="emit('select')"
+	>
+		<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" />
+		<RadioButtonIcon v-else class="h-5 w-5 shrink-0" />
+		<slot />
+	</button>
+</template>
+<script setup lang="ts" generic="T">
+import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+
+const emit = defineEmits<{
+	(e: 'select'): void
+}>()
+
+defineProps<{
+	selected: boolean
+}>()
+</script>
--- a/packages/ui/src/components/base/SettingsLabel.vue
+++ b/packages/ui/src/components/base/SettingsLabel.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { MessageDescriptor } from '@vintl/vintl'
+import { useVIntl } from '@vintl/vintl'
+import { computed } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const props = withDefaults(
+	defineProps<{
+		id?: string
+		title: string | MessageDescriptor
+		description?: string | MessageDescriptor
+	}>(),
+	{
+		id: undefined,
+		description: undefined,
+	},
+)
+
+const formattedTitle = computed(() =>
+	typeof props.title === 'string' ? props.title : formatMessage(props.title),
+)
+const formattedDescription = computed(() =>
+	typeof props.description === 'string'
+		? props.description
+		: props.description
+			? formatMessage(props.description)
+			: undefined,
+)
+</script>
+
+<template>
+	<div class="mb-2">
+		<label v-if="id" :for="id" class="text-lg font-extrabold text-contrast">
+			{{ formattedTitle }}
+		</label>
+		<p v-else class="m-0 text-lg font-extrabold text-contrast">
+			{{ formattedTitle }}
+		</p>
+		<p v-if="formattedDescription" class="text-sm m-0 text-secondary">
+			{{ formattedDescription }}
+		</p>
+	</div>
+</template>
--- 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>
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -22,6 +22,7 @@ export { default as FileInput } from './base/FileInput.vue'
 export type { FilterBarOption } from './base/FilterBar.vue'
 export { default as FilterBar } from './base/FilterBar.vue'
 export { default as HeadingLink } from './base/HeadingLink.vue'
+export { default as IconSelect } from './base/IconSelect.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
@@ -38,6 +39,7 @@ export { default as RadialHeader } from './base/RadialHeader.vue'
 export { default as RadioButtons } from './base/RadioButtons.vue'
 export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
 export { default as ServerNotice } from './base/ServerNotice.vue'
+export { default as SettingsLabel } from './base/SettingsLabel.vue'
 export { default as SimpleBadge } from './base/SimpleBadge.vue'
 export { default as Slider } from './base/Slider.vue'
 export { default as SmartClickable } from './base/SmartClickable.vue'
@@ -46,6 +48,7 @@ export { default as TagItem } from './base/TagItem.vue'
 export { default as TeleportDropdownMenu } from './base/TeleportDropdownMenu.vue'
 export { default as Timeline } from './base/Timeline.vue'
 export { default as Toggle } from './base/Toggle.vue'
+export { default as UnsavedChangesPopup } from './base/UnsavedChangesPopup.vue'

 // Branding
 export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
@@ -80,16 +83,7 @@ export { default as NotificationPanel } from './nav/NotificationPanel.vue'
 export { default as PagewideBanner } from './nav/PagewideBanner.vue'

 // Project
-export { default as NewProjectCard } from './project/NewProjectCard.vue'
-export { default as ProjectBackgroundGradient } from './project/ProjectBackgroundGradient.vue'
-export { default as ProjectHeader } from './project/ProjectHeader.vue'
-export { default as ProjectPageDescription } from './project/ProjectPageDescription.vue'
-export { default as ProjectPageVersions } from './project/ProjectPageVersions.vue'
-export { default as ProjectSidebarCompatibility } from './project/ProjectSidebarCompatibility.vue'
-export { default as ProjectSidebarCreators } from './project/ProjectSidebarCreators.vue'
-export { default as ProjectSidebarDetails } from './project/ProjectSidebarDetails.vue'
-export { default as ProjectSidebarLinks } from './project/ProjectSidebarLinks.vue'
-export { default as ProjectStatusBadge } from './project/ProjectStatusBadge.vue'
+export * from './project'

 // Search
 export { default as BrowseFiltersPanel } from './search/BrowseFiltersPanel.vue'
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -26,8 +26,17 @@
 				</TagItem>
 			</div>
 		</section>
+		<section v-if="showEnvironments" class="flex flex-col gap-2">
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.environments) }}</h3>
+			<div class="flex flex-wrap gap-1">
+				<TagItem v-for="tag in primaryEnvironmentTags" :key="`environment-tag-${tag.message.id}`">
+					<component :is="tag.icon" />
+					{{ formatMessage(tag.message) }}
+				</TagItem>
+			</div>
+		</section>
 		<section
-			v-if="
+			v-else-if="
 				(project.project_type === 'mod' || project.project_type === 'modpack') &&
 				!(project.client_side === 'unsupported' && project.server_side === 'unsupported') &&
 				!(project.client_side === 'unknown' && project.server_side === 'unknown')
@@ -76,9 +85,10 @@
 </template>
 <script setup lang="ts">
 import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
-import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
+import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
 import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import { defineMessage, defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { type Component, computed } from 'vue'
 import { useRouter } from 'vue-router'

 import TagItem from '../base/TagItem.vue'
@@ -88,7 +98,9 @@ const router = useRouter()

 type EnvironmentValue = 'optional' | 'required' | 'unsupported' | 'unknown'

-defineProps<{
+const TYPES_WITH_ENVS = ['mod', 'modpack'] as const
+
+const props = defineProps<{
 	project: {
 		actualProjectType: string
 		project_type: string
@@ -102,23 +114,112 @@ defineProps<{
 		gameVersions: GameVersionTag[]
 		loaders: PlatformTag[]
 	}
+	v3Metadata?: ProjectV3Partial
 }>()

+const showEnvironments = computed(
+	() =>
+		TYPES_WITH_ENVS.some((x) => props.v3Metadata?.project_types.includes(x)) &&
+		primaryEnvironment.value,
+)
+
+const primaryEnvironment = computed<EnvironmentV3 | undefined>(() =>
+	props.v3Metadata?.environment?.find((x) => x !== 'unknown'),
+)
+
+type EnvironmentTag = {
+	icon: Component
+	message: MessageDescriptor
+	environments: EnvironmentV3[]
+}
+
+const environmentTags: EnvironmentTag[] = [
+	{
+		icon: ClientIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.client-side`,
+			defaultMessage: 'Client-side',
+		}),
+		environments: [
+			'client_only',
+			'client_only_server_optional',
+			'client_or_server',
+			'client_or_server_prefers_both',
+		],
+	},
+	{
+		icon: ServerIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.server-side`,
+			defaultMessage: 'Server-side',
+		}),
+		environments: [
+			'server_only',
+			'server_only_client_optional',
+			'client_or_server',
+			'client_or_server_prefers_both',
+		],
+	},
+	{
+		icon: ServerIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.dedicated-servers-only`,
+			defaultMessage: 'Dedicated servers only',
+		}),
+		environments: ['dedicated_server_only'],
+	},
+	{
+		icon: UserIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.singleplayer-only`,
+			defaultMessage: 'Singleplayer only',
+		}),
+		environments: ['singleplayer_only'],
+	},
+	{
+		icon: UserIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.singleplayer`,
+			defaultMessage: 'Singleplayer',
+		}),
+		environments: ['server_only'],
+	},
+	{
+		icon: MonitorSmartphoneIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.client-and-server`,
+			defaultMessage: 'Client and server',
+		}),
+		environments: [
+			'client_and_server',
+			'client_only_server_optional',
+			'server_only_client_optional',
+			'client_or_server_prefers_both',
+		],
+	},
+]
+
+const primaryEnvironmentTags = computed(() => {
+	return primaryEnvironment.value
+		? environmentTags.filter((x) => x.environments.includes(primaryEnvironment.value ?? 'unknown'))
+		: []
+})
+
 const messages = defineMessages({
 	title: {
-		id: 'project.about.compatibility.title',
+		id: `project.about.compatibility.title`,
 		defaultMessage: 'Compatibility',
 	},
 	minecraftJava: {
-		id: 'project.about.compatibility.game.minecraftJava',
+		id: `project.about.compatibility.game.minecraftJava`,
 		defaultMessage: 'Minecraft: Java Edition',
 	},
 	platforms: {
-		id: 'project.about.compatibility.platforms',
+		id: `project.about.compatibility.platforms`,
 		defaultMessage: 'Platforms',
 	},
 	environments: {
-		id: 'project.about.compatibility.environments',
+		id: `project.about.compatibility.environments`,
 		defaultMessage: 'Supported environments',
 	},
 })
--- a/packages/ui/src/components/project/index.ts
+++ b/packages/ui/src/components/project/index.ts
@@ -0,0 +1,14 @@
+// Settings
+export * from './settings'
+
+// Other
+export { default as NewProjectCard } from './NewProjectCard.vue'
+export { default as ProjectBackgroundGradient } from './ProjectBackgroundGradient.vue'
+export { default as ProjectHeader } from './ProjectHeader.vue'
+export { default as ProjectPageDescription } from './ProjectPageDescription.vue'
+export { default as ProjectPageVersions } from './ProjectPageVersions.vue'
+export { default as ProjectSidebarCompatibility } from './ProjectSidebarCompatibility.vue'
+export { default as ProjectSidebarCreators } from './ProjectSidebarCreators.vue'
+export { default as ProjectSidebarDetails } from './ProjectSidebarDetails.vue'
+export { default as ProjectSidebarLinks } from './ProjectSidebarLinks.vue'
+export { default as ProjectStatusBadge } from './ProjectStatusBadge.vue'
--- a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import type { EnvironmentV3 } from '@modrinth/utils'
+import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { computed, ref, watch } from 'vue'
+
+import LargeRadioButton from '../../../base/LargeRadioButton.vue'
+
+const { formatMessage } = useVIntl()
+
+const value = defineModel<EnvironmentV3 | undefined>({ required: true })
+
+type EnvironmentRadioOption = {
+	title: MessageDescriptor
+	description?: MessageDescriptor
+}
+
+const OUTER_OPTIONS = {
+	client: {
+		title: defineMessage({
+			id: 'project.settings.environment.client_only.title',
+			defaultMessage: 'Client-side only',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.client_only.description',
+			defaultMessage:
+				'All functionality is done client-side and is compatible with vanilla servers.',
+		}),
+		suboptions: {},
+	},
+	server: {
+		title: defineMessage({
+			id: 'project.settings.environment.server_only.title',
+			defaultMessage: 'Server-side only',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.server_only.description',
+			defaultMessage:
+				'All functionality is done server-side and is compatible with vanilla clients.',
+		}),
+		suboptions: {
+			singleplayer: {
+				title: defineMessage({
+					id: 'project.settings.environment.server_only.supports_singleplayer.title',
+					defaultMessage: 'Works in singleplayer too',
+				}),
+			},
+			dedicated: {
+				title: defineMessage({
+					id: 'project.settings.environment.server_only.dedicated_only.title',
+					defaultMessage: 'Dedicated server only',
+				}),
+			},
+		},
+	},
+	client_and_server: {
+		title: defineMessage({
+			id: 'project.settings.environment.client_and_server.title',
+			defaultMessage: 'Client and server',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.client_and_server.description',
+			defaultMessage:
+				'Has some functionality on both the client and server, even if only partially.',
+		}),
+		suboptions: {
+			required_both: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.required_both.title',
+					defaultMessage: 'Required on both',
+				}),
+			},
+			optional_client: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_client.title',
+					defaultMessage: 'Optional on client',
+				}),
+			},
+			optional_server: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_server.title',
+					defaultMessage: 'Optional on server',
+				}),
+			},
+			optional_both_prefers_both: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_both_prefers_both.title',
+					defaultMessage: 'Optional on both, works best when installed on both sides',
+				}),
+			},
+			optional_both: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_both.title',
+					defaultMessage: 'Optional on both, works the same if installed on either side',
+				}),
+			},
+		},
+	},
+	singleplayer: {
+		title: defineMessage({
+			id: 'project.settings.environment.singleplayer.title',
+			defaultMessage: 'Singleplayer only',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.singleplayer.description',
+			defaultMessage: `Only functions in Singleplayer or when not connected to a Multiplayer server.`,
+		}),
+		suboptions: {},
+	},
+} as const satisfies Record<
+	string,
+	EnvironmentRadioOption & { suboptions: Record<string, EnvironmentRadioOption> }
+>
+type OuterOptionKey = keyof typeof OUTER_OPTIONS
+type SubOptionKey = ValidKeys<(typeof OUTER_OPTIONS)[keyof typeof OUTER_OPTIONS]['suboptions']>
+
+const currentOuterOption = ref<OuterOptionKey>()
+const currentSubOption = ref<SubOptionKey>()
+
+const computedOption = computed<EnvironmentV3>(() => {
+	switch (currentOuterOption.value) {
+		case 'client':
+			return 'client_only'
+		case 'server':
+			switch (currentSubOption.value) {
+				case 'singleplayer':
+					return 'server_only'
+				case 'dedicated':
+					return 'dedicated_server_only'
+				default:
+					return 'unknown'
+			}
+		case 'client_and_server':
+			switch (currentSubOption.value) {
+				case 'required_both':
+					return 'client_and_server'
+				case 'optional_client':
+					return 'server_only_client_optional'
+				case 'optional_server':
+					return 'client_only_server_optional'
+				case 'optional_both_prefers_both':
+					return 'client_or_server_prefers_both'
+				case 'optional_both':
+					return 'client_or_server'
+				default:
+					return 'unknown'
+			}
+		case 'singleplayer':
+			return 'singleplayer_only'
+		default:
+			return 'unknown'
+	}
+})
+
+function loadEnvironmentValues(env?: EnvironmentV3) {
+	switch (env) {
+		case 'client_and_server':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'required_both'
+			break
+		case 'client_only':
+			currentOuterOption.value = 'client'
+			currentSubOption.value = undefined
+			break
+		case 'client_only_server_optional':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_server'
+			break
+		case 'singleplayer_only':
+			currentOuterOption.value = 'singleplayer'
+			currentSubOption.value = undefined
+			break
+		case 'server_only':
+			currentOuterOption.value = 'server'
+			currentSubOption.value = 'singleplayer'
+			break
+		case 'server_only_client_optional':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_client'
+			break
+		case 'dedicated_server_only':
+			currentOuterOption.value = 'server'
+			currentSubOption.value = 'dedicated'
+			break
+		case 'client_or_server':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_both'
+			break
+		case 'client_or_server_prefers_both':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_both_prefers_both'
+			break
+		default:
+			currentOuterOption.value = undefined
+			currentSubOption.value = undefined
+			break
+	}
+}
+
+// Keep parent in sync when local radio selections change
+watch(computedOption, (newValue) => {
+	if (value.value !== newValue) {
+		value.value = newValue
+	}
+})
+
+// Keep local selections in sync when parent model changes
+watch(
+	() => value.value,
+	(newVal) => {
+		loadEnvironmentValues(newVal)
+	},
+	{ immediate: true },
+)
+
+const simulateSave = ref(false)
+</script>
+
+<template>
+	<template
+		v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
+		:key="`env-option-${key}`"
+	>
+		<LargeRadioButton
+			class="!w-full"
+			:class="{ 'mt-2': index > 0 }"
+			:selected="currentOuterOption === key"
+			@select="
+				() => {
+					if (currentOuterOption !== key) {
+						currentSubOption = suboptions ? (Object.keys(suboptions)[0] as SubOptionKey) : undefined
+					}
+					currentOuterOption = key
+					simulateSave = false
+				}
+			"
+		>
+			<span class="flex flex-col">
+				<span>{{ formatMessage(title) }}</span>
+				<span v-if="description" class="text-sm text-secondary">{{
+					formatMessage(description)
+				}}</span>
+			</span>
+		</LargeRadioButton>
+		<div v-if="suboptions" class="pl-8">
+			<LargeRadioButton
+				v-for="(
+					{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
+				) in suboptions"
+				:key="`env-option-${key}-${suboptionKey}`"
+				class="!w-full mt-2"
+				:class="{
+					'opacity-50': currentOuterOption !== key,
+				}"
+				:selected="currentSubOption === suboptionKey"
+				@select="
+					() => {
+						currentOuterOption = key
+						currentSubOption = suboptionKey
+					}
+				"
+			>
+				<span class="flex flex-col">
+					<span>{{ formatMessage(suboptionTitle) }}</span>
+					<span v-if="suboptionDescription" class="text-sm text-secondary">{{
+						formatMessage(suboptionDescription)
+					}}</span>
+				</span>
+			</LargeRadioButton>
+		</div>
+	</template>
+</template>
--- a/packages/ui/src/components/project/settings/index.ts
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -0,0 +1,2 @@
+// Environment
+export { default as ProjectSettingsEnvSelector } from './environment/ProjectSettingsEnvSelector.vue'
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1,4 +1,10 @@
 {
+  "badge.new": {
+    "defaultMessage": "New"
+  },
+  "button.analytics": {
+    "defaultMessage": "Analytics"
+  },
  "button.back": {
    "defaultMessage": "Back"
  },
@@ -26,6 +32,12 @@
  "button.edit": {
    "defaultMessage": "Edit"
  },
+  "button.follow": {
+    "defaultMessage": "Follow"
+  },
+  "button.more-options": {
+    "defaultMessage": "More options"
+  },
  "button.next": {
    "defaultMessage": "Next"
  },
@@ -47,12 +59,18 @@
  "button.report": {
    "defaultMessage": "Report"
  },
+  "button.reset": {
+    "defaultMessage": "Reset"
+  },
  "button.save": {
    "defaultMessage": "Save"
  },
  "button.save-changes": {
    "defaultMessage": "Save changes"
  },
+  "button.saving": {
+    "defaultMessage": "Saving"
+  },
  "button.sign-in": {
    "defaultMessage": "Sign in"
  },
@@ -62,6 +80,9 @@
  "button.stop": {
    "defaultMessage": "Stop"
  },
+  "button.unfollow": {
+    "defaultMessage": "Unfollow"
+  },
  "button.upload-image": {
    "defaultMessage": "Upload image"
  },
@@ -83,6 +104,21 @@
  "collection.label.private": {
    "defaultMessage": "Private"
  },
+  "icon-select.edit": {
+    "defaultMessage": "Edit icon"
+  },
+  "icon-select.remove": {
+    "defaultMessage": "Remove icon"
+  },
+  "icon-select.replace": {
+    "defaultMessage": "Replace icon"
+  },
+  "icon-select.select": {
+    "defaultMessage": "Select icon"
+  },
+  "input.search.placeholder": {
+    "defaultMessage": "Search..."
+  },
  "input.view.gallery": {
    "defaultMessage": "Gallery view"
  },
@@ -140,6 +176,9 @@
  "label.notifications": {
    "defaultMessage": "Notifications"
  },
+  "label.or": {
+    "defaultMessage": "or"
+  },
  "label.password": {
    "defaultMessage": "Password"
  },
@@ -152,6 +191,9 @@
  "label.rejected": {
    "defaultMessage": "Rejected"
  },
+  "label.saved": {
+    "defaultMessage": "Saved"
+  },
  "label.scopes": {
    "defaultMessage": "Scopes"
  },
@@ -311,6 +353,24 @@
  "project.about.compatibility.environments": {
    "defaultMessage": "Supported environments"
  },
+  "project.about.compatibility.environments.client-and-server": {
+    "defaultMessage": "Client and server"
+  },
+  "project.about.compatibility.environments.client-side": {
+    "defaultMessage": "Client-side"
+  },
+  "project.about.compatibility.environments.dedicated-servers-only": {
+    "defaultMessage": "Dedicated servers only"
+  },
+  "project.about.compatibility.environments.server-side": {
+    "defaultMessage": "Server-side"
+  },
+  "project.about.compatibility.environments.singleplayer": {
+    "defaultMessage": "Singleplayer"
+  },
+  "project.about.compatibility.environments.singleplayer-only": {
+    "defaultMessage": "Singleplayer only"
+  },
  "project.about.compatibility.game.minecraftJava": {
    "defaultMessage": "Minecraft: Java Edition"
  },
@@ -377,6 +437,87 @@
  "project.about.links.wiki": {
    "defaultMessage": "Visit wiki"
  },
+  "project.settings.analytics.title": {
+    "defaultMessage": "Analytics"
+  },
+  "project.settings.description.title": {
+    "defaultMessage": "Description"
+  },
+  "project.settings.environment.client_and_server.description": {
+    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
+  },
+  "project.settings.environment.client_and_server.optional_both.title": {
+    "defaultMessage": "Optional on both, works the same if installed on either side"
+  },
+  "project.settings.environment.client_and_server.optional_both_prefers_both.title": {
+    "defaultMessage": "Optional on both, works best when installed on both sides"
+  },
+  "project.settings.environment.client_and_server.optional_client.title": {
+    "defaultMessage": "Optional on client"
+  },
+  "project.settings.environment.client_and_server.optional_server.title": {
+    "defaultMessage": "Optional on server"
+  },
+  "project.settings.environment.client_and_server.required_both.title": {
+    "defaultMessage": "Required on both"
+  },
+  "project.settings.environment.client_and_server.title": {
+    "defaultMessage": "Client and server"
+  },
+  "project.settings.environment.client_only.description": {
+    "defaultMessage": "All functionality is done client-side and is compatible with vanilla servers."
+  },
+  "project.settings.environment.client_only.title": {
+    "defaultMessage": "Client-side only"
+  },
+  "project.settings.environment.server_only.dedicated_only.title": {
+    "defaultMessage": "Dedicated server only"
+  },
+  "project.settings.environment.server_only.description": {
+    "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
+  },
+  "project.settings.environment.server_only.supports_singleplayer.title": {
+    "defaultMessage": "Works in singleplayer too"
+  },
+  "project.settings.environment.server_only.title": {
+    "defaultMessage": "Server-side only"
+  },
+  "project.settings.environment.singleplayer.description": {
+    "defaultMessage": "Only functions in Singleplayer or when not connected to a Multiplayer server."
+  },
+  "project.settings.environment.singleplayer.title": {
+    "defaultMessage": "Singleplayer only"
+  },
+  "project.settings.environment.title": {
+    "defaultMessage": "Environment"
+  },
+  "project.settings.gallery.title": {
+    "defaultMessage": "Gallery"
+  },
+  "project.settings.general.title": {
+    "defaultMessage": "General"
+  },
+  "project.settings.license.title": {
+    "defaultMessage": "License"
+  },
+  "project.settings.links.title": {
+    "defaultMessage": "Links"
+  },
+  "project.settings.members.title": {
+    "defaultMessage": "Members"
+  },
+  "project.settings.tags.title": {
+    "defaultMessage": "Tags"
+  },
+  "project.settings.upload.title": {
+    "defaultMessage": "Upload"
+  },
+  "project.settings.versions.title": {
+    "defaultMessage": "Versions"
+  },
+  "project.settings.view.title": {
+    "defaultMessage": "View"
+  },
  "project.versions.channel.alpha.symbol": {
    "defaultMessage": "A"
  },
@@ -619,5 +760,8 @@
  },
  "tooltip.date-at-time": {
    "defaultMessage": "{date, date, long} at {time, time, short}"
+  },
+  "ui.component.unsaved-changes-popup.body": {
+    "defaultMessage": "You have unsaved changes."
  }
 }
--- a/packages/ui/src/providers/api.ts
+++ b/packages/ui/src/providers/api.ts
@@ -0,0 +1,5 @@
+import type { ModrinthApi } from '@modrinth/utils'
+
+import { createContext } from '.'
+
+export const [injectApi, provideApi] = createContext<ModrinthApi>('root', 'apiContext')
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -78,4 +78,5 @@ export function createContext<ContextValue>(
 	return [injectContext, provideContext] as const
 }

+export * from './project-page'
 export * from './web-notifications'
--- a/packages/ui/src/providers/project-page.ts
+++ b/packages/ui/src/providers/project-page.ts
@@ -0,0 +1,13 @@
+import type { Project, ProjectV3Partial } from '@modrinth/utils'
+import type { Ref } from 'vue'
+
+import { createContext } from '.'
+
+export interface ProjectPageContext {
+	projectV2: Ref<Project>
+	projectV3: Ref<ProjectV3Partial>
+	refreshProject: () => Promise<void>
+}
+
+export const [injectProjectPageContext, provideProjectPageContext] =
+	createContext<ProjectPageContext>('root', 'projectPageContext')
--- a/packages/ui/src/types.d.ts
+++ b/packages/ui/src/types.d.ts
@@ -0,0 +1,2 @@
+type NonEmptyObject<T> = T extends object ? (keyof T extends never ? never : T) : never
+type ValidKeys<T> = NonEmptyObject<T> extends infer O ? (O extends object ? keyof O : never) : never
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -1,14 +1,26 @@
 import { defineMessages } from '@vintl/vintl'

 export const commonMessages = defineMessages({
+	analyticsButton: {
+		id: 'button.analytics',
+		defaultMessage: 'Analytics',
+	},
 	allProjectType: {
 		id: 'project-type.all',
 		defaultMessage: 'All',
 	},
+	backButton: {
+		id: 'button.back',
+		defaultMessage: 'Back',
+	},
 	cancelButton: {
 		id: 'button.cancel',
 		defaultMessage: 'Cancel',
 	},
+	changesSavedLabel: {
+		id: 'label.changes-saved',
+		defaultMessage: 'Changes saved',
+	},
 	collectionsLabel: {
 		id: 'label.collections',
 		defaultMessage: 'Collections',
@@ -17,14 +29,6 @@ export const commonMessages = defineMessages({
 		id: 'button.continue',
 		defaultMessage: 'Continue',
 	},
-	nextButton: {
-		id: 'button.next',
-		defaultMessage: 'Next',
-	},
-	backButton: {
-		id: 'button.back',
-		defaultMessage: 'Back',
-	},
 	copyIdButton: {
 		id: 'button.copy-id',
 		defaultMessage: 'Copy ID',
@@ -33,10 +37,6 @@ export const commonMessages = defineMessages({
 		id: 'button.copy-permalink',
 		defaultMessage: 'Copy permanent link',
 	},
-	changesSavedLabel: {
-		id: 'label.changes-saved',
-		defaultMessage: 'Changes saved',
-	},
 	createAProjectButton: {
 		id: 'button.create-a-project',
 		defaultMessage: 'Create a project',
@@ -81,6 +81,10 @@ export const commonMessages = defineMessages({
 		id: 'notification.error.title',
 		defaultMessage: 'An error occurred',
 	},
+	followButton: {
+		id: 'button.follow',
+		defaultMessage: 'Follow',
+	},
 	followedProjectsLabel: {
 		id: 'label.followed-projects',
 		defaultMessage: 'Followed projects',
@@ -105,10 +109,38 @@ export const commonMessages = defineMessages({
 		id: 'label.moderation',
 		defaultMessage: 'Moderation',
 	},
+	moreOptionsButton: {
+		id: 'button.more-options',
+		defaultMessage: 'More options',
+	},
+	newBadge: {
+		id: 'badge.new',
+		defaultMessage: 'New',
+	},
+	nextButton: {
+		id: 'button.next',
+		defaultMessage: 'Next',
+	},
 	notificationsLabel: {
 		id: 'label.notifications',
 		defaultMessage: 'Notifications',
 	},
+	openFolderButton: {
+		id: 'button.open-folder',
+		defaultMessage: 'Open folder',
+	},
+	orLabel: {
+		id: 'label.or',
+		defaultMessage: 'or',
+	},
+	passwordLabel: {
+		id: 'label.password',
+		defaultMessage: 'Password',
+	},
+	paymentMethodCardDisplay: {
+		id: 'omorphia.component.purchase_modal.payment_method_card_display',
+		defaultMessage: '{card_brand} ending in {last_four}',
+	},
 	playButton: {
 		id: 'button.play',
 		defaultMessage: 'Play',
@@ -137,17 +169,17 @@ export const commonMessages = defineMessages({
 		id: 'button.remove',
 		defaultMessage: 'Remove',
 	},
+	removeImageButton: {
+		id: 'button.remove-image',
+		defaultMessage: 'Remove image',
+	},
 	reportButton: {
 		id: 'button.report',
 		defaultMessage: 'Report',
 	},
-	openFolderButton: {
-		id: 'button.open-folder',
-		defaultMessage: 'Open folder',
-	},
-	passwordLabel: {
-		id: 'label.password',
-		defaultMessage: 'Password',
+	resetButton: {
+		id: 'button.reset',
+		defaultMessage: 'Reset',
 	},
 	saveButton: {
 		id: 'button.save',
@@ -157,10 +189,22 @@ export const commonMessages = defineMessages({
 		id: 'button.save-changes',
 		defaultMessage: 'Save changes',
 	},
+	savedLabel: {
+		id: 'label.saved',
+		defaultMessage: 'Saved',
+	},
+	savingButton: {
+		id: 'button.saving',
+		defaultMessage: 'Saving',
+	},
 	scopesLabel: {
 		id: 'label.scopes',
 		defaultMessage: 'Scopes',
 	},
+	searchPlaceholder: {
+		id: 'input.search.placeholder',
+		defaultMessage: 'Search...',
+	},
 	serverLabel: {
 		id: 'label.server',
 		defaultMessage: 'Server',
@@ -193,6 +237,10 @@ export const commonMessages = defineMessages({
 		id: 'label.title',
 		defaultMessage: 'Title',
 	},
+	unfollowButton: {
+		id: 'button.unfollow',
+		defaultMessage: 'Unfollow',
+	},
 	unlistedLabel: {
 		id: 'label.unlisted',
 		defaultMessage: 'Unlisted',
@@ -201,10 +249,6 @@ export const commonMessages = defineMessages({
 		id: 'button.upload-image',
 		defaultMessage: 'Upload image',
 	},
-	removeImageButton: {
-		id: 'button.remove-image',
-		defaultMessage: 'Remove image',
-	},
 	visibilityLabel: {
 		id: 'label.visibility',
 		defaultMessage: 'Visibility',
@@ -213,60 +257,111 @@ export const commonMessages = defineMessages({
 		id: 'label.visit-your-profile',
 		defaultMessage: 'Visit your profile',
 	},
-	paymentMethodCardDisplay: {
-		id: 'omorphia.component.purchase_modal.payment_method_card_display',
-		defaultMessage: '{card_brand} ending in {last_four}',
-	},
 })

 export const commonSettingsMessages = defineMessages({
-	appearance: {
-		id: 'settings.appearance.title',
-		defaultMessage: 'Appearance',
-	},
-	language: {
-		id: 'settings.language.title',
-		defaultMessage: 'Language',
-	},
-	profile: {
-		id: 'settings.profile.title',
-		defaultMessage: 'Public profile',
-	},
 	account: {
 		id: 'settings.account.title',
 		defaultMessage: 'Account and security',
 	},
-	authorizedApps: {
-		id: 'settings.authorized-apps.title',
-		defaultMessage: 'Authorized apps',
-	},
-	sessions: {
-		id: 'settings.sessions.title',
-		defaultMessage: 'Sessions',
-	},
-	pats: {
-		id: 'settings.pats.title',
-		defaultMessage: 'Personal access tokens',
+	appearance: {
+		id: 'settings.appearance.title',
+		defaultMessage: 'Appearance',
 	},
 	applications: {
 		id: 'settings.applications.title',
 		defaultMessage: 'Your applications',
 	},
+	authorizedApps: {
+		id: 'settings.authorized-apps.title',
+		defaultMessage: 'Authorized apps',
+	},
 	billing: {
 		id: 'settings.billing.title',
 		defaultMessage: 'Billing and subscriptions',
 	},
+	language: {
+		id: 'settings.language.title',
+		defaultMessage: 'Language',
+	},
+	pats: {
+		id: 'settings.pats.title',
+		defaultMessage: 'Personal access tokens',
+	},
+	profile: {
+		id: 'settings.profile.title',
+		defaultMessage: 'Public profile',
+	},
+	sessions: {
+		id: 'settings.sessions.title',
+		defaultMessage: 'Sessions',
+	},
+})
+
+export const commonProjectSettingsMessages = defineMessages({
+	analytics: {
+		id: 'project.settings.analytics.title',
+		defaultMessage: 'Analytics',
+	},
+	description: {
+		id: 'project.settings.description.title',
+		defaultMessage: 'Description',
+	},
+	environment: {
+		id: 'project.settings.environment.title',
+		defaultMessage: 'Environment',
+	},
+	gallery: {
+		id: 'project.settings.gallery.title',
+		defaultMessage: 'Gallery',
+	},
+	general: {
+		id: 'project.settings.general.title',
+		defaultMessage: 'General',
+	},
+	license: {
+		id: 'project.settings.license.title',
+		defaultMessage: 'License',
+	},
+	links: {
+		id: 'project.settings.links.title',
+		defaultMessage: 'Links',
+	},
+	members: {
+		id: 'project.settings.members.title',
+		defaultMessage: 'Members',
+	},
+	tags: {
+		id: 'project.settings.tags.title',
+		defaultMessage: 'Tags',
+	},
+	upload: {
+		id: 'project.settings.upload.title',
+		defaultMessage: 'Upload',
+	},
+	versions: {
+		id: 'project.settings.versions.title',
+		defaultMessage: 'Versions',
+	},
+	view: {
+		id: 'project.settings.view.title',
+		defaultMessage: 'View',
+	},
 })

 export const paymentMethodMessages = defineMessages({
-	visa: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.visa',
-		defaultMessage: 'Visa',
+	amazon_pay: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
+		defaultMessage: 'Amazon Pay',
 	},
 	amex: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.amex',
 		defaultMessage: 'American Express',
 	},
+	cashapp: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
+		defaultMessage: 'Cash App',
+	},
 	diners: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.diners',
 		defaultMessage: 'Diners Club',
@@ -279,29 +374,28 @@ export const paymentMethodMessages = defineMessages({
 		id: 'omorphia.component.purchase_modal.payment_method_type.eftpos',
 		defaultMessage: 'EFTPOS',
 	},
-	jcb: { id: 'omorphia.component.purchase_modal.payment_method_type.jcb', defaultMessage: 'JCB' },
+	jcb: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.jcb',
+		defaultMessage: 'JCB',
+	},
 	mastercard: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.mastercard',
 		defaultMessage: 'MasterCard',
 	},
-	unionpay: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
-		defaultMessage: 'UnionPay',
-	},
 	paypal: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.paypal',
 		defaultMessage: 'PayPal',
 	},
-	cashapp: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
-		defaultMessage: 'Cash App',
-	},
-	amazon_pay: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
-		defaultMessage: 'Amazon Pay',
+	unionpay: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
+		defaultMessage: 'UnionPay',
 	},
 	unknown: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.unknown',
 		defaultMessage: 'Unknown payment method',
 	},
+	visa: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.visa',
+		defaultMessage: 'Visa',
+	},
 })
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './common-messages'
 export * from './game-modes'
 export * from './notices'
+export * from './savable'
 export * from './search'
--- a/packages/ui/src/utils/savable.ts
+++ b/packages/ui/src/utils/savable.ts
@@ -0,0 +1,38 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+export function useSavable<T extends Record<string, unknown>>(
+	data: () => T,
+	save: (changes: Partial<T>) => void,
+): {
+	saved: ComputedRef<T>
+	current: Ref<T>
+	reset: () => void
+	save: () => void
+} {
+	const savedValues = computed(data)
+	const currentValues = ref({ ...data() }) as Ref<T>
+	const changes = computed<Partial<T>>(() => {
+		const values: Partial<T> = {}
+		const keys = Object.keys(currentValues.value) as (keyof T)[]
+		for (const key of keys) {
+			if (savedValues.value[key] !== currentValues.value[key]) {
+				values[key] = currentValues.value[key]
+			}
+		}
+		return values
+	})
+
+	const reset = () => {
+		currentValues.value = data()
+	}
+
+	const saveInternal = () => (changes.value ? save(changes.value) : {})
+
+	return {
+		saved: savedValues,
+		current: currentValues,
+		reset,
+		save: saveInternal,
+	}
+}