TW-2169 added avatar and name for sender messages in web

lib/pages/chat/events/message/message.dart

@@ -14,8 +14,8 @@ import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/utils/extension/event_status_custom_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';
+import 'package:fluffychat/presentation/mixins/message_avatar_mixin.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
-import 'package:fluffychat/widgets/avatar/avatar.dart';
 import 'package:fluffychat/widgets/context_menu/context_menu_action.dart';
 import 'package:fluffychat/widgets/swipeable.dart';
 import 'package:flutter/material.dart';
@@ -99,7 +99,7 @@ class Message extends StatefulWidget {
   State<Message> createState() => _MessageState();
 }
 
-class _MessageState extends State<Message> {
+class _MessageState extends State<Message> with MessageAvatarMixin {
   InViewState? inViewState;
 
   final inviewNotifier = ValueNotifier(false);
@@ -187,10 +187,13 @@ class _MessageState extends State<Message> {
             : MainAxisAlignment.start;
 
         final rowChildren = <Widget>[
-          _placeHolderWidget(
-            widget.event.isSameSenderWith(widget.previousEvent),
-            widget.event.isOwnMessage,
-            widget.event,
+          placeHolderWidget(
+            widget.onAvatarTap,
+            event: widget.event,
+            sameSender: widget.event.isSameSenderWith(widget.previousEvent),
+            ownMessage: widget.event.isOwnMessage,
+            context: context,
+            selectMode: widget.selectMode,
           ),
           Expanded(
             child: MessageContentWithTimestampBuilder(
@@ -311,36 +314,6 @@ class _MessageState extends State<Message> {
     );
   }
 
-  Widget _placeHolderWidget(bool sameSender, bool ownMessage, Event event) {
-    if (widget.selectMode || event.room.isDirectChat) {
-      return const SizedBox();
-    }
-
-    if (sameSender && !ownMessage) {
-      return Padding(
-        padding: MessageStyle.paddingAvatar,
-        child: FutureBuilder<User?>(
-          future: event.fetchSenderUser(),
-          builder: (context, snapshot) {
-            final user = snapshot.data ?? event.senderFromMemoryOrFallback;
-            return Avatar(
-              size: MessageStyle.avatarSize,
-              fontSize: MessageStyle.fontSize,
-              mxContent: user.avatarUrl,
-              name: user.calcDisplayname(),
-              onTap: () => widget.onAvatarTap!(event),
-            );
-          },
-        ),
-      );
-    }
-
-    return const Padding(
-      padding: MessageStyle.paddingAvatar,
-      child: SizedBox(width: MessageStyle.avatarSize),
-    );
-  }
-
   Widget _messageSelectedWidget(
     BuildContext context,
     Widget child,

lib/pages/chat/events/message/message_content_builder.dart

@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:fluffychat/pages/chat/events/message/reply_content_widget.dart';
 import 'package:fluffychat/pages/chat/events/message_content.dart';
 import 'package:matrix/matrix.dart' hide Visibility;
+import 'message.dart';
 
 class MessageContentBuilder extends StatelessWidget
     with MessageContentBuilderMixin {
@@ -46,6 +47,7 @@ class MessageContentBuilder extends StatelessWidget
       ownMessage: event.isOwnMessage,
       hideDisplayName: event.hideDisplayName(
         nextEvent,
+        Message.responsiveUtils.isMobile(context),
       ),
     );
     final stepWidth = sizeMessageBubble?.totalMessageWidth;

lib/pages/chat/events/message/message_content_with_timestamp_builder.dart

@@ -138,8 +138,10 @@ class MessageContentWithTimestampBuilder extends StatelessWidget {
                               Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
-                              event.hideDisplayName(nextEvent) ||
-                                      event.hideDisplayNameInBubbleChat
+                              event.hideDisplayName(
+                                nextEvent,
+                                responsiveUtils.isMobile(context),
+                              )
                                   ? const SizedBox()
                                   : DisplayNameWidget(
                                       event: event,

lib/presentation/mixins/message_avatar_mixin.dart

@@ -0,0 +1,56 @@
+import 'package:fluffychat/di/global/get_it_initializer.dart';
+import 'package:fluffychat/pages/chat/events/message/message_style.dart';
+import 'package:fluffychat/utils/responsive/responsive_utils.dart';
+import 'package:fluffychat/widgets/avatar/avatar.dart';
+import 'package:flutter/material.dart';
+import 'package:matrix/matrix.dart';
+
+mixin MessageAvatarMixin {
+  ResponsiveUtils responsive = getIt.get<ResponsiveUtils>();
+
+  bool _shouldDisplayAvatar(
+    bool sameSender,
+    bool ownMessage,
+    BuildContext context,
+  ) {
+    return sameSender && !(ownMessage && responsive.isMobile(context));
+  }
+
+  Widget placeHolderWidget(
+    Function(Event)? onAvatarTap, {
+    required bool sameSender,
+    required bool ownMessage,
+    required Event event,
+    required BuildContext context,
+    required bool selectMode,
+  }) {
+    if (selectMode ||
+        (event.room.isDirectChat && responsive.isMobile(context))) {
+      return const SizedBox();
+    }
+
+    if (_shouldDisplayAvatar(sameSender, ownMessage, context)) {
+      return Padding(
+        padding: MessageStyle.paddingAvatar,
+        child: FutureBuilder<User?>(
+          future: event.fetchSenderUser(),
+          builder: (context, snapshot) {
+            final user = snapshot.data ?? event.senderFromMemoryOrFallback;
+            return Avatar(
+              size: MessageStyle.avatarSize,
+              fontSize: MessageStyle.fontSize,
+              mxContent: user.avatarUrl,
+              name: user.calcDisplayname(),
+              onTap: () => onAvatarTap!(event),
+            );
+          },
+        ),
+      );
+    }
+
+    return const Padding(
+      padding: MessageStyle.paddingAvatar,
+      child: SizedBox(width: MessageStyle.avatarSize),
+    );
+  }
+}

lib/utils/matrix_sdk_extensions/event_extension.dart

@@ -176,9 +176,8 @@ extension LocalizedBody on Event {
         MessageTypes.File,
       }.contains(messageType);
 
-  bool hideDisplayName(Event? nextEvent) =>
-      isOwnMessage ||
-      room.isDirectChat ||
+  bool hideDisplayName(Event? nextEvent, bool isMobile) =>
+      isMobile && (isOwnMessage || room.isDirectChat) ||
       !isSameSenderWith(nextEvent) ||
       type == EventTypes.Encrypted;
 

pubspec.lock

@@ -1877,7 +1877,7 @@ packages:
     description:
       path: "."
       ref: "twake-supported-0.22.6"
-      resolved-ref: "04ec6f3b9ece8e64e031cbe5c6e8164dc2ec7f2d"
+      resolved-ref: "58585a19abc4693d96eab4f8dad9c56bf8699cc1"
       url: "[email protected]:linagora/matrix-dart-sdk.git"
     source: git
     version: "0.22.6"