From d766f9a0e36f2b6dbef418903b9cfbe6a923aecb Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 12 May 2025 17:15:11 +0200
Subject: [PATCH] Fix emoji picker

---
 src/assets/css/vendors/_v-emoji-picker.scss   | 16 ++++-
 src/assets/icons/ic_timer.svg                 | 34 +++++++++
 src/components/Chat.vue                       | 72 ++++++++++---------
 .../MessageOperationsBottomSheet.vue          |  2 +
 src/components/chatMixin.js                   |  2 +-
 src/components/messages/MessageOperations.vue |  6 +-
 src/plugins/utils.js                          | 37 ++++++++--
 7 files changed, 124 insertions(+), 45 deletions(-)
 create mode 100644 src/assets/icons/ic_timer.svg

diff --git a/src/assets/css/vendors/_v-emoji-picker.scss b/src/assets/css/vendors/_v-emoji-picker.scss
index 7266c15..5c0e7d6 100644
--- a/src/assets/css/vendors/_v-emoji-picker.scss
+++ b/src/assets/css/vendors/_v-emoji-picker.scss
@@ -1,9 +1,19 @@
-#EmojiPicker {
+.v3-emoji-picker {
     width: 100%;
     background-color: #ffffff;
     margin-top: 15px;
+    box-shadow: none;
+    height: 100%;
+    flex: 1 1 100%;
 
-    .container-emoji {
-        height: 60vh;
+    .v3-emojis button {
+        @media #{map-get($display-breakpoints, 'sm')} {
+            flex-basis: 10% !important;
+            max-width: 10% !important;
+        }
+        @media #{map-get($display-breakpoints, 'md-and-up')} {
+            flex-basis: 6.25% !important;
+            max-width: 6.25% !important;
+        }
     }
 }
diff --git a/src/assets/icons/ic_timer.svg b/src/assets/icons/ic_timer.svg
new file mode 100644
index 0000000..234f0d2
--- /dev/null
+++ b/src/assets/icons/ic_timer.svg
@@ -0,0 +1,34 @@
+  <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1.08333 5.77777H0.361111C0.161778 5.77777 0 5.93955 0 6.13888C0 6.33822 0.161778 6.49999 0.361111 6.49999H1.08333C1.28267 6.49999 1.44444 6.33822 1.44444 6.13888C1.44444 5.93955 1.28267 5.77777 1.08333 5.77777Z"
+      fill="black"
+    />
+    <path
+      d="M1.08333 5.77777H0.361111C0.161778 5.77777 0 5.93955 0 6.13888C0 6.33822 0.161778 6.49999 0.361111 6.49999H1.08333C1.28267 6.49999 1.44444 6.33822 1.44444 6.13888C1.44444 5.93955 1.28267 5.77777 1.08333 5.77777Z"
+      fill="black"
+    />
+    <path
+      d="M1.08333 8.66669H0.361111C0.161778 8.66669 0 8.82846 0 9.0278C0 9.22713 0.161778 9.38891 0.361111 9.38891H1.08333C1.28267 9.38891 1.44444 9.22713 1.44444 9.0278C1.44444 8.82846 1.28267 8.66669 1.08333 8.66669Z"
+      fill="black"
+    />
+    <path
+      d="M1.08333 8.66669H0.361111C0.161778 8.66669 0 8.82846 0 9.0278C0 9.22713 0.161778 9.38891 0.361111 9.38891H1.08333C1.28267 9.38891 1.44444 9.22713 1.44444 9.0278C1.44444 8.82846 1.28267 8.66669 1.08333 8.66669Z"
+      fill="black"
+    />
+    <path
+      d="M11.6553 4.02206L12.1724 3.50494C12.3132 3.36411 12.3132 3.13517 12.1724 2.99433C12.0316 2.8535 11.8026 2.8535 11.6618 2.99433L11.1447 3.51144C10.2766 2.75239 9.1658 2.26633 7.94453 2.18472V0.722222H9.02786C9.22719 0.722222 9.38897 0.560444 9.38897 0.361111C9.38897 0.161778 9.22719 0 9.02786 0H6.13897C5.93964 0 5.77786 0.161778 5.77786 0.361111C5.77786 0.560444 5.93964 0.722222 6.13897 0.722222H7.2223V2.18472C4.40419 2.37178 2.16675 4.71828 2.16675 7.58333C2.16675 10.5704 4.5963 13 7.58341 13C10.5705 13 13.0001 10.5704 13.0001 7.58333C13.0001 6.21978 12.4895 4.97611 11.6553 4.02206ZM7.58341 12.2778C4.99497 12.2778 2.88897 10.1718 2.88897 7.58333C2.88897 4.99489 4.99497 2.88889 7.58341 2.88889C10.1719 2.88889 12.2779 4.99489 12.2779 7.58333C12.2779 10.1718 10.1719 12.2778 7.58341 12.2778Z"
+      fill="black"
+    />
+    <path
+      d="M11.6553 4.02206L12.1724 3.50494C12.3132 3.36411 12.3132 3.13517 12.1724 2.99433C12.0316 2.8535 11.8026 2.8535 11.6618 2.99433L11.1447 3.51144C10.2766 2.75239 9.1658 2.26633 7.94453 2.18472V0.722222H9.02786C9.22719 0.722222 9.38897 0.560444 9.38897 0.361111C9.38897 0.161778 9.22719 0 9.02786 0H6.13897C5.93964 0 5.77786 0.161778 5.77786 0.361111C5.77786 0.560444 5.93964 0.722222 6.13897 0.722222H7.2223V2.18472C4.40419 2.37178 2.16675 4.71828 2.16675 7.58333C2.16675 10.5704 4.5963 13 7.58341 13C10.5705 13 13.0001 10.5704 13.0001 7.58333C13.0001 6.21978 12.4895 4.97611 11.6553 4.02206ZM7.58341 12.2778C4.99497 12.2778 2.88897 10.1718 2.88897 7.58333C2.88897 4.99489 4.99497 2.88889 7.58341 2.88889C10.1719 2.88889 12.2779 4.99489 12.2779 7.58333C12.2779 10.1718 10.1719 12.2778 7.58341 12.2778Z"
+      fill="black"
+    />
+    <path
+      d="M7.58328 4.33331C7.38395 4.33331 7.22217 4.49509 7.22217 4.69442V7.58331C7.22217 7.78265 7.38395 7.94442 7.58328 7.94442C7.78261 7.94442 7.94439 7.78265 7.94439 7.58331V4.69442C7.94439 4.49509 7.78261 4.33331 7.58328 4.33331Z"
+      fill="black"
+    />
+    <path
+      d="M7.58328 4.33331C7.38395 4.33331 7.22217 4.49509 7.22217 4.69442V7.58331C7.22217 7.78265 7.38395 7.94442 7.58328 7.94442C7.78261 7.94442 7.94439 7.78265 7.94439 7.58331V4.69442C7.94439 4.49509 7.78261 4.33331 7.58328 4.33331Z"
+      fill="black"
+    />
+  </svg>
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 5043b48..567a5e9 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -305,7 +305,14 @@
     </div>
 
     <MessageOperationsBottomSheet ref="messageOperationsSheet">
-      <EmojiPicker ref="emojiPicker" @select="emojiSelected" :i18n="i18nEmoji"/>
+      <EmojiPicker ref="emojiPicker" 
+        @select="emojiSelected" 
+        :additional-groups="additionalEmojiGroups" 
+        :group-names="emojiGroupNames" 
+        :group-icons="additionalEmojiGroupIcons"
+        :group-order="['recently_used']"
+        disable-skin-tones 
+        :static-texts="{ placeholder: $t('emoji.search')}"/>
     </MessageOperationsBottomSheet>
 
     <StickerPickerBottomSheet ref="stickerPickerSheet" v-on:selectSticker="sendSticker" />
@@ -358,6 +365,7 @@
 
 <script>
 import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
+import { toRaw } from "vue";
 import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_CHANNEL } from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
 import ChatHeader from "./ChatHeader";
@@ -388,8 +396,10 @@ import { imageSize } from "image-size";
 import prettyBytes from "pretty-bytes";
 import RoomExport from "./RoomExport.vue";
 import EmojiPicker from 'vue3-emoji-picker';
+import 'vue3-emoji-picker/css';
 import emitter from 'tiny-emitter/instance';
 import { markRaw } from "vue";
+import timerIcon from '@/assets/icons/ic_timer.svg';
 
 const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
 const WINDOW_BUFFER_SIZE = 0.3; /** Relative window height of when we start paginating. Always keep this much loaded before and after our scroll position!  */
@@ -512,19 +522,16 @@ export default {
       opStyle: "",
 
       isEmojiQuickReaction: true,
-      i18nEmoji: {
-        search: this.$t("emoji.search"),
-        categories: {
-          Activity: this.$t("emoji.categories.activity"),
-          Flags: this.$t("emoji.categories.flags"),
-          Foods: this.$t("emoji.categories.foods"),
-          Frequently: this.$t("emoji.categories.frequently"),
-          Objects: this.$t("emoji.categories.objects"),
-          Nature: this.$t("emoji.categories.nature"),
-          Peoples: this.$t("emoji.categories.peoples"),
-          Symbols: this.$t("emoji.categories.symbols"),
-          Places: this.$t("emoji.categories.places")
-        }
+      emojiGroupNames:  {
+        "smileys_people": this.$t("emoji.categories.peoples"),
+        "animals_nature": this.$t("emoji.categories.nature"),
+        "food_drink": this.$t("emoji.categories.foods"),
+        "activities": this.$t("emoji.categories.activity"),
+        "travel_places": this.$t("emoji.categories.places"),
+        "objects": this.$t("emoji.categories.objects"),
+        "symbols": this.$t("emoji.categories.symbols"),
+        "flags": this.$t("emoji.categories.flags"),
+        "recently_used": this.$t("emoji.categories.frequently"),
       },
 
       /**
@@ -570,6 +577,12 @@ export default {
   },
 
   computed: {
+    additionalEmojiGroups() {
+      return { 'recently_used': this.recentEmojis }
+    },
+    additionalEmojiGroupIcons() {
+      return { 'recently_used': timerIcon }
+    },
     latestReply() {
       const contents = this.replyToEvent ? this.replyToEvent.getContent().body : "";
       const contentArr = contents.split("\n").reverse();
@@ -1229,7 +1242,6 @@ export default {
      * Triggered when our "long tap" timer hits.
      */
     touchTimerElapsed() {
-      this.updateRecentEmojis();
       this.showContextMenu = true;
     },
 
@@ -1817,14 +1829,25 @@ export default {
         if (this.selectedEvent) {
           const event = this.selectedEvent;
           this.selectedEvent = null;
-          this.sendQuickReaction({ reaction: e.data, event: event });
+          this.sendQuickReaction({ reaction: e.i, event: event });
         }
       } else {
         // When text input emoji picker is clicked
-        this.currentInput = `${this.currentInput} ${e.data}`;
+        this.currentInput = `${this.currentInput} ${e.i}`;
         this.$refs.messageInput.focus();
       }
 
+      let emojis = this.recentEmojis;
+      const existingIdx = emojis.findIndex(emoji => emoji.u == e.u);
+      if (existingIdx >= 0) {
+        emojis.splice(existingIdx, 1);
+      }
+      emojis.splice(0, 0, markRaw(e));
+      if (emojis.length > 5) {
+        emojis.splice(5, emojis.length - 5);
+      }
+      this.recentEmojis = emojis;
+
       this.showEmojiPicker = false;
       this.$refs.messageOperationsSheet.close();
     },
@@ -1895,7 +1918,6 @@ export default {
         this.showContextMenu = false;
         this.$nextTick(() => {
           this.selectedEvent = event;
-          this.updateRecentEmojis();
           this.showContextMenuAnchor = e.anchor;
           this.showContextMenu = true;
         })
@@ -2033,20 +2055,6 @@ export default {
       });
     },
 
-    updateRecentEmojis() {
-      if (this.$refs.emojiPicker) {
-        this.recentEmojis = this.$refs.emojiPicker.mapEmojis["Frequently"];
-        if (this.recentEmojis.length < 20) {
-          let peoples = this.$refs.emojiPicker.mapEmojis["Peoples"];
-          for (var p of peoples) {
-            this.recentEmojis.push(p);
-          }
-        }
-        return;
-      }
-      this.recentEmojis = [];
-    },
-
     formatBytes(bytes) {
       return prettyBytes(bytes);
     },
diff --git a/src/components/MessageOperationsBottomSheet.vue b/src/components/MessageOperationsBottomSheet.vue
index 66497e6..cee4d98 100644
--- a/src/components/MessageOperationsBottomSheet.vue
+++ b/src/components/MessageOperationsBottomSheet.vue
@@ -111,6 +111,8 @@ export default {
   }
   .card {
     padding: 0px !important;
+    display: flex;
+    flex-direction: column;
 
     &[data-state="half"] {
       top: 100px !important;
diff --git a/src/components/chatMixin.js b/src/components/chatMixin.js
index abc05e5..fe79354 100644
--- a/src/components/chatMixin.js
+++ b/src/components/chatMixin.js
@@ -58,7 +58,7 @@ import ReadMarker from "./messages/ReadMarker.vue";
 import roomDisplayOptionsMixin from "./roomDisplayOptionsMixin";
 import roomTypeMixin from "./roomTypeMixin";
 
-export const ROOM_READ_MARKER_EVENT_PLACEHOLDER = { getId: () => "ROOM_READ_MARKER" };
+export const ROOM_READ_MARKER_EVENT_PLACEHOLDER = { getId: () => "ROOM_READ_MARKER", getTs: () => Date.now() };
 
 export default {
   mixins: [ roomDisplayOptionsMixin, roomTypeMixin ],
diff --git a/src/components/messages/MessageOperations.vue b/src/components/messages/MessageOperations.vue
index 3c9f3c8..c8ba5de 100644
--- a/src/components/messages/MessageOperations.vue
+++ b/src/components/messages/MessageOperations.vue
@@ -1,8 +1,8 @@
 <template>
   <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
-    <template v-for="(item,index) in getEmojis" :key="item.data">
-      <v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" density="compact">
-        <span class="recent-emoji">{{ item.data }}</span>
+    <template v-for="(item,index) in getEmojis" :key="item.i">
+      <v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.i)" class="ma-0 pa-0" density="compact">
+        <span class="recent-emoji">{{ item.i }}</span>
       </v-btn>
     </template>
     <v-btn v-if="userCanSendReactionAndAnswerPoll" id="btn-more" icon @click.stop="more" class="ma-0 pa-0">
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 011b27e..b90ba09 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -12,6 +12,12 @@ import aesjs from "aes-js";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import duration from "dayjs/plugin/duration";
 import i18n from "./lang";
+import {
+  toRaw,
+  isRef,
+  isReactive,
+  isProxy,
+} from 'vue';
 
 export const STATE_EVENT_ROOM_DELETION_NOTICE = "im.keanu.room_deletion_notice";
 export const STATE_EVENT_ROOM_DELETED = "im.keanu.room_deleted";
@@ -782,10 +788,10 @@ class Util {
 
   getDefaultAvatars() {
     var images = [];
-    const modules = import.meta.glob("@/assets/avatars/*.{jpeg,jpg,png}", { 
-      query: '?url',
-      import: 'default',
-      eager: true
+    const modules = import.meta.glob("@/assets/avatars/*.{jpeg,jpg,png}", {
+      query: "?url",
+      import: "default",
+      eager: true,
     });
     Object.keys(modules).map((path) => {
       var name = path.split("_")[1];
@@ -1180,7 +1186,7 @@ class Util {
    * Possibly convert numerals to local representation (currently only for "bo" locale)
    * @param str String in which to convert numerals [0-9]
    * @returns converted string
-  */
+   */
   toLocalNumbers = (str) => {
     if (i18n.locale == "my") {
       // Translate to burmese numerals
@@ -1210,5 +1216,24 @@ class Util {
 
     return str;
   };
-}
+
+  deepToRaw(sourceObj) {
+    const objectIterator = (input) => {
+      if (Array.isArray(input)) {
+        return input.map((item) => objectIterator(item));
+      }
+      if (isRef(input) || isReactive(input) || isProxy(input)) {
+        return objectIterator(toRaw(input));
+      }
+      if (input && typeof input === "object") {
+        return Object.keys(input).reduce((acc, key) => {
+          acc[key] = objectIterator(input[key]);
+          return acc;
+        }, {});
+      }
+      return input;
+    };
+    return objectIterator(sourceObj);
+  }
+};
 export default new Util();