make message flash when tapping reply

lib/controllers/message_controller.dart

@@ -66,6 +66,7 @@ class MessageController extends AsyncNotifier<Message?> {
             ),
           ).future,
         ),
+      "flashing": false,
       "timelineId": event.timelineRowId,
       "big": event.localContent?.bigEmoji == true,
       "eventType": type,

lib/controllers/room_chat_controller.dart

@@ -1,3 +1,5 @@
+import "dart:async";
+
 import "package:collection/collection.dart";
 import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:flutter_chat_core/flutter_chat_core.dart";
@@ -282,6 +284,16 @@ class RoomChatController extends AsyncNotifier<InMemoryChatController> {
 
   Future<void> scrollToMessage(Message message) async {
     final controller = await future;
+    Future<void> setFlashing(bool flashing) => controller.updateMessage(
+      message,
+      message.copyWith(
+        metadata: {...(message.metadata ?? {}), "flashing": flashing},
+      ),
+    );
+
+    await setFlashing(true);
+    Timer(Duration(seconds: 1), () => setFlashing(false));
+
     return await controller.scrollToMessage(message.id);
   }
 

lib/widgets/chat_page/message_wrapper.dart

@@ -9,7 +9,17 @@ class MessageWrapper extends StatelessWidget {
   const MessageWrapper(this.message, this.child, this.groupStatus, {super.key});
 
   @override
-  Widget build(BuildContext context) => Row(
+  Widget build(BuildContext context) => ClipRRect(
+    borderRadius: BorderRadius.all(Radius.circular(12)),
+    child: AnimatedContainer(
+      padding: message.metadata?["flashing"] == true
+          ? EdgeInsets.all(8)
+          : EdgeInsets.all(0),
+      color: message.metadata?["flashing"] == true
+          ? Theme.of(context).colorScheme.onSurface.withAlpha(50)
+          : Colors.transparent,
+      duration: Duration(milliseconds: 250),
+      child: Row(
         spacing: 8,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -29,14 +39,16 @@ class MessageWrapper extends StatelessWidget {
                   Text(
                     message.metadata?["displayName"] ?? message.authorId,
                     overflow: TextOverflow.ellipsis,
-                style: Theme.of(
+                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                  context,
+                      fontWeight: FontWeight.bold,
-                ).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold),
+                    ),
                   ),
                 child,
               ],
             ),
           ),
         ],
+      ),
+    ),
   );
 }

lib/widgets/chat_page/room_chat.dart

@@ -259,9 +259,7 @@ class RoomChat extends HookConsumerWidget {
                                   index, {
                                   required bool isSentByMe,
                                   MessageGroupStatus? groupStatus,
-                                }) => MessageWrapper(
+                                }) => TextMessageWrapper(
-                                  message,
-                                  TextMessageWrapper(
                                   message,
                                   content: message.text,
                                   groupStatus: groupStatus,
@@ -270,9 +268,6 @@ class RoomChat extends HookConsumerWidget {
                                   isSentByMe: isSentByMe,
                                 ),
 
-                                  groupStatus,
-                                ),
-
                             imageMessageBuilder:
                                 (
                                   context,

lib/widgets/chat_page/text_message_wrapper.dart

@@ -2,6 +2,7 @@ import "package:flutter/material.dart";
 import "package:flutter_chat_core/flutter_chat_core.dart";
 import "package:flutter_link_previewer/flutter_link_previewer.dart";
 import "package:nexus/widgets/chat_page/html/html.dart";
+import "package:nexus/widgets/chat_page/message_wrapper.dart";
 import "package:nexus/widgets/chat_page/top_widget.dart";
 
 class TextMessageWrapper extends StatelessWidget {
@@ -31,7 +32,9 @@ class TextMessageWrapper extends StatelessWidget {
     final colorScheme = theme.colorScheme;
     final textMessage = message is TextMessage ? message as TextMessage : null;
 
-    return ClipRRect(
+    return MessageWrapper(
+      message,
+      ClipRRect(
         borderRadius: BorderRadius.all(Radius.circular(8)),
         child: Container(
           padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
@@ -100,6 +103,8 @@ class TextMessageWrapper extends StatelessWidget {
             ],
           ),
         ),
+      ),
+      groupStatus,
     );
   }
 }