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

* 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>

apps/frontend/src/pages/[type]/[id]/settings/versions.vue

@@ -39,20 +39,14 @@
 						class="hover:!bg-button-bg [&>svg]:!text-green"
 						:dropdown-id="`${baseDropdownId}-edit-${version.id}`"
 						:options="[
+							{
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+							},
 							{
 								id: 'edit-details',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
 							},
-							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
-							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: project.project_type !== 'modpack',
-							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
@@ -69,13 +63,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
@@ -145,16 +135,10 @@
 								shown: !!currentMember,
 							},
 							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 								shown: !!currentMember,
 							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: !!currentMember && project.project_type !== 'modpack',
-							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
@@ -202,13 +186,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 						<template #delete>
 							<TrashIcon aria-hidden="true" />
@@ -301,7 +281,6 @@
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
 import {
-	AlignLeftIcon,
 	BoxIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -2,6 +2,11 @@
 <!-- TODO: Remove this^after converting to composition API. -->
 <template>
 	<div v-if="version" class="version-page">
+		<CreateProjectVersionModal
+			v-if="currentMember"
+			ref="createProjectVersionModal"
+			@save="handleVersionSaved"
+		/>
 		<ConfirmModal
 			v-if="currentMember"
 			ref="modal_confirm"
@@ -140,7 +145,7 @@
 					</nuxt-link>
 				</ButtonStyled>
 			</div>
-			<div v-else class="input-group">
+			<div v-else class="input-group mt-2">
 				<ButtonStyled v-if="primaryFile && !currentMember" color="brand">
 					<a
 						v-tooltip="primaryFile.filename + ' (' + formatBytes(primaryFile.size) + ')'"
@@ -163,6 +168,24 @@
 						Report
 					</button>
 				</ButtonStyled>
+				<ButtonStyled v-if="currentMember">
+					<button @click="handleOpenEditVersionModal(version.id, project.id, 'metadata')">
+						<BoxIcon aria-hidden="true" />
+						Edit metadata
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="currentMember">
+					<button @click="handleOpenEditVersionModal(version.id, project.id, 'add-details')">
+						<InfoIcon aria-hidden="true" />
+						Edit details
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="currentMember">
+					<button @click="handleOpenEditVersionModal(version.id, project.id, 'add-files')">
+						<FileIcon aria-hidden="true" />
+						Edit files
+					</button>
+				</ButtonStyled>
 				<ButtonStyled>
 					<button
 						v-if="
@@ -629,6 +652,7 @@ import {
 	EditIcon,
 	FileIcon,
 	HashIcon,
+	InfoIcon,
 	PlusIcon,
 	ReportIcon,
 	RightArrowIcon,
@@ -655,12 +679,13 @@ import { Multiselect } from 'vue-multiselect'
 
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import FileInput from '~/components/ui/FileInput.vue'
 import Modal from '~/components/ui/Modal.vue'
 import Categories from '~/components/ui/search/Categories.vue'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
-import { inferVersionInfo } from '~/helpers/infer.js'
+import { inferVersionInfo } from '~/helpers/infer'
 import { createDataPackVersion } from '~/helpers/package.js'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
@@ -672,11 +697,13 @@ export default defineNuxtComponent({
 		Checkbox,
 		ChevronRightIcon,
 		Categories,
+		CreateProjectVersionModal,
 		DownloadIcon,
 		EditIcon,
 		TrashIcon,
 		StarIcon,
 		FileIcon,
+		InfoIcon,
 		ReportIcon,
 		SaveIcon,
 		XIcon,
@@ -966,6 +993,13 @@ export default defineNuxtComponent({
 	methods: {
 		formatBytes,
 		formatCategory,
+		handleOpenEditVersionModal(versionId, projectId, stageId) {
+			if (!this.currentMember) return
+			this.$refs.createProjectVersionModal?.openEditVersionModal(versionId, projectId, stageId)
+		},
+		async handleVersionSaved() {
+			this.$router.go(0) // reload page for new data
+		},
 		async onImageUpload(file) {
 			const response = await useImageUpload(file, { context: 'version' })
 

apps/frontend/src/pages/[type]/[id]/versions.vue

@@ -80,20 +80,14 @@
 						class="hover:!bg-button-bg"
 						:dropdown-id="`${baseDropdownId}-edit-${version.id}`"
 						:options="[
+							{
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+							},
 							{
 								id: 'edit-details',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
 							},
-							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
-							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: project.project_type !== 'modpack',
-							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
@@ -110,13 +104,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
@@ -180,22 +170,16 @@
 								shown: flags.developerMode,
 							},
 							{ divider: true, shown: !!currentMember },
+							{
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+								shown: !!currentMember,
+							},
 							{
 								id: 'edit-details',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
 								shown: !!currentMember,
 							},
-							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
-								shown: !!currentMember,
-							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: !!currentMember && project.project_type !== 'modpack',
-							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
@@ -243,13 +227,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 						<template #delete>
 							<TrashIcon aria-hidden="true" />
@@ -281,7 +261,6 @@
 
 <script setup>
 import {
-	AlignLeftIcon,
 	BoxIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,