From 8f118c01a44b4d30204812b2f60dd9a5d1ef27f5 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sat, 28 Nov 2020 15:27:58 +0200
Subject: [PATCH] add titles in react picker, support filtering by emoji itself

---
 src/components/react_button/react_button.js  | 10 +++++++++-
 src/components/react_button/react_button.vue |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index de0df70c..5e7b7580 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -27,13 +27,21 @@ const ReactButton = {
   },
   computed: {
     commonEmojis () {
-      return ['👍', '😠', '👀', '😂', '🔥']
+      return [
+        { displayText: 'thumbsup', replacement: '👍' },
+        { displayText: 'angry', replacement: '😠' },
+        { displayText: 'eyes', replacement: '👀' },
+        { displayText: 'joy', replacement: '😂' },
+        { displayText: 'fire', replacement: '🔥' }
+      ]
     },
     emojis () {
       if (this.filterWord !== '') {
         const filterWordLowercase = this.filterWord.toLowerCase()
         let orderedEmojiList = []
         for (const emoji of this.$store.state.instance.emoji) {
+          if (emoji.replacement === this.filterWord) return [emoji]
+
           const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
           if (indexOfFilterWord > -1) {
             if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index e508a3e9..b5eb4524 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -22,15 +22,17 @@
           v-for="emoji in commonEmojis"
           :key="emoji"
           class="emoji-button"
+          :title="emoji.displayText"
           @click="addReaction($event, emoji, close)"
         >
-          {{ emoji }}
+          {{ emoji.replacement }}
         </span>
         <div class="reaction-picker-divider" />
         <span
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
+          :title="emoji.displayText"
           @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}