MM-36591 Custom Statuses: Add custom status to mention autocomplete (#5496)

* Added custom status emoji in at mention autocomplete

* Fixed the width of the displayname and username

* Changed the max width for the full name and username in the autocomplete item

* Review fixes
Changed the behaviour of ellipses for long names

* Fixed the username cutting off after truncating display name issue

* Changed the styling for the shared channel icon

app/components/autocomplete/at_mention_item/at_mention_item.tsx

@@ -6,6 +6,7 @@ import {Text, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import ChannelIcon from '@components/channel_icon';
+import CustomStatusEmoji from '@components/custom_status/custom_status_emoji';
 import FormattedText from '@components/formatted_text';
 import ProfilePicture from '@components/profile_picture';
 import {BotTag, GuestTag} from '@components/tag';
@@ -29,6 +30,7 @@ interface AtMentionItemProps {
     theme: Theme;
     userId: string;
     username: string;
+    isCustomStatusEnabled: boolean;
 }
 
 const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
@@ -50,7 +52,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
         },
         rowInfo: {
             flexDirection: 'row',
-            flex: 1,
+            overflow: 'hidden',
         },
         rowFullname: {
             fontSize: 15,
@@ -58,16 +60,17 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
             paddingLeft: 4,
         },
         rowUsername: {
-            color: theme.centerChannelColor,
+            color: changeOpacity(theme.centerChannelColor, 0.56),
             fontSize: 15,
-            opacity: 0.56,
-            flex: 1,
+        },
+        icon: {
+            marginLeft: 4,
         },
     };
 });
 
 const AtMentionItem = ({firstName = '', isBot, isCurrentUser, isGuest, isShared, lastName = '', nickname = '',
-    onPress, showFullName, testID, theme, userId, username}: AtMentionItemProps) => {
+    onPress, showFullName, testID, theme, userId, username, isCustomStatusEnabled}: AtMentionItemProps) => {
     const insets = useSafeAreaInsets();
 
     const completeMention = () => {
@@ -112,7 +115,9 @@ const AtMentionItem = ({firstName = '', isBot, isCurrentUser, isGuest, isShared,
                         testID='at_mention_item.profile_picture'
                     />
                 </View>
-                <View style={style.rowInfo}>
+                <View
+                    style={[style.rowInfo, {maxWidth: isShared ? '75%' : '80%'}]}
+                >
                     <BotTag
                         show={isBot}
                         theme={theme}
@@ -121,28 +126,37 @@ const AtMentionItem = ({firstName = '', isBot, isCurrentUser, isGuest, isShared,
                         show={isGuest}
                         theme={theme}
                     />
-                    {Boolean(name.length) &&
                     <Text
-                        style={style.rowFullname}
                         numberOfLines={1}
-                        testID='at_mention_item.name'
                     >
-                        {name}
-                    </Text>
-                    }
-                    <Text
-                        style={style.rowUsername}
-                        numberOfLines={1}
-                        testID='at_mention_item.username'
-                    >
-                        {isCurrentUser &&
-                        <FormattedText
-                            id='suggestion.mention.you'
-                            defaultMessage=' (you)'
-                        />}
-                        {` @${username}`}
+                        {Boolean(name.length) && (
+                            <Text
+                                style={style.rowFullname}
+                                testID='at_mention_item.name'
+                            >
+                                {name}
+                            </Text>
+                        )}
+                        <Text
+                            style={style.rowUsername}
+                            testID='at_mention_item.username'
+                        >
+                            {isCurrentUser && (
+                                <FormattedText
+                                    id='suggestion.mention.you'
+                                    defaultMessage='(you)'
+                                />
+                            )}
+                            {` @${username}`}
+                        </Text>
                     </Text>
                 </View>
+                {isCustomStatusEnabled && !isBot && (
+                    <CustomStatusEmoji
+                        userID={userId}
+                        style={style.icon}
+                    />
+                )}
                 {isShared && (
                     <ChannelIcon
                         isActive={false}
@@ -153,6 +167,7 @@ const AtMentionItem = ({firstName = '', isBot, isCurrentUser, isGuest, isShared,
                         shared={true}
                         theme={theme}
                         type={General.DM_CHANNEL}
+                        style={style.icon}
                     />
                 )}
             </View>

app/components/autocomplete/at_mention_item/index.js

@@ -7,6 +7,7 @@ import {getConfig} from '@mm-redux/selectors/entities/general';
 import {getTheme} from '@mm-redux/selectors/entities/preferences';
 import {getCurrentUserId, getUser} from '@mm-redux/selectors/entities/users';
 import {isShared} from '@mm-redux/utils/user_utils';
+import {isCustomStatusEnabled} from '@selectors/custom_status';
 import {isGuest} from '@utils/users';
 
 import AtMentionItem from './at_mention_item';
@@ -25,6 +26,7 @@ function mapStateToProps(state, ownProps) {
         isShared: isShared(user),
         theme: getTheme(state),
         isCurrentUser: getCurrentUserId(state) === user.id,
+        isCustomStatusEnabled: isCustomStatusEnabled(state),
     };
 }