Track frequently used emojis in web UI (#5275)

* Track frequently used emojis in web UI

* Persist emoji usage, but debounce commits to the settings API

* Fix #5144 - Add tooltips to picker

* Display only 2 lines of frequently used emojis

1 files changed, 8 insertions, 2 deletions

diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
index 9be8909d8..dffa04ff0 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
@@ -146,6 +146,7 @@ class EmojiPickerMenu extends React.PureComponent {
 
   static propTypes = {
     custom_emojis: ImmutablePropTypes.list,
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
     onPick: PropTypes.func.isRequired,
@@ -163,6 +164,7 @@ class EmojiPickerMenu extends React.PureComponent {
     style: {},
     loading: true,
     placement: 'bottom',
+    frequentlyUsedEmojis: [],
   };
 
   state = {
@@ -233,7 +235,7 @@ class EmojiPickerMenu extends React.PureComponent {
   }
 
   render () {
-    const { loading, style, intl, custom_emojis, autoPlay, skinTone } = this.props;
+    const { loading, style, intl, custom_emojis, autoPlay, skinTone, frequentlyUsedEmojis } = this.props;
 
     if (loading) {
       return <div style={{ width: 299 }} />;
@@ -256,9 +258,11 @@ class EmojiPickerMenu extends React.PureComponent {
           i18n={this.getI18n()}
           onClick={this.handleClick}
           include={categoriesSort}
+          recent={frequentlyUsedEmojis}
           skin={skinTone}
           showPreview={false}
           backgroundImageFn={backgroundImageFn}
+          emojiTooltip
         />
 
         <ModifierPicker
@@ -279,6 +283,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
 
   static propTypes = {
     custom_emojis: ImmutablePropTypes.list,
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
     autoPlay: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
@@ -341,7 +346,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
   }
 
   render () {
-    const { intl, onPickEmoji, autoPlay, onSkinTone, skinTone } = this.props;
+    const { intl, onPickEmoji, autoPlay, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
     const title = intl.formatMessage(messages.emoji);
     const { active, loading } = this.state;
 
@@ -364,6 +369,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
             autoPlay={autoPlay}
             onSkinTone={onSkinTone}
             skinTone={skinTone}
+            frequentlyUsedEmojis={frequentlyUsedEmojis}
           />
         </Overlay>
       </div>