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>

packages/api-client/src/core/abstract-client.ts

@@ -248,16 +248,32 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	 * Build context for an upload request
 	 *
 	 * Sets metadata.isUpload = true so features can detect uploads.
+	 * Supports both single file uploads and FormData uploads.
 	 */
 	protected buildUploadContext(
 		url: string,
 		path: string,
 		options: UploadRequestOptions,
 	): RequestContext {
-		const metadata: UploadMetadata = {
-			isUpload: true,
-			file: options.file,
-			onProgress: options.onProgress,
+		let metadata: UploadMetadata
+		let body: File | Blob | FormData
+
+		if ('formData' in options && options.formData) {
+			metadata = {
+				isUpload: true,
+				formData: options.formData,
+				onProgress: options.onProgress,
+			}
+			body = options.formData
+		} else if ('file' in options && options.file) {
+			metadata = {
+				isUpload: true,
+				file: options.file,
+				onProgress: options.onProgress,
+			}
+			body = options.file
+		} else {
+			throw new Error('Upload options must include either file or formData')
 		}
 
 		return {
@@ -266,7 +282,7 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 			options: {
 				...options,
 				method: 'POST',
-				body: options.file,
+				body,
 			},
 			attempt: 1,
 			startTime: Date.now(),

packages/api-client/src/core/abstract-upload-client.ts

@@ -12,9 +12,9 @@ import type { UploadHandle, UploadRequestOptions } from '../types/upload'
  */
 export abstract class AbstractUploadClient {
 	/**
-	 * Upload a file with progress tracking
+	 * Upload a file or FormData with progress tracking
 	 * @param path - API path (e.g., '/fs/create')
-	 * @param options - Upload options including file, api, version
+	 * @param options - Upload options including file or formData, api, version
 	 * @returns UploadHandle with promise, onProgress chain, and cancel method
 	 */
 	abstract upload<T = void>(path: string, options: UploadRequestOptions): UploadHandle<T>

packages/api-client/src/modules/labrinth/versions/v3.ts

@@ -1,4 +1,5 @@
 import { AbstractModule } from '../../../core/abstract-module'
+import type { UploadHandle } from '../../../types/upload'
 import type { Labrinth } from '../types'
 
 export class LabrinthVersionsV3Module extends AbstractModule {
@@ -136,11 +137,11 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 	 * ```
 	 */
 
-	public async createVersion(
+	public createVersion(
 		draftVersion: Labrinth.Versions.v3.DraftVersion,
 		versionFiles: Labrinth.Versions.v3.DraftVersionFile[],
 		projectType: Labrinth.Projects.v2.ProjectType | null = null,
-	): Promise<Labrinth.Versions.v3.Version> {
+	): UploadHandle<Labrinth.Versions.v3.Version> {
 		const formData = new FormData()
 
 		const files = versionFiles.map((vf) => vf.file)
@@ -182,21 +183,15 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		formData.append('data', JSON.stringify(data))
 
 		files.forEach((file, i) => {
-			formData.append(fileParts[i], new Blob([file]), file.name)
+			formData.append(fileParts[i], file, file.name)
 		})
 
-		const newVersion = await this.client.request<Labrinth.Versions.v3.Version>(`/version`, {
+		return this.client.upload<Labrinth.Versions.v3.Version>(`/version`, {
 			api: 'labrinth',
 			version: 3,
-			method: 'POST',
-			body: formData,
+			formData,
 			timeout: 60 * 5 * 1000,
-			headers: {
-				'Content-Type': '',
-			},
 		})
-
-		return newVersion
 	}
 
 	/**
@@ -251,10 +246,10 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		})
 	}
 
-	public async addFilesToVersion(
+	public addFilesToVersion(
 		versionId: string,
 		versionFiles: Labrinth.Versions.v3.DraftVersionFile[],
-	): Promise<Labrinth.Versions.v3.Version> {
+	): UploadHandle<Labrinth.Versions.v3.Version> {
 		const formData = new FormData()
 
 		const files = versionFiles.map((vf) => vf.file)
@@ -273,18 +268,14 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		formData.append('data', JSON.stringify({ file_types: fileTypeMap }))
 
 		files.forEach((file, i) => {
-			formData.append(fileParts[i], new Blob([file]), file.name)
+			formData.append(fileParts[i], file, file.name)
 		})
 
-		return this.client.request<Labrinth.Versions.v3.Version>(`/version/${versionId}/file`, {
+		return this.client.upload<Labrinth.Versions.v3.Version>(`/version/${versionId}/file`, {
 			api: 'labrinth',
 			version: 2,
-			method: 'POST',
-			body: formData,
+			formData,
 			timeout: 60 * 5 * 1000,
-			headers: {
-				'Content-Type': '',
-			},
 		})
 	}
 }

packages/api-client/src/platform/xhr-upload-client.ts

@@ -27,12 +27,22 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 
 		const url = this.buildUrl(path, baseUrl, options.version)
 
+		// For FormData uploads, don't set Content-Type (let browser set multipart boundary)
+		// For file uploads, use application/octet-stream
+		const isFormData = 'formData' in options && options.formData instanceof FormData
+		const baseHeaders = this.buildDefaultHeaders()
+		// Remove Content-Type for FormData so browser can set multipart/form-data with boundary
+		if (isFormData) {
+			delete baseHeaders['Content-Type']
+		} else {
+			baseHeaders['Content-Type'] = 'application/octet-stream'
+		}
+
 		const mergedOptions: UploadRequestOptions = {
 			retry: false, // default: don't retry uploads
 			...options,
 			headers: {
-				...this.buildDefaultHeaders(),
-				'Content-Type': 'application/octet-stream',
+				...baseHeaders,
 				...options.headers,
 			},
 		}
@@ -121,7 +131,9 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 				xhr.setRequestHeader(key, value)
 			}
 
-			xhr.send(metadata.file)
+			// Send either FormData or file depending on what was provided
+			const data = 'formData' in metadata ? metadata.formData : metadata.file
+			xhr.send(data)
 			abortController.signal.addEventListener('abort', () => xhr.abort())
 		})
 	}

packages/api-client/src/types/upload.ts

@@ -13,29 +13,66 @@ export interface UploadProgress {
 }
 
 /**
- * Options for upload requests (matches request() style)
- *
- * Extends RequestOptions but excludes body and method since those
- * are determined by the upload itself.
+ * Base options for upload requests
  */
-export interface UploadRequestOptions extends Omit<RequestOptions, 'body' | 'method'> {
-	/** File or Blob to upload */
-	file: File | Blob
+interface BaseUploadRequestOptions extends Omit<RequestOptions, 'body' | 'method'> {
 	/** Callback for progress updates */
 	onProgress?: (progress: UploadProgress) => void
 }
 
 /**
- * Metadata attached to upload contexts
+ * Options for single file upload requests
+ */
+export interface FileUploadRequestOptions extends BaseUploadRequestOptions {
+	/** File or Blob to upload */
+	file: File | Blob
+	formData?: never
+}
+
+/**
+ * Options for FormData upload requests
+ *
+ * Used for multipart uploads (e.g., version file uploads) that need
+ * to send metadata alongside files.
+ */
+export interface FormDataUploadRequestOptions extends BaseUploadRequestOptions {
+	/** FormData containing files and metadata */
+	formData: FormData
+	file?: never
+}
+
+/**
+ * Options for upload requests - either a single file or FormData
+ */
+export type UploadRequestOptions = FileUploadRequestOptions | FormDataUploadRequestOptions
+
+/**
+ * Metadata attached to file upload contexts
  *
  * Features can check `context.metadata?.isUpload` to detect uploads.
  */
-export interface UploadMetadata extends Record<string, unknown> {
+export interface FileUploadMetadata extends Record<string, unknown> {
 	isUpload: true
 	file: File | Blob
+	formData?: never
 	onProgress?: (progress: UploadProgress) => void
 }
 
+/**
+ * Metadata attached to FormData upload contexts
+ */
+export interface FormDataUploadMetadata extends Record<string, unknown> {
+	isUpload: true
+	formData: FormData
+	file?: never
+	onProgress?: (progress: UploadProgress) => void
+}
+
+/**
+ * Metadata attached to upload contexts - either file or FormData
+ */
+export type UploadMetadata = FileUploadMetadata | FormDataUploadMetadata
+
 /**
  * Handle returned from upload operations
  *

packages/assets/generated-icons.ts

@@ -76,6 +76,7 @@ import _FileIcon from './icons/file.svg?component'
 import _FileArchiveIcon from './icons/file-archive.svg?component'
 import _FileCodeIcon from './icons/file-code.svg?component'
 import _FileImageIcon from './icons/file-image.svg?component'
+import _FilePlusIcon from './icons/file-plus.svg?component'
 import _FileTextIcon from './icons/file-text.svg?component'
 import _FilterIcon from './icons/filter.svg?component'
 import _FilterXIcon from './icons/filter-x.svg?component'
@@ -308,6 +309,7 @@ export const FileIcon = _FileIcon
 export const FileArchiveIcon = _FileArchiveIcon
 export const FileCodeIcon = _FileCodeIcon
 export const FileImageIcon = _FileImageIcon
+export const FilePlusIcon = _FilePlusIcon
 export const FileTextIcon = _FileTextIcon
 export const FilterIcon = _FilterIcon
 export const FilterXIcon = _FilterXIcon

packages/assets/icons/file-plus.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-file-plus"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+  <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+  <path d="M9 15h6" />
+  <path d="M12 18v-6" />
+</svg>

packages/assets/styles/defaults.scss

@@ -86,6 +86,7 @@ textarea,
 
 .cm-content {
 	white-space: pre-wrap !important;
+	box-shadow: none;
 }
 
 input[type='number'] {

packages/ui/.storybook/preview.ts

@@ -6,13 +6,21 @@ import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
 import FloatingVue from 'floating-vue'
+import { defineComponent, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
 import {
 	buildLocaleMessages,
 	createMessageCompiler,
 	type CrowdinMessages,
 } from '../src/composables/i18n'
+import {
+	AbstractWebNotificationManager,
+	type NotificationPanelLocation,
+	provideNotificationManager,
+	type WebNotification,
+} from '../src/providers'
 
 // Load locale messages from the UI package's locales
 // @ts-ignore
@@ -31,6 +39,42 @@ const i18n = createI18n({
 	messages: buildLocaleMessages(localeModules),
 })
 
+class StorybookNotificationManager extends AbstractWebNotificationManager {
+	private readonly state = ref<WebNotification[]>([])
+	private readonly locationState = ref<NotificationPanelLocation>('right')
+
+	public getNotificationLocation(): NotificationPanelLocation {
+		return this.locationState.value
+	}
+
+	public setNotificationLocation(location: NotificationPanelLocation): void {
+		this.locationState.value = location
+	}
+
+	public getNotifications(): WebNotification[] {
+		return this.state.value
+	}
+
+	protected addNotificationToStorage(notification: WebNotification): void {
+		this.state.value.push(notification)
+	}
+
+	protected removeNotificationFromStorage(id: string | number): void {
+		const index = this.state.value.findIndex((n) => n.id === id)
+		if (index > -1) {
+			this.state.value.splice(index, 1)
+		}
+	}
+
+	protected removeNotificationFromStorageByIndex(index: number): void {
+		this.state.value.splice(index, 1)
+	}
+
+	protected clearAllNotificationsFromStorage(): void {
+		this.state.value.splice(0)
+	}
+}
+
 setup((app) => {
 	app.use(i18n)
 	app.use(FloatingVue, {
@@ -56,6 +100,14 @@ setup((app) => {
 	}
 })
 
+// Wrapper component that provides notification manager context
+const NotificationManagerProvider = defineComponent({
+	setup(_, { slots }) {
+		provideNotificationManager(new StorybookNotificationManager())
+		return () => slots.default?.()
+	},
+})
+
 const preview: Preview = {
 	parameters: {
 		controls: {
@@ -74,6 +126,16 @@ const preview: Preview = {
 			},
 			defaultTheme: 'dark',
 		}),
+		// Wrap stories with notification manager provider
+		(story) => ({
+			components: { story, NotificationManagerProvider, NotificationPanel },
+			template: /*html*/ `
+				<NotificationManagerProvider>
+					<NotificationPanel />
+					<story />
+				</NotificationManagerProvider>
+			`,
+		}),
 	],
 }
 

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

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,

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,

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>

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;
 

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()

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({

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 }]
+	}
+}

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."
   },

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>
+		`,
+	}),
+}

packages/utils/utils.ts

@@ -334,7 +334,7 @@ export const acceptFileFromProjectType = (projectType) => {
 		case 'shader':
 			return `.zip,application/zip,${commonTypes}`
 		case 'datapack':
-			return `.zip,application/zip,${commonTypes}`
+			return `.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip,${commonTypes}`
 		case 'modpack':
 			return `.mrpack,application/x-modrinth-modpack+zip,application/zip,${commonTypes}`
 		default: