feat: linked server instances (#5221)

* ping queue with tests

* mc ping server info + timeout

* sqlx prepare

* tombi fmt

* tombi fmt

* allow querying server ping data

* fix shear

* wip: resolve comments with pings

* Switch to Redis for server pings

* tombi fmt

* fix compile error

* clear cache on project ping, add server store link

* Schema changes

* Improve server messages for app pinging

* synthetic server project version for search indexing

* wip: clean up server ping, background tasks

* fix migration to sync with main, propagate background task errors

* wip: server modpack content query, components in search

* wip: massive component query refactor

* fix more defaults stuff

* sqlx

* fix serde deser flatten

* fix search indexing not showing fields

* remove leftover prompt

* fix import

* add diff detection for version dependencies without version_id/project_id

* move servers tab to end

* hide app nav tabs if only one tab

* fix undefined property

* on click link for server side bar info

* show recommended & supported versions for vanilla

* fix how install.js installs instance with modpack content title instead of server project title and dont fetch icon when installing to existing instance

* use large play button instance

* show update success instead of launching right into the game

* add global installing server project state

* add comment

* small change: open discover to modpack

* implement ping server projects for latency in app

* add projectV3 to nag context for moderation package

* fix play server project button when instance is launched

* add ping to project header

* wip: server verified plays

* server verified plays compiling

* queue up server plays in batches

* report server plays improved in frontend

* fixes to tracking server joins

* fix: server project detection to do loose null check

* fix server projects showing license

* fix empty server info card

* fix server projects links title

* Fix backend impl for server player count analytics

* fix: allow for links to be set to empty

* hook up server recent plays

* cargo sqlx prepare

* add project sidebar stories

* feat: update project sidebar server info card to new design

* update server project header and project card

* feat: add hide label for project cards

* feat: add tags sidebar card

* small fix to keep color consistent

* fix: remove required content tab from server project page

* many small fixes

* handle locking server instance content

* fix hiding modal after saving server compatibility version

* copy content card item and table from content tab update branch

* fix nav tabs active tag

* fix switching between server instance vs regular instance persisted invalid state

* fix a lot of the bugginess of navtabs when theres hidden/shown tabs between instances. match frontend nav tabs

* hook up backend searchfor frontend in websiet

* fix: server project card tags

* hook up search v3 in app backend for app frontend

* Don't return missing components in project query

* Add game versions to server filters

* move reporting server joins to backend

* send account UUID along with server play analytics

* update java server ping schema

* feat: implement use server search for search sorting and filter facets

* pnpm prepr

* fix game version filter facet

* fix: allow java and bedrock addresses to be deleted

* feat: hook up languages

* Default deserialize `ProjectSerial`

* feat: show server project tags

* small fix on languages multi select

* also default java server content

* fix: update compatibility modal not closing after successful upload

* remove play button in website discovery for servers

* reenable fence in app backend

* update online/offline tag

* add online status indicator pulsing

* revert pulsing

* disable link for custom modpack project and show tooltip

* change modpack to modded type

* update ip address entire button to be clickable

* polish server info card styles

* make offline tag red and properly hook up online tag

* move server related settings into own tab

* fix setting project compatibility resets unsaved changes

* fix javaServerPatchaData wiping content field

* updates to compatibility card, add download button and display supported versions better

* fix unsaved changes popup for tags

* remove console.log

* fix incorrect project type in projects in dashboard

* fix: savable.ts to reset currentValues to data() after save

* upload server banner as gallery image with title == "__mc_server_banner__" and filter it from frontend gallery

* fix error handling and helper text copy

* ensure gallery banners are filtered in app backend gallery display

* add grouped filters for search

* add query params for server search

* feat: deep linking to open server project page then open install to play

* fix search in app frontend

* fix: server project showing offline

* fix: profile create error app backend

Here's what was happening and the fix:

Root cause: In create.rs:107, profile_create assumed the icon_path parameter was always a local filename relative to the caches directory. It did caches_dir().join(icon) which produced a path like ...\caches\https://staging-cdn.modrinth.com/... — the colons in https:// are illegal in Windows paths (OS error 123).

The frontend's installServerProject and createVanillaInstance in install.js:290 both pass project.icon_url (a full URL) directly as the icon parameter.

Fix: Modified profile_create to detect when the icon parameter is a URL (starts with http:// or https://). When it is, it downloads the icon via fetch(), extracts the filename from the URL path, and passes the downloaded bytes and filename to set_icon() which hashes and caches it properly. The existing local-file path continues to work as before.

* pass undefined instead of unknown for modpack content modal

* fix: wrong way to determine offline status

* delete required content page placeholder

* fix: redirect running function instead of passing function

* add in wiki page

* fix diffs which have unknown project/filename

* pnpm prepr

* feat: add handling for "stop" instance state for server project card and page play button

* fix updating modpack shouldn't launch right into game

* small fix on external icon

* fix refresh search causing infinite rerender i.e. maximum call stack size exceeded

watch(route) → watch(() => [route.query.i, route.query.ai, route.path]) (line 102): The deep watch on the entire Vue Router route object was the most likely cause of the stack overflow. Vue Router's route object contains matched records with component definitions and other deeply nested structures. Deep-watching it triggers recursive traversal on every route change (including those from router.replace() inside refreshSearch()). Now it only watches the specific properties that updateInstanceContext() actually needs.

ref → shallowRef for serverHits and serverPings (line 189-190): The v3 search results can be deeply nested objects (minecraft_java_server.ping.data, content, etc.). Using shallowRef prevents Vue from creating deep reactive proxies on these objects, which is consistent with how results already uses shallowRef on line 295.

Re-entrance guard + try/catch on refreshSearch() (line 310): The watcher calls refreshSearch() without awaiting, so state changes during the async execution could trigger the watcher again, causing concurrent calls. The guard prevents overlapping calls, and the try/catch ensures loading.value = false is always reached (fixing the infinite loading).

* don't require auth token for logging server play

* fetch latest server player count from redis instead of search doc

* remove components. in search facet

* Category and search sort fixes

* add logging for refreshSearch in browse.vue

* fix: use windows.history.replace instead of router.replace due to vue production bug and remove logs

* fix: server refresh search reactivity

* fix: type errors

* conquer the type errors in Browse.vue

* update search input background

* fix tags location

* slight change to color

* feat: add linked to modpack project for regular modpack instances

* feat: installation tab updates

* fix: copy ip missing hover effect

* feat: implement category and countries negative filters

* fix servers tab label in profile page

* implement add server to instance

* feat: implement allow editing server instances

* update installation settings to handle vanilla server instance case

* hide servers tab when installing content to instance

* add sorting for user installed content to be top of list in content

* update categories filters from one group filter card to separate filters cards

* add active scale

* fix offline server showing online

* update language display

* update tooltip

* hide navtabs if theres only one tab

* fix: modpack content name truncate in project card

* feat: add server projects to moderation queue

* update redirect middleware no longer needs projectV3

* update comment

* fix: server tags labels

* feat: add the mf icons finally

* Revert "update redirect middleware no longer needs projectV3"

This reverts commit 1289cb52869185abe1481dfb6b0c00c0233bf59e.

* fix open in browser

* revert any handling for handling base linked modpack content for content tab

* update instance online players to be client ping

* fix showing modpack/loader version for server instance in installation settings

* server projects are not marked as modpacks

* skip license check for server projects

* feat: add the concept of linked worlds for server instances and keep in sync with server project

* fix: router.push doesn't add history state, use nagivateTo instead

* fix: get server modpack content wrong link

* update some categories to default collapse

* small fixes

* optional languages & bedrock

* move creator below tags

* sort linked worlds to be first

* add red orange and green ping variants

* bring back content tab

* add download button in required content in app

* fix: server info card loading

* fix: brief flash of normal project before server project stuff loads in

* misc fixes

* invalidate project v3

* fix unused imports

* Quick pass for moderation related changes (#5429)

* filter certain nags out from server projects.

* move add-links nag to links.ts

* first few server related nags

* moderation checklist groundwork

* Prevent undefined stage from appearing on servers.

* add projectV3 to shouldShow callback

* Filter buttons by server project type

* fix, revert private use msg, adjust server & link nags

* starting tags + servers msg

* fix no projectV3

* fix: router.push doesn't add history state, use nagivateTo instead

* Tags nag works with servers now

* support servers' v3 exclusive links

* reupload, and status messages + nag tweaks.

* fixes

* Update tags.vue warning for server projects.

* don't suggest adding a bedrock IP

* Tweak phrasing on servers alert msg

---------

Signed-off-by: Truman Gao <106889354+tdgao@users.noreply.github.com>
Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Truman Gao <106889354+tdgao@users.noreply.github.com>

* only show unique tags in project card

* add projectV3 to cache purge

* fix type: add projectV3 to cache purge

* update caching behaviour for installing

* max 3 plays per user

* accept date_modified and date_created for sorting

* add locking environment filter for server instance and update copy

* custom pack button only shows when needed (#5444)

* expose server pinging route to frontend

* feat: add server field validation with pinging on unfocus

* improve pinging logs

* try another pinging crate

* small fixes

* prefill published project id for updating published project

* fix running app bar for mac

* cargo sqlx prepare

* fix app login avatar

* pnpm prepr

* fix download menu for mac

* FIX CI

* fix lint errors

* cargo fmt

* fix toml

* fix more lint

* add server copy

* more lint

* fix any types

* also ping unlisted and private servers

* fix lint

* remove option for showTypeSelector

* fix cannot read user from undefined

* pnpm prepr

* update pinging to make it better

* update copy

* fix login cache issue

* add project select default icon

* fix: minecraft_java_server not redirecting

* pnpm prepr

* fix required content card in project page for custom modpack

* fix app project cards custom modpacks

* update pre-collapsed for app frontend

* don't send server projects to discord webhook

* add lock icon to linked world managed by server project

* pnpm prepr

* make automod msgs on server projects private

* fix pagination for server projects tab

* fix recent plays copy

* fix sync linked world with server project

* pnpm prepr

* add 0.11.0 changelog

* update date

---------

Signed-off-by: Truman Gao <106889354+tdgao@users.noreply.github.com>
Co-authored-by: aecsocket <aecsocket@tutanota.com>
Co-authored-by: coolbot <76798835+coolbot100s@users.noreply.github.com>

apps/app-frontend/src/pages/Browse.vue

@@ -1,23 +1,35 @@
 <script setup lang="ts">
-import { ClipboardCopyIcon, ExternalIcon, GlobeIcon, SearchIcon } from '@modrinth/assets'
-import type { Category, GameVersion, Platform, ProjectType, SortType, Tags } from '@modrinth/ui'
+import type { Labrinth } from '@modrinth/api-client'
 import {
+	ClipboardCopyIcon,
+	ExternalIcon,
+	GlobeIcon,
+	PlayIcon,
+	PlusIcon,
+	SearchIcon,
+	StopCircleIcon,
+} from '@modrinth/assets'
+import type { ProjectType, SortType, Tags } from '@modrinth/ui'
+import {
+	ButtonStyled,
 	Checkbox,
 	defineMessages,
 	DropdownSelect,
 	injectNotificationManager,
 	LoadingIndicator,
 	Pagination,
+	ProjectCard,
 	ProjectCardList,
 	SearchFilterControl,
 	SearchSidebarFilter,
 	StyledInput,
 	useSearch,
+	useServerSearch,
 	useVIntl,
 } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import type { Ref } from 'vue'
-import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import { computed, nextTick, onUnmounted, ref, shallowRef, toRaw, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -26,13 +38,24 @@ import type Instance from '@/components/ui/Instance.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_search_results } from '@/helpers/cache.js'
-import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile.js'
+import { get_project_v3, get_search_results, get_search_results_v3 } from '@/helpers/cache.js'
+import { process_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import {
+	get as getInstance,
+	get_projects as getInstanceProjects,
+	kill,
+	list as listInstances,
+} from '@/helpers/profile.js'
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
+import type { GameInstance } from '@/helpers/types'
+import { get_server_status } from '@/helpers/worlds'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { getServerAddress, playServerProject, useInstall } from '@/store/install.js'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+const installStore = useInstall()
 
 const router = useRouter()
 const route = useRoute()
@@ -42,15 +65,21 @@ const projectTypes = computed(() => {
 })
 
 const [categories, loaders, availableGameVersions] = await Promise.all([
-	get_categories().catch(handleError).then(ref),
-	get_loaders().catch(handleError).then(ref),
-	get_game_versions().catch(handleError).then(ref),
+	get_categories()
+		.catch(handleError)
+		.then(ref<Labrinth.Tags.v2.Category[]>),
+	get_loaders()
+		.catch(handleError)
+		.then(ref<Labrinth.Tags.v2.Loader[]>),
+	get_game_versions()
+		.catch(handleError)
+		.then(ref<Labrinth.Tags.v2.GameVersion[]>),
 ])
 
 const tags: Ref<Tags> = computed(() => ({
-	gameVersions: availableGameVersions.value as GameVersion[],
-	loaders: loaders.value as Platform[],
-	categories: categories.value as Category[],
+	gameVersions: availableGameVersions.value ?? [],
+	loaders: loaders.value ?? [],
+	categories: categories.value ?? [],
 }))
 
 type Instance = {
@@ -60,6 +89,11 @@ type Instance = {
 	install_stage: string
 	icon_path?: string
 	name: string
+	linked_data?: {
+		project_id: string
+		version_id: string
+		locked: boolean
+	}
 }
 
 type InstanceProject = {
@@ -71,15 +105,19 @@ type InstanceProject = {
 const instance: Ref<Instance | null> = ref(null)
 const instanceProjects: Ref<InstanceProject[] | null> = ref(null)
 const instanceHideInstalled = ref(false)
-const newlyInstalled = ref([])
+const newlyInstalled = ref<string[]>([])
+const isServerInstance = ref(false)
 
 const PERSISTENT_QUERY_PARAMS = ['i', 'ai']
 
 await updateInstanceContext()
 
-watch(route, () => {
-	updateInstanceContext()
-})
+watch(
+	() => [route.query.i, route.query.ai, route.path],
+	() => {
+		updateInstanceContext()
+	},
+)
 
 async function updateInstanceContext() {
 	if (route.query.i) {
@@ -88,6 +126,17 @@ async function updateInstanceContext() {
 			getInstanceProjects(route.query.i).catch(handleError),
 		])
 		newlyInstalled.value = []
+
+		isServerInstance.value = false
+		if (instance.value?.linked_data?.project_id) {
+			const projectV3 = await get_project_v3(
+				instance.value.linked_data.project_id,
+				'must_revalidate',
+			).catch(handleError)
+			if (projectV3?.minecraft_server != null) {
+				isServerInstance.value = true
+			}
+		}
 	}
 
 	if (route.query.ai && !(projectTypes.value.length === 1 && projectTypes.value[0] === 'modpack')) {
@@ -123,6 +172,13 @@ const instanceFilters = computed(() => {
 			})
 		}
 
+		if (isServerInstance.value) {
+			filters.push({
+				type: 'environment',
+				option: 'client',
+			})
+		}
+
 		if (instanceHideInstalled.value && instanceProjects.value) {
 			const installedMods = Object.values(instanceProjects.value)
 				.filter((x) => x.metadata)
@@ -164,7 +220,88 @@ const {
 	createPageParams,
 } = useSearch(projectTypes, tags, instanceFilters)
 
+const serverHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
+const serverPings = shallowRef<Record<string, number | undefined>>({})
+const runningServerProjects = ref<Record<string, string>>({})
+
+async function checkServerRunningStates(hits: Labrinth.Search.v3.ResultSearchProject[]) {
+	const packs = await listInstances()
+	const newRunning: Record<string, string> = {}
+	for (const hit of hits) {
+		const inst = packs.find((p: GameInstance) => p.linked_data?.project_id === hit.project_id)
+		if (inst) {
+			const processes = await get_by_profile_path(inst.path).catch(() => [])
+			if (Array.isArray(processes) && processes.length > 0) {
+				newRunning[hit.project_id] = inst.path
+			}
+		}
+	}
+	runningServerProjects.value = newRunning
+}
+
+async function handleStopServerProject(projectId: string) {
+	const instancePath = runningServerProjects.value[projectId]
+	if (!instancePath) return
+	await kill(instancePath).catch(() => {})
+	const { [projectId]: _, ...rest } = runningServerProjects.value
+	runningServerProjects.value = rest
+}
+
+async function handlePlayServerProject(projectId: string) {
+	await playServerProject(projectId)
+	checkServerRunningStates(serverHits.value)
+}
+
+function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
+	const address = getServerAddress(project.minecraft_java_server)
+	if (!address) return
+	installStore.showAddServerToInstanceModal(project.name, address)
+}
+
+const unlistenProcesses = await process_listener(
+	(e: { event: string; profile_path_id: string }) => {
+		if (e.event === 'finished') {
+			const projectId = Object.entries(runningServerProjects.value).find(
+				([, path]) => path === e.profile_path_id,
+			)?.[0]
+			if (projectId) {
+				const { [projectId]: _, ...rest } = runningServerProjects.value
+				runningServerProjects.value = rest
+			}
+		}
+	},
+)
+
+onUnmounted(() => {
+	unlistenProcesses()
+})
+
+const {
+	serverCurrentSortType,
+	serverCurrentFilters,
+	serverToggledGroups,
+	serverSortTypes,
+	serverFilterTypes,
+	serverRequestParams,
+	createServerPageParams,
+} = useServerSearch({ tags, query, maxResults, currentPage })
+
+async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
+	for (const hit of hits) {
+		const address = hit.minecraft_java_server?.address
+		if (!address) continue
+		get_server_status(address)
+			.then((status) => {
+				serverPings.value = { ...serverPings.value, [hit.project_id]: status.ping }
+			})
+			.catch((err) => {
+				console.error(`Failed to ping server ${address}:`, err)
+			})
+	}
+}
+
 const previousFilterState = ref('')
+const isRefreshing = ref(false)
 
 const offline = ref(!navigator.onLine)
 window.addEventListener('offline', () => {
@@ -179,20 +316,14 @@ breadcrumbs.setContext({ name: 'Discover content', link: route.path, query: rout
 
 const loading = ref(true)
 
-const projectType = ref(route.params.projectType)
+const projectType = ref<ProjectType>(route.params.projectType as ProjectType)
 
 watch(projectType, () => {
 	loading.value = true
 })
 
-type SearchResult = {
-	project_id: string
-}
-
-type SearchResults = {
-	total_hits: number
-	limit: number
-	hits: SearchResult[]
+interface SearchResults extends Labrinth.Search.v2.SearchResults {
+	hits: (Labrinth.Search.v2.ResultSearchProject & { installed?: boolean })[]
 }
 
 const results: Ref<SearchResults | null> = shallowRef(null)
@@ -200,73 +331,125 @@ const pageCount = computed(() =>
 	results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
 )
 
-watch(requestParams, () => {
+const effectiveRequestParams = computed(() => {
+	return projectType.value === 'server' ? serverRequestParams.value : requestParams.value
+})
+
+watch(effectiveRequestParams, async () => {
 	if (!route.params.projectType) return
+	await nextTick()
 	refreshSearch()
 })
 
 async function refreshSearch() {
-	let rawResults = await get_search_results(requestParams.value)
-	if (!rawResults) {
-		rawResults = {
-			result: {
+	if (isRefreshing.value) return
+	isRefreshing.value = true
+
+	try {
+		const isServer = projectType.value === 'server'
+
+		if (isServer) {
+			const rawResults = (await get_search_results_v3(serverRequestParams.value)) as {
+				result: Labrinth.Search.v3.SearchResults
+			} | null
+
+			const searchResults = rawResults?.result ?? { hits: [], total_hits: 0 }
+			const hits = searchResults.hits ?? []
+			serverHits.value = hits
+			serverPings.value = {}
+			pingServerHits(hits)
+			checkServerRunningStates(hits)
+			results.value = {
 				hits: [],
-				total_hits: 0,
-				limit: 1,
-			},
+				total_hits: searchResults.total_hits ?? 0,
+				limit: maxResults.value,
+				offset: 0,
+			}
+		} else {
+			let rawResults = (await get_search_results(requestParams.value)) as {
+				result: SearchResults
+			} | null
+
+			if (!rawResults) {
+				rawResults = {
+					result: {
+						hits: [],
+						total_hits: 0,
+						limit: 1,
+						offset: 0,
+					},
+				}
+			}
+			if (instance.value) {
+				const installedProjectIds = new Set([
+					...newlyInstalled.value,
+					...Object.values(instanceProjects.value ?? {})
+						.filter((x) => x.metadata)
+						.map((x) => x.metadata.project_id),
+				])
+
+				rawResults.result.hits = rawResults.result.hits.map((val) => ({
+					...val,
+					installed: installedProjectIds.has(val.project_id),
+				}))
+			}
+			results.value = rawResults.result
 		}
-	}
-	if (instance.value) {
-		for (const val of rawResults.result.hits) {
-			val.installed =
-				newlyInstalled.value.includes(val.project_id) ||
-				Object.values(instanceProjects.value).some(
-					(x) => x.metadata && x.metadata.project_id === val.project_id,
-				)
+
+		const currentFilterState = JSON.stringify({
+			query: query.value,
+			filters: toRaw(currentFilters.value),
+			sort: toRaw(currentSortType.value),
+			maxResults: maxResults.value,
+			projectTypes: toRaw(projectTypes.value),
+		})
+
+		if (previousFilterState.value && previousFilterState.value !== currentFilterState) {
+			currentPage.value = 1
 		}
-	}
-	results.value = rawResults.result
 
-	const currentFilterState = JSON.stringify({
-		query: query.value,
-		filters: currentFilters.value,
-		sort: currentSortType.value,
-		maxResults: maxResults.value,
-		projectTypes: projectTypes.value,
-	})
+		previousFilterState.value = currentFilterState
 
-	if (previousFilterState.value && previousFilterState.value !== currentFilterState) {
-		currentPage.value = 1
-	}
+		const persistentParams: LocationQuery = {}
 
-	previousFilterState.value = currentFilterState
-
-	const persistentParams: LocationQuery = {}
-
-	for (const [key, value] of Object.entries(route.query)) {
-		if (PERSISTENT_QUERY_PARAMS.includes(key)) {
-			persistentParams[key] = value
+		for (const [key, value] of Object.entries(route.query)) {
+			if (PERSISTENT_QUERY_PARAMS.includes(key)) {
+				persistentParams[key] = value
+			}
 		}
-	}
 
-	if (instanceHideInstalled.value) {
-		persistentParams.ai = 'true'
-	} else {
-		delete persistentParams.ai
-	}
+		if (instanceHideInstalled.value) {
+			persistentParams.ai = 'true'
+		} else {
+			delete persistentParams.ai
+		}
 
-	const params = {
-		...persistentParams,
-		...createPageParams(),
-	}
+		const params = {
+			...persistentParams,
+			...(isServer ? createServerPageParams() : createPageParams()),
+		}
 
-	breadcrumbs.setContext({
-		name: 'Discover content',
-		link: `/browse/${projectType.value}`,
-		query: params,
-	})
-	await router.replace({ path: route.path, query: params })
-	loading.value = false
+		breadcrumbs.setContext({
+			name: 'Discover content',
+			link: `/browse/${projectType.value}`,
+			query: params,
+		})
+		const queryString = Object.entries(params)
+			.flatMap(([key, value]) => {
+				const values = Array.isArray(value) ? value : [value]
+				return values
+					.filter((v): v is string => v != null)
+					.map((v) => `${encodeURIComponent(key)}=${encodeURIComponent(v)}`)
+			})
+			.join('&')
+		const newUrl = `${route.path}${queryString ? '?' + queryString : ''}`
+		window.history.replaceState(window.history.state, '', newUrl)
+	} catch (err) {
+		console.error('Error refreshing search:', err)
+	} finally {
+		loading.value = false
+		isRefreshing.value = false
+	}
 }
 
 async function setPage(newPageNumber: number) {
@@ -289,7 +472,7 @@ function clearSearch() {
 }
 
 watch(
-	() => route.params.projectType,
+	() => route.params.projectType as ProjectType,
 	async (newType) => {
 		// Check if the newType is not the same as the current value
 		if (!newType || newType === projectType.value) return
@@ -308,8 +491,9 @@ const selectableProjectTypes = computed(() => {
 
 	if (instance.value) {
 		if (
-			availableGameVersions.value.findIndex((x) => x.version === instance.value.game_version) <=
-			availableGameVersions.value.findIndex((x) => x.version === '1.13')
+			availableGameVersions.value &&
+			availableGameVersions.value.findIndex((x) => x.version === instance.value?.game_version) <=
+				availableGameVersions.value.findIndex((x) => x.version === '1.13')
 		) {
 			dataPacks = true
 		}
@@ -338,6 +522,7 @@ const selectableProjectTypes = computed(() => {
 		{ label: 'Resource Packs', href: `/browse/resourcepack` },
 		{ label: 'Data Packs', href: `/browse/datapack`, shown: dataPacks },
 		{ label: 'Shaders', href: `/browse/shader` },
+		{ label: 'Servers', href: `/browse/server`, shown: !instance.value },
 	]
 
 	if (params) {
@@ -360,23 +545,61 @@ const messages = defineMessages({
 		id: 'search.filter.locked.instance-game-version.title',
 		defaultMessage: 'Game version is provided by the instance',
 	},
+	gameVersionProvidedByServer: {
+		id: 'search.filter.locked.server-game-version.title',
+		defaultMessage: 'Game version is provided by the server',
+	},
 	modLoaderProvidedByInstance: {
 		id: 'search.filter.locked.instance-loader.title',
 		defaultMessage: 'Loader is provided by the instance',
 	},
+	modLoaderProvidedByServer: {
+		id: 'search.filter.locked.server-loader.title',
+		defaultMessage: 'Loader is provided by the server',
+	},
+	environmentProvidedByServer: {
+		id: 'search.filter.locked.server-environment.title',
+		defaultMessage: 'Only client-side mods can be added to the server instance',
+	},
 	providedByInstance: {
 		id: 'search.filter.locked.instance',
 		defaultMessage: 'Provided by the instance',
 	},
+	providedByServer: {
+		id: 'search.filter.locked.server',
+		defaultMessage: 'Provided by the server',
+	},
 	syncFilterButton: {
 		id: 'search.filter.locked.instance.sync',
 		defaultMessage: 'Sync with instance',
 	},
 })
 
+const getServerModpackContent = (project: Labrinth.Search.v3.ResultSearchProject) => {
+	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.project_id
+					? () => {
+							router.push(`/project/${project_id}`)
+						}
+					: undefined,
+			showCustomModpackTooltip: project_id === project.project_id,
+		}
+	}
+	return undefined
+}
+
 const options = ref(null)
+// @ts-expect-error - no event types
 const handleRightClick = (event, result) => {
-	options.value.showMenu(event, result, [
+	// @ts-ignore
+	options.value?.showMenu(event, result, [
 		{
 			name: 'open_link',
 		},
@@ -385,6 +608,7 @@ const handleRightClick = (event, result) => {
 		},
 	])
 }
+// @ts-expect-error - no event types
 const handleOptionsClick = (args) => {
 	switch (args.option) {
 		case 'open_link':
@@ -424,33 +648,75 @@ previousFilterState.value = JSON.stringify({
 				@click.prevent.stop
 			/>
 		</div>
-		<SearchSidebarFilter
-			v-for="filter in filters.filter((f) => f.display !== 'none')"
-			:key="`filter-${filter.id}`"
-			v-model:selected-filters="currentFilters"
-			v-model:toggled-groups="toggledGroups"
-			v-model:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-			:provided-filters="instanceFilters"
-			:filter-type="filter"
-			class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
-			button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
-			content-class="mb-3"
-			inner-panel-class="ml-2 mr-3"
-			:open-by-default="
-				filter.id.startsWith('category') || filter.id === 'environment' || filter.id === 'license'
-			"
-		>
-			<template #header>
-				<h3 class="text-base m-0">{{ filter.formatted_name }}</h3>
-			</template>
-			<template #locked-game_version>
-				{{ formatMessage(messages.gameVersionProvidedByInstance) }}
-			</template>
-			<template #locked-mod_loader>
-				{{ formatMessage(messages.modLoaderProvidedByInstance) }}
-			</template>
-			<template #sync-button> {{ formatMessage(messages.syncFilterButton) }} </template>
-		</SearchSidebarFilter>
+		<template v-if="projectType === 'server'">
+			<SearchSidebarFilter
+				v-for="filterType in serverFilterTypes.filter((f) => f.options.length > 0)"
+				:key="`server-filter-${filterType.id}`"
+				v-model:selected-filters="serverCurrentFilters"
+				v-model:toggled-groups="serverToggledGroups"
+				:provided-filters="[]"
+				:filter-type="filterType"
+				class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
+				button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
+				content-class="mb-3"
+				inner-panel-class="ml-2 mr-3"
+				:open-by-default="
+					![
+						'server_category_minecraft_server_meta',
+						'server_category_minecraft_server_community',
+						'server_game_version',
+					].includes(filterType.id)
+				"
+			>
+				<template #header>
+					<h3 class="text-base m-0">{{ filterType.formatted_name }}</h3>
+				</template>
+			</SearchSidebarFilter>
+		</template>
+		<template v-else>
+			<SearchSidebarFilter
+				v-for="filter in filters.filter((f) => f.display !== 'none')"
+				:key="`filter-${filter.id}`"
+				v-model:selected-filters="currentFilters"
+				v-model:toggled-groups="toggledGroups"
+				v-model:overridden-provided-filter-types="overriddenProvidedFilterTypes"
+				:provided-filters="instanceFilters"
+				:filter-type="filter"
+				class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
+				button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
+				content-class="mb-3"
+				inner-panel-class="ml-2 mr-3"
+				:open-by-default="
+					filter.id.startsWith('category') || filter.id === 'environment' || filter.id === 'license'
+				"
+			>
+				<template #header>
+					<h3 class="text-base m-0">{{ filter.formatted_name }}</h3>
+				</template>
+				<template #locked-game_version>
+					{{
+						formatMessage(
+							isServerInstance
+								? messages.gameVersionProvidedByServer
+								: messages.gameVersionProvidedByInstance,
+						)
+					}}
+				</template>
+				<template #locked-mod_loader>
+					{{
+						formatMessage(
+							isServerInstance
+								? messages.modLoaderProvidedByServer
+								: messages.modLoaderProvidedByInstance,
+						)
+					}}
+				</template>
+				<template #locked-environment>
+					{{ formatMessage(messages.environmentProvidedByServer) }}
+				</template>
+				<template #sync-button> {{ formatMessage(messages.syncFilterButton) }} </template>
+			</SearchSidebarFilter>
+		</template>
 	</Teleport>
 	<div ref="searchWrapper" class="flex flex-col gap-3 p-6">
 		<template v-if="instance">
@@ -472,11 +738,17 @@ previousFilterState.value = JSON.stringify({
 		<div class="flex gap-2">
 			<DropdownSelect
 				v-slot="{ selected }"
-				v-model="currentSortType"
+				:model-value="projectType === 'server' ? serverCurrentSortType : currentSortType"
 				class="max-w-[16rem]"
 				name="Sort by"
-				:options="sortTypes as any"
+				:options="(projectType === 'server' ? serverSortTypes : sortTypes) as any"
 				:display-name="(option: SortType | undefined) => option?.display"
+				@update:model-value="
+					(v: SortType) => {
+						if (projectType === 'server') serverCurrentSortType = v
+						else currentSortType = v
+					}
+				"
 			>
 				<span class="font-semibold text-primary">Sort by: </span>
 				<span class="font-semibold text-secondary">{{ selected }}</span>
@@ -494,46 +766,125 @@ previousFilterState.value = JSON.stringify({
 			<Pagination :page="currentPage" :count="pageCount" class="ml-auto" @switch-page="setPage" />
 		</div>
 		<SearchFilterControl
+			v-if="projectType === 'server'"
+			v-model:selected-filters="serverCurrentFilters"
+			:filters="serverFilterTypes"
+			:provided-filters="[]"
+			:overridden-provided-filter-types="[]"
+		/>
+		<SearchFilterControl
+			v-else
 			v-model:selected-filters="currentFilters"
 			:filters="filters.filter((f) => f.display !== 'none')"
 			:provided-filters="instanceFilters"
 			:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-			:provided-message="messages.providedByInstance"
+			:provided-message="isServerInstance ? messages.providedByServer : messages.providedByInstance"
 		/>
 		<div class="search">
 			<section v-if="loading" class="offline">
 				<LoadingIndicator />
 			</section>
-			<section v-else-if="offline && results.total_hits === 0" class="offline">
+			<section v-else-if="offline && results?.total_hits === 0" class="offline">
 				You are currently offline. Connect to the internet to browse Modrinth!
 			</section>
+			<section
+				v-else-if="
+					projectType === 'server'
+						? serverHits.length === 0
+						: results && results.hits && results.hits.length === 0
+				"
+				class="offline"
+			>
+				No results found for your query!
+			</section>
 
 			<ProjectCardList v-else :layout="'list'">
-				<SearchCard
-					v-for="result in results.hits"
-					:key="result?.project_id"
-					:project-type="projectType"
-					:project="result"
-					:instance="instance"
-					:categories="[
-						...categories.filter(
-							(cat) =>
-								result?.display_categories.includes(cat.name) && cat.project_type === projectType,
-						),
-						...loaders.filter(
-							(loader) =>
-								result?.display_categories.includes(loader.name) &&
-								loader.supported_project_types?.includes(projectType),
-						),
-					]"
-					:installed="result.installed || newlyInstalled.includes(result.project_id)"
-					@install="
-						(id) => {
-							newlyInstalled.push(id)
-						}
-					"
-					@contextmenu.prevent.stop="(event) => handleRightClick(event, result)"
-				/>
+				<template v-if="projectType === 'server'">
+					<ProjectCard
+						v-for="project in serverHits"
+						:key="`server-card-${project.project_id}`"
+						:title="project.name"
+						:icon-url="project.icon_url || undefined"
+						:summary="project.summary"
+						:tags="project.categories"
+						:link="`/project/${project.slug ?? project.project_id}`"
+						:server-online-players="project.minecraft_java_server?.ping?.data?.players_online ?? 0"
+						:server-region-code="project.minecraft_server?.country"
+						:server-recent-plays="project.minecraft_java_server?.verified_plays_4w ?? 0"
+						:server-modpack-content="getServerModpackContent(project)"
+						:server-ping="serverPings[project.project_id]"
+						:server-status-online="!!project.minecraft_java_server?.ping?.data"
+						:hide-online-players-label="true"
+						:hide-recent-plays-label="true"
+						layout="list"
+						:max-tags="2"
+						is-server-project
+						exclude-loaders
+						@contextmenu.prevent.stop="
+							(event: any) =>
+								handleRightClick(event, { project_type: 'server', slug: project.slug })
+						"
+					>
+						<template #actions>
+							<div class="flex gap-2">
+								<ButtonStyled circular>
+									<button
+										v-tooltip="'Add server to instance'"
+										@click.stop="() => handleAddServerToInstance(project)"
+									>
+										<PlusIcon />
+									</button>
+								</ButtonStyled>
+								<ButtonStyled
+									v-if="runningServerProjects[project.project_id]"
+									color="red"
+									type="outlined"
+								>
+									<button @click="() => handleStopServerProject(project.project_id)">
+										<StopCircleIcon />
+										Stop
+									</button>
+								</ButtonStyled>
+								<ButtonStyled v-else color="brand" type="outlined">
+									<button
+										:disabled="
+											(installStore.installingServerProjects as string[]).includes(
+												project.project_id,
+											)
+										"
+										@click="() => handlePlayServerProject(project.project_id)"
+									>
+										<PlayIcon />
+										{{
+											(installStore.installingServerProjects as string[]).includes(
+												project.project_id,
+											)
+												? 'Installing...'
+												: 'Play'
+										}}
+									</button>
+								</ButtonStyled>
+							</div>
+						</template>
+					</ProjectCard>
+				</template>
+				<template v-else>
+					<SearchCard
+						v-for="result in results?.hits ?? []"
+						:key="result?.project_id"
+						:project-type="projectType"
+						:project="result"
+						:instance="instance ?? undefined"
+						:installed="result.installed || newlyInstalled.includes(result.project_id || '')"
+						@install="
+							(id) => {
+								newlyInstalled.push(id)
+							}
+						"
+						@contextmenu.prevent.stop="(event: any) => handleRightClick(event, result)"
+					/>
+				</template>
+
 				<ContextMenu ref="options" @option-clicked="handleOptionsClick">
 					<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
 					<template #copy_link> <ClipboardCopyIcon /> Copy link </template>

apps/app-frontend/src/pages/instance/Index.vue

@@ -1,36 +1,95 @@
 <template>
-	<div>
-		<div
-			class="p-6 pr-2 pb-4"
-			@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
-		>
+	<div v-if="instance">
+		<div class="p-6 pr-2 pb-4" @contextmenu.prevent.stop="(event) => handleRightClick(event)">
 			<ExportModal ref="exportModal" :instance="instance" />
 			<InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
 			<UpdateToPlayModal ref="updateToPlayModal" :instance="instance" />
-			<ButtonStyled v-if="themeStore.featureFlags.server_project_qa">
-				<button @click="updateToPlayModal.show()">Update to play modal</button>
-			</ButtonStyled>
 			<ContentPageHeader>
 				<template #icon>
-					<Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
+					<Avatar
+						:src="icon ? icon : undefined"
+						:alt="instance.name"
+						size="64px"
+						:tint-by="instance.path"
+					/>
 				</template>
 				<template #title>
 					{{ instance.name }}
 				</template>
-				<template #summary> </template>
 				<template #stats>
-					<div
-						class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
-					>
-						<GameIcon class="h-6 w-6 text-secondary" />
-						{{ instance.loader }} {{ instance.game_version }}
-					</div>
-					<div class="flex items-center gap-2 font-semibold">
-						<TimerIcon class="h-6 w-6 text-secondary" />
-						<template v-if="timePlayed > 0">
-							{{ timePlayedHumanized }}
+					<div class="flex items-center flex-wrap gap-2">
+						<template v-if="!isServerInstance">
+							<div class="flex items-center gap-2 capitalize font-medium">
+								{{ instance.loader }} {{ instance.game_version }}
+							</div>
+
+							<div class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
+
+							<div class="flex items-center gap-2 font-medium">
+								<template v-if="timePlayed > 0">
+									{{ timePlayedHumanized }}
+								</template>
+								<template v-else> Never played </template>
+							</div>
+
+							<div v-if="linkedProjectV3" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
+
+							<div
+								v-if="linkedProjectV3"
+								class="flex gap-1.5 items-center font-medium text-primary"
+							>
+								Linked to
+								<Avatar
+									:src="linkedProjectV3.icon_url"
+									:alt="linkedProjectV3.name"
+									:tint-by="instance.path"
+									size="24px"
+								/>
+								<router-link
+									:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
+									class="hover:underline text-primary"
+								>
+									{{ linkedProjectV3.name }}
+								</router-link>
+							</div>
+						</template>
+
+						<template v-else>
+							<ServerOnlinePlayers :online="playersOnline ?? 0" :status-online="statusOnline" />
+
+							<div
+								v-if="playersOnline !== undefined && (minecraftServer?.country || ping)"
+								class="w-1.5 h-1.5 rounded-full bg-surface-5"
+							></div>
+
+							<ServerRegion v-if="minecraftServer?.country" :region="minecraftServer?.country" />
+
+							<ServerPing v-if="ping" :ping="ping" />
+
+							<div
+								v-if="modpackContentProjectV3 && (minecraftServer?.country || ping)"
+								class="w-1.5 h-1.5 rounded-full bg-surface-5"
+							></div>
+
+							<div
+								v-if="linkedProjectV3"
+								class="flex gap-1.5 items-center font-medium text-primary"
+							>
+								Linked to
+								<Avatar
+									:src="linkedProjectV3.icon_url"
+									:alt="linkedProjectV3.name"
+									:tint-by="instance.path"
+									size="24px"
+								/>
+								<router-link
+									:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
+									class="hover:underline text-primary"
+								>
+									{{ linkedProjectV3.name }}
+								</router-link>
+							</div>
 						</template>
-						<template v-else> Never played </template>
 					</div>
 				</template>
 				<template #actions>
@@ -63,7 +122,7 @@
 							</button>
 						</ButtonStyled>
 						<ButtonStyled
-							v-else-if="playing === false && loading === false"
+							v-else-if="playing === false && loading === false && !isServerInstance"
 							color="brand"
 							size="large"
 						>
@@ -72,6 +131,44 @@
 								Play
 							</button>
 						</ButtonStyled>
+						<div
+							v-else-if="playing === false && loading === false && isServerInstance"
+							class="joined-buttons"
+						>
+							<ButtonStyled color="brand" size="large">
+								<button @click="handlePlayServer()">
+									<PlayIcon />
+									Play
+								</button>
+							</ButtonStyled>
+							<ButtonStyled color="brand" size="large">
+								<OverflowMenu
+									:options="[
+										{
+											id: 'join_server',
+											action: () => handlePlayServer(),
+										},
+										{
+											id: 'launch_instance',
+											action: () => startInstance('InstancePage'),
+										},
+									]"
+								>
+									<div class="w-0 text-xl relative top-0.5 right-2.5">
+										<DropdownIcon />
+									</div>
+
+									<template #join_server>
+										<PlayIcon />
+										Join server
+									</template>
+									<template #launch_instance>
+										<PlayIcon />
+										Launch instance
+									</template>
+								</OverflowMenu>
+							</ButtonStyled>
+						</div>
 						<ButtonStyled
 							v-else-if="loading === true && playing === false"
 							color="brand"
@@ -79,21 +176,23 @@
 						>
 							<button disabled>Loading...</button>
 						</ButtonStyled>
-						<ButtonStyled size="large" circular>
-							<button v-tooltip="'Instance settings'" @click="settingsModal.show()">
+						<ButtonStyled circular size="large">
+							<button v-tooltip="'Instance settings'" @click="settingsModal?.show()">
 								<SettingsIcon />
 							</button>
 						</ButtonStyled>
-						<ButtonStyled size="large" type="transparent" circular>
+						<ButtonStyled type="transparent" circular size="large">
 							<OverflowMenu
 								:options="[
 									{
 										id: 'open-folder',
-										action: () => showProfileInFolder(instance.path),
+										action: () => {
+											if (instance) showProfileInFolder(instance.path)
+										},
 									},
 									{
 										id: 'export-mrpack',
-										action: () => $refs.exportModal.show(),
+										action: () => exportModal?.show(),
 									},
 								]"
 							>
@@ -112,7 +211,11 @@
 			<NavTabs :links="tabs" />
 		</div>
 		<div v-if="!!instance" class="p-6 pt-4">
-			<RouterView v-slot="{ Component }" :key="instance.path">
+			<RouterView
+				v-if="route.path.startsWith('/instance')"
+				v-slot="{ Component }"
+				:key="instance.path"
+			>
 				<template v-if="Component">
 					<Suspense
 						:key="instance.path"
@@ -127,6 +230,7 @@
 							:playing="playing"
 							:versions="modrinthVersions"
 							:installed="instance.install_stage !== 'installed'"
+							:is-server-instance="isServerInstance"
 							@play="updatePlayState"
 							@stop="() => stopInstance('InstanceSubpage')"
 						></component>
@@ -160,16 +264,17 @@
 		</ContextMenu>
 	</div>
 </template>
-<script setup>
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	CheckCircleIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
+	DropdownIcon,
 	EditIcon,
 	ExternalIcon,
 	EyeIcon,
 	FolderOpenIcon,
-	GameIcon,
 	GlobeIcon,
 	HashIcon,
 	MoreVerticalIcon,
@@ -179,7 +284,6 @@ import {
 	ServerIcon,
 	SettingsIcon,
 	StopCircleIcon,
-	TimerIcon,
 	UpdatedIcon,
 	UserPlusIcon,
 	XIcon,
@@ -191,6 +295,9 @@ import {
 	injectNotificationManager,
 	LoadingIndicator,
 	OverflowMenu,
+	ServerOnlinePlayers,
+	ServerPing,
+	ServerRegion,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
@@ -205,20 +312,21 @@ import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.v
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { get_project, get_version_many } from '@/helpers/cache.js'
+import { get_project_v3, get_version, get_version_many } from '@/helpers/cache.js'
 import { process_listener, profile_listener } from '@/helpers/events'
 import { get_by_profile_path } from '@/helpers/process'
-import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
+import { finish_install, get, get_full_path, get_projects, kill, run } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
 import { showProfileInFolder } from '@/helpers/utils.js'
+import { get_server_status } from '@/helpers/worlds'
 import { handleSevereError } from '@/store/error.js'
+import { playServerProject } from '@/store/install.js'
 import { useBreadcrumbs, useLoading } from '@/store/state'
-import { useTheming } from '@/store/theme'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
 const { handleError } = injectNotificationManager()
-const themeStore = useTheming()
 const route = useRoute()
 
 const router = useRouter()
@@ -232,38 +340,94 @@ window.addEventListener('online', () => {
 	offline.value = false
 })
 
-const instance = ref()
-const modrinthVersions = ref([])
+const instance = ref<GameInstance>()
+const modrinthVersions = ref<Labrinth.Versions.v2.Version[]>([])
 const playing = ref(false)
 const loading = ref(false)
-const updateToPlayModal = ref()
+const exportModal = ref<InstanceType<typeof ExportModal>>()
+const updateToPlayModal = ref<InstanceType<typeof UpdateToPlayModal>>()
+
+const isServerInstance = ref(false)
+const hasContent = ref(true)
+const linkedProjectV3 = ref<Labrinth.Projects.v3.Project>()
+const modpackContentProjectV3 = ref<Labrinth.Projects.v3.Project | null>(null)
+const selected = ref<unknown[]>([])
+
+const minecraftServer = computed(() => linkedProjectV3.value?.minecraft_server)
+const javaServerPingData = computed(() => linkedProjectV3.value?.minecraft_java_server?.ping?.data)
+const statusOnline = computed(() => !!javaServerPingData.value)
+const playersOnline = ref<number | undefined>(undefined)
+const ping = ref<number | undefined>(undefined)
 
 async function fetchInstance() {
-	instance.value = await get(route.params.id).catch(handleError)
+	isServerInstance.value = false
+	linkedProjectV3.value = undefined
+	modpackContentProjectV3.value = null
+	modrinthVersions.value = []
+	hasContent.value = true
+	ping.value = undefined
 
-	if (!offline.value && instance.value.linked_data && instance.value.linked_data.project_id) {
-		get_project(instance.value.linked_data.project_id, 'must_revalidate')
-			.catch(handleError)
-			.then((project) => {
-				if (project && project.versions) {
-					get_version_many(project.versions, 'must_revalidate')
-						.catch(handleError)
-						.then((versions) => {
-							modrinthVersions.value = versions.sort(
-								(a, b) => dayjs(b.date_published) - dayjs(a.date_published),
-							)
-						})
+	instance.value = await get(route.params.id as string).catch(handleError)
+
+	if (!offline.value && instance.value?.linked_data && instance.value.linked_data.project_id) {
+		try {
+			linkedProjectV3.value = await get_project_v3(
+				instance.value.linked_data.project_id,
+				'must_revalidate',
+			)
+
+			if (linkedProjectV3.value && linkedProjectV3.value.versions) {
+				const versions = await get_version_many(linkedProjectV3.value.versions, 'must_revalidate')
+				modrinthVersions.value = versions.sort(
+					(a: Labrinth.Versions.v2.Version, b: Labrinth.Versions.v2.Version) =>
+						dayjs(b.date_published).valueOf() - dayjs(a.date_published).valueOf(),
+				)
+				if (linkedProjectV3.value?.minecraft_server != null) {
+					isServerInstance.value = true
+
+					const serverAddress = linkedProjectV3.value?.minecraft_java_server?.address
+					if (serverAddress) {
+						get_server_status(serverAddress)
+							.then((status) => {
+								if (status.ping != null) {
+									ping.value = status.ping
+									playersOnline.value = status.players?.online
+								}
+							})
+							.catch((err) => {
+								console.error(`Failed to ping server ${serverAddress}:`, err)
+							})
+					}
+
+					await fetchModpackContent()
+					const projects = await get_projects(instance.value!.path).catch(() => ({}))
+					hasContent.value = Object.keys(projects).length > 0
 				}
-			})
+			}
+		} catch (error: Error) {
+			handleError(error)
+		}
 	}
 
 	await updatePlayState()
 }
 
-async function updatePlayState() {
-	const runningProcesses = await get_by_profile_path(route.params.id).catch(handleError)
+async function fetchModpackContent() {
+	modpackContentProjectV3.value = null
+	const versionId = instance.value?.linked_data?.version_id
+	if (!versionId) return
 
-	playing.value = runningProcesses.length > 0
+	const contentVersion = await get_version(versionId, 'must_revalidate')
+	const projectId = contentVersion?.project_id
+	if (projectId) {
+		modpackContentProjectV3.value = await get_project_v3(projectId, 'must_revalidate')
+	}
+}
+
+async function updatePlayState() {
+	const runningProcesses = await get_by_profile_path(route.params.id as string).catch(handleError)
+
+	playing.value = Array.isArray(runningProcesses) && runningProcesses.length > 0
 }
 
 await fetchInstance()
@@ -276,7 +440,7 @@ watch(
 	},
 )
 
-const basePath = computed(() => `/instance/${encodeURIComponent(route.params.id)}`)
+const basePath = computed(() => `/instance/${encodeURIComponent(route.params.id as string)}`)
 
 const tabs = computed(() => [
 	{
@@ -293,44 +457,52 @@ const tabs = computed(() => [
 	},
 ])
 
-breadcrumbs.setName(
-	'Instance',
-	instance.value.name.length > 40
-		? instance.value.name.substring(0, 40) + '...'
-		: instance.value.name,
-)
-
-breadcrumbs.setContext({
-	name: instance.value.name,
-	link: route.path,
-	query: route.query,
-})
+if (instance.value) {
+	breadcrumbs.setName(
+		'Instance',
+		instance.value.name.length > 40
+			? instance.value.name.substring(0, 40) + '...'
+			: instance.value.name,
+	)
+	breadcrumbs.setContext({
+		name: instance.value.name,
+		link: route.path,
+		query: route.query,
+	})
+}
 
 const loadingBar = useLoading()
 
-const options = ref(null)
+const options = ref<InstanceType<typeof ContextMenu> | null>(null)
+
+const startInstance = async (context: string) => {
+	if (!instance.value) return
+	if (updateToPlayModal.value?.hasUpdate) {
+		updateToPlayModal.value.show(instance.value)
+		return
+	}
 
-const startInstance = async (context) => {
 	loading.value = true
 	try {
-		await run(route.params.id)
+		await run(route.params.id as string)
 		playing.value = true
 	} catch (err) {
-		handleSevereError(err, { profilePath: route.params.id })
+		handleSevereError(err, { profilePath: route.params.id as string })
 	}
 	loading.value = false
 
-	trackEvent('InstanceStart', {
+	trackEvent('InstancePlay', {
 		loader: instance.value.loader,
 		game_version: instance.value.game_version,
 		source: context,
 	})
 }
 
-const stopInstance = async (context) => {
+const stopInstance = async (context: string) => {
 	playing.value = false
-	await kill(route.params.id).catch(handleError)
+	await kill(route.params.id as string).catch(handleError)
 
+	if (!instance.value) return
 	trackEvent('InstanceStop', {
 		loader: instance.value.loader,
 		game_version: instance.value.game_version,
@@ -338,11 +510,22 @@ const stopInstance = async (context) => {
 	})
 }
 
+const handlePlayServer = async () => {
+	if (!instance.value?.linked_data?.project_id) return
+	loading.value = true
+	try {
+		await playServerProject(instance.value.linked_data.project_id)
+	} finally {
+		await updatePlayState()
+		loading.value = false
+	}
+}
+
 const repairInstance = async () => {
 	await finish_install(instance.value).catch(handleError)
 }
 
-const handleRightClick = (event) => {
+const handleRightClick = (event: MouseEvent) => {
 	const baseOptions = [
 		{ name: 'add_content' },
 		{ type: 'divider' },
@@ -351,7 +534,7 @@ const handleRightClick = (event) => {
 		{ name: 'copy_path' },
 	]
 
-	options.value.showMenu(
+	options.value?.showMenu(
 		event,
 		instance.value,
 		playing.value
@@ -372,7 +555,7 @@ const handleRightClick = (event) => {
 	)
 }
 
-const handleOptionsClick = async (args) => {
+const handleOptionsClick = async (args: { option: string; item: unknown }) => {
 	switch (args.option) {
 		case 'play':
 			await startInstance('InstancePageContextMenu')
@@ -382,52 +565,60 @@ const handleOptionsClick = async (args) => {
 			break
 		case 'add_content':
 			await router.push({
-				path: `/browse/${instance.value.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+				path: `/browse/${instance.value?.loader === 'vanilla' ? 'datapack' : 'mod'}`,
 				query: { i: route.params.id },
 			})
 			break
 		case 'edit':
 			await router.push({
-				path: `/instance/${encodeURIComponent(route.params.id)}/options`,
+				path: `/instance/${encodeURIComponent(route.params.id as string)}/options`,
 			})
 			break
 		case 'open_folder':
-			await showProfileInFolder(instance.value.path)
+			if (instance.value) await showProfileInFolder(instance.value.path)
 			break
 		case 'copy_path': {
-			const fullPath = await get_full_path(instance.value.path)
-			await navigator.clipboard.writeText(fullPath)
+			if (instance.value) {
+				const fullPath = await get_full_path(instance.value?.path)
+				await navigator.clipboard.writeText(fullPath)
+			}
 			break
 		}
 	}
 }
 
-const unlistenProfiles = await profile_listener(async (event) => {
-	if (event.profile_path_id === route.params.id) {
-		if (event.event === 'removed') {
-			await router.push({
-				path: '/',
-			})
-			return
+const unlistenProfiles = await profile_listener(
+	async (event: { profile_path_id: string; event: string }) => {
+		if (event.profile_path_id === route.params.id) {
+			if (event.event === 'removed') {
+				await router.push({
+					path: '/',
+				})
+				return
+			}
+			instance.value = await get(route.params.id as string).catch(handleError)
 		}
-		instance.value = await get(route.params.id).catch(handleError)
-	}
-})
-
-const unlistenProcesses = await process_listener((e) => {
-	if (e.event === 'finished' && e.profile_path_id === route.params.id) {
-		playing.value = false
-	}
-})
-
-const icon = computed(() =>
-	instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
+	},
 )
 
-const settingsModal = ref()
+const unlistenProcesses = await process_listener(
+	(e: { event: string; profile_path_id: string }) => {
+		if (e.event === 'finished' && e.profile_path_id === route.params.id) {
+			playing.value = false
+		}
+	},
+)
+
+const icon = computed(() =>
+	instance.value?.icon_path ? convertFileSrc(instance.value.icon_path) : null,
+)
+
+const settingsModal = ref<InstanceType<typeof InstanceSettingsModal>>()
 
 const timePlayed = computed(() => {
-	return instance.value.recent_time_played + instance.value.submitted_time_played
+	return instance.value
+		? instance.value.recent_time_played + instance.value.submitted_time_played
+		: 0
 })
 
 const timePlayedHumanized = computed(() => {

apps/app-frontend/src/pages/instance/Mods.vue

@@ -323,6 +323,7 @@ const props = defineProps<{
 	playing: boolean
 	versions: Version[]
 	installed: boolean
+	isServerInstance?: boolean
 }>()
 
 type ProjectListEntryAuthor = {
@@ -352,6 +353,7 @@ type ProjectListEntry = {
 const isPackLocked = computed(() => {
 	return props.instance.linked_data && props.instance.linked_data.locked
 })
+
 const canUpdatePack = computed(() => {
 	if (!props.instance.linked_data || !props.versions || !props.versions[0]) return false
 	return props.instance.linked_data.version_id !== props.versions[0].id

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -80,9 +80,13 @@
 				@refresh="() => refreshServer((world as ServerWorld).address)"
 				@edit="
 					() =>
-						world.type === 'server' ? editServerModal?.show(world) : editWorldModal?.show(world)
+						isLinkedWorld(world)
+							? undefined
+							: world.type === 'server'
+								? editServerModal?.show(world)
+								: editWorldModal?.show(world)
 				"
-				@delete="() => promptToRemoveWorld(world)"
+				@delete="() => !isLinkedWorld(world) && promptToRemoveWorld(world)"
 				@open-folder="(world: SingleplayerWorld) => showWorldInFolder(instance.path, world.path)"
 			/>
 		</div>
@@ -150,6 +154,7 @@ import {
 	handleDefaultProfileUpdateEvent,
 	hasServerQuickPlaySupport,
 	hasWorldQuickPlaySupport,
+	isLinkedWorld,
 	type ProfileEvent,
 	type ProtocolVersion,
 	refreshServerData,
@@ -166,6 +171,7 @@ import {
 	start_join_singleplayer_world,
 	type World,
 } from '@/helpers/worlds.ts'
+import { playServerProject } from '@/store/install'
 
 const { handleError } = injectNotificationManager()
 const route = useRoute()
@@ -328,6 +334,9 @@ async function joinWorld(world: World) {
 	startingInstance.value = true
 	worldPlaying.value = world
 	if (world.type === 'server') {
+		if (isLinkedWorld(world)) {
+			playServerProject(world.linked_project_id)
+		}
 		await start_join_server(instance.value.path, world.address).catch(handleJoinError)
 	} else if (world.type === 'singleplayer') {
 		await start_join_singleplayer_world(instance.value.path, world.path).catch(handleJoinError)

apps/app-frontend/src/pages/library/Custom.vue

@@ -10,7 +10,7 @@ defineProps({
 </script>
 <template>
 	<GridDisplay
-		v-if="instances.length > 0"
+		v-if="instances && instances.length > 0"
 		label="Instances"
 		:instances="instances.filter((i) => !i.linked_data)"
 	/>

apps/app-frontend/src/pages/library/Downloaded.vue

@@ -10,7 +10,7 @@ defineProps({
 </script>
 <template>
 	<GridDisplay
-		v-if="instances.length > 0"
+		v-if="instances && instances.length > 0"
 		label="Instances"
 		:instances="instances.filter((i) => i.linked_data)"
 	/>

apps/app-frontend/src/pages/library/Index.vue

@@ -47,7 +47,7 @@ onUnmounted(() => {
 				{ label: 'Saved', href: `/library/saved`, shown: false },
 			]"
 		/>
-		<template v-if="instances.length > 0">
+		<template v-if="instances && instances.length > 0">
 			<RouterView v-if="route.path.startsWith('/library')" :instances="instances" />
 		</template>
 		<div v-else class="no-instance">

apps/app-frontend/src/pages/library/Overview.vue

@@ -9,5 +9,5 @@ defineProps({
 })
 </script>
 <template>
-	<GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
+	<GridDisplay v-if="instances && instances.length > 0" label="Instances" :instances="instances" />
 </template>

apps/app-frontend/src/pages/project/Gallery.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="gallery">
-		<Card v-for="(image, index) in project.gallery" :key="image.url" class="gallery-item">
+		<Card v-for="(image, index) in filteredGallery" :key="image.url" class="gallery-item">
 			<a @click="expandImage(image, index)">
 				<img :src="image.url" :alt="image.title" class="gallery-image" />
 			</a>
@@ -64,14 +64,14 @@
 							<ContractIcon v-else aria-hidden="true" />
 						</Button>
 						<Button
-							v-if="project.gallery.length > 1"
+							v-if="filteredGallery.length > 1"
 							class="previous"
 							icon-only
 							@click="previousImage()"
 						>
 							<LeftArrowIcon aria-hidden="true" />
 						</Button>
-						<Button v-if="project.gallery.length > 1" class="next" icon-only @click="nextImage()">
+						<Button v-if="filteredGallery.length > 1" class="next" icon-only @click="nextImage()">
 							<RightArrowIcon aria-hidden="true" />
 						</Button>
 					</div>
@@ -92,11 +92,13 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { Button, Card } from '@modrinth/ui'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
 
+const MC_SERVER_BANNER_NAME = '__mc_server_banner__'
+
 const props = defineProps({
 	project: {
 		type: Object,
@@ -104,6 +106,10 @@ const props = defineProps({
 	},
 })
 
+const filteredGallery = computed(
+	() => props.project.gallery?.filter((img) => img.title !== MC_SERVER_BANNER_NAME) ?? [],
+)
+
 const expandedGalleryItem = ref(null)
 const expandedGalleryIndex = ref(0)
 const zoomedIn = ref(false)
@@ -115,10 +121,10 @@ const hideImage = () => {
 
 const nextImage = () => {
 	expandedGalleryIndex.value++
-	if (expandedGalleryIndex.value >= props.project.gallery.length) {
+	if (expandedGalleryIndex.value >= filteredGallery.value.length) {
 		expandedGalleryIndex.value = 0
 	}
-	expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
+	expandedGalleryItem.value = filteredGallery.value[expandedGalleryIndex.value]
 	trackEvent('GalleryImageNext', {
 		project_id: props.project.id,
 		url: expandedGalleryItem.value.url,
@@ -128,9 +134,9 @@ const nextImage = () => {
 const previousImage = () => {
 	expandedGalleryIndex.value--
 	if (expandedGalleryIndex.value < 0) {
-		expandedGalleryIndex.value = props.project.gallery.length - 1
+		expandedGalleryIndex.value = filteredGallery.value.length - 1
 	}
-	expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
+	expandedGalleryItem.value = filteredGallery.value[expandedGalleryIndex.value]
 	trackEvent('GalleryImagePrevious', {
 		project_id: props.project.id,
 		url: expandedGalleryItem.value,

apps/app-frontend/src/pages/project/Index.vue

@@ -1,13 +1,31 @@
 <template>
-	<div>
-		<InstallToPlayModal ref="installToPlayModal" :project="data" />
+	<div v-if="data">
 		<Teleport to="#sidebar-teleport-target">
 			<ProjectSidebarCompatibility
+				v-if="!isServerProject"
 				:project="data"
 				:tags="{ loaders: allLoaders, gameVersions: allGameVersions }"
+				:v3-metadata="projectV3"
+				class="project-sidebar-section"
+			/>
+			<ProjectSidebarServerInfo
+				v-if="isServerProject"
+				:project-v3="projectV3"
+				:tags="{ loaders: allLoaders, gameVersions: allGameVersions }"
+				:required-content="serverRequiredContent"
+				:recommended-version="serverRecommendedVersion"
+				:supported-versions="serverSupportedVersions"
+				:loaders="serverModpackLoaders"
+				:ping="serverPing"
+				:status-online="serverStatusOnline"
+				class="project-sidebar-section"
+			/>
+			<ProjectSidebarLinks
+				link-target="_blank"
+				:project="data"
+				:project-v3="projectV3"
 				class="project-sidebar-section"
 			/>
-			<ProjectSidebarLinks link-target="_blank" :project="data" class="project-sidebar-section" />
 			<ProjectSidebarCreators
 				:organization="null"
 				:members="members"
@@ -16,17 +34,16 @@
 				link-target="_blank"
 				class="project-sidebar-section"
 			/>
+			<ProjectSidebarTags :project="data" class="project-sidebar-section" />
 			<ProjectSidebarDetails
 				:project="data"
 				:has-versions="versions.length > 0"
 				:link-target="`_blank`"
+				:hide-license="isServerProject"
 				class="project-sidebar-section"
 			/>
 		</Teleport>
 		<div class="flex flex-col gap-4 p-6">
-			<ButtonStyled v-if="themeStore.featureFlags.server_project_qa">
-				<button @click="installToPlayModal.show()">Install to play modal</button>
-			</ButtonStyled>
 			<InstanceIndicator v-if="instance" :instance="instance" />
 			<template v-if="data">
 				<Teleport
@@ -35,7 +52,67 @@
 				>
 					<ProjectBackgroundGradient :project="data" />
 				</Teleport>
-				<ProjectHeader :project="data" @contextmenu.prevent.stop="handleRightClick">
+				<ServerProjectHeader
+					v-if="isServerProject"
+					:project="data"
+					:project-v3="projectV3"
+					:ping="serverPing"
+					@contextmenu.prevent.stop="handleRightClick"
+				>
+					<template #actions>
+						<ButtonStyled v-if="serverPlaying" size="large" color="red">
+							<button @click="handleStopServer">
+								<StopCircleIcon />
+								Stop
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-else size="large" color="brand">
+							<button
+								:disabled="data && installStore.installingServerProjects.includes(data.id)"
+								@click="handleClickPlay"
+							>
+								<PlayIcon />
+								{{
+									data && installStore.installingServerProjects.includes(data.id)
+										? 'Installing...'
+										: 'Play'
+								}}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled size="large" circular type="transparent">
+							<button v-tooltip="'Add server to instance'" @click="handleAddServerToInstance">
+								<PlusIcon />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled size="large" circular type="transparent">
+							<OverflowMenu
+								:tooltip="`More options`"
+								:options="[
+									{
+										id: 'open-in-browser',
+										link: `https://modrinth.com/project/${data.slug}`,
+										external: true,
+									},
+									{
+										divider: true,
+									},
+									{
+										id: 'report',
+										color: 'red',
+										hoverFilled: true,
+										link: `https://modrinth.com/report?item=project&itemID=${data.id}`,
+									},
+								]"
+								aria-label="More options"
+							>
+								<MoreVerticalIcon aria-hidden="true" />
+								<template #open-in-browser> <ExternalIcon /> Open in browser </template>
+								<template #report> <ReportIcon /> Report </template>
+							</OverflowMenu>
+						</ButtonStyled>
+					</template>
+				</ServerProjectHeader>
+				<ProjectHeader v-else :project="data" @contextmenu.prevent.stop="handleRightClick">
 					<template #actions>
 						<ButtonStyled size="large" color="brand">
 							<button
@@ -103,6 +180,7 @@
 								query: instanceFilters,
 							},
 							subpages: ['version'],
+							shown: projectV3?.minecraft_server == null,
 						},
 						{
 							label: 'Gallery',
@@ -112,6 +190,7 @@
 					]"
 				/>
 				<RouterView
+					v-if="route.path.startsWith('/project')"
 					:project="data"
 					:versions="versions"
 					:members="members"
@@ -142,7 +221,10 @@ import {
 	GlobeIcon,
 	HeartIcon,
 	MoreVerticalIcon,
+	PlayIcon,
+	PlusIcon,
 	ReportIcon,
+	StopCircleIcon,
 } from '@modrinth/assets'
 import {
 	ButtonStyled,
@@ -154,22 +236,43 @@ import {
 	ProjectSidebarCreators,
 	ProjectSidebarDetails,
 	ProjectSidebarLinks,
+	ProjectSidebarServerInfo,
+	ProjectSidebarTags,
+	ServerProjectHeader,
 } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed, ref, shallowRef, watch } from 'vue'
+import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
-import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
-import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
+import {
+	get_project,
+	get_project_v3,
+	get_team,
+	get_version,
+	get_version_many,
+} from '@/helpers/cache.js'
+import { process_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import {
+	get as getInstance,
+	get_projects as getInstanceProjects,
+	kill,
+	list as listInstances,
+} from '@/helpers/profile'
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
+import { get_server_status } from '@/helpers/worlds'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { install as installVersion } from '@/store/install.js'
+import {
+	getServerAddress,
+	install as installVersion,
+	playServerProject,
+	useInstall,
+} from '@/store/install.js'
 import { useTheming } from '@/store/state.js'
 
 dayjs.extend(relativeTime)
@@ -180,6 +283,7 @@ const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 
+const installStore = useInstall()
 const installing = ref(false)
 const data = shallowRef(null)
 const versions = shallowRef([])
@@ -190,8 +294,16 @@ const instanceProjects = ref(null)
 
 const installed = ref(false)
 const installedVersion = ref(null)
-
-const installToPlayModal = ref()
+const isServerProject = ref(false)
+const projectV3 = shallowRef(null)
+const serverRequiredContent = shallowRef(null)
+const serverRecommendedVersion = shallowRef(null)
+const serverSupportedVersions = shallowRef([])
+const serverModpackLoaders = shallowRef([])
+const serverPing = ref(undefined)
+const serverStatusOnline = ref(false)
+const serverInstancePath = ref(null)
+const serverPlaying = ref(false)
 
 const instanceFilters = computed(() => {
 	if (!instance.value) {
@@ -216,8 +328,41 @@ const [allLoaders, allGameVersions] = await Promise.all([
 	get_game_versions().catch(handleError).then(ref),
 ])
 
+async function handleClickPlay() {
+	if (!isServerProject.value) return
+	await playServerProject(data.value.id).catch(handleError)
+	await updateServerPlayState()
+}
+
+async function updateServerPlayState() {
+	if (!isServerProject.value || !data.value) return
+	const packs = await listInstances()
+	const inst = packs.find((p) => p.linked_data?.project_id === data.value.id)
+	if (inst) {
+		serverInstancePath.value = inst.path
+		const processes = await get_by_profile_path(inst.path).catch(() => [])
+		serverPlaying.value = Array.isArray(processes) && processes.length > 0
+	} else {
+		serverInstancePath.value = null
+		serverPlaying.value = false
+	}
+}
+
+async function handleStopServer() {
+	if (!serverInstancePath.value) return
+	await kill(serverInstancePath.value).catch(() => {})
+	serverPlaying.value = false
+}
+
+function handleAddServerToInstance() {
+	const address = getServerAddress(projectV3.value?.minecraft_java_server)
+	if (!address || !data.value) return
+	installStore.showAddServerToInstanceModal(data.value.title, address)
+}
+
 async function fetchProjectData() {
 	const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)
+	projectV3.value = await get_project_v3(route.params.id, 'must_revalidate').catch(handleError)
 
 	if (!project) {
 		handleError('Error loading project')
@@ -245,11 +390,86 @@ async function fetchProjectData() {
 			installedVersion.value = installedFile.metadata.version_id
 		}
 	}
+
+	isServerProject.value = projectV3.value?.minecraft_server != null
+
+	// Ping server for latency
+	const serverAddress = projectV3.value?.minecraft_java_server?.address
+	serverStatusOnline.value = !!projectV3.value?.minecraft_java_server?.ping?.data
+	if (serverAddress) {
+		serverPing.value = undefined
+		get_server_status(serverAddress)
+			.then((status) => {
+				if (status.ping != null) {
+					serverPing.value = status.ping
+				}
+			})
+			.catch((err) => {
+				console.error(`Failed to ping server ${serverAddress}:`, err)
+			})
+	}
+
+	// Fetch server sidebar data (modpack version + project)
+	const content = projectV3.value?.minecraft_java_server?.content
+	if (content?.kind === 'modpack' && content.version_id) {
+		const modpackVersion = await get_version(content.version_id, 'bypass').catch(handleError)
+		if (modpackVersion) {
+			serverRecommendedVersion.value = modpackVersion.game_versions?.[0] ?? null
+			serverModpackLoaders.value = modpackVersion.mrpack_loaders ?? []
+			if (modpackVersion.project_id) {
+				const modpackProject = await get_project_v3(
+					modpackVersion.project_id,
+					'must_revalidate',
+				).catch(handleError)
+				if (modpackProject) {
+					const primaryFile =
+						modpackVersion.files?.find((f) => f.primary) ?? modpackVersion.files?.[0]
+
+					serverRequiredContent.value = {
+						name: modpackProject.name,
+						versionNumber: modpackVersion.version_number ?? '',
+						icon: modpackProject.icon_url,
+						onclickName:
+							modpackProject.id !== project.id
+								? () => router.push(`/project/${modpackProject.id}`)
+								: undefined,
+						onclickVersion:
+							modpackProject.id !== project.id
+								? () => router.push(`/project/${modpackProject.id}/version/${modpackVersion.id}`)
+								: undefined,
+						onclickDownload: primaryFile?.url ? () => openUrl(primaryFile.url) : undefined,
+						showCustomModpackTooltip: modpackProject.id === project.id,
+					}
+				}
+			}
+		}
+	} else if (content?.kind === 'vanilla') {
+		serverRecommendedVersion.value = content.recommended_game_version ?? null
+		const supported = content.supported_game_versions ?? []
+		serverSupportedVersions.value = supported.filter((v) => !!v)
+	}
+
 	breadcrumbs.setName('Project', data.value.title)
+
+	await updateServerPlayState()
 }
 
 await fetchProjectData()
 
+const unlistenProcesses = await process_listener((e) => {
+	if (
+		e.event === 'finished' &&
+		serverInstancePath.value &&
+		e.profile_path_id === serverInstancePath.value
+	) {
+		serverPlaying.value = false
+	}
+})
+
+onUnmounted(() => {
+	unlistenProcesses()
+})
+
 watch(
 	() => route.params.id,
 	async () => {