Reorganize the Search Filters page into clearer sections and add a filter search

src/components/Search/FilterComponents/AdvancedFilters/FilterList.tsx

@@ -1,10 +1,12 @@
 import Icon from '@components/Icon';
 import {PressableWithFeedback} from '@components/Pressable';
 import ScrollView from '@components/ScrollView';
+import CompactSearchBar from '@components/SearchBar/CompactSearchBar';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
-import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -19,6 +21,7 @@ import variables from '@styles/variables';
 
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 
+import type {ReactNode, Ref} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 
 import React from 'react';
@@ -37,6 +40,20 @@ type FilterListProps = FilterItemCallbacks & {
     style?: StyleProp<ViewStyle>;
     contentContainerStyle?: StyleProp<ViewStyle>;
 
+    /** The filters to list, in sections. */
+    filters: Array<Array<SearchFilter['key']>>;
+
+    /** Text in the search input above the list. */
+    searchValue: string;
+
+    onSearchValueChange: (searchValue: string) => void;
+
+    /** Ref to the search input above the list. */
+    searchInputRef?: Ref<BaseTextInputRef>;
+
+    /** Content at the top of the list, scrolled with its rows. Pass a falsy value when the search hides it, so the list knows nothing is listed. */
+    headerContent?: ReactNode;
+
     /** Called as the cursor travels over the list. Web only - it reports the movement inside a row, which `onHoverIn` only reports entering. */
     onPointerMove?: (event: {clientX: number; clientY: number}) => void;
 
@@ -108,40 +125,79 @@ function FilterItem({filterKey, isSelected, type, onPress, onHoverIn, onFocus}:
     );
 }
 
-function FilterList({type, selectedFilter, style, contentContainerStyle, onHoverIn, onFocus, onPress, onPointerMove, onPointerLeave}: FilterListProps) {
+function FilterList({
+    type,
+    selectedFilter,
+    style,
+    contentContainerStyle,
+    filters,
+    searchValue,
+    onSearchValueChange,
+    searchInputRef,
+    headerContent,
+    onHoverIn,
+    onFocus,
+    onPress,
+    onPointerMove,
+    onPointerLeave,
+}: FilterListProps) {
     const styles = useThemeStyles();
-    const typeFiltersKeys = useAdvancedSearchFilters(type);
+    const {translate} = useLocalize();
+    const noResultsFoundText = translate('common.noResultsFound');
+    const shouldShowNoResultsFound = filters.length === 0 && !headerContent;
+
+    useDebouncedAccessibilityAnnouncement(noResultsFoundText, shouldShowNoResultsFound, searchValue);
 
     return (
-        <ScrollView
-            style={[style]}
-            contentContainerStyle={[contentContainerStyle]}
-            showsVerticalScrollIndicator={false}
-            onMouseMove={onPointerMove}
-            onMouseLeave={onPointerLeave}
-        >
-            {typeFiltersKeys.map((section, index) => (
-                <View key={`${section.at(0)}`}>
-                    {index !== 0 && (
-                        <SpacerView
-                            shouldShow
-                            style={[styles.reportHorizontalRule]}
-                        />
-                    )}
-                    {section.map((item) => (
-                        <FilterItem
-                            key={item}
-                            filterKey={item}
-                            type={type}
-                            isSelected={item === selectedFilter}
-                            onHoverIn={onHoverIn}
-                            onFocus={onFocus}
-                            onPress={onPress}
-                        />
-                    ))}
+        <View style={[styles.flex1, style]}>
+            <CompactSearchBar
+                label={translate('search.filters.searchFilters')}
+                inputValue={searchValue}
+                onChangeText={onSearchValueChange}
+                style={styles.mb3}
+                ref={searchInputRef}
+            />
+            {shouldShowNoResultsFound && (
+                <View style={[styles.ph5, styles.pb5]}>
+                    <Text
+                        style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}
+                        aria-hidden
+                    >
+                        {noResultsFoundText}
+                    </Text>
                 </View>
-            ))}
-        </ScrollView>
+            )}
+            <ScrollView
+                contentContainerStyle={[contentContainerStyle]}
+                showsVerticalScrollIndicator={false}
+                keyboardShouldPersistTaps="handled"
+                onMouseMove={onPointerMove}
+                onMouseLeave={onPointerLeave}
+            >
+                {headerContent}
+                {filters.map((section, index) => (
+                    <View key={`${section.at(0)}`}>
+                        {index !== 0 && (
+                            <SpacerView
+                                shouldShow
+                                style={[styles.reportHorizontalRule]}
+                            />
+                        )}
+                        {section.map((item) => (
+                            <FilterItem
+                                key={item}
+                                filterKey={item}
+                                type={type}
+                                isSelected={item === selectedFilter}
+                                onHoverIn={onHoverIn}
+                                onFocus={onFocus}
+                                onPress={onPress}
+                            />
+                        ))}
+                    </View>
+                ))}
+            </ScrollView>
+        </View>
     );
 }
 

src/components/Search/FilterComponents/AdvancedFilters/SearchNLFilterContent.tsx

@@ -42,9 +42,12 @@ type SearchNLFilterContentProps = {
 
     /** Size of the submit button */
     size?: Exclude<ValueOf<typeof CONST.BUTTON_SIZE>, typeof CONST.BUTTON_SIZE.SMALL>;
+
+    /** Whether the input takes the focus once it is shown */
+    autoFocus?: boolean;
 };
 
-function SearchNLFilterContent({onSuccess, containerStyle, buttonContainerStyle, size = CONST.BUTTON_SIZE.MEDIUM}: SearchNLFilterContentProps) {
+function SearchNLFilterContent({onSuccess, containerStyle, buttonContainerStyle, size = CONST.BUTTON_SIZE.MEDIUM, autoFocus}: SearchNLFilterContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [nlQuery, setNlQuery] = useState('');
@@ -129,7 +132,7 @@ function SearchNLFilterContent({onSuccess, containerStyle, buttonContainerStyle,
                         e.preventDefault();
                         handleSubmit();
                     }}
-                    autoFocus
+                    autoFocus={autoFocus}
                     autoGrowHeight
                     maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
                 />

src/components/Search/FilterDropdowns/FilterPopupButton.tsx

@@ -45,6 +45,9 @@ type FilterPopupButtonProps = {
 
     /** Called instead of opening the popover when device is in landscape mode */
     onLandscapePress?: () => void;
+
+    /** Called once the popover has finished opening */
+    onModalShow?: () => void;
 };
 
 const ANCHOR_ORIGIN = {
@@ -60,6 +63,7 @@ function FilterPopupButton({
     PopoverComponent,
     renderButton,
     onLandscapePress,
+    onModalShow,
 }: FilterPopupButtonProps) {
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to distinguish RHP and narrow layout
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
@@ -141,6 +145,7 @@ function FilterPopupButton({
                     avoidKeyboard
                     isVisible={isOverlayVisible}
                     onClose={toggleOverlay}
+                    onModalShow={onModalShow}
                     anchorPosition={popoverTriggerPosition}
                     anchorAlignment={popoverAnchorAlignment}
                     restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}