#171 : Show edited/moved marker on messages

lib/api/model/model.dart

@@ -569,7 +569,7 @@ sealed class Message {
   String content;
   final String contentType;
 
-  // final List<MessageEditHistory> editHistory; // TODO handle
+  final List<MessageEditHistory>? editHistory;
   final int id;
   bool isMeMessage;
   int? lastEditTimestamp;
@@ -612,6 +612,7 @@ sealed class Message {
     required this.client,
     required this.content,
     required this.contentType,
+    required this.editHistory,
     required this.id,
     required this.isMeMessage,
     required this.lastEditTimestamp,
@@ -677,6 +678,7 @@ class StreamMessage extends Message {
     required super.client,
     required super.content,
     required super.contentType,
+    required super.editHistory,
     required super.id,
     required super.isMeMessage,
     required super.lastEditTimestamp,
@@ -779,6 +781,7 @@ class DmMessage extends Message {
     required super.client,
     required super.content,
     required super.contentType,
+    required super.editHistory,
     required super.id,
     required super.isMeMessage,
     required super.lastEditTimestamp,
@@ -802,3 +805,40 @@ class DmMessage extends Message {
   @override
   Map<String, dynamic> toJson() => _$DmMessageToJson(this);
 }
+
+
+@JsonSerializable(fieldRename: FieldRename.snake)
+class MessageEditHistory {
+  final String? prevContent;
+  final String? prevRenderedContent;
+  final int? prevRenderedContentVersion;
+  final int? prevStream;
+  final int? stream;
+  final int timestamp;
+  final String? topic;
+  final int? userId;
+
+  @JsonKey(readValue: _readPrevTopic)
+  String? prevTopic;
+
+  static String? _readPrevTopic(Map json, String key) {
+    return json[key] ?? json['prev_subject'];
+  }
+
+  MessageEditHistory( {
+    required this.prevContent,
+    required this.prevRenderedContent,
+    required this.prevRenderedContentVersion,
+    required this.prevStream,
+    required this.prevTopic,
+    required this.stream,
+    required this.timestamp,
+    required this.topic,
+    required this.userId,
+  });
+
+  factory MessageEditHistory.fromJson(Map<String, dynamic> json) =>
+    _$MessageEditHistoryFromJson(json);
+
+  Map<String,dynamic> toJson() =>_$MessageEditHistoryToJson(this);
+}

lib/widgets/icons.dart

@@ -57,23 +57,30 @@ abstract final class ZulipIcons {
   /// The Zulip custom icon "lock".
   static const IconData lock = IconData(0xf10b, fontFamily: "Zulip Icons");
 
+  /// The Zulip custom icon "message_edited_icon".
+  static const IconData message_edited_icon = IconData(0xf10c, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "message_moved_icon".
+  static const IconData message_moved_icon = IconData(0xf10d, fontFamily: "Zulip Icons");
+
   /// The Zulip custom icon "mute".
-  static const IconData mute = IconData(0xf10c, fontFamily: "Zulip Icons");
+  static const IconData mute = IconData(0xf10e, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "read_receipts".
-  static const IconData read_receipts = IconData(0xf10d, fontFamily: "Zulip Icons");
+  static const IconData read_receipts = IconData(0xf10f, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "star_filled".
-  static const IconData star_filled = IconData(0xf10e, fontFamily: "Zulip Icons");
+  static const IconData star_filled = IconData(0xf110, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "topic".
-  static const IconData topic = IconData(0xf10f, fontFamily: "Zulip Icons");
+  static const IconData topic = IconData(0xf111, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "unmute".
-  static const IconData unmute = IconData(0xf110, fontFamily: "Zulip Icons");
+  static const IconData unmute = IconData(0xf112, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "user".
-  static const IconData user = IconData(0xf111, fontFamily: "Zulip Icons");
+  static const IconData user = IconData(0xf113, fontFamily: "Zulip Icons");
+
 
   // END GENERATED ICON DATA
 }

lib/widgets/message_list.dart

@@ -23,6 +23,7 @@ import 'sticky_header.dart';
 import 'store.dart';
 import 'text.dart';
 
+
 class MessageListPage extends StatefulWidget {
   const MessageListPage({super.key, required this.narrow});
 
@@ -892,6 +893,16 @@ class MessageWithPossibleSender extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final message = item.message;
+    final history = message.editHistory;
+    bool messageEdited = false, messageMoved = false;
+
+    if(message.editHistory != null) {
+      if((history?.last.topic != history?.last.prevTopic) ||
+        (history?.last.stream != history?.last.prevStream)){
+            messageMoved = true;}
+      if(history?.last.prevContent!=null){
+        messageEdited = true;
+      }}
 
     Widget? senderRow;
     if (item.showSender) {
@@ -939,7 +950,8 @@ class MessageWithPossibleSender extends StatelessWidget {
       onLongPress: () => showMessageActionSheet(context: context, message: message),
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 4),
-        child: Column(children: [
+        child: Column(
+          children: [
           if (senderRow != null)
             Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
               child: senderRow),
@@ -950,6 +962,7 @@ class MessageWithPossibleSender extends StatelessWidget {
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
                   MessageContent(message: message, content: item.content),
+                  if(messageMoved || messageEdited) SlidableMarker(messageMoved: messageMoved, messageEdited:  messageEdited),
                   if ((message.reactions?.total ?? 0) > 0)
                     ReactionChipsList(messageId: message.id, reactions: message.reactions!)
                 ])),
@@ -966,6 +979,70 @@ class MessageWithPossibleSender extends StatelessWidget {
   }
 }
 
+class SlidableMarker extends StatefulWidget {
+  final bool messageMoved;
+  final bool messageEdited;
+
+  const SlidableMarker({
+    super.key,
+    required this.messageMoved,
+    required this.messageEdited,
+  });
+
+  @override
+  State<SlidableMarker> createState() => _SlidableMarkerState();
+}
+
+class _SlidableMarkerState extends State<SlidableMarker> {
+  double _dragPosition = 17;
+
+
+  @override
+  Widget build(BuildContext context) {
+    double containerWidth = 17;
+
+    if (_dragPosition >= 17) {
+      if (_dragPosition > 60) {
+        containerWidth = 60;
+      } else {
+        containerWidth = _dragPosition;
+      }
+    }
+    else{
+      _dragPosition = 17;
+    }
+
+    return GestureDetector(
+      onHorizontalDragUpdate: (details) {
+        setState(() {
+          _dragPosition += details.delta.dx;
+          });},
+      child: SizedBox(
+        height: 20,
+        child: Stack(
+          children: [
+            Container(
+              width: containerWidth,
+              decoration: BoxDecoration(borderRadius: BorderRadius.circular(2),
+                                        color : const Color(0xFFDDECF6)),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 1),
+                      child: Text(
+                        widget.messageEdited ? 'Edited' : 'Moved',
+                        style: const TextStyle(fontSize: 15, overflow: TextOverflow.clip, color: Color(0xFF26516E)),
+                      ))),
+                  widget.messageMoved ? const Padding(padding: EdgeInsets.all(1),
+                                                      child :Icon(ZulipIcons.message_moved_icon, size: 14,
+                                                      color: Color(0xFF26516E))) :
+                                        const Padding(padding: EdgeInsets.all(1),
+                                                      child :Icon(ZulipIcons.message_edited_icon, size: 14,
+                                                      color: Color(0xFF26516E)))
+                ]))])));}
+  }
+
 // TODO web seems to ignore locale in formatting time, but we could do better
 final _kMessageTimestampFormat = DateFormat('h:mm aa', 'en_US');
 

pubspec.lock

@@ -1283,4 +1283,4 @@ packages:
     version: "3.1.2"
 sdks:
   dart: ">=3.4.0-140.0.dev <4.0.0"
-  flutter: ">=3.20.0-7.0.pre.63"
+  flutter: ">=3.20.0-7.0.pre.63"

pubspec.yaml

@@ -138,4 +138,4 @@ flutter:
       fonts:
         - asset: assets/icons/ZulipIcons.ttf
 
-    # If adding a font, remember to account for its license in lib/licenses.dart.
+    # If adding a font, remember to account for its license in lib/licenses.dart.

test/api/model/model_test.dart

@@ -397,4 +397,54 @@ void main() {
         .deepEquals([2, 3, 11]);
     });
   });
+
+group('MessageEditHistory', () {
+  test('test MessageEditHistory.fromJson', () {
+
+  final Map<String, dynamic> baseJson = Map.unmodifiable(deepToJson(
+      eg.editHistory(timestamp: 12369, userId: 123),
+    ) as Map<String, dynamic>);
+
+  MessageEditHistory parse(Map<String, dynamic> specialJson) {
+      return MessageEditHistory.fromJson({ ...baseJson, ...specialJson });
+    }
+
+  final history = parse(
+    {'prev_content': 'Lorem Ipsum', 'timestamp': 12369, 'user_id': 123,
+    'prev_rendered_content': '<p>Lorem Ipsum</p>'});
+  check(history.prevContent).equals('Lorem Ipsum');
+  check(history.prevRenderedContent).equals('<p>Lorem Ipsum</p>');
+  check(history.userId).equals(123);
+  check(history.timestamp).equals(12369);
+  });
+
+  test('streamMessage with editHistory list', () {
+    User user = eg.user();
+
+    var edit1 = eg.editHistory(
+      timestamp: DateTime.now().millisecondsSinceEpoch,
+      userId: user.userId,
+    );
+
+    var edit2 = eg.editHistory(
+      prevContent: 'Previous content',
+      prevRenderedContent: 'Previous rendered content',
+      timestamp: DateTime.now().millisecondsSinceEpoch,
+      userId: user.userId,
+    );
+
+    var streamMsg = eg.streamMessage(
+      sender: user,
+      topic: 'Test topic',
+      content: 'Test content',
+      timestamp: DateTime.now().millisecondsSinceEpoch,
+      editHistory: [edit2, edit1],
+    );
+
+    check(streamMsg.editHistory![0].timestamp).equals(edit2.timestamp);
+    check(streamMsg.editHistory![0].userId).equals(edit2.userId);
+    check(streamMsg.editHistory![1].prevContent).equals(edit1.prevContent);
+    check(streamMsg.editHistory![1].prevRenderedContent).equals(edit1.prevRenderedContent);
+  });
+});
 }