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

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()

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({

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({

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 },

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>

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({

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>

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 }

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
 

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',