autocomplete: Show user status emoji in user-mention autocomplete

Author: sm-sayedi

lib/widgets/autocomplete.dart

@@ -277,29 +277,35 @@ class MentionAutocompleteItem extends StatelessWidget {
 
     Widget avatar;
     String label;
+    Widget? emoji;
     String? sublabel;
     switch (option) {
       case UserMentionAutocompleteResult(:var userId):
         avatar = Avatar(userId: userId, size: 36, borderRadius: 4);
         label = store.userDisplayName(userId);
+        emoji = UserStatusEmoji(userId: userId, size: 18,
+          padding: const EdgeInsetsDirectional.only(start: 5.0));
         sublabel = store.userDisplayEmail(userId);
       case WildcardMentionAutocompleteResult(:var wildcardOption):
         avatar = SizedBox.square(dimension: 36,
           child: const Icon(ZulipIcons.three_person, size: 24));
         label = wildcardOption.canonicalString;
+        emoji = null;
         sublabel = wildcardSublabel(wildcardOption, context: context, store: store);
     }
 
-    final labelWidget = Text(
-      label,
-      style: TextStyle(
-        fontSize: 18,
-        height: 20 / 18,
-        color: designVariables.contextMenuItemLabel,
-      ).merge(weightVariableTextStyle(context,
-          wght: sublabel == null ? 500 : 600)),
-      overflow: TextOverflow.ellipsis,
-      maxLines: 1);
+    final labelWidget = Row(children: [
+      Flexible(child: Text(label,
+        style: TextStyle(
+          fontSize: 18,
+          height: 20 / 18,
+          color: designVariables.contextMenuItemLabel,
+        ).merge(weightVariableTextStyle(context,
+            wght: sublabel == null ? 500 : 600)),
+        overflow: TextOverflow.ellipsis,
+        maxLines: 1)),
+      ?emoji,
+    ]);
 
     final sublabelWidget = sublabel == null ? null : Text(
       sublabel,
@@ -318,10 +324,7 @@ class MentionAutocompleteItem extends StatelessWidget {
         Expanded(child: Column(
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            labelWidget,
-            if (sublabelWidget != null) sublabelWidget,
-          ])),
+          children: [labelWidget, ?sublabelWidget])),
       ]));
   }
 }

test/widgets/autocomplete_test.dart

@@ -7,12 +7,14 @@ import 'package:zulip/api/model/model.dart';
 import 'package:zulip/api/route/messages.dart';
 import 'package:zulip/api/route/channels.dart';
 import 'package:zulip/api/route/realm.dart';
+import 'package:zulip/basic.dart';
 import 'package:zulip/model/compose.dart';
 import 'package:zulip/model/emoji.dart';
 import 'package:zulip/model/localizations.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
+import 'package:zulip/widgets/autocomplete.dart';
 import 'package:zulip/widgets/compose_box.dart';
 import 'package:zulip/widgets/content.dart';
 import 'package:zulip/widgets/message_list.dart';
@@ -25,6 +27,8 @@ import '../model/test_store.dart';
 import '../test_images.dart';
 import 'test_app.dart';
 
+late PerAccountStore store;
+
 /// Simulates loading a [MessageListPage] and tapping to focus the compose input.
 ///
 /// Also adds [users] to the [PerAccountStore],
@@ -44,7 +48,7 @@ Future<Finder> setupToComposeInput(WidgetTester tester, {
 
   addTearDown(testBinding.reset);
   await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());
-  final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+  store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
   await store.addUsers([eg.selfUser, eg.otherUser]);
   await store.addUsers(users);
   final connection = store.connection as FakeApiConnection;
@@ -202,6 +206,55 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
 
+    group('User status', () {
+      void checkFindsStatusEmoji(WidgetTester tester, Finder emojiFinder) {
+        final statusEmojiFinder = find.ancestor(of: emojiFinder,
+          matching: find.byType(UserStatusEmoji));
+        check(statusEmojiFinder).findsOne();
+        check(tester.widget<UserStatusEmoji>(statusEmojiFinder)
+          .neverAnimate).isTrue();
+        check(find.ancestor(of: statusEmojiFinder,
+          matching: find.byType(MentionAutocompleteItem))).findsOne();
+      }
+
+      testWidgets('status emoji & text are set -> emoji is displayed, text is not', (tester) async {
+        final user = eg.user(fullName: 'User');
+        final composeInputFinder = await setupToComposeInput(tester, users: [user]);
+        await store.changeUserStatus(user.userId, UserStatusChange(
+          text: OptionSome('Busy'),
+          emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+            emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji))));
+        await tester.pump();
+
+        // // TODO(#226): Remove this extra edit when this bug is fixed.
+        await tester.enterText(composeInputFinder, 'hello @u');
+        await tester.enterText(composeInputFinder, 'hello @');
+        await tester.pumpAndSettle(); // async computation; options appear
+
+        checkFindsStatusEmoji(tester, find.text('\u{1f6e0}'));
+        check(find.text('Busy')).findsNothing();
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+
+      testWidgets('status emoji is not set, text is set -> text is not displayed', (tester) async {
+        final user = eg.user(fullName: 'User');
+        final composeInputFinder = await setupToComposeInput(tester, users: [user]);
+        await store.changeUserStatus(user.userId, UserStatusChange(
+          text: OptionSome('Busy'), emoji: OptionNone()));
+        await tester.pump();
+
+        // // TODO(#226): Remove this extra edit when this bug is fixed.
+        await tester.enterText(composeInputFinder, 'hello @u');
+        await tester.enterText(composeInputFinder, 'hello @');
+        await tester.pumpAndSettle(); // async computation; options appear
+
+        check(find.text('Busy')).findsNothing();
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+    });
+
     void checkWildcardShown(WildcardMentionOption wildcard, {required bool expected}) {
       check(find.text(wildcard.canonicalString)).findsExactly(expected ? 1 : 0);
     }