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/providers/auth.ts

@@ -6,6 +6,8 @@ import { createContext } from './create-context'
 export interface AuthProvider {
 	session_token: Ref<string | null>
 	user: Ref<Labrinth.Users.v2.User | null>
+	/** True once the initial auth check has completed (regardless of result). */
+	isReady?: Ref<boolean>
 	requestSignIn: (redirectPath: string) => void | Promise<void>
 }
 

packages/ui/src/providers/hosting-purchase-intent.ts

@@ -0,0 +1,189 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { type Ref, ref, watch } from 'vue'
+
+import { createContext } from '.'
+
+const PURCHASE_INTENT_STORAGE_KEY = 'modrinth:servers-purchase-intent'
+
+export type ServerBillingInterval = 'monthly' | 'quarterly' | 'yearly'
+
+export type PendingPurchaseIntent = {
+	interval: ServerBillingInterval
+	planId: string | null
+	source: string
+	ts: number
+}
+
+export type GuestPlanContinuePayload = {
+	interval: ServerBillingInterval
+	planId: string | null
+}
+
+export type CheckoutModalHandle = {
+	show: (interval: ServerBillingInterval, plan?: Labrinth.Billing.Internal.Product | null) => void
+}
+
+export type GuestPlanModalHandle = {
+	show: (initialInterval?: ServerBillingInterval, initialPlanId?: string | null) => void
+}
+
+export interface HostingPurchaseIntentContext {
+	openPurchaseModal: () => void
+	handleGuestPlanContinue: (payload: GuestPlanContinuePayload) => void
+	clearPurchaseIntent: () => void
+}
+
+export interface CreateHostingPurchaseIntentContextOptions {
+	authRequestSignIn: (redirectPath: string) => void | Promise<void>
+	signInRedirectPath: string
+	intentSource: string
+	loggedIn: Readonly<Ref<boolean>>
+	availableProducts: Readonly<Ref<Labrinth.Billing.Internal.Product[]>>
+	canOpenCheckout: Readonly<Ref<boolean>>
+	guestPlanModal: Ref<GuestPlanModalHandle | null>
+	checkoutModal: Ref<CheckoutModalHandle | null>
+	onCheckoutPending: () => void
+}
+
+function readPendingPurchaseIntent(): PendingPurchaseIntent | null {
+	if (typeof window === 'undefined') return null
+	const rawIntent = window.sessionStorage.getItem(PURCHASE_INTENT_STORAGE_KEY)
+	if (!rawIntent) return null
+
+	try {
+		const parsedIntent = JSON.parse(rawIntent) as Partial<PendingPurchaseIntent>
+		if (
+			(parsedIntent.interval === 'monthly' ||
+				parsedIntent.interval === 'quarterly' ||
+				parsedIntent.interval === 'yearly') &&
+			(parsedIntent.planId === null || typeof parsedIntent.planId === 'string') &&
+			typeof parsedIntent.source === 'string' &&
+			typeof parsedIntent.ts === 'number'
+		) {
+			return parsedIntent as PendingPurchaseIntent
+		}
+	} catch {
+		return null
+	}
+
+	return null
+}
+
+function writePendingPurchaseIntent(intent: PendingPurchaseIntent) {
+	if (typeof window === 'undefined') return
+	window.sessionStorage.setItem(PURCHASE_INTENT_STORAGE_KEY, JSON.stringify(intent))
+}
+
+function clearStoredPurchaseIntent() {
+	if (typeof window === 'undefined') return
+	window.sessionStorage.removeItem(PURCHASE_INTENT_STORAGE_KEY)
+}
+
+export function createHostingPurchaseIntentContext(
+	options: CreateHostingPurchaseIntentContextOptions,
+): HostingPurchaseIntentContext {
+	const lastSelectedInterval = ref<ServerBillingInterval>('quarterly')
+	const lastSelectedPlanId = ref<string | null | undefined>(undefined)
+	const pendingResumeIntent = ref<PendingPurchaseIntent | null>(null)
+
+	function openCheckoutFromIntent(intent: PendingPurchaseIntent): boolean {
+		if (!options.checkoutModal.value || !options.canOpenCheckout.value) return false
+
+		lastSelectedInterval.value = intent.interval
+		lastSelectedPlanId.value = intent.planId
+
+		const defaultPlan =
+			options.availableProducts.value.find(
+				(product) => product?.metadata?.type === 'pyro' && product.metadata.ram === 6144,
+			) ??
+			options.availableProducts.value.find((product) => product?.metadata?.type === 'pyro') ??
+			options.availableProducts.value[0]
+
+		const selectedPlan =
+			intent.planId === null
+				? null
+				: (options.availableProducts.value.find((product) => product.id === intent.planId) ??
+					defaultPlan)
+
+		options.checkoutModal.value.show(intent.interval, selectedPlan)
+		return true
+	}
+
+	function openPurchaseModal() {
+		options.guestPlanModal.value?.show(lastSelectedInterval.value, lastSelectedPlanId.value)
+	}
+
+	function handleGuestPlanContinue(payload: GuestPlanContinuePayload) {
+		const intent: PendingPurchaseIntent = {
+			interval: payload.interval,
+			planId: payload.planId,
+			source: options.intentSource,
+			ts: Date.now(),
+		}
+
+		lastSelectedInterval.value = payload.interval
+		lastSelectedPlanId.value = payload.planId
+
+		if (!options.loggedIn.value) {
+			writePendingPurchaseIntent(intent)
+			void options.authRequestSignIn(options.signInRedirectPath)
+			return
+		}
+
+		pendingResumeIntent.value = intent
+		if (openCheckoutFromIntent(intent)) {
+			pendingResumeIntent.value = null
+		} else {
+			options.onCheckoutPending()
+		}
+	}
+
+	function clearPurchaseIntent() {
+		clearStoredPurchaseIntent()
+		pendingResumeIntent.value = null
+		lastSelectedInterval.value = 'quarterly'
+		lastSelectedPlanId.value = undefined
+	}
+
+	watch(
+		options.loggedIn,
+		(isLoggedIn) => {
+			if (!isLoggedIn) return
+
+			const pendingIntent = readPendingPurchaseIntent()
+			if (!pendingIntent || pendingIntent.source !== options.intentSource) return
+
+			clearStoredPurchaseIntent()
+			pendingResumeIntent.value = pendingIntent
+			lastSelectedInterval.value = pendingIntent.interval
+			lastSelectedPlanId.value = pendingIntent.planId
+		},
+		{ immediate: true },
+	)
+
+	watch(
+		() =>
+			[
+				options.loggedIn.value,
+				options.canOpenCheckout.value,
+				pendingResumeIntent.value,
+				options.checkoutModal.value,
+			] as const,
+		([isLoggedIn, canOpen, pendingIntent]) => {
+			if (!isLoggedIn || !canOpen || !pendingIntent) return
+			if (openCheckoutFromIntent(pendingIntent)) {
+				pendingResumeIntent.value = null
+			}
+		},
+		{ immediate: true },
+	)
+
+	return {
+		openPurchaseModal,
+		handleGuestPlanContinue,
+		clearPurchaseIntent,
+	}
+}
+
+export const [injectHostingPurchaseIntent, provideHostingPurchaseIntent] =
+	createContext<HostingPurchaseIntentContext>('HostingManagePage', 'hostingPurchaseIntent')

packages/ui/src/providers/index.ts

@@ -4,6 +4,7 @@ export * from './auth'
 export * from './content-manager'
 export { createContext } from './create-context'
 export * from './file-picker'
+export * from './hosting-purchase-intent'
 export * from './i18n'
 export * from './instance-import'
 export * from './modal-behavior'
@@ -12,5 +13,6 @@ export * from './popup-notifications'
 export * from './project-page'
 export * from './project-page-new'
 export * from './server-context'
+export * from './server-settings-modal'
 export * from './tags'
 export * from './web-notifications'

packages/ui/src/providers/page-context.ts

@@ -6,6 +6,7 @@ export interface PageContext {
 	// pages may render sidebar content in #sidebar-teleport-target instead of in the main layout when true
 	hierarchicalSidebarAvailable: Ref<boolean>
 	showAds: Ref<boolean>
+	openExternalUrl: (url: string) => void
 }
 
 export const [injectPageContext, providePageContext] = createContext<PageContext>(

packages/ui/src/providers/server-context.ts

@@ -1,7 +1,9 @@
-import type { Archon } from '@modrinth/api-client'
+import type { Archon, UploadState } from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Reactive, Ref } from 'vue'
 
 import type { MessageDescriptor } from '#ui/composables/i18n'
+import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 
 import { createContext } from '.'
 
@@ -34,8 +36,12 @@ export interface ModrinthServerContext {
 
 	// Websocket state
 	readonly isConnected: Ref<boolean>
+	readonly isWsAuthIncorrect: Ref<boolean>
 	readonly powerState: Ref<Archon.Websocket.v0.PowerState>
+	readonly powerStateDetails: Ref<{ oom_killed?: boolean; exit_code?: number } | undefined>
 	readonly isServerRunning: ComputedRef<boolean>
+	readonly stats: Ref<Stats>
+	readonly uptimeSeconds: Ref<number>
 	readonly backupsState: Reactive<BackupsState>
 	markBackupCancelled: (backupId: string) => void
 
@@ -50,6 +56,14 @@ export interface ModrinthServerContext {
 	readonly fsOps: Ref<Archon.Websocket.v0.FilesystemOperation[]>
 	readonly fsQueuedOps: Ref<Archon.Websocket.v0.QueuedFilesystemOp[]>
 	refreshFsAuth: () => Promise<void>
+
+	// File upload state
+	readonly uploadState: Ref<UploadState>
+	readonly cancelUpload: Ref<(() => void) | null>
+
+	// File operations (extract, move, etc.)
+	readonly activeOperations: ComputedRef<FileOperation[]>
+	dismissOperation: (opId: string, action: 'dismiss' | 'cancel') => Promise<void>
 }
 
 export const [injectModrinthServerContext, provideModrinthServerContext] =

packages/ui/src/providers/server-settings-modal.ts

@@ -0,0 +1,17 @@
+import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
+
+import { createContext } from './create-context'
+
+export interface BrowseServerContentArgs {
+	serverId: string
+	worldId: string | null
+	type: 'mod' | 'plugin' | 'datapack'
+}
+
+export interface ServerSettingsModalContext {
+	openServerSettings: (options?: { tabId?: ServerSettingsTabId }) => void
+	browseServerContent?: (args: BrowseServerContentArgs) => void | Promise<void>
+}
+
+export const [injectServerSettingsModal, provideServerSettingsModal] =
+	createContext<ServerSettingsModalContext>('root.vue', 'serverSettingsModalContext')