refactor: content tab styling

apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue

@@ -141,10 +141,11 @@
 		</div>
 	</NewModal>
 
-	<ModpackContentModal
-		ref="modpackContentModal"
-		:modpack-name="project?.name ?? ''"
-		:modpack-icon-url="project?.icon_url ?? undefined"
+	<ManagedContentModal
+		ref="managedContentModal"
+		:header="formatMessage(messages.modpackContent)"
+		:source-name="project?.name ?? ''"
+		:source-icon-url="project?.icon_url ?? undefined"
 	/>
 </template>
 
@@ -159,7 +160,7 @@ import {
 	type ContentItem,
 	defineMessages,
 	formatLoader,
-	ModpackContentModal,
+	ManagedContentModal,
 	NewModal,
 	Table,
 	type TableColumn,
@@ -269,10 +270,10 @@ function handleReport() {
 	}
 }
 
-const modpackContentModal = ref<InstanceType<typeof ModpackContentModal>>()
+const managedContentModal = ref<InstanceType<typeof ManagedContentModal>>()
 
 async function openViewContents() {
-	modpackContentModal.value?.showLoading()
+	managedContentModal.value?.showLoading()
 	try {
 		// Ensure version data is available — the useQuery may not have resolved yet
 		const versionId = modpackVersionId.value
@@ -330,10 +331,10 @@ async function openViewContents() {
 				}
 			},
 		)
-		modpackContentModal.value?.show(contentItems)
+		managedContentModal.value?.show(contentItems)
 	} catch (err) {
 		console.error('Failed to load modpack contents:', err)
-		modpackContentModal.value?.show([])
+		managedContentModal.value?.show([])
 	}
 }
 
@@ -363,6 +364,10 @@ function hide() {
 }
 
 const messages = defineMessages({
+	modpackContent: {
+		id: 'app.modal.install-to-play.managed-content.modpack-header',
+		defaultMessage: 'Modpack content',
+	},
 	installToPlay: {
 		id: 'app.modal.install-to-play.header',
 		defaultMessage: 'Install to play',

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue

@@ -229,11 +229,11 @@
 			</div>
 		</template>
 	</NewModal>
-	<ModpackContentModal
+	<ManagedContentModal
 		ref="contentModal"
 		:header="formatMessage(messages.sharedInstanceContent)"
-		:modpack-name="preview?.name ?? ''"
-		:modpack-icon-url="preview?.iconUrl ?? undefined"
+		:source-name="preview?.name ?? ''"
+		:source-icon-url="preview?.iconUrl ?? undefined"
 	/>
 </template>
 
@@ -256,7 +256,7 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	MarkdownEditor,
-	ModpackContentModal,
+	ManagedContentModal,
 	NewModal,
 	Table,
 	type TableColumn,
@@ -289,7 +289,7 @@ type SharedInstanceCreator = {
 }
 
 const modal = ref<InstanceType<typeof NewModal>>()
-const contentModal = ref<InstanceType<typeof ModpackContentModal>>()
+const contentModal = ref<InstanceType<typeof ManagedContentModal>>()
 const externalFileTable = ref<HTMLElement | null>(null)
 const preview = ref<SharedInstanceInstallPreview | null>(null)
 const creator = ref<SharedInstanceCreator | null>(null)

apps/app-frontend/src/helpers/instance-content.ts

@@ -1,17 +1,14 @@
 import type {
 	ContentItem,
-	ContentModpackCardCategory,
-	ContentModpackCardProject,
-	ContentModpackCardVersion,
-	ContentOwner,
+	ManagedContentProject,
+	ManagedContentVersion,
 } from '@modrinth/ui'
 
 import {
 	get_content_items,
 	get_linked_modpack_info,
 	type LinkedModpackInfo,
 } from '@/helpers/instance'
-import { get_categories } from '@/helpers/tags.js'
 import type { CacheBehaviour } from '@/helpers/types'
 
 export type InstanceContentData = {
@@ -21,11 +18,8 @@ export type InstanceContentData = {
 }
 
 export type InstanceContentModpackData = {
-	project: ContentModpackCardProject
-	version: ContentModpackCardVersion
-	owner: ContentOwner | null
-	categories: ContentModpackCardCategory[]
-	hasUpdate: boolean
+	project: ManagedContentProject
+	version: ManagedContentVersion
 	updateVersionId: string | null
 }
 
@@ -34,19 +28,15 @@ export async function loadInstanceContentData(
 	cacheBehaviour?: CacheBehaviour,
 	onError?: (error: Error) => unknown,
 ): Promise<InstanceContentData> {
-	const [contentItems, modpackInfo, allCategories] = await Promise.all([
+	const [contentItems, modpackInfo] = await Promise.all([
 		get_content_items(path, cacheBehaviour).catch((error) => handleLoadError(error, onError)),
 		get_linked_modpack_info(path, cacheBehaviour).catch((error) => handleLoadError(error, onError)),
-		get_categories().catch((error) => handleLoadError(error, onError)),
 	])
 
 	return {
 		path,
 		contentItems: (contentItems as ContentItem[] | null | undefined) ?? null,
-		modpack: normalizeLinkedModpackInfo(
-			modpackInfo as LinkedModpackInfo | null | undefined,
-			allCategories as ContentModpackCardCategory[] | null | undefined,
-		),
+		modpack: normalizeLinkedModpackInfo(modpackInfo as LinkedModpackInfo | null | undefined),
 	}
 }
 
@@ -58,7 +48,6 @@ function handleLoadError(error: unknown, onError?: (error: Error) => unknown) {
 
 function normalizeLinkedModpackInfo(
 	modpackInfo: LinkedModpackInfo | null | undefined,
-	allCategories: ContentModpackCardCategory[] | null | undefined,
 ): InstanceContentModpackData | null {
 	if (!modpackInfo) return null
 
@@ -72,30 +61,6 @@ function normalizeLinkedModpackInfo(
 			...modpackInfo.version,
 			date_published: modpackInfo.version.date_published.toString(),
 		},
-		owner: modpackInfo.owner
-			? {
-					...modpackInfo.owner,
-					avatar_url: modpackInfo.owner.avatar_url ?? undefined,
-				}
-			: null,
-		categories: resolveLinkedModpackCategories(modpackInfo, allCategories),
-		hasUpdate: modpackInfo.has_update,
 		updateVersionId: modpackInfo.update_version_id,
 	}
 }
-
-function resolveLinkedModpackCategories(
-	modpackInfo: LinkedModpackInfo,
-	allCategories: ContentModpackCardCategory[] | null | undefined,
-) {
-	if (!allCategories || !modpackInfo.project.categories) return []
-
-	const seen = new Set<string>()
-	return allCategories.filter((category) => {
-		if (modpackInfo.project.categories.includes(category.name) && !seen.has(category.name)) {
-			seen.add(category.name)
-			return true
-		}
-		return false
-	})
-}

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

@@ -6,11 +6,6 @@
 				:instance="instance"
 				@published="emit('published')"
 			/>
-			<InstanceAdmonitionsSharedInstanceUpdateAvailable
-				v-else-if="item.kind === 'shared-instance-update-available'"
-				:instance-name="instance.name"
-				@review="emit('review-update', $event)"
-			/>
 			<InstanceAdmonitionsSharedInstanceWrongAccount
 				v-else-if="item.kind === 'shared-instance-wrong-account'"
 				:expected-user-id="sharedInstanceExpectedUserId"
@@ -38,7 +33,6 @@ import type { GameInstance } from '@/helpers/types'
 
 import InstanceAdmonitionsSharedInstanceStale from './shared-instance-stale.vue'
 import InstanceAdmonitionsSharedInstanceUnavailable from './shared-instance-unavailable.vue'
-import InstanceAdmonitionsSharedInstanceUpdateAvailable from './shared-instance-update-available.vue'
 import InstanceAdmonitionsSharedInstanceWrongAccount from './shared-instance-wrong-account.vue'
 import type { InstanceAdmonitionItem, SharedInstanceRole } from './types.ts'
 
@@ -54,13 +48,11 @@ const props = defineProps<{
 	sharedInstanceExpectedUserId?: string | null
 	sharedInstanceRole?: SharedInstanceRole | null
 	sharedInstanceSignedOut?: boolean
-	sharedInstanceUpdateAvailable?: boolean
 }>()
 
 const emit = defineEmits<{
 	published: []
 	delete: []
-	'review-update': [event: MouseEvent]
 }>()
 
 const sharedInstanceWrongAccount = computed(() => props.sharedInstanceWrongAccount ?? false)
@@ -76,15 +68,6 @@ const showSharedInstancePublishAdmonition = computed(
 		props.instance.shared_instance?.role === 'owner' &&
 		props.instance.shared_instance.status === 'stale',
 )
-const showSharedInstanceUpdateAdmonition = computed(
-	() =>
-		!sharedInstanceWrongAccount.value &&
-		!displayedSharedInstanceUnavailableReason.value &&
-		props.instance.install_stage === 'installed' &&
-		props.sharedInstanceRole === 'member' &&
-		props.sharedInstanceUpdateAvailable === true,
-)
-
 const stackItems = computed<InstanceAdmonitionItem[]>(() => {
 	const items: InstanceAdmonitionItem[] = []
 
@@ -120,15 +103,6 @@ const stackItems = computed<InstanceAdmonitionItem[]>(() => {
 		})
 	}
 
-	if (showSharedInstanceUpdateAdmonition.value) {
-		items.push({
-			id: 'shared-instance-update-available',
-			type: 'info',
-			dismissible: false,
-			kind: 'shared-instance-update-available',
-		})
-	}
-
 	return items
 })
 

apps/app-frontend/src/pages/instance/components/admonitions/messages.ts

@@ -21,19 +21,6 @@ export const instanceAdmonitionsMessages = defineMessages({
 		id: 'app.instance.admonitions.shared-instance.reviewing-button',
 		defaultMessage: 'Reviewing...',
 	},
-	sharedInstanceUpdateAvailableHeader: {
-		id: 'app.instance.admonitions.shared-instance.update-available-header',
-		defaultMessage: 'An update is available',
-	},
-	sharedInstanceUpdateAvailableBody: {
-		id: 'app.instance.admonitions.shared-instance.update-available-body',
-		defaultMessage:
-			'An update is required to play {name}. Please update to latest version to launch the game.',
-	},
-	sharedInstanceReviewUpdateButton: {
-		id: 'app.instance.admonitions.shared-instance.review-update-button',
-		defaultMessage: 'Review update',
-	},
 	sharedInstanceReviewHeader: {
 		id: 'app.instance.admonitions.shared-instance.review-header',
 		defaultMessage: 'Review changes',

apps/app-frontend/src/pages/instance/components/admonitions/types.ts

@@ -2,7 +2,6 @@ import type { StackedAdmonitionItem } from '@modrinth/ui'
 
 export type InstanceAdmonitionKind =
 	| 'shared-instance-stale'
-	| 'shared-instance-update-available'
 	| 'shared-instance-unavailable'
 	| 'shared-instance-wrong-account'
 

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

@@ -33,8 +33,8 @@
 					:recent-plays="recentPlays"
 					:ping="ping"
 					:minecraft-server="minecraftServer"
-					:linked-project-v3="linkedProjectV3"
-					:instance-id="instance.id"
+					:show-instance-play-time="showInstancePlayTime"
+					:playtime-label="playtimeLabel"
 				/>
 				<PageHeaderMetadataItem v-if="sharedInstanceManager" :action="sharedInstanceManagerAction">
 					{{ sharedInstanceManagerLabel }}
@@ -294,7 +294,6 @@ const props = withDefaults(
 		recentPlays?: number
 		ping?: number
 		minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
-		linkedProjectV3?: Labrinth.Projects.v3.Project
 		sharedInstanceManager?: {
 			type: 'user' | 'server'
 			name: string
@@ -316,7 +315,6 @@ const props = withDefaults(
 		recentPlays: undefined,
 		ping: undefined,
 		minecraftServer: undefined,
-		linkedProjectV3: undefined,
 		sharedInstanceManager: null,
 	},
 )

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

@@ -20,30 +20,26 @@
 
 		<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
 
-		<div v-if="minecraftServer?.region || ping" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
+		<div
+			v-if="showInstancePlayTime && playtimeLabel && (loadingServerPing || minecraftServer?.region || ping)"
+			class="h-1.5 w-1.5 rounded-full bg-surface-5"
+		></div>
 
-		<div v-if="linkedProjectV3" class="flex gap-1.5 items-center font-medium text-primary">
-			Linked to
-			<Avatar
-				:src="linkedProjectV3.icon_url"
-				:alt="linkedProjectV3.name"
-				:tint-by="instanceId"
-				size="24px"
-			/>
-			<router-link
-				:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
-				class="hover:underline text-primary truncate"
-			>
-				{{ linkedProjectV3.name }}
-			</router-link>
+		<div
+			v-if="showInstancePlayTime && playtimeLabel"
+			v-tooltip="'Total playtime'"
+			class="flex items-center gap-1.5 font-medium text-secondary"
+		>
+			<TimerIcon aria-hidden="true" class="size-5 shrink-0 text-current" />
+			{{ playtimeLabel }}
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
+import { TimerIcon } from '@modrinth/assets'
 import {
-	Avatar,
 	ServerOnlinePlayers,
 	ServerPing,
 	ServerRecentPlays,
@@ -57,7 +53,7 @@ defineProps<{
 	recentPlays?: number
 	ping?: number
 	minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
-	linkedProjectV3?: Labrinth.Projects.v3.Project
-	instanceId?: string
+	showInstancePlayTime?: boolean
+	playtimeLabel?: string
 }>()
 </script>