feat: warning filter + remove client only filter as it's useless (#5690)

* feat: warning filter

* fix: remove client_only filter

apps/frontend/src/pages/hosting/manage/[id]/content.vue

@@ -2,7 +2,6 @@
 import { injectModrinthServerContext, ServersManageContentPage } from '@modrinth/ui'
 
 const { server } = injectModrinthServerContext()
-const flags = useFeatureFlags()
 
 useHead({
 	title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,
@@ -10,5 +9,5 @@ useHead({
 </script>
 
 <template>
-	<ServersManageContentPage :show-client-only-filter="flags.developerMode" />
+	<ServersManageContentPage />
 </template>

packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue

@@ -150,6 +150,10 @@ const filterOptions = computed(() => {
 			}
 		})
 
+	if (items.value.some((item) => getClientWarningType(item) !== null)) {
+		options.push({ id: 'warnings', label: 'Warnings' })
+	}
+
 	if (items.value.some((item) => !item.enabled)) {
 		options.push({ id: 'disabled', label: 'Disabled' })
 	}
@@ -175,16 +179,18 @@ function toggleFilter(filterId: string) {
 	}
 }
 
-const attributeFilterIds = new Set(['disabled'])
+const attributeFilterIds = new Set(['disabled', 'warnings'])
 
 const typeFilteredCount = computed(() => {
 	if (selectedFilters.value.length === 0) return items.value.length
 	const typeFilters = selectedFilters.value.filter((f) => !attributeFilterIds.has(f))
 	const hasDisabledFilter = selectedFilters.value.includes('disabled')
+	const hasWarningsFilter = selectedFilters.value.includes('warnings')
 	return items.value.filter((item) => {
 		if (typeFilters.length > 0 && !typeFilters.includes(normalizeProjectType(item.project_type)))
 			return false
 		if (hasDisabledFilter && item.enabled) return false
+		if (hasWarningsFilter && getClientWarningType(item) === null) return false
 		return true
 	}).length
 })
@@ -206,10 +212,12 @@ const filteredItems = computed(() => {
 	if (selectedFilters.value.length > 0) {
 		const typeFilters = selectedFilters.value.filter((f) => !attributeFilterIds.has(f))
 		const hasDisabledFilter = selectedFilters.value.includes('disabled')
+		const hasWarningsFilter = selectedFilters.value.includes('warnings')
 		result = result.filter((item) => {
 			if (typeFilters.length > 0 && !typeFilters.includes(normalizeProjectType(item.project_type)))
 				return false
 			if (hasDisabledFilter && item.enabled) return false
+			if (hasWarningsFilter && getClientWarningType(item) === null) return false
 			return true
 		})
 	}

packages/ui/src/layouts/shared/content-tab/composables/content-filtering.ts

@@ -28,7 +28,7 @@ export interface ContentFilterOption {
 export interface ContentFilterConfig {
 	showTypeFilters?: boolean
 	showUpdateFilter?: boolean
-	showClientOnlyFilter?: boolean
+	showWarningsFilter?: boolean
 	isPackLocked?: Ref<boolean>
 	persistKey?: string
 }
@@ -62,8 +62,8 @@ export function useContentFilters(items: Ref<ContentItem[]>, config?: ContentFil
 			options.push({ id: 'updates', label: 'Updates' })
 		}
 
-		if (config?.showClientOnlyFilter && items.value.some((m) => getClientWarningType(m) !== null)) {
+		if (config?.showWarningsFilter && items.value.some((m) => getClientWarningType(m) !== null)) {
-			options.push({ id: 'client-only', label: 'Client-only' })
+			options.push({ id: 'warnings', label: 'Warnings' })
 		}
 
 		if (items.value.some((m) => !m.enabled)) {
@@ -91,7 +91,7 @@ export function useContentFilters(items: Ref<ContentItem[]>, config?: ContentFil
 	function applyFilters(source: ContentItem[]): ContentItem[] {
 		if (selectedFilters.value.length === 0) return source
 
-		const attributeFilters = new Set(['updates', 'disabled', 'client-only'])
+		const attributeFilters = new Set(['updates', 'disabled', 'warnings'])
 		const typeFilters = selectedFilters.value.filter((f) => !attributeFilters.has(f))
 		const activeAttributes = selectedFilters.value.filter((f) => attributeFilters.has(f))
 
@@ -106,7 +106,7 @@ export function useContentFilters(items: Ref<ContentItem[]>, config?: ContentFil
 			for (const filter of activeAttributes) {
 				if (filter === 'updates' && !item.has_update) return false
 				if (filter === 'disabled' && item.enabled) return false
-				if (filter === 'client-only' && getClientWarningType(item) === null) return false
+				if (filter === 'warnings' && getClientWarningType(item) === null) return false
 			}
 
 			return true

packages/ui/src/layouts/shared/content-tab/layout.vue

@@ -229,7 +229,7 @@ const { selectedFilters, filterOptions, toggleFilter, applyFilters } = useConten
 	{
 		showTypeFilters: true,
 		showUpdateFilter: ctx.hasUpdateSupport,
-		showClientOnlyFilter: ctx.showClientOnlyFilter ?? false,
+		showWarningsFilter: true,
 		isPackLocked: ctx.isPackLocked,
 		persistKey: ctx.filterPersistKey,
 	},

packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts

@@ -82,9 +82,6 @@ export interface ContentManagerContext {
 	// Upload progress (optional)
 	uploadState?: Ref<UploadState> | ComputedRef<UploadState>
 
-	// Show client-only environment filter pill
-	showClientOnlyFilter?: boolean
-
 	// Bulk operation guard — set by layout, checked by providers to suppress refreshes
 	isBulkOperating?: Ref<boolean>
 

packages/ui/src/layouts/wrapped/hosting/manage/content.vue

@@ -92,15 +92,6 @@ const leaveMessages = defineMessages({
 	},
 })
 
-const props = withDefaults(
-	defineProps<{
-		showClientOnlyFilter?: boolean
-	}>(),
-	{
-		showClientOnlyFilter: false,
-	},
-)
-
 const client = injectModrinthClient()
 const { server, worldId, busyReasons, isSyncingContent } = injectModrinthServerContext()
 const { addNotification } = injectNotificationManager()
@@ -896,7 +887,6 @@ provideContentManager({
 	browse: handleBrowseContent,
 	uploadFiles: handleUploadFiles,
 	uploadState,
-	showClientOnlyFilter: props.showClientOnlyFilter,
 	deletionContext: 'server',
 	hasUpdateSupport: true,
 	updateItem: handleUpdateItem,