From 7d4ce863b0b7d4326691ec1a815d24c145ec4960 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 17:06:46 -0600
Subject: [PATCH 01/11] fix type errors

---
 .../src/components/servers/ServerListing.vue  | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 40c460b989..668917d714 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -11,7 +11,7 @@
 				data-pyro-server-listing
 				:data-pyro-server-listing-id="server_id"
 			>
-				<ServerIcon v-if="status !== 'suspended'" :image="image" />
+				<ServerIcon v-if="status !== 'suspended'" :image="image ?? undefined" />
 				<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"
@@ -163,7 +163,7 @@ type ServerListingProps = {
 
 const props = defineProps<ServerListingProps>()
 
-const { archon, kyros, labrinth } = injectModrinthClient()
+const { kyros, labrinth } = injectModrinthClient()
 
 const showGameLabel = computed(() => !!props.game)
 const showLoaderLabel = computed(() => !!props.loader)
@@ -207,14 +207,8 @@ const { data: image } = useQuery({
 		if (!props.server_id || props.status !== 'available') return null
 
 		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',
-				)
+				const blob = await kyros.files_v0.downloadFile('/server-icon-original.png')
 
 				return await processImageBlob(blob, 512)
 			} catch {
@@ -227,17 +221,12 @@ const { data: image } = useQuery({
 					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)
+					kyros.files_v0.uploadFile('/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,
-					)
+					kyros.files_v0.uploadFile('/server-icon-original.png', originalFile)
 
 					return scaledDataUrl
 				}

From 86dad839b4ceff4f2b8ca0c5300586783d0598cb Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 17:54:29 -0600
Subject: [PATCH 02/11] fix some stylesheets not imported for storybook

---
 .../src/assets/stylesheets/global.scss        |  6 +-
 packages/ui/.storybook/preview.ts             | 60 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/apps/app-frontend/src/assets/stylesheets/global.scss b/apps/app-frontend/src/assets/stylesheets/global.scss
index 346cb2abb8..01d61ca67e 100644
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -77,12 +77,8 @@ body {
 }
 
 a {
-	color: var(--color-link);
+	color: inherit;
 	text-decoration: none;
-
-	&:hover {
-		text-decoration: none;
-	}
 }
 
 .badge {
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index d775c85df0..94dec3ba71 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -1,14 +1,16 @@
-import '@modrinth/assets/omorphia.scss'
+import '@modrinth/assets'
 import 'floating-vue/dist/style.css'
-import '../src/styles/tailwind.css'
+import '../../../apps/app-frontend/src/assets/stylesheets/global.scss' // theres also a global.scss for frontend, can switch out to test
+import '../../assets/styles/defaults.scss'
 
 import type { Labrinth } from '@modrinth/api-client'
 import { GenericModrinthClient } from '@modrinth/api-client'
 import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
+import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import FloatingVue from 'floating-vue'
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, h, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
@@ -109,8 +111,60 @@ class StorybookPopupNotificationManager extends AbstractPopupNotificationManager
 	}
 }
 
+const StorybookLink = defineComponent({
+	name: 'StorybookLink',
+	inheritAttrs: false,
+	props: {
+		to: {
+			type: [String, Object],
+			default: '',
+		},
+	},
+	setup(props, { attrs, slots }) {
+		const href = computed(() => {
+			if (typeof props.to === 'string') return props.to || '#'
+			if (props.to && typeof props.to === 'object' && 'path' in props.to) {
+				const path = props.to.path
+				return typeof path === 'string' ? path : '#'
+			}
+			return '#'
+		})
+
+		return () =>
+			h(
+				'a',
+				{
+					...attrs,
+					href: href.value,
+				},
+				slots.default?.(),
+			)
+	},
+})
+
+const StorybookClientOnly = defineComponent({
+	name: 'StorybookClientOnly',
+	setup(_, { slots }) {
+		return () => slots.default?.()
+	},
+})
+
 setup((app) => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+			mutations: {
+				retry: false,
+			},
+		},
+	})
+	app.use(VueQueryPlugin, { queryClient })
 	app.use(i18n)
+	app.component('NuxtLink', StorybookLink)
+	app.component('RouterLink', StorybookLink)
+	app.component('ClientOnly', StorybookClientOnly)
 
 	// Provide the custom I18nContext for components using injectI18n()
 	const i18nContext: I18nContext = {

From 423818523aee4e57b79492ed0463aff14bbea2a5 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 17:54:37 -0600
Subject: [PATCH 03/11] add server listing stories

---
 .../stories/servers/ServerListing.stories.ts  | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 packages/ui/src/stories/servers/ServerListing.stories.ts

diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
new file mode 100644
index 0000000000..2173b0a82b
--- /dev/null
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ServerListing from '../../components/servers/ServerListing.vue'
+
+const baseServer = {
+	server_id: 'srv_2n5x8j9k',
+	name: 'Survival SMP',
+	status: 'available',
+	game: 'Minecraft',
+	mc_version: '1.21.5',
+	loader: 'Fabric',
+	loader_version: '0.16.14',
+	net: {
+		ip: '203.0.113.42',
+		port: 25565,
+		domain: 'play.example.net',
+	},
+} as const
+
+const pendingChange = {
+	planSize: 'Performance 8 GB',
+	cpu: 4,
+	cpuBurst: 6,
+	ramGb: 8,
+	storageGb: 80,
+	date: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
+	verb: 'Upgrade',
+} as const
+
+const meta = {
+	title: 'Servers/ServerListing',
+	component: ServerListing,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div style="max-width: 920px;"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof ServerListing>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		...baseServer,
+	},
+}
+
+export const ConfiguringNewServer: Story = {
+	args: {
+		...baseServer,
+		server_id: 'srv_new_flow',
+		name: 'Fresh Vanilla World',
+		status: 'installing',
+		flows: { intro: true },
+		loader: 'Vanilla',
+		loader_version: null,
+	},
+}
+
+export const WithPendingChange: Story = {
+	args: {
+		...baseServer,
+		server_id: 'srv_pending',
+		name: 'Competitive UHC',
+		pendingChange,
+	},
+}
+
+export const SuspendedUpgrading: Story = {
+	args: {
+		...baseServer,
+		server_id: 'srv_suspended_upgrade',
+		name: 'Creative Build Team',
+		status: 'suspended',
+		suspension_reason: 'upgrading',
+	},
+}
+
+export const SuspendedCancelled: Story = {
+	args: {
+		...baseServer,
+		server_id: 'srv_suspended_cancelled',
+		name: 'Old Event Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+	},
+}
+
+export const SuspendedPaymentFailed: Story = {
+	args: {
+		...baseServer,
+		server_id: 'srv_suspended_reason',
+		name: 'Minigames Network',
+		status: 'suspended',
+		suspension_reason: 'paymentfailed',
+	},
+}
+
+export const SuspendedGeneric: Story = {
+	args: {
+		...baseServer,
+		server_id: 'srv_suspended_generic',
+		name: 'Archive Server',
+		status: 'suspended',
+	},
+}

From 957e43a0d028019e3b3d47a45e6d8dcfbbd491af Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 18:23:08 -0600
Subject: [PATCH 04/11] add fix for frontend stylesheet imports

---
 apps/frontend/src/assets/styles/global.scss | 6 +++---
 packages/ui/.storybook/preview.ts           | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index b003bb72a9..3f9817684d 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -463,9 +463,9 @@ kbd {
 	font-size: 0.85em !important;
 }
 
-@import '~/assets/styles/layout.scss';
-@import '~/assets/styles/utils.scss';
-@import '~/assets/styles/components.scss';
+@import './layout.scss';
+@import './utils.scss';
+@import './components.scss';
 
 // OMORPHIA FIXES
 .card {
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 94dec3ba71..a98e2efae1 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -1,7 +1,11 @@
-import '@modrinth/assets'
 import 'floating-vue/dist/style.css'
-import '../../../apps/app-frontend/src/assets/stylesheets/global.scss' // theres also a global.scss for frontend, can switch out to test
 import '../../assets/styles/defaults.scss'
+// frontend css imports
+// import '../../../apps/frontend/src/assets/styles/global.scss'
+// import '../../../apps/frontend/src/assets/styles/tailwind.css'
+// ---
+// app-frontend css imports
+import '../../../apps/app-frontend/src/assets/stylesheets/global.scss'
 
 import type { Labrinth } from '@modrinth/api-client'
 import { GenericModrinthClient } from '@modrinth/api-client'

From 6f810619251a00506032e03b02accce956c07166 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 18:23:14 -0600
Subject: [PATCH 05/11] remove props.

---
 packages/ui/src/components/servers/ServerListing.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 668917d714..93d6e417b4 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NuxtLink :to="status === 'suspended' ? '' : `/hosting/manage/${props.server_id}`">
+		<NuxtLink :to="status === 'suspended' ? '' : `/hosting/manage/${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="{
@@ -69,7 +69,7 @@
 				<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" />
+			<CopyCode :text="`${server_id}`" class="ml-auto" />
 		</div>
 		<div
 			v-else-if="status === 'suspended' && suspension_reason"
@@ -80,7 +80,7 @@
 				{{ suspension_reason }}. Please update your billing information or contact Modrinth Support
 				for more information.
 			</div>
-			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+			<CopyCode :text="`${server_id}`" class="ml-auto" />
 		</div>
 		<div
 			v-else-if="status === 'suspended'"
@@ -90,7 +90,7 @@
 				<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" />
+			<CopyCode :text="`${server_id}`" class="ml-auto" />
 		</div>
 		<div
 			v-if="pendingChange && status !== 'suspended'"

From b7452dd0a08f782e0a261233faeaba68b36a2dfc Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 18:28:07 -0600
Subject: [PATCH 06/11] convert copy code to use tailwind

---
 packages/ui/src/components/base/CopyCode.vue | 45 +++-----------------
 1 file changed, 5 insertions(+), 40 deletions(-)

diff --git a/packages/ui/src/components/base/CopyCode.vue b/packages/ui/src/components/base/CopyCode.vue
index f046b5f12c..7e3edb33f6 100644
--- a/packages/ui/src/components/base/CopyCode.vue
+++ b/packages/ui/src/components/base/CopyCode.vue
@@ -1,5 +1,9 @@
 <template>
-	<button class="code" :class="{ copied }" :title="formatMessage(copiedMessage)" @click="copyText">
+	<button
+		class="!m-0 inline-flex w-fit select-text items-center gap-2 rounded-[10px] bg-[var(--color-button-bg)] px-2 py-1 font-mono text-sm text-primary transition-[opacity,filter,transform,outline] duration-200 ease-in-out hover:brightness-[0.85] active:scale-95 active:brightness-[0.8] motion-reduce:transition-none [&>svg]:h-[1em] [&>svg]:w-[1em]"
+		:title="formatMessage(copiedMessage)"
+		@click="copyText"
+	>
 		<span>{{ text }}</span>
 		<CheckIcon v-if="copied" />
 		<ClipboardCopyIcon v-else />
@@ -27,42 +31,3 @@ async function copyText() {
 	copied.value = true
 }
 </script>
-
-<style lang="scss" scoped>
-.code {
-	color: var(--color-text);
-	display: inline-flex;
-	grid-gap: 0.5rem;
-	font-family: var(--mono-font);
-	font-size: var(--font-size-sm);
-	margin: 0;
-	padding: 0.25rem 0.5rem;
-	background-color: var(--color-button-bg);
-	width: fit-content;
-	border-radius: 10px;
-	user-select: text;
-	transition:
-		opacity 0.5s ease-in-out,
-		filter 0.2s ease-in-out,
-		transform 0.05s ease-in-out,
-		outline 0.2s ease-in-out;
-
-	@media (prefers-reduced-motion) {
-		transition: none !important;
-	}
-
-	svg {
-		width: 1em;
-		height: 1em;
-	}
-
-	&:hover {
-		filter: brightness(0.85);
-	}
-
-	&:active {
-		transform: scale(0.95);
-		filter: brightness(0.8);
-	}
-}
-</style>

From 166a47c029075653e17def9be8d432ad85c13055 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 18:55:15 -0600
Subject: [PATCH 07/11] update server listing component styles

---
 .vscode/settings.json                         |  4 +-
 .../src/assets/stylesheets/global.scss        |  7 +++
 .../src/components/servers/ServerListing.vue  | 57 +++++++++----------
 .../stories/servers/ServerListing.stories.ts  |  8 +--
 4 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d4d338f6dc..7522198819 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,5 +29,7 @@
 	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"
-	}
+	},
+	"css.lint.unknownAtRules": "ignore",
+	"scss.lint.unknownAtRules": "ignore"
 }
diff --git a/apps/app-frontend/src/assets/stylesheets/global.scss b/apps/app-frontend/src/assets/stylesheets/global.scss
index 01d61ca67e..a17170dcca 100644
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -170,4 +170,11 @@ img {
 	}
 }
 
+button,
+input[type='button'] {
+	cursor: pointer;
+	border: none;
+	outline: 2px solid transparent;
+}
+
 @import '@modrinth/assets/omorphia.scss';
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 93d6e417b4..2f6a2ce806 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -2,7 +2,7 @@
 	<div>
 		<NuxtLink :to="status === 'suspended' ? '' : `/hosting/manage/${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="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-transform duration-100"
 				:class="{
 					'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
 					'opacity-75': status === 'suspended',
@@ -56,46 +56,39 @@
 		</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"
+			class="server-listing-notice"
 		>
-			<LoaderCircleIcon class="size-5 animate-spin" />
-			Your server's hardware is currently being upgraded and will be back online shortly.
+			<div class="flex gap-2">
+				<LoaderCircleIcon class="size-5 animate-spin" />
+				Your server's hardware is currently being upgraded and will be back online shortly.
+			</div>
 		</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"
+			class="server-listing-notice"
 		>
 			<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.
+				Your server has been cancelled. Please update your billing information or contact Modrinth
+				Support for more information.
 			</div>
 			<CopyCode :text="`${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 v-else-if="status === 'suspended' && suspension_reason" class="server-listing-notice">
 			<div class="flex flex-row gap-2">
-				<TriangleAlertIcon class="!size-5" /> Your server has been suspended:
+				Your server has been suspended:
 				{{ suspension_reason }}. Please update your billing information or contact Modrinth Support
 				for more information.
 			</div>
 			<CopyCode :text="`${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 v-else-if="status === 'suspended'" class="server-listing-notice">
 			<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.
+				Your server has been suspended. Please update your billing information or contact Modrinth
+				Support for more information.
 			</div>
 			<CopyCode :text="`${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 v-if="pendingChange && status !== 'suspended'" class="server-listing-notice">
 			<div>
 				Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
 					pendingChange.planSize
@@ -114,13 +107,7 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import {
-	ChevronRightIcon,
-	LoaderCircleIcon,
-	LockIcon,
-	SparklesIcon,
-	TriangleAlertIcon,
-} from '@modrinth/assets'
+import { ChevronRightIcon, LoaderCircleIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
@@ -159,6 +146,12 @@ type ServerListingProps = {
 	upstream?: Archon.Servers.v0.Upstream | null
 	flows?: Archon.Servers.v0.Flows
 	pendingChange?: PendingChange
+	ip?: string
+	online?: boolean
+	playerCount?: {
+		currentPlayerCount?: number
+		maxPlayerCount?: number
+	}
 }
 
 const props = defineProps<ServerListingProps>()
@@ -243,3 +236,9 @@ const { data: image } = useQuery({
 
 const isConfiguring = computed(() => props.flows?.intro)
 </script>
+
+<style scoped>
+.server-listing-notice {
+	@apply relative flex w-full rounded-b-2xl border-[1px] border-solid p-4 flex-col gap-2 border-surface-5 bg-bg-raised text-primary;
+}
+</style>
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index 2173b0a82b..07e17f57ee 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ServerListing from '../../components/servers/ServerListing.vue'
 
 const baseServer = {
-	server_id: 'srv_2n5x8j9k',
+	server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
 	name: 'Survival SMP',
 	status: 'available',
 	game: 'Minecraft',
@@ -53,7 +53,6 @@ export const Default: Story = {
 export const ConfiguringNewServer: Story = {
 	args: {
 		...baseServer,
-		server_id: 'srv_new_flow',
 		name: 'Fresh Vanilla World',
 		status: 'installing',
 		flows: { intro: true },
@@ -65,7 +64,6 @@ export const ConfiguringNewServer: Story = {
 export const WithPendingChange: Story = {
 	args: {
 		...baseServer,
-		server_id: 'srv_pending',
 		name: 'Competitive UHC',
 		pendingChange,
 	},
@@ -74,7 +72,6 @@ export const WithPendingChange: Story = {
 export const SuspendedUpgrading: Story = {
 	args: {
 		...baseServer,
-		server_id: 'srv_suspended_upgrade',
 		name: 'Creative Build Team',
 		status: 'suspended',
 		suspension_reason: 'upgrading',
@@ -84,7 +81,6 @@ export const SuspendedUpgrading: Story = {
 export const SuspendedCancelled: Story = {
 	args: {
 		...baseServer,
-		server_id: 'srv_suspended_cancelled',
 		name: 'Old Event Server',
 		status: 'suspended',
 		suspension_reason: 'cancelled',
@@ -94,7 +90,6 @@ export const SuspendedCancelled: Story = {
 export const SuspendedPaymentFailed: Story = {
 	args: {
 		...baseServer,
-		server_id: 'srv_suspended_reason',
 		name: 'Minigames Network',
 		status: 'suspended',
 		suspension_reason: 'paymentfailed',
@@ -104,7 +99,6 @@ export const SuspendedPaymentFailed: Story = {
 export const SuspendedGeneric: Story = {
 	args: {
 		...baseServer,
-		server_id: 'srv_suspended_generic',
 		name: 'Archive Server',
 		status: 'suspended',
 	},

From 83df48a454536ff03651c99ed48930e1a8f165d3 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 19:07:24 -0600
Subject: [PATCH 08/11] update server info label styles

---
 .../src/components/servers/ServerListing.vue  | 24 +++++++++----------
 .../servers/labels/ServerInfoLabels.vue       |  5 ++--
 .../servers/labels/ServerLoaderLabel.vue      |  2 +-
 .../servers/labels/ServerSubdomainLabel.vue   |  2 +-
 .../servers/labels/ServerUptimeLabel.vue      |  2 +-
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 2f6a2ce806..7fff880840 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -21,7 +21,12 @@
 				<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
+							v-if="isConfiguring"
+							class="flex min-w-0 items-center gap-2 truncate text-sm font-semibold text-brand rounded-full bg-brand-highlight border border-solid border-brand px-2.5 py-1"
+						>
+							<SparklesIcon class="size-5 shrink-0" /> New
+						</div>
 					</div>
 
 					<div
@@ -37,15 +42,10 @@
 						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 }"
+						:server-data="
+							isConfiguring ? { net } : { game, mc_version, loader, loader_version, net }
+						"
 						:show-game-label="showGameLabel"
 						:show-loader-label="showLoaderLabel"
 						:linked="false"
@@ -107,7 +107,7 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { ChevronRightIcon, LoaderCircleIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
+import { LoaderCircleIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
@@ -158,8 +158,8 @@ const props = defineProps<ServerListingProps>()
 
 const { kyros, labrinth } = injectModrinthClient()
 
-const showGameLabel = computed(() => !!props.game)
-const showLoaderLabel = computed(() => !!props.loader)
+const showGameLabel = computed(() => !!props.game && !isConfiguring.value)
+const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value)
 
 const { data: projectData } = useQuery({
 	queryKey: ['project', props.upstream?.project_id] as const,
diff --git a/packages/ui/src/components/servers/labels/ServerInfoLabels.vue b/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
index aaf5e00132..3c5389f7ed 100644
--- a/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
+++ b/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
@@ -7,15 +7,16 @@
 			:is-link="linked"
 		/>
 		<ServerLoaderLabel
+			v-if="showLoaderLabel"
 			:loader="serverData.loader"
 			:loader-version="serverData.loader_version ?? ''"
-			:no-separator="column"
+			:no-separator="column || !showGameLabel"
 			:is-link="linked"
 		/>
 		<ServerSubdomainLabel
 			v-if="serverData.net?.domain"
 			:subdomain="serverData.net.domain"
-			:no-separator="column"
+			:no-separator="column || (!showLoaderLabel && !showGameLabel)"
 			:is-link="linked"
 		/>
 		<ServerUptimeLabel
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index 8b7de765de..b449ef2f4a 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -1,6 +1,6 @@
 <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 v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.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>
diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index 2b528ce8c6..05b9042637 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -4,7 +4,7 @@
 		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 v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.5 bg-button-border"></div>
 		<div class="flex flex-row items-center gap-2">
 			<LinkIcon class="flex size-5 shrink-0" />
 			<div
diff --git a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
index 9b067513d2..ef2052a7bc 100644
--- a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
@@ -5,7 +5,7 @@
 		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 v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.5 bg-button-border"></div>
 
 		<div class="flex gap-2">
 			<TimerIcon class="flex size-5 shrink-0" />

From 2386b4df0901bcbd5a3e6b420a9c2c59ef1bd8ba Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 20:09:42 -0600
Subject: [PATCH 09/11] start status/player count info label, more style
 updates and fixes

---
 apps/app-frontend/src/App.vue                 | 14 ++++-----
 .../src/pages/hosting/manage/[id].vue         |  5 ++--
 .../manage/[id]/options/properties.vue        |  2 +-
 packages/ui/.storybook/preview.ts             |  8 +++++
 .../src/components/servers/ServerListing.vue  | 29 ++++++++++++++-----
 .../components/servers/labels/Separator.vue   |  3 ++
 .../servers/labels/ServerGameLabel.vue        |  8 +++--
 .../servers/labels/ServerInfoLabels.vue       |  9 ++++++
 .../servers/labels/ServerLoaderLabel.vue      |  9 +++---
 .../servers/labels/ServerPlayerCount.vue      | 17 +++++++++++
 .../servers/labels/ServerSubdomainLabel.vue   | 10 ++++---
 .../servers/labels/ServerUptimeLabel.vue      |  9 +++---
 .../servers/marketing/MedalServerListing.vue  |  2 +-
 .../stories/servers/ServerListing.stories.ts  |  2 +-
 14 files changed, 93 insertions(+), 34 deletions(-)
 create mode 100644 packages/ui/src/components/servers/labels/Separator.vue
 create mode 100644 packages/ui/src/components/servers/labels/ServerPlayerCount.vue

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index a4bc69aafc..06e392bf3d 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -970,13 +970,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
 				<WorldIcon />
 			</NavButton>
-			<NavButton
-				v-if="themeStore.featureFlags.servers_in_app"
-				v-tooltip.right="'Servers'"
-				to="/hosting/manage"
-			>
-				<ServerIcon />
-			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"
@@ -1000,6 +993,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<LibraryIcon />
 			</NavButton>
+			<NavButton
+				v-if="themeStore.featureFlags.servers_in_app"
+				v-tooltip.right="'Servers'"
+				to="/hosting/manage"
+			>
+				<ServerIcon />
+			</NavButton>
 			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index bcf3667fcf..87e799c124 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -160,7 +160,7 @@
 						:show-loader-label="showLoaderLabel"
 						:uptime-seconds="uptimeSeconds"
 						:linked="true"
-						class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+						class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</div>
@@ -1135,7 +1135,8 @@ const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallation
 }
 
 const updateStats = (currentStats: Stats['current']) => {
-	isConnected.value = true
+	if (!isMounted.value) return
+	if (!isConnected.value) isConnected.value = true
 	stats.value = {
 		current: currentStats,
 		past: { ...stats.value.current },
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
index 81c957ea2d..c074e1373e 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
@@ -118,7 +118,7 @@ import {
 	StyledInput,
 	Toggle,
 } from '@modrinth/ui'
-import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import Fuse from 'fuse.js'
 import { computed, ref, watch } from 'vue'
 
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index a98e2efae1..9b340008eb 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -16,6 +16,7 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import FloatingVue from 'floating-vue'
 import { computed, defineComponent, h, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
+import { createMemoryHistory, createRouter } from 'vue-router'
 
 import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
 import PopupNotificationPanel from '../src/components/nav/PopupNotificationPanel.vue'
@@ -166,6 +167,13 @@ setup((app) => {
 	})
 	app.use(VueQueryPlugin, { queryClient })
 	app.use(i18n)
+
+	const router = createRouter({
+		history: createMemoryHistory(),
+		routes: [{ path: '/:pathMatch(.*)*', component: { render: () => null } }],
+	})
+	app.use(router)
+
 	app.component('NuxtLink', StorybookLink)
 	app.component('RouterLink', StorybookLink)
 	app.component('ClientOnly', StorybookClientOnly)
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 7fff880840..473c0ca90f 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -5,7 +5,7 @@
 				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-transform duration-100"
 				:class="{
 					'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
-					'opacity-75': status === 'suspended',
+					'opacity-50 bg-surface-2': status === 'suspended',
 					'active:scale-95': status !== 'suspended' && !pendingChange,
 				}"
 				data-pyro-server-listing
@@ -23,9 +23,9 @@
 						<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
 						<div
 							v-if="isConfiguring"
-							class="flex min-w-0 items-center gap-2 truncate text-sm font-semibold text-brand rounded-full bg-brand-highlight border border-solid border-brand px-2.5 py-1"
+							class="flex min-w-0 items-center gap-2 truncate text-sm font-medium text-brand rounded-full bg-brand-highlight border border-solid border-brand px-2.5 h-[28px]"
 						>
-							<SparklesIcon class="size-5 shrink-0" /> New
+							<SparklesIcon class="size-5 shrink-0 font-semibold" /> New
 						</div>
 					</div>
 
@@ -44,12 +44,25 @@
 
 					<ServerInfoLabels
 						:server-data="
-							isConfiguring ? { net } : { game, mc_version, loader, loader_version, net }
+							isConfiguring
+								? { net }
+								: {
+										game,
+										mc_version,
+										loader,
+										loader_version,
+										net,
+										online,
+										players: playerCount
+											? { current: playerCount.current, max: playerCount.max }
+											: undefined,
+									}
 						"
 						:show-game-label="showGameLabel"
 						:show-loader-label="showLoaderLabel"
+						:show-player-count="showPlayerCount"
 						: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"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</div>
@@ -146,11 +159,10 @@ type ServerListingProps = {
 	upstream?: Archon.Servers.v0.Upstream | null
 	flows?: Archon.Servers.v0.Flows
 	pendingChange?: PendingChange
-	ip?: string
 	online?: boolean
 	playerCount?: {
-		currentPlayerCount?: number
-		maxPlayerCount?: number
+		current?: number
+		max?: number
 	}
 }
 
@@ -160,6 +172,7 @@ const { kyros, labrinth } = injectModrinthClient()
 
 const showGameLabel = computed(() => !!props.game && !isConfiguring.value)
 const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value)
+const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value)
 
 const { data: projectData } = useQuery({
 	queryKey: ['project', props.upstream?.project_id] as const,
diff --git a/packages/ui/src/components/servers/labels/Separator.vue b/packages/ui/src/components/servers/labels/Separator.vue
new file mode 100644
index 0000000000..f434629a32
--- /dev/null
+++ b/packages/ui/src/components/servers/labels/Separator.vue
@@ -0,0 +1,3 @@
+<template>
+	<div class="experimental-styles-within h-1.5 w-1.5 bg-button-border rounded-full"></div>
+</template>
diff --git a/packages/ui/src/components/servers/labels/ServerGameLabel.vue b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
index 6bbbbdec5f..5f64f66381 100644
--- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
@@ -2,9 +2,11 @@
 	<div
 		v-if="game"
 		v-tooltip="'Change server version'"
-		class="min-w-0 flex-none flex-row items-center gap-2 first:!flex"
+		class="min-w-0 flex-none flex-row items-center gap-1.5 first:!flex"
 	>
-		<GameIcon aria-hidden="true" class="size-5 shrink-0" />
+		<Separator v-if="!noSeparator" />
+
+		<GameIcon aria-hidden="true" />
 		<AutoLink
 			v-if="isLink"
 			:to="serverId ? `/hosting/manage/${serverId}/options/loader` : ''"
@@ -30,11 +32,13 @@ import { GameIcon } from '@modrinth/assets'
 import { useRoute } from 'vue-router'
 
 import AutoLink from '../../base/AutoLink.vue'
+import Separator from './Separator.vue'
 
 defineProps<{
 	game: string
 	mcVersion: string
 	isLink?: boolean
+	noSeparator?: boolean
 }>()
 
 const route = useRoute()
diff --git a/packages/ui/src/components/servers/labels/ServerInfoLabels.vue b/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
index 3c5389f7ed..9b1e6638e2 100644
--- a/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
+++ b/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
@@ -1,9 +1,16 @@
 <template>
 	<div>
+		<ServerPlayerCount
+			v-if="showPlayerCount"
+			:current-players="serverData.players.current"
+			:max-players="serverData.players.max"
+			:online="serverData.online"
+		/>
 		<ServerGameLabel
 			v-if="showGameLabel"
 			:game="serverData.game"
 			:mc-version="serverData.mc_version ?? ''"
+			:no-separator="column || !showPlayerCount"
 			:is-link="linked"
 		/>
 		<ServerLoaderLabel
@@ -30,6 +37,7 @@
 <script setup lang="ts">
 import ServerGameLabel from './ServerGameLabel.vue'
 import ServerLoaderLabel from './ServerLoaderLabel.vue'
+import ServerPlayerCount from './ServerPlayerCount.vue'
 import ServerSubdomainLabel from './ServerSubdomainLabel.vue'
 import ServerUptimeLabel from './ServerUptimeLabel.vue'
 
@@ -38,6 +46,7 @@ interface ServerInfoLabelsProps {
 	serverData: Record<string, any>
 	showGameLabel: boolean
 	showLoaderLabel: boolean
+	showPlayerCount?: boolean
 	uptimeSeconds?: number
 	column?: boolean
 	linked?: boolean
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index b449ef2f4a..e4d45d633f 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -1,8 +1,8 @@
 <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-1.5 w-1.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-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-2 truncate">
+		<Separator v-if="!noSeparator" />
+		<div class="flex flex-row items-center gap-1.5">
+			<LoaderIcon v-if="loader" :loader="loader" />
 			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
 			<AutoLink
 				v-if="isLink"
@@ -38,6 +38,7 @@ import { useRoute } from 'vue-router'
 
 import AutoLink from '../../base/AutoLink.vue'
 import LoaderIcon from '../icons/LoaderIcon.vue'
+import Separator from './Separator.vue'
 
 defineProps<{
 	noSeparator?: boolean
diff --git a/packages/ui/src/components/servers/labels/ServerPlayerCount.vue b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
new file mode 100644
index 0000000000..6511429091
--- /dev/null
+++ b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
@@ -0,0 +1,17 @@
+<template>
+	<div class="flex gap-1">
+		<!-- indicator icon -->
+
+		{{ currentPlayers }} / {{ maxPlayers }} Players
+	</div>
+</template>
+
+<script setup lang="ts">
+interface ServerPlayerCountProps {
+	currentPlayers: number
+	maxPlayers: number
+	online: boolean
+}
+
+defineProps<ServerPlayerCountProps>()
+</script>
diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index 05b9042637..59739569d3 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -2,11 +2,12 @@
 	<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"
+		class="flex min-w-0 flex-row items-center gap-2 truncate hover:cursor-pointer"
 	>
-		<div v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.5 bg-button-border"></div>
-		<div class="flex flex-row items-center gap-2">
-			<LinkIcon class="flex size-5 shrink-0" />
+		<Separator v-if="!noSeparator" />
+
+		<div class="flex flex-row items-center gap-1.5">
+			<LinkIcon />
 			<div
 				class="flex min-w-0 text-sm font-semibold"
 				:class="serverId ? 'hover:underline' : ''"
@@ -24,6 +25,7 @@ import { injectNotificationManager } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import Separator from './Separator.vue'
 
 const { addNotification } = injectNotificationManager()
 
diff --git a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
index ef2052a7bc..f8fb7ee25c 100644
--- a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
@@ -2,13 +2,13 @@
 	<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"
+		class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-2"
 		data-pyro-uptime
 	>
-		<div v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.5 bg-button-border"></div>
+		<Separator v-if="!noSeparator" />
 
-		<div class="flex gap-2">
-			<TimerIcon class="flex size-5 shrink-0" />
+		<div class="flex gap-1.5">
+			<TimerIcon />
 			<time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
 				{{ formattedUptime }}
 			</time>
@@ -19,6 +19,7 @@
 <script setup lang="ts">
 import { TimerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
+import Separator from './Separator.vue'
 
 const props = defineProps<{
 	uptimeSeconds: number
diff --git a/packages/ui/src/components/servers/marketing/MedalServerListing.vue b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
index 2648ed2130..8e8626a694 100644
--- a/packages/ui/src/components/servers/marketing/MedalServerListing.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
@@ -75,7 +75,7 @@
 						: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"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-primary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</AutoLink>
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index 07e17f57ee..d3d0742f8a 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -13,7 +13,7 @@ const baseServer = {
 	net: {
 		ip: '203.0.113.42',
 		port: 25565,
-		domain: 'play.example.net',
+		domain: 'play',
 	},
 } as const
 

From d37c1bdeb19ac2c4989e5f7cf24a1dc39f9d4945 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 17 Mar 2026 20:58:52 -0600
Subject: [PATCH 10/11] add new server card buttons

---
 .../src/components/servers/ServerListing.vue  | 93 +++++++++++++++++--
 .../stories/servers/ServerListing.stories.ts  |  2 +-
 2 files changed, 87 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 473c0ca90f..d4b99483c6 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -84,7 +84,28 @@
 				Your server has been cancelled. Please update your billing information or contact Modrinth
 				Support for more information.
 			</div>
-			<CopyCode :text="`${server_id}`" class="ml-auto" />
+			<div class="flex gap-2">
+				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+					<button
+						class="!border-surface-5"
+						v-tooltip="'Copy code to clipboard'"
+						@click="copyToClipboard(server_id)"
+					>
+						<template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
+						<template v-else> Copy ID <CopyIcon /> </template>
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a href="https://support.modrinth.com/en/" target="_blank"
+						><MessagesSquareIcon /> Support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<AutoLink :to="`/settings/billing#server-${server_id}`">
+						<RotateCounterClockwiseIcon /> Resubscribe
+					</AutoLink>
+				</ButtonStyled>
+			</div>
 		</div>
 		<div v-else-if="status === 'suspended' && suspension_reason" class="server-listing-notice">
 			<div class="flex flex-row gap-2">
@@ -92,14 +113,56 @@
 				{{ suspension_reason }}. Please update your billing information or contact Modrinth Support
 				for more information.
 			</div>
-			<CopyCode :text="`${server_id}`" class="ml-auto" />
+			<div class="flex gap-2">
+				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+					<button
+						class="!border-surface-5"
+						v-tooltip="'Copy code to clipboard'"
+						@click="copyToClipboard(server_id)"
+					>
+						<template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
+						<template v-else> Copy ID <CopyIcon /> </template>
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a href="https://support.modrinth.com/en/" target="_blank"
+						><MessagesSquareIcon /> Support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<AutoLink :to="`/settings/billing#server-${server_id}`">
+						<CardIcon /> Manage billing
+					</AutoLink>
+				</ButtonStyled>
+			</div>
 		</div>
 		<div v-else-if="status === 'suspended'" class="server-listing-notice">
 			<div class="flex flex-row gap-2">
 				Your server has been suspended. Please update your billing information or contact Modrinth
 				Support for more information.
 			</div>
-			<CopyCode :text="`${server_id}`" class="ml-auto" />
+			<div class="flex gap-2">
+				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+					<button
+						class="!border-surface-5"
+						v-tooltip="'Copy code to clipboard'"
+						@click="copyToClipboard(server_id)"
+					>
+						<template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
+						<template v-else> Copy ID <CopyIcon /> </template>
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a href="https://support.modrinth.com/en/" target="_blank"
+						><MessagesSquareIcon /> Support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<AutoLink :to="`/settings/billing#server-${server_id}`">
+						<CardIcon /> Manage billing
+					</AutoLink>
+				</ButtonStyled>
+			</div>
 		</div>
 		<div v-if="pendingChange && status !== 'suspended'" class="server-listing-notice">
 			<div>
@@ -108,7 +171,7 @@
 				}}" plan on {{ formatDate(pendingChange.date) }}.
 			</div>
 			<ServersSpecs
-				class="!font-normal !text-contrast"
+				class="!font-normal !text-primary"
 				:ram="Math.round((pendingChange.ramGb ?? 0) * 1024)"
 				:storage="Math.round((pendingChange.storageGb ?? 0) * 1024)"
 				:cpus="pendingChange.cpuBurst"
@@ -120,14 +183,20 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { LoaderCircleIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
+import { LoaderCircleIcon, LockIcon, MessagesSquareIcon, SparklesIcon } from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
+import { AutoLink, ButtonStyled } from '@modrinth/ui'
+import {
+	CardIcon,
+	CheckIcon,
+	CopyIcon,
+	RotateCounterClockwiseIcon,
+} from '../../../../assets/generated-icons'
 import { useFormatDateTime } from '../../composables'
 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'
@@ -248,6 +317,16 @@ const { data: image } = useQuery({
 })
 
 const isConfiguring = computed(() => props.flows?.intro)
+
+const copied = ref(false)
+
+async function copyToClipboard(text: string) {
+	await navigator.clipboard.writeText(text)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 3000)
+}
 </script>
 
 <style scoped>
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index d3d0742f8a..3055e2a21a 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -87,7 +87,7 @@ export const SuspendedCancelled: Story = {
 	},
 }
 
-export const SuspendedPaymentFailed: Story = {
+export const SuspendedWithReason: Story = {
 	args: {
 		...baseServer,
 		name: 'Minigames Network',

From 0a05061bf70bdec1003b3ede1ccb2c30867de613 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 20 Mar 2026 11:03:48 -0600
Subject: [PATCH 11/11] hook up server cards and implement updated styles

---
 .../src/pages/settings/billing/index.vue      |   8 ++
 .../src/components/servers/ServerListing.vue  | 121 +++++++++++++++---
 .../layouts/wrapped/hosting/manage/index.vue  |  91 ++++++++++++-
 .../stories/servers/ServerListing.stories.ts  |  38 ++++++
 4 files changed, 235 insertions(+), 23 deletions(-)

diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 8cb481bc77..b90c57a72a 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -233,6 +233,7 @@
 								v-if="subscription.serverInfo"
 								v-bind="subscription.serverInfo"
 								:pending-change="getPendingChange(subscription)"
+								:cancellation-date="getCancellationDate(subscription)"
 							/>
 							<div v-else class="w-fit">
 								<p>
@@ -919,6 +920,13 @@ const getPyroCharge = (subscription) => {
 	)
 }
 
+const getCancellationDate = (subscription) => {
+	const charge = getPyroCharge(subscription)
+	if (!charge) return null
+	if (charge.status === 'cancelled') return charge.due
+	return null
+}
+
 const getProductSize = (product) => {
 	if (!product || !product.metadata) return 'Unknown'
 	const ramSize = product.metadata.ram
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index d4b99483c6..fa91c3af00 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -1,23 +1,30 @@
 <template>
 	<div>
-		<NuxtLink :to="status === 'suspended' ? '' : `/hosting/manage/${server_id}`">
+		<NuxtLink :to="isDisabled ? '' : `/hosting/manage/${server_id}`">
 			<div
 				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-transform duration-100"
 				:class="{
-					'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
-					'opacity-50 bg-surface-2': status === 'suspended',
-					'active:scale-95': status !== 'suspended' && !pendingChange,
+					'!rounded-b-none border-b-0': hasNotice,
+					'opacity-50 bg-surface-2': isDisabled,
+					'active:scale-95': !isDisabled && !hasNotice,
 				}"
 				data-pyro-server-listing
 				:data-pyro-server-listing-id="server_id"
 			>
-				<ServerIcon v-if="status !== 'suspended'" :image="image ?? undefined" />
 				<div
-					v-else
+					v-if="isProvisioning"
+					class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				>
+					<ServerIcon :image="image ?? undefined" />
+					<LoaderCircleIcon class="size-10 animate-spin text-constrast brightness-200 absolute" />
+				</div>
+				<div
+					v-else-if="status === 'suspended'"
 					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>
+				<ServerIcon v-else :image="image ?? undefined" />
 				<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>
@@ -67,8 +74,13 @@
 				</div>
 			</div>
 		</NuxtLink>
+		<div v-if="isProvisioning" class="server-listing-notice">
+			<div class="flex gap-2">
+				Please wait while we set up your server. This should only take a minute.
+			</div>
+		</div>
 		<div
-			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+			v-else-if="status === 'suspended' && suspension_reason === 'upgrading'"
 			class="server-listing-notice"
 		>
 			<div class="flex gap-2">
@@ -80,12 +92,27 @@
 			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
 			class="server-listing-notice"
 		>
-			<div class="flex flex-row gap-2">
-				Your server has been cancelled. Please update your billing information or contact Modrinth
-				Support for more information.
+			<div>
+				Your subscription was cancelled
+				<template v-if="cancellationDate">
+					on
+					<span class="font-medium text-contrast">
+						{{ formatDate(cancellationDate) }}
+					</span> </template
+				>. Your files will be kept for <span class="font-medium text-red">30 days</span> and can be
+				downloaded below before they're deleted.
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+				<ButtonStyled v-if="onDownloadBackup" type="outlined" circular>
+					<button
+						class="!border-surface-5"
+						v-tooltip="'Download latest backup'"
+						@click="onDownloadBackup"
+					>
+						<DownloadIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled type="outlined">
 					<button
 						class="!border-surface-5"
 						v-tooltip="'Copy code to clipboard'"
@@ -100,10 +127,8 @@
 						><MessagesSquareIcon /> Support
 					</a>
 				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<AutoLink :to="`/settings/billing#server-${server_id}`">
-						<RotateCounterClockwiseIcon /> Resubscribe
-					</AutoLink>
+				<ButtonStyled v-if="onResubscribe" color="brand">
+					<button @click="onResubscribe"><RotateCounterClockwiseIcon /> Resubscribe</button>
 				</ButtonStyled>
 			</div>
 		</div>
@@ -114,7 +139,7 @@
 				for more information.
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+				<ButtonStyled type="outlined">
 					<button
 						class="!border-surface-5"
 						v-tooltip="'Copy code to clipboard'"
@@ -142,9 +167,9 @@
 				Support for more information.
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled type="outlined" @click="copyToClipboard(server_id)">
+				<ButtonStyled type="outlined">
 					<button
-						class="!border-surface-5"
+						class="!border-surface-5 w-28"
 						v-tooltip="'Copy code to clipboard'"
 						@click="copyToClipboard(server_id)"
 					>
@@ -164,6 +189,41 @@
 				</ButtonStyled>
 			</div>
 		</div>
+		<div
+			v-if="isSetToCancel && status !== 'suspended' && !isProvisioning"
+			class="server-listing-notice"
+		>
+			<div>
+				Your subscription is set to cancel
+				<template v-if="cancellationDate">
+					on
+					<span class="font-medium text-contrast">
+						{{ formatDate(cancellationDate) }}
+					</span> </template
+				>. Your files will be preserved for <span class="font-medium text-red">30 days</span> after
+				cancellation.
+			</div>
+			<div class="flex gap-2">
+				<ButtonStyled type="outlined">
+					<button
+						class="!border-surface-5 w-28"
+						v-tooltip="'Copy code to clipboard'"
+						@click="copyToClipboard(server_id)"
+					>
+						<template v-if="copied"> Copied <CheckIcon class="text-green" /></template>
+						<template v-else> Copy ID <CopyIcon /></template>
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a href="https://support.modrinth.com/en/" target="_blank"
+						><MessagesSquareIcon /> Support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand" v-if="onResubscribe">
+					<button @click="onResubscribe"><RotateCounterClockwiseIcon /> Resubscribe</button>
+				</ButtonStyled>
+			</div>
+		</div>
 		<div v-if="pendingChange && status !== 'suspended'" class="server-listing-notice">
 			<div>
 				Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
@@ -183,7 +243,13 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { LoaderCircleIcon, LockIcon, MessagesSquareIcon, SparklesIcon } from '@modrinth/assets'
+import {
+	DownloadIcon,
+	LoaderCircleIcon,
+	LockIcon,
+	MessagesSquareIcon,
+	SparklesIcon,
+} from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
@@ -233,12 +299,27 @@ type ServerListingProps = {
 		current?: number
 		max?: number
 	}
+	cancellationDate?: string | Date | null
+	onResubscribe?: (() => void) | null
+	onDownloadBackup?: (() => void) | null
 }
 
 const props = defineProps<ServerListingProps>()
 
 const { kyros, labrinth } = injectModrinthClient()
 
+const isConfiguring = computed(() => props.flows?.intro)
+const isProvisioning = computed(() => props.status === 'installing' && !isConfiguring.value)
+const isDisabled = computed(() => props.status === 'suspended' || isProvisioning.value)
+const isSetToCancel = computed(() => !!props.cancellationDate && props.status !== 'suspended')
+const hasNotice = computed(
+	() =>
+		isProvisioning.value ||
+		props.status === 'suspended' ||
+		isSetToCancel.value ||
+		!!props.pendingChange,
+)
+
 const showGameLabel = computed(() => !!props.game && !isConfiguring.value)
 const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value)
 const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value)
@@ -316,8 +397,6 @@ const { data: image } = useQuery({
 	enabled: computed(() => !!props.server_id && props.status === 'available'),
 })
 
-const isConfiguring = computed(() => props.flows?.intro)
-
 const copied = ref(false)
 
 async function copyToClipboard(text: string) {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 45221b3d2d..7b093189c2 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -158,6 +158,9 @@
 						v-for="server in filteredData.filter((s) => !s.is_medal)"
 						:key="server.server_id"
 						v-bind="server"
+						:cancellation-date="serverBillingMap.get(server.server_id)?.cancellationDate"
+						:on-resubscribe="serverBillingMap.get(server.server_id)?.onResubscribe"
+						:on-download-backup="serverBillingMap.get(server.server_id)?.onDownloadBackup"
 					/>
 				</TransitionGroup>
 				<div v-else class="flex h-full items-center justify-center">
@@ -171,9 +174,16 @@
 <script setup lang="ts">
 import { type Archon, type Labrinth, NuxtModrinthClient } from '@modrinth/api-client'
 import { HammerIcon, LoaderCircleIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
-import { AutoLink, ButtonStyled, CopyCode, injectModrinthClient, StyledInput } from '@modrinth/ui'
+import {
+	AutoLink,
+	ButtonStyled,
+	CopyCode,
+	injectModrinthClient,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
 import type { ModrinthServersFetchError } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import Fuse from 'fuse.js'
 import type { ComponentPublicInstance } from 'vue'
@@ -307,6 +317,83 @@ const upgradeModal = ref<ServersUpgradeModalWrapperRef | null>(null)
 function openUpgradeModal(serverId: string) {
 	upgradeModal.value?.open(serverId)
 }
+
+const { addNotification } = injectNotificationManager()
+const queryClient = useQueryClient()
+
+const { data: subscriptions } = useQuery({
+	queryKey: ['billing', 'subscriptions'],
+	queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
+})
+
+const { data: charges } = useQuery({
+	queryKey: ['billing', 'payments'],
+	queryFn: () => client.labrinth.billing_internal.getPayments(),
+})
+
+type ServerBillingInfo = {
+	cancellationDate?: string | null
+	onResubscribe?: () => void
+	onDownloadBackup?: () => void
+}
+
+const serverBillingMap = computed(() => {
+	const map = new Map<string, ServerBillingInfo>()
+	if (!subscriptions.value || !charges.value) return map
+
+	const pyroSubs = subscriptions.value.filter((s) => s?.metadata?.type === 'pyro')
+	for (const sub of pyroSubs) {
+		const serverId = (sub.metadata as { id?: string })?.id
+		if (!serverId) continue
+
+		const charge = charges.value.find(
+			(c) => c.subscription_id === sub.id && c.status !== 'succeeded',
+		)
+
+		const info: ServerBillingInfo = {}
+
+		if (charge?.status === 'cancelled') {
+			info.cancellationDate = charge.due
+
+			const subId = sub.id
+			const wasSuspended = dayjs(charge.due).isBefore(dayjs())
+			info.onResubscribe = async () => {
+				try {
+					await client.labrinth.billing_internal.editSubscription(subId, {
+						cancelled: false,
+					})
+					await Promise.all([
+						queryClient.invalidateQueries({ queryKey: ['billing'] }),
+						queryClient.invalidateQueries({ queryKey: ['servers'] }),
+					])
+					if (wasSuspended) {
+						addNotification({
+							title: 'Resubscription request submitted',
+							text: 'If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.',
+							type: 'success',
+						})
+					} else {
+						addNotification({
+							title: 'Success',
+							text: 'Server subscription resubscribed successfully',
+							type: 'success',
+						})
+					}
+				} catch {
+					addNotification({
+						title: 'Error resubscribing',
+						text: 'An error occurred while resubscribing to your Modrinth server.',
+						type: 'error',
+					})
+				}
+			}
+		}
+
+		map.set(serverId, info)
+	}
+
+	return map
+})
 </script>
 
 <style scoped>
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index 3055e2a21a..b3c54370ed 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -78,12 +78,50 @@ export const SuspendedUpgrading: Story = {
 	},
 }
 
+export const Provisioning: Story = {
+	args: {
+		...baseServer,
+		name: 'My New Server',
+		status: 'installing',
+	},
+}
+
+export const SetToCancel: Story = {
+	args: {
+		...baseServer,
+		name: 'Survival SMP',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+	},
+}
+
+export const SetToCancelWithResubscribe: Story = {
+	args: {
+		...baseServer,
+		name: 'Survival SMP',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+	},
+}
+
 export const SuspendedCancelled: Story = {
 	args: {
 		...baseServer,
 		name: 'Old Event Server',
 		status: 'suspended',
 		suspension_reason: 'cancelled',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+	},
+}
+
+export const SuspendedCancelledWithActions: Story = {
+	args: {
+		...baseServer,
+		name: 'Old Event Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+		onDownloadBackup: () => alert('Download backup clicked'),
 	},
 }