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/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -1,4 +1,5 @@
 import type { Labrinth } from '@modrinth/api-client'
+import { SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	createContext,
 	injectModrinthClient,
@@ -6,6 +7,7 @@ import {
 	injectProjectPageContext,
 	type MultiStageModal,
 	resolveCtxFn,
+	type StageButtonConfig,
 	type StageConfigInput,
 } from '@modrinth/ui'
 import JSZip from 'jszip'
@@ -49,9 +51,9 @@ export type VersionStage =
 	| 'add-environment'
 	| 'add-dependencies'
 	| 'add-changelog'
-	| 'edit-loaders'
-	| 'edit-mc-versions'
-	| 'edit-environment'
+	| 'from-details-loaders'
+	| 'from-details-mc-versions'
+	| 'from-details-environment'

 export interface ManageVersionContextValue {
 	// State
@@ -75,6 +77,7 @@ export interface ManageVersionContextValue {

 	// Stage helpers
 	getNextLabel: (currentIndex?: number | null) => string
+	saveButtonConfig: () => StageButtonConfig

 	// Version methods
 	newDraftVersion: (projectId: string, version?: Labrinth.Versions.v3.DraftVersion | null) => void
@@ -264,7 +267,7 @@ export function createManageVersionContext(
 		if (noEnvironmentProject.value) version.environment = undefined

 		try {
-			await labrinth.versions_v3.createVersion(version, files)
+			await labrinth.versions_v3.createVersion(version, files, projectType.value ?? null)
 			modal.value?.hide()
 			addNotification({
 				title: 'Project version created',
@@ -380,6 +383,16 @@ export function createManageVersionContext(
 		}
 	}

+	const saveButtonConfig = (): StageButtonConfig => ({
+		label: 'Save changes',
+		icon: isSubmitting.value ? SpinnerIcon : SaveIcon,
+		iconPosition: 'before',
+		iconClass: isSubmitting.value ? 'animate-spin' : undefined,
+		color: 'green',
+		disabled: isSubmitting.value,
+		onClick: () => handleSaveVersionEdits(),
+	})
+
 	const contextValue: ManageVersionContextValue = {
 		// State
 		draftVersion,
@@ -402,6 +415,7 @@ export function createManageVersionContext(

 		// Stage helpers
 		getNextLabel,
+		saveButtonConfig,

 		// Methods
 		newDraftVersion,
--- a/apps/frontend/src/providers/version/stages/add-changelog.ts
+++ b/apps/frontend/src/providers/version/stages/add-changelog.ts
@@ -1,4 +1,4 @@
-import { LeftArrowIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
+import { LeftArrowIcon, PlusIcon, SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'

@@ -10,14 +10,21 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-changelog',
 	stageContent: markRaw(AddChangelogStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit changelog' : 'Add changelog'),
-	leftButtonConfig: (ctx) => ({
-		label: 'Back',
-		icon: LeftArrowIcon,
-		onClick: () => ctx.modal.value?.prevStage(),
-	}),
+	leftButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					label: 'Cancel',
+					icon: XIcon,
+					onClick: () => ctx.modal.value?.hide(),
+				}
+			: {
+					label: 'Back',
+					icon: LeftArrowIcon,
+					onClick: () => ctx.modal.value?.prevStage(),
+				},
 	rightButtonConfig: (ctx) => ({
 		label: ctx.editingVersion.value ? 'Save changes' : 'Create version',
-		icon: ctx.isSubmitting.value ? SpinnerIcon : PlusIcon,
+		icon: ctx.isSubmitting.value ? SpinnerIcon : ctx.editingVersion.value ? SaveIcon : PlusIcon,
 		iconPosition: 'before',
 		iconClass: ctx.isSubmitting.value ? 'animate-spin' : undefined,
 		color: 'green',
@@ -25,4 +32,5 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 		onClick: () =>
 			ctx.editingVersion.value ? ctx.handleSaveVersionEdits() : ctx.handleCreateVersion(),
 	}),
+	nonProgressStage: (ctx) => ctx.editingVersion.value,
 }
--- a/apps/frontend/src/providers/version/stages/add-dependencies.ts
+++ b/apps/frontend/src/providers/version/stages/add-dependencies.ts
@@ -1,4 +1,4 @@
-import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
+import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'

@@ -11,15 +11,26 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	stageContent: markRaw(AddDependenciesStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit dependencies' : 'Add dependencies'),
 	skip: (ctx) => ctx.projectType.value === 'modpack',
-	leftButtonConfig: (ctx) => ({
-		label: 'Back',
-		icon: LeftArrowIcon,
-		onClick: () => ctx.modal.value?.prevStage(),
-	}),
-	rightButtonConfig: (ctx) => ({
-		label: ctx.getNextLabel(),
-		icon: RightArrowIcon,
-		iconPosition: 'after',
-		onClick: () => ctx.modal.value?.nextStage(),
-	}),
+	leftButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					label: 'Cancel',
+					icon: XIcon,
+					onClick: () => ctx.modal.value?.hide(),
+				}
+			: {
+					label: 'Back',
+					icon: LeftArrowIcon,
+					onClick: () => ctx.modal.value?.prevStage(),
+				},
+	rightButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? ctx.saveButtonConfig()
+			: {
+					label: ctx.getNextLabel(),
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					onClick: () => ctx.modal.value?.nextStage(),
+				},
+	nonProgressStage: (ctx) => ctx.editingVersion.value,
 }
--- a/apps/frontend/src/providers/version/stages/add-details.ts
+++ b/apps/frontend/src/providers/version/stages/add-details.ts
@@ -1,4 +1,4 @@
-import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
+import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'

@@ -10,16 +10,31 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-details',
 	stageContent: markRaw(AddDetailsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit details' : 'Add details'),
-	leftButtonConfig: (ctx) => ({
-		label: 'Back',
-		icon: LeftArrowIcon,
-		onClick: () => ctx.modal.value?.prevStage(),
-	}),
-	rightButtonConfig: (ctx) => ({
-		label: ctx.getNextLabel(),
-		icon: RightArrowIcon,
-		iconPosition: 'after',
-		disabled: ctx.draftVersion.value.version_number.trim().length === 0,
-		onClick: () => ctx.modal.value?.nextStage(),
-	}),
+	leftButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					label: 'Cancel',
+					icon: XIcon,
+					onClick: () => ctx.modal.value?.hide(),
+				}
+			: {
+					label: 'Back',
+					icon: LeftArrowIcon,
+					onClick: () => ctx.modal.value?.prevStage(),
+				},
+	rightButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					...ctx.saveButtonConfig(),
+					disabled:
+						ctx.draftVersion.value.version_number.trim().length === 0 || ctx.isSubmitting.value,
+				}
+			: {
+					label: ctx.getNextLabel(),
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					disabled: ctx.draftVersion.value.version_number.trim().length === 0,
+					onClick: () => ctx.modal.value?.nextStage(),
+				},
+	nonProgressStage: (ctx) => ctx.editingVersion.value,
 }
--- a/apps/frontend/src/providers/version/stages/add-environment.ts
+++ b/apps/frontend/src/providers/version/stages/add-environment.ts
@@ -28,8 +28,8 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	}),
 }

-export const editStageConfig: StageConfigInput<ManageVersionContextValue> = {
-	id: 'edit-environment',
+export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
+	id: 'from-details-environment',
 	stageContent: markRaw(AddEnvironmentStage),
 	title: 'Edit environment',
 	nonProgressStage: true,
@@ -39,11 +39,17 @@ export const editStageConfig: StageConfigInput<ManageVersionContextValue> = {
 		disabled: !ctx.draftVersion.value.environment,
 		onClick: () => ctx.modal.value?.setStage('add-details'),
 	}),
-	rightButtonConfig: (ctx) => ({
-		label: ctx.getNextLabel(2),
-		icon: RightArrowIcon,
-		iconPosition: 'after',
-		disabled: !ctx.draftVersion.value.environment,
-		onClick: () => ctx.modal.value?.setStage(2),
-	}),
+	rightButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					...ctx.saveButtonConfig(),
+					disabled: !ctx.draftVersion.value.environment,
+				}
+			: {
+					label: ctx.getNextLabel(2),
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					disabled: !ctx.draftVersion.value.environment,
+					onClick: () => ctx.modal.value?.setStage(2),
+				},
 }
--- a/apps/frontend/src/providers/version/stages/add-files.ts
+++ b/apps/frontend/src/providers/version/stages/add-files.ts
@@ -15,6 +15,13 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 			ctx.filesToAdd.value.length !== 0 ||
 			(ctx.draftVersion.value.existing_files?.length ?? 0) !== 0

+		if (ctx.editingVersion.value)
+			return {
+				label: 'Cancel',
+				icon: XIcon,
+				onClick: () => ctx.modal.value?.hide(),
+			}
+
 		if (!hasFiles) return null

 		return {
@@ -28,6 +35,13 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 			ctx.filesToAdd.value.length !== 0 ||
 			(ctx.draftVersion.value.existing_files?.length ?? 0) !== 0

+		if (ctx.editingVersion.value)
+			return {
+				...ctx.saveButtonConfig(),
+				label: 'Save files',
+				disabled: ctx.isSubmitting.value,
+			}
+
 		if (!hasFiles) return null

 		return {
@@ -38,4 +52,5 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 			onClick: () => ctx.modal.value?.nextStage(),
 		}
 	},
+	nonProgressStage: (ctx) => ctx.editingVersion.value,
 }
--- a/apps/frontend/src/providers/version/stages/add-loaders.ts
+++ b/apps/frontend/src/providers/version/stages/add-loaders.ts
@@ -28,8 +28,8 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	}),
 }

-export const editStageConfig: StageConfigInput<ManageVersionContextValue> = {
-	id: 'edit-loaders',
+export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
+	id: 'from-details-loaders',
 	stageContent: markRaw(AddLoadersStage),
 	title: 'Edit loaders',
 	nonProgressStage: true,
@@ -39,11 +39,17 @@ export const editStageConfig: StageConfigInput<ManageVersionContextValue> = {
 		disabled: ctx.draftVersion.value.loaders.length === 0,
 		onClick: () => ctx.modal.value?.setStage('add-details'),
 	}),
-	rightButtonConfig: (ctx) => ({
-		label: ctx.getNextLabel(2),
-		icon: RightArrowIcon,
-		iconPosition: 'after',
-		disabled: ctx.draftVersion.value.loaders.length === 0,
-		onClick: () => ctx.modal.value?.setStage(2),
-	}),
+	rightButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					...ctx.saveButtonConfig(),
+					disabled: ctx.draftVersion.value.loaders.length === 0,
+				}
+			: {
+					label: ctx.getNextLabel(2),
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					disabled: ctx.draftVersion.value.loaders.length === 0,
+					onClick: () => ctx.modal.value?.setStage(2),
+				},
 }
--- a/apps/frontend/src/providers/version/stages/add-mc-versions.ts
+++ b/apps/frontend/src/providers/version/stages/add-mc-versions.ts
@@ -26,8 +26,8 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	}),
 }

-export const editStageConfig: StageConfigInput<ManageVersionContextValue> = {
-	id: 'edit-mc-versions',
+export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
+	id: 'from-details-mc-versions',
 	stageContent: markRaw(AddMcVersionsStage),
 	title: 'Edit game versions',
 	nonProgressStage: true,
@@ -37,11 +37,17 @@ export const editStageConfig: StageConfigInput<ManageVersionContextValue> = {
 		disabled: ctx.draftVersion.value.game_versions.length === 0,
 		onClick: () => ctx.modal.value?.setStage('add-details'),
 	}),
-	rightButtonConfig: (ctx) => ({
-		label: ctx.getNextLabel(2),
-		icon: RightArrowIcon,
-		iconPosition: 'after',
-		disabled: ctx.draftVersion.value.game_versions.length === 0,
-		onClick: () => ctx.modal.value?.setStage(2),
-	}),
+	rightButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					...ctx.saveButtonConfig(),
+					disabled: ctx.draftVersion.value.game_versions.length === 0,
+				}
+			: {
+					label: ctx.getNextLabel(2),
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					disabled: ctx.draftVersion.value.game_versions.length === 0,
+					onClick: () => ctx.modal.value?.setStage(2),
+				},
 }
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -2,16 +2,16 @@ import { stageConfig as addChangelogStageConfig } from './add-changelog'
 import { stageConfig as addDependenciesStageConfig } from './add-dependencies'
 import { stageConfig as addDetailsStageConfig } from './add-details'
 import {
-	editStageConfig as editEnvironmentStageConfig,
+	fromDetailsStageConfig as editEnvironmentStageConfig,
 	stageConfig as addEnvironmentStageConfig,
 } from './add-environment'
 import { stageConfig as addFilesStageConfig } from './add-files'
 import {
-	editStageConfig as editLoadersStageConfig,
+	fromDetailsStageConfig as editLoadersStageConfig,
 	stageConfig as addLoadersStageConfig,
 } from './add-loaders'
 import {
-	editStageConfig as editMcVersionsStageConfig,
+	fromDetailsStageConfig as editMcVersionsStageConfig,
 	stageConfig as addMcVersionsStageConfig,
 } from './add-mc-versions'