merge queue: checking #8080 on main (9c31607), stacked on #8077

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/base/Combobox.vue

@@ -39,12 +39,25 @@
 				@clear="handleSearchClear"
 			>
 				<template v-if="showChevron" #trailing>
-					<ChevronLeftIcon
-						class="cursor-pointer size-5 text-secondary transition-transform duration-150"
-						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
+					<button
+						type="button"
+						tabindex="-1"
+						class="flex size-7 -m-2 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-secondary disabled:cursor-not-allowed"
+						:disabled="disabled"
+						:aria-expanded="isOpen"
+						:aria-haspopup="listbox ? 'listbox' : 'menu'"
+						aria-label="Toggle dropdown"
 						@mousedown.prevent
-						@click.stop="handleSearchIconClick"
-					/>
+						@click.stop="handleSearchChevronClick"
+					>
+						<ChevronLeftIcon
+							class="pointer-events-none size-5 transition-transform duration-150"
+							:class="
+								isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'
+							"
+							aria-hidden="true"
+						/>
+					</button>
 				</template>
 			</Input>
 		</div>
@@ -1024,13 +1037,16 @@ function handleSearchClick() {
 	}
 }
 
-function handleSearchIconClick() {
-	if (isOpen.value) {
-		closeDropdown(false)
-		return
-	}
+function handleSearchChevronClick() {
+	if (props.disabled) return
 
-	openDropdown()
+	const wasOpen = isOpen.value
+	searchTriggerRef.value?.focus()
+	if (wasOpen) {
+		closeDropdown()
+	} else {
+		openDropdown()
+	}
 }
 
 function handleWindowResize() {
@@ -1062,10 +1078,17 @@ function startPositionTracking() {
 	listenerWindow.addEventListener('beforeunload', handleWindowClose)
 	listenerWindow.visualViewport?.addEventListener('scroll', handleViewportChange)
 	listenerWindow.visualViewport?.addEventListener('resize', handleViewportChange)
-	stopOutsideClick = onClickOutside(dropdownRef, () => closeDropdown(false), {
-		window: listenerWindow,
-		ignore: outsideClickIgnoreTargets,
-	})
+	stopOutsideClick = onClickOutside(
+		dropdownRef,
+		(event) => {
+			if (containerRef.value && event.composedPath().includes(containerRef.value)) return
+			closeDropdown(false)
+		},
+		{
+			window: listenerWindow,
+			ignore: outsideClickIgnoreTargets,
+		},
+	)
 }
 
 function stopPositionTracking() {

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"