msglist: Show message reactions; support reacting (with 👍, or to join in others' reactions)

lib/model/content.dart

@@ -495,6 +495,27 @@ class ImageEmojiNode extends EmojiNode {
 
 ////////////////////////////////////////////////////////////////
 
+// Ported from https://github.com/zulip/zulip-mobile/blob/c979530d6804db33310ed7d14a4ac62017432944/src/emoji/data.js#L108-L112
+//
+// Which was in turn ported from https://github.com/zulip/zulip/blob/63c9296d5339517450f79f176dc02d77b08020c8/zerver/models.py#L3235-L3242
+// and that describes the encoding as follows:
+//
+// > * For Unicode emoji, [emoji_code is] a dash-separated hex encoding of
+// >   the sequence of Unicode codepoints that define this emoji in the
+// >   Unicode specification.  For examples, see "non_qualified" or
+// >   "unified" in the following data, with "non_qualified" taking
+// >   precedence when both present:
+// >   https://raw.githubusercontent.com/iamcal/emoji-data/master/emoji_pretty.json
+String? tryParseEmojiCodeToUnicode(String code) {
+  try {
+    return String.fromCharCodes(code.split('-').map((hex) => int.parse(hex, radix: 16)));
+  } on FormatException { // thrown by `int.parse`
+    return null;
+  } on ArgumentError { // thrown by `String.fromCharCodes`
+    return null;
+  }
+}
+
 /// What sort of nodes a [_ZulipContentParser] is currently expecting to find.
 enum _ParserContext {
   /// The parser is currently looking for block nodes.
@@ -525,27 +546,6 @@ class _ZulipContentParser {
 
   static final _emojiClassRegexp = RegExp(r"^emoji(-[0-9a-f]+)*$");
 
-  // Ported from https://github.com/zulip/zulip-mobile/blob/c979530d6804db33310ed7d14a4ac62017432944/src/emoji/data.js#L108-L112
-  //
-  // Which was in turn ported from https://github.com/zulip/zulip/blob/63c9296d5339517450f79f176dc02d77b08020c8/zerver/models.py#L3235-L3242
-  // and that describes the encoding as follows:
-  //
-  // > * For Unicode emoji, [emoji_code is] a dash-separated hex encoding of
-  // >   the sequence of Unicode codepoints that define this emoji in the
-  // >   Unicode specification.  For examples, see "non_qualified" or
-  // >   "unified" in the following data, with "non_qualified" taking
-  // >   precedence when both present:
-  // >   https://raw.githubusercontent.com/iamcal/emoji-data/master/emoji_pretty.json
-  String? tryParseEmojiCodeToUnicode(String code) {
-    try {
-      return String.fromCharCodes(code.split('-').map((hex) => int.parse(hex, radix: 16)));
-    } on FormatException { // thrown by `int.parse`
-      return null;
-    } on ArgumentError { // thrown by `String.fromCharCodes`
-      return null;
-    }
-  }
-
   InlineContentNode parseInlineContent(dom.Node node) {
     assert(_debugParserContext == _ParserContext.inline);
     final debugHtmlNode = kDebugMode ? node : null;

lib/widgets/action_sheet.dart

@@ -17,15 +17,27 @@ import 'store.dart';
 ///
 /// Must have a [MessageListPage] ancestor.
 void showMessageActionSheet({required BuildContext context, required Message message}) {
+  final store = PerAccountStoreWidget.of(context);
+
   // The UI that's conditioned on this won't live-update during this appearance
   // of the action sheet (we avoid calling composeBoxControllerOf in a build
   // method; see its doc). But currently it will be constant through the life of
   // any message list, so that's fine.
   final isComposeBoxOffered = MessageListPage.composeBoxControllerOf(context) != null;
+
+  final selfUserId = store.account.userId;
+  final hasThumbsUpReactionVote = message.reactions
+    ?.aggregated.any((reactionWithVotes) =>
+      reactionWithVotes.reactionType == ReactionType.unicodeEmoji
+      && reactionWithVotes.emojiCode == '1f44d'
+      && reactionWithVotes.userIds.contains(selfUserId))
+    ?? false;
+
   showDraggableScrollableModalBottomSheet(
     context: context,
     builder: (BuildContext _) {
       return Column(children: [
+        if (!hasThumbsUpReactionVote) AddThumbsUpButton(message: message, messageListContext: context),
         ShareButton(message: message, messageListContext: context),
         if (isComposeBoxOffered) QuoteAndReplyButton(
           message: message,
@@ -60,6 +72,49 @@ abstract class MessageActionSheetMenuItemButton extends StatelessWidget {
   }
 }
 
+// This button is very temporary, to complete #125 before we have a way to
+// choose an arbitrary reaction (#388). So, skipping i18n.
+class AddThumbsUpButton extends MessageActionSheetMenuItemButton {
+  AddThumbsUpButton({
+    super.key,
+    required super.message,
+    required super.messageListContext,
+  });
+
+  @override get icon => Icons.add_reaction_outlined;
+
+  @override
+  String label(ZulipLocalizations zulipLocalizations) {
+    return 'React with 👍'; // TODO(i18n) skip translation for now
+  }
+
+  @override get onPressed => (BuildContext context) async {
+    Navigator.of(context).pop();
+    String? errorMessage;
+    try {
+      await addReaction(PerAccountStoreWidget.of(messageListContext).connection,
+        messageId: message.id,
+        reactionType: ReactionType.unicodeEmoji,
+        emojiCode: '1f44d',
+        emojiName: '+1',
+      );
+    } catch (e) {
+      if (!messageListContext.mounted) return;
+
+      switch (e) {
+        case ZulipApiException():
+          errorMessage = e.message;
+          // TODO specific messages for common errors, like network errors
+          //   (support with reusable code)
+        default:
+      }
+
+      await showErrorDialog(context: context,
+        title: 'Adding reaction failed', message: errorMessage);
+    }
+  };
+}
+
 class ShareButton extends MessageActionSheetMenuItemButton {
   ShareButton({
     super.key,