action_sheet: Support reacting with popular emojis

Author: rajveermalviya

assets/l10n/app_en.arb

@@ -603,5 +603,13 @@
   "errorNotificationOpenAccountMissing": "The account associated with this notification no longer exists.",
   "@errorNotificationOpenAccountMissing": {
     "description": "Error message when the account associated with the notification is not found"
+  },
+  "errorReactionAddingFailedTitle": "Adding reaction failed",
+  "@errorReactionAddingFailedTitle": {
+    "description": "Error title when adding a message reaction fails"
+  },
+  "errorReactionRemovingFailedTitle": "Removing reaction failed",
+  "@errorReactionRemovingFailedTitle": {
+    "description": "Error title when removing a message reaction fails"
   }
 }

lib/generated/l10n/zulip_localizations.dart

@@ -894,6 +894,18 @@ abstract class ZulipLocalizations {
   /// In en, this message translates to:
   /// **'The account associated with this notification no longer exists.'**
   String get errorNotificationOpenAccountMissing;
+
+  /// Error title when adding a message reaction fails
+  ///
+  /// In en, this message translates to:
+  /// **'Adding reaction failed'**
+  String get errorReactionAddingFailedTitle;
+
+  /// Error title when removing a message reaction fails
+  ///
+  /// In en, this message translates to:
+  /// **'Removing reaction failed'**
+  String get errorReactionRemovingFailedTitle;
 }
 
 class _ZulipLocalizationsDelegate extends LocalizationsDelegate<ZulipLocalizations> {

lib/generated/l10n/zulip_localizations_ar.dart

@@ -478,4 +478,10 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
 
   @override
   String get errorNotificationOpenAccountMissing => 'The account associated with this notification no longer exists.';
+
+  @override
+  String get errorReactionAddingFailedTitle => 'Adding reaction failed';
+
+  @override
+  String get errorReactionRemovingFailedTitle => 'Removing reaction failed';
 }

lib/generated/l10n/zulip_localizations_en.dart

@@ -478,4 +478,10 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
 
   @override
   String get errorNotificationOpenAccountMissing => 'The account associated with this notification no longer exists.';
+
+  @override
+  String get errorReactionAddingFailedTitle => 'Adding reaction failed';
+
+  @override
+  String get errorReactionRemovingFailedTitle => 'Removing reaction failed';
 }

lib/generated/l10n/zulip_localizations_ja.dart

@@ -478,4 +478,10 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
 
   @override
   String get errorNotificationOpenAccountMissing => 'The account associated with this notification no longer exists.';
+
+  @override
+  String get errorReactionAddingFailedTitle => 'Adding reaction failed';
+
+  @override
+  String get errorReactionRemovingFailedTitle => 'Removing reaction failed';
 }

lib/model/emoji.dart

@@ -88,6 +88,60 @@ final class EmojiCandidate {
   }) : _aliases = aliases;
 }
 
+// Zulip's hand selected "popular" emojis, currently used as list of
+// quick emoji reactions available in the message context menu.
+// See: https://github.com/zulip/zulip/blob/3bad36ef8cf07cd57d0b257a739bae635a8527ac/web/shared/src/typeahead.ts#L22-L29
+const zulipPopularEmojis = [
+  EmojiCandidate(
+    emojiType: ReactionType.unicodeEmoji,
+    emojiCode: '1f44d',
+    emojiName: '+1',
+    aliases: ['thumbs_up', 'like'],
+    emojiDisplay: UnicodeEmojiDisplay(
+      emojiName: '+1',
+      emojiUnicode: '\u{1f44d}')), // '👍'
+  EmojiCandidate(
+    emojiType: ReactionType.unicodeEmoji,
+    emojiCode: '1f389',
+    emojiName: 'tada',
+    aliases: null,
+    emojiDisplay: UnicodeEmojiDisplay(
+      emojiName: 'tada',
+      emojiUnicode: '\u{1f389}')), // '🎉'
+  EmojiCandidate(
+    emojiType: ReactionType.unicodeEmoji,
+    emojiCode: '1f642',
+    emojiName: 'smile',
+    aliases: null,
+    emojiDisplay: UnicodeEmojiDisplay(
+      emojiName: 'smile',
+      emojiUnicode: '\u{1f642}')), // '🙂'
+  EmojiCandidate(
+    emojiType: ReactionType.unicodeEmoji,
+    emojiCode: '2764',
+    emojiName: 'heart',
+    aliases: ['love', 'love_you'],
+    emojiDisplay: UnicodeEmojiDisplay(
+      emojiName: 'heart',
+      emojiUnicode: '\u{2764}')), // '❤'
+  EmojiCandidate(
+    emojiType: ReactionType.unicodeEmoji,
+    emojiCode: '1f6e0',
+    emojiName: 'working_on_it',
+    aliases: ['hammer_and_wrench', 'tools'],
+    emojiDisplay: UnicodeEmojiDisplay(
+      emojiName: 'working_on_it',
+      emojiUnicode: '\u{1f6e0}')), // '🛠'
+  EmojiCandidate(
+    emojiType: ReactionType.unicodeEmoji,
+    emojiCode: '1f419',
+    emojiName: 'octopus',
+    aliases: null,
+    emojiDisplay: UnicodeEmojiDisplay(
+      emojiName: 'octopus',
+      emojiUnicode: '\u{1f419}')), // '🐙'
+];
+
 /// The portion of [PerAccountStore] describing what emoji exist.
 mixin EmojiStore {
   /// The realm's custom emoji (for [ReactionType.realmEmoji],

lib/widgets/action_sheet.dart

@@ -9,13 +9,15 @@ import '../api/exception.dart';
 import '../api/model/model.dart';
 import '../api/route/messages.dart';
 import '../generated/l10n/zulip_localizations.dart';
+import '../model/emoji.dart';
 import '../model/internal_link.dart';
 import '../model/narrow.dart';
 import 'actions.dart';
 import 'clipboard.dart';
 import 'color.dart';
 import 'compose_box.dart';
 import 'dialog.dart';
+import 'emoji.dart';
 import 'icons.dart';
 import 'inset_shadow.dart';
 import 'message_list.dart';
@@ -41,16 +43,8 @@ void showMessageActionSheet({required BuildContext context, required Message mes
   final markAsUnreadSupported = store.connection.zulipFeatureLevel! >= 155; // TODO(server-6)
   final showMarkAsUnreadButton = markAsUnreadSupported && isMessageRead;
 
-  final hasThumbsUpReactionVote = message.reactions
-    ?.aggregated.any((reactionWithVotes) =>
-      reactionWithVotes.reactionType == ReactionType.unicodeEmoji
-      && reactionWithVotes.emojiCode == '1f44d'
-      && reactionWithVotes.userIds.contains(store.selfUserId))
-    ?? false;
-
   final optionButtons = [
-    if (!hasThumbsUpReactionVote)
-      AddThumbsUpButton(message: message, pageContext: context),
+    ReactionButtons(message: message, pageContext: context, popularEmojis: zulipPopularEmojis),
     StarButton(message: message, pageContext: context),
     if (isComposeBoxOffered)
       QuoteAndReplyButton(message: message, pageContext: context),
@@ -183,27 +177,39 @@ class MessageActionSheetCancelButton 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.pageContext});
+class ReactionButtons extends StatelessWidget {
+  const ReactionButtons({
+    super.key,
+    required this.message,
+    required this.pageContext,
+    required this.popularEmojis,
+  });
 
-  @override IconData get icon => ZulipIcons.smile;
+  final Message message;
 
-  @override
-  String label(ZulipLocalizations zulipLocalizations) {
-    return 'React with 👍'; // TODO(i18n) skip translation for now
-  }
+  /// A context within the [MessageListPage] this action sheet was
+  /// triggered from.
+  final BuildContext pageContext;
 
-  @override void onPressed() async {
+  /// List of popular emoji reaction buttons to display.
+  /// Each emoji must be a unicode emoji.
+  final List<EmojiCandidate> popularEmojis;
+
+  void _onPressed(
+    EmojiCandidate emoji,
+    bool selfVoted,
+    ZulipLocalizations zulipLocalizations,
+  ) async {
     String? errorMessage;
     try {
-      await addReaction(PerAccountStoreWidget.of(pageContext).connection,
+      await (selfVoted ? removeReaction : addReaction).call(
+        PerAccountStoreWidget.of(pageContext).connection,
         messageId: message.id,
-        reactionType: ReactionType.unicodeEmoji,
-        emojiCode: '1f44d',
-        emojiName: '+1',
+        reactionType: emoji.emojiType,
+        emojiCode: emoji.emojiCode,
+        emojiName: emoji.emojiName,
       );
+      if (pageContext.mounted) Navigator.pop(pageContext);
     } catch (e) {
       if (!pageContext.mounted) return;
 
@@ -216,9 +222,57 @@ class AddThumbsUpButton extends MessageActionSheetMenuItemButton {
       }
 
       showErrorDialog(context: pageContext,
-        title: 'Adding reaction failed', message: errorMessage);
+        title: selfVoted
+          ? zulipLocalizations.errorReactionRemovingFailedTitle
+          : zulipLocalizations.errorReactionAddingFailedTitle,
+        message: errorMessage);
     }
   }
+
+  @override
+  Widget build(BuildContext context) {
+    assert(popularEmojis.every(
+      (emoji) => emoji.emojiType == ReactionType.unicodeEmoji));
+
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    final store = PerAccountStoreWidget.of(pageContext);
+    final designVariables = DesignVariables.of(context);
+
+    bool hasSelfVote(EmojiCandidate emoji) {
+      return message.reactions?.aggregated.any((reactionWithVotes) {
+        return reactionWithVotes.reactionType == ReactionType.unicodeEmoji
+          && reactionWithVotes.emojiCode == emoji.emojiCode
+          && reactionWithVotes.userIds.contains(store.selfUserId);
+      }) ?? false;
+    }
+
+    return Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(color: designVariables.contextMenuItemBg.withFadedAlpha(0.12)),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        children: List.unmodifiable(popularEmojis.map((emoji) {
+          final selfVoted = hasSelfVote(emoji);
+          return IconButton(
+            onPressed: () => _onPressed(emoji, selfVoted, zulipLocalizations),
+            isSelected: selfVoted,
+            style: IconButton.styleFrom(
+              padding: EdgeInsets.zero,
+              splashFactory: NoSplash.splashFactory,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.5)),
+              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+              visualDensity: VisualDensity.compact,
+            ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
+              states.any((e) => e == WidgetState.pressed || e == WidgetState.selected)
+                ? designVariables.contextMenuItemBg.withFadedAlpha(0.20)
+                : Colors.transparent)),
+            icon: UnicodeEmojiWidget(
+              emojiDisplay: emoji.emojiDisplay as UnicodeEmojiDisplay,
+              notoColorEmojiTextSize: 20.1,
+              size: 24));
+        })))
+    );
+  }
 }
 
 class StarButton extends MessageActionSheetMenuItemButton {

test/flutter_checks.dart

@@ -158,3 +158,7 @@ extension TableRowChecks on Subject<TableRow> {
 extension TableChecks on Subject<Table> {
   Subject<List<TableRow>> get children => has((x) => x.children, 'children');
 }
+
+extension IconButtonChecks on Subject<IconButton> {
+  Subject<bool?> get isSelected => has((x) => x.isSelected, 'isSelected');
+}