From d9cb2ed683313bc6790afddb3beb4688c30eb744 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 20 Apr 2024 23:34:27 +0530
Subject: [PATCH] fix: added reaction icons and option in IconPicker

---
 frontend/src/components/IconPicker.vue | 29 +++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/IconPicker.vue b/frontend/src/components/IconPicker.vue
index 6039e8ac..c1249d25 100644
--- a/frontend/src/components/IconPicker.vue
+++ b/frontend/src/components/IconPicker.vue
@@ -5,8 +5,28 @@
         <span class="text-base"> {{ modelValue || '' }} </span>
       </slot>
     </template>
-    <template #body>
-      <div class="my-3 max-w-max transform bg-white px-4 sm:px-0">
+    <template #body="{ togglePopover }">
+      <div
+        v-if="reaction"
+        class="flex items-center justify-center gap-2 rounded-full bg-white px-2 py-1 shadow-sm"
+      >
+        <div
+          class="size-5 cursor-pointer rounded-full bg-white text-xl"
+          v-for="r in reactionEmojis"
+          :key="r"
+          @click="() => (emoji = r) && togglePopover()"
+        >
+          <button>
+            {{ r }}
+          </button>
+        </div>
+        <Button
+          class="rounded-full"
+          icon="plus"
+          @click.stop="() => (reaction = false)"
+        />
+      </div>
+      <div v-else class="my-3 max-w-max transform bg-white px-4 sm:px-0">
         <div
           class="relative max-h-96 overflow-y-auto rounded-lg pb-3 shadow-2xl ring-1 ring-black ring-opacity-5"
         >
@@ -31,7 +51,7 @@
                 class="h-8 w-8 rounded-md p-1 text-2xl hover:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-200"
                 v-for="_emoji in emojis"
                 :key="_emoji.description"
-                @click="emoji = _emoji.emoji"
+                @click="() => (emoji = _emoji.emoji) && togglePopover()"
                 :title="_emoji.description"
               >
                 {{ _emoji.emoji }}
@@ -50,6 +70,9 @@ import { ref, computed } from 'vue'
 
 const search = ref('')
 const emoji = defineModel()
+const reaction = defineModel('reaction')
+
+const reactionEmojis = ref(['👍', '❤️', '😂', '😮', '😢', '🙏'])
 
 const emojiGroups = computed(() => {
   let groups = {}