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