feat: update depends on filter styling for app (#8077)

* feat: update depends on filter styling for app

* fix: last item in search filters can be covered by "Upgrade to Modrinth+" link

Author: tdgao

apps/app-frontend/src/app/shell/sidebar/index.vue

@@ -15,7 +15,7 @@ import { injectOnboardingChecklist } from '@/providers/onboarding-checklist'
 
 import Promotion from './promotion.vue'
 
-defineProps<{
+const props = defineProps<{
 	credentials: ModrinthCredentials | null | undefined
 	hasPlus: boolean
 	showAd: boolean
@@ -37,6 +37,9 @@ const friends = ref<InstanceType<typeof FriendsList> | null>(null)
 const scrollContainer = ref<HTMLElement | null>(null)
 const scrollViewport = ref<HTMLElement | null>(null)
 const upgradeHeight = ref(0)
+const promotionPaddingStyle = computed(() =>
+	props.showAd ? { paddingBottom: `calc(1rem + ${upgradeHeight.value}px)` } : undefined,
+)
 const { showTopFade, showBottomFade, checkScrollState } = useScrollIndicator(scrollViewport)
 
 let removeScrollbarListener: (() => void) | undefined
@@ -103,7 +106,11 @@ const messages = defineMessages({
 					@login-minecraft="accounts?.login()"
 					@login-modrinth="emit('login-modrinth')"
 				/>
-				<div id="sidebar-teleport-target" class="sidebar-teleport-content contents"></div>
+				<div
+					id="sidebar-teleport-target"
+					class="sidebar-teleport-content empty:hidden"
+					:style="promotionPaddingStyle"
+				></div>
 				<div class="sidebar-default-content hidden" :class="{ 'sidebar-enabled': visible }">
 					<div
 						v-show="hasLoggedIntoMinecraft"
@@ -131,9 +138,7 @@ const messages = defineMessages({
 					<PrideFundraiserBanner
 						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
 					/>
-					<NewsSidebar
-						:style="showAd ? { paddingBottom: `calc(1rem + ${upgradeHeight}px)` } : undefined"
-					/>
+					<NewsSidebar :style="promotionPaddingStyle" />
 				</div>
 			</div>
 			<div

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

@@ -4,6 +4,7 @@
 			:model-value="pendingProjectId"
 			:project-types="selectableProjectTypes"
 			:exclude-project-ids="dependencyProjectIds"
+			:force-direction="dropdownDirection"
 			:search-placeholder="formatMessage(messages.searchContentPlaceholder)"
 			:show-chevron="false"
 			:sync-with-selection="false"
@@ -70,6 +71,7 @@
 			:model-value="selectedProjectId"
 			:project-types="selectableProjectTypes"
 			:search-placeholder="formatMessage(messages.searchProjectPlaceholder)"
+			:force-direction="dropdownDirection"
 			:show-chevron="false"
 			clearable
 			search-input-variant="button"
@@ -97,6 +99,7 @@
 						<MultiSelect
 							:model-value="draftDependencyTypes"
 							:options="dependencyTypeOptions"
+							:force-direction="dropdownDirection"
 							:clearable="false"
 							fit-content
 							show-chevron
@@ -108,7 +111,7 @@
 							@update:model-value="setDraftDependencyTypes"
 						>
 							<template #input-content="{ isOpen }">
-								<span class="flex items-center gap-0.5 text-sm text-secondary ml-2.5">
+								<span class="flex items-center gap-0.5 text-sm text-secondary ml-2.5 select-none">
 									{{ dependencyTypeLabel }}
 									<DropdownIcon
 										class="size-4 transition-transform"
@@ -163,6 +166,7 @@ const selectedFilters = defineModel<FilterValue[]>('selectedFilters', { required
 
 const props = defineProps<{
 	projectType: string
+	dropdownDirection?: 'up' | 'down'
 	innerPanelClass?: string
 	selectedProjectClass?: string
 	resultCount?: number

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

@@ -73,6 +73,7 @@
 				v-if="filterType.display === 'depends-on-project'"
 				v-model:selected-filters="selectedFilters"
 				:project-type="projectType"
+				:dropdown-direction="dropdownDirection"
 				:inner-panel-class="innerPanelClass"
 				:selected-project-class="selectedProjectClass"
 				:result-count="resultCount"
@@ -270,6 +271,7 @@ const overriddenProvidedFilterTypes = defineModel<string[]>('overriddenProvidedF
 const props = defineProps<{
 	filterType: FilterType
 	projectType: string
+	dropdownDirection?: 'up' | 'down'
 	buttonClass?: string
 	contentClass?: string
 	innerPanelClass?: string

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

@@ -93,7 +93,7 @@ const buttonClass = computed(() => {
 const contentClass = computed(() => (isApp.value ? 'mt-2 mb-3' : 'mb-4 mx-3'))
 const innerPanelClass = computed(() => (isApp.value ? 'ml-2 mr-3' : 'p-1'))
 const selectedProjectClass = computed(() =>
-	isApp.value ? 'bg-surface-1 border border-solid border-surface-3' : 'bg-surface-2',
+	isApp.value ? 'bg-surface-4 border border-solid border-surface-5' : 'bg-surface-2',
 )
 
 function hasProvidedFilter(filterId: string): boolean {
@@ -221,6 +221,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
 				:provided-filters="[]"
 				:filter-type="filterType"
 				:project-type="ctx.projectType.value"
+				:dropdown-direction="isApp ? 'up' : undefined"
 				:class="filterClass"
 				:button-class="buttonClass"
 				:content-class="contentClass"
@@ -252,6 +253,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
 				:provided-filters="ctx.providedFilters?.value ?? []"
 				:filter-type="filter"
 				:project-type="ctx.projectType.value"
+				:dropdown-direction="isApp ? 'up' : undefined"
 				:result-count="ctx.totalHits.value"
 				:loading="ctx.loading.value"
 				:refreshing="ctx.refreshing.value"