recent-dms: Show user status emoji in recent DMs page

Status emojis are only shown for self-1:1 and 1:1 conversation items.
They're ignored for group conversations as that's what the Web does.

Author: sm-sayedi

lib/widgets/recent_dm_conversations.dart

@@ -104,23 +104,29 @@ class RecentDmConversationsItem extends StatelessWidget {
     final store = PerAccountStoreWidget.of(context);
     final designVariables = DesignVariables.of(context);
 
-    final String title;
+    final InlineSpan title;
     final Widget avatar;
     int? userIdForPresence;
     switch (narrow.otherRecipientIds) { // TODO dedupe with DM items in [InboxPage]
       case []:
-        title = store.selfUser.fullName;
+        title = TextSpan(text: store.selfUser.fullName, children: [
+          UserStatusEmoji.asWidgetSpan(userId: store.selfUserId,
+            fontSize: 17, textScaler: MediaQuery.textScalerOf(context)),
+        ]);
         avatar = AvatarImage(userId: store.selfUserId, size: _avatarSize);
       case [var otherUserId]:
-        title = store.userDisplayName(otherUserId);
+        title = TextSpan(text: store.userDisplayName(otherUserId), children: [
+          UserStatusEmoji.asWidgetSpan(userId: otherUserId,
+            fontSize: 17, textScaler: MediaQuery.textScalerOf(context)),
+        ]);
         avatar = AvatarImage(userId: otherUserId, size: _avatarSize);
         userIdForPresence = otherUserId;
       default:
-        // TODO(i18n): List formatting, like you can do in JavaScript:
-        //   new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya'])
-        //   // 'Chris、Greg、Alya'
-        title = narrow.otherRecipientIds.map(store.userDisplayName)
-          .join(', ');
+        title = TextSpan(
+          // TODO(i18n): List formatting, like you can do in JavaScript:
+          //   new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya'])
+          //   // 'Chris、Greg、Alya'
+          text: narrow.otherRecipientIds.map(store.userDisplayName).join(', '));
         avatar = ColoredBox(color: designVariables.avatarPlaceholderBg,
           child: Center(
             child: Icon(color: designVariables.avatarPlaceholderIcon,
@@ -148,7 +154,7 @@ class RecentDmConversationsItem extends StatelessWidget {
             const SizedBox(width: 8),
             Expanded(child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 4),
-              child: Text(
+              child: Text.rich(
                 style: TextStyle(
                   fontSize: 17,
                   height: (20 / 17),

test/widgets/recent_dm_conversations_test.dart

@@ -5,7 +5,9 @@ import 'package:flutter_checks/flutter_checks.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:zulip/api/model/events.dart';
 import 'package:zulip/api/model/model.dart';
+import 'package:zulip/basic.dart';
 import 'package:zulip/model/narrow.dart';
+import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/content.dart';
 import 'package:zulip/widgets/home.dart';
 import 'package:zulip/widgets/icons.dart';
@@ -20,10 +22,13 @@ import '../model/binding.dart';
 import '../model/test_store.dart';
 import '../test_navigation.dart';
 import 'content_checks.dart';
+import 'finders.dart';
 import 'message_list_checks.dart';
 import 'page_checks.dart';
 import 'test_app.dart';
 
+late PerAccountStore store;
+
 Future<void> setupPage(WidgetTester tester, {
   required List<DmMessage> dmMessages,
   required List<User> users,
@@ -36,7 +41,7 @@ Future<void> setupPage(WidgetTester tester, {
   selfUser ??= eg.selfUser;
   final selfAccount = eg.account(user: selfUser);
   await testBinding.globalStore.add(selfAccount, eg.initialSnapshot());
-  final store = await testBinding.globalStore.perAccount(selfAccount.id);
+  store = await testBinding.globalStore.perAccount(selfAccount.id);
 
   await store.addUser(selfUser);
   for (final user in users) {
@@ -173,8 +178,9 @@ void main() {
         // TODO(#232): syntax like `check(find(…), findsOneWidget)`
         final widget = tester.widget(find.descendant(
           of: find.byType(RecentDmConversationsItem),
-          matching: find.text(expectedText),
-        ));
+          // The title might contain a WidgetSpan (for status emoji); exclude
+          // the resulting placeholder character from the text to be matched.
+          matching: findText(expectedText, includePlaceholders: false)));
         if (expectedLines != null) {
           final renderObject = tester.renderObject<RenderParagraph>(find.byWidget(widget));
           check(renderObject.size.height).equals(
@@ -183,6 +189,16 @@ void main() {
         }
       }
 
+      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(RecentDmConversationsItem))).findsOne();
+      }
+
       Future<void> markMessageAsRead(WidgetTester tester, Message message) async {
         final store = await testBinding.globalStore.perAccount(
           testBinding.globalStore.accounts.single.id);
@@ -229,6 +245,31 @@ void main() {
           checkTitle(tester, name, 2);
         });
 
+        group('User status', () {
+          testWidgets('emoji & text are set -> emoji is displayed, text is not', (tester) async {
+            final message = eg.dmMessage(from: eg.selfUser, to: []);
+            await setupPage(tester, dmMessages: [message], users: []);
+            await store.changeUserStatus(eg.selfUser.userId, UserStatusChange(
+              text: OptionSome('Busy'),
+              emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+                emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji))));
+            await tester.pump();
+
+            checkFindsStatusEmoji(tester, find.text('\u{1f6e0}'));
+            check(find.textContaining('Busy')).findsNothing();
+          });
+
+          testWidgets('emoji is not set, text is set -> text is not displayed', (tester) async {
+            final message = eg.dmMessage(from: eg.selfUser, to: []);
+            await setupPage(tester, dmMessages: [message], users: []);
+            await store.changeUserStatus(eg.selfUser.userId, UserStatusChange(
+              text: OptionSome('Busy'), emoji: OptionNone()));
+            await tester.pump();
+
+            check(find.textContaining('Busy')).findsNothing();
+          });
+        });
+
         testWidgets('unread counts', (tester) async {
           final message = eg.dmMessage(from: eg.selfUser, to: []);
           await setupPage(tester, users: [], dmMessages: [message]);
@@ -289,6 +330,33 @@ void main() {
           checkTitle(tester, user.fullName, 2);
         });
 
+        group('User status', () {
+          testWidgets('emoji & text are set -> emoji is displayed, text is not', (tester) async {
+            final user = eg.user();
+            final message = eg.dmMessage(from: eg.selfUser, to: [user]);
+            await setupPage(tester, users: [user], dmMessages: [message]);
+            await store.changeUserStatus(user.userId, UserStatusChange(
+              text: OptionSome('Busy'),
+              emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+                emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji))));
+            await tester.pump();
+
+            checkFindsStatusEmoji(tester, find.text('\u{1f6e0}'));
+            check(find.textContaining('Busy')).findsNothing();
+          });
+
+          testWidgets('emoji is not set, text is set -> text is not displayed', (tester) async {
+            final user = eg.user();
+            final message = eg.dmMessage(from: eg.selfUser, to: [user]);
+            await setupPage(tester, users: [user], dmMessages: [message]);
+            await store.changeUserStatus(user.userId, UserStatusChange(
+              text: OptionSome('Busy'), emoji: OptionNone()));
+            await tester.pump();
+
+            check(find.textContaining('Busy')).findsNothing();
+          });
+        });
+
         testWidgets('unread counts', (tester) async {
           final message = eg.dmMessage(from: eg.otherUser, to: [eg.selfUser]);
           await setupPage(tester, users: [], dmMessages: [message]);
@@ -377,6 +445,20 @@ void main() {
           checkTitle(tester, users.map((u) => u.fullName).join(', '), 2);
         });
 
+        testWidgets('status emoji & text are set -> none of them is displayed', (tester) async {
+          final users = usersList(4);
+          final message = eg.dmMessage(from: eg.selfUser, to: users);
+          await setupPage(tester, users: users, dmMessages: [message]);
+          await store.changeUserStatus(users.first.userId, UserStatusChange(
+            text: OptionSome('Busy'),
+            emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+              emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji))));
+          await tester.pump();
+
+          check(find.text('\u{1f6e0}')).findsNothing();
+          check(find.textContaining('Busy')).findsNothing();
+        });
+
         testWidgets('unread counts', (tester) async {
           final message = eg.dmMessage(from: eg.thirdUser, to: [eg.selfUser, eg.otherUser]);
           await setupPage(tester, users: [], dmMessages: [message]);