From 77209f6977b6b35962206ae6a731b43faecfde79 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 5 Nov 2026 06:52:17 -0800
Subject: [PATCH] add indicator for modpack loaders in modview

---
 .../project-review/versions/version-card.vue    | 17 +++++++++++++----
 .../moderation/settings/ModerationSettings.vue  |  1 +
 packages/moderation/src/data/settings.ts        |  8 ++++++++
 packages/ui/src/components/base/TagTagItem.vue  |  3 +++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/project-review/versions/version-card.vue b/apps/frontend/src/components/project-review/versions/version-card.vue
index 3642d50476f..9681236cd84 100644
--- a/apps/frontend/src/components/project-review/versions/version-card.vue
+++ b/apps/frontend/src/components/project-review/versions/version-card.vue
@@ -11,7 +11,12 @@
 					:title="versionChannels[version.version_type]"
 					size="sm"
 				/>
-				<TagTagItem v-for="loader in platforms" :key="loader" :tag="loader" />
+				<TagTagItem
+					v-for="loader in platforms"
+					:key="loader"
+					:tag="loader"
+					:suffix="mrpackLoaderSuffix"
+				/>
 				<TagItem v-for="game in gameVersions" :key="game">{{ game }}</TagItem>
 				<EnvironmentTags v-if="version.environment" :environment="version.environment" />
 				<TagItem
@@ -430,10 +435,14 @@ useReviewInteraction({
 	collapse: () => toggleAccordion(changelogAccordion.value),
 })
 const withheld = computed(() => !!props.version.files_missing_attribution?.length)
+const usesMrpackLoaders = computed(() => props.version.loaders.includes('mrpack'))
+const mrpackLoaderSuffix = computed(() =>
+	usesMrpackLoaders.value && settings.value.get(moderationSettings.General.ShowModpackLoaderSuffix)
+		? '(MPK)'
+		: undefined,
+)
 const platforms = computed(() =>
-	props.version.loaders.includes('mrpack')
-		? (props.version.mrpack_loaders ?? [])
-		: props.version.loaders,
+	usesMrpackLoaders.value ? (props.version.mrpack_loaders ?? []) : props.version.loaders,
 )
 const gameVersions = computed(() =>
 	tags?.gameVersions.value?.length
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
index 145401e4052..3c087f65568 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
@@ -97,6 +97,7 @@ const groups = [
 			general.ExpandVersionDetailsByDefault,
 			general.ExpandVersionDependenciesByDefault,
 			general.ExpandVersionChangelogByDefault,
+			general.ShowModpackLoaderSuffix,
 			general.EnableDelayedHoverMessagePreviews,
 			general.PrivateMessageHighlight,
 		],
diff --git a/packages/moderation/src/data/settings.ts b/packages/moderation/src/data/settings.ts
index 67c522429d0..ed4cd047f9c 100644
--- a/packages/moderation/src/data/settings.ts
+++ b/packages/moderation/src/data/settings.ts
@@ -197,6 +197,14 @@ const settings = {
 				'Expand the changelog automatically when viewing version details in project review.',
 			default: true,
 		}),
+		ShowModpackLoaderSuffix: setting.asToggle({
+			type: 'toggle',
+			id: 'show-modpack-loader-suffix',
+			title: 'Mark modpack loaders',
+			description:
+				'Append (MPK) to loader badges that come from modpack loaders in project review.',
+			default: true,
+		}),
 		SlicerButtonInVersions: setting.asToggle({
 			type: 'toggle',
 			id: 'slicer-button-in-versions',
diff --git a/packages/ui/src/components/base/TagTagItem.vue b/packages/ui/src/components/base/TagTagItem.vue
index 9a306a99775..1c17615a3c6 100644
--- a/packages/ui/src/components/base/TagTagItem.vue
+++ b/packages/ui/src/components/base/TagTagItem.vue
@@ -2,6 +2,7 @@
 	<TagItem :action="action" :style="isLoader ? `--_color: var(--color-platform-${tag})` : ''">
 		<component :is="icon" v-if="icon" />
 		<FormattedTag :tag="tag" />
+		<span v-if="suffix" class="text-primary">{{ suffix }}</span>
 	</TagItem>
 </template>
 <script setup lang="ts">
@@ -17,10 +18,12 @@ const props = withDefaults(
 		tag: string
 		hideNonLoaderIcon?: boolean
 		action?: (event: MouseEvent) => void
+		suffix?: string
 	}>(),
 	{
 		hideNonLoaderIcon: false,
 		action: undefined,
+		suffix: undefined,
 	},
 )