muted-users: Use placeholder for avatars of muted users, where applicable

(Done by adding an is-muted condition in Avatar and AvatarImage,
with an opt-out param. Similar to how we handled users' names in a
recent commit.)

If a user is muted, we'll now show a placeholder where before we
would have shown their real avatar, in the following places:

- The sender row on messages in the message list. This and message
  content will get more treatment in a separate commit.
- @-mention autocomplete, but we'll be excluding muted users, coming
  up in a separate commit.
- User items in custom profile fields.
- 1:1 DM items in the Direct messages ("recent DMs") page. But we'll be
  excluding those items there, coming up in a separate commit.

We *don't* do this replacement in the following places, i.e., we'll
still show the real avatar:

- The header of the lightbox page. (This follows web.)
- The big avatar at the top of the profile page.

Co-authored-by: Sayed Mahmood Sayedi <[email protected]>

Author: 2 people

lib/widgets/content.dart

@@ -1666,13 +1666,15 @@ class Avatar extends StatelessWidget {
     required this.borderRadius,
     this.backgroundColor,
     this.showPresence = true,
+    this.replaceIfMuted = true,
   });
 
   final int userId;
   final double size;
   final double borderRadius;
   final Color? backgroundColor;
   final bool showPresence;
+  final bool replaceIfMuted;
 
   @override
   Widget build(BuildContext context) {
@@ -1684,7 +1686,7 @@ class Avatar extends StatelessWidget {
       borderRadius: borderRadius,
       backgroundColor: backgroundColor,
       userIdForPresence: showPresence ? userId : null,
-      child: AvatarImage(userId: userId, size: size));
+      child: AvatarImage(userId: userId, size: size, replaceIfMuted: replaceIfMuted));
   }
 }
 
@@ -1698,10 +1700,12 @@ class AvatarImage extends StatelessWidget {
     super.key,
     required this.userId,
     required this.size,
+    this.replaceIfMuted = true,
   });
 
   final int userId;
   final double size;
+  final bool replaceIfMuted;
 
   @override
   Widget build(BuildContext context) {
@@ -1712,6 +1716,10 @@ class AvatarImage extends StatelessWidget {
       return const SizedBox.shrink();
     }
 
+    if (replaceIfMuted && store.isUserMuted(userId)) {
+      return _AvatarPlaceholder(size: size);
+    }
+
     final resolvedUrl = switch (user.avatarUrl) {
       null          => null, // TODO(#255): handle computing gravatars
       var avatarUrl => store.tryResolveUrl(avatarUrl),
@@ -1732,6 +1740,32 @@ class AvatarImage extends StatelessWidget {
   }
 }
 
+/// A placeholder avatar for muted users.
+///
+/// Wrap this with [AvatarShape].
+// TODO(#1558) use this as a fallback in more places (?) and update dartdoc.
+class _AvatarPlaceholder extends StatelessWidget {
+  const _AvatarPlaceholder({required this.size});
+
+  /// The size of the placeholder box.
+  ///
+  /// This should match the `size` passed to the wrapping [AvatarShape].
+  /// The placeholder's icon will be scaled proportionally to this.
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+    return DecoratedBox(
+      decoration: BoxDecoration(color: designVariables.avatarPlaceholderBg),
+      child: Icon(ZulipIcons.person,
+        // Where the avatar placeholder appears in the Figma,
+        // this is how the icon is sized proportionally to its box.
+        size: size * 20 / 32,
+        color: designVariables.avatarPlaceholderIcon));
+  }
+}
+
 /// A rounded square shape, to wrap an [AvatarImage] or similar.
 ///
 /// If [userIdForPresence] is provided, this will paint a [PresenceCircle]

lib/widgets/lightbox.dart

@@ -195,13 +195,18 @@ class _LightboxPageLayoutState extends State<_LightboxPageLayout> {
         shape: const Border(), // Remove bottom border from [AppBarTheme]
         elevation: appBarElevation,
         title: Row(children: [
-          Avatar(size: 36, borderRadius: 36 / 8, userId: widget.message.senderId),
+          Avatar(
+            size: 36,
+            borderRadius: 36 / 8,
+            userId: widget.message.senderId,
+            replaceIfMuted: false,
+          ),
           const SizedBox(width: 8),
           Expanded(
             child: RichText(
               text: TextSpan(children: [
                 TextSpan(
-                  // TODO write a test where the sender is muted
+                  // TODO write a test where the sender is muted; check this and avatar
                   text: '${store.senderDisplayName(widget.message, replaceIfMuted: false)}\n',
 
                   // Restate default

lib/widgets/profile.dart

@@ -56,7 +56,9 @@ class ProfilePage extends StatelessWidget {
           borderRadius: 200 / 8,
           // Would look odd with this large image;
           // we'll show it by the user's name instead.
-          showPresence: false)),
+          showPresence: false,
+          replaceIfMuted: false,
+        )),
       const SizedBox(height: 16),
       Text.rich(
         TextSpan(children: [
@@ -65,7 +67,7 @@ class ProfilePage extends StatelessWidget {
             fontSize: nameStyle.fontSize!,
             textScaler: MediaQuery.textScalerOf(context),
           ),
-          // TODO write a test where the user is muted
+          // TODO write a test where the user is muted; check this and avatar
           TextSpan(text: store.userDisplayName(userId, replaceIfMuted: false)),
         ]),
         textAlign: TextAlign.center,

test/widgets/message_list_test.dart

@@ -1695,29 +1695,44 @@ void main() {
         final mutedLabelFinder = find.widgetWithText(MessageWithPossibleSender,
           mutedLabel);
 
+        final avatarFinder = find.byWidgetPredicate(
+          (widget) => widget is Avatar && widget.userId == message.senderId);
+        final mutedAvatarFinder = find.descendant(
+          of: avatarFinder,
+          matching: find.byIcon(ZulipIcons.person));
+        final nonmutedAvatarFinder = find.descendant(
+          of: avatarFinder,
+          matching: find.byType(RealmContentNetworkImage));
+
         final senderName = store.senderDisplayName(message, replaceIfMuted: false);
         assert(senderName != mutedLabel);
         final senderNameFinder = find.widgetWithText(MessageWithPossibleSender,
           senderName);
 
         check(mutedLabelFinder.evaluate().length).equals(expectIsMuted ? 1 : 0);
         check(senderNameFinder.evaluate().length).equals(expectIsMuted ? 0 : 1);
+        check(mutedAvatarFinder.evaluate().length).equals(expectIsMuted ? 1 : 0);
+        check(nonmutedAvatarFinder.evaluate().length).equals(expectIsMuted ? 0 : 1);
       }
 
-      final user = eg.user(userId: 1, fullName: 'User');
+      final user = eg.user(userId: 1, fullName: 'User', avatarUrl: '/foo.png');
       final message = eg.streamMessage(sender: user,
         content: '<p>A message</p>', reactions: [eg.unicodeEmojiReaction]);
 
       testWidgets('muted appearance', (tester) async {
+        prepareBoringImageHttpClient();
         await setupMessageListPage(tester,
           users: [user], mutedUserIds: [user.userId], messages: [message]);
         checkMessage(message, expectIsMuted: true);
+        debugNetworkImageHttpClientProvider = null;
       });
 
       testWidgets('not-muted appearance', (tester) async {
+        prepareBoringImageHttpClient();
         await setupMessageListPage(tester,
           users: [user], mutedUserIds: [], messages: [message]);
         checkMessage(message, expectIsMuted: false);
+        debugNetworkImageHttpClientProvider = null;
       });
     });
 

test/widgets/profile_test.dart

@@ -8,13 +8,15 @@ import 'package:zulip/api/model/model.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/content.dart';
+import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/page.dart';
 import 'package:zulip/widgets/profile.dart';
 
 import '../example_data.dart' as eg;
 import '../model/binding.dart';
 import '../model/test_store.dart';
+import '../test_images.dart';
 import '../test_navigation.dart';
 import 'message_list_checks.dart';
 import 'page_checks.dart';
@@ -246,12 +248,23 @@ void main() {
     });
 
     testWidgets('page builds; user field with muted user', (tester) async {
+      prepareBoringImageHttpClient();
+
+      Finder avatarFinder(int userId) => find.byWidgetPredicate(
+        (widget) => widget is Avatar && widget.userId == userId);
+      Finder mutedAvatarFinder(int userId) => find.descendant(
+        of: avatarFinder(userId),
+        matching: find.byIcon(ZulipIcons.person));
+      Finder nonmutedAvatarFinder(int userId) => find.descendant(
+        of: avatarFinder(userId),
+        matching: find.byType(RealmContentNetworkImage));
+
       final users = [
         eg.user(userId: 1, profileData: {
           0: ProfileFieldUserData(value: '[2,3]'),
         }),
-        eg.user(userId: 2, fullName: 'test user2'),
-        eg.user(userId: 3, fullName: 'test user3'),
+        eg.user(userId: 2, fullName: 'test user2', avatarUrl: '/foo.png'),
+        eg.user(userId: 3, fullName: 'test user3', avatarUrl: '/bar.png'),
       ];
 
       await setupPage(tester,
@@ -261,7 +274,14 @@ void main() {
         customProfileFields: [mkCustomProfileField(0, CustomProfileFieldType.user)]);
 
       check(find.text('Muted user')).findsOne();
+      check(mutedAvatarFinder(2)).findsOne();
+      check(nonmutedAvatarFinder(2)).findsNothing();
+
       check(find.text('test user3')).findsOne();
+      check(mutedAvatarFinder(3)).findsNothing();
+      check(nonmutedAvatarFinder(3)).findsOne();
+
+      debugNetworkImageHttpClientProvider = null;
     });
 
     testWidgets('page builds; dm links to correct narrow', (tester) async {