From 73b3871e722ff5d65a7e863200de8e2fa0a7f0e2 Mon Sep 17 00:00:00 2001
From: Robin <robin.murer11@gmail.com>
Date: Mon, 13 Jul 2026 20:51:07 +0200
Subject: [PATCH 1/5] feat: add norisk client source support (#6707)

Signed-off-by: Robin <me@orb1n.dev>
---
 .../src/routes/v3/analytics_get/metrics/project_downloads.rs     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/labrinth/src/routes/v3/analytics_get/metrics/project_downloads.rs b/apps/labrinth/src/routes/v3/analytics_get/metrics/project_downloads.rs
index 73bf19845f..36e8aabe16 100644
--- a/apps/labrinth/src/routes/v3/analytics_get/metrics/project_downloads.rs
+++ b/apps/labrinth/src/routes/v3/analytics_get/metrics/project_downloads.rs
@@ -657,6 +657,7 @@ static DOWNLOAD_SOURCE_PATTERNS: LazyLock<Vec<(Regex, DownloadSourcePattern)>> =
             (r"^mrpack4server", P::Named("mrpack4server")),
             (r"^DawnLauncher/", P::Named("Dawn")),
             (r"^Complementary-Installer", P::Named("Complementary Installer")),
+            (r"^noriskclient-launcher-v3/", P::Named("NoRisk Client")),
             (
                 r"^(Mozilla/|Chrome/|Chromium/|Firefox/|Safari/|AppleWebKit/|Edg/|OPR/)",
                 P::Website,

From 3ac3b9539dd70319e5587ba1dd8c88ab5ee761fd Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Mon, 13 Jul 2026 12:00:48 -0700
Subject: [PATCH 2/5] changelog

---
 packages/blog/changelog.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/blog/changelog.ts b/packages/blog/changelog.ts
index 45544abbf2..e999c4bbe8 100644
--- a/packages/blog/changelog.ts
+++ b/packages/blog/changelog.ts
@@ -10,6 +10,12 @@ export type VersionEntry = {
 }
 
 const VERSIONS: VersionEntry[] = [
+	{
+		date: `2026-07-13T19:00:42+00:00`,
+		product: 'web',
+		body: `## Changed
+- Updated translations`,
+	},
 	{
 		date: `2026-07-10T17:38:17+00:00`,
 		product: 'app',

From 39b4cf62eac051cc4c7a1c74665e48b791a76e98 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 13 Jul 2026 14:23:58 -0700
Subject: [PATCH 3/5] feat: implement depends on search filter

---
 .../components/project/ProjectCombobox.vue    |  3 +-
 .../components/search/SearchFilterControl.vue | 61 ++++++++++++-
 .../components/search/SearchSidebarFilter.vue | 87 ++++++++++++++++++-
 .../composables/use-browse-search.ts          |  7 ++
 .../browse-tab/providers/browse-manager.ts    |  1 +
 .../src/layouts/shared/browse-tab/sidebar.vue |  2 +
 packages/ui/src/locales/en-US/index.json      | 12 +++
 packages/ui/src/utils/search.ts               | 29 ++++++-
 8 files changed, 192 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/project/ProjectCombobox.vue b/packages/ui/src/components/project/ProjectCombobox.vue
index dd616f6f80..15cc1a9b73 100644
--- a/packages/ui/src/components/project/ProjectCombobox.vue
+++ b/packages/ui/src/components/project/ProjectCombobox.vue
@@ -32,12 +32,13 @@ export type ProjectType =
 	| 'plugin'
 	| 'server'
 
-interface SearchHit {
+export interface SearchHit {
 	project_id: string
 	title: string
 	icon_url?: string
 	project_type: string
 	slug: string
+	author?: string
 }
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/search/SearchFilterControl.vue b/packages/ui/src/components/search/SearchFilterControl.vue
index 72389cbf5f..755e787922 100644
--- a/packages/ui/src/components/search/SearchFilterControl.vue
+++ b/packages/ui/src/components/search/SearchFilterControl.vue
@@ -37,13 +37,16 @@
 
 <script setup lang="ts">
 import { BanIcon, LockIcon, XCircleIcon, XIcon } from '@modrinth/assets'
+import { useQuery } from '@tanstack/vue-query'
 import { computed, type ComputedRef } from 'vue'
 
 import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
+import { injectModrinthClient } from '../../providers'
 import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
 import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()
+const { labrinth } = injectModrinthClient()
 
 const selectedFilters = defineModel<FilterValue[]>('selectedFilters', { required: true })
 
@@ -58,6 +61,10 @@ const defaultProvidedMessage = defineMessage({
 	id: 'search.filter.locked.default',
 	defaultMessage: 'Filter locked',
 })
+const dependentProjectMessage = defineMessage({
+	id: 'search.filter.dependent_project',
+	defaultMessage: 'Depends on: {project}',
+})
 
 type Item = {
 	type: string
@@ -67,13 +74,39 @@ type Item = {
 	provided: boolean
 }
 
+const dependentProjectIds = computed(() =>
+	[
+		...new Set(
+			[...selectedFilters.value, ...props.providedFilters]
+				.filter((filter) => filter.type === 'compatible_dependency_project_ids')
+				.map((filter) => filter.option),
+		),
+	].sort(),
+)
+
+const { data: dependentProjects } = useQuery({
+	queryKey: computed(() => [
+		'search-filter-control',
+		'dependent-projects',
+		dependentProjectIds.value,
+	]),
+	queryFn: () => labrinth.projects_v2.getMultiple(dependentProjectIds.value),
+	enabled: computed(() => dependentProjectIds.value.length > 0),
+	placeholderData: [],
+	refetchOnWindowFocus: false,
+})
+
+const dependentProjectNames = computed(
+	() => new Map(dependentProjects.value?.map((project) => [project.id, project.title]) ?? []),
+)
+
 function filterMatches(type: FilterType, option: FilterOption, list: FilterValue[]) {
 	return list.some((provided) => provided.type === type.id && provided.option === option.id)
 }
 
 const items: ComputedRef<Item[]> = computed(() => {
-	return props.filters.flatMap((type) =>
-		type.options
+	return props.filters.flatMap((type) => {
+		const optionItems = type.options
 			.filter(
 				(option) =>
 					filterMatches(type, option, selectedFilters.value) ||
@@ -86,8 +119,30 @@ const items: ComputedRef<Item[]> = computed(() => {
 					?.negative,
 				provided: filterMatches(type, option, props.providedFilters),
 				formatted_name: option.formatted_name,
+			}))
+
+		if (type.id !== 'compatible_dependency_project_ids') {
+			return optionItems
+		}
+
+		const customValues = [...selectedFilters.value, ...props.providedFilters].filter(
+			(filter) => filter.type === type.id,
+		)
+		return [
+			...optionItems,
+			...customValues.map((filter) => ({
+				type: type.id,
+				option: filter.option,
+				negative: filter.negative,
+				provided: props.providedFilters.some(
+					(provided) => provided.type === type.id && provided.option === filter.option,
+				),
+				formatted_name: formatMessage(dependentProjectMessage, {
+					project: dependentProjectNames.value.get(filter.option) ?? filter.option,
+				}),
 			})),
-	)
+		]
+	})
 })
 
 const selectedItems = computed(() => items.value.filter((x) => !x.provided))
diff --git a/packages/ui/src/components/search/SearchSidebarFilter.vue b/packages/ui/src/components/search/SearchSidebarFilter.vue
index 99ca2b54ec..1e1b3b1863 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -71,6 +71,48 @@
 		</template>
 		<template v-else #default>
 			<slot name="prefix" />
+			<div
+				v-if="filterType.display === 'project'"
+				:class="innerPanelClass ? innerPanelClass : ''"
+				class="flex flex-col gap-3"
+			>
+				<ProjectCombobox
+					v-show="!selectedProjectId || refreshing"
+					ref="projectCombobox"
+					search-placeholder="Search for a project..."
+					:model-value="selectedProjectId"
+					:project-types="selectableProjectTypes"
+					@update:model-value="setSelectedProjectId"
+				/>
+				<template v-if="selectedProjectId && !refreshing">
+					<div class="flex items-center justify-between gap-3 px-2 text-secondary">
+						<span>{{ formatMessage(messages.dependentCount, { count: resultCount ?? 0 }) }}</span>
+						<button
+							class="border-none bg-transparent p-0 text-secondary cursor-pointer hover:text-contrast"
+							@click="setSelectedProjectId(undefined)"
+						>
+							{{ formatMessage(messages.clearFilter) }}
+						</button>
+					</div>
+					<div class="flex items-center gap-3 rounded-2xl bg-surface-1 p-3">
+						<img
+							v-if="selectedProject?.icon_url"
+							:src="selectedProject.icon_url"
+							:alt="selectedProject.title"
+							class="size-14 shrink-0 rounded-xl object-cover"
+						/>
+						<PackageIcon v-else class="size-14 shrink-0 text-secondary" />
+						<div class="min-w-0">
+							<div class="truncate text-base font-bold text-contrast">
+								{{ selectedProject?.title ?? selectedProjectId }}
+							</div>
+							<div v-if="selectedProject?.author" class="truncate text-sm text-secondary">
+								{{ selectedProject.author }}
+							</div>
+						</div>
+					</div>
+				</template>
+			</div>
 			<div
 				v-if="filterType.display === 'toggle'"
 				:class="innerPanelClass ? innerPanelClass : ''"
@@ -90,7 +132,7 @@
 					/>
 				</label>
 			</div>
-			<template v-if="filterType.display !== 'toggle'">
+			<template v-if="filterType.display !== 'toggle' && filterType.display !== 'project'">
 				<StyledInput
 					v-if="filterType.searchable"
 					:id="`search-${filterType.id}`"
@@ -206,7 +248,14 @@
 </template>
 
 <script setup lang="ts">
-import { BanIcon, DropdownIcon, LockOpenIcon, SearchIcon, UpdatedIcon } from '@modrinth/assets'
+import {
+	BanIcon,
+	DropdownIcon,
+	LockOpenIcon,
+	PackageIcon,
+	SearchIcon,
+	UpdatedIcon,
+} from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
@@ -215,6 +264,10 @@ import Accordion from '../base/Accordion.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
 import Toggle from '../base/Toggle.vue'
 import { Checkbox, ScrollablePanel, StyledInput } from '../index'
+import ProjectCombobox, {
+	type ProjectType as ProjectComboboxProjectType,
+	type SearchHit,
+} from '../project/ProjectCombobox.vue'
 import SearchFilterGroup from './SearchFilterGroup.vue'
 import SearchFilterOption from './SearchFilterOption.vue'
 
@@ -234,6 +287,8 @@ const props = defineProps<{
 	innerPanelClass?: string
 	openByDefault?: boolean
 	providedFilters: FilterValue[]
+	resultCount?: number
+	refreshing?: boolean
 }>()
 
 defineOptions({
@@ -244,6 +299,26 @@ const query = ref('')
 const showMore = ref(false)
 
 const accordion = ref<InstanceType<typeof Accordion> | null>()
+const projectCombobox = ref<{ selectedProject: SearchHit | null } | null>(null)
+const selectableProjectTypes: ProjectComboboxProjectType[] = [
+	'mod',
+	'modpack',
+	'resourcepack',
+	'shader',
+	'datapack',
+	'plugin',
+]
+const selectedProject = computed(() => projectCombobox.value?.selectedProject ?? null)
+const selectedProjectId = computed(
+	() => selectedFilters.value.find((filter) => filter.type === props.filterType.id)?.option,
+)
+
+function setSelectedProjectId(projectId: string | undefined) {
+	const otherFilters = selectedFilters.value.filter((filter) => filter.type !== props.filterType.id)
+	selectedFilters.value = projectId
+		? [...otherFilters, { type: props.filterType.id, option: projectId }]
+		: otherFilters
+}
 
 const selectedFilterOptions = computed(() =>
 	props.filterType.options.filter((option) =>
@@ -397,6 +472,14 @@ function clearFilters() {
 }
 
 const messages = defineMessages({
+	clearFilter: {
+		id: 'search.filter.clear',
+		defaultMessage: 'Clear',
+	},
+	dependentCount: {
+		id: 'search.filter.dependent_count',
+		defaultMessage: '{count, plural, one {# dependent} other {# dependents}}',
+	},
 	searchPlaceholder: {
 		id: 'search.filter.option.search.placeholder',
 		defaultMessage: 'Search...',
diff --git a/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts b/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
index bc4861949e..12463e5a9e 100644
--- a/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
+++ b/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
@@ -48,6 +48,7 @@ export interface BrowseSearchState {
 	effectiveCurrentSortType: Ref<SortType>
 
 	loading: Ref<boolean>
+	refreshing: Ref<boolean>
 	projectHits: ShallowRef<BrowseSearchResponse['projectHits']>
 	serverHits: ShallowRef<BrowseSearchResponse['serverHits']>
 	totalHits: Ref<number>
@@ -172,6 +173,7 @@ export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchSt
 	])
 
 	const loading = ref(true)
+	const refreshing = ref(false)
 	const projectHits = shallowRef<BrowseSearchResponse['projectHits']>([])
 	const serverHits = shallowRef<BrowseSearchResponse['serverHits']>([])
 	const totalHits = ref(0)
@@ -205,6 +207,7 @@ export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchSt
 	)
 
 	watch(effectiveRequestParams, (newVal, oldVal) => {
+		refreshing.value = true
 		debug('effectiveRequestParams changed', {
 			from: oldVal?.substring(0, 80),
 			to: newVal?.substring(0, 80),
@@ -217,6 +220,7 @@ export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchSt
 
 	async function refreshSearch() {
 		const version = ++searchVersion
+		refreshing.value = true
 		debug('refreshSearch start', {
 			version,
 			projectType: options.projectType.value,
@@ -253,11 +257,13 @@ export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchSt
 
 			updateUrlParams()
 			loading.value = false
+			refreshing.value = false
 		} catch (err) {
 			debug('refreshSearch error', err)
 			console.error('Browse search error:', err)
 			if (version === searchVersion) {
 				loading.value = false
+				refreshing.value = false
 			}
 		}
 	}
@@ -323,6 +329,7 @@ export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchSt
 		effectiveSortTypes,
 		effectiveCurrentSortType,
 		loading,
+		refreshing,
 		projectHits,
 		serverHits,
 		totalHits,
diff --git a/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts b/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
index 9d3133c91b..fe30899966 100644
--- a/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
+++ b/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
@@ -31,6 +31,7 @@ export interface BrowseManagerContext {
 	effectiveSortTypes: ComputedRef<readonly SortType[]>
 	effectiveCurrentSortType: Ref<SortType>
 	loading: Ref<boolean>
+	refreshing: Ref<boolean>
 	projectHits: ShallowRef<BrowseSearchResponse['projectHits']>
 	serverHits: ShallowRef<BrowseSearchResponse['serverHits']>
 	totalHits: Ref<number>
diff --git a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
index 29a78996ed..08537269e4 100644
--- a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
@@ -194,6 +194,8 @@ function getFilterOpenByDefault(filterId: string): boolean {
 				v-model:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
 				:provided-filters="ctx.providedFilters?.value ?? []"
 				:filter-type="filter"
+				:result-count="ctx.totalHits.value"
+				:refreshing="ctx.refreshing.value"
 				:class="filterClass"
 				:button-class="buttonClass"
 				:content-class="contentClass"
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 23f276af3c..acb15399c2 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3548,6 +3548,15 @@
   "s.bg": {
     "defaultMessage": "Background task running"
   },
+  "search.filter.clear": {
+    "defaultMessage": "Clear"
+  },
+  "search.filter.dependent_count": {
+    "defaultMessage": "{count, plural, one {# dependent} other {# dependents}}"
+  },
+  "search.filter.dependent_project": {
+    "defaultMessage": "Depends on: {project}"
+  },
   "search.filter.locked.default": {
     "defaultMessage": "Filter locked"
   },
@@ -3590,6 +3599,9 @@
   "search.filter_type.advanced.exclude_plugin": {
     "defaultMessage": "Exclude plugins"
   },
+  "search.filter_type.compatible_dependency_project_ids": {
+    "defaultMessage": "Depends on"
+  },
   "search.filter_type.environment": {
     "defaultMessage": "Environment"
   },
diff --git a/packages/ui/src/utils/search.ts b/packages/ui/src/utils/search.ts
index 5422a9b7fc..0651fe938e 100644
--- a/packages/ui/src/utils/search.ts
+++ b/packages/ui/src/utils/search.ts
@@ -43,10 +43,11 @@ export type FilterType = {
 	}[]
 	searchable: boolean
 	allows_custom_options?: 'and' | 'or'
+	custom_option_field?: string
 	ordering?: number
 } & (
 	| {
-			display: 'all' | 'scrollable' | 'none' | 'toggle'
+			display: 'all' | 'scrollable' | 'none' | 'project' | 'toggle'
 	  }
 	| {
 			display: 'expandable'
@@ -472,6 +473,24 @@ export function useSearch(
 				options: [],
 				allows_custom_options: 'and',
 			},
+			{
+				id: 'compatible_dependency_project_ids',
+				formatted_name: formatMessage(
+					defineMessage({
+						id: 'search.filter_type.compatible_dependency_project_ids',
+						defaultMessage: 'Depends on',
+					}),
+				),
+				supported_project_types: ALL_PROJECT_TYPES,
+				query_param: 'dep',
+				supports_negative_filter: false,
+				display: 'project',
+				searchable: false,
+				options: [],
+				allows_custom_options: 'and',
+				custom_option_field: 'compatible_dependency_project_ids',
+				ordering: -999,
+			},
 			{
 				id: 'advanced',
 				formatted_name: formatMessage(
@@ -533,7 +552,9 @@ export function useSearch(
 					formatted_name: filterValue.option,
 					icon: undefined,
 					method: type.allows_custom_options,
-					value: filterValue.option,
+					value: type.custom_option_field
+						? `${type.custom_option_field}:${filterValue.option}`
+						: filterValue.option,
 				}
 			} else if (!option) {
 				console.error(`Filter option ${filterValue.option} not found`)
@@ -771,8 +792,8 @@ export function useSearch(
 		currentFilters.value.forEach((filterValue) => {
 			const type = filters.value.find((type) => type.id === filterValue.type)
 			const option = type?.options.find((option) => option.id === filterValue.option)
-			if (type && option) {
-				const value = getOptionValue(option, filterValue.negative)
+			if (type && (option || type.allows_custom_options)) {
+				const value = option ? getOptionValue(option, filterValue.negative) : filterValue.option
 				if (items[type.query_param]) {
 					items[type.query_param].push(value)
 				} else {

From 94f74b68c8c79411b00dcc8851b348e9a8176624 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 14 Jul 2026 11:51:26 -0700
Subject: [PATCH 4/5] feat: add modpack "includes content" filter and update
 depends on

---
 .../components/project/ProjectCombobox.vue    |  15 +-
 .../search/SearchDependsOnFilter.vue          | 310 ++++++++++++++++++
 .../components/search/SearchSidebarFilter.vue |  97 +-----
 .../src/layouts/shared/browse-tab/sidebar.vue |   5 +
 packages/ui/src/locales/en-US/index.json      |  39 +++
 packages/ui/src/utils/search.ts               |  43 +--
 6 files changed, 405 insertions(+), 104 deletions(-)
 create mode 100644 packages/ui/src/components/search/SearchDependsOnFilter.vue

diff --git a/packages/ui/src/components/project/ProjectCombobox.vue b/packages/ui/src/components/project/ProjectCombobox.vue
index 15cc1a9b73..fca01c813f 100644
--- a/packages/ui/src/components/project/ProjectCombobox.vue
+++ b/packages/ui/src/components/project/ProjectCombobox.vue
@@ -84,6 +84,10 @@ const searchResultsCache = ref<Map<string, SearchHit>>(new Map())
 
 const { labrinth } = injectModrinthClient()
 
+function isAllowedProjectType(projectType: string): boolean {
+	return !props.projectTypes || props.projectTypes.includes(projectType as ProjectType)
+}
+
 const userProjectHits = ref<SearchHit[]>([])
 const userProjectsFuse = ref<Fuse<SearchHit> | null>(null)
 
@@ -164,7 +168,7 @@ watch(
 		} else {
 			try {
 				const project = await labrinth.projects_v2.get(newId)
-				if (project) {
+				if (project && isAllowedProjectType(project.project_type)) {
 					hit = {
 						project_id: project.id,
 						title: project.title,
@@ -179,6 +183,9 @@ watch(
 				return
 			}
 		}
+		if (hit && !isAllowedProjectType(hit.project_type)) {
+			hit = null
+		}
 
 		selectedProject.value = hit
 		if (hit && !options.value.some((o) => o.value === hit!.project_id)) {
@@ -221,7 +228,11 @@ const search = async (query: string) => {
 		const uniqueHits: SearchHit[] = []
 
 		for (const hit of allHits) {
-			if (!seenIds.has(hit.project_id) && !excludeSet.has(hit.project_id)) {
+			if (
+				isAllowedProjectType(hit.project_type) &&
+				!seenIds.has(hit.project_id) &&
+				!excludeSet.has(hit.project_id)
+			) {
 				seenIds.add(hit.project_id)
 				uniqueHits.push(hit)
 				searchResultsCache.value.set(hit.project_id, hit)
diff --git a/packages/ui/src/components/search/SearchDependsOnFilter.vue b/packages/ui/src/components/search/SearchDependsOnFilter.vue
new file mode 100644
index 0000000000..e0db00726a
--- /dev/null
+++ b/packages/ui/src/components/search/SearchDependsOnFilter.vue
@@ -0,0 +1,310 @@
+<template>
+	<div v-if="isModpack" :class="innerPanelClass" class="flex flex-col gap-3">
+		<ProjectCombobox
+			:model-value="pendingProjectId"
+			:project-types="selectableProjectTypes"
+			:exclude-project-ids="dependencyProjectIds"
+			:search-placeholder="formatMessage(messages.searchContentPlaceholder)"
+			@update:model-value="addIncludedProject"
+		/>
+		<div v-if="dependencyProjectIds.length > 0" class="flex flex-col gap-1">
+			<div
+				v-for="projectId in dependencyProjectIds"
+				:key="projectId"
+				class="group flex min-w-0 items-center gap-2 rounded-xl px-1 py-1 text-primary"
+			>
+				<img
+					v-if="dependentProjectMap.get(projectId)?.icon_url"
+					:src="dependentProjectMap.get(projectId)?.icon_url ?? undefined"
+					:alt="dependentProjectMap.get(projectId)?.title ?? projectId"
+					class="size-6 shrink-0 rounded-md object-cover"
+				/>
+				<PackageIcon v-else class="size-8 shrink-0 text-secondary" />
+				<span class="min-w-0 flex-1 truncate font-medium text-contrast">
+					{{ dependentProjectMap.get(projectId)?.title ?? projectId }}
+				</span>
+				<button
+					type="button"
+					class="shrink-0 cursor-pointer border-0 bg-transparent p-0 text-sm transition-opacity"
+					:class="
+						excludedProjectIds.has(projectId)
+							? 'text-secondary opacity-100'
+							: 'text-secondary opacity-0 underline decoration-1 underline-offset-2 group-hover:opacity-100 group-focus-within:opacity-100 hover:text-contrast'
+					"
+					@click="toggleProjectExcluded(projectId)"
+				>
+					{{
+						excludedProjectIds.has(projectId)
+							? formatMessage(messages.excluded)
+							: formatMessage(messages.exclude)
+					}}
+				</button>
+				<button
+					type="button"
+					class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-secondary hover:text-contrast"
+					:aria-label="
+						formatMessage(messages.removeIncludedProject, {
+							project: dependentProjectMap.get(projectId)?.title ?? projectId,
+						})
+					"
+					@click="removeIncludedProject(projectId)"
+				>
+					<XIcon class="size-5" />
+				</button>
+			</div>
+		</div>
+	</div>
+	<div v-else :class="innerPanelClass" class="flex flex-col gap-3">
+		<ProjectCombobox
+			v-show="!selectedProjectId || refreshing"
+			ref="projectCombobox"
+			:model-value="selectedProjectId"
+			:project-types="selectableProjectTypes"
+			:search-placeholder="formatMessage(messages.searchProjectPlaceholder)"
+			@update:model-value="setSelectedProjectId"
+		/>
+		<template v-if="selectedProjectId && !refreshing">
+			<div class="flex items-center justify-between gap-3 px-2 text-secondary">
+				<span>{{ formatMessage(messages.dependentCount, { count: resultCount ?? 0 }) }}</span>
+				<button
+					class="border-none bg-transparent p-0 text-secondary cursor-pointer hover:text-contrast"
+					@click="setSelectedProjectId(undefined)"
+				>
+					{{ formatMessage(messages.clearFilter) }}
+				</button>
+			</div>
+			<div class="flex items-center gap-3 rounded-2xl bg-surface-1 p-3">
+				<img
+					v-if="selectedProject?.icon_url"
+					:src="selectedProject.icon_url"
+					:alt="selectedProject.title"
+					class="size-14 shrink-0 rounded-xl object-cover"
+				/>
+				<PackageIcon v-else class="size-14 shrink-0 text-secondary" />
+				<div class="min-w-0 flex-1">
+					<div class="truncate text-base font-bold text-contrast">
+						{{ selectedProject?.title ?? selectedProjectId }}
+					</div>
+					<MultiSelect
+						:model-value="dependencyTypes"
+						:options="dependencyTypeOptions"
+						:clearable="false"
+						fit-content
+						show-chevron
+						trigger-class="!rounded-none !bg-transparent !p-0"
+						checkbox-position="right"
+						:dropdown-min-width="220"
+						@update:model-value="setDependencyTypes"
+					>
+						<template #input-content="{ isOpen }">
+							<span class="flex items-center gap-1 text-sm text-secondary">
+								{{ dependencyTypeLabel }}
+								<DropdownIcon
+									class="size-4 transition-transform"
+									:class="{ 'rotate-180': isOpen }"
+								/>
+							</span>
+						</template>
+					</MultiSelect>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { DropdownIcon, PackageIcon, XIcon } from '@modrinth/assets'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+import { defineMessages, useVIntl } from '../../composables/i18n'
+import { injectModrinthClient } from '../../providers'
+import type { FilterValue } from '../../utils/search'
+import MultiSelect, { type MultiSelectOption } from '../base/MultiSelect.vue'
+import ProjectCombobox, {
+	type ProjectType as ProjectComboboxProjectType,
+	type SearchHit,
+} from '../project/ProjectCombobox.vue'
+
+const FILTER_TYPE_ID = 'compatible_dependency_project_ids'
+
+const { formatMessage } = useVIntl()
+const { labrinth } = injectModrinthClient()
+
+const selectedFilters = defineModel<FilterValue[]>('selectedFilters', { required: true })
+
+const props = defineProps<{
+	projectType: string
+	innerPanelClass?: string
+	resultCount?: number
+	refreshing?: boolean
+}>()
+
+const selectableProjectTypes: ProjectComboboxProjectType[] = [
+	'mod',
+	'resourcepack',
+	'shader',
+	'datapack',
+	'plugin',
+]
+const isModpack = computed(() => props.projectType === 'modpack')
+const dependencyProjectIds = computed(() =>
+	selectedFilters.value
+		.filter((filter) => filter.type === FILTER_TYPE_ID)
+		.map((filter) => filter.option),
+)
+const pendingProjectId = ref<string>()
+const excludedProjectIds = ref(new Set<string>())
+
+watch(dependencyProjectIds, (projectIds) => {
+	const selectedProjectIds = new Set(projectIds)
+	excludedProjectIds.value = new Set(
+		[...excludedProjectIds.value].filter((projectId) => selectedProjectIds.has(projectId)),
+	)
+})
+
+const { data: dependentProjects } = useQuery({
+	queryKey: computed(() => [
+		'search-depends-on-filter',
+		'dependent-projects',
+		dependencyProjectIds.value,
+	]),
+	queryFn: () => labrinth.projects_v2.getMultiple(dependencyProjectIds.value),
+	enabled: computed(() => isModpack.value && dependencyProjectIds.value.length > 0),
+	placeholderData: [],
+	refetchOnWindowFocus: false,
+})
+
+const dependentProjectMap = computed(
+	() => new Map(dependentProjects.value?.map((project) => [project.id, project]) ?? []),
+)
+const projectCombobox = ref<{ selectedProject: SearchHit | null } | null>(null)
+const selectedProject = computed(() => projectCombobox.value?.selectedProject ?? null)
+const selectedProjectId = computed(
+	() => selectedFilters.value.find((filter) => filter.type === FILTER_TYPE_ID)?.option,
+)
+
+type DependencyType = 'required' | 'optional' | 'embedded'
+
+const dependencyTypes = ref<DependencyType[]>(['required'])
+const dependencyTypeOptions = computed<MultiSelectOption<DependencyType>[]>(() => [
+	{ value: 'required', label: formatMessage(messages.required) },
+	{ value: 'optional', label: formatMessage(messages.optional) },
+	{ value: 'embedded', label: formatMessage(messages.embedded) },
+])
+const dependencyTypeLabel = computed(() => {
+	const selectedTypes = new Set(dependencyTypes.value)
+	if (selectedTypes.size === dependencyTypeOptions.value.length) {
+		return formatMessage(messages.anyDependencyType)
+	}
+	if (selectedTypes.has('required') && selectedTypes.has('optional')) {
+		return formatMessage(messages.requiredOrOptional)
+	}
+	if (selectedTypes.has('required') && selectedTypes.has('embedded')) {
+		return formatMessage(messages.requiredOrEmbedded)
+	}
+	if (selectedTypes.has('optional') && selectedTypes.has('embedded')) {
+		return formatMessage(messages.optionalOrEmbedded)
+	}
+	return dependencyTypeOptions.value.find((option) => selectedTypes.has(option.value))?.label ?? ''
+})
+
+function setSelectedProjectId(projectId: string | undefined) {
+	const otherFilters = selectedFilters.value.filter((filter) => filter.type !== FILTER_TYPE_ID)
+	selectedFilters.value = projectId
+		? [...otherFilters, { type: FILTER_TYPE_ID, option: projectId }]
+		: otherFilters
+	dependencyTypes.value = ['required']
+}
+
+function addIncludedProject(projectId: string | undefined) {
+	if (projectId && !dependencyProjectIds.value.includes(projectId)) {
+		selectedFilters.value = [...selectedFilters.value, { type: FILTER_TYPE_ID, option: projectId }]
+	}
+	pendingProjectId.value = undefined
+}
+
+function removeIncludedProject(projectId: string) {
+	selectedFilters.value = selectedFilters.value.filter(
+		(filter) => filter.type !== FILTER_TYPE_ID || filter.option !== projectId,
+	)
+	const nextExcludedProjectIds = new Set(excludedProjectIds.value)
+	nextExcludedProjectIds.delete(projectId)
+	excludedProjectIds.value = nextExcludedProjectIds
+}
+
+function toggleProjectExcluded(projectId: string) {
+	const nextExcludedProjectIds = new Set(excludedProjectIds.value)
+	if (nextExcludedProjectIds.has(projectId)) {
+		nextExcludedProjectIds.delete(projectId)
+	} else {
+		nextExcludedProjectIds.add(projectId)
+	}
+	excludedProjectIds.value = nextExcludedProjectIds
+}
+
+function setDependencyTypes(types: DependencyType[]) {
+	if (types.length > 0) {
+		dependencyTypes.value = types
+	}
+}
+
+const messages = defineMessages({
+	clearFilter: {
+		id: 'search.filter.clear',
+		defaultMessage: 'Clear',
+	},
+	dependentCount: {
+		id: 'search.filter.dependent_count',
+		defaultMessage: '{count, plural, one {# dependent} other {# dependents}}',
+	},
+	searchContentPlaceholder: {
+		id: 'search.filter.included_content.search_placeholder',
+		defaultMessage: 'Search content...',
+	},
+	searchProjectPlaceholder: {
+		id: 'search.filter.dependent_project.search_placeholder',
+		defaultMessage: 'Search for a project...',
+	},
+	exclude: {
+		id: 'search.filter.included_content.exclude',
+		defaultMessage: 'Exclude',
+	},
+	excluded: {
+		id: 'search.filter.included_content.excluded',
+		defaultMessage: 'Excluded',
+	},
+	removeIncludedProject: {
+		id: 'search.filter.included_content.remove_project',
+		defaultMessage: 'Remove {project}',
+	},
+	required: {
+		id: 'search.filter.dependency_type.required',
+		defaultMessage: 'Required',
+	},
+	optional: {
+		id: 'search.filter.dependency_type.optional',
+		defaultMessage: 'Optional',
+	},
+	embedded: {
+		id: 'search.filter.dependency_type.embedded',
+		defaultMessage: 'Embedded',
+	},
+	anyDependencyType: {
+		id: 'search.filter.dependency_type.any',
+		defaultMessage: 'Any dependency type',
+	},
+	requiredOrOptional: {
+		id: 'search.filter.dependency_type.required_or_optional',
+		defaultMessage: 'Required or optional',
+	},
+	requiredOrEmbedded: {
+		id: 'search.filter.dependency_type.required_or_embedded',
+		defaultMessage: 'Required or embedded',
+	},
+	optionalOrEmbedded: {
+		id: 'search.filter.dependency_type.optional_or_embedded',
+		defaultMessage: 'Optional or embedded',
+	},
+})
+</script>
diff --git a/packages/ui/src/components/search/SearchSidebarFilter.vue b/packages/ui/src/components/search/SearchSidebarFilter.vue
index 1e1b3b1863..4b027d9535 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -71,48 +71,14 @@
 		</template>
 		<template v-else #default>
 			<slot name="prefix" />
-			<div
-				v-if="filterType.display === 'project'"
-				:class="innerPanelClass ? innerPanelClass : ''"
-				class="flex flex-col gap-3"
-			>
-				<ProjectCombobox
-					v-show="!selectedProjectId || refreshing"
-					ref="projectCombobox"
-					search-placeholder="Search for a project..."
-					:model-value="selectedProjectId"
-					:project-types="selectableProjectTypes"
-					@update:model-value="setSelectedProjectId"
-				/>
-				<template v-if="selectedProjectId && !refreshing">
-					<div class="flex items-center justify-between gap-3 px-2 text-secondary">
-						<span>{{ formatMessage(messages.dependentCount, { count: resultCount ?? 0 }) }}</span>
-						<button
-							class="border-none bg-transparent p-0 text-secondary cursor-pointer hover:text-contrast"
-							@click="setSelectedProjectId(undefined)"
-						>
-							{{ formatMessage(messages.clearFilter) }}
-						</button>
-					</div>
-					<div class="flex items-center gap-3 rounded-2xl bg-surface-1 p-3">
-						<img
-							v-if="selectedProject?.icon_url"
-							:src="selectedProject.icon_url"
-							:alt="selectedProject.title"
-							class="size-14 shrink-0 rounded-xl object-cover"
-						/>
-						<PackageIcon v-else class="size-14 shrink-0 text-secondary" />
-						<div class="min-w-0">
-							<div class="truncate text-base font-bold text-contrast">
-								{{ selectedProject?.title ?? selectedProjectId }}
-							</div>
-							<div v-if="selectedProject?.author" class="truncate text-sm text-secondary">
-								{{ selectedProject.author }}
-							</div>
-						</div>
-					</div>
-				</template>
-			</div>
+			<SearchDependsOnFilter
+				v-if="filterType.display === 'depends-on-project'"
+				v-model:selected-filters="selectedFilters"
+				:project-type="projectType"
+				:inner-panel-class="innerPanelClass"
+				:result-count="resultCount"
+				:refreshing="refreshing"
+			/>
 			<div
 				v-if="filterType.display === 'toggle'"
 				:class="innerPanelClass ? innerPanelClass : ''"
@@ -132,7 +98,9 @@
 					/>
 				</label>
 			</div>
-			<template v-if="filterType.display !== 'toggle' && filterType.display !== 'project'">
+			<template
+				v-if="filterType.display !== 'toggle' && filterType.display !== 'depends-on-project'"
+			>
 				<StyledInput
 					v-if="filterType.searchable"
 					:id="`search-${filterType.id}`"
@@ -248,14 +216,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-	BanIcon,
-	DropdownIcon,
-	LockOpenIcon,
-	PackageIcon,
-	SearchIcon,
-	UpdatedIcon,
-} from '@modrinth/assets'
+import { BanIcon, DropdownIcon, LockOpenIcon, SearchIcon, UpdatedIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
@@ -264,10 +225,7 @@ import Accordion from '../base/Accordion.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
 import Toggle from '../base/Toggle.vue'
 import { Checkbox, ScrollablePanel, StyledInput } from '../index'
-import ProjectCombobox, {
-	type ProjectType as ProjectComboboxProjectType,
-	type SearchHit,
-} from '../project/ProjectCombobox.vue'
+import SearchDependsOnFilter from './SearchDependsOnFilter.vue'
 import SearchFilterGroup from './SearchFilterGroup.vue'
 import SearchFilterOption from './SearchFilterOption.vue'
 
@@ -282,6 +240,7 @@ const overriddenProvidedFilterTypes = defineModel<string[]>('overriddenProvidedF
 
 const props = defineProps<{
 	filterType: FilterType
+	projectType: string
 	buttonClass?: string
 	contentClass?: string
 	innerPanelClass?: string
@@ -299,26 +258,6 @@ const query = ref('')
 const showMore = ref(false)
 
 const accordion = ref<InstanceType<typeof Accordion> | null>()
-const projectCombobox = ref<{ selectedProject: SearchHit | null } | null>(null)
-const selectableProjectTypes: ProjectComboboxProjectType[] = [
-	'mod',
-	'modpack',
-	'resourcepack',
-	'shader',
-	'datapack',
-	'plugin',
-]
-const selectedProject = computed(() => projectCombobox.value?.selectedProject ?? null)
-const selectedProjectId = computed(
-	() => selectedFilters.value.find((filter) => filter.type === props.filterType.id)?.option,
-)
-
-function setSelectedProjectId(projectId: string | undefined) {
-	const otherFilters = selectedFilters.value.filter((filter) => filter.type !== props.filterType.id)
-	selectedFilters.value = projectId
-		? [...otherFilters, { type: props.filterType.id, option: projectId }]
-		: otherFilters
-}
 
 const selectedFilterOptions = computed(() =>
 	props.filterType.options.filter((option) =>
@@ -472,14 +411,6 @@ function clearFilters() {
 }
 
 const messages = defineMessages({
-	clearFilter: {
-		id: 'search.filter.clear',
-		defaultMessage: 'Clear',
-	},
-	dependentCount: {
-		id: 'search.filter.dependent_count',
-		defaultMessage: '{count, plural, one {# dependent} other {# dependents}}',
-	},
 	searchPlaceholder: {
 		id: 'search.filter.option.search.placeholder',
 		defaultMessage: 'Search...',
diff --git a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
index 08537269e4..1513523b0a 100644
--- a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
@@ -63,6 +63,9 @@ function getFilterOpenByDefault(filterId: string): boolean {
 	if (hasProvidedFilter(filterId)) {
 		return true
 	}
+	if (filterId === 'compatible_dependency_project_ids') {
+		return ctx.projectType.value === 'modpack'
+	}
 	if (ctx.isServerType.value) {
 		return ![
 			'server_category_minecraft_server_meta',
@@ -170,6 +173,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
 				v-model:toggled-groups="ctx.serverToggledGroups.value"
 				:provided-filters="[]"
 				:filter-type="filterType"
+				:project-type="ctx.projectType.value"
 				:class="filterClass"
 				:button-class="buttonClass"
 				:content-class="contentClass"
@@ -194,6 +198,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
 				v-model:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
 				:provided-filters="ctx.providedFilters?.value ?? []"
 				:filter-type="filter"
+				:project-type="ctx.projectType.value"
 				:result-count="ctx.totalHits.value"
 				:refreshing="ctx.refreshing.value"
 				:class="filterClass"
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index acb15399c2..34450ca648 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3551,12 +3551,48 @@
   "search.filter.clear": {
     "defaultMessage": "Clear"
   },
+  "search.filter.dependency_type.any": {
+    "defaultMessage": "Any dependency type"
+  },
+  "search.filter.dependency_type.embedded": {
+    "defaultMessage": "Embedded"
+  },
+  "search.filter.dependency_type.optional": {
+    "defaultMessage": "Optional"
+  },
+  "search.filter.dependency_type.optional_or_embedded": {
+    "defaultMessage": "Optional or embedded"
+  },
+  "search.filter.dependency_type.required": {
+    "defaultMessage": "Required"
+  },
+  "search.filter.dependency_type.required_or_embedded": {
+    "defaultMessage": "Required or embedded"
+  },
+  "search.filter.dependency_type.required_or_optional": {
+    "defaultMessage": "Required or optional"
+  },
   "search.filter.dependent_count": {
     "defaultMessage": "{count, plural, one {# dependent} other {# dependents}}"
   },
   "search.filter.dependent_project": {
     "defaultMessage": "Depends on: {project}"
   },
+  "search.filter.dependent_project.search_placeholder": {
+    "defaultMessage": "Search for a project..."
+  },
+  "search.filter.included_content.exclude": {
+    "defaultMessage": "Exclude"
+  },
+  "search.filter.included_content.excluded": {
+    "defaultMessage": "Excluded"
+  },
+  "search.filter.included_content.remove_project": {
+    "defaultMessage": "Remove {project}"
+  },
+  "search.filter.included_content.search_placeholder": {
+    "defaultMessage": "Search content..."
+  },
   "search.filter.locked.default": {
     "defaultMessage": "Filter locked"
   },
@@ -3617,6 +3653,9 @@
   "search.filter_type.game_version.all_versions": {
     "defaultMessage": "Show all versions"
   },
+  "search.filter_type.included_content": {
+    "defaultMessage": "Included content"
+  },
   "search.filter_type.license": {
     "defaultMessage": "License"
   },
diff --git a/packages/ui/src/utils/search.ts b/packages/ui/src/utils/search.ts
index 0651fe938e..731e35f8f4 100644
--- a/packages/ui/src/utils/search.ts
+++ b/packages/ui/src/utils/search.ts
@@ -47,7 +47,7 @@ export type FilterType = {
 	ordering?: number
 } & (
 	| {
-			display: 'all' | 'scrollable' | 'none' | 'project' | 'toggle'
+			display: 'all' | 'scrollable' | 'none' | 'depends-on-project' | 'toggle'
 	  }
 	| {
 			display: 'expandable'
@@ -146,6 +146,14 @@ export function useSearch(
 	const overriddenProvidedFilterTypes = ref<string[]>([])
 
 	const { formatMessage, locale } = useVIntl()
+	const dependsOnFilterName = defineMessage({
+		id: 'search.filter_type.compatible_dependency_project_ids',
+		defaultMessage: 'Depends on',
+	})
+	const includedContentFilterName = defineMessage({
+		id: 'search.filter_type.included_content',
+		defaultMessage: 'Included content',
+	})
 	const formatCategoryName = (categoryName: string) => {
 		return formatCategory(formatMessage, categoryName)
 	}
@@ -433,6 +441,21 @@ export function useSearch(
 						}
 					}),
 			},
+			{
+				id: 'compatible_dependency_project_ids',
+				formatted_name: formatMessage(
+					projectTypes.value.includes('modpack') ? includedContentFilterName : dependsOnFilterName,
+				),
+				supported_project_types: ALL_PROJECT_TYPES,
+				query_param: 'dep',
+				supports_negative_filter: false,
+				display: 'depends-on-project',
+				searchable: false,
+				options: [],
+				allows_custom_options: 'and',
+				custom_option_field: 'compatible_dependency_project_ids',
+				ordering: projectTypes.value.includes('modpack') ? undefined : -999,
+			},
 			{
 				id: 'license',
 				formatted_name: formatMessage(
@@ -473,24 +496,6 @@ export function useSearch(
 				options: [],
 				allows_custom_options: 'and',
 			},
-			{
-				id: 'compatible_dependency_project_ids',
-				formatted_name: formatMessage(
-					defineMessage({
-						id: 'search.filter_type.compatible_dependency_project_ids',
-						defaultMessage: 'Depends on',
-					}),
-				),
-				supported_project_types: ALL_PROJECT_TYPES,
-				query_param: 'dep',
-				supports_negative_filter: false,
-				display: 'project',
-				searchable: false,
-				options: [],
-				allows_custom_options: 'and',
-				custom_option_field: 'compatible_dependency_project_ids',
-				ordering: -999,
-			},
 			{
 				id: 'advanced',
 				formatted_name: formatMessage(

From 1f66ea1f06b694938bb10a1b49e4779dd791e70c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 14 Jul 2026 13:22:25 -0700
Subject: [PATCH 5/5] feat: style pass

---
 .../components/search/SearchDependsOnFilter.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/search/SearchDependsOnFilter.vue b/packages/ui/src/components/search/SearchDependsOnFilter.vue
index e0db00726a..0c9cec243b 100644
--- a/packages/ui/src/components/search/SearchDependsOnFilter.vue
+++ b/packages/ui/src/components/search/SearchDependsOnFilter.vue
@@ -11,7 +11,7 @@
 			<div
 				v-for="projectId in dependencyProjectIds"
 				:key="projectId"
-				class="group flex min-w-0 items-center gap-2 rounded-xl px-1 py-1 text-primary"
+				class="group flex min-w-0 items-center gap-2 rounded-xl px-1.5 py-1 text-primary"
 			>
 				<img
 					v-if="dependentProjectMap.get(projectId)?.icon_url"
@@ -25,11 +25,11 @@
 				</span>
 				<button
 					type="button"
-					class="shrink-0 cursor-pointer border-0 bg-transparent p-0 text-sm transition-opacity"
+					class="shrink-0 cursor-pointer border-0 bg-transparent p-0 text-sm transition-all"
 					:class="
 						excludedProjectIds.has(projectId)
 							? 'text-secondary opacity-100'
-							: 'text-secondary opacity-0 underline decoration-1 underline-offset-2 group-hover:opacity-100 group-focus-within:opacity-100 hover:text-contrast'
+							: 'text-secondary opacity-0 decoration-1 underline-offset-2 group-hover:opacity-100 group-focus-within:opacity-100 hover:text-contrast'
 					"
 					@click="toggleProjectExcluded(projectId)"
 				>
@@ -42,6 +42,7 @@
 				<button
 					type="button"
 					class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-secondary hover:text-contrast"
+					v-tooltip="formatMessage(messages.removeIncludedProjectTooltip)"
 					:aria-label="
 						formatMessage(messages.removeIncludedProject, {
 							project: dependentProjectMap.get(projectId)?.title ?? projectId,
@@ -73,12 +74,12 @@
 					{{ formatMessage(messages.clearFilter) }}
 				</button>
 			</div>
-			<div class="flex items-center gap-3 rounded-2xl bg-surface-1 p-3">
+			<div class="flex items-center gap-2 rounded-2xl bg-surface-1 p-2.5">
 				<img
 					v-if="selectedProject?.icon_url"
 					:src="selectedProject.icon_url"
 					:alt="selectedProject.title"
-					class="size-14 shrink-0 rounded-xl object-cover"
+					class="size-12 shrink-0 rounded-xl object-cover"
 				/>
 				<PackageIcon v-else class="size-14 shrink-0 text-secondary" />
 				<div class="min-w-0 flex-1">
@@ -97,7 +98,7 @@
 						@update:model-value="setDependencyTypes"
 					>
 						<template #input-content="{ isOpen }">
-							<span class="flex items-center gap-1 text-sm text-secondary">
+							<span class="flex items-center gap-0.5 text-sm text-secondary">
 								{{ dependencyTypeLabel }}
 								<DropdownIcon
 									class="size-4 transition-transform"
@@ -278,6 +279,10 @@ const messages = defineMessages({
 		id: 'search.filter.included_content.remove_project',
 		defaultMessage: 'Remove {project}',
 	},
+	removeIncludedProjectTooltip: {
+		id: 'search.filter.included_content.remove_project.tooltip',
+		defaultMessage: 'Remove project',
+	},
 	required: {
 		id: 'search.filter.dependency_type.required',
 		defaultMessage: 'Required',