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" />
-	</div>
+	<EnvironmentSelector v-model="draftVersion.environment" />
 </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(
 	() =>