Improve editing project versions (#4933)

* add edit versions dropdown menu * implement improved edit version with individual edit stages * make changelog bigger * update button styles * remove hover button when hover on row * bring editing versions back to project settings * bring back gallery edit and upload in project page * fix progress value * fix admonition import * fix v3 upload for modpacks * fix modpack loader display for editing version and better open edit/create modal handling * fix currentMember prop * fix modpack loader displaying incorrectly * fix max length * fix version url after making an edit to version and fix delete * small max height fix * hide edit dependencies for modpack * pnpm run fix * fix import * add tooltip * update icons * update copy and create version button style
2025-12-19 13:24:14 -08:00
parent 0663b8adb0
commit 3f93041ca2
25 changed files with 586 additions and 164 deletions
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -4,7 +4,12 @@

 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { injectProjectPageContext, MultiStageModal } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectNotificationManager,
+	injectProjectPageContext,
+	MultiStageModal,
+} from '@modrinth/ui'
 import type { ComponentExposed } from 'vue-component-type-helpers'

 import {
@@ -20,15 +25,53 @@ provideManageVersionContext(ctx)
 const { newDraftVersion, setProjectType } = ctx

 const { projectV2 } = injectProjectPageContext()
+const { addNotification } = injectNotificationManager()
+const { labrinth } = injectModrinthClient()

-function showCreateVersionModal(version: Labrinth.Versions.v3.DraftVersion | null = null) {
+async function openEditVersionModal(versionId: string, projectId: string, stageId?: string | null) {
+	try {
+		const versionData = await labrinth.versions_v3.getVersion(versionId)
+
+		const draftVersionData: Labrinth.Versions.v3.DraftVersion = {
+			project_id: projectId,
+			version_id: versionId,
+			name: versionData.name ?? '',
+			version_number: versionData.version_number ?? '',
+			changelog: versionData.changelog ?? '',
+			game_versions: versionData.game_versions ?? [],
+			version_type: versionData.version_type ?? 'release',
+			loaders: versionData.loaders ?? [],
+			dependencies: versionData.dependencies ?? [],
+			existing_files: versionData.files ?? [],
+			environment: versionData.environment,
+		}
+
+		if (projectV2.value.project_type === 'modpack' && draftVersionData.loaders.includes('mrpack')) {
+			draftVersionData.loaders.push(...(versionData.mrpack_loaders ?? []))
+		}
+
+		openCreateVersionModal(draftVersionData, stageId)
+	} catch (err: any) {
+		addNotification({
+			title: 'An error occurred',
+			text: err.data ? err.data.description : err,
+			type: 'error',
+		})
+	}
+}
+
+function openCreateVersionModal(
+	version: Labrinth.Versions.v3.DraftVersion | null = null,
+	stageId: string | null = null,
+) {
 	newDraftVersion(projectV2.value.id, version)
 	setProjectType(projectV2.value)
-	modal.value?.setStage(0)
+	modal.value?.setStage(stageId ?? 0)
 	modal.value?.show()
 }

 defineExpose({
-	show: showCreateVersionModal,
+	openEditVersionModal,
+	openCreateVersionModal,
 })
 </script>
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddChangelogStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddChangelogStage.vue
@@ -1,9 +1,11 @@
 <template>
-	<MarkdownEditor
-		v-model="draftVersion.changelog"
-		:on-image-upload="onImageUpload"
-		:max-height="500"
-	/>
+	<div class="w-full">
+		<MarkdownEditor
+			v-model="draftVersion.changelog"
+			:on-image-upload="onImageUpload"
+			:max-height="500"
+		/>
+	</div>
 </template>

 <script lang="ts" setup>
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddDependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddDependenciesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full max-w-full flex-col gap-6">
+	<div class="flex w-full max-w-full flex-col gap-6 sm:w-[512px]">
 		<div class="flex flex-col gap-4">
 			<span class="font-semibold text-contrast">Add dependency</span>
 			<div class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 p-4">
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6">
+	<div class="flex flex-col gap-6 sm:w-[512px]">
 		<div class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">
 				Version type <span class="text-red">*</span>
@@ -33,7 +33,7 @@
 				placeholder="Enter subtitle..."
 				type="text"
 				autocomplete="off"
-				maxlength="32"
+				maxlength="256"
 			/>
 		</div>

@@ -102,7 +102,7 @@
 				</div>

 				<div
-					class="flex flex-col gap-1.5 gap-y-4 rounded-xl border border-solid border-surface-5 p-3 py-4"
+					class="flex max-h-56 flex-col gap-1.5 gap-y-4 overflow-y-auto rounded-xl border border-solid border-surface-5 p-3 py-4"
 				>
 					<div class="flex flex-wrap gap-2">
 						<TagItem
@@ -176,13 +176,13 @@ const loaders = computed(() => generatedState.value.loaders)
 const isModpack = computed(() => projectType.value === 'modpack')

 const editLoaders = () => {
-	modal.value?.setStage('edit-loaders')
+	modal.value?.setStage('from-details-loaders')
 }
 const editVersions = () => {
-	modal.value?.setStage('edit-mc-versions')
+	modal.value?.setStage('from-details-mc-versions')
 }
 const editEnvironment = () => {
-	modal.value?.setStage('edit-environment')
+	modal.value?.setStage('from-details-environment')
 }

 const usingDetectedVersions = computed(() => {
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue
@@ -1,5 +1,7 @@
 <template>
-	<ProjectSettingsEnvSelector v-model="draftVersion.environment" />
+	<div class="sm:w-[512px]">
+		<ProjectSettingsEnvSelector v-model="draftVersion.environment" />
+	</div>
 </template>

 <script lang="ts" setup>
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full flex-col gap-4">
+	<div class="flex w-full flex-col gap-4 sm:w-[512px]">
 		<template v-if="!(filesToAdd.length || draftVersion.existing_files?.length)">
 			<DropzoneFileInput
 				aria-label="Upload file"
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddLoadersStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddLoadersStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="space-y-6">
+	<div class="space-y-6 sm:w-[512px]">
 		<LoaderPicker
 			v-model="draftVersion.loaders"
 			:loaders="generatedState.loaders"
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddMcVersionsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddMcVersionsStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6">
+	<div class="flex flex-col gap-6 sm:w-[512px]">
 		<McVersionPicker v-model="draftVersion.game_versions" :game-versions="gameVersions" />
 		<div v-if="draftVersion.game_versions.length" class="space-y-1">
 			<div class="flex items-center justify-between">