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 f90fabc.

* 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) <[email protected]>
Co-authored-by: Prospector <[email protected]>

Author: 3 people

.vscode/settings.json

@@ -11,21 +11,21 @@
 		"source.fixAll.eslint": "explicit",
 		"source.organizeImports": "always"
 	},
-	"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[vue]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[typescript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[javascript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[scss]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[css]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"

apps/frontend/.prettierignore

@@ -2,6 +2,7 @@
 **/dist
 **/.output
 **/.data
+**/.wrangler
 src/generated/**
 src/locales/**
 src/public/news/feed

apps/frontend/package.json

@@ -21,7 +21,9 @@
 		"@nuxtjs/i18n": "^9.0.0",
 		"@types/dompurify": "^3.0.5",
 		"@types/iso-3166-2": "^1.0.4",
+		"@types/js-yaml": "^4.0.9",
 		"@types/node": "^20.1.0",
+		"@types/semver": "^7.7.1",
 		"autoprefixer": "^10.4.19",
 		"glob": "^10.2.7",
 		"nuxt": "^3.20.2",

apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue

@@ -1,28 +1,46 @@
 <template>
-	<MultiStageModal ref="modal" :stages="ctx.stageConfigs" :context="ctx" />
+	<MultiStageModal
+		ref="modal"
+		:stages="ctx.stageConfigs"
+		:context="ctx"
+		:breadcrumbs="!editingVersion"
+		@hide="() => (modalOpen = false)"
+	/>
+	<DropArea
+		v-if="!modalOpen"
+		:accept="acceptFileFromProjectType(projectV2.project_type)"
+		@change="handleDropArea"
+	/>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import {
+	DropArea,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	MultiStageModal,
 } from '@modrinth/ui'
+import { acceptFileFromProjectType } from '@modrinth/utils'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 import {
 	createManageVersionContext,
 	provideManageVersionContext,
 } from '~/providers/version/manage-version-modal'
 
+const emit = defineEmits<{
+	(e: 'save'): void
+}>()
+
 const modal = useTemplateRef<ComponentExposed<typeof MultiStageModal>>('modal')
+const modalOpen = ref(false)
 
-const ctx = createManageVersionContext(modal)
+const ctx = createManageVersionContext(modal, () => emit('save'))
 provideManageVersionContext(ctx)
 
-const { newDraftVersion } = ctx
+const { newDraftVersion, editingVersion, handleNewFiles } = ctx
 
 const { projectV2 } = injectProjectPageContext()
 const { addNotification } = injectNotificationManager()
@@ -64,6 +82,15 @@ function openCreateVersionModal(
 	newDraftVersion(projectV2.value.id, version)
 	modal.value?.setStage(stageId ?? 0)
 	modal.value?.show()
+	modalOpen.value = true
+}
+
+async function handleDropArea(files: FileList) {
+	newDraftVersion(projectV2.value.id, null)
+	modal.value?.setStage(0)
+	await handleNewFiles(Array.from(files))
+	modal.value?.show()
+	modalOpen.value = true
 }
 
 defineExpose({

apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-1 text-button-text"
+		class="flex h-11 items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-1 text-button-text"
 	>
 		<div class="grid max-w-[75%] grid-cols-[auto_1fr_auto] items-center gap-2">
 			<Avatar v-if="icon" :src="icon" alt="dependency-icon" size="20px" :no-shadow="true" />
@@ -9,22 +9,23 @@
 				{{ name || 'Unknown Project' }}
 			</span>
 
-			<TagItem class="shrink-0 border !border-solid border-surface-5">
+			<TagItem class="shrink-0 border !border-solid border-surface-5 capitalize">
 				{{ dependencyType }}
 			</TagItem>
 		</div>
 
 		<span
 			v-if="versionName"
 			v-tooltip="versionName"
-			class="max-w-[35%] truncate whitespace-nowrap font-medium"
+			class="truncate whitespace-nowrap font-medium"
+			:class="!hideRemove ? 'max-w-[35%]' : 'max-w-[50%]'"
 		>
 			{{ versionName }}
 		</span>
 
-		<div class="flex items-center justify-end gap-1">
+		<div v-if="!hideRemove" class="flex items-center justify-end gap-1">
 			<ButtonStyled size="standard" :circular="true">
-				<button aria-label="Remove file" class="!shadow-none" @click="emitRemove">
+				<button aria-label="Remove file" class="-mr-2 !shadow-none" @click="emitRemove">
 					<XIcon aria-hidden="true" />
 				</button>
 			</ButtonStyled>
@@ -42,12 +43,13 @@ const emit = defineEmits<{
 	(e: 'remove'): void
 }>()
 
-const { projectId, name, icon, dependencyType, versionName } = defineProps<{
+const { projectId, name, icon, dependencyType, versionName, hideRemove } = defineProps<{
 	projectId: string
 	name?: string
 	icon?: string
 	dependencyType: Labrinth.Versions.v2.DependencyType
 	versionName?: string
+	hideRemove?: boolean
 }>()
 
 function emitRemove() {

apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue

@@ -0,0 +1,57 @@
+<template>
+	<div v-if="addedDependencies.length" class="5 flex flex-col gap-2">
+		<template v-for="(dependency, index) in addedDependencies">
+			<AddedDependencyRow
+				v-if="dependency"
+				:key="index"
+				:project-id="dependency.projectId"
+				:name="dependency.name"
+				:icon="dependency.icon"
+				:dependency-type="dependency.dependencyType"
+				:version-name="dependency.versionName"
+				:hide-remove="disableRemove"
+				@remove="() => removeDependency(index)"
+			/>
+		</template>
+		<span v-if="!addedDependencies.length"> No dependencies added. </span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+
+import AddedDependencyRow from './AddedDependencyRow.vue'
+
+const { disableRemove } = defineProps<{
+	disableRemove?: boolean
+}>()
+
+const { draftVersion, dependencyProjects, dependencyVersions, projectsFetchLoading } =
+	injectManageVersionContext()
+
+const addedDependencies = computed(() =>
+	(draftVersion.value.dependencies || [])
+		.map((dep) => {
+			if (!dep.project_id) return null
+
+			const dependencyProject = dependencyProjects.value[dep.project_id]
+			const versionName = dependencyVersions.value[dep.version_id || '']?.name ?? ''
+
+			if (!dependencyProject && projectsFetchLoading.value) return null
+
+			return {
+				projectId: dep.project_id,
+				name: dependencyProject?.name,
+				icon: dependencyProject?.icon_url,
+				dependencyType: dep.dependency_type,
+				versionName,
+			}
+		})
+		.filter(Boolean),
+)
+
+const removeDependency = (index: number) => {
+	if (!draftVersion.value.dependencies) return
+	draftVersion.value.dependencies.splice(index, 1)
+}
+</script>

apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue

@@ -118,4 +118,17 @@ function groupLoaders(loaders: Labrinth.Tags.v2.Loader[]) {
 }
 
 const groupedLoaders = computed(() => groupLoaders(loaders))
+
+onMounted(() => {
+	if (selectedLoaders.value.length === 0) return
+
+	// Find the first group that contains any of the selected loaders
+	const groups = groupedLoaders.value
+	for (const [groupName, loadersInGroup] of Object.entries(groups)) {
+		if (loadersInGroup.some((loader) => selectedLoaders.value.includes(loader.name))) {
+			loaderGroup.value = groupName as GroupLabels
+			break
+		}
+	}
+})
 </script>

apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue

@@ -66,7 +66,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
 import { ButtonStyled, Chips } from '@modrinth/ui'
 import { useMagicKeys } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 
 type GameVersion = Labrinth.Tags.v2.GameVersion
 
@@ -147,16 +147,24 @@ function groupVersions(gameVersions: GameVersion[]) {
 	)
 
 	const getGroupKey = (v: string) => v.split('.').slice(0, 2).join('.')
+
+	const getSnapshotGroupKey = (v: string) => {
+		const cleanVersion = v.split('-')[0]
+		return cleanVersion.split('.').slice(0, 2).join('.')
+	}
+
 	const groups: Record<string, string[]> = {}
 
-	let currentGroupKey = getGroupKey(gameVersions.find((v) => v.major)?.version || '')
+	let currentGroupKey = getSnapshotGroupKey(gameVersions.find((v) => v.major)?.version || '')
 
 	gameVersions.forEach((gameVersion) => {
 		if (gameVersion.version_type === 'release') {
 			currentGroupKey = getGroupKey(gameVersion.version)
 			if (!groups[currentGroupKey]) groups[currentGroupKey] = []
 			groups[currentGroupKey].push(gameVersion.version)
 		} else {
+			if (!currentGroupKey) currentGroupKey = getSnapshotGroupKey(gameVersion.version)
+
 			const key = `${currentGroupKey} ${DEV_RELEASE_KEY}`
 			if (!groups[key]) groups[key] = []
 			groups[key].push(gameVersion.version)
@@ -205,4 +213,27 @@ function compareGroupKeys(a: string, b: string) {
 function searchFilter(gameVersion: Labrinth.Tags.v2.GameVersion) {
 	return gameVersion.version.toLowerCase().includes(searchQuery.value.toLowerCase())
 }
+
+onMounted(async () => {
+	if (props.modelValue.length === 0) return
+
+	// Open non-release tab if any non-release versions are selected
+	const hasNonReleaseVersions = props.gameVersions.some(
+		(v) => props.modelValue.includes(v.version) && v.version_type !== 'release',
+	)
+
+	if (hasNonReleaseVersions) {
+		versionType.value = 'all'
+	}
+
+	await nextTick()
+	const firstSelectedVersion = allVersionsFlat.value.find((v) => props.modelValue.includes(v))
+	if (firstSelectedVersion) {
+		const buttons = Array.from(document.querySelectorAll('button'))
+		const element = buttons.find((btn) => btn.textContent?.trim() === firstSelectedVersion)
+		if (element) {
+			element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+		}
+	}
+})
 </script>

apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue

@@ -1,27 +1,24 @@
 <template>
-	<div v-if="visibleDependencies.length" class="flex flex-col gap-4">
-		<span class="font-semibold text-contrast">Suggested dependencies</span>
-		<div class="flex flex-col gap-2">
-			<template v-for="(dependency, index) in visibleDependencies">
-				<SuggestedDependency
-					v-if="dependency"
-					:key="index"
-					:project-id="dependency.project_id"
-					:name="dependency.name"
-					:icon="dependency.icon"
-					:dependency-type="dependency.dependency_type"
-					:version-name="dependency.versionName"
-					@on-add-suggestion="
-						() =>
-							handleAddSuggestion({
-								dependency_type: dependency.dependency_type,
-								project_id: dependency.project_id,
-								version_id: dependency.version_id,
-							})
-					"
-				/>
-			</template>
-		</div>
+	<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-2">
+		<template v-for="(dependency, index) in visibleSuggestedDependencies">
+			<SuggestedDependency
+				v-if="dependency"
+				:key="index"
+				:project-id="dependency.project_id"
+				:name="dependency.name"
+				:icon="dependency.icon"
+				:dependency-type="dependency.dependency_type"
+				:version-name="dependency.versionName"
+				@on-add-suggestion="
+					() =>
+						handleAddSuggestion({
+							dependency_type: dependency.dependency_type,
+							project_id: dependency.project_id,
+							version_id: dependency.version_id,
+						})
+				"
+			/>
+		</template>
 	</div>
 </template>
 
@@ -32,28 +29,7 @@ import { injectManageVersionContext } from '~/providers/version/manage-version-m
 
 import SuggestedDependency from './SuggestedDependency.vue'
 
-export interface SuggestedDependency extends Labrinth.Versions.v3.Dependency {
-	icon?: string
-	name?: string
-	versionName?: string
-}
-
-const props = defineProps<{
-	suggestedDependencies: SuggestedDependency[]
-}>()
-
-const { draftVersion } = injectManageVersionContext()
-
-const visibleDependencies = computed<SuggestedDependency[]>(() =>
-	props.suggestedDependencies
-		.filter(
-			(dep) =>
-				!draftVersion.value.dependencies?.some(
-					(d) => d.project_id === dep.project_id && d.version_id === dep.version_id,
-				),
-		)
-		.sort((a, b) => (a.name || '').localeCompare(b.name || '')),
-)
+const { visibleSuggestedDependencies } = injectManageVersionContext()
 
 const emit = defineEmits<{
 	(e: 'onAddSuggestion', dependency: Labrinth.Versions.v3.Dependency): void