Extend useDocumentTitle hook to all remaining pages

jest/setup.ts

@@ -315,3 +315,23 @@ jest.mock('@components/ActionSheetAwareScrollView/index.android');
 jest.mock('@components/ActionSheetAwareScrollView/ActionSheetAwareScrollViewContext');
 
 jest.mock('@src/components/KeyboardDismissibleFlatList/KeyboardDismissibleFlatListContext');
+
+// Mock document title hooks as no-ops in tests. The web implementation of setPageTitle uses
+// setTimeout(fn, 0) which accumulates in the fake timer queue. Combined with lodash debounce
+// in triggerUnreadUpdate (also timer-based), this creates excessive timer churn that causes
+// heavy integration tests like SessionTest to exceed their timeout.
+jest.mock('@src/hooks/useDocumentTitle', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: jest.fn(),
+}));
+jest.mock('@src/hooks/useWorkspaceDocumentTitle', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: jest.fn(),
+}));
+jest.mock('@src/hooks/useDomainDocumentTitle', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: jest.fn(),
+}));

src/hooks/useDocumentTitle.ts

@@ -0,0 +1,14 @@
+import {useFocusEffect} from '@react-navigation/native';
+import {useCallback} from 'react';
+import {setPageTitle} from '@libs/UnreadIndicatorUpdater/updateUnread';
+
+function useDocumentTitle(title: string) {
+    useFocusEffect(
+        useCallback(() => {
+            setPageTitle(title);
+            return () => setPageTitle('');
+        }, [title]),
+    );
+}
+
+export default useDocumentTitle;

src/hooks/useDomainDocumentTitle.ts

@@ -0,0 +1,14 @@
+import type {TranslationPaths} from '@src/languages/types';
+import useDocumentTitle from './useDocumentTitle';
+import useLocalize from './useLocalize';
+
+/**
+ * Sets the browser document title for domain pages using the format "domainName - PageTitle".
+ * Falls back to empty string (default title) if domain name is not yet available.
+ */
+function useDomainDocumentTitle(domainName: string | undefined, titleKey: TranslationPaths) {
+    const {translate} = useLocalize();
+    useDocumentTitle(domainName ? `${domainName} - ${translate(titleKey)}` : '');
+}
+
+export default useDomainDocumentTitle;

src/hooks/useWorkspaceDocumentTitle.ts

@@ -0,0 +1,14 @@
+import type {TranslationPaths} from '@src/languages/types';
+import useDocumentTitle from './useDocumentTitle';
+import useLocalize from './useLocalize';
+
+/**
+ * Sets the browser document title for workspace pages using the format "PolicyName - PageTitle".
+ * Falls back to empty string (default title) if policy name is not yet available.
+ */
+function useWorkspaceDocumentTitle(policyName: string | undefined, titleKey: TranslationPaths) {
+    const {translate} = useLocalize();
+    useDocumentTitle(policyName ? `${policyName} - ${translate(titleKey)}` : '');
+}
+
+export default useWorkspaceDocumentTitle;

src/libs/UnreadIndicatorUpdater/updateUnread/index.android.ts

@@ -3,4 +3,9 @@ import type UpdateUnread from './types';
 // Android does not yet implement this
 const updateUnread: UpdateUnread = () => {};
 
+// No-op on native — document title is a web-only concept
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function setPageTitle(_title: string) {}
+
 export default updateUnread;
+export {setPageTitle};

src/libs/UnreadIndicatorUpdater/updateUnread/index.ios.ts

@@ -9,4 +9,9 @@ const updateUnread: UpdateUnread = (totalCount) => {
     Airship.push.iOS.setBadgeNumber(totalCount);
 };
 
+// No-op on native — document title is a web-only concept
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function setPageTitle(_title: string) {}
+
 export default updateUnread;
+export {setPageTitle};

src/libs/UnreadIndicatorUpdater/updateUnread/index.ts

@@ -5,28 +5,52 @@ import CONFIG from '@src/CONFIG';
 import type UpdateUnread from './types';
 
 let unreadTotalCount = 0;
+let currentPageTitle = '';
+
 /**
- * Set the page title on web
+ * Set the current page-specific title (called by useDocumentTitle hook)
+ * @param title - The page-specific title
  */
-const updateUnread: UpdateUnread = (totalCount) => {
-    const hasUnread = totalCount !== 0;
-    unreadTotalCount = totalCount;
+function setPageTitle(title: string) {
+    currentPageTitle = title;
+    // Immediately update the document title when page title changes
+    updateDocumentTitle();
+}
+
+/**
+ * Update the actual document title and favicon
+ */
+function updateDocumentTitle() {
+    const hasUnread = unreadTotalCount !== 0;
     // This setTimeout is required because due to how react rendering messes with the DOM, the document title can't be modified synchronously, and we must wait until all JS is done
     // running before setting the title.
     setTimeout(() => {
         // There is a Chrome browser bug that causes the title to revert back to the previous when we are navigating back. Setting the title to an empty string
         // seems to improve this issue.
         document.title = '';
-        document.title = hasUnread ? `(${totalCount}) ${CONFIG.SITE_TITLE}` : CONFIG.SITE_TITLE;
+
+        // Use page-specific title if available, otherwise use the default SITE_TITLE
+        const baseTitle = currentPageTitle || CONFIG.SITE_TITLE;
+        document.title = hasUnread ? `(${unreadTotalCount}) ${baseTitle}` : baseTitle;
+
         const favicon = document.getElementById('favicon');
         if (favicon instanceof HTMLLinkElement) {
             favicon.href = hasUnread ? CONFIG.FAVICON.UNREAD : CONFIG.FAVICON.DEFAULT;
         }
     }, 0);
+}
+
+/**
+ * Set the page title on web
+ */
+const updateUnread: UpdateUnread = (totalCount) => {
+    unreadTotalCount = totalCount;
+    updateDocumentTitle();
 };
 
 window.addEventListener('popstate', () => {
     updateUnread(unreadTotalCount);
 });
 
 export default updateUnread;
+export {setPageTitle};

src/pages/Search/SearchPage.tsx

@@ -4,6 +4,8 @@ import {useSearchActionsContext, useSearchStateContext} from '@components/Search
 import type {SearchParams} from '@components/Search/types';
 import {usePlaybackActionsContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useConfirmReadyToOpenApp from '@hooks/useConfirmReadyToOpenApp';
+import useDocumentTitle from '@hooks/useDocumentTitle';
+import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -22,6 +24,8 @@ import SearchPageWide from './SearchPageWide';
 type SearchPageProps = PlatformStackScreenProps<SearchFullscreenNavigatorParamList, typeof SCREENS.SEARCH.ROOT>;
 
 function SearchPage({route}: SearchPageProps) {
+    const {translate} = useLocalize();
+    useDocumentTitle(translate('common.search'));
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {selectedTransactions, lastSearchType, areAllMatchingItemsSelected, currentSearchKey, currentSearchResults, currentSearchQueryJSON} = useSearchStateContext();

src/pages/TeachersUnite/SaveTheWorldPage.tsx

@@ -5,6 +5,7 @@ import MenuItemList from '@components/MenuItemList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -23,6 +24,7 @@ function SaveTheWorldPage() {
     const {translate} = useLocalize();
     const waitForNavigate = useWaitForNavigation();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    useDocumentTitle(translate('sidebarScreen.saveTheWorld'));
     const theme = useTheme();
     const illustrations = useMemoizedLazyIllustrations(['TeachersUnite']);
     const saveTheWorldIllustration = useSaveTheWorldSectionIllustration();

src/pages/domain/Admins/DomainAdminsPage.tsx

@@ -1,10 +1,11 @@
-import {adminAccountIDsSelector, adminPendingActionSelector, technicalContactSettingsSelector} from '@selectors/Domain';
+import {adminAccountIDsSelector, adminPendingActionSelector, domainNameSelector, technicalContactSettingsSelector} from '@selectors/Domain';
 import React from 'react';
 import {View} from 'react-native';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useDomainDocumentTitle from '@hooks/useDomainDocumentTitle';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -25,6 +26,8 @@ type DomainAdminsPageProps = PlatformStackScreenProps<DomainSplitNavigatorParamL
 
 function DomainAdminsPage({route}: DomainAdminsPageProps) {
     const {domainAccountID} = route.params;
+    const [domainName] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {selector: domainNameSelector});
+    useDomainDocumentTitle(domainName, 'domain.domainAdmins');
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();

src/pages/domain/DomainInitialPage.tsx

@@ -11,6 +11,7 @@ import NAVIGATION_TABS from '@components/Navigation/NavigationTabBar/NAVIGATION_
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useConfirmReadyToOpenApp from '@hooks/useConfirmReadyToOpenApp';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -60,6 +61,7 @@ function DomainInitialPage({route}: DomainInitialPageProps) {
     const domainAccountID = route.params?.domainAccountID;
     const [domain, domainMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`);
     const domainName = domain?.email ? Str.extractEmailDomain(domain.email) : undefined;
+    useDocumentTitle(domainName ?? '');
     const [isAdmin, adminMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_ADMIN_ACCESS}${domainAccountID}`);
     const [domainErrors] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_ERRORS}${domainAccountID}`);
 

src/pages/domain/DomainSamlPage.tsx

@@ -10,6 +10,7 @@ import RenderHTML from '@components/RenderHTML';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
+import useDomainDocumentTitle from '@hooks/useDomainDocumentTitle';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -46,6 +47,7 @@ function DomainSamlPage({route}: DomainSamlPageProps) {
     const isSamlEnabled = !!domainSettings?.samlEnabled;
     const isSamlRequired = !!domainSettings?.samlRequired;
     const domainName = domain ? Str.extractEmailDomain(domain.email) : undefined;
+    useDomainDocumentTitle(domainName, 'domain.saml');
     const doesDomainExist = !!domain;
 
     const samlFeatures: FeatureListItem[] = useMemo(

src/pages/domain/Groups/DomainGroupsPage.tsx

@@ -1,5 +1,5 @@
 import type {DomainSecurityGroupWithID} from '@selectors/Domain';
-import {groupsSelector} from '@selectors/Domain';
+import {domainNameSelector, groupsSelector} from '@selectors/Domain';
 import React from 'react';
 import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -8,6 +8,7 @@ import SelectionList from '@components/SelectionList';
 import TableListItem from '@components/SelectionList/ListItem/TableListItem';
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import Text from '@components/Text';
+import useDomainDocumentTitle from '@hooks/useDomainDocumentTitle';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -25,6 +26,8 @@ type DomainGroupsPageProps = PlatformStackScreenProps<DomainSplitNavigatorParamL
 
 function DomainGroupsPage({route}: DomainGroupsPageProps) {
     const {domainAccountID} = route.params;
+    const [domainName] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {selector: domainNameSelector});
+    useDomainDocumentTitle(domainName, 'domain.groups.title');
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();

src/pages/domain/Members/DomainMembersPage.tsx

@@ -12,6 +12,7 @@ import SingleSelectPopup from '@components/Search/FilterDropdowns/SingleSelectPo
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import Text from '@components/Text';
 import useConfirmModal from '@hooks/useConfirmModal';
+import useDomainDocumentTitle from '@hooks/useDomainDocumentTitle';
 import useDomainGroupFilter from '@hooks/useDomainGroupFilter';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -61,6 +62,7 @@ function DomainMembersPage({route}: DomainMembersPageProps) {
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [domain] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`);
     const [domainName] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {selector: domainNameSelector});
+    useDomainDocumentTitle(domainName, 'domain.domainMembers');
     // We need to use isSmallScreenWidth here because the DecisionModal is opening from RHP and ShouldUseNarrowLayout layout will not work in this place.
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();

src/pages/home/HomePage.tsx

@@ -7,6 +7,7 @@ import ReceiptScanDropZone from '@components/ReceiptScanDropZone';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useConfirmReadyToOpenApp from '@hooks/useConfirmReadyToOpenApp';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -26,6 +27,7 @@ function HomePage() {
     const shouldDisplayLHB = !shouldUseNarrowLayout;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    useDocumentTitle(translate('common.home'));
     const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const [isLoadingReportData = false] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
     const isForYouLoading = !!(isLoadingApp || isLoadingReportData);

src/pages/inbox/ReportScreen.tsx

@@ -25,6 +25,7 @@ import useAppFocusEvent from '@hooks/useAppFocusEvent';
 import useArchivedReportsIdSet from '@hooks/useArchivedReportsIdSet';
 import {useCurrentReportIDState} from '@hooks/useCurrentReportID';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import useIsAnonymousUser from '@hooks/useIsAnonymousUser';
 import useIsReportReadyToDisplay from '@hooks/useIsReportReadyToDisplay';
 import useNetwork from '@hooks/useNetwork';
@@ -62,6 +63,7 @@ import {
     isTransactionThread,
     isWhisperAction,
 } from '@libs/ReportActionsUtils';
+import {getReportName} from '@libs/ReportNameUtils';
 import {
     canEditReportAction,
     canUserPerformWriteAction,
@@ -103,6 +105,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import {reportByIDsSelector} from '@src/selectors/Attributes';
 import type * as OnyxTypes from '@src/types/onyx';
 import {getEmptyObject, isEmptyObject} from '@src/types/utils/EmptyObject';
 import AccountManagerBanner from './AccountManagerBanner';
@@ -281,6 +284,10 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
     );
     const reportID = report?.reportID;
 
+    const reportAttributesSelector = useCallback((attributes: OnyxEntry<OnyxTypes.ReportAttributesDerivedValue>) => reportByIDsSelector(reportID ? [reportID] : [])(attributes), [reportID]);
+    const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {selector: reportAttributesSelector});
+    useDocumentTitle(getReportName(report, reportAttributes));
+
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.chatReportID}`);
     const prevReport = usePrevious(report);
     const prevUserLeavingStatus = usePrevious(userLeavingStatus);

src/pages/settings/AboutPage/AboutPage.tsx

@@ -11,6 +11,7 @@ import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -60,6 +61,7 @@ function AboutPage() {
     const popoverAnchor = useRef<View>(null);
     const waitForNavigate = useWaitForNavigation();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    useDocumentTitle(translate('initialSettingsPage.about'));
     const aboutIllustration = useAboutSectionIllustration();
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);

src/pages/settings/Preferences/PreferencesPage.tsx

@@ -8,6 +8,7 @@ import Section from '@components/Section';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -47,6 +48,7 @@ function PreferencesPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    useDocumentTitle(translate('common.preferences'));
 
     return (
         <ScreenWrapper

src/pages/settings/Profile/ProfilePage.tsx

@@ -15,6 +15,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import {useMemoizedLazyAsset, useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -50,6 +51,7 @@ function ProfilePage() {
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const route = useRoute<PlatformStackRouteProp<SettingsSplitNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.ROOT>>();
+    useDocumentTitle(translate('common.profile'));
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const getPronouns = (): string => {
         const pronounsKey = currentUserPersonalDetails?.pronouns?.replace(CONST.PRONOUNS.PREFIX, '') ?? '';

src/pages/settings/Rules/ExpenseRulesPage.tsx

@@ -16,6 +16,7 @@ import SelectionListWithModal from '@components/SelectionListWithModal';
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import Text from '@components/Text';
 import useAutoTurnSelectionModeOffWhenHasNoActiveOption from '@hooks/useAutoTurnSelectionModeOffWhenHasNoActiveOption';
+import useDocumentTitle from '@hooks/useDocumentTitle';
 import useGenericEmptyStateIllustration from '@hooks/useGenericEmptyStateIllustration';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -52,6 +53,7 @@ function ExpenseRulesPage() {
     const isMobileSelectionModeEnabled = useMobileSelectionMode();
     const [expenseRules = getEmptyArray<ExpenseRule>(), expenseRulesResult] = useOnyx(ONYXKEYS.NVP_EXPENSE_RULES);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    useDocumentTitle(translate('expenseRulesPage.title'));
     const [selectedRules, setSelectedRules] = useState<string[]>([]);
     const [deleteConfirmModalVisible, setDeleteConfirmModalVisible] = useState(false);
     const styles = useThemeStyles();