feat: start of cross platform page system (#4731)

* feat: abstract api-client DI into ui package * feat: cross platform page system * feat: tanstack as cross platform useAsyncData * feat: archon servers routes + labrinth billing routes * fix: dont use partial * feat: migrate server list page to tanstack + api-client + re-enabled broken features! * feat: migrate servers manage page to api-client before page system * feat: migrate manage page to page system * fix: type issues * fix: upgrade wrapper bugs * refactor: move state types into api-client * feat: disable financial stuff on app frontend * feat: finalize cross platform page system for now * fix: lint * fix: build issues * feat: remove papaparse * fix: lint * fix: interface error --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
2025-11-14 17:15:09 +00:00
parent 26feaf753a
commit 7ccc32675b
79 changed files with 2631 additions and 1259 deletions
--- a/packages/ui/src/components/billing/ModalBasedServerPlan.vue
+++ b/packages/ui/src/components/billing/ModalBasedServerPlan.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { InfoIcon } from '@modrinth/assets'
 import { formatPrice } from '@modrinth/utils'
 import { type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { Menu } from 'floating-vue'
 import { computed, inject, type Ref } from 'vue'

-import { monthsInInterval, type ServerBillingInterval, type ServerPlan } from '../../utils/billing'
+import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
+import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import ServersSpecs from './ServersSpecs.vue'

 const props = withDefaults(
 	defineProps<{
-		plan: ServerPlan
+		plan: Labrinth.Billing.Internal.Product
 		title: MessageDescriptor
 		description: MessageDescriptor
 		buttonColor?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
@@ -25,7 +27,7 @@ const props = withDefaults(
 )

 const emit = defineEmits<{
-	(e: 'select', plan: ServerPlan): void
+	(e: 'select', plan: Labrinth.Billing.Internal.Product): void
 }>()

 const { formatMessage, locale } = useVIntl()
@@ -36,13 +38,23 @@ const currency = inject<string>('currency')

 const perMonth = computed(() => {
 	if (!props.plan || !currency || !selectedInterval?.value) return undefined
-	const total = props.plan.prices?.find((x) => x.currency_code === currency)?.prices?.intervals?.[
-		selectedInterval.value
-	]
+	const total = getPriceForInterval(props.plan, currency, selectedInterval.value)
 	if (!total) return undefined
 	return total / monthsInInterval[selectedInterval.value]
 })

+const planSpecs = computed(() => {
+	const metadata = props.plan.metadata
+	if (metadata.type === 'pyro' || metadata.type === 'medal') {
+		return {
+			ram: metadata.ram,
+			storage: metadata.storage,
+			cpu: metadata.cpu,
+		}
+	}
+	return null
+})
+
 const mostPopularStyle = computed(() => {
 	if (!props.mostPopular) return undefined
 	const style: Record<string, string> = {
@@ -121,11 +133,11 @@ const mostPopularStyle = computed(() => {
 					</template>

 					<template #popper>
-						<div class="w-fit rounded-md border border-contrast/10 p-3 shadow-lg">
+						<div v-if="planSpecs" class="w-fit rounded-md border border-contrast/10 p-3 shadow-lg">
 							<ServersSpecs
-								:ram="plan.metadata.ram!"
-								:storage="plan.metadata.storage!"
-								:cpus="plan.metadata.cpu!"
+								:ram="planSpecs.ram"
+								:storage="planSpecs.storage"
+								:cpus="planSpecs.cpu"
 							/>
 						</div>
 					</template>
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Archon, Labrinth } from '@modrinth/api-client'
 import {
 	CheckCircleIcon,
 	ChevronRightIcon,
@@ -7,23 +8,12 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
-import type { UserSubscription } from '@modrinth/utils'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'

 import { useStripe } from '../../composables/stripe'
 import { commonMessages } from '../../utils'
-import type {
-	CreatePaymentIntentRequest,
-	CreatePaymentIntentResponse,
-	ServerBillingInterval,
-	ServerPlan,
-	ServerRegion,
-	ServerStockRequest,
-	UpdatePaymentIntentRequest,
-	UpdatePaymentIntentResponse,
-} from '../../utils/billing'
 import { ButtonStyled } from '../index'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import NewModal from '../modal/NewModal.vue'
@@ -39,6 +29,9 @@ export type RegionPing = {
 	ping: number
 }

+// Type alias for billing interval that matches both the local and api-client types
+export type ServerBillingInterval = 'monthly' | 'quarterly' | 'yearly'
+
 const props = defineProps<{
 	publishableKey: string
 	returnUrl: string
@@ -46,23 +39,30 @@ const props = defineProps<{
 	customer: Stripe.Customer
 	currency: string
 	pings: RegionPing[]
-	regions: ServerRegion[]
-	availableProducts: ServerPlan[]
+	regions: Archon.Servers.v1.Region[]
+	availableProducts: Labrinth.Billing.Internal.Product[]
 	planStage?: boolean
-	existingPlan?: ServerPlan
-	existingSubscription?: UserSubscription
+	existingPlan?: Labrinth.Billing.Internal.Product
+	existingSubscription?: Labrinth.Billing.Internal.UserSubscription
 	refreshPaymentMethods: () => Promise<void>
-	fetchStock: (region: ServerRegion, request: ServerStockRequest) => Promise<number>
+	fetchStock: (
+		region: Archon.Servers.v1.Region,
+		request: Archon.Servers.v0.StockRequest,
+	) => Promise<number>
 	initiatePayment: (
-		body: CreatePaymentIntentRequest | UpdatePaymentIntentRequest,
-	) => Promise<UpdatePaymentIntentResponse | CreatePaymentIntentResponse | null>
+		body: Labrinth.Billing.Internal.InitiatePaymentRequest,
+	) => Promise<
+		| Labrinth.Billing.Internal.InitiatePaymentResponse
+		| Labrinth.Billing.Internal.EditSubscriptionResponse
+		| null
+	>
 	onError: (err: Error) => void
 	onFinalizeNoPaymentChange?: () => Promise<void>
 	affiliateCode?: string | null
 }>()

 const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
-const selectedPlan = ref<ServerPlan>()
+const selectedPlan = ref<Labrinth.Billing.Internal.Product>()
 const selectedInterval = ref<ServerBillingInterval>('quarterly')
 const loading = ref(false)
 const selectedRegion = ref<string>()
@@ -237,7 +237,7 @@ watch(selectedPlan, () => {
 	}
 })

-const defaultPlan = computed<ServerPlan | undefined>(() => {
+const defaultPlan = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
 	return (
 		props.availableProducts.find((p) => p?.metadata?.type === 'pyro' && p.metadata.ram === 6144) ??
 		props.availableProducts.find((p) => p?.metadata?.type === 'pyro') ??
@@ -245,7 +245,11 @@ const defaultPlan = computed<ServerPlan | undefined>(() => {
 	)
 })

-function begin(interval: ServerBillingInterval, plan?: ServerPlan, project?: string) {
+function begin(
+	interval: ServerBillingInterval,
+	plan?: Labrinth.Billing.Internal.Product | null,
+	project?: string,
+) {
 	loading.value = false

 	if (plan === null) {
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -552,7 +552,7 @@ import Checkbox from '../base/Checkbox.vue'
 import Slider from '../base/Slider.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import NewModal from '../modal/NewModal.vue'
-import LoaderIcon from '../servers/LoaderIcon.vue'
+import LoaderIcon from '../servers/icons/LoaderIcon.vue'

 const { locale, formatMessage } = useVIntl()

--- a/packages/ui/src/components/billing/ServersPurchase0Plan.vue
+++ b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { formatPrice } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, provide } from 'vue'

-import { monthsInInterval, type ServerBillingInterval, type ServerPlan } from '../../utils/billing'
+import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import OptionGroup from '../base/OptionGroup.vue'
 import ModalBasedServerPlan from './ModalBasedServerPlan.vue'
+import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'

 const { formatMessage, locale } = useVIntl()

 const props = defineProps<{
-	availableProducts: ServerPlan[]
+	availableProducts: Labrinth.Billing.Internal.Product[]
 	currency: string
-	existingPlan?: ServerPlan
+	existingPlan?: Labrinth.Billing.Internal.Product
 }>()

 const availableBillingIntervals = ['monthly', 'quarterly']

-const selectedPlan = defineModel<ServerPlan>('plan')
+const selectedPlan = defineModel<Labrinth.Billing.Internal.Product>('plan')
 const selectedInterval = defineModel<ServerBillingInterval>('interval')
 const emit = defineEmits<{
 	(e: 'choose-custom'): void
@@ -75,7 +77,10 @@ const isSameAsExistingPlan = computed(() => {
 })

 const plansByRam = computed(() => {
-	const byName: Record<'small' | 'medium' | 'large', ServerPlan | undefined> = {
+	const byName: Record<
+		'small' | 'medium' | 'large',
+		Labrinth.Billing.Internal.Product | undefined
+	> = {
 		small: undefined,
 		medium: undefined,
 		large: undefined,
@@ -93,13 +98,11 @@ function handleCustomPlan() {
 	emit('choose-custom')
 }

-function pricePerMonth(plan?: ServerPlan) {
-	if (!plan) return undefined
-	const total = plan.prices?.find((x) => x.currency_code === props.currency)?.prices?.intervals?.[
-		selectedInterval.value!
-	]
+function pricePerMonth(plan?: Labrinth.Billing.Internal.Product) {
+	if (!plan || !selectedInterval.value) return undefined
+	const total = getPriceForInterval(plan, props.currency, selectedInterval.value)
 	if (!total) return undefined
-	return total / monthsInInterval[selectedInterval.value!]
+	return total / monthsInInterval[selectedInterval.value]
 }

 const customPricePerGb = computed(() => {
@@ -107,7 +110,9 @@ const customPricePerGb = computed(() => {
 	let min: number | undefined
 	for (const p of props.availableProducts) {
 		const perMonth = pricePerMonth(p)
-		const ramGb = (p?.metadata?.ram ?? 0) / 1024
+		const metadata = p?.metadata
+		if (!metadata || (metadata.type !== 'pyro' && metadata.type !== 'medal')) continue
+		const ramGb = metadata.ram / 1024
 		if (perMonth && ramGb > 0) {
 			const perGb = perMonth / ramGb
 			if (min === undefined || perGb < min) min = perGb
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -1,44 +1,42 @@
 <script setup lang="ts">
+import type { Archon, Labrinth } from '@modrinth/api-client'
 import { InfoIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 import { computed, onMounted, ref, watch } from 'vue'

 import { formatPrice } from '../../../../utils'
-import {
-	monthsInInterval,
-	type ServerBillingInterval,
-	type ServerPlan,
-	type ServerRegion,
-	type ServerStockRequest,
-} from '../../utils/billing'
+import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils.ts'
 import { regionOverrides } from '../../utils/regions.ts'
 import Slider from '../base/Slider.vue'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
-import type { RegionPing } from './ModrinthServersPurchaseModal.vue'
+import type { RegionPing, ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import ServersRegionButton from './ServersRegionButton.vue'
 import ServersSpecs from './ServersSpecs.vue'

 const { formatMessage, locale } = useVIntl()

 const props = defineProps<{
-	regions: ServerRegion[]
+	regions: Archon.Servers.v1.Region[]
 	pings: RegionPing[]
-	fetchStock: (region: ServerRegion, request: ServerStockRequest) => Promise<number>
+	fetchStock: (
+		region: Archon.Servers.v1.Region,
+		request: Archon.Servers.v0.StockRequest,
+	) => Promise<number>
 	custom: boolean
 	currency: string
 	interval: ServerBillingInterval
-	availableProducts: ServerPlan[]
+	availableProducts: Labrinth.Billing.Internal.Product[]
 }>()

 const loading = ref(true)
 const checkingCustomStock = ref(false)
-const selectedPlan = defineModel<ServerPlan>('plan')
+const selectedPlan = defineModel<Labrinth.Billing.Internal.Product>('plan')
 const selectedRegion = defineModel<string>('region')

 const selectedPrice = computed(() => {
-	const amount = selectedPlan.value?.prices?.find((price) => price.currency_code === props.currency)
-		?.prices?.intervals?.[props.interval]
+	if (!selectedPlan.value) return undefined
+	const amount = getPriceForInterval(selectedPlan.value, props.currency, props.interval)
 	return amount ? amount / monthsInInterval[props.interval] : undefined
 })

@@ -67,7 +65,13 @@ const selectedRam = ref<number>(-1)

 const ramOptions = computed(() => {
 	return props.availableProducts
-		.map((product) => (product.metadata.ram ?? 0) / 1024)
+		.map((product) => {
+			const metadata = product.metadata
+			if (metadata.type === 'pyro' || metadata.type === 'medal') {
+				return metadata.ram / 1024
+			}
+			return 0
+		})
 		.filter((x) => x > 0)
 })

@@ -80,38 +84,63 @@ const maxRam = computed(() => {

 const lowestProduct = computed(() => {
 	return (
-		props.availableProducts.find(
-			(product) => (product.metadata.ram ?? 0) / 1024 === minRam.value,
-		) ?? props.availableProducts[0]
+		props.availableProducts.find((product) => {
+			const metadata = product.metadata
+			return (
+				(metadata.type === 'pyro' || metadata.type === 'medal') &&
+				metadata.ram / 1024 === minRam.value
+			)
+		}) ?? props.availableProducts[0]
 	)
 })

+const selectedPlanSpecs = computed(() => {
+	if (!selectedPlan.value) return null
+	const metadata = selectedPlan.value.metadata
+	if (metadata.type === 'pyro' || metadata.type === 'medal') {
+		return {
+			ram: metadata.ram,
+			storage: metadata.storage,
+			cpu: metadata.cpu,
+		}
+	}
+	return null
+})
+
 function updateRamStock(regionToCheck: string, newRam: number) {
 	if (newRam > 0) {
 		checkingCustomStock.value = true
-		const plan = props.availableProducts.find(
-			(product) => (product.metadata.ram ?? 0) / 1024 === newRam,
-		)
+		const plan = props.availableProducts.find((product) => {
+			const metadata = product.metadata
+			return (
+				(metadata.type === 'pyro' || metadata.type === 'medal') && metadata.ram / 1024 === newRam
+			)
+		})
 		if (plan) {
 			const region = sortedRegions.value.find((region) => region.shortcode === regionToCheck)
 			if (region) {
-				props
-					.fetchStock(region, {
-						cpu: plan.metadata.cpu ?? 0,
-						memory_mb: plan.metadata.ram ?? 0,
-						swap_mb: plan.metadata.swap ?? 0,
-						storage_mb: plan.metadata.storage ?? 0,
-					})
-					.then((stock: number) => {
-						if (stock > 0) {
-							selectedPlan.value = plan
-						} else {
-							selectedPlan.value = undefined
-						}
-					})
-					.finally(() => {
-						checkingCustomStock.value = false
-					})
+				const metadata = plan.metadata
+				if (metadata.type === 'pyro' || metadata.type === 'medal') {
+					props
+						.fetchStock(region, {
+							cpu: metadata.cpu,
+							memory_mb: metadata.ram,
+							swap_mb: metadata.swap,
+							storage_mb: metadata.storage,
+						})
+						.then((stock: number) => {
+							if (stock > 0) {
+								selectedPlan.value = plan
+							} else {
+								selectedPlan.value = undefined
+							}
+						})
+						.finally(() => {
+							checkingCustomStock.value = false
+						})
+				} else {
+					checkingCustomStock.value = false
+				}
 			} else {
 				checkingCustomStock.value = false
 			}
@@ -151,22 +180,28 @@ const messages = defineMessages({

 async function updateStock() {
 	currentStock.value = {}
+
+	const getStockRequest = (
+		product: Labrinth.Billing.Internal.Product,
+	): Archon.Servers.v0.StockRequest => {
+		const metadata = product.metadata
+		if (metadata.type === 'pyro' || metadata.type === 'medal') {
+			return {
+				cpu: metadata.cpu,
+				memory_mb: metadata.ram,
+				swap_mb: metadata.swap,
+				storage_mb: metadata.storage,
+			}
+		}
+		return { cpu: 0, memory_mb: 0, swap_mb: 0, storage_mb: 0 }
+	}
+
 	const capacityChecks = sortedRegions.value.map((region) =>
 		props.fetchStock(
 			region,
 			selectedPlan.value
-				? {
-						cpu: selectedPlan.value?.metadata.cpu ?? 0,
-						memory_mb: selectedPlan.value?.metadata.ram ?? 0,
-						swap_mb: selectedPlan.value?.metadata.swap ?? 0,
-						storage_mb: selectedPlan.value?.metadata.storage ?? 0,
-					}
-				: {
-						cpu: lowestProduct.value.metadata.cpu ?? 0,
-						memory_mb: lowestProduct.value.metadata.ram ?? 0,
-						swap_mb: lowestProduct.value.metadata.swap ?? 0,
-						storage_mb: lowestProduct.value.metadata.storage ?? 0,
-					},
+				? getStockRequest(selectedPlan.value)
+				: getStockRequest(lowestProduct.value),
 		),
 	)
 	const results = await Promise.all(capacityChecks)
@@ -255,12 +290,12 @@ onMounted(() => {
 					<div v-if="checkingCustomStock" class="flex gap-2 items-center">
 						<SpinnerIcon class="size-5 shrink-0 animate-spin" /> Checking availability...
 					</div>
-					<div v-else-if="selectedPlan">
+					<div v-else-if="selectedPlanSpecs">
 						<ServersSpecs
 							class="!flex-row justify-between"
-							:ram="selectedPlan.metadata.ram ?? 0"
-							:storage="selectedPlan.metadata.storage ?? 0"
-							:cpus="selectedPlan.metadata.cpu ?? 0"
+							:ram="selectedPlanSpecs.ram"
+							:storage="selectedPlanSpecs.storage"
+							:cpus="selectedPlanSpecs.cpu"
 						/>
 					</div>
 					<div v-else class="flex gap-2 items-center">
--- a/packages/ui/src/components/billing/ServersPurchase3Review.vue
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Archon, Labrinth } from '@modrinth/api-client'
 import {
 	EditIcon,
 	ExternalIcon,
@@ -9,18 +10,13 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { formatPrice, getPingLevel, type UserSubscription } from '@modrinth/utils'
+import { formatPrice, getPingLevel } from '@modrinth/utils'
 import { useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import type Stripe from 'stripe'
 import { computed } from 'vue'

-import {
-	monthsInInterval,
-	type ServerBillingInterval,
-	type ServerPlan,
-	type ServerRegion,
-} from '../../utils/billing'
+import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import { regionOverrides } from '../../utils/regions'
 import ButtonStyled from '../base/ButtonStyled.vue'
 import Checkbox from '../base/Checkbox.vue'
@@ -28,6 +24,7 @@ import TagItem from '../base/TagItem.vue'
 import ModrinthServersIcon from '../servers/ModrinthServersIcon.vue'
 import ExpandableInvoiceTotal from './ExpandableInvoiceTotal.vue'
 import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
+import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import ServersSpecs from './ServersSpecs.vue'

 const vintl = useVIntl()
@@ -38,8 +35,8 @@ const emit = defineEmits<{
 }>()

 const props = defineProps<{
-	plan: ServerPlan
-	region: ServerRegion
+	plan: Labrinth.Billing.Internal.Product
+	region: Archon.Servers.v1.Region
 	tax?: number
 	total?: number
 	currency: string
@@ -48,25 +45,28 @@ const props = defineProps<{
 	selectedPaymentMethod: Stripe.PaymentMethod | undefined
 	hasPaymentMethod?: boolean
 	noPaymentRequired?: boolean
-	existingPlan?: ServerPlan
-	existingSubscription?: UserSubscription
+	existingPlan?: Labrinth.Billing.Internal.Product
+	existingSubscription?: Labrinth.Billing.Internal.UserSubscription
 }>()

 const interval = defineModel<ServerBillingInterval>('interval', { required: true })
 const acceptedEula = defineModel<boolean>('acceptedEula', { required: true })

-const prices = computed(() => {
-	return props.plan.prices.find((x) => x.currency_code === props.currency)
-})
-
 const selectedPlanPriceForInterval = computed<number | undefined>(() => {
-	return prices.value?.prices?.intervals?.[interval.value as keyof typeof monthsInInterval]
+	return getPriceForInterval(props.plan, props.currency, interval.value)
 })

 const existingPlanPriceForInterval = computed<number | undefined>(() => {
 	if (!props.existingPlan) return undefined
-	const p = props.existingPlan.prices.find((x) => x.currency_code === props.currency)
-	return p?.prices?.intervals?.[interval.value as keyof typeof monthsInInterval]
+	return getPriceForInterval(props.existingPlan, props.currency, interval.value)
+})
+
+const monthlyPrice = computed<number | undefined>(() => {
+	return getPriceForInterval(props.plan, props.currency, 'monthly')
+})
+
+const quarterlyPrice = computed<number | undefined>(() => {
+	return getPriceForInterval(props.plan, props.currency, 'quarterly')
 })

 const upgradeDeltaPrice = computed<number | undefined>(() => {
@@ -137,6 +137,18 @@ const planName = computed(() => {
 	return 'Custom'
 })

+const planSpecs = computed(() => {
+	const metadata = props.plan.metadata
+	if (metadata.type === 'pyro' || metadata.type === 'medal') {
+		return {
+			ram: metadata.ram,
+			storage: metadata.storage,
+			cpu: metadata.cpu,
+		}
+	}
+	return null
+})
+
 const flag = computed(
 	() =>
 		regionOverrides[props.region.shortcode]?.flag ??
@@ -173,11 +185,11 @@ function setInterval(newInterval: ServerBillingInterval) {
 			</div>
 			<div>
 				<ServersSpecs
-					v-if="plan.metadata && plan.metadata.ram && plan.metadata.storage && plan.metadata.cpu"
+					v-if="planSpecs"
 					class="!grid sm:grid-cols-2"
-					:ram="plan.metadata.ram"
-					:storage="plan.metadata.storage"
-					:cpus="plan.metadata.cpu"
+					:ram="planSpecs.ram"
+					:storage="planSpecs.storage"
+					:cpus="planSpecs.cpu"
 				/>
 			</div>
 		</div>
@@ -234,8 +246,7 @@ function setInterval(newInterval: ServerBillingInterval) {
 					>Pay monthly</span
 				>
 				<span class="text-sm text-secondary flex items-center gap-1"
-					>{{ formatPrice(locale, prices?.prices.intervals['monthly'], currency, true) }} /
-					month</span
+					>{{ formatPrice(locale, monthlyPrice, currency, true) }} / month</span
 				>
 			</div>
 		</button>
@@ -261,7 +272,7 @@ function setInterval(newInterval: ServerBillingInterval) {
 					>{{
 						formatPrice(
 							locale,
-							(prices?.prices?.intervals?.['quarterly'] ?? 0) / monthsInInterval['quarterly'],
+							(quarterlyPrice ?? 0) / monthsInInterval['quarterly'],
 							currency,
 							true,
 						)
--- a/packages/ui/src/components/billing/ServersRegionButton.vue
+++ b/packages/ui/src/components/billing/ServersRegionButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
 import { SignalIcon, SpinnerIcon } from '@modrinth/assets'
 import { getPingLevel } from '@modrinth/utils'
 import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'

-import type { ServerRegion } from '../../utils/billing'
 import { regionOverrides } from '../../utils/regions'

 const { formatMessage } = useVIntl()
@@ -12,7 +12,7 @@ const { formatMessage } = useVIntl()
 const currentRegion = defineModel<string | undefined>({ required: true })

 const props = defineProps<{
-	region: ServerRegion
+	region: Archon.Servers.v1.Region
 	ping?: number
 	bestPing?: boolean
 	outOfStock?: boolean
--- a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
+++ b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
@@ -0,0 +1,341 @@
+<template>
+	<ModrinthServersPurchaseModal
+		v-if="customer && regionsData"
+		ref="purchaseModal"
+		:publishable-key="props.stripePublishableKey"
+		:initiate-payment="async (body) => await initiatePayment(body)"
+		:available-products="pyroProducts"
+		:on-error="handleError"
+		:customer="customer"
+		:payment-methods="paymentMethods"
+		:currency="selectedCurrency"
+		:return-url="`${props.siteUrl}/servers/manage`"
+		:pings="regionPings"
+		:regions="regionsData"
+		:refresh-payment-methods="fetchPaymentData"
+		:fetch-stock="fetchStock"
+		:plan-stage="true"
+		:existing-plan="currentPlanFromSubscription"
+		:existing-subscription="subscription || undefined"
+		:on-finalize-no-payment-change="finalizeDowngrade"
+		@hide="
+			() => {
+				debug('modal hidden, resetting subscription')
+				subscription = null
+			}
+		"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import {
+	injectModrinthClient,
+	injectNotificationManager,
+	ModrinthServersPurchaseModal,
+	useDebugLogger,
+} from '@modrinth/ui'
+import { useMutation, useQuery } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+	stripePublishableKey: string
+	siteUrl: string
+	products: Labrinth.Billing.Internal.Product[]
+}>()
+
+const { addNotification } = injectNotificationManager()
+const { labrinth, archon } = injectModrinthClient()
+const debug = useDebugLogger('ServersUpgradeModalWrapper')
+const purchaseModal = ref<InstanceType<typeof ModrinthServersPurchaseModal> | null>(null)
+
+// stripe type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const customer = ref<any>(null)
+
+// stripe type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const paymentMethods = ref<any[]>([])
+const selectedCurrency = ref<string>('USD')
+
+const regionPings = ref<
+	{
+		region: string
+		ping: number
+	}[]
+>([])
+
+const pyroProducts = (props.products as Labrinth.Billing.Internal.Product[])
+	.filter((p) => p?.metadata?.type === 'pyro' || p?.metadata?.type === 'medal')
+	.sort((a, b) => {
+		const aRam = a?.metadata?.type === 'pyro' || a?.metadata?.type === 'medal' ? a.metadata.ram : 0
+		const bRam = b?.metadata?.type === 'pyro' || b?.metadata?.type === 'medal' ? b.metadata.ram : 0
+		return aRam - bRam
+	})
+
+function handleError(err: unknown) {
+	debug('Purchase modal error:', err)
+}
+
+const { data: customerData } = useQuery({
+	queryKey: ['billing', 'customer'],
+	queryFn: () => labrinth.billing_internal.getCustomer(),
+})
+
+const { data: paymentMethodsData, refetch: refetchPaymentMethods } = useQuery({
+	queryKey: ['billing', 'payment-methods'],
+	queryFn: () => labrinth.billing_internal.getPaymentMethods(),
+})
+
+const { data: regionsData } = useQuery({
+	queryKey: ['servers', 'regions'],
+	queryFn: () => archon.servers_v1.getRegions(),
+})
+
+watch(customerData, (newCustomer) => {
+	if (newCustomer) customer.value = newCustomer
+})
+
+watch(paymentMethodsData, (newMethods) => {
+	if (newMethods) paymentMethods.value = newMethods
+})
+
+watch(regionsData, (newRegions) => {
+	if (newRegions) {
+		newRegions.forEach((region) => {
+			runPingTest(region)
+		})
+	}
+})
+
+async function fetchPaymentData() {
+	await refetchPaymentMethods()
+}
+
+async function fetchStock(
+	region: Archon.Servers.v1.Region,
+	request: Archon.Servers.v0.StockRequest,
+): Promise<number> {
+	const result = await archon.servers_v0.checkStock(region.shortcode, request)
+	return result.available
+}
+
+const PING_COUNT = 20
+const PING_INTERVAL = 200
+const MAX_PING_TIME = 1000
+
+function runPingTest(region: Archon.Servers.v1.Region, index = 1) {
+	if (index > 10) {
+		regionPings.value.push({
+			region: region.shortcode,
+			ping: -1,
+		})
+		return
+	}
+
+	const wsUrl = `wss://${region.shortcode}${index}.${region.zone}/pingtest`
+	try {
+		const socket = new WebSocket(wsUrl)
+		const pings: number[] = []
+
+		socket.onopen = () => {
+			for (let i = 0; i < PING_COUNT; i++) {
+				setTimeout(() => {
+					socket.send(String(performance.now()))
+				}, i * PING_INTERVAL)
+			}
+			setTimeout(
+				() => {
+					socket.close()
+					const median = Math.round([...pings].sort((a, b) => a - b)[Math.floor(pings.length / 2)])
+					if (median) {
+						regionPings.value.push({
+							region: region.shortcode,
+							ping: median,
+						})
+					}
+				},
+				PING_COUNT * PING_INTERVAL + MAX_PING_TIME,
+			)
+		}
+
+		socket.onmessage = (event) => {
+			const start = Number(event.data)
+			pings.push(performance.now() - start)
+		}
+
+		socket.onerror = () => {
+			runPingTest(region, index + 1)
+		}
+	} catch {
+		// ignore
+	}
+}
+
+const subscription = ref<Labrinth.Billing.Internal.UserSubscription | null>(null)
+// Dry run state
+const dryRunResponse = ref<{
+	requires_payment: boolean
+	required_payment_is_proration: boolean
+} | null>(null)
+const pendingDowngradeBody = ref<Labrinth.Billing.Internal.EditSubscriptionRequest | null>(null)
+const currentPlanFromSubscription = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
+	return subscription.value
+		? pyroProducts.find((p) =>
+				p.prices.some((price) => price.id === subscription.value?.price_id),
+			) ?? undefined
+		: undefined
+})
+
+const currentInterval = computed<'monthly' | 'quarterly'>(() => {
+	const interval = subscription.value?.interval
+
+	if (interval === 'monthly' || interval === 'quarterly') {
+		return interval
+	}
+
+	return 'monthly'
+})
+
+const editSubscriptionMutation = useMutation({
+	mutationFn: async ({
+		id,
+		body,
+		dry,
+	}: {
+		id: string
+		body: Labrinth.Billing.Internal.EditSubscriptionRequest
+		dry: boolean
+	}) => {
+		return await labrinth.billing_internal.editSubscription(id, body, dry)
+	},
+})
+
+async function initiatePayment(
+	body: Labrinth.Billing.Internal.InitiatePaymentRequest,
+): Promise<Labrinth.Billing.Internal.EditSubscriptionResponse | null> {
+	debug('initiatePayment called', {
+		hasSubscription: !!subscription.value,
+		subscriptionId: subscription.value?.id,
+		body,
+	})
+	if (subscription.value) {
+		const transformedBody: Labrinth.Billing.Internal.EditSubscriptionRequest = {
+			interval: body.charge.type === 'new' ? body.charge.interval : undefined,
+			payment_method: body.type === 'confirmation_token' ? body.token : body.id,
+			product: body.charge.type === 'new' ? body.charge.product_id : undefined,
+			region: body.metadata?.server_region,
+		}
+
+		try {
+			const dry = await editSubscriptionMutation.mutateAsync({
+				id: subscription.value.id,
+				body: transformedBody,
+				dry: true,
+			})
+
+			if (dry && typeof dry === 'object' && 'payment_intent_id' in dry) {
+				dryRunResponse.value = {
+					requires_payment: !!dry.payment_intent_id,
+					required_payment_is_proration: true,
+				}
+				pendingDowngradeBody.value = transformedBody
+				if (dry.payment_intent_id) {
+					return await finalizeImmediate(transformedBody)
+				} else {
+					return null
+				}
+			} else {
+				// Fallback if dry run not supported
+				return await finalizeImmediate(transformedBody)
+			}
+		} catch (e) {
+			debug('Dry run failed, attempting immediate patch', e)
+			return await finalizeImmediate(transformedBody)
+		}
+	} else {
+		debug('subscription.value is null/undefined', {
+			subscriptionValue: subscription.value,
+		})
+		addNotification({
+			title: 'Unable to determine subscription ID.',
+			text: 'Please contact support.',
+			type: 'error',
+		})
+		return Promise.reject(new Error('Unable to determine subscription ID.'))
+	}
+}
+
+async function finalizeImmediate(body: Labrinth.Billing.Internal.EditSubscriptionRequest) {
+	if (!subscription.value) return null
+
+	const result = await editSubscriptionMutation.mutateAsync({
+		id: subscription.value.id,
+		body,
+		dry: false,
+	})
+
+	return result ?? null
+}
+
+async function finalizeDowngrade() {
+	if (!subscription.value || !pendingDowngradeBody.value) return
+	try {
+		await finalizeImmediate(pendingDowngradeBody.value)
+		addNotification({
+			title: 'Subscription updated',
+			text: 'Your plan has been downgraded and will take effect next billing cycle.',
+			type: 'success',
+		})
+	} catch (e) {
+		addNotification({
+			title: 'Failed to apply subscription changes',
+			text: 'Please try again or contact support.',
+			type: 'error',
+		})
+		throw e
+	} finally {
+		dryRunResponse.value = null
+		pendingDowngradeBody.value = null
+	}
+}
+
+async function open(id?: string) {
+	debug('open called', { id })
+	if (id) {
+		const subscriptions = await labrinth.billing_internal.getSubscriptions()
+		debug('fetched subscriptions', {
+			count: subscriptions.length,
+			subscriptions: subscriptions.map((s) => ({
+				id: s.id,
+				metadataType: s.metadata?.type,
+				metadataId: s.metadata?.id,
+			})),
+		})
+		for (const sub of subscriptions) {
+			if (
+				(sub?.metadata?.type === 'pyro' || sub?.metadata?.type === 'medal') &&
+				sub.metadata.id === id
+			) {
+				subscription.value = sub
+				debug('found matching subscription', {
+					subscriptionId: sub.id,
+				})
+				break
+			}
+		}
+		if (!subscription.value) {
+			debug('no matching subscription found for id', id)
+		}
+	} else {
+		debug('no id provided, resetting subscription')
+		subscription.value = null
+	}
+
+	purchaseModal.value?.show(currentInterval.value)
+}
+
+defineExpose({
+	open,
+})
+</script>
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -108,6 +108,7 @@ export { default as AffiliateLinkCreateModal } from './affiliate/AffiliateLinkCr
 export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModal.vue'
 export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.vue'
 export { default as PurchaseModal } from './billing/PurchaseModal.vue'
+export { default as ServersUpgradeModalWrapper } from './billing/ServersUpgradeModalWrapper.vue'

 // Skins
 export { default as CapeButton } from './skin/CapeButton.vue'
@@ -127,4 +128,11 @@ export { default as ThemeSelector } from './settings/ThemeSelector.vue'
 // Servers
 export { default as ServersSpecs } from './billing/ServersSpecs.vue'
 export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
+export { default as LoaderIcon } from './servers/icons/LoaderIcon.vue'
+export { default as ServerIcon } from './servers/icons/ServerIcon.vue'
+export { default as ServerInfoLabels } from './servers/labels/ServerInfoLabels.vue'
+export { default as MedalBackgroundImage } from './servers/marketing/MedalBackgroundImage.vue'
+export { default as MedalServerListing } from './servers/marketing/MedalServerListing.vue'
+export type { PendingChange } from './servers/ServerListing.vue'
+export { default as ServerListing } from './servers/ServerListing.vue'
 export { default as ServersPromo } from './servers/ServersPromo.vue'
--- a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { EnvironmentV3 } from '@modrinth/utils'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'

@@ -8,7 +7,7 @@ import LargeRadioButton from '../../../base/LargeRadioButton.vue'

 const { formatMessage } = useVIntl()

-const value = defineModel<EnvironmentV3 | undefined>({ required: true })
+const value = defineModel<string | undefined>({ required: true })

 withDefaults(
 	defineProps<{
@@ -135,7 +134,7 @@ type SubOptionKey = ValidKeys<(typeof OUTER_OPTIONS)[keyof typeof OUTER_OPTIONS]
 const currentOuterOption = ref<OuterOptionKey>()
 const currentSubOption = ref<SubOptionKey>()

-const computedOption = computed<EnvironmentV3>(() => {
+const computedOption = computed<string>(() => {
 	switch (currentOuterOption.value) {
 		case 'client':
 			return 'client_only'
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -0,0 +1,245 @@
+<template>
+	<div>
+		<NuxtLink :to="status === 'suspended' ? '' : `/servers/manage/${props.server_id}`">
+			<div
+				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-button-bg bg-bg-raised p-4 transition-transform duration-100"
+				:class="{
+					'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
+					'opacity-75': status === 'suspended',
+					'active:scale-95': status !== 'suspended' && !pendingChange,
+				}"
+				data-pyro-server-listing
+				:data-pyro-server-listing-id="server_id"
+			>
+				<ServerIcon v-if="status !== 'suspended'" :image="image" />
+				<div
+					v-else
+					class="bg-bg-secondary flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				>
+					<LockIcon class="size-12 text-secondary" />
+				</div>
+				<div class="ml-4 flex flex-col gap-2.5">
+					<div class="flex flex-row items-center gap-2">
+						<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
+						<ChevronRightIcon />
+					</div>
+
+					<div
+						v-if="projectData?.title"
+						class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
+					>
+						<Avatar
+							:src="iconUrl"
+							no-shadow
+							style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
+							alt="Server Icon"
+						/>
+						Using {{ projectData?.title || 'Unknown' }}
+					</div>
+
+					<div
+						v-if="isConfiguring"
+						class="flex min-w-0 items-center gap-2 truncate text-sm font-semibold text-brand"
+					>
+						<SparklesIcon class="size-5 shrink-0" /> New server
+					</div>
+					<ServerInfoLabels
+						v-else
+						:server-data="{ game, mc_version, loader, loader_version, net }"
+						:show-game-label="showGameLabel"
+						:show-loader-label="showLoaderLabel"
+						:linked="false"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+					/>
+				</div>
+			</div>
+		</NuxtLink>
+		<div
+			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+			class="relative flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
+		>
+			<LoaderCircleIcon class="size-5 animate-spin" />
+			Your server's hardware is currently being upgraded and will be back online shortly.
+		</div>
+		<div
+			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
+			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<TriangleAlertIcon class="!size-5" /> Your server has been cancelled. Please update your
+				billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+		<div
+			v-else-if="status === 'suspended' && suspension_reason"
+			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<TriangleAlertIcon class="!size-5" /> Your server has been suspended:
+				{{ suspension_reason }}. Please update your billing information or contact Modrinth Support
+				for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+		<div
+			v-else-if="status === 'suspended'"
+			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<TriangleAlertIcon class="!size-5" /> Your server has been suspended. Please update your
+				billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+		<div
+			v-if="pendingChange && status !== 'suspended'"
+			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-orange bg-bg-orange p-4 text-sm font-bold text-contrast"
+		>
+			<div>
+				Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
+					pendingChange.planSize
+				}}" plan on {{ formatDate(pendingChange.date) }}.
+			</div>
+			<ServersSpecs
+				class="!font-normal !text-contrast"
+				:ram="Math.round((pendingChange.ramGb ?? 0) * 1024)"
+				:storage="Math.round((pendingChange.storageGb ?? 0) * 1024)"
+				:cpus="pendingChange.cpuBurst"
+				bursting-link="https://docs.modrinth.com/servers/bursting"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon, ProjectV2 } from '@modrinth/api-client'
+import {
+	ChevronRightIcon,
+	LoaderCircleIcon,
+	LockIcon,
+	SparklesIcon,
+	TriangleAlertIcon,
+} from '@modrinth/assets'
+import { useQuery } from '@tanstack/vue-query'
+import dayjs from 'dayjs'
+import { computed } from 'vue'
+
+import { injectModrinthClient } from '../../providers/api-client'
+import Avatar from '../base/Avatar.vue'
+import CopyCode from '../base/CopyCode.vue'
+import ServersSpecs from '../billing/ServersSpecs.vue'
+import ServerIcon from './icons/ServerIcon.vue'
+import ServerInfoLabels from './labels/ServerInfoLabels.vue'
+
+export type PendingChange = {
+	planSize: string
+	cpu: number
+	cpuBurst: number
+	ramGb: number
+	swapGb?: number
+	storageGb?: number
+	date: string | number | Date
+	intervalChange?: string | null
+	verb: string
+}
+
+const props = defineProps<Partial<Archon.Servers.v0.Server> & { pendingChange?: PendingChange }>()
+
+const { archon, kyros, labrinth } = injectModrinthClient()
+
+const showGameLabel = computed(() => !!props.game)
+const showLoaderLabel = computed(() => !!props.loader)
+
+const { data: projectData } = useQuery({
+	queryKey: ['project', props.upstream?.project_id] as const,
+	queryFn: async (): Promise<ProjectV2 | null> => {
+		if (!props.upstream?.project_id) return null
+		return await labrinth.projects_v2.get(props.upstream.project_id)
+	},
+	enabled: computed(() => !!props.upstream?.project_id),
+})
+
+const iconUrl = computed(() => projectData.value?.icon_url)
+
+async function processImageBlob(blob: Blob, size: number): Promise<string> {
+	return new Promise((resolve) => {
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')!
+		const img = new Image()
+		img.onload = () => {
+			canvas.width = size
+			canvas.height = size
+			ctx.drawImage(img, 0, 0, size, size)
+			const dataURL = canvas.toDataURL('image/png')
+			URL.revokeObjectURL(img.src)
+			resolve(dataURL)
+		}
+		img.src = URL.createObjectURL(blob)
+	})
+}
+
+async function dataURLToBlob(dataURL: string): Promise<Blob> {
+	const res = await fetch(dataURL)
+	return res.blob()
+}
+
+const { data: image } = useQuery({
+	queryKey: ['server-icon', props.server_id] as const,
+	queryFn: async (): Promise<string | undefined> => {
+		if (!props.server_id || props.status !== 'available') return undefined
+
+		try {
+			const auth = await archon.servers_v0.getFilesystemAuth(props.server_id)
+
+			try {
+				const blob = await kyros.files_v0.downloadFile(
+					auth.url,
+					auth.token,
+					'/server-icon-original.png',
+				)
+
+				return await processImageBlob(blob, 512)
+			} catch {
+				const projectIcon = iconUrl.value
+				if (projectIcon) {
+					const response = await fetch(projectIcon)
+					const blob = await response.blob()
+
+					const scaledDataUrl = await processImageBlob(blob, 64)
+					const scaledBlob = await dataURLToBlob(scaledDataUrl)
+					const scaledFile = new File([scaledBlob], 'server-icon.png', { type: 'image/png' })
+
+					await kyros.files_v0.uploadFile(auth.url, auth.token, '/server-icon.png', scaledFile)
+
+					const originalFile = new File([blob], 'server-icon-original.png', {
+						type: 'image/png',
+					})
+					await kyros.files_v0.uploadFile(
+						auth.url,
+						auth.token,
+						'/server-icon-original.png',
+						originalFile,
+					)
+
+					return scaledDataUrl
+				}
+			}
+		} catch (error) {
+			console.debug('Icon processing failed:', error)
+			return undefined
+		}
+	},
+	enabled: computed(() => !!props.server_id && props.status === 'available'),
+})
+
+const isConfiguring = computed(() => props.flows?.intro)
+
+const formatDate = (d: unknown) => {
+	try {
+		return dayjs(d as string).format('MMMM D, YYYY')
+	} catch {
+		return ''
+	}
+}
+</script>
--- a/packages/ui/src/components/servers/icons/LoaderIcon.vue
+++ b/packages/ui/src/components/servers/icons/LoaderIcon.vue
--- a/packages/ui/src/components/servers/icons/ServerIcon.vue
+++ b/packages/ui/src/components/servers/icons/ServerIcon.vue
@@ -0,0 +1,28 @@
+<template>
+	<div
+		class="experimental-styles-within flex size-16 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+	>
+		<client-only>
+			<img
+				v-if="image"
+				class="h-full w-full select-none object-fill"
+				alt="Server Icon"
+				:src="image"
+			/>
+			<img
+				v-else
+				class="h-full w-full select-none object-fill"
+				alt="Server Icon"
+				:src="MinecraftServerIcon"
+			/>
+		</client-only>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { MinecraftServerIcon } from '@modrinth/assets'
+
+defineProps<{
+	image: string | undefined
+}>()
+</script>
--- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
@@ -0,0 +1,42 @@
+<template>
+	<div
+		v-if="game"
+		v-tooltip="'Change server version'"
+		class="min-w-0 flex-none flex-row items-center gap-2 first:!flex"
+	>
+		<GameIcon aria-hidden="true" class="size-5 shrink-0" />
+		<AutoLink
+			v-if="isLink"
+			:to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
+			class="flex min-w-0 items-center truncate text-sm font-semibold"
+			:class="serverId ? 'hover:underline' : ''"
+		>
+			<div class="flex flex-row items-center gap-1">
+				{{ game[0].toUpperCase() + game.slice(1) }}
+				<span v-if="mcVersion">{{ mcVersion }}</span>
+				<span v-else class="inline-block h-3 w-12 animate-pulse rounded bg-button-border"></span>
+			</div>
+		</AutoLink>
+		<div v-else class="flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold">
+			{{ game[0].toUpperCase() + game.slice(1) }}
+			<span v-if="mcVersion">{{ mcVersion }}</span>
+			<span v-else class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"></span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { GameIcon } from '@modrinth/assets'
+import { useRoute } from 'vue-router'
+
+import AutoLink from '../../base/AutoLink.vue'
+
+defineProps<{
+	game: string
+	mcVersion: string
+	isLink?: boolean
+}>()
+
+const route = useRoute()
+const serverId = route.params.id as string
+</script>
--- a/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
+++ b/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
@@ -0,0 +1,46 @@
+<template>
+	<div>
+		<ServerGameLabel
+			v-if="showGameLabel"
+			:game="serverData.game"
+			:mc-version="serverData.mc_version ?? ''"
+			:is-link="linked"
+		/>
+		<ServerLoaderLabel
+			:loader="serverData.loader"
+			:loader-version="serverData.loader_version ?? ''"
+			:no-separator="column"
+			:is-link="linked"
+		/>
+		<ServerSubdomainLabel
+			v-if="serverData.net?.domain"
+			:subdomain="serverData.net.domain"
+			:no-separator="column"
+			:is-link="linked"
+		/>
+		<ServerUptimeLabel
+			v-if="uptimeSeconds"
+			:uptime-seconds="uptimeSeconds"
+			:no-separator="column"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import ServerGameLabel from './ServerGameLabel.vue'
+import ServerLoaderLabel from './ServerLoaderLabel.vue'
+import ServerSubdomainLabel from './ServerSubdomainLabel.vue'
+import ServerUptimeLabel from './ServerUptimeLabel.vue'
+
+interface ServerInfoLabelsProps {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	serverData: Record<string, any>
+	showGameLabel: boolean
+	showLoaderLabel: boolean
+	uptimeSeconds?: number
+	column?: boolean
+	linked?: boolean
+}
+
+defineProps<ServerInfoLabelsProps>()
+</script>
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -0,0 +1,51 @@
+<template>
+	<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-4 truncate">
+		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+		<div class="flex flex-row items-center gap-2">
+			<LoaderIcon v-if="loader" :loader="loader" class="flex shrink-0 [&&]:size-5" />
+			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
+			<AutoLink
+				v-if="isLink"
+				:to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
+				class="flex min-w-0 items-center text-sm font-semibold"
+				:class="serverId ? 'hover:underline' : ''"
+			>
+				<span v-if="loader">
+					{{ loader }}
+					<span v-if="loaderVersion">{{ loaderVersion }}</span>
+				</span>
+				<span v-else class="flex gap-2">
+					<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+					<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+				</span>
+			</AutoLink>
+			<div v-else class="min-w-0 text-sm font-semibold">
+				<span v-if="loader">
+					{{ loader }}
+					<span v-if="loaderVersion">{{ loaderVersion }}</span>
+				</span>
+				<span v-else class="flex gap-2">
+					<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+					<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+import AutoLink from '../../base/AutoLink.vue'
+import LoaderIcon from '../icons/LoaderIcon.vue'
+
+defineProps<{
+	noSeparator?: boolean
+	loader?: 'Fabric' | 'Quilt' | 'Forge' | 'NeoForge' | 'Paper' | 'Spigot' | 'Bukkit' | 'Vanilla'
+	loaderVersion?: string
+	isLink?: boolean
+}>()
+
+const route = useRoute()
+const serverId = route.params.id as string
+</script>
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -0,0 +1,52 @@
+<template>
+	<div
+		v-if="subdomain && !isHidden"
+		v-tooltip="'Copy custom URL'"
+		class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
+	>
+		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+		<div class="flex flex-row items-center gap-2">
+			<LinkIcon class="flex size-5 shrink-0" />
+			<div
+				class="flex min-w-0 text-sm font-semibold"
+				:class="serverId ? 'hover:underline' : ''"
+				@click="copySubdomain"
+			>
+				{{ subdomain }}.modrinth.gg
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { LinkIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
+import { useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const { addNotification } = injectNotificationManager()
+
+const props = defineProps<{
+	subdomain: string
+	noSeparator?: boolean
+}>()
+
+const copySubdomain = () => {
+	navigator.clipboard.writeText(props.subdomain + '.modrinth.gg')
+	addNotification({
+		title: 'Custom URL copied',
+		text: "Your server's URL has been copied to your clipboard.",
+		type: 'success',
+	})
+}
+
+const route = useRoute()
+const serverId = computed(() => route.params.id as string)
+
+const userPreferences = useStorage(`pyro-server-${serverId.value}-preferences`, {
+	hideSubdomainLabel: false,
+})
+
+const isHidden = computed(() => userPreferences.value.hideSubdomainLabel)
+</script>
--- a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
@@ -0,0 +1,66 @@
+<template>
+	<div
+		v-if="uptimeSeconds || uptimeSeconds !== 0"
+		v-tooltip="`Online for ${verboseUptime}`"
+		class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-4"
+		data-pyro-uptime
+	>
+		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+
+		<div class="flex gap-2">
+			<TimerIcon class="flex size-5 shrink-0" />
+			<time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
+				{{ formattedUptime }}
+			</time>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { TimerIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	uptimeSeconds: number
+	noSeparator?: boolean
+}>()
+
+const formattedUptime = computed(() => {
+	const days = Math.floor(props.uptimeSeconds / (24 * 3600))
+	const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600)
+	const minutes = Math.floor((props.uptimeSeconds % 3600) / 60)
+	const seconds = props.uptimeSeconds % 60
+
+	let formatted = ''
+	if (days > 0) {
+		formatted += `${days}d `
+	}
+	if (hours > 0 || days > 0) {
+		formatted += `${hours}h `
+	}
+	formatted += `${minutes}m ${seconds}s`
+
+	return formatted.trim()
+})
+
+const verboseUptime = computed(() => {
+	const days = Math.floor(props.uptimeSeconds / (24 * 3600))
+	const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600)
+	const minutes = Math.floor((props.uptimeSeconds % 3600) / 60)
+	const seconds = props.uptimeSeconds % 60
+
+	let verbose = ''
+	if (days > 0) {
+		verbose += `${days} day${days > 1 ? 's' : ''} `
+	}
+	if (hours > 0) {
+		verbose += `${hours} hour${hours > 1 ? 's' : ''} `
+	}
+	if (minutes > 0) {
+		verbose += `${minutes} minute${minutes > 1 ? 's' : ''} `
+	}
+	verbose += `${seconds} second${seconds > 1 ? 's' : ''}`
+
+	return verbose.trim()
+})
+</script>
--- a/packages/ui/src/components/servers/marketing/MedalBackgroundImage.vue
+++ b/packages/ui/src/components/servers/marketing/MedalBackgroundImage.vue
@@ -0,0 +1,58 @@
+<template>
+	<div class="overlay"></div>
+	<img
+		src="https://cdn-raw.modrinth.com/medal-banner-background.webp"
+		class="background-pattern dark-pattern shadow-xl"
+		alt=""
+	/>
+	<img
+		src="https://cdn-raw.modrinth.com/medal-banner-background-light.webp"
+		class="background-pattern light-pattern shadow-xl"
+		alt=""
+	/>
+</template>
+
+<style scoped lang="scss">
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--medal-promotion-bg-gradient);
+	z-index: 1;
+	border-radius: inherit;
+}
+
+.light-mode,
+.light {
+	.background-pattern.dark-pattern {
+		display: none;
+	}
+	.background-pattern.light-pattern {
+		display: block;
+	}
+}
+
+.background-pattern.dark-pattern {
+	display: block;
+}
+
+.background-pattern.light-pattern {
+	display: none;
+}
+
+.background-pattern {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	object-fit: cover;
+	object-position: bottom;
+	background-color: var(--medal-promotion-bg);
+	border-radius: inherit;
+	color: var(--medal-promotion-bg-orange);
+}
+</style>
--- a/packages/ui/src/components/servers/marketing/MedalServerListing.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
@@ -0,0 +1,236 @@
+<template>
+	<div class="rounded-2xl shadow-xl">
+		<div
+			class="medal-promotion flex flex-row items-center overflow-x-hidden rounded-t-2xl p-4 transition-transform duration-100"
+			:class="status === 'suspended' ? 'rounded-b-none border-b-0 opacity-75' : 'rounded-b-2xl'"
+			data-pyro-server-listing
+			:data-pyro-server-listing-id="server_id"
+		>
+			<MedalBackgroundImage />
+			<AutoLink
+				:to="status === 'suspended' ? '' : `/servers/manage/${props.server_id}`"
+				class="z-10 flex flex-grow flex-row items-center overflow-x-hidden"
+				:class="status !== 'suspended' && 'active:scale-95'"
+			>
+				<Avatar
+					v-if="status !== 'suspended'"
+					src="https://cdn-raw.modrinth.com/medal_icon.webp"
+					size="64px"
+					class="z-10"
+				/>
+				<div
+					v-else
+					class="bg-bg-secondary z-10 flex size-16 shrink-0 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				>
+					<LockIcon class="size-12 text-secondary" />
+				</div>
+
+				<div class="z-10 ml-4 flex min-w-0 flex-col gap-2.5">
+					<div class="flex flex-row items-center gap-2">
+						<h2 class="m-0 truncate text-xl font-bold text-contrast">{{ name }}</h2>
+						<ChevronRightIcon />
+
+						<span class="truncate">
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.days }}
+							</span>
+							days
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.hours }}
+							</span>
+							hours
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.minutes }}
+							</span>
+							minutes
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.seconds }}
+							</span>
+							seconds remaining...
+						</span>
+					</div>
+
+					<div
+						v-if="projectData?.title"
+						class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
+					>
+						<Avatar
+							:src="iconUrl"
+							no-shadow
+							style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
+							alt="Server Icon"
+						/>
+						Using {{ projectData?.title || 'Unknown' }}
+					</div>
+
+					<div
+						v-if="isConfiguring"
+						class="text-medal-orange flex min-w-0 items-center gap-2 truncate text-sm font-semibold"
+					>
+						<SparklesIcon class="size-5 shrink-0" /> New server
+					</div>
+					<ServerInfoLabels
+						v-else
+						:server-data="{ game, mc_version, loader, loader_version, net }"
+						:show-game-label="showGameLabel"
+						:show-loader-label="showLoaderLabel"
+						:linked="false"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+					/>
+				</div>
+			</AutoLink>
+
+			<div v-if="isNuxt" class="z-10 ml-auto">
+				<ButtonStyled color="medal-promo" type="outlined" size="large">
+					<button class="my-auto" @click="handleUpgrade"><RocketIcon /> Upgrade</button>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<div
+			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+			class="relative flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
+		>
+			<LoaderCircleIcon class="size-5 animate-spin" />
+			Your server's hardware is currently being upgraded and will be back online shortly.
+		</div>
+		<div
+			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
+			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<TriangleAlertIcon class="!size-5" /> Your Medal server trial has ended and your server has
+				been suspended. Please upgrade to continue to use your server.
+			</div>
+		</div>
+		<div
+			v-else-if="status === 'suspended' && suspension_reason"
+			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<TriangleAlertIcon class="!size-5" /> Your server has been suspended:
+				{{ suspension_reason }}. Please update your billing information or contact Modrinth Support
+				for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+		<div
+			v-else-if="status === 'suspended'"
+			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<TriangleAlertIcon class="!size-5" /> Your server has been suspended. Please update your
+				billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type Archon, NuxtModrinthClient } from '@modrinth/api-client'
+import {
+	ChevronRightIcon,
+	LoaderCircleIcon,
+	LockIcon,
+	RocketIcon,
+	SparklesIcon,
+	TriangleAlertIcon,
+} from '@modrinth/assets'
+import { useQuery } from '@tanstack/vue-query'
+import dayjs from 'dayjs'
+import dayjsDuration from 'dayjs/plugin/duration'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { injectModrinthClient } from '../../../providers/api-client'
+import AutoLink from '../../base/AutoLink.vue'
+import Avatar from '../../base/Avatar.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import CopyCode from '../../base/CopyCode.vue'
+import ServerInfoLabels from '../labels/ServerInfoLabels.vue'
+import MedalBackgroundImage from './MedalBackgroundImage.vue'
+
+dayjs.extend(dayjsDuration)
+
+const props = defineProps<Partial<Archon.Servers.v0.Server>>()
+const emit = defineEmits<{ (e: 'upgrade'): void }>()
+
+const client = injectModrinthClient()
+
+const isNuxt = computed(() => client instanceof NuxtModrinthClient)
+
+const showGameLabel = computed(() => !!props.game)
+const showLoaderLabel = computed(() => !!props.loader)
+
+const { data: projectData } = useQuery({
+	queryKey: ['server-project', props.server_id, props.upstream?.project_id],
+	queryFn: async () => {
+		if (!props.upstream?.project_id) return null
+		return await client.labrinth.projects_v2.get(props.upstream.project_id)
+	},
+	enabled: !!props.upstream?.project_id,
+})
+
+const iconUrl = computed(() => projectData.value?.icon_url || undefined)
+const isConfiguring = computed(() => props.flows?.intro)
+
+const timeLeftCountdown = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+const expiryDate = computed(() => (props.medal_expires ? dayjs(props.medal_expires) : null))
+
+function handleUpgrade(event: Event) {
+	event.stopPropagation()
+	emit('upgrade')
+}
+
+function updateCountdown() {
+	if (!expiryDate.value) {
+		timeLeftCountdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+		return
+	}
+
+	const now = dayjs()
+	const diff = expiryDate.value.diff(now)
+
+	if (diff <= 0) {
+		timeLeftCountdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+		return
+	}
+
+	const duration = dayjs.duration(diff)
+	timeLeftCountdown.value = {
+		days: duration.days(),
+		hours: duration.hours(),
+		minutes: duration.minutes(),
+		seconds: duration.seconds(),
+	}
+}
+
+watch(expiryDate, () => updateCountdown(), { immediate: true })
+
+const intervalId = ref<NodeJS.Timeout | null>(null)
+onMounted(() => {
+	intervalId.value = setInterval(updateCountdown, 1000)
+})
+
+onUnmounted(() => {
+	if (intervalId.value) clearInterval(intervalId.value)
+})
+</script>
+
+<style scoped lang="scss">
+.medal-promotion {
+	position: relative;
+	border: 1px solid var(--medal-promotion-bg-orange);
+	background: inherit; // allows overlay + pattern to take over
+	overflow: hidden;
+}
+
+.text-medal-orange {
+	color: var(--medal-promotion-text-orange);
+	font-weight: bold;
+}
+
+.border-medal-orange {
+	border-color: var(--medal-promotion-bg-orange);
+}
+</style>