feat: show included modpack projects filter tag better

packages/ui/src/components/search/SearchFilterControl.vue

@@ -1,15 +1,25 @@
 <template>
 	<div class="flex flex-wrap items-center gap-1 empty:hidden">
 		<TagItem
-			v-if="selectedItems.length > 1"
+			v-if="selectedTagCount > 1"
 			class="transition-transform active:scale-[0.95]"
 			:action="clearFilters"
 		>
 			<XCircleIcon />
 			Clear all filters
 		</TagItem>
+		<TagItem v-if="selectedIncludedProjectItems.length > 0" :action="removeIncludedProjectFilters">
+			<XIcon />
+			{{
+				formatMessage(includedProjectsMessage, {
+					projects: selectedIncludedProjectItems
+						.map((item) => dependentProjectNames.get(item.option) ?? item.option)
+						.join(', '),
+				})
+			}}
+		</TagItem>
 		<TagItem
-			v-for="selectedItem in selectedItems"
+			v-for="selectedItem in otherSelectedItems"
 			:key="`remove-filter-${selectedItem.type}-${selectedItem.option}`"
 			:action="() => removeFilter(selectedItem)"
 		>
@@ -52,6 +62,7 @@ const selectedFilters = defineModel<FilterValue[]>('selectedFilters', { required
 
 const props = defineProps<{
 	filters: FilterType[]
+	projectType: string
 	providedFilters: FilterValue[]
 	overriddenProvidedFilterTypes: string[]
 	providedMessage?: MessageDescriptor | string
@@ -65,6 +76,10 @@ const dependentProjectMessage = defineMessage({
 	id: 'search.filter.dependent_project',
 	defaultMessage: 'Depends on: {project}',
 })
+const includedProjectsMessage = defineMessage({
+	id: 'search.filter.included_projects',
+	defaultMessage: 'Includes: {projects}',
+})
 
 type Item = {
 	type: string
@@ -146,6 +161,19 @@ const items: ComputedRef<Item[]> = computed(() => {
 })
 
 const selectedItems = computed(() => items.value.filter((x) => !x.provided))
+const selectedIncludedProjectItems = computed(() =>
+	props.projectType === 'modpack'
+		? selectedItems.value.filter((item) => item.type === 'compatible_dependency_project_ids')
+		: [],
+)
+const otherSelectedItems = computed(() =>
+	props.projectType === 'modpack'
+		? selectedItems.value.filter((item) => item.type !== 'compatible_dependency_project_ids')
+		: selectedItems.value,
+)
+const selectedTagCount = computed(
+	() => otherSelectedItems.value.length + (selectedIncludedProjectItems.value.length > 0 ? 1 : 0),
+)
 
 function removeFilter(filter: Item) {
 	selectedFilters.value = selectedFilters.value.filter(
@@ -153,6 +181,12 @@ function removeFilter(filter: Item) {
 	)
 }
 
+function removeIncludedProjectFilters() {
+	selectedFilters.value = selectedFilters.value.filter(
+		(filter) => filter.type !== 'compatible_dependency_project_ids',
+	)
+}
+
 async function clearFilters() {
 	selectedFilters.value = []
 }

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

@@ -185,6 +185,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		v-if="ctx.isServerType.value"
 		v-model:selected-filters="ctx.serverCurrentFilters.value"
 		:filters="ctx.serverFilterTypes.value"
+		:project-type="ctx.projectType.value"
 		:provided-filters="[]"
 		:overridden-provided-filter-types="[]"
 	/>
@@ -196,6 +197,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 				(f) => f.display !== 'none' && !(ctx.hiddenFilterTypes?.value ?? []).includes(f.id),
 			)
 		"
+		:project-type="ctx.projectType.value"
 		:provided-filters="ctx.providedFilters?.value ?? []"
 		:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
 		:provided-message="lockedMessages?.providedBy"