From bdc204eebdd68c0f9fa62d6f44800e8b04776f5c Mon Sep 17 00:00:00 2001
From: Truman Gao <106889354+tdgao@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:26:14 -0700
Subject: [PATCH] fix: misc server projects fixes (#5537)

* fix: add server to instance modal opens slow

* fix: creators section org doesnt display for project pages in app

* feat: separate modpacks and servers tabs in instances library
---
 .../install_flow/AddServerToInstanceModal.vue | 24 ++++++----
 .../app-frontend/src/pages/library/Custom.vue |  2 +-
 .../src/pages/library/Downloaded.vue          |  2 +-
 apps/app-frontend/src/pages/library/Index.vue |  5 +-
 .../src/pages/library/Modpacks.vue            | 47 +++++++++++++++++++
 .../src/pages/library/Overview.vue            |  2 +-
 .../src/pages/library/Servers.vue             | 47 +++++++++++++++++++
 apps/app-frontend/src/pages/library/index.js  |  4 +-
 apps/app-frontend/src/pages/project/Index.vue |  8 +++-
 apps/app-frontend/src/routes.js               | 10 ++++
 10 files changed, 134 insertions(+), 17 deletions(-)
 create mode 100644 apps/app-frontend/src/pages/library/Modpacks.vue
 create mode 100644 apps/app-frontend/src/pages/library/Servers.vue

diff --git a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
index 29b4d905c..8b78062e5 100644
--- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
@@ -37,17 +37,21 @@ defineExpose({
 		searchFilter.value = ''
 
 		const profilesVal = await list().catch(handleError)
-		for (const profile of profilesVal) {
-			profile.adding = false
-			profile.added = false
+		await Promise.allSettled(
+			profilesVal.map(async (profile) => {
+				profile.adding = false
+				profile.added = false
 
-			try {
-				const worlds = await get_profile_worlds(profile.path)
-				profile.added = worlds.some((w) => w.type === 'server' && w.address === serverAddress.value)
-			} catch {
-				// Ignore - will show as not added
-			}
-		}
+				try {
+					const worlds = await get_profile_worlds(profile.path)
+					profile.added = worlds.some(
+						(w) => w.type === 'server' && w.address === serverAddress.value,
+					)
+				} catch {
+					// Ignore - will show as not added
+				}
+			}),
+		)
 
 		profiles.value = profilesVal
 		modal.value.show()
diff --git a/apps/app-frontend/src/pages/library/Custom.vue b/apps/app-frontend/src/pages/library/Custom.vue
index 809ecb957..b0e6dd435 100644
--- a/apps/app-frontend/src/pages/library/Custom.vue
+++ b/apps/app-frontend/src/pages/library/Custom.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import GridDisplay from '@/components/GridDisplay.vue'
 
 defineProps({
diff --git a/apps/app-frontend/src/pages/library/Downloaded.vue b/apps/app-frontend/src/pages/library/Downloaded.vue
index 569e916cf..98bd030d1 100644
--- a/apps/app-frontend/src/pages/library/Downloaded.vue
+++ b/apps/app-frontend/src/pages/library/Downloaded.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import GridDisplay from '@/components/GridDisplay.vue'
 
 defineProps({
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index 9694143aa..46f039827 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { PlusIcon } from '@modrinth/assets'
 import { Button, injectNotificationManager } from '@modrinth/ui'
 import { inject, onUnmounted, ref, shallowRef } from 'vue'
@@ -41,7 +41,8 @@ onUnmounted(() => {
 		<NavTabs
 			:links="[
 				{ label: 'All instances', href: `/library` },
-				{ label: 'Downloaded', href: `/library/downloaded` },
+				{ label: 'Modpacks', href: `/library/modpacks` },
+				{ label: 'Servers', href: `/library/servers` },
 				{ label: 'Custom', href: `/library/custom` },
 				{ label: 'Shared with me', href: `/library/shared`, shown: false },
 				{ label: 'Saved', href: `/library/saved`, shown: false },
diff --git a/apps/app-frontend/src/pages/library/Modpacks.vue b/apps/app-frontend/src/pages/library/Modpacks.vue
new file mode 100644
index 000000000..245592dd4
--- /dev/null
+++ b/apps/app-frontend/src/pages/library/Modpacks.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+
+import GridDisplay from '@/components/GridDisplay.vue'
+import { get_project_v3_many } from '@/helpers/cache.js'
+
+const props = defineProps({
+	instances: {
+		type: Array,
+		required: true,
+	},
+})
+
+const serverProjectIds = ref(new Set())
+
+const linkedInstances = computed(() => props.instances.filter((i) => i.linked_data))
+
+watchEffect(async () => {
+	const projectIds = [
+		...new Set(linkedInstances.value.map((i) => i.linked_data?.project_id).filter(Boolean)),
+	]
+	if (projectIds.length === 0) {
+		serverProjectIds.value = new Set()
+		return
+	}
+
+	try {
+		const projects = await get_project_v3_many(projectIds, 'must_revalidate')
+		serverProjectIds.value = new Set(
+			projects.filter((p) => p?.minecraft_server != null).map((p) => p.id),
+		)
+	} catch {
+		serverProjectIds.value = new Set()
+	}
+})
+
+const filteredInstances = computed(() =>
+	linkedInstances.value.filter((i) => !serverProjectIds.value.has(i.linked_data?.project_id)),
+)
+</script>
+<template>
+	<GridDisplay
+		v-if="filteredInstances && filteredInstances.length > 0"
+		label="Instances"
+		:instances="filteredInstances"
+	/>
+</template>
diff --git a/apps/app-frontend/src/pages/library/Overview.vue b/apps/app-frontend/src/pages/library/Overview.vue
index 46bd813a5..16d56b6b7 100644
--- a/apps/app-frontend/src/pages/library/Overview.vue
+++ b/apps/app-frontend/src/pages/library/Overview.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import GridDisplay from '@/components/GridDisplay.vue'
 
 defineProps({
diff --git a/apps/app-frontend/src/pages/library/Servers.vue b/apps/app-frontend/src/pages/library/Servers.vue
new file mode 100644
index 000000000..092166be6
--- /dev/null
+++ b/apps/app-frontend/src/pages/library/Servers.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+
+import GridDisplay from '@/components/GridDisplay.vue'
+import { get_project_v3_many } from '@/helpers/cache.js'
+
+const props = defineProps({
+	instances: {
+		type: Array,
+		required: true,
+	},
+})
+
+const serverProjectIds = ref(new Set())
+
+const linkedInstances = computed(() => props.instances.filter((i) => i.linked_data))
+
+watchEffect(async () => {
+	const projectIds = [
+		...new Set(linkedInstances.value.map((i) => i.linked_data?.project_id).filter(Boolean)),
+	]
+	if (projectIds.length === 0) {
+		serverProjectIds.value = new Set()
+		return
+	}
+
+	try {
+		const projects = await get_project_v3_many(projectIds, 'must_revalidate')
+		serverProjectIds.value = new Set(
+			projects.filter((p) => p?.minecraft_server != null).map((p) => p.id),
+		)
+	} catch {
+		serverProjectIds.value = new Set()
+	}
+})
+
+const filteredInstances = computed(() =>
+	linkedInstances.value.filter((i) => serverProjectIds.value.has(i.linked_data?.project_id)),
+)
+</script>
+<template>
+	<GridDisplay
+		v-if="filteredInstances && filteredInstances.length > 0"
+		label="Instances"
+		:instances="filteredInstances"
+	/>
+</template>
diff --git a/apps/app-frontend/src/pages/library/index.js b/apps/app-frontend/src/pages/library/index.js
index ac8094e7c..561ac7e19 100644
--- a/apps/app-frontend/src/pages/library/index.js
+++ b/apps/app-frontend/src/pages/library/index.js
@@ -1,6 +1,8 @@
 import Custom from './Custom.vue'
 import Downloaded from './Downloaded.vue'
 import Index from './Index.vue'
+import Modpacks from './Modpacks.vue'
 import Overview from './Overview.vue'
+import Servers from './Servers.vue'
 
-export { Custom, Downloaded, Index, Overview }
+export { Custom, Downloaded, Index, Modpacks, Overview, Servers }
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 602155a9d..60548fd66 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -28,7 +28,7 @@
 			/>
 			<ProjectSidebarTags :project="data" class="project-sidebar-section" />
 			<ProjectSidebarCreators
-				:organization="null"
+				:organization="organization"
 				:members="members"
 				:org-link="(slug) => `https://modrinth.com/organization/${slug}`"
 				:user-link="(username) => `https://modrinth.com/user/${username}`"
@@ -244,6 +244,7 @@ import ContextMenu from '@/components/ui/ContextMenu.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
 import {
+	get_organization,
 	get_project,
 	get_project_v3,
 	get_team,
@@ -282,6 +283,7 @@ const data = shallowRef(null)
 const versions = shallowRef([])
 const members = shallowRef([])
 const categories = shallowRef([])
+const organization = shallowRef(null)
 const instance = ref(null)
 const instanceProjects = ref(null)
 
@@ -387,6 +389,10 @@ async function fetchProjectData() {
 		}
 	}
 
+	if (project.organization) {
+		organization.value = await get_organization(project.organization).catch(handleError)
+	}
+
 	isServerProject.value = projectV3.value?.minecraft_server != null
 	serverStatusOnline.value = !!projectV3.value?.minecraft_java_server?.ping?.data
 
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index d518a38a7..0c7b641e5 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -70,6 +70,16 @@ export default new createRouter({
 					name: 'Downloaded',
 					component: Library.Downloaded,
 				},
+				{
+					path: 'modpacks',
+					name: 'Modpacks',
+					component: Library.Modpacks,
+				},
+				{
+					path: 'servers',
+					name: 'LibraryServers',
+					component: Library.Servers,
+				},
 				{
 					path: 'custom',
 					name: 'Custom',