qa: content (#7184)

* qa: content card improvements for server panel

* fix: server install icon bug

* qa: 1

* fix: lint

* qa: 2

apps/app-frontend/src/composables/browse/use-app-server-browse.ts

@@ -1,5 +1,5 @@
 import type { Labrinth } from '@modrinth/api-client'
-import { CheckIcon, PlayIcon, PlusIcon, StopCircleIcon } from '@modrinth/assets'
+import { CheckIcon, PlayIcon, PlusIcon, SpinnerIcon, StopCircleIcon } from '@modrinth/assets'
 import type { CardAction } from '@modrinth/ui'
 import { commonMessages, defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -75,6 +75,7 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 	const debugLog = useDebugLogger('BrowseServer')
 	const serverPings = shallowRef<Record<string, number | undefined>>({})
 	const runningServerProjects = ref<Record<string, string>>({})
+	const preparingServerProjects = ref<string[]>([])
 	const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
 	const contextMenuRef = ref<ContextMenuHandle | null>(null)
 	let serverPingsActive = true
@@ -109,9 +110,16 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 	}
 
 	async function handlePlayServerProject(projectId: string) {
+		if (preparingServerProjects.value.includes(projectId)) return
+
 		debugLog('handlePlayServerProject', projectId)
-		await options.playServerProject(projectId)
-		checkServerRunningStates(lastServerHits.value)
+		preparingServerProjects.value.push(projectId)
+		try {
+			await options.playServerProject(projectId)
+			checkServerRunningStates(lastServerHits.value)
+		} finally {
+			preparingServerProjects.value = preparingServerProjects.value.filter((id) => id !== projectId)
+		}
 	}
 
 	async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
@@ -247,13 +255,16 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 			})
 		} else {
 			const isInstalling = options.installingServerProjects.value.includes(serverResult.project_id)
+			const isPreparing = preparingServerProjects.value.includes(serverResult.project_id)
+			const isBusy = isInstalling || isPreparing
 			actions.push({
 				key: 'play',
 				label: formatMessage(
 					isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
 				),
-				icon: PlayIcon,
-				disabled: isInstalling,
+				icon: isBusy ? SpinnerIcon : PlayIcon,
+				iconClass: isBusy ? 'animate-spin' : undefined,
+				disabled: isBusy,
 				color: 'brand',
 				type: 'outlined',
 				onClick: () => handlePlayServerProject(serverResult.project_id),

apps/app-frontend/src/pages/instance/components/page-header/index.vue

@@ -33,7 +33,7 @@
 				:ping="ping"
 				:minecraft-server="minecraftServer"
 				:show-instance-play-time="showInstancePlayTime"
-				:playtime-label="playtimeLabel"
+				:playtime-label="playtimeLabel ?? formatMessage(messages.neverPlayed)"
 			/>
 			<PageHeaderMetadata v-else>
 				<PageHeaderMetadataItem

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

@@ -39,7 +39,7 @@ export interface ServerInstallContext {
 				project: Labrinth.Projects.v3.Project,
 				modpackVersionId: string | null,
 				callback?: () => void,
-			) => void
+			) => Promise<void>
 		>,
 	) => void
 	setUpdateToPlayModal: (
@@ -84,7 +84,7 @@ export function createServerInstall(opts: {
 			project: Labrinth.Projects.v3.Project,
 			modpackVersionId: string | null,
 			callback?: () => void,
-		) => void
+		) => Promise<void>
 	> | null = null
 	let updateToPlayModalRef: ModalRef<
 		(instance: GameInstance, activeVersionId: string | null, callback?: () => void) => void
@@ -246,10 +246,10 @@ export function createServerInstall(opts: {
 				project_id: contentProjectId,
 				version_id: contentVersionId,
 				title: project.title,
+				icon_url: project.icon_url,
 			},
 			{
 				name: project.title,
-				iconPath: project.icon_url ?? null,
 				link: {
 					type: 'server_project_modpack',
 					server_project_id: serverProjectId,
@@ -314,7 +314,7 @@ export function createServerInstall(opts: {
 			return
 		}
 		if (isModpack && !instance) {
-			installToPlayModalRef?.show(projectV3, modpackVersionId, async () => {
+			await installToPlayModalRef?.show(projectV3, modpackVersionId, async () => {
 				const newInstance = await findInstalledInstance(project.id)
 				if (!newInstance) return
 				showModpackInstallSuccess(newInstance, serverAddress)