feat: improve add dependency flow (#6075)

* fix: shadow on nav

* feat: improve add dependency flow

* feat: update suggested dependency style

* feat: update dependency rows to use version number and update styles

* feat: implement combobox select searched text on focus

* feat: add Tabs.vue

* feat: update nav tabs to use tabs

* feat: improve project search dropdown

* fix: dependency search not clearing inbound query

* fix: combobox no options open state bug

* feat: improve dependency project and version search

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

@@ -2,28 +2,29 @@
 	<div
 		class="flex h-11 items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-1 text-button-text"
 	>
-		<div class="grid max-w-[75%] grid-cols-[auto_1fr_auto] items-center gap-2">
+		<div class="flex min-w-0 flex-1 items-center justify-start gap-2">
 			<Avatar v-if="icon" :src="icon" alt="dependency-icon" size="20px" :no-shadow="true" />
 
-			<span v-tooltip="name || projectId" class="truncate font-semibold text-contrast">
+			<span
+				v-tooltip="name || projectId"
+				class="min-w-0 max-w-fit flex-1 truncate font-semibold text-contrast"
+			>
 				{{ name || 'Unknown Project' }}
 			</span>
+			<span
+				v-if="versionNumber"
+				v-tooltip="versionNumber"
+				class="min-w-0 max-w-fit flex-1 truncate whitespace-nowrap text-sm font-medium"
+			>
+				{{ versionNumber }}
+			</span>
 
 			<TagItem class="shrink-0 border !border-solid border-surface-5 capitalize">
 				{{ dependencyType }}
 			</TagItem>
 		</div>
 
-		<span
-			v-if="versionName"
-			v-tooltip="versionName"
-			class="truncate whitespace-nowrap font-medium"
-			:class="!hideRemove ? 'max-w-[35%]' : 'max-w-[50%]'"
-		>
-			{{ versionName }}
-		</span>
-
-		<div v-if="!hideRemove" class="flex items-center justify-end gap-1">
+		<div v-if="!hideRemove" class="flex shrink-0 items-center justify-end gap-1">
 			<ButtonStyled size="standard" :circular="true">
 				<button aria-label="Remove file" class="-mr-2 !shadow-none" @click="emitRemove">
 					<XIcon aria-hidden="true" />
@@ -43,12 +44,12 @@ const emit = defineEmits<{
 	(e: 'remove'): void
 }>()
 
-const { projectId, name, icon, dependencyType, versionName, hideRemove } = defineProps<{
+const { projectId, name, icon, dependencyType, versionNumber, hideRemove } = defineProps<{
 	projectId: string
 	name?: string
 	icon?: string
 	dependencyType: Labrinth.Versions.v2.DependencyType
-	versionName?: string
+	versionNumber?: string
 	hideRemove?: boolean
 }>()
 

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

@@ -8,7 +8,7 @@
 				:name="dependency.name"
 				:icon="dependency.icon"
 				:dependency-type="dependency.dependencyType"
-				:version-name="dependency.versionName"
+				:version-number="dependency.versionNumber"
 				:hide-remove="disableRemove"
 				@remove="() => removeDependency(index)"
 			/>
@@ -35,7 +35,7 @@ const addedDependencies = computed(() =>
 			if (!dep.project_id) return null
 
 			const dependencyProject = dependencyProjects.value[dep.project_id]
-			const versionName = dependencyVersions.value[dep.version_id || '']?.name ?? ''
+			const versionNumber = dependencyVersions.value[dep.version_id || '']?.version_number ?? ''
 
 			if (!dependencyProject && projectsFetchLoading.value) return null
 
@@ -44,7 +44,7 @@ const addedDependencies = computed(() =>
 				name: dependencyProject?.name,
 				icon: dependencyProject?.icon_url,
 				dependencyType: dep.dependency_type,
-				versionName,
+				versionNumber,
 			}
 		})
 		.filter(Boolean),

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

@@ -3,11 +3,16 @@
 		v-model="projectId"
 		placeholder="Select project"
 		:options="options"
-		:searchable="true"
+		:search-value="selectedProjectOption?.label"
 		search-placeholder="Search by name or paste ID..."
 		:no-options-message="searchLoading ? 'Loading...' : 'No results found'"
-		:disable-search-filter="true"
+		searchable
+		disable-search-filter
+		select-search-text-on-focus
+		:show-chevron="false"
 		@search-input="(query) => handleSearch(query)"
+		@search-blur="handleSearchBlur"
+		@select="handleSelect"
 	/>
 </template>
 
@@ -15,15 +20,37 @@
 import type { ComboboxOption } from '@modrinth/ui'
 import { Combobox, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'
-import { defineAsyncComponent, h } from 'vue'
+import { defineAsyncComponent, h, markRaw, ref, watch } from 'vue'
 
 const { addNotification } = injectNotificationManager()
 const projectId = defineModel<string>()
 
 const searchLoading = ref(false)
 const options = ref<ComboboxOption<string>[]>([])
+const selectedProjectOption = ref<ComboboxOption<string>>()
+const selectedProjectSearchQuery = ref('')
 
 const { labrinth } = injectModrinthClient()
+let latestSearchQuery = ''
+
+function hitToOption(hit: { title: string; project_id: string; icon_url?: string | null }) {
+	return {
+		label: hit.title,
+		value: hit.project_id,
+		icon: markRaw(
+			defineAsyncComponent(() =>
+				Promise.resolve({
+					setup: () => () =>
+						h('img', {
+							src: hit.icon_url,
+							alt: hit.title,
+							class: 'h-5 w-5 rounded',
+						}),
+				}),
+			),
+		),
+	}
+}
 
 const search = async (query: string) => {
 	query = query.trim()
@@ -53,36 +80,77 @@ const search = async (query: string) => {
 			facets: [[`project_id:${query.replace(/[^a-zA-Z0-9]/g, '')}`]], // remove any non-alphanumeric characters
 		})
 
-		options.value = [...resultsByProjectId.hits, ...results.hits].map((hit) => ({
-			label: hit.title,
-			value: hit.project_id,
-			icon: markRaw(
-				defineAsyncComponent(() =>
-					Promise.resolve({
-						setup: () => () =>
-							h('img', {
-								src: hit.icon_url,
-								alt: hit.title,
-								class: 'h-5 w-5 rounded',
-							}),
-					}),
-				),
-			),
-		}))
+		if (query !== latestSearchQuery) return
+
+		options.value = [...resultsByProjectId.hits, ...results.hits].map(hitToOption)
 	} catch (error: any) {
+		if (query !== latestSearchQuery) return
+
 		addNotification({
 			title: 'An error occurred',
 			text: error.data ? error.data.description : error,
 			type: 'error',
 		})
 	}
-	searchLoading.value = false
+
+	if (query === latestSearchQuery) {
+		searchLoading.value = false
+	}
 }
 
-const throttledSearch = useDebounceFn(search, 500)
+const throttledSearch = useDebounceFn(search, 250)
+
+const runSearch = async (query: string, debounce: boolean) => {
+	query = query.trim()
+	latestSearchQuery = query
+
+	if (!query) {
+		searchLoading.value = false
+		options.value = []
+		await throttledSearch(query)
+		return
+	}
+
+	searchLoading.value = true
+	await (debounce ? throttledSearch(query) : search(query))
+}
 
 const handleSearch = async (query: string) => {
-	searchLoading.value = true
-	await throttledSearch(query)
+	await runSearch(query, true)
 }
+
+const handleSelect = (option: ComboboxOption<string>) => {
+	selectedProjectOption.value = option
+	selectedProjectSearchQuery.value = latestSearchQuery
+}
+
+const handleSearchBlur = async () => {
+	if (!projectId.value) return
+
+	const selectedOption =
+		options.value.find((option) => option.value === projectId.value) ??
+		(selectedProjectOption.value?.value === projectId.value
+			? selectedProjectOption.value
+			: undefined)
+	if (!selectedOption) return
+
+	await runSearch(selectedProjectSearchQuery.value || selectedOption.label, false)
+
+	if (!options.value.some((option) => option.value === selectedOption.value)) {
+		options.value = [selectedOption, ...options.value]
+	}
+}
+
+watch(projectId, (value) => {
+	if (!value) {
+		selectedProjectOption.value = undefined
+		selectedProjectSearchQuery.value = ''
+		return
+	}
+
+	const option = options.value.find((option) => option.value === value)
+	if (option) {
+		selectedProjectOption.value = option
+	}
+})
 </script>

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

@@ -8,7 +8,7 @@
 				:name="dependency.name"
 				:icon="dependency.icon"
 				:dependency-type="dependency.dependency_type"
-				:version-name="dependency.versionName"
+				:version-number="dependency.versionNumber"
 				@on-add-suggestion="
 					() =>
 						handleAddSuggestion({

apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue

@@ -1,28 +1,31 @@
 <template>
 	<div
-		class="flex items-center justify-between gap-2 rounded-xl border-2 border-dashed border-surface-5 px-4 py-1 text-button-text"
+		class="flex h-11 items-center justify-between gap-2 rounded-xl border-2 border-dashed border-surface-5 px-4 py-1 text-button-text"
 	>
-		<div class="grid max-w-[75%] grid-cols-[auto_1fr_auto] items-center gap-2">
+		<div class="flex min-w-0 flex-1 items-center justify-start gap-2">
 			<Avatar v-if="icon" :src="icon" alt="dependency-icon" size="20px" :no-shadow="true" />
 
-			<span v-tooltip="name || 'Unknown Project'" class="truncate font-semibold text-contrast">
+			<span
+				v-tooltip="name || 'Unknown Project'"
+				class="min-w-0 max-w-fit flex-1 truncate font-semibold text-contrast"
+			>
 				{{ name || 'Unknown Project' }}
 			</span>
 
+			<span
+				v-if="versionNumber"
+				v-tooltip="versionNumber"
+				class="min-w-0 max-w-fit flex-1 truncate whitespace-nowrap text-sm font-medium"
+			>
+				{{ versionNumber }}
+			</span>
+
 			<TagItem class="shrink-0 border !border-solid border-surface-5 capitalize">
 				{{ dependencyType }}
 			</TagItem>
 		</div>
 
-		<span
-			v-if="versionName"
-			v-tooltip="versionName"
-			class="max-w-[35%] truncate whitespace-nowrap font-medium"
-		>
-			{{ versionName }}
-		</span>
-
-		<div class="flex items-center justify-end gap-1">
+		<div class="flex shrink-0 items-center justify-end gap-1">
 			<ButtonStyled size="standard" :circular="true" type="transparent">
 				<button aria-label="Add dependency" class="!shadow-none" @click="emitAddSuggestion">
 					<PlusIcon aria-hidden="true" />
@@ -41,11 +44,11 @@ const emit = defineEmits<{
 	(e: 'onAddSuggestion'): void
 }>()
 
-const { name, icon, dependencyType, versionName } = defineProps<{
+const { name, icon, dependencyType, versionNumber } = defineProps<{
 	name?: string
 	icon?: string
 	dependencyType: Labrinth.Versions.v2.DependencyType
-	versionName?: string
+	versionNumber?: string
 }>()
 
 function emitAddSuggestion() {

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

@@ -1,11 +1,10 @@
 <template>
-	<NavTabs
+	<Tabs
 		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"
+		value="add-files"
+		:tabs="editTabs"
+		class="mb-5 border border-solid border-surface-5 !shadow-none !drop-shadow-none"
+		@change="setEditTab"
 	/>
 	<div class="flex w-full flex-col gap-4">
 		<template
@@ -99,7 +98,8 @@ import {
 	defineMessages,
 	DropzoneFileInput,
 	injectProjectPageContext,
-	NavTabs,
+	Tabs,
+	type TabsTab,
 	useVIntl,
 } from '@modrinth/ui'
 import { acceptFileFromProjectType } from '@modrinth/utils'
@@ -124,18 +124,14 @@ const {
 	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 editTabs: TabsTab[] = [
+	{ label: 'Metadata', value: 'metadata' },
+	{ label: 'Details', value: 'add-details' },
+	{ label: 'Files', value: 'add-files' },
+]
 
-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 setEditTab(tab: TabsTab) {
+	modal.value?.setStage(tab.value)
 }
 
 function handleRemoveFile(index: number) {

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

@@ -1,182 +1,58 @@
 <template>
-	<div class="flex w-full max-w-full flex-col gap-6">
-		<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">
-				<div class="grid gap-2.5">
-					<span class="font-semibold text-contrast">Project</span>
-					<DependencySelect v-model="newDependencyProjectId" />
-				</div>
+	<div class="flex w-full max-w-full flex-col gap-3">
+		<div class="grid gap-2.5">
+			<span class="font-semibold text-contrast">Project</span>
+			<DependencySelect v-model="newDependencyProjectId" />
+		</div>
 
-				<template v-if="newDependencyProjectId">
-					<div class="grid gap-2.5">
-						<span class="font-semibold text-contrast"> Version </span>
-						<Combobox
-							v-model="newDependencyVersionId"
-							placeholder="Select version"
-							:options="[{ label: 'Any version', value: null }, ...newDependencyVersions]"
-							:searchable="true"
-						/>
-					</div>
-
-					<div class="grid gap-2.5">
-						<span class="font-semibold text-contrast"> Dependency relation </span>
-						<Combobox
-							v-model="newDependencyType"
-							placeholder="Select dependency type"
-							:options="[
-								{ label: 'Required', value: 'required' },
-								{ label: 'Optional', value: 'optional' },
-								{ label: 'Incompatible', value: 'incompatible' },
-								{ label: 'Embedded', value: 'embedded' },
-							]"
-						/>
-					</div>
-
-					<ButtonStyled color="green">
-						<button
-							class="self-start"
-							:disabled="!newDependencyProjectId"
-							@click="
-								() =>
-									addDependency(
-										toRaw({
-											project_id: newDependencyProjectId,
-											version_id: newDependencyVersionId || undefined,
-											dependency_type: newDependencyType,
-										}),
-									)
-							"
-						>
-							Add Dependency
-						</button>
-					</ButtonStyled>
-				</template>
+		<template v-if="newDependencyProjectId">
+			<div class="grid gap-2.5">
+				<span class="font-semibold text-contrast"> Version </span>
+				<Combobox
+					v-model="newDependencyVersionId"
+					placeholder="Select version"
+					:options="newDependencyVersionOptions"
+					:search-value="selectedNewDependencyVersionLabel"
+					:searchable="true"
+					:select-search-text-on-focus="true"
+				/>
 			</div>
-		</div>
 
-		<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-4">
-			<span class="font-semibold text-contrast">Suggested dependencies</span>
-			<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
-		</div>
-
-		<div v-if="addedDependencies.length" class="flex flex-col gap-4">
-			<span class="font-semibold text-contrast">Added dependencies</span>
-			<DependenciesList />
-		</div>
+			<div class="grid gap-2.5">
+				<span class="font-semibold text-contrast"> Dependency relation </span>
+				<Combobox
+					v-model="newDependencyType"
+					placeholder="Select dependency type"
+					:options="[
+						{ label: 'Required', value: 'required' },
+						{ label: 'Optional', value: 'optional' },
+						{ label: 'Incompatible', value: 'incompatible' },
+						{ label: 'Embedded', value: 'embedded' },
+					]"
+				/>
+			</div>
+		</template>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	ButtonStyled,
-	Combobox,
-	injectModrinthClient,
-	injectNotificationManager,
-} from '@modrinth/ui'
-import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
+import { Combobox } from '@modrinth/ui'
+import { computed } from 'vue'
 
 import DependencySelect from '~/components/ui/create-project-version/components/DependencySelect.vue'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
-import DependenciesList from '../components/DependenciesList.vue'
-import SuggestedDependencies from '../components/SuggestedDependencies/SuggestedDependencies.vue'
+const { newDependencyProjectId, newDependencyType, newDependencyVersionId, newDependencyVersions } =
+	injectManageVersionContext()
 
-const { addNotification } = injectNotificationManager()
-const { labrinth } = injectModrinthClient()
-
-const {
-	draftVersion,
-	dependencyProjects,
-	dependencyVersions,
-	projectsFetchLoading,
-	visibleSuggestedDependencies,
-} = injectManageVersionContext()
-
-const errorNotification = (err: any) => {
-	addNotification({
-		title: 'An error occurred',
-		text: err.data ? err.data.description : err,
-		type: 'error',
-	})
-}
-
-const newDependencyProjectId = ref<string>()
-const newDependencyType = ref<Labrinth.Versions.v2.DependencyType>('required')
-const newDependencyVersionId = ref<string | null>(null)
-
-const newDependencyVersions = ref<ComboboxOption<string>[]>([])
-
-// reset to defaults when select different project
-watch(newDependencyProjectId, async () => {
-	newDependencyVersionId.value = null
-	newDependencyType.value = 'required'
-
-	if (!newDependencyProjectId.value) {
-		newDependencyVersions.value = []
-	} else {
-		try {
-			const versions = await labrinth.versions_v3.getProjectVersions(newDependencyProjectId.value)
-			newDependencyVersions.value = versions.map((version) => ({
-				label: version.name,
-				value: version.id,
-			}))
-		} catch (error: any) {
-			errorNotification(error)
-		}
-	}
-})
-
-const addedDependencies = computed(() =>
-	(draftVersion.value.dependencies || [])
-		.map((dep) => {
-			if (!dep.project_id) return null
-
-			const dependencyProject = dependencyProjects.value[dep.project_id]
-			const versionName = dependencyVersions.value[dep.version_id || '']?.name ?? ''
-
-			if (!dependencyProject && projectsFetchLoading.value) return null
-
-			return {
-				projectId: dep.project_id,
-				name: dependencyProject?.name,
-				icon: dependencyProject?.icon_url,
-				dependencyType: dep.dependency_type,
-				versionName,
-			}
-		})
-		.filter(Boolean),
+const newDependencyVersionOptions = computed(() => [
+	{ label: 'Any version', value: null },
+	...newDependencyVersions.value,
+])
+const selectedNewDependencyVersionLabel = computed(
+	() =>
+		newDependencyVersionOptions.value.find(
+			(option) => option.value === newDependencyVersionId.value,
+		)?.label,
 )
-
-const addDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
-	if (!draftVersion.value.dependencies) draftVersion.value.dependencies = []
-
-	const alreadyAdded = draftVersion.value.dependencies.some((existing) => {
-		if (existing.project_id !== dependency.project_id) return false
-		if (!existing.version_id && !dependency.version_id) return true
-		return existing.version_id === dependency.version_id
-	})
-
-	if (alreadyAdded) {
-		addNotification({
-			title: 'Dependency already added',
-			text: 'You cannot add the same dependency twice.',
-			type: 'error',
-		})
-		return
-	}
-
-	projectsFetchLoading.value = true
-	draftVersion.value.dependencies.push(dependency)
-	newDependencyProjectId.value = undefined
-}
-
-const handleAddSuggestedDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
-	draftVersion.value.dependencies?.push({
-		project_id: dependency.project_id,
-		version_id: dependency.version_id,
-		dependency_type: dependency.dependency_type,
-	})
-}
 </script>

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

@@ -1,11 +1,10 @@
 <template>
-	<NavTabs
+	<Tabs
 		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"
+		value="add-details"
+		:tabs="editTabs"
+		class="mb-5 border border-solid border-surface-5 !shadow-none !drop-shadow-none"
+		@change="setEditTab"
 	/>
 	<div class="flex w-full flex-col gap-6">
 		<div class="flex flex-col gap-2">
@@ -18,6 +17,7 @@
 				:never-empty="true"
 				:capitalize="true"
 				:disabled="isUploading"
+				hide-checkmark-icon
 			/>
 		</div>
 		<div class="flex flex-col gap-2">
@@ -61,25 +61,21 @@
 </template>
 
 <script lang="ts" setup>
-import { Chips, MarkdownEditor, NavTabs, StyledInput } from '@modrinth/ui'
+import { Chips, MarkdownEditor, StyledInput, Tabs, type TabsTab } from '@modrinth/ui'
 
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
 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 editTabs: TabsTab[] = [
+	{ label: 'Metadata', value: 'metadata' },
+	{ label: 'Details', value: 'add-details' },
+	{ label: 'Files', value: 'add-files' },
+]
 
-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 setEditTab(tab: TabsTab) {
+	modal.value?.setStage(tab.value)
 }
 
 async function onImageUpload(file: File) {

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

@@ -1,11 +1,10 @@
 <template>
-	<NavTabs
+	<Tabs
 		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"
+		value="metadata"
+		:tabs="editTabs"
+		class="mb-3 border border-solid border-surface-5 !shadow-none !drop-shadow-none"
+		@change="setEditTab"
 	/>
 	<div class="flex flex-col gap-6">
 		<div v-if="!editingVersion" class="flex flex-col gap-1">
@@ -161,40 +160,32 @@
 		</template>
 
 		<template v-if="!noDependenciesProject">
-			<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-1">
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast"> Suggested dependencies </span>
+			<div class="flex flex-col gap-2.5">
+				<div class="flex flex-col gap-1">
+					<div class="flex items-center justify-between">
+						<span class="font-semibold text-contrast"> Dependencies </span>
 
-					<ButtonStyled type="transparent" size="standard">
-						<button @click="editDependencies">
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
-				</div>
-				<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
-			</div>
+						<ButtonStyled type="transparent" size="standard">
+							<button @click="addDependency">
+								<PlusIcon />
+								Add dependency
+							</button>
+						</ButtonStyled>
+					</div>
 
-			<div
-				v-if="!visibleSuggestedDependencies.length || draftVersion.dependencies?.length"
-				class="flex flex-col gap-1"
-			>
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast"> Dependencies </span>
-
-					<ButtonStyled type="transparent" size="standard">
-						<button @click="editDependencies">
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
+					<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
+						<DependenciesList />
+					</div>
+					<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
+						<span class="text-sm font-medium">No dependencies added.</span>
+					</div>
 				</div>
 
-				<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
-					<DependenciesList disable-remove />
-				</div>
-				<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
-					<span class="text-sm font-medium">No dependencies added.</span>
+				<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-2.5">
+					<div class="flex items-center justify-between">
+						<span class="font-medium"> Suggested </span>
+					</div>
+					<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
 				</div>
 			</div>
 		</template>
@@ -203,14 +194,15 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { EditIcon, getLoaderIcon, UnknownIcon } from '@modrinth/assets'
+import { EditIcon, getLoaderIcon, PlusIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	defineMessages,
 	ENVIRONMENTS_COPY,
 	FormattedTag,
 	injectProjectPageContext,
-	NavTabs,
+	Tabs,
+	type TabsTab,
 	TagItem,
 	useVIntl,
 } from '@modrinth/ui'
@@ -239,18 +231,14 @@ 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 editTabs: TabsTab[] = [
+	{ label: 'Metadata', value: 'metadata' },
+	{ label: 'Details', value: 'add-details' },
+	{ label: 'Files', value: 'add-files' },
+]
 
-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 setEditTab(tab: TabsTab) {
+	modal.value?.setStage(tab.value)
 }
 
 const isModpack = computed(() => projectType.value === 'modpack')
@@ -279,7 +267,7 @@ const editEnvironment = () => {
 const editFiles = () => {
 	modal.value?.setStage('from-details-files')
 }
-const editDependencies = () => {
+const addDependency = () => {
 	modal.value?.setStage('from-details-dependencies')
 }