RecentDmConversationsPage: Show unread counts

This follows Vlad's suggestion to adjust the gap between the right
edge of the text and the counter, from the Figma's 8px to 12px:
  https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/design.3A.20DM-conversation.20list/near/1672155

Fixes: #328

Author: chrisbobbe

lib/widgets/recent_dm_conversations.dart

@@ -1,7 +1,10 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 import '../model/narrow.dart';
 import '../model/recent_dm_conversations.dart';
+import '../model/unreads.dart';
 import 'content.dart';
 import 'icons.dart';
 import 'message_list.dart';
@@ -23,24 +26,30 @@ class RecentDmConversationsPage extends StatefulWidget {
 
 class _RecentDmConversationsPageState extends State<RecentDmConversationsPage> with PerAccountStoreAwareStateMixin<RecentDmConversationsPage> {
   RecentDmConversationsView? model;
+  Unreads? unreadsModel;
 
   @override
   void onNewStore() {
     model?.removeListener(_modelChanged);
     model = PerAccountStoreWidget.of(context).recentDmConversationsView
       ..addListener(_modelChanged);
+
+    unreadsModel?.removeListener(_modelChanged);
+    unreadsModel = PerAccountStoreWidget.of(context).unreads
+      ..addListener(_modelChanged);
   }
 
   @override
   void dispose() {
     model?.removeListener(_modelChanged);
+    unreadsModel?.removeListener(_modelChanged);
     super.dispose();
   }
 
   void _modelChanged() {
     setState(() {
-      // The actual state lives in [model].
-      // This method was called because that just changed.
+      // The actual state lives in [model] and [unreadsModel].
+      // This method was called because one of those just changed.
     });
   }
 
@@ -51,14 +60,25 @@ class _RecentDmConversationsPageState extends State<RecentDmConversationsPage> w
       appBar: AppBar(title: const Text('Direct messages')),
       body: ListView.builder(
         itemCount: sorted.length,
-        itemBuilder: (context, index) => RecentDmConversationsItem(narrow: sorted[index])));
+        itemBuilder: (context, index) {
+          final narrow = sorted[index];
+          return RecentDmConversationsItem(
+            narrow: narrow,
+            unreadCount: unreadsModel!.countInDmNarrow(narrow),
+          );
+        }));
   }
 }
 
 class RecentDmConversationsItem extends StatelessWidget {
-  const RecentDmConversationsItem({super.key, required this.narrow});
+  const RecentDmConversationsItem({
+    super.key,
+    required this.narrow,
+    required this.unreadCount,
+  });
 
   final DmNarrow narrow;
+  final int unreadCount;
 
   @override
   Widget build(BuildContext context) {
@@ -108,7 +128,26 @@ class RecentDmConversationsItem extends StatelessWidget {
               overflow: TextOverflow.ellipsis,
               title))),
           const SizedBox(width: 12),
-          // TODO(#253): Unread count
+          unreadCount > 0
+            ? Padding(
+                padding: const EdgeInsetsDirectional.only(end: 16),
+                child: DecoratedBox(
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(3),
+                    color: const Color.fromRGBO(102, 102, 153, 0.15),
+                  ),
+                  child: Padding(
+                    padding: const EdgeInsetsDirectional.fromSTEB(4, 0, 4, 1),
+                    child: Text(
+                      style: const TextStyle(
+                        fontFamily: 'Source Sans 3',
+                        fontSize: 16,
+                        height: (18 / 16),
+                        fontFeatures: [FontFeature.enable('smcp')], // small caps
+                        color: Color(0xFF222222),
+                      ).merge(weightVariableTextStyle(context)),
+                      unreadCount.toString()))))
+            : const SizedBox(),
         ])));
   }
 }

test/flutter_checks.dart

@@ -35,6 +35,10 @@ extension ValueNotifierChecks<T> on Subject<ValueNotifier<T>> {
   Subject<T> get value => has((c) => c.value, 'value');
 }
 
+extension TextChecks on Subject<Text> {
+  Subject<String?> get data => has((t) => t.data, 'data');
+}
+
 extension TextStyleChecks on Subject<TextStyle> {
   Subject<bool> get inherit => has((t) => t.inherit, 'inherit');
   Subject<List<FontVariation>?> get fontVariations => has((t) => t.fontVariations, 'fontVariations');

test/widgets/recent_dm_conversations_test.dart

@@ -13,6 +13,7 @@ import 'package:zulip/widgets/recent_dm_conversations.dart';
 import 'package:zulip/widgets/store.dart';
 
 import '../example_data.dart' as eg;
+import '../flutter_checks.dart';
 import '../model/binding.dart';
 import '../model/test_store.dart';
 import '../test_navigation.dart';
@@ -106,7 +107,7 @@ void main() {
   });
 
   group('RecentDmConversationsItem', () {
-    group('appearance', () {
+    group('content/appearance', () {
       void checkAvatar(WidgetTester tester, DmNarrow narrow) {
         final shape = tester.widget<AvatarShape>(
           find.descendant(
@@ -145,6 +146,26 @@ void main() {
         }
       }
 
+      Future<void> markMessageAsRead(WidgetTester tester, Message message) async {
+        final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+        store.handleEvent(UpdateMessageFlagsAddEvent(
+          id: 1, flag: MessageFlag.read, all: false, messages: [message.id]));
+        await tester.pump();
+      }
+
+      void checkUnreadCount(WidgetTester tester, int expectedCount) {
+        final Text? textWidget = tester.widgetList<Text>(find.descendant(
+          of: find.byType(RecentDmConversationsItem),
+          matching: find.textContaining(RegExp(r'^\d+$'),
+        ))).singleOrNull;
+
+        if (expectedCount == 0) {
+          check(textWidget).isNull();
+        } else {
+          check(textWidget).isNotNull().data.equals(expectedCount.toString());
+        }
+      }
+
       group('self-1:1', () {
         testWidgets('has right title/avatar', (WidgetTester tester) async {
           final message = eg.dmMessage(from: eg.selfUser, to: []);
@@ -169,6 +190,15 @@ void main() {
             newNameForSelfUser: name);
           checkTitle(tester, name, 2);
         });
+
+        testWidgets('unread counts', (WidgetTester tester) async {
+          final message = eg.dmMessage(from: eg.selfUser, to: []);
+          await setupPage(tester, users: [], dmMessages: [message]);
+
+          checkUnreadCount(tester, 1);
+          await markMessageAsRead(tester, message);
+          checkUnreadCount(tester, 0);
+        });
       });
 
       group('1:1', () {
@@ -206,6 +236,15 @@ void main() {
           await setupPage(tester, users: [user], dmMessages: [message]);
           checkTitle(tester, user.fullName, 2);
         });
+
+        testWidgets('unread counts', (WidgetTester tester) async {
+          final message = eg.dmMessage(from: eg.otherUser, to: [eg.selfUser]);
+          await setupPage(tester, users: [], dmMessages: [message]);
+
+          checkUnreadCount(tester, 1);
+          await markMessageAsRead(tester, message);
+          checkUnreadCount(tester, 0);
+        });
       });
 
       group('group', () {
@@ -255,6 +294,15 @@ void main() {
           await setupPage(tester, users: users, dmMessages: [message]);
           checkTitle(tester, users.map((u) => u.fullName).join(', '), 2);
         });
+
+        testWidgets('unread counts', (WidgetTester tester) async {
+          final message = eg.dmMessage(from: eg.thirdUser, to: [eg.selfUser, eg.otherUser]);
+          await setupPage(tester, users: [], dmMessages: [message]);
+
+          checkUnreadCount(tester, 1);
+          await markMessageAsRead(tester, message);
+          checkUnreadCount(tester, 0);
+        });
       });
     });