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

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>

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>

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>

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>

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'

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',
 	},
 })

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'

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>

packages/ui/src/components/project/settings/index.ts

@@ -0,0 +1,2 @@
+// Environment
+export { default as ProjectSettingsEnvSelector } from './environment/ProjectSettingsEnvSelector.vue'