msg_list [nfc]: Factor out AnimatedUnread Widget

We have basically the same animation going on for both unread marker
and mark-as-read button.

This factor out the animation into a separate widget, AnimatedUnread,
which can be used for both.

Author: Khader-1

lib/widgets/message_list.dart

@@ -461,10 +461,8 @@ class MarkAsReadWidget extends StatelessWidget {
 
     return IgnorePointer(
       ignoring: areMessagesRead,
-      child: AnimatedOpacity(
-        opacity: areMessagesRead ? 0 : 1,
-        duration: Duration(milliseconds: areMessagesRead ? 2000 : 300),
-        curve: Curves.easeOut,
+      child: _AnimatedUnread(
+        isRead: areMessagesRead,
         child: SizedBox(width: double.infinity,
           // Design referenced from:
           //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=132-9684&mode=design&t=jJwHzloKJ0TMOG4M-0
@@ -611,12 +609,8 @@ class _UnreadMarker extends StatelessWidget {
           left: 0,
           bottom: 0,
           width: 4,
-          child: AnimatedOpacity(
-            opacity: isRead ? 0 : 1,
-            // Web uses 2s and 0.3s durations, and a CSS ease-out curve.
-            // See zulip:web/styles/message_row.css .
-            duration: Duration(milliseconds: isRead ? 2000 : 300),
-            curve: Curves.easeOut,
+          child: _AnimatedUnread(
+            isRead: isRead,
             child: DecoratedBox(
               decoration: BoxDecoration(
                 color: color,
@@ -629,6 +623,24 @@ class _UnreadMarker extends StatelessWidget {
   }
 }
 
+class _AnimatedUnread extends StatelessWidget {
+  const _AnimatedUnread({required this.isRead, required this.child});
+
+  final bool isRead;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedOpacity(
+              opacity: isRead ? 0 : 1,
+              // Web uses 2s and 0.3s durations, and a CSS ease-out curve.
+              // See zulip:web/styles/message_row.css .
+              duration: Duration(milliseconds: isRead ? 2000 : 300),
+              curve: Curves.easeOut,
+              child: child);
+  }
+}
+
 class StreamMessageRecipientHeader extends StatelessWidget {
   const StreamMessageRecipientHeader({
     super.key,