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

@@ -146,16 +146,31 @@ class RecentDmConversationsItem extends StatelessWidget {
             const SizedBox(width: 8),
             Expanded(child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 4),
-              child: Text(
+              child: Text.rich(
+                TextSpan(
+                  children: [
+                    TextSpan(text: title),
+                    ...(switch (narrow.otherRecipientIds) {
+                      // self-DM
+                      [] => [UserStatusEmoji.asWidgetSpan(userId: store.selfUserId,
+                          size: 17, notoColorEmojiTextSize: 14.1)],
+                      // 1:1-DM
+                      [final otherUserId] =>
+                            [UserStatusEmoji.asWidgetSpan(userId: otherUserId,
+                              size: 17, notoColorEmojiTextSize: 14.1)],
+                      // group-DM - show nothing
+                      [...] => [],
+                    }),
+                  ]
+                ),
                 style: TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
                   // TODO(design) check if this is the right variable
                   color: designVariables.labelMenuButton,
                 ),
                 maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-                title))),
+                overflow: TextOverflow.ellipsis))),
             const SizedBox(width: 12),
             unreadCount > 0
               ? Padding(padding: const EdgeInsetsDirectional.only(end: 16),

test/widgets/recent_dm_conversations_test.dart

@@ -5,8 +5,10 @@ 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/widgets/content.dart';
+import 'package:zulip/widgets/emoji.dart';
 import 'package:zulip/widgets/home.dart';
 import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/message_list.dart';
@@ -28,6 +30,7 @@ Future<void> setupPage(WidgetTester tester, {
   required List<DmMessage> dmMessages,
   required List<User> users,
   List<int>? mutedUserIds,
+  List<(int userId, UserStatusChange change)>? userStatuses,
   NavigatorObserver? navigatorObserver,
   String? newNameForSelfUser,
 }) async {
@@ -44,6 +47,8 @@ Future<void> setupPage(WidgetTester tester, {
     await store.setMutedUsers(mutedUserIds);
   }
 
+  await store.changeUserStatuses(userStatuses ?? []);
+
   await store.addMessages(dmMessages);
 
   if (newNameForSelfUser != null) {
@@ -176,7 +181,7 @@ void main() {
         // TODO(#232): syntax like `check(find(…), findsOneWidget)`
         final widget = tester.widget(find.descendant(
           of: find.byType(RecentDmConversationsItem),
-          matching: find.text(expectedText),
+          matching: find.textContaining(expectedText),
         ));
         if (expectedLines != null) {
           final renderObject = tester.renderObject<RenderParagraph>(find.byWidget(widget));
@@ -186,6 +191,16 @@ void main() {
         }
       }
 
+      void checkStatusEmoji({required bool isPresent}) {
+        final statusEmojiFinder = find.ancestor(of: find.byType(UnicodeEmojiWidget),
+          matching: find.byType(UserStatusEmoji));
+        final itemFinder = find.descendant(
+          of: find.byType(RecentDmConversationsItem),
+          matching: statusEmojiFinder,
+        );
+        check(itemFinder).findsExactly(isPresent ? 1 : 0);
+      }
+
       Future<void> markMessageAsRead(WidgetTester tester, Message message) async {
         final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
         await store.handleEvent(UpdateMessageFlagsAddEvent(
@@ -231,6 +246,28 @@ void main() {
           checkTitle(tester, name, 2);
         });
 
+        testWidgets('status emoji is set -> emoji is displayed', (tester) async {
+          final message = eg.dmMessage(from: eg.selfUser, to: []);
+          await setupPage(tester, dmMessages: [message], users: [],
+            userStatuses: [
+              (
+                eg.selfUser.userId,
+                UserStatusChange(
+                  text: OptionSome('Busy'),
+                  emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+                    emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji)))
+              ),
+            ]);
+          checkStatusEmoji(isPresent: true);
+        });
+
+        testWidgets('status emoji is not set -> emoji is not displayed', (tester) async {
+          final message = eg.dmMessage(from: eg.selfUser, to: []);
+          await setupPage(tester, dmMessages: [message], users: [],
+            userStatuses: []);
+          checkStatusEmoji(isPresent: false);
+        });
+
         testWidgets('unread counts', (tester) async {
           final message = eg.dmMessage(from: eg.selfUser, to: []);
           await setupPage(tester, users: [], dmMessages: [message]);
@@ -291,6 +328,30 @@ void main() {
           checkTitle(tester, user.fullName, 2);
         });
 
+        testWidgets('status emoji is set -> emoji is displayed', (tester) async {
+          final user = eg.user();
+          final message = eg.dmMessage(from: eg.selfUser, to: [user]);
+          await setupPage(tester, users: [user], dmMessages: [message],
+            userStatuses: [
+              (
+                user.userId,
+                UserStatusChange(
+                  text: OptionSome('Busy'),
+                  emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+                    emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji)))
+              ),
+            ]);
+          checkStatusEmoji(isPresent: true);
+        });
+
+        testWidgets('status emoji is not set -> emoji 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],
+            userStatuses: []);
+          checkStatusEmoji(isPresent: false);
+        });
+
         testWidgets('unread counts', (tester) async {
           final message = eg.dmMessage(from: eg.otherUser, to: [eg.selfUser]);
           await setupPage(tester, users: [], dmMessages: [message]);
@@ -379,6 +440,29 @@ void main() {
           checkTitle(tester, users.map((u) => u.fullName).join(', '), 2);
         });
 
+        testWidgets('status emojis are set -> emoji are not displayed', (tester) async {
+          final users = usersList(3);
+          final message = eg.dmMessage(from: eg.selfUser, to: users);
+          await setupPage(tester, users: users, dmMessages: [message],
+            userStatuses: [
+              (
+                users.first.userId,
+                UserStatusChange(
+                  text: OptionSome('Busy'),
+                  emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+                    emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji)))
+              ),
+              (
+                users.last.userId,
+                UserStatusChange(
+                  text: OptionSome('In a meeting'),
+                  emoji: OptionSome(StatusEmoji(emojiName: 'calendar',
+                    emojiCode: '1f4c5', reactionType: ReactionType.unicodeEmoji)))
+              ),
+            ]);
+          checkStatusEmoji(isPresent: false);
+        });
+
         testWidgets('unread counts', (tester) async {
           final message = eg.dmMessage(from: eg.thirdUser, to: [eg.selfUser, eg.otherUser]);
           await setupPage(tester, users: [], dmMessages: [message]);