reactions: Support adding arbitary reactions

Author: rajveermalviya

assets/l10n/app_en.arb

@@ -330,6 +330,10 @@
   "@dialogContinue": {
     "description": "Button label in dialogs to proceed."
   },
+  "dialogClose": "Close",
+  "@dialogClose": {
+    "description": "Button label in dialogs to close."
+  },
   "errorDialogContinue": "OK",
   "@errorDialogContinue": {
     "description": "Button label in error dialogs to acknowledge the error and close the dialog."
@@ -611,5 +615,13 @@
   "errorReactionRemovingFailedTitle": "Removing reaction failed",
   "@errorReactionRemovingFailedTitle": {
     "description": "Error title when removing a message reaction fails"
+  },
+  "emojiReactionsMore": "more",
+  "@emojiReactionsMore": {
+    "description": "Label for a button opening the emoji picker."
+  },
+  "emojiPickerSearchEmoji": "Search emoji",
+  "@emojiPickerSearchEmoji": {
+    "description": "Hint text for the emoji picker search text field."
   }
 }

lib/generated/l10n/zulip_localizations.dart

@@ -529,6 +529,12 @@ abstract class ZulipLocalizations {
   /// **'Continue'**
   String get dialogContinue;
 
+  /// Button label in dialogs to close.
+  ///
+  /// In en, this message translates to:
+  /// **'Close'**
+  String get dialogClose;
+
   /// Button label in error dialogs to acknowledge the error and close the dialog.
   ///
   /// In en, this message translates to:
@@ -906,6 +912,18 @@ abstract class ZulipLocalizations {
   /// In en, this message translates to:
   /// **'Removing reaction failed'**
   String get errorReactionRemovingFailedTitle;
+
+  /// Label for a button opening the emoji picker.
+  ///
+  /// In en, this message translates to:
+  /// **'more'**
+  String get emojiReactionsMore;
+
+  /// Hint text for the emoji picker search text field.
+  ///
+  /// In en, this message translates to:
+  /// **'Search emoji'**
+  String get emojiPickerSearchEmoji;
 }
 
 class _ZulipLocalizationsDelegate extends LocalizationsDelegate<ZulipLocalizations> {

lib/generated/l10n/zulip_localizations_ar.dart

@@ -260,6 +260,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get dialogContinue => 'Continue';
 
+  @override
+  String get dialogClose => 'Close';
+
   @override
   String get errorDialogContinue => 'OK';
 
@@ -484,4 +487,10 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
 
   @override
   String get errorReactionRemovingFailedTitle => 'Removing reaction failed';
+
+  @override
+  String get emojiReactionsMore => 'more';
+
+  @override
+  String get emojiPickerSearchEmoji => 'Search emoji';
 }

lib/generated/l10n/zulip_localizations_en.dart

@@ -260,6 +260,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get dialogContinue => 'Continue';
 
+  @override
+  String get dialogClose => 'Close';
+
   @override
   String get errorDialogContinue => 'OK';
 
@@ -484,4 +487,10 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
 
   @override
   String get errorReactionRemovingFailedTitle => 'Removing reaction failed';
+
+  @override
+  String get emojiReactionsMore => 'more';
+
+  @override
+  String get emojiPickerSearchEmoji => 'Search emoji';
 }

lib/generated/l10n/zulip_localizations_ja.dart

@@ -260,6 +260,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get dialogContinue => 'Continue';
 
+  @override
+  String get dialogClose => 'Close';
+
   @override
   String get errorDialogContinue => 'OK';
 
@@ -484,4 +487,10 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
 
   @override
   String get errorReactionRemovingFailedTitle => 'Removing reaction failed';
+
+  @override
+  String get emojiReactionsMore => 'more';
+
+  @override
+  String get emojiPickerSearchEmoji => 'Search emoji';
 }

lib/widgets/action_sheet.dart

@@ -222,11 +222,19 @@ class ReactionButtons extends StatelessWidget {
         : zulipLocalizations.errorReactionAddingFailedTitle);
   }
 
+  void _onMorePressed() {
+    // Dismiss current action sheet before opening emoji picker sheet.
+    Navigator.of(pageContext).pop();
+
+    showEmojiPickerSheet(pageContext: pageContext, message: message);
+  }
+
   @override
   Widget build(BuildContext context) {
     assert(EmojiStore.popularEmojiCandidates.every(
       (emoji) => emoji.emojiType == ReactionType.unicodeEmoji));
 
+    final zulipLocalizations = ZulipLocalizations.of(context);
     final store = PerAccountStoreWidget.of(pageContext);
     final designVariables = DesignVariables.of(context);
 
@@ -240,32 +248,57 @@ class ReactionButtons extends StatelessWidget {
 
     return Container(
       decoration: BoxDecoration(color: designVariables.contextMenuCancelBg),
-      child: Row(
-        spacing: 1,
-        children: List.unmodifiable(EmojiStore.popularEmojiCandidates.mapIndexed((index, emoji) {
-          final isSelfVoted = hasSelfVote(emoji);
-          return Flexible(child: InkWell(
-            onTap: () => _onReactionPressed(emoji: emoji, isSelfVoted: isSelfVoted),
-            splashFactory: NoSplash.splashFactory,
-            borderRadius: index == 0
-              ? 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)
+      child: Row(children: [
+        Flexible(child: Row(
+          spacing: 1,
+          children: List.unmodifiable(EmojiStore.popularEmojiCandidates.mapIndexed((index, emoji) {
+            final isSelfVoted = hasSelfVote(emoji);
+            return Flexible(child: InkWell(
+              onTap: () => _onReactionPressed(emoji: emoji, isSelfVoted: isSelfVoted),
+              splashFactory: NoSplash.splashFactory,
+              borderRadius: index == 0
+                ? const BorderRadius.only(topLeft: Radius.circular(7))
                 : null,
-              child: UnicodeEmojiWidget(
-                emojiDisplay: emoji.emojiDisplay as UnicodeEmojiDisplay,
-                notoColorEmojiTextSize: 20.1,
-                size: 24))));
-        }))));
+              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))));
+          })))),
+        InkWell(
+          onTap: _onMorePressed,
+          splashFactory: NoSplash.splashFactory,
+          borderRadius: const BorderRadius.only(topRight: Radius.circular(7)),
+          overlayColor: WidgetStateColor.resolveWith((states) =>
+            states.any((e) => e == WidgetState.pressed)
+              ? designVariables.contextMenuItemBg.withFadedAlpha(0.20)
+              : Colors.transparent),
+          child: Padding(
+            padding: const EdgeInsetsDirectional.fromSTEB(12, 12, 4, 12),
+            child: Row(children: [
+              Text(zulipLocalizations.emojiReactionsMore,
+                textAlign: TextAlign.end,
+                style: TextStyle(
+                  color: designVariables.contextMenuItemText,
+                  fontSize: 14,
+                ).merge(weightVariableTextStyle(context, wght: 600))),
+              Icon(ZulipIcons.chevron_right,
+                color: designVariables.contextMenuItemText,
+                size: 24),
+            ]),
+          )),
+      ]),
+    );
   }
 }