msglist: Implement new edited/moved label design.

This replaces the gutter edit state marker design. Since it leads to
message displacement, a previous test case is no longer applicable.

We also inline part of what was previously in edit_state_marker.dart,
because the new design simplifies the implementation.

The colors are taken from the figma design:

  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3038-56393&t=WMT80mwuFaruNbVf-1

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -529,5 +529,13 @@
   "manyPeopleTyping": "Several people are typing…",
   "@manyPeopleTyping": {
     "description": "Text to display when there are multiple users typing."
+  },
+  "messageIsEditedLabel": "EDITED",
+  "@messageIsEditedLabel": {
+    "description": "Label for an edited message."
+  },
+  "messageIsMovedLabel": "MOVED",
+  "@messageIsMovedLabel": {
+    "description": "Label for a moved message."
   }
 }

lib/widgets/edit_state_marker.dart

@@ -22,7 +22,6 @@ import 'page.dart';
 import 'profile.dart';
 import 'sticky_header.dart';
 import 'store.dart';
-import 'edit_state_marker.dart';
 import 'text.dart';
 import 'theme.dart';
 
@@ -33,7 +32,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Colors.black,
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
-      editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
+      editedMovedLabel: Colors.black.withOpacity(0.35),
       messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
@@ -60,8 +59,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Colors.white,
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
-      // TODO(design-dark) need proper dark-theme color (this is ad hoc)
-      editedMovedMarkerCollapsed: const Color.fromARGB(128, 214, 202, 194),
+      editedMovedLabel: Colors.white.withOpacity(0.35),
       messageTimestamp: const HSLColor.fromAHSL(0.6, 0, 0, 1).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
@@ -86,7 +84,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     required this.dateSeparator,
     required this.dateSeparatorText,
     required this.dmRecipientHeaderBg,
-    required this.editedMovedMarkerCollapsed,
+    required this.editedMovedLabel,
     required this.messageTimestamp,
     required this.recipientHeaderText,
     required this.senderBotIcon,
@@ -111,7 +109,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   final Color dateSeparator;
   final Color dateSeparatorText;
   final Color dmRecipientHeaderBg;
-  final Color editedMovedMarkerCollapsed;
+  final Color editedMovedLabel;
   final Color messageTimestamp;
   final Color recipientHeaderText;
   final Color senderBotIcon;
@@ -127,7 +125,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     Color? dateSeparator,
     Color? dateSeparatorText,
     Color? dmRecipientHeaderBg,
-    Color? editedMovedMarkerCollapsed,
+    Color? editedMovedLabel,
     Color? messageTimestamp,
     Color? recipientHeaderText,
     Color? senderBotIcon,
@@ -142,7 +140,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: dateSeparator ?? this.dateSeparator,
       dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
-      editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
+      editedMovedLabel: editedMovedLabel ?? this.editedMovedLabel,
       messageTimestamp: messageTimestamp ?? this.messageTimestamp,
       recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
       senderBotIcon: senderBotIcon ?? this.senderBotIcon,
@@ -164,7 +162,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
       dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
       dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
-      editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, t)!,
+      editedMovedLabel: Color.lerp(editedMovedLabel, other.editedMovedLabel, t)!,
       messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
       recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
       senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
@@ -1253,6 +1251,29 @@ class MessageWithPossibleSender extends StatelessWidget {
         ]);
     }
 
+    Widget? editStateRow;
+    if (message.editState != MessageEditState.none) {
+      final localizations = ZulipLocalizations.of(context);
+      final String editStateText;
+      switch (message.editState) {
+        case MessageEditState.edited:
+          editStateText = localizations.messageIsEditedLabel;
+        case MessageEditState.moved:
+          editStateText = localizations.messageIsMovedLabel;
+        case MessageEditState.none:
+          editStateText = '';
+          assert(false);
+      }
+      editStateRow = Text(editStateText,
+        textAlign: TextAlign.end,
+        style: TextStyle(
+          color: messageListTheme.editedMovedLabel,
+          fontFamily: 'Source Sans 3',
+          fontSize: 12,
+          height: (12 / 12),
+      ));
+    }
+
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onLongPress: () => showMessageActionSheet(context: context, message: message),
@@ -1262,21 +1283,27 @@ class MessageWithPossibleSender extends StatelessWidget {
           if (senderRow != null)
             Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
               child: senderRow),
-          EditStateMarker(
-            editState: message.editState,
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.baseline,
+            textBaseline: localizedTextBaseline(context),
             children: [
-              Expanded(child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  MessageContent(message: message, content: item.content),
-                  if ((message.reactions?.total ?? 0) > 0)
-                    ReactionChipsList(messageId: message.id, reactions: message.reactions!)
-                ])),
+              const SizedBox(width: 16),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    MessageContent(message: message, content: item.content),
+                    if ((message.reactions?.total ?? 0) > 0)
+                      ReactionChipsList(messageId: message.id, reactions: message.reactions!),
+                    if (editStateRow != null)
+                      editStateRow,
+                  ]),
+              ),
               SizedBox(width: 16,
                 child: message.flags.contains(MessageFlag.starred)
                   ? Icon(ZulipIcons.star_filled, size: 16, color: designVariables.star)
                   : null),
-            ]),
+          ]),
         ])));
   }
 }

lib/widgets/message_list.dart

@@ -16,7 +16,6 @@ import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/autocomplete.dart';
 import 'package:zulip/widgets/content.dart';
-import 'package:zulip/widgets/emoji_reaction.dart';
 import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/store.dart';
@@ -1037,10 +1036,10 @@ void main() {
     });
   });
 
-  group('EditStateMarker', () {
+  group('EditStateLabel', () {
     void checkMarkersCount({required int edited, required int moved}) {
-      check(find.byIcon(ZulipIcons.edited).evaluate()).length.equals(edited);
-      check(find.byIcon(ZulipIcons.message_moved).evaluate()).length.equals(moved);
+      check(find.text('EDITED').evaluate()).length.equals(edited);
+      check(find.text('MOVED').evaluate()).length.equals(moved);
     }
 
     testWidgets('no edited or moved messages', (tester) async {
@@ -1068,72 +1067,6 @@ void main() {
       await tester.pump();
       checkMarkersCount(edited: 2, moved: 0);
     });
-
-    List<List<(String, Rect)>> captureMessageRects(
-      WidgetTester tester,
-      List<Message> messages,
-      Message targetMessage,
-    ) {
-      assert(messages.contains(targetMessage));
-      final List<List<(String, Rect)>> result = [];
-      for (final message in messages) {
-        final baseFinder = find.byWidgetPredicate(
-          (widget) => widget is MessageWithPossibleSender
-            && widget.item.message.id == message.id);
-
-        Rect getRectMatching(Finder matching) {
-          final finder = find.descendant(
-            of: baseFinder, matching: matching)..tryEvaluate();
-          check(finder.found, because: '${message.content}: $matching')
-            .length.equals(1);
-          return tester.getRect(finder.first);
-        }
-
-        result.add([
-          ('MessageWithPossibleSender', tester.getRect(baseFinder)),
-          ('MessageContent', getRectMatching(find.byType(MessageContent))),
-          ('Paragraph', getRectMatching(find.byType(Paragraph))),
-          if (message.id == targetMessage.id) ...[
-            ('Star', getRectMatching(find.byIcon(ZulipIcons.star_filled))),
-            ('ReactionChipsList', getRectMatching(find.byType(ReactionChipsList))),
-          ],
-        ]);
-      }
-      return result;
-    }
-
-    testWidgets('edit state updates do not affect layout', (tester) async {
-      final messages = [
-        eg.streamMessage(topic: 'orig'),
-        eg.streamMessage(
-          topic: 'orig',
-          reactions: [eg.unicodeEmojiReaction, eg.realmEmojiReaction],
-          flags: [MessageFlag.starred]),
-        eg.streamMessage(topic: 'orig'),
-      ];
-      final StreamMessage messageWithMarker = messages[1];
-      await setupMessageListPage(tester, messages: messages);
-      final rectsBefore = captureMessageRects(tester, messages, messageWithMarker);
-      checkMarkersCount(edited: 0, moved: 0);
-
-      await store.handleEvent(eg.updateMessageEventMoveFrom(
-        origMessages: [store.messages[messageWithMarker.id] as StreamMessage],
-        newTopic: 'new'));
-      await tester.pump();
-      await store.handleEvent(eg.updateMessageEventMoveFrom(
-        origMessages: [store.messages[messageWithMarker.id] as StreamMessage],
-        newTopic: 'orig'));
-      await tester.pump();
-      check(captureMessageRects(tester, messages, messageWithMarker))
-        .deepEquals(rectsBefore);
-      checkMarkersCount(edited: 0, moved: 1);
-
-      await store.handleEvent(eg.updateMessageEditEvent(messageWithMarker));
-      await tester.pump();
-      check(captureMessageRects(tester, messages, messageWithMarker))
-        .deepEquals(rectsBefore);
-      checkMarkersCount(edited: 1, moved: 0);
-    });
   });
 
   group('_UnreadMarker animations', () {