Update the behavior of the yellow thread highlight after exiting a thread

src/components/ReportActionHighlightProvider.tsx

@@ -0,0 +1,44 @@
+import type {ReactNode} from 'react';
+import React, {createContext, useCallback, useMemo, useState} from 'react';
+
+type ReportActionHighlightContextType = {
+    linkedReportActionID: string | null;
+    setHighlight: (id: string) => void;
+    removeHighlight: () => void;
+};
+
+const ReportActionHighlightContext = createContext<ReportActionHighlightContextType>({
+    linkedReportActionID: null,
+    setHighlight: () => {},
+    removeHighlight: () => {},
+});
+
+type ReportActionHighlightProviderProps = {
+    children: ReactNode;
+};
+
+function ReportActionHighlightProvider({children}: ReportActionHighlightProviderProps) {
+    const [linkedReportActionID, setLinkedReportActionID] = useState<string | null>(null);
+
+    const setHighlight = useCallback((id: string) => {
+        setLinkedReportActionID(id);
+    }, []);
+
+    const removeHighlight = useCallback(() => {
+        setLinkedReportActionID(null);
+    }, []);
+
+    const value = useMemo(
+        () => ({
+            linkedReportActionID,
+            setHighlight,
+            removeHighlight,
+        }),
+        [linkedReportActionID, removeHighlight, setHighlight],
+    );
+
+    return <ReportActionHighlightContext.Provider value={value}>{children}</ReportActionHighlightContext.Provider>;
+}
+
+export default ReportActionHighlightProvider;
+export {ReportActionHighlightContext};

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -7,6 +7,7 @@ import type {ValueOf} from 'type-fest';
 import ActiveGuidesEventListener from '@components/ActiveGuidesEventListener';
 import ComposeProviders from '@components/ComposeProviders';
 import OptionsListContextProvider from '@components/OptionListContextProvider';
+import ReportActionHighlightProvider from '@components/ReportActionHighlightProvider';
 import {SearchContextProvider} from '@components/Search/SearchContext';
 import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
 import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
@@ -414,7 +415,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     };
 
     return (
-        <ComposeProviders components={[OptionsListContextProvider, SearchContextProvider]}>
+        <ComposeProviders components={[OptionsListContextProvider, SearchContextProvider, ReportActionHighlightProvider]}>
             <View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}>
                 <RootStack.Navigator screenOptions={rootNavigatorOptions.centralPaneNavigator}>
                     <RootStack.Screen

src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

@@ -1,6 +1,6 @@
 import lodashIsEqual from 'lodash/isEqual';
 import type {MutableRefObject, RefObject} from 'react';
-import React, {memo, useMemo, useRef, useState} from 'react';
+import React, {memo, useContext, useMemo, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, Text as RNText, View as ViewType} from 'react-native';
@@ -9,6 +9,7 @@ import {useOnyx} from 'react-native-onyx';
 import type {ContextMenuItemHandle} from '@components/ContextMenuItem';
 import ContextMenuItem from '@components/ContextMenuItem';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
+import {ReportActionHighlightContext} from '@components/ReportActionHighlightProvider';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useEnvironment from '@hooks/useEnvironment';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
@@ -187,6 +188,8 @@ function BaseReportActionContextMenu({
     const areHoldRequirementsMet =
         !isInvoiceReport && isMoneyRequestOrReport && !ReportUtils.isArchivedRoom(transactionThreadReportID ? childReport : parentReport, parentReportNameValuePairs);
 
+    const {removeHighlight} = useContext(ReportActionHighlightContext);
+
     const shouldEnableArrowNavigation = !isMini && (isVisible || shouldKeepOpen);
     let filteredContextMenuActions = ContextMenuActions.filter(
         (contextAction) =>
@@ -330,6 +333,7 @@ function BaseReportActionContextMenu({
                             setIsEmojiPickerActive,
                             moneyRequestAction,
                             hasCard: !!card,
+                            removeHighlight: isMini ? removeHighlight : () => {},
                         };
 
                         if ('renderContent' in contextAction) {

src/pages/home/report/ContextMenu/ContextMenuActions.tsx

@@ -90,6 +90,7 @@ type ContextMenuActionPayload = {
     anchorRef?: MutableRefObject<View | null>;
     moneyRequestAction: ReportAction | undefined;
     hasCard?: boolean;
+    removeHighlight?: () => void;
 };
 
 type OnPress = (closePopover: boolean, payload: ContextMenuActionPayload, selection?: string, reportID?: string, draftMessage?: string) => void;
@@ -185,7 +186,7 @@ const ContextMenuActions: ContextMenuAction[] = [
             }
             return !ReportUtils.shouldDisableThread(reportAction, reportID, isThreadReportParentAction);
         },
-        onPress: (closePopover, {reportAction, reportID}) => {
+        onPress: (closePopover, {reportAction, reportID, removeHighlight}) => {
             const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction);
             if (closePopover) {
                 hideContextMenu(false, () => {
@@ -198,6 +199,7 @@ const ContextMenuActions: ContextMenuAction[] = [
                 });
                 return;
             }
+            removeHighlight?.();
             Report.navigateToAndOpenChildReport(reportAction?.childReportID ?? '-1', reportAction, originalReportID);
         },
         getDescription: () => {},

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -1,7 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import lodashDebounce from 'lodash/debounce';
 import noop from 'lodash/noop';
-import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInputFocusEventData, TextInputSelectionChangeEventData} from 'react-native';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -19,6 +19,7 @@ import type {Mention} from '@components/MentionSuggestions';
 import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {usePersonalDetails} from '@components/OnyxProvider';
+import {ReportActionHighlightContext} from '@components/ReportActionHighlightProvider';
 import Text from '@components/Text';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -264,6 +265,8 @@ function ReportActionCompose({
         setIsAttachmentPreviewActive(false);
     }, [updateShouldShowSuggestionMenuToFalse]);
 
+    const {removeHighlight} = useContext(ReportActionHighlightContext);
+
     /**
      * Add a new comment to this chat
      */
@@ -280,15 +283,17 @@ function ReportActionCompose({
                 Performance.markStart(CONST.TIMING.SEND_MESSAGE, {message: newCommentTrimmed});
                 Timing.start(CONST.TIMING.SEND_MESSAGE);
                 onSubmit(newCommentTrimmed);
+                removeHighlight();
             }
         },
-        [onSubmit, reportID],
+        [onSubmit, reportID, removeHighlight],
     );
 
     const onTriggerAttachmentPicker = useCallback(() => {
+        removeHighlight();
         isNextModalWillOpenRef.current = true;
         isKeyboardVisibleWhenShowingModalRef.current = true;
-    }, []);
+    }, [removeHighlight]);
 
     const onBlur = useCallback(
         (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -354,6 +359,7 @@ function ReportActionCompose({
     const composerRefShared = useSharedValue<{
         clear: (() => void) | undefined;
     }>({clear: undefined});
+
     const handleSendMessage = useCallback(() => {
         'worklet';
 

src/pages/home/report/ReportActionItem.tsx

@@ -1,5 +1,5 @@
 import lodashIsEqual from 'lodash/isEqual';
-import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, TextInput} from 'react-native';
 import {InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -19,6 +19,7 @@ import {useBlockedFromConcierge, usePersonalDetails} from '@components/OnyxProvi
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import ReportActionItemEmojiReactions from '@components/Reactions/ReportActionItemEmojiReactions';
 import RenderHTML from '@components/RenderHTML';
+import {ReportActionHighlightContext} from '@components/ReportActionHighlightProvider';
 import type {ActionableItem} from '@components/ReportActionItem/ActionableItemButtons';
 import ActionableItemButtons from '@components/ReportActionItem/ActionableItemButtons';
 import ChronosOOOListActions from '@components/ReportActionItem/ChronosOOOListActions';
@@ -209,12 +210,13 @@ function ReportActionItem({
     const isActionableWhisper =
         ReportActionsUtils.isActionableMentionWhisper(action) || ReportActionsUtils.isActionableTrackExpense(action) || ReportActionsUtils.isActionableReportMentionWhisper(action);
     const originalMessage = ReportActionsUtils.getOriginalMessage(action);
-
-    const highlightedBackgroundColorIfNeeded = useMemo(
-        () => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.messageHighlightBG) : {}),
-        [StyleUtils, isReportActionLinked, theme.messageHighlightBG],
-    );
-
+    const {linkedReportActionID: contextlinkedReportActionID, setHighlight} = useContext(ReportActionHighlightContext);
+    useLayoutEffect(() => {
+        if (!isReportActionLinked) {
+            return;
+        }
+        setHighlight(linkedReportActionID);
+    }, [isReportActionLinked, linkedReportActionID, setHighlight]);
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(action);
     const isOriginalMessageAnObject = originalMessage && typeof originalMessage === 'object';
     const hasResolutionInOriginalMessage = isOriginalMessageAnObject && 'resolution' in originalMessage;
@@ -956,6 +958,8 @@ function ReportActionItem({
     const isWhisperOnlyVisibleByUser = isWhisper && ReportUtils.isCurrentUserTheOnlyParticipant(whisperedTo);
     const displayNamesWithTooltips = isWhisper ? ReportUtils.getDisplayNamesWithTooltips(whisperedToPersonalDetails, isMultipleParticipant) : [];
 
+    const highlightedBackgroundColorStyles =
+        isReportActionLinked && contextlinkedReportActionID === action.reportActionID ? StyleUtils.getBackgroundColorStyle(theme.messageHighlightBG) : {};
     return (
         <PressableWithSecondaryInteraction
             ref={popoverAnchorRef}
@@ -975,7 +979,7 @@ function ReportActionItem({
                 shouldFreezeCapture={isPaymentMethodPopoverActive}
             >
                 {(hovered) => (
-                    <View style={highlightedBackgroundColorIfNeeded}>
+                    <View style={highlightedBackgroundColorStyles}>
                         {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && <UnreadActionIndicator reportActionID={action.reportActionID} />}
                         {shouldDisplayContextMenu && (
                             <MiniReportActionContextMenu

src/pages/home/report/ReportActionsList.tsx

@@ -1,15 +1,16 @@
 import type {ListRenderItemInfo} from '@react-native/virtualized-lists/Lists/VirtualizedList';
-import {useIsFocused, useRoute} from '@react-navigation/native';
+import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
 // eslint-disable-next-line lodash/import-scope
 import type {DebouncedFunc} from 'lodash';
-import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {DeviceEventEmitter, InteractionManager, View} from 'react-native';
 import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import InvertedFlatList from '@components/InvertedFlatList';
 import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
 import {usePersonalDetails} from '@components/OnyxProvider';
+import {ReportActionHighlightContext} from '@components/ReportActionHighlightProvider';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetworkWithOfflineStatus from '@hooks/useNetworkWithOfflineStatus';
@@ -155,6 +156,7 @@ function ReportActionsList({
     const {translate} = useLocalize();
     const {windowHeight} = useWindowDimensions();
     const {isInNarrowPaneModal, shouldUseNarrowLayout} = useResponsiveLayout();
+    const navigation = useNavigation();
 
     const {preferredLocale} = useLocalize();
     const {isOffline, lastOfflineAt, lastOnlineAt} = useNetworkWithOfflineStatus();
@@ -360,6 +362,22 @@ function ReportActionsList({
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [lastAction?.created]);
 
+    const {removeHighlight, linkedReportActionID: ctxlinkedReportActionID} = useContext(ReportActionHighlightContext);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('blur', () => {
+            if (linkedReportActionID !== ctxlinkedReportActionID) {
+                return;
+            }
+            if (shouldUseNarrowLayout) {
+                navigation.setParams({reportActionID: ''});
+            }
+            removeHighlight();
+        });
+
+        return unsubscribe;
+    }, [linkedReportActionID, removeHighlight, report.reportID, navigation, ctxlinkedReportActionID, shouldUseNarrowLayout]);
+
     const lastActionIndex = lastAction?.reportActionID;
     const reportActionSize = useRef(sortedVisibleReportActions.length);
     const lastVisibleActionCreated =

src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

@@ -1,7 +1,7 @@
 import {useIsFocused as useIsFocusedOriginal, useNavigationState} from '@react-navigation/native';
 import type {ImageContentFit} from 'expo-image';
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
@@ -11,6 +11,7 @@ import FloatingActionButton from '@components/FloatingActionButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import PopoverMenu from '@components/PopoverMenu';
+import {ReportActionHighlightContext} from '@components/ReportActionHighlightProvider';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
@@ -182,6 +183,8 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
     const isValidReport = !(isEmptyObject(quickActionReport) || ReportUtils.isArchivedRoom(quickActionReport, reportNameValuePairs));
     const {environment} = useEnvironment();
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
+
+    const {removeHighlight} = useContext(ReportActionHighlightContext);
     const navatticURL = getNavatticURL(environment, introSelected?.choice);
     const [hasSeenTour = false] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {
         selector: hasSeenTourSelector,
@@ -428,7 +431,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
                     }),
             },
         ];
-    }, [canUseCombinedTrackSubmit, translate, selfDMReportID, hasSeenTrackTraining, isOffline, shouldRedirectToExpensifyClassic]);
+    }, [canUseCombinedTrackSubmit, selfDMReportID, translate, shouldRedirectToExpensifyClassic, hasSeenTrackTraining, isOffline]);
 
     const quickActionMenuItems = useMemo(() => {
         // Define common properties in baseQuickAction
@@ -559,6 +562,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
                                   text: translate('tour.takeATwoMinuteTour'),
                                   description: translate('tour.exploreExpensify'),
                                   onSelected: () => {
+                                      removeHighlight();
                                       Link.openExternalLink(navatticURL);
                                       Welcome.setSelfTourViewed(Session.isAnonymousUser());
                                       if (viewTourTaskReport) {

tests/perf-test/ReportActionsList.perf-test.tsx

@@ -54,6 +54,10 @@ jest.mock('@react-navigation/native', () => {
         ...actualNav,
         useRoute: () => mockedNavigate,
         useIsFocused: () => true,
+        useNavigation: () => ({
+            navigate: jest.fn(),
+            addListener: () => jest.fn(),
+        }),
     };
 });