Merge pull request #54359 from gijoe0295/gijoe/53638

fix: Desktop - The search filter shifts to the window border on scroll

Author: pecanoro

src/pages/Search/SearchPageBottomTab.tsx

@@ -9,6 +9,7 @@ import SearchStatusBar from '@components/Search/SearchStatusBar';
 import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
@@ -32,10 +33,11 @@ function SearchPageBottomTab() {
     const {windowHeight} = useWindowDimensions();
     const activeCentralPaneRoute = useActiveCentralPaneRoute();
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
 
     const scrollOffset = useSharedValue(0);
-    const topBarOffset = useSharedValue<number>(variables.searchHeaderHeight);
+    const topBarOffset = useSharedValue<number>(StyleUtils.searchHeaderHeight);
     const topBarAnimatedStyle = useAnimatedStyle(() => ({
         top: topBarOffset.get(),
     }));
@@ -50,9 +52,9 @@ function SearchPageBottomTab() {
             const isScrollingDown = currentOffset > scrollOffset.get();
             const distanceScrolled = currentOffset - scrollOffset.get();
             if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) {
-                topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, variables.searchHeaderHeight));
+                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) {
-                topBarOffset.set(withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
+                topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
             }
             scrollOffset.set(currentOffset);
         },
@@ -63,9 +65,9 @@ function SearchPageBottomTab() {
             if (windowHeight <= h) {
                 return;
             }
-            topBarOffset.set(withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
+            topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
         },
-        [windowHeight, topBarOffset],
+        [windowHeight, topBarOffset, StyleUtils.searchHeaderHeight],
     );
 
     const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
@@ -102,6 +104,7 @@ function SearchPageBottomTab() {
             testID={SearchPageBottomTab.displayName}
             style={styles.pv0}
             offlineIndicatorStyle={styles.mtAuto}
+            headerGapStyles={styles.searchHeaderGap}
         >
             {!selectionMode?.isEnabled ? (
                 <>
@@ -122,7 +125,7 @@ function SearchPageBottomTab() {
                             <SearchStatusBar
                                 queryJSON={queryJSON}
                                 onStatusChange={() => {
-                                    topBarOffset.set(withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
+                                    topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}));
                                 }}
                             />
                         </Animated.View>

src/styles/index.ts

@@ -1076,6 +1076,11 @@ const styles = (theme: ThemeColors) =>
             height: CONST.DESKTOP_HEADER_PADDING,
         },
 
+        searchHeaderGap: {
+            zIndex: variables.searchTopBarZIndex + 1,
+            backgroundColor: theme.appBG,
+        },
+
         reportOptions: {
             marginLeft: 8,
         },
@@ -3710,7 +3715,7 @@ const styles = (theme: ThemeColors) =>
             left: 0,
             right: 0,
             position: 'absolute',
-            zIndex: 9,
+            zIndex: variables.searchTopBarZIndex,
             backgroundColor: theme.appBG,
         },
 

src/styles/utils/index.ts

@@ -29,6 +29,7 @@ import getSafeAreaInsets from './getSafeAreaInsets';
 import getSignInBgStyles from './getSignInBgStyles';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
+import searchHeaderHeight from './searchHeaderHeight';
 import type {
     AllStyles,
     AvatarSize,
@@ -290,7 +291,10 @@ function getBackgroundColorAndFill(backgroundColor: string, fill: string): SVGAv
  */
 function getEReceiptColorCode(transaction: OnyxEntry<Transaction>): EReceiptColorName {
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const transactionID = transaction?.parentTransactionID || transaction?.transactionID || '';
+    const transactionID = transaction?.parentTransactionID || transaction?.transactionID;
+    if (!transactionID) {
+        return CONST.ERECEIPT_COLORS.YELLOW;
+    }
 
     const colorHash = UserUtils.hashText(transactionID.trim(), eReceiptColors.length);
 
@@ -1166,6 +1170,7 @@ function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, is
 
 const staticStyleUtils = {
     positioning,
+    searchHeaderHeight,
     combineStyles,
     displayIfTrue,
     getAmountFontSizeAndLineHeight,

src/styles/utils/searchHeaderHeight/index.desktop.ts

@@ -0,0 +1,4 @@
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+
+export default variables.searchHeaderHeight + CONST.DESKTOP_HEADER_PADDING;

src/styles/utils/searchHeaderHeight/index.ts

@@ -0,0 +1,3 @@
+import variables from '@styles/variables';
+
+export default variables.searchHeaderHeight;

src/styles/variables.ts

@@ -265,6 +265,7 @@ export default {
     minimalTopBarOffset: -26,
     searchHeaderHeight: 80,
     searchListContentMarginTop: 116,
+    searchTopBarZIndex: 9,
 
     h20: 20,
     h28: 28,