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: #79

Author: sirpengi

lib/widgets/message_list.dart

@@ -283,6 +283,7 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
               header: header, child: header);
           case MessageListMessageItem():
             return MessageItem(
+              key: ValueKey(data.message.id),
               trailing: i == 0 ? const SizedBox(height: 8) : const SizedBox(height: 11),
               item: data);
         }
@@ -355,10 +356,51 @@ 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: Container(
+              decoration: BoxDecoration(
+                // 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(),
+                // TODO(#95): Don't show this extra border in dark mode, see:
+                //   https://github.com/zulip/zulip-flutter/pull/317#issuecomment-1784311663
+                border: Border(left: BorderSide(
+                  width: 1,
+                  color: Colors.white.withOpacity(0.6))))))),
+      ]);
   }
 }
 

test/flutter_checks.dart

@@ -7,6 +7,11 @@ import 'package:checks/checks.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 
+extension AnimationChecks<T> on Subject<Animation<T>> {
+  Subject<AnimationStatus> get status => has((d) => d.status, 'status');
+  Subject<T> get value => has((d) => d.value, 'value');
+}
+
 extension ClipboardDataChecks on Subject<ClipboardData> {
   Subject<String?> get text => has((d) => d.text, 'text');
 }

test/widgets/message_list_test.dart

@@ -17,6 +17,7 @@ import '../example_data.dart' as eg;
 import '../model/binding.dart';
 import '../model/message_list_test.dart';
 import '../model/test_store.dart';
+import '../flutter_checks.dart';
 import '../stdlib_checks.dart';
 import '../test_images.dart';
 import 'content_checks.dart';
@@ -300,4 +301,60 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
   });
+
+  group('_UnreadMarker animations', () {
+    // TODO: Improve animation state testing so it is less tied to
+    //   implementation details and more focused on output, see:
+    //   https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/robust.20widget.20finders.20in.20tests/near/1671738
+    Animation<double> getAnimation(WidgetTester tester, int messageId) {
+      final widget = tester.widget<FadeTransition>(find.descendant(
+        of: find.byKey(ValueKey(messageId)),
+        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, message.id))
+        ..value.equals(0.0)
+        ..status.equals(AnimationStatus.dismissed);
+
+      store.handleEvent(eg.updateMessageFlagsRemoveEvent(
+        MessageFlag.read, [message]));
+      await tester.pump(); // process handleEvent
+      check(getAnimation(tester, message.id))
+        ..value.equals(0.0)
+        ..status.equals(AnimationStatus.forward);
+
+      await tester.pumpAndSettle();
+      check(getAnimation(tester, message.id))
+        ..value.equals(1.0)
+        ..status.equals(AnimationStatus.completed);
+    });
+
+    testWidgets('from unread to read', (WidgetTester tester) async {
+      final message = eg.streamMessage(flags: []);
+      await setupMessageListPage(tester, messages: [message]);
+      check(getAnimation(tester, message.id))
+        ..value.equals(1.0)
+        ..status.equals(AnimationStatus.dismissed);
+
+      store.handleEvent(UpdateMessageFlagsAddEvent(
+        id: 1,
+        flag: MessageFlag.read,
+        messages: [message.id],
+        all: false,
+      ));
+      await tester.pump(); // process handleEvent
+      check(getAnimation(tester, message.id))
+        ..value.equals(1.0)
+        ..status.equals(AnimationStatus.forward);
+
+      await tester.pumpAndSettle();
+      check(getAnimation(tester, message.id))
+        ..value.equals(0.0)
+        ..status.equals(AnimationStatus.completed);
+    });
+  });
 }