feat: add external dep sorting to moderation queue (#6161)

* feat: add external dep sorting to moderation queue

* prepr

apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue

@@ -48,6 +48,16 @@
 							<span class="text-sm text-secondary">Requesting</span>
 							<Badge :type="queueEntry.project.requested_status" class="text-sm" />
 						</div>
+						<div
+							v-if="showExternalDependencies"
+							v-tooltip="'External dependencies'"
+							class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+						>
+							<FileIcon aria-hidden="true" class="size-4 text-secondary" />
+							<span class="text-sm font-medium text-secondary">
+								{{ queueEntry.external_dependencies_count }}
+							</span>
+						</div>
 					</div>
 					<div v-if="queueEntry.ownership?.kind === 'user'">
 						<NuxtLink
@@ -119,7 +129,7 @@
 </template>
 
 <script setup lang="ts">
-import { ClipboardCopyIcon, LinkIcon, ScaleIcon } from '@modrinth/assets'
+import { ClipboardCopyIcon, FileIcon, LinkIcon, ScaleIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	Badge,
@@ -151,6 +161,7 @@ const formatDateTimeFull = useFormatDateTime({
 
 const props = defineProps<{
 	queueEntry: ModerationProject
+	showExternalDependencies?: boolean
 }>()
 
 const emit = defineEmits<{

apps/frontend/src/helpers/moderation.ts

@@ -199,17 +199,20 @@ export type ModerationOwnership = ModerationOwnershipUser | ModerationOwnershipO
 
 export interface ProjectWithOwnership {
 	ownership: ModerationOwnership
+	external_dependencies_count: number
 	[key: string]: any
 }
 
 export interface ModerationProject {
 	project: any
 	ownership: ModerationOwnership | null
+	external_dependencies_count: number
 }
 
 export function toModerationProjects(projects: ProjectWithOwnership[]): ModerationProject[] {
-	return projects.map(({ ownership, ...project }) => ({
+	return projects.map(({ ownership, external_dependencies_count, ...project }) => ({
 		project,
 		ownership: ownership ?? null,
+		external_dependencies_count: external_dependencies_count,
 	}))
 }

apps/frontend/src/pages/moderation/index.vue

@@ -34,7 +34,7 @@
 
 					<Combobox
 						v-model="currentSortType"
-						class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
+						class="!w-full flex-grow sm:!w-[240px] sm:flex-grow-0"
 						:options="sortTypes"
 						:placeholder="formatMessage(commonMessages.sortByLabel)"
 						@select="goToPage(1)"
@@ -42,7 +42,7 @@
 						<template #selected>
 							<span class="flex flex-row gap-2 align-middle font-semibold">
 								<SortAscIcon
-									v-if="currentSortType === 'Oldest'"
+									v-if="currentSortType === 'Oldest' || currentSortType === 'Least external deps'"
 									class="size-5 flex-shrink-0 text-secondary"
 								/>
 								<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
@@ -113,6 +113,7 @@
 				v-else
 				:key="item.project.id"
 				:queue-entry="item"
+				:show-external-dependencies="currentFilterType === MODPACK_FILTER_TYPE"
 				@start-from-project="startFromProject"
 			/>
 		</div>
@@ -246,12 +247,27 @@ const filterTypes: ComboboxOption<string>[] = [
 const filterTypeValues = filterTypes.map((option) => option.value)
 const DEFAULT_FILTER_TYPE = filterTypeValues[0]
 
-const sortTypes: ComboboxOption<string>[] = [
+const MODPACK_FILTER_TYPE = 'Modpacks'
+
+const baseSortTypes: ComboboxOption<string>[] = [
 	{ value: 'Oldest', label: 'Oldest' },
 	{ value: 'Newest', label: 'Newest' },
 ]
-const sortTypeValues = sortTypes.map((option) => option.value)
+const modpackSortTypes: ComboboxOption<string>[] = [
-const DEFAULT_SORT_TYPE = sortTypeValues[0]
+	{ value: 'Most external deps', label: 'Most external deps' },
+	{ value: 'Least external deps', label: 'Least external deps' },
+]
+const DEFAULT_SORT_TYPE = baseSortTypes[0].value
+const modpackSortTypeValues = modpackSortTypes.map((option) => option.value)
+
+const sortTypes = computed(() => {
+	if (currentFilterType.value === MODPACK_FILTER_TYPE) {
+		return [...baseSortTypes, ...modpackSortTypes]
+	}
+	return baseSortTypes
+})
+
+const sortTypeValues = computed(() => sortTypes.value.map((option) => option.value))
 
 const itemsPerPageOptions: ComboboxOption<number>[] = [
 	{ value: 20, label: '20' },
@@ -269,17 +285,31 @@ function parseFilterTypeFromQuery(value: LocationQueryValue | LocationQueryValue
 	return filterTypeValues.includes(query) ? query : DEFAULT_FILTER_TYPE
 }
 
-function parseSortTypeFromQuery(value: LocationQueryValue | LocationQueryValue[]): string {
+function parseSortTypeFromQuery(
+	value: LocationQueryValue | LocationQueryValue[],
+	filterType: string,
+): string {
 	const query = queryAsStringOrEmpty(value)
-	return sortTypeValues.includes(query) ? query : DEFAULT_SORT_TYPE
+	const validValues = [
+		...baseSortTypes.map((option) => option.value),
+		...(filterType === MODPACK_FILTER_TYPE ? modpackSortTypeValues : []),
+	]
+	return validValues.includes(query) ? query : DEFAULT_SORT_TYPE
 }
 
 const currentFilterType = ref(parseFilterTypeFromQuery(route.query.filter))
-const currentSortType = ref(parseSortTypeFromQuery(route.query.sort))
+const currentSortType = ref(parseSortTypeFromQuery(route.query.sort, currentFilterType.value))
 
 watch(
 	currentFilterType,
 	(newFilter) => {
+		if (
+			newFilter !== MODPACK_FILTER_TYPE &&
+			modpackSortTypeValues.includes(currentSortType.value)
+		) {
+			currentSortType.value = DEFAULT_SORT_TYPE
+		}
+
 		const currentQuery = { ...route.query }
 		if (newFilter && newFilter !== DEFAULT_FILTER_TYPE) {
 			currentQuery.filter = newFilter
@@ -326,7 +356,7 @@ watch(
 watch(
 	() => route.query.sort,
 	(newSortParam) => {
-		const newValue = parseSortTypeFromQuery(newSortParam)
+		const newValue = parseSortTypeFromQuery(newSortParam, currentFilterType.value)
 		if (currentSortType.value !== newValue) {
 			currentSortType.value = newValue
 		}
@@ -423,7 +453,11 @@ const typeFiltered = computed(() => {
 const filteredProjects = computed(() => {
 	const filtered = [...typeFiltered.value]
 
-	if (currentSortType.value === 'Oldest') {
+	if (currentSortType.value === 'Most external deps') {
+		filtered.sort((a, b) => b.external_dependencies_count - a.external_dependencies_count)
+	} else if (currentSortType.value === 'Least external deps') {
+		filtered.sort((a, b) => a.external_dependencies_count - b.external_dependencies_count)
+	} else if (currentSortType.value === 'Oldest') {
 		filtered.sort((a, b) => {
 			const dateA = new Date(a.project.queued || a.project.published || 0).getTime()
 			const dateB = new Date(b.project.queued || b.project.published || 0).getTime()