feat: manage project versions v2 (#5049)

* update add files copy and go to next step on just one file * rename and reorder stages * add metadata stage and update details stage * implement files inside metadata stage * use regular prettier instead of prettier eslint * remove changelog stage config * save button on details stage * update edit buttons in versions table * add collapse environment selector * implement dependencies list in metadata step * move dependencies into provider * add suggested dependencies to metadata stage * pnpm prepr * fix unused var * Revert "add collapse environment selector" This reverts commit f90fabc7a57ff201f26e1b628eeced8e6ef75865. * hide resource pack loader only when its the only loader * fix no dependencies for modpack * add breadcrumbs with hide breadcrumb option * wider stages * add proper horizonal scroll breadcrumbs * fix titles * handle save version in version page * remove box shadow * add notification provider to storybook * add drop area for versions to drop file right into page * fix mobile versions table buttons overflowing * pnpm prepr * fix drop file opening modal in wrong stage * implement invalid file for dropping files * allow horizontal scroll on breadcrumbs * update infer.js as best as possible * add create version button uploading version state * add extractVersionFromFilename for resource pack and datapack * allow jars for datapack project * detect multiple loaders when possible * iris means compatible with optifine too * infer environment on loader change as well * add tooltip * prevent navigate forward when cannot go to next step * larger breadcrumb click targets * hide loaders and mc versions stage until files added * fix max width in header * fix add files from metadata step jumping steps * define width in NewModal instead * disable remove dependency in metadata stage * switch metadata and details buttons positions * fix remove button spacing * do not allow duplicate suggested dependencies * fix version detection for fabric minecraft version semvar * better verion number detection based on filename * show resource pack loader but uneditable * remove vanilla shader detection * refactor: break up large infer.js into ts and modules * remove duplicated types * add fill missing from file name step * pnpm prepr * fix neoforge loader parse failing and not adding neoforge loader * add missing pack formats * handle new pack format * pnpm prepr * add another regex where it is version in anywhere in filename * only show resource pack or data pack options for filetype on datapack project * add redundant zip folder check * reject RP and DP if has redundant folder * fix hide stage in breadcrumb * add snapshot group key in case no release version. brings out 26.1 snapshots * pnpm prepr * open in group if has something selected * fix resource pack loader uneditable if accidentally selected on different project type * add new environment tags * add unknown and not applicable environment tags * pnpm prepr * use shared constant on labels * use ref for timeout * remove console logs * remove box shadow only for cm-content * feat: xhr upload + fix wrangler prettierignore * fix: upload content type fix * fix dependencies version width * fix already added dependencies logic * add changelog minheight * set progress percentage on button * add legacy fabric detection logic * lint * small update on create version button label --------- Co-authored-by: Calum H. (IMB11) <contact@cal.engineer> Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
2026-01-12 12:41:14 -07:00
parent b46f6d0141
commit 61c8cd75cd
64 changed files with 3185 additions and 1709 deletions
--- a/packages/ui/src/components/base/DropArea.vue
+++ b/packages/ui/src/components/base/DropArea.vue
@@ -15,6 +15,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'

+import { injectNotificationManager } from '../../providers'
+
+const { addNotification } = injectNotificationManager()
+
 const props = withDefaults(
 	defineProps<{
 		accept: string
@@ -27,7 +31,6 @@ const props = withDefaults(
 const emit = defineEmits(['change'])

 const dropAreaRef = ref<HTMLDivElement>()
-const fileAllowed = ref(false)

 const hideDropArea = () => {
 	if (dropAreaRef.value) {
@@ -36,29 +39,61 @@ const hideDropArea = () => {
 }

 const handleDrop = (event: DragEvent) => {
+	event.preventDefault()
 	hideDropArea()
-	if (event.dataTransfer && event.dataTransfer.files && fileAllowed.value) {
-		emit('change', event.dataTransfer.files)
+
+	const files = event.dataTransfer?.files
+	if (!files || files.length === 0) return
+
+	const file = files[0]
+
+	if (!matchesAccept({ getAsFile: () => file } as DataTransferItem, props.accept)) {
+		addNotification({
+			title: 'Invalid file',
+			text: `The file "${file.name}" is not a valid file type for this project.`,
+			type: 'error',
+		})
+		return
 	}
+
+	emit('change', files)
+}
+
+function matchesAccept(file: DataTransferItem, accept?: string): boolean {
+	if (!accept || accept.trim() === '') return true
+
+	const fileType = file.type // e.g. "image/png"
+	const fileName = file.getAsFile()?.name.toLowerCase() ?? ''
+
+	return accept
+		.split(',')
+		.map((t) => t.trim().toLowerCase())
+		.some((token) => {
+			// .png, .jpg
+			if (token.startsWith('.')) {
+				return fileName.endsWith(token)
+			}
+
+			// image/*
+			if (token.endsWith('/*')) {
+				const base = token.slice(0, -1) // "image/"
+				return fileType.startsWith(base)
+			}
+
+			// image/png
+			return fileType === token
+		})
 }

 const allowDrag = (event: DragEvent) => {
-	const file = event.dataTransfer?.items[0]
-	if (
-		file &&
-		props.accept
-			.split(',')
-			.reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === '*', false)
-	) {
-		fileAllowed.value = true
-		event.dataTransfer.dropEffect = 'copy'
-		event.preventDefault()
-		if (dropAreaRef.value) {
-			dropAreaRef.value.style.visibility = 'visible'
-		}
-	} else {
-		fileAllowed.value = false
-		hideDropArea()
+	const item = event.dataTransfer?.items?.[0]
+	if (!item || item.kind !== 'file') return
+
+	event.preventDefault()
+	event.dataTransfer!.dropEffect = 'copy'
+
+	if (dropAreaRef.value) {
+		dropAreaRef.value.style.visibility = 'visible'
 	}
 }

--- a/packages/ui/src/components/base/DropzoneFileInput.vue
+++ b/packages/ui/src/components/base/DropzoneFileInput.vue
@@ -50,6 +50,10 @@ import { FolderUpIcon } from '@modrinth/assets'
 import { fileIsValid } from '@modrinth/utils'
 import { ref } from 'vue'

+import { injectNotificationManager } from '../../providers'
+
+const { addNotification } = injectNotificationManager()
+
 const fileInput = ref<HTMLInputElement | null>(null)

 const emit = defineEmits<{
@@ -58,7 +62,6 @@ const emit = defineEmits<{

 const props = withDefaults(
 	defineProps<{
-		prompt?: string
 		primaryPrompt?: string | null
 		secondaryPrompt?: string | null
 		multiple?: boolean
@@ -69,20 +72,58 @@ const props = withDefaults(
 		size?: 'small' | 'standard'
 	}>(),
 	{
-		prompt: 'Drag and drop files or click to browse',
-		primaryPrompt: 'Drag and drop files or click to browse',
-		secondaryPrompt: 'You can try to drag files or folder or click this area to select it',
+		primaryPrompt: 'Drop files here or click to upload',
+		secondaryPrompt: 'Only supported file types will be accepted',
 		size: 'standard',
 	},
 )

 const files = ref<File[]>([])

+function matchesAccept(file: File, accept?: string): boolean {
+	if (!accept || accept.trim() === '') return true
+
+	const fileType = file.type // e.g. "image/png"
+	const fileName = file.name.toLowerCase()
+
+	return accept
+		.split(',')
+		.map((t) => t.trim().toLowerCase())
+		.some((token) => {
+			// .png, .jpg
+			if (token.startsWith('.')) {
+				return fileName.endsWith(token)
+			}
+
+			// image/*
+			if (token.endsWith('/*')) {
+				const base = token.slice(0, -1) // "image/"
+				return fileType.startsWith(base)
+			}
+
+			// image/png
+			return fileType === token
+		})
+}
+
 function addFiles(incoming: FileList, shouldNotReset = false) {
 	if (!shouldNotReset || props.shouldAlwaysReset) {
 		files.value = Array.from(incoming)
 	}

+	// Filter out files that don't match the accept prop
+	const invalidFiles = files.value.filter((file) => !matchesAccept(file, props.accept))
+	if (invalidFiles.length > 0) {
+		for (const file of invalidFiles) {
+			addNotification({
+				title: 'Invalid file',
+				text: `The file "${file.name}" is not a valid file type for this project.`,
+				type: 'error',
+			})
+		}
+		files.value = files.value.filter((file) => matchesAccept(file, props.accept))
+	}
+
 	const validationOptions = {
 		maxSize: props.maxSize ?? undefined,
 		alertOnInvalid: true,
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -315,6 +315,7 @@ const props = withDefaults(
 		placeholder?: string
 		maxLength?: number
 		maxHeight?: number
+		minHeight?: number
 	}>(),
 	{
 		modelValue: '',
@@ -324,6 +325,7 @@ const props = withDefaults(
 		placeholder: 'Write something...',
 		maxLength: undefined,
 		maxHeight: undefined,
+		minHeight: undefined,
 	},
 )

@@ -360,9 +362,9 @@ onMounted(() => {
 			border: 'none',
 		},
 		'.cm-content': {
+			minHeight: props.minHeight ? `${props.minHeight}px` : '200px',
 			marginBlockEnd: '0.5rem',
 			padding: '0.5rem',
-			minHeight: '200px',
 			caretColor: 'var(--color-contrast)',
 			width: '100%',
 		},
@@ -609,9 +611,9 @@ watch(
 									border: 'none',
 								},
 								'.cm-content': {
+									minHeight: props.minHeight ? `${props.minHeight}px` : '200px',
 									marginBlockEnd: '0.5rem',
 									padding: '0.5rem',
-									minHeight: '200px',
 									caretColor: 'var(--color-contrast)',
 									width: '100%',
 									opacity: newValue ? 0.6 : 1,
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -6,11 +6,54 @@
 		:on-hide="onModalHide"
 		:closable="true"
 		:close-on-click-outside="false"
+		:width="resolvedMaxWidth"
 	>
 		<template #title>
-			<div class="flex flex-wrap items-center gap-1 text-secondary">
-				<span class="text-lg font-bold text-contrast sm:text-xl">{{ resolvedTitle }}</span>
+			<div
+				v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)"
+				class="relative w-full"
+			>
+				<div
+					class="pointer-events-none absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-bg-raised to-transparent z-10 transition-opacity duration-200"
+					:class="showLeftShadow ? 'opacity-100' : 'opacity-0'"
+				/>
+				<div
+					ref="breadcrumbScroller"
+					class="flex w-full overflow-x-auto overflow-y-hidden scrollbar-hide pr-6"
+					@wheel.prevent="onBreadcrumbWheel"
+					@scroll="updateScrollShadows"
+				>
+					<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
+						<div
+							:ref="(el) => setBreadcrumbRef(stage.id, el as HTMLElement | null)"
+							class="flex w-max items-center"
+						>
+							<button
+								class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max py-3 px-1"
+								:class="{
+									'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
+									'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
+									'opacity-50 cursor-not-allowed': cannotNavigateToStage(index),
+								}"
+								:disabled="cannotNavigateToStage(index)"
+								@click="setStage(stage.id)"
+							>
+								{{ resolveCtxFn(stage.title, context) }}
+							</button>
+							<ChevronRightIcon
+								v-if="index < breadcrumbStages.length - 1"
+								class="h-5 w-5 text-secondary"
+								stroke-width="3"
+							/>
+						</div>
+					</template>
+				</div>
+				<div
+					class="pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-bg-raised to-transparent z-10 transition-opacity duration-200"
+					:class="showRightShadow ? 'opacity-100' : 'opacity-0'"
+				/>
 			</div>
+			<span v-else class="text-lg font-bold text-contrast sm:text-xl">{{ resolvedTitle }}</span>
 		</template>

 		<progress
@@ -58,9 +101,10 @@
 </template>

 <script lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
 import { ButtonStyled, NewModal } from '@modrinth/ui'
 import type { Component } from 'vue'
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'

 export interface StageButtonConfig {
 	label?: string
@@ -79,9 +123,13 @@ export interface StageConfigInput<T> {
 	stageContent: Component
 	title: MaybeCtxFn<T, string>
 	skip?: MaybeCtxFn<T, boolean>
+	hideStageInBreadcrumb?: MaybeCtxFn<T, boolean>
 	nonProgressStage?: MaybeCtxFn<T, boolean>
+	cannotNavigateForward?: MaybeCtxFn<T, boolean>
 	leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 	rightButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
+	/** Max width for the modal content and header defined in px (e.g., '460px', '600px'). Defaults to '460px'. */
+	maxWidth?: MaybeCtxFn<T, string>
 }

 export function resolveCtxFn<T, R>(value: MaybeCtxFn<T, R>, ctx: T): R {
@@ -93,6 +141,8 @@ export function resolveCtxFn<T, R>(value: MaybeCtxFn<T, R>, ctx: T): R {
 const props = defineProps<{
 	stages: StageConfigInput<T>[]
 	context: T
+	breadcrumbs?: boolean
+	fitContent?: boolean
 }>()

 const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
@@ -178,6 +228,12 @@ const nonProgressStage = computed(() => {
 	return resolveCtxFn(stage.nonProgressStage, props.context)
 })

+const resolvedMaxWidth = computed(() => {
+	const stage = currentStage.value
+	if (!stage?.maxWidth) return '560px'
+	return resolveCtxFn(stage.maxWidth, props.context)
+})
+
 const progressValue = computed(() => {
 	const isProgressStage = (stage: StageConfigInput<T>) => {
 		if (resolveCtxFn(stage.nonProgressStage, props.context)) return false
@@ -193,6 +249,99 @@ const progressValue = computed(() => {
 	return totalCount > 0 ? (completedCount / totalCount) * 100 : 0
 })

+const breadcrumbScroller = ref<HTMLElement | null>(null)
+const breadcrumbRefs = ref<Map<string, HTMLElement>>(new Map())
+const showLeftShadow = ref(false)
+const showRightShadow = ref(false)
+
+function setBreadcrumbRef(stageId: string, el: HTMLElement | null) {
+	if (el) breadcrumbRefs.value.set(stageId, el)
+	else breadcrumbRefs.value.delete(stageId)
+}
+
+function scrollToCurrentBreadcrumb() {
+	const stage = currentStage.value
+	if (!stage || !breadcrumbScroller.value) return
+
+	const el = breadcrumbRefs.value.get(stage.id)
+	if (!el) return
+
+	nextTick(() => {
+		breadcrumbScroller.value?.scrollTo({
+			left: el.offsetLeft - 50,
+			behavior: 'smooth',
+		})
+	})
+}
+
+function updateScrollShadows() {
+	const el = breadcrumbScroller.value
+	if (!el) {
+		showLeftShadow.value = false
+		showRightShadow.value = false
+		return
+	}
+
+	showLeftShadow.value = el.scrollLeft > 0
+	showRightShadow.value = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
+}
+
+function onBreadcrumbWheel(e: WheelEvent) {
+	if (!breadcrumbScroller.value) return
+
+	const el = breadcrumbScroller.value
+	const canScrollHorizontally = el.scrollWidth > el.clientWidth
+
+	if (canScrollHorizontally) {
+		// Support both horizontal and vertical scroll input
+		const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
+		el.scrollLeft += delta
+	}
+}
+
+// Stages that are not skipped (visible in breadcrumbs)
+const breadcrumbStages = computed(() => {
+	return props.stages.filter((stage) => {
+		const visibleStep =
+			!resolveCtxFn(stage.skip, props.context) &&
+			!resolveCtxFn(stage.nonProgressStage, props.context) &&
+			!resolveCtxFn(stage.hideStageInBreadcrumb, props.context)
+		return visibleStep
+	})
+})
+
+// Check if navigation to a breadcrumb stage is allowed
+// Navigation backwards is always allowed, but forward navigation requires all intermediate stages to allow it
+function cannotNavigateToStage(breadcrumbIndex: number): boolean {
+	const targetStage = breadcrumbStages.value[breadcrumbIndex]
+	if (!targetStage) return false
+
+	const targetStageIndex = props.stages.findIndex((s) => s.id === targetStage.id)
+	if (targetStageIndex === -1) return false
+
+	// Always allow navigating to current or previous stages
+	if (targetStageIndex <= currentStageIndex.value) return false
+
+	// For forward navigation, check all stages between current and target
+	for (let i = currentStageIndex.value; i < targetStageIndex; i++) {
+		const stage = props.stages[i]
+		if (stage.skip && resolveCtxFn(stage.skip, props.context)) continue
+		if (resolveCtxFn(stage.cannotNavigateForward, props.context)) {
+			return true
+		}
+	}
+
+	return false
+}
+
+watch([breadcrumbStages, currentStageIndex], () => nextTick(() => updateScrollShadows()), {
+	immediate: true,
+})
+
+watch(currentStageIndex, () => {
+	scrollToCurrentBreadcrumb()
+})
+
 const emit = defineEmits<{
 	(e: 'refresh-data' | 'hide'): void
 }>()
@@ -228,4 +377,13 @@ progress::-webkit-progress-value {
 progress::-moz-progress-bar {
 	@apply bg-contrast;
 }
+
+.scrollbar-hide {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+	display: none;
+}
 </style>
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -20,12 +20,19 @@
 			]"
 			@click="() => (closeOnClickOutside && closable ? hide() : {})"
 		/>
-		<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
+		<div
+			class="modal-container experimental-styles-within"
+			:class="{ shown: visible }"
+			:style="{
+				'--_max-width': maxWidth,
+				'--_width': width,
+			}"
+		>
 			<div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
 				<div
 					v-if="!hideHeader"
 					data-tauri-drag-region
-					class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
+					class="grid grid-cols-[auto_min-content] items-center gap-4 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
 				>
 					<div class="flex text-wrap break-words items-center gap-3 min-w-0">
 						<slot name="title">
@@ -130,6 +137,10 @@ const props = withDefaults(
 		mergeHeader?: boolean
 		scrollable?: boolean
 		maxContentHeight?: string
+		/** Max width for the modal (e.g., '460px', '600px'). Defaults to '60rem'. */
+		maxWidth?: string
+		/** Width for the modal body (e.g., '460px', '600px'). */
+		width?: string
 	}>(),
 	{
 		type: true,
@@ -147,6 +158,8 @@ const props = withDefaults(
 		// TODO: migrate all modals to use scrollable and remove this prop
 		scrollable: false,
 		maxContentHeight: '70vh',
+		maxWidth: undefined,
+		width: undefined,
 	},
 )

@@ -315,7 +328,7 @@ function handleKeyDown(event: KeyboardEvent) {
 		max-width: min(var(--_max-width, 60rem), calc(100% - 2 * var(--gap-lg)));
 		overflow-y: hidden;
 		overflow-x: hidden;
-		width: fit-content;
+		width: var(--_width, fit-content);
 		pointer-events: auto;
 		scale: 0.97;

--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -155,23 +155,17 @@
 									</TagItem>
 								</div>
 							</div>
-							<div
-								v-if="hasMultipleEnvironments"
-								v-tooltip="
-									ENVIRONMENTS_COPY[version.environment || 'unknown']?.description
-										? formatMessage(ENVIRONMENTS_COPY[version.environment || 'unknown'].description)
-										: undefined
-								"
-								class="flex items-center"
-							>
-								<TagItem class="z-[1] text-center">
-									<component :is="ENVIRONMENTS_COPY[version.environment || 'unknown']?.icon" />
-									{{
-										ENVIRONMENTS_COPY[version.environment || 'unknown']?.title
-											? formatMessage(ENVIRONMENTS_COPY[version.environment || 'unknown'].title)
-											: ''
-									}}
-								</TagItem>
+							<div v-if="hasMultipleEnvironments" class="flex items-center">
+								<div class="flex flex-wrap gap-1">
+									<TagItem
+										v-for="(tag, tagIdx) in getEnvironmentTags(version.environment)"
+										:key="`env-tag-${tagIdx}`"
+										class="z-[1] text-center"
+									>
+										<component :is="tag.icon" />
+										{{ formatMessage(tag.label) }}
+									</TagItem>
+								</div>
 							</div>
 						</div>
 						<div
@@ -198,7 +192,9 @@
 						</div>
 					</div>
 				</div>
-				<div class="flex items-start justify-end gap-1 sm:items-center z-[1]">
+				<div
+					class="flex items-start justify-end gap-1 sm:items-center z-[1] max-[400px]:flex-col max-[400px]:justify-start"
+				>
 					<slot name="actions" :version="version"></slot>
 				</div>
 				<div v-if="showFiles" class="tag-list pointer-events-none relative z-[1] col-span-full">
@@ -244,7 +240,7 @@ import { commonMessages } from '../../utils/common-messages'
 import AutoLink from '../base/AutoLink.vue'
 import TagItem from '../base/TagItem.vue'
 import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
-import { ENVIRONMENTS_COPY } from './settings/environment/environments'
+import { getEnvironmentTags } from './settings/environment/environments'

 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -29,9 +29,9 @@
 		<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}`">
+				<TagItem v-for="(tag, tagIdx) in primaryEnvironmentTags" :key="`environment-tag-${tagIdx}`">
 					<component :is="tag.icon" />
-					{{ formatMessage(tag.message) }}
+					{{ formatMessage(tag.label) }}
 				</TagItem>
 			</div>
 		</section>
@@ -88,16 +88,12 @@
 import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
 import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
 import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
-import { type Component, computed } from 'vue'
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'

-import {
-	defineMessage,
-	defineMessages,
-	type MessageDescriptor,
-	useVIntl,
-} from '../../composables/i18n'
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import TagItem from '../base/TagItem.vue'
+import { getEnvironmentTags } from './settings/environment/environments'

 const { formatMessage } = useVIntl()
 const router = useRouter()
@@ -133,82 +129,8 @@ 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'))
-		: []
+	return getEnvironmentTags(primaryEnvironment.value)
 })

 const messages = defineMessages({
--- a/packages/ui/src/components/project/settings/environment/environments.ts
+++ b/packages/ui/src/components/project/settings/environment/environments.ts
@@ -1,12 +1,15 @@
 import type { Labrinth } from '@modrinth/api-client'
-import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
+import { ClientIcon, ServerIcon, UserIcon } from '@modrinth/assets'
 import type { Component } from 'vue'

 import { defineMessage, type MessageDescriptor } from '../../../../composables/i18n'

 export const ENVIRONMENTS_COPY: Record<
 	Labrinth.Projects.v3.Environment,
-	{ title: MessageDescriptor; description: MessageDescriptor; icon?: Component }
+	{
+		title: MessageDescriptor
+		description: MessageDescriptor
+	}
 > = {
 	client_only: {
 		title: defineMessage({
@@ -18,19 +21,17 @@ export const ENVIRONMENTS_COPY: Record<
 			defaultMessage:
 				'All functionality is done client-side and is compatible with vanilla servers.',
 		}),
-		icon: ClientIcon,
 	},
 	server_only: {
 		title: defineMessage({
 			id: 'project.environment.server-only.title',
-			defaultMessage: 'Server-side only',
+			defaultMessage: 'Server-side only, works in singleplayer too',
 		}),
 		description: defineMessage({
 			id: 'project.environment.server-only.description',
 			defaultMessage:
 				'All functionality is done server-side and is compatible with vanilla clients.',
 		}),
-		icon: ServerIcon,
 	},
 	singleplayer_only: {
 		title: defineMessage({
@@ -42,7 +43,6 @@ export const ENVIRONMENTS_COPY: Record<
 			defaultMessage:
 				'Only functions in Singleplayer or when not connected to a Multiplayer server.',
 		}),
-		icon: UserIcon,
 	},
 	dedicated_server_only: {
 		title: defineMessage({
@@ -54,67 +54,61 @@ export const ENVIRONMENTS_COPY: Record<
 			defaultMessage:
 				'All functionality is done server-side and is compatible with vanilla clients.',
 		}),
-		icon: ServerIcon,
 	},
 	client_and_server: {
 		title: defineMessage({
 			id: 'project.environment.client-and-server.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, required on both',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-and-server.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	client_only_server_optional: {
 		title: defineMessage({
 			id: 'project.environment.client-only-server-optional.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, optional on server',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-only-server-optional.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	server_only_client_optional: {
 		title: defineMessage({
 			id: 'project.environment.server-only-client-optional.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, optional on client',
 		}),
 		description: defineMessage({
 			id: 'project.environment.server-only-client-optional.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	client_or_server: {
 		title: defineMessage({
 			id: 'project.environment.client-or-server.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, optional on both',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-or-server.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	client_or_server_prefers_both: {
 		title: defineMessage({
 			id: 'project.environment.client-or-server-prefers-both.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, best when installed on both',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-or-server-prefers-both.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	unknown: {
 		title: defineMessage({
@@ -127,3 +121,91 @@ export const ENVIRONMENTS_COPY: Record<
 		}),
 	},
 }
+
+export const ENVIRONMENT_TAG_LABELS = {
+	client: defineMessage({
+		id: 'project.environment.tag.client',
+		defaultMessage: 'Client',
+	}),
+	server: defineMessage({
+		id: 'project.environment.tag.server',
+		defaultMessage: 'Server',
+	}),
+	singleplayer: defineMessage({
+		id: 'project.environment.tag.singleplayer',
+		defaultMessage: 'Singleplayer',
+	}),
+	clientOptional: defineMessage({
+		id: 'project.environment.tag.client-optional',
+		defaultMessage: 'Client optional',
+	}),
+	serverOptional: defineMessage({
+		id: 'project.environment.tag.server-optional',
+		defaultMessage: 'Server optional',
+	}),
+	unknown: defineMessage({
+		id: 'project.environment.tag.unknown',
+		defaultMessage: 'Unknown',
+	}),
+	notApplicable: defineMessage({
+		id: 'project.environment.tag.not-applicable',
+		defaultMessage: 'N/A',
+	}),
+} as const
+
+export function getEnvironmentTags(
+	environment?: Labrinth.Projects.v3.Environment,
+): Array<{ icon: Component | null; label: MessageDescriptor }> {
+	switch (environment) {
+		case 'client_only':
+			return [{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.client }]
+
+		case 'server_only':
+			return [
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server },
+				{ icon: UserIcon, label: ENVIRONMENT_TAG_LABELS.singleplayer },
+			]
+
+		case 'singleplayer_only':
+			return [{ icon: UserIcon, label: ENVIRONMENT_TAG_LABELS.singleplayer }]
+
+		case 'dedicated_server_only':
+			return [{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server }]
+
+		case 'client_and_server':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.client },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server },
+			]
+
+		case 'client_only_server_optional':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.client },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.serverOptional },
+			]
+
+		case 'server_only_client_optional':
+			return [
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server },
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.clientOptional },
+			]
+
+		case 'client_or_server':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.clientOptional },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.serverOptional },
+			]
+
+		case 'client_or_server_prefers_both':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.clientOptional },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.serverOptional },
+			]
+
+		case 'unknown':
+			return [{ label: ENVIRONMENT_TAG_LABELS.unknown, icon: null }]
+
+		default:
+			return [{ label: ENVIRONMENT_TAG_LABELS.notApplicable, icon: null }]
+	}
+}
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -593,24 +593,6 @@
  "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"
  },
@@ -681,13 +663,13 @@
    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
  },
  "project.environment.client-and-server.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, required on both"
  },
  "project.environment.client-only-server-optional.description": {
    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
  },
  "project.environment.client-only-server-optional.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, optional on server"
  },
  "project.environment.client-only.description": {
    "defaultMessage": "All functionality is done client-side and is compatible with vanilla servers."
@@ -699,13 +681,13 @@
    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
  },
  "project.environment.client-or-server-prefers-both.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, best when installed on both"
  },
  "project.environment.client-or-server.description": {
    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
  },
  "project.environment.client-or-server.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, optional on both"
  },
  "project.environment.dedicated-server-only.description": {
    "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
@@ -717,13 +699,13 @@
    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
  },
  "project.environment.server-only-client-optional.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, optional on client"
  },
  "project.environment.server-only.description": {
    "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
  },
  "project.environment.server-only.title": {
-    "defaultMessage": "Server-side only"
+    "defaultMessage": "Server-side only, works in singleplayer too"
  },
  "project.environment.singleplayer-only.description": {
    "defaultMessage": "Only functions in Singleplayer or when not connected to a Multiplayer server."
@@ -731,6 +713,27 @@
  "project.environment.singleplayer-only.title": {
    "defaultMessage": "Singleplayer only"
  },
+  "project.environment.tag.client": {
+    "defaultMessage": "Client"
+  },
+  "project.environment.tag.client-optional": {
+    "defaultMessage": "Client optional"
+  },
+  "project.environment.tag.not-applicable": {
+    "defaultMessage": "N/A"
+  },
+  "project.environment.tag.server": {
+    "defaultMessage": "Server"
+  },
+  "project.environment.tag.server-optional": {
+    "defaultMessage": "Server optional"
+  },
+  "project.environment.tag.singleplayer": {
+    "defaultMessage": "Singleplayer"
+  },
+  "project.environment.tag.unknown": {
+    "defaultMessage": "Unknown"
+  },
  "project.environment.unknown.description": {
    "defaultMessage": "The environment for this version could not be determined."
  },
--- a/packages/ui/src/stories/base/DropArea.stories.ts
+++ b/packages/ui/src/stories/base/DropArea.stories.ts
@@ -12,7 +12,7 @@ export default meta
 export const Default: StoryObj = {
 	render: () => ({
 		components: { DropArea },
-		template: `
+		template: /*html*/ `
 			<DropArea accept="*" @change="(files) => console.log('Files dropped:', files)">
 				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
 					<p class="text-secondary">Drag and drop files anywhere on the page</p>
@@ -26,7 +26,7 @@ export const Default: StoryObj = {
 export const ImagesOnly: StoryObj = {
 	render: () => ({
 		components: { DropArea },
-		template: `
+		template: /*html*/ `
 			<DropArea accept="image/*" @change="(files) => console.log('Images dropped:', files)">
 				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
 					<p class="text-secondary">Drop images here</p>
@@ -36,3 +36,37 @@ export const ImagesOnly: StoryObj = {
 		`,
 	}),
 }
+
+export const AcceptMods: StoryObj = {
+	render: () => ({
+		components: { DropArea },
+		template: /*html*/ `
+			<DropArea
+				accept=".jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip,.sig,.asc,.gpg,application/pgp-signature,application/pgp-keys"
+				@change="(files) => console.log('Mod files dropped:', files)"
+			>
+				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
+					<p class="text-secondary">Drop mod files here</p>
+					<p class="text-sm text-secondary mt-2">Accepts .jar, .zip, .litemod, and signature files (.sig, .asc, .gpg)</p>
+				</div>
+			</DropArea>
+		`,
+	}),
+}
+
+export const AcceptImages: StoryObj = {
+	render: () => ({
+		components: { DropArea },
+		template: /*html*/ `
+			<DropArea
+				accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml"
+				@change="(files) => console.log('Image files dropped:', files)"
+			>
+				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
+					<p class="text-secondary">Drop image files here</p>
+					<p class="text-sm text-secondary mt-2">Accepts PNG, JPEG, GIF, WebP, and SVG images</p>
+				</div>
+			</DropArea>
+		`,
+	}),
+}