Add mention screen

Signed-off-by: Sahil Kumar <[email protected]>

example/lib/main.dart

@@ -250,8 +250,71 @@ class _HomePageState extends State<HomePage> {
 class UserMentionPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return Center(
+    final user = StreamChat.of(context).user;
-      child: Text('On Pause Right Now!'),
+    return MessageSearchBloc(
+      child: MessageSearchListView(
+        messageQuery: '@${user.name}',
+        filters: {
+          'members': {
+            r'$in': [user.id]
+          }
+        },
+        sortOptions: [
+          SortOption(
+            'created_at',
+            direction: SortOption.ASC,
+          ),
+        ],
+        paginationParams: PaginationParams(limit: 20),
+        showResultCount: false,
+        emptyBuilder: (_, __) {
+          return LayoutBuilder(
+            builder: (context, viewportConstraints) {
+              return SingleChildScrollView(
+                physics: AlwaysScrollableScrollPhysics(),
+                child: ConstrainedBox(
+                  constraints: BoxConstraints(
+                    minHeight: viewportConstraints.maxHeight,
+                  ),
+                  child: Center(
+                    child: Column(
+                      children: [
+                        Padding(
+                          padding: const EdgeInsets.all(24),
+                          child: StreamSvgIcon.mentions(
+                            size: 96,
+                            color: Colors.grey,
+                          ),
+                        ),
+                        Text('No mentions exist yet...'),
+                      ],
+                    ),
+                  ),
+                ),
+              );
+            },
+          );
+        },
+        onItemTap: (messageResponse) async {
+          final client = StreamChat.of(context).client;
+          final message = messageResponse.message;
+          final channel = client.channel(
+            messageResponse.channel.type,
+            id: messageResponse.channel.id,
+          );
+          if (channel.state == null) {
+            await channel.watch();
+          }
+          Navigator.pushNamed(
+            context,
+            Routes.CHANNEL_PAGE,
+            arguments: ChannelPageArgs(
+              channel: channel,
+              initialMessage: message,
+            ),
+          );
+        },
+      ),
     );
   }
 }
@@ -336,6 +399,37 @@ class _ChannelListPageState extends State<ChannelListPage> {
                               ),
                             ],
                             paginationParams: PaginationParams(limit: 20),
+                            emptyBuilder: (_, query) {
+                              return LayoutBuilder(
+                                builder: (context, viewportConstraints) {
+                                  return SingleChildScrollView(
+                                    physics: AlwaysScrollableScrollPhysics(),
+                                    child: ConstrainedBox(
+                                      constraints: BoxConstraints(
+                                        minHeight:
+                                            viewportConstraints.maxHeight,
+                                      ),
+                                      child: Center(
+                                        child: Column(
+                                          children: [
+                                            Padding(
+                                              padding: const EdgeInsets.all(24),
+                                              child: StreamSvgIcon.search(
+                                                size: 96,
+                                                color: Colors.grey,
+                                              ),
+                                            ),
+                                            Text(
+                                              'No results for \"$query\"...',
+                                            ),
+                                          ],
+                                        ),
+                                      ),
+                                    ),
+                                  );
+                                },
+                              );
+                            },
                             onItemTap: (messageResponse) async {
                               final client = StreamChat.of(context).client;
                               final message = messageResponse.message;

lib/src/message_list_view.dart

@@ -116,6 +116,7 @@ class MessageListView extends StatefulWidget {
     this.scrollController,
     this.itemPositionListener,
     this.highlightInitialMessage = false,
+    this.highlightColor = const Color(0XFFFBF4DD),
   }) : super(key: key);
 
   /// Function used to build a custom message widget
@@ -162,6 +163,11 @@ class MessageListView extends StatefulWidget {
   /// Also See [StreamChannel]
   final bool highlightInitialMessage;
 
+  /// The color used for highlighting the initialMessage if there is any.
+  ///
+  /// Also See [highlightInitialMessage]
+  final Color highlightColor;
+
   @override
   _MessageListViewState createState() => _MessageListViewState();
 }
@@ -796,13 +802,12 @@ class _MessageListViewState extends State<MessageListView> {
     if (!initialMessageHighlightComplete &&
         widget.highlightInitialMessage &&
         _isInitialMessage(message.id)) {
-      final accentColor = Theme.of(context).accentColor;
       child = TweenAnimationBuilder<Color>(
         tween: ColorTween(
-          begin: accentColor.withOpacity(0.7),
+          begin: widget.highlightColor,
-          end: Colors.transparent,
+          end: Colors.white10,
         ),
-        duration: const Duration(seconds: 2),
+        duration: const Duration(seconds: 3),
         child: child,
         onEnd: () {
           initialMessageHighlightComplete = true;