add indicator for modpack loaders in modview

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

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,
 		],

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',

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,
 	},
 )