From 7fb09646e53fb05629c2c522357dd906da8d60c1 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Tue, 7 Jan 2025 15:29:07 +0100
Subject: [PATCH 01/16] make SearchRouterInput appear on SearchPage all the
 time

---
 src/components/Search/SearchPageHeader.tsx    |  5 +-
 .../Search/SearchPageHeaderInput.tsx          | 65 ++-----------------
 2 files changed, 6 insertions(+), 64 deletions(-)

diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index fe7b49314ae0..984d9f211949 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -352,8 +352,6 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
     };
 
-    const isCannedQuery = SearchQueryUtils.isCannedSearchQuery(queryJSON);
-
     return (
         <>
             <SearchPageHeaderInput queryJSON={queryJSON}>
@@ -379,8 +377,7 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
                         renderTooltipContent={renderProductTrainingTooltip}
                     >
                         <Button
-                            innerStyles={!isCannedQuery && [styles.searchRouterInputResults, styles.borderNone]}
-                            text={translate('search.filtersHeader')}
+                            innerStyles={[styles.searchRouterInputResults, styles.borderNone]}
                             icon={Expensicons.Filters}
                             onPress={onFiltersButtonPress}
                         />
diff --git a/src/components/Search/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeaderInput.tsx
index d9884b1c1efe..df9d38da837b 100644
--- a/src/components/Search/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeaderInput.tsx
@@ -2,17 +2,12 @@ import {useIsFocused} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Header from '@components/Header';
-import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SelectionListHandle} from '@components/SelectionList/types';
-import Text from '@components/Text';
-import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as SearchActions from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
@@ -23,16 +18,12 @@ import * as SearchQueryUtils from '@libs/SearchQueryUtils';
 import variables from '@styles/variables';
 import * as ReportUserActions from '@userActions/Report';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
-import type IconAsset from '@src/types/utils/IconAsset';
 import {buildSubstitutionsMap} from './SearchRouter/buildSubstitutionsMap';
 import {getQueryWithSubstitutions} from './SearchRouter/getQueryWithSubstitutions';
 import type {SubstitutionMap} from './SearchRouter/getQueryWithSubstitutions';
 import {getUpdatedSubstitutionsMap} from './SearchRouter/getUpdatedSubstitutionsMap';
-import SearchButton from './SearchRouter/SearchButton';
 import {useSearchRouterContext} from './SearchRouter/SearchRouterContext';
 import SearchRouterInput from './SearchRouter/SearchRouterInput';
 import SearchRouterList from './SearchRouter/SearchRouterList';
@@ -46,41 +37,20 @@ type SearchPageHeaderInputProps = {
     children: React.ReactNode;
 };
 
-type HeaderContent = {
-    icon: IconAsset;
-    titleText: TranslationPaths;
-};
-
-function getHeaderContent(type: SearchDataTypes): HeaderContent {
-    switch (type) {
-        case CONST.SEARCH.DATA_TYPES.INVOICE:
-            return {icon: Illustrations.EnvelopeReceipt, titleText: 'workspace.common.invoices'};
-        case CONST.SEARCH.DATA_TYPES.TRIP:
-            return {icon: Illustrations.Luggage, titleText: 'travel.trips'};
-        case CONST.SEARCH.DATA_TYPES.CHAT:
-            return {icon: Illustrations.CommentBubblesBlue, titleText: 'common.chats'};
-        case CONST.SEARCH.DATA_TYPES.EXPENSE:
-        default:
-            return {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'};
-    }
-}
-
 function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps) {
-    const {translate} = useLocalize();
     const styles = useThemeStyles();
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const taxRates = useMemo(() => getAllTaxRates(), []);
 
-    const {type, inputQuery: originalInputQuery} = queryJSON;
+    const {inputQuery: originalInputQuery} = queryJSON;
     const isCannedQuery = SearchQueryUtils.isCannedSearchQuery(queryJSON);
     const queryText = SearchQueryUtils.buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates);
-    const headerText = isCannedQuery ? translate(getHeaderContent(type).titleText) : '';
 
     // The actual input text that the user sees
-    const [textInputValue, setTextInputValue] = useState(queryText);
+    const [textInputValue, setTextInputValue] = useState(isCannedQuery ? '' : queryText);
     // The input text that was last used for autocomplete; needed for the SearchRouterList when browsing list via arrow keys
-    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(queryText);
+    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(isCannedQuery ? '' : queryText);
 
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
     const [isAutocompleteListVisible, setIsAutocompleteListVisible] = useState(false);
@@ -103,8 +73,8 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
     }, [isCannedQuery, isFocused, registerSearchPageInput, unregisterSearchPageInput]);
 
     useEffect(() => {
-        setTextInputValue(queryText);
-    }, [queryText]);
+        setTextInputValue(isCannedQuery ? '' : queryText);
+    }, [isCannedQuery, queryText]);
 
     useEffect(() => {
         const substitutionsMap = buildSubstitutionsMap(originalInputQuery, personalDetails, reports, taxRates);
@@ -189,31 +159,6 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
         [autocompleteSubstitutions],
     );
 
-    if (isCannedQuery) {
-        const headerIcon = getHeaderContent(type).icon;
-
-        return (
-            <View
-                dataSet={{dragArea: false}}
-                style={[styles.headerBar, isCannedQuery && styles.headerBarDesktopHeight]}
-            >
-                <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
-                    <Icon
-                        src={headerIcon}
-                        width={variables.iconHeader}
-                        height={variables.iconHeader}
-                        additionalStyles={[styles.mr2]}
-                    />
-                    <Header subtitle={<Text style={[styles.textLarge, styles.textHeadlineH2]}>{headerText}</Text>} />
-                    <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter, styles.gap2]}>
-                        {children}
-                        <SearchButton />
-                    </View>
-                </View>
-            </View>
-        );
-    }
-
     const hideAutocompleteList = () => setIsAutocompleteListVisible(false);
     const showAutocompleteList = () => {
         listRef.current?.updateAndScrollToFocusedIndex(0);

From a9add33d2bb81e2ec9ccbe9cab8d251adf473df0 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Fri, 10 Jan 2025 16:49:35 +0100
Subject: [PATCH 02/16] put search input on mobile Search Page

---
 .../SearchPageHeader.tsx                      |   4 +-
 .../SearchPageHeaderInput.tsx                 |  24 +-
 .../SearchPageHeaderInputNarrow.tsx           | 268 +++++++++++++
 .../SearchPageHeaderNarrow.tsx                | 372 ++++++++++++++++++
 .../createCustomBottomTabNavigator/TopBar.tsx |  15 +-
 src/pages/Search/SearchPage.tsx               |   2 +-
 src/pages/Search/SearchPageBottomTab.tsx      |  56 ++-
 src/pages/Search/SearchSelectedNarrow.tsx     |   2 +-
 .../Search/SearchSelectionModeHeader.tsx      |   2 +-
 src/styles/variables.ts                       |   4 +-
 10 files changed, 709 insertions(+), 40 deletions(-)
 rename src/components/Search/{ => SearchPageHeader}/SearchPageHeader.tsx (99%)
 rename src/components/Search/{ => SearchPageHeader}/SearchPageHeaderInput.tsx (92%)
 create mode 100644 src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx
 create mode 100644 src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx

diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
similarity index 99%
rename from src/components/Search/SearchPageHeader.tsx
rename to src/components/Search/SearchPageHeader/SearchPageHeader.tsx
index 984d9f211949..4244d9a13f73 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
@@ -10,6 +10,8 @@ import DecisionModal from '@components/DecisionModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
+import {useSearchContext} from '@components/Search/SearchContext';
+import type {PaymentData, SearchQueryJSON} from '@components/Search/types';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
@@ -28,9 +30,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
-import {useSearchContext} from './SearchContext';
 import SearchPageHeaderInput from './SearchPageHeaderInput';
-import type {PaymentData, SearchQueryJSON} from './types';
 
 type SearchPageHeaderProps = {queryJSON: SearchQueryJSON};
 
diff --git a/src/components/Search/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
similarity index 92%
rename from src/components/Search/SearchPageHeaderInput.tsx
rename to src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index df9d38da837b..435a5ada13b4 100644
--- a/src/components/Search/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -5,6 +5,14 @@ import {useOnyx} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
+import {buildSubstitutionsMap} from '@components/Search/SearchRouter/buildSubstitutionsMap';
+import {getQueryWithSubstitutions} from '@components/Search/SearchRouter/getQueryWithSubstitutions';
+import type {SubstitutionMap} from '@components/Search/SearchRouter/getQueryWithSubstitutions';
+import {getUpdatedSubstitutionsMap} from '@components/Search/SearchRouter/getUpdatedSubstitutionsMap';
+import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
+import SearchRouterInput from '@components/Search/SearchRouter/SearchRouterInput';
+import SearchRouterList from '@components/Search/SearchRouter/SearchRouterList';
+import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types';
 import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SelectionListHandle} from '@components/SelectionList/types';
@@ -20,14 +28,6 @@ import * as ReportUserActions from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {buildSubstitutionsMap} from './SearchRouter/buildSubstitutionsMap';
-import {getQueryWithSubstitutions} from './SearchRouter/getQueryWithSubstitutions';
-import type {SubstitutionMap} from './SearchRouter/getQueryWithSubstitutions';
-import {getUpdatedSubstitutionsMap} from './SearchRouter/getUpdatedSubstitutionsMap';
-import {useSearchRouterContext} from './SearchRouter/SearchRouterContext';
-import SearchRouterInput from './SearchRouter/SearchRouterInput';
-import SearchRouterList from './SearchRouter/SearchRouterList';
-import type {SearchQueryJSON, SearchQueryString} from './types';
 
 // When counting absolute positioning, we need to account for borders
 const BORDER_WIDTH = 1;
@@ -61,15 +61,11 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
 
     // If query is non-canned that means Search Input is displayed, so we need to register its ref in the context.
     useEffect(() => {
-        if (!isFocused) {
+        if (!isFocused || !textInputRef.current) {
             return;
         }
 
-        if (!isCannedQuery && textInputRef.current) {
-            registerSearchPageInput(textInputRef.current);
-        } else {
-            unregisterSearchPageInput();
-        }
+        registerSearchPageInput(textInputRef.current);
     }, [isCannedQuery, isFocused, registerSearchPageInput, unregisterSearchPageInput]);
 
     useEffect(() => {
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx
new file mode 100644
index 000000000000..26666e8dfad7
--- /dev/null
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx
@@ -0,0 +1,268 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Animated, {clamp, measure, runOnUI, useAnimatedRef, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import {usePersonalDetails} from '@components/OnyxProvider';
+import type {AnimatedTextInputRef} from '@components/RNTextInput';
+import {buildSubstitutionsMap} from '@components/Search/SearchRouter/buildSubstitutionsMap';
+import {getQueryWithSubstitutions} from '@components/Search/SearchRouter/getQueryWithSubstitutions';
+import type {SubstitutionMap} from '@components/Search/SearchRouter/getQueryWithSubstitutions';
+import {getUpdatedSubstitutionsMap} from '@components/Search/SearchRouter/getUpdatedSubstitutionsMap';
+import SearchRouterInput from '@components/Search/SearchRouter/SearchRouterInput';
+import SearchRouterList from '@components/Search/SearchRouter/SearchRouterList';
+import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types';
+import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
+import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
+import type {SelectionListHandle} from '@components/SelectionList/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as SearchActions from '@libs/actions/Search';
+import Navigation from '@libs/Navigation/Navigation';
+import {getAllTaxRates} from '@libs/PolicyUtils';
+import type {OptionData} from '@libs/ReportUtils';
+import * as SearchAutocompleteUtils from '@libs/SearchAutocompleteUtils';
+import * as SearchQueryUtils from '@libs/SearchQueryUtils';
+import * as ReportUserActions from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+// When counting absolute positioning, we need to account for borders
+const BORDER_WIDTH = 1;
+
+type SearchPageHeaderInputNarrowProps = {
+    queryJSON: SearchQueryJSON;
+    narrowSearchRouterActive: boolean;
+    activateNarrowSearchRouter: () => void;
+    children: React.ReactNode;
+};
+
+function SearchPageHeaderInputNarrow({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter, children}: SearchPageHeaderInputNarrowProps) {
+    const styles = useThemeStyles();
+    const personalDetails = usePersonalDetails();
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const taxRates = useMemo(() => getAllTaxRates(), []);
+
+    const inputRowWidth = useSharedValue(0);
+    const valueWasntZero = useSharedValue(false);
+    const textInputWidth = useDerivedValue(() => {
+        const newValue = narrowSearchRouterActive ? inputRowWidth.get() : inputRowWidth.get() - 52;
+        if (!valueWasntZero.get()) {
+            valueWasntZero.set(true);
+            return narrowSearchRouterActive ? inputRowWidth.get() : inputRowWidth.get() - 52;
+        }
+        return newValue;
+    }, [inputRowWidth, narrowSearchRouterActive]);
+    const inputWrapperStyle = useAnimatedStyle(() => {
+        return {
+            width: textInputWidth.value,
+        };
+    }, [narrowSearchRouterActive, inputRowWidth]);
+    const inputWrapperRef = useAnimatedRef<View>();
+
+    const animatedPadding = useDerivedValue(() => {
+        return withTiming(narrowSearchRouterActive ? 0 : 52, {duration: 300});
+    }, [narrowSearchRouterActive]);
+    const inputWrapperStyleTest = useAnimatedStyle(() => {
+        return {
+            paddingRight: animatedPadding.value,
+        };
+    });
+
+    const {inputQuery: originalInputQuery} = queryJSON;
+    const isCannedQuery = SearchQueryUtils.isCannedSearchQuery(queryJSON);
+    const queryText = SearchQueryUtils.buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates);
+
+    // The actual input text that the user sees
+    const [textInputValue, setTextInputValue] = useState(isCannedQuery ? '' : queryText);
+    // The input text that was last used for autocomplete; needed for the SearchRouterList when browsing list via arrow keys
+    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(isCannedQuery ? '' : queryText);
+
+    const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
+    const listRef = useRef<SelectionListHandle>(null);
+    const textInputRef = useRef<AnimatedTextInputRef>(null);
+    // const isFocused = useIsFocused();
+    // const {registerSearchPageInput, unregisterSearchPageInput} = useSearchRouterContext();
+
+    // // If query is non-canned that means Search Input is displayed, so we need to register its ref in the context.
+    // useEffect(() => {
+    //     if (!isFocused || !textInputRef.current) {
+    //         return;
+    //     }
+
+    //     registerSearchPageInput(textInputRef.current);
+    // }, [isCannedQuery, isFocused, registerSearchPageInput, unregisterSearchPageInput]);
+
+    useEffect(() => {
+        if (narrowSearchRouterActive || !textInputRef.current?.isFocused()) {
+            return;
+        }
+        textInputRef.current?.blur();
+    }, [narrowSearchRouterActive]);
+
+    useEffect(() => {
+        setTextInputValue(isCannedQuery ? '' : queryText);
+    }, [isCannedQuery, queryText]);
+
+    useEffect(() => {
+        const substitutionsMap = buildSubstitutionsMap(originalInputQuery, personalDetails, reports, taxRates);
+        setAutocompleteSubstitutions(substitutionsMap);
+    }, [originalInputQuery, personalDetails, reports, taxRates]);
+
+    const onSearchQueryChange = useCallback(
+        (userQuery: string) => {
+            const updatedUserQuery = SearchAutocompleteUtils.getAutocompleteQueryWithComma(textInputValue, userQuery);
+            setTextInputValue(updatedUserQuery);
+            setAutocompleteQueryValue(updatedUserQuery);
+
+            const updatedSubstitutionsMap = getUpdatedSubstitutionsMap(userQuery, autocompleteSubstitutions);
+            setAutocompleteSubstitutions(updatedSubstitutionsMap);
+
+            if (updatedUserQuery || textInputValue.length > 0) {
+                // listRef.current?.updateAndScrollToFocusedIndex(0);
+            } else {
+                listRef.current?.updateAndScrollToFocusedIndex(-1);
+            }
+        },
+        [autocompleteSubstitutions, setTextInputValue, textInputValue],
+    );
+
+    const submitSearch = useCallback(
+        (queryString: SearchQueryString) => {
+            const queryWithSubstitutions = getQueryWithSubstitutions(queryString, autocompleteSubstitutions);
+            const updatedQuery = SearchQueryUtils.getQueryWithUpdatedValues(queryWithSubstitutions, queryJSON.policyID);
+            if (!updatedQuery) {
+                return;
+            }
+
+            Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: updatedQuery}));
+
+            if (updatedQuery !== originalInputQuery) {
+                SearchActions.clearAllFilters();
+                setTextInputValue('');
+                setAutocompleteQueryValue('');
+            }
+        },
+        [autocompleteSubstitutions, originalInputQuery, queryJSON.policyID],
+    );
+
+    const onListItemPress = useCallback(
+        (item: OptionData | SearchQueryItem) => {
+            if (isSearchQueryItem(item)) {
+                if (!item.searchQuery) {
+                    return;
+                }
+
+                if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.AUTOCOMPLETE_SUGGESTION && textInputValue) {
+                    const trimmedUserSearchQuery = SearchAutocompleteUtils.getQueryWithoutAutocompletedPart(textInputValue);
+                    onSearchQueryChange(`${trimmedUserSearchQuery}${SearchQueryUtils.sanitizeSearchValue(item.searchQuery)} `);
+
+                    if (item.mapKey && item.autocompleteID) {
+                        const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
+
+                        setAutocompleteSubstitutions(substitutions);
+                    }
+                } else if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH) {
+                    submitSearch(item.searchQuery);
+                }
+            } else if (item?.reportID) {
+                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(item?.reportID));
+            } else if ('login' in item) {
+                ReportUserActions.navigateToAndOpenReport(item.login ? [item.login] : [], false);
+            }
+        },
+        [autocompleteSubstitutions, onSearchQueryChange, submitSearch, textInputValue],
+    );
+
+    const updateAutocompleteSubstitutions = useCallback(
+        (item: SearchQueryItem) => {
+            if (!item.autocompleteID || !item.mapKey) {
+                return;
+            }
+
+            const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
+            setAutocompleteSubstitutions(substitutions);
+        },
+        [autocompleteSubstitutions],
+    );
+
+    // const hideAutocompleteList = () => setIsAutocompleteListVisible(false);
+    const showAutocompleteList = () => {
+        // listRef.current?.updateAndScrollToFocusedIndex(0);
+        activateNarrowSearchRouter();
+    };
+
+    const searchQueryItem = textInputValue
+        ? {
+              text: textInputValue,
+              singleIcon: Expensicons.MagnifyingGlass,
+              searchQuery: textInputValue,
+              itemStyle: styles.activeComponentBG,
+              keyForList: 'findItem',
+              searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH,
+          }
+        : undefined;
+
+    return (
+        <View
+            dataSet={{dragArea: false}}
+            style={[styles.flex1]}
+        >
+            <View style={[styles.appBG, styles.flex1]}>
+                <View
+                    style={[styles.flexRow, styles.mh5, styles.mb3, styles.alignItemsCenter, styles.justifyContentCenter, {height: 52}]}
+                    onLayout={(event) => {
+                        inputRowWidth.set(event.nativeEvent.layout.width);
+                    }}
+                >
+                    <Animated.View
+                        style={[styles.flex1, {zIndex: 6}, inputWrapperStyleTest]}
+                        ref={inputWrapperRef}
+                    >
+                        <SearchRouterInput
+                            value={textInputValue}
+                            onSearchQueryChange={onSearchQueryChange}
+                            isFullWidth
+                            onSubmit={() => {
+                                submitSearch(textInputValue);
+                            }}
+                            autoFocus={false}
+                            onFocus={showAutocompleteList}
+                            // onBlur={hideAutocompleteList}
+                            wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
+                            wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
+                            outerWrapperStyle={[]}
+                            rightComponent={children}
+                            routerListRef={listRef}
+                            ref={textInputRef}
+                        />
+                    </Animated.View>
+                    <View style={[styles.pAbsolute, {top: 6, right: 0}]}>
+                        <Button
+                            innerStyles={[styles.searchRouterInputResults, styles.borderNone]}
+                            icon={Expensicons.Bookmark}
+                            // onPress={onFiltersButtonPress}
+                        />
+                    </View>
+                </View>
+                {narrowSearchRouterActive && (
+                    <View style={[styles.flex1]}>
+                        <SearchRouterList
+                            autocompleteQueryValue={autocompleteQueryValue}
+                            searchQueryItem={searchQueryItem}
+                            onListItemPress={onListItemPress}
+                            setTextQuery={setTextInputValue}
+                            updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
+                            ref={listRef}
+                        />
+                    </View>
+                )}
+            </View>
+        </View>
+    );
+}
+
+SearchPageHeaderInputNarrow.displayName = 'SearchPageHeaderInputNarrow';
+
+export default SearchPageHeaderInputNarrow;
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx
new file mode 100644
index 000000000000..2b069fe03f3d
--- /dev/null
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx
@@ -0,0 +1,372 @@
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useMemo, useState} from 'react';
+import {InteractionManager, View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
+import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
+import ConfirmModal from '@components/ConfirmModal';
+import DecisionModal from '@components/DecisionModal';
+import * as Expensicons from '@components/Icon/Expensicons';
+import {usePersonalDetails} from '@components/OnyxProvider';
+import {useProductTrainingContext} from '@components/ProductTrainingContext';
+import {useSearchContext} from '@components/Search/SearchContext';
+import type {PaymentData, SearchQueryJSON} from '@components/Search/types';
+import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
+import useActiveWorkspace from '@hooks/useActiveWorkspace';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as SearchActions from '@libs/actions/Search';
+import Navigation from '@libs/Navigation/Navigation';
+import {getAllTaxRates} from '@libs/PolicyUtils';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as SearchQueryUtils from '@libs/SearchQueryUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type DeepValueOf from '@src/types/utils/DeepValueOf';
+import SearchPageHeaderInput from './SearchPageHeaderInput';
+import SearchPageHeaderInputNarrow from './SearchPageHeaderInputNarrow';
+
+type SearchPageHeaderNarrowProps = {queryJSON: SearchQueryJSON; narrowSearchRouterActive: boolean; activateNarrowSearchRouter: () => void};
+
+type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
+
+function SearchPageHeaderNarrow({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter}: SearchPageHeaderNarrowProps) {
+    const {translate} = useLocalize();
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
+    const {activeWorkspaceID} = useActiveWorkspace();
+    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+    const {selectedTransactions, clearSelectedTransactions, selectedReports} = useSearchContext();
+    const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
+    const personalDetails = usePersonalDetails();
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const taxRates = getAllTaxRates();
+    const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [currencyList = {}] = useOnyx(ONYXKEYS.CURRENCY_LIST);
+    const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
+    const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
+    const [lastPaymentMethods = {}] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD);
+    const [isDeleteExpensesConfirmModalVisible, setIsDeleteExpensesConfirmModalVisible] = useState(false);
+    const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
+    const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
+
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
+
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
+        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
+        isScreenFocused,
+    );
+
+    const {status, hash} = queryJSON;
+
+    useFocusEffect(
+        useCallback(() => {
+            setIsScreenFocused(true);
+            return () => {
+                setIsScreenFocused(false);
+            };
+        }, []),
+    );
+
+    const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
+
+    const handleDeleteExpenses = () => {
+        if (selectedTransactionsKeys.length === 0) {
+            return;
+        }
+
+        setIsDeleteExpensesConfirmModalVisible(false);
+        SearchActions.deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
+
+        // Translations copy for delete modal depends on amount of selected items,
+        // We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
+        InteractionManager.runAfterInteractions(() => {
+            clearSelectedTransactions();
+        });
+    };
+
+    const headerButtonsOptions = useMemo(() => {
+        if (selectedTransactionsKeys.length === 0) {
+            return [];
+        }
+
+        const options: Array<DropdownOption<SearchHeaderOptionValue>> = [];
+        const isAnyTransactionOnHold = Object.values(selectedTransactions).some((transaction) => transaction.isHeld);
+
+        const shouldShowApproveOption =
+            !isOffline &&
+            !isAnyTransactionOnHold &&
+            (selectedReports.length
+                ? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.APPROVE)
+                : selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE));
+
+        if (shouldShowApproveOption) {
+            options.push({
+                icon: Expensicons.ThumbsUp,
+                text: translate('search.bulkActions.approve'),
+                value: CONST.SEARCH.BULK_ACTION_TYPES.APPROVE,
+                shouldCloseModalOnSelect: true,
+                onSelected: () => {
+                    if (isOffline) {
+                        setIsOfflineModalVisible(true);
+                        return;
+                    }
+
+                    const transactionIDList = selectedReports.length ? undefined : Object.keys(selectedTransactions);
+                    const reportIDList = !selectedReports.length
+                        ? Object.values(selectedTransactions).map((transaction) => transaction.reportID)
+                        : selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? [];
+                    SearchActions.approveMoneyRequestOnSearch(hash, reportIDList, transactionIDList);
+                },
+            });
+        }
+
+        const shouldShowPayOption =
+            !isOffline &&
+            !isAnyTransactionOnHold &&
+            (selectedReports.length
+                ? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.PAY && report.policyID && lastPaymentMethods[report.policyID])
+                : selectedTransactionsKeys.every(
+                      (id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.PAY && selectedTransactions[id].policyID && lastPaymentMethods[selectedTransactions[id].policyID],
+                  ));
+
+        if (shouldShowPayOption) {
+            options.push({
+                icon: Expensicons.MoneyBag,
+                text: translate('search.bulkActions.pay'),
+                value: CONST.SEARCH.BULK_ACTION_TYPES.PAY,
+                shouldCloseModalOnSelect: true,
+                onSelected: () => {
+                    if (isOffline) {
+                        setIsOfflineModalVisible(true);
+                        return;
+                    }
+
+                    const activeRoute = Navigation.getActiveRoute();
+                    const transactionIDList = selectedReports.length ? undefined : Object.keys(selectedTransactions);
+                    const items = selectedReports.length ? selectedReports : Object.values(selectedTransactions);
+
+                    for (const item of items) {
+                        const policyID = item.policyID;
+                        const lastPolicyPaymentMethod = policyID ? lastPaymentMethods?.[policyID] : null;
+
+                        if (!lastPolicyPaymentMethod) {
+                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: item.reportID, backTo: activeRoute}));
+                            return;
+                        }
+
+                        const hasVBBA = PolicyUtils.hasVBBA(policyID);
+
+                        if (lastPolicyPaymentMethod !== CONST.IOU.PAYMENT_TYPE.ELSEWHERE && !hasVBBA) {
+                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: item.reportID, backTo: activeRoute}));
+                            return;
+                        }
+                    }
+
+                    const paymentData = (
+                        selectedReports.length
+                            ? selectedReports.map((report) => ({reportID: report.reportID, amount: report.total, paymentType: lastPaymentMethods[report.policyID]}))
+                            : Object.values(selectedTransactions).map((transaction) => ({
+                                  reportID: transaction.reportID,
+                                  amount: transaction.amount,
+                                  paymentType: lastPaymentMethods[transaction.policyID],
+                              }))
+                    ) as PaymentData[];
+
+                    SearchActions.payMoneyRequestOnSearch(hash, paymentData, transactionIDList);
+                },
+            });
+        }
+
+        options.push({
+            icon: Expensicons.Download,
+            text: translate('common.download'),
+            value: CONST.SEARCH.BULK_ACTION_TYPES.EXPORT,
+            shouldCloseModalOnSelect: true,
+            onSelected: () => {
+                if (isOffline) {
+                    setIsOfflineModalVisible(true);
+                    return;
+                }
+
+                const reportIDList = selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? [];
+                SearchActions.exportSearchItemsToCSV(
+                    {query: status, jsonQuery: JSON.stringify(queryJSON), reportIDList, transactionIDList: selectedTransactionsKeys, policyIDs: [activeWorkspaceID ?? '']},
+                    () => {
+                        setIsDownloadErrorModalVisible(true);
+                    },
+                );
+            },
+        });
+
+        const shouldShowHoldOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canHold);
+
+        if (shouldShowHoldOption) {
+            options.push({
+                icon: Expensicons.Stopwatch,
+                text: translate('search.bulkActions.hold'),
+                value: CONST.SEARCH.BULK_ACTION_TYPES.HOLD,
+                shouldCloseModalOnSelect: true,
+                onSelected: () => {
+                    if (isOffline) {
+                        setIsOfflineModalVisible(true);
+                        return;
+                    }
+
+                    Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP);
+                },
+            });
+        }
+
+        const shouldShowUnholdOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canUnhold);
+
+        if (shouldShowUnholdOption) {
+            options.push({
+                icon: Expensicons.Stopwatch,
+                text: translate('search.bulkActions.unhold'),
+                value: CONST.SEARCH.BULK_ACTION_TYPES.UNHOLD,
+                shouldCloseModalOnSelect: true,
+                onSelected: () => {
+                    if (isOffline) {
+                        setIsOfflineModalVisible(true);
+                        return;
+                    }
+
+                    SearchActions.unholdMoneyRequestOnSearch(hash, selectedTransactionsKeys);
+                },
+            });
+        }
+
+        const shouldShowDeleteOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canDelete);
+
+        if (shouldShowDeleteOption) {
+            options.push({
+                icon: Expensicons.Trashcan,
+                text: translate('search.bulkActions.delete'),
+                value: CONST.SEARCH.BULK_ACTION_TYPES.DELETE,
+                shouldCloseModalOnSelect: true,
+                onSelected: () => {
+                    if (isOffline) {
+                        setIsOfflineModalVisible(true);
+                        return;
+                    }
+                    setIsDeleteExpensesConfirmModalVisible(true);
+                },
+            });
+        }
+
+        if (options.length === 0) {
+            const emptyOptionStyle = {
+                interactive: false,
+                iconFill: theme.icon,
+                iconHeight: variables.iconSizeLarge,
+                iconWidth: variables.iconSizeLarge,
+                numberOfLinesTitle: 2,
+                titleStyle: {...styles.colorMuted, ...styles.fontWeightNormal, ...styles.textWrap},
+            };
+
+            options.push({
+                icon: Expensicons.Exclamation,
+                text: translate('search.bulkActions.noOptionsAvailable'),
+                value: undefined,
+                ...emptyOptionStyle,
+            });
+        }
+
+        return options;
+    }, [
+        queryJSON,
+        status,
+        selectedTransactionsKeys,
+        selectedTransactions,
+        translate,
+        hash,
+        theme.icon,
+        styles.colorMuted,
+        styles.fontWeightNormal,
+        isOffline,
+        activeWorkspaceID,
+        selectedReports,
+        styles.textWrap,
+        lastPaymentMethods,
+    ]);
+
+    const onFiltersButtonPress = () => {
+        hideProductTrainingTooltip();
+        const filterFormValues = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
+        SearchActions.updateAdvancedFilters(filterFormValues);
+
+        Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
+    };
+
+    return (
+        <View style={[styles.flex1, styles.flexShrink1, styles.flexGrow1]}>
+            <SearchPageHeaderInputNarrow
+                queryJSON={queryJSON}
+                narrowSearchRouterActive={narrowSearchRouterActive}
+                activateNarrowSearchRouter={activateNarrowSearchRouter}
+            >
+                <EducationalTooltip
+                    shouldRender={shouldShowProductTrainingTooltip}
+                    anchorAlignment={{
+                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    }}
+                    shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
+                    wrapperStyle={styles.productTrainingTooltipWrapper}
+                    renderTooltipContent={renderProductTrainingTooltip}
+                >
+                    <Button
+                        innerStyles={[{backgroundColor: 'none'}, styles.borderNone]}
+                        icon={Expensicons.Filters}
+                        onPress={onFiltersButtonPress}
+                    />
+                </EducationalTooltip>
+            </SearchPageHeaderInputNarrow>
+            <ConfirmModal
+                isVisible={isDeleteExpensesConfirmModalVisible}
+                onConfirm={handleDeleteExpenses}
+                onCancel={() => {
+                    setIsDeleteExpensesConfirmModalVisible(false);
+                }}
+                title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
+                prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                danger
+            />
+            <DecisionModal
+                title={translate('common.youAppearToBeOffline')}
+                prompt={translate('common.offlinePrompt')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
+                secondOptionText={translate('common.buttonConfirm')}
+                isVisible={isOfflineModalVisible}
+                onClose={() => setIsOfflineModalVisible(false)}
+            />
+            <DecisionModal
+                title={translate('common.downloadFailedTitle')}
+                prompt={translate('common.downloadFailedDescription')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
+                secondOptionText={translate('common.buttonConfirm')}
+                isVisible={isDownloadErrorModalVisible}
+                onClose={() => setIsDownloadErrorModalVisible(false)}
+            />
+        </View>
+    );
+}
+
+SearchPageHeaderNarrow.displayName = 'SearchPageHeaderNarrow';
+
+export type {SearchHeaderOptionValue};
+export default SearchPageHeaderNarrow;
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
index c72c4de01e4e..8c3fd0256919 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
@@ -22,9 +22,18 @@ type TopBarProps = {
     activeWorkspaceID?: string;
     shouldDisplaySearch?: boolean;
     shouldDisplayCancelSearch?: boolean;
+    narrowSearchRouterActive?: boolean;
+    deactivateNarrowSearchRouter?: () => void;
 };
 
-function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayCancelSearch = false}: TopBarProps) {
+function TopBar({
+    breadcrumbLabel,
+    activeWorkspaceID,
+    shouldDisplaySearch = true,
+    shouldDisplayCancelSearch = false,
+    narrowSearchRouterActive = false,
+    deactivateNarrowSearchRouter,
+}: TopBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policy = usePolicy(activeWorkspaceID);
@@ -66,6 +75,10 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                         accessibilityLabel={translate('common.cancel')}
                         style={[styles.textBlue]}
                         onPress={() => {
+                            if (narrowSearchRouterActive) {
+                                deactivateNarrowSearchRouter?.();
+                                return;
+                            }
                             Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()}));
                         }}
                     >
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 640d3d3deacc..69573795a17c 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -2,7 +2,7 @@ import React, {useMemo} from 'react';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
-import SearchPageHeader from '@components/Search/SearchPageHeader';
+import SearchPageHeader from '@components/Search/SearchPageHeader/SearchPageHeader';
 import SearchStatusBar from '@components/Search/SearchStatusBar';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index fc4a7267253a..15d093f7c05b 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -1,10 +1,11 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Animated, {clamp, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
+import SearchPageHeaderNarrow from '@components/Search/SearchPageHeader/SearchPageHeaderNarrow';
 import SearchStatusBar from '@components/Search/SearchStatusBar';
 import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
 import useLocalize from '@hooks/useLocalize';
@@ -35,6 +36,7 @@ function SearchPageBottomTab() {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
+    const [narrowSearchRouterActive, setNarrowSearchRouterActive] = useState(false);
 
     const scrollOffset = useSharedValue(0);
     const topBarOffset = useSharedValue<number>(StyleUtils.searchHeaderHeight);
@@ -97,49 +99,67 @@ function SearchPageBottomTab() {
         );
     }
 
-    const shouldDisplayCancelSearch = shouldUseNarrowLayout && !SearchQueryUtils.isCannedSearchQuery(queryJSON);
+    const shouldDisplayCancelSearch = shouldUseNarrowLayout && (!SearchQueryUtils.isCannedSearchQuery(queryJSON) || narrowSearchRouterActive);
+
+    const searchRouterActiveStyle = {
+        ...styles.flex1,
+        ...styles.pRelative,
+    };
 
     return (
         <ScreenWrapper
             testID={SearchPageBottomTab.displayName}
             style={styles.pv0}
+            shouldEnableMaxHeight
             offlineIndicatorStyle={styles.mtAuto}
             headerGapStyles={styles.searchHeaderGap}
         >
             {!selectionMode?.isEnabled ? (
-                <>
+                <View style={[styles.zIndex10, narrowSearchRouterActive && styles.flex1, styles.mh100]}>
                     <View style={[styles.zIndex10, styles.appBG]}>
                         <TopBar
                             activeWorkspaceID={policyID}
                             breadcrumbLabel={translate('common.reports')}
-                            shouldDisplaySearch={shouldUseNarrowLayout}
+                            shouldDisplaySearch={false}
                             shouldDisplayCancelSearch={shouldDisplayCancelSearch}
+                            narrowSearchRouterActive={narrowSearchRouterActive}
+                            deactivateNarrowSearchRouter={() => {
+                                topBarOffset.set(StyleUtils.searchHeaderHeight);
+                                setNarrowSearchRouterActive(false);
+                            }}
                         />
                     </View>
                     {shouldUseNarrowLayout ? (
-                        <Animated.View style={[styles.searchTopBarStyle, topBarAnimatedStyle]}>
-                            <SearchTypeMenu
-                                queryJSON={queryJSON}
-                                searchName={searchName}
-                            />
-                            <SearchStatusBar
-                                queryJSON={queryJSON}
-                                onStatusChange={() => {
-                                    topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
-                                }}
-                            />
-                        </Animated.View>
+                        <View style={[styles.flex1]}>
+                            <Animated.View style={[narrowSearchRouterActive ? searchRouterActiveStyle : topBarAnimatedStyle, !narrowSearchRouterActive && styles.searchTopBarStyle]}>
+                                <SearchPageHeaderNarrow
+                                    queryJSON={queryJSON}
+                                    narrowSearchRouterActive={narrowSearchRouterActive}
+                                    activateNarrowSearchRouter={() => {
+                                        setNarrowSearchRouterActive(true);
+                                    }}
+                                />
+                                {!narrowSearchRouterActive && (
+                                    <SearchStatusBar
+                                        queryJSON={queryJSON}
+                                        onStatusChange={() => {
+                                            topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
+                                        }}
+                                    />
+                                )}
+                            </Animated.View>
+                        </View>
                     ) : (
                         <SearchTypeMenu
                             queryJSON={queryJSON}
                             searchName={searchName}
                         />
                     )}
-                </>
+                </View>
             ) : (
                 <SearchSelectionModeHeader queryJSON={queryJSON} />
             )}
-            {shouldUseNarrowLayout && (
+            {shouldUseNarrowLayout && !narrowSearchRouterActive && (
                 <Search
                     isSearchScreenFocused={isActiveCentralPaneRoute}
                     queryJSON={queryJSON}
diff --git a/src/pages/Search/SearchSelectedNarrow.tsx b/src/pages/Search/SearchSelectedNarrow.tsx
index 1f618c76b968..7d09dea28569 100644
--- a/src/pages/Search/SearchSelectedNarrow.tsx
+++ b/src/pages/Search/SearchSelectedNarrow.tsx
@@ -4,7 +4,7 @@ import Button from '@components/Button';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
-import type {SearchHeaderOptionValue} from '@components/Search/SearchPageHeader';
+import type {SearchHeaderOptionValue} from '@components/Search/SearchPageHeader/SearchPageHeader';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Expensicons from '@src/components/Icon/Expensicons';
diff --git a/src/pages/Search/SearchSelectionModeHeader.tsx b/src/pages/Search/SearchSelectionModeHeader.tsx
index 19ecf6113a65..f86b878e2757 100644
--- a/src/pages/Search/SearchSelectionModeHeader.tsx
+++ b/src/pages/Search/SearchSelectionModeHeader.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {useSearchContext} from '@components/Search/SearchContext';
-import SearchPageHeader from '@components/Search/SearchPageHeader';
+import SearchPageHeader from '@components/Search/SearchPageHeader/SearchPageHeader';
 import type {SearchQueryJSON} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 174e23fe64a9..bb82bdea66a5 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -268,8 +268,8 @@ export default {
     inlineImagePreviewMinSize: 64,
     inlineImagePreviewMaxSize: 148,
 
-    minimalTopBarOffset: -26,
-    searchHeaderHeight: 80,
+    minimalTopBarOffset: -106,
+    searchHeaderHeight: 0,
     searchListContentMarginTop: 116,
     searchTopBarZIndex: 9,
 

From dc905d6fa51cd2743c656566ca2edb846454c86c Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Wed, 15 Jan 2025 08:04:48 +0100
Subject: [PATCH 03/16] fix merge bugs

---
 src/components/Search/SearchPageHeader/SearchPageHeader.tsx   | 4 +---
 .../Search/SearchPageHeader/SearchPageHeaderInput.tsx         | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
index aacf09b7ad41..8ecacafc315c 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
@@ -30,7 +30,7 @@ import {
 import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getAllTaxRates, hasVBBA} from '@libs/PolicyUtils';
-import {buildFilterFormValuesFromQuery, isCannedSearchQuery} from '@libs/SearchQueryUtils';
+import {buildFilterFormValuesFromQuery} from '@libs/SearchQueryUtils';
 import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -367,8 +367,6 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
     };
 
-    const isCannedQuery = SearchQueryUtils.isCannedSearchQuery(queryJSON);
-
     return (
         <>
             <SearchPageHeaderInput queryJSON={queryJSON}>
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index 07312ae17847..6408f28880ea 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -49,7 +49,7 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
 
     const {inputQuery: originalInputQuery} = queryJSON;
     const isCannedQuery = isCannedSearchQuery(queryJSON);
-    const queryText = buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates);
+    const queryText = buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates, allCards);
 
     // The actual input text that the user sees
     const [textInputValue, setTextInputValue] = useState(isCannedQuery ? '' : queryText);

From ced6f854613ebea12f8266424893b080c141d1d8 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Fri, 17 Jan 2025 10:23:41 +0100
Subject: [PATCH 04/16] clean up SearchPage feature

---
 .../SearchPageHeader/SearchPageHeader.tsx     | 108 +++--
 .../SearchPageHeaderInput.tsx                 |  88 ++++-
 .../SearchPageHeaderInputNarrow.tsx           | 268 -------------
 .../SearchPageHeaderNarrow.tsx                | 372 ------------------
 .../SearchStatusBar.tsx                       |   4 +-
 .../SearchPageHeader/SearchTypeMenuButton.tsx | 200 ++++++++++
 src/libs/SearchUIUtils.ts                     |  72 ++++
 src/pages/Search/SearchPage.tsx               |   2 +-
 src/pages/Search/SearchPageBottomTab.tsx      | 118 +++---
 src/pages/Search/SearchTypeMenu.tsx           | 145 ++-----
 src/pages/Search/SearchTypeMenuNarrow.tsx     | 269 -------------
 src/styles/index.ts                           |   3 +-
 12 files changed, 506 insertions(+), 1143 deletions(-)
 delete mode 100644 src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx
 delete mode 100644 src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx
 rename src/components/Search/{ => SearchPageHeader}/SearchStatusBar.tsx (98%)
 create mode 100644 src/components/Search/SearchPageHeader/SearchTypeMenuButton.tsx
 delete mode 100644 src/pages/Search/SearchTypeMenuNarrow.tsx

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
index 8ecacafc315c..fa9c19c0ec74 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
@@ -1,5 +1,4 @@
-import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -39,11 +38,11 @@ import ROUTES from '@src/ROUTES';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import SearchPageHeaderInput from './SearchPageHeaderInput';
 
-type SearchPageHeaderProps = {queryJSON: SearchQueryJSON};
+type SearchPageHeaderProps = {queryJSON: SearchQueryJSON; narrowSearchRouterActive?: boolean; activateNarrowSearchRouter?: () => void};
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -68,24 +67,12 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
 
-    const [isScreenFocused, setIsScreenFocused] = useState(false);
-
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
-        isScreenFocused,
     );
 
     const {status, hash} = queryJSON;
 
-    useFocusEffect(
-        useCallback(() => {
-            setIsScreenFocused(true);
-            return () => {
-                setIsScreenFocused(false);
-            };
-        }, []),
-    );
-
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
     const handleDeleteExpenses = () => {
@@ -315,48 +302,45 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
         styles.textWrap,
     ]);
 
-    if (shouldUseNarrowLayout) {
-        if (selectionMode?.isEnabled) {
-            return (
-                <View>
-                    <SearchSelectedNarrow
-                        options={headerButtonsOptions}
-                        itemsLength={selectedTransactionsKeys.length}
-                    />
-                    <ConfirmModal
-                        isVisible={isDeleteExpensesConfirmModalVisible}
-                        onConfirm={handleDeleteExpenses}
-                        onCancel={() => {
-                            setIsDeleteExpensesConfirmModalVisible(false);
-                        }}
-                        title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
-                        prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
-                        confirmText={translate('common.delete')}
-                        cancelText={translate('common.cancel')}
-                        danger
-                    />
-                    <DecisionModal
-                        title={translate('common.youAppearToBeOffline')}
-                        prompt={translate('common.offlinePrompt')}
-                        isSmallScreenWidth={isSmallScreenWidth}
-                        onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
-                        secondOptionText={translate('common.buttonConfirm')}
-                        isVisible={isOfflineModalVisible}
-                        onClose={() => setIsOfflineModalVisible(false)}
-                    />
-                    <DecisionModal
-                        title={translate('common.downloadFailedTitle')}
-                        prompt={translate('common.downloadFailedDescription')}
-                        isSmallScreenWidth={isSmallScreenWidth}
-                        onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
-                        secondOptionText={translate('common.buttonConfirm')}
-                        isVisible={isDownloadErrorModalVisible}
-                        onClose={() => setIsDownloadErrorModalVisible(false)}
-                    />
-                </View>
-            );
-        }
-        return null;
+    if (shouldUseNarrowLayout && selectionMode?.isEnabled) {
+        return (
+            <View>
+                <SearchSelectedNarrow
+                    options={headerButtonsOptions}
+                    itemsLength={selectedTransactionsKeys.length}
+                />
+                <ConfirmModal
+                    isVisible={isDeleteExpensesConfirmModalVisible}
+                    onConfirm={handleDeleteExpenses}
+                    onCancel={() => {
+                        setIsDeleteExpensesConfirmModalVisible(false);
+                    }}
+                    title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
+                    prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
+                    confirmText={translate('common.delete')}
+                    cancelText={translate('common.cancel')}
+                    danger
+                />
+                <DecisionModal
+                    title={translate('common.youAppearToBeOffline')}
+                    prompt={translate('common.offlinePrompt')}
+                    isSmallScreenWidth={isSmallScreenWidth}
+                    onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
+                    secondOptionText={translate('common.buttonConfirm')}
+                    isVisible={isOfflineModalVisible}
+                    onClose={() => setIsOfflineModalVisible(false)}
+                />
+                <DecisionModal
+                    title={translate('common.downloadFailedTitle')}
+                    prompt={translate('common.downloadFailedDescription')}
+                    isSmallScreenWidth={isSmallScreenWidth}
+                    onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
+                    secondOptionText={translate('common.buttonConfirm')}
+                    isVisible={isDownloadErrorModalVisible}
+                    onClose={() => setIsDownloadErrorModalVisible(false)}
+                />
+            </View>
+        );
     }
 
     const onFiltersButtonPress = () => {
@@ -369,7 +353,11 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
 
     return (
         <>
-            <SearchPageHeaderInput queryJSON={queryJSON}>
+            <SearchPageHeaderInput
+                narrowSearchRouterActive={narrowSearchRouterActive}
+                activateNarrowSearchRouter={activateNarrowSearchRouter}
+                queryJSON={queryJSON}
+            >
                 {headerButtonsOptions.length > 0 ? (
                     <ButtonWithDropdownMenu
                         onPress={() => null}
@@ -392,7 +380,7 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
                         renderTooltipContent={renderProductTrainingTooltip}
                     >
                         <Button
-                            innerStyles={[styles.searchRouterInputResults, styles.borderNone]}
+                            innerStyles={[styles.searchRouterInputResults, styles.borderNone, styles.bgTransparent]}
                             icon={Expensicons.Filters}
                             onPress={onFiltersButtonPress}
                         />
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index 6408f28880ea..25f5426bdda9 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -2,6 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
@@ -16,6 +17,7 @@ import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types'
 import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SelectionListHandle} from '@components/SelectionList/types';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {navigateToAndOpenReport} from '@libs/actions/Report';
 import {clearAllFilters} from '@libs/actions/Search';
@@ -29,17 +31,21 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SearchTypeMenuButton from './SearchTypeMenuButton';
 
 // When counting absolute positioning, we need to account for borders
 const BORDER_WIDTH = 1;
 
 type SearchPageHeaderInputProps = {
     queryJSON: SearchQueryJSON;
+    narrowSearchRouterActive?: boolean;
+    activateNarrowSearchRouter?: () => void;
     children: React.ReactNode;
 };
 
-function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps) {
+function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter, children}: SearchPageHeaderInputProps) {
     const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const taxRates = useMemo(() => getAllTaxRates(), []);
@@ -61,16 +67,15 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
     const listRef = useRef<SelectionListHandle>(null);
     const textInputRef = useRef<AnimatedTextInputRef>(null);
     const isFocused = useIsFocused();
-    const {registerSearchPageInput, unregisterSearchPageInput} = useSearchRouterContext();
+    const {registerSearchPageInput} = useSearchRouterContext();
 
-    // If query is non-canned that means Search Input is displayed, so we need to register its ref in the context.
     useEffect(() => {
-        if (!isFocused || !textInputRef.current) {
+        if (shouldUseNarrowLayout || !isFocused || !textInputRef.current) {
             return;
         }
 
         registerSearchPageInput(textInputRef.current);
-    }, [isCannedQuery, isFocused, registerSearchPageInput, unregisterSearchPageInput]);
+    }, [isCannedQuery, isFocused, registerSearchPageInput, shouldUseNarrowLayout]);
 
     useEffect(() => {
         setTextInputValue(isCannedQuery ? '' : queryText);
@@ -159,12 +164,6 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
         [autocompleteSubstitutions],
     );
 
-    const hideAutocompleteList = () => setIsAutocompleteListVisible(false);
-    const showAutocompleteList = () => {
-        listRef.current?.updateAndScrollToFocusedIndex(0);
-        setIsAutocompleteListVisible(true);
-    };
-
     const searchQueryItem = textInputValue
         ? {
               text: textInputValue,
@@ -176,6 +175,73 @@ function SearchPageHeaderInput({queryJSON, children}: SearchPageHeaderInputProps
           }
         : undefined;
 
+    const inputRowWidth = useSharedValue(0);
+    const animatedPadding = useDerivedValue(() => {
+        return withTiming(narrowSearchRouterActive ? 0 : 52, {duration: 300});
+    }, [narrowSearchRouterActive]);
+    const inputWrapperStyleTest = useAnimatedStyle(() => {
+        return {
+            marginRight: animatedPadding.value,
+        };
+    });
+
+    if (shouldUseNarrowLayout) {
+        return (
+            <View
+                dataSet={{dragArea: false}}
+                style={[styles.flex1]}
+            >
+                <View style={[styles.appBG, styles.flex1]}>
+                    <View
+                        style={[styles.flexRow, styles.mh5, styles.mb3, styles.alignItemsCenter, styles.justifyContentCenter, {height: 52}]}
+                        onLayout={(event) => {
+                            inputRowWidth.set(event.nativeEvent.layout.width);
+                        }}
+                    >
+                        <Animated.View style={[styles.flex1, styles.zIndex10, inputWrapperStyleTest]}>
+                            <SearchRouterInput
+                                value={textInputValue}
+                                onSearchQueryChange={onSearchQueryChange}
+                                isFullWidth
+                                onSubmit={() => {
+                                    submitSearch(textInputValue);
+                                }}
+                                autoFocus={false}
+                                onFocus={activateNarrowSearchRouter}
+                                wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
+                                wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
+                                outerWrapperStyle={[]}
+                                rightComponent={children}
+                                routerListRef={listRef}
+                                ref={textInputRef}
+                            />
+                        </Animated.View>
+                        <View style={[styles.pAbsolute, {right: 0}]}>
+                            <SearchTypeMenuButton queryJSON={queryJSON} />
+                        </View>
+                    </View>
+                    {!!narrowSearchRouterActive && (
+                        <View style={[styles.flex1]}>
+                            <SearchRouterList
+                                autocompleteQueryValue={autocompleteQueryValue}
+                                searchQueryItem={searchQueryItem}
+                                onListItemPress={onListItemPress}
+                                setTextQuery={setTextInputValue}
+                                updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
+                                ref={listRef}
+                            />
+                        </View>
+                    )}
+                </View>
+            </View>
+        );
+    }
+
+    const hideAutocompleteList = () => setIsAutocompleteListVisible(false);
+    const showAutocompleteList = () => {
+        listRef.current?.updateAndScrollToFocusedIndex(0);
+        setIsAutocompleteListVisible(true);
+    };
     // we need `- BORDER_WIDTH` to achieve the effect that the input will not "jump"
     const popoverHorizontalPosition = 12 - BORDER_WIDTH;
     const autocompleteInputStyle = isAutocompleteListVisible
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx
deleted file mode 100644
index 26666e8dfad7..000000000000
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInputNarrow.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
-import Animated, {clamp, measure, runOnUI, useAnimatedRef, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
-import Button from '@components/Button';
-import * as Expensicons from '@components/Icon/Expensicons';
-import {usePersonalDetails} from '@components/OnyxProvider';
-import type {AnimatedTextInputRef} from '@components/RNTextInput';
-import {buildSubstitutionsMap} from '@components/Search/SearchRouter/buildSubstitutionsMap';
-import {getQueryWithSubstitutions} from '@components/Search/SearchRouter/getQueryWithSubstitutions';
-import type {SubstitutionMap} from '@components/Search/SearchRouter/getQueryWithSubstitutions';
-import {getUpdatedSubstitutionsMap} from '@components/Search/SearchRouter/getUpdatedSubstitutionsMap';
-import SearchRouterInput from '@components/Search/SearchRouter/SearchRouterInput';
-import SearchRouterList from '@components/Search/SearchRouter/SearchRouterList';
-import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types';
-import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
-import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
-import type {SelectionListHandle} from '@components/SelectionList/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as SearchActions from '@libs/actions/Search';
-import Navigation from '@libs/Navigation/Navigation';
-import {getAllTaxRates} from '@libs/PolicyUtils';
-import type {OptionData} from '@libs/ReportUtils';
-import * as SearchAutocompleteUtils from '@libs/SearchAutocompleteUtils';
-import * as SearchQueryUtils from '@libs/SearchQueryUtils';
-import * as ReportUserActions from '@userActions/Report';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-
-// When counting absolute positioning, we need to account for borders
-const BORDER_WIDTH = 1;
-
-type SearchPageHeaderInputNarrowProps = {
-    queryJSON: SearchQueryJSON;
-    narrowSearchRouterActive: boolean;
-    activateNarrowSearchRouter: () => void;
-    children: React.ReactNode;
-};
-
-function SearchPageHeaderInputNarrow({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter, children}: SearchPageHeaderInputNarrowProps) {
-    const styles = useThemeStyles();
-    const personalDetails = usePersonalDetails();
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
-    const taxRates = useMemo(() => getAllTaxRates(), []);
-
-    const inputRowWidth = useSharedValue(0);
-    const valueWasntZero = useSharedValue(false);
-    const textInputWidth = useDerivedValue(() => {
-        const newValue = narrowSearchRouterActive ? inputRowWidth.get() : inputRowWidth.get() - 52;
-        if (!valueWasntZero.get()) {
-            valueWasntZero.set(true);
-            return narrowSearchRouterActive ? inputRowWidth.get() : inputRowWidth.get() - 52;
-        }
-        return newValue;
-    }, [inputRowWidth, narrowSearchRouterActive]);
-    const inputWrapperStyle = useAnimatedStyle(() => {
-        return {
-            width: textInputWidth.value,
-        };
-    }, [narrowSearchRouterActive, inputRowWidth]);
-    const inputWrapperRef = useAnimatedRef<View>();
-
-    const animatedPadding = useDerivedValue(() => {
-        return withTiming(narrowSearchRouterActive ? 0 : 52, {duration: 300});
-    }, [narrowSearchRouterActive]);
-    const inputWrapperStyleTest = useAnimatedStyle(() => {
-        return {
-            paddingRight: animatedPadding.value,
-        };
-    });
-
-    const {inputQuery: originalInputQuery} = queryJSON;
-    const isCannedQuery = SearchQueryUtils.isCannedSearchQuery(queryJSON);
-    const queryText = SearchQueryUtils.buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates);
-
-    // The actual input text that the user sees
-    const [textInputValue, setTextInputValue] = useState(isCannedQuery ? '' : queryText);
-    // The input text that was last used for autocomplete; needed for the SearchRouterList when browsing list via arrow keys
-    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(isCannedQuery ? '' : queryText);
-
-    const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
-    const listRef = useRef<SelectionListHandle>(null);
-    const textInputRef = useRef<AnimatedTextInputRef>(null);
-    // const isFocused = useIsFocused();
-    // const {registerSearchPageInput, unregisterSearchPageInput} = useSearchRouterContext();
-
-    // // If query is non-canned that means Search Input is displayed, so we need to register its ref in the context.
-    // useEffect(() => {
-    //     if (!isFocused || !textInputRef.current) {
-    //         return;
-    //     }
-
-    //     registerSearchPageInput(textInputRef.current);
-    // }, [isCannedQuery, isFocused, registerSearchPageInput, unregisterSearchPageInput]);
-
-    useEffect(() => {
-        if (narrowSearchRouterActive || !textInputRef.current?.isFocused()) {
-            return;
-        }
-        textInputRef.current?.blur();
-    }, [narrowSearchRouterActive]);
-
-    useEffect(() => {
-        setTextInputValue(isCannedQuery ? '' : queryText);
-    }, [isCannedQuery, queryText]);
-
-    useEffect(() => {
-        const substitutionsMap = buildSubstitutionsMap(originalInputQuery, personalDetails, reports, taxRates);
-        setAutocompleteSubstitutions(substitutionsMap);
-    }, [originalInputQuery, personalDetails, reports, taxRates]);
-
-    const onSearchQueryChange = useCallback(
-        (userQuery: string) => {
-            const updatedUserQuery = SearchAutocompleteUtils.getAutocompleteQueryWithComma(textInputValue, userQuery);
-            setTextInputValue(updatedUserQuery);
-            setAutocompleteQueryValue(updatedUserQuery);
-
-            const updatedSubstitutionsMap = getUpdatedSubstitutionsMap(userQuery, autocompleteSubstitutions);
-            setAutocompleteSubstitutions(updatedSubstitutionsMap);
-
-            if (updatedUserQuery || textInputValue.length > 0) {
-                // listRef.current?.updateAndScrollToFocusedIndex(0);
-            } else {
-                listRef.current?.updateAndScrollToFocusedIndex(-1);
-            }
-        },
-        [autocompleteSubstitutions, setTextInputValue, textInputValue],
-    );
-
-    const submitSearch = useCallback(
-        (queryString: SearchQueryString) => {
-            const queryWithSubstitutions = getQueryWithSubstitutions(queryString, autocompleteSubstitutions);
-            const updatedQuery = SearchQueryUtils.getQueryWithUpdatedValues(queryWithSubstitutions, queryJSON.policyID);
-            if (!updatedQuery) {
-                return;
-            }
-
-            Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: updatedQuery}));
-
-            if (updatedQuery !== originalInputQuery) {
-                SearchActions.clearAllFilters();
-                setTextInputValue('');
-                setAutocompleteQueryValue('');
-            }
-        },
-        [autocompleteSubstitutions, originalInputQuery, queryJSON.policyID],
-    );
-
-    const onListItemPress = useCallback(
-        (item: OptionData | SearchQueryItem) => {
-            if (isSearchQueryItem(item)) {
-                if (!item.searchQuery) {
-                    return;
-                }
-
-                if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.AUTOCOMPLETE_SUGGESTION && textInputValue) {
-                    const trimmedUserSearchQuery = SearchAutocompleteUtils.getQueryWithoutAutocompletedPart(textInputValue);
-                    onSearchQueryChange(`${trimmedUserSearchQuery}${SearchQueryUtils.sanitizeSearchValue(item.searchQuery)} `);
-
-                    if (item.mapKey && item.autocompleteID) {
-                        const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
-
-                        setAutocompleteSubstitutions(substitutions);
-                    }
-                } else if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH) {
-                    submitSearch(item.searchQuery);
-                }
-            } else if (item?.reportID) {
-                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(item?.reportID));
-            } else if ('login' in item) {
-                ReportUserActions.navigateToAndOpenReport(item.login ? [item.login] : [], false);
-            }
-        },
-        [autocompleteSubstitutions, onSearchQueryChange, submitSearch, textInputValue],
-    );
-
-    const updateAutocompleteSubstitutions = useCallback(
-        (item: SearchQueryItem) => {
-            if (!item.autocompleteID || !item.mapKey) {
-                return;
-            }
-
-            const substitutions = {...autocompleteSubstitutions, [item.mapKey]: item.autocompleteID};
-            setAutocompleteSubstitutions(substitutions);
-        },
-        [autocompleteSubstitutions],
-    );
-
-    // const hideAutocompleteList = () => setIsAutocompleteListVisible(false);
-    const showAutocompleteList = () => {
-        // listRef.current?.updateAndScrollToFocusedIndex(0);
-        activateNarrowSearchRouter();
-    };
-
-    const searchQueryItem = textInputValue
-        ? {
-              text: textInputValue,
-              singleIcon: Expensicons.MagnifyingGlass,
-              searchQuery: textInputValue,
-              itemStyle: styles.activeComponentBG,
-              keyForList: 'findItem',
-              searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH,
-          }
-        : undefined;
-
-    return (
-        <View
-            dataSet={{dragArea: false}}
-            style={[styles.flex1]}
-        >
-            <View style={[styles.appBG, styles.flex1]}>
-                <View
-                    style={[styles.flexRow, styles.mh5, styles.mb3, styles.alignItemsCenter, styles.justifyContentCenter, {height: 52}]}
-                    onLayout={(event) => {
-                        inputRowWidth.set(event.nativeEvent.layout.width);
-                    }}
-                >
-                    <Animated.View
-                        style={[styles.flex1, {zIndex: 6}, inputWrapperStyleTest]}
-                        ref={inputWrapperRef}
-                    >
-                        <SearchRouterInput
-                            value={textInputValue}
-                            onSearchQueryChange={onSearchQueryChange}
-                            isFullWidth
-                            onSubmit={() => {
-                                submitSearch(textInputValue);
-                            }}
-                            autoFocus={false}
-                            onFocus={showAutocompleteList}
-                            // onBlur={hideAutocompleteList}
-                            wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
-                            wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
-                            outerWrapperStyle={[]}
-                            rightComponent={children}
-                            routerListRef={listRef}
-                            ref={textInputRef}
-                        />
-                    </Animated.View>
-                    <View style={[styles.pAbsolute, {top: 6, right: 0}]}>
-                        <Button
-                            innerStyles={[styles.searchRouterInputResults, styles.borderNone]}
-                            icon={Expensicons.Bookmark}
-                            // onPress={onFiltersButtonPress}
-                        />
-                    </View>
-                </View>
-                {narrowSearchRouterActive && (
-                    <View style={[styles.flex1]}>
-                        <SearchRouterList
-                            autocompleteQueryValue={autocompleteQueryValue}
-                            searchQueryItem={searchQueryItem}
-                            onListItemPress={onListItemPress}
-                            setTextQuery={setTextInputValue}
-                            updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
-                            ref={listRef}
-                        />
-                    </View>
-                )}
-            </View>
-        </View>
-    );
-}
-
-SearchPageHeaderInputNarrow.displayName = 'SearchPageHeaderInputNarrow';
-
-export default SearchPageHeaderInputNarrow;
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx
deleted file mode 100644
index 2b069fe03f3d..000000000000
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderNarrow.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo, useState} from 'react';
-import {InteractionManager, View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
-import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
-import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
-import ConfirmModal from '@components/ConfirmModal';
-import DecisionModal from '@components/DecisionModal';
-import * as Expensicons from '@components/Icon/Expensicons';
-import {usePersonalDetails} from '@components/OnyxProvider';
-import {useProductTrainingContext} from '@components/ProductTrainingContext';
-import {useSearchContext} from '@components/Search/SearchContext';
-import type {PaymentData, SearchQueryJSON} from '@components/Search/types';
-import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
-import useActiveWorkspace from '@hooks/useActiveWorkspace';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as SearchActions from '@libs/actions/Search';
-import Navigation from '@libs/Navigation/Navigation';
-import {getAllTaxRates} from '@libs/PolicyUtils';
-import * as PolicyUtils from '@libs/PolicyUtils';
-import * as SearchQueryUtils from '@libs/SearchQueryUtils';
-import variables from '@styles/variables';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type DeepValueOf from '@src/types/utils/DeepValueOf';
-import SearchPageHeaderInput from './SearchPageHeaderInput';
-import SearchPageHeaderInputNarrow from './SearchPageHeaderInputNarrow';
-
-type SearchPageHeaderNarrowProps = {queryJSON: SearchQueryJSON; narrowSearchRouterActive: boolean; activateNarrowSearchRouter: () => void};
-
-type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
-
-function SearchPageHeaderNarrow({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter}: SearchPageHeaderNarrowProps) {
-    const {translate} = useLocalize();
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const {isOffline} = useNetwork();
-    const {activeWorkspaceID} = useActiveWorkspace();
-    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
-    const {selectedTransactions, clearSelectedTransactions, selectedReports} = useSearchContext();
-    const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
-    const personalDetails = usePersonalDetails();
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
-    const taxRates = getAllTaxRates();
-    const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
-    const [currencyList = {}] = useOnyx(ONYXKEYS.CURRENCY_LIST);
-    const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
-    const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
-    const [lastPaymentMethods = {}] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD);
-    const [isDeleteExpensesConfirmModalVisible, setIsDeleteExpensesConfirmModalVisible] = useState(false);
-    const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
-    const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
-
-    const [isScreenFocused, setIsScreenFocused] = useState(false);
-
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
-        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
-        isScreenFocused,
-    );
-
-    const {status, hash} = queryJSON;
-
-    useFocusEffect(
-        useCallback(() => {
-            setIsScreenFocused(true);
-            return () => {
-                setIsScreenFocused(false);
-            };
-        }, []),
-    );
-
-    const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
-
-    const handleDeleteExpenses = () => {
-        if (selectedTransactionsKeys.length === 0) {
-            return;
-        }
-
-        setIsDeleteExpensesConfirmModalVisible(false);
-        SearchActions.deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
-
-        // Translations copy for delete modal depends on amount of selected items,
-        // We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
-        InteractionManager.runAfterInteractions(() => {
-            clearSelectedTransactions();
-        });
-    };
-
-    const headerButtonsOptions = useMemo(() => {
-        if (selectedTransactionsKeys.length === 0) {
-            return [];
-        }
-
-        const options: Array<DropdownOption<SearchHeaderOptionValue>> = [];
-        const isAnyTransactionOnHold = Object.values(selectedTransactions).some((transaction) => transaction.isHeld);
-
-        const shouldShowApproveOption =
-            !isOffline &&
-            !isAnyTransactionOnHold &&
-            (selectedReports.length
-                ? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.APPROVE)
-                : selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE));
-
-        if (shouldShowApproveOption) {
-            options.push({
-                icon: Expensicons.ThumbsUp,
-                text: translate('search.bulkActions.approve'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.APPROVE,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    const transactionIDList = selectedReports.length ? undefined : Object.keys(selectedTransactions);
-                    const reportIDList = !selectedReports.length
-                        ? Object.values(selectedTransactions).map((transaction) => transaction.reportID)
-                        : selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? [];
-                    SearchActions.approveMoneyRequestOnSearch(hash, reportIDList, transactionIDList);
-                },
-            });
-        }
-
-        const shouldShowPayOption =
-            !isOffline &&
-            !isAnyTransactionOnHold &&
-            (selectedReports.length
-                ? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.PAY && report.policyID && lastPaymentMethods[report.policyID])
-                : selectedTransactionsKeys.every(
-                      (id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.PAY && selectedTransactions[id].policyID && lastPaymentMethods[selectedTransactions[id].policyID],
-                  ));
-
-        if (shouldShowPayOption) {
-            options.push({
-                icon: Expensicons.MoneyBag,
-                text: translate('search.bulkActions.pay'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.PAY,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    const activeRoute = Navigation.getActiveRoute();
-                    const transactionIDList = selectedReports.length ? undefined : Object.keys(selectedTransactions);
-                    const items = selectedReports.length ? selectedReports : Object.values(selectedTransactions);
-
-                    for (const item of items) {
-                        const policyID = item.policyID;
-                        const lastPolicyPaymentMethod = policyID ? lastPaymentMethods?.[policyID] : null;
-
-                        if (!lastPolicyPaymentMethod) {
-                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: item.reportID, backTo: activeRoute}));
-                            return;
-                        }
-
-                        const hasVBBA = PolicyUtils.hasVBBA(policyID);
-
-                        if (lastPolicyPaymentMethod !== CONST.IOU.PAYMENT_TYPE.ELSEWHERE && !hasVBBA) {
-                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: item.reportID, backTo: activeRoute}));
-                            return;
-                        }
-                    }
-
-                    const paymentData = (
-                        selectedReports.length
-                            ? selectedReports.map((report) => ({reportID: report.reportID, amount: report.total, paymentType: lastPaymentMethods[report.policyID]}))
-                            : Object.values(selectedTransactions).map((transaction) => ({
-                                  reportID: transaction.reportID,
-                                  amount: transaction.amount,
-                                  paymentType: lastPaymentMethods[transaction.policyID],
-                              }))
-                    ) as PaymentData[];
-
-                    SearchActions.payMoneyRequestOnSearch(hash, paymentData, transactionIDList);
-                },
-            });
-        }
-
-        options.push({
-            icon: Expensicons.Download,
-            text: translate('common.download'),
-            value: CONST.SEARCH.BULK_ACTION_TYPES.EXPORT,
-            shouldCloseModalOnSelect: true,
-            onSelected: () => {
-                if (isOffline) {
-                    setIsOfflineModalVisible(true);
-                    return;
-                }
-
-                const reportIDList = selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? [];
-                SearchActions.exportSearchItemsToCSV(
-                    {query: status, jsonQuery: JSON.stringify(queryJSON), reportIDList, transactionIDList: selectedTransactionsKeys, policyIDs: [activeWorkspaceID ?? '']},
-                    () => {
-                        setIsDownloadErrorModalVisible(true);
-                    },
-                );
-            },
-        });
-
-        const shouldShowHoldOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canHold);
-
-        if (shouldShowHoldOption) {
-            options.push({
-                icon: Expensicons.Stopwatch,
-                text: translate('search.bulkActions.hold'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.HOLD,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP);
-                },
-            });
-        }
-
-        const shouldShowUnholdOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canUnhold);
-
-        if (shouldShowUnholdOption) {
-            options.push({
-                icon: Expensicons.Stopwatch,
-                text: translate('search.bulkActions.unhold'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.UNHOLD,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    SearchActions.unholdMoneyRequestOnSearch(hash, selectedTransactionsKeys);
-                },
-            });
-        }
-
-        const shouldShowDeleteOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canDelete);
-
-        if (shouldShowDeleteOption) {
-            options.push({
-                icon: Expensicons.Trashcan,
-                text: translate('search.bulkActions.delete'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.DELETE,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-                    setIsDeleteExpensesConfirmModalVisible(true);
-                },
-            });
-        }
-
-        if (options.length === 0) {
-            const emptyOptionStyle = {
-                interactive: false,
-                iconFill: theme.icon,
-                iconHeight: variables.iconSizeLarge,
-                iconWidth: variables.iconSizeLarge,
-                numberOfLinesTitle: 2,
-                titleStyle: {...styles.colorMuted, ...styles.fontWeightNormal, ...styles.textWrap},
-            };
-
-            options.push({
-                icon: Expensicons.Exclamation,
-                text: translate('search.bulkActions.noOptionsAvailable'),
-                value: undefined,
-                ...emptyOptionStyle,
-            });
-        }
-
-        return options;
-    }, [
-        queryJSON,
-        status,
-        selectedTransactionsKeys,
-        selectedTransactions,
-        translate,
-        hash,
-        theme.icon,
-        styles.colorMuted,
-        styles.fontWeightNormal,
-        isOffline,
-        activeWorkspaceID,
-        selectedReports,
-        styles.textWrap,
-        lastPaymentMethods,
-    ]);
-
-    const onFiltersButtonPress = () => {
-        hideProductTrainingTooltip();
-        const filterFormValues = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
-        SearchActions.updateAdvancedFilters(filterFormValues);
-
-        Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
-    };
-
-    return (
-        <View style={[styles.flex1, styles.flexShrink1, styles.flexGrow1]}>
-            <SearchPageHeaderInputNarrow
-                queryJSON={queryJSON}
-                narrowSearchRouterActive={narrowSearchRouterActive}
-                activateNarrowSearchRouter={activateNarrowSearchRouter}
-            >
-                <EducationalTooltip
-                    shouldRender={shouldShowProductTrainingTooltip}
-                    anchorAlignment={{
-                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    }}
-                    shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
-                    wrapperStyle={styles.productTrainingTooltipWrapper}
-                    renderTooltipContent={renderProductTrainingTooltip}
-                >
-                    <Button
-                        innerStyles={[{backgroundColor: 'none'}, styles.borderNone]}
-                        icon={Expensicons.Filters}
-                        onPress={onFiltersButtonPress}
-                    />
-                </EducationalTooltip>
-            </SearchPageHeaderInputNarrow>
-            <ConfirmModal
-                isVisible={isDeleteExpensesConfirmModalVisible}
-                onConfirm={handleDeleteExpenses}
-                onCancel={() => {
-                    setIsDeleteExpensesConfirmModalVisible(false);
-                }}
-                title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
-                prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                danger
-            />
-            <DecisionModal
-                title={translate('common.youAppearToBeOffline')}
-                prompt={translate('common.offlinePrompt')}
-                isSmallScreenWidth={isSmallScreenWidth}
-                onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
-                secondOptionText={translate('common.buttonConfirm')}
-                isVisible={isOfflineModalVisible}
-                onClose={() => setIsOfflineModalVisible(false)}
-            />
-            <DecisionModal
-                title={translate('common.downloadFailedTitle')}
-                prompt={translate('common.downloadFailedDescription')}
-                isSmallScreenWidth={isSmallScreenWidth}
-                onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
-                secondOptionText={translate('common.buttonConfirm')}
-                isVisible={isDownloadErrorModalVisible}
-                onClose={() => setIsDownloadErrorModalVisible(false)}
-            />
-        </View>
-    );
-}
-
-SearchPageHeaderNarrow.displayName = 'SearchPageHeaderNarrow';
-
-export type {SearchHeaderOptionValue};
-export default SearchPageHeaderNarrow;
diff --git a/src/components/Search/SearchStatusBar.tsx b/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
similarity index 98%
rename from src/components/Search/SearchStatusBar.tsx
rename to src/components/Search/SearchPageHeader/SearchStatusBar.tsx
index f94e6e1146c5..179e69bf4466 100644
--- a/src/components/Search/SearchStatusBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchStatusBar.tsx
@@ -4,6 +4,8 @@ import type {ScrollView as RNScrollView} from 'react-native';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScrollView from '@components/ScrollView';
+import {useSearchContext} from '@components/Search/SearchContext';
+import type {ChatSearchStatus, ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryJSON, TripSearchStatus} from '@components/Search/types';
 import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -16,8 +18,6 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type IconAsset from '@src/types/utils/IconAsset';
-import {useSearchContext} from './SearchContext';
-import type {ChatSearchStatus, ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryJSON, TripSearchStatus} from './types';
 
 type SearchStatusBarProps = {
     queryJSON: SearchQueryJSON;
diff --git a/src/components/Search/SearchPageHeader/SearchTypeMenuButton.tsx b/src/components/Search/SearchPageHeader/SearchTypeMenuButton.tsx
new file mode 100644
index 000000000000..41a6ce962b6d
--- /dev/null
+++ b/src/components/Search/SearchPageHeader/SearchTypeMenuButton.tsx
@@ -0,0 +1,200 @@
+import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
+import type {TextStyle, ViewStyle} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import type {MenuItemWithLink} from '@components/MenuItemList';
+import {usePersonalDetails} from '@components/OnyxProvider';
+import PopoverMenu from '@components/PopoverMenu';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
+import type {SearchQueryJSON} from '@components/Search/types';
+import ThreeDotsMenu from '@components/ThreeDotsMenu';
+import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
+import useDeleteSavedSearch from '@hooks/useDeleteSavedSearch';
+import useLocalize from '@hooks/useLocalize';
+import useSingleExecution from '@hooks/useSingleExecution';
+import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {clearAllFilters} from '@libs/actions/Search';
+import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import type {AuthScreensParamList} from '@libs/Navigation/types';
+import {getAllTaxRates} from '@libs/PolicyUtils';
+import {buildSearchQueryJSON, buildUserReadableQueryString, isCannedSearchQuery} from '@libs/SearchQueryUtils';
+import {createBaseSavedSearchMenuItem, createTypeMenuItems, getOverflowMenu as getOverflowMenuUtil} from '@libs/SearchUIUtils';
+import * as Expensicons from '@src/components/Icon/Expensicons';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
+
+type SavedSearchMenuItem = MenuItemWithLink & {
+    key: string;
+    hash: string;
+    query: string;
+    styles?: Array<ViewStyle | TextStyle>;
+};
+
+type SearchTypeMenuNarrowProps = {
+    queryJSON: SearchQueryJSON;
+};
+
+function SearchTypeMenuButton({queryJSON}: SearchTypeMenuNarrowProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {singleExecution} = useSingleExecution();
+    const {windowHeight} = useWindowDimensions();
+    const {translate} = useLocalize();
+    const {hash, policyID} = queryJSON;
+    const {showDeleteModal, DeleteConfirmModal} = useDeleteSavedSearch();
+    const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const personalDetails = usePersonalDetails();
+    const [reports = {}] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const taxRates = getAllTaxRates();
+    const [userCardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [workspaceCardFeeds = {}] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
+    const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds, userCardList), [userCardList, workspaceCardFeeds]);
+    const {unmodifiedPaddings} = useStyledSafeAreaInsets();
+
+    const [isPopoverVisible, setIsPopoverVisible] = useState(false);
+    const buttonRef = useRef<HTMLDivElement>(null);
+    const openMenu = useCallback(() => {
+        setIsPopoverVisible(true);
+    }, []);
+    const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
+
+    const typeMenuItems = createTypeMenuItems(allPolicies, session?.email);
+    const activeCentralPaneRoute = useActiveCentralPaneRoute();
+    const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
+    const isSearchNameModified = searchParams?.name === searchParams?.q;
+    const searchName = isSearchNameModified ? undefined : searchParams?.name;
+    const isCannedQuery = isCannedSearchQuery(queryJSON);
+    const title = searchName ?? (isCannedQuery ? undefined : buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates, allCards));
+    const activeItemIndex = isCannedQuery ? typeMenuItems.findIndex((item) => item.type === queryJSON.type) : -1;
+
+    const getOverflowMenu = useCallback(
+        (itemName: string, itemHash: number, itemQuery: string) => getOverflowMenuUtil(itemName, itemHash, itemQuery, showDeleteModal, true, closeMenu),
+        [closeMenu, showDeleteModal],
+    );
+    const [savedSearches] = useOnyx(ONYXKEYS.SAVED_SEARCHES);
+    const createSavedSearchMenuItem = useCallback(
+        (item: SaveSearchItem, key: string, index: number) => {
+            let savedSearchTitle = item.name;
+            if (savedSearchTitle === item.query) {
+                const jsonQuery = buildSearchQueryJSON(item.query) ?? ({} as SearchQueryJSON);
+                savedSearchTitle = buildUserReadableQueryString(jsonQuery, personalDetails, reports, taxRates, allCards);
+            }
+
+            const baseMenuItem: SavedSearchMenuItem = createBaseSavedSearchMenuItem(item, key, index, savedSearchTitle, hash);
+
+            return {
+                ...baseMenuItem,
+                onSelected: baseMenuItem.onPress,
+                rightComponent: (
+                    <ThreeDotsMenu
+                        menuItems={getOverflowMenu(baseMenuItem.title ?? '', Number(baseMenuItem.hash ?? ''), item.query ?? '')}
+                        anchorPosition={{horizontal: 0, vertical: 380}}
+                        anchorAlignment={{
+                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                        }}
+                        disabled={item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
+                    />
+                ),
+                styles: [styles.textSupporting],
+                isSelected: false,
+                shouldCallAfterModalHide: true,
+            };
+        },
+        [hash, getOverflowMenu, styles.textSupporting, personalDetails, reports, taxRates, allCards],
+    );
+
+    const savedSearchItems = useMemo(() => {
+        if (!savedSearches) {
+            return [];
+        }
+        return Object.entries(savedSearches).map(([key, item], index) => createSavedSearchMenuItem(item, key, index));
+    }, [createSavedSearchMenuItem, savedSearches]);
+
+    const currentSavedSearch = savedSearchItems.find((item) => Number(item.hash) === hash);
+
+    const popoverMenuItems = useMemo(() => {
+        const items = typeMenuItems.map((item, index) => {
+            const isSelected = title ? false : index === activeItemIndex;
+
+            return {
+                text: translate(item.translationPath),
+                onSelected: singleExecution(() => {
+                    clearAllFilters();
+                    Navigation.navigate(item.getRoute(policyID));
+                }),
+                isSelected,
+                icon: item.icon,
+                iconFill: isSelected ? theme.iconSuccessFill : theme.icon,
+                iconRight: Expensicons.Checkmark,
+                shouldShowRightIcon: isSelected,
+                success: isSelected,
+                containerStyle: isSelected ? [{backgroundColor: theme.border}] : undefined,
+                shouldCallAfterModalHide: true,
+            };
+        });
+
+        if (title && !currentSavedSearch) {
+            items.push({
+                text: title,
+                onSelected: closeMenu,
+                isSelected: !currentSavedSearch,
+                icon: Expensicons.Filters,
+                iconFill: theme.iconSuccessFill,
+                success: true,
+                containerStyle: undefined,
+                iconRight: Expensicons.Checkmark,
+                shouldShowRightIcon: false,
+                shouldCallAfterModalHide: true,
+            });
+        }
+
+        return items;
+    }, [typeMenuItems, title, currentSavedSearch, activeItemIndex, translate, singleExecution, theme.iconSuccessFill, theme.icon, theme.border, policyID, closeMenu]);
+
+    const allMenuItems = [];
+    allMenuItems.push(...popoverMenuItems);
+
+    if (savedSearchItems.length > 0) {
+        allMenuItems.push({
+            text: translate('search.savedSearchesMenuItemTitle'),
+            styles: [styles.textSupporting],
+            disabled: true,
+        });
+        allMenuItems.push(...savedSearchItems);
+    }
+
+    return (
+        <View>
+            <Button
+                innerStyles={[styles.searchRouterInputResults, styles.borderNone]}
+                icon={Expensicons.Bookmark}
+                onPress={openMenu}
+            />
+            <PopoverMenu
+                menuItems={allMenuItems as PopoverMenuItem[]}
+                isVisible={isPopoverVisible}
+                anchorPosition={styles.createMenuPositionSidebar(windowHeight)}
+                onClose={closeMenu}
+                onItemSelected={closeMenu}
+                anchorRef={buttonRef}
+                shouldUseScrollView
+                shouldUseModalPaddingStyle={false}
+                innerContainerStyle={{paddingBottom: unmodifiedPaddings.bottom}}
+            />
+            <DeleteConfirmModal />
+        </View>
+    );
+}
+
+SearchTypeMenuButton.displayName = 'SearchTypeMenuNarrow';
+
+export default SearchTypeMenuButton;
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
index 3911a8b4410a..a803ce1602f9 100644
--- a/src/libs/SearchUIUtils.ts
+++ b/src/libs/SearchUIUtils.ts
@@ -5,6 +5,7 @@ import ChatListItem from '@components/SelectionList/ChatListItem';
 import ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
 import type {ListItem, ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import type {SavedSearchMenuItem, SaveSearchItem, SearchTypeMenuItem} from '@pages/Search/SearchTypeMenu';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -14,12 +15,15 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type SearchResults from '@src/types/onyx/SearchResults';
 import type {ListItemDataType, ListItemType, SearchDataTypes, SearchPersonalDetails, SearchReport, SearchTransaction, SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import {canApproveIOU, canIOUBePaid, canSubmitReport} from './actions/IOU';
+import {clearAllFilters} from './actions/Search';
 import {convertToDisplayString} from './CurrencyUtils';
 import DateUtils from './DateUtils';
 import {translateLocal} from './Localize';
 import Navigation from './Navigation/Navigation';
+import {canSendInvoice} from './PolicyUtils';
 import {isAddCommentAction, isDeletedAction} from './ReportActionsUtils';
 import {
+    hasInvoiceReports,
     hasOnlyHeldExpenses,
     hasViolations,
     isAllowedToApproveExpenseReport as isAllowedToApproveExpenseReportUtils,
@@ -28,6 +32,7 @@ import {
     isMoneyRequestReport,
     isSettled,
 } from './ReportUtils';
+import {buildCannedSearchQuery} from './SearchQueryUtils';
 import {getAmount as getTransactionAmount, getCreated as getTransactionCreatedDate, getMerchant as getTransactionMerchant, isExpensifyCardTransaction, isPending} from './TransactionUtils';
 
 const columnNamesToSortingProperty = {
@@ -621,6 +626,71 @@ function isCorrectSearchUserName(displayName?: string) {
     return displayName && displayName.toUpperCase() !== CONST.REPORT.OWNER_EMAIL_FAKE;
 }
 
+function createTypeMenuItems(allPolicies: OnyxCollection<OnyxTypes.Policy> | null, email: string | undefined): SearchTypeMenuItem[] {
+    const typeMenuItems: SearchTypeMenuItem[] = [
+        {
+            translationPath: 'common.expenses',
+            type: CONST.SEARCH.DATA_TYPES.EXPENSE,
+            icon: Expensicons.Receipt,
+            getRoute: (policyID?: string) => {
+                const query = buildCannedSearchQuery({policyID});
+                return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
+            },
+        },
+        {
+            translationPath: 'common.chats',
+            type: CONST.SEARCH.DATA_TYPES.CHAT,
+            icon: Expensicons.ChatBubbles,
+            getRoute: (policyID?: string) => {
+                const query = buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.CHAT, status: CONST.SEARCH.STATUS.CHAT.ALL, policyID});
+                return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
+            },
+        },
+    ];
+
+    if (canSendInvoice(allPolicies, email) || hasInvoiceReports()) {
+        typeMenuItems.push({
+            translationPath: 'workspace.common.invoices',
+            type: CONST.SEARCH.DATA_TYPES.INVOICE,
+            icon: Expensicons.InvoiceGeneric,
+            getRoute: (policyID?: string) => {
+                const query = buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.INVOICE, status: CONST.SEARCH.STATUS.INVOICE.ALL, policyID});
+                return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
+            },
+        });
+    }
+    typeMenuItems.push({
+        translationPath: 'travel.trips',
+        type: CONST.SEARCH.DATA_TYPES.TRIP,
+        icon: Expensicons.Suitcase,
+        getRoute: (policyID?: string) => {
+            const query = buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.TRIP, status: CONST.SEARCH.STATUS.TRIP.ALL, policyID});
+            return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
+        },
+    });
+
+    return typeMenuItems;
+}
+
+function createBaseSavedSearchMenuItem(item: SaveSearchItem, key: string, index: number, title: string, hash: number): SavedSearchMenuItem {
+    const baseMenuItem: SavedSearchMenuItem = {
+        key,
+        title,
+        hash: key,
+        query: item.query,
+        shouldShowRightComponent: true,
+        focused: Number(key) === hash,
+        onPress: () => {
+            clearAllFilters();
+            Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? '', name: item?.name}));
+        },
+        pendingAction: item.pendingAction,
+        disabled: item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+        shouldIconUseAutoWidthStyle: true,
+    };
+    return baseMenuItem;
+}
+
 export {
     getListItem,
     getSections,
@@ -636,4 +706,6 @@ export {
     isCorrectSearchUserName,
     isReportActionEntry,
     getAction,
+    createTypeMenuItems,
+    createBaseSavedSearchMenuItem,
 };
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 69573795a17c..54197b8e43be 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -3,7 +3,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
 import SearchPageHeader from '@components/Search/SearchPageHeader/SearchPageHeader';
-import SearchStatusBar from '@components/Search/SearchStatusBar';
+import SearchStatusBar from '@components/Search/SearchPageHeader/SearchStatusBar';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 15d093f7c05b..79784f0cec5b 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -5,8 +5,8 @@ import Animated, {clamp, useAnimatedScrollHandler, useAnimatedStyle, useSharedVa
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
-import SearchPageHeaderNarrow from '@components/Search/SearchPageHeader/SearchPageHeaderNarrow';
-import SearchStatusBar from '@components/Search/SearchStatusBar';
+import SearchPageHeader from '@components/Search/SearchPageHeader/SearchPageHeader';
+import SearchStatusBar from '@components/Search/SearchPageHeader/SearchStatusBar';
 import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -74,8 +74,6 @@ function SearchPageBottomTab() {
 
     const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
     const parsedQuery = SearchQueryUtils.buildSearchQueryJSON(searchParams?.q);
-    const isSearchNameModified = searchParams?.name === searchParams?.q;
-    const searchName = isSearchNameModified ? undefined : searchParams?.name;
     const policyIDFromSearchQuery = parsedQuery && SearchQueryUtils.getPolicyIDFromSearchQuery(parsedQuery);
     const isActiveCentralPaneRoute = activeCentralPaneRoute?.name === SCREENS.SEARCH.CENTRAL_PANE;
     const queryJSON = isActiveCentralPaneRoute ? parsedQuery : undefined;
@@ -106,33 +104,35 @@ function SearchPageBottomTab() {
         ...styles.pRelative,
     };
 
-    return (
-        <ScreenWrapper
-            testID={SearchPageBottomTab.displayName}
-            style={styles.pv0}
-            shouldEnableMaxHeight
-            offlineIndicatorStyle={styles.mtAuto}
-            headerGapStyles={styles.searchHeaderGap}
-        >
-            {!selectionMode?.isEnabled ? (
-                <View style={[styles.zIndex10, narrowSearchRouterActive && styles.flex1, styles.mh100]}>
-                    <View style={[styles.zIndex10, styles.appBG]}>
-                        <TopBar
-                            activeWorkspaceID={policyID}
-                            breadcrumbLabel={translate('common.reports')}
-                            shouldDisplaySearch={false}
-                            shouldDisplayCancelSearch={shouldDisplayCancelSearch}
-                            narrowSearchRouterActive={narrowSearchRouterActive}
-                            deactivateNarrowSearchRouter={() => {
-                                topBarOffset.set(StyleUtils.searchHeaderHeight);
-                                setNarrowSearchRouterActive(false);
-                            }}
-                        />
-                    </View>
-                    {shouldUseNarrowLayout ? (
+    if (shouldUseNarrowLayout) {
+        return (
+            <ScreenWrapper
+                testID={SearchPageBottomTab.displayName}
+                style={styles.pv0}
+                shouldEnableMaxHeight
+                offlineIndicatorStyle={styles.mtAuto}
+                headerGapStyles={styles.searchHeaderGap}
+            >
+                {!selectionMode?.isEnabled ? (
+                    <View style={[styles.zIndex10, narrowSearchRouterActive && styles.flex1, styles.mh100]}>
+                        <View style={[styles.zIndex10, styles.appBG]}>
+                            <TopBar
+                                activeWorkspaceID={policyID}
+                                breadcrumbLabel={translate('common.reports')}
+                                shouldDisplaySearch={false}
+                                shouldDisplayCancelSearch={shouldDisplayCancelSearch}
+                                narrowSearchRouterActive={narrowSearchRouterActive}
+                                deactivateNarrowSearchRouter={() => {
+                                    topBarOffset.set(StyleUtils.searchHeaderHeight);
+                                    setNarrowSearchRouterActive(false);
+                                }}
+                            />
+                        </View>
                         <View style={[styles.flex1]}>
-                            <Animated.View style={[narrowSearchRouterActive ? searchRouterActiveStyle : topBarAnimatedStyle, !narrowSearchRouterActive && styles.searchTopBarStyle]}>
-                                <SearchPageHeaderNarrow
+                            <Animated.View
+                                style={[narrowSearchRouterActive ? searchRouterActiveStyle : topBarAnimatedStyle, !narrowSearchRouterActive && styles.searchTopBarStyle, {paddingTop: 1}]}
+                            >
+                                <SearchPageHeader
                                     queryJSON={queryJSON}
                                     narrowSearchRouterActive={narrowSearchRouterActive}
                                     activateNarrowSearchRouter={() => {
@@ -149,25 +149,47 @@ function SearchPageBottomTab() {
                                 )}
                             </Animated.View>
                         </View>
-                    ) : (
-                        <SearchTypeMenu
-                            queryJSON={queryJSON}
-                            searchName={searchName}
-                        />
-                    )}
+                    </View>
+                ) : (
+                    <SearchSelectionModeHeader queryJSON={queryJSON} />
+                )}
+                {!narrowSearchRouterActive && (
+                    <Search
+                        isSearchScreenFocused={isActiveCentralPaneRoute}
+                        queryJSON={queryJSON}
+                        onSearchListScroll={scrollHandler}
+                        onContentSizeChange={onContentSizeChange}
+                        contentContainerStyle={!selectionMode?.isEnabled ? [styles.searchListContentContainerStyles] : undefined}
+                    />
+                )}
+            </ScreenWrapper>
+        );
+    }
+
+    return (
+        <ScreenWrapper
+            testID={SearchPageBottomTab.displayName}
+            style={styles.pv0}
+            shouldEnableMaxHeight
+            offlineIndicatorStyle={styles.mtAuto}
+            headerGapStyles={styles.searchHeaderGap}
+        >
+            <View style={[styles.zIndex10, narrowSearchRouterActive && styles.flex1, styles.mh100]}>
+                <View style={[styles.zIndex10, styles.appBG]}>
+                    <TopBar
+                        activeWorkspaceID={policyID}
+                        breadcrumbLabel={translate('common.reports')}
+                        shouldDisplaySearch={false}
+                        shouldDisplayCancelSearch={shouldDisplayCancelSearch}
+                        narrowSearchRouterActive={narrowSearchRouterActive}
+                        deactivateNarrowSearchRouter={() => {
+                            topBarOffset.set(StyleUtils.searchHeaderHeight);
+                            setNarrowSearchRouterActive(false);
+                        }}
+                    />
                 </View>
-            ) : (
-                <SearchSelectionModeHeader queryJSON={queryJSON} />
-            )}
-            {shouldUseNarrowLayout && !narrowSearchRouterActive && (
-                <Search
-                    isSearchScreenFocused={isActiveCentralPaneRoute}
-                    queryJSON={queryJSON}
-                    onSearchListScroll={scrollHandler}
-                    onContentSizeChange={onContentSizeChange}
-                    contentContainerStyle={!selectionMode?.isEnabled ? [styles.searchListContentContainerStyles] : undefined}
-                />
-            )}
+                <SearchTypeMenu queryJSON={queryJSON} />
+            </View>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 513dff846914..72342638b6e0 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -16,51 +16,46 @@ import Text from '@components/Text';
 import useDeleteSavedSearch from '@hooks/useDeleteSavedSearch';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearAllFilters} from '@libs/actions/Search';
 import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import {canSendInvoice, getAllTaxRates} from '@libs/PolicyUtils';
-import {hasInvoiceReports} from '@libs/ReportUtils';
-import {buildCannedSearchQuery, buildSearchQueryJSON, buildUserReadableQueryString, isCannedSearchQuery} from '@libs/SearchQueryUtils';
-import {getOverflowMenu as getOverflowMenuUtil} from '@libs/SearchUIUtils';
+import {getAllTaxRates} from '@libs/PolicyUtils';
+import {buildSearchQueryJSON, buildUserReadableQueryString, isCannedSearchQuery} from '@libs/SearchQueryUtils';
+import {createBaseSavedSearchMenuItem, createTypeMenuItems, getOverflowMenu as getOverflowMenuUtil} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
-import ROUTES from '@src/ROUTES';
 import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type IconAsset from '@src/types/utils/IconAsset';
 import SavedSearchItemThreeDotMenu from './SavedSearchItemThreeDotMenu';
-import SearchTypeMenuNarrow from './SearchTypeMenuNarrow';
 
 type SavedSearchMenuItem = MenuItemWithLink & {
     key: string;
     hash: string;
     query: string;
-    styles: Array<ViewStyle | TextStyle>;
+    styles?: Array<ViewStyle | TextStyle>;
 };
 
 type SearchTypeMenuProps = {
     queryJSON: SearchQueryJSON;
-    searchName?: string;
 };
 
 type SearchTypeMenuItem = {
-    title: string;
+    translationPath: TranslationPaths;
     type: SearchDataTypes;
     icon: IconAsset;
     getRoute: (policyID?: string) => Route;
 };
 
-function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
+function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
     const {type, hash} = queryJSON;
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {singleExecution} = useSingleExecution();
     const {translate} = useLocalize();
     const [savedSearches] = useOnyx(ONYXKEYS.SAVED_SEARCHES);
@@ -80,69 +75,20 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds, userCardList), [userCardList, workspaceCardFeeds]);
     const taxRates = getAllTaxRates();
 
-    const typeMenuItems: SearchTypeMenuItem[] = [
-        {
-            title: translate('common.expenses'),
-            type: CONST.SEARCH.DATA_TYPES.EXPENSE,
-            icon: Expensicons.Receipt,
-            getRoute: (policyID?: string) => {
-                const query = buildCannedSearchQuery({policyID});
-                return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
-            },
-        },
-        {
-            title: translate('common.chats'),
-            type: CONST.SEARCH.DATA_TYPES.CHAT,
-            icon: Expensicons.ChatBubbles,
-            getRoute: (policyID?: string) => {
-                const query = buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.CHAT, status: CONST.SEARCH.STATUS.CHAT.ALL, policyID});
-                return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
-            },
-        },
-    ];
-
-    if (canSendInvoice(allPolicies, session?.email) || hasInvoiceReports()) {
-        typeMenuItems.push({
-            title: translate('workspace.common.invoices'),
-            type: CONST.SEARCH.DATA_TYPES.INVOICE,
-            icon: Expensicons.InvoiceGeneric,
-            getRoute: (policyID?: string) => {
-                const query = buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.INVOICE, status: CONST.SEARCH.STATUS.INVOICE.ALL, policyID});
-                return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
-            },
-        });
-    }
-    typeMenuItems.push({
-        title: translate('travel.trips'),
-        type: CONST.SEARCH.DATA_TYPES.TRIP,
-        icon: Expensicons.Suitcase,
-        getRoute: (policyID?: string) => {
-            const query = buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.TRIP, status: CONST.SEARCH.STATUS.TRIP.ALL, policyID});
-            return ROUTES.SEARCH_CENTRAL_PANE.getRoute({query});
-        },
-    });
+    const typeMenuItems: SearchTypeMenuItem[] = createTypeMenuItems(allPolicies, session?.email);
 
     const getOverflowMenu = useCallback((itemName: string, itemHash: number, itemQuery: string) => getOverflowMenuUtil(itemName, itemHash, itemQuery, showDeleteModal), [showDeleteModal]);
-
     const createSavedSearchMenuItem = useCallback(
-        (item: SaveSearchItem, key: string, isNarrow: boolean, index: number) => {
+        (item: SaveSearchItem, key: string, index: number) => {
             let title = item.name;
             if (title === item.query) {
                 const jsonQuery = buildSearchQueryJSON(item.query) ?? ({} as SearchQueryJSON);
                 title = buildUserReadableQueryString(jsonQuery, personalDetails, reports, taxRates, allCards);
             }
 
-            const baseMenuItem: SavedSearchMenuItem = {
-                key,
-                title,
-                hash: key,
-                query: item.query,
-                shouldShowRightComponent: true,
-                focused: Number(key) === hash,
-                onPress: () => {
-                    clearAllFilters();
-                    Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? '', name: item?.name}));
-                },
+            const baseMenuItem: SavedSearchMenuItem = createBaseSavedSearchMenuItem(item, key, index, title, hash);
+            return {
+                ...baseMenuItem,
                 rightComponent: (
                     <SavedSearchItemThreeDotMenu
                         menuItems={getOverflowMenu(title, Number(key), item.query)}
@@ -150,41 +96,31 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
                         hideProductTrainingTooltip={index === 0 && shouldShowProductTrainingTooltip ? hideProductTrainingTooltip : undefined}
                     />
                 ),
-                styles: [styles.alignItemsCenter],
-                pendingAction: item.pendingAction,
-                disabled: item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
-                shouldIconUseAutoWidthStyle: true,
+                style: [styles.alignItemsCenter],
+                shouldRenderTooltip: index === 0 && shouldShowProductTrainingTooltip,
+                tooltipAnchorAlignment: {
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                },
+                tooltipShiftHorizontal: -32,
+                tooltipShiftVertical: 15,
+                tooltipWrapperStyle: [styles.bgPaleGreen, styles.mh4, styles.pv2],
+                renderTooltipContent: renderProductTrainingTooltip,
             };
-
-            if (!isNarrow) {
-                return {
-                    ...baseMenuItem,
-                    shouldRenderTooltip: index === 0 && shouldShowProductTrainingTooltip,
-                    tooltipAnchorAlignment: {
-                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                    },
-                    tooltipShiftHorizontal: -32,
-                    tooltipShiftVertical: 15,
-                    tooltipWrapperStyle: [styles.bgPaleGreen, styles.mh4, styles.pv2],
-                    renderTooltipContent: renderProductTrainingTooltip,
-                };
-            }
-            return baseMenuItem;
         },
         [
-            allCards,
+            shouldShowProductTrainingTooltip,
+            hideProductTrainingTooltip,
             hash,
             getOverflowMenu,
+            personalDetails,
+            reports,
+            taxRates,
+            allCards,
             styles.alignItemsCenter,
             styles.bgPaleGreen,
             styles.mh4,
             styles.pv2,
-            personalDetails,
-            reports,
-            taxRates,
-            shouldShowProductTrainingTooltip,
-            hideProductTrainingTooltip,
             renderProductTrainingTooltip,
         ],
     );
@@ -216,8 +152,8 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
         if (!savedSearches) {
             return [];
         }
-        return Object.entries(savedSearches).map(([key, item], index) => createSavedSearchMenuItem(item, key, shouldUseNarrowLayout, index));
-    }, [createSavedSearchMenuItem, savedSearches, shouldUseNarrowLayout]);
+        return Object.entries(savedSearches).map(([key, item], index) => createSavedSearchMenuItem(item, key, index));
+    }, [createSavedSearchMenuItem, savedSearches]);
 
     const renderSavedSearchesSection = useCallback(
         (menuItems: MenuItemWithLink[]) => (
@@ -238,20 +174,6 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
     const isCannedQuery = isCannedSearchQuery(queryJSON);
     const activeItemIndex = isCannedQuery ? typeMenuItems.findIndex((item) => item.type === type) : -1;
 
-    if (shouldUseNarrowLayout) {
-        const title = searchName ?? (isCannedQuery ? undefined : buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates, allCards));
-
-        return (
-            <SearchTypeMenuNarrow
-                typeMenuItems={typeMenuItems}
-                activeItemIndex={activeItemIndex}
-                queryJSON={queryJSON}
-                title={title}
-                savedSearchesMenuItems={savedSearchesMenuItems}
-            />
-        );
-    }
-
     return (
         <ScrollView
             onScroll={onScroll}
@@ -266,10 +188,10 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
 
                     return (
                         <MenuItem
-                            key={item.title}
+                            key={item.translationPath}
                             disabled={false}
                             interactive
-                            title={item.title}
+                            title={translate(item.translationPath)}
                             icon={item.icon}
                             iconWidth={variables.iconSizeNormal}
                             iconHeight={variables.iconSizeNormal}
@@ -295,4 +217,5 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
 SearchTypeMenu.displayName = 'SearchTypeMenu';
 
 export default SearchTypeMenu;
-export type {SearchTypeMenuItem};
+export type {SearchTypeMenuItem, SavedSearchMenuItem, SaveSearchItem};
+export {createBaseSavedSearchMenuItem, createTypeMenuItems};
diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
deleted file mode 100644
index 5a5a79c3cbfc..000000000000
--- a/src/pages/Search/SearchTypeMenuNarrow.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Animated, View} from 'react-native';
-import type {TextStyle, ViewStyle} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
-import Icon from '@components/Icon';
-import type {MenuItemWithLink} from '@components/MenuItemList';
-import {usePersonalDetails} from '@components/OnyxProvider';
-import PopoverMenu from '@components/PopoverMenu';
-import type {PopoverMenuItem} from '@components/PopoverMenu';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import {useProductTrainingContext} from '@components/ProductTrainingContext';
-import type {SearchQueryJSON} from '@components/Search/types';
-import Text from '@components/Text';
-import ThreeDotsMenu from '@components/ThreeDotsMenu';
-import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
-import useDeleteSavedSearch from '@hooks/useDeleteSavedSearch';
-import useLocalize from '@hooks/useLocalize';
-import useSingleExecution from '@hooks/useSingleExecution';
-import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import {clearAllFilters, updateAdvancedFilters} from '@libs/actions/Search';
-import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
-import getPlatform from '@libs/getPlatform';
-import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
-import {getAllTaxRates} from '@libs/PolicyUtils';
-import {buildFilterFormValuesFromQuery} from '@libs/SearchQueryUtils';
-import {getOverflowMenu} from '@libs/SearchUIUtils';
-import variables from '@styles/variables';
-import * as Expensicons from '@src/components/Icon/Expensicons';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
-import type {SearchTypeMenuItem} from './SearchTypeMenu';
-
-type SavedSearchMenuItem = MenuItemWithLink & {
-    key: string;
-    hash: string;
-    query: string;
-    styles: Array<ViewStyle | TextStyle>;
-};
-
-type SearchTypeMenuNarrowProps = {
-    typeMenuItems: SearchTypeMenuItem[];
-    activeItemIndex: number;
-    queryJSON: SearchQueryJSON;
-    title?: string;
-    savedSearchesMenuItems: SavedSearchMenuItem[];
-};
-
-function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, savedSearchesMenuItems}: SearchTypeMenuNarrowProps) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
-    const {singleExecution} = useSingleExecution();
-    const {windowHeight} = useWindowDimensions();
-    const {translate} = useLocalize();
-    const {hash, policyID} = queryJSON;
-    const {showDeleteModal, DeleteConfirmModal} = useDeleteSavedSearch();
-    const [currencyList = {}] = useOnyx(ONYXKEYS.CURRENCY_LIST);
-    const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
-    const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
-    const personalDetails = usePersonalDetails();
-    const [reports = {}] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
-    const taxRates = getAllTaxRates();
-    const [userCardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
-    const [workspaceCardFeeds = {}] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
-    const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds, userCardList), [userCardList, workspaceCardFeeds]);
-    const {unmodifiedPaddings} = useStyledSafeAreaInsets();
-
-    const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-    const buttonRef = useRef<HTMLDivElement>(null);
-
-    const platform = getPlatform();
-    const isWebOrDesktop = platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP;
-
-    const openMenu = useCallback(() => setIsPopoverVisible(true), []);
-    const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
-
-    const [isScreenFocused, setIsScreenFocused] = useState(false);
-
-    useEffect(() => {
-        const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => {
-            if (Navigation.getRouteNameFromStateEvent(event) === SCREENS.SEARCH.CENTRAL_PANE) {
-                setIsScreenFocused(true);
-                return;
-            }
-            setIsScreenFocused(false);
-        };
-        navigationRef.addListener('state', listener);
-        return () => navigationRef.removeListener('state', listener);
-    }, []);
-
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
-        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
-        isScreenFocused,
-    );
-
-    const onPress = () => {
-        hideProductTrainingTooltip();
-        const values = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
-        updateAdvancedFilters(values);
-        Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
-    };
-
-    const currentSavedSearch = savedSearchesMenuItems.find((item) => Number(item.hash) === hash);
-
-    const popoverMenuItems = useMemo(() => {
-        const items = typeMenuItems.map((item, index) => {
-            const isSelected = title ? false : index === activeItemIndex;
-
-            return {
-                text: item.title,
-                onSelected: singleExecution(() => {
-                    clearAllFilters();
-                    Navigation.navigate(item.getRoute(policyID));
-                }),
-                isSelected,
-                icon: item.icon,
-                iconFill: isSelected ? theme.iconSuccessFill : theme.icon,
-                iconRight: Expensicons.Checkmark,
-                shouldShowRightIcon: isSelected,
-                success: isSelected,
-                containerStyle: isSelected ? [{backgroundColor: theme.border}] : undefined,
-                shouldCallAfterModalHide: true,
-            };
-        });
-
-        if (title && !currentSavedSearch) {
-            items.push({
-                text: title,
-                onSelected: closeMenu,
-                isSelected: !currentSavedSearch,
-                icon: Expensicons.Filters,
-                iconFill: theme.iconSuccessFill,
-                success: true,
-                containerStyle: undefined,
-                iconRight: Expensicons.Checkmark,
-                shouldShowRightIcon: false,
-                shouldCallAfterModalHide: true,
-            });
-        }
-
-        return items;
-    }, [typeMenuItems, title, activeItemIndex, singleExecution, theme, policyID, closeMenu, currentSavedSearch]);
-
-    const {menuIcon, menuTitle} = useMemo(() => {
-        if (title) {
-            return {
-                menuIcon: Expensicons.Filters,
-                menuTitle: title,
-            };
-        }
-
-        const item = activeItemIndex !== -1 ? popoverMenuItems.at(activeItemIndex) : undefined;
-        return {
-            menuIcon: item?.icon ?? Expensicons.Receipt,
-            menuTitle: item?.text,
-        };
-    }, [activeItemIndex, popoverMenuItems, title]);
-
-    const titleViewStyles = useMemo(() => (title ? {...styles.flex1, ...styles.justifyContentCenter} : {}), [title, styles]);
-
-    const savedSearchItems = savedSearchesMenuItems.map((item) => ({
-        text: item.title ?? '',
-        styles: [styles.textSupporting],
-        onSelected: item.onPress,
-        icon: Expensicons.Bookmark,
-        iconFill: currentSavedSearch?.hash === item.hash ? theme.iconSuccessFill : theme.icon,
-        shouldShowRightComponent: true,
-        rightComponent: (
-            <ThreeDotsMenu
-                menuItems={getOverflowMenu(item.title ?? '', Number(item.hash ?? ''), item.query ?? '', showDeleteModal, true, closeMenu)}
-                anchorPosition={{horizontal: 0, vertical: 380}}
-                anchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
-                }}
-                disabled={item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
-            />
-        ),
-        isSelected: currentSavedSearch?.hash === item.hash,
-        shouldCallAfterModalHide: true,
-        pendingAction: item.pendingAction,
-        disabled: item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
-    }));
-    const allMenuItems = [];
-    allMenuItems.push(...popoverMenuItems);
-
-    if (savedSearchesMenuItems.length > 0) {
-        allMenuItems.push({
-            text: translate('search.savedSearchesMenuItemTitle'),
-            styles: [styles.textSupporting],
-            disabled: true,
-        });
-        allMenuItems.push(...savedSearchItems);
-    }
-    return (
-        <View style={[styles.pb3, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.ph5, styles.gap2]}>
-            <PressableWithFeedback
-                accessible
-                accessibilityLabel={activeItemIndex !== -1 ? popoverMenuItems.at(activeItemIndex)?.text ?? '' : ''}
-                ref={buttonRef}
-                wrapperStyle={styles.flex1}
-                onPress={openMenu}
-            >
-                {({hovered}) => (
-                    <Animated.View style={[styles.tabSelectorButton, styles.tabBackground(hovered, true, theme.border), styles.w100, StyleUtils.getHeight(variables.componentSizeNormal)]}>
-                        <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, titleViewStyles]}>
-                            <Icon
-                                src={menuIcon}
-                                fill={theme.icon}
-                                small
-                            />
-                            <Text
-                                numberOfLines={1}
-                                style={[styles.textStrong, styles.flexShrink1, styles.textLineHeightNormal, styles.fontSizeLabel]}
-                            >
-                                {menuTitle}
-                            </Text>
-                            <Icon
-                                src={Expensicons.DownArrow}
-                                fill={theme.icon}
-                                small
-                            />
-                        </View>
-                    </Animated.View>
-                )}
-            </PressableWithFeedback>
-            <EducationalTooltip
-                shouldRender={shouldShowProductTrainingTooltip}
-                anchorAlignment={{
-                    horizontal: isWebOrDesktop ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
-                }}
-                shiftHorizontal={isWebOrDesktop ? 0 : variables.searchFiltersTooltipShiftHorizontalNarrow}
-                shiftVertical={variables.searchFiltersTooltipShiftVerticalNarrow}
-                wrapperStyle={styles.productTrainingTooltipWrapper}
-                renderTooltipContent={renderProductTrainingTooltip}
-            >
-                <Button
-                    icon={Expensicons.Filters}
-                    onPress={onPress}
-                />
-            </EducationalTooltip>
-            <PopoverMenu
-                menuItems={allMenuItems as PopoverMenuItem[]}
-                isVisible={isPopoverVisible}
-                anchorPosition={styles.createMenuPositionSidebar(windowHeight)}
-                onClose={closeMenu}
-                onItemSelected={closeMenu}
-                anchorRef={buttonRef}
-                shouldUseScrollView
-                shouldUseModalPaddingStyle={false}
-                innerContainerStyle={{paddingBottom: unmodifiedPaddings.bottom}}
-            />
-            <DeleteConfirmModal />
-        </View>
-    );
-}
-
-SearchTypeMenuNarrow.displayName = 'SearchTypeMenuNarrow';
-
-export default SearchTypeMenuNarrow;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index d01aef6469f4..86f067d62ffe 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3697,6 +3697,7 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 1,
             borderColor: theme.success,
             backgroundColor: theme.appBG,
+            zIndex: 11,
         },
 
         searchTableHeaderActive: {
@@ -3715,7 +3716,7 @@ const styles = (theme: ThemeColors) =>
             left: 0,
             right: 0,
             position: 'absolute',
-            zIndex: variables.searchTopBarZIndex,
+            zIndex: 11,
             backgroundColor: theme.appBG,
         },
 

From 88e75407f0e652efdcc74247d6d106c644528411 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Fri, 17 Jan 2025 10:31:43 +0100
Subject: [PATCH 05/16] delete SelectionModeHeader

---
 src/pages/Search/SearchPageBottomTab.tsx      | 16 ++++++++--
 .../Search/SearchSelectionModeHeader.tsx      | 32 -------------------
 2 files changed, 14 insertions(+), 34 deletions(-)
 delete mode 100644 src/pages/Search/SearchSelectionModeHeader.tsx

diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 79784f0cec5b..0cd4a366864f 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -3,8 +3,10 @@ import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Animated, {clamp, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
+import {useSearchContext} from '@components/Search/SearchContext';
 import SearchPageHeader from '@components/Search/SearchPageHeader/SearchPageHeader';
 import SearchStatusBar from '@components/Search/SearchPageHeader/SearchStatusBar';
 import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
@@ -13,6 +15,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as SearchQueryUtils from '@libs/SearchQueryUtils';
@@ -21,7 +24,6 @@ import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
-import SearchSelectionModeHeader from './SearchSelectionModeHeader';
 import SearchTypeMenu from './SearchTypeMenu';
 
 const TOO_CLOSE_TO_TOP_DISTANCE = 10;
@@ -37,6 +39,7 @@ function SearchPageBottomTab() {
     const StyleUtils = useStyleUtils();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
     const [narrowSearchRouterActive, setNarrowSearchRouterActive] = useState(false);
+    const {clearSelectedTransactions} = useSearchContext();
 
     const scrollOffset = useSharedValue(0);
     const topBarOffset = useSharedValue<number>(StyleUtils.searchHeaderHeight);
@@ -151,7 +154,16 @@ function SearchPageBottomTab() {
                         </View>
                     </View>
                 ) : (
-                    <SearchSelectionModeHeader queryJSON={queryJSON} />
+                    <>
+                        <HeaderWithBackButton
+                            title={translate('common.selectMultiple')}
+                            onBackButtonPress={() => {
+                                clearSelectedTransactions();
+                                turnOffMobileSelectionMode();
+                            }}
+                        />
+                        <SearchPageHeader queryJSON={queryJSON} />
+                    </>
                 )}
                 {!narrowSearchRouterActive && (
                     <Search
diff --git a/src/pages/Search/SearchSelectionModeHeader.tsx b/src/pages/Search/SearchSelectionModeHeader.tsx
deleted file mode 100644
index f86b878e2757..000000000000
--- a/src/pages/Search/SearchSelectionModeHeader.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import {useSearchContext} from '@components/Search/SearchContext';
-import SearchPageHeader from '@components/Search/SearchPageHeader/SearchPageHeader';
-import type {SearchQueryJSON} from '@components/Search/types';
-import useLocalize from '@hooks/useLocalize';
-import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
-
-type SearchSelectedModeHeaderProps = {
-    queryJSON: SearchQueryJSON | undefined;
-};
-
-function SearchSelectionModeHeader({queryJSON}: SearchSelectedModeHeaderProps) {
-    const {translate} = useLocalize();
-    const {clearSelectedTransactions} = useSearchContext();
-
-    return (
-        <>
-            <HeaderWithBackButton
-                title={translate('common.selectMultiple')}
-                onBackButtonPress={() => {
-                    clearSelectedTransactions();
-                    turnOffMobileSelectionMode();
-                }}
-            />
-
-            {!!queryJSON && <SearchPageHeader queryJSON={queryJSON} />}
-        </>
-    );
-}
-
-export default SearchSelectionModeHeader;

From 76170aab34ce793472a969b451eecd80647103f5 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Fri, 17 Jan 2025 13:32:13 +0100
Subject: [PATCH 06/16] fix focus bug

---
 .../SearchPageHeaderInput.tsx                 | 27 ++++++++++---------
 src/pages/Search/SearchPage.tsx               |  6 ++---
 src/pages/Search/SearchPageBottomTab.tsx      | 21 +++++++--------
 src/styles/index.ts                           | 13 +++++++--
 4 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index 25f5426bdda9..2fc96c971eb4 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -207,7 +207,10 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
                                     submitSearch(textInputValue);
                                 }}
                                 autoFocus={false}
-                                onFocus={activateNarrowSearchRouter}
+                                onFocus={() => {
+                                    listRef.current?.updateAndScrollToFocusedIndex(0);
+                                    activateNarrowSearchRouter?.();
+                                }}
                                 wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
                                 wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
                                 outerWrapperStyle={[]}
@@ -220,18 +223,16 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
                             <SearchTypeMenuButton queryJSON={queryJSON} />
                         </View>
                     </View>
-                    {!!narrowSearchRouterActive && (
-                        <View style={[styles.flex1]}>
-                            <SearchRouterList
-                                autocompleteQueryValue={autocompleteQueryValue}
-                                searchQueryItem={searchQueryItem}
-                                onListItemPress={onListItemPress}
-                                setTextQuery={setTextInputValue}
-                                updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
-                                ref={listRef}
-                            />
-                        </View>
-                    )}
+                    <View style={[styles.flex1, !narrowSearchRouterActive && styles.dNone]}>
+                        <SearchRouterList
+                            autocompleteQueryValue={autocompleteQueryValue}
+                            searchQueryItem={searchQueryItem}
+                            onListItemPress={onListItemPress}
+                            setTextQuery={setTextInputValue}
+                            updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
+                            ref={listRef}
+                        />
+                    </View>
                 </View>
             </View>
         );
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 54197b8e43be..8b415dfc87b7 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -9,7 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
-import * as SearchQueryUtils from '@libs/SearchQueryUtils';
+import {buildCannedSearchQuery, buildSearchQueryJSON} from '@libs/SearchQueryUtils';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
@@ -20,8 +20,8 @@ function SearchPage({route}: SearchPageProps) {
     const styles = useThemeStyles();
     const {q} = route.params;
 
-    const queryJSON = useMemo(() => SearchQueryUtils.buildSearchQueryJSON(q), [q]);
-    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()}));
+    const queryJSON = useMemo(() => buildSearchQueryJSON(q), [q]);
+    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: buildCannedSearchQuery()}));
 
     // On small screens this page is not displayed, the configuration is in the file: src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/index.tsx
     // To avoid calling hooks in the Search component when this page isn't visible, we return null here.
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 0cd4a366864f..45734e1a4138 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -18,7 +18,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
-import * as SearchQueryUtils from '@libs/SearchQueryUtils';
+import {buildCannedSearchQuery, buildSearchQueryJSON, getPolicyIDFromSearchQuery, isCannedSearchQuery} from '@libs/SearchQueryUtils';
 import TopBar from '@navigation/AppNavigator/createCustomBottomTabNavigator/TopBar';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -76,13 +76,13 @@ function SearchPageBottomTab() {
     );
 
     const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
-    const parsedQuery = SearchQueryUtils.buildSearchQueryJSON(searchParams?.q);
-    const policyIDFromSearchQuery = parsedQuery && SearchQueryUtils.getPolicyIDFromSearchQuery(parsedQuery);
+    const parsedQuery = buildSearchQueryJSON(searchParams?.q);
+    const policyIDFromSearchQuery = parsedQuery && getPolicyIDFromSearchQuery(parsedQuery);
     const isActiveCentralPaneRoute = activeCentralPaneRoute?.name === SCREENS.SEARCH.CENTRAL_PANE;
     const queryJSON = isActiveCentralPaneRoute ? parsedQuery : undefined;
     const policyID = isActiveCentralPaneRoute ? policyIDFromSearchQuery : undefined;
 
-    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()}));
+    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: buildCannedSearchQuery()}));
 
     if (!queryJSON) {
         return (
@@ -100,12 +100,7 @@ function SearchPageBottomTab() {
         );
     }
 
-    const shouldDisplayCancelSearch = shouldUseNarrowLayout && (!SearchQueryUtils.isCannedSearchQuery(queryJSON) || narrowSearchRouterActive);
-
-    const searchRouterActiveStyle = {
-        ...styles.flex1,
-        ...styles.pRelative,
-    };
+    const shouldDisplayCancelSearch = shouldUseNarrowLayout && (!isCannedSearchQuery(queryJSON) || narrowSearchRouterActive);
 
     if (shouldUseNarrowLayout) {
         return (
@@ -133,7 +128,11 @@ function SearchPageBottomTab() {
                         </View>
                         <View style={[styles.flex1]}>
                             <Animated.View
-                                style={[narrowSearchRouterActive ? searchRouterActiveStyle : topBarAnimatedStyle, !narrowSearchRouterActive && styles.searchTopBarStyle, {paddingTop: 1}]}
+                                style={[
+                                    narrowSearchRouterActive ? styles.narrowSearchRouterInactiveStyle : topBarAnimatedStyle,
+                                    !narrowSearchRouterActive && styles.narrowSearchRouterActiveStyle,
+                                    styles.narrowSearchHeaderStyle,
+                                ]}
                             >
                                 <SearchPageHeader
                                     queryJSON={queryJSON}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 6c3c7a4f0452..f1041d5bde7f 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3708,11 +3708,20 @@ const styles = (theme: ThemeColors) =>
             paddingTop: variables.searchListContentMarginTop,
         },
 
-        searchTopBarStyle: {
+        narrowSearchHeaderStyle: {
+            paddingTop: 1,
+        },
+
+        narrowSearchRouterInactiveStyle: {
+            position: 'relative',
+            flex: 1,
+        },
+
+        narrowSearchRouterActiveStyle: {
             left: 0,
             right: 0,
             position: 'absolute',
-            zIndex: 11,
+            zIndex: variables.searchTopBarZIndex,
             backgroundColor: theme.appBG,
         },
 

From a0bde742a1e2bc26361d7a9d7d0015815da73577 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Tue, 21 Jan 2025 11:41:57 +0100
Subject: [PATCH 07/16] fix focus bug

---
 .../SearchPageHeader/SearchPageHeaderInput.tsx     | 14 +++++++++++---
 .../Search/SearchRouter/SearchRouterInput.tsx      |  6 +-----
 src/pages/Search/SearchPageBottomTab.tsx           |  2 +-
 src/styles/index.ts                                |  1 -
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index 2fc96c971eb4..a3e877dc3046 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -69,6 +69,16 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
     const isFocused = useIsFocused();
     const {registerSearchPageInput} = useSearchRouterContext();
 
+    // useEffect for blurring TextInput when we cancel SearchRouter interaction on narrow layout
+    useEffect(() => {
+        if (!shouldUseNarrowLayout || !!narrowSearchRouterActive || !textInputRef.current || !textInputRef.current.isFocused()) {
+            return;
+        }
+        textInputRef.current.blur();
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [narrowSearchRouterActive]);
+
     useEffect(() => {
         if (shouldUseNarrowLayout || !isFocused || !textInputRef.current) {
             return;
@@ -79,6 +89,7 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
 
     useEffect(() => {
         setTextInputValue(isCannedQuery ? '' : queryText);
+        setAutocompleteQueryValue(isCannedQuery ? '' : queryText);
     }, [isCannedQuery, queryText]);
 
     useEffect(() => {
@@ -212,8 +223,6 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
                                     activateNarrowSearchRouter?.();
                                 }}
                                 wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
-                                wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
-                                outerWrapperStyle={[]}
                                 rightComponent={children}
                                 routerListRef={listRef}
                                 ref={textInputRef}
@@ -274,7 +283,6 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
                     onFocus={showAutocompleteList}
                     onBlur={hideAutocompleteList}
                     wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
-                    wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
                     outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
                     rightComponent={children}
                     routerListRef={listRef}
diff --git a/src/components/Search/SearchRouter/SearchRouterInput.tsx b/src/components/Search/SearchRouter/SearchRouterInput.tsx
index 3eae84d1e401..f8d5a9af958d 100644
--- a/src/components/Search/SearchRouter/SearchRouterInput.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterInput.tsx
@@ -45,9 +45,6 @@ type SearchRouterInputProps = {
     /** Any additional styles to apply */
     wrapperStyle?: StyleProp<ViewStyle>;
 
-    /** Any additional styles to apply when input is focused */
-    wrapperFocusedStyle?: StyleProp<ViewStyle>;
-
     /** Any additional styles to apply to text input along with FormHelperMessage */
     outerWrapperStyle?: StyleProp<ViewStyle>;
 
@@ -72,7 +69,6 @@ function SearchRouterInput(
         onBlur,
         caretHidden = false,
         wrapperStyle,
-        wrapperFocusedStyle,
         outerWrapperStyle,
         rightComponent,
         isSearchingForReports,
@@ -89,7 +85,7 @@ function SearchRouterInput(
 
     return (
         <View style={[outerWrapperStyle]}>
-            <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && wrapperFocusedStyle]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && styles.searchRouterInputResultsFocused]}>
                 <View style={styles.flex1}>
                     <TextInput
                         testID="search-router-text-input"
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 45734e1a4138..5c36be5191de 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -121,7 +121,6 @@ function SearchPageBottomTab() {
                                 shouldDisplayCancelSearch={shouldDisplayCancelSearch}
                                 narrowSearchRouterActive={narrowSearchRouterActive}
                                 deactivateNarrowSearchRouter={() => {
-                                    topBarOffset.set(StyleUtils.searchHeaderHeight);
                                     setNarrowSearchRouterActive(false);
                                 }}
                             />
@@ -138,6 +137,7 @@ function SearchPageBottomTab() {
                                     queryJSON={queryJSON}
                                     narrowSearchRouterActive={narrowSearchRouterActive}
                                     activateNarrowSearchRouter={() => {
+                                        topBarOffset.set(StyleUtils.searchHeaderHeight);
                                         setNarrowSearchRouterActive(true);
                                     }}
                                 />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index f1041d5bde7f..ea9fdc68eb4a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3693,7 +3693,6 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 1,
             borderColor: theme.success,
             backgroundColor: theme.appBG,
-            zIndex: 11,
         },
 
         searchTableHeaderActive: {

From 1ea000af9a99ca3b0f040f8b88604488874a4878 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Tue, 21 Jan 2025 14:12:55 +0100
Subject: [PATCH 08/16] fix PR comments

---
 .../SearchPageHeader/SearchPageHeader.tsx     |  8 ++--
 .../SearchPageHeaderInput.tsx                 | 34 +++++++++-------
 ...nuButton.tsx => SearchTypeMenuPopover.tsx} | 36 +++++++++--------
 .../Search/SearchRouter/SearchRouterInput.tsx |  6 ++-
 .../createCustomBottomTabNavigator/TopBar.tsx | 29 ++++----------
 src/libs/SearchUIUtils.ts                     | 24 +++++++++--
 src/pages/Search/SearchPageBottomTab.tsx      | 40 +++++++++----------
 src/pages/Search/SearchTypeMenu.tsx           | 25 ++----------
 8 files changed, 97 insertions(+), 105 deletions(-)
 rename src/components/Search/SearchPageHeader/{SearchTypeMenuButton.tsx => SearchTypeMenuPopover.tsx} (91%)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
index fa9c19c0ec74..e76416c7321e 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
@@ -38,11 +38,11 @@ import ROUTES from '@src/ROUTES';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import SearchPageHeaderInput from './SearchPageHeaderInput';
 
-type SearchPageHeaderProps = {queryJSON: SearchQueryJSON; narrowSearchRouterActive?: boolean; activateNarrowSearchRouter?: () => void};
+type SearchPageHeaderProps = {queryJSON: SearchQueryJSON; searchRouterListVisible?: boolean; onSearchRouterFocus?: () => void};
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-function SearchPageHeader({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFocus}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -354,8 +354,8 @@ function SearchPageHeader({queryJSON, narrowSearchRouterActive, activateNarrowSe
     return (
         <>
             <SearchPageHeaderInput
-                narrowSearchRouterActive={narrowSearchRouterActive}
-                activateNarrowSearchRouter={activateNarrowSearchRouter}
+                searchRouterListVisible={searchRouterListVisible}
+                onSearchRouterFocus={onSearchRouterFocus}
                 queryJSON={queryJSON}
             >
                 {headerButtonsOptions.length > 0 ? (
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index a3e877dc3046..9fa97909587b 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -31,21 +31,23 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SearchTypeMenuButton from './SearchTypeMenuButton';
+import SearchTypeMenuPopover from './SearchTypeMenuPopover';
 
 // When counting absolute positioning, we need to account for borders
 const BORDER_WIDTH = 1;
 
+const ANIMATION_DURATION = 300;
+
 type SearchPageHeaderInputProps = {
     queryJSON: SearchQueryJSON;
-    narrowSearchRouterActive?: boolean;
-    activateNarrowSearchRouter?: () => void;
+    searchRouterListVisible?: boolean;
+    onSearchRouterFocus?: () => void;
     children: React.ReactNode;
 };
 
-function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNarrowSearchRouter, children}: SearchPageHeaderInputProps) {
+function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRouterFocus, children}: SearchPageHeaderInputProps) {
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {shouldUseNarrowLayout: displayNarrowHeader} = useResponsiveLayout();
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const taxRates = useMemo(() => getAllTaxRates(), []);
@@ -71,21 +73,21 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
 
     // useEffect for blurring TextInput when we cancel SearchRouter interaction on narrow layout
     useEffect(() => {
-        if (!shouldUseNarrowLayout || !!narrowSearchRouterActive || !textInputRef.current || !textInputRef.current.isFocused()) {
+        if (!displayNarrowHeader || !!searchRouterListVisible || !textInputRef.current || !textInputRef.current.isFocused()) {
             return;
         }
         textInputRef.current.blur();
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [narrowSearchRouterActive]);
+    }, [searchRouterListVisible]);
 
     useEffect(() => {
-        if (shouldUseNarrowLayout || !isFocused || !textInputRef.current) {
+        if (displayNarrowHeader || !isFocused || !textInputRef.current) {
             return;
         }
 
         registerSearchPageInput(textInputRef.current);
-    }, [isCannedQuery, isFocused, registerSearchPageInput, shouldUseNarrowLayout]);
+    }, [isCannedQuery, isFocused, registerSearchPageInput, displayNarrowHeader]);
 
     useEffect(() => {
         setTextInputValue(isCannedQuery ? '' : queryText);
@@ -188,15 +190,15 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
 
     const inputRowWidth = useSharedValue(0);
     const animatedPadding = useDerivedValue(() => {
-        return withTiming(narrowSearchRouterActive ? 0 : 52, {duration: 300});
-    }, [narrowSearchRouterActive]);
+        return withTiming(searchRouterListVisible ? 0 : 52, {duration: ANIMATION_DURATION});
+    }, [searchRouterListVisible]);
     const inputWrapperStyleTest = useAnimatedStyle(() => {
         return {
             marginRight: animatedPadding.value,
         };
     });
 
-    if (shouldUseNarrowLayout) {
+    if (displayNarrowHeader) {
         return (
             <View
                 dataSet={{dragArea: false}}
@@ -220,19 +222,20 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
                                 autoFocus={false}
                                 onFocus={() => {
                                     listRef.current?.updateAndScrollToFocusedIndex(0);
-                                    activateNarrowSearchRouter?.();
+                                    onSearchRouterFocus?.();
                                 }}
                                 wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
+                                wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
                                 rightComponent={children}
                                 routerListRef={listRef}
                                 ref={textInputRef}
                             />
                         </Animated.View>
                         <View style={[styles.pAbsolute, {right: 0}]}>
-                            <SearchTypeMenuButton queryJSON={queryJSON} />
+                            <SearchTypeMenuPopover queryJSON={queryJSON} />
                         </View>
                     </View>
-                    <View style={[styles.flex1, !narrowSearchRouterActive && styles.dNone]}>
+                    <View style={[styles.flex1, !searchRouterListVisible && styles.dNone]}>
                         <SearchRouterList
                             autocompleteQueryValue={autocompleteQueryValue}
                             searchQueryItem={searchQueryItem}
@@ -283,6 +286,7 @@ function SearchPageHeaderInput({queryJSON, narrowSearchRouterActive, activateNar
                     onFocus={showAutocompleteList}
                     onBlur={hideAutocompleteList}
                     wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
+                    wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
                     outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
                     rightComponent={children}
                     routerListRef={listRef}
diff --git a/src/components/Search/SearchPageHeader/SearchTypeMenuButton.tsx b/src/components/Search/SearchPageHeader/SearchTypeMenuPopover.tsx
similarity index 91%
rename from src/components/Search/SearchPageHeader/SearchTypeMenuButton.tsx
rename to src/components/Search/SearchPageHeader/SearchTypeMenuPopover.tsx
index 41a6ce962b6d..1bf94779037c 100644
--- a/src/components/Search/SearchPageHeader/SearchTypeMenuButton.tsx
+++ b/src/components/Search/SearchPageHeader/SearchTypeMenuPopover.tsx
@@ -1,5 +1,4 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react';
-import {View} from 'react-native';
 import type {TextStyle, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -41,7 +40,7 @@ type SearchTypeMenuNarrowProps = {
     queryJSON: SearchQueryJSON;
 };
 
-function SearchTypeMenuButton({queryJSON}: SearchTypeMenuNarrowProps) {
+function SearchTypeMenuPopover({queryJSON}: SearchTypeMenuNarrowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {singleExecution} = useSingleExecution();
@@ -66,7 +65,7 @@ function SearchTypeMenuButton({queryJSON}: SearchTypeMenuNarrowProps) {
     }, []);
     const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
 
-    const typeMenuItems = createTypeMenuItems(allPolicies, session?.email);
+    const typeMenuItems = useMemo(() => createTypeMenuItems(allPolicies, session?.email), [allPolicies, session?.email]);
     const activeCentralPaneRoute = useActiveCentralPaneRoute();
     const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
     const isSearchNameModified = searchParams?.name === searchParams?.q;
@@ -160,20 +159,23 @@ function SearchTypeMenuButton({queryJSON}: SearchTypeMenuNarrowProps) {
         return items;
     }, [typeMenuItems, title, currentSavedSearch, activeItemIndex, translate, singleExecution, theme.iconSuccessFill, theme.icon, theme.border, policyID, closeMenu]);
 
-    const allMenuItems = [];
-    allMenuItems.push(...popoverMenuItems);
+    const allMenuItems = useMemo(() => {
+        const items = [];
+        items.push(...popoverMenuItems);
 
-    if (savedSearchItems.length > 0) {
-        allMenuItems.push({
-            text: translate('search.savedSearchesMenuItemTitle'),
-            styles: [styles.textSupporting],
-            disabled: true,
-        });
-        allMenuItems.push(...savedSearchItems);
-    }
+        if (savedSearchItems.length > 0) {
+            items.push({
+                text: translate('search.savedSearchesMenuItemTitle'),
+                styles: [styles.textSupporting],
+                disabled: true,
+            });
+            items.push(...savedSearchItems);
+        }
+        return items;
+    }, [popoverMenuItems, savedSearchItems, styles.textSupporting, translate]);
 
     return (
-        <View>
+        <>
             <Button
                 innerStyles={[styles.searchRouterInputResults, styles.borderNone]}
                 icon={Expensicons.Bookmark}
@@ -191,10 +193,10 @@ function SearchTypeMenuButton({queryJSON}: SearchTypeMenuNarrowProps) {
                 innerContainerStyle={{paddingBottom: unmodifiedPaddings.bottom}}
             />
             <DeleteConfirmModal />
-        </View>
+        </>
     );
 }
 
-SearchTypeMenuButton.displayName = 'SearchTypeMenuNarrow';
+SearchTypeMenuPopover.displayName = 'SearchTypeMenuPopover';
 
-export default SearchTypeMenuButton;
+export default SearchTypeMenuPopover;
diff --git a/src/components/Search/SearchRouter/SearchRouterInput.tsx b/src/components/Search/SearchRouter/SearchRouterInput.tsx
index f8d5a9af958d..3eae84d1e401 100644
--- a/src/components/Search/SearchRouter/SearchRouterInput.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterInput.tsx
@@ -45,6 +45,9 @@ type SearchRouterInputProps = {
     /** Any additional styles to apply */
     wrapperStyle?: StyleProp<ViewStyle>;
 
+    /** Any additional styles to apply when input is focused */
+    wrapperFocusedStyle?: StyleProp<ViewStyle>;
+
     /** Any additional styles to apply to text input along with FormHelperMessage */
     outerWrapperStyle?: StyleProp<ViewStyle>;
 
@@ -69,6 +72,7 @@ function SearchRouterInput(
         onBlur,
         caretHidden = false,
         wrapperStyle,
+        wrapperFocusedStyle,
         outerWrapperStyle,
         rightComponent,
         isSearchingForReports,
@@ -85,7 +89,7 @@ function SearchRouterInput(
 
     return (
         <View style={[outerWrapperStyle]}>
-            <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && styles.searchRouterInputResultsFocused]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && wrapperFocusedStyle]}>
                 <View style={styles.flex1}>
                     <TextInput
                         testID="search-router-text-input"
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
index 8c3fd0256919..749703c74802 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
@@ -9,36 +9,25 @@ import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton';
 import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Navigation from '@libs/Navigation/Navigation';
-import * as SearchQueryUtils from '@libs/SearchQueryUtils';
 import SignInButton from '@pages/home/sidebar/SignInButton';
-import * as Session from '@userActions/Session';
+import {isAnonymousUser as isAnonymousUserUtil} from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 
 type TopBarProps = {
     breadcrumbLabel: string;
     activeWorkspaceID?: string;
     shouldDisplaySearch?: boolean;
-    shouldDisplayCancelSearch?: boolean;
-    narrowSearchRouterActive?: boolean;
-    deactivateNarrowSearchRouter?: () => void;
+    shouldDisplayCancel?: boolean;
+    cancelSearch?: () => void;
 };
 
-function TopBar({
-    breadcrumbLabel,
-    activeWorkspaceID,
-    shouldDisplaySearch = true,
-    shouldDisplayCancelSearch = false,
-    narrowSearchRouterActive = false,
-    deactivateNarrowSearchRouter,
-}: TopBarProps) {
+function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayCancel = false, cancelSearch}: TopBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policy = usePolicy(activeWorkspaceID);
     const [session] = useOnyx(ONYXKEYS.SESSION, {selector: (sessionValue) => sessionValue && {authTokenType: sessionValue.authTokenType}});
-    const isAnonymousUser = Session.isAnonymousUser(session);
+    const isAnonymousUser = isAnonymousUserUtil(session);
 
     const headerBreadcrumb = policy?.name
         ? {type: CONST.BREADCRUMB_TYPE.STRONG, text: policy.name}
@@ -70,16 +59,12 @@ function TopBar({
                     </View>
                 </View>
                 {displaySignIn && <SignInButton />}
-                {shouldDisplayCancelSearch && (
+                {shouldDisplayCancel && (
                     <PressableWithoutFeedback
                         accessibilityLabel={translate('common.cancel')}
                         style={[styles.textBlue]}
                         onPress={() => {
-                            if (narrowSearchRouterActive) {
-                                deactivateNarrowSearchRouter?.();
-                                return;
-                            }
-                            Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()}));
+                            cancelSearch?.();
                         }}
                     >
                         <Text style={[styles.textBlue]}>{translate('common.cancel')}</Text>
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
index 84e56f730400..732d4ea97efb 100644
--- a/src/libs/SearchUIUtils.ts
+++ b/src/libs/SearchUIUtils.ts
@@ -1,19 +1,23 @@
+import type {TextStyle, ViewStyle} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import type {MenuItemWithLink} from '@components/MenuItemList';
 import type {SearchColumnType, SearchStatus, SortOrder} from '@components/Search/types';
 import ChatListItem from '@components/SelectionList/ChatListItem';
 import ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
 import type {ListItem, ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
-import type {SavedSearchMenuItem, SaveSearchItem, SearchTypeMenuItem} from '@pages/Search/SearchTypeMenu';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
 import type SearchResults from '@src/types/onyx/SearchResults';
 import type {ListItemDataType, ListItemType, SearchDataTypes, SearchPersonalDetails, SearchReport, SearchTransaction, SearchTransactionAction} from '@src/types/onyx/SearchResults';
+import type IconAsset from '@src/types/utils/IconAsset';
 import {canApproveIOU, canIOUBePaid, canSubmitReport} from './actions/IOU';
 import {clearAllFilters} from './actions/Search';
 import {convertToDisplayString} from './CurrencyUtils';
@@ -65,6 +69,20 @@ type ReportActionKey = `${typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS}${string}`;
 
 type ViolationKey = `${typeof ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${string}`;
 
+type SavedSearchMenuItem = MenuItemWithLink & {
+    key: string;
+    hash: string;
+    query: string;
+    styles?: Array<ViewStyle | TextStyle>;
+};
+
+type SearchTypeMenuItem = {
+    translationPath: TranslationPaths;
+    type: SearchDataTypes;
+    icon: IconAsset;
+    getRoute: (policyID?: string) => Route;
+};
+
 /**
  * @private
  *
@@ -674,7 +692,7 @@ function createTypeMenuItems(allPolicies: OnyxCollection<OnyxTypes.Policy> | nul
 }
 
 function createBaseSavedSearchMenuItem(item: SaveSearchItem, key: string, index: number, title: string, hash: number): SavedSearchMenuItem {
-    const baseMenuItem: SavedSearchMenuItem = {
+    return {
         key,
         title,
         hash: key,
@@ -689,7 +707,6 @@ function createBaseSavedSearchMenuItem(item: SaveSearchItem, key: string, index:
         disabled: item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
         shouldIconUseAutoWidthStyle: true,
     };
-    return baseMenuItem;
 }
 
 export {
@@ -710,3 +727,4 @@ export {
     createTypeMenuItems,
     createBaseSavedSearchMenuItem,
 };
+export type {SavedSearchMenuItem, SearchTypeMenuItem};
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 5c36be5191de..b7a69d7dfc19 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -38,7 +38,7 @@ function SearchPageBottomTab() {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
-    const [narrowSearchRouterActive, setNarrowSearchRouterActive] = useState(false);
+    const [searchRouterListVisible, setSearchRouterListVisible] = useState(false);
     const {clearSelectedTransactions} = useSearchContext();
 
     const scrollOffset = useSharedValue(0);
@@ -100,7 +100,7 @@ function SearchPageBottomTab() {
         );
     }
 
-    const shouldDisplayCancelSearch = shouldUseNarrowLayout && (!isCannedSearchQuery(queryJSON) || narrowSearchRouterActive);
+    const shouldDisplayCancelSearch = shouldUseNarrowLayout && (!isCannedSearchQuery(queryJSON) || searchRouterListVisible);
 
     if (shouldUseNarrowLayout) {
         return (
@@ -112,36 +112,39 @@ function SearchPageBottomTab() {
                 headerGapStyles={styles.searchHeaderGap}
             >
                 {!selectionMode?.isEnabled ? (
-                    <View style={[styles.zIndex10, narrowSearchRouterActive && styles.flex1, styles.mh100]}>
+                    <View style={[styles.zIndex10, searchRouterListVisible && styles.flex1, styles.mh100]}>
                         <View style={[styles.zIndex10, styles.appBG]}>
                             <TopBar
                                 activeWorkspaceID={policyID}
                                 breadcrumbLabel={translate('common.reports')}
                                 shouldDisplaySearch={false}
-                                shouldDisplayCancelSearch={shouldDisplayCancelSearch}
-                                narrowSearchRouterActive={narrowSearchRouterActive}
-                                deactivateNarrowSearchRouter={() => {
-                                    setNarrowSearchRouterActive(false);
+                                shouldDisplayCancel={shouldDisplayCancelSearch}
+                                cancelSearch={() => {
+                                    if (searchRouterListVisible) {
+                                        setSearchRouterListVisible(false);
+                                        return;
+                                    }
+                                    Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: buildCannedSearchQuery()}));
                                 }}
                             />
                         </View>
                         <View style={[styles.flex1]}>
                             <Animated.View
                                 style={[
-                                    narrowSearchRouterActive ? styles.narrowSearchRouterInactiveStyle : topBarAnimatedStyle,
-                                    !narrowSearchRouterActive && styles.narrowSearchRouterActiveStyle,
+                                    searchRouterListVisible ? styles.narrowSearchRouterInactiveStyle : topBarAnimatedStyle,
+                                    !searchRouterListVisible && styles.narrowSearchRouterActiveStyle,
                                     styles.narrowSearchHeaderStyle,
                                 ]}
                             >
                                 <SearchPageHeader
                                     queryJSON={queryJSON}
-                                    narrowSearchRouterActive={narrowSearchRouterActive}
-                                    activateNarrowSearchRouter={() => {
+                                    searchRouterListVisible={searchRouterListVisible}
+                                    onSearchRouterFocus={() => {
                                         topBarOffset.set(StyleUtils.searchHeaderHeight);
-                                        setNarrowSearchRouterActive(true);
+                                        setSearchRouterListVisible(true);
                                     }}
                                 />
-                                {!narrowSearchRouterActive && (
+                                {!searchRouterListVisible && (
                                     <SearchStatusBar
                                         queryJSON={queryJSON}
                                         onStatusChange={() => {
@@ -164,7 +167,7 @@ function SearchPageBottomTab() {
                         <SearchPageHeader queryJSON={queryJSON} />
                     </>
                 )}
-                {!narrowSearchRouterActive && (
+                {!searchRouterListVisible && (
                     <Search
                         isSearchScreenFocused={isActiveCentralPaneRoute}
                         queryJSON={queryJSON}
@@ -185,18 +188,13 @@ function SearchPageBottomTab() {
             offlineIndicatorStyle={styles.mtAuto}
             headerGapStyles={styles.searchHeaderGap}
         >
-            <View style={[styles.zIndex10, narrowSearchRouterActive && styles.flex1, styles.mh100]}>
+            <View style={[styles.zIndex10, searchRouterListVisible && styles.flex1, styles.mh100]}>
                 <View style={[styles.zIndex10, styles.appBG]}>
                     <TopBar
                         activeWorkspaceID={policyID}
                         breadcrumbLabel={translate('common.reports')}
                         shouldDisplaySearch={false}
-                        shouldDisplayCancelSearch={shouldDisplayCancelSearch}
-                        narrowSearchRouterActive={narrowSearchRouterActive}
-                        deactivateNarrowSearchRouter={() => {
-                            topBarOffset.set(StyleUtils.searchHeaderHeight);
-                            setNarrowSearchRouterActive(false);
-                        }}
+                        shouldDisplayCancel={shouldDisplayCancelSearch}
                     />
                 </View>
                 <SearchTypeMenu queryJSON={queryJSON} />
diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 67ee585146be..bbce08663df4 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -2,7 +2,7 @@ import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useContext, useLayoutEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
-import type {ScrollView as RNScrollView, ScrollViewProps, TextStyle, ViewStyle} from 'react-native';
+import type {ScrollView as RNScrollView, ScrollViewProps} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import MenuItem from '@components/MenuItem';
 import MenuItemList from '@components/MenuItemList';
@@ -24,35 +24,18 @@ import Navigation from '@libs/Navigation/Navigation';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import {buildSearchQueryJSON, buildUserReadableQueryString, isCannedSearchQuery} from '@libs/SearchQueryUtils';
 import {createBaseSavedSearchMenuItem, createTypeMenuItems, getOverflowMenu as getOverflowMenuUtil} from '@libs/SearchUIUtils';
+import type {SavedSearchMenuItem, SearchTypeMenuItem} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Route} from '@src/ROUTES';
 import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
-import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
-import type IconAsset from '@src/types/utils/IconAsset';
 import SavedSearchItemThreeDotMenu from './SavedSearchItemThreeDotMenu';
 
-type SavedSearchMenuItem = MenuItemWithLink & {
-    key: string;
-    hash: string;
-    query: string;
-    styles?: Array<ViewStyle | TextStyle>;
-};
-
 type SearchTypeMenuProps = {
     queryJSON: SearchQueryJSON;
 };
 
-type SearchTypeMenuItem = {
-    translationPath: TranslationPaths;
-    type: SearchDataTypes;
-    icon: IconAsset;
-    getRoute: (policyID?: string) => Route;
-};
-
 function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
     const {type, hash} = queryJSON;
     const styles = useThemeStyles();
@@ -75,7 +58,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds, userCardList), [userCardList, workspaceCardFeeds]);
     const taxRates = getAllTaxRates();
 
-    const typeMenuItems: SearchTypeMenuItem[] = createTypeMenuItems(allPolicies, session?.email);
+    const typeMenuItems: SearchTypeMenuItem[] = useMemo(() => createTypeMenuItems(allPolicies, session?.email), [allPolicies, session?.email]);
 
     const getOverflowMenu = useCallback((itemName: string, itemHash: number, itemQuery: string) => getOverflowMenuUtil(itemName, itemHash, itemQuery, showDeleteModal), [showDeleteModal]);
     const createSavedSearchMenuItem = useCallback(
@@ -217,5 +200,3 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
 SearchTypeMenu.displayName = 'SearchTypeMenu';
 
 export default SearchTypeMenu;
-export type {SearchTypeMenuItem, SavedSearchMenuItem, SaveSearchItem};
-export {createBaseSavedSearchMenuItem, createTypeMenuItems};

From 771e214f267d609f9b7aa872443b74cecc0d5315 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Thu, 23 Jan 2025 11:45:25 +0100
Subject: [PATCH 09/16] fix animation performance

---
 src/pages/Search/SearchPageBottomTab.tsx | 25 +++++++++++-------------
 src/styles/index.ts                      |  1 +
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index b7a69d7dfc19..3669f87c0d1b 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -43,9 +43,11 @@ function SearchPageBottomTab() {
 
     const scrollOffset = useSharedValue(0);
     const topBarOffset = useSharedValue<number>(StyleUtils.searchHeaderHeight);
-    const topBarAnimatedStyle = useAnimatedStyle(() => ({
-        top: topBarOffset.get(),
-    }));
+    const topBarAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{translateY: topBarOffset.get()}],
+        };
+    });
 
     const scrollHandler = useAnimatedScrollHandler({
         onScroll: (event) => {
@@ -53,9 +55,10 @@ function SearchPageBottomTab() {
             if (windowHeight > contentSize.height) {
                 return;
             }
+            const scrollOffsetValue = scrollOffset.get();
             const currentOffset = contentOffset.y;
-            const isScrollingDown = currentOffset > scrollOffset.get();
-            const distanceScrolled = currentOffset - scrollOffset.get();
+            const isScrollingDown = currentOffset > scrollOffsetValue;
+            const distanceScrolled = currentOffset - scrollOffsetValue;
             if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) {
                 topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderHeight));
             } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) {
@@ -129,13 +132,7 @@ function SearchPageBottomTab() {
                             />
                         </View>
                         <View style={[styles.flex1]}>
-                            <Animated.View
-                                style={[
-                                    searchRouterListVisible ? styles.narrowSearchRouterInactiveStyle : topBarAnimatedStyle,
-                                    !searchRouterListVisible && styles.narrowSearchRouterActiveStyle,
-                                    styles.narrowSearchHeaderStyle,
-                                ]}
-                            >
+                            <Animated.View style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterActiveStyle, styles.narrowSearchHeaderStyle]}>
                                 <SearchPageHeader
                                     queryJSON={queryJSON}
                                     searchRouterListVisible={searchRouterListVisible}
@@ -167,7 +164,7 @@ function SearchPageBottomTab() {
                         <SearchPageHeader queryJSON={queryJSON} />
                     </>
                 )}
-                {!searchRouterListVisible && (
+                <View style={[styles.flex1, searchRouterListVisible && styles.dNone]}>
                     <Search
                         isSearchScreenFocused={isActiveCentralPaneRoute}
                         queryJSON={queryJSON}
@@ -175,7 +172,7 @@ function SearchPageBottomTab() {
                         onContentSizeChange={onContentSizeChange}
                         contentContainerStyle={!selectionMode?.isEnabled ? [styles.searchListContentContainerStyles] : undefined}
                     />
-                )}
+                </View>
             </ScreenWrapper>
         );
     }
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ea9fdc68eb4a..de1a83c5eda0 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3709,6 +3709,7 @@ const styles = (theme: ThemeColors) =>
 
         narrowSearchHeaderStyle: {
             paddingTop: 1,
+            flex: 1,
         },
 
         narrowSearchRouterInactiveStyle: {

From ecb7cf7de1fcab93cc8114559c4d3244a43101ed Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Thu, 23 Jan 2025 15:41:17 +0100
Subject: [PATCH 10/16] rename SearchHeaderHeight

---
 src/pages/Search/SearchPageBottomTab.tsx           | 14 +++++++-------
 src/styles/index.ts                                |  4 ----
 src/styles/utils/index.ts                          |  4 ++--
 .../searchHeaderDefaultOffset/index.desktop.ts     |  4 ++++
 .../utils/searchHeaderDefaultOffset/index.ts       |  3 +++
 .../utils/searchHeaderHeight/index.desktop.ts      |  4 ----
 src/styles/utils/searchHeaderHeight/index.ts       |  3 ---
 src/styles/variables.ts                            |  2 +-
 8 files changed, 17 insertions(+), 21 deletions(-)
 create mode 100644 src/styles/utils/searchHeaderDefaultOffset/index.desktop.ts
 create mode 100644 src/styles/utils/searchHeaderDefaultOffset/index.ts
 delete mode 100644 src/styles/utils/searchHeaderHeight/index.desktop.ts
 delete mode 100644 src/styles/utils/searchHeaderHeight/index.ts

diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 3669f87c0d1b..3c16588276e5 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -42,7 +42,7 @@ function SearchPageBottomTab() {
     const {clearSelectedTransactions} = useSearchContext();
 
     const scrollOffset = useSharedValue(0);
-    const topBarOffset = useSharedValue<number>(StyleUtils.searchHeaderHeight);
+    const topBarOffset = useSharedValue<number>(StyleUtils.searchHeaderDefaultOffset);
     const topBarAnimatedStyle = useAnimatedStyle(() => {
         return {
             transform: [{translateY: topBarOffset.get()}],
@@ -60,9 +60,9 @@ function SearchPageBottomTab() {
             const isScrollingDown = currentOffset > scrollOffsetValue;
             const distanceScrolled = currentOffset - scrollOffsetValue;
             if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) {
-                topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderHeight));
+                topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderDefaultOffset));
             } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) {
-                topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
+                topBarOffset.set(withTiming(StyleUtils.searchHeaderDefaultOffset, {duration: ANIMATION_DURATION_IN_MS}));
             }
             scrollOffset.set(currentOffset);
         },
@@ -73,9 +73,9 @@ function SearchPageBottomTab() {
             if (windowHeight <= h) {
                 return;
             }
-            topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
+            topBarOffset.set(withTiming(StyleUtils.searchHeaderDefaultOffset, {duration: ANIMATION_DURATION_IN_MS}));
         },
-        [windowHeight, topBarOffset, StyleUtils.searchHeaderHeight],
+        [windowHeight, topBarOffset, StyleUtils.searchHeaderDefaultOffset],
     );
 
     const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
@@ -137,7 +137,7 @@ function SearchPageBottomTab() {
                                     queryJSON={queryJSON}
                                     searchRouterListVisible={searchRouterListVisible}
                                     onSearchRouterFocus={() => {
-                                        topBarOffset.set(StyleUtils.searchHeaderHeight);
+                                        topBarOffset.set(StyleUtils.searchHeaderDefaultOffset);
                                         setSearchRouterListVisible(true);
                                     }}
                                 />
@@ -145,7 +145,7 @@ function SearchPageBottomTab() {
                                     <SearchStatusBar
                                         queryJSON={queryJSON}
                                         onStatusChange={() => {
-                                            topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
+                                            topBarOffset.set(withTiming(StyleUtils.searchHeaderDefaultOffset, {duration: ANIMATION_DURATION_IN_MS}));
                                         }}
                                     />
                                 )}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 64d9726488a3..304c56682af2 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4366,10 +4366,6 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: hovered && !isFocused ? theme.highlightBG : background,
         }),
 
-        tabBackground: (hovered: boolean, isFocused: boolean, background: string) => ({
-            backgroundColor: hovered && !isFocused ? theme.highlightBG : background,
-        }),
-
         tabOpacity: (
             hovered: boolean,
             isFocused: boolean,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index bbfa1e5515be..4f23f458ac9c 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -29,7 +29,7 @@ import getSafeAreaInsets from './getSafeAreaInsets';
 import getSignInBgStyles from './getSignInBgStyles';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
-import searchHeaderHeight from './searchHeaderHeight';
+import searchHeaderDefaultOffset from './searchHeaderDefaultOffset';
 import type {
     AllStyles,
     AvatarSize,
@@ -1161,7 +1161,7 @@ function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, is
 
 const staticStyleUtils = {
     positioning,
-    searchHeaderHeight,
+    searchHeaderDefaultOffset,
     combineStyles,
     displayIfTrue,
     getAmountFontSizeAndLineHeight,
diff --git a/src/styles/utils/searchHeaderDefaultOffset/index.desktop.ts b/src/styles/utils/searchHeaderDefaultOffset/index.desktop.ts
new file mode 100644
index 000000000000..ecb227c7dc11
--- /dev/null
+++ b/src/styles/utils/searchHeaderDefaultOffset/index.desktop.ts
@@ -0,0 +1,4 @@
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+
+export default variables.searchHeaderDefaultOffset + CONST.DESKTOP_HEADER_PADDING;
diff --git a/src/styles/utils/searchHeaderDefaultOffset/index.ts b/src/styles/utils/searchHeaderDefaultOffset/index.ts
new file mode 100644
index 000000000000..47d99efcf289
--- /dev/null
+++ b/src/styles/utils/searchHeaderDefaultOffset/index.ts
@@ -0,0 +1,3 @@
+import variables from '@styles/variables';
+
+export default variables.searchHeaderDefaultOffset;
diff --git a/src/styles/utils/searchHeaderHeight/index.desktop.ts b/src/styles/utils/searchHeaderHeight/index.desktop.ts
deleted file mode 100644
index 0eb7963d7ad5..000000000000
--- a/src/styles/utils/searchHeaderHeight/index.desktop.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import variables from '@styles/variables';
-import CONST from '@src/CONST';
-
-export default variables.searchHeaderHeight + CONST.DESKTOP_HEADER_PADDING;
diff --git a/src/styles/utils/searchHeaderHeight/index.ts b/src/styles/utils/searchHeaderHeight/index.ts
deleted file mode 100644
index 19ff8287e012..000000000000
--- a/src/styles/utils/searchHeaderHeight/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import variables from '@styles/variables';
-
-export default variables.searchHeaderHeight;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index cac3a5a35cc3..781614b8fe73 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -275,7 +275,7 @@ export default {
     inlineImagePreviewMaxSize: 148,
 
     minimalTopBarOffset: -106,
-    searchHeaderHeight: 0,
+    searchHeaderDefaultOffset: 0,
     searchListContentMarginTop: 116,
     searchTopBarZIndex: 9,
 

From e9867ad07e1595e1e0894bf0198f50db57072a37 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Thu, 23 Jan 2025 15:41:32 +0100
Subject: [PATCH 11/16] add reanimated fix patch

---
 ...4+001+fix-transform-animation-gitter.patch | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 patches/react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch

diff --git a/patches/react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch b/patches/react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch
new file mode 100644
index 000000000000..59c09b3b9236
--- /dev/null
+++ b/patches/react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch
@@ -0,0 +1,21 @@
+diff --git a/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp b/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
+index 673ebd1..22970af 100644
+--- a/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
++++ b/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
+@@ -710,6 +710,15 @@ void NativeReanimatedModule::performOperations() {
+     jsPropsUpdater.call(rt, viewTag, nonAnimatableProps);
+   }
+ 
++  if (propsRegistry_->shouldReanimatedSkipCommit()) {
++    // It may happen that `performOperations` is called on the UI thread
++    // while React Native tries to commit a new tree on the JS thread.
++    // In this case, we should skip the commit here and let React Native do
++    // it. The commit will include the current values from PropsRegistry which
++    // will be applied in ReanimatedCommitHook.
++    return;
++  }
++  
+   bool hasLayoutUpdates = false;
+   for (const auto &[shadowNode, props] : copiedOperationsQueue) {
+     if (isThereAnyLayoutProp(rt, props->asObject(rt))) {
+      
\ No newline at end of file

From 5259ae9a72f0231d9042ba1dab69ed596a5190d0 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Thu, 23 Jan 2025 16:17:13 +0100
Subject: [PATCH 12/16] fix patch

---
 ...animated+3.16.4+004+fix-transform-animation-gitter.patch} | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)
 rename patches/{react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch => react-native-reanimated+3.16.4+004+fix-transform-animation-gitter.patch} (96%)

diff --git a/patches/react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch b/patches/react-native-reanimated+3.16.4+004+fix-transform-animation-gitter.patch
similarity index 96%
rename from patches/react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch
rename to patches/react-native-reanimated+3.16.4+004+fix-transform-animation-gitter.patch
index 59c09b3b9236..9e7657c2dda4 100644
--- a/patches/react-native-reanimated+3.16.4+001+fix-transform-animation-gitter.patch
+++ b/patches/react-native-reanimated+3.16.4+004+fix-transform-animation-gitter.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp b/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
-index 673ebd1..22970af 100644
+index 673ebd1..08d65fe 100644
 --- a/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
 +++ b/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
 @@ -710,6 +710,15 @@ void NativeReanimatedModule::performOperations() {
@@ -14,8 +14,7 @@ index 673ebd1..22970af 100644
 +    // will be applied in ReanimatedCommitHook.
 +    return;
 +  }
-+  
++
    bool hasLayoutUpdates = false;
    for (const auto &[shadowNode, props] : copiedOperationsQueue) {
      if (isThereAnyLayoutProp(rt, props->asObject(rt))) {
-      
\ No newline at end of file

From 3d946605156911718efd3db0df51b3bcb0a03b22 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Mon, 27 Jan 2025 10:57:02 +0100
Subject: [PATCH 13/16] make SearchPAgeHeaderinput only hide input value on
 default query

---
 .../SearchPageHeader/SearchPageHeader.tsx     | 94 +++++++++++--------
 .../SearchPageHeaderInput.tsx                 | 32 +++----
 src/libs/SearchQueryUtils.ts                  |  5 +
 src/styles/variables.ts                       |  1 +
 4 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
index d51228fe9b84..8072db12f1c6 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -302,6 +302,57 @@ function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFoc
         styles.textWrap,
     ]);
 
+    const onFiltersButtonPress = useCallback(() => {
+        hideProductTrainingTooltip();
+        const filterFormValues = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
+        updateAdvancedFilters(filterFormValues);
+
+        Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
+    }, [allCards, currencyList, hideProductTrainingTooltip, personalDetails, policyCategories, policyTagsLists, queryJSON, reports, taxRates]);
+
+    const InputRightComponent = useMemo(() => {
+        return headerButtonsOptions.length > 0 ? (
+            <ButtonWithDropdownMenu
+                onPress={() => null}
+                shouldAlwaysShowDropdownMenu
+                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                customText={translate('workspace.common.selected', {count: selectedTransactionsKeys.length})}
+                options={headerButtonsOptions}
+                isSplitButton={false}
+                shouldUseStyleUtilityForAnchorPosition
+            />
+        ) : (
+            <EducationalTooltip
+                shouldRender={shouldShowProductTrainingTooltip}
+                anchorAlignment={{
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                }}
+                shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
+                wrapperStyle={styles.productTrainingTooltipWrapper}
+                renderTooltipContent={renderProductTrainingTooltip}
+                onTooltipPress={onFiltersButtonPress}
+            >
+                <Button
+                    innerStyles={[styles.searchRouterInputResults, styles.borderNone, styles.bgTransparent]}
+                    icon={Expensicons.Filters}
+                    onPress={onFiltersButtonPress}
+                />
+            </EducationalTooltip>
+        );
+    }, [
+        headerButtonsOptions,
+        onFiltersButtonPress,
+        renderProductTrainingTooltip,
+        selectedTransactionsKeys.length,
+        shouldShowProductTrainingTooltip,
+        styles.bgTransparent,
+        styles.borderNone,
+        styles.productTrainingTooltipWrapper,
+        styles.searchRouterInputResults,
+        translate,
+    ]);
+
     if (shouldUseNarrowLayout && selectionMode?.isEnabled) {
         return (
             <View>
@@ -343,51 +394,14 @@ function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFoc
         );
     }
 
-    const onFiltersButtonPress = () => {
-        hideProductTrainingTooltip();
-        const filterFormValues = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
-        updateAdvancedFilters(filterFormValues);
-
-        Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
-    };
-
     return (
         <>
             <SearchPageHeaderInput
                 searchRouterListVisible={searchRouterListVisible}
                 onSearchRouterFocus={onSearchRouterFocus}
                 queryJSON={queryJSON}
-            >
-                {headerButtonsOptions.length > 0 ? (
-                    <ButtonWithDropdownMenu
-                        onPress={() => null}
-                        shouldAlwaysShowDropdownMenu
-                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
-                        customText={translate('workspace.common.selected', {count: selectedTransactionsKeys.length})}
-                        options={headerButtonsOptions}
-                        isSplitButton={false}
-                        shouldUseStyleUtilityForAnchorPosition
-                    />
-                ) : (
-                    <EducationalTooltip
-                        shouldRender={shouldShowProductTrainingTooltip}
-                        anchorAlignment={{
-                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                        }}
-                        shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
-                        wrapperStyle={styles.productTrainingTooltipWrapper}
-                        renderTooltipContent={renderProductTrainingTooltip}
-                        onTooltipPress={onFiltersButtonPress}
-                    >
-                        <Button
-                            innerStyles={[styles.searchRouterInputResults, styles.borderNone, styles.bgTransparent]}
-                            icon={Expensicons.Filters}
-                            onPress={onFiltersButtonPress}
-                        />
-                    </EducationalTooltip>
-                )}
-            </SearchPageHeaderInput>
+                inputRightComponent={InputRightComponent}
+            />
             <ConfirmModal
                 isVisible={isDeleteExpensesConfirmModalVisible}
                 onConfirm={handleDeleteExpenses}
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index 329b47eef9fc..fa96ab8533d8 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -26,7 +26,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import {getAutocompleteQueryWithComma, getQueryWithoutAutocompletedPart} from '@libs/SearchAutocompleteUtils';
-import {buildUserReadableQueryString, getQueryWithUpdatedValues, isCannedSearchQuery, sanitizeSearchValue} from '@libs/SearchQueryUtils';
+import {buildUserReadableQueryString, getQueryWithUpdatedValues, isDefaultExpensesQuery, sanitizeSearchValue} from '@libs/SearchQueryUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -42,10 +42,10 @@ type SearchPageHeaderInputProps = {
     queryJSON: SearchQueryJSON;
     searchRouterListVisible?: boolean;
     onSearchRouterFocus?: () => void;
-    children: React.ReactNode;
+    inputRightComponent: React.ReactNode;
 };
 
-function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRouterFocus, children}: SearchPageHeaderInputProps) {
+function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRouterFocus, inputRightComponent}: SearchPageHeaderInputProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout: displayNarrowHeader} = useResponsiveLayout();
     const personalDetails = usePersonalDetails();
@@ -56,13 +56,13 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRout
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds, userCardList), [userCardList, workspaceCardFeeds]);
 
     const {inputQuery: originalInputQuery} = queryJSON;
-    const isCannedQuery = isCannedSearchQuery(queryJSON);
+    const isDefaultQuery = isDefaultExpensesQuery(queryJSON);
     const queryText = buildUserReadableQueryString(queryJSON, personalDetails, reports, taxRates, allCards);
 
     // The actual input text that the user sees
-    const [textInputValue, setTextInputValue] = useState(isCannedQuery ? '' : queryText);
+    const [textInputValue, setTextInputValue] = useState(isDefaultQuery ? '' : queryText);
     // The input text that was last used for autocomplete; needed for the SearchRouterList when browsing list via arrow keys
-    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(isCannedQuery ? '' : queryText);
+    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(isDefaultQuery ? '' : queryText);
 
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
     const [isAutocompleteListVisible, setIsAutocompleteListVisible] = useState(false);
@@ -87,12 +87,12 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRout
         }
 
         registerSearchPageInput(textInputRef.current);
-    }, [isCannedQuery, isFocused, registerSearchPageInput, displayNarrowHeader]);
+    }, [isFocused, registerSearchPageInput, displayNarrowHeader]);
 
     useEffect(() => {
-        setTextInputValue(isCannedQuery ? '' : queryText);
-        setAutocompleteQueryValue(isCannedQuery ? '' : queryText);
-    }, [isCannedQuery, queryText]);
+        setTextInputValue(isDefaultQuery ? '' : queryText);
+        setAutocompleteQueryValue(isDefaultQuery ? '' : queryText);
+    }, [isDefaultQuery, queryText]);
 
     useEffect(() => {
         const substitutionsMap = buildSubstitutionsMap(originalInputQuery, personalDetails, reports, taxRates, allCards);
@@ -191,7 +191,6 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRout
           }
         : undefined;
 
-    const inputRowWidth = useSharedValue(0);
     const animatedPadding = useDerivedValue(() => {
         return withTiming(searchRouterListVisible ? 0 : 52, {duration: ANIMATION_DURATION});
     }, [searchRouterListVisible]);
@@ -208,12 +207,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRout
                 style={[styles.flex1]}
             >
                 <View style={[styles.appBG, styles.flex1]}>
-                    <View
-                        style={[styles.flexRow, styles.mh5, styles.mb3, styles.alignItemsCenter, styles.justifyContentCenter, {height: 52}]}
-                        onLayout={(event) => {
-                            inputRowWidth.set(event.nativeEvent.layout.width);
-                        }}
-                    >
+                    <View style={[styles.flexRow, styles.mh5, styles.mb3, styles.alignItemsCenter, styles.justifyContentCenter, {height: variables.searchTopBarHeight}]}>
                         <Animated.View style={[styles.flex1, styles.zIndex10, inputWrapperStyleTest]}>
                             <SearchRouterInput
                                 value={textInputValue}
@@ -229,7 +223,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRout
                                 }}
                                 wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
                                 wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
-                                rightComponent={children}
+                                rightComponent={inputRightComponent}
                                 routerListRef={listRef}
                                 ref={textInputRef}
                             />
@@ -295,7 +289,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRout
                     wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
                     wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
                     outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
-                    rightComponent={children}
+                    rightComponent={inputRightComponent}
                     routerListRef={listRef}
                     ref={textInputRef}
                 />
diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index 3bbc08a5a532..30865b3bb77b 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -657,6 +657,10 @@ function isCannedSearchQuery(queryJSON: SearchQueryJSON) {
     return !queryJSON.filters;
 }
 
+function isDefaultExpensesQuery(queryJSON: SearchQueryJSON) {
+    return queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE && queryJSON.status === CONST.SEARCH.STATUS.EXPENSE.ALL && !queryJSON.filters;
+}
+
 /**
  *  Given a search query, this function will standardize the query by replacing display values with their corresponding IDs.
  */
@@ -736,4 +740,5 @@ export {
     sanitizeSearchValue,
     getQueryWithUpdatedValues,
     getUserFriendlyKey,
+    isDefaultExpensesQuery,
 };
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 5fb828759c16..a0f725c6972c 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -278,6 +278,7 @@ export default {
     searchHeaderDefaultOffset: 0,
     searchListContentMarginTop: 116,
     searchTopBarZIndex: 9,
+    searchTopBarHeight: 52,
 
     h20: 20,
     h28: 28,

From 4f4c809795fbc6cb46f04d9d5b214b3dcb676a74 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Mon, 27 Jan 2025 11:28:49 +0100
Subject: [PATCH 14/16] fix eslint

---
 .../Search/SearchPageHeader/SearchPageHeaderInput.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index fa96ab8533d8..b79180665bf8 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {useAnimatedStyle, useDerivedValue, withTiming} from 'react-native-reanimated';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';

From 2cd6648e35b0089bc8f26cd7935accf8d2042a69 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Tue, 28 Jan 2025 15:32:29 +0100
Subject: [PATCH 15/16] fix PR bugs

---
 .../SearchPageHeaderInput.tsx                 |  2 +-
 .../Search/SearchRouter/SearchRouterInput.tsx |  3 +++
 .../TextInput/BaseTextInput/index.tsx         |  3 ++-
 src/pages/Search/SearchPageBottomTab.tsx      | 19 ++++++++-----------
 src/styles/utils/sizing.ts                    |  4 ++++
 src/styles/variables.ts                       |  2 +-
 6 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index b79180665bf8..8bd03bb6365d 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -293,7 +293,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, onSearchRout
                     routerListRef={listRef}
                     ref={textInputRef}
                 />
-                <View style={[styles.mh85vh, !isAutocompleteListVisible && styles.dNone]}>
+                <View style={[styles.mh65vh, !isAutocompleteListVisible && styles.dNone]}>
                     <SearchRouterList
                         autocompleteQueryValue={autocompleteQueryValue}
                         searchQueryItem={searchQueryItem}
diff --git a/src/components/Search/SearchRouter/SearchRouterInput.tsx b/src/components/Search/SearchRouter/SearchRouterInput.tsx
index 3eae84d1e401..a991e9ac2f7d 100644
--- a/src/components/Search/SearchRouter/SearchRouterInput.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterInput.tsx
@@ -8,6 +8,7 @@ import TextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import handleKeyPress from '@libs/SearchInputOnKeyPress';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
@@ -80,6 +81,7 @@ function SearchRouterInput(
     ref: ForwardedRef<BaseTextInputRef>,
 ) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const [isFocused, setIsFocused] = useState<boolean>(false);
     const {isOffline} = useNetwork();
@@ -125,6 +127,7 @@ function SearchRouterInput(
                         isLoading={!!isSearchingForReports}
                         ref={ref}
                         onKeyPress={handleKeyPress(onSubmit)}
+                        placeholderTextColor={theme.textSupporting}
                     />
                 </View>
                 {!!rightComponent && <View style={styles.pr3}>{rightComponent}</View>}
diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
index 7c16345f0709..4581338bb38e 100644
--- a/src/components/TextInput/BaseTextInput/index.tsx
+++ b/src/components/TextInput/BaseTextInput/index.tsx
@@ -75,6 +75,7 @@ function BaseTextInput(
         suffixStyle = [],
         contentWidth,
         loadingSpinnerStyle,
+        placeholderTextColor,
         ...inputProps
     }: BaseTextInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
@@ -347,7 +348,7 @@ function BaseTextInput(
                                 {...inputProps}
                                 autoCorrect={inputProps.secureTextEntry ? false : autoCorrect}
                                 placeholder={newPlaceholder}
-                                placeholderTextColor={theme.placeholderText}
+                                placeholderTextColor={placeholderTextColor ?? theme.placeholderText}
                                 underlineColorAndroid="transparent"
                                 style={[
                                     styles.flex1,
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 3c16588276e5..c4f4495a0987 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -181,21 +181,18 @@ function SearchPageBottomTab() {
         <ScreenWrapper
             testID={SearchPageBottomTab.displayName}
             style={styles.pv0}
-            shouldEnableMaxHeight
             offlineIndicatorStyle={styles.mtAuto}
             headerGapStyles={styles.searchHeaderGap}
         >
-            <View style={[styles.zIndex10, searchRouterListVisible && styles.flex1, styles.mh100]}>
-                <View style={[styles.zIndex10, styles.appBG]}>
-                    <TopBar
-                        activeWorkspaceID={policyID}
-                        breadcrumbLabel={translate('common.reports')}
-                        shouldDisplaySearch={false}
-                        shouldDisplayCancel={shouldDisplayCancelSearch}
-                    />
-                </View>
+            <>
+                <TopBar
+                    activeWorkspaceID={policyID}
+                    breadcrumbLabel={translate('common.reports')}
+                    shouldDisplaySearch={false}
+                    shouldDisplayCancel={shouldDisplayCancelSearch}
+                />
                 <SearchTypeMenu queryJSON={queryJSON} />
-            </View>
+            </>
         </ScreenWrapper>
     );
 }
diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts
index c43ed2cfe655..3e8c0b0c54a4 100644
--- a/src/styles/utils/sizing.ts
+++ b/src/styles/utils/sizing.ts
@@ -37,6 +37,10 @@ export default {
         maxHeight: '100%',
     },
 
+    mh65vh: {
+        maxHeight: '65vh',
+    },
+
     mh85vh: {
         maxHeight: '85vh',
     },
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index a0f725c6972c..87decfc5cc6a 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -263,7 +263,7 @@ export default {
     gbrTooltipShiftHorizontal: -15,
     fabTooltipShiftHorizontal: -11,
     workspaceLHNtooltipShiftHorizontal: 23,
-    searchFiltersTooltipShiftHorizontal: -25,
+    searchFiltersTooltipShiftHorizontal: -4,
     quickActionTooltipShiftHorizontal: 24,
     savedSearchShiftHorizontal: -10,
     savedSearchShiftVertical: 6,

From 6c656b66773fdba491d1979faf4971d03ee08c71 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Wed, 29 Jan 2025 10:16:29 +0100
Subject: [PATCH 16/16] fix tooltip bug

---
 src/pages/Search/SearchTypeMenu.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 079cbb6a3773..e8bdebc03111 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -82,7 +82,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                     />
                 ),
                 style: [styles.alignItemsCenter],
-                shouldRenderTooltip: index === 0 && shouldShowProductTrainingTooltip,
                 tooltipAnchorAlignment: {
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,