[HOLD] Feat/display letter avatars as svg

src/CONST/index.ts

@@ -3281,6 +3281,7 @@ const CONST = {
     },
 
     AVATAR_SIZE: {
+        X_X_LARGE: 'xxlarge',
         X_LARGE: 'xlarge',
         LARGE: 'large',
         MEDIUM: 'medium',

src/components/AccountSwitcher.tsx

@@ -114,6 +114,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
             errorText: error ?? '',
             shouldShowRedDotIndicator: !!error,
             errorTextStyle: styles.mt2,
+            iconFileName: personalDetails?.originalFileName,
             ...additionalProps,
         };
     };
@@ -197,6 +198,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
                             avatarID={currentUserPersonalDetails?.accountID}
                             source={currentUserPersonalDetails?.avatar}
                             fallbackIcon={currentUserPersonalDetails.fallbackIcon}
+                            originalFileName={currentUserPersonalDetails.originalFileName}
                         />
                         <View style={[styles.flex1, styles.flexShrink1, styles.flexBasis0, styles.justifyContentCenter, styles.gap1]}>
                             <View style={[styles.flexRow, styles.gap1]}>

src/components/Avatar.tsx

@@ -55,6 +55,9 @@ type AvatarProps = {
     /** Optional account id if it's user avatar or policy id if it's workspace avatar */
     avatarID?: number | string;
 
+    /** Used for recognizing and display optimization of letter avatars. */
+    originalFileName?: string;
+
     /** Test ID for the Avatar component */
     testID?: string;
 };
@@ -72,6 +75,7 @@ function Avatar({
     name = '',
     avatarID,
     testID = 'Avatar',
+    originalFileName,
 }: AvatarProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -86,8 +90,8 @@ function Avatar({
 
     const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
     const userAccountID = isWorkspace ? undefined : (avatarID as number);
+    const source = isWorkspace ? originalSource : getAvatar({avatarSource: originalSource, accountID: userAccountID, originalFileName, size});
 
-    const source = isWorkspace ? originalSource : getAvatar({avatarSource: originalSource, accountID: userAccountID});
     let optimizedSource = source;
     const maybeDefaultAvatarName = getPresetAvatarNameFromURL(source);
 

src/components/AvatarButtonWithIcon.tsx

@@ -64,6 +64,9 @@ type AvatarButtonWithIconProps = {
 
     /** The name associated with avatar */
     name?: string;
+
+    /** Original file name. Used for recognizing and display optimization of letter avatars. */
+    originalFileName?: string;
 };
 
 /**
@@ -86,6 +89,7 @@ function AvatarButtonWithIcon({
     editIcon = Expensicons.Pencil,
     anchorRef,
     name = '',
+    originalFileName,
 }: AvatarButtonWithIconProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -115,6 +119,7 @@ function AvatarButtonWithIcon({
                             size={size}
                             type={type}
                             name={name}
+                            originalFileName={originalFileName}
                         />
                     ) : (
                         <DefaultAvatar />

src/components/AvatarWithIndicator.tsx

@@ -25,9 +25,12 @@ type AvatarWithIndicatorProps = {
 
     /** Indicates whether the avatar is loaded or not  */
     isLoading?: boolean;
+
+    /** Used for recognizing and display optimization of letter avatars. */
+    originalFileName?: string;
 };
 
-function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
+function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true, originalFileName}: AvatarWithIndicatorProps) {
     const styles = useThemeStyles();
 
     return (
@@ -43,6 +46,7 @@ function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon
                             fallbackIcon={fallbackIcon}
                             avatarID={accountID}
                             type={CONST.ICON_TYPE_AVATAR}
+                            originalFileName={originalFileName}
                         />
                         <Indicator />
                     </>

src/components/ColoredLetterAvatar.tsx

@@ -26,7 +26,7 @@ function ColoredLetterAvatar({component, backgroundColor, fillColor, size = CONS
     const avatarSize = StyleUtils.getAvatarSize(size);
     return (
         <View
-            style={{width: avatarSize, height: avatarSize, backgroundColor}}
+            style={{width: avatarSize, height: avatarSize, backgroundColor, borderRadius: '100%'}}
             dataSet={{id: 'colored-avatar'}}
         >
             <ImageSVG

src/components/MenuItem.tsx

@@ -260,6 +260,9 @@ type MenuItemBaseProps = {
 
     iconAccountID?: number;
 
+    /** Used for display optimization of letter avatars. */
+    iconFileName?: string;
+
     /** Should we use default cursor for disabled content */
     shouldUseDefaultCursorWhenDisabled?: boolean;
 
@@ -440,6 +443,7 @@ function MenuItem({
     errorTextStyle,
     shouldShowRedDotIndicator,
     hintText,
+    iconFileName,
     success = false,
     iconReportID,
     focused = false,
@@ -654,7 +658,6 @@ function MenuItem({
     };
 
     const isIDPassed = !!iconReportID || !!iconAccountID || iconAccountID === CONST.DEFAULT_NUMBER_ID;
-
     return (
         <View onBlur={onBlur}>
             {!!label && !isLabelHoverable && (
@@ -799,6 +802,7 @@ function MenuItem({
                                                                     fallbackIcon={fallbackIcon}
                                                                     size={avatarSize}
                                                                     type={CONST.ICON_TYPE_AVATAR}
+                                                                    originalFileName={iconFileName}
                                                                 />
                                                             )}
                                                             {iconType === CONST.ICON_TYPE_PLAID && !!plaidUrl && <PlaidCardFeedIcon plaidUrl={plaidUrl} />}

src/components/PopoverMenu.tsx

@@ -367,8 +367,7 @@ function BasePopoverMenu({
     };
 
     const renderedMenuItems = currentMenuItems.map((item, menuIndex) => {
-        const {text, onSelected, subMenuItems, shouldCallAfterModalHide, key, testID: menuItemTestID, shouldShowLoadingSpinnerIcon, ...menuItemProps} = item;
-
+        const {text, onSelected, subMenuItems, shouldCallAfterModalHide, key, testID: menuItemTestID, shouldShowLoadingSpinnerIcon, iconFileName, ...menuItemProps} = item;
         return (
             <OfflineWithFeedback
                 // eslint-disable-next-line react/no-array-index-key
@@ -386,6 +385,7 @@ function BasePopoverMenu({
                     shouldCheckActionAllowedOnPress={false}
                     iconRight={item.rightIcon}
                     shouldShowRightIcon={!!item.rightIcon}
+                    iconFileName={iconFileName}
                     onFocus={() => {
                         if (!shouldUpdateFocusedIndex) {
                             return;

src/components/ReportActionAvatars/ReportActionAvatar.tsx

@@ -154,6 +154,7 @@ function ReportActionAvatarSingle({
                     fallbackIcon={fallbackIcon}
                     testID="ReportActionAvatars-SingleAvatar"
                     reportID={reportID}
+                    originalFileName={avatar?.originalFileName}
                 />
             </View>
         </UserDetailsTooltip>
@@ -235,6 +236,7 @@ function ReportActionAvatarSubscript({
                         fallbackIcon={primaryAvatar.fallbackIcon}
                         testID="ReportActionAvatars-Subscript-MainAvatar"
                         reportID={reportID}
+                        originalFileName={primaryAvatar.originalFileName}
                     />
                 </View>
             </UserDetailsTooltip>
@@ -265,6 +267,7 @@ function ReportActionAvatarSubscript({
                             fallbackIcon={secondaryAvatar.fallbackIcon}
                             testID="ReportActionAvatars-Subscript-SecondaryAvatar"
                             reportID={reportID}
+                            originalFileName={secondaryAvatar.originalFileName}
                         />
                     </View>
                 </UserDetailsTooltip>
@@ -408,6 +411,7 @@ function ReportActionAvatarMultipleHorizontal({
                             fallbackIcon={icon.fallbackIcon}
                             testID="ReportActionAvatars-MultipleAvatars-StackedHorizontally-Avatar"
                             reportID={reportID}
+                            originalFileName={icon?.originalFileName}
                         />
                     </View>
                 </UserDetailsTooltip>
@@ -550,6 +554,7 @@ function ReportActionAvatarMultipleDiagonal({
                             fallbackIcon={icons.at(0)?.fallbackIcon}
                             testID="ReportActionAvatars-MultipleAvatars-MainAvatar"
                             reportID={reportID}
+                            originalFileName={icons.at(0)?.originalFileName}
                         />
                     </View>
                 </UserDetailsTooltip>
@@ -582,6 +587,7 @@ function ReportActionAvatarMultipleDiagonal({
                                     fallbackIcon={icons.at(1)?.fallbackIcon}
                                     testID="ReportActionAvatars-MultipleAvatars-SecondaryAvatar"
                                     reportID={reportID}
+                                    originalFileName={icons.at(1)?.originalFileName}
                                 />
                             </View>
                         </UserDetailsTooltip>

src/components/ReportActionAvatars/useReportActionAvatars.ts

@@ -119,6 +119,7 @@ function useReportActionAvatars({
             source: personalDetails?.[id]?.avatar ?? FallbackAvatar,
             name: personalDetails?.[id]?.[shouldUseActorAccountID ? 'displayName' : 'login'] ?? invitedEmail ?? '',
             fallbackIcon: shouldUseCustomFallbackAvatar ? RandomAvatarUtils.getAvatarForContact(String(id)) : undefined,
+            originalFileName: personalDetails?.[id]?.originalFileName,
         };
     });
 
@@ -221,6 +222,7 @@ function useReportActionAvatars({
               type: CONST.ICON_TYPE_AVATAR,
               fill: undefined,
               fallbackIcon,
+              originalFileName: delegatePersonalDetails.displayName,
           }
         : undefined;
 

src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

@@ -63,6 +63,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA
                         type={icon?.type ?? CONST.ICON_TYPE_AVATAR}
                         name={icon?.name ?? userLogin}
                         fallbackIcon={icon?.fallbackIcon}
+                        originalFileName={icon?.originalFileName}
                     />
                 </View>
                 <Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{title}</Text>

src/libs/ReportUtils.ts

@@ -950,7 +950,7 @@
 const parsedReportActionMessageCache: Record<string, string> = {};
 
 let conciergeReportID: OnyxEntry<string>;
 Onyx.connect({
     key: ONYXKEYS.CONCIERGE_REPORT_ID,
     callback: (value) => {
         conciergeReportID = value;
@@ -958,7 +958,7 @@
 });
 
 const defaultAvatarBuildingIconTestID = 'SvgDefaultAvatarBuilding Icon';
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         // When signed out, val is undefined
@@ -976,7 +976,7 @@
 let allPersonalDetails: OnyxEntry<PersonalDetailsList>;
 let allPersonalDetailLogins: string[];
 let currentUserPersonalDetails: OnyxEntry<PersonalDetails>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         if (currentUserAccountID) {
@@ -988,14 +988,14 @@
 });
 
 let allReportsDraft: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_DRAFT,
     waitForCollectionCallback: true,
     callback: (value) => (allReportsDraft = value),
 });
 
 let allPolicies: OnyxCollection<Policy>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     waitForCollectionCallback: true,
     callback: (value) => (allPolicies = value),
@@ -1010,7 +1010,7 @@
 
 let allReports: OnyxCollection<Report>;
 let reportsByPolicyID: ReportByPolicyMap;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -1048,14 +1048,14 @@
 });
 
 let allBetas: OnyxEntry<Beta[]>;
 Onyx.connect({
     key: ONYXKEYS.BETAS,
     callback: (value) => (allBetas = value),
 });
 
 let allTransactions: OnyxCollection<Transaction> = {};
 let reportsTransactions: Record<string, Transaction[]> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -1081,7 +1081,7 @@
 });
 
 let allReportActions: OnyxCollection<ReportActions>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => {
@@ -1094,7 +1094,7 @@
 
 let allReportMetadata: OnyxCollection<ReportMetadata>;
 const allReportMetadataKeyValue: Record<string, ReportMetadata> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_METADATA,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -3019,6 +3019,7 @@
             type: CONST.ICON_TYPE_AVATAR,
             name: displayNameLogin ?? '',
             fallbackIcon: personalDetails?.[accountID]?.fallbackIcon ?? '',
+            originalFileName: personalDetails?.[accountID]?.originalFileName,
         };
         avatars.push(userIcon);
     }
@@ -3345,6 +3346,7 @@
         type: CONST.ICON_TYPE_AVATAR,
         name: displayName,
         fallbackIcon: details?.fallbackIcon,
+        originalFileName: details?.originalFileName,
     };
 }
 
@@ -3390,6 +3392,7 @@
         type: CONST.ICON_TYPE_AVATAR,
         name: actorDetails?.displayName ?? '',
         fallbackIcon: actorDetails?.fallbackIcon,
+        originalFileName: actorDetails?.originalFileName,
     };
     return [memberIcon, workspaceIcon];
 }
@@ -3411,6 +3414,7 @@
         name: formatPhoneNumber(actorDisplayName),
         type: CONST.ICON_TYPE_AVATAR,
         fallbackIcon: actorDetails?.fallbackIcon,
+        originalFileName: actorDetails?.originalFileName,
     };
 
     if (isWorkspaceThread(report)) {
@@ -3506,13 +3510,15 @@
         type: CONST.ICON_TYPE_AVATAR,
         name: managerDetails?.displayName ?? '',
         fallbackIcon: managerDetails?.fallbackIcon,
+        originalFileName: managerDetails?.originalFileName,
     };
     const ownerIcon = {
         id: report?.ownerAccountID,
         source: ownerDetails?.avatar ?? FallbackAvatar,
         type: CONST.ICON_TYPE_AVATAR,
         name: ownerDetails?.displayName ?? '',
         fallbackIcon: ownerDetails?.fallbackIcon,
+        originalFileName: ownerDetails?.originalFileName,
     };
     const isManager = currentUserAccountID === report?.managerID;