[questions][ui] highlight filter button when filters active

apps/portal/src/components/questions/QuestionSearchBar.tsx

@@ -11,6 +11,7 @@ import type { SortOptionsSelectProps } from './SortOptionsSelect';
 import { SortOrder, SortType } from '~/types/questions.d';
 
 export type QuestionSearchBarProps = SortOptionsSelectProps & {
+  activeFilterCount: number;
   onFilterOptionsToggle: () => void;
   onQueryChange: (query: string) => void;
   query: string;
@@ -33,6 +34,7 @@ function getSortOrderLabel(sortOrder: SortOrder, sortType: SortType): string {
 }
 
 export default function QuestionSearchBar({
+  activeFilterCount,
   onFilterOptionsToggle,
   onQueryChange,
   query,
@@ -55,22 +57,16 @@ export default function QuestionSearchBar({
               }}
             />
           </div>
-          <div className="sm:hidden">
+          <div className="lg:hidden">
             <Button
               addonPosition="start"
               icon={AdjustmentsHorizontalIcon}
-              isLabelHidden={true}
+              label={
-              label="Filters"
+                activeFilterCount > 0
-              variant="tertiary"
+                  ? `Filters (${activeFilterCount})`
-              onClick={onFilterOptionsToggle}
+                  : 'Filters'
-            />
+              }
-          </div>
+              variant={activeFilterCount > 0 ? 'secondary' : 'tertiary'}
-          <div className="hidden sm:block lg:hidden">
-            <Button
-              addonPosition="start"
-              icon={AdjustmentsHorizontalIcon}
-              label="Filters"
-              variant="tertiary"
               onClick={onFilterOptionsToggle}
             />
           </div>

apps/portal/src/pages/questions/browse.tsx

@@ -149,13 +149,15 @@ export default function QuestionsBrowsePage() {
       },
     });
 
-  const hasFilters = useMemo(
+  const activeFilterCount = useMemo(
     () =>
-      selectedCompanySlugs.length > 0 ||
+      [
-      selectedQuestionTypes.length > 0 ||
+        ...selectedCompanySlugs,
-      selectedQuestionAge !== 'all' ||
+        ...selectedQuestionTypes,
-      selectedRoles.length > 0 ||
+        ...(selectedQuestionAge !== 'all' ? [selectedQuestionAge] : []),
-      selectedLocations.length > 0,
+        ...selectedRoles,
+        ...selectedLocations,
+      ].length,
     [
       selectedCompanySlugs,
       selectedQuestionTypes,
@@ -165,6 +167,8 @@ export default function QuestionsBrowsePage() {
     ],
   );
 
+  const hasFilters = activeFilterCount > 0;
+
   const today = useMemo(() => new Date(), []);
   const startDate = useMemo(() => {
     return selectedQuestionAge === 'last-year'
@@ -522,6 +526,7 @@ export default function QuestionsBrowsePage() {
               <div className="flex flex-col items-stretch gap-4">
                 <div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
                   <QuestionSearchBar
+                    activeFilterCount={activeFilterCount}
                     query={query}
                     sortOrderValue={sortOrder}
                     sortTypeOptions={QUESTION_SORT_TYPES}