feat: server management in app (#5628)

* start new server settings tabs

* update properties tab to match design

* better stying in general tab

* feat: add suffix input for hostname field

* implement tables for allocations and DNS records

* add tags for dns record type

* small gap adjustment

* polish advanced page

* adjust properties page hierarchy

* fix searching properties, empty state and projection radius appearing

* pnpm prepr

* update copy to match designs

* fix suffix input component

* style fixes and match heading size

* small fix

* fix search allocations placeholder

* adjust table styles

* move all installation settings helper text to below input

* update icon to use overflow menu buttons

* fix modal to be consistent

* open advanced properties when search

* remove other and custom properties, and update styles

* remove hide/show all java versions

* handle mc 26

* refactor: move server settings pages into /ui and add app ServerSettingsModal

* hook up server pages for app

* add server page header to app

* hook up server settings modal

* use large size

* fix card box shadow style

* fix hostname input for app

* fix app/website card containers

* implement external tabs for billing and admin billing

* fix save banner fixed to parent instead of page body

* remove unused prop to FriendsList causing warning in app

* fix client-only not available for app

* fix bottom cut off

* wire node auth

* implement full copy buttons

* dedup copy button tailwind styles

* fix hover class not working in @apply

* fix spacing

* fix error validation styles

* apply consistent styles and spacing

* feat: update hosting server card (#5609)

* fix type errors

* fix some stylesheets not imported for storybook

* add server listing stories

* add fix for frontend stylesheet imports

* remove props.

* convert copy code to use tailwind

* update server listing component styles

* update server info label styles

* start status/player count info label, more style updates and fixes

* add new server card buttons

* hook up server cards and implement updated styles

* hook up on download button

* fix tauri throwing error when api returns 204 No Content

* hook up purchase server modal in app

* fix upgrading state loading icon

* pnpm prepr

* filter out servers past 30 days after cancellation

* do not apply opacity on lock or spiner icons

* fix disabled server icon background

* update pending change stage

* handle known suspension states

* refactor: reduce code duplication for server listing

* update disabled state text color

* fix loading icon color

* clean up copy

* fix disabled opacity for server card

* update server listing files kept to be countdown

* implement resubscribe modal

* implement proper provisioning state for resubscribe

* fix duplicate attribute and pnpm prepr

* feat: add shared UI package auth DI

* feat: update purchase server flow (#5714)

* implement server list empty state component

* fix stories and adjust spacing

* implement select plan design refresh

* implement auth for empty server list

* use refs instead of reactive

* pnpm prepr

* fix auth usage for empty servers list

* move app auth provider setup to src/providers/setup

* pnpm prepr

* fix max height

* style fix

* fix getCreds no auth is blocking api client

* implement servers guest plan modal and signin which redirects back to modal's next step

* refactor guest plan select logic into provider

* implement sign in or create account popup

* remove force empty serverList

* add download button for suspended mod and generic

* add handling for when user logs out

* QA pass style fixes

* more consistent page styles

* fix duplicate export

* refactor: remove all fallback stuff from resubscribe modal

* implement shared download latest backup util

* i18n pass

* pnpm prepr

* fix region being selected if ping failed

* pnpm prepr

* feat: servers in app finalization (#5744)

* feat: start on shared console implementation into logs and overview pages

* fix: terminal gap issues

* feat: swap word wrap for full screen

* fix: stats cards alignment

* fix: stats

* feat: fix console clear + remove copy

* fix: lint

* fix: use reset not clear

* feat: shared server header & overview page for app and website (#5736)

* feat: implement shared server header for app and website

* feat: implement wrapped overview page with shared composable and hook it up

* pnpm prepr

* fix: bugs

* qa: cleanup

* feat: root.vue shared layout

* feat: delete old options pages + fix discovery frontend

* fix: discovery

* fix: misc style/layout issues

* fix page padding

* fix: modal height jankiness

* feat: implement server install content in app and server setup modal with DI

* fix: spacing

* remove servers in app feature flag

* Revert "remove servers in app feature flag"

This reverts commit 86e284c4bd.

* fix: qa

* feat: remove legacy components from apps/frontend/src/components/ui/servers

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

* qa pass (#5738)

* fix: qa

* feat: qa

* fix: server icon fetch fails due to global node auth race condition overriding each other

* fix: lint

* fix: server icon upload/sync and centralize logic

* fix: server settings modal not closing for server reset

* fix: better server sorting

* feat: copy address in server listing card

* fix: notification panel in modal and when overlapping with action bar

* fix: empty server list empty state flashing when refresh, fixed by adding isReady auth flag

* feat: use floating action bar for save banner

* fix: saving state in save bar

* fix: edit server icon styling

* fix: confirm modal to have consistent buttons

* feat: loading animation for server panel + caching improvements for app

* pnpm prepr

* feat: search page deduplication (#5754)

* fix: action bar behind modal

* fix: remove warning modal for stopping

* fix: server cards states

* we hate webkit we hate webkit

* fix: update allocation creation to not use modal

* fix: properties tab spacing and styles

* feat: add files tab copy

* fix: advanced properties icon

* fix: remove back to all servers link

* feat: add files tab link in copy

* fix: server header styles to be consistent with instance

* fix: add header icons back

* feat: update instance settings icon to be consistent

* fix: icon container

* feat: upload state persistence across tabs

* fix: server labels text wrapping

* fix: use surface-5 border

* fix: loading spinner showing with onboarding below

* feat: new server button shows purchase modal in website

* fix: billing page not showing quarterly interval

* fix: server downgrade not showing updated subscription notification

* fix: server settings invalidate saved state and remove server context provider since its already provided in the page

* pnpm prepr

* add stripe publishable key to app build

* feat: console highlighting

* fix: rename servers title to modrinth hosting

* feat: search fix

* fix: qa/styles

* fix: ip click active and remove power dont ask again

* fix: qa

* feat: highlighting fix console

* fix: disable conflicts action

* fix: error dismiss bug

* feat: modal clarification

* fix: files perms issue

* fix: lint

* feat: modal fix

* enable show uptime

* fix: add loading state to edit server icon

* fix: notification panel take in has sidebar from settings

* fix: consistency pass on app settings

* fix: consistency pass on instance settings

* pnpm prepr

* fix: nagivate to billing button in app to go to website

* fix: stripe return url in app causing app to open modrinth.com in tauri

* refactor: better show polling UI code

* fix: new server polling comparison to use server ids instead of length

* fix: buttonstyled story

* fix: button styling

* fix: content.vue regression

* feat: project url redirects

* fix: breadcrumbs

* fix: purchase with newly added card

* fix: console ordering problems

* fix: app-frontend missing env config and staging environment

* fix: log syncing for instances and server panel accidentally

* fix: QA issues

* fix: server page loading state

* fix: stats card logic

* fix: lint

* fix: qa

* fix: console height padding

* fix: terminal padding + loading indicator

* feat: update medal server listing styling

* fix: no upgrade button for medal server listing in app

* fix: go to overview instead of content tab after onboarding

* fix: qa

* fix: teleport modals to body

* fix: logs tab + qa

* fix: local storage for user preferences

* fix: qa loading indic

* feat: considitonal debug and trace

* fix: jump to top on install bug

* feat: swap out server hard drive icon to server stack icon

* feat: servers in app feature flag default true

* fix: highlight row ufll

* fix: webkit thing onto a tag

* fix: input field

* fix: clear fix

* fix: lint

* fix: fmt

* feat: improve share modal and bring it back for sharing log

* pnpm prepr

* fix: menu overflowing

* feat: remove servers in app feature flag

* fix: server stat charts no longer showing color

* fix: library nav no primary state

* fix: better modal height and width

* fix: highlighting bugs

* fix: empty states

* fix: delay import to fix overview page slow load on MacOS

* fix: medal server listing too bright on light mode

* fix: admon analysis + fix logs

* fix: bug

* fix: clear purchase intent from sign-in after closing modal

* performance: improve server manage stats loading by splitting reactivity

* fix: deploy + admon + disable highlighting

* fix: clippy

---------

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

* feat: temp wrangler

* fix: lint

* fix: logs upload

* fix: console empty state and admon regressions

* fix: fields

* feat: log deleting + prefetch for Logs.vue

* feat: move delete before share

* feat: clear endpoint

* feat: we ball!

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

packages/ui/src/stories/base/ButtonStyled.stories.ts

@@ -1,18 +1,68 @@
+import { DownloadIcon, HeartIcon, SettingsIcon } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import ButtonStyled from '../../components/base/ButtonStyled.vue'
 
+const colors = ['standard', 'brand', 'red', 'orange', 'green', 'blue', 'purple'] as const
+const types = [
+	'standard',
+	'outlined',
+	'transparent',
+	'highlight',
+	'highlight-colored-text',
+	'chip',
+] as const
+const sizes = ['small', 'standard', 'large'] as const
+
 const meta = {
 	title: 'Base/ButtonStyled',
 	component: ButtonStyled,
+	argTypes: {
+		color: {
+			control: 'select',
+			options: [...colors, 'medal-promo'],
+		},
+		size: {
+			control: 'select',
+			options: [...sizes],
+		},
+		type: {
+			control: 'select',
+			options: [...types],
+		},
+		circular: { control: 'boolean' },
+		colorFill: {
+			control: 'select',
+			options: ['auto', 'background', 'text', 'none'],
+		},
+		hoverColorFill: {
+			control: 'select',
+			options: ['auto', 'background', 'text', 'none'],
+		},
+		highlighted: { control: 'boolean' },
+		highlightedStyle: {
+			control: 'select',
+			options: ['main-nav-primary', 'main-nav-secondary'],
+		},
+	},
+	args: {
+		color: 'standard',
+		size: 'standard',
+		type: 'standard',
+		circular: false,
+		colorFill: 'auto',
+		hoverColorFill: 'auto',
+		highlighted: false,
+		highlightedStyle: 'main-nav-primary',
+	},
 	render: (args) => ({
-		components: { ButtonStyled },
+		components: { ButtonStyled, DownloadIcon },
 		setup() {
 			return { args }
 		},
 		template: /*html*/ `
 			<ButtonStyled v-bind="args">
-				<button @click="()=>{}">Button</button>
+				<button><DownloadIcon /> Button</button>
 			</ButtonStyled>
 		`,
 	}),
@@ -21,53 +71,155 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+	args: {
+		type: 'standard',
+	},
+}
 
-// All colors showcase
-export const AllColors: Story = {
+export const AllVariants: Story = {
 	render: () => ({
 		components: { ButtonStyled },
+		setup() {
+			return { colors, types }
+		},
 		template: /*html*/ `
-			<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
-				<ButtonStyled color="standard"><button>Standard</button></ButtonStyled>
-				<ButtonStyled color="brand"><button>Brand</button></ButtonStyled>
-				<ButtonStyled color="red"><button>Red</button></ButtonStyled>
-				<ButtonStyled color="orange"><button>Orange</button></ButtonStyled>
-				<ButtonStyled color="green"><button>Green</button></ButtonStyled>
-				<ButtonStyled color="blue"><button>Blue</button></ButtonStyled>
-				<ButtonStyled color="purple"><button>Purple</button></ButtonStyled>
+			<div style="overflow-x: auto;">
+				<table style="border-collapse: collapse; width: 100%;">
+					<thead>
+						<tr>
+							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Color / Type</th>
+							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="color in colors" :key="color" style="border-top: 1px solid var(--color-surface-5);">
+							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ color }}</td>
+							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
+								<ButtonStyled :color="color" :type="type">
+									<button>Button</button>
+								</ButtonStyled>
+							</td>
+						</tr>
+					</tbody>
+				</table>
 			</div>
 		`,
 	}),
 }
 
-// All sizes showcase
-export const AllSizes: Story = {
+export const AllVariantsHighlighted: Story = {
 	render: () => ({
 		components: { ButtonStyled },
+		setup() {
+			return { colors, types }
+		},
 		template: /*html*/ `
-			<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
-				<ButtonStyled size="small" color="standard"><button>Small</button></ButtonStyled>
-				<ButtonStyled size="standard" color="standard"><button>Standard</button></ButtonStyled>
-				<ButtonStyled size="large" color="standard"><button>Large</button></ButtonStyled>
+			<div style="overflow-x: auto;">
+				<table style="border-collapse: collapse; width: 100%;">
+					<thead>
+						<tr>
+							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Color / Type</th>
+							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="color in colors" :key="color" style="border-top: 1px solid var(--color-surface-5);">
+							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ color }}</td>
+							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
+								<ButtonStyled :color="color" :type="type" highlighted>
+									<button>Button</button>
+								</ButtonStyled>
+							</td>
+						</tr>
+					</tbody>
+				</table>
 			</div>
 		`,
 	}),
 }
 
-// All types showcase
-export const AllTypes: Story = {
+export const Sizes: Story = {
 	render: () => ({
 		components: { ButtonStyled },
+		setup() {
+			return { sizes, types }
+		},
 		template: /*html*/ `
+			<div style="overflow-x: auto;">
+				<table style="border-collapse: collapse; width: 100%;">
+					<thead>
+						<tr>
+							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Size / Type</th>
+							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="size in sizes" :key="size" style="border-top: 1px solid var(--color-surface-5);">
+							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ size }}</td>
+							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
+								<ButtonStyled :size="size" :type="type" color="brand">
+									<button>Button</button>
+								</ButtonStyled>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		`,
+	}),
+}
+
+export const WithIcons: Story = {
+	render: () => ({
+		components: { ButtonStyled, DownloadIcon, HeartIcon, SettingsIcon },
+		setup() {
+			return { types }
+		},
+		template: /*html*/ `
+			<div style="overflow-x: auto;">
+				<table style="border-collapse: collapse; width: 100%;">
+					<thead>
+						<tr>
+							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Variant</th>
+							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr style="border-top: 1px solid var(--color-surface-5);">
+							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">Icon + text</td>
+							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
+								<ButtonStyled :type="type" color="brand">
+									<button><DownloadIcon /> Download</button>
+								</ButtonStyled>
+							</td>
+						</tr>
+						<tr style="border-top: 1px solid var(--color-surface-5);">
+							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">Icon only</td>
+							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
+								<ButtonStyled :type="type" color="brand" circular>
+									<button><HeartIcon /></button>
+								</ButtonStyled>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		`,
+	}),
+}
+
+export const Disabled: Story = {
+	render: () => ({
+		components: { ButtonStyled },
+		setup() {
+			return { types }
+		},
+		template: /*html*/ `
 			<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
-				<ButtonStyled type="standard" color="standard"><button>Standard</button></ButtonStyled>
-				<ButtonStyled type="outlined" color="standard"><button>Outlined</button></ButtonStyled>
-				<ButtonStyled type="transparent" color="standard"><button>Transparent</button></ButtonStyled>
-				<ButtonStyled type="highlight" color="standard"><button>Highlight</button></ButtonStyled>
-				<ButtonStyled type="highlight-colored-text" color="standard"><button>Highlight Colored</button></ButtonStyled>
-				<ButtonStyled type="chip" color="standard"><button>Chip</button></ButtonStyled>
-				<ButtonStyled color="standard"><button disabled>Disabled</button></ButtonStyled>
+				<ButtonStyled v-for="type in types" :key="type" :type="type" color="brand">
+					<button disabled>{{ type }}</button>
+				</ButtonStyled>
 			</div>
 		`,
 	}),

packages/ui/src/stories/modal/ShareModal.stories.ts

@@ -0,0 +1,67 @@
+import type { StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ShareModal from '../../components/modal/ShareModal.vue'
+
+const meta = {
+	title: 'Modal/ShareModal',
+	component: ShareModal,
+}
+
+export default meta
+type Story = StoryObj<typeof ShareModal>
+
+export const LinkShare: Story = {
+	args: {
+		header: 'Share link',
+		shareTitle: 'Modrinth',
+		shareText: 'Check this out on Modrinth',
+		link: true,
+	},
+	render: (args) => ({
+		components: { ShareModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ShareModal> | null>(null)
+			const openModal = () => {
+				modalRef.value?.show('https://modrinth.com')
+			}
+			return { args, modalRef, openModal }
+		},
+		template: `
+			<div>
+				<ButtonStyled color="brand">
+					<button @click="openModal">Open Link Share Modal</button>
+				</ButtonStyled>
+				<ShareModal ref="modalRef" v-bind="args" />
+			</div>
+		`,
+	}),
+}
+
+export const TextShare: Story = {
+	args: {
+		header: 'Share text',
+		shareTitle: 'Modrinth',
+		shareText: 'Invite your friends to try Modrinth.',
+		link: false,
+	},
+	render: (args) => ({
+		components: { ShareModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ShareModal> | null>(null)
+			const openModal = () => {
+				modalRef.value?.show('https://modrinth.com')
+			}
+			return { args, modalRef, openModal }
+		},
+		template: `
+			<div>
+				<ButtonStyled color="brand">
+					<button @click="openModal">Open Text Share Modal</button>
+				</ButtonStyled>
+				<ShareModal ref="modalRef" v-bind="args" />
+			</div>
+		`,
+	}),
+}

packages/ui/src/stories/modal/UploadProgressModal.stories.ts

@@ -0,0 +1,95 @@
+import type { UploadHandle, UploadProgress } from '@modrinth/api-client'
+import type { StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import UploadProgressModal from '../../components/modal/UploadProgressModal.vue'
+
+const meta = {
+	title: 'Modal/UploadProgressModal',
+	component: UploadProgressModal,
+}
+
+export default meta
+type Story = StoryObj<typeof UploadProgressModal>
+
+function createMockUploadHandle(totalBytes: number, durationMs: number): UploadHandle<void> {
+	let progressCallback: ((progress: UploadProgress) => void) | null = null
+	let cancelled = false
+
+	const promise = new Promise<void>((resolve, reject) => {
+		const startTime = Date.now()
+		const interval = setInterval(() => {
+			if (cancelled) {
+				clearInterval(interval)
+				reject(new Error('Upload cancelled'))
+				return
+			}
+			const elapsed = Date.now() - startTime
+			const progress = Math.min(elapsed / durationMs, 1)
+			const loaded = Math.round(totalBytes * progress)
+			progressCallback?.({ loaded, total: totalBytes, progress })
+			if (progress >= 1) {
+				clearInterval(interval)
+				resolve()
+			}
+		}, 50)
+	})
+
+	const handle: UploadHandle<void> = {
+		promise,
+		onProgress(callback) {
+			progressCallback = callback
+			return handle
+		},
+		cancel() {
+			cancelled = true
+		},
+	}
+
+	return handle
+}
+
+export const Default: Story = {
+	render: () => ({
+		components: { UploadProgressModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof UploadProgressModal> | null>(null)
+			const startUpload = () => {
+				const handle = createMockUploadHandle(50 * 1024 * 1024, 3000)
+				modalRef.value?.track(handle)
+			}
+			return { modalRef, startUpload }
+		},
+		template: `
+			<div>
+				<ButtonStyled color="brand">
+					<button @click="startUpload">Upload 50MB file (3s)</button>
+				</ButtonStyled>
+				<UploadProgressModal ref="modalRef" />
+			</div>
+		`,
+	}),
+}
+
+export const LargeFile: Story = {
+	render: () => ({
+		components: { UploadProgressModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof UploadProgressModal> | null>(null)
+			const startUpload = () => {
+				const handle = createMockUploadHandle(500 * 1024 * 1024, 8000)
+				modalRef.value?.track(handle)
+			}
+			return { modalRef, startUpload }
+		},
+		template: `
+			<div>
+				<ButtonStyled color="brand">
+					<button @click="startUpload">Upload 500MB file (8s)</button>
+				</ButtonStyled>
+				<UploadProgressModal ref="modalRef" />
+			</div>
+		`,
+	}),
+}

packages/ui/src/stories/servers/EditServerIcon.stories.ts

@@ -0,0 +1,94 @@
+import type { Archon, UploadState } from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, reactive, ref } from 'vue'
+
+import EditServerIcon from '../../components/servers/edit-server-icon/EditServerIcon.vue'
+import { provideModrinthServerContext } from '../../providers'
+import type { ModrinthServerContext } from '../../providers/server-context'
+
+const meta = {
+	title: 'Servers/EditServerIcon',
+	component: EditServerIcon,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			setup() {
+				const server = ref({
+					server_id: 'story-server-id',
+					upstream: null,
+				} as Archon.Servers.v0.Server)
+
+				const stats = ref<Stats>({
+					current: {
+						cpu_percent: 0,
+						ram_usage_bytes: 0,
+						ram_total_bytes: 1,
+						storage_usage_bytes: 0,
+						storage_total_bytes: 0,
+					},
+					past: {
+						cpu_percent: 0,
+						ram_usage_bytes: 0,
+						ram_total_bytes: 1,
+						storage_usage_bytes: 0,
+						storage_total_bytes: 0,
+					},
+					graph: {
+						cpu: [],
+						ram: [],
+					},
+				})
+
+				const uploadState = ref<UploadState>({
+					isUploading: false,
+					currentFileName: null,
+					currentFileProgress: 0,
+					uploadedBytes: 0,
+					totalBytes: 0,
+					completedFiles: 0,
+					totalFiles: 0,
+				})
+
+				const serverContext: ModrinthServerContext = {
+					get serverId() {
+						return 'story-server-id'
+					},
+					worldId: ref(null),
+					server,
+					isConnected: ref(true),
+					isWsAuthIncorrect: ref(false),
+					powerState: ref('running'),
+					powerStateDetails: ref(undefined),
+					isServerRunning: computed(() => true),
+					stats,
+					uptimeSeconds: ref(0),
+					backupsState: reactive(new Map()),
+					markBackupCancelled: () => {},
+					isSyncingContent: ref(false),
+					busyReasons: computed(() => []),
+					fsAuth: ref(null),
+					fsOps: ref<Archon.Websocket.v0.FilesystemOperation[]>([]),
+					fsQueuedOps: ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([]),
+					refreshFsAuth: async () => {},
+					uploadState,
+					cancelUpload: ref(null),
+					activeOperations: computed(() => []),
+					dismissOperation: async () => {},
+				}
+
+				provideModrinthServerContext(serverContext)
+			},
+			template: '<div style="max-width: 320px;"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof EditServerIcon>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

packages/ui/src/stories/servers/MedalServerListing.stories.ts

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import MedalServerListing from '../../components/servers/marketing/MedalServerListing.vue'
+
+const baseMedalServer = {
+	server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
+	name: 'Medal Trial Server',
+	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',
+	},
+	medal_expires: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(),
+} as const
+
+const meta = {
+	title: 'Servers/MedalServerListing',
+	component: MedalServerListing,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div style="max-width: 920px;"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof MedalServerListing>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		...baseMedalServer,
+	},
+}
+
+export const ConfiguringNewServer: Story = {
+	args: {
+		...baseMedalServer,
+		name: 'New Medal Server',
+		flows: { intro: true },
+	},
+}
+
+export const SuspendedUpgrading: Story = {
+	args: {
+		...baseMedalServer,
+		name: 'Upgrading Server',
+		status: 'suspended',
+		suspension_reason: 'upgrading',
+	},
+}
+
+export const SuspendedCancelled: Story = {
+	args: {
+		...baseMedalServer,
+		name: 'Expired Trial Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+	},
+}
+
+export const SuspendedWithReason: Story = {
+	args: {
+		...baseMedalServer,
+		name: 'Suspended Server',
+		status: 'suspended',
+		suspension_reason: 'moderated',
+	},
+}
+
+export const SuspendedGeneric: Story = {
+	args: {
+		...baseMedalServer,
+		name: 'Suspended Server',
+		status: 'suspended',
+	},
+}

packages/ui/src/stories/servers/SaveBanner.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import SaveBanner from '../../components/servers/SaveBanner.vue'
+
+const meta = {
+	title: 'Servers/SaveBanner',
+	component: SaveBanner,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	args: {
+		isVisible: true,
+		isUpdating: false,
+		restart: false,
+		serverId: 'server_123',
+		save: () => {},
+		reset: () => {},
+	},
+} satisfies Meta<typeof SaveBanner>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Saving: Story = {
+	args: {
+		isUpdating: true,
+	},
+}
+
+export const WithRestart: Story = {
+	args: {
+		restart: true,
+	},
+}

packages/ui/src/stories/servers/ServerListEmpty.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ServerListEmpty from '../../components/servers/server-list-empty/ServerListEmpty.vue'
+
+const meta = {
+	title: 'Servers/ServerListEmpty',
+	component: ServerListEmpty,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof ServerListEmpty>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

packages/ui/src/stories/servers/ServerListing.stories.ts

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ServerListing from '../../components/servers/ServerListing.vue'
+
+const baseServer = {
+	server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
+	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',
+	},
+} 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,
+		name: 'Fresh Vanilla World',
+		status: 'installing',
+		flows: { intro: true },
+		loader: 'Vanilla',
+		loader_version: null,
+	},
+}
+
+export const WithPendingDowngrade: Story = {
+	args: {
+		...baseServer,
+		name: 'Competitive UHC',
+		pendingChange: {
+			...pendingChange,
+			planSize: 'Small',
+			ramGb: 4,
+			storageGb: 40,
+			cpuBurst: 4,
+			verb: 'Downgrade',
+		},
+	},
+}
+
+export const SuspendedUpgrading: Story = {
+	args: {
+		...baseServer,
+		name: 'Creative Build Team',
+		status: 'suspended',
+		suspension_reason: 'upgrading',
+	},
+}
+
+export const Provisioning: Story = {
+	args: {
+		...baseServer,
+		name: 'My New Server',
+		isProvisioning: true,
+	},
+}
+
+export const SetToCancel: Story = {
+	args: {
+		...baseServer,
+		name: 'Survival SMP',
+		cancellationDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedCancelled: Story = {
+	args: {
+		...baseServer,
+		name: 'Old Event Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+		cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedCancelledFilesExpired: Story = {
+	args: {
+		...baseServer,
+		onDownloadBackup: null,
+		name: 'Old Event Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+	},
+}
+
+export const SuspendedPaymentFailed: Story = {
+	args: {
+		...baseServer,
+		name: 'Minigames Network',
+		status: 'suspended',
+		suspension_reason: 'paymentfailed',
+		cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedModerated: Story = {
+	args: {
+		...baseServer,
+		name: 'Banned Server',
+		status: 'suspended',
+		suspension_reason: 'moderated',
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedGeneric: Story = {
+	args: {
+		...baseServer,
+		name: 'Server with other suspension reason',
+		status: 'suspended',
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}