diff --git a/web/components/filters/filters.tsx b/web/components/filters/filters.tsx index 07be5429..f09f275c 100644 --- a/web/components/filters/filters.tsx +++ b/web/components/filters/filters.tsx @@ -56,6 +56,20 @@ import {PsychedelicsFilter, PsychedelicsFilterText} from './psychedelics-filter' import {RelationshipFilter, RelationshipFilterText} from './relationship-filter' import {SmokerFilter, SmokerFilterText} from './smoker-filter' +// Same count the open panel shows in its summary, so the collapsed hint and the panel can never +// disagree about how narrowed the search is. +export function getActiveFilterCount( + filters: Partial, + locationFilterProps: LocationFilterProps, + raisedInLocationFilterProps: LocationFilterProps, +) { + return countActiveFilters( + removeNullOrUndefinedProps({...filters, orderBy: undefined}), + locationFilterProps, + raisedInLocationFilterProps, + ) +} + function countActiveFilters( filters: Partial, locationFilterProps: LocationFilterProps, diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx index 1eae3d30..ee941780 100644 --- a/web/components/filters/search.tsx +++ b/web/components/filters/search.tsx @@ -38,6 +38,7 @@ export const Search = forwardRef< bookmarkedSearches: BookmarkedSearchesType[] refreshBookmarkedSearches: () => void profileCount: number | undefined + activeFilterCount?: number openFilters?: () => void openFiltersModal?: boolean highlightFilters?: boolean @@ -59,6 +60,7 @@ export const Search = forwardRef< starredUsers, refreshStars, profileCount, + activeFilterCount = 0, openFilters, openFiltersModal: parentOpenFiltersModal, setOpenFiltersModal: parentSetOpenFiltersModal, @@ -173,14 +175,30 @@ export const Search = forwardRef< size="sm" className={clsx( '!h-10 !rounded-full border border-canvas-200', + // With the panel closed there was nothing on screen saying the grid is a filtered + // view, so an active count tints the button and rides along as a badge. + activeFilterCount > 0 && '!border-primary-200 !bg-primary-50 !text-primary-700', highlightFilters && 'border-primary-500 ring-2 ring-primary-300 bg-primary-50 text-primary-700', )} onClick={handleOpenFilters} data-testid="open-filters-button" + aria-label={ + activeFilterCount > 0 + ? `${t('search.filters', 'Filters')} (${activeFilterCount})` + : t('search.filters', 'Filters') + } > {t('search.filters', 'Filters')} + {activeFilterCount > 0 && ( + + {activeFilterCount} + + )}