ui: Add edited/moved marker.

This adds basic support to displaying a edited/moved marker next to the
message content. As of now this is implemented without the swipe gesture
control that would expand the marker.

Partially addresses #171.

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

Author: PIG208

assets/l10n/app_en.arb

@@ -479,5 +479,13 @@
       "senderFullName": {"type": "String", "example": "Alice"},
       "numOthers": {"type": "int", "example": "4"}
     }
+  },
+  "messageIsEdited": "Edited",
+  "@messageIsEdited": {
+    "description": "Text that appears on a marker next to an edited message."
+  },
+  "messageIsMoved": "Moved",
+  "@messageIsMoved": {
+    "description": "Text that appears on a marker next to a moved message."
   }
 }

lib/widgets/message_list.dart

@@ -21,6 +21,7 @@ import 'page.dart';
 import 'profile.dart';
 import 'sticky_header.dart';
 import 'store.dart';
+import 'swipable_message_row.dart';
 import 'text.dart';
 import 'theme.dart';
 
@@ -962,22 +963,20 @@ class MessageWithPossibleSender extends StatelessWidget {
           if (senderRow != null)
             Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
               child: senderRow),
-          Row(crossAxisAlignment: CrossAxisAlignment.baseline,
-            textBaseline: localizedTextBaseline(context),
+          SwipableMessageRow(
+            message: message,
             children: [
-              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!)
-                  ])),
-              SizedBox(width: 16,
-                child: message.flags.contains(MessageFlag.starred)
-                  ? Icon(ZulipIcons.star_filled, size: 16, color: designVariables.star)
-                  : null),
+              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!)
+                ])),
+            SizedBox(width: 16,
+              child: message.flags.contains(MessageFlag.starred)
+                ? Icon(ZulipIcons.star_filled, size: 16, color: designVariables.star)
+                : null),
             ]),
         ])));
   }

lib/widgets/swipable_message_row.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+import '../api/model/model.dart';
+import 'icons.dart';
+import 'text.dart';
+import 'theme.dart';
+
+class SwipableMessageRow extends StatefulWidget {
+  const SwipableMessageRow({
+    super.key,
+    required this.children,
+    required this.message,
+  });
+
+  final List<Widget> children;
+  final Message message;
+
+  @override
+  State<StatefulWidget> createState() => _SwipableMessageRowState();
+}
+
+class _SwipableMessageRowState extends State<SwipableMessageRow> {
+  @override
+  Widget build(BuildContext context) {
+    final hasMarker = widget.message.editState != MessageEditState.none;
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.baseline,
+      textBaseline: localizedTextBaseline(context),
+      children: [
+        hasMarker
+          ? _EditStateMarker(editState: widget.message.editState)
+          : const SizedBox(width: 16),
+        ...widget.children,
+      ],
+    );
+  }
+}
+
+class _EditStateMarker extends StatelessWidget {
+  /// The minimum width of the marker.
+  //
+  // Currently, only the collapsed state of the marker has been implemented,
+  // where only the marker icon, not the marker text, is visible.
+  static const double widthCollapsed = 16;
+
+  const _EditStateMarker({
+    required MessageEditState editState,
+  }) : _editState = editState;
+
+  final MessageEditState _editState;
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
+    final IconData icon;
+    final double iconSize;
+
+    switch (_editState) {
+      case MessageEditState.none:
+        return const SizedBox(width: widthCollapsed);
+      case MessageEditState.edited:
+        icon = ZulipIcons.edited;
+        iconSize = 14;
+        break;
+      case MessageEditState.moved:
+        icon = ZulipIcons.message_moved;
+        iconSize = 8;
+        break;
+    }
+
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: widthCollapsed),
+      child: Padding(
+        padding: const EdgeInsets.only(left: 5, right: 3),
+        child: OverflowBox(
+          fit: OverflowBoxFit.deferToChild,
+          maxWidth: 8,
+          child: Icon(icon, size: iconSize, color: designVariables.textMarkerCollapsed)),
+        ),
+    );
+  }
+}

lib/widgets/theme.dart

@@ -83,7 +83,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     title = const Color(0xff1a1a1a),
     streamColorSwatches = StreamColorSwatches.light,
     // TODO(#95) unchanged in dark theme?
-    star = const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor();
+    star = const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+    bgMarker = const Color(0xffddecf6),
+    textMarkerExpanded = const Color(0xff26516e),
+    textMarkerCollapsed = const Color(0xff92a7b6);
 
   DesignVariables._({
     required this.bgMain,
@@ -93,6 +96,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.streamColorSwatches,
     required this.star,
+    required this.bgMarker,
+    required this.textMarkerExpanded,
+    required this.textMarkerCollapsed,
   });
 
   /// The [DesignVariables] from the context's active theme.
@@ -116,6 +122,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color star;
+  final Color bgMarker;
+  final Color textMarkerExpanded;
+  final Color textMarkerCollapsed;
 
   @override
   DesignVariables copyWith({
@@ -126,6 +135,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     StreamColorSwatches? streamColorSwatches,
     Color? star,
+    Color? bgMarker,
+    Color? textMarkerCollapsed,
+    Color? textMarkerExpanded,
   }) {
     return DesignVariables._(
       bgMain: bgMain ?? this.bgMain,
@@ -135,6 +147,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: title ?? this.title,
       streamColorSwatches: streamColorSwatches ?? this.streamColorSwatches,
       star: star ?? this.star,
+      bgMarker: bgMarker ?? this.bgMarker,
+      textMarkerExpanded: textMarkerCollapsed ?? this.textMarkerExpanded,
+      textMarkerCollapsed: textMarkerExpanded ?? this.textMarkerCollapsed,
     );
   }
 
@@ -151,6 +166,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: Color.lerp(title, other.title, t)!,
       streamColorSwatches: StreamColorSwatches.lerp(streamColorSwatches, other.streamColorSwatches, t),
       star: Color.lerp(star, other.star, t)!,
+      bgMarker: Color.lerp(bgMarker, other.bgMarker, t)!,
+      textMarkerExpanded: Color.lerp(textMarkerExpanded, other.textMarkerExpanded, t)!,
+      textMarkerCollapsed: Color.lerp(textMarkerCollapsed, other.textMarkerCollapsed, t)!,
     );
   }
 }

test/widgets/message_list_test.dart

@@ -576,6 +576,39 @@ void main() {
     });
   });
 
+  group('EditStateMarker', () {
+    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);
+    }
+
+    testWidgets('no edited or moved messages', (tester) async {
+      final message = eg.streamMessage();
+      await setupMessageListPage(tester, messages: [message]);
+      checkMarkersCount(edited: 0, moved: 0);
+    });
+
+    testWidgets('edited and moved messages from events', (tester) async {
+      final message = eg.streamMessage();
+      final message2 = eg.streamMessage();
+      await setupMessageListPage(tester, messages: [message, message2]);
+      checkMarkersCount(edited: 0, moved: 0);
+
+      await store.handleEvent(eg.updateMessageEditEvent(message, renderedContent: "edited"));
+      await tester.pump();
+      checkMarkersCount(edited: 1, moved: 0);
+
+      await store.handleEvent(eg.updateMessageMoveEvent(
+        [message, message2], origTopic: 'old', newTopic: 'new'));
+      await tester.pump();
+      checkMarkersCount(edited: 1, moved: 1);
+
+      await store.handleEvent(eg.updateMessageEditEvent(message2, renderedContent: "edited"));
+      await tester.pump();
+      checkMarkersCount(edited: 2, moved: 0);
+    });
+  });
+
   group('_UnreadMarker animations', () {
     // TODO: Improve animation state testing so it is less tied to
     //   implementation details and more focused on output, see: