modrinth/apps/app-frontend/src/components/ui/world/InstanceItem.vue

<script setup lang="ts">
import {
	EyeIcon,
	FolderOpenIcon,
	MoreVerticalIcon,
	PlayIcon,
	SpinnerIcon,
	StopCircleIcon,
} from '@modrinth/assets'
import {
	Avatar,
	Button,
	commonMessages,
	injectNotificationManager,
	SmartClickable,
	TeleportOverflowMenu,
	useFormatDateTime,
	useRelativeTime,
	useVIntl,
} from '@modrinth/ui'
import { capitalizeString } from '@modrinth/utils'
import { convertFileSrc } from '@tauri-apps/api/core'
import type { Dayjs } from 'dayjs'
import { computed, nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

import { useAppEvent } from '@/composables/use-app-event'
import { trackEvent } from '@/helpers/analytics'
import { get_project } from '@/helpers/cache'
import { kill, run } from '@/helpers/instance'
import { get_by_instance_id } from '@/helpers/process'
import type { GameInstance } from '@/helpers/types'
import { showInstanceInFolder } from '@/helpers/utils'
import { handleSevereError } from '@/store/error'

const { handleError } = injectNotificationManager()
const { formatMessage } = useVIntl()
const formatRelativeTime = useRelativeTime()
const formatDateTime = useFormatDateTime({
	timeStyle: 'short',
	dateStyle: 'long',
})

const router = useRouter()

const emit = defineEmits<{
	(e: 'play' | 'stop'): void
}>()

const props = defineProps<{
	instance: GameInstance
	last_played: Dayjs
}>()

const loadingModpack = ref(!!props.instance.link)

const modpack = ref()

if (props.instance.link) {
	nextTick().then(async () => {
		modpack.value = await get_project(props.instance.link?.project_id, 'must_revalidate')
		loadingModpack.value = false
	})
}

const instanceIcon = computed(() => props.instance.icon_path)

const loader = computed(() => {
	if (props.instance.loader === 'vanilla') {
		return 'Minecraft'
	} else if (props.instance.loader === 'neoforge') {
		return 'NeoForge'
	} else {
		return capitalizeString(props.instance.loader)
	}
})

const loading = ref(false)
const playing = ref(false)

const play = async (event: MouseEvent) => {
	event?.stopPropagation()
	if (props.instance.quarantined) return
	loading.value = true
	await run(props.instance.id)
		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
		.finally(() => {
			trackEvent('InstanceStart', {
				loader: props.instance.loader,
				game_version: props.instance.game_version,
				source: 'InstanceItem',
			})
		})
	emit('play')
	loading.value = false
}

const stop = async (event: MouseEvent) => {
	event?.stopPropagation()
	loading.value = true
	await kill(props.instance.id).catch(handleError)
	trackEvent('InstanceStop', {
		loader: props.instance.loader,
		game_version: props.instance.game_version,
		source: 'InstanceItem',
	})
	emit('stop')
	loading.value = false
}

useAppEvent('process', async () => {
	await checkProcess()
})

const checkProcess = async () => {
	const runningProcesses = await get_by_instance_id(props.instance.id).catch(handleError)

	playing.value = runningProcesses.length > 0
}

onMounted(() => {
	checkProcess()
})
</script>
<template>
	<SmartClickable>
		<template #clickable>
			<router-link
				class="no-click-animation"
				:to="`/instance/${encodeURIComponent(instance.id)}`"
			/>
		</template>
		<div
			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow rounded-xl smart-clickable:highlight-on-hover"
		>
			<Avatar
				:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
				:tint-by="instance.id"
				size="48px"
			/>
			<div class="flex flex-col col-span-2 justify-between h-full">
				<div class="flex items-center gap-2">
					<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
						{{ instance.name }}
					</div>
				</div>
				<div class="flex items-center gap-2 text-sm text-secondary">
					<div
						v-tooltip="instance.last_played ? formatDateTime(instance.last_played) : null"
						class="w-fit shrink-0"
						:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
					>
						<template v-if="last_played">
							{{
								formatMessage(commonMessages.playedLabel, {
									ago: formatRelativeTime(last_played.toISOString?.()),
								})
							}}
						</template>
						<template v-else> Not played yet </template>
					</div>
					•
					<span v-if="modpack" class="flex items-center gap-1 truncate text-secondary">
						<router-link
							class="inline-flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
							:to="`/project/${modpack.id}`"
						>
							<Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
							<span class="truncate">{{ modpack.title }}</span>
						</router-link>
						({{ loader }} {{ instance.game_version }})
					</span>
					<span v-else-if="loadingModpack" class="flex items-center gap-1 truncate text-secondary">
						<SpinnerIcon class="animate-spin shrink-0" />
						<span class="truncate">Loading modpack...</span>
					</span>
					<span v-else class="flex items-center gap-1 truncate text-secondary">
						{{ loader }}
						{{ instance.game_version }}
					</span>
				</div>
			</div>
			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
				<Button v-if="playing && !loading" type="colored" color="red" @click="stop">
					<StopCircleIcon aria-hidden="true" />
					{{ formatMessage(commonMessages.stopButton) }}
				</Button>
				<Button
					v-else
					v-tooltip="
						instance.quarantined
							? 'This instance has been locked'
							: playing
								? 'Instance is already open'
								: null
					"
					:disabled="instance.quarantined || playing || loading"
					@click="play"
				>
					<SpinnerIcon v-if="loading" class="animate-spin" />
					<PlayIcon v-else aria-hidden="true" />
					{{ formatMessage(commonMessages.playButton) }}
				</Button>
				<TeleportOverflowMenu
					type="quiet"
					label="More options"
					:options="[
						{
							id: 'open-instance',
							label: 'View instance',
							shown: !!instance.id,
							action: () => router.push(encodeURI(`/instance/${instance.id}`)),
						},
						{
							id: 'open-folder',
							label: formatMessage(commonMessages.openFolderButton),
							action: () => showInstanceInFolder(instance.id),
						},
					]"
				>
					<MoreVerticalIcon aria-hidden="true" />
					<template #open-instance>
						<EyeIcon aria-hidden="true" />
						View instance
					</template>
					<template #open-folder>
						<FolderOpenIcon aria-hidden="true" />
						{{ formatMessage(commonMessages.openFolderButton) }}
					</template>
				</TeleportOverflowMenu>
			</div>
		</div>
	</SmartClickable>
</template>