recent-dms: Distinguish muted users in recent DMs page

Author: sm-sayedi

lib/widgets/recent_dm_conversations.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+import '../generated/l10n/zulip_localizations.dart';
 import '../model/narrow.dart';
 import '../model/recent_dm_conversations.dart';
 import '../model/unreads.dart';
@@ -79,6 +80,7 @@ class RecentDmConversationsItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
+    final localizations = ZulipLocalizations.of(context);
     final designVariables = DesignVariables.of(context);
 
     final String title;
@@ -88,16 +90,26 @@ class RecentDmConversationsItem extends StatelessWidget {
         title = store.selfUser.fullName;
         avatar = AvatarImage(userId: store.selfUserId, size: _avatarSize);
       case [var otherUserId]:
-        // TODO(#296) actually don't show this row if the user is muted?
-        //   (should we offer a "spam folder" style summary screen of recent
-        //   1:1 DM conversations from muted users?)
-        title = store.userDisplayName(otherUserId);
-        avatar = AvatarImage(userId: otherUserId, size: _avatarSize);
+        // Although we currently don't display a DM conversation with a muted
+        // user, maybe in the future we will have the "Search by location"
+        // feature similar to Web where a DM conversation with a muted user is
+        // displayed if searched for explicitly; for example using: "dm:Bo Lin".
+        //   https://zulip.com/help/search-for-messages#search-by-location
+        final isUserMuted = store.isUserMuted(otherUserId);
+        title = isUserMuted
+          ? localizations.mutedUser
+          : store.userDisplayName(otherUserId);
+        avatar = isUserMuted
+          ? AvatarPlaceholder(size: _avatarSize)
+          : AvatarImage(userId: otherUserId, size: _avatarSize);
       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)
+        title = narrow.otherRecipientIds.map((id) =>
+          store.isUserMuted(id)
+            ? localizations.mutedUser
+            : store.userDisplayName(id))
           .join(', ');
         avatar = ColoredBox(color: designVariables.groupDmConversationIconBg,
           child: Center(