Merge branch 'main' into collectioneur/transition-tracker-eslint

Author: collectioneur

.claude/settings.json

@@ -52,7 +52,9 @@
             "mcp__sentry__search_events",
             "mcp__sentry__search_issue_events",
             "mcp__sentry__search_issues",
-            "mcp__sentry__whoami"
+            "mcp__sentry__whoami",
+            "Bash(agent-device *)",
+            "Bash(echo \"$(npm root -g)/agent-device/skills/agent-device\")"
         ]
     },
     "enabledPlugins": {

.claude/skills/agent-device/SKILL.md

@@ -0,0 +1,15 @@
+---
+name: agent-device
+description: Drive iOS and Android devices for the Expensify App - testing, debugging, performance profiling, bug reproduction, and feature verification. Use when the developer needs to interact with the mobile app on a device.
+allowed-tools: Bash(agent-device *) Bash(npm root *)
+---
+
+# agent-device
+
+## Pre-flight
+
+`agent-device` CLI version: !`agent-device --version 2>&1 || echo "NOT_INSTALLED"`
+
+Canonical skill reference path (read these files directly for device automation guidance - bootstrap, exploration, verification, debugging): !`echo "$(npm root -g)/agent-device/skills/agent-device"`
+
+> If the version line above shows `NOT_INSTALLED` or a command-not-found error, **STOP** and instruct the developer to install it: `npm install -g agent-device`. All device interaction depends on it.

.gitignore

@@ -162,5 +162,8 @@ modules/*/lib/
 .playwright-output/
 .playwright-mcp/
 
+# agent-device
+agent-device-output/
+
 # cspell cache
 .cspellcache

CLAUDE.md

@@ -278,6 +278,9 @@ npm run web
 ### Browser Testing
 Use the `/playwright-app-testing` skill to test and debug the App in a browser. Use this skill after making frontend changes to verify your work, or when the user requests testing.
 
+### Mobile Device Testing
+Use the `/agent-device` skill to drive the App on iOS and Android (simulators or real devices) for interactive testing, performance profiling, bug reproduction, and device-specific debugging. Requires `npm install -g agent-device` - the skill's pre-flight check will surface the install instruction if missing.
+
 ## Architecture Decisions
 
 ### React Native New Architecture

README.md

@@ -48,6 +48,8 @@ For detailed setup instructions for each platform, see the following guides:
 * **📱 iOS Development**: [iOS Setup Instructions](contributingGuides/SETUP_IOS.md)  
 * **🤖 Android Development**: [Android Setup Instructions](contributingGuides/SETUP_ANDROID.md)
 
+**Optional AI-assisted mobile testing:** If you use Claude Code, the [`/agent-device` skill](.claude/skills/agent-device/SKILL.md) drives iOS and Android simulators or devices for interactive testing, debugging, and performance profiling. Requires `npm install -g agent-device`.
+
 ## General Troubleshooting
 1. If you are having issues with **_Getting Started_**, please reference [React Native's Documentation](https://reactnative.dev/docs/environment-setup)
 2. If you are running into CORS errors like (in the browser dev console)

src/components/Reactions/ReactionTooltipContent.tsx

@@ -1,12 +1,12 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
-import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getLocalizedEmojiName} from '@libs/EmojiUtils';
 import {getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
 
-type ReactionTooltipContentProps = Pick<WithCurrentUserPersonalDetailsProps, 'currentUserPersonalDetails'> & {
+type ReactionTooltipContentProps = {
     /**
      * A list of emoji codes to display in the tooltip.
      */
@@ -21,15 +21,18 @@ type ReactionTooltipContentProps = Pick<WithCurrentUserPersonalDetailsProps, 'cu
      * A list of account IDs to display in the tooltip.
      */
     accountIDs: number[];
+
+    /**
+     * The account ID of the current user.
+     */
+    currentUserAccountID: number;
 };
 
-function ReactionTooltipContent({accountIDs, currentUserPersonalDetails, emojiCodes, emojiName}: ReactionTooltipContentProps) {
+function ReactionTooltipContent({accountIDs, emojiCodes, emojiName, currentUserAccountID}: ReactionTooltipContentProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const users = useMemo(
-        () => getPersonalDetailsByIDs({accountIDs, currentUserAccountID: currentUserPersonalDetails.accountID, shouldChangeUserDisplayName: true}),
-        [currentUserPersonalDetails.accountID, accountIDs],
-    );
+    const {translate, preferredLocale} = useLocalize();
+    const users = getPersonalDetailsByIDs({accountIDs, currentUserAccountID, shouldChangeUserDisplayName: true});
+    const localizedEmojiName = getLocalizedEmojiName(emojiName, preferredLocale);
 
     const namesString = users
         .map((user) => user?.displayName)
@@ -51,7 +54,7 @@ function ReactionTooltipContent({accountIDs, currentUserPersonalDetails, emojiCo
 
             <Text style={[styles.mt1, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{namesString}</Text>
 
-            <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`${translate('emojiReactions.reactedWith')} :${emojiName}:`}</Text>
+            <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`${translate('emojiReactions.reactedWith')} :${localizedEmojiName}:`}</Text>
         </View>
     );
 }

src/components/Reactions/ReportActionItemEmojiReactions.tsx

@@ -1,41 +1,37 @@
 import sortBy from 'lodash/sortBy';
 import React, {useContext, useRef} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
+// eslint-disable-next-line no-restricted-imports
+import {InteractionManager, View} from 'react-native';
+import {importEmojiLocale} from '@assets/emojis';
 import type {Emoji} from '@assets/emojis/types';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
-import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
-import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getEmojiReactionDetails, getLocalizedEmojiName} from '@libs/EmojiUtils';
+import {getEmojiReactionDetails} from '@libs/EmojiUtils';
+import {hideContextMenu} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import {ReactionListContext} from '@pages/inbox/ReportScreenContext';
 import type {ReactionListAnchor, ReactionListEvent} from '@pages/inbox/ReportScreenContext';
+import {toggleEmojiReaction} from '@userActions/Report';
+import {isAnonymousUser, signOutAndRedirectToSignIn} from '@userActions/Session';
 import CONST from '@src/CONST';
+import {isFullySupportedLocale} from '@src/CONST/LOCALES';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Locale, ReportAction, ReportActionReactions} from '@src/types/onyx';
+import type {ReportAction, ReportActionReactions} from '@src/types/onyx';
 import type {PendingAction} from '@src/types/onyx/OnyxCommon';
+import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import AddReactionBubble from './AddReactionBubble';
 import EmojiReactionBubble from './EmojiReactionBubble';
 import ReactionTooltipContent from './ReactionTooltipContent';
 
-type ReportActionItemEmojiReactionsProps = WithCurrentUserPersonalDetailsProps & {
-    /** All the emoji reactions for the report action. */
-    emojiReactions: OnyxEntry<ReportActionReactions>;
-
-    /** The user's preferred locale. */
-    preferredLocale?: OnyxEntry<Locale>;
-
+type ReportActionItemEmojiReactionsProps = {
     /** The report action that these reactions are for */
     reportAction: ReportAction;
 
-    /**
-     * Function to call when the user presses on an emoji.
-     * This can also be an emoji the user already reacted with,
-     * hence this function asks to toggle the reaction by emoji.
-     */
-    toggleReaction: (emoji: Emoji, preferredSkinTone: number, ignoreSkinToneOnCompare?: boolean) => void;
+    /** The ID of the chat report this action belongs to */
+    reportID: string | undefined;
 
     /** We disable reacting with emojis on report actions that have errors */
     shouldBlockReactions?: boolean;
@@ -77,30 +73,40 @@ type FormattedReaction = {
     setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
-function ReportActionItemEmojiReactions({
-    reportAction,
-    currentUserPersonalDetails,
-    toggleReaction,
-    emojiReactions = {},
-    shouldBlockReactions = false,
-    preferredLocale = CONST.LOCALES.DEFAULT,
-    setIsEmojiPickerActive,
-}: ReportActionItemEmojiReactionsProps) {
+function ReportActionItemEmojiReactions({reportAction, reportID, shouldBlockReactions = false, setIsEmojiPickerActive}: ReportActionItemEmojiReactionsProps) {
     const styles = useThemeStyles();
+    const {preferredLocale} = useLocalize();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const reactionListRef = useContext(ReactionListContext);
     const popoverReactionListAnchors = useRef<PopoverReactionListAnchors>({});
     const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE);
 
     const reportActionID = reportAction.reportActionID;
+    const [emojiReactions = getEmptyObject<ReportActionReactions>()] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`);
+
+    // Prime the locale emoji table when this action has reactions.
+    // Skip the default locale since getLocalizedEmojiName never reads localeEmojis for it.
+    if (preferredLocale && preferredLocale !== CONST.LOCALES.DEFAULT && emojiReactions !== CONST.EMPTY_OBJECT && isFullySupportedLocale(preferredLocale)) {
+        importEmojiLocale(preferredLocale);
+    }
+
+    const toggleReaction = (emoji: Emoji, skinTone: number, ignoreSkinToneOnCompare?: boolean) => {
+        if (isAnonymousUser()) {
+            hideContextMenu(false);
+
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            InteractionManager.runAfterInteractions(() => {
+                signOutAndRedirectToSignIn();
+            });
+            return;
+        }
+        toggleEmojiReaction(reportID, reportAction, emoji, emojiReactions, skinTone, currentUserAccountID, ignoreSkinToneOnCompare);
+    };
 
     // Each emoji is sorted by the oldest timestamp of user reactions so that they will always appear in the same order for everyone
     const formattedReactions: Array<FormattedReaction | null> = sortBy(
         Object.entries(emojiReactions ?? {}).map(([emojiName, emojiReaction]) => {
-            const {emoji, emojiCodes, reactionCount, hasUserReacted, userAccountIDs, oldestTimestamp} = getEmojiReactionDetails(
-                emojiName,
-                emojiReaction,
-                currentUserPersonalDetails.accountID,
-            );
+            const {emoji, emojiCodes, reactionCount, hasUserReacted, userAccountIDs, oldestTimestamp} = getEmojiReactionDetails(emojiName, emojiReaction, currentUserAccountID);
 
             if (reactionCount === 0) {
                 return null;
@@ -138,14 +144,15 @@ function ReportActionItemEmojiReactions({
                     if (reaction === null) {
                         return;
                     }
+
                     return (
                         <Tooltip
                             renderTooltipContent={() => (
                                 <ReactionTooltipContent
-                                    emojiName={getLocalizedEmojiName(reaction.reactionEmojiName, preferredLocale)}
+                                    emojiName={reaction.reactionEmojiName}
                                     emojiCodes={reaction.emojiCodes}
                                     accountIDs={reaction.userAccountIDs}
-                                    currentUserPersonalDetails={currentUserPersonalDetails}
+                                    currentUserAccountID={currentUserAccountID}
                                 />
                             )}
                             renderTooltipContentKey={[...reaction.userAccountIDs.map(String), ...reaction.emojiCodes]}
@@ -184,4 +191,4 @@ function ReportActionItemEmojiReactions({
     );
 }
 
-export default withCurrentUserPersonalDetails(ReportActionItemEmojiReactions);
+export default ReportActionItemEmojiReactions;