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