action_sheet: Support reacting with popular emojis

Author: rajveermalviya

assets/l10n/app_en.arb

@@ -635,5 +635,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

@@ -948,6 +948,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

@@ -502,4 +502,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

@@ -502,4 +502,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_fr.dart

@@ -502,4 +502,10 @@ class ZulipLocalizationsFr 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

@@ -502,4 +502,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/generated/l10n/zulip_localizations_pl.dart

@@ -502,4 +502,10 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
 
   @override
   String get errorNotificationOpenAccountMissing => 'Konto związane z tym powiadomieniem już nie istnieje.';
+
+  @override
+  String get errorReactionAddingFailedTitle => 'Adding reaction failed';
+
+  @override
+  String get errorReactionRemovingFailedTitle => 'Removing reaction failed';
 }

lib/generated/l10n/zulip_localizations_ru.dart

@@ -502,4 +502,10 @@ class ZulipLocalizationsRu 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/widgets/action_sheet.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -10,13 +11,16 @@ import '../api/model/model.dart';
 import '../api/route/channels.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 'emoji_reaction.dart';
 import 'icons.dart';
 import 'inset_shadow.dart';
 import 'message_list.dart';
@@ -26,7 +30,7 @@ import 'theme.dart';
 
 void _showActionSheet(
   BuildContext context, {
-  required List<ActionSheetMenuItemButton> optionButtons,
+  required List<Widget> optionButtons,
 }) {
   showModalBottomSheet<void>(
     context: context,
@@ -383,16 +387,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),
     StarButton(message: message, pageContext: context),
     if (isComposeBoxOffered)
       QuoteAndReplyButton(message: message, pageContext: context),
@@ -416,41 +412,94 @@ abstract class MessageActionSheetMenuItemButton extends ActionSheetMenuItemButto
   final Message message;
 }
 
-// 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,
+  });
 
-  @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;
+
+  void _handleTapReaction({
+    required EmojiCandidate emoji,
+    required bool isSelfVoted,
+  }) {
+    // Dismiss the enclosing action sheet immediately,
+    // for swift UI feedback that the user's selection was received.
+    Navigator.pop(pageContext);
+
+    final zulipLocalizations = ZulipLocalizations.of(pageContext);
+    doAddOrRemoveReaction(
+      context: pageContext,
+      doRemoveReaction: isSelfVoted,
+      messageId: message.id,
+      emoji: emoji,
+      errorDialogTitle: isSelfVoted
+        ? zulipLocalizations.errorReactionRemovingFailedTitle
+        : zulipLocalizations.errorReactionAddingFailedTitle);
   }
 
-  @override void onPressed() async {
-    String? errorMessage;
-    try {
-      await addReaction(PerAccountStoreWidget.of(pageContext).connection,
-        messageId: message.id,
-        reactionType: ReactionType.unicodeEmoji,
-        emojiCode: '1f44d',
-        emojiName: '+1',
-      );
-    } catch (e) {
-      if (!pageContext.mounted) return;
+  Widget _buildButton({
+    required BuildContext context,
+    required EmojiCandidate emoji,
+    required bool isSelfVoted,
+    required bool isFirst,
+  }) {
+    final designVariables = DesignVariables.of(context);
+    return Flexible(child: InkWell(
+      onTap: () => _handleTapReaction(emoji: emoji, isSelfVoted: isSelfVoted),
+      splashFactory: NoSplash.splashFactory,
+      borderRadius: isFirst
+        ? const BorderRadius.only(topLeft: Radius.circular(7))
+        : null,
+      overlayColor: WidgetStateColor.resolveWith((states) =>
+        states.any((e) => e == WidgetState.pressed)
+          ? designVariables.contextMenuItemBg.withFadedAlpha(0.20)
+          : Colors.transparent),
+      child: Container(
+        width: double.infinity,
+        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 5),
+        alignment: Alignment.center,
+        color: isSelfVoted
+          ? designVariables.contextMenuItemBg.withFadedAlpha(0.20)
+          : null,
+        child: UnicodeEmojiWidget(
+          emojiDisplay: emoji.emojiDisplay as UnicodeEmojiDisplay,
+          notoColorEmojiTextSize: 20.1,
+          size: 24))));
+  }
 
-      switch (e) {
-        case ZulipApiException():
-          errorMessage = e.message;
-          // TODO(#741) specific messages for common errors, like network errors
-          //   (support with reusable code)
-        default:
-      }
+  @override
+  Widget build(BuildContext context) {
+    assert(EmojiStore.popularEmojiCandidates.every(
+      (emoji) => emoji.emojiType == ReactionType.unicodeEmoji));
 
-      showErrorDialog(context: pageContext,
-        title: 'Adding reaction failed', message: errorMessage);
+    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(
+      decoration: BoxDecoration(
+        color: designVariables.contextMenuItemBg.withFadedAlpha(0.12)),
+      child: Row(spacing: 1, children: List.unmodifiable(
+        EmojiStore.popularEmojiCandidates.mapIndexed((index, emoji) =>
+          _buildButton(
+            context: context,
+            emoji: emoji,
+            isSelfVoted: hasSelfVote(emoji),
+            isFirst: index == 0)))));
   }
 }
 

lib/widgets/emoji_reaction.dart

@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
 
+import '../api/exception.dart';
 import '../api/model/model.dart';
 import '../api/route/messages.dart';
 import '../model/emoji.dart';
 import 'color.dart';
+import 'dialog.dart';
 import 'emoji.dart';
 import 'store.dart';
 import 'text.dart';
@@ -360,3 +362,42 @@ class _TextEmoji extends StatelessWidget {
       text);
   }
 }
+
+/// Adds or removes a reaction on the message corresponding to
+/// the [messageId], showing an error dialog on failure.
+/// Returns a Future resolving to true if operation succeeds.
+Future<void> doAddOrRemoveReaction({
+  required BuildContext context,
+  required bool doRemoveReaction,
+  required int messageId,
+  required EmojiCandidate emoji,
+  required String errorDialogTitle,
+}) async {
+  final store = PerAccountStoreWidget.of(context);
+  String? errorMessage;
+  try {
+    await (doRemoveReaction ? removeReaction : addReaction).call(
+      store.connection,
+      messageId: messageId,
+      reactionType: emoji.emojiType,
+      emojiCode: emoji.emojiCode,
+      emojiName: emoji.emojiName,
+    );
+  } catch (e) {
+    if (!context.mounted) return;
+
+    switch (e) {
+      case ZulipApiException():
+        errorMessage = e.message;
+        // TODO(#741) specific messages for common errors, like network errors
+        //   (support with reusable code)
+      default:
+        // TODO(log)
+    }
+
+    showErrorDialog(context: context,
+      title: errorDialogTitle,
+      message: errorMessage);
+    return;
+  }
+}

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');
+}