msglist: More compact rendering for edit state label.

By moving the edit state label to a Stack, we can render it over the
list of reaction chips. If we stop here, the implementation works in
most of the cases, but there will be an overlap when the reactions take
exactly a full line.

We fix that by adding an invisible copy of the `editStateLabel` widget
to the end of the reaction chips list, that still occupies space during
layout. It forces rewrap at the end of the list and always make space
available for the actual edit state label.

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

Author: PIG208

Diff for: lib/widgets/emoji_reaction.dart

@@ -109,10 +109,19 @@ class ReactionChipsList extends StatelessWidget {
     super.key,
     required this.messageId,
     required this.reactions,
+    this.trailingPlaceholder,
   });
 
   final int messageId;
   final Reactions reactions;
+  /// A widget to force rewrapping at the end of the reaction chip list.
+  ///
+  /// When given, it will be rendered without being visible.
+  ///
+  /// This avoids potential overlap between the last reaction chip and the
+  /// visible counterpart of this widget positioned at the bottom end of the
+  /// message list.
+  final Widget? trailingPlaceholder;
 
   @override
   Widget build(BuildContext context) {
@@ -121,10 +130,15 @@ class ReactionChipsList extends StatelessWidget {
     final showNames = displayEmojiReactionUsers && reactions.total <= 3;
 
     return Wrap(spacing: 4, runSpacing: 4, crossAxisAlignment: WrapCrossAlignment.center,
-      children: reactions.aggregated.map((reactionVotes) => ReactionChip(
-        showName: showNames,
-        messageId: messageId, reactionWithVotes: reactionVotes),
-      ).toList());
+      children: [
+        ...reactions.aggregated.map((reactionVotes) => ReactionChip(
+          showName: showNames,
+          messageId: messageId, reactionWithVotes: reactionVotes)),
+        if (trailingPlaceholder != null)
+          Visibility(visible: false,
+            maintainSize: true, maintainAnimation: true, maintainState: true,
+            child: trailingPlaceholder!),
+      ]);
   }
 }
 

Diff for: lib/widgets/message_list.dart

@@ -1257,6 +1257,14 @@ class MessageWithPossibleSender extends StatelessWidget {
       case MessageEditState.none:
     }
 
+    final editStateLabel = editStateText == null ? null : Text(editStateText,
+      textAlign: TextAlign.end,
+      style: TextStyle(
+        color: designVariables.labelEdited,
+        fontSize: 12,
+        height: (12 / 12),
+        letterSpacing: proportionalLetterSpacing(context, 0.05, baseFontSize: 12)));
+
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onLongPress: () => showMessageActionSheet(context: context, message: message),
@@ -1271,21 +1279,24 @@ class MessageWithPossibleSender extends StatelessWidget {
             textBaseline: localizedTextBaseline(context),
             children: [
               const SizedBox(width: 16),
-              Expanded(child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
+              Expanded(child: Stack(
                 children: [
-                  MessageContent(message: message, content: item.content),
-                  if ((message.reactions?.total ?? 0) > 0)
-                    ReactionChipsList(messageId: message.id, reactions: message.reactions!),
-                  if (editStateText != null)
-                    Text(editStateText, textAlign: TextAlign.end,
-                        style: TextStyle(
-                          color: designVariables.labelEdited,
-                          fontSize: 12,
-                          height: (12 / 12),
-                          letterSpacing: proportionalLetterSpacing(
-                              context, 0.05, baseFontSize: 12))),
-                ])),
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      MessageContent(message: message, content: item.content),
+                      if ((message.reactions?.total ?? 0) > 0)
+                        ReactionChipsList(
+                          messageId: message.id,
+                          reactions: message.reactions!,
+                          // This copy of `editStateLabel` is invisible.
+                          // See docs for more details.
+                          trailingPlaceholder: editStateLabel),
+                    ]),
+                  if (editStateLabel != null)
+                    PositionedDirectional(bottom: 0, end: 0, child: editStateLabel),
+                ],
+              )),
               SizedBox(width: 16,
                 child: message.flags.contains(MessageFlag.starred)
                   ? Icon(ZulipIcons.star_filled, size: 16, color: designVariables.star)