TW-893: Remove pill on mentionned users

lib/pages/chat/events/html_message.dart

@@ -4,12 +4,13 @@ import 'package:fluffychat/pages/chat/chat.dart';
 import 'package:fluffychat/pages/image_viewer/image_viewer.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/utils/url_launcher.dart';
-import 'package:fluffychat/widgets/pill.dart';
+import 'package:fluffychat/widgets/mentionned_user.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_matrix_html/flutter_html.dart';
 import 'package:matrix/matrix.dart';
+import 'package:fluffychat/presentation/extensions/send_file_extension.dart';
 
 import 'package:fluffychat/widgets/matrix.dart';
 
@@ -174,11 +175,16 @@ class HtmlMessage extends StatelessWidget {
         if (chatController == null) {
           return null;
         }
-        return Pill(
-          identifier: identifier,
-          chatController: chatController!,
+
+        final user = chatController?.room?.getUser(identifier);
+        final displayName = user?.displayName ?? identifier;
+        return MentionnedUser(
+          displayName: displayName,
           url: url,
           onTap: onTap,
+          textStyle: defaultTextStyle?.copyWith(
+            color: themeData.colorScheme.primary,
+          ),
         );
       },
     );

lib/pages/chat/input_bar/focus_suggestion_list.dart

@@ -1,7 +1,7 @@
 import 'dart:math';
 
 import 'package:fluffychat/pages/chat/input_bar/focus_suggestion_controller.dart';
-import 'package:fluffychat/pages/chat/input_bar/input_bar.dart';
+import 'package:fluffychat/pages/chat/input_bar/input_bar_style.dart';
 import 'package:flutter/material.dart';
 
 class FocusSuggestionList extends StatefulWidget {

lib/pages/chat/input_bar/input_bar.dart

@@ -4,6 +4,7 @@ import 'package:fluffychat/pages/chat/input_bar/context_menu_input_bar.dart';
 import 'package:fluffychat/pages/chat/input_bar/focus_suggestion_controller.dart';
 import 'package:fluffychat/pages/chat/input_bar/focus_suggestion_list.dart';
 import 'package:fluffychat/pages/chat/input_bar/input_bar_shortcut.dart';
+import 'package:fluffychat/pages/chat/input_bar/input_bar_style.dart';
 import 'package:fluffychat/presentation/extensions/text_editting_controller_extension.dart';
 import 'package:fluffychat/presentation/mixins/paste_image_mixin.dart';
 import 'package:fluffychat/utils/clipboard.dart';
@@ -14,6 +15,7 @@ import 'package:fluffychat/widgets/mxc_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
+import 'package:linagora_design_flutter/linagora_design_flutter.dart';
 import 'package:matrix/matrix.dart';
 import 'package:slugify/slugify.dart';
 
@@ -535,7 +537,7 @@ class SuggestionTile extends StatelessWidget {
     if (suggestion['type'] == 'user' || suggestion['type'] == 'room') {
       final url = Uri.parse(suggestion['avatar_url'] ?? '');
       return Container(
-        padding: const EdgeInsetsDirectional.all(4.0),
+        padding: const EdgeInsetsDirectional.all(8.0),
         height: InputBarStyle.suggestionSize,
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.center,
@@ -548,12 +550,35 @@ class SuggestionTile extends StatelessWidget {
               fontSize: InputBarStyle.suggestionAvatarFontSize,
               client: client,
             ),
-            const SizedBox(width: 6),
-            Flexible(
-              child: Text(
-                suggestion['displayname'] ?? suggestion['mxid']!,
-                maxLines: 1,
-                overflow: TextOverflow.clip,
+            const SizedBox(
+              width: InputBarStyle.suggestionTileAvatarTextGap,
+            ),
+            Expanded(
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Flexible(
+                    child: Text(
+                      suggestion['displayname'] ?? suggestion['mxid']!,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                            color: Theme.of(context).colorScheme.onSurface,
+                          ),
+                    ),
+                  ),
+                  Flexible(
+                    child: Text(
+                      maxLines: 1,
+                      suggestion['mxid']!,
+                      overflow: TextOverflow.ellipsis,
+                      style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                            color: LinagoraRefColors.material().tertiary[30],
+                          ),
+                    ),
+                  ),
+                ],
               ),
             ),
           ],
@@ -563,22 +588,3 @@ class SuggestionTile extends StatelessWidget {
     return Container();
   }
 }
-
-class InputBarStyle {
-  static const double suggestionAvatarSize = 30;
-
-  static const double suggestionAvatarFontSize = 15;
-
-  static const double suggestionSize = 50;
-
-  static const double suggestionBorderRadius = 12.0;
-
-  static const double suggestionListPadding = 8.0;
-
-  static TextStyle getTypeAheadTextStyle(BuildContext context) => TextStyle(
-        fontSize: 15,
-        color: Theme.of(context).brightness == Brightness.light
-            ? Colors.black
-            : Colors.white,
-      );
-}

lib/pages/chat/input_bar/input_bar_style.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class InputBarStyle {
+  static const double suggestionAvatarSize = 30;
+
+  static const double suggestionAvatarFontSize = 15;
+
+  static const double suggestionSize = 50;
+
+  static const double suggestionBorderRadius = 12.0;
+
+  static const double suggestionListPadding = 8.0;
+
+  static TextStyle getTypeAheadTextStyle(BuildContext context) => TextStyle(
+        fontSize: 15,
+        color: Theme.of(context).brightness == Brightness.light
+            ? Colors.black
+            : Colors.white,
+      );
+
+  static const double suggestionTileAvatarTextGap = 8.0;
+}

lib/widgets/mentionned_user.dart

@@ -0,0 +1,37 @@
+import 'package:fluffychat/utils/string_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_matrix_html/text_parser.dart';
+
+class MentionnedUser extends StatelessWidget {
+  final String displayName;
+  final String url;
+  final OnPillTap? onTap;
+  final TextStyle? textStyle;
+
+  const MentionnedUser({
+    Key? key,
+    required this.displayName,
+    required this.url,
+    this.textStyle,
+    this.onTap,
+  }) : super(key: key);
+
+  final int _maxCharactersDisplayNameForPill = 12;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        onTap?.call(url);
+      },
+      child: Text(
+        displayName.shortenDisplayName(
+          maxCharacters: _maxCharactersDisplayNameForPill,
+        ),
+        style: textStyle,
+        maxLines: 1,
+        overflow: TextOverflow.clip,
+      ),
+    );
+  }
+}