From 087752312bdaa00af72cf5ce2fdb21f5aa03c8c4 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 20 Aug 2026 14:32:32 -0700
Subject: [PATCH] fix navtabs issues and unify project lists (#7245)

* fix navtabs issues and unify project lists

* move page navtab logic to component
---
 apps/app-frontend/src/helpers/users.ts        |   4 +-
 apps/app-frontend/src/pages/User.vue          |  28 +-
 apps/frontend/src/pages/[type]/[project].vue  |   2 +-
 .../src/pages/collection/[collection].vue     | 109 ++-----
 .../src/pages/discover/[type]/index.vue       |   2 +-
 .../src/pages/organization/[organization].vue | 141 ++------
 apps/frontend/src/pages/user/[user].vue       |  20 +-
 .../src/modules/labrinth/users/v3.ts          |  48 +++
 packages/app-lib/src/api/users.rs             |   4 +-
 packages/ui/src/components/base/NavTabs.vue   | 257 +++++++++------
 .../ui/src/components/project/ProjectList.vue | 101 ++++++
 packages/ui/src/components/project/index.ts   |   1 +
 .../layouts/shared/user-profile/layout.vue    | 304 ++++++++----------
 .../user-profile/providers/user-profile.ts    |   2 +-
 .../src/layouts/shared/user-profile/utils.ts  |  25 +-
 .../layouts/wrapped/hosting/manage/root.vue   |  16 +-
 packages/ui/src/utils/common-messages.ts      |   1 +
 packages/ui/src/utils/index.ts                |   1 +
 packages/ui/src/utils/v3-projects.ts          |  98 ++++++
 19 files changed, 645 insertions(+), 519 deletions(-)
 create mode 100644 packages/ui/src/components/project/ProjectList.vue
 create mode 100644 packages/ui/src/utils/v3-projects.ts

diff --git a/apps/app-frontend/src/helpers/users.ts b/apps/app-frontend/src/helpers/users.ts
index 4d4b831b39..dd0c5dd776 100644
--- a/apps/app-frontend/src/helpers/users.ts
+++ b/apps/app-frontend/src/helpers/users.ts
@@ -25,8 +25,8 @@ export async function get_user_profile(userId: string): Promise<Labrinth.Users.v
 	return await invoke<Labrinth.Users.v3.User>('plugin:users|get_user_profile', { userId })
 }
 
-export async function get_user_projects(userId: string): Promise<Labrinth.Projects.v2.Project[]> {
-	return await invoke<Labrinth.Projects.v2.Project[]>('plugin:users|get_user_projects', {
+export async function get_user_projects(userId: string): Promise<Labrinth.Projects.v3.Project[]> {
+	return await invoke<Labrinth.Projects.v3.Project[]>('plugin:users|get_user_projects', {
 		userId,
 	})
 }
diff --git a/apps/app-frontend/src/pages/User.vue b/apps/app-frontend/src/pages/User.vue
index daf79890c2..5519607fa9 100644
--- a/apps/app-frontend/src/pages/User.vue
+++ b/apps/app-frontend/src/pages/User.vue
@@ -11,19 +11,20 @@
 		>
 			<template #project-actions="{ project }">
 				<Button
+					v-if="project.minecraft_server == null"
 					type="outlined"
 					class="!text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)]"
 					:disabled="isProjectInstalling(project.id)"
 					@click.stop="installProject(project)"
 				>
 					<SpinnerIcon v-if="isProjectInstalling(project.id)" class="animate-spin" />
-					<DownloadIcon v-else-if="project.project_type === 'modpack'" />
+					<DownloadIcon v-else-if="project.project_types.includes('modpack')" />
 					<PlusIcon v-else />
 					{{
 						formatMessage(
 							isProjectInstalling(project.id)
 								? commonMessages.installingLabel
-								: project.project_type === 'modpack'
+								: project.project_types.includes('modpack')
 									? commonMessages.installButton
 									: messages.installToInstance,
 						)
@@ -96,7 +97,7 @@ function setProjectInstalling(projectId: string, installing: boolean): void {
 	installingProjectIds.value = next
 }
 
-async function installProject(project: Labrinth.Projects.v2.Project): Promise<void> {
+async function installProject(project: Labrinth.Projects.v3.Project): Promise<void> {
 	if (isProjectInstalling(project.id)) return
 
 	setProjectInstalling(project.id, true)
@@ -130,14 +131,19 @@ const userProfile = provideUserProfile({
 	unblockUser: unblock_user,
 })
 
-const userId = computed(() => {
-	const value = route.params.user
-	return Array.isArray(value) ? (value[0] ?? '') : (value ?? '')
-})
-const projectType = computed(() => {
-	const value = route.params.projectType
-	return Array.isArray(value) ? value[0] : value
-})
+function readRouteParam(param: unknown): string | undefined {
+	const value = Array.isArray(param) ? param[0] : param
+	return typeof value === 'string' && value.length > 0 ? value : undefined
+}
+
+const userId = ref(readRouteParam(route.params.user) ?? '')
+watch(
+	() => readRouteParam(route.params.user),
+	(next) => {
+		if (next) userId.value = next
+	},
+)
+const projectType = computed(() => readRouteParam(route.params.projectType))
 
 function getCachedUserSummary(id: string) {
 	return queryClient.getQueryData<Labrinth.Users.v3.User>(['users', 'summary', id])
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 89800df9e5..7cfb8e3550 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -532,7 +532,7 @@
 				</div>
 
 				<div class="normal-page__content">
-					<div class="mb-3 overflow-x-auto"><NavTabs :links="navLinks" replace class="mb-1" /></div>
+					<NavTabs :links="navLinks" replace page-nav />
 					<NuxtPage @on-download="triggerDownloadAnimation" @delete-version="deleteVersion" />
 				</div>
 			</div>
diff --git a/apps/frontend/src/pages/collection/[collection].vue b/apps/frontend/src/pages/collection/[collection].vue
index 90e8ab0b01..3049dcf6f7 100644
--- a/apps/frontend/src/pages/collection/[collection].vue
+++ b/apps/frontend/src/pages/collection/[collection].vue
@@ -307,64 +307,32 @@
 						}
 					}),
 				]"
-				class="mb-4"
+				replace
+				page-nav
 			/>
 
-			<ProjectCardList
+			<ProjectList
 				v-if="projects && projects?.length > 0"
+				:projects="displayedProjects"
 				:layout="cosmetics.searchDisplayMode.collection"
 			>
-				<ProjectCard
-					v-for="project in (route.params.projectType !== undefined
-						? projects.filter(
-								(x) =>
-									x.project_type ===
-									route.params.projectType.substr(0, route.params.projectType.length - 1),
-							)
-						: projects
-					)
-						.slice()
-						.sort((a, b) => b.downloads - a.downloads)"
-					:key="project.id"
-					:link="`/${project.project_type}/${project.slug ?? project.id}`"
-					:title="project.title"
-					:icon-url="project.icon_url"
-					:banner="project.gallery.find((element) => element.featured)?.url"
-					:summary="project.description"
-					:date-updated="project.updated"
-					:downloads="project.downloads ?? 0"
-					:followers="project.followers ?? 0"
-					:tags="project.categories"
-					:environment="{
-						clientSide: project.client_side,
-						serverSide: project.server_side,
-					}"
-					:color="project.color"
-					:layout="
-						cosmetics.searchDisplayMode.collection === 'grid' ||
-						cosmetics.searchDisplayMode.collection === 'gallery'
-							? 'grid'
-							: 'list'
-					"
-				>
-					<template v-if="canEdit || collection.id === 'following'" #actions>
-						<Button
-							v-if="canEdit"
-							class="remove-btn"
-							:disabled="removing"
-							@click="() => removeProject(project)"
-						>
-							<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
-							<XIcon v-else aria-hidden="true" />
-							{{ formatMessage(messages.removeProjectButton) }}
-						</Button>
-						<Button v-if="collection.id === 'following'" @click="unfollowProject(project)">
-							<HeartMinusIcon aria-hidden="true" />
-							{{ formatMessage(messages.unfollowProjectButton) }}
-						</Button>
-					</template>
-				</ProjectCard>
-			</ProjectCardList>
+				<template v-if="canEdit || collection.id === 'following'" #actions="{ project }">
+					<Button
+						v-if="canEdit"
+						class="remove-btn"
+						:disabled="removing"
+						@click="() => removeProject(project)"
+					>
+						<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
+						<XIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.removeProjectButton) }}
+					</Button>
+					<Button v-if="collection.id === 'following'" @click="unfollowProject(project)">
+						<HeartMinusIcon aria-hidden="true" />
+						{{ formatMessage(messages.unfollowProjectButton) }}
+					</Button>
+				</template>
+			</ProjectList>
 			<EmptyState v-else type="empty-inbox" :heading="formatMessage(messages.noProjectsLabel)">
 				<template #actions>
 					<ButtonLink
@@ -405,6 +373,7 @@ import {
 	Avatar,
 	Button,
 	ButtonLink,
+	catalogProjectTypes,
 	commonMessages,
 	commonProjectTypeCategoryMessages,
 	commonProjectTypeSentenceMessages,
@@ -413,6 +382,7 @@ import {
 	defineMessages,
 	EmptyState,
 	FileInput,
+	filterProjectsByType,
 	HorizontalRule,
 	injectModrinthClient,
 	injectNotificationManager,
@@ -421,11 +391,10 @@ import {
 	NewModal,
 	normalizeChildren,
 	NormalPage,
-	ProjectCard,
-	ProjectCardList,
+	parseProjectTypeRouteParam,
+	ProjectList,
 	RadioButtons,
 	SidebarCard,
-	sortProjectTypes,
 	StyledInput,
 	TeleportOverflowMenu,
 	useCompactNumber,
@@ -463,21 +432,13 @@ async function fetchProjectsByIds(projectIds) {
 		segments.push(projectIds.slice(i, i + segmentSize))
 	}
 	const results = await Promise.all(
-		segments.map((ids) => api.labrinth.projects_v2.getMultiple(ids)),
+		segments.map((ids) => api.labrinth.projects_v3.getMultiple(ids)),
 	)
-	const projects = results.flat()
-	for (const project of projects) {
-		project.categories = project.categories.concat(project.loaders)
-	}
-	return projects
+	return results.flat()
 }
 
 async function fetchFollowedProjects(userId) {
-	const projects = await api.labrinth.users_v2.getFollowedProjects(userId)
-	for (const project of projects) {
-		project.categories = project.categories.concat(project.loaders)
-	}
-	return projects
+	return api.labrinth.users_v3.getFollowedProjects(userId)
 }
 
 const messages = defineMessages({
@@ -765,13 +726,13 @@ const canEdit = computed(
 		collection.value.id !== 'following',
 )
 
-const projectTypes = computed(() => {
-	const projectSet = new Set(
-		projects.value?.map((project) => project?.project_type).filter((x) => x !== undefined) || [],
-	)
-	projectSet.delete('project')
-	return sortProjectTypes(projectSet)
-})
+const projectTypes = computed(() => catalogProjectTypes(projects.value ?? []))
+
+const displayedProjects = computed(() =>
+	filterProjectsByType(projects.value ?? [], parseProjectTypeRouteParam(route.params.projectType))
+		.slice()
+		.sort((a, b) => b.downloads - a.downloads),
+)
 
 function getProjectTypeSentenceMessage(type) {
 	return commonProjectTypeSentenceMessages[type] ?? commonProjectTypeSentenceMessages.project
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 78cd909fec..2c6093242b 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -621,7 +621,7 @@ const { isStuck: isInstallHeaderStuck } = useStickyObserver(
 		"
 	>
 		<section
-			class="flex min-w-0 flex-col gap-3"
+			class="mt-6 flex min-w-0 flex-col gap-3 sm:mt-0"
 			:class="cosmetics.rightSearchLayout ? 'lg:order-1' : 'lg:order-2'"
 		>
 			<BrowsePageLayout>
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index bfd86d77a7..c793e2ff72 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -122,74 +122,12 @@
 						</Button>
 					</div>
 				</div>
-				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
-					<NavTabs :links="navLinks" replace />
-				</div>
-				<ProjectCardList v-if="projects && projects.length > 0">
-					<template
-						v-for="project in (route.params.projectType !== undefined
-							? (projects ?? []).filter((x) =>
-									x.project_types.includes(
-										typeof route.params.projectType === 'string'
-											? route.params.projectType.slice(0, route.params.projectType.length - 1)
-											: route.params.projectType[0]?.slice(
-													0,
-													route.params.projectType[0].length - 1,
-												) || '',
-									),
-								)
-							: (projects ?? [])
-						)
-							.slice()
-							.sort(projectUserSorting)"
-						:key="project.id"
-					>
-						<ProjectCard
-							v-if="isProjectServer(project)"
-							:link="`/server/${project.slug || project.id}`"
-							:title="project.name"
-							:icon-url="project.icon_url"
-							:summary="project.summary"
-							:tags="project.categories"
-							:server-online-players="
-								project.minecraft_java_server?.ping?.data?.players_online ?? 0
-							"
-							:server-recent-plays="project.minecraft_java_server?.verified_plays_2w ?? 0"
-							:server-region="project.minecraft_server?.region"
-							:server-status-online="!!project.minecraft_java_server?.ping?.data"
-							:server-modpack-content="getServerModpackContent(project)"
-							:status="
-								auth.user && (auth.user.id! === user.id || tags.staffRoles.includes(auth.user.role))
-									? (project.status as ProjectStatus)
-									: undefined
-							"
-							:max-tags="2"
-							layout="list"
-							is-server-project
-							exclude-loaders
-						/>
-						<ProjectCard
-							v-else
-							:link="`/${project.project_types[0] ?? 'project'}/${project.slug || project.id}`"
-							:title="project.name"
-							:icon-url="project.icon_url"
-							:banner="project.gallery.find((element) => element.featured)?.url"
-							:summary="project.summary"
-							:date-updated="project.updated"
-							:downloads="project.downloads"
-							:followers="project.followers"
-							:tags="project.categories"
-							:environment="project.environment?.[0]"
-							:status="
-								auth.user && (auth.user.id! === user.id || tags.staffRoles.includes(auth.user.role))
-									? (project.status as ProjectStatus)
-									: undefined
-							"
-							:color="project.color"
-							layout="list"
-						/>
-					</template>
-				</ProjectCardList>
+				<NavTabs v-if="navLinks.length > 2" :links="navLinks" replace page-nav />
+				<ProjectList
+					v-if="projects && projects.length > 0"
+					:projects="displayedProjects"
+					:show-status="showProjectStatus"
+				/>
 				<div v-else-if="true" class="error">
 					<UpToDate class="icon" />
 					<br />
@@ -226,21 +164,21 @@ import {
 import {
 	Avatar,
 	Button,
+	catalogProjectTypes,
 	commonMessages,
 	defineMessages,
+	filterProjectsByType,
 	injectModrinthClient,
 	IntlFormatted,
 	NavTabs,
 	normalizeChildren,
-	PROJECT_DEP_MARKER_QUERY,
-	ProjectCard,
-	ProjectCardList,
+	parseProjectTypeRouteParam,
+	ProjectList,
 	SidebarCard,
-	sortProjectTypes,
 	useCompactNumber,
 	useVIntl,
 } from '@modrinth/ui'
-import type { Organization, ProjectStatus, ProjectType } from '@modrinth/utils'
+import type { Organization, ProjectType } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
@@ -332,19 +270,7 @@ const {
 	isFetching: projectsIsFetching,
 } = useQuery({
 	queryKey: computed(() => ['organization', orgId, 'projects']),
-	queryFn: async () => {
-		// @ts-expect-error
-		const rawProjects = (await client.labrinth.organizations_v3.getProjects(orgId)) as ProjectV3[]
-
-		return rawProjects.map((project) => {
-			let categories = project.categories.concat(project.loaders)
-			if (project.mrpack_loaders) {
-				categories = categories.concat(project.mrpack_loaders as string[])
-			}
-
-			return { ...project, categories }
-		})
-	},
+	queryFn: () => client.labrinth.organizations_v3.getProjects(orgId),
 	placeholderData: [],
 })
 
@@ -386,42 +312,17 @@ const isInvited = computed(() => {
 	return currentMember.value?.accepted === false
 })
 
-const projectTypes = computed(() => {
-	const types = new Set<string>()
+const projectTypes = computed(() => catalogProjectTypes(projects.value ?? []))
 
-	for (const project of projects.value ?? []) {
-		const type = project.project_types[0] ?? 'project'
-		if (type !== 'project') types.add(type)
-	}
+const displayedProjects = computed(() =>
+	filterProjectsByType(projects.value ?? [], parseProjectTypeRouteParam(route.params.projectType))
+		.slice()
+		.sort(projectUserSorting),
+)
 
-	return sortProjectTypes(types)
-})
-function isProjectServer(project: ProjectV3): boolean {
-	return project.minecraft_server != null
-}
-
-function getServerModpackContent(project: ProjectV3) {
-	const content = project.minecraft_java_server?.content
-	if (content?.kind === 'modpack') {
-		const { project_name, project_icon, project_id } = content
-		if (!project_name) return undefined
-		return {
-			name: project_name,
-			icon: project_icon,
-			onclick:
-				project_id !== project.id
-					? () => {
-							navigateTo({
-								path: `/project/${project_id}`,
-								query: { ...PROJECT_DEP_MARKER_QUERY },
-							})
-						}
-					: undefined,
-			showCustomModpackTooltip: project_id === project.id,
-		}
-	}
-	return undefined
-}
+const showProjectStatus = computed(
+	() => !!(auth.user && (auth.user.id === user.id || tags.staffRoles.includes(auth.user.role))),
+)
 
 const sumDownloads = computed(() => {
 	let sum = 0
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index f776774f41..26fa5084f6 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -31,7 +31,7 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const userProfile = provideUserProfile({
 	getUser: (userId) => client.labrinth.users_v3.get(userId),
-	getProjects: (userId) => client.labrinth.users_v2.getProjects(userId),
+	getProjects: (userId) => client.labrinth.users_v3.getProjects(userId),
 	getOrganizations: (userId) => client.labrinth.users_v2.getOrganizations(userId),
 	getCollections: (userId) => client.labrinth.users_v2.getCollections(userId),
 	patchUser: (userId, patch) => client.labrinth.users_v2.patch(userId, patch),
@@ -46,11 +46,19 @@ const auth = await useAuth()
 const cosmetics = useCosmetics()
 const config = useRuntimeConfig()
 
-const userId = computed(() => String(route.params.user))
-const projectType = computed(() => {
-	const value = route.params.projectType
-	return Array.isArray(value) ? value[0] : value
-})
+function readRouteParam(param: unknown): string | undefined {
+	const value = Array.isArray(param) ? param[0] : param
+	return typeof value === 'string' && value.length > 0 ? value : undefined
+}
+
+const userId = ref(readRouteParam(route.params.user) ?? '')
+watch(
+	() => readRouteParam(route.params.user),
+	(next) => {
+		if (next) userId.value = next
+	},
+)
+const projectType = computed(() => readRouteParam(route.params.projectType))
 
 let prefetchedUser: Labrinth.Users.v3.User | undefined
 try {
diff --git a/packages/api-client/src/modules/labrinth/users/v3.ts b/packages/api-client/src/modules/labrinth/users/v3.ts
index cc68ebc18f..6f9e983919 100644
--- a/packages/api-client/src/modules/labrinth/users/v3.ts
+++ b/packages/api-client/src/modules/labrinth/users/v3.ts
@@ -93,6 +93,54 @@ export class LabrinthUsersV3Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * Get a user's projects.
+	 *
+	 * @param idOrUsername - The user's ID or username
+	 * @returns Promise resolving to an array of the user's projects
+	 *
+	 * GET /v3/user/{id}/projects
+	 *
+	 * @example
+	 * ```typescript
+	 * const projects = await client.labrinth.users_v3.getProjects('my_user')
+	 * ```
+	 */
+	public async getProjects(idOrUsername: string): Promise<Labrinth.Projects.v3.Project[]> {
+		return this.client.request<Labrinth.Projects.v3.Project[]>(
+			`/user/${encodeURIComponent(idOrUsername)}/projects`,
+			{
+				api: 'labrinth',
+				version: 3,
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Get projects a user follows.
+	 *
+	 * @param idOrUsername - The user's ID or username
+	 * @returns Promise resolving to an array of followed projects
+	 *
+	 * GET /v3/user/{id}/follows
+	 *
+	 * @example
+	 * ```typescript
+	 * const projects = await client.labrinth.users_v3.getFollowedProjects('my_user')
+	 * ```
+	 */
+	public async getFollowedProjects(idOrUsername: string): Promise<Labrinth.Projects.v3.Project[]> {
+		return this.client.request<Labrinth.Projects.v3.Project[]>(
+			`/user/${encodeURIComponent(idOrUsername)}/follows`,
+			{
+				api: 'labrinth',
+				version: 3,
+				method: 'GET',
+			},
+		)
+	}
+
 	/**
 	 * Get all projects the authenticated user can access directly or through
 	 * their organizations.
diff --git a/packages/app-lib/src/api/users.rs b/packages/app-lib/src/api/users.rs
index 8f6f71d0d8..7b4c286959 100644
--- a/packages/app-lib/src/api/users.rs
+++ b/packages/app-lib/src/api/users.rs
@@ -57,10 +57,10 @@ pub async fn get_user_projects(user_id: &str) -> crate::Result<Value> {
 
     fetch_json(
         Method::GET,
-        &format!("{}user/{}/projects", env!("MODRINTH_API_URL"), user_id),
+        &format!("{}user/{}/projects", env!("MODRINTH_API_URL_V3"), user_id),
         None,
         None,
-        Some("/v2/user/:id/projects"),
+        Some("/v3/user/:id/projects"),
         &state.api_semaphore,
         &state.pool,
     )
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 005af9d86f..1958a4498b 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -1,68 +1,88 @@
 <template>
-	<nav
+	<div
 		v-if="filteredLinks.length > 1"
-		ref="scrollContainer"
-		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
-		:class="{ 'drop-shadow-xl border border-solid border-surface-4': mode === 'navigation' }"
+		:class="pageNav ? '-mx-6 -mt-2 mb-1 overflow-x-auto px-6 py-2' : 'contents'"
+		v-bind="pageNav ? $attrs : {}"
 	>
-		<template v-if="mode === 'navigation'">
-			<RouterLink
-				v-for="(link, index) in filteredLinks"
-				v-show="link.shown ?? true"
-				:key="link.href"
-				ref="tabLinkElements"
-				:replace="replace"
-				:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
-				:class="getSSRFallbackClasses(index)"
-				@mouseenter="link.onHover?.()"
-				@focus="link.onHover?.()"
-			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
-				<span class="text-nowrap" :class="getLabelClasses(index)">
-					{{ link.label }}
-				</span>
-			</RouterLink>
-		</template>
+		<nav
+			ref="scrollContainer"
+			class="relative flex w-fit rounded-full bg-bg-raised p-1 text-xs sm:text-sm font-bold"
+			:class="{
+				'card-shadow border border-solid border-surface-4': mode === 'navigation',
+				'tab-color-delayed': colorChangeDelayed,
+			}"
+			v-bind="pageNav ? {} : $attrs"
+		>
+			<template v-if="mode === 'navigation'">
+				<RouterLink
+					v-for="(link, index) in filteredLinks"
+					v-show="link.shown ?? true"
+					:key="link.href"
+					ref="tabLinkElements"
+					:replace="replace"
+					:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+					class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
+					:class="getSSRFallbackClasses(index)"
+					@mouseenter="link.onHover?.()"
+					@focus="link.onHover?.()"
+				>
+					<component
+						:is="link.icon"
+						v-if="link.icon"
+						class="tab-color hidden sm:block size-5"
+						:class="getIconClasses(index)"
+					/>
+					<span class="tab-color text-nowrap" :class="getLabelClasses(index)">
+						{{ link.label }}
+					</span>
+				</RouterLink>
+			</template>
+
+			<template v-else>
+				<div
+					v-for="(link, index) in filteredLinks"
+					v-show="link.shown ?? true"
+					:key="link.href"
+					ref="tabLinkElements"
+					class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
+					:class="getSSRFallbackClasses(index)"
+					@click="emit('tabClick', index, link)"
+				>
+					<component
+						:is="link.icon"
+						v-if="link.icon"
+						class="tab-color size-5"
+						:class="getIconClasses(index)"
+					/>
+					<span class="tab-color text-nowrap" :class="getLabelClasses(index)">
+						{{ link.label }}
+					</span>
+				</div>
+			</template>
 
-		<template v-else>
 			<div
-				v-for="(link, index) in filteredLinks"
-				v-show="link.shown ?? true"
-				:key="link.href"
-				ref="tabLinkElements"
-				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
-				:class="getSSRFallbackClasses(index)"
-				@click="emit('tabClick', index, link)"
-			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
-				<span class="text-nowrap" :class="getLabelClasses(index)">
-					{{ link.label }}
-				</span>
-			</div>
-		</template>
-
-		<!-- Animated slider background -->
-		<div
-			v-if="sliderReady && currentActiveIndex !== -1"
-			class="pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1"
-			:class="[
-				subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
-				{ 'navtabs-transition': transitionsEnabled },
-			]"
-			:style="sliderStyle"
-			aria-hidden="true"
-		/>
-	</nav>
+				v-if="sliderReady && currentActiveIndex !== -1"
+				class="pointer-events-none absolute rounded-full"
+				:class="[
+					subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
+					{ 'navtabs-transition': transitionsEnabled },
+				]"
+				:style="sliderStyle"
+				aria-hidden="true"
+			/>
+		</nav>
+	</div>
 </template>
 
 <script setup lang="ts">
 import type { Component } from 'vue'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
 const route = useRoute()
 
+defineOptions({ inheritAttrs: false })
+
 interface Tab {
 	label: string
 	href: string
@@ -79,11 +99,13 @@ const props = withDefaults(
 		query?: string
 		mode?: 'navigation' | 'local'
 		activeIndex?: number
+		pageNav?: boolean
 	}>(),
 	{
 		mode: 'navigation',
 		query: undefined,
 		activeIndex: undefined,
+		pageNav: false,
 	},
 )
 
@@ -95,21 +117,18 @@ const emit = defineEmits<{
 const scrollContainer = ref<HTMLElement | null>(null)
 const tabLinkElements = ref<HTMLElement[]>()
 
-// Slider pos state
-const sliderLeft = ref(4)
-const sliderTop = ref(4)
-const sliderRight = ref(4)
-const sliderBottom = ref(4)
+const sliderLeft = ref(0)
+const sliderTop = ref(0)
+const sliderRight = ref(0)
+const sliderBottom = ref(0)
 
-// active tab state
 const currentActiveIndex = ref(-1)
 const subpageSelected = ref(false)
 
-// SSR state
 const sliderReady = ref(false)
 const transitionsEnabled = ref(false)
+const colorChangeDelayed = ref(false)
 
-// Stagger delays for the trailing edges of the slider animation
 const sliderDelays = ref({ left: '0ms', top: '0ms', right: '0ms', bottom: '0ms' })
 
 const filteredLinks = computed(() => props.links.filter((link) => link.shown ?? true))
@@ -119,7 +138,6 @@ const sliderStyle = computed(() => ({
 	top: `${sliderTop.value}px`,
 	right: `${sliderRight.value}px`,
 	bottom: `${sliderBottom.value}px`,
-	opacity: sliderReady.value && currentActiveIndex.value !== -1 ? 1 : 0,
 }))
 
 const leftDelay = computed(() => sliderDelays.value.left)
@@ -208,34 +226,29 @@ function getTabElement(index: number): HTMLElement | null {
 	return element
 }
 
-function positionSlider() {
+function getSliderPosition() {
 	const el = getTabElement(currentActiveIndex.value)
-	if (!el?.offsetParent) return
+	const parent = scrollContainer.value
+	if (!el || !parent) return null
 
-	const parent = el.offsetParent as HTMLElement
-	const newPosition = {
+	return {
 		left: el.offsetLeft,
 		top: el.offsetTop,
-		right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
-		bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
+		right: parent.clientWidth - el.offsetLeft - el.offsetWidth,
+		bottom: parent.clientHeight - el.offsetTop - el.offsetHeight,
 	}
+}
 
-	const isInitialPosition = sliderLeft.value === 4 && sliderRight.value === 4
-
-	if (!sliderReady.value || isInitialPosition) {
-		sliderLeft.value = newPosition.left
-		sliderRight.value = newPosition.right
-		sliderTop.value = newPosition.top
-		sliderBottom.value = newPosition.bottom
-
-		sliderReady.value = true
-
-		requestAnimationFrame(() => {
-			transitionsEnabled.value = true
-		})
-	} else {
-		animateSliderTo(newPosition)
-	}
+function applySliderPosition(newPosition: {
+	left: number
+	top: number
+	right: number
+	bottom: number
+}) {
+	sliderLeft.value = newPosition.left
+	sliderTop.value = newPosition.top
+	sliderRight.value = newPosition.right
+	sliderBottom.value = newPosition.bottom
 }
 
 function animateSliderTo(newPosition: {
@@ -244,7 +257,7 @@ function animateSliderTo(newPosition: {
 	right: number
 	bottom: number
 }) {
-	const STAGGER_DELAY = '200ms'
+	const STAGGER_DELAY = '175ms'
 
 	sliderDelays.value = {
 		left: newPosition.left < sliderLeft.value ? '0ms' : STAGGER_DELAY,
@@ -253,23 +266,54 @@ function animateSliderTo(newPosition: {
 		bottom: newPosition.top < sliderTop.value ? STAGGER_DELAY : '0ms',
 	}
 
-	sliderLeft.value = newPosition.left
-	sliderRight.value = newPosition.right
-	sliderTop.value = newPosition.top
-	sliderBottom.value = newPosition.bottom
+	applySliderPosition(newPosition)
+}
+
+function positionSlider(animate = true) {
+	const newPosition = getSliderPosition()
+	if (!newPosition) {
+		return
+	}
+
+	if (!sliderReady.value) {
+		applySliderPosition(newPosition)
+		sliderReady.value = true
+		nextTick(() => {
+			requestAnimationFrame(() => {
+				transitionsEnabled.value = true
+			})
+		})
+		return
+	}
+
+	if (!animate) {
+		transitionsEnabled.value = false
+		applySliderPosition(newPosition)
+		requestAnimationFrame(() => {
+			transitionsEnabled.value = true
+		})
+		return
+	}
+
+	animateSliderTo(newPosition)
+}
+
+function resetSliderPosition() {
+	if (!sliderReady.value || currentActiveIndex.value === -1) {
+		return
+	}
+	positionSlider(false)
 }
 
 async function updateActiveTab() {
 	await nextTick()
 	const { index, isSubpage } = computeActiveIndex()
+	colorChangeDelayed.value = sliderReady.value && index !== currentActiveIndex.value
 	currentActiveIndex.value = index
 	subpageSelected.value = isSubpage
 
 	if (index !== -1) {
 		positionSlider()
-	} else {
-		sliderLeft.value = 0
-		sliderRight.value = 0
 	}
 }
 
@@ -277,7 +321,19 @@ const initialActive = computeActiveIndex()
 currentActiveIndex.value = initialActive.index
 subpageSelected.value = initialActive.isSubpage
 
-onMounted(updateActiveTab)
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+	updateActiveTab()
+	resizeObserver = new ResizeObserver(resetSliderPosition)
+	if (scrollContainer.value) {
+		resizeObserver.observe(scrollContainer.value)
+	}
+})
+
+onUnmounted(() => {
+	resizeObserver?.disconnect()
+})
 
 watch(
 	() => [route.path, route.query],
@@ -310,10 +366,17 @@ watch(
 <style scoped>
 .navtabs-transition {
 	transition:
-		left 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
-		right 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
-		top 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(topDelay),
-		bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay),
-		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
+		left 80ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
+		right 80ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
+		top 80ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(topDelay),
+		bottom 80ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay);
+}
+
+.tab-color {
+	transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tab-color-delayed .tab-color {
+	transition-delay: 100ms;
 }
 </style>
diff --git a/packages/ui/src/components/project/ProjectList.vue b/packages/ui/src/components/project/ProjectList.vue
new file mode 100644
index 0000000000..429f46dbd8
--- /dev/null
+++ b/packages/ui/src/components/project/ProjectList.vue
@@ -0,0 +1,101 @@
+<template>
+	<ProjectCardList :layout="layout">
+		<template v-for="project in projects" :key="project.id">
+			<ProjectCard
+				v-if="isProjectServer(project)"
+				:link="getProjectPagePath(project, linkMode)"
+				:title="project.name"
+				:icon-url="project.icon_url"
+				:summary="project.summary"
+				:tags="getProjectCardTags(project)"
+				:server-online-players="project.minecraft_java_server?.ping?.data?.players_online ?? 0"
+				:server-recent-plays="project.minecraft_java_server?.verified_plays_2w ?? 0"
+				:server-region="project.minecraft_server?.region"
+				:server-status-online="!!project.minecraft_java_server?.ping?.data"
+				:server-modpack-content="getServerModpackContent(project, openModpackProject)"
+				:status="showStatus ? project.status : undefined"
+				:max-tags="2"
+				:layout="cardLayout"
+				is-server-project
+				exclude-loaders
+			>
+				<template v-if="$slots.actions" #actions>
+					<slot name="actions" :project="project" />
+				</template>
+			</ProjectCard>
+			<ProjectCard
+				v-else
+				:link="getProjectPagePath(project, linkMode)"
+				:title="project.name"
+				:icon-url="project.icon_url"
+				:date-updated="project.updated"
+				:downloads="project.downloads"
+				:summary="project.summary"
+				:tags="getProjectCardTags(project)"
+				:all-tags="getProjectCardAllTags(project)"
+				:followers="project.followers"
+				:banner="project.gallery?.find((image) => image.featured)?.url"
+				:color="project.color"
+				:environment="project.environment?.[0]"
+				:layout="cardLayout"
+				:status="showStatus ? project.status : undefined"
+			>
+				<template v-if="$slots.actions" #actions>
+					<slot name="actions" :project="project" />
+				</template>
+			</ProjectCard>
+		</template>
+	</ProjectCardList>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { PROJECT_DEP_MARKER_QUERY } from '#ui/providers'
+import {
+	getProjectCardAllTags,
+	getProjectCardTags,
+	getProjectPagePath,
+	getServerModpackContent,
+	isProjectServer,
+	type ProjectLinkMode,
+} from '#ui/utils/v3-projects'
+
+import ProjectCard from './card/ProjectCard.vue'
+import ProjectCardList from './ProjectCardList.vue'
+
+const props = withDefaults(
+	defineProps<{
+		projects: Labrinth.Projects.v3.Project[]
+		layout?: 'list' | 'grid' | 'gallery'
+		linkMode?: ProjectLinkMode
+		showStatus?: boolean
+	}>(),
+	{
+		layout: 'list',
+		linkMode: 'website',
+		showStatus: false,
+	},
+)
+
+defineSlots<{
+	actions?: (props: { project: Labrinth.Projects.v3.Project }) => unknown
+}>()
+
+const router = useRouter()
+const cardLayout = computed(() => (props.layout === 'list' ? 'list' : 'grid'))
+
+function openModpackProject(projectId: string): void {
+	const path = `/project/${projectId}`
+	if (props.linkMode === 'app') {
+		void router.push(path)
+		return
+	}
+	void router.push({
+		path,
+		query: { ...PROJECT_DEP_MARKER_QUERY },
+	})
+}
+</script>
diff --git a/packages/ui/src/components/project/index.ts b/packages/ui/src/components/project/index.ts
index fc6024d2e6..cf8067ebb3 100644
--- a/packages/ui/src/components/project/index.ts
+++ b/packages/ui/src/components/project/index.ts
@@ -7,6 +7,7 @@ export { default as ProjectCard } from './card/ProjectCard.vue'
 export { default as ProjectBackgroundGradient } from './ProjectBackgroundGradient.vue'
 export { default as ProjectCardList } from './ProjectCardList.vue'
 export { default as ProjectCombobox } from './ProjectCombobox.vue'
+export { default as ProjectList } from './ProjectList.vue'
 export { default as ProjectPageDescription } from './ProjectPageDescription.vue'
 export { default as ProjectPageHeader } from './ProjectPageHeader.vue'
 export { default as ProjectPageVersions } from './ProjectPageVersions.vue'
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index 8ffe648c35..7311b4fc66 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -221,144 +221,117 @@
 				</UserPageHeader>
 			</template>
 
-			<div class="flex flex-col gap-4">
-				<div v-if="navLinks.length > 2" class="max-w-full overflow-x-auto">
-					<NavTabs :links="navLinks" replace />
-				</div>
+			<NavTabs v-if="navLinks.length > 2" :links="navLinks" replace page-nav />
 
-				<div class="flex flex-col gap-3">
-					<ProjectCardList
-						v-if="selectedProjectType !== 'collection' && filteredProjects.length > 0"
-						:layout="displayMode"
-					>
-						<ProjectCard
-							v-for="project in filteredProjects"
-							:key="project.id"
-							:link="projectLink(project)"
-							:title="project.title"
-							:icon-url="project.icon_url"
-							:date-updated="project.updated"
-							:downloads="project.downloads"
-							:summary="project.description"
-							:tags="[...project.categories, ...project.loaders]"
-							:all-tags="[
-								...project.categories,
-								...project.loaders,
-								...project.additional_categories,
-							]"
-							:followers="project.followers"
-							:banner="project.gallery?.find((image) => image.featured)?.url"
-							:color="project.color"
-							:environment="{
-								clientSide: project.client_side,
-								serverSide: project.server_side,
-							}"
-							:layout="displayMode === 'list' ? 'list' : 'grid'"
-							:status="project.status"
-						>
-							<template v-if="$slots['project-actions']" #actions>
-								<slot name="project-actions" :project="project" />
-							</template>
-						</ProjectCard>
-					</ProjectCardList>
+			<div class="flex flex-col gap-3">
+				<ProjectList
+					v-if="selectedProjectType !== 'collection' && filteredProjects.length > 0"
+					:projects="filteredProjects"
+					:layout="displayMode"
+					:link-mode="projectLinkMode"
+					show-status
+				>
+					<template v-if="$slots['project-actions']" #actions="{ project }">
+						<slot name="project-actions" :project="project" />
+					</template>
+				</ProjectList>
 
-					<EmptyState
-						v-if="showProjectsEmptyState"
-						type="empty"
-						:heading="formatMessage(messages.profileNoProjectsLabel)"
-						:description="
-							isSelf ? formatMessage(messages.profileNoProjectsAuthDescription) : undefined
-						"
+				<EmptyState
+					v-if="showProjectsEmptyState"
+					type="empty"
+					:heading="formatMessage(messages.profileNoProjectsLabel)"
+					:description="
+						isSelf ? formatMessage(messages.profileNoProjectsAuthDescription) : undefined
+					"
+				>
+					<template v-if="isSelf" #actions>
+						<Button type="colored" color="brand" native-type="button" @click="createProject">
+							{{ formatMessage(messages.createProjectButton) }}
+						</Button>
+					</template>
+				</EmptyState>
+
+				<ProjectCardList
+					v-if="selectedProjectType === null || selectedProjectType === 'collection'"
+					layout="grid"
+				>
+					<SmartClickable
+						v-for="collection in sortedCollections"
+						:key="collection.id"
+						class="h-full w-full"
 					>
-						<template v-if="isSelf" #actions>
-							<Button type="colored" color="brand" native-type="button" @click="createProject">
-								{{ formatMessage(messages.createProjectButton) }}
-							</Button>
+						<template #clickable>
+							<AutoLink
+								:to="collectionLink(collection.id)"
+								class="no-click-animation custom-focus-indicator rounded-xl no-outline"
+							/>
 						</template>
-					</EmptyState>
-
-					<ProjectCardList
-						v-if="selectedProjectType === null || selectedProjectType === 'collection'"
-						layout="grid"
-					>
-						<SmartClickable
-							v-for="collection in sortedCollections"
-							:key="collection.id"
-							class="h-full w-full"
+						<div
+							class="smart-clickable:outline-on-focus smart-clickable:highlight-on-hover flex h-full w-full flex-col gap-4 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-4 bg-surface-3 p-4 text-left transition-all"
 						>
-							<template #clickable>
-								<AutoLink
-									:to="collectionLink(collection.id)"
-									class="no-click-animation custom-focus-indicator rounded-xl no-outline"
-								/>
-							</template>
-							<div
-								class="smart-clickable:outline-on-focus smart-clickable:highlight-on-hover flex h-full w-full flex-col gap-4 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-4 bg-surface-3 p-4 text-left transition-all"
-							>
-								<div class="grid grid-cols-[auto_1fr] gap-4">
-									<Avatar :src="collection.icon_url" size="64px" no-shadow />
-									<div class="flex min-w-0 flex-col gap-2">
-										<h2
-											class="smart-clickable:underline-on-hover m-0 truncate text-lg font-semibold text-contrast"
-										>
-											{{ collection.name }}
-										</h2>
-										<div class="flex items-center gap-1">
-											<LibraryIcon aria-hidden="true" />
-											{{ formatMessage(messages.collectionLabel) }}
-										</div>
-									</div>
-								</div>
-								<div class="grow text-primary">
-									{{ collection.description }}
-								</div>
-								<div class="mt-auto flex flex-wrap items-center gap-4">
+							<div class="grid grid-cols-[auto_1fr] gap-4">
+								<Avatar :src="collection.icon_url" size="64px" no-shadow />
+								<div class="flex min-w-0 flex-col gap-2">
+									<h2
+										class="smart-clickable:underline-on-hover m-0 truncate text-lg font-semibold text-contrast"
+									>
+										{{ collection.name }}
+									</h2>
 									<div class="flex items-center gap-1">
-										<BoxIcon />
-										{{
-											formatMessage(messages.collectionProjectsCount, {
-												count: collection.projects.length,
-											})
-										}}
-									</div>
-									<div class="flex items-center gap-1">
-										<template v-if="collection.status === 'listed'">
-											<GlobeIcon />
-											{{ formatMessage(commonMessages.publicLabel) }}
-										</template>
-										<template v-else-if="collection.status === 'unlisted'">
-											<LinkIcon />
-											{{ formatMessage(commonMessages.unlistedLabel) }}
-										</template>
-										<template v-else-if="collection.status === 'private'">
-											<LockIcon />
-											{{ formatMessage(commonMessages.privateLabel) }}
-										</template>
-										<template v-else-if="collection.status === 'rejected'">
-											<XIcon />
-											{{ formatMessage(commonMessages.rejectedLabel) }}
-										</template>
+										<LibraryIcon aria-hidden="true" />
+										{{ formatMessage(messages.collectionLabel) }}
 									</div>
 								</div>
 							</div>
-						</SmartClickable>
-					</ProjectCardList>
+							<div class="grow text-primary">
+								{{ collection.description }}
+							</div>
+							<div class="mt-auto flex flex-wrap items-center gap-4">
+								<div class="flex items-center gap-1">
+									<BoxIcon />
+									{{
+										formatMessage(messages.collectionProjectsCount, {
+											count: collection.projects.length,
+										})
+									}}
+								</div>
+								<div class="flex items-center gap-1">
+									<template v-if="collection.status === 'listed'">
+										<GlobeIcon />
+										{{ formatMessage(commonMessages.publicLabel) }}
+									</template>
+									<template v-else-if="collection.status === 'unlisted'">
+										<LinkIcon />
+										{{ formatMessage(commonMessages.unlistedLabel) }}
+									</template>
+									<template v-else-if="collection.status === 'private'">
+										<LockIcon />
+										{{ formatMessage(commonMessages.privateLabel) }}
+									</template>
+									<template v-else-if="collection.status === 'rejected'">
+										<XIcon />
+										{{ formatMessage(commonMessages.rejectedLabel) }}
+									</template>
+								</div>
+							</div>
+						</div>
+					</SmartClickable>
+				</ProjectCardList>
 
-					<EmptyState
-						v-if="showCollectionsEmptyState"
-						type="empty"
-						:heading="formatMessage(messages.profileNoCollectionsLabel)"
-						:description="
-							isSelf ? formatMessage(messages.profileNoCollectionsAuthDescription) : undefined
-						"
-					>
-						<template v-if="isSelf" #actions>
-							<Button type="colored" color="brand" native-type="button" @click="createCollection">
-								{{ formatMessage(messages.createCollectionButton) }}
-							</Button>
-						</template>
-					</EmptyState>
-				</div>
+				<EmptyState
+					v-if="showCollectionsEmptyState"
+					type="empty"
+					:heading="formatMessage(messages.profileNoCollectionsLabel)"
+					:description="
+						isSelf ? formatMessage(messages.profileNoCollectionsAuthDescription) : undefined
+					"
+				>
+					<template v-if="isSelf" #actions>
+						<Button type="colored" color="brand" native-type="button" @click="createCollection">
+							{{ formatMessage(messages.createCollectionButton) }}
+						</Button>
+					</template>
+				</EmptyState>
 			</div>
 
 			<template #sidebar>
@@ -430,6 +403,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	getPrimaryProjectType,
 	isModrinthUser as checkIsModrinthUser,
 	isOfficialAccount as checkIsOfficialAccount,
 	UserBadge,
@@ -448,8 +422,8 @@ import NavTabs from '#ui/components/base/NavTabs.vue'
 import SmartClickable from '#ui/components/base/SmartClickable.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import NormalPage from '#ui/components/page/NormalPage.vue'
-import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
+import ProjectList from '#ui/components/project/ProjectList.vue'
 import UserBadges from '#ui/components/user/UserBadges.vue'
 import UserPageHeader from '#ui/components/user/UserPageHeader.vue'
 import { defineMessages, useVIntl } from '#ui/composables'
@@ -458,27 +432,25 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectPageContext,
-	injectTags,
 } from '#ui/providers'
-import { commonMessages, getProjectTypeTitleMessage, sortProjectTypes } from '#ui/utils'
+import {
+	catalogProjectTypes,
+	commonMessages,
+	filterProjectsByType,
+	getProjectTypeTitleMessage,
+	parseProjectTypeRouteParam,
+	sortProjectTypes,
+} from '#ui/utils'
 
 import EditUserModal from './components/edit-user-modal.vue'
 import { blockedUsersQueryKey, injectUserProfile } from './providers'
-import {
-	hasActivePride26Midas,
-	hasPride26Badge,
-	projectUserSorting,
-	resolveProjectType,
-} from './utils'
+import { hasActivePride26Midas, hasPride26Badge, projectUserSorting } from './utils'
 
 type DisplayMode = 'list' | 'grid' | 'gallery'
 type ModalRef = {
 	show: () => void
 	hide: () => void
 }
-type ResolvedProject = Labrinth.Projects.v2.Project & {
-	resolvedProjectType: string
-}
 type EarlyAdopterProjectType =
 	| 'modpack'
 	| 'resourcepack'
@@ -517,7 +489,6 @@ const props = withDefaults(
 
 const userProfile = injectUserProfile()
 const auth = injectAuth()
-const tags = injectTags(null)
 const pageContext = injectPageContext()
 const notificationManager = injectNotificationManager()
 const client = injectModrinthClient()
@@ -696,28 +667,33 @@ const messages = defineMessages({
 	},
 })
 
+const canLoadProfile = computed(() => props.userId.length > 0)
 const userQuery = useQuery({
 	queryKey: computed(() => ['user', props.userId]),
 	queryFn: () => userProfile.getUser(props.userId),
-	enabled: computed(() => Boolean(props.userId)),
+	enabled: canLoadProfile,
+	placeholderData: (previousData) => previousData,
 	staleTime: 30_000,
 })
 const projectsQuery = useQuery({
 	queryKey: computed(() => ['user', props.userId, 'projects']),
 	queryFn: () => userProfile.getProjects(props.userId),
-	enabled: computed(() => Boolean(props.userId)),
+	enabled: canLoadProfile,
+	placeholderData: (previousData) => previousData,
 	staleTime: 30_000,
 })
 const organizationsQuery = useQuery({
 	queryKey: computed(() => ['user', props.userId, 'organizations']),
 	queryFn: () => userProfile.getOrganizations(props.userId),
-	enabled: computed(() => Boolean(props.userId)),
+	enabled: canLoadProfile,
+	placeholderData: (previousData) => previousData,
 	staleTime: 30_000,
 })
 const collectionsQuery = useQuery({
 	queryKey: computed(() => ['user', props.userId, 'collections']),
 	queryFn: () => userProfile.getCollections(props.userId),
-	enabled: computed(() => Boolean(props.userId)),
+	enabled: canLoadProfile,
+	placeholderData: (previousData) => previousData,
 	staleTime: 30_000,
 })
 const blockedUsersQuery = useQuery({
@@ -728,12 +704,7 @@ const blockedUsersQuery = useQuery({
 })
 
 const user = computed(() => userQuery.data.value)
-const projects = computed<ResolvedProject[]>(() =>
-	(projectsQuery.data.value ?? []).map((project) => ({
-		...project,
-		resolvedProjectType: resolveProjectType(project, tags?.loaders.value ?? []),
-	})),
-)
+const projects = computed(() => projectsQuery.data.value ?? [])
 watch(
 	() => projectsQuery.data.value,
 	(projects) => {
@@ -755,20 +726,11 @@ const isBlocked = computed(() =>
 	user.value ? (blockedUsersQuery.data.value ?? []).includes(user.value.id) : false,
 )
 
-const selectedProjectType = computed(() => {
-	const projectType = props.projectType
-	if (!projectType) return null
-	if (projectType === 'collections' || projectType === 'collection') return 'collection'
-	return projectType.endsWith('s') ? projectType.slice(0, -1) : projectType
-})
+const selectedProjectType = computed(() => parseProjectTypeRouteParam(props.projectType))
 
-const filteredProjects = computed(() => {
-	const selected = selectedProjectType.value
-	return projects.value
-		.filter((project) => !selected || project.resolvedProjectType === selected)
-		.slice()
-		.sort(projectUserSorting)
-})
+const filteredProjects = computed(() =>
+	filterProjectsByType(projects.value, selectedProjectType.value).slice().sort(projectUserSorting),
+)
 
 const sortedOrganizations = computed(() =>
 	organizations.value.slice().sort((first, second) => first.name.localeCompare(second.name)),
@@ -782,9 +744,8 @@ const sortedCollections = computed(() =>
 )
 
 const projectTypes = computed(() => {
-	const types = new Set(projects.value.map((project) => project.resolvedProjectType))
-	if (collections.value.length > 0) types.add('collection')
-	types.delete('project')
+	const types = catalogProjectTypes(projects.value)
+	if (collections.value.length > 0) types.push('collection')
 	return sortProjectTypes(types)
 })
 
@@ -819,7 +780,7 @@ const profileHeaderSummary = computed(() => {
 const earliestProjectByType = computed(() => {
 	const earliest = {} as Record<EarlyAdopterProjectType, Date>
 	for (const project of projects.value) {
-		const projectType = project.resolvedProjectType as EarlyAdopterProjectType
+		const projectType = getPrimaryProjectType(project) as EarlyAdopterProjectType
 		const published = new Date(project.published)
 		if (!earliest[projectType] || published < earliest[projectType]) {
 			earliest[projectType] = published
@@ -881,13 +842,6 @@ function openPath(path: string): void {
 	}
 }
 
-function projectLink(project: ResolvedProject): string | (() => void) {
-	if (props.projectLinkMode === 'app') {
-		return `/project/${project.id}`
-	}
-	return `/${project.resolvedProjectType}/${project.slug || project.id}`
-}
-
 function organizationLink(slug: string): string | (() => void) {
 	return linkTarget(`/organization/${encodeURIComponent(slug)}`)
 }
diff --git a/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts b/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts
index 58270661bd..cb65bbc559 100644
--- a/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts
+++ b/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts
@@ -4,7 +4,7 @@ import { createContext } from '#ui/providers/create-context'
 
 export interface UserProfileContext {
 	getUser: (userId: string) => Promise<Labrinth.Users.v3.User>
-	getProjects: (userId: string) => Promise<Labrinth.Projects.v2.Project[]>
+	getProjects: (userId: string) => Promise<Labrinth.Projects.v3.Project[]>
 	getOrganizations: (userId: string) => Promise<Labrinth.Organizations.v3.Organization[]>
 	getCollections: (userId: string) => Promise<Labrinth.Collections.Collection[]>
 	patchUser: (
diff --git a/packages/ui/src/layouts/shared/user-profile/utils.ts b/packages/ui/src/layouts/shared/user-profile/utils.ts
index ebf8fa3d0c..9adc086645 100644
--- a/packages/ui/src/layouts/shared/user-profile/utils.ts
+++ b/packages/ui/src/layouts/shared/user-profile/utils.ts
@@ -17,7 +17,7 @@ const projectStatusPriority: Record<Labrinth.Projects.v2.ProjectStatus, ProjectS
 }
 
 function getProjectSortValue(
-	project: Labrinth.Projects.v2.Project,
+	project: Labrinth.Projects.v3.Project,
 	sorting: ProjectSorting,
 ): number {
 	switch (sorting) {
@@ -31,8 +31,8 @@ function getProjectSortValue(
 }
 
 export function projectUserSorting(
-	first: Labrinth.Projects.v2.Project,
-	second: Labrinth.Projects.v2.Project,
+	first: Labrinth.Projects.v3.Project,
+	second: Labrinth.Projects.v3.Project,
 ): number {
 	const firstPriority = projectStatusPriority[first.status] ?? projectStatusPriority.unknown
 	const secondPriority = projectStatusPriority[second.status] ?? projectStatusPriority.unknown
@@ -50,25 +50,6 @@ export function projectUserSorting(
 	)
 }
 
-export function resolveProjectType(
-	project: Labrinth.Projects.v2.Project,
-	loaders: Labrinth.Tags.v2.Loader[],
-): string {
-	if (project.project_type !== 'mod') {
-		return project.project_type
-	}
-
-	const projectLoaders = new Set(project.loaders)
-	const supportsType = (type: string) =>
-		loaders.some(
-			(loader) => projectLoaders.has(loader.name) && loader.supported_project_types.includes(type),
-		)
-
-	if (supportsType('datapack')) return 'datapack'
-	if (supportsType('plugin')) return 'plugin'
-	return 'mod'
-}
-
 const PRIDE_26_MIDAS_DURATION_MS = 30 * 24 * 60 * 60 * 1000
 
 export function hasPride26Badge(user?: Labrinth.Users.v3.User | null): boolean {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index c8a7f696f0..094b8515b1 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -228,13 +228,15 @@
 			<ServerOnboardingPanelPage v-if="isOnboarding" :browse-modpacks="handleBrowseModpacks" />
 
 			<template v-else>
-				<div
-					data-pyro-navigation
-					class="server-stagger-item isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
-					:class="containedLayout ? 'shrink-0' : ''"
-					:style="{ '--si': 1 }"
-				>
-					<NavTabs :links="navLinks" replace />
+				<div class="server-stagger-item -mb-3">
+					<NavTabs
+						:links="navLinks"
+						replace
+						page-nav
+						data-pyro-navigation
+						:class="containedLayout ? 'shrink-0' : ''"
+						:style="{ '--si': 1 }"
+					/>
 				</div>
 
 				<div
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 8b1514f871..0b22cb173f 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -828,6 +828,7 @@ export const financialMessages = defineMessages({
 
 const PROJECT_TYPE_ALIASES: Record<string, string> = {
 	shaderpack: 'shader',
+	minecraft_java_server: 'server',
 }
 
 export function normalizeProjectType(type: string): string {
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index f0af1df26d..a97545fd2a 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -15,6 +15,7 @@ export * from './server-search'
 export * from './tag-messages'
 export * from './truncate'
 export * from './use-anchored-teleport'
+export * from './v3-projects'
 export * from './version-compatibility'
 export * from './vue-children'
 export * from './webgl/skin-rendering'
diff --git a/packages/ui/src/utils/v3-projects.ts b/packages/ui/src/utils/v3-projects.ts
new file mode 100644
index 0000000000..26ff61e3e5
--- /dev/null
+++ b/packages/ui/src/utils/v3-projects.ts
@@ -0,0 +1,98 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { getPrimaryProjectType } from '@modrinth/utils'
+
+import { normalizeProjectType } from './common-messages'
+import { sortProjectTypes } from './project-types'
+
+export type ProjectLinkMode = 'website' | 'app'
+
+export type ServerModpackContent = {
+	name: string
+	icon?: string
+	onclick?: () => void
+	showCustomModpackTooltip?: boolean
+}
+
+export function isProjectServer(project: Labrinth.Projects.v3.Project): boolean {
+	return project.minecraft_server != null
+}
+
+export function getProjectCardTags(project: Labrinth.Projects.v3.Project): string[] {
+	if (isProjectServer(project)) {
+		return project.categories
+	}
+	return [...project.categories, ...project.loaders, ...(project.mrpack_loaders ?? [])]
+}
+
+export function getProjectCardAllTags(project: Labrinth.Projects.v3.Project): string[] {
+	return [...getProjectCardTags(project), ...project.additional_categories]
+}
+
+export function getProjectPagePath(
+	project: Labrinth.Projects.v3.Project,
+	linkMode: ProjectLinkMode = 'website',
+): string {
+	if (linkMode === 'app') {
+		return `/project/${project.id}`
+	}
+	if (isProjectServer(project)) {
+		return `/server/${project.slug || project.id}`
+	}
+	return `/${getPrimaryProjectType(project)}/${project.slug || project.id}`
+}
+
+export function getServerModpackContent(
+	project: Labrinth.Projects.v3.Project,
+	onNavigate?: (projectId: string) => void,
+): ServerModpackContent | undefined {
+	const content = project.minecraft_java_server?.content
+	if (content?.kind !== 'modpack') {
+		return undefined
+	}
+
+	const { project_name, project_icon, project_id } = content
+	if (!project_name) {
+		return undefined
+	}
+
+	return {
+		name: project_name,
+		icon: project_icon,
+		onclick:
+			project_id && project_id !== project.id && onNavigate
+				? () => onNavigate(project_id)
+				: undefined,
+		showCustomModpackTooltip: project_id === project.id,
+	}
+}
+
+export function catalogProjectTypes(projects: Labrinth.Projects.v3.Project[]): string[] {
+	const types = new Set(projects.map((project) => getPrimaryProjectType(project)))
+	types.delete('project')
+	return sortProjectTypes(types)
+}
+
+export function parseProjectTypeRouteParam(param: unknown): string | null {
+	if (param == null) {
+		return null
+	}
+	const type = Array.isArray(param) ? param[0] : param
+	if (typeof type !== 'string' || type.length === 0) {
+		return null
+	}
+	if (type === 'collection' || type === 'collections') {
+		return 'collection'
+	}
+	const singular = type.endsWith('s') ? type.slice(0, -1) : type
+	return normalizeProjectType(singular)
+}
+
+export function filterProjectsByType(
+	projects: Labrinth.Projects.v3.Project[],
+	projectType: string | null,
+): Labrinth.Projects.v3.Project[] {
+	if (!projectType) {
+		return projects
+	}
+	return projects.filter((project) => getPrimaryProjectType(project) === projectType)
+}