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

lib/widgets/emoji_reaction.dart

@@ -109,10 +109,18 @@ class ReactionChipsList extends StatelessWidget {
     super.key,
     required this.messageId,
     required this.reactions,
+    this.trailingPlaceholder,
   });
 
   final int messageId;
   final Reactions reactions;
+  /// A widget for holding space at the end of the reaction chips list.
+  ///
+  /// When given, it will be rendered invisibly, making the bottom end corner
+  /// free of reaction chips.  Using [Stack] and [PositionedDirectional], a
+  /// visible copy of [trailingPlaceholder] can be rendered there without
+  /// overlapping reaction chips.
+  final Widget? trailingPlaceholder;
 
   @override
   Widget build(BuildContext context) {
@@ -121,10 +129,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!),
+      ]);
   }
 }
 

lib/widgets/message_list.dart

@@ -1258,6 +1258,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),
@@ -1272,21 +1280,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)