From 9d204ed066ca9812aec63a8a1d9caef8fe8c00dd Mon Sep 17 00:00:00 2001
From: dimden <admin@dimden.dev>
Date: Mon, 25 Sep 2023 00:50:04 +0300
Subject: [PATCH] made emoji-only messages pretty

---
 layouts/header/script.js | 5 +++++
 layouts/header/style.css | 9 ++++++++-
 scripts/helpers.js       | 5 +++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/layouts/header/script.js b/layouts/header/script.js
index 7dd29ddd..2b6ed03c 100644
--- a/layouts/header/script.js
+++ b/layouts/header/script.js
@@ -809,6 +809,8 @@ let userDataFunction = async user => {
             let m = lastConvo.entries[i].message;
             if(!m) continue;
             let sender = lastConvo.users[m.message_data.sender_id];
+            let clearText = m.message_data.text.replace(/(\s|\n)/g, '');
+            let isOnlyEmojis = isEmojiOnly(clearText) && clearText.length > 0 && clearText.length <= 48;
 
             let messageElement = document.createElement('div');
             messageElement.classList.add('message-element');
@@ -817,6 +819,9 @@ let userDataFunction = async user => {
             } else {
                 messageElement.classList.add('message-element-self');
             }
+            if(isOnlyEmojis) {
+                messageElement.classList.add('message-element-emojis');
+            }
             messageElement.dataset.messageId = m.id;
             messageElement.innerHTML = /*html*/`
                 ${sender.id_str !== user.id_str ? /*html*/`
diff --git a/layouts/header/style.css b/layouts/header/style.css
index e5b8406b..c24c7707 100644
--- a/layouts/header/style.css
+++ b/layouts/header/style.css
@@ -872,7 +872,14 @@ input, textarea {
     margin-top: -4px;
     margin-left: -4px;
 }
-
+.message-element-emojis .message-body {
+    background-color: transparent;
+    font-size: 32px;
+}
+.message-element-emojis .emoji {
+    width: 32px;
+    height: 32px;
+}
 
 .message-element-self.message-element-continue .message-body:after,
 .message-element-other.message-element-continue .message-body:after {
diff --git a/scripts/helpers.js b/scripts/helpers.js
index 86ba55fb..5a3cb754 100644
--- a/scripts/helpers.js
+++ b/scripts/helpers.js
@@ -889,6 +889,11 @@ function createEmojiPicker(container, input, style = {}) {
 
     return picker;
 }
+function isEmojiOnly(str) {
+    const stringToTest = str.replace(/ /g,'');
+    const emojiRegex = /^(?:(?:\p{RI}\p{RI}|\p{Emoji}(?:\p{Emoji_Modifier}|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?(?:\u{200D}\p{Emoji}(?:\p{Emoji_Modifier}|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?)*)|[\u{1f900}-\u{1f9ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}])+$/u;
+    return emojiRegex.test(stringToTest) && Number.isNaN(Number(stringToTest));
+}
 
 const RED = 0.2126;
 const GREEN = 0.7152;