Reuse the emoji picker for reactions (#7)

Fixes #6

Co-authored-by: FloatingGhost <hannah@coffee-and-dreams.uk>
Reviewed-on: http://akkoma.dev/AkkomaGang/pleroma-fe/pulls/7

src/components/react_button/react_button.js

@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
 
@@ -12,10 +13,12 @@ const ReactButton = {
     }
   },
   components: {
-    Popover
+    Popover,
+    EmojiPicker
   },
   methods: {
-    addReaction (event, emoji, close) {
+    addReaction (event, close) {
+      const emoji = event.insertion
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
@@ -32,53 +35,6 @@ const ReactButton = {
     }
   },
   computed: {
-    commonEmojis () {
-      return [
-        { displayText: 'lying', replacement: '🤥' },
-        { displayText: 'thinking', replacement: '🤔' },
-        { displayText: 'zany', replacement: '🤪' },
-        { displayText: 'cartwheeling', replacement: '🤸‍♂️' },
-        { displayText: 'pills', replacement: '💊' },
-        { displayText: 'writing', replacement: '✍️' },
-        { displayText: 'pencil', replacement: '✏️' },
-        { displayText: 'chart_up', replacement: '📈' },
-        { displayText: 'chart_down', replacement: '📉' },
-        { displayText: 'question', replacement: '❔' },
-        { displayText: 'x', replacement: '❌' },
-        { displayText: 'orangutan', replacement: '🦧' },
-        { displayText: 'owl', replacement: '🦉' },
-        { displayText: 'bottle', replacement: '🍼' },
-        { displayText: 'crayon', replacement: '🖍️' },
-        { displayText: 'blackula', replacement: '🧛🏿' },
-        { displayText: 'wrench', replacement: '🔧' },
-        { displayText: 'axe', replacement: '🪓' }
-      ]
-    },
-    emojis () {
-      if (this.filterWord !== '') {
-        const filterWordLowercase = this.filterWord.toLowerCase()
-        let orderedEmojiList = []
-        for (const emoji of [
-          ...this.$store.state.instance.emoji,
-          ...this.$store.state.instance.customEmoji
-        ]) {
-          if (emoji.replacement === this.filterWord) return [emoji]
-
-          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
-          if (indexOfFilterWord > -1) {
-            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
-              orderedEmojiList[indexOfFilterWord] = []
-            }
-            orderedEmojiList[indexOfFilterWord].push(emoji)
-          }
-        }
-        return orderedEmojiList.flat()
-      }
-      return [
-        ...this.$store.state.instance.emoji,
-        ...this.$store.state.instance.customEmoji
-      ] || []
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }

src/components/react_button/react_button.vue

@@ -9,43 +9,10 @@
     @show="focusInput"
   >
     <template v-slot:content="{close}">
-      <div class="reaction-picker-filter">
-        <input
-          v-model="filterWord"
-          size="1"
-          :placeholder="$t('emoji.search_emoji')"
-        >
-      </div>
-      <div class="reaction-picker">
-        <span
-          v-for="emoji in commonEmojis"
-          :key="emoji.replacement"
-          class="emoji-button"
-          :title="emoji.displayText"
-          @click="addReaction($event, emoji.replacement, close)"
-        >
-          {{ 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)"
-        >
-          <img
-            v-if="emoji.imageUrl !== false"
-            :src="emoji.imageUrl"
-            width="30px"
-            class="custom-reaction"
-          >
-          <span v-else>
-            {{ emoji.replacement }}
-          </span>
-        </span>
-        <div class="reaction-bottom-fader" />
-      </div>
+      <EmojiPicker
+        :enableStickerPicker="false"
+        @emoji="addReaction($event, close)"
+      />
     </template>
     <template v-slot:trigger>
       <button