reactions: Support adding arbitrary 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,6 +222,16 @@ class ReactionButtons extends StatelessWidget {
         : zulipLocalizations.errorReactionAddingFailedTitle);
   }
 
+  void _handleTapMore() {
+    // TODO(design): have emoji picker slide in from right and push
+    //   action sheet off to the left
+
+    // Dismiss current action sheet before opening emoji picker sheet.
+    Navigator.of(pageContext).pop();
+
+    showEmojiPickerSheet(pageContext: pageContext, message: message);
+  }
+
   Widget _buildButton({
     required BuildContext context,
     required EmojiCandidate emoji,
@@ -257,6 +267,7 @@ class ReactionButtons extends StatelessWidget {
     assert(EmojiStore.popularEmojiCandidates.every(
       (emoji) => emoji.emojiType == ReactionType.unicodeEmoji));
 
+    final zulipLocalizations = ZulipLocalizations.of(context);
     final store = PerAccountStoreWidget.of(pageContext);
     final designVariables = DesignVariables.of(context);
 
@@ -271,13 +282,38 @@ class ReactionButtons extends StatelessWidget {
     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)))));
+      child: Row(children: [
+        Flexible(child: Row(spacing: 1, children: List.unmodifiable(
+          EmojiStore.popularEmojiCandidates.mapIndexed((index, emoji) =>
+            _buildButton(
+              context: context,
+              emoji: emoji,
+              isSelfVoted: hasSelfVote(emoji),
+              isFirst: index == 0))))),
+        InkWell(
+          onTap: _handleTapMore,
+          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),
+            ]),
+          )),
+      ]),
+    );
   }
 }
 

lib/widgets/autocomplete.dart

@@ -260,6 +260,7 @@ class _EmojiAutocompleteItem extends StatelessWidget {
     final store = PerAccountStoreWidget.of(context);
     final candidate = option.candidate;
 
+    // TODO deduplicate this logic with [EmojiPickerListEntry]
     final emojiDisplay = candidate.emojiDisplay.resolve(store.userSettings);
     final Widget? glyph = switch (emojiDisplay) {
       ImageEmojiDisplay() =>