From 8e1108a2bd3d692dddf7df71827c971a99276ea2 Mon Sep 17 00:00:00 2001
From: Jakub Korytko <jakub@korytko.me>
Date: Mon, 9 Jun 2025 08:59:24 +0200
Subject: [PATCH 1/2] Improve ParentNavigationSubtitle component

---
 src/components/ParentNavigationSubtitle.tsx | 112 +++++++++++---------
 1 file changed, 64 insertions(+), 48 deletions(-)

diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx
index 97919d2249e5..edfd131e33bf 100644
--- a/src/components/ParentNavigationSubtitle.tsx
+++ b/src/components/ParentNavigationSubtitle.tsx
@@ -1,9 +1,13 @@
 import {useRoute} from '@react-navigation/native';
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import useHover from '@hooks/useHover';
 import useLocalize from '@hooks/useLocalize';
 import useRootNavigationState from '@hooks/useRootNavigationState';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
 import Navigation from '@libs/Navigation/Navigation';
@@ -16,8 +20,8 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
+import TextLink from './TextLink';
 
 type ParentNavigationSubtitleProps = {
     parentNavigationSubtitleData: ParentNavigationSummaryParams;
@@ -44,6 +48,13 @@ function ParentNavigationSubtitle({
 }: ParentNavigationSubtitleProps) {
     const currentRoute = useRoute();
     const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+    const {
+        hovered,
+        bind: {onMouseEnter, onMouseLeave},
+    } = useHover();
+
     const {workspaceName, reportName} = parentNavigationSubtitleData;
     const {translate} = useLocalize();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`, {canBeMissing: false});
@@ -56,61 +67,66 @@ function ParentNavigationSubtitle({
         return;
     }
 
-    return (
-        <PressableWithoutFeedback
-            onPress={() => {
-                const parentAction = getReportAction(parentReportID, parentReportActionID);
-                const isVisibleAction = shouldReportActionBeVisible(parentAction, parentAction?.reportActionID ?? CONST.DEFAULT_NUMBER_ID, canUserPerformWriteAction);
-
-                if (openParentReportInCurrentTab && isReportInRHP) {
-                    // If the report is displayed in RHP in Reports tab, we want to stay in the current tab after opening the parent report
-                    if (currentFullScreenRoute?.name === NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR) {
-                        const lastRoute = currentFullScreenRoute?.state?.routes.at(-1);
-                        if (lastRoute?.name === SCREENS.SEARCH.MONEY_REQUEST_REPORT) {
-                            const moneyRequestReportID = (lastRoute?.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT])?.reportID;
-                            // If the parent report is already displayed underneath RHP, simply dismiss the modal
-                            if (moneyRequestReportID === parentReportID) {
-                                Navigation.dismissModal();
-                                return;
-                            }
-                        }
-
-                        Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: parentReportID}));
-                        return;
-                    }
+    const onPress = () => {
+        const parentAction = getReportAction(parentReportID, parentReportActionID);
+        const isVisibleAction = shouldReportActionBeVisible(parentAction, parentAction?.reportActionID ?? CONST.DEFAULT_NUMBER_ID, canUserPerformWriteAction);
 
+        if (openParentReportInCurrentTab && isReportInRHP) {
+            // If the report is displayed in RHP in Reports tab, we want to stay in the current tab after opening the parent report
+            if (currentFullScreenRoute?.name === NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR) {
+                const lastRoute = currentFullScreenRoute?.state?.routes.at(-1);
+                if (lastRoute?.name === SCREENS.SEARCH.MONEY_REQUEST_REPORT) {
+                    const moneyRequestReportID = (lastRoute?.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT])?.reportID;
                     // If the parent report is already displayed underneath RHP, simply dismiss the modal
-                    if (Navigation.getTopmostReportId() === parentReportID) {
+                    if (moneyRequestReportID === parentReportID) {
                         Navigation.dismissModal();
                         return;
                     }
                 }
 
-                if (isVisibleAction) {
-                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID, parentReportActionID));
-                } else {
-                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID));
-                }
-            }}
-            accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
-            role={CONST.ROLE.LINK}
-            style={pressableStyles}
+                Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: parentReportID}));
+                return;
+            }
+
+            // If the parent report is already displayed underneath RHP, simply dismiss the modal
+            if (Navigation.getTopmostReportId() === parentReportID) {
+                Navigation.dismissModal();
+                return;
+            }
+        }
+
+        if (isVisibleAction) {
+            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID, parentReportActionID));
+        } else {
+            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID));
+        }
+    };
+
+    return (
+        <Text
+            style={[styles.optionAlternateText, styles.textLabelSupporting]}
+            numberOfLines={1}
         >
-            <Text
-                style={[styles.optionAlternateText, styles.textLabelSupporting]}
-                numberOfLines={1}
-            >
-                {!!reportName && (
-                    <>
-                        <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${translate('threads.from')} `}</Text>
-                        <Text style={[styles.optionAlternateText, styles.textLabelSupporting, styles.link]}>{reportName}</Text>
-                    </>
-                )}
-                {!!workspaceName && workspaceName !== reportName && (
-                    <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
-                )}
-            </Text>
-        </PressableWithoutFeedback>
+            {!!reportName && (
+                <>
+                    <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${translate('threads.from')} `}</Text>
+                    <View style={pressableStyles}>
+                        <TextLink
+                            onMouseEnter={onMouseEnter}
+                            onMouseLeave={onMouseLeave}
+                            onPress={onPress}
+                            accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
+                            style={[styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link]}
+                        >
+                            {reportName}
+                        </TextLink>
+                    </View>
+                </>
+            )}
+            {!!workspaceName && workspaceName !== reportName && (
+                <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
+            )}
+        </Text>
     );
 }
 

From 54232d4bc62ff6dbc85c6657dc6fdced34598cec Mon Sep 17 00:00:00 2001
From: Jakub Korytko <jakub@korytko.me>
Date: Mon, 9 Jun 2025 09:34:22 +0200
Subject: [PATCH 2/2] Remove View from ParentNavigationSubtitle

---
 src/components/ParentNavigationSubtitle.tsx | 25 +++++++++------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx
index edfd131e33bf..abc3ef58b628 100644
--- a/src/components/ParentNavigationSubtitle.tsx
+++ b/src/components/ParentNavigationSubtitle.tsx
@@ -1,7 +1,6 @@
 import {useRoute} from '@react-navigation/native';
 import React from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
-import {View} from 'react-native';
+import type {StyleProp, TextStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import useHover from '@hooks/useHover';
 import useLocalize from '@hooks/useLocalize';
@@ -33,7 +32,7 @@ type ParentNavigationSubtitleProps = {
     parentReportActionID?: string;
 
     /** PressableWithoutFeedback additional styles */
-    pressableStyles?: StyleProp<ViewStyle>;
+    pressableStyles?: StyleProp<TextStyle>;
 
     /** Whether to open the parent report link in the current tab if possible */
     openParentReportInCurrentTab?: boolean;
@@ -110,17 +109,15 @@ function ParentNavigationSubtitle({
             {!!reportName && (
                 <>
                     <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${translate('threads.from')} `}</Text>
-                    <View style={pressableStyles}>
-                        <TextLink
-                            onMouseEnter={onMouseEnter}
-                            onMouseLeave={onMouseLeave}
-                            onPress={onPress}
-                            accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
-                            style={[styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link]}
-                        >
-                            {reportName}
-                        </TextLink>
-                    </View>
+                    <TextLink
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
+                        onPress={onPress}
+                        accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
+                        style={[pressableStyles, styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link]}
+                    >
+                        {reportName}
+                    </TextLink>
                 </>
             )}
             {!!workspaceName && workspaceName !== reportName && (