msglist: Add animated marker for unread messages

Adds a new _UnreadMarker that renders as a 4px solid
border on the left edge of messages.

Fixes: zulip#79

Author: sirpengi

lib/widgets/message_list.dart

@@ -355,10 +355,45 @@ class MessageItem extends StatelessWidget {
     return StickyHeaderItem(
       allowOverflow: !item.isLastInBlock,
       header: RecipientHeader(message: message),
-      child: Column(children: [
-        MessageWithPossibleSender(item: item),
-        if (trailing != null && item.isLastInBlock) trailing!,
-      ]));
+      child: _UnreadMarker(
+        isRead: message.flags.contains(MessageFlag.read),
+        child: Column(children: [
+          MessageWithPossibleSender(item: item),
+          if (trailing != null && item.isLastInBlock) trailing!,
+        ])));
+  }
+}
+
+/// Widget responsible for showing the read status of a message.
+class _UnreadMarker extends StatelessWidget {
+  const _UnreadMarker({required this.isRead, required this.child});
+
+  final bool isRead;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        child,
+        Positioned(
+          top: 0,
+          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: ColoredBox(
+              // The color hsl(227deg 78% 59%) comes from the Figma mockup at:
+              //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132-9684
+              // See discussion about design at:
+              //   https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20unread.20marker/near/1658008
+              color: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor()))),
+      ]);
   }
 }
 

test/widgets/message_list_test.dart

@@ -300,4 +300,49 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
   });
+
+  group('_UnreadMarker animations', () {
+    Animation getAnimation(WidgetTester tester) {
+      final widget = tester.widget<FadeTransition>(find.descendant(
+        of: find.byType(MessageItem),
+        matching: find.byType(FadeTransition)));
+      return widget.opacity;
+    }
+
+    testWidgets('from read to unread', (WidgetTester tester) async {
+      final message = eg.streamMessage(flags: [MessageFlag.read]);
+      await setupMessageListPage(tester, messages: [message]);
+
+      check(getAnimation(tester).value).equals(0);
+
+      store.handleEvent(eg.updateMessageFlagsRemoveEvent(
+        MessageFlag.read, [message]));
+      await tester.pump(); // process handleEvent
+      check(getAnimation(tester).status).equals(AnimationStatus.forward);
+
+      await tester.pumpAndSettle();
+
+      check(getAnimation(tester).value).equals(1.0);
+    });
+
+    testWidgets('from unread to read', (WidgetTester tester) async {
+      final message = eg.streamMessage(flags: []);
+      await setupMessageListPage(tester, messages: [message]);
+
+      check(getAnimation(tester).value).equals(1.0);
+
+      store.handleEvent(UpdateMessageFlagsAddEvent(
+        id: 1,
+        flag: MessageFlag.read,
+        messages: [message.id],
+        all: false,
+      ));
+      await tester.pump(); // process handleEvent
+      check(getAnimation(tester).status).equals(AnimationStatus.forward);
+
+      await tester.pumpAndSettle();
+
+      check(getAnimation(tester).value).equals(0);
+    });
+  });
 }