remove unneeded recursion lmit

* Improve language selector

* Add Germany to German

* Run prepr:frontend

* Remove `'` in icon map

* Add Italy to Italian

.claude/skills/api-module/SKILL.md

@@ -0,0 +1,156 @@
+# Adding a New API Module
+
+How to add a new API endpoint module to `packages/api-client`.
+
+## Steps
+
+### 1. Define types in the module's `types.ts`
+
+Types must match 1:1 with the backend API response. Do not reshape, rename, or omit fields.
+
+Add to an existing namespace or create a new one:
+
+```ts
+// modules/labrinth/types.ts (existing namespace)
+export namespace Labrinth {
+	export namespace MyDomain {
+		export namespace v3 {
+			export type Thing = {
+				id: string
+				name: string
+				created: string
+				// ... matches API response exactly
+			}
+
+			export type CreateThingRequest = {
+				name: string
+			}
+		}
+	}
+}
+```
+
+For a new API service, create `modules/<service>/types.ts` with a new top-level namespace and re-export it from `modules/types.ts`.
+
+### 2. Create the module class
+
+Create `modules/<api>/<domain>/v<N>.ts`:
+
+```ts
+// modules/labrinth/things/v3.ts
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Labrinth } from '../types'
+
+export class LabrinthThingsV3Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'labrinth_things_v3'
+	}
+
+	public async get(id: string): Promise<Labrinth.MyDomain.v3.Thing> {
+		return this.client.request<Labrinth.MyDomain.v3.Thing>(`/thing/${id}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'GET',
+		})
+	}
+
+	public async create(data: Labrinth.MyDomain.v3.CreateThingRequest): Promise<Labrinth.MyDomain.v3.Thing> {
+		return this.client.request<Labrinth.MyDomain.v3.Thing>(`/thing`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'POST',
+			body: data,
+		})
+	}
+
+	public async delete(id: string): Promise<void> {
+		return this.client.request(`/thing/${id}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'DELETE',
+		})
+	}
+}
+```
+
+#### Request options
+
+| Field | Values | Purpose |
+|-------|--------|---------|
+| `api` | `'labrinth'`, `'archon'`, or a full URL | Which base URL to use |
+| `version` | `2`, `3`, `'internal'`, `'modrinth/v0'`, etc. | URL version segment |
+| `method` | `'GET'`, `'POST'`, `'PUT'`, `'PATCH'`, `'DELETE'` | HTTP method |
+| `body` | object | JSON request body |
+| `params` | `Record<string, string>` | Query parameters |
+| `skipAuth` | `boolean` | Skip auth feature for this request |
+| `useNodeAuth` | `boolean` | Use node-level auth (kyros) |
+| `timeout` | `number` | Request timeout in ms |
+| `retry` | `boolean \| number` | Override retry behavior |
+
+#### For uploads
+
+Return an `UploadHandle` instead of a `Promise`:
+
+```ts
+public uploadThing(id: string, file: File): UploadHandle<void> {
+	return this.client.upload<void>(`/thing/${id}/file`, {
+		api: 'labrinth',
+		version: 3,
+		file,
+	})
+}
+
+// Or with FormData for multipart:
+public createWithFiles(data: CreateRequest, files: File[]): UploadHandle<Thing> {
+	const formData = new FormData()
+	formData.append('data', JSON.stringify(data))
+	files.forEach((f, i) => formData.append(`file-${i}`, f, f.name))
+
+	return this.client.upload<Thing>(`/thing`, {
+		api: 'labrinth',
+		version: 3,
+		formData,
+		timeout: 60 * 5 * 1000,  // longer timeout for uploads
+	})
+}
+```
+
+### 3. Register in the MODULE_REGISTRY
+
+Add to `modules/index.ts`:
+
+```ts
+import { LabrinthThingsV3Module } from './labrinth/things/v3'
+
+export const MODULE_REGISTRY = {
+	// ... existing modules
+	labrinth_things_v3: LabrinthThingsV3Module,
+} as const
+```
+
+The naming convention is `<api>_<domain>_<version>`. This flat key gets transformed into nested access: `client.labrinth.things_v3`.
+
+### 4. Export types
+
+If you added to an existing namespace, types are already re-exported. If you created a new `types.ts`, add it to `modules/types.ts`:
+
+```ts
+export * from './<service>/types'
+```
+
+## Naming Conventions
+
+| Convention | Example |
+|-----------|---------|
+| Module class | `LabrinthThingsV3Module` — `{Api}{Domain}V{N}Module` |
+| Module ID | `labrinth_things_v3` — `{api}_{domain}_v{n}` |
+| Type namespace | `Labrinth.MyDomain.v3.Thing` |
+| File path | `modules/labrinth/things/v3.ts` |
+
+## Key Files
+
+- `src/core/abstract-module.ts` — base class all modules extend
+- `src/core/abstract-client.ts` — `request()` and `upload()` methods
+- `src/modules/index.ts` — `MODULE_REGISTRY` and `buildModuleStructure()`
+- `src/modules/<api>/types.ts` — type definitions per API
+- `src/types/upload.ts` — `UploadHandle`, `UploadProgress`, `UploadRequestOptions`

.claude/skills/cross-platform-pages/SKILL.md

@@ -0,0 +1,144 @@
+# Cross-Platform Page System
+
+When a page needs to exist in both the Modrinth App (`apps/app-frontend`) and the Modrinth Website (`apps/frontend`), use the cross-platform page system.
+
+## How It Works
+
+1. **Pages live as Vue SFCs in `packages/ui`** — either in `src/pages/` or `src/layout/` (if `src/pages/` doesn't exist, it's been renamed to `src/layout/`).
+2. **Platform-dependent data flows via DI** — the app uses Tauri `invoke` commands, the website uses `api-client` or the legacy `useBaseFetch` composable. The shared page never knows which. See the `dependency-injection` skill for full DI docs.
+3. **Non-platform-dependent data flows via props** — if data doesn't change based on _how_ it's fetched, just pass it as a prop.
+
+## Example: Content Page
+
+`ContentPageLayout` demonstrates the full pattern.
+
+### 1. Define a DI contract in `packages/ui/src/providers/`
+
+The provider interface abstracts all platform-specific operations:
+
+```ts
+// packages/ui/src/providers/content-manager.ts
+export interface ContentManagerContext {
+	items: Ref<ContentItem[]>
+	loading: Ref<boolean>
+	error: Ref<Error | null>
+	contentTypeLabel: Ref<string>
+
+	// These are the platform-abstracted operations:
+	// App uses invoke(), website uses api-client
+	toggleEnabled: (item: ContentItem) => Promise<void>
+	deleteItem: (item: ContentItem) => Promise<void>
+	refresh: () => Promise<void>
+	browse: () => void
+	uploadFiles: () => void
+
+	// Optional capabilities — not every platform supports everything
+	hasUpdateSupport: boolean
+	updateItem?: (item: ContentItem) => Promise<void>
+	bulkUpdateItem?: (items: ContentItem[]) => Promise<void>
+
+	mapToTableItem: (item: ContentItem) => ContentCardTableItem
+}
+
+export const [injectContentManager, provideContentManager] =
+	createContext<ContentManagerContext>('ContentManager')
+```
+
+### 2. Build the shared page in `packages/ui`
+
+The page component injects the context and handles all UI logic (search, filtering, selection, bulk operations, empty states, modals) without knowing the platform:
+
+```vue
+<!-- packages/ui/src/components/instances/ContentPageLayout.vue -->
+<script setup lang="ts">
+import { injectContentManager } from '../../providers/content-manager'
+
+const { items, loading, toggleEnabled, deleteItem, refresh, mapToTableItem } =
+	injectContentManager()
+
+// All UI logic lives here — search, filters, sort, bulk ops, etc.
+</script>
+
+<template>
+	<ContentCardTable :items="filteredItems" />
+</template>
+```
+
+### 3. Each platform provides its implementation
+
+**Website (Nuxt)** — uses `api-client` or `useBaseFetch`:
+
+```vue
+<!-- apps/frontend/src/pages/hosting/manage/[id]/content.vue -->
+<script setup lang="ts">
+import { provideContentManager, ContentPageLayout } from '@modrinth/ui'
+const { labrinth } = injectModrinthClient()
+
+const { data: items } = useQuery({
+	queryKey: ['content', serverId],
+	queryFn: () => labrinth.servers_v0.getAddons(serverId),
+})
+
+provideContentManager({
+	items: computed(() => items.value?.map(addonToContentItem) ?? []),
+	deleteItem: async (item) => {
+		await labrinth.servers_v0.deleteAddon(serverId, item.id)
+	},
+	// ... rest of the contract
+})
+</script>
+
+<template>
+	<ContentPageLayout />
+</template>
+```
+
+**App (Tauri)** — uses `invoke`:
+
+```vue
+<!-- apps/app-frontend/src/pages/instance/Content.vue -->
+<script setup lang="ts">
+import { provideContentManager, ContentPageLayout } from '@modrinth/ui'
+import { invoke } from '@tauri-apps/api/core'
+
+const items = ref<ContentItem[]>([])
+await invoke('get_instance_content', { instanceId }).then(/* map to ContentItem[] */)
+
+provideContentManager({
+	items,
+	deleteItem: async (item) => {
+		await invoke('delete_content', { instanceId, path: item.file_path })
+	},
+	// ... rest of the contract
+})
+</script>
+
+<template>
+	<ContentPageLayout />
+</template>
+```
+
+## When to Use Props vs DI
+
+| Use       | When                                                                                                     |
+| --------- | -------------------------------------------------------------------------------------------------------- |
+| **DI**    | The data depends on _how_ it's fetched (different per platform) — API calls, file operations, navigation |
+| **Props** | The data is the same regardless of platform — configuration flags, display options                       |
+
+## Composables for Shared Logic
+
+Extract reusable stateful logic into composables in `packages/ui/src/composables/`. The shared page orchestrates them internally:
+
+- Search (Fuse.js fuzzy search over items)
+- Filtering (dynamic filter pills)
+- Selection (multi-select with bulk operations)
+- Bulk operations (sequential execution with progress tracking)
+
+## Key Files
+
+- `packages/ui/src/pages/` (or `src/layout/`) — shared page components
+- `packages/ui/src/providers/` — DI contracts
+- `packages/ui/src/composables/` — shared stateful logic
+- `apps/frontend/src/app.vue` — website root provider setup
+- `apps/app-frontend/src/App.vue` — app root provider setup
+- `apps/app-frontend/src/routes.js` — app route definitions

.claude/skills/dependency-injection/SKILL.md

@@ -0,0 +1,174 @@
+# Dependency Injection
+
+Modrinth uses a lightweight DI layer built on Vue's `provide`/`inject` for sharing platform-specific capabilities and page-level state across shared UI components.
+
+## The `createContext` Factory
+
+All providers are defined using `createContext` from `packages/ui/src/providers/index.ts` (adapted from Reka UI). It produces a typed `[inject, provide]` tuple:
+
+```ts
+import { createContext } from '@modrinth/ui'
+
+interface MyContext {
+	someValue: Ref<string>
+	doSomething: () => void
+}
+
+export const [injectMyContext, provideMyContext] = createContext<MyContext>('MyComponent')
+```
+
+- **`provideMyContext(value)`** — call in a parent component's `setup()`.
+- **`injectMyContext()`** — call in any descendant's `setup()`. Throws if never provided.
+- **`injectMyContext(null)`** — returns `null` instead of throwing (for optional contexts).
+
+## When to Use DI
+
+Use DI when:
+- **The same interface needs different implementations** depending on the platform (web vs desktop app).
+- **Deeply nested components** need access to shared page-level state without prop drilling through 3+ levels.
+
+### Platform Abstraction (Primary Use Case)
+
+`packages/ui` components need capabilities that each frontend fulfils differently:
+
+| Provider | App Frontend | Website Frontend |
+|----------|-------------|-----------------|
+| API client | Tauri IPC client | REST fetch client |
+| Notifications | `ref()` state + app window mgmt | `useState()` for SSR hydration |
+| File picker | Native Tauri dialogs | Browser file inputs |
+| Tags | Tauri commands | Nuxt server state |
+| Page context | `sidebar: true`, ad window hooks | `sidebar: false`, no ads |
+
+### Page-Level Context
+
+Sharing data between a page and deeply nested children — e.g. project page data consumed by sidebar, header, and version components.
+
+## Creating a New Provider
+
+### 1. Define the interface in `packages/ui/src/providers/`
+
+```ts
+// packages/ui/src/providers/my-feature.ts
+import type { Ref } from 'vue'
+import { createContext } from '.'
+
+export interface MyFeatureContext {
+	items: Ref<Item[]>
+	addItem: (item: Item) => Promise<void>
+	removeItem: (id: string) => Promise<void>
+}
+
+export const [injectMyFeature, provideMyFeature] = createContext<MyFeatureContext>('MyFeature')
+```
+
+Re-export from the barrel file (`packages/ui/src/providers/index.ts`).
+
+### 2. For complex platform-specific logic, use an abstract class
+
+```ts
+export abstract class AbstractMyFeatureManager {
+	abstract items: Ref<Item[]>
+	abstract addItem(item: Item): Promise<void>
+
+	// Shared logic lives on the base class
+	handleError(err: unknown) {
+		console.error(err)
+	}
+}
+
+export const [injectMyFeature, provideMyFeature] =
+	createContext<AbstractMyFeatureManager>('MyFeature')
+```
+
+See `AbstractWebNotificationManager` in `packages/ui/src/providers/web-notifications.ts` for a real example.
+
+## Wiring Up Providers
+
+### App Frontend (Tauri)
+
+Create a setup function in `apps/app-frontend/src/providers/setup/`:
+
+```ts
+// apps/app-frontend/src/providers/setup/my-feature.ts
+import { ref } from 'vue'
+import { provideMyFeature } from '@modrinth/ui'
+
+export function setupMyFeatureProvider() {
+	const items = ref<Item[]>([])
+
+	provideMyFeature({
+		items,
+		addItem: async (item) => {
+			await invoke('add_item', { item })
+			items.value.push(item)
+		},
+		removeItem: async (id) => {
+			await invoke('remove_item', { id })
+			items.value = items.value.filter(i => i.id !== id)
+		},
+	})
+}
+```
+
+Register it in `apps/app-frontend/src/providers/setup.ts`, which is called from `App.vue`'s `setup()`.
+
+### Website Frontend (Nuxt)
+
+Provide directly in `apps/frontend/src/app.vue`, using Nuxt's `useState()` where SSR hydration is needed:
+
+```ts
+provideMyFeature({
+	items: useState<Item[]>('my-feature-items', () => []),
+	addItem: async (item) => {
+		await $fetch('/api/items', { method: 'POST', body: item })
+	},
+	removeItem: async (id) => {
+		await $fetch(`/api/items/${id}`, { method: 'DELETE' })
+	},
+})
+```
+
+## Consuming Providers
+
+In any component across `packages/ui`, `apps/frontend`, or `apps/app-frontend`:
+
+```vue
+<script setup lang="ts">
+import { injectMyFeature } from '@modrinth/ui'
+
+const { items, addItem } = injectMyFeature()
+</script>
+
+<template>
+	<div v-for="item in items" :key="item.id">{{ item.name }}</div>
+	<button @click="addItem({ id: '1', name: 'New' })">Add</button>
+</template>
+```
+
+## When NOT to Use DI
+
+Default to props and emits. DI adds indirection — only use it with a concrete reason.
+
+- **Parent to direct child** — use props.
+- **Data only exists in one frontend** — keep context local to that app, not in `packages/ui`.
+- **Shallow prop drilling (1–2 levels)** — passing through one intermediate is fine.
+- **Component-local state** — use `ref()` / `reactive()` locally.
+
+## Existing Providers
+
+| Provider | File | Purpose |
+|----------|------|---------|
+| `provideModrinthClient` | `providers/api-client.ts` | API client instance |
+| `provideNotificationManager` | `providers/web-notifications.ts` | Notification management |
+| `providePageContext` | `providers/page-context.ts` | Page config (sidebar, ads) |
+| `provideProjectPageContext` | `providers/project-page.ts` | Project page state + mutations |
+| `provideServerContext` | `providers/server-context.ts` | Server hosting state |
+| `provideUserPageContext` | `providers/user-page.ts` | User page state |
+
+## Key Files
+
+- `packages/ui/src/providers/index.ts` — `createContext` factory + barrel exports
+- `packages/ui/src/providers/*.ts` — Provider definitions
+- `apps/frontend/src/app.vue` — Nuxt root provider setup
+- `apps/app-frontend/src/App.vue` — Tauri root provider setup
+- `apps/app-frontend/src/providers/setup/` — App provider setup functions

.claude/skills/figma-mcp/SKILL.md

@@ -0,0 +1,45 @@
+# Figma MCP Usage
+
+When the Figma MCP server is connected, use it to translate Figma designs into production-ready Vue components for this monorepo.
+
+## Workflow
+
+### 1. Get the design context
+
+Use `get_design_context` with the node ID from a Figma URL. If the URL is `https://figma.com/design/:fileKey/:fileName?node-id=1-2`, the node ID is `1:2`.
+
+```
+get_design_context(nodeId: "1:2", clientLanguages: "typescript,html,css", clientFrameworks: "vue")
+```
+
+This returns reference code, a screenshot, and metadata. Always start here.
+
+### 2. Get a screenshot for visual reference
+
+Use `get_screenshot` if you need to see the design without full code context:
+
+```
+get_screenshot(nodeId: "1:2")
+```
+
+### 3. Get variable definitions
+
+Use `get_variable_defs` to see what design tokens are applied to a node:
+
+```
+get_variable_defs(nodeId: "1:2")
+```
+
+### 4. Get metadata for structure overview
+
+Use `get_metadata` to get an XML overview of node IDs, layer types, names, positions and sizes — useful for understanding the structure of a complex frame before diving into individual nodes.
+
+## Adapting Figma Output
+
+The Figma MCP returns generic reference code. Adapt it to match the Modrinth codebase:
+
+1. **Read `packages/ui/CLAUDE.md`** for color usage rules, surface token mapping, and component patterns.
+2. **Map Figma color variables to `surface-*` tokens** — never use Figma's aliased names like `bg/default` or `bg/raised` directly. The CLAUDE.md has the full mapping table.
+3. **Check `packages/assets/styles/variables.scss`** for tokens not exposed in Figma (brand highlights, semantic backgrounds, shadows).
+4. **Check for existing components** in `packages/ui/src/components/` before building from scratch.
+5. **Match spacing exactly** — do not approximate values from the design.

.claude/skills/i18n-convert/SKILL.md

@@ -0,0 +1,105 @@
+# i18n String Conversion
+
+Convert hard-coded natural-language strings in Vue SFCs into the localization system using utilities from `@modrinth/ui`.
+
+## Rules
+
+### 1. Identify translatable strings
+
+- Scan `<template>` for all user-visible strings: inner text, alt attributes, placeholders, button labels, etc.
+- Check `<script>` too: dropdown option labels, notification messages, etc.
+- Do NOT extract dynamic expressions (`{{ user.name }}`) or HTML tags — only static human-readable text.
+
+### 2. Create message definitions
+
+Import `defineMessage` or `defineMessages` from `@modrinth/ui` in `<script setup>`. Define messages with a unique `id` (descriptive prefix based on component path) and `defaultMessage` equal to the original English string:
+
+```ts
+const messages = defineMessages({
+	welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
+	welcomeDescription: { id: 'auth.welcome.description', defaultMessage: "You're now part of the community…" },
+})
+```
+
+### 3. Handle variables and ICU formats
+
+- Dynamic parts become ICU placeholders: `"Hello, ${user.name}!"` → `defaultMessage: 'Hello, {name}!'`
+- Numbers/dates/times use ICU options: `{price, number, ::currency/USD}`
+- Plurals/selects use ICU: `'{count, plural, one {# message} other {# messages}}'`
+
+### 4. Rich-text messages (links/markup)
+
+Wrap link/markup ranges with tags in `defaultMessage`:
+
+```
+"By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
+```
+
+Render with `<IntlFormatted>` from `@modrinth/ui` using named slots:
+
+```vue
+<IntlFormatted :message-id="messages.tosLabel">
+	<template #terms-link="{ children }">
+		<NuxtLink to="/terms">
+			<component :is="() => children" />
+		</NuxtLink>
+	</template>
+	<template #privacy-link="{ children }">
+		<NuxtLink to="/privacy">
+			<component :is="() => children" />
+		</NuxtLink>
+	</template>
+</IntlFormatted>
+```
+
+For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` with a slot:
+
+```vue
+<template #strong="{ children }">
+	<strong><component :is="() => children" /></strong>
+</template>
+```
+
+For complex child handling, use `normalizeChildren` from `@modrinth/ui`:
+
+```vue
+<template #bold="{ children }">
+	<strong><component :is="() => normalizeChildren(children)" /></strong>
+</template>
+```
+
+### 5. Formatting in templates
+
+Use `useVIntl()` from `@modrinth/ui`; prefer `formatMessage` for simple strings:
+
+```ts
+const { formatMessage } = useVIntl()
+```
+
+```vue
+<button>{{ formatMessage(messages.welcomeTitle) }}</button>
+{{ formatMessage(messages.greeting, { name: user.name }) }}
+```
+
+### 6. Naming conventions
+
+Make `id`s descriptive and stable (e.g., `error.generic.default.title`). Group related messages with `defineMessages`.
+
+### 7. Avoid Vue/ICU delimiter collisions
+
+If an ICU placeholder ends right before `}}` in a Vue template, insert a space: `} }` to avoid parsing issues.
+
+### 8. Imports
+
+Ensure these are imported from `@modrinth/ui` as needed: `defineMessage`/`defineMessages`, `useVIntl`, `IntlFormatted`, `normalizeChildren`.
+
+### 9. Preserve functionality
+
+Do not change logic, layout, reactivity, or bindings — only refactor strings into i18n.
+
+## Reference Examples
+
+- Variables/plurals: `apps/frontend/src/pages/frog.vue`
+- Rich-text link tags: `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+
+When finished, there should be no hard-coded English strings left in the template — everything comes from `formatMessage` or `<IntlFormatted>`.

.claude/skills/multistage-modals/SKILL.md

@@ -0,0 +1,215 @@
+# Multistage Modals
+
+The `MultiStageModal` component (`packages/ui/src/components/base/MultiStageModal.vue`) provides a wizard-like modal with progress tracking, conditional stages, and per-stage button configuration.
+
+## Architecture
+
+A multistage modal has three parts:
+
+1. **Context** — A DI provider that holds all state, business logic, and stage configs
+2. **Stage configs** — Data objects describing each stage (title, component, buttons, skip conditions)
+3. **Stage components** — Vue components rendered inside the modal, consuming the context
+
+## Building a Multistage Modal
+
+### 1. Define the context
+
+Create a DI provider with all the state your wizard needs. Include the modal ref and stage configs.
+
+```ts
+// providers/my-feature/my-modal.ts
+import type { ShallowRef } from 'vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+import type { MultiStageModal, StageConfigInput } from '@modrinth/ui'
+import { createContext } from '@modrinth/ui'
+
+export interface MyModalContext {
+	// State
+	formData: Ref<MyFormData>
+	isSubmitting: Ref<boolean>
+
+	// Modal control
+	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>
+	stageConfigs: StageConfigInput<MyModalContext>[]
+
+	// Business logic
+	handleSubmit: () => Promise<void>
+}
+
+export const [injectMyModalContext, provideMyModalContext] =
+	createContext<MyModalContext>('MyModal')
+
+export function createMyModalContext(
+	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>,
+): MyModalContext {
+	const formData = ref<MyFormData>({ ... })
+	const isSubmitting = ref(false)
+
+	async function handleSubmit() {
+		isSubmitting.value = true
+		try {
+			await saveData(formData.value)
+			modal.value?.hide()
+		} finally {
+			isSubmitting.value = false
+		}
+	}
+
+	return { formData, isSubmitting, modal, stageConfigs, handleSubmit }
+}
+```
+
+### 2. Define stage configs
+
+Each stage is a `StageConfigInput<T>` where `T` is your context type. Most fields accept either a static value or a function receiving the context (`MaybeCtxFn<T, R>`).
+
+```ts
+// providers/my-feature/stages/details-stage.ts
+import { markRaw } from 'vue'
+import type { StageConfigInput } from '@modrinth/ui'
+import type { MyModalContext } from '../my-modal'
+import DetailsStage from './DetailsStage.vue'
+import { RightArrowIcon, SaveIcon } from '@modrinth/assets'
+
+export const detailsStageConfig: StageConfigInput<MyModalContext> = {
+	id: 'details',
+	stageContent: markRaw(DetailsStage),
+	title: 'Details',
+
+	// Conditional behavior based on context
+	skip: (ctx) => ctx.shouldSkipDetails.value,
+	cannotNavigateForward: (ctx) => !ctx.formData.value.name,
+	disableClose: (ctx) => ctx.isSubmitting.value,
+
+	leftButtonConfig: (ctx) => ({
+		label: 'Cancel',
+		onClick: () => ctx.modal.value?.hide(),
+	}),
+
+	rightButtonConfig: (ctx) => ({
+		label: 'Next',
+		icon: RightArrowIcon,
+		iconPosition: 'after',
+		disabled: !ctx.formData.value.name,
+		onClick: () => ctx.modal.value?.nextStage(),
+	}),
+}
+```
+
+**Stage config fields:**
+
+| Field | Type | Purpose |
+|-------|------|---------|
+| `id` | `string` | Unique stage identifier (used with `setStage()`) |
+| `stageContent` | `Component` | Vue component to render (wrap with `markRaw()`) |
+| `title` | `MaybeCtxFn<T, string>` | Stage title in breadcrumbs |
+| `skip` | `MaybeCtxFn<T, boolean>` | Skip this stage conditionally |
+| `nonProgressStage` | `MaybeCtxFn<T, boolean>` | Exclude from progress bar (for edit sub-flows) |
+| `hideStageInBreadcrumb` | `MaybeCtxFn<T, boolean>` | Hide from breadcrumb nav |
+| `cannotNavigateForward` | `MaybeCtxFn<T, boolean>` | Block forward navigation (validation) |
+| `disableClose` | `MaybeCtxFn<T, boolean>` | Disable closing the modal |
+| `leftButtonConfig` | `MaybeCtxFn<T, StageButtonConfig \| null>` | Left action button |
+| `rightButtonConfig` | `MaybeCtxFn<T, StageButtonConfig \| null>` | Right action button |
+| `maxWidth` | `MaybeCtxFn<T, string>` | Per-stage max width (default `560px`) |
+
+**Button config fields:**
+
+| Field | Purpose |
+|-------|---------|
+| `label` | Button text |
+| `icon` | Icon component |
+| `iconPosition` | `'before'` or `'after'` |
+| `color` | ButtonStyled color prop |
+| `disabled` | Disable the button |
+| `onClick` | Click handler |
+
+### 3. Create stage components
+
+Stage components inject the context and render their UI:
+
+```vue
+<!-- providers/my-feature/stages/DetailsStage.vue -->
+<script setup lang="ts">
+import { injectMyModalContext } from '../my-modal'
+
+const { formData } = injectMyModalContext()
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<StyledInput v-model="formData.name" label="Name" />
+		<StyledInput v-model="formData.description" label="Description" />
+	</div>
+</template>
+```
+
+### 4. Create the wrapper component
+
+The wrapper provides context and renders `MultiStageModal`:
+
+```vue
+<!-- components/MyModalWrapper.vue -->
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { MultiStageModal } from '@modrinth/ui'
+import { createMyModalContext, provideMyModalContext } from '../providers/my-feature/my-modal'
+
+const modal = shallowRef<InstanceType<typeof MultiStageModal> | null>(null)
+const ctx = createMyModalContext(modal)
+provideMyModalContext(ctx)
+
+defineExpose({ show: () => modal.value?.show() })
+</script>
+
+<template>
+	<MultiStageModal ref="modal" :stages="ctx.stageConfigs" :context="ctx" />
+</template>
+```
+
+## Modal API
+
+`MultiStageModal` exposes via ref:
+
+| Method/Property | Description |
+|----------------|-------------|
+| `show()` | Open the modal |
+| `hide()` | Close the modal |
+| `setStage(indexOrId)` | Jump to stage by index or string id |
+| `nextStage()` | Advance to next non-skipped stage |
+| `prevStage()` | Go back to previous stage |
+| `currentStageIndex` | Ref to current stage index |
+
+## Non-Progress Stages (Edit Sub-Flows)
+
+For stages that shouldn't appear in the progress bar (e.g. editing a specific field from a summary page):
+
+```ts
+export const editLoadersStageConfig: StageConfigInput<MyContext> = {
+	id: 'edit-loaders',
+	nonProgressStage: true,
+	stageContent: markRaw(EditLoadersStage),
+	title: 'Edit loaders',
+	leftButtonConfig: (ctx) => ({
+		label: 'Back',
+		onClick: () => ctx.modal.value?.setStage('summary'),
+	}),
+	rightButtonConfig: (ctx) => ({
+		...ctx.saveButtonConfig(),
+		label: 'Save',
+	}),
+}
+```
+
+Navigate to it with `modal.value?.setStage('edit-loaders')` — it won't affect the progress indicator.
+
+## Reference Implementation
+
+The version creation/edit modal is the most complete example:
+
+| File | Purpose |
+|------|---------|
+| `apps/frontend/src/providers/version/manage-version-modal.ts` | Context creation + business logic |
+| `apps/frontend/src/providers/version/stages/index.ts` | Stage config barrel export |
+| `apps/frontend/src/providers/version/stages/*-stage.ts` | Individual stage configs |
+
+The context includes computed properties for conditional UI, watchers for auto-fetching dependencies, loading states for granular button disabling, and both "create" and "edit" flows sharing the same stages with different button configs.

.claude/skills/tanstack-query/SKILL.md

@@ -0,0 +1,154 @@
+# TanStack Query
+
+TanStack Query (`@tanstack/vue-query` v5) is used for server state management — caching, background refetching, and cache invalidation. Use it instead of manual `ref()` + `await` patterns for any data that comes from an API.
+
+A TanStack MCP server is available — use `tanstack_doc` and `tanstack_search_docs` tools to look up API details when needed.
+
+## Setup
+
+TanStack Query is configured in `apps/frontend/src/plugins/tanstack.ts` as a Nuxt plugin with SSR hydration support. Default stale time is 5 seconds. The `QueryClient` is available via `useQueryClient()` or `useAppQueryClient()` (which also works in middleware).
+
+## Queries
+
+Use `useQuery` with the api-client for data fetching:
+
+```ts
+const client = injectModrinthClient()
+
+const { data, isPending, isError, error } = useQuery({
+	queryKey: ['project', 'v3', projectId],
+	queryFn: () => client.labrinth.projects_v3.get(projectId),
+	staleTime: 1000 * 60 * 5,
+})
+```
+
+In templates:
+
+```vue
+<span v-if="isPending">Loading...</span>
+<span v-else-if="isError">Error: {{ error.message }}</span>
+<div v-else>{{ data.title }}</div>
+```
+
+### Query Option Factories
+
+For queries used across multiple components, define reusable query option factories in `packages/ui/src/queries/`:
+
+```ts
+// composables/queries/project.ts
+export const STALE_TIME = 1000 * 60 * 5
+export const STALE_TIME_LONG = 1000 * 60 * 10
+
+export const projectQueryOptions = {
+	v3: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', 'v3', projectId] as const,
+		queryFn: () => client.labrinth.projects_v3.get(projectId),
+		staleTime: STALE_TIME,
+	}),
+
+	members: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', projectId, 'members'] as const,
+		queryFn: () => client.labrinth.projects_v3.getMembers(projectId),
+		staleTime: STALE_TIME,
+	}),
+}
+```
+
+Then use them:
+
+```ts
+const { data } = useQuery(projectQueryOptions.v3(projectId, client))
+```
+
+### Conditional Queries
+
+Use `enabled` as a computed for queries that depend on other data:
+
+```ts
+const { data: members } = useQuery({
+	queryKey: ['project', projectId, 'members'],
+	queryFn: () => client.labrinth.projects_v3.getMembers(projectId),
+	enabled: computed(() => !!projectId.value),
+})
+```
+
+## Mutations
+
+Use `useMutation` for create/update/delete operations. Invalidate related queries on success:
+
+```ts
+const queryClient = useQueryClient()
+const client = injectModrinthClient()
+
+const createMutation = useMutation({
+	mutationFn: (name: string) => client.archon.backups_v0.create(serverId, { name }),
+	onSuccess: () => queryClient.invalidateQueries({ queryKey: ['backups', 'list', serverId] }),
+})
+```
+
+Use `createMutation.isPending.value` to disable buttons during submission.
+
+### Optimistic Updates
+
+For mutations where responsiveness matters, use optimistic updates with rollback:
+
+```ts
+const patchMutation = useMutation({
+	mutationFn: async ({ projectId, data }) => {
+		await client.labrinth.projects_v3.patch(projectId, data)
+		return data
+	},
+
+	onMutate: async ({ projectId, data }) => {
+		await queryClient.cancelQueries({ queryKey: ['project', 'v3', projectId] })
+		const previous = queryClient.getQueryData(['project', 'v3', projectId])
+
+		queryClient.setQueryData(['project', 'v3', projectId], (old) => {
+			if (!old) return old
+			return { ...old, ...data }
+		})
+
+		return { previous }
+	},
+
+	onError: (_err, _variables, context) => {
+		if (context?.previous) {
+			queryClient.setQueryData(['project', 'v3', projectId], context.previous)
+		}
+	},
+
+	onSettled: () => {
+		queryClient.invalidateQueries({ queryKey: ['project', 'v3', projectId] })
+	},
+})
+```
+
+## Query Keys
+
+Keys use a hierarchical array pattern:
+
+```ts
+// Resource type → version/qualifier → ID
+['project', 'v3', projectId]
+
+// Resource type → ID → sub-resource
+['project', projectId, 'members']
+['project', projectId, 'versions', 'v3']
+
+// Domain → action → ID
+['backups', 'list', serverId]
+['tech-reviews']
+```
+
+Use `as const` for type safety. Put the resource ID last when possible — this makes partial key matching work for invalidation:
+
+```ts
+// Invalidates all project queries for this ID
+queryClient.invalidateQueries({ queryKey: ['project', projectId] })
+```
+
+## Key Files
+
+- `apps/frontend/src/plugins/tanstack.ts` — QueryClient setup + SSR hydration
+- `apps/frontend/src/composables/query-client.ts` — `useAppQueryClient()` helper
+- `apps/frontend/src/composables/queries/` — reusable query option factories

.github/workflows/theseus-build.yml

@@ -21,6 +21,14 @@ on:
         type: boolean
         default: false
         required: false
+      environment:
+        description: Environment
+        type: choice
+        options:
+          - prod
+          - staging
+        default: prod
+        required: false
 
 jobs:
   build:
@@ -94,12 +102,14 @@ jobs:
         shell: bash
         run: |
           APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
+          BUILD_ENVIRONMENT="${{ inputs.environment || 'prod' }}"
           echo "Setting application version to $APP_VERSION"
+          echo "Using environment $BUILD_ENVIRONMENT"
           dasel put -f apps/app/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
           dasel put -f packages/app-lib/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
           dasel put -f apps/app-frontend/package.json -t string -v "${APP_VERSION#v}" 'version'
 
-          cp packages/app-lib/.env.prod packages/app-lib/.env
+          cp "packages/app-lib/.env.${BUILD_ENVIRONMENT}" packages/app-lib/.env
 
       - name: Setup Turbo cache
         uses: rharkor/caching-for-turbo@v1.8

.gitignore

@@ -64,7 +64,8 @@ generated
 app-playground-data/*
 
 .astro
-.claude
+.claude/*
+!.claude/skills/
 .letta
 
 # labrinth demo fixtures

AGENTS.md

@@ -0,0 +1 @@
+See [CLAUDE.md](./CLAUDE.md) for all project instructions and guidelines.

CLAUDE.md

@@ -1,63 +1,98 @@
-# Architecture
+# Modrinth Monorepo
 
-Use TAB instead of spaces.
+This is the Modrinth monorepo — it contains all Modrinth projects, both frontend and backend. When entering a project, either to edit or analyse, you should read it's CLAUDE.md.
 
-## Frontend
+## Architecture
 
-There are two similar frontends in the Modrinth monorepo, the website (apps/frontend) and the app frontend (apps/app-frontend).
+- **Monorepo tooling:** [Turborepo](https://turbo.build/) (`turbo.jsonc`) + [pnpm workspaces](https://pnpm.io/workspaces) (`pnpm-workspace.yaml`)
+- **Frontend:** Vue 3 / Nuxt 3, Tailwind CSS v3
+- **Backend:** Rust (Labrinth API), Postgres, Clickhouse
+- **Indentation:** Use TAB everywhere, never spaces
 
-Both use Tailwind v3, and their respective configs can be seen at `tailwind.config.ts` and `tailwind.config.js` respectively.
+### Apps (`apps/`)
 
-Both utilize shared and common components from `@modrinth/ui` which can be found at `packages/ui`, and stylings from `@modrinth/assets` which can be found at `packages/assets`.
+| App               | Description                    |
+| ----------------- | ------------------------------ |
+| `frontend`        | Main Modrinth website (Nuxt 3) |
+| `app-frontend`    | Desktop/app frontend (Vue 3)   |
+| `app`             | Desktop/app shell (Tauri)      |
+| `app-playground`  | Testing playground for app     |
+| `labrinth`        | Backend API service            |
+| `daedalus_client` | Daedalus client implementation |
+| `docs`            | Documentation site (Astro)     |
 
-Both can utilize icons from `@modrinth/assets`, which are automatically generated based on what's available within the `icons` folder of the `packages/assets` directory. You can see the generated icons list in `generated-icons.ts`.
+### Packages (`packages/`)
 
-Both have access to our dependency injection framework, examples as seen in `packages/ui/src/providers/`. Ideally any state which is shared between a page and it's subpages should be shared using this dependency injection framework.
+| Package            | Description                                           |
+| ------------------ | ----------------------------------------------------- |
+| `ui`               | Shared Vue component library (`@modrinth/ui`)         |
+| `assets`           | Styling and auto-generated icons (`@modrinth/assets`) |
+| `api-client`       | API client for Nuxt, Tauri, and Node/browser          |
+| `app-lib`          | Shared app library                                    |
+| `blog`             | Blog system and changelog data                        |
+| `utils`            | Shared utility functions                              |
+| `moderation`       | Moderation utilities                                  |
+| `daedalus`         | Daedalus protocol                                     |
+| `tooling-config`   | ESLint, Prettier, TypeScript configs                  |
+| `ariadne`          | Analytics library                                     |
+| `modrinth-log`     | Logging utilities                                     |
+| `modrinth-maxmind` | MaxMind GeoIP                                         |
+| `modrinth-util`    | General utilities                                     |
+| `muralpay`         | Payment processing                                    |
+| `path-util`        | Path utilities                                        |
+| `sqlx-tracing`     | SQLx query tracing                                    |
 
-### Website (apps/frontend)
+## Pre-PR Commands
 
-Before a pull request can be opened for the website, run `pnpm prepr:frontend:web` from the root folder, otherwise CI will fail.
+Run these from the **root** folder before opening a pull request - do not run these after each prompt the user gives you, only run when asked, ask the user a question if they want to run it if the user indicates that they are about to create a pull request.
 
-To run a development version of the frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within the `apps/frontend` folder into `apps/frontend/.env`. Then you can run the frontend by running `pnpm web:dev` in the root folder.
+- **Website:** `pnpm prepr:frontend:web`
+- **App frontend:** `pnpm prepr:frontend:app`
+- **Frontend libs:** `pnpm prepr:frontend:lib`
+- **All frontend (app+web):** `pnpm prepr`
+- **Labrinth (backend):** See `apps/labrinth/CLAUDE.md`
 
-### App Frontend (apps/app-frontend)
+The website and app `prepr` commands
 
-Before a pull request can be opened for the app frontend, run `pnpm prepr:frontend:app` from the root folder, otherwise CI will fail.
+## Dev Commands
 
-To run a development version of the app frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within `packages/app-lib` into `packages/app-lib/.env`. Then you must run the app itself by running `pnpm app:dev` in the root folder.
+- **Website:** `pnpm web:dev` (copy `.env` template in `apps/frontend/` first)
+- **App:** `pnpm app:dev` (copy `.env` template in `packages/app-lib/` first)
+- **Storybook (packages/ui):** `pnpm storybook`
 
-### Localization
+## Project-Specific Instructions
 
-Refer to `.github/instructions/i18n-convert.instructions.md` if the user asks you to perform any i18n conversion work on a component, set of components, pages or sets of pages.
+Each project may have its own `CLAUDE.md` with detailed instructions:
 
-## Labrinth
+- [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
+- [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
 
-Labrinth is the backend API service for Modrinth.
+## Code Guidelines
 
-### Testing
+### Comments
+- DO NOT use "heading" comments like: // === Helper methods === .
+- Use doc comments, but avoid inline comments unless ABSOLUTELY necessary for clarity. Code should aim to be self documenting!
 
-Before a pull request can be opened, run `cargo clippy -p labrinth --all-targets` and make sure there are ZERO warnings, otherwise CI will fail.
+## Bash Guidelines
 
-Use `cargo test -p labrinth --all-targets` to test your changes. All tests must pass, otherwise CI will fail.
+### Output handling
+- DO NOT pipe output through `head`, `tail`, `less`, or `more`
+- NEVER use `| head -n X` or `| tail -n X` to truncate output
+- Run commands directly without pipes when possible
+- If you need to limit output, use command-specific flags (e.g. `git log -n 10` instead of `git log | head -10`)
+- ALWAYS read the full output — never pipe through filters
 
-To prepare the sqlx cache, cd into `apps/labrinth` and run `cargo sqlx prepare`. Make sure to NEVER run `cargo sqlx prepare --workspace`.
+### General
+- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to
 
-Read the root `docker-compose.yml` to see what running services are available while developing. Use `docker exec` to access these services.
+## Skills
 
-When the user refers to "performing pre-PR checks", do the following:
+Project-specific skills (patterns, conventions, and implementation guides) are located in [`.claude/skills/`](./.claude/skills/). Each skill has a `SKILL.md` describing the pattern:
 
-- Run clippy as described above
-- DO NOT run tests unless explicitly requested (they take a long time)
-- Prepare the sqlx cache
-
-### Clickhouse
-
-Use `docker exec labrinth-clickhouse clickhouse-client` to access the Clickhouse instance. We use the `staging_ariadne` database to store data in testing.
-
-### Postgres
-
-Use `docker exec labrinth-postgres psql -U labrinth -d labrinth -c "SELECT 1"` to access the PostgreSQL instance, replacing the `SELECT 1` with your query.
-
-# Guidelines
-
-- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to.
+- **[Dependency Injection](./.claude/skills/dependency-injection/SKILL.md)** — Vue provide/inject DI layer using `createContext`
+- **[Cross-Platform Pages](./.claude/skills/cross-platform-pages/SKILL.md)** — Shared component architecture across Nuxt and Tauri frontends
+- **[Multistage Modals](./.claude/skills/multistage-modals/SKILL.md)** — Wizard-like modal flows with `MultiStageModal`
+- **[Figma MCP](./.claude/skills/figma-mcp/SKILL.md)** — Translating Figma designs to Modrinth Vue components
+- **[i18n Convert](./.claude/skills/i18n-convert/SKILL.md)** — Converting hard-coded strings to vue-i18n localization
+- **[API Module](./.claude/skills/api-module/SKILL.md)** — Adding new endpoint modules to `@modrinth/api-client`
+- **[TanStack Query](./.claude/skills/tanstack-query/SKILL.md)** — Server state management with `@tanstack/vue-query` v5

Cargo.lock

@@ -378,6 +378,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "ansi_term"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d52a9bb7ec0cf484c551830a7ce27bd20d67eac647e1befb56b0be4ee39a55d2"
+dependencies = [
+ "winapi",
+]
+
 [[package]]
 name = "anstream"
 version = "0.6.21"
@@ -640,6 +649,20 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "async-minecraft-ping"
+version = "0.8.0"
+dependencies = [
+ "anyhow",
+ "async-trait",
+ "hickory-resolver 0.24.4",
+ "serde",
+ "serde_json",
+ "structopt",
+ "thiserror 1.0.69",
+ "tokio",
+]
+
 [[package]]
 name = "async-process"
 version = "2.5.0"
@@ -851,6 +874,17 @@ dependencies = [
  "webpki-roots 1.0.3",
 ]
 
+[[package]]
+name = "atty"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9b39be18770d11421cdb1b9947a45dd3f37e93092cbf377614828a319d5fee8"
+dependencies = [
+ "hermit-abi 0.1.19",
+ "libc",
+ "winapi",
+]
+
 [[package]]
 name = "autocfg"
 version = "1.5.0"
@@ -1568,6 +1602,21 @@ dependencies = [
  "libloading 0.8.8",
 ]
 
+[[package]]
+name = "clap"
+version = "2.34.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a0610544180c38b88101fecf2dd634b174a62eef6946f84dfc6a7127512b381c"
+dependencies = [
+ "ansi_term",
+ "atty",
+ "bitflags 1.3.2",
+ "strsim 0.8.0",
+ "textwrap",
+ "unicode-width 0.1.14",
+ "vec_map",
+]
+
 [[package]]
 name = "clap"
 version = "4.5.48"
@@ -1587,7 +1636,7 @@ dependencies = [
  "anstream",
  "anstyle",
  "clap_lex",
- "strsim",
+ "strsim 0.11.1",
 ]
 
 [[package]]
@@ -2134,7 +2183,7 @@ dependencies = [
  "futures",
  "indexmap 2.11.4",
  "itertools 0.14.0",
- "reqwest",
+ "reqwest 0.12.24",
  "rust-s3",
  "serde",
  "serde-xml-rs",
@@ -2167,6 +2216,16 @@ dependencies = [
  "darling_macro 0.21.3",
 ]
 
+[[package]]
+name = "darling"
+version = "0.23.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "25ae13da2f202d56bd7f91c25fba009e7717a1e4a1cc98a76d844b65ae912e9d"
+dependencies = [
+ "darling_core 0.23.0",
+ "darling_macro 0.23.0",
+]
+
 [[package]]
 name = "darling_core"
 version = "0.20.11"
@@ -2177,7 +2236,7 @@ dependencies = [
  "ident_case",
  "proc-macro2",
  "quote",
- "strsim",
+ "strsim 0.11.1",
  "syn 2.0.106",
 ]
 
@@ -2191,7 +2250,20 @@ dependencies = [
  "ident_case",
  "proc-macro2",
  "quote",
- "strsim",
+ "strsim 0.11.1",
+ "syn 2.0.106",
+]
+
+[[package]]
+name = "darling_core"
+version = "0.23.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9865a50f7c335f53564bb694ef660825eb8610e0a53d3e11bf1b0d3df31e03b0"
+dependencies = [
+ "ident_case",
+ "proc-macro2",
+ "quote",
+ "strsim 0.11.1",
  "syn 2.0.106",
 ]
 
@@ -2217,6 +2289,17 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "darling_macro"
+version = "0.23.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ac3984ec7bd6cfa798e62b4a642426a5be0e68f9401cfc2a01e3fa9ea2fcdb8d"
+dependencies = [
+ "darling_core 0.23.0",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "dashmap"
 version = "6.1.0"
@@ -3717,6 +3800,15 @@ dependencies = [
  "hashbrown 0.15.5",
 ]
 
+[[package]]
+name = "heck"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6d621efb26863f0e9924c6ac577e8275e5e6b77455db64ffa6c65c904e9e132c"
+dependencies = [
+ "unicode-segmentation",
+]
+
 [[package]]
 name = "heck"
 version = "0.4.1"
@@ -3729,6 +3821,15 @@ version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
+[[package]]
+name = "hermit-abi"
+version = "0.1.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62b467343b94ba476dcb2500d242dadbb39557df889310ac77c5d99100aaac33"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "hermit-abi"
 version = "0.5.2"
@@ -3741,6 +3842,30 @@ version = "0.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
 
+[[package]]
+name = "hickory-proto"
+version = "0.24.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "92652067c9ce6f66ce53cc38d1169daa36e6e7eb7dd3b63b5103bd9d97117248"
+dependencies = [
+ "async-trait",
+ "cfg-if",
+ "data-encoding",
+ "enum-as-inner",
+ "futures-channel",
+ "futures-io",
+ "futures-util",
+ "idna",
+ "ipnet",
+ "once_cell",
+ "rand 0.8.5",
+ "thiserror 1.0.69",
+ "tinyvec",
+ "tokio",
+ "tracing",
+ "url",
+]
+
 [[package]]
 name = "hickory-proto"
 version = "0.25.2"
@@ -3766,6 +3891,27 @@ dependencies = [
  "url",
 ]
 
+[[package]]
+name = "hickory-resolver"
+version = "0.24.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cbb117a1ca520e111743ab2f6688eddee69db4e0ea242545a604dce8a66fd22e"
+dependencies = [
+ "cfg-if",
+ "futures-util",
+ "hickory-proto 0.24.4",
+ "ipconfig",
+ "lru-cache",
+ "once_cell",
+ "parking_lot",
+ "rand 0.8.5",
+ "resolv-conf",
+ "smallvec",
+ "thiserror 1.0.69",
+ "tokio",
+ "tracing",
+]
+
 [[package]]
 name = "hickory-resolver"
 version = "0.25.2"
@@ -3774,7 +3920,7 @@ checksum = "dc62a9a99b0bfb44d2ab95a7208ac952d31060efc16241c87eaf36406fecf87a"
 dependencies = [
  "cfg-if",
  "futures-util",
- "hickory-proto",
+ "hickory-proto 0.25.2",
  "ipconfig",
  "moka",
  "once_cell",
@@ -4124,9 +4270,9 @@ dependencies = [
 
 [[package]]
 name = "ico"
-version = "0.4.0"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc50b891e4acf8fe0e71ef88ec43ad82ee07b3810ad09de10f1d01f072ed4b98"
+checksum = "3e795dff5605e0f04bff85ca41b51a96b83e80b281e96231bcaaf1ac35103371"
 dependencies = [
  "byteorder",
  "png 0.17.16",
@@ -4355,7 +4501,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e96d2465363ed2d81857759fc864cf6bb7997f79327aec028d65bd7989393685"
 dependencies = [
  "ahash 0.8.12",
- "clap",
+ "clap 4.5.48",
  "crossbeam-channel",
  "crossbeam-utils",
  "dashmap",
@@ -4470,7 +4616,7 @@ version = "0.4.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e04d7f318608d35d4b61ddd75cbdaee86b023ebe2bd5a66ee0915f0bf93095a9"
 dependencies = [
- "hermit-abi",
+ "hermit-abi 0.5.2",
  "libc",
  "windows-sys 0.59.0",
 ]
@@ -4607,9 +4753,9 @@ dependencies = [
 
 [[package]]
 name = "js-sys"
-version = "0.3.81"
+version = "0.3.91"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec48937a97411dcb524a265206ccd4c90bb711fca92b2792c407f268825b9305"
+checksum = "b49715b7073f385ba4bc528e5747d02e66cb39c6146efb66b781f131f0fb399c"
 dependencies = [
  "once_cell",
  "wasm-bindgen",
@@ -4730,6 +4876,7 @@ dependencies = [
  "arc-swap",
  "argon2",
  "ariadne",
+ "async-minecraft-ping",
  "async-stripe",
  "async-trait",
  "base64 0.22.1",
@@ -4737,7 +4884,7 @@ dependencies = [
  "bytes",
  "censor",
  "chrono",
- "clap",
+ "clap 4.5.48",
  "clickhouse",
  "color-eyre",
  "color-thief",
@@ -4773,7 +4920,7 @@ dependencies = [
  "rand_chacha 0.3.1",
  "redis",
  "regex",
- "reqwest",
+ "reqwest 0.12.24",
  "rust-s3",
  "rust_decimal",
  "rust_iso3166",
@@ -4811,6 +4958,16 @@ dependencies = [
  "zxcvbn",
 ]
 
+[[package]]
+name = "labrinth-derive"
+version = "0.0.0"
+dependencies = [
+ "darling 0.23.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "language-tags"
 version = "0.3.2"
@@ -4974,6 +5131,12 @@ dependencies = [
  "zlib-rs",
 ]
 
+[[package]]
+name = "linked-hash-map"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0717cef1bc8b636c6e1c1bbdefc09e6322da8a9321966e8928ef80d20f7f770f"
+
 [[package]]
 name = "linux-raw-sys"
 version = "0.4.15"
@@ -5039,6 +5202,15 @@ dependencies = [
  "imgref",
 ]
 
+[[package]]
+name = "lru-cache"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "31e24f1ad8321ca0e8a1e0ac13f23cb668e6f5466c2c57319f6a5cf1cc8e3b1c"
+dependencies = [
+ "linked-hash-map",
+]
+
 [[package]]
 name = "lru-slab"
 version = "0.1.2"
@@ -5197,7 +5369,7 @@ dependencies = [
  "log",
  "meilisearch-index-setting-macro",
  "pin-project-lite",
- "reqwest",
+ "reqwest 0.12.24",
  "serde",
  "serde_json",
  "thiserror 2.0.17",
@@ -5300,13 +5472,13 @@ name = "modrinth-maxmind"
 version = "0.0.0"
 dependencies = [
  "bytes",
- "clap",
+ "clap 4.5.48",
  "directories",
  "eyre",
  "flate2",
  "maxminddb",
  "modrinth-util",
- "reqwest",
+ "reqwest 0.12.24",
  "tar",
  "tokio",
  "tracing",
@@ -5385,7 +5557,7 @@ dependencies = [
  "bytes",
  "chrono",
  "derive_more 2.0.1",
- "reqwest",
+ "reqwest 0.12.24",
  "rust_decimal",
  "rust_iso3166",
  "secrecy",
@@ -5708,7 +5880,7 @@ version = "1.17.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "91df4bbde75afed763b708b7eee1e8e7651e02d97f6d5dd763e89367e957b23b"
 dependencies = [
- "hermit-abi",
+ "hermit-abi 0.5.2",
  "libc",
 ]
 
@@ -6139,7 +6311,7 @@ dependencies = [
  "bytes",
  "http 1.3.1",
  "opentelemetry",
- "reqwest",
+ "reqwest 0.12.24",
 ]
 
 [[package]]
@@ -6154,7 +6326,7 @@ dependencies = [
  "opentelemetry-proto",
  "opentelemetry_sdk",
  "prost 0.13.5",
- "reqwest",
+ "reqwest 0.12.24",
  "thiserror 2.0.17",
  "tokio",
  "tonic 0.13.1",
@@ -6716,7 +6888,7 @@ checksum = "5d0e4f59085d47d8241c88ead0f274e8a0cb551f3625263c05eb8dd897c34218"
 dependencies = [
  "cfg-if",
  "concurrent-queue",
- "hermit-abi",
+ "hermit-abi 0.5.2",
  "pin-project-lite",
  "rustix 1.1.2",
  "windows-sys 0.61.2",
@@ -7595,11 +7767,45 @@ dependencies = [
  "url",
  "wasm-bindgen",
  "wasm-bindgen-futures",
- "wasm-streams",
+ "wasm-streams 0.4.2",
  "web-sys",
  "webpki-roots 1.0.3",
 ]
 
+[[package]]
+name = "reqwest"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ab3f43e3283ab1488b624b44b0e988d0acea0b3214e694730a055cb6b2efa801"
+dependencies = [
+ "base64 0.22.1",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http 1.3.1",
+ "http-body 1.0.1",
+ "http-body-util",
+ "hyper 1.7.0",
+ "hyper-util",
+ "js-sys",
+ "log",
+ "percent-encoding",
+ "pin-project-lite",
+ "serde",
+ "serde_json",
+ "sync_wrapper",
+ "tokio",
+ "tokio-util",
+ "tower",
+ "tower-http",
+ "tower-service",
+ "url",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-streams 0.5.0",
+ "web-sys",
+]
+
 [[package]]
 name = "resolv-conf"
 version = "0.7.5"
@@ -7785,7 +7991,7 @@ dependencies = [
  "minidom",
  "percent-encoding",
  "quick-xml 0.38.3",
- "reqwest",
+ "reqwest 0.12.24",
  "serde",
  "serde_derive",
  "serde_json",
@@ -8253,7 +8459,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "48b85e25e8a1fc13928885e8bf13abe8a09e15c46993aed05d6405f7755d6e20"
 dependencies = [
  "httpdate",
- "reqwest",
+ "reqwest 0.12.24",
  "rustls 0.23.32",
  "sentry-backtrace",
  "sentry-contexts",
@@ -9160,6 +9366,12 @@ dependencies = [
  "unicode-properties",
 ]
 
+[[package]]
+name = "strsim"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ea5119cdb4c55b55d432abb513a0429384878c15dde60cc77b1c99de1a95a6a"
+
 [[package]]
 name = "strsim"
 version = "0.11.1"
@@ -9189,6 +9401,30 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "structopt"
+version = "0.3.26"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c6b5c64445ba8094a6ab0c3cd2ad323e07171012d9c98b0b15651daf1787a10"
+dependencies = [
+ "clap 2.34.0",
+ "lazy_static",
+ "structopt-derive",
+]
+
+[[package]]
+name = "structopt-derive"
+version = "0.4.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dcb5ae327f9cc13b68763b5749770cb9e048a99bd9dfdfa58d0cf05d5f64afe0"
+dependencies = [
+ "heck 0.3.3",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
 [[package]]
 name = "strum"
 version = "0.27.2"
@@ -9334,9 +9570,9 @@ checksum = "7b2093cf4c8eb1e67749a6762251bc9cd836b6fc171623bd0a9d324d37af2417"
 
 [[package]]
 name = "tao"
-version = "0.34.3"
+version = "0.34.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "959469667dbcea91e5485fc48ba7dd6023face91bb0f1a14681a70f99847c3f7"
+checksum = "f3a753bdc39c07b192151523a3f77cd0394aa75413802c883a0f6f6a0e5ee2e7"
 dependencies = [
  "bitflags 2.9.4",
  "block2 0.6.2",
@@ -9408,9 +9644,9 @@ checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
 
 [[package]]
 name = "tauri"
-version = "2.8.5"
+version = "2.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d4d1d3b3dc4c101ac989fd7db77e045cc6d91a25349cd410455cb5c57d510c1c"
+checksum = "463ae8677aa6d0f063a900b9c41ecd4ac2b7ca82f0b058cc4491540e55b20129"
 dependencies = [
  "anyhow",
  "bytes",
@@ -9437,7 +9673,7 @@ dependencies = [
  "percent-encoding",
  "plist",
  "raw-window-handle",
- "reqwest",
+ "reqwest 0.13.2",
  "serde",
  "serde_json",
  "serde_repr",
@@ -9452,7 +9688,6 @@ dependencies = [
  "tokio",
  "tray-icon",
  "url",
- "urlpattern",
  "webkit2gtk",
  "webview2-com",
  "window-vibrancy",
@@ -9461,9 +9696,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-build"
-version = "2.4.1"
+version = "2.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c432ccc9ff661803dab74c6cd78de11026a578a9307610bbc39d3c55be7943f"
+checksum = "ca7bd893329425df750813e95bd2b643d5369d929438da96d5bbb7cc2c918f74"
 dependencies = [
  "anyhow",
  "cargo_toml",
@@ -9485,9 +9720,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-codegen"
-version = "2.4.0"
+version = "2.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1ab3a62cf2e6253936a8b267c2e95839674e7439f104fa96ad0025e149d54d8a"
+checksum = "aac423e5859d9f9ccdd32e3cf6a5866a15bedbf25aa6630bcb2acde9468f6ae3"
 dependencies = [
  "base64 0.22.1",
  "brotli",
@@ -9512,9 +9747,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-macros"
-version = "2.4.0"
+version = "2.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4368ea8094e7045217edb690f493b55b30caf9f3e61f79b4c24b6db91f07995e"
+checksum = "1b6a1bd2861ff0c8766b1d38b32a6a410f6dc6532d4ef534c47cfb2236092f59"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
@@ -9526,9 +9761,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin"
-version = "2.4.0"
+version = "2.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9946a3cede302eac0c6eb6c6070ac47b1768e326092d32efbb91f21ed58d978f"
+checksum = "692a77abd8b8773e107a42ec0e05b767b8d2b7ece76ab36c6c3947e34df9f53f"
 dependencies = [
  "anyhow",
  "glob",
@@ -9582,9 +9817,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-fs"
-version = "2.4.2"
+version = "2.4.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "315784ec4be45e90a987687bae7235e6be3d6e9e350d2b75c16b8a4bf22c1db7"
+checksum = "ed390cc669f937afeb8b28032ce837bac8ea023d975a2e207375ec05afaf1804"
 dependencies = [
  "anyhow",
  "dunce",
@@ -9604,16 +9839,16 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-http"
-version = "2.5.2"
+version = "2.5.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "938a3d7051c9a82b431e3a0f3468f85715b3442b3c3a3913095e9fa509e2652c"
+checksum = "d8f069451c4e87e7e2636b7f065a4c52866c4ce5e60e2d53fa1038edb6d184dc"
 dependencies = [
  "bytes",
  "cookie_store",
  "data-url",
  "http 1.3.1",
  "regex",
- "reqwest",
+ "reqwest 0.12.24",
  "schemars 0.8.22",
  "serde",
  "serde_json",
@@ -9697,7 +9932,7 @@ dependencies = [
  "minisign-verify",
  "osakit",
  "percent-encoding",
- "reqwest",
+ "reqwest 0.12.24",
  "semver",
  "serde",
  "serde_json",
@@ -9730,9 +9965,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime"
-version = "2.8.0"
+version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d4cfc9ad45b487d3fded5a4731a567872a4812e9552e3964161b08edabf93846"
+checksum = "b885ffeac82b00f1f6fd292b6e5aabfa7435d537cef57d11e38a489956535651"
 dependencies = [
  "cookie 0.18.1",
  "dpi",
@@ -9755,9 +9990,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime-wry"
-version = "2.8.1"
+version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c1fe9d48bd122ff002064e88cfcd7027090d789c4302714e68fcccba0f4b7807"
+checksum = "5204682391625e867d16584fedc83fc292fb998814c9f7918605c789cd876314"
 dependencies = [
  "gtk",
  "http 1.3.1",
@@ -9782,9 +10017,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-utils"
-version = "2.7.0"
+version = "2.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41a3852fdf9a4f8fbeaa63dc3e9a85284dd6ef7200751f0bd66ceee30c93f212"
+checksum = "fcd169fccdff05eff2c1033210b9b94acd07a47e6fa9a3431cf09cfd4f01c87e"
 dependencies = [
  "anyhow",
  "brotli",
@@ -9892,12 +10127,22 @@ dependencies = [
  "url",
 ]
 
+[[package]]
+name = "textwrap"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d326610f408c7a4eb6f51c37c330e496b08506c9457c9d34287ecc38809fb060"
+dependencies = [
+ "unicode-width 0.1.14",
+]
+
 [[package]]
 name = "theseus"
 version = "1.0.0-local"
 dependencies = [
  "ariadne",
  "async-compression",
+ "async-minecraft-ping",
  "async-recursion",
  "async-tungstenite",
  "async-walkdir",
@@ -9919,11 +10164,12 @@ dependencies = [
  "either",
  "encoding_rs",
  "enumset",
+ "eyre",
  "flate2",
  "fs4",
  "futures",
  "heck 0.5.0",
- "hickory-resolver",
+ "hickory-resolver 0.25.2",
  "indicatif",
  "itertools 0.14.0",
  "notify",
@@ -9938,7 +10184,7 @@ dependencies = [
  "quick-xml 0.38.3",
  "rand 0.8.5",
  "regex",
- "reqwest",
+ "reqwest 0.12.24",
  "rgb",
  "serde",
  "serde_ini",
@@ -10459,9 +10705,9 @@ dependencies = [
 
 [[package]]
 name = "tower-http"
-version = "0.6.6"
+version = "0.6.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "adc82fd73de2a9722ac5da747f12383d2bfdb93591ee6c58486e0097890f05f2"
+checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
 dependencies = [
  "bitflags 2.9.4",
  "bytes",
@@ -11032,6 +11278,12 @@ version = "0.2.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
 
+[[package]]
+name = "vec_map"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1bddf1187be692e79c5ffeab891132dfb0f236ed36a43c7ed39f1165ee20191"
+
 [[package]]
 name = "version-compare"
 version = "0.2.0"
@@ -11143,9 +11395,9 @@ checksum = "b8dad83b4f25e74f184f64c43b150b91efe7647395b42289f38e50566d82855b"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.104"
+version = "0.2.114"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c1da10c01ae9f1ae40cbfac0bac3b1e724b320abfcf52229f80b547c0d250e2d"
+checksum = "6532f9a5c1ece3798cb1c2cfdba640b9b3ba884f5db45973a6f442510a87d38e"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -11154,27 +11406,14 @@ dependencies = [
  "wasm-bindgen-shared",
 ]
 
-[[package]]
-name = "wasm-bindgen-backend"
-version = "0.2.104"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "671c9a5a66f49d8a47345ab942e2cb93c7d1d0339065d4f8139c486121b43b19"
-dependencies = [
- "bumpalo",
- "log",
- "proc-macro2",
- "quote",
- "syn 2.0.106",
- "wasm-bindgen-shared",
-]
-
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.54"
+version = "0.4.64"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e038d41e478cc73bae0ff9b36c60cff1c98b8f38f8d7e8061e79ee63608ac5c"
+checksum = "e9c5522b3a28661442748e09d40924dfb9ca614b21c00d3fd135720e48b67db8"
 dependencies = [
  "cfg-if",
+ "futures-util",
  "js-sys",
  "once_cell",
  "wasm-bindgen",
@@ -11183,9 +11422,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.104"
+version = "0.2.114"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ca60477e4c59f5f2986c50191cd972e3a50d8a95603bc9434501cf156a9a119"
+checksum = "18a2d50fcf105fb33bb15f00e7a77b772945a2ee45dcf454961fd843e74c18e6"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -11193,22 +11432,22 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.104"
+version = "0.2.114"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f07d2f20d4da7b26400c9f4a0511e6e0345b040694e8a75bd41d578fa4421d7"
+checksum = "03ce4caeaac547cdf713d280eda22a730824dd11e6b8c3ca9e42247b25c631e3"
 dependencies = [
+ "bumpalo",
  "proc-macro2",
  "quote",
  "syn 2.0.106",
- "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.104"
+version = "0.2.114"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bad67dc8b2a1a6e5448428adec4c3e84c43e561d8c9ee8a9e5aabeb193ec41d1"
+checksum = "75a326b8c223ee17883a4251907455a2431acc2791c98c26279376490c378c16"
 dependencies = [
  "unicode-ident",
 ]
@@ -11226,6 +11465,19 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "wasm-streams"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d1ec4f6517c9e11ae630e200b2b65d193279042e28edd4a2cda233e46670bbb"
+dependencies = [
+ "futures-util",
+ "js-sys",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "wayland-backend"
 version = "0.3.11"
@@ -11288,9 +11540,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.81"
+version = "0.3.91"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9367c417a924a74cae129e6a2ae3b47fabb1f8995595ab474029da749a8be120"
+checksum = "854ba17bb104abfb26ba36da9729addc7ce7f06f5c0f90f3c391f8461cca21f9"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -11308,9 +11560,9 @@ dependencies = [
 
 [[package]]
 name = "webkit2gtk"
-version = "2.0.1"
+version = "2.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76b1bc1e54c581da1e9f179d0b38512ba358fb1af2d634a1affe42e37172361a"
+checksum = "a1027150013530fb2eaf806408df88461ae4815a45c541c8975e61d6f2fc4793"
 dependencies = [
  "bitflags 1.3.2",
  "cairo-rs",
@@ -11332,9 +11584,9 @@ dependencies = [
 
 [[package]]
 name = "webkit2gtk-sys"
-version = "2.0.1"
+version = "2.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "62daa38afc514d1f8f12b8693d30d5993ff77ced33ce30cd04deebc267a6d57c"
+checksum = "916a5f65c2ef0dfe12fff695960a2ec3d4565359fdbb2e9943c974e06c734ea5"
 dependencies = [
  "bitflags 1.3.2",
  "cairo-sys-rs",
@@ -12037,9 +12289,9 @@ checksum = "ea2f10b9bb0928dfb1b42b65e1f9e36f7f54dbdf08457afefb38afcdec4fa2bb"
 
 [[package]]
 name = "wry"
-version = "0.53.4"
+version = "0.54.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d78ec082b80fa088569a970d043bb3050abaabf4454101d44514ee8d9a8c9f6"
+checksum = "bb26159b420aa77684589a744ae9a9461a95395b848764ad12290a14d960a11a"
 dependencies = [
  "base64 0.22.1",
  "block2 0.6.2",

Cargo.toml

@@ -8,6 +8,7 @@ members = [
   "packages/app-lib",
   "packages/ariadne",
   "packages/daedalus",
+  "packages/labrinth-derive",
   "packages/modrinth-log",
   "packages/modrinth-maxmind",
   "packages/modrinth-util",
@@ -32,6 +33,7 @@ arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
 async-compression = { version = "0.4.32", default-features = false }
+async-minecraft-ping = { path = "packages/async-minecraft-ping" }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
   "runtime-tokio-hyper-rustls",
@@ -58,6 +60,7 @@ color-eyre = "0.6.5"
 color-thief = "0.2.2"
 const_format = "0.2.34"
 daedalus = { path = "packages/daedalus" }
+darling = { version = "0.23" }
 dashmap = "6.1.0"
 data-url = "0.3.2"
 deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
@@ -121,9 +124,11 @@ paste = "1.0.15"
 path-util = { path = "packages/path-util" }
 phf = { version = "0.13.1", features = ["macros"] }
 png = "0.18.0"
+proc-macro2 = { version = "1.0" }
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"
 quick-xml = "0.38.3"
+quote = { version = "1.0" }
 rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
 rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
 redis = "0.32.7"
@@ -166,13 +171,14 @@ spdx = "0.12.0"
 sqlx = { version = "0.8.6", default-features = false }
 sqlx-tracing = { path = "packages/sqlx-tracing" }
 strum = "0.27.2"
+syn = { version = "2.0" }
 sysinfo = { version = "0.37.2", default-features = false }
 tar = "0.4.44"
 tauri = "2.8.5"
 tauri-build = "2.4.1"
 tauri-plugin-deep-link = "2.4.3"
 tauri-plugin-dialog = "2.4.0"
-tauri-plugin-http = "2.5.2"
+tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
 tauri-plugin-single-instance = "2.3.4"

apps/app-frontend/src/App.vue

@@ -36,14 +36,16 @@ import {
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
+	PopupNotificationPanel,
 	ProgressSpinner,
 	provideModrinthClient,
 	provideNotificationManager,
 	providePageContext,
+	providePopupNotificationManager,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
-import { renderString } from '@modrinth/utils'
+import { formatBytes, renderString } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
@@ -61,6 +63,7 @@ import AccountsCard from '@/components/ui/AccountsCard.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
+import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
 import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
 import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
@@ -68,13 +71,13 @@ import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
+import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'
+import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
-import UpdateAvailableToast from '@/components/ui/UpdateAvailableToast.vue'
-import UpdateToast from '@/components/ui/UpdateToast.vue'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads.js'
@@ -82,7 +85,6 @@ import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
 import { get_user } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
-import { useFetch } from '@/helpers/fetch.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
 import { list } from '@/helpers/profile.js'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -101,13 +103,14 @@ import {
 	subscribeToDownloadProgress,
 } from '@/providers/download-progress.ts'
 import { useError } from '@/store/error.js'
-import { useInstall } from '@/store/install.js'
+import { playServerProject, useInstall } from '@/store/install.js'
 import { useLoading, useTheming } from '@/store/state'
 
 import { create_profile_and_install_from_file } from './helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
+import { AppPopupNotificationManager } from './providers/app-popup-notifications'
 
 const themeStore = useTheming()
 
@@ -115,6 +118,10 @@ const notificationManager = new AppNotificationManager()
 provideNotificationManager(notificationManager)
 const { handleError, addNotification } = notificationManager
 
+const popupNotificationManager = new AppPopupNotificationManager()
+providePopupNotificationManager(popupNotificationManager)
+const { addPopupNotification } = popupNotificationManager
+
 const tauriApiClient = new TauriModrinthClient({
 	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
 	features: [
@@ -295,11 +302,7 @@ async function setupApp() {
 		}),
 	)
 
-	useFetch(
-		`https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
-		'criticalAnnouncements',
-		true,
-	)
+	fetch(`https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`)
 		.then((response) => response.json())
 		.then((res) => {
 			if (res && res.header && res.body) {
@@ -312,23 +315,21 @@ async function setupApp() {
 			)
 		})
 
-	useFetch(`https://modrinth.com/news/feed/articles.json`, 'news', true)
+	fetch(`https://modrinth.com/news/feed/articles.json`)
 		.then((response) => response.json())
 		.then((res) => {
 			if (res && res.articles) {
-				// Format expected by NewsArticleCard component.
 				news.value = res.articles
 					.map((article) => ({
 						...article,
 						path: article.link,
-						thumbnail: article.thumbnail,
-						title: article.title,
-						summary: article.summary,
-						date: article.date,
 					}))
 					.slice(0, 4)
 			}
 		})
+		.catch((error) => {
+			console.error('Failed to fetch news articles', error)
+		})
 
 	get_opening_command().then(handleCommand)
 	fetchCredentials()
@@ -393,8 +394,11 @@ const minecraftAuthErrorModal = ref()
 
 const install = useInstall()
 const modInstallModal = ref()
+const addServerToInstanceModal = ref()
 const installConfirmModal = ref()
 const incompatibilityWarningModal = ref()
+const installToPlayModal = ref()
+const updateToPlayModal = ref()
 
 const credentials = ref()
 
@@ -403,7 +407,7 @@ const modrinthLoginFlowWaitModal = ref()
 async function fetchCredentials() {
 	const creds = await getCreds().catch(handleError)
 	if (creds && creds.user_id) {
-		creds.user = await get_user(creds.user_id).catch(handleError)
+		creds.user = await get_user(creds.user_id, 'bypass').catch(handleError)
 	}
 	credentials.value = creds ?? null
 }
@@ -473,6 +477,10 @@ onMounted(() => {
 	install.setIncompatibilityWarningModal(incompatibilityWarningModal)
 	install.setInstallConfirmModal(installConfirmModal)
 	install.setModInstallModal(modInstallModal)
+	install.setAddServerToInstanceModal(addServerToInstanceModal)
+	install.setInstallToPlayModal(installToPlayModal)
+	install.setUpdateToPlayModal(updateToPlayModal)
+	install.setPopupNotificationManager(popupNotificationManager)
 })
 
 const accounts = ref(null)
@@ -490,6 +498,9 @@ async function handleCommand(e) {
 				source: 'CreationModalFileDrop',
 			})
 		}
+	} else if (e.event === 'InstallServer') {
+		await router.push(`/project/${e.id}`)
+		await playServerProject(e.id).catch(handleError)
 	} else {
 		// Other commands are URL-based (deep linking)
 		urlModal.value.show(e)
@@ -508,14 +519,60 @@ const downloadPercent = computed(() => Math.trunc(appUpdateDownload.progress.val
 const metered = ref(true)
 const finishedDownloading = ref(false)
 const restarting = ref(false)
-const updateToastDismissed = ref(false)
 const availableUpdate = ref(null)
 const updateSize = ref(null)
 const updatesEnabled = ref(true)
+
+const updatePopupMessages = defineMessages({
+	updateAvailable: {
+		id: 'app.update-popup.title',
+		defaultMessage: 'Update available',
+	},
+	downloadComplete: {
+		id: 'app.update-popup.download-complete',
+		defaultMessage: 'Download complete',
+	},
+	body: {
+		id: 'app.update-popup.body',
+		defaultMessage:
+			'Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App.',
+	},
+	meteredBody: {
+		id: 'app.update-popup.body.metered',
+		defaultMessage: `Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it.`,
+	},
+	downloadedBody: {
+		id: 'app.update-popup.body.download-complete',
+		defaultMessage: `Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App.`,
+	},
+	linuxBody: {
+		id: 'app.update-popup.body.linux',
+		defaultMessage:
+			'Modrinth App v{version} is available. Use your package manager to update for the latest features and fixes!',
+	},
+	reload: {
+		id: 'app.update-popup.reload',
+		defaultMessage: 'Reload',
+	},
+	download: {
+		id: 'app.update-popup.download',
+		defaultMessage: 'Download ({size})',
+	},
+	changelog: {
+		id: 'app.update-popup.changelog',
+		defaultMessage: 'Changelog',
+	},
+})
+
 async function checkUpdates() {
 	if (!(await areUpdatesEnabled())) {
 		console.log('Skipping update check as updates are disabled in this build or environment')
 		updatesEnabled.value = false
+
+		if (os.value === 'Linux' && !isDevEnvironment.value) {
+			checkLinuxUpdates()
+			setInterval(checkLinuxUpdates, 5 * 60 * 1000)
+		}
 		return
 	}
 
@@ -535,7 +592,6 @@ async function checkUpdates() {
 
 		appUpdateDownload.progress.value = 0
 		finishedDownloading.value = false
-		updateToastDismissed.value = false
 
 		console.log(`Update ${update.version} is available.`)
 
@@ -545,6 +601,28 @@ async function checkUpdates() {
 			downloadUpdate(update)
 		} else {
 			console.log(`Metered connection detected, not auto-downloading update.`)
+			getUpdateSize(update.rid).then((size) => {
+				updateSize.value = size
+				addPopupNotification({
+					title: formatMessage(updatePopupMessages.updateAvailable),
+					text: formatMessage(updatePopupMessages.meteredBody, { version: update.version }),
+					type: 'info',
+					autoCloseMs: null,
+					buttons: [
+						{
+							label: formatMessage(updatePopupMessages.download, {
+								size: formatBytes(updateSize.value ?? 0),
+							}),
+							action: () => downloadAvailableUpdate(),
+							color: 'brand',
+						},
+						{
+							label: formatMessage(updatePopupMessages.changelog),
+							action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
+						},
+					],
+				})
+			})
 		}
 
 		getUpdateSize(update.rid).then((size) => (updateSize.value = size))
@@ -561,8 +639,26 @@ async function checkUpdates() {
 	)
 }
 
-async function showUpdateToast() {
-	updateToastDismissed.value = false
+async function checkLinuxUpdates() {
+	try {
+		const [response, currentVersion] = await Promise.all([
+			fetch('https://launcher-files.modrinth.com/updates.json'),
+			getVersion(),
+		])
+		const updates = await response.json()
+		const latestVersion = updates?.version
+
+		if (latestVersion && latestVersion !== currentVersion) {
+			addPopupNotification({
+				title: formatMessage(updatePopupMessages.updateAvailable),
+				text: formatMessage(updatePopupMessages.linuxBody, { version: latestVersion }),
+				type: 'info',
+				autoCloseMs: null,
+			})
+		}
+	} catch (e) {
+		console.error('Failed to check for updates:', e)
+	}
 }
 
 async function downloadAvailableUpdate() {
@@ -588,6 +684,26 @@ async function downloadUpdate(versionToDownload) {
 				unlistenUpdateDownload = null
 			})
 			console.log('Finished downloading!')
+
+			addPopupNotification({
+				title: formatMessage(updatePopupMessages.downloadComplete),
+				text: formatMessage(updatePopupMessages.downloadedBody, {
+					version: versionToDownload.version,
+				}),
+				type: 'success',
+				autoCloseMs: null,
+				buttons: [
+					{
+						label: formatMessage(updatePopupMessages.reload),
+						action: () => installUpdate(),
+						color: 'brand',
+					},
+					{
+						label: formatMessage(updatePopupMessages.changelog),
+						action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
+					},
+				],
+			})
 		})
 		unlistenUpdateDownload = await subscribeToDownloadProgress(
 			appUpdateDownload,
@@ -761,25 +877,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		class="app-grid-layout experimental-styles-within relative"
 		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
 	>
-		<Suspense>
-			<Transition name="toast">
-				<UpdateToast
-					v-if="
-						!!availableUpdate &&
-						!updateToastDismissed &&
-						!restarting &&
-						(finishedDownloading || metered)
-					"
-					:version="availableUpdate.version"
-					:size="updateSize"
-					:metered="metered"
-					@close="updateToastDismissed = true"
-					@restart="installUpdate"
-					@download="downloadAvailableUpdate"
-				/>
-				<UpdateAvailableToast v-else-if="!updatesEnabled && os === 'Linux' && !isDevEnvironment" />
-			</Transition>
-		</Suspense>
 		<Transition name="fade">
 			<div
 				v-if="restarting"
@@ -856,14 +953,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</NavButton>
 			<div class="flex flex-grow"></div>
 			<Transition name="nav-button-animated">
-				<div
-					v-if="
-						availableUpdate &&
-						updateToastDismissed &&
-						!restarting &&
-						(finishedDownloading || metered)
-					"
-				>
+				<div v-if="availableUpdate && !restarting && (finishedDownloading || metered)">
 					<NavButton
 						v-tooltip.right="
 							formatMessage(
@@ -877,13 +967,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 								},
 							)
 						"
-						:to="
-							finishedDownloading
-								? installUpdate
-								: downloadProgress > 0 && downloadProgress < 1
-									? showUpdateToast
-									: downloadAvailableUpdate
-						"
+						:to="finishedDownloading ? installUpdate : downloadAvailableUpdate"
 					>
 						<ProgressSpinner
 							v-if="downloadProgress > 0 && downloadProgress < 1"
@@ -902,7 +986,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				<SettingsIcon />
 			</NavButton>
 			<OverflowMenu
-				v-if="credentials"
+				v-if="credentials?.user"
 				v-tooltip.right="`Modrinth account`"
 				class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast border-0 cursor-pointer"
 				:options="[
@@ -918,14 +1002,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				]"
 				placement="right-end"
 			>
-				<Avatar :src="credentials.user.avatar_url" alt="" size="32px" circle />
+				<Avatar :src="credentials?.user?.avatar_url" alt="" size="32px" circle />
 				<template #view-profile>
 					<UserIcon />
 					<span class="inline-flex items-center gap-1">
 						Signed in as
 						<span class="inline-flex items-center gap-1 text-contrast font-semibold">
-							<Avatar :src="credentials.user.avatar_url" alt="" size="20px" circle />
-							{{ credentials.user.username }}
+							<Avatar :src="credentials?.user?.avatar_url" alt="" size="20px" circle />
+							{{ credentials?.user?.username }}
 						</span>
 					</span>
 					<ExternalIcon />
@@ -1133,11 +1217,15 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	<URLConfirmModal ref="urlModal" />
 	<I18nDebugPanel />
 	<NotificationPanel has-sidebar />
+	<PopupNotificationPanel has-sidebar />
 	<ErrorModal ref="errorModal" />
 	<MinecraftAuthErrorModal ref="minecraftAuthErrorModal" />
 	<ModInstallModal ref="modInstallModal" />
+	<AddServerToInstanceModal ref="addServerToInstanceModal" />
 	<IncompatibilityWarningModal ref="incompatibilityWarningModal" />
 	<InstallConfirmModal ref="installConfirmModal" />
+	<InstallToPlayModal ref="installToPlayModal" />
+	<UpdateToPlayModal ref="updateToPlayModal" />
 </template>
 
 <style lang="scss" scoped>
@@ -1366,38 +1454,15 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	transform: translateY(10rem) scale(0.8) scaleY(1.6);
 }
 
-.toast-enter-active {
-	transition: opacity 0.25s linear;
-}
-
-.toast-enter-from,
-.toast-leave-to {
-	opacity: 0;
-}
-
 @media (prefers-reduced-motion: no-preference) {
-	.toast-enter-active,
 	.nav-button-animated-enter-active {
 		transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
 	}
 
-	.toast-leave-active,
 	.nav-button-animated-leave-active {
 		transition: all 0.25s ease;
 	}
 
-	.toast-enter-from {
-		scale: 0.5;
-		translate: 0 -10rem;
-		opacity: 0;
-	}
-
-	.toast-leave-to {
-		scale: 0.96;
-		translate: 20rem 0;
-		opacity: 0;
-	}
-
 	.nav-button-animated-enter-active {
 		position: relative;
 	}
@@ -1461,7 +1526,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	}
 
 	.info-card {
-		right: 8rem;
+		right: 22rem;
 	}
 
 	.profile-card {

apps/app-frontend/src/assets/stylesheets/global.scss

@@ -155,4 +155,23 @@ img {
 	box-shadow: var(--shadow-card);
 }
 
+// From the Bootstrap project
+// The MIT License (MIT)
+// Copyright (c) 2011-2023 The Bootstrap Authors
+// https://github.com/twbs/bootstrap/blob/2f617215755b066904248525a8c56ea425dde871/scss/mixins/_visually-hidden.scss#L8
+.visually-hidden {
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+
+	&:not(caption) {
+		position: absolute !important;
+	}
+}
+
 @import '@modrinth/assets/omorphia.scss';

apps/app-frontend/src/components/ui/Instance.vue

@@ -69,7 +69,7 @@ const play = async (e, context) => {
 	await run(props.instance.path)
 		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
 		.finally(() => {
-			trackEvent('InstancePlay', {
+			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
 				game_version: props.instance.game_version,
 				source: context,

apps/app-frontend/src/components/ui/NavTabs.vue

@@ -1,5 +1,7 @@
 <template>
 	<nav
+		v-if="filteredLinks.length > 1"
+		ref="scrollContainer"
 		class="card-shadow experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
 	>
 		<RouterLink
@@ -14,13 +16,17 @@
 			<span class="text-nowrap">{{ link.label }}</span>
 		</RouterLink>
 		<div
-			:class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected'}`"
+			:class="[
+				'pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1',
+				subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
+				{ 'navtabs-transition': transitionsEnabled },
+			]"
 			:style="{
 				left: sliderLeftPx,
 				top: sliderTopPx,
 				right: sliderRightPx,
 				bottom: sliderBottomPx,
-				opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
+				opacity: sliderReady && activeIndex !== -1 ? 1 : 0,
 			}"
 			aria-hidden="true"
 		></div>
@@ -28,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { RouterLink, useRoute } from 'vue-router'
 
@@ -47,13 +53,16 @@ const props = defineProps<{
 	query?: string
 }>()
 
+const scrollContainer = ref<HTMLElement | null>(null)
 const sliderLeft = ref(4)
 const sliderTop = ref(4)
 const sliderRight = ref(4)
 const sliderBottom = ref(4)
 const activeIndex = ref(-1)
-const oldIndex = ref(-1)
 const subpageSelected = ref(false)
+const sliderReady = ref(false)
+const transitionsEnabled = ref(false)
+const sliderDelays = ref({ left: '0ms', top: '0ms', right: '0ms', bottom: '0ms' })
 
 const filteredLinks = computed(() =>
 	props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
@@ -63,6 +72,11 @@ const sliderTopPx = computed(() => `${sliderTop.value}px`)
 const sliderRightPx = computed(() => `${sliderRight.value}px`)
 const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
 
+const leftDelay = computed(() => sliderDelays.value.left)
+const rightDelay = computed(() => sliderDelays.value.right)
+const topDelay = computed(() => sliderDelays.value.top)
+const bottomDelay = computed(() => sliderDelays.value.bottom)
+
 function pickLink() {
 	let index = -1
 	subpageSelected.value = false
@@ -83,57 +97,54 @@ function pickLink() {
 	if (activeIndex.value !== -1) {
 		startAnimation()
 	} else {
-		oldIndex.value = -1
 		sliderLeft.value = 0
 		sliderRight.value = 0
 	}
 }
 
-const tabLinkElements = ref()
+function getTabElement(index: number): HTMLElement | null {
+	if (index === -1) return null
+	const container = scrollContainer.value
+	if (!container) return null
+	const tabs = container.querySelectorAll('.button-animation')
+	return (tabs[index] as HTMLElement) ?? null
+}
 
 function startAnimation() {
-	const el = tabLinkElements.value[activeIndex.value].$el
-
-	if (!el || !el.offsetParent) return
+	const el = getTabElement(activeIndex.value)
+	if (!el?.offsetParent) return
 
+	const parent = el.offsetParent as HTMLElement
 	const newValues = {
 		left: el.offsetLeft,
 		top: el.offsetTop,
-		right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
-		bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
+		right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
+		bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
 	}
 
-	if (sliderLeft.value === 4 && sliderRight.value === 4) {
+	const isInitialPosition = sliderLeft.value === 4 && sliderRight.value === 4
+
+	if (isInitialPosition) {
 		sliderLeft.value = newValues.left
 		sliderRight.value = newValues.right
 		sliderTop.value = newValues.top
 		sliderBottom.value = newValues.bottom
+		sliderReady.value = true
+		requestAnimationFrame(() => {
+			transitionsEnabled.value = true
+		})
 	} else {
-		const delay = 200
-
-		if (newValues.left < sliderLeft.value) {
-			sliderLeft.value = newValues.left
-			setTimeout(() => {
-				sliderRight.value = newValues.right
-			}, delay)
-		} else {
-			sliderRight.value = newValues.right
-			setTimeout(() => {
-				sliderLeft.value = newValues.left
-			}, delay)
-		}
-
-		if (newValues.top < sliderTop.value) {
-			sliderTop.value = newValues.top
-			setTimeout(() => {
-				sliderBottom.value = newValues.bottom
-			}, delay)
-		} else {
-			sliderBottom.value = newValues.bottom
-			setTimeout(() => {
-				sliderTop.value = newValues.top
-			}, delay)
+		const STAGGER_DELAY = '200ms'
+		sliderDelays.value = {
+			left: newValues.left < sliderLeft.value ? '0ms' : STAGGER_DELAY,
+			right: newValues.left < sliderLeft.value ? STAGGER_DELAY : '0ms',
+			top: newValues.top < sliderTop.value ? '0ms' : STAGGER_DELAY,
+			bottom: newValues.top < sliderTop.value ? STAGGER_DELAY : '0ms',
 		}
+		sliderLeft.value = newValues.left
+		sliderRight.value = newValues.right
+		sliderTop.value = newValues.top
+		sliderBottom.value = newValues.bottom
 	}
 }
 
@@ -146,7 +157,17 @@ onUnmounted(() => {
 	window.removeEventListener('resize', pickLink)
 })
 
-watch(route, () => {
+watch(
+	filteredLinks,
+	async () => {
+		await nextTick()
+		pickLink()
+	},
+	{ deep: true },
+)
+
+watch(route, async () => {
+	await nextTick()
 	pickLink()
 })
 </script>
@@ -154,7 +175,10 @@ watch(route, () => {
 .navtabs-transition {
 	/* Delay on opacity is to hide any jankiness as the page loads */
 	transition:
-		all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+		left 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
+		right 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
+		top 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(topDelay),
+		bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay),
 		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
 }
 </style>

apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue

@@ -69,7 +69,10 @@ onUnmounted(() => {
 			<SpinnerIcon class="animate-spin w-4 h-4" />
 		</div>
 	</NavButton>
-	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
+	<div
+		v-if="instances && recentInstances.length > 0"
+		class="h-px w-6 mx-auto my-2 bg-divider"
+	></div>
 </template>
 
 <style scoped lang="scss"></style>

apps/app-frontend/src/components/ui/RunningAppBar.vue

@@ -52,10 +52,12 @@
 				<h3 class="info-title">
 					{{ loadingBar.title }}
 				</h3>
-				<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
-				<div class="row">
-					{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
-					{{ loadingBar.message }}
+				<div class="flex flex-col gap-2 w-full">
+					<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
+					<div class="row">
+						{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
+						{{ loadingBar.message }}
+					</div>
 				</div>
 			</div>
 		</Card>
@@ -346,7 +348,7 @@ onBeforeUnmount(() => {
 .info-card {
 	position: absolute;
 	top: 3.5rem;
-	right: 0.5rem;
+	right: 2rem;
 	z-index: 9;
 	width: 20rem;
 	background-color: var(--color-raised-bg);
@@ -420,7 +422,7 @@ onBeforeUnmount(() => {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 0.5rem;
+	gap: 0.75rem;
 	margin: 0;
 	padding: 0;
 }

apps/app-frontend/src/components/ui/UpdateAvailableToast.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
-import { getVersion } from '@tauri-apps/api/app'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const { formatMessage } = useVIntl()
-
-const dismissed = ref(false)
-const availableUpdate = ref<{ version: string } | null>(null)
-
-let checkInterval: ReturnType<typeof setInterval> | null = null
-
-async function checkForUpdate() {
-	try {
-		const [response, currentVersion] = await Promise.all([
-			fetch('https://launcher-files.modrinth.com/updates.json'),
-			getVersion(),
-		])
-		const updates = await response.json()
-		const latestVersion = updates?.version
-
-		if (latestVersion && latestVersion !== currentVersion) {
-			if (latestVersion !== availableUpdate.value?.version) {
-				availableUpdate.value = { version: latestVersion }
-				dismissed.value = false
-			}
-		}
-	} catch (e) {
-		console.error('Failed to check for updates:', e)
-	}
-}
-
-function dismiss() {
-	dismissed.value = true
-}
-
-onMounted(() => {
-	checkForUpdate()
-	checkInterval = setInterval(checkForUpdate, 5 * 60 * 1000)
-})
-
-onUnmounted(() => {
-	if (checkInterval) {
-		clearInterval(checkInterval)
-	}
-})
-
-const messages = defineMessages({
-	title: {
-		id: 'app.update-toast.title',
-		defaultMessage: 'Update available',
-	},
-	body: {
-		id: 'app.update-toast.body.linux',
-		defaultMessage:
-			'Modrinth App v{version} is available. Use your package manager to update for the latest features and fixes!',
-	},
-	download: {
-		id: 'app.update-toast.download-page',
-		defaultMessage: 'Download',
-	},
-})
-</script>
-<template>
-	<div
-		v-if="availableUpdate && !dismissed"
-		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-surface-5 border-solid border-[2px]"
-	>
-		<div class="flex min-w-[25rem] gap-4">
-			<h2 class="whitespace-nowrap text-base text-contrast font-semibold m-0 grow">
-				{{ formatMessage(messages.title) }}
-			</h2>
-			<ButtonStyled size="small" circular>
-				<button v-tooltip="formatMessage(commonMessages.closeButton)" @click="dismiss">
-					<XIcon />
-				</button>
-			</ButtonStyled>
-		</div>
-		<p class="text-sm mt-2 mb-0">
-			{{ formatMessage(messages.body, { version: availableUpdate.version }) }}
-		</p>
-	</div>
-</template>

apps/app-frontend/src/components/ui/UpdateToast.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { DownloadIcon, ExternalIcon, RefreshCwIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, defineMessages, ProgressBar, useVIntl } from '@modrinth/ui'
-import { formatBytes } from '@modrinth/utils'
-import { ref } from 'vue'
-
-import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
-
-const { formatMessage } = useVIntl()
-
-const emit = defineEmits<{
-	(e: 'close' | 'restart' | 'download'): void
-}>()
-
-defineProps<{
-	version: string
-	size: number | null
-	metered: boolean
-}>()
-
-const downloading = ref(false)
-const { progress } = injectAppUpdateDownloadProgress()
-
-function download() {
-	emit('download')
-	downloading.value = true
-}
-
-const messages = defineMessages({
-	title: {
-		id: 'app.update-toast.title',
-		defaultMessage: 'Update available',
-	},
-	body: {
-		id: 'app.update-toast.body',
-		defaultMessage:
-			'Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App.',
-	},
-	reload: {
-		id: 'app.update-toast.reload',
-		defaultMessage: 'Reload',
-	},
-	download: {
-		id: 'app.update-toast.download',
-		defaultMessage: 'Download ({size})',
-	},
-	downloading: {
-		id: 'app.update-toast.downloading',
-		defaultMessage: 'Downloading...',
-	},
-	changelog: {
-		id: 'app.update-toast.changelog',
-		defaultMessage: 'Changelog',
-	},
-	meteredBody: {
-		id: 'app.update-toast.body.metered',
-		defaultMessage: `Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it.`,
-	},
-	downloadCompleteTitle: {
-		id: 'app.update-toast.title.download-complete',
-		defaultMessage: 'Download complete',
-	},
-	downloadedBody: {
-		id: 'app.update-toast.body.download-complete',
-		defaultMessage: `Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App.`,
-	},
-})
-</script>
-<template>
-	<div
-		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-surface-5 border-solid border-[2px]"
-		:class="{
-			'download-complete': progress === 1,
-		}"
-	>
-		<div class="flex min-w-[25rem] gap-4">
-			<h2 class="whitespace-nowrap text-base text-contrast font-semibold m-0 grow">
-				{{
-					formatMessage(metered && progress === 1 ? messages.downloadCompleteTitle : messages.title)
-				}}
-			</h2>
-			<ButtonStyled size="small" circular>
-				<button v-tooltip="formatMessage(commonMessages.closeButton)" @click="emit('close')">
-					<XIcon />
-				</button>
-			</ButtonStyled>
-		</div>
-		<p class="text-sm mt-2 mb-0">
-			{{
-				formatMessage(
-					metered
-						? progress === 1
-							? messages.downloadedBody
-							: messages.meteredBody
-						: messages.body,
-					{ version },
-				)
-			}}
-		</p>
-		<p
-			v-if="metered && progress < 1"
-			class="text-sm text-secondary mt-2 mb-0 flex items-center gap-1"
-		>
-			<template v-if="progress > 0">
-				<ProgressBar :progress="progress" class="max-w-[unset]" />
-			</template>
-		</p>
-		<div class="flex gap-2 mt-4">
-			<ButtonStyled color="brand">
-				<button v-if="metered && progress < 1" :disabled="downloading" @click="download">
-					<SpinnerIcon v-if="downloading" class="animate-spin" />
-					<DownloadIcon v-else />
-					{{
-						formatMessage(downloading ? messages.downloading : messages.download, {
-							size: formatBytes(size ?? 0),
-						})
-					}}
-				</button>
-				<button v-else @click="emit('restart')">
-					<RefreshCwIcon /> {{ formatMessage(messages.reload) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a href="https://modrinth.com/news/changelog?filter=app">
-					{{ formatMessage(messages.changelog) }} <ExternalIcon />
-				</a>
-			</ButtonStyled>
-		</div>
-	</div>
-</template>

apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { computed, ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { list } from '@/helpers/profile'
+import { add_server_to_profile, get_profile_worlds } from '@/helpers/worlds.ts'
+
+const { handleError } = injectNotificationManager()
+
+const modal = ref()
+const searchFilter = ref('')
+const profiles = ref([])
+
+const serverName = ref('')
+const serverAddress = ref('')
+
+const shownProfiles = computed(() =>
+	profiles.value.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	}),
+)
+
+defineExpose({
+	show: async (name, address) => {
+		serverName.value = name
+		serverAddress.value = address
+		searchFilter.value = ''
+
+		const profilesVal = await list().catch(handleError)
+		for (const profile of profilesVal) {
+			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
+			}
+		}
+
+		profiles.value = profilesVal
+		modal.value.show()
+
+		trackEvent('AddServerToInstanceStart', { source: 'AddServerToInstanceModal' })
+	},
+})
+
+async function addServer(profile) {
+	profile.adding = true
+	try {
+		await add_server_to_profile(profile.path, serverName.value, serverAddress.value, 'prompt')
+		profile.added = true
+
+		trackEvent('AddServerToInstance', {
+			server_name: serverName.value,
+			instance_name: profile.name,
+			source: 'AddServerToInstanceModal',
+		})
+	} catch (err) {
+		handleError(err)
+	}
+	profile.adding = false
+}
+</script>
+
+<template>
+	<ModalWrapper ref="modal" header="Add server to instance">
+		<div class="flex flex-col gap-4 min-w-[350px]">
+			<Admonition type="warning" body="This server may not be compatible with all instances." />
+			<StyledInput
+				v-model="searchFilter"
+				:icon="SearchIcon"
+				type="search"
+				placeholder="Search for an instance"
+				autocomplete="off"
+			/>
+			<div class="max-h-[21rem] overflow-y-auto">
+				<div
+					v-for="profile in shownProfiles"
+					:key="profile.path"
+					class="flex w-full items-center justify-between gap-2 bg-bg-raised text-icon shadow-none"
+				>
+					<router-link
+						class="btn btn-transparent p-2 text-left"
+						:to="`/instance/${encodeURIComponent(profile.path)}`"
+						@click="modal.hide()"
+					>
+						<Avatar
+							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
+							class="mr-2 [--size:2rem]"
+						/>
+						{{ profile.name }}
+					</router-link>
+					<ButtonStyled>
+						<button :disabled="profile.added || profile.adding" @click="addServer(profile)">
+							<PlusIcon v-if="!profile.added && !profile.adding" />
+							<CheckIcon v-else-if="profile.added" />
+							{{ profile.adding ? 'Adding...' : profile.added ? 'Added' : 'Add' }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<div class="input-group push-right">
+				<ButtonStyled>
+					<button @click="modal.hide()">Cancel</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -16,6 +16,7 @@ import { useRouter } from 'vue-router'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
+import { get_project_v3_many } from '@/helpers/cache.js'
 import {
 	add_project_from_version as installMod,
 	check_installed,
@@ -81,6 +82,22 @@ defineExpose({
 				handleError,
 			)
 		}
+
+		const linkedProjectIds = profilesVal
+			.filter((p) => p.linked_data?.project_id)
+			.map((p) => p.linked_data.project_id)
+		if (linkedProjectIds.length > 0) {
+			const linkedProjects = await get_project_v3_many(linkedProjectIds, 'must_revalidate').catch(
+				() => [],
+			)
+			const serverProjectIds = new Set(
+				linkedProjects.filter((p) => p?.minecraft_server != null).map((p) => p.id),
+			)
+			for (const profile of profilesVal) {
+				profile.isServerInstance = serverProjectIds.has(profile.linked_data?.project_id)
+			}
+		}
+
 		profiles.value = profilesVal
 
 		installModal.value.show()

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -29,7 +29,7 @@ import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vu
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { get_project, get_version_many } from '@/helpers/cache'
+import { get_project, get_version, get_version_many } from '@/helpers/cache'
 import { get_loader_versions } from '@/helpers/metadata'
 import { edit, install, update_repair_modrinth } from '@/helpers/profile'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
@@ -49,6 +49,9 @@ const modalConfirmUnpair = ref()
 const modalConfirmReinstall = ref()
 
 const props = defineProps<InstanceSettingsTabProps>()
+const emit = defineEmits<{
+	unlinked: []
+}>()
 
 const loader = ref(props.instance.loader)
 const gameVersion = ref(props.instance.game_version)
@@ -110,6 +113,12 @@ if (props.instance.linked_data && props.instance.linked_data.project_id && !prop
 							versions.find(
 								(version: Version) => version.id === props.instance.linked_data?.version_id,
 							) ?? null
+
+						if (!modpackVersion.value) {
+							get_version(props.instance.linked_data?.version_id, 'bypass')
+								.then((version: Version) => (modpackVersion.value = version ?? null))
+								.catch(handleError)
+						}
 					})
 					.catch(handleError)
 					.finally(() => {
@@ -267,7 +276,7 @@ async function unpairProfile() {
 	modpackProject.value = null
 	modpackVersion.value = null
 	modpackVersions.value = null
-	modalConfirmUnpair.value.hide()
+	emit('unlinked')
 }
 
 async function repairModpack() {
@@ -424,6 +433,18 @@ const messages = defineMessages({
 		id: 'instance.settings.tabs.installation.unlink.description',
 		defaultMessage: `This instance is linked to a modpack, which means mods can't be updated and you can't change the mod loader or Minecraft version. Unlinking will permanently disconnect this instance from the modpack.`,
 	},
+	unlinkServerTitle: {
+		id: 'instance.settings.tabs.installation.unlink-server.title',
+		defaultMessage: 'Unlink from server',
+	},
+	unlinkServerDescription: {
+		id: 'instance.settings.tabs.installation.unlink-server.description',
+		defaultMessage: `This instance is linked to a server, which means mods can't be updated and you can't change the mod loader or Minecraft version. Unlinking will permanently disconnect this instance from the server.`,
+	},
+	unlinkServerVanillaDescription: {
+		id: 'instance.settings.tabs.installation.unlink-server-vanilla.description',
+		defaultMessage: `This instance is linked to a server, which means you can't change the Minecraft version. Unlinking will permanently disconnect this instance from the server.`,
+	},
 	unlinkInstanceButton: {
 		id: 'instance.settings.tabs.installation.unlink.button',
 		defaultMessage: 'Unlink instance',
@@ -557,17 +578,27 @@ const messages = defineMessages({
 										})
 							}}
 						</span>
-						<span class="text-sm text-secondary leading-none">
+						<span class="text-sm text-secondary leading-none capitalize">
 							{{
 								modpackProject
 									? modpackVersion
 										? modpackVersion?.version_number
-										: 'Unknown version'
+										: props.isMinecraftServer
+											? ''
+											: 'Unknown version'
 									: formatLoader(formatMessage, instance.loader)
 							}}
 							<template v-if="instance.loader !== 'vanilla' && !modpackProject">
 								{{ instance.loader_version || formatMessage(messages.unknownVersion) }}
 							</template>
+							<template
+								v-else-if="
+									instance.loader && instance.loader !== 'vanilla' && props.isMinecraftServer
+								"
+							>
+								{{ instance.loader }}
+								{{ instance.loader_version }}
+							</template>
 						</span>
 					</div>
 				</div>
@@ -599,7 +630,10 @@ const messages = defineMessages({
 							}}
 						</button>
 					</ButtonStyled>
-					<ButtonStyled v-if="modpackProject" hover-color-fill="background">
+					<ButtonStyled
+						v-if="modpackProject && !props.isMinecraftServer"
+						hover-color-fill="background"
+					>
 						<button
 							v-tooltip="
 								changingVersion
@@ -754,17 +788,29 @@ const messages = defineMessages({
 		<template v-else>
 			<template v-if="instance.linked_data && instance.linked_data.locked">
 				<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-					{{ formatMessage(messages.unlinkInstanceTitle) }}
+					{{
+						formatMessage(
+							props.isMinecraftServer ? messages.unlinkServerTitle : messages.unlinkInstanceTitle,
+						)
+					}}
 				</h2>
 				<p class="m-0">
-					{{ formatMessage(messages.unlinkInstanceDescription) }}
+					{{
+						formatMessage(
+							props.isMinecraftServer
+								? instance.loader === 'vanilla'
+									? messages.unlinkServerVanillaDescription
+									: messages.unlinkServerDescription
+								: messages.unlinkInstanceDescription,
+						)
+					}}
 				</p>
 				<ButtonStyled>
 					<button class="mt-2" @click="modalConfirmUnpair.show()">
 						<UnlinkIcon /> {{ formatMessage(messages.unlinkInstanceButton) }}
 					</button>
 				</ButtonStyled>
-				<template v-if="modpackProject">
+				<template v-if="modpackProject && !props.isMinecraftServer">
 					<div>
 						<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast block mt-4">
 							{{ formatMessage(messages.reinstallModpackTitle) }}

apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ConfirmModal } from '@modrinth/ui'
-import { ref } from 'vue'
+import { useTemplateRef } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.ts'
@@ -49,16 +49,16 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['proceed'])
-const modal = ref(null)
+const modal = useTemplateRef('modal')
 
 defineExpose({
 	show: () => {
 		hide_ads_window()
-		modal.value.show()
+		modal.value?.show()
 	},
 	hide: () => {
 		onModalHide()
-		modal.value.hide()
+		modal.value?.hide()
 	},
 })
 

apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue

@@ -1,36 +1,41 @@
 <template>
 	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
-		<div class="flex flex-col gap-6 max-w-[500px]">
-			<Admonition type="info" :header="formatMessage(messages.sharedServerInstance)">
+		<div v-if="requiredContentProject" class="flex flex-col gap-6 max-w-[500px]">
+			<Admonition type="info" :header="formatMessage(messages.contentRequired)">
 				{{ formatMessage(messages.serverRequiresMods) }}
 			</Admonition>
 
-			<div v-if="sharedBy?.name" class="flex items-center gap-2 text-sm text-secondary">
-				<Avatar
-					v-if="sharedBy?.icon_url"
-					:src="sharedBy.icon_url"
-					:alt="sharedBy.name"
-					size="24px"
-				/>
-				<span>
-					<IntlFormatted :message-id="messages.sharedByToday">
-						<template #~name>
-							<span class="font-semibold text-contrast">{{ sharedBy.name }}</span>
-						</template>
-					</IntlFormatted>
-				</span>
-			</div>
+			<div class="flex flex-col gap-1">
+				<div class="flex justify-between items-center">
+					<span class="font-semibold text-contrast">{{
+						formatMessage(messages.requiredModpack)
+					}}</span>
 
-			<div class="flex flex-col gap-2">
-				<span class="font-semibold text-contrast">
-					{{ formatMessage(messages.sharedInstance) }}
-				</span>
-				<div class="flex items-center gap-3 rounded-xl bg-surface-4 p-3">
-					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />
+					<ButtonStyled type="transparent">
+						<button @click="openViewContents">
+							<EyeIcon />
+							{{ formatMessage(messages.viewContents) }}
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<div class="flex items-center gap-3 rounded-xl bg-surface-2 p-3">
+					<Avatar
+						:src="requiredContentProject.icon_url"
+						:alt="requiredContentProject.title"
+						size="48px"
+					/>
 					<div class="flex flex-col gap-0.5">
-						<span class="font-semibold text-contrast">{{ project.title }}</span>
+						<span class="font-semibold text-contrast">
+							<template v-if="usingCustomModpack && modpackVersion">
+								{{ modpackVersion.name }}
+							</template>
+							<template v-else>
+								{{ requiredContentProject.title }}
+							</template>
+						</span>
 						<span class="text-sm text-secondary">
-							{{ loaderDisplay }} {{ project.game_versions?.[0] }}
+							{{ loaderDisplay }} {{ requiredContentProject.game_versions?.[0] }}
 							<template v-if="modCount">
 								· {{ formatMessage(messages.modCount, { count: modCount }) }}
 							</template>
@@ -57,11 +62,17 @@
 			</div>
 		</template>
 	</NewModal>
+
+	<ModpackContentModal
+		ref="modpackContentModal"
+		:modpack-name="project?.name ?? ''"
+		:modpack-icon-url="project?.icon_url ?? undefined"
+	/>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { DownloadIcon, EyeIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	Avatar,
@@ -69,75 +80,59 @@ import {
 	commonMessages,
 	defineMessages,
 	formatLoader,
-	IntlFormatted,
+	ModpackContentModal,
 	NewModal,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
-import { get_organization, get_team, get_version } from '@/helpers/cache.js'
-import { install } from '@/store/install.js'
+import { hide_ads_window, show_ads_window } from '@/helpers/ads'
+import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
+import { installServerProject, useInstall } from '@/store/install.js'
 
-const props = defineProps<{
-	project: Labrinth.Projects.v2.Project
-}>()
+import type { ContentItem } from '../../../../../../packages/ui/src/components/instances/types'
 
 const modal = ref<InstanceType<typeof NewModal>>()
+const modpackVersionId = ref<string | null>(null)
+const modpackVersion = ref<Labrinth.Versions.v2.Version | null>(null)
+const project = ref<Labrinth.Projects.v3.Project | null>(null)
+const requiredContentProject = ref<Labrinth.Projects.v2.Project | null>(null)
+const onInstallComplete = ref<() => void>(() => {})
 const { formatMessage } = useVIntl()
+const installStore = useInstall()
 
-const { data: organization } = useQuery({
-	queryKey: computed(() => ['organization', props.project.organization]),
-	queryFn: () => get_organization(props.project.organization!, 'must_revalidate'),
-	enabled: computed(() => !!props.project.organization),
-})
-
-const { data: teamMembers } = useQuery({
-	queryKey: computed(() => ['team', props.project.team]),
-	queryFn: () => get_team(props.project.team, 'must_revalidate'),
-	enabled: computed(() => !!props.project.team && !props.project.organization),
-})
-
-const sharedBy = computed(() => {
-	if (organization.value) {
-		return {
-			name: organization.value.name,
-			icon_url: organization.value.icon_url,
-		}
-	}
-	if (teamMembers.value) {
-		const owner = teamMembers.value.find((member: { is_owner: boolean }) => member.is_owner)
-		if (owner) {
-			return {
-				name: owner.user.username,
-				icon_url: owner.user.avatar_url,
-			}
-		}
-	}
-	return null
+const usingCustomModpack = computed(() => {
+	return requiredContentProject.value?.id === project.value?.id
 })
 
 const loaderDisplay = computed(() => {
-	const loader = props.project.loaders?.[0]
+	const loader = requiredContentProject.value?.loaders?.[0]
 	if (!loader) return ''
 	return formatLoader(formatMessage, loader)
 })
 
-// Fetch the most recent version to get mod count from dependencies
-const latestVersionId = computed(() => props.project.versions?.[0] ?? null)
-const { data: latestVersion } = useQuery({
-	queryKey: computed(() => ['version', latestVersionId.value]),
-	queryFn: () => get_version(latestVersionId.value, 'must_revalidate'),
-	enabled: computed(() => !!latestVersionId.value),
-})
-const modCount = computed(() => latestVersion.value?.dependencies?.length)
+const modCount = computed(() => modpackVersion.value?.dependencies?.length)
+
+async function fetchData(versionId: string) {
+	// cache is making version null for some reason so bypassing for now
+	modpackVersion.value = await get_version(versionId, 'bypass')
+
+	if (modpackVersion.value?.project_id) {
+		requiredContentProject.value = await get_project(modpackVersion.value.project_id, 'bypass')
+	}
+}
 
 async function handleAccept() {
 	hide()
+	const serverProjectId = project.value?.id
+	installStore.startInstallingServer(serverProjectId)
 	try {
-		await install(props.project.id, null, null, 'ProjectPageInstallToPlayModal')
+		await installServerProject(serverProjectId)
+		onInstallComplete.value()
 	} catch (error) {
-		console.error('Failed to install project from InstallToPlayModal:', error)
+		console.error('Failed to install server project from InstallToPlayModal:', error)
+	} finally {
+		installStore.stopInstallingServer(serverProjectId)
 	}
 }
 
@@ -145,12 +140,95 @@ function handleDecline() {
 	hide()
 }
 
-function show(e?: MouseEvent) {
+const modpackContentModal = ref<InstanceType<typeof ModpackContentModal>>()
+
+async function openViewContents() {
+	modpackContentModal.value?.showLoading()
+	try {
+		// Ensure version data is available — the useQuery may not have resolved yet
+		const versionId = modpackVersionId.value
+		const version =
+			modpackVersion.value ?? (versionId ? await get_version(versionId, 'must_revalidate') : null)
+
+		const deps = version?.dependencies ?? []
+
+		const projectIds = deps
+			.map((d: { project_id?: string }) => d.project_id)
+			.filter((id: string | undefined): id is string => !!id)
+
+		const versionIds = deps
+			.map((d: { version_id?: string }) => d.version_id)
+			.filter((id: string | undefined): id is string => !!id)
+
+		const projects: Labrinth.Projects.v2.Project[] =
+			projectIds.length > 0 ? await get_project_many(projectIds, 'must_revalidate') : []
+
+		const versions: Labrinth.Versions.v2.Version[] =
+			versionIds.length > 0 ? await get_version_many(versionIds, 'must_revalidate') : []
+
+		const projectMap = new Map(projects.map((p: Labrinth.Projects.v2.Project) => [p.id, p]))
+
+		const contentItems: ContentItem[] = deps.map(
+			(dep: Labrinth.Versions.v2.Dependency): ContentItem => {
+				const depProject = dep.project_id ? projectMap.get(dep.project_id) : null
+				// @ts-expect-error - version_id is missing from the type for some reason
+				const depVersion = dep.version_id
+					? // @ts-expect-error - version_id is missing from the type for some reason
+						versions.find((v: Labrinth.Versions.v2.Version) => v.id === dep.version_id)
+					: null
+
+				return {
+					file_name: dep.file_name ?? depProject?.title ?? 'Unknown',
+					project_type: depProject?.project_type ?? 'mod',
+					has_update: false,
+					update_version_id: null,
+					project: {
+						id: depProject?.id ?? dep.project_id ?? dep.file_name ?? 'unknown',
+						slug: depProject?.slug ?? dep.project_id ?? 'unknown',
+						title: depProject?.title ?? dep.file_name ?? 'Unknown',
+						icon_url: depProject?.icon_url ?? undefined,
+					},
+					...(depVersion
+						? {
+								version: {
+									id: depVersion.id,
+									file_name: depVersion.files?.[0]?.filename ?? dep.file_name,
+									version_number: depVersion.version_number ?? undefined,
+									date_published: depVersion.date_published ?? undefined,
+								},
+							}
+						: {}),
+				}
+			},
+		)
+		modpackContentModal.value?.show(contentItems)
+	} catch (err) {
+		console.error('Failed to load modpack contents:', err)
+		modpackContentModal.value?.show([])
+	}
+}
+
+async function show(
+	projectVal: Labrinth.Projects.v3.Project,
+	modpackVersionIdVal: string | null = null,
+	callback: () => void = () => {},
+	e?: MouseEvent,
+) {
+	project.value = projectVal
+	modpackVersionId.value = modpackVersionIdVal
+	modpackVersion.value = null
+	requiredContentProject.value = null
+	onInstallComplete.value = callback
+
+	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)
+
+	hide_ads_window()
 	modal.value?.show(e)
 }
 
 function hide() {
 	modal.value?.hide()
+	show_ads_window()
 }
 
 const messages = defineMessages({
@@ -162,14 +240,18 @@ const messages = defineMessages({
 		id: 'app.modal.install-to-play.shared-server-instance',
 		defaultMessage: 'Shared server instance',
 	},
+	contentRequired: {
+		id: 'app.modal.install-to-play.content-required',
+		defaultMessage: 'Content required',
+	},
 	serverRequiresMods: {
 		id: 'app.modal.install-to-play.server-requires-mods',
 		defaultMessage:
-			'This server requires mods to play. Click install to set up the required files from Modrinth.',
+			'This server requires mods to play. Click Install to set up the required files from Modrinth, then launch directly into the server.',
 	},
-	sharedByToday: {
-		id: 'app.modal.install-to-play.shared-by-today',
-		defaultMessage: '{name} shared this instance with you today.',
+	requiredModpack: {
+		id: 'app.modal.install-to-play.required-modpack',
+		defaultMessage: 'Required modpack',
 	},
 	sharedInstance: {
 		id: 'app.modal.install-to-play.shared-instance',
@@ -183,6 +265,10 @@ const messages = defineMessages({
 		id: 'app.modal.install-to-play.install-button',
 		defaultMessage: 'Install',
 	},
+	viewContents: {
+		id: 'app.modal.install-to-play.view-contents',
+		defaultMessage: 'View contents',
+	},
 })
 
 defineExpose({ show, hide })

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	ChevronRightIcon,
 	CodeIcon,
@@ -16,7 +17,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
 import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
@@ -24,14 +25,38 @@ import InstallationSettings from '@/components/ui/instance_settings/Installation
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_project_v3 } from '@/helpers/cache'
 
 import type { InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
+const emit = defineEmits<{
+	unlinked: []
+}>()
 
-const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
+const isMinecraftServer = ref(false)
+const handleUnlinked = () => emit('unlinked')
+
+watch(
+	() => props.instance,
+	(instance) => {
+		isMinecraftServer.value = false
+		if (instance.linked_data?.project_id) {
+			get_project_v3(instance.linked_data.project_id, 'must_revalidate')
+				.then((project: Labrinth.Projects.v3.Project | undefined) => {
+					if (project?.minecraft_server != null) {
+						isMinecraftServer.value = true
+					}
+				})
+				.catch(() => {})
+		}
+	},
+	{ immediate: true },
+)
+
+const tabs = computed<TabbedModalTab<InstanceSettingsTabProps>[]>(() => [
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.general',
@@ -72,7 +97,7 @@ const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
 		icon: CodeIcon,
 		content: HooksSettings,
 	},
-]
+])
 
 const modal = ref()
 
@@ -98,6 +123,17 @@ defineExpose({ show })
 			</span>
 		</template>
 
-		<TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props }))" />
+		<TabbedModal
+			:tabs="
+				tabs.map((tab) => ({
+					...tab,
+					props: {
+						...props,
+						isMinecraftServer,
+						onUnlinked: handleUnlinked,
+					},
+				}))
+			"
+		/>
 	</ModalWrapper>
 </template>

apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue

@@ -1,8 +1,14 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.updateToPlay)" :closable="true" no-padding>
-		<div class="max-w-[500px]">
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.updateToPlay)"
+		:closable="true"
+		no-padding
+		@hide="() => show_ads_window()"
+	>
+		<div v-if="instance" class="max-w-[500px]">
 			<div class="flex flex-col gap-4 p-4">
-				<Admonition type="warning" :header="formatMessage(messages.updateRequired)">
+				<Admonition type="info" :header="formatMessage(messages.updateRequired)">
 					{{ formatMessage(messages.updateRequiredDescription, { name: instance.name }) }}
 				</Admonition>
 
@@ -26,18 +32,25 @@
 					</div>
 				</div>
 			</div>
-			<div v-if="diffs.length" class="flex flex-col bg-surface-2 p-4 max-h-[272px] overflow-y-auto">
+			<div
+				v-if="diffs.length"
+				class="flex flex-col bg-surface-2 p-4 max-h-[272px] overflow-y-auto border-t border-b border-r-0 border-l-0 border-solid border-surface-5"
+			>
 				<div
-					v-for="diff in diffs"
+					v-for="(diff, index) in diffs"
 					:key="diff.project_id"
-					class="grid grid-cols-[auto_1fr_1fr_1fr] items-center min-h-10 h-10 gap-2"
+					class="grid items-center min-h-10 h-10 gap-2"
+					:class="diff.project?.title ? 'grid-cols-[auto_1fr_1fr_1fr]' : 'grid-cols-[auto_1fr_1fr]'"
 				>
 					<div class="flex flex-col justify-between items-center">
 						<div class="w-[1px] h-2"></div>
 						<PlusIcon v-if="diff.type === 'added'" />
 						<MinusIcon v-else-if="diff.type === 'removed'" />
 						<RefreshCwIcon v-else />
-						<div class="bg-surface-5 w-[1px] h-2 relative top-1"></div>
+						<div
+							:class="index === diffs.length - 1 ? 'bg-transparent' : 'bg-surface-5'"
+							class="w-[1px] h-2 relative top-1"
+						></div>
 					</div>
 
 					<div class="flex gap-1 col-span-2">
@@ -49,14 +62,32 @@
 						>
 							{{ diff.project.title }}
 						</span>
+						<span
+							v-else-if="diff.fileName"
+							v-tooltip="diff.fileName"
+							class="text-sm text-contrast font-medium truncate"
+						>
+							{{ decodeURIComponent(diff.fileName) }}
+						</span>
 					</div>
 
 					<span
-						v-if="getFilename(diff.newVersion) || getFilename(diff.currentVersion)"
-						v-tooltip="getFilename(diff.newVersion) || getFilename(diff.currentVersion)"
+						v-if="
+							diff.project?.title &&
+							(getFilename(diff.newVersion) || getFilename(diff.currentVersion) || diff.fileName)
+						"
+						v-tooltip="
+							getFilename(diff.newVersion) ||
+							getFilename(diff.currentVersion) ||
+							decodeURIComponent(diff.fileName || '')
+						"
 						class="text-xs truncate text-right"
 					>
-						{{ getFilename(diff.newVersion) || getFilename(diff.currentVersion) }}
+						{{
+							getFilename(diff.newVersion) ||
+							getFilename(diff.currentVersion) ||
+							decodeURIComponent(diff.fileName || '')
+						}}
 					</span>
 				</div>
 			</div>
@@ -111,9 +142,11 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
 import { computed, ref, watch } from 'vue'
 
-import { get_project, get_project_many, get_version_many } from '@/helpers/cache.js'
+import { hide_ads_window, show_ads_window } from '@/helpers/ads'
+import { get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
 import { update_managed_modrinth_version } from '@/helpers/profile'
 import type { GameInstance } from '@/helpers/types'
+import { useInstall } from '@/store/install.js'
 
 type Dependency = Labrinth.Versions.v3.Dependency
 type Version = Labrinth.Versions.v2.Version
@@ -129,6 +162,7 @@ interface BaseDiff {
 	newVersionId?: string
 	currentVersion?: Version
 	newVersion?: Version
+	fileName?: string
 }
 interface AddedDiff extends BaseDiff {
 	type: 'added'
@@ -151,22 +185,22 @@ type ProjectInfo = {
 	slug: string
 }
 
-const { instance } = defineProps<{
-	instance: GameInstance
-}>()
-
 const { formatMessage } = useVIntl()
+const installStore = useInstall()
+type UpdateCompleteCallback = () => void | Promise<void>
 
 const modal = ref<InstanceType<typeof NewModal>>()
+const instance = ref<GameInstance | null>(null)
+const onUpdateComplete = ref<UpdateCompleteCallback>(() => {})
 const diffs = ref<DependencyDiff[]>([])
-const latestVersionId = ref<string | null>(null)
-const latestVersion = ref<Version | null>(null)
+const modpackVersionId = ref<string | null>(null)
+const modpackVersion = ref<Version | null>(null)
 
 const removedCount = computed(() => diffs.value.filter((d) => d.type === 'removed').length)
 const addedCount = computed(() => diffs.value.filter((d) => d.type === 'added').length)
 const updatedCount = computed(() => diffs.value.filter((d) => d.type === 'updated').length)
 const publishedDate = computed(() =>
-	latestVersion.value?.date_published ? new Date(latestVersion.value.date_published) : null,
+	modpackVersion.value?.date_published ? new Date(modpackVersion.value.date_published) : null,
 )
 
 function getFilename(version?: Version): string | undefined {
@@ -177,18 +211,27 @@ async function computeDependencyDiffs(
 	currentDeps: Dependency[],
 	latestDeps: Dependency[],
 ): Promise<DependencyDiff[]> {
+	console.log('Computing dependency diffs', { currentDeps, latestDeps })
+
+	// Separate deps with project_id from file_name-only deps
+	const currentWithProject = currentDeps.filter((d) => d.project_id)
+	const latestWithProject = latestDeps.filter((d) => d.project_id)
+	const currentFileOnly = currentDeps.filter((d) => !d.project_id && d.file_name)
+	const latestFileOnly = latestDeps.filter((d) => !d.project_id && d.file_name)
+
 	const currentByProject = new Map<string, Dependency>(
-		currentDeps.map((d) => [d.project_id || '', d]),
+		currentWithProject.map((d) => [d.project_id!, d]),
 	)
 	const latestByProject = new Map<string, Dependency>(
-		latestDeps.map((d) => [d.project_id || '', d]),
+		latestWithProject.map((d) => [d.project_id!, d]),
 	)
+	const currentFilenames = new Set(currentFileOnly.map((d) => d.file_name!))
+	const latestFilenames = new Set(latestFileOnly.map((d) => d.file_name!))
 
 	const diffs: DependencyDiff[] = []
 
-	// Find added and updated dependencies
+	// Find added and updated dependencies (by project_id)
 	latestByProject.forEach((latestDep, projectId) => {
-		if (!projectId) return
 		const currentDep = currentByProject.get(projectId)
 		if (!currentDep && latestDep.version_id) {
 			diffs.push({ type: 'added', project_id: projectId, newVersionId: latestDep.version_id })
@@ -206,9 +249,8 @@ async function computeDependencyDiffs(
 		}
 	})
 
-	// Find removed dependencies
+	// Find removed dependencies (by project_id)
 	currentByProject.forEach((currentDep, projectId) => {
-		if (!projectId) return
 		if (!latestByProject.has(projectId)) {
 			diffs.push({
 				type: 'removed',
@@ -218,6 +260,19 @@ async function computeDependencyDiffs(
 		}
 	})
 
+	// Find added/removed file_name-only dependencies
+	// ideally in future, this should use the hash of the file instead of filename, but since version dependencies don't include file hashes, we'll use filename as a best effort approach
+	for (const fileName of latestFilenames) {
+		if (!currentFilenames.has(fileName)) {
+			diffs.push({ type: 'added', project_id: '', newVersionId: '' as string, fileName })
+		}
+	}
+	for (const fileName of currentFilenames) {
+		if (!latestFilenames.has(fileName)) {
+			diffs.push({ type: 'removed', project_id: '', fileName })
+		}
+	}
+
 	// Fetch projects and versions of diffs
 	const allProjectIds = [...new Set(diffs.map((d) => d.project_id).filter(Boolean))]
 	const allVersionIds = [
@@ -228,14 +283,14 @@ async function computeDependencyDiffs(
 		),
 	] as string[]
 	const [projects, versions] = await Promise.all([
-		get_project_many(allProjectIds, 'must_revalidate'),
-		get_version_many(allVersionIds, 'must_revalidate'),
+		get_project_many(allProjectIds, 'bypass'),
+		get_version_many(allVersionIds, 'bypass'),
 	])
 
 	const projectMap = new Map<string, ProjectInfo>(projects.map((p: ProjectInfo) => [p.id, p]))
 	const versionMap = new Map<string, Version>(versions.map((v: Version) => [v.id, v]))
 
-	return diffs
+	const mappedDiffs = diffs
 		.map((diff) => {
 			const project = projectMap.get(diff.project_id)
 			return {
@@ -256,34 +311,26 @@ async function computeDependencyDiffs(
 			const bDate = b.newVersion?.date_published || b.currentVersion?.date_published || ''
 			return dayjs(bDate).valueOf() - dayjs(aDate).valueOf()
 		})
+		.filter((d) => d.project || d.fileName) // filter out any diffs that couldn't be matched to a project or file
+	return mappedDiffs
 }
 
-async function checkUpdateAvailable(instance: GameInstance): Promise<DependencyDiff[] | null> {
-	if (!instance.linked_data) return null
+async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[] | null> {
+	if (!inst.linked_data) return null
+	if (!modpackVersionId.value || !inst.linked_data.version_id) return null
 
 	try {
-		const project = await get_project(instance.linked_data.project_id, 'must_revalidate')
-		if (!project || !project.versions || project.versions.length === 0) {
-			return null
-		}
-
-		const versions = await get_version_many(project.versions, 'must_revalidate')
-		const sortedVersions = versions.sort(
-			(a: { date_published: string }, b: { date_published: string }) =>
-				dayjs(b.date_published).valueOf() - dayjs(a.date_published).valueOf(),
-		)
-
-		latestVersion.value = sortedVersions[0]
-		latestVersionId.value = latestVersion.value?.id || null
-
-		const currentVersionId = instance.linked_data.version_id
-		const currentVersion = versions.find((v: { id: string }) => v.id === currentVersionId)
+		// For server projects, linked_data.project_id is the server project but
+		// linked_data.version_id references a content modpack version from a different project.
+		// Detect this by comparing the version's project_id with linked_data.project_id.
+		modpackVersion.value = await get_version(modpackVersionId.value, 'bypass')
+		const instanceModpackVersion = await get_version(inst.linked_data.version_id, 'bypass')
 
 		// Compute dependency diffs between current and latest version
-		if (currentVersion && latestVersion.value) {
+		if (instanceModpackVersion && modpackVersion.value) {
 			return await computeDependencyDiffs(
-				currentVersion.dependencies || [],
-				latestVersion.value.dependencies || [],
+				instanceModpackVersion.dependencies || [],
+				modpackVersion.value.dependencies || [],
 			)
 		}
 	} catch (error) {
@@ -294,9 +341,10 @@ async function checkUpdateAvailable(instance: GameInstance): Promise<DependencyD
 }
 
 watch(
-	() => instance,
-	async () => {
-		const result = await checkUpdateAvailable(instance)
+	() => instance.value,
+	async (newInstance) => {
+		if (!newInstance) return
+		const result = await checkUpdateAvailable(newInstance)
 		diffs.value = result || []
 	},
 	{ immediate: true, deep: true },
@@ -304,18 +352,25 @@ watch(
 
 async function handleUpdate() {
 	hide()
+	const serverProjectId = instance.value?.linked_data?.project_id
+	if (serverProjectId) installStore.startInstallingServer(serverProjectId)
 	try {
-		if (latestVersionId.value) {
-			await update_managed_modrinth_version(instance.path, latestVersionId.value)
+		if (modpackVersionId.value && instance.value) {
+			await update_managed_modrinth_version(instance.value.path, modpackVersionId.value)
+			await onUpdateComplete.value()
 		}
 	} catch (error) {
 		console.error('Error updating instance:', error)
+	} finally {
+		if (serverProjectId) installStore.stopInstallingServer(serverProjectId)
 	}
 }
 
 function handleReport() {
-	if (instance.linked_data?.project_id) {
-		openUrl(`https://modrinth.com/report?item=project&itemID=${instance.linked_data.project_id}`)
+	if (instance.value?.linked_data?.project_id) {
+		openUrl(
+			`https://modrinth.com/report?item=project&itemID=${instance.value.linked_data.project_id}`,
+		)
 	}
 }
 
@@ -323,7 +378,16 @@ function handleDecline() {
 	hide()
 }
 
-function show(e?: MouseEvent) {
+function show(
+	instanceVal: GameInstance,
+	modpackVersionIdVal: string | null = null,
+	callback: UpdateCompleteCallback = () => {},
+	e?: MouseEvent,
+) {
+	instance.value = instanceVal
+	modpackVersionId.value = modpackVersionIdVal
+	onUpdateComplete.value = callback
+	hide_ads_window()
 	modal.value?.show(e)
 }
 
@@ -378,5 +442,13 @@ const diffTypeMessages = defineMessages({
 	},
 })
 
-defineExpose({ show, hide })
+const hasUpdate = computed(() => {
+	if (!instance.value?.linked_data) return false
+	return (
+		modpackVersionId.value != null &&
+		modpackVersionId.value !== instance.value.linked_data.version_id
+	)
+})
+
+defineExpose({ show, hide, hasUpdate })
 </script>

apps/app-frontend/src/components/ui/settings/LanguageSettings.vue

@@ -8,14 +8,14 @@ import {
 	LOCALES,
 	useVIntl,
 } from '@modrinth/ui'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
 import i18n from '@/i18n.config'
 
 const { formatMessage } = useVIntl()
 
-const platform = formatMessage(languageSelectorMessages.platformApp)
+const platform = computed(() => formatMessage(languageSelectorMessages.platformApp))
 
 const settings = ref(await get())
 

apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue

@@ -28,10 +28,12 @@ watch(
 async function purgeCache() {
 	await purge_cache_types([
 		'project',
+		'project_v3',
 		'version',
 		'user',
 		'team',
 		'organization',
+		'file',
 		'loader_manifest',
 		'minecraft_manifest',
 		'categories',
@@ -39,8 +41,10 @@ async function purgeCache() {
 		'loaders',
 		'game_versions',
 		'donation_platforms',
+		'file_hash',
 		'file_update',
 		'search_results',
+		'search_results_v3',
 	]).catch(handleError)
 }
 

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -80,7 +80,7 @@ const play = async (event: MouseEvent) => {
 	await run(props.instance.path)
 		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
 		.finally(() => {
-			trackEvent('InstancePlay', {
+			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
 				game_version: props.instance.game_version,
 				source: 'InstanceItem',

apps/app-frontend/src/components/ui/world/RecentWorldsList.vue

@@ -175,10 +175,17 @@ function refreshServer(address: string, instancePath: string) {
 	refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
 }
 
-async function joinWorld(world: WorldWithProfile) {
+async function joinWorld(world: WorldWithProfile, instance?: GameInstance) {
 	console.log(`Joining world ${getWorldIdentifier(world)}`)
 	if (world.type === 'server') {
 		await start_join_server(world.profile, world.address).catch(handleError)
+		if (instance) {
+			trackEvent('InstanceStart', {
+				loader: instance.loader,
+				game_version: instance.game_version,
+				source: 'WorldItem',
+			})
+		}
 	} else if (world.type === 'singleplayer') {
 		await start_join_singleplayer_world(world.profile, world.path).catch(handleError)
 	}
@@ -188,7 +195,7 @@ async function playInstance(instance: GameInstance) {
 	await run(instance.path)
 		.catch((err) => handleSevereError(err, { profilePath: instance.path }))
 		.finally(() => {
-			trackEvent('InstancePlay', {
+			trackEvent('InstanceStart', {
 				loader: instance.loader,
 				game_version: instance.game_version,
 				source: 'WorldItem',
@@ -317,7 +324,7 @@ onUnmounted(() => {
 						() => {
 							currentProfile = item.instance.path
 							currentWorld = getWorldIdentifier(item.world)
-							joinWorld(item.world)
+							joinWorld(item.world, item.instance)
 						}
 					"
 					@play-instance="

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -25,6 +25,7 @@ import {
 	defineMessages,
 	OverflowMenu,
 	SmartClickable,
+	TagItem,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -46,6 +47,8 @@ import type {
 } from '@/helpers/worlds.ts'
 import { getWorldIdentifier, set_world_display_status } from '@/helpers/worlds.ts'
 
+import { LockIcon } from '../../../../../../packages/assets/generated-icons'
+
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 
@@ -78,6 +81,8 @@ const props = withDefaults(
 			message: MessageDescriptor
 		}
 
+		managed?: boolean
+
 		// Instance
 		instancePath?: string
 		instanceName?: string
@@ -96,6 +101,7 @@ const props = withDefaults(
 		renderedMotd: undefined,
 
 		gameMode: undefined,
+		managed: false,
 
 		instancePath: undefined,
 		instanceName: undefined,
@@ -117,6 +123,7 @@ const serverIncompatible = computed(
 )
 
 const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
+const managed = computed(() => props.managed)
 
 const messages = defineMessages({
 	hardcore: {
@@ -171,6 +178,10 @@ const messages = defineMessages({
 		id: 'instance.worlds.dont_show_on_home',
 		defaultMessage: `Don't show on Home`,
 	},
+	linkedServer: {
+		id: 'instance.worlds.linked_server',
+		defaultMessage: 'Managed by server project',
+	},
 })
 </script>
 <template>
@@ -200,6 +211,14 @@ const messages = defineMessages({
 					<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
 						{{ world.name }}
 					</div>
+					<TagItem
+						v-if="managed"
+						v-tooltip="formatMessage(messages.linkedServer)"
+						class="border !border-solid border-blue bg-highlight-blue text-xs"
+						:style="`--_color: var(--color-blue)`"
+					>
+						<LockIcon aria-hidden="true" class="h-5 w-5" />
+					</TagItem>
 					<div
 						v-if="world.type === 'singleplayer'"
 						class="text-sm text-secondary flex items-center gap-1 font-semibold"
@@ -396,8 +415,12 @@ const messages = defineMessages({
 								id: 'edit',
 								action: () => emit('edit'),
 								shown: !instancePath,
-								disabled: locked,
-								tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+								disabled: locked || managed,
+								tooltip: locked
+									? formatMessage(messages.worldInUse)
+									: managed
+										? formatMessage(messages.linkedServer)
+										: undefined,
 							},
 							{
 								id: 'open-folder',
@@ -432,8 +455,12 @@ const messages = defineMessages({
 								hoverFilled: true,
 								action: () => emit('delete'),
 								shown: !instancePath,
-								disabled: locked,
-								tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+								disabled: locked || managed,
+								tooltip: locked
+									? formatMessage(messages.worldInUse)
+									: managed
+										? formatMessage(messages.linkedServer)
+										: undefined,
 							},
 						]"
 					>

apps/app-frontend/src/helpers/analytics.ts

@@ -15,7 +15,7 @@ type AnalyticsEventMap = {
 	PageView: { path: string; fromPath: string; failed: unknown }
 	InstanceCreate: { source: string }
 	InstanceCreateStart: { source: string }
-	InstancePlay: InstanceProperties & { source: string }
+	InstanceStart: InstanceProperties & { source: string }
 	InstanceStop: Partial<InstanceProperties> & { source?: string }
 	InstanceDuplicate: InstanceProperties
 	InstanceRepair: InstanceProperties

apps/app-frontend/src/helpers/cache.js

@@ -8,6 +8,14 @@ export async function get_project_many(ids, cacheBehaviour) {
 	return await invoke('plugin:cache|get_project_many', { ids, cacheBehaviour })
 }
 
+export async function get_project_v3(id, cacheBehaviour) {
+	return await invoke('plugin:cache|get_project_v3', { id, cacheBehaviour })
+}
+
+export async function get_project_v3_many(ids, cacheBehaviour) {
+	return await invoke('plugin:cache|get_project_v3_many', { ids, cacheBehaviour })
+}
+
 export async function get_version(id, cacheBehaviour) {
 	return await invoke('plugin:cache|get_version', { id, cacheBehaviour })
 }
@@ -48,6 +56,14 @@ export async function get_search_results_many(ids, cacheBehaviour) {
 	return await invoke('plugin:cache|get_search_results_many', { ids, cacheBehaviour })
 }
 
+export async function get_search_results_v3(id, cacheBehaviour) {
+	return await invoke('plugin:cache|get_search_results_v3', { id, cacheBehaviour })
+}
+
+export async function get_search_results_v3_many(ids, cacheBehaviour) {
+	return await invoke('plugin:cache|get_search_results_v3_many', { ids, cacheBehaviour })
+}
+
 export async function purge_cache_types(cacheTypes) {
 	return await invoke('plugin:cache|purge_cache_types', { cacheTypes })
 }

apps/app-frontend/src/helpers/fetch.js

@@ -1,18 +0,0 @@
-import { getVersion } from '@tauri-apps/api/app'
-import { fetch } from '@tauri-apps/plugin-http'
-
-export const useFetch = async (url, item, isSilent) => {
-	try {
-		const version = await getVersion()
-		return await fetch(url, {
-			method: 'GET',
-			headers: { 'User-Agent': `modrinth/theseus/${version} (support@modrinth.com)` },
-		})
-	} catch (err) {
-		if (!isSilent) {
-			throw err
-		} else {
-			console.error(err)
-		}
-	}
-}

apps/app-frontend/src/helpers/profile.js

@@ -18,7 +18,15 @@ import { install_to_existing_profile } from '@/helpers/pack.js'
     - icon is a path to an image file, which will be copied into the profile directory
 */
 
-export async function create(name, gameVersion, modloader, loaderVersion, icon, skipInstall) {
+export async function create(
+	name,
+	gameVersion,
+	modloader,
+	loaderVersion,
+	icon,
+	skipInstall,
+	linkedData,
+) {
 	//Trim string name to avoid "Unable to find directory"
 	name = name.trim()
 	return await invoke('plugin:profile-create|profile_create', {
@@ -28,6 +36,7 @@ export async function create(name, gameVersion, modloader, loaderVersion, icon,
 		loaderVersion,
 		icon,
 		skipInstall,
+		linkedData,
 	})
 }
 
@@ -174,8 +183,8 @@ export async function get_pack_export_candidates(profilePath) {
 
 // Run Minecraft using a pathed profile
 // Returns PID of child
-export async function run(path) {
-	return await invoke('plugin:profile|profile_run', { path })
+export async function run(path, serverAddress = null) {
+	return await invoke('plugin:profile|profile_run', { path, serverAddress })
 }
 
 export async function kill(path) {

apps/app-frontend/src/helpers/types.d.ts

@@ -139,4 +139,5 @@ type AppSettings = {
 export type InstanceSettingsTabProps = {
 	instance: GameInstance
 	offline?: boolean
+	isMinecraftServer?: boolean
 }

apps/app-frontend/src/helpers/worlds.ts

@@ -141,7 +141,12 @@ export async function add_server_to_profile(
 	address: string,
 	packStatus: ServerPackStatus,
 ): Promise<number> {
-	return await invoke('plugin:worlds|add_server_to_profile', { path, name, address, packStatus })
+	return await invoke('plugin:worlds|add_server_to_profile', {
+		path,
+		name,
+		address,
+		packStatus,
+	})
 }
 
 export async function edit_server_in_profile(
@@ -212,6 +217,150 @@ export function isServerWorld(world: World): world is ServerWorld {
 	return world.type === 'server'
 }
 
+const DEFAULT_MINECRAFT_SERVER_PORT = 25565
+
+function parseServerPort(port: string): number | null {
+	const parsed = Number.parseInt(port, 10)
+	return Number.isInteger(parsed) && parsed > 0 && parsed <= 65535 ? parsed : null
+}
+
+function parseServerHost(address: string): string {
+	const trimmedAddress = address.trim()
+	if (!trimmedAddress) return ''
+
+	if (trimmedAddress.startsWith('[')) {
+		const closingBracket = trimmedAddress.indexOf(']')
+		if (closingBracket > 0) {
+			return trimmedAddress.slice(1, closingBracket).trim().toLowerCase()
+		}
+	}
+
+	const firstColon = trimmedAddress.indexOf(':')
+	const lastColon = trimmedAddress.lastIndexOf(':')
+
+	if (firstColon !== -1 && firstColon === lastColon) {
+		return trimmedAddress.slice(0, firstColon).trim().toLowerCase()
+	}
+
+	return trimmedAddress.toLowerCase()
+}
+
+function isIPv4Host(host: string): boolean {
+	const segments = host.split('.')
+	if (segments.length !== 4) return false
+
+	return segments.every((segment) => {
+		if (!/^\d+$/.test(segment)) return false
+		const value = Number.parseInt(segment, 10)
+		return value >= 0 && value <= 255
+	})
+}
+
+/**
+ * Normalization converts addresses to a canonical form (lowercase-host:port, default port 25565)
+ */
+export function normalizeServerAddress(address: string): string {
+	const trimmedAddress = address.trim()
+	const host = parseServerHost(trimmedAddress)
+	if (!host) return ''
+	let port = DEFAULT_MINECRAFT_SERVER_PORT
+
+	// ipv6 address
+	if (trimmedAddress.startsWith('[')) {
+		const closingBracket = trimmedAddress.indexOf(']')
+		if (closingBracket > 0) {
+			const suffix = trimmedAddress.slice(closingBracket + 1)
+			if (suffix.startsWith(':')) {
+				const parsedPort = parseServerPort(suffix.slice(1))
+				if (parsedPort != null) {
+					port = parsedPort
+				}
+			}
+		}
+
+		// ipv4 address or hostname
+	} else {
+		const firstColon = trimmedAddress.indexOf(':')
+		const lastColon = trimmedAddress.lastIndexOf(':')
+		if (firstColon !== -1 && firstColon === lastColon) {
+			const parsedPort = parseServerPort(trimmedAddress.slice(firstColon + 1))
+			if (parsedPort != null) {
+				port = parsedPort
+			}
+		}
+	}
+
+	return `${host}:${port}`
+}
+
+/**
+ * Domain key used for deduping server entries by removing a single leading subdomain.
+ * Example: test.cobblemon.gg and cobblemon.gg map to cobblemon.gg
+ */
+export function getServerDomainKey(address: string): string {
+	const normalizedAddress = normalizeServerAddress(address)
+	if (!normalizedAddress) return ''
+
+	const separator = normalizedAddress.lastIndexOf(':')
+	if (separator <= 0 || separator === normalizedAddress.length - 1) return normalizedAddress
+
+	const host = normalizedAddress.slice(0, separator).replace(/\.+$/, '')
+	if (!host) return normalizedAddress
+	if (host.includes(':') || isIPv4Host(host)) return normalizedAddress
+
+	const segments = host.split('.').filter(Boolean)
+	if (segments.length <= 2) return host
+
+	return segments.slice(1).join('.')
+}
+
+export function resolveManagedServerWorld(
+	worlds: World[],
+	managedName: string | null | undefined,
+	managedAddress: string | null | undefined,
+): ServerWorld | null {
+	if (!managedName || !managedAddress) return null
+
+	const normalizedManagedAddress = normalizeServerAddress(managedAddress)
+	if (!normalizedManagedAddress) return null
+
+	const servers = worlds
+		.filter(isServerWorld)
+		.slice()
+		.sort((a, b) => a.index - b.index)
+
+	const exactMatch = servers.find(
+		(server) =>
+			server.name === managedName &&
+			normalizeServerAddress(server.address) === normalizedManagedAddress,
+	)
+	if (exactMatch) return exactMatch
+
+	return (
+		servers.find((server) => normalizeServerAddress(server.address) === normalizedManagedAddress) ??
+		null
+	)
+}
+
+export async function getServerLatency(
+	address: string,
+	protocolVersion: ProtocolVersion | null = null,
+): Promise<number | undefined> {
+	const pings: number[] = []
+	for (let i = 0; i < 3; i++) {
+		try {
+			const status = await get_server_status(address, protocolVersion)
+			if (status.ping != null) {
+				pings.push(status.ping)
+			}
+		} catch {
+			// Ignore individual ping failures
+		}
+	}
+	if (pings.length === 0) return undefined
+	return Math.round(pings.reduce((sum, p) => sum + p, 0) / pings.length)
+}
+
 export async function refreshServerData(
 	serverData: ServerData,
 	protocolVersion: ProtocolVersion | null,

apps/app-frontend/src/i18n.config.ts

@@ -1,4 +1,5 @@
 import { buildLocaleMessages, createMessageCompiler, type CrowdinMessages } from '@modrinth/ui'
+import { uiLocaleModulesEager } from '@modrinth/ui/src/locales.eager.ts'
 import { createI18n } from 'vue-i18n'
 
 const localeModules = import.meta.glob<{ default: CrowdinMessages }>('./locales/*/index.json', {
@@ -12,7 +13,7 @@ const i18n = createI18n({
 	messageCompiler: createMessageCompiler(),
 	missingWarn: false,
 	fallbackWarn: false,
-	messages: buildLocaleMessages(localeModules),
+	messages: buildLocaleMessages(localeModules, uiLocaleModulesEager),
 })
 
 export default i18n

apps/app-frontend/src/locales/en-US/index.json

@@ -5,6 +5,9 @@
   "app.auth-servers.unreachable.header": {
     "message": "Cannot reach authentication servers"
   },
+  "app.modal.install-to-play.content-required": {
+    "message": "Content required"
+  },
   "app.modal.install-to-play.header": {
     "message": "Install to play"
   },
@@ -14,11 +17,11 @@
   "app.modal.install-to-play.mod-count": {
     "message": "{count, plural, one {# mod} other {# mods}}"
   },
-  "app.modal.install-to-play.server-requires-mods": {
-    "message": "This server requires mods to play. Click install to set up the required files from Modrinth."
+  "app.modal.install-to-play.required-modpack": {
+    "message": "Required modpack"
   },
-  "app.modal.install-to-play.shared-by-today": {
-    "message": "{name} shared this instance with you today."
+  "app.modal.install-to-play.server-requires-mods": {
+    "message": "This server requires mods to play. Click Install to set up the required files from Modrinth, then launch directly into the server."
   },
   "app.modal.install-to-play.shared-instance": {
     "message": "Shared instance"
@@ -26,6 +29,9 @@
   "app.modal.install-to-play.shared-server-instance": {
     "message": "Shared server instance"
   },
+  "app.modal.install-to-play.view-contents": {
+    "message": "View contents"
+  },
   "app.modal.update-to-play.added-count": {
     "message": "{count} added"
   },
@@ -83,39 +89,33 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
-  "app.update-toast.body": {
+  "app.update-popup.body": {
     "message": "Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App."
   },
-  "app.update-toast.body.download-complete": {
+  "app.update-popup.body.download-complete": {
     "message": "Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App."
   },
-  "app.update-toast.body.linux": {
+  "app.update-popup.body.linux": {
     "message": "Modrinth App v{version} is available. Use your package manager to update for the latest features and fixes!"
   },
-  "app.update-toast.body.metered": {
+  "app.update-popup.body.metered": {
     "message": "Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it."
   },
-  "app.update-toast.changelog": {
+  "app.update-popup.changelog": {
     "message": "Changelog"
   },
-  "app.update-toast.download": {
+  "app.update-popup.download": {
     "message": "Download ({size})"
   },
-  "app.update-toast.download-page": {
-    "message": "Download"
+  "app.update-popup.download-complete": {
+    "message": "Download complete"
   },
-  "app.update-toast.downloading": {
-    "message": "Downloading..."
-  },
-  "app.update-toast.reload": {
+  "app.update-popup.reload": {
     "message": "Reload"
   },
-  "app.update-toast.title": {
+  "app.update-popup.title": {
     "message": "Update available"
   },
-  "app.update-toast.title.download-complete": {
-    "message": "Download complete"
-  },
   "app.update.complete-toast.text": {
     "message": "Click here to view the changelog."
   },
@@ -464,6 +464,15 @@
   "instance.settings.tabs.installation.unknown-version": {
     "message": "(unknown version)"
   },
+  "instance.settings.tabs.installation.unlink-server-vanilla.description": {
+    "message": "This instance is linked to a server, which means you can't change the Minecraft version. Unlinking will permanently disconnect this instance from the server."
+  },
+  "instance.settings.tabs.installation.unlink-server.description": {
+    "message": "This instance is linked to a server, which means mods can't be updated and you can't change the mod loader or Minecraft version. Unlinking will permanently disconnect this instance from the server."
+  },
+  "instance.settings.tabs.installation.unlink-server.title": {
+    "message": "Unlink from server"
+  },
   "instance.settings.tabs.installation.unlink.button": {
     "message": "Unlink instance"
   },
@@ -551,6 +560,9 @@
   "instance.worlds.incompatible_server": {
     "message": "Server is incompatible"
   },
+  "instance.worlds.linked_server": {
+    "message": "Managed by server project"
+  },
   "instance.worlds.no_contact": {
     "message": "Server couldn't be contacted"
   },
@@ -586,5 +598,17 @@
   },
   "search.filter.locked.instance.sync": {
     "message": "Sync with instance"
+  },
+  "search.filter.locked.server": {
+    "message": "Provided by the server"
+  },
+  "search.filter.locked.server-environment.title": {
+    "message": "Only client-side mods can be added to the server instance"
+  },
+  "search.filter.locked.server-game-version.title": {
+    "message": "Game version is provided by the server"
+  },
+  "search.filter.locked.server-loader.title": {
+    "message": "Loader is provided by the server"
   }
 }

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

@@ -1,23 +1,36 @@
 <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 {
+	Admonition,
+	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 +39,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 { getServerLatency } 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 +66,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 +90,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 +106,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 +127,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 +173,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 +221,89 @@ 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[]) {
+	const pingsToFetch = hits.filter((hit) => hit.minecraft_java_server?.address)
+	await Promise.all(
+		pingsToFetch.map(async (hit) => {
+			const address = hit.minecraft_java_server!.address!
+			try {
+				const latency = await getServerLatency(address)
+				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
+			} 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 +318,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 +333,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 +474,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 +493,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 +524,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 +547,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 +610,7 @@ const handleRightClick = (event, result) => {
 		},
 	])
 }
+// @ts-expect-error - no event types
 const handleOptionsClick = (args) => {
 	switch (args.option) {
 		case 'open_link':
@@ -424,38 +650,85 @@ 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',
+						'server_status',
+					].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">
 			<InstanceIndicator :instance="instance" />
 			<h1 class="m-0 mb-1 text-xl">Install content to instance</h1>
+			<Admonition v-if="isServerInstance" type="warning" class="mb-1">
+				Adding content can break compatibility when joining the server. Any added content will also
+				be lost when you update the server instance content.
+			</Admonition>
 		</template>
 		<NavTabs :links="selectableProjectTypes" />
 		<StyledInput
@@ -472,11 +745,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 +773,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="project.minecraft_server?.region"
+						:server-recent-plays="project.minecraft_java_server?.verified_plays_2w ?? 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,109 @@
 <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" />
+			<InstanceSettingsModal
+				ref="settingsModal"
+				:instance="instance"
+				:offline="offline"
+				@unlinked="fetchInstance"
+			/>
 			<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 truncate"
+								>
+									{{ linkedProjectV3.name }}
+								</router-link>
+							</div>
+						</template>
+
+						<template v-else>
+							<template v-if="loadingServerPing">
+								<ServerOnlinePlayers
+									v-if="playersOnline !== undefined"
+									:online="playersOnline"
+									:status-online="statusOnline"
+									hide-label
+								/>
+								<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
+								<div
+									v-if="
+										(playersOnline !== undefined || recentPlays !== undefined) &&
+										(minecraftServer?.region || ping)
+									"
+									class="w-1.5 h-1.5 rounded-full bg-surface-5"
+								></div>
+								<ServerPing v-if="ping" :ping="ping" />
+							</template>
+
+							<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
+
+							<div
+								v-if="minecraftServer?.region || 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 truncate"
+								>
+									{{ linkedProjectV3.name }}
+								</router-link>
+							</div>
 						</template>
-						<template v-else> Never played </template>
 					</div>
 				</template>
 				<template #actions>
@@ -63,7 +136,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 +145,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 +190,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 +225,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 +244,7 @@
 							:playing="playing"
 							:versions="modrinthVersions"
 							:installed="instance.install_stage !== 'installed'"
+							:is-server-instance="isServerInstance"
 							@play="updatePlayState"
 							@stop="() => stopInstance('InstanceSubpage')"
 						></component>
@@ -160,16 +278,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 +298,6 @@ import {
 	ServerIcon,
 	SettingsIcon,
 	StopCircleIcon,
-	TimerIcon,
 	UpdatedIcon,
 	UserPlusIcon,
 	XIcon,
@@ -191,6 +309,10 @@ import {
 	injectNotificationManager,
 	LoadingIndicator,
 	OverflowMenu,
+	ServerOnlinePlayers,
+	ServerPing,
+	ServerRecentPlays,
+	ServerRegion,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
@@ -205,20 +327,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_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 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 +355,89 @@ 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 linkedProjectV3 = ref<Labrinth.Projects.v3.Project>()
+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 recentPlays = computed(
+	() => linkedProjectV3.value?.minecraft_java_server?.verified_plays_2w ?? undefined,
+)
+const playersOnline = ref<number | undefined>(undefined)
+const ping = ref<number | undefined>(undefined)
+const loadingServerPing = ref(false)
 
 async function fetchInstance() {
-	instance.value = await get(route.params.id).catch(handleError)
+	isServerInstance.value = false
+	linkedProjectV3.value = undefined
+	modrinthVersions.value = []
+	ping.value = undefined
+	playersOnline.value = undefined
+	loadingServerPing.value = false
 
-	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?.minecraft_server != null) {
+				isServerInstance.value = true
+			}
+
+			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(),
+				)
+			}
+		} catch (error) {
+			handleError(error as Error)
+		}
 	}
 
-	await updatePlayState()
+	fetchDeferredData()
+}
+
+function fetchDeferredData() {
+	const serverAddress = linkedProjectV3.value?.minecraft_java_server?.address
+	if (isServerInstance.value && serverAddress) {
+		get_server_status(serverAddress)
+			.then((status) => {
+				playersOnline.value = status.players?.online
+				ping.value = status.ping
+			})
+			.catch((error) => {
+				console.error(`Failed to fetch server status for ${serverAddress}:`, error)
+			})
+			.finally(() => {
+				loadingServerPing.value = true
+			})
+	} else {
+		loadingServerPing.value = true
+	}
+
+	updatePlayState()
 }
 
 async function updatePlayState() {
-	const runningProcesses = await get_by_profile_path(route.params.id).catch(handleError)
+	if (!route.params.id) return
+	const runningProcesses = await get_by_profile_path(route.params.id as string).catch(handleError)
 
-	playing.value = runningProcesses.length > 0
+	playing.value = Array.isArray(runningProcesses) && runningProcesses.length > 0
 }
 
 await fetchInstance()
@@ -276,7 +450,7 @@ watch(
 	},
 )
 
-const basePath = computed(() => `/instance/${encodeURIComponent(route.params.id)}`)
+const basePath = computed(() => `/instance/${encodeURIComponent(route.params.id as string)}`)
 
 const tabs = computed(() => [
 	{
@@ -293,30 +467,37 @@ 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
 
@@ -327,10 +508,11 @@ const startInstance = async (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 +520,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 +544,7 @@ const handleRightClick = (event) => {
 		{ name: 'copy_path' },
 	]
 
-	options.value.showMenu(
+	options.value?.showMenu(
 		event,
 		instance.value,
 		playing.value
@@ -372,7 +565,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 +575,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,7 +353,9 @@ type ProjectListEntry = {
 const isPackLocked = computed(() => {
 	return props.instance.linked_data && props.instance.linked_data.locked
 })
+
 const canUpdatePack = computed(() => {
+	if (props.isServerInstance) return false
 	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

@@ -26,7 +26,7 @@
 		:description="`'${worldToDelete?.name}' will be **permanently deleted**, and there will be no way to recover it.`"
 		@proceed="proceedDeleteWorld"
 	/>
-	<div v-if="worlds.length > 0" class="flex flex-col gap-4">
+	<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-4">
 		<div class="flex flex-wrap gap-2 items-center">
 			<StyledInput
 				v-model="searchFilter"
@@ -62,6 +62,7 @@
 				v-for="world in filteredWorlds"
 				:key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
 				:world="world"
+				:managed="world.type === 'server' ? isManagedServerWorld(world) : false"
 				:highlighted="highlightedWorld === getWorldIdentifier(world)"
 				:supports-server-quick-play="supportsServerQuickPlay"
 				:supports-world-quick-play="supportsWorldQuickPlay"
@@ -80,9 +81,13 @@
 				@refresh="() => refreshServer((world as ServerWorld).address)"
 				@edit="
 					() =>
-						world.type === 'server' ? editServerModal?.show(world) : editWorldModal?.show(world)
+						world.type === 'singleplayer'
+							? editWorldModal?.show(world)
+							: isManagedServerWorld(world)
+								? undefined
+								: editServerModal?.show(world)
 				"
-				@delete="() => promptToRemoveWorld(world)"
+				@delete="() => !isManagedServerWorld(world) && promptToRemoveWorld(world)"
 				@open-folder="(world: SingleplayerWorld) => showWorldInFolder(instance.path, world.path)"
 			/>
 		</div>
@@ -140,16 +145,20 @@ import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
 import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
 import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project, get_project_v3 } from '@/helpers/cache.js'
 import { profile_listener } from '@/helpers/events'
 import { get_game_versions } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 import {
 	delete_world,
 	get_profile_protocol_version,
+	getServerDomainKey,
 	getWorldIdentifier,
 	handleDefaultProfileUpdateEvent,
 	hasServerQuickPlaySupport,
 	hasWorldQuickPlaySupport,
+	normalizeServerAddress,
 	type ProfileEvent,
 	type ProtocolVersion,
 	refreshServerData,
@@ -157,6 +166,7 @@ import {
 	refreshWorld,
 	refreshWorlds,
 	remove_server_from_profile,
+	resolveManagedServerWorld,
 	type ServerData,
 	type ServerWorld,
 	showWorldInFolder,
@@ -166,6 +176,11 @@ import {
 	start_join_singleplayer_world,
 	type World,
 } from '@/helpers/worlds.ts'
+import {
+	ensureManagedServerWorldExists,
+	getServerAddress,
+	playServerProject,
+} from '@/store/install'
 
 const { handleError } = injectNotificationManager()
 const route = useRoute()
@@ -219,6 +234,69 @@ const linuxRefreshCount = ref(0)
 const protocolVersion = ref<ProtocolVersion | null>(
 	await get_profile_protocol_version(instance.value.path),
 )
+const managedServerName = ref<string | null>(null)
+const managedServerAddress = ref<string | null>(null)
+
+const managedServerWorld = computed(() =>
+	resolveManagedServerWorld(worlds.value, managedServerName.value, managedServerAddress.value),
+)
+
+function isManagedServerWorld(world: World): world is ServerWorld {
+	return world.type === 'server' && managedServerWorld.value?.index === world.index
+}
+
+async function refreshManagedServerMetadata() {
+	await ensureManagedServerWorldExists(
+		instance.value.path,
+		managedServerName.value,
+		managedServerAddress.value,
+	)
+
+	const projectId = instance.value.linked_data?.project_id
+	if (!projectId) {
+		managedServerName.value = null
+		managedServerAddress.value = null
+		return
+	}
+
+	try {
+		const [project, projectV3] = await Promise.all([
+			get_project(projectId, 'bypass'),
+			get_project_v3(projectId, 'bypass'),
+		])
+
+		if (projectV3?.minecraft_server == null) {
+			managedServerName.value = null
+			managedServerAddress.value = null
+			return
+		}
+
+		const serverAddress = getServerAddress(projectV3.minecraft_java_server)
+		if (!serverAddress) {
+			managedServerName.value = null
+			managedServerAddress.value = null
+			return
+		}
+
+		managedServerName.value = project.title
+		managedServerAddress.value = serverAddress
+	} catch (err) {
+		console.error(
+			`Failed to resolve managed server metadata for profile: ${instance.value.path}`,
+			err,
+		)
+		managedServerName.value = null
+		managedServerAddress.value = null
+	}
+}
+
+watch(
+	() => instance.value.linked_data?.project_id,
+	async () => {
+		await refreshManagedServerMetadata()
+	},
+	{ immediate: true },
+)
 
 const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
 	if (e.profile_path_id !== instance.value.path) return
@@ -251,6 +329,7 @@ async function refreshAllWorlds() {
 		console.log(`Already refreshing, cancelling refresh.`)
 		return
 	}
+	await refreshManagedServerMetadata()
 
 	refreshingAll.value = true
 
@@ -328,7 +407,23 @@ async function joinWorld(world: World) {
 	startingInstance.value = true
 	worldPlaying.value = world
 	if (world.type === 'server') {
+		const managedProjectId = instance.value.linked_data?.project_id
+		if (managedProjectId && isManagedServerWorld(world)) {
+			await playServerProject(managedProjectId).catch(handleJoinError)
+			trackEvent('InstanceStart', {
+				loader: instance.value.loader,
+				game_version: instance.value.game_version,
+				source: 'WorldsPage',
+			})
+			startingInstance.value = false
+			return
+		}
 		await start_join_server(instance.value.path, world.address).catch(handleJoinError)
+		trackEvent('InstanceStart', {
+			loader: instance.value.loader,
+			game_version: instance.value.game_version,
+			source: 'WorldsPage',
+		})
 	} else if (world.type === 'singleplayer') {
 		await start_join_singleplayer_world(instance.value.path, world.path).catch(handleJoinError)
 	}
@@ -370,12 +465,48 @@ const supportsWorldQuickPlay = computed(() =>
 	hasWorldQuickPlaySupport(gameVersions.value, instance.value.game_version),
 )
 
+const dedupedWorlds = computed(() => {
+	const visibleWorlds: World[] = []
+	const serverIndexByDomain = new Map<string, number>()
+
+	for (const world of worlds.value) {
+		if (world.type !== 'server') {
+			visibleWorlds.push(world)
+			continue
+		}
+
+		const domainKey =
+			getServerDomainKey(world.address) ||
+			normalizeServerAddress(world.address) ||
+			`server-${world.index}`
+		const existingIndex = serverIndexByDomain.get(domainKey)
+
+		if (existingIndex == null) {
+			serverIndexByDomain.set(domainKey, visibleWorlds.length)
+			visibleWorlds.push(world)
+			continue
+		}
+
+		// replace world with managed world if applicable
+		const existingWorld = visibleWorlds[existingIndex]
+		if (
+			existingWorld?.type === 'server' &&
+			!isManagedServerWorld(existingWorld) &&
+			isManagedServerWorld(world)
+		) {
+			visibleWorlds[existingIndex] = world
+		}
+	}
+
+	return visibleWorlds
+})
+
 const filterOptions = computed(() => {
 	const options: FilterBarOption[] = []
 
-	const hasServer = worlds.value.some((x) => x.type === 'server')
+	const hasServer = dedupedWorlds.value.some((x) => x.type === 'server')
 
-	if (worlds.value.some((x) => x.type === 'singleplayer') && hasServer) {
+	if (dedupedWorlds.value.some((x) => x.type === 'singleplayer') && hasServer) {
 		options.push({
 			id: 'singleplayer',
 			message: messages.singleplayer,
@@ -389,13 +520,13 @@ const filterOptions = computed(() => {
 	if (hasServer) {
 		// add available filter if there's any offline ("unavailable") servers AND there's any singleplayer worlds or available servers
 		if (
-			worlds.value.some(
+			dedupedWorlds.value.some(
 				(x) =>
 					x.type === 'server' &&
 					!serverData.value[x.address]?.status &&
 					!serverData.value[x.address]?.refreshing,
 			) &&
-			worlds.value.some(
+			dedupedWorlds.value.some(
 				(x) =>
 					x.type === 'singleplayer' ||
 					(x.type === 'server' &&
@@ -414,7 +545,7 @@ const filterOptions = computed(() => {
 })
 
 const filteredWorlds = computed(() =>
-	worlds.value.filter((x) => {
+	dedupedWorlds.value.filter((x) => {
 		const availableFilter = filters.value.includes('available')
 		const typeFilter = filters.value.includes('server') || filters.value.includes('singleplayer')
 

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,32 @@
 <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"
 			/>
-			<ProjectSidebarLinks link-target="_blank" :project="data" 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"
+			/>
+			<ProjectSidebarTags :project="data" class="project-sidebar-section" />
 			<ProjectSidebarCreators
 				:organization="null"
 				:members="members"
@@ -20,13 +39,11 @@
 				: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>
+							<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 { getServerLatency } 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,44 @@ 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)
+	const [project, projectV3Result] = await Promise.all([
+		get_project(route.params.id, 'must_revalidate').catch(handleError),
+		get_project_v3(route.params.id, 'must_revalidate').catch(handleError),
+	])
+	projectV3.value = projectV3Result
 
 	if (!project) {
 		handleError('Error loading project')
@@ -245,11 +393,91 @@ async function fetchProjectData() {
 			installedVersion.value = installedFile.metadata.version_id
 		}
 	}
+
+	isServerProject.value = projectV3.value?.minecraft_server != null
+	serverStatusOnline.value = !!projectV3.value?.minecraft_java_server?.ping?.data
+
 	breadcrumbs.setName('Project', data.value.title)
+
+	fetchDeferredServerData(project)
+}
+
+function fetchDeferredServerData(project) {
+	const serverAddress = projectV3.value?.minecraft_java_server?.address
+	if (serverAddress) {
+		serverPing.value = undefined
+		getServerLatency(serverAddress)
+			.then((latency) => {
+				serverPing.value = latency
+			})
+			.catch((error) => {
+				console.error(`Failed to ping server ${serverAddress}:`, error)
+			})
+	}
+
+	const content = projectV3.value?.minecraft_java_server?.content
+	if (content?.kind === 'modpack' && content.version_id) {
+		get_version(content.version_id, 'bypass')
+			.catch(handleError)
+			.then(async (modpackVersion) => {
+				if (!modpackVersion) return
+				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)
+	}
+
+	updateServerPlayState()
 }
 
 await fetchProjectData()
 
+let unlistenProcesses
+process_listener((e) => {
+	if (
+		e.event === 'finished' &&
+		serverInstancePath.value &&
+		e.profile_path_id === serverInstancePath.value
+	) {
+		serverPlaying.value = false
+	}
+}).then((unlisten) => {
+	unlistenProcesses = unlisten
+})
+
+onUnmounted(() => {
+	unlistenProcesses?.()
+})
+
 watch(
 	() => route.params.id,
 	async () => {

apps/app-frontend/src/providers/app-popup-notifications.ts

@@ -0,0 +1,30 @@
+import { AbstractPopupNotificationManager, type PopupNotification } from '@modrinth/ui'
+import { type Ref, ref } from 'vue'
+
+export class AppPopupNotificationManager extends AbstractPopupNotificationManager {
+	private readonly state: Ref<PopupNotification[]>
+
+	public constructor() {
+		super()
+		this.state = ref<PopupNotification[]>([])
+	}
+
+	public getNotifications(): PopupNotification[] {
+		return this.state.value
+	}
+
+	protected addNotificationToStorage(notification: PopupNotification): void {
+		this.state.value.push(notification)
+	}
+
+	protected removeNotificationFromStorage(id: string | number): void {
+		const index = this.state.value.findIndex((n) => n.id === id)
+		if (index > -1) {
+			this.state.value.splice(index, 1)
+		}
+	}
+
+	protected clearAllNotificationsFromStorage(): void {
+		this.state.value.splice(0)
+	}
+}

apps/app-frontend/src/store/install.js

@@ -2,22 +2,42 @@ import dayjs from 'dayjs'
 import { defineStore } from 'pinia'
 
 import { trackEvent } from '@/helpers/analytics'
-import { get_project, get_version_many } from '@/helpers/cache.js'
-import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
+import { get_project, get_project_v3, get_version, get_version_many } from '@/helpers/cache.js'
+import {
+	create_profile_and_install as packInstall,
+	install_to_existing_profile,
+} from '@/helpers/pack.js'
 import {
 	add_project_from_version,
 	check_installed,
+	create,
+	edit,
+	edit_icon,
 	get,
 	get_projects,
+	install as installProfile,
 	list,
 	remove_project,
 } from '@/helpers/profile.js'
+import {
+	add_server_to_profile,
+	get_profile_worlds,
+	resolveManagedServerWorld,
+	start_join_server,
+} from '@/helpers/worlds.ts'
+import router from '@/routes.js'
+import { handleSevereError } from '@/store/error.js'
 
 export const useInstall = defineStore('installStore', {
 	state: () => ({
 		installConfirmModal: null,
 		modInstallModal: null,
 		incompatibilityWarningModal: null,
+		installToPlayModal: null,
+		updateToPlayModal: null,
+		popupNotificationManager: null,
+		installingServerProjects: [],
+		addServerToInstanceModal: null,
 	}),
 	actions: {
 		setInstallConfirmModal(ref) {
@@ -38,6 +58,38 @@ export const useInstall = defineStore('installStore', {
 		showModInstallModal(project, versions, onInstall) {
 			this.modInstallModal.show(project, versions, onInstall)
 		},
+		setInstallToPlayModal(ref) {
+			this.installToPlayModal = ref
+		},
+		showInstallToPlayModal(projectV3, modpackVersionId, onInstallComplete) {
+			this.installToPlayModal.show(projectV3, modpackVersionId, onInstallComplete)
+		},
+		setUpdateToPlayModal(ref) {
+			this.updateToPlayModal = ref
+		},
+		showUpdateToPlayModal(instance, activeVersionId, onUpdateComplete) {
+			this.updateToPlayModal.show(instance, activeVersionId, onUpdateComplete)
+		},
+		setPopupNotificationManager(manager) {
+			this.popupNotificationManager = manager
+		},
+		setAddServerToInstanceModal(ref) {
+			this.addServerToInstanceModal = ref
+		},
+		showAddServerToInstanceModal(serverName, serverAddress) {
+			this.addServerToInstanceModal.show(serverName, serverAddress)
+		},
+		startInstallingServer(projectId) {
+			if (!this.installingServerProjects.includes(projectId)) {
+				this.installingServerProjects.push(projectId)
+			}
+		},
+		stopInstallingServer(projectId) {
+			this.installingServerProjects = this.installingServerProjects.filter((id) => id !== projectId)
+		},
+		isServerInstalling(projectId) {
+			return this.installingServerProjects.includes(projectId)
+		},
 	},
 })
 
@@ -87,9 +139,10 @@ export const install = async (
 	callback = () => {},
 	createInstanceCallback = () => {},
 ) => {
-	const project = await get_project(projectId, 'must_revalidate')
+	const project = await get_project(projectId, 'bypass')
+	const projectV3 = await get_project_v3(projectId, 'bypass')
 
-	if (project.project_type === 'modpack') {
+	if (project.project_type === 'modpack' || projectV3?.minecraft_server != null) {
 		const version = versionId ?? project.versions[project.versions.length - 1]
 		const packs = await list()
 
@@ -119,7 +172,7 @@ export const install = async (
 			const [instance, instanceProjects, versions] = await Promise.all([
 				await get(instancePath),
 				await get_projects(instancePath),
-				await get_version_many(project.versions, 'must_revalidate'),
+				await get_version_many(project.versions, 'bypass'),
 			])
 
 			const projectVersions = versions.sort(
@@ -207,9 +260,9 @@ export const installVersionDependencies = async (profile, version) => {
 		} else {
 			if (dep.project_id && (await check_installed(profile.path, dep.project_id))) continue
 
-			const depProject = await get_project(dep.project_id, 'must_revalidate')
+			const depProject = await get_project(dep.project_id, 'bypass')
 
-			const depVersions = (await get_version_many(depProject.versions, 'must_revalidate')).sort(
+			const depVersions = (await get_version_many(depProject.versions, 'bypass')).sort(
 				(a, b) => dayjs(b.date_published) - dayjs(a.date_published),
 			)
 
@@ -220,3 +273,279 @@ export const installVersionDependencies = async (profile, version) => {
 		}
 	}
 }
+
+/**
+ * Server projects that use modpack content use have linked_data.project_id as
+ * the server project id and linked_data.version_id as the modpack content version id
+ *
+ * The modpack content version can be of the same server project, or from a different project
+ */
+export const installServerProject = async (serverProjectId) => {
+	const [project, projectV3] = await Promise.all([
+		get_project(serverProjectId, 'bypass'),
+		get_project_v3(serverProjectId, 'bypass'),
+	])
+
+	const serverAddress = getServerAddress(projectV3?.minecraft_java_server)
+
+	const content = projectV3?.minecraft_java_server?.content
+	if (!content || content.kind !== 'modpack') return
+
+	const contentVersionId = content.version_id
+	const contentVersion = await get_version(contentVersionId, 'bypass')
+	const contentProjectId = contentVersion.project_id
+	const gameVersion = contentVersion.game_versions?.[0] ?? ''
+
+	const profilePath = await create(
+		project.title,
+		gameVersion,
+		'vanilla',
+		null,
+		project.icon_url,
+		true,
+		{
+			project_id: serverProjectId,
+			version_id: contentVersionId,
+			locked: true,
+		},
+	)
+
+	// Save the icon path before pack install overwrites it
+	const profileBeforeInstall = await get(profilePath)
+	const originalIconPath = profileBeforeInstall?.icon_path ?? null
+
+	await install_to_existing_profile(contentProjectId, contentVersionId, project.title, profilePath)
+
+	// Pack install overwrites name, icon, and linked_data with the content project's values.
+	// Restore them to point to the server project.
+	await edit(profilePath, {
+		name: project.title,
+		linked_data: {
+			project_id: serverProjectId,
+			version_id: contentVersionId,
+			locked: true,
+		},
+	})
+	await edit_icon(profilePath, originalIconPath)
+
+	await ensureManagedServerWorldExists(profilePath, project.title, serverAddress)
+}
+
+export const getServerAddress = (javaServer) => {
+	if (!javaServer) return null
+	const { address } = javaServer
+	return address
+}
+
+export const ensureManagedServerWorldExists = async (profilePath, serverName, serverAddress) => {
+	if (!profilePath || !serverAddress) return
+	try {
+		const worlds = await get_profile_worlds(profilePath)
+		const managedWorld = resolveManagedServerWorld(worlds, serverName, serverAddress)
+		if (!managedWorld) {
+			await add_server_to_profile(profilePath, serverName, serverAddress, 'prompt')
+		}
+	} catch (err) {
+		console.error('Failed to ensure managed server world exists:', err)
+	}
+}
+
+const joinServer = async (profilePath, serverAddress) => {
+	if (!serverAddress) return
+	await start_join_server(profilePath, serverAddress)
+}
+
+const findInstalledInstance = async (projectId) => {
+	const packs = await list()
+	return packs.find((pack) => pack.linked_data?.project_id === projectId) ?? null
+}
+
+const createVanillaServerInstance = async (project, gameVersion, serverAddress) => {
+	const profilePath = await create(
+		project.title,
+		gameVersion,
+		'fabric',
+		'latest',
+		project.icon_url,
+		false,
+		{
+			project_id: project.id,
+			version_id: '',
+			locked: true,
+		},
+	)
+
+	await ensureManagedServerWorldExists(profilePath, project.title, serverAddress)
+
+	return profilePath
+}
+
+const updateVanillaGameVersion = async (instance, targetGameVersion) => {
+	if (instance.game_version === targetGameVersion) return
+
+	await edit(instance.path, { game_version: targetGameVersion })
+	await installProfile(instance.path, false)
+}
+
+const showModpackInstallSuccess = (installStore, project, serverAddress) => {
+	installStore.popupNotificationManager?.addPopupNotification({
+		title: 'Install complete',
+		text: `${project.name} is installed and ready to play.`,
+		type: 'success',
+		buttons: [
+			...(serverAddress
+				? [
+						{
+							label: 'Launch game',
+							action: async () => {
+								try {
+									await joinServer(
+										project.path,
+										serverAddress,
+										project.linked_data?.project_id ?? null,
+									)
+									trackEvent('InstanceStart', {
+										loader: project.loader,
+										game_version: project.game_version,
+										source: 'ServerProject',
+									})
+								} catch (err) {
+									handleSevereError(err, { profilePath: project.path })
+								}
+							},
+							color: 'brand',
+						},
+					]
+				: []),
+			{
+				label: 'Instance',
+				action: () => router.push(`/instance/${encodeURIComponent(project.path)}`),
+			},
+		],
+		autoCloseMs: null,
+	})
+}
+
+const showUpdateSuccess = (installStore, instance, serverAddress) => {
+	installStore.popupNotificationManager?.addPopupNotification({
+		title: 'Update complete',
+		text: `${instance.name} has been updated and is ready to play.`,
+		type: 'success',
+		buttons: [
+			...(serverAddress
+				? [
+						{
+							label: 'Launch game',
+							action: async () => {
+								try {
+									if (serverAddress) await start_join_server(instance.path, serverAddress)
+									trackEvent('InstanceStart', {
+										loader: instance.loader,
+										game_version: instance.game_version,
+										source: 'ServerProject',
+									})
+								} catch (err) {
+									handleSevereError(err, { profilePath: instance.path })
+								}
+							},
+							color: 'brand',
+						},
+					]
+				: []),
+			{
+				label: 'Instance',
+				action: () => router.push(`/instance/${encodeURIComponent(instance.path)}`),
+			},
+		],
+		autoCloseMs: null,
+	})
+}
+
+/**
+ * Handles logic when clicking "Play" on a server project. This includes:
+ * - Checking if need to install modpack content. If so, opens install to play modal
+ * - Checking if need to update modpack content. If so, open update to play modal
+ * - Checking if need to create instance for vanilla server. If so, creates instance.
+ * - Adding server to worlds list if not already there
+ * - Joining server
+ */
+export const playServerProject = async (projectId) => {
+	const installStore = useInstall()
+
+	const [project, projectV3] = await Promise.all([
+		get_project(projectId, 'bypass'),
+		get_project_v3(projectId, 'bypass'),
+	])
+
+	if (projectV3?.minecraft_server == null) {
+		console.warn('playServerProject failed: project is not a server project')
+		return
+	}
+
+	const content = projectV3?.minecraft_java_server?.content
+	const serverAddress = getServerAddress(projectV3?.minecraft_java_server)
+	const isVanilla = content?.kind === 'vanilla'
+	const isModpack = content?.kind === 'modpack'
+	const modpackVersionId = content?.version_id ?? null
+	const recommendedGameVersion = content?.recommended_game_version
+
+	let instance = await findInstalledInstance(project.id)
+
+	if (isVanilla && !instance) {
+		if (installStore.installingServerProjects.includes(projectId)) return
+		installStore.startInstallingServer(projectId)
+		try {
+			const path = await createVanillaServerInstance(project, recommendedGameVersion, serverAddress)
+			if (path) {
+				instance = await get(path)
+				showModpackInstallSuccess(installStore, instance, serverAddress)
+			}
+		} finally {
+			installStore.stopInstallingServer(projectId)
+		}
+		return
+	}
+	if (isModpack && !instance) {
+		installStore.showInstallToPlayModal(projectV3, modpackVersionId, async () => {
+			const newInstance = await findInstalledInstance(project.id)
+			if (!newInstance) return
+			showModpackInstallSuccess(installStore, newInstance, serverAddress)
+		})
+		return
+	}
+
+	if (!instance) return
+
+	await ensureManagedServerWorldExists(instance.path, project.title, serverAddress)
+
+	// Update existing instance if needed
+	if (isModpack && instance.linked_data?.version_id !== modpackVersionId) {
+		installStore.showUpdateToPlayModal(instance, modpackVersionId, () => {
+			showUpdateSuccess(installStore, instance, serverAddress)
+		})
+		return
+	}
+	if (isVanilla && instance.game_version !== recommendedGameVersion) {
+		if (installStore.installingServerProjects.includes(projectId)) return
+		installStore.startInstallingServer(projectId)
+		try {
+			await updateVanillaGameVersion(instance, recommendedGameVersion)
+			showUpdateSuccess(installStore, instance, serverAddress)
+		} finally {
+			installStore.stopInstallingServer(projectId)
+		}
+		return
+	}
+
+	// join server
+	try {
+		await joinServer(instance.path, serverAddress, project.id)
+		trackEvent('InstanceStart', {
+			loader: instance.loader,
+			game_version: instance.game_version,
+			source: 'ServerProject',
+		})
+	} catch (err) {
+		handleSevereError(err, { profilePath: instance.path })
+	}
+}

apps/app/build.rs

@@ -29,6 +29,8 @@ fn main() {
                     .commands(&[
                         "get_project",
                         "get_project_many",
+                        "get_project_v3",
+                        "get_project_v3_many",
                         "get_version",
                         "get_version_many",
                         "get_user",
@@ -39,6 +41,8 @@ fn main() {
                         "get_organization_many",
                         "get_search_results",
                         "get_search_results_many",
+                        "get_search_results_v3",
+                        "get_search_results_v3_many",
                         "purge_cache_types",
                     ])
                     .default_permission(

apps/app/src/api/cache.rs

@@ -30,11 +30,13 @@ macro_rules! impl_cache_methods {
 
 impl_cache_methods!(
     (Project, Project),
+    (ProjectV3, ProjectV3),
     (Version, Version),
     (User, User),
     (Team, Vec<TeamMember>),
     (Organization, Organization),
-    (SearchResults, SearchResults)
+    (SearchResults, SearchResults),
+    (SearchResultsV3, SearchResultsV3)
 );
 
 pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
@@ -42,6 +44,8 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
         .invoke_handler(tauri::generate_handler![
             get_project,
             get_project_many,
+            get_project_v3,
+            get_project_v3_many,
             get_version,
             get_version_many,
             get_user,
@@ -52,6 +56,8 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
             get_organization_many,
             get_search_results,
             get_search_results_many,
+            get_search_results_v3,
+            get_search_results_v3_many,
             purge_cache_types,
         ])
         .build()

apps/app/src/api/profile.rs

@@ -6,6 +6,7 @@ use std::collections::HashMap;
 use std::path::{Path, PathBuf};
 use theseus::prelude::*;
 use theseus::profile::QuickPlayType;
+use theseus::server_address::ServerAddress;
 
 pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
     tauri::plugin::Builder::new("profile")
@@ -250,8 +251,15 @@ pub async fn profile_get_pack_export_candidates(
 // for the actual Child in the state.
 // invoke('plugin:profile|profile_run', path)
 #[tauri::command]
-pub async fn profile_run(path: &str) -> Result<ProcessMetadata> {
-    let process = profile::run(path, QuickPlayType::None).await?;
+pub async fn profile_run(
+    path: &str,
+    server_address: Option<String>,
+) -> Result<ProcessMetadata> {
+    let quick_play = match server_address {
+        Some(addr) => QuickPlayType::Server(ServerAddress::Unresolved(addr)),
+        None => QuickPlayType::None,
+    };
+    let process = profile::run(path, quick_play).await?;
 
     Ok(process)
 }

apps/app/src/api/profile_create.rs

@@ -20,6 +20,7 @@ pub async fn profile_create(
     loader_version: Option<String>, // the modloader version to use, set to "latest", "stable", or the ID of your chosen loader
     icon: Option<String>,           // the icon for the profile
     skip_install: Option<bool>,
+    linked_data: Option<LinkedData>,
 ) -> Result<String> {
     let res = profile::create::profile_create(
         name,
@@ -27,7 +28,7 @@ pub async fn profile_create(
         modloader,
         loader_version,
         icon,
-        None,
+        linked_data,
         skip_install,
     )
     .await?;

apps/frontend/CLAUDE.md

@@ -0,0 +1,43 @@
+# apps/frontend — Modrinth Website
+
+Nuxt 3 application serving the main Modrinth website. Uses Vue 3, Tailwind CSS v3, and file-based routing.
+
+## Architecture
+
+Nuxt 3 with SSR — pages are server-rendered and hydrated on the client. Uses `$fetch` for server-side data fetching and `@modrinth/api-client` (via `NuxtModrinthClient`) for client-side API calls.
+
+## Key Directories
+
+- **`src/pages/`** — file-based routing (`[param].vue` for dynamic segments, nested folders for nested routes)
+- **`src/components/`** — website-specific components (not shared with the app)
+- **`src/composables/`** — Vue composables, including `queries/` for TanStack Query options
+- **`src/providers/`** — page-level DI context providers (e.g., version modal, project page)
+- **`src/plugins/`** — Nuxt plugins (TanStack Query setup, theme, etc.)
+- **`src/middleware/`** — route guards and auth checks
+- **`src/layouts/`** — Nuxt layout components
+- **`src/server/`** — server-side plugins, routes, and utilities
+- **`src/store/`** — Pinia state management
+- **`src/helpers/`** — utility functions
+- **`src/locales/`** — i18n translation files
+
+## Components
+
+**Website-specific components go in `src/components/`.** These are components that only make sense in the website context — admin panels, moderation tools, dashboard widgets, brand components, etc.
+
+**Shared components go in `packages/ui`.** If a component could be used by both the website and the desktop app, it belongs in `packages/ui/src/components/`. See `packages/ui/CLAUDE.md` for UI standards, color rules, and component patterns.
+
+Rule of thumb: if it doesn't depend on Nuxt-specific APIs or website-only features, it should be in `packages/ui`.
+
+## Data Fetching
+
+Use `@modrinth/api-client` via `injectModrinthClient()` for all API calls. See `packages/api-client/CLAUDE.md` for the full API client documentation.
+
+For caching and server state, use TanStack Query (`@tanstack/vue-query`). See the `tanstack-query` skill (`.claude/skills/tanstack-query/SKILL.md`) for patterns and conventions used in this codebase.
+
+### Deprecated Composables
+
+These composables are deprecated and should not be used in new code:
+
+- **`useAsyncData`** - we use tanstack, not nuxt's built in async data utility.
+- **`useBaseFetch`** (`src/composables/fetch.js`) — legacy Labrinth fetch wrapper. Use `client.labrinth.*` modules instead.
+- **`useServersFetch`** (`src/composables/servers/servers-fetch.ts`) — legacy Archon fetch wrapper with manual retry/circuit-breaker. Use `client.archon.*` modules instead — refer to the `packages/api-client/CLAUDE.md` for more information.

apps/frontend/nuxt.config.ts

@@ -111,6 +111,8 @@ export default defineNuxtConfig({
 			const docTemplates = Object.keys(
 				await import('./src/templates/docs/index.ts').then((m) => m.default),
 			)
+			const blogArticles = await import('@modrinth/blog').then((m) => m.articles)
+			const { getChangelog } = await import('@modrinth/utils')
 
 			nitroConfig.prerender = nitroConfig.prerender || {}
 			nitroConfig.prerender.routes = nitroConfig.prerender.routes || []
@@ -120,6 +122,15 @@ export default defineNuxtConfig({
 			for (const template of docTemplates) {
 				nitroConfig.prerender.routes.push(`/_internal/templates/doc/${template}`)
 			}
+			nitroConfig.prerender.routes.push('/news')
+			for (const article of blogArticles) {
+				nitroConfig.prerender.routes.push(`/news/article/${article.slug}`)
+			}
+			nitroConfig.prerender.routes.push('/news/changelog')
+			for (const entry of getChangelog()) {
+				const id = entry.version ?? entry.date.unix()
+				nitroConfig.prerender.routes.push(`/news/changelog/${entry.product}/${id}`)
+			}
 		},
 		async 'build:before'() {
 			// 30 minutes

apps/frontend/src/assets/styles/components.scss

@@ -34,7 +34,7 @@
 		}
 
 		.value {
-			color: var(--color-text-dark);
+			color: var(--color-text-primary);
 			font-weight: bold;
 			font-size: 2rem;
 		}
@@ -99,7 +99,7 @@
 			margin-block: var(--spacing-card-md) var(--spacing-card-sm);
 
 			// Same styling as h3
-			color: var(--color-text-dark);
+			color: var(--color-text-primary);
 			font-size: 1.17rem;
 			font-weight: bold;
 
@@ -381,7 +381,7 @@
 	}
 
 	&:active {
-		color: var(--color-text-dark);
+		color: var(--color-text-primary);
 	}
 }
 
@@ -1113,7 +1113,7 @@ svg.inline-svg {
 		display: flex;
 		flex-direction: column;
 		gap: var(--gap-12);
-		padding: var(--gap-16) var(--gap-24);
+		padding: var(--gap-16);
 
 		h2 {
 			font-size: var(--text-18);

apps/frontend/src/assets/styles/global.scss

@@ -380,18 +380,18 @@ a {
 }
 
 h1 {
-	color: var(--color-text-dark);
+	color: var(--color-text-primary);
 }
 
 h2 {
 	margin-top: 0;
 	margin-bottom: 1rem;
-	color: var(--color-text-dark);
+	color: var(--color-text-primary);
 }
 
 h3 {
 	margin-block: var(--spacing-card-md) var(--spacing-card-sm);
-	color: var(--color-text-dark);
+	color: var(--color-text-primary);
 }
 
 input {

apps/frontend/src/components/ui/AdPlaceholder.vue

@@ -114,28 +114,19 @@ iframe[id^='google_ads_iframe'] {
 	color: var(--color-base);
 }
 
-#qc-cmp2-ui::before {
-	background: var(--color-raised-bg);
-}
-
+#qc-cmp2-ui::before,
 #qc-cmp2-ui::after {
 	background: var(--color-raised-bg);
 }
 
-#qc-cmp2-ui button[mode='primary'] {
+#qc-cmp2-ui button[mode='primary'],
+#qc-cmp2-ui button[mode='secondary'] {
 	background: var(--color-brand);
 	color: var(--color-accent-contrast);
 	border-radius: var(--radius-lg);
 	border: none;
 }
 
-#qc-cmp2-ui button[mode='secondary'] {
-	background: var(--color-button-bg);
-	color: var(--color-base);
-	border-radius: var(--radius-lg);
-	border: none;
-}
-
 #qc-cmp2-ui button[mode='link'] {
 	color: var(--color-link);
 }

apps/frontend/src/components/ui/NavTabs.vue

@@ -1,5 +1,6 @@
 <template>
 	<nav
+		v-if="filteredLinks.length > 1"
 		ref="scrollContainer"
 		class="experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
 		:class="{ 'card-shadow': mode === 'navigation' }"
@@ -299,7 +300,14 @@ watch(
 	},
 )
 
-watch(() => props.links, updateActiveTab, { deep: true })
+watch(
+	() => props.links,
+	async () => {
+		await nextTick()
+		updateActiveTab()
+	},
+	{ deep: true },
+)
 </script>
 
 <style scoped>

apps/frontend/src/components/ui/create-project-version/components/DependencySelect.vue

@@ -56,15 +56,17 @@ const search = async (query: string) => {
 		options.value = [...resultsByProjectId.hits, ...results.hits].map((hit) => ({
 			label: hit.title,
 			value: hit.project_id,
-			icon: defineAsyncComponent(() =>
-				Promise.resolve({
-					setup: () => () =>
-						h('img', {
-							src: hit.icon_url,
-							alt: hit.title,
-							class: 'h-5 w-5 rounded',
-						}),
-				}),
+			icon: markRaw(
+				defineAsyncComponent(() =>
+					Promise.resolve({
+						setup: () => () =>
+							h('img', {
+								src: hit.icon_url,
+								alt: hit.title,
+								class: 'h-5 w-5 rounded',
+							}),
+					}),
+				),
 			),
 		}))
 	} catch (error: any) {

apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="space-y-2.5">
-		<div class="flex items-center justify-between">
+		<div v-if="!noHeader" class="flex items-center justify-between">
 			<span class="font-semibold text-contrast">
 				Minecraft versions <span class="text-red">*</span>
 			</span>
@@ -45,6 +45,7 @@
 								versionType === 'all' && !group.isReleaseGroup ? 'w-max' : 'w-16',
 								modelValue.includes(version) ? '!text-contrast' : '',
 							]"
+							:disabled="disabled"
 							@click="() => handleToggleVersion(version)"
 							@blur="
 								() => {
@@ -76,6 +77,8 @@ type GameVersion = Labrinth.Tags.v2.GameVersion
 const props = defineProps<{
 	modelValue: string[]
 	gameVersions: Labrinth.Tags.v2.GameVersion[]
+	noHeader?: boolean
+	disabled?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -158,7 +161,7 @@ function groupVersions(gameVersions: GameVersion[]) {
 
 	const groups: Record<string, string[]> = {}
 
-	let currentGroupKey
+	let currentGroupKey: string
 
 	gameVersions.forEach((gameVersion) => {
 		if (gameVersion.version_type === 'release') {

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -1,12 +1,35 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)">
-		<div class="min-w-md flex max-w-md flex-col gap-3">
+	<NewModal
+		ref="modal"
+		:header="
+			projectType === 'server'
+				? formatMessage(messages.serverProjectTitle)
+				: formatMessage(messages.title)
+		"
+		:max-width="'550px'"
+	>
+		<div class="flex w-full flex-col gap-6">
 			<CreateLimitAlert v-model="hasHitLimit" type="project" />
-			<div class="flex flex-col gap-2">
+
+			<div class="flex flex-col gap-2.5">
+				<label for="project-type">
+					<span class="text-md font-semibold text-contrast">
+						{{ formatMessage(messages.typeLabel) }}
+					</span>
+				</label>
+				<Combobox
+					id="project-type"
+					v-model="projectType"
+					name="project-type"
+					:options="projectTypeOptions"
+					:disabled="hasHitLimit"
+				/>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
 				<label for="name">
-					<span class="text-lg font-semibold text-contrast">
+					<span class="text-md font-semibold text-contrast">
 						{{ formatMessage(messages.nameLabel) }}
-						<span class="text-brand-red">*</span>
 					</span>
 				</label>
 				<StyledInput
@@ -19,32 +42,46 @@
 					@update:model-value="updatedName()"
 				/>
 			</div>
-			<div class="flex flex-col gap-2">
-				<label for="slug">
-					<span class="text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.urlLabel) }}
-						<span class="text-brand-red">*</span>
-					</span>
-				</label>
-				<div class="text-input-wrapper">
+			<label for="slug" class="flex flex-col gap-2.5">
+				<span class="text-md font-semibold text-contrast">
+					{{ formatMessage(messages.urlLabel) }}
+				</span>
+				<div class="text-input-wrapper !w-full">
 					<div class="text-input-wrapper__before">https://modrinth.com/project/</div>
 					<StyledInput
 						id="slug"
 						v-model="slug"
 						:maxlength="64"
+						class="w-full"
+						type="text"
 						autocomplete="off"
 						:disabled="hasHitLimit"
 						@update:model-value="manualSlug = true"
 					/>
 				</div>
+			</label>
+			<div class="flex flex-col gap-2.5">
+				<label for="owner">
+					<span class="text-md font-semibold text-contrast">
+						{{ formatMessage(messages.ownerLabel) }}
+					</span>
+				</label>
+				<Combobox
+					id="owner"
+					v-model="owner"
+					name="owner"
+					:options="[userOption, ...ownerOptions]"
+					searchable
+					:disabled="hasHitLimit"
+					show-icon-in-selected
+				/>
+				<span>{{ formatMessage(messages.ownerDescription) }}</span>
 			</div>
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-2.5">
 				<label for="visibility" class="flex flex-col gap-1">
-					<span class="text-lg font-semibold text-contrast">
+					<span class="text-md font-semibold text-contrast">
 						{{ formatMessage(commonMessages.visibilityLabel) }}
-						<span class="text-brand-red">*</span>
 					</span>
-					<span>{{ formatMessage(messages.visibilityDescription) }}</span>
 				</label>
 				<Chips
 					id="visibility"
@@ -54,14 +91,13 @@
 					:capitalize="false"
 					:disabled="hasHitLimit"
 				/>
+				<span>{{ formatMessage(messages.visibilityDescription) }}</span>
 			</div>
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-2.5">
 				<label for="additional-information" class="flex flex-col gap-1">
-					<span class="text-lg font-semibold text-contrast">
+					<span class="text-md font-semibold text-contrast">
 						{{ formatMessage(messages.summaryLabel) }}
-						<span class="text-brand-red">*</span>
 					</span>
-					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
 				<StyledInput
 					id="additional-information"
@@ -71,8 +107,9 @@
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
 				/>
+				<span>{{ formatMessage(messages.summaryDescription) }}</span>
 			</div>
-			<div class="flex justify-end gap-2">
+			<div class="flex justify-end gap-2.5">
 				<ButtonStyled class="w-24">
 					<button @click="cancel">
 						<XIcon aria-hidden="true" />
@@ -80,7 +117,7 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand" class="w-32">
-					<button :disabled="hasHitLimit" @click="createProject">
+					<button v-tooltip="missingFieldsTooltip" :disabled="disableCreate" @click="createProject">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createProject) }}
 					</button>
@@ -90,30 +127,76 @@
 	</NewModal>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	Chips,
+	Combobox,
+	type ComboboxOption,
 	commonMessages,
 	defineMessages,
+	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
+import { computed, defineAsyncComponent, h } from 'vue'
 
 import CreateLimitAlert from './CreateLimitAlert.vue'
 
+type ProjectTypes = 'server' | 'project'
+interface VisibilityOption {
+	actual: Labrinth.Projects.v2.ProjectStatus
+	display: string
+}
+interface ShowOptions {
+	type?: 'server' | 'project'
+}
+
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
 
+defineExpose({
+	show,
+})
+
+const auth = (await useAuth()) as Ref<{
+	user: { id: string; username: string; avatar_url: string } | null
+}>
+
 const messages = defineMessages({
 	title: {
 		id: 'create.project.title',
 		defaultMessage: 'Creating a project',
 	},
+	serverProjectTitle: {
+		id: 'create.project.server-project-title',
+		defaultMessage: 'Creating a server project',
+	},
+	typeLabel: {
+		id: 'create.project.type-label',
+		defaultMessage: 'Type',
+	},
+	typeProject: {
+		id: 'create.project.type-project',
+		defaultMessage: 'Project',
+	},
+	typeServer: {
+		id: 'create.project.type-server',
+		defaultMessage: 'Server',
+	},
+	ownerLabel: {
+		id: 'create.project.owner-label',
+		defaultMessage: 'Owner',
+	},
+	ownerDescription: {
+		id: 'create.project.owner-description',
+		defaultMessage: `Set the project owner as yourself or an organization you're a member of.`,
+	},
 	nameLabel: {
 		id: 'create.project.name-label',
 		defaultMessage: 'Name',
@@ -146,6 +229,10 @@ const messages = defineMessages({
 		id: 'create.project.create-project',
 		defaultMessage: 'Create project',
 	},
+	createServerProject: {
+		id: 'create.project.create-server-project',
+		defaultMessage: 'Create server',
+	},
 	visibilityPublic: {
 		id: 'create.project.visibility-public',
 		defaultMessage: 'Public',
@@ -158,24 +245,38 @@ const messages = defineMessages({
 		id: 'create.project.visibility-private',
 		defaultMessage: 'Private',
 	},
-})
-
-const props = defineProps({
-	organizationId: {
-		type: String,
-		required: false,
-		default: null,
+	missingFieldsTooltip: {
+		id: 'create.project.missing-fields-tooltip',
+		defaultMessage: 'Missing fields: {fields}',
 	},
 })
 
-const modal = ref()
+const props = defineProps<{
+	organizationId?: string | null
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
 const hasHitLimit = ref(false)
 
 const name = ref('')
 const slug = ref('')
 const description = ref('')
 const manualSlug = ref(false)
-const visibilities = ref([
+const projectType = ref<ProjectTypes>('project')
+const projectTypeOptions = computed<ComboboxOption<ProjectTypes>[]>(() => [
+	{
+		value: 'project',
+		label: formatMessage(messages.typeProject),
+	},
+	{
+		value: 'server',
+		label: formatMessage(messages.typeServer),
+	},
+])
+const ownerOptions = ref<ComboboxOption<string>[]>([])
+const owner = ref<string | undefined>('self')
+const organizations = ref<Labrinth.Projects.v3.Organization[]>([])
+const visibilities = ref<VisibilityOption[]>([
 	{
 		actual: 'approved',
 		display: formatMessage(messages.visibilityPublic),
@@ -189,10 +290,88 @@ const visibilities = ref([
 		display: formatMessage(messages.visibilityPrivate),
 	},
 ])
-const visibility = ref(visibilities.value[0])
+const visibility = ref<VisibilityOption>(visibilities.value[0])
+
+const disableCreate = computed(() => {
+	if (hasHitLimit.value) return true
+	if (!name.value.trim() || !slug.value.trim()) return true
+	if (description.value.trim().length < 3) return true
+	if (owner.value !== 'self' && !organizations.value.find((org) => org.id === owner.value))
+		return true
+	return false
+})
+
+const missingFieldsTooltip = computed(() => {
+	const missingFields = []
+	if (!name.value.trim()) missingFields.push(formatMessage(messages.nameLabel))
+	if (!slug.value.trim()) missingFields.push(formatMessage(messages.urlLabel))
+	if (description.value.trim().length < 3) missingFields.push(formatMessage(messages.summaryLabel))
+	if (owner.value !== 'self' && !organizations.value.find((org) => org.id === owner.value))
+		missingFields.push(formatMessage(messages.ownerLabel))
+
+	if (missingFields.length === 0) return ''
+	return formatMessage(messages.missingFieldsTooltip, {
+		fields: missingFields.join(', '),
+	})
+})
 
 const cancel = () => {
-	modal.value.hide()
+	modal.value?.hide()
+}
+
+const userOption = computed(() => ({
+	value: 'self',
+	label: auth.value.user?.username || 'Unknown user',
+	icon: auth.value.user?.avatar_url
+		? markRaw(
+				defineAsyncComponent(() =>
+					Promise.resolve({
+						setup: () => () =>
+							h('img', {
+								src: auth.value.user?.avatar_url,
+								alt: 'User Avatar',
+								class: 'h-5 w-5 rounded-full',
+							}),
+					}),
+				),
+			)
+		: undefined,
+}))
+
+const { labrinth } = injectModrinthClient()
+
+async function fetchOrganizations() {
+	if (!auth.value.user?.id) return
+
+	try {
+		const orgs = (await useBaseFetch(`user/${auth.value.user.id}/organizations`, {
+			apiVersion: 3,
+		})) as Labrinth.Projects.v3.Organization[]
+
+		organizations.value = orgs || []
+
+		ownerOptions.value = organizations.value.map((org) => ({
+			value: org.id,
+			label: org.name,
+			icon: org.icon_url
+				? markRaw(
+						defineAsyncComponent(() =>
+							Promise.resolve({
+								setup: () => () =>
+									h('img', {
+										src: org.icon_url,
+										alt: `${org.name} Icon`,
+										class: 'h-5 w-5 rounded',
+									}),
+							}),
+						),
+					)
+				: undefined,
+		}))
+		if (props.organizationId) owner.value = props.organizationId
+	} catch (err) {
+		console.error('Failed to fetch organizations:', err)
+	}
 }
 
 async function createProject() {
@@ -200,9 +379,7 @@ async function createProject() {
 
 	const formData = new FormData()
 
-	const auth = await useAuth()
-
-	const projectData = {
+	const projectData: Labrinth.Projects.v2.CreateProjectBase = {
 		title: name.value.trim(),
 		project_type: 'mod',
 		slug: slug.value,
@@ -212,8 +389,8 @@ async function createProject() {
 		initial_versions: [],
 		team_members: [
 			{
-				user_id: auth.value.user.id,
-				name: auth.value.user.username,
+				user_id: auth.value.user?.id,
+				name: auth.value.user?.username,
 				role: 'Owner',
 			},
 		],
@@ -224,45 +401,68 @@ async function createProject() {
 		is_draft: true,
 	}
 
-	if (props.organizationId) {
-		projectData.organization_id = props.organizationId
-	}
-
 	formData.append('data', JSON.stringify(projectData))
 
 	try {
-		await useBaseFetch('project', {
-			method: 'POST',
-			body: formData,
-			headers: {
-				'Content-Disposition': formData,
-			},
-		})
+		let createdProjectId: string | undefined
 
-		modal.value.hide()
+		if (projectType.value === 'server') {
+			const result = await labrinth.projects_v3.createServerProject({
+				base: {
+					name: projectData.title,
+					slug: projectData.slug,
+					summary: projectData.description,
+					description: '',
+					requested_status: projectData.requested_status,
+					organization_id: owner.value !== 'self' ? owner.value : undefined,
+				},
+				minecraft_server: {
+					// empty component
+				},
+				minecraft_java_server: {
+					address: '',
+				},
+				minecraft_bedrock_server: {
+					address: '',
+				},
+			})
+			createdProjectId = result.id
+		} else {
+			const result = (await useBaseFetch('project', {
+				method: 'POST',
+				body: formData,
+				headers: {
+					'Content-Disposition': formData as unknown as string,
+				},
+			})) as Labrinth.Projects.v3.Project
+			createdProjectId = result.id
+			console.log(createdProjectId)
+		}
+
+		modal.value?.hide()
 		await router.push(`/project/${slug.value}/settings`)
-	} catch (err) {
+	} catch (err: unknown) {
+		const error = err as { data?: { description?: string } }
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: error.data?.description ?? String(err),
 			type: 'error',
 		})
 	}
 	stopLoading()
 }
 
-function show(event) {
+async function show(event?: MouseEvent, options?: ShowOptions) {
 	name.value = ''
 	slug.value = ''
 	description.value = ''
 	manualSlug.value = false
-	modal.value.show(event)
+	owner.value = 'self'
+	projectType.value = options?.type ?? 'project'
+	await fetchOrganizations()
+	modal.value?.show(event)
 }
 
-defineExpose({
-	show,
-})
-
 function updatedName() {
 	if (!manualSlug.value) {
 		slug.value = name.value

apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue

@@ -100,6 +100,7 @@ interface Tags {
 
 interface Props {
 	project: Labrinth.Projects.v2.Project
+	projectV3: Labrinth.Projects.v3.Project
 	versions?: Labrinth.Versions.v2.Version[]
 	currentMember?: Labrinth.Projects.v3.TeamMember | null
 	collapsed?: boolean
@@ -172,6 +173,7 @@ const emit = defineEmits<{
 
 const nagContext = computed<NagContext>(() => ({
 	project: props.project,
+	projectV3: props.projectV3,
 	versions: props.versions,
 	currentMember: props.currentMember?.user as Labrinth.Users.v2.User,
 	currentRoute: props.routeName,

apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue

@@ -1654,7 +1654,7 @@ function shouldShowStage(stage: Stage): boolean {
 
 function shouldShowAction(action: Action): boolean {
 	if (typeof action.shouldShow === 'function') {
-		return action.shouldShow(projectV2.value)
+		return action.shouldShow(projectV2.value, projectV3.value)
 	}
 
 	return true
@@ -1663,7 +1663,7 @@ function shouldShowAction(action: Action): boolean {
 function getVisibleDropdownOptions(action: DropdownAction) {
 	return action.options.filter((option) => {
 		if (typeof option.shouldShow === 'function') {
-			return option.shouldShow(projectV2.value)
+			return option.shouldShow(projectV2.value, projectV3.value)
 		}
 		return true
 	})
@@ -1672,7 +1672,7 @@ function getVisibleDropdownOptions(action: DropdownAction) {
 function getVisibleMultiSelectOptions(action: MultiSelectChipsAction) {
 	return action.options.filter((option) => {
 		if (typeof option.shouldShow === 'function') {
-			return option.shouldShow(projectV2.value)
+			return option.shouldShow(projectV2.value, projectV3.value)
 		}
 		return true
 	})

apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue

@@ -0,0 +1,303 @@
+<template>
+	<div>
+		<div class="flex flex-col gap-3">
+			<div class="flex items-start justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<div class="text-xl font-semibold text-contrast">Server compatibility</div>
+					<div v-if="!content" class="text-sm text-secondary">
+						Select whether your server is vanilla or modded and which versions it supports. The
+						Modrinth App uses this when a player joins.
+					</div>
+					<div v-else>
+						<div v-if="content.kind === 'vanilla'" class="flex items-center gap-1.5">
+							<div
+								class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-solid border-surface-5 bg-surface-4 font-medium"
+							>
+								<BoxIcon class="h-4 w-4 shrink-0 text-secondary" />
+							</div>
+
+							Vanilla server
+						</div>
+						<div
+							v-else-if="content.kind === 'modpack' && !usingCustomMrpack"
+							class="flex items-center gap-1.5"
+						>
+							<div
+								class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-solid border-surface-5 bg-surface-4 font-medium"
+							>
+								<PackageIcon class="h-4 w-4 shrink-0 text-secondary" />
+							</div>
+							Published modpack
+						</div>
+						<div v-else class="flex items-center gap-1.5">
+							<div
+								class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-solid border-surface-5 bg-surface-4 font-medium"
+							>
+								<PackagePlusIcon class="h-4 w-4 shrink-0 text-secondary" />
+							</div>
+							Custom modpack
+						</div>
+					</div>
+				</div>
+				<ButtonStyled v-if="content" type="outlined">
+					<button class="!border-[1px]" @click="handleSwitchCompatibility">
+						<ArrowLeftRightIcon />
+						Switch type
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else>
+					<button @click="handleSetCompatibility">
+						<ComponentIcon />
+						Set compatibility
+					</button>
+				</ButtonStyled>
+			</div>
+
+			<div
+				v-if="content"
+				class="flex justify-between gap-4 rounded-2xl border border-solid border-surface-5 p-4"
+			>
+				<!-- kind = vanilla -->
+				<div
+					v-if="content?.kind === 'vanilla'"
+					class="flex flex-col items-start justify-between gap-2.5"
+				>
+					<div class="flex flex-col gap-2">
+						<div class="font-medium text-secondary">Recommended version</div>
+						<div class="text-2xl font-semibold text-contrast">
+							{{ content.recommended_game_version ?? '—' }}
+						</div>
+					</div>
+					<div class="flex flex-col gap-2">
+						<div class="font-medium text-secondary">Supported versions</div>
+						<div class="flex flex-wrap gap-1.5">
+							<TagItem
+								v-for="v in formatVersionsForDisplay(
+									content.supported_game_versions,
+									tags.gameVersions,
+								)"
+								:key="v"
+							>
+								{{ v }}
+							</TagItem>
+							<div v-if="!content.supported_game_versions.length">—</div>
+						</div>
+					</div>
+				</div>
+				<!-- kind = modpack -->
+				<div
+					v-if="content?.kind === 'modpack' && modpackProject"
+					class="flex w-full max-w-[500px] flex-col items-start justify-between gap-4"
+				>
+					<div class="flex w-full flex-col gap-2">
+						<div class="font-medium text-secondary">Required modpack</div>
+						<div class="w-fullitems-center flex gap-3 rounded-2xl bg-surface-1 p-3">
+							<Avatar
+								v-if="!usingCustomMrpack"
+								:src="modpackProject.icon_url"
+								size="56px"
+								:tint-by="modpackProject.name"
+							/>
+							<div
+								v-else
+								class="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-solid border-surface-5 bg-surface-3"
+							>
+								<PackagePlusIcon class="h-10 w-10 shrink-0 text-secondary" />
+							</div>
+
+							<div class="flex flex-col justify-center gap-1">
+								<div class="font-semibold text-contrast">
+									<NuxtLink
+										v-if="!usingCustomMrpack"
+										:to="`/modpack/${modpackProject.slug}`"
+										class="hover:underline"
+									>
+										{{ modpackProject.name }}
+									</NuxtLink>
+									<span v-else>{{ modpackFileName }}</span>
+								</div>
+								<div class="flex h-6 items-center gap-1.5 text-secondary">
+									<NuxtLink
+										v-if="modpackOrg?.name"
+										:to="`/organization/${modpackOrg.slug}`"
+										class="flex items-center gap-1 hover:underline"
+									>
+										<Avatar
+											v-if="modpackOrg?.icon_url"
+											:src="modpackOrg.icon_url"
+											size="24px"
+											class="rounded-2xl"
+										/>
+										{{ modpackOrg.name }}
+									</NuxtLink>
+									<div
+										v-if="modpackOrg?.name && modpackVersion"
+										class="h-1.5 w-1.5 rounded-full bg-surface-5"
+									></div>
+									<NuxtLink
+										v-if="modpackVersion && !usingCustomMrpack"
+										:to="`/modpack/${modpackProject?.slug}/version/${modpackVersion.id}`"
+										class="hover:underline"
+									>
+										v{{ modpackVersion.version_number }}
+									</NuxtLink>
+									<div v-else-if="modpackVersion" class="flex items-center gap-1.5">
+										<div>v{{ modpackVersion.version_number }}</div>
+										<div class="h-1.5 w-1.5 rounded-full bg-surface-5"></div>
+										<a
+											v-if="modpackVersion.files?.length"
+											:href="
+												modpackVersion.files.find((f) => f.primary)?.url ??
+												modpackVersion.files[0]?.url
+											"
+											class="flex items-center gap-0.5 hover:underline"
+										>
+											<DownloadIcon />
+											Download
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div v-if="modpackVersion" class="flex flex-col gap-2">
+						<div class="font-medium text-secondary">Required version</div>
+						<div class="flex flex-wrap gap-1.5">
+							<TagItem v-for="gv in modpackVersion.game_versions" :key="gv">
+								{{ gv }}
+							</TagItem>
+							<TagItem
+								v-for="loader in modpackVersion.mrpack_loaders"
+								:key="loader"
+								:style="`--_color: var(--color-platform-${loader})`"
+							>
+								<component
+									:is="getLoaderIcon(loader)"
+									v-if="getLoaderIcon(loader)"
+									class="h-4 w-4"
+								/>
+								<FormattedTag :tag="loader" enforce-type="loader" />
+							</TagItem>
+						</div>
+					</div>
+				</div>
+
+				<ButtonStyled v-if="content">
+					<button class="!w-full !max-w-[160px]" @click="handleUpdateContent">
+						<RefreshCwIcon />
+						Update
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+		<ServerCompatibilityModal ref="serverCompatibilityModal" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	ArrowLeftRightIcon,
+	BoxIcon,
+	ComponentIcon,
+	DownloadIcon,
+	getLoaderIcon,
+	PackageIcon,
+	PackagePlusIcon,
+	RefreshCwIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	FormattedTag,
+	injectModrinthClient,
+	injectProjectPageContext,
+	TagItem,
+} from '@modrinth/ui'
+import { formatVersionsForDisplay } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
+
+import { useGeneratedState } from '~/composables/generated'
+
+import ServerCompatibilityModal from './ServerCompatibilityModal/ServerCompatibilityModal.vue'
+
+const serverCompatibilityModal = useTemplateRef<InstanceType<typeof ServerCompatibilityModal>>(
+	'serverCompatibilityModal',
+)
+
+const { projectV3 } = injectProjectPageContext()
+const { labrinth } = injectModrinthClient()
+const tags = useGeneratedState()
+
+const content = computed(() => {
+	if (!projectV3.value) return null
+
+	const content = projectV3.value.minecraft_java_server?.content
+	if (!content) return null
+
+	if (content?.kind === 'vanilla' && !content.recommended_game_version) {
+		return null
+	}
+
+	return content
+})
+
+const modpackVersionId = computed(() => {
+	if (content.value?.kind === 'modpack') return content.value.version_id
+	return null
+})
+
+const { data: modpackVersion } = useQuery({
+	queryKey: computed(() => ['versions', 'detail', modpackVersionId.value]),
+	queryFn: () => labrinth.versions_v3.getVersion(modpackVersionId.value!),
+	enabled: computed(() => !!modpackVersionId.value),
+})
+
+const modpackProjectId = computed(() => modpackVersion.value?.project_id ?? null)
+
+const { data: modpackProject } = useQuery({
+	queryKey: computed(() => ['project', 'v3', modpackProjectId.value]),
+	queryFn: () => labrinth.projects_v3.get(modpackProjectId.value!),
+	enabled: computed(() => !!modpackProjectId.value),
+})
+
+const { data: modpackOrg } = useQuery({
+	queryKey: computed(() => ['project', 'org', modpackProjectId.value]),
+	queryFn: () => labrinth.projects_v3.getOrganization(modpackProjectId.value!),
+	enabled: computed(() => !!modpackProjectId.value && !!modpackProject.value?.organization),
+})
+
+const usingCustomMrpack = computed(() => modpackVersion.value?.project_id === projectV3.value?.id)
+
+const modpackFileName = computed(() => {
+	if (!modpackVersion.value?.files?.length) return null
+	const primary = modpackVersion.value.files.find((f) => f.primary)
+	return (primary ?? modpackVersion.value.files[0]).filename
+})
+
+function handleSetCompatibility() {
+	serverCompatibilityModal.value?.show()
+}
+
+function handleSwitchCompatibility() {
+	serverCompatibilityModal.value?.show({ isSwitchingCompatibilityType: true })
+}
+
+function handleUpdateContent() {
+	if (!content.value?.kind) return
+
+	switch (content.value.kind) {
+		case 'vanilla':
+			serverCompatibilityModal.value?.show({ updateContentKind: 'vanilla' })
+			break
+		case 'modpack':
+			if (usingCustomMrpack.value) {
+				serverCompatibilityModal.value?.show({ updateContentKind: 'custom-modpack' })
+			} else {
+				serverCompatibilityModal.value?.show({ updateContentKind: 'published-modpack' })
+			}
+			break
+		default:
+			break
+	}
+}
+</script>

apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/DataLossWarningBanner.vue

@@ -0,0 +1,14 @@
+<template>
+	<Admonition v-if="isSwitchingCompatibilityType" type="critical" header="Data loss warning">
+		Changing the compatibility type will reset your previous compatibility settings and redistribute
+		the new settings to users in the Modrinth App.
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { Admonition } from '@modrinth/ui'
+
+import { injectServerCompatibilityContext } from '../../../../providers/manage-server-compatibility-modal'
+
+const { isSwitchingCompatibilityType } = injectServerCompatibilityContext()
+</script>

apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/ServerCompatibilityModal.vue

@@ -0,0 +1,76 @@
+<template>
+	<MultiStageModal
+		ref="modal"
+		:stages="ctx.stageConfigs"
+		:context="ctx"
+		:fade="ctx.isSwitchingCompatibilityType.value ? 'danger' : 'standard'"
+		@hide="handleHide"
+	/>
+</template>
+
+<script setup lang="ts">
+import { injectProjectPageContext, MultiStageModal } from '@modrinth/ui'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+import {
+	type CompatibilityType,
+	createServerCompatibilityContext,
+	provideServerCompatibilityContext,
+} from '../../../../providers/manage-server-compatibility-modal'
+
+const modal = useTemplateRef<ComponentExposed<typeof MultiStageModal>>('modal')
+
+const { projectV3 } = injectProjectPageContext()
+const ctx = createServerCompatibilityContext(modal)
+provideServerCompatibilityContext(ctx)
+
+interface ShowModalOptions {
+	stageId?: string | null
+	updateContentKind?: CompatibilityType
+	isSwitchingCompatibilityType?: boolean
+}
+
+async function show(options?: ShowModalOptions) {
+	const content = projectV3.value?.minecraft_java_server?.content
+
+	if (options?.updateContentKind) {
+		ctx.compatibilityType.value = options.updateContentKind
+		ctx.isEditingExistingCompatibility.value = true
+
+		// Prefill existing values for vanilla
+		if (options.updateContentKind === 'vanilla' && content && content.kind === 'vanilla') {
+			ctx.supportedGameVersions.value = content.supported_game_versions ?? []
+			ctx.recommendedGameVersion.value = content.recommended_game_version ?? null
+		}
+
+		if (options.updateContentKind === 'published-modpack') {
+			ctx.selectedProjectId.value = content?.kind === 'modpack' ? content.project_id || '' : ''
+		}
+
+		await nextTick()
+		modal.value?.setStage(1)
+	} else {
+		modal.value?.setStage(options?.stageId ?? 0)
+	}
+
+	if (options?.isSwitchingCompatibilityType) {
+		ctx.isSwitchingCompatibilityType.value = true
+	}
+
+	modal.value?.show()
+}
+
+function handleHide() {
+	ctx.resetContext()
+}
+
+function hide() {
+	handleHide()
+	modal.value?.hide()
+}
+
+defineExpose({
+	show,
+	hide,
+})
+</script>

apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/SelectCompatibilityType.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="flex flex-col gap-6">
+		<DataLossWarningBanner />
+		<div class="flex flex-col gap-4">
+			<div class="font-semibold text-contrast">Select compatibility type</div>
+			<div class="flex w-full flex-col gap-2">
+				<button
+					v-for="option in options"
+					:key="option.value"
+					class="flex !w-full items-center gap-4 rounded-3xl bg-surface-4 p-3 text-left transition-all hover:brightness-125"
+					@click="selectType(option.value)"
+				>
+					<div
+						class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5"
+					>
+						<component :is="option.icon" class="h-9 w-9 text-secondary" />
+					</div>
+					<div class="flex flex-col gap-0.5">
+						<span class="font-bold text-contrast">{{ option.label }}</span>
+						<span class="text-sm text-secondary">{{ option.description }}</span>
+					</div>
+				</button>
+			</div>
+			<div class="text-sm text-secondary">
+				Servers with custom modpacks should not be uploaded as separate modpack projects.
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BoxIcon, PackageIcon, PackagePlusIcon } from '@modrinth/assets'
+
+import {
+	type CompatibilityType,
+	injectServerCompatibilityContext,
+} from '~/providers/manage-server-compatibility-modal'
+
+import DataLossWarningBanner from '../DataLossWarningBanner.vue'
+
+const ctx = injectServerCompatibilityContext()
+
+const options = [
+	{
+		value: 'vanilla' as CompatibilityType,
+		label: 'Vanilla server',
+		description: 'A vanilla server with no mods.',
+		icon: BoxIcon,
+	},
+	{
+		value: 'published-modpack' as CompatibilityType,
+		label: 'Published modpack',
+		description: 'A modded server using a published modpack.',
+		icon: PackageIcon,
+	},
+	{
+		value: 'custom-modpack' as CompatibilityType,
+		label: 'Custom modpack',
+		description: 'A modded server using a custom modpack.',
+		icon: PackagePlusIcon,
+	},
+]
+
+function selectType(type: CompatibilityType) {
+	ctx.compatibilityType.value = type
+	ctx.modal.value?.nextStage()
+}
+</script>

apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/SelectPublishedModpack.vue

@@ -0,0 +1,143 @@
+<template>
+	<div class="flex flex-col gap-6">
+		<DataLossWarningBanner />
+		<div class="flex flex-col gap-2">
+			<div class="font-semibold text-contrast">Select modpack</div>
+
+			<div class="flex flex-col gap-6 rounded-2xl border border-solid border-surface-5 p-4">
+				<div class="flex flex-col gap-2">
+					<label class="font-semibold text-contrast">Project</label>
+					<ProjectCombobox
+						v-model="selectedProjectId"
+						:project-types="['modpack']"
+						:exclude-project-ids="[currentProjectId]"
+						placeholder="Select modpack"
+						search-placeholder="Search by name or paste ID..."
+						loading-message="Loading..."
+						no-results-message="No results found"
+						include-user-unlisted-projects
+						:user-id="auth?.user?.id"
+					/>
+				</div>
+
+				<div v-if="selectedProjectId" class="flex flex-col gap-2">
+					<label class="font-semibold text-contrast">Version</label>
+					<Combobox
+						v-model="selectedVersionId"
+						placeholder="Select version"
+						:options="versionOptions"
+						:searchable="true"
+						search-placeholder="Search versions..."
+						:no-options-message="versionsLoading ? 'Loading...' : 'No results found'"
+					/>
+				</div>
+			</div>
+			<div v-if="selectedVersion" class="flex flex-col gap-4 rounded-2xl bg-surface-2 p-4">
+				<div class="flex items-center justify-between">
+					<div class="text-secondary">Game version</div>
+					<div class="flex flex-wrap gap-1">
+						<TagItem v-for="gv in selectedVersion.game_versions" :key="gv">
+							{{ gv }}
+						</TagItem>
+					</div>
+				</div>
+
+				<div
+					v-if="selectedVersion.mrpack_loaders?.length"
+					class="flex items-center justify-between"
+				>
+					<div class="text-secondary">Platform</div>
+					<div class="flex flex-wrap gap-1">
+						<TagItem
+							v-for="loader in selectedVersion.mrpack_loaders"
+							:key="loader"
+							:style="`--_color: var(--color-platform-${loader})`"
+						>
+							<component :is="getLoaderIcon(loader)" v-if="getLoaderIcon(loader)" class="h-4 w-4" />
+							<FormattedTag :tag="loader" enforce-type="loader" />
+						</TagItem>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { getLoaderIcon } from '@modrinth/assets'
+import {
+	Combobox,
+	FormattedTag,
+	injectModrinthClient,
+	injectNotificationManager,
+	injectProjectPageContext,
+	ProjectCombobox,
+	TagItem,
+} from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+import { injectServerCompatibilityContext } from '~/providers/manage-server-compatibility-modal'
+
+import DataLossWarningBanner from '../DataLossWarningBanner.vue'
+
+const { projectV3 } = injectProjectPageContext()
+
+const currentProjectId = computed(() => projectV3.value?.id)
+const { selectedProjectId, selectedVersionId } = injectServerCompatibilityContext()
+const { labrinth } = injectModrinthClient()
+const { addNotification } = injectNotificationManager()
+const auth = (await useAuth()) as { user?: { id: string } }
+
+interface VersionInfo {
+	id: string
+	version_number: string
+	name: string
+}
+
+const versionsLoading = ref(false)
+const projectVersions = ref<VersionInfo[]>([])
+
+const versionOptions = computed(() =>
+	projectVersions.value.map((v) => ({
+		label: v.version_number,
+		value: v.id,
+	})),
+)
+
+const { data: selectedVersion } = useQuery({
+	queryKey: computed(() => ['versions', 'detail', selectedVersionId.value]),
+	queryFn: () => labrinth.versions_v3.getVersion(selectedVersionId.value),
+	enabled: computed(() => !!selectedVersionId.value),
+})
+
+watch(
+	() => selectedProjectId.value,
+	async (newProjectId) => {
+		selectedVersionId.value = ''
+		projectVersions.value = []
+
+		if (!newProjectId) return
+
+		versionsLoading.value = true
+		try {
+			const versions = await labrinth.versions_v3.getProjectVersions(newProjectId)
+			projectVersions.value = versions.map((v) => ({
+				id: v.id,
+				version_number: v.version_number,
+				name: v.name,
+			}))
+		} catch (error: unknown) {
+			const err = error as { data?: { description?: string } }
+			addNotification({
+				title: 'Failed to load versions',
+				text: err.data?.description || String(error),
+				type: 'error',
+			})
+		} finally {
+			versionsLoading.value = false
+		}
+	},
+	{ immediate: true },
+)
+</script>

apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/SelectVanillaVersions.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="flex w-full flex-col gap-6">
+		<DataLossWarningBanner />
+		<div class="flex w-full flex-col gap-4">
+			<label>
+				<span class="label__title">Supported MC versions</span>
+				<McVersionPicker v-model="supportedGameVersions" no-header :game-versions="gameVersions" />
+			</label>
+			<div>
+				<label>
+					<span class="label__title">Recommended MC version</span>
+					<Combobox
+						v-model="recommendedGameVersion"
+						v-tooltip="
+							!recommendedOptions.length
+								? 'Set supported versions before selecting the recommended version'
+								: undefined
+						"
+						:options="recommendedOptions"
+						searchable
+						:display-name="(val: string) => val"
+						placeholder="Select version"
+						:disabled="!recommendedOptions.length"
+					/>
+					<div class="mt-2 text-secondary">
+						Players joining the server from the Modrinth App will connect using this version.
+					</div>
+				</label>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Combobox } from '@modrinth/ui'
+import { computed, watch } from 'vue'
+
+import McVersionPicker from '~/components/ui/create-project-version/components/McVersionPicker.vue'
+import { useGeneratedState } from '~/composables/generated'
+import { injectServerCompatibilityContext } from '~/providers/manage-server-compatibility-modal'
+
+import DataLossWarningBanner from '../DataLossWarningBanner.vue'
+
+const { supportedGameVersions, recommendedGameVersion } = injectServerCompatibilityContext()
+
+const generatedState = useGeneratedState()
+const gameVersions = generatedState.value.gameVersions
+
+const recommendedOptions = computed(() =>
+	gameVersions
+		.filter((v) => v.version_type === 'release')
+		.filter((v) => supportedGameVersions.value.includes(v.version))
+		.map((v) => ({ label: v.version, value: v.version })),
+)
+
+watch(
+	() => supportedGameVersions.value,
+	(supported) => {
+		if (recommendedGameVersion.value && !supported.includes(recommendedGameVersion.value)) {
+			recommendedGameVersion.value = null
+		}
+	},
+)
+</script>

apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/UploadCustomModpack.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="flex w-full flex-col gap-6">
+		<DataLossWarningBanner />
+		<div class="flex w-full flex-col gap-4">
+			<div class="font-semibold text-contrast">Upload custom modpack</div>
+
+			<DropzoneFileInput
+				v-if="!ctx.customModpackFile.value"
+				primary-prompt="Drag and drop your .mrpack file"
+				secondary-prompt="Or click to browse"
+				accept=".mrpack"
+				size="medium"
+				@change="handleFileUpload"
+			/>
+
+			<div
+				v-if="ctx.customModpackFile.value"
+				class="flex items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-2 text-button-text"
+			>
+				<div class="flex items-center gap-2 overflow-hidden">
+					<FileIcon />
+					<span
+						v-tooltip="ctx.customModpackFile.value.name"
+						class="overflow-hidden text-ellipsis whitespace-nowrap font-medium"
+					>
+						{{ ctx.customModpackFile.value.name }}
+					</span>
+				</div>
+
+				<ButtonStyled size="standard" :circular="true">
+					<button
+						v-tooltip="'Replace file'"
+						aria-label="Replace file"
+						class="!shadow-none"
+						@click="fileInput?.click()"
+					>
+						<ArrowLeftRightIcon aria-hidden="true" />
+						<input
+							ref="fileInput"
+							class="hidden"
+							type="file"
+							accept=".mrpack"
+							@change="handleFileInputChange"
+						/>
+					</button>
+				</ButtonStyled>
+			</div>
+
+			<Checkbox v-model="ctx.hasLicensePermission.value">
+				<span class="max-w-[90%] text-left text-primary">
+					Do you have the appropriate licenses to redistribute all content in this Modpack?
+					<NuxtLink
+						to="https://support.modrinth.com/en/articles/8797527-obtaining-modpack-permissions"
+						external
+						target="_blank"
+						class="font-medium text-blue underline"
+					>
+						Learn more
+					</NuxtLink>
+				</span>
+			</Checkbox>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ArrowLeftRightIcon, FileIcon } from '@modrinth/assets'
+import { ButtonStyled, Checkbox, DropzoneFileInput } from '@modrinth/ui'
+
+import { injectServerCompatibilityContext } from '~/providers/manage-server-compatibility-modal'
+
+import DataLossWarningBanner from '../DataLossWarningBanner.vue'
+
+const ctx = injectServerCompatibilityContext()
+
+const fileInput = useTemplateRef<HTMLInputElement>('fileInput')
+
+function handleFileUpload(files: File[]) {
+	if (files.length > 0) {
+		ctx.customModpackFile.value = files[0]
+	}
+}
+
+function handleFileInputChange(e: Event) {
+	const target = e.target as HTMLInputElement
+	const file = target.files?.[0]
+	if (file) {
+		ctx.customModpackFile.value = file
+	}
+	target.value = ''
+}
+</script>

apps/frontend/src/composables/featureFlags.ts

@@ -38,7 +38,6 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	newProjectGeneralSettings: false,
 	newProjectEnvironmentSettings: true,
 	hideRussiaCensorshipBanner: false,
-	serverDiscovery: false,
 	disablePrettyProjectUrlRedirects: false,
 	hidePreviewBanner: false,
 	i18nDebug: false,

apps/frontend/src/composables/fetch.js

@@ -1,3 +1,8 @@
+/**
+ * @deprecated Use `@modrinth/api-client` via `injectModrinthClient()` instead.
+ * This composable is kept for legacy code that hasn't been migrated yet.
+ */
+
 let cachedRateLimitKey = undefined
 let rateLimitKeyPromise = undefined
 

apps/frontend/src/composables/generated.ts

@@ -92,6 +92,11 @@ export const useGeneratedState = () =>
 				id: 'modpack',
 				display: 'modpack',
 			},
+			{
+				actual: 'server',
+				id: 'server',
+				display: 'server',
+			},
 		],
 		loaderData: {
 			pluginLoaders: ['bukkit', 'spigot', 'paper', 'purpur', 'sponge', 'folia'],

apps/frontend/src/composables/queries/version.ts

@@ -0,0 +1,11 @@
+import type { AbstractModrinthClient } from '@modrinth/api-client'
+
+import { STALE_TIME } from './project'
+
+export const versionQueryOptions = {
+	v3: (versionId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['version', 'v3', versionId] as const,
+		queryFn: () => client.labrinth.versions_v3.getVersion(versionId),
+		staleTime: STALE_TIME,
+	}),
+}

apps/frontend/src/composables/servers/servers-fetch.ts

@@ -1,3 +1,10 @@
+/**
+ * @deprecated Use `@modrinth/api-client` via `injectModrinthClient()` instead.
+ * The api-client's archon modules (`client.archon.servers_v0`, etc.) handle auth,
+ * retry, and circuit breaking automatically. This composable is kept for legacy
+ * code that hasn't been migrated yet.
+ */
+
 import { PANEL_VERSION } from '@modrinth/api-client'
 import type { V1ErrorInfo } from '@modrinth/utils'
 import { ModrinthServerError, ModrinthServersFetchError } from '@modrinth/utils'

apps/frontend/src/helpers/projects.js

@@ -3,6 +3,8 @@ export const getProjectTypeForUrl = (type, categories) => {
 }
 
 export const getProjectTypeForUrlShorthand = (type, categories, overrideTags) => {
+	if (type === 'minecraft_java_server') return 'server'
+
 	const tags = overrideTags ?? useGeneratedState().value
 
 	if (type === 'mod') {

apps/frontend/src/layouts/default.vue

@@ -69,7 +69,8 @@
 				</NuxtLink>
 			</div>
 			<div
-				:class="`col-span-2 row-start-2 flex flex-wrap justify-center ${flags.projectTypesPrimaryNav ? 'gap-2' : 'gap-4'} lg:col-span-1 lg:row-start-auto`"
+				class="col-span-2 row-start-2 flex flex-wrap justify-center lg:col-span-1 lg:row-start-auto"
+				:class="{ 'gap-4': !flags.projectTypesPrimaryNav }"
 			>
 				<template v-if="flags.projectTypesPrimaryNav">
 					<ButtonStyled
@@ -148,6 +149,18 @@
 							{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
 						</nuxt-link>
 					</ButtonStyled>
+					<ButtonStyled
+						type="transparent"
+						:highlighted="route.name === 'discover-servers' || route.path.startsWith('/server/')"
+						:highlighted-style="
+							route.name === 'discover-servers' ? 'main-nav-primary' : 'main-nav-secondary'
+						"
+					>
+						<nuxt-link to="/discover/servers">
+							<ServerIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.server) }}
+						</nuxt-link>
+					</ButtonStyled>
 				</template>
 				<template v-else>
 					<ButtonStyled
@@ -184,7 +197,6 @@
 								{
 									id: 'servers',
 									action: '/discover/servers',
-									shown: flags.serverDiscovery,
 								},
 							]"
 							hoverable
@@ -398,6 +410,10 @@
 								id: 'new-project',
 								action: (event) => $refs.modal_creation.show(event),
 							},
+							{
+								id: 'new-server-project',
+								action: (event) => $refs.modal_creation.show(event, { type: 'server' }),
+							},
 							{
 								id: 'new-collection',
 								action: (event) => $refs.modal_collection_creation.show(event),
@@ -410,10 +426,13 @@
 						]"
 					>
 						<PlusIcon aria-hidden="true" />
-						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+						{{ formatMessage(messages.publish) }}
 						<template #new-project>
 							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
 						</template>
+						<template #new-server-project>
+							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newServerProject) }}
+						</template>
 						<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
 						<template #new-collection>
 							<CollectionIcon aria-hidden="true" /> {{ formatMessage(messages.newCollection) }}
@@ -835,6 +854,10 @@ const messages = defineMessages({
 		id: 'layout.action.create-new',
 		defaultMessage: 'Create new...',
 	},
+	publish: {
+		id: 'layout.action.publish',
+		defaultMessage: 'Publish',
+	},
 	reviewProjects: {
 		id: 'layout.action.review-projects',
 		defaultMessage: 'Project review',
@@ -867,6 +890,10 @@ const messages = defineMessages({
 		id: 'layout.action.new-project',
 		defaultMessage: 'New project',
 	},
+	newServerProject: {
+		id: 'layout.action.new-server-project',
+		defaultMessage: 'New server',
+	},
 	newCollection: {
 		id: 'layout.action.new-collection',
 		defaultMessage: 'New collection',
@@ -987,6 +1014,10 @@ const navRoutes = computed(() => [
 		label: formatMessage(getProjectTypeMessage('modpack', true)),
 		href: '/discover/modpacks',
 	},
+	{
+		label: formatMessage(getProjectTypeMessage('server', true)),
+		href: '/discover/servers',
+	},
 ])
 
 const userMenuOptions = computed(() => {

apps/frontend/src/locales/ar-SA/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "العربيّة",
-	"be": "البيلاروسيّة",
-	"bg": "البلغاريّة",
-	"bn": "البنغاليّة",
-	"ca": "الكاتالونية",
-	"cs": "التشيكية",
-	"da": "الدنماركية",
-	"de": "الألمانية",
-	"de-CH": "الألمانية (سويسرا)",
-	"el": "اليونانية",
-	"en-GB": "الإنجليزية (المملكة المتحدة)",
-	"en-US": "الإنجليزية (الولايات المتحدة)",
-	"en-x-lolcat": "القطة المضحكة",
-	"en-x-pirate": "الإنجليزية (القراصنة)",
-	"en-x-updown": "الإنجليزية (رأسا على عقب)",
-	"en-x-uwu": "الإنجليزية (UwU)",
-	"eo": "الإسبرانتو",
-	"es": "الإسبانية",
-	"et": "الإستونية",
-	"fi": "الفنلندية",
-	"fr": "الفرنسية",
-	"fr-BE": "الفرنسيّة (بلجيكيا)",
-	"fr-CA": "الفرنسيّة (كندا)",
-	"he": "العبريّة",
-	"hi": "الهنديّة",
-	"hr": "الكرواطيّة",
-	"hu": "الهنغارية",
-	"id": "الإندونيسيّة",
-	"it": "الإيطاليّة",
-	"ja": "اليابانيّة",
-	"kk": "الكازاخية",
-	"ko": "الكوريّة",
-	"ky": "القيرغيزية",
-	"lt": "الليتوانية",
-	"lv": "اللاتفيّة",
-	"ms": "الماليزية",
-	"nb": "البوكماول النرويجية",
-	"nl": "الهولنديّة",
-	"nn": "لغة نينورسك النرويجية",
-	"pes": "الفارسيّة",
-	"pl": "البولنديّة",
-	"pt": "البرتغاليّة",
-	"pt-BR": "البرتغاليّة (البرازيليّة)",
-	"ro": "الرومانيّة",
-	"ru": "الروسيّة",
-	"ru-x-bandit": "الروسيّة (بانديت)",
-	"sk": "السلوفاكية",
-	"sv": "السويديّة",
-	"th": "التايلنديّة",
-	"tok": "لغة التوكي بونا",
-	"tr": "التركيّة",
-	"tt": "لغة التتار",
-	"uk": "الأوكرانية",
-	"vi": "الفيتناميّة",
-	"zh-Hans": "الصينيّة (المبسّطة)",
-	"zh-Hant": "الصينيّة (القديمة)"
-}

apps/frontend/src/locales/cs-CZ/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabština",
-	"be": "Běloruština",
-	"bg": "Bulharština",
-	"bn": "Bengálština",
-	"ca": "Katalánština",
-	"cs": "Čeština",
-	"da": "Dánština",
-	"de": "Němčina",
-	"de-CH": "Němčina (Švýcarsko)",
-	"el": "Řečtina",
-	"en-GB": "Angličtina (Velká Británie)",
-	"en-US": "Angličtina (Spojené státy americké)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Angličtina (Pirátská)",
-	"en-x-updown": "Angličtina (Vzhůru nohama)",
-	"en-x-uwu": "Angličtina (UwU)",
-	"eo": "Esperanto",
-	"es": "Španělština",
-	"et": "Estonština",
-	"fi": "Finština",
-	"fr": "Francouzština",
-	"fr-BE": "Francouzština (Belgie)",
-	"fr-CA": "Francouzština (Kanada)",
-	"he": "Hebrejština",
-	"hi": "Hindština",
-	"hr": "Chorvatština",
-	"hu": "Maďarština",
-	"id": "Indonéština",
-	"it": "Italština",
-	"ja": "Japonština",
-	"kk": "Kazaština",
-	"ko": "Korejština",
-	"ky": "Kyrgyzština",
-	"lt": "Litevština",
-	"lv": "Lotyština",
-	"ms": "Malajština",
-	"nb": "Norština",
-	"nl": "Dánština",
-	"nn": "Norština",
-	"pes": "Perština",
-	"pl": "Polština",
-	"pt": "Portugalština",
-	"pt-BR": "Portugalština (Brazílie)",
-	"ro": "Rumunština",
-	"ru": "Ruština",
-	"ru-x-bandit": "Ruština (Bandit)",
-	"sk": "Slovenština",
-	"sv": "Švédština",
-	"th": "Thajština",
-	"tok": "Toki Ponština",
-	"tr": "Turečtina",
-	"tt": "Tatarština",
-	"uk": "Ukrajinština",
-	"vi": "Vietnamština",
-	"zh-Hans": "Čínština (zjednodušená)",
-	"zh-Hant": "Čínština (tradiční)"
-}

apps/frontend/src/locales/da-DK/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabisk",
-	"be": "Hviderussisk",
-	"bg": "Bulgarsk",
-	"bn": "Bengali",
-	"ca": "Catalansk",
-	"cs": "Tjekkisk",
-	"da": "Dansk",
-	"de": "Tysk",
-	"de-CH": "Tysk (Schweiz)",
-	"el": "Græsk",
-	"en-GB": "Engelsk (Storbritannien)",
-	"en-US": "Engelsk (USA)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Engelsk (Pirat)",
-	"en-x-updown": "Engelsk (På hovedet)",
-	"en-x-uwu": "Engelsk (UwU)",
-	"eo": "Esperanto",
-	"es": "Spansk",
-	"et": "Estisk",
-	"fi": "Finsk",
-	"fr": "Fransk",
-	"fr-BE": "Fransk (Belgien)",
-	"fr-CA": "Fransk (Canada)",
-	"he": "Hebraisk",
-	"hi": "Hindi",
-	"hr": "Kroatisk",
-	"hu": "Ungarsk",
-	"id": "Indonesisk",
-	"it": "Italiensk",
-	"ja": "Japansk",
-	"kk": "Kasakhisk",
-	"ko": "Koreansk",
-	"ky": "Kirgisisk",
-	"lt": "Litauisk",
-	"lv": "Lettisk",
-	"ms": "Malajisk",
-	"nb": "Norsk (Bokmål)",
-	"nl": "Hollandsk",
-	"nn": "Norsk (Nynorsk)",
-	"pes": "Persisk",
-	"pl": "Polsk",
-	"pt": "Portugisisk",
-	"pt-BR": "Portugisisk (Brasilien)",
-	"ro": "Rumænsk",
-	"ru": "Russisk",
-	"ru-x-bandit": "Russisk (Bandit)",
-	"sk": "Slovakisk",
-	"sv": "Svensk",
-	"th": "Thailandsk",
-	"tok": "Toki pona",
-	"tr": "Tyrkisk",
-	"tt": "Tatarisk",
-	"uk": "Ukrainsk",
-	"vi": "Vietnamesisk",
-	"zh-Hans": "Kinesisk (Forenklet)",
-	"zh-Hant": "Kinesisk (Traditionel)"
-}

apps/frontend/src/locales/de-CH/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabisch",
-	"be": "Belarussisch",
-	"bg": "Bulgarisch",
-	"bn": "Bangalisch",
-	"ca": "Katalanisch",
-	"cs": "Tschechisch",
-	"da": "Dänisch",
-	"de": "Deutsch",
-	"de-CH": "Deutsch (Schweiz)",
-	"el": "Griechisch",
-	"en-GB": "Englisch (Vereinigtes Königreich)",
-	"en-US": "Englisch (Vereinigte Staaten)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Englisch (Piraten)",
-	"en-x-updown": "Englisch (Kopfüber)",
-	"en-x-uwu": "Englisch (UwU)",
-	"eo": "Esperanto",
-	"es": "Spanisch",
-	"et": "Estnisch",
-	"fi": "Finnisch",
-	"fr": "Französisch",
-	"fr-BE": "Französisch (Belgien)",
-	"fr-CA": "Französisch (Kanada)",
-	"he": "Hebräisch",
-	"hi": "Hindi",
-	"hr": "Kroatisch",
-	"hu": "Ungarisch",
-	"id": "Indonesisch",
-	"it": "Italienisch",
-	"ja": "Japanisch",
-	"kk": "Kasachisch",
-	"ko": "Koreanisch",
-	"ky": "Kirgisisch",
-	"lt": "Litauisch",
-	"lv": "Lettisch",
-	"ms": "Malaiisch",
-	"nb": "Norwegisch, Bokmål",
-	"nl": "Niederländisch",
-	"nn": "Neues Norwegisch",
-	"pes": "Persisch",
-	"pl": "Polnisch",
-	"pt": "Portugiesisch",
-	"pt-BR": "Portugiesisch (Brasilien)",
-	"ro": "Rumänisch",
-	"ru": "Russisch",
-	"ru-x-bandit": "Russisch (Bandit)",
-	"sk": "Slowakisch",
-	"sv": "Schwedisch",
-	"th": "Thailändisch",
-	"tok": "Toki Pona",
-	"tr": "Türkisch",
-	"tt": "Tatarisch",
-	"uk": "Ukrainisch",
-	"vi": "Viernamesisch",
-	"zh-Hans": "Chinesisch (Vereinfacht)",
-	"zh-Hant": "Chinesisch (Traditionell)"
-}

apps/frontend/src/locales/de-DE/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabisch",
-	"be": "Belarussisch",
-	"bg": "Bulgarisch",
-	"bn": "Bengalisch",
-	"ca": "Katalanisch",
-	"cs": "Tschechisch",
-	"da": "Dänisch",
-	"de": "Deutsch",
-	"de-CH": "Deutsch (Schweiz)",
-	"el": "Griechisch",
-	"en-GB": "Englisch (Vereinigtes Königreich)",
-	"en-US": "Englisch (Vereinigte Staaten)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Englisch (Piraten)",
-	"en-x-updown": "Englisch (Kopfüber)",
-	"en-x-uwu": "Englisch (UwU)",
-	"eo": "Esperanto",
-	"es": "Spanisch",
-	"et": "Estnisch",
-	"fi": "Finnisch",
-	"fr": "Französisch",
-	"fr-BE": "Französisch (Belgien)",
-	"fr-CA": "Französisch (Kanada)",
-	"he": "Hebräisch",
-	"hi": "Hindi",
-	"hr": "Kroatisch",
-	"hu": "Ungarisch",
-	"id": "Indonesisch",
-	"it": "Italienisch",
-	"ja": "Japanisch",
-	"kk": "Kasachisch",
-	"ko": "Koreanisch",
-	"ky": "Kirgisisch",
-	"lt": "Litauisch",
-	"lv": "Lettisch",
-	"ms": "Malaiisch",
-	"nb": "Norwegisch Bokmål",
-	"nl": "Niederländisch",
-	"nn": "Norwegisch Nynorsk",
-	"pes": "Persisch",
-	"pl": "Polnisch",
-	"pt": "Portugiesisch",
-	"pt-BR": "Portugiesisch (Brasilien)",
-	"ro": "Rumänisch",
-	"ru": "Russisch",
-	"ru-x-bandit": "Russisch (Bandit)",
-	"sk": "Slowakisch",
-	"sv": "Schwedisch",
-	"th": "Thailändisch",
-	"tok": "Toki Pona",
-	"tr": "Türkisch",
-	"tt": "Tatarisch",
-	"uk": "Ukrainisch",
-	"vi": "Vietnamesisch",
-	"zh-Hans": "Chinesisch (Vereinfacht)",
-	"zh-Hant": "Chinesisch (Traditionell)"
-}

apps/frontend/src/locales/en-US/index.json

@@ -497,12 +497,27 @@
   "create.project.create-project": {
     "message": "Create project"
   },
+  "create.project.create-server-project": {
+    "message": "Create server"
+  },
+  "create.project.missing-fields-tooltip": {
+    "message": "Missing fields: {fields}"
+  },
   "create.project.name-label": {
     "message": "Name"
   },
   "create.project.name-placeholder": {
     "message": "Enter project name..."
   },
+  "create.project.owner-description": {
+    "message": "Set the project owner as yourself or an organization you're a member of."
+  },
+  "create.project.owner-label": {
+    "message": "Owner"
+  },
+  "create.project.server-project-title": {
+    "message": "Creating a server project"
+  },
   "create.project.summary-description": {
     "message": "A sentence or two that describes your project."
   },
@@ -515,6 +530,15 @@
   "create.project.title": {
     "message": "Creating a project"
   },
+  "create.project.type-label": {
+    "message": "Type"
+  },
+  "create.project.type-project": {
+    "message": "Project"
+  },
+  "create.project.type-server": {
+    "message": "Server"
+  },
   "create.project.url-label": {
     "message": "URL"
   },
@@ -1433,6 +1457,12 @@
   "layout.action.new-project": {
     "message": "New project"
   },
+  "layout.action.new-server-project": {
+    "message": "New server"
+  },
+  "layout.action.publish": {
+    "message": "Publish"
+  },
   "layout.action.reports": {
     "message": "Review reports"
   },
@@ -1763,9 +1793,6 @@
   "muralpay.field.bank-account-number": {
     "message": "Account number"
   },
-  "muralpay.field.branch-code": {
-    "message": "Branch code"
-  },
   "muralpay.field.clabe": {
     "message": "CLABE"
   },
@@ -1796,6 +1823,9 @@
   "muralpay.field.pix-phone": {
     "message": "PIX phone"
   },
+  "muralpay.field.random-key": {
+    "message": "Random key"
+  },
   "muralpay.field.routing-number": {
     "message": "Routing number"
   },
@@ -1856,9 +1886,6 @@
   "muralpay.placeholder.enter-account-number": {
     "message": "Enter account number"
   },
-  "muralpay.placeholder.enter-branch-code": {
-    "message": "Enter branch code"
-  },
   "muralpay.placeholder.enter-clabe": {
     "message": "Enter 18-digit CLABE"
   },
@@ -1871,6 +1898,9 @@
   "muralpay.placeholder.enter-pix-email": {
     "message": "Enter PIX email"
   },
+  "muralpay.placeholder.enter-random-key": {
+    "message": "Enter random key"
+  },
   "muralpay.placeholder.enter-routing-number": {
     "message": "Enter 9-digit routing number"
   },
@@ -2102,6 +2132,12 @@
   "project-type.datapack.singular": {
     "message": "Data Pack"
   },
+  "project-type.minecraft_java_server.plural": {
+    "message": "Servers"
+  },
+  "project-type.minecraft_java_server.singular": {
+    "message": "Server"
+  },
   "project-type.mod.plural": {
     "message": "Mods"
   },
@@ -2132,6 +2168,12 @@
   "project-type.resourcepack.singular": {
     "message": "Resource Pack"
   },
+  "project-type.server.plural": {
+    "message": "Servers"
+  },
+  "project-type.server.singular": {
+    "message": "Server"
+  },
   "project-type.shader.plural": {
     "message": "Shaders"
   },
@@ -2954,6 +2996,9 @@
   "settings.display.project-list-layouts.resourcepack": {
     "message": "Resource Packs page"
   },
+  "settings.display.project-list-layouts.server": {
+    "message": "Servers page"
+  },
   "settings.display.project-list-layouts.shader": {
     "message": "Shaders page"
   },

apps/frontend/src/locales/en-US/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabic",
-	"be": "Belarusian",
-	"bg": "Bulgarian",
-	"bn": "Bangla",
-	"ca": "Catalan",
-	"cs": "Czech",
-	"da": "Danish",
-	"de": "German",
-	"de-CH": "German (Switzerland)",
-	"el": "Greek",
-	"en-GB": "English (United Kingdom)",
-	"en-US": "English (United States)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "English (Pirate)",
-	"en-x-updown": "English (Upside down)",
-	"en-x-uwu": "English (UwU)",
-	"eo": "Esperanto",
-	"es": "Spanish",
-	"et": "Estonian",
-	"fi": "Finnish",
-	"fr": "French",
-	"fr-BE": "French (Belgium)",
-	"fr-CA": "French (Canada)",
-	"he": "Hebrew",
-	"hi": "Hindi",
-	"hr": "Croatian",
-	"hu": "Hungarian",
-	"id": "Indonesian",
-	"it": "Italian",
-	"ja": "Japanese",
-	"kk": "Kazakh",
-	"ko": "Korean",
-	"ky": "Kyrgyz",
-	"lt": "Lithuanian",
-	"lv": "Latvian",
-	"ms": "Malay",
-	"nb": "Norwegian Bokmål",
-	"nl": "Dutch",
-	"nn": "Norwegian Nynorsk",
-	"pes": "Persian",
-	"pl": "Polish",
-	"pt": "Portuguese",
-	"pt-BR": "Portuguese (Brazil)",
-	"ro": "Romanian",
-	"ru": "Russian",
-	"ru-x-bandit": "Russian (Bandit)",
-	"sk": "Slovak",
-	"sv": "Swedish",
-	"th": "Thai",
-	"tok": "Toki Pona",
-	"tr": "Turkish",
-	"tt": "Tatar",
-	"uk": "Ukrainian",
-	"vi": "Vietnamese",
-	"zh-Hans": "Chinese (Simplified)",
-	"zh-Hant": "Chinese (Traditional)"
-}

apps/frontend/src/locales/es-419/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Árabe",
-	"be": "Bielorruso",
-	"bg": "Búlgaro",
-	"bn": "Bengalí",
-	"ca": "Catalán",
-	"cs": "Checo",
-	"da": "Danés",
-	"de": "Alemán",
-	"de-CH": "Alemán (Suiza)",
-	"el": "Griego",
-	"en-GB": "Inglés (Reino Unido)",
-	"en-US": "Inglés (Estados Unidos)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Inglés (Pirata)",
-	"en-x-updown": "Inglés (Al revés)",
-	"en-x-uwu": "Inglés (UwU)",
-	"eo": "Esperanto",
-	"es": "Español",
-	"et": "Estonio",
-	"fi": "Finlandés",
-	"fr": "Francés",
-	"fr-BE": "Francés (Bélgica)",
-	"fr-CA": "Francés (Canadá)",
-	"he": "Hebreo",
-	"hi": "Hindi",
-	"hr": "Croata",
-	"hu": "Húngaro",
-	"id": "Indonesio",
-	"it": "Italiano",
-	"ja": "Japonés",
-	"kk": "Kazajo",
-	"ko": "Coreano",
-	"ky": "Kirguís",
-	"lt": "Lituano",
-	"lv": "Letón",
-	"ms": "Malayo",
-	"nb": "Noruego bokmål",
-	"nl": "Holandés",
-	"nn": "Nynorsk noruego",
-	"pes": "Persa",
-	"pl": "Polaco",
-	"pt": "Portugués",
-	"pt-BR": "Portugués (Brasil)",
-	"ro": "Rumano",
-	"ru": "Ruso",
-	"ru-x-bandit": "Ruso",
-	"sk": "Eslovaco",
-	"sv": "Sueco",
-	"th": "Tailandés",
-	"tok": "Toki Pona",
-	"tr": "Turco",
-	"tt": "Tártaro",
-	"uk": "Ucraniano",
-	"vi": "Vietnamita",
-	"zh-Hans": "Chino (Simplificado)",
-	"zh-Hant": "Chino (Tradicional)"
-}

apps/frontend/src/locales/es-ES/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Árabe",
-	"be": "Bielorruso",
-	"bg": "Búlgaro",
-	"bn": "Bengalí",
-	"ca": "Catalán",
-	"cs": "Checo",
-	"da": "Danés",
-	"de": "Alemán",
-	"de-CH": "Alemán (Suiza)",
-	"el": "Griego",
-	"en-GB": "Inglés (Reino Unido)",
-	"en-US": "Inglés (Estados Unidos)",
-	"en-x-lolcat": "Gatuno",
-	"en-x-pirate": "Inglés (Pirata)",
-	"en-x-updown": "Inglés (Al revés)",
-	"en-x-uwu": "Inglés (UwU)",
-	"eo": "Esperanto",
-	"es": "Español",
-	"et": "Estonio",
-	"fi": "Finlandés",
-	"fr": "Francés",
-	"fr-BE": "Francés (Bélgica)",
-	"fr-CA": "Francés (Canadá)",
-	"he": "Hebreo",
-	"hi": "Hindi",
-	"hr": "Croata",
-	"hu": "Húngaro",
-	"id": "Indonesio",
-	"it": "Italiano",
-	"ja": "Japonés",
-	"kk": "Kazajo",
-	"ko": "Coreano",
-	"ky": "Kirguís",
-	"lt": "Lituano",
-	"lv": "Letón",
-	"ms": "Malayo",
-	"nb": "Noruego Estándar",
-	"nl": "Holandés",
-	"nn": "Noruego Nuevo",
-	"pes": "Persa",
-	"pl": "Polaco",
-	"pt": "Portugués",
-	"pt-BR": "Portugués (Brasil)",
-	"ro": "Rumano",
-	"ru": "Ruso",
-	"ru-x-bandit": "Ruso (Bandido)",
-	"sk": "Eslovaco",
-	"sv": "Sueco",
-	"th": "Tailandés",
-	"tok": "Lenguaje Simple",
-	"tr": "Turco",
-	"tt": "Tártaro",
-	"uk": "Ucraniano",
-	"vi": "Vietnamita",
-	"zh-Hans": "Chino (Simplificado)",
-	"zh-Hant": "Chino (Tradicional)"
-}

apps/frontend/src/locales/fi-FI/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabia",
-	"be": "Valkovenäjä",
-	"bg": "Bulgaria",
-	"bn": "Bangla",
-	"ca": "Katalaani",
-	"cs": "Tšekki",
-	"da": "Tanska",
-	"de": "Saksa",
-	"de-CH": "Saksa (Sveitsi)",
-	"el": "Kreikka",
-	"en-GB": "Englanti (Yhdistynyt Kuningaskunta)",
-	"en-US": "Englanti (Yhdysvallat)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Englanti (Merirosvo)",
-	"en-x-updown": "Englanti (ylösalaisin)",
-	"en-x-uwu": "Englanti (UwU)",
-	"eo": "Esperanto",
-	"es": "Espanja",
-	"et": "Viro",
-	"fi": "Suomi",
-	"fr": "Ranska",
-	"fr-BE": "Ranska (Belgia)",
-	"fr-CA": "Ranska (Kanada)",
-	"he": "Heprea",
-	"hi": "Hindi",
-	"hr": "Kroatia",
-	"hu": "Unkari",
-	"id": "Indonesia",
-	"it": "Italia",
-	"ja": "Japani",
-	"kk": "Kazakki",
-	"ko": "Korea",
-	"ky": "Kirgiisi",
-	"lt": "Liettua",
-	"lv": "Latvia",
-	"ms": "Malaiji",
-	"nb": "Norjan kirjakieli",
-	"nl": "Hollanti",
-	"nn": "Norja uusi",
-	"pes": "Persia",
-	"pl": "Puola",
-	"pt": "Portugali",
-	"pt-BR": "Portugali (Brasilia)",
-	"ro": "Romania",
-	"ru": "Venäjä",
-	"ru-x-bandit": "Venäjä (Bandit)",
-	"sk": "Slovakia",
-	"sv": "Ruotsi",
-	"th": "Thai",
-	"tok": "Toki Pona",
-	"tr": "Turkkilainen",
-	"tt": "Tataari",
-	"uk": "Ukraina",
-	"vi": "Vietnami",
-	"zh-Hans": "Kiina (yksinkertaistettu)",
-	"zh-Hant": "Kiina (Perinteinen)"
-}

apps/frontend/src/locales/fil-PH/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabo",
-	"be": "Biyeloruso",
-	"bg": "Bulgaro",
-	"bn": "Bangla",
-	"ca": "Katalan",
-	"cs": "Tseko",
-	"da": "Danes",
-	"de": "Jerman",
-	"de-CH": "Jerman (Suwisa)",
-	"el": "Griyego",
-	"en-GB": "Ingles (Reyno Unido)",
-	"en-US": "Ingles (Estados Unidos)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Ingles (Pirata)",
-	"en-x-updown": "Ingles (Tumbalik)",
-	"en-x-uwu": "Ingles (UwU)",
-	"eo": "Esperanto",
-	"es": "Espanyol",
-	"et": "Estonyo",
-	"fi": "Finlandes",
-	"fr": "Pranses",
-	"fr-BE": "Pranses (Belhika)",
-	"fr-CA": "Pranses (Canada)",
-	"he": "Hebreo",
-	"hi": "Hindi",
-	"hr": "Kroato",
-	"hu": "Ungaro",
-	"id": "Indones",
-	"it": "Italyano",
-	"ja": "Hapon",
-	"kk": "Kasaho",
-	"ko": "Koreano",
-	"ky": "Kirgis",
-	"lt": "Litwano",
-	"lv": "Latbiyano",
-	"ms": "Malayo",
-	"nb": "Norwegong Bokmål",
-	"nl": "Olandes",
-	"nn": "Norwegong Nynorsk",
-	"pes": "Persa",
-	"pl": "Polako",
-	"pt": "Portuges",
-	"pt-BR": "Portuges (Brasil)",
-	"ro": "Rumano",
-	"ru": "Ruso",
-	"ru-x-bandit": "Ruso (Bandido)",
-	"sk": "Eslobako",
-	"sv": "Suweko",
-	"th": "Taylandes",
-	"tok": "Toki Pona",
-	"tr": "Turko",
-	"tt": "Tartaro",
-	"uk": "Ukranyo",
-	"vi": "Biyetnamita",
-	"zh-Hans": "Tsino (Simple)",
-	"zh-Hant": "Tsino (Tradisyonal)"
-}

apps/frontend/src/locales/fr-FR/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabe",
-	"be": "Biélorusse",
-	"bg": "Bulgare",
-	"bn": "Bengali",
-	"ca": "Catalan",
-	"cs": "Tchèque",
-	"da": "Danois",
-	"de": "Allemand",
-	"de-CH": "Allemand (Suisse)",
-	"el": "Grec",
-	"en-GB": "Anglais (Royaume-Uni)",
-	"en-US": "Anglais (États-Unis)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Anglais (Pirate)",
-	"en-x-updown": "Anglais (À l'envers)",
-	"en-x-uwu": "Anglais (UwU)",
-	"eo": "Espéranto",
-	"es": "Espagnol",
-	"et": "Estonien",
-	"fi": "Finnois",
-	"fr": "Français",
-	"fr-BE": "Français (Belgique)",
-	"fr-CA": "Français (Canada)",
-	"he": "Hébreu",
-	"hi": "Hindi",
-	"hr": "Croate",
-	"hu": "Hongrois",
-	"id": "Indonésien",
-	"it": "Italien",
-	"ja": "Japonais",
-	"kk": "Kazakh",
-	"ko": "Coréen",
-	"ky": "Kirghize",
-	"lt": "Lituanien",
-	"lv": "Letton",
-	"ms": "Malais",
-	"nb": "Norvégien Bokmål",
-	"nl": "Néerlandais",
-	"nn": "Norvégien Nynorsk",
-	"pes": "Farsi",
-	"pl": "Polonais",
-	"pt": "Portugais",
-	"pt-BR": "Portugais (Brésil)",
-	"ro": "Roumain",
-	"ru": "Russe",
-	"ru-x-bandit": "Russe (Bandit)",
-	"sk": "Slovaque",
-	"sv": "Suédois",
-	"th": "Thaïlandais",
-	"tok": "Toki pona",
-	"tr": "Turc",
-	"tt": "Tatar",
-	"uk": "Ukrainien",
-	"vi": "Vietnamien",
-	"zh-Hans": "Chinois (simplifié)",
-	"zh-Hant": "Chinois (traditionnel)"
-}

apps/frontend/src/locales/he-IL/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "ערבית",
-	"be": "בלרוסית",
-	"bg": "בולגרית",
-	"bn": "בנגלית",
-	"ca": "קטלאנית",
-	"cs": "צ'כית",
-	"da": "דנית",
-	"de": "גרמנית",
-	"de-CH": "גרמנית (שווייץ)",
-	"el": "יוונית",
-	"en-GB": "אנגלית (בריטניה)",
-	"en-US": "אנגלית (ארצות הברית)",
-	"en-x-lolcat": "חתולול",
-	"en-x-pirate": "אנגלית (פיראטים)",
-	"en-x-updown": "אנגלית (הפוכה)",
-	"en-x-uwu": "אנגלית (UwU)",
-	"eo": "אספרנטו",
-	"es": "ספרדית",
-	"et": "אסטונית",
-	"fi": "פינית",
-	"fr": "צרפתית",
-	"fr-BE": "צרפתית (בלגיה)",
-	"fr-CA": "צרפתית (קנדה)",
-	"he": "עברית",
-	"hi": "הודית",
-	"hr": "קרואטית",
-	"hu": "הונגרית",
-	"id": "אינדונזית",
-	"it": "איטלקית",
-	"ja": "יפנית",
-	"kk": "קזחית",
-	"ko": "קוריאנית",
-	"ky": "קירגיזית",
-	"lt": "ליטאית",
-	"lv": "לטבית",
-	"ms": "מלאית",
-	"nb": "נורבגית ספרותית",
-	"nl": "הולנדית",
-	"nn": "נורבגית נינורשק",
-	"pes": "פרסית",
-	"pl": "פולנית",
-	"pt": "פורטוגזית",
-	"pt-BR": "פורטוגזית (ברזיל)",
-	"ro": "רומנית",
-	"ru": "רוסית",
-	"ru-x-bandit": "רוסית (בנדיט)",
-	"sk": "סלובקית",
-	"sv": "שוודית",
-	"th": "תאילנדית",
-	"tok": "טוקי פונה",
-	"tr": "טורקית",
-	"tt": "טטרית",
-	"uk": "אוקראינית",
-	"vi": "ויאטנמית",
-	"zh-Hans": "סינית (פשוטה)",
-	"zh-Hant": "סינית (מסורתית)"
-}

apps/frontend/src/locales/hu-HU/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arab",
-	"be": "Fehérorosz",
-	"bg": "Bolgár",
-	"bn": "Bengáli",
-	"ca": "Katalán",
-	"cs": "Cseh",
-	"da": "Dán",
-	"de": "Német",
-	"de-CH": "Német (Svájc)",
-	"el": "Görög",
-	"en-GB": "Angol (Egyesült Királyság)",
-	"en-US": "Angol (Egyesült Államok)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Angol (Kalóz)",
-	"en-x-updown": "Angol (fejjel lefelé)",
-	"en-x-uwu": "Angol (UwU)",
-	"eo": "Eszperantó",
-	"es": "Spanyol",
-	"et": "Észt",
-	"fi": "Finn",
-	"fr": "Francia",
-	"fr-BE": "Francia (Belgium)",
-	"fr-CA": "Francia (Kanada)",
-	"he": "Héber",
-	"hi": "Hindi",
-	"hr": "Horvát",
-	"hu": "Magyar",
-	"id": "Indonéz",
-	"it": "Olasz",
-	"ja": "Japán",
-	"kk": "Kazak",
-	"ko": "Koreai",
-	"ky": "Kirgiz",
-	"lt": "Litván",
-	"lv": "Lett",
-	"ms": "Maláj",
-	"nb": "Norvég Bokmál",
-	"nl": "Holland",
-	"nn": "Norvég nynorsk",
-	"pes": "Perzsa",
-	"pl": "Lengyel",
-	"pt": "Portugál",
-	"pt-BR": "Portugál (Brazília)",
-	"ro": "Román",
-	"ru": "Orosz",
-	"ru-x-bandit": "Orosz (Bandita)",
-	"sk": "Szlovák",
-	"sv": "Svéd",
-	"th": "Thai",
-	"tok": "Toki Pona",
-	"tr": "Török",
-	"tt": "Tatár",
-	"uk": "Ukrán",
-	"vi": "Vietnámi",
-	"zh-Hans": "Kínai (Egyszerűsített)",
-	"zh-Hant": "Kínai (Hagyományos)"
-}

apps/frontend/src/locales/id-ID/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Bahasa Arab",
-	"be": "Bahasa Belarusia",
-	"bg": "Bahasa Bulgaria",
-	"bn": "Bahasa Bengali",
-	"ca": "Bahasa Katalan",
-	"cs": "Bahasa Ceko",
-	"da": "Bahasa Denmark",
-	"de": "Bahasa Jerman",
-	"de-CH": "Bahasa Jerman (Swiss)",
-	"el": "Bahasa Yunani",
-	"en-GB": "Bahasa Inggris (Britania Raya)",
-	"en-US": "Bahasa Inggris (Amerika Serikat)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Bahasa Inggris (Bajak Laut)",
-	"en-x-updown": "Bahasa Inggris (Terbalik)",
-	"en-x-uwu": "Bahasa Inggris (UwU)",
-	"eo": "Bahasa Esperanto",
-	"es": "Bahasa Spanyol",
-	"et": "Bahasa Estonia",
-	"fi": "Bahasa Finlandia",
-	"fr": "Bahasa Prancis",
-	"fr-BE": "Bahasa Prancis (Belgia)",
-	"fr-CA": "Bahasa Prancis (Kanada)",
-	"he": "Bahasa Ibrani",
-	"hi": "Bahasa Hindi",
-	"hr": "Bahasa Kroasia",
-	"hu": "Bahasa Hungaria",
-	"id": "Bahasa Indonesia",
-	"it": "Bahasa Italia",
-	"ja": "Bahasa Jepang",
-	"kk": "Bahasa Kazak",
-	"ko": "Bahasa Korea",
-	"ky": "Bahasa Kirgiz",
-	"lt": "Bahasa Lituania",
-	"lv": "Bahasa Latvia",
-	"ms": "Bahasa Melayu",
-	"nb": "Bahasa Norwegia (Bokmål)",
-	"nl": "Bahasa Belanda",
-	"nn": "Bahasa Norwegia (Nynorsk)",
-	"pes": "Bahasa Persia",
-	"pl": "Bahasa Polandia",
-	"pt": "Bahasa Portugis",
-	"pt-BR": "Bahasa Portugis (Brasil)",
-	"ro": "Bahasa Rumania",
-	"ru": "Bahasa Rusia",
-	"ru-x-bandit": "Bahasa Rusia (Bandit)",
-	"sk": "Bahasa Slowakia",
-	"sv": "Bahasa Swedia",
-	"th": "Bahasa Thai",
-	"tok": "Bahasa Toki Pona",
-	"tr": "Bahasa Turki",
-	"tt": "Bahasa Tatar",
-	"uk": "Bahasa Ukraina",
-	"vi": "Bahasa Vietnam",
-	"zh-Hans": "Bahasa China (Aksara Sederhana)",
-	"zh-Hant": "Bahasa China (Aksara Tradisional)"
-}

apps/frontend/src/locales/it-IT/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "Arabo",
-	"be": "Bielorusso",
-	"bg": "Bulgaro",
-	"bn": "Bengalese",
-	"ca": "Catalano",
-	"cs": "Ceco",
-	"da": "Danese",
-	"de": "Tedesco",
-	"de-CH": "Tedesco (Svizzera)",
-	"el": "Greco",
-	"en-GB": "Inglese (Regno Unito)",
-	"en-US": "Inglese (Stati Uniti)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "Inglese (Pirata)",
-	"en-x-updown": "Inglese (Capovolto)",
-	"en-x-uwu": "Inglese (UwU)",
-	"eo": "Esperanto",
-	"es": "Spagnolo",
-	"et": "Estone",
-	"fi": "Finlandese",
-	"fr": "Francese",
-	"fr-BE": "Francese (Belgio)",
-	"fr-CA": "Francese (Canada)",
-	"he": "Ebraico",
-	"hi": "Hindi",
-	"hr": "Croato",
-	"hu": "Ungherese",
-	"id": "Indonesiano",
-	"it": "Italiano",
-	"ja": "Giapponese",
-	"kk": "Kazako",
-	"ko": "Coreano",
-	"ky": "Kirghiso",
-	"lt": "Lituano",
-	"lv": "Lettone",
-	"ms": "Malese",
-	"nb": "Norvegese Bokmål",
-	"nl": "Olandese",
-	"nn": "Norvegese Nynorsk",
-	"pes": "Persiano",
-	"pl": "Polacco",
-	"pt": "Portoghese",
-	"pt-BR": "Portoghese (Brasile)",
-	"ro": "Rumeno",
-	"ru": "Russo",
-	"ru-x-bandit": "Russo (Bandit)",
-	"sk": "Slovacco",
-	"sv": "Svedese",
-	"th": "Thailandese",
-	"tok": "Toki Pona",
-	"tr": "Turco",
-	"tt": "Tataro",
-	"uk": "Ucraino",
-	"vi": "Vietnamita",
-	"zh-Hans": "Cinese (Semplificato)",
-	"zh-Hant": "Cinese (Tradizionale)"
-}

apps/frontend/src/locales/ja-JP/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "アラビア語",
-	"be": "ベラルーシ語",
-	"bg": "ブルガリア語",
-	"bn": "ベンガル語",
-	"ca": "カタルーニャ語",
-	"cs": "チェコ語",
-	"da": "デンマーク語",
-	"de": "ドイツ語",
-	"de-CH": "ドイツ語 (スイス)",
-	"el": "ギリシャ語",
-	"en-GB": "英語 (イギリス)",
-	"en-US": "英語 (アメリカ)",
-	"en-x-lolcat": "ロルキャット語",
-	"en-x-pirate": "英語 (海賊)",
-	"en-x-updown": "英語 (上下逆)",
-	"en-x-uwu": "英語 (UwU)",
-	"eo": "エスペラント",
-	"es": "スペイン語",
-	"et": "エストニア語",
-	"fi": "フィンランド語",
-	"fr": "フランス語",
-	"fr-BE": "フランス語 (ベルギー)",
-	"fr-CA": "フランス語 (カナダ)",
-	"he": "ヘブライ語",
-	"hi": "ヒンディー語",
-	"hr": "クロアチア語",
-	"hu": "ハンガリー語",
-	"id": "インドネシア語",
-	"it": "イタリア語",
-	"ja": "日本語",
-	"kk": "カザフ語",
-	"ko": "韓国語",
-	"ky": "キルギス語",
-	"lt": "リトアニア語",
-	"lv": "ラトビア語",
-	"ms": "マレー語",
-	"nb": "ノルウェー語 (ブークモール)",
-	"nl": "オランダ語",
-	"nn": "ノルウェー語 (ニーノシュク)",
-	"pes": "ペルシャ語",
-	"pl": "ポーランド語",
-	"pt": "ポルトガル語",
-	"pt-BR": "ポルトガル語 (ブラジル)",
-	"ro": "ルーマニア語",
-	"ru": "ロシア語",
-	"ru-x-bandit": "ロシア語 (ギャング)",
-	"sk": "スロバキア語",
-	"sv": "スウェーデン語",
-	"th": "タイ語",
-	"tok": "トキポナ",
-	"tr": "トルコ語",
-	"tt": "タタール語",
-	"uk": "ウクライナ語",
-	"vi": "ベトナム語",
-	"zh-Hans": "中国語 (簡体字)",
-	"zh-Hant": "中国語 (繁体字)"
-}

apps/frontend/src/locales/ko-KR/languages.json

@@ -1,58 +0,0 @@
-{
-	"ar": "아랍어",
-	"be": "벨라루스어",
-	"bg": "불가리아어",
-	"bn": "벵골어",
-	"ca": "카탈루냐어",
-	"cs": "체코어",
-	"da": "덴마크어",
-	"de": "독일어",
-	"de-CH": "독일어 (스위스)",
-	"el": "그리스어",
-	"en-GB": "영어 (영국)",
-	"en-US": "영어 (미국)",
-	"en-x-lolcat": "LOLCAT",
-	"en-x-pirate": "영어 (해적)",
-	"en-x-updown": "영어 (거꾸로)",
-	"en-x-uwu": "영어 (UwU)",
-	"eo": "에스페란토",
-	"es": "스페인어",
-	"et": "에스토니아어",
-	"fi": "핀란드어",
-	"fr": "프랑스어",
-	"fr-BE": "프랑스어 (벨기에)",
-	"fr-CA": "프랑스어 (캐나다)",
-	"he": "히브리어",
-	"hi": "힌디어",
-	"hr": "크로아티아어",
-	"hu": "헝가리어",
-	"id": "인도네시아어",
-	"it": "이탈리아어",
-	"ja": "일본어",
-	"kk": "카자흐어",
-	"ko": "한국어",
-	"ky": "키르기스어",
-	"lt": "리투아니아어",
-	"lv": "라트비아어",
-	"ms": "말레이어",
-	"nb": "노르웨이어 보크몰",
-	"nl": "네덜란드어",
-	"nn": "노르웨이어 뉘노르스크",
-	"pes": "페르시아어",
-	"pl": "폴란드어",
-	"pt": "포르투갈어",
-	"pt-BR": "포르투갈어 (브라질)",
-	"ro": "루마니아어",
-	"ru": "러시아어",
-	"ru-x-bandit": "러시아어 (구어)",
-	"sk": "슬로바키아어",
-	"sv": "스웨덴어",
-	"th": "태국어",
-	"tok": "도기 보나",
-	"tr": "튀르키예어",
-	"tt": "타타르어",
-	"uk": "우크라이나어",
-	"vi": "베트남어",
-	"zh-Hans": "중국어 (간체)",
-	"zh-Hant": "중국어 (번체)"
-}