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 zulip#171.

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

Author: PIG208

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,23 +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!)
-                  ])),
+              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),
-            ]),
+                  : null)]),
         ])));
   }
 }

lib/widgets/swipable_message_row.dart

@@ -0,0 +1,80 @@
+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 EdgeInsetsDirectional.only(start: 5, end: 3),
+        child: Icon(icon, size: iconSize,
+          color: designVariables.editedMovedMarkerCollapsed)));
+  }
+}

lib/widgets/theme.dart

@@ -83,7 +83,13 @@ 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(),
+    // TODO(#95) need dark-theme color
+    editedMovedMarkerBg = const Color(0xffddecf6),
+    // TODO(#95) need dark-theme color
+    editedMovedMarkerExpanded = const Color(0xff26516e),
+    // TODO(#95) need dark-theme color
+    editedMovedMarkerCollapsed = const Color.fromARGB(128, 146, 167, 182);
 
   DesignVariables._({
     required this.bgMain,
@@ -93,6 +99,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.streamColorSwatches,
     required this.star,
+    required this.editedMovedMarkerBg,
+    required this.editedMovedMarkerExpanded,
+    required this.editedMovedMarkerCollapsed,
   });
 
   /// The [DesignVariables] from the context's active theme.
@@ -116,6 +125,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color star;
+  final Color editedMovedMarkerBg;
+  final Color editedMovedMarkerExpanded;
+  final Color editedMovedMarkerCollapsed;
 
   @override
   DesignVariables copyWith({
@@ -126,6 +138,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     StreamColorSwatches? streamColorSwatches,
     Color? star,
+    Color? editedMovedMarkerBg,
+    Color? editedMovedMarkerExpanded,
+    Color? editedMovedMarkerCollapsed,
   }) {
     return DesignVariables._(
       bgMain: bgMain ?? this.bgMain,
@@ -135,6 +150,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: title ?? this.title,
       streamColorSwatches: streamColorSwatches ?? this.streamColorSwatches,
       star: star ?? this.star,
+      editedMovedMarkerBg: editedMovedMarkerBg ?? this.editedMovedMarkerBg,
+      editedMovedMarkerExpanded: editedMovedMarkerExpanded ?? this.editedMovedMarkerExpanded,
+      editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
     );
   }
 
@@ -151,6 +169,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)!,
+      editedMovedMarkerBg: Color.lerp(editedMovedMarkerBg, other.editedMovedMarkerBg, t)!,
+      editedMovedMarkerExpanded: Color.lerp(editedMovedMarkerExpanded, other.editedMovedMarkerExpanded, t)!,
+      editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, 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: