feat: add edit version pages tabs (#5841)

* feat: add edit version pages tabs

* feat: switch to nav tabs instead of chips

* feat: show "Edit version" as modal title instead of specific page

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

@@ -1,4 +1,12 @@
 <template>
+	<NavTabs
+		v-if="editingVersion"
+		mode="local"
+		:links="editTabLinks"
+		:active-index="2"
+		class="mb-4 border border-solid border-surface-5 shadow-none drop-shadow-none"
+		@tab-click="setEditTab"
+	/>
 	<div class="flex w-full flex-col gap-4">
 		<template
 			v-if="handlingNewFiles || !(filesToAdd.length || draftVersion.existing_files?.length)"
@@ -91,6 +99,7 @@ import {
 	defineMessages,
 	DropzoneFileInput,
 	injectProjectPageContext,
+	NavTabs,
 	useVIntl,
 } from '@modrinth/ui'
 import { acceptFileFromProjectType } from '@modrinth/utils'
@@ -110,10 +119,25 @@ const {
 	swapPrimaryFile,
 	replacePrimaryFile,
 	editingVersion,
+	modal,
 	primaryFile,
 	handleNewFiles,
 } = injectManageVersionContext()
 
+const editTabs = [
+	{ label: 'Metadata', href: 'metadata', stage: 'metadata' },
+	{ label: 'Details', href: 'details', stage: 'add-details' },
+	{ label: 'Files', href: 'files', stage: 'add-files' },
+] as const
+
+const editTabLinks = editTabs.map(({ label, href }) => ({ label, href }))
+
+function setEditTab(index: number) {
+	const tab = editTabs[index]
+	if (!tab) return
+	modal.value?.setStage(tab.stage)
+}
+
 function handleRemoveFile(index: number) {
 	filesToAdd.value.splice(index, 1)
 }

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

@@ -1,4 +1,12 @@
 <template>
+	<NavTabs
+		v-if="editingVersion"
+		mode="local"
+		:links="editTabLinks"
+		:active-index="1"
+		class="mb-4 border border-solid border-surface-5 shadow-none drop-shadow-none"
+		@tab-click="setEditTab"
+	/>
 	<div class="flex w-full flex-col gap-6">
 		<div class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">
@@ -53,12 +61,26 @@
 </template>
 
 <script lang="ts" setup>
-import { Chips, MarkdownEditor, StyledInput } from '@modrinth/ui'
+import { Chips, MarkdownEditor, NavTabs, StyledInput } from '@modrinth/ui'
 
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
-const { draftVersion, isUploading } = injectManageVersionContext()
+const { draftVersion, isUploading, editingVersion, modal } = injectManageVersionContext()
+
+const editTabs = [
+	{ label: 'Metadata', href: 'metadata', stage: 'metadata' },
+	{ label: 'Details', href: 'details', stage: 'add-details' },
+	{ label: 'Files', href: 'files', stage: 'add-files' },
+] as const
+
+const editTabLinks = editTabs.map(({ label, href }) => ({ label, href }))
+
+function setEditTab(index: number) {
+	const tab = editTabs[index]
+	if (!tab) return
+	modal.value?.setStage(tab.stage)
+}
 
 async function onImageUpload(file: File) {
 	const response = await useImageUpload(file, { context: 'version' })

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

@@ -1,7 +1,5 @@
 <template>
-	<div class="sm:w-[512px]">
+	<EnvironmentSelector v-model="draftVersion.environment" />
-		<EnvironmentSelector v-model="draftVersion.environment" />
-	</div>
 </template>
 
 <script lang="ts" setup>

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

@@ -1,4 +1,12 @@
 <template>
+	<NavTabs
+		v-if="editingVersion"
+		mode="local"
+		:links="editTabLinks"
+		:active-index="0"
+		class="mb-2 border border-solid border-surface-5 shadow-none drop-shadow-none"
+		@tab-click="setEditTab"
+	/>
 	<div class="flex flex-col gap-6">
 		<div v-if="!editingVersion" class="flex flex-col gap-1">
 			<div class="flex items-center justify-between">
@@ -202,6 +210,7 @@ import {
 	ENVIRONMENTS_COPY,
 	FormattedTag,
 	injectProjectPageContext,
+	NavTabs,
 	TagItem,
 	useVIntl,
 } from '@modrinth/ui'
@@ -229,6 +238,21 @@ const { projectV2 } = injectProjectPageContext()
 
 const generatedState = useGeneratedState()
 const loaders = computed(() => generatedState.value.loaders)
+
+const editTabs = [
+	{ label: 'Metadata', href: 'metadata', stage: 'metadata' },
+	{ label: 'Details', href: 'details', stage: 'add-details' },
+	{ label: 'Files', href: 'files', stage: 'add-files' },
+] as const
+
+const editTabLinks = editTabs.map(({ label, href }) => ({ label, href }))
+
+function setEditTab(index: number) {
+	const tab = editTabs[index]
+	if (!tab) return
+	modal.value?.setStage(tab.stage)
+}
+
 const isModpack = computed(() => projectType.value === 'modpack')
 const isResourcePack = computed(
 	() =>

apps/frontend/src/providers/version/stages/add-files-stage.ts

@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-files',
 	stageContent: markRaw(AddFilesStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit files' : 'Files'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Files'),
 	nonProgressStage: (ctx) => ctx.editingVersion.value,
 	cannotNavigateForward: (ctx) => {
 		const hasFiles =
@@ -64,7 +64,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-files',
 	stageContent: markRaw(AddFilesStage),
-	title: 'Edit files',
+	title: 'Edit version',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => {
 		const hasFiles =

apps/frontend/src/providers/version/stages/dependencies-stage.ts

@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-dependencies',
 	stageContent: markRaw(DependenciesStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit dependencies' : 'Dependencies'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Dependencies'),
 	skip: (ctx) => ctx.suggestedDependencies.value != null || ctx.projectType.value === 'modpack',
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
@@ -38,7 +38,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-dependencies',
 	stageContent: markRaw(DependenciesStage),
-	title: 'Edit dependencies',
+	title: 'Edit version',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',

apps/frontend/src/providers/version/stages/details-stage.ts

@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-details',
 	stageContent: markRaw(DetailsStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit details' : 'Details'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Details'),
 	maxWidth: '744px',
 	disableClose: (ctx) => ctx.isUploading.value,
 	leftButtonConfig: (ctx) =>

apps/frontend/src/providers/version/stages/environment-stage.ts

@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-environment',
 	stageContent: markRaw(EnvironmentStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit environment' : 'Environment'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Environment'),
 	skip: (ctx) =>
 		ctx.noEnvironmentProject.value ||
 		(!ctx.editingVersion.value && !!ctx.inferredVersionData.value?.environment) ||
@@ -33,7 +33,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-environment',
 	stageContent: markRaw(EnvironmentStage),
-	title: 'Edit environment',
+	title: 'Edit version',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',

apps/frontend/src/providers/version/stages/loaders-stage.ts

@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-loaders',
 	stageContent: markRaw(LoadersStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Loaders'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Loaders'),
 	skip: (ctx) => {
 		const inferredLoadersLength = ctx.inferredVersionData.value?.loaders?.length ?? 0
 		return (

apps/frontend/src/providers/version/stages/mc-versions-stage.ts

@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-mc-versions',
 	stageContent: markRaw(McVersionsStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Game versions'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Game versions'),
 	skip: (ctx) =>
 		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || !ctx.primaryFile.value,
 	hideStageInBreadcrumb: (ctx) => !ctx.primaryFile.value || ctx.handlingNewFiles.value,
@@ -32,7 +32,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-mc-versions',
 	stageContent: markRaw(McVersionsStage),
-	title: 'Edit game versions',
+	title: 'Edit version',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',

apps/frontend/src/providers/version/stages/metadata-stage.ts

@@ -9,7 +9,8 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'metadata',
 	stageContent: markRaw(MetadataStage),
-	title: 'Metadata',
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Metadata'),
+	nonProgressStage: (ctx) => ctx.editingVersion.value,
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
 			? {

packages/ui/src/components/base/Chips.vue

@@ -15,7 +15,7 @@
 			}"
 			@click="toggleItem(item)"
 		>
-			<CheckIcon v-if="selected === item" />
+			<CheckIcon v-if="selected === item && !hideCheckmarkIcon" />
 			<span>{{ formatLabel(item) }}</span>
 		</Button>
 	</div>
@@ -36,6 +36,7 @@ const props = withDefaults(
 		ariaLabel?: string
 		disabledItems?: T[]
 		disabledTooltip?: string
+		hideCheckmarkIcon?: boolean
 	}>(),
 	{
 		neverEmpty: true,