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>

apps/app-frontend/src/providers/setup/auth.ts

@@ -1,6 +1,6 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { type AuthProvider, provideAuth } from '@modrinth/ui'
-import { type Ref, ref, watchEffect } from 'vue'
+import { computed, type Ref, ref, watchEffect } from 'vue'
 
 type AppCredentials = {
 	session?: string | null
@@ -13,10 +13,12 @@ export function setupAuthProvider(
 ) {
 	const sessionToken = ref<string | null>(null)
 	const user = ref<Labrinth.Users.v2.User | null>(null)
+	const isReady = computed(() => credentials.value !== undefined)
 
 	const authProvider: AuthProvider = {
 		session_token: sessionToken,
 		user,
+		isReady,
 		requestSignIn,
 	}
 

apps/app-frontend/src/providers/setup/server-install-content.ts

@@ -0,0 +1,393 @@
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import {
+	createContext,
+	type CreationFlowContextValue,
+	injectModrinthClient,
+	injectNotificationManager,
+} from '@modrinth/ui'
+import { computed, type ComputedRef, nextTick, type Ref, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+type ServerFlowFrom = 'onboarding' | 'reset-server'
+type ServerInstallableType = 'modpack' | 'mod' | 'plugin' | 'datapack'
+
+type InstallableSearchResult = Labrinth.Search.v3.ResultSearchProject & {
+	installing?: boolean
+	installed?: boolean
+}
+
+interface ServerModpackSelectionRequest {
+	projectId: string
+	versionId: string
+	name: string
+	iconUrl?: string
+}
+
+interface ServerSetupModalHandle {
+	show: () => void | Promise<void>
+	hide: () => void
+	ctx?: CreationFlowContextValue | null
+}
+
+export interface ServerInstallContentContext {
+	serverIdQuery: ComputedRef<string | null>
+	worldIdQuery: ComputedRef<string | null>
+	browseFrom: ComputedRef<string | null>
+	serverFlowFrom: ComputedRef<ServerFlowFrom | null>
+	isFromWorlds: ComputedRef<boolean>
+	isServerContext: ComputedRef<boolean>
+	isSetupServerContext: ComputedRef<boolean>
+	effectiveServerWorldId: ComputedRef<string | null>
+	serverContextServerData: Ref<Archon.Servers.v0.Server | null>
+	serverContentProjectIds: Ref<Set<string>>
+	serverBackUrl: ComputedRef<string>
+	serverBackLabel: ComputedRef<string>
+	serverBrowseHeading: ComputedRef<string>
+	initServerContext: () => Promise<void>
+	watchServerContextChanges: () => void
+	searchServerModpacks: (
+		query: string,
+		limit?: number,
+	) => Promise<Labrinth.Projects.v2.SearchResult>
+	getServerProjectVersions: (projectId: string) => Promise<{ id: string }[]>
+	enforceSetupModpackRoute: (currentProjectType: string | undefined) => void
+	installProjectToServer: (project: InstallableSearchResult) => Promise<boolean>
+	onServerFlowBack: () => void
+	handleServerModpackFlowCreate: (config: CreationFlowContextValue) => Promise<void>
+	markServerProjectInstalled: (id: string) => void
+}
+
+export const [injectServerInstallContent, provideServerInstallContent] =
+	createContext<ServerInstallContentContext>('Browse', 'serverInstallContent')
+
+function readQueryString(value: unknown): string | null {
+	if (Array.isArray(value)) return value[0] ?? null
+	return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+export function createServerInstallContent(opts: {
+	serverSetupModalRef: Ref<ServerSetupModalHandle | null>
+}) {
+	const { serverSetupModalRef } = opts
+	const route = useRoute()
+	const router = useRouter()
+	const client = injectModrinthClient()
+	const { handleError } = injectNotificationManager()
+
+	const serverIdQuery = computed(() => readQueryString(route.query.sid))
+	const worldIdQuery = computed(() => readQueryString(route.query.wid))
+	const browseFrom = computed(() => readQueryString(route.query.from))
+	const serverFlowFrom = computed<ServerFlowFrom | null>(() =>
+		browseFrom.value === 'onboarding' || browseFrom.value === 'reset-server'
+			? browseFrom.value
+			: null,
+	)
+
+	const isFromWorlds = computed(() => browseFrom.value === 'worlds')
+	const isServerContext = computed(() => !!serverIdQuery.value)
+	const isSetupServerContext = computed(() => !!serverIdQuery.value && !!serverFlowFrom.value)
+
+	const serverContextWorldId = ref<string | null>(worldIdQuery.value)
+	const serverContextServerData = ref<Archon.Servers.v0.Server | null>(null)
+	const serverContentProjectIds = ref<Set<string>>(new Set())
+	const effectiveServerWorldId = computed(() => worldIdQuery.value ?? serverContextWorldId.value)
+
+	const serverBackUrl = computed(() => {
+		const sid = serverIdQuery.value
+		if (!sid) return '/hosting/manage'
+		if (serverFlowFrom.value === 'onboarding') {
+			return `/hosting/manage/${sid}?resumeModal=setup-type`
+		}
+		if (serverFlowFrom.value === 'reset-server') {
+			return `/hosting/manage/${sid}?openSettings=installation`
+		}
+		return `/hosting/manage/${sid}/content`
+	})
+	const serverBackLabel = computed(() => {
+		if (serverFlowFrom.value === 'onboarding') return 'Back to setup'
+		if (serverFlowFrom.value === 'reset-server') return 'Cancel reset'
+		return 'Back to server'
+	})
+	const serverBrowseHeading = computed(() => {
+		if (serverFlowFrom.value === 'reset-server') {
+			return 'Select modpack to install after reset'
+		}
+		return 'Install content to server'
+	})
+
+	async function resolveServerContextWorldId(serverId: string) {
+		try {
+			const server = await client.archon.servers_v1.get(serverId)
+			const activeWorld = server.worlds.find((world) => world.is_active)
+			return activeWorld?.id ?? server.worlds[0]?.id ?? null
+		} catch (err) {
+			handleError(err as Error)
+			return null
+		}
+	}
+
+	async function refreshServerInstalledContent(serverId: string, worldId: string) {
+		try {
+			const content = await client.archon.content_v1.getAddons(serverId, worldId)
+			const ids = new Set(
+				(content.addons ?? [])
+					.map((addon) => addon.project_id)
+					.filter((projectId): projectId is string => !!projectId),
+			)
+			serverContentProjectIds.value = ids
+		} catch (err) {
+			handleError(err as Error)
+		}
+	}
+
+	async function initServerContext() {
+		const sid = serverIdQuery.value
+		if (!sid) return
+
+		try {
+			serverContextServerData.value = await client.archon.servers_v0.get(sid)
+		} catch (err) {
+			handleError(err as Error)
+		}
+
+		let resolvedWorldId = effectiveServerWorldId.value
+		if (!resolvedWorldId) {
+			resolvedWorldId = await resolveServerContextWorldId(sid)
+			if (resolvedWorldId) {
+				serverContextWorldId.value = resolvedWorldId
+			}
+		}
+
+		if (resolvedWorldId) {
+			await refreshServerInstalledContent(sid, resolvedWorldId)
+		}
+	}
+
+	function watchServerContextChanges() {
+		watch([serverIdQuery, effectiveServerWorldId], async ([sid, wid], [prevSid, prevWid]) => {
+			if (!sid) {
+				serverContextServerData.value = null
+				serverContentProjectIds.value = new Set()
+				return
+			}
+
+			if (sid !== prevSid) {
+				serverContentProjectIds.value = new Set()
+				try {
+					serverContextServerData.value = await client.archon.servers_v0.get(sid)
+				} catch (err) {
+					handleError(err as Error)
+				}
+			}
+
+			if (wid && (sid !== prevSid || wid !== prevWid)) {
+				await refreshServerInstalledContent(sid, wid)
+			}
+		})
+	}
+
+	function normalizeLoader(loader: string) {
+		return loader.toLowerCase().replaceAll('_', '').replaceAll('-', '').replaceAll(' ', '')
+	}
+
+	function getCompatibleLoaders(loader: string) {
+		const normalized = normalizeLoader(loader)
+		if (!normalized) return new Set<string>()
+		if (normalized === 'paper' || normalized === 'purpur' || normalized === 'spigot') {
+			return new Set(['paper', 'purpur', 'spigot', 'bukkit'])
+		}
+		if (normalized === 'neoforge' || normalized === 'neo') {
+			return new Set(['neoforge', 'neo'])
+		}
+		return new Set([normalized])
+	}
+
+	function enforceSetupModpackRoute(currentProjectType: string | undefined) {
+		if (!isSetupServerContext.value || currentProjectType === 'modpack') return
+		router.replace({
+			path: '/browse/modpack',
+			query: route.query,
+		})
+	}
+
+	async function searchServerModpacks(query: string, limit: number = 10) {
+		return client.labrinth.projects_v2.search({
+			query: query || undefined,
+			new_filters:
+				'project_types = "modpack" AND (client_side = "optional" OR client_side = "required") AND server_side = "required"',
+			limit,
+		})
+	}
+
+	async function getServerProjectVersions(projectId: string) {
+		const versions = await client.labrinth.versions_v3.getProjectVersions(projectId)
+		return versions.map((version) => ({ id: version.id }))
+	}
+
+	async function openServerModpackInstallFlow(request: ServerModpackSelectionRequest) {
+		if (!serverIdQuery.value || !effectiveServerWorldId.value) {
+			throw new Error('Missing server context')
+		}
+
+		const modalInstance = serverSetupModalRef.value
+		if (!modalInstance) return
+
+		modalInstance.show()
+		await nextTick()
+
+		const ctx = modalInstance.ctx
+		if (!ctx) return
+
+		ctx.setupType.value = 'modpack'
+		ctx.modpackSelection.value = {
+			projectId: request.projectId,
+			versionId: request.versionId,
+			name: request.name,
+			iconUrl: request.iconUrl,
+		}
+		ctx.modal.value?.setStage('final-config')
+	}
+
+	function getCurrentServerInstallType(): ServerInstallableType {
+		const raw = Array.isArray(route.params.projectType)
+			? route.params.projectType[0]
+			: route.params.projectType
+		if (raw === 'modpack' || raw === 'mod' || raw === 'plugin' || raw === 'datapack') {
+			return raw
+		}
+		throw new Error('This content type cannot be installed to a server from browse.')
+	}
+
+	async function installProjectToServer(project: InstallableSearchResult) {
+		const contentType = getCurrentServerInstallType()
+		const sid = serverIdQuery.value
+		const wid = effectiveServerWorldId.value
+		if (!sid || !wid) {
+			throw new Error('No server world is available for install.')
+		}
+
+		if (contentType === 'modpack') {
+			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
+				include_changelog: false,
+			})
+			const versionId = versions[0]?.id ?? project.version_id
+			if (!versionId) {
+				throw new Error('No version found for this modpack')
+			}
+
+			await openServerModpackInstallFlow({
+				projectId: project.project_id,
+				versionId,
+				name: project.name,
+				iconUrl: project.icon_url ?? undefined,
+			})
+			return false
+		}
+
+		const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
+			include_changelog: false,
+		})
+		const serverLoader = (serverContextServerData.value?.loader ?? '').toLowerCase()
+		const serverGameVersion = (serverContextServerData.value?.mc_version ?? '').trim()
+		const compatibleLoaders = getCompatibleLoaders(serverLoader)
+
+		const hasGameVersionMatch = (version: Labrinth.Versions.v2.Version) =>
+			!serverGameVersion || version.game_versions.includes(serverGameVersion)
+		const hasLoaderMatch = (version: Labrinth.Versions.v2.Version) => {
+			if (contentType === 'datapack') return true
+			if (compatibleLoaders.size === 0) return true
+			return version.loaders.some((loader) => compatibleLoaders.has(normalizeLoader(loader)))
+		}
+
+		let matchingVersion = versions.find(
+			(version) => hasGameVersionMatch(version) && hasLoaderMatch(version),
+		)
+		if (!matchingVersion) {
+			matchingVersion = versions.find((version) => hasLoaderMatch(version))
+		}
+		if (!matchingVersion) {
+			matchingVersion = versions.find((version) => hasGameVersionMatch(version))
+		}
+		if (!matchingVersion) {
+			matchingVersion = versions[0]
+		}
+		if (!matchingVersion) {
+			throw new Error('No installable version was found for this project.')
+		}
+
+		await client.archon.content_v1.addAddon(sid, wid, {
+			project_id: matchingVersion.project_id,
+			version_id: matchingVersion.id,
+		})
+
+		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, project.project_id])
+		return true
+	}
+
+	function onServerFlowBack() {
+		serverSetupModalRef.value?.hide()
+	}
+
+	async function handleServerModpackFlowCreate(config: CreationFlowContextValue) {
+		const sid = serverIdQuery.value
+		const wid = effectiveServerWorldId.value
+		if (!sid || !wid || !config.modpackSelection.value) {
+			config.loading.value = false
+			return
+		}
+
+		try {
+			await client.archon.content_v1.installContent(sid, wid, {
+				content_variant: 'modpack',
+				spec: {
+					platform: 'modrinth',
+					project_id: config.modpackSelection.value.projectId,
+					version_id: config.modpackSelection.value.versionId,
+				},
+				soft_override: false,
+				properties: config.buildProperties(),
+			} satisfies Archon.Content.v1.InstallWorldContent)
+			serverSetupModalRef.value?.hide()
+
+			if (serverFlowFrom.value === 'onboarding') {
+				await client.archon.servers_v1.endIntro(sid)
+				await router.push(`/hosting/manage/${sid}/content`)
+				return
+			}
+
+			await router.push(`/hosting/manage/${sid}?openSettings=installation`)
+		} catch (err) {
+			handleError(err as Error)
+			config.loading.value = false
+		}
+	}
+
+	function markServerProjectInstalled(id: string) {
+		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, id])
+	}
+
+	return {
+		serverIdQuery,
+		worldIdQuery,
+		browseFrom,
+		serverFlowFrom,
+		isFromWorlds,
+		isServerContext,
+		isSetupServerContext,
+		effectiveServerWorldId,
+		serverContextServerData,
+		serverContentProjectIds,
+		serverBackUrl,
+		serverBackLabel,
+		serverBrowseHeading,
+		initServerContext,
+		watchServerContextChanges,
+		searchServerModpacks,
+		getServerProjectVersions,
+		enforceSetupModpackRoute,
+		installProjectToServer,
+		onServerFlowBack,
+		handleServerModpackFlowCreate,
+		markServerProjectInstalled,
+	}
+}