v0.28.77

Feat: add better emoji picker

css/main.css

@@ -1299,7 +1299,7 @@ sm-button.danger {
 .message .message-body .text-emoji {
   align-self: center;
   font-size: 1.4em;
-  letter-spacing: 0ch;
+  letter-spacing: 0;
 }
 .message .time {
   white-space: nowrap;
@@ -1511,6 +1511,7 @@ sm-button.danger {
   flex-direction: column;
 }
 .big-emoji .message-body {
+  justify-content: center;
   font-size: 2.6rem;
 }
 
@@ -1520,29 +1521,14 @@ sm-button.danger {
 }
 
 #emoji_picker {
-  display: grid;
+  --background: rgba(var(--text-color), 0.06);
-  gap: 1rem;
+  --border-size: 0;
-  background: rgba(var(--text-color), 0.06);
+  --input-border-color: rgba(var(--text-color), 0.6);
-  border-radius: 1rem;
+  --input-padding: 0.4rem 1rem;
-  margin: 0 1rem;
+  --outline-color: var(--accent-color);
-  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
-  overflow-y: auto;
-  max-height: 30vh;
-}
-#emoji_picker section {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
-  padding: 0 1rem;
-  width: 100%;
-}
-#emoji_picker .section-header {
-  grid-column: 1/-1;
-  position: sticky;
-  top: 0;
-  background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
-  padding: 1rem 0;
-  z-index: 1;
   user-select: none;
+  width: 100%;
+  max-height: 40vh;
 }
 
 .emoji {
@@ -1629,9 +1615,8 @@ sm-panel {
 .has-bg-image .date-card {
   background: rgba(var(--foreground-color), 0.6);
 }
-.has-bg-image #emoji_picker,
+.has-bg-image #emoji_picker {
-.has-bg-image #emoji_picker .section-header {
+  --background: rgba(var(--foreground-color), 0.6);
-  background: rgba(var(--foreground-color), 1);
 }
 .has-bg-image #emoji_toggle path {
   fill: rgba(var(--text-color), 0.8);
@@ -1718,9 +1703,6 @@ sm-panel {
   overflow-y: auto;
   height: 100%;
 }
-#settings_page #settings_panel .panel > *:first-of-type {
-  margin-top: 2rem;
-}
 #settings_page section {
   padding: 1rem 1.5rem;
   width: min(60ch, 100%);
@@ -1874,10 +1856,10 @@ sm-panel {
   #settings_page {
     overflow-x: hidden;
   }
-  #settings_page #settings_panel header {
+  #settings_page #settings_header {
     position: sticky;
     top: 0;
-    padding: 1rem 0;
+    padding: 1rem 1.5rem;
     margin-bottom: 0.5rem;
     background: rgba(var(--foreground-color), 1);
   }
@@ -1994,6 +1976,9 @@ sm-panel {
   #settings_page .active {
     background: rgba(var(--text-color), 0.1);
   }
+  #settings_page .panel > *:first-of-type {
+    margin-top: 0.5rem;
+  }
 
   .contact.active,
 .mail-card.active {
@@ -2039,6 +2024,10 @@ sm-panel {
     padding: 1rem;
   }
 
+  #emoji_picker {
+    --num-columns: 16;
+  }
+
   .contact.active,
 .mail-card.active {
     background: rgba(var(--text-color), 0.06);

css/main.scss

@@ -1223,7 +1223,7 @@ sm-button.danger{
         .text-emoji{
             align-self: center;
             font-size: 1.4em;
-            letter-spacing: 0ch;
+            letter-spacing: 0;
         }
     }
     .time{
@@ -1424,6 +1424,7 @@ sm-button.danger{
 .big-emoji{
     flex-direction: column;
     .message-body{
+        justify-content: center;
         font-size: 2.6rem;
     }
 }
@@ -1431,30 +1432,15 @@ sm-button.danger{
     flex: 1;
     padding: 0 1rem;
 }
-#emoji_picker{
+#emoji_picker{   
-    display: grid;
+    --background: rgba(var(--text-color), 0.06);
-    gap: 1rem;
+    --border-size: 0;
-    background: rgba(var(--text-color), 0.06);
+    --input-border-color: rgba(var(--text-color), 0.6);
-    border-radius: 1rem;
+    --input-padding: 0.4rem 1rem;
-    margin: 0 1rem;
+    --outline-color: var(--accent-color);
-    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
+    user-select: none;
-    overflow-y: auto;
+    width: 100%;
-    max-height: 30vh;
+    max-height: 40vh;
-    section{
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
-        padding: 0 1rem;
-        width: 100%;
-    }
-    .section-header{
-        grid-column: 1/-1;
-        position: sticky;
-        top: 0;
-        background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
-        padding: 1rem 0;
-        z-index: 1;
-        user-select: none;
-    }
 }
 .emoji{
     font-size: 1.6rem;
@@ -1535,9 +1521,8 @@ sm-panel{
     .date-card{
         background: rgba(var(--foreground-color), 0.6);
     }
-    #emoji_picker,
+    #emoji_picker{
-    #emoji_picker .section-header{
+        --background: rgba(var(--foreground-color), 0.6);
-        background: rgba(var(--foreground-color), 1);
     }
     #emoji_toggle{
         path{
@@ -1623,9 +1608,6 @@ sm-panel{
     #settings_panel{
         overflow-y: auto;
         height: 100%;
-        .panel > *:first-of-type{
-            margin-top: 2rem;
-        }
     }
     section{
         padding: 1rem 1.5rem;
@@ -1772,10 +1754,10 @@ sm-panel{
     }
     #settings_page{
         overflow-x: hidden;
-        #settings_panel header{
+        #settings_header{
             position: sticky;
             top: 0;
-            padding: 1rem 0;
+            padding: 1rem 1.5rem;
             margin-bottom: 0.5rem;
             background: rgba(var(--foreground-color), 1);
         }
@@ -1879,6 +1861,9 @@ sm-panel{
         .active{
             background: rgba(var(--text-color), 0.1);
         }
+        .panel > *:first-of-type{
+            margin-top: 0.5rem;
+        }
     }
     .contact.active,
     .mail-card.active{
@@ -1923,6 +1908,9 @@ sm-panel{
             }
         }
     }
+    #emoji_picker{
+        --num-columns: 16;
+    }
     .contact.active,
     .mail-card.active{
         background: rgba(var(--text-color), 0.06);

index.html

@@ -490,7 +490,7 @@
                         </div>
                     </section>
                     <footer id="chat_footer" class="grid">
-                        <div id="emoji_picker" class="hide-completely"></div>
+                        <emoji-picker id="emoji_picker" class="hide-completely"></emoji-picker>
                         <div class="flex">
                             <svg id="emoji_toggle" onclick="toggleEmoji('toggle')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg>
                             <sm-textarea id="type_message" placeholder="Type a message" class="rest outlined"></sm-textarea>
@@ -658,6 +658,17 @@
                     </sm-switch>
                 </div>
                 <div id="personalise_panel" class="panel hide-completely">
+                    <section>
+                        <h4>Chat preview</h4>
+                        <div class="message sent">              
+                            <p class="message-body">Hey there!</p>
+                            <time class="time">12:00PM</time>
+                        </div>
+                        <div class="message received">              
+                            <p class="message-body">How are you?</p>
+                            <time class="time">12:00PM</time>
+                        </div>
+                    </section>
                     <sm-switch id="theme_switcher">
                         <div slot="left" class="flex direction-column">
                             <h4>Dark mode</h4>
@@ -667,7 +678,7 @@
                     <section>
                         <h4>Set chat and mail background image</h4>
                         <div id="bg_preview_container" class="flex">
-                            <div id="selected_bg_preview" class="bg-preview selected" onclick="setBgImage()">
+                            <div id="selected_bg_preview" class="bg-preview" onclick="setBgImage()">
                                 <img src="" alt="background perview">
                             </div>
                             <div id="default_bg_preview" class="bg-preview selected" onclick="setDefaultBg()">Default</div>
@@ -680,15 +691,6 @@
                     <section>
                         <h4>Accent color</h4>
                         <color-grid id="accent_color_selector"></color-grid>
-                        <h4>Chat preview</h4>
-                        <div class="message sent">              
-                            <p class="message-body">Hey there!</p>
-                            <time class="time">12:00PM</time>
-                        </div>
-                        <div class="message received">              
-                            <p class="message-body">How are you?</p>
-                            <time class="time">12:00PM</time>
-                        </div>
                     </section>
                 </div>
                 <div id="backup_panel" class="panel hide-completely">
@@ -726,6 +728,7 @@
     <script src="scripts/components.js"></script>
     <script src="scripts/script.js"></script>
     <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
     <script id="WEBRTC">
         
         const myVideo = document.getElementById('my_video')
@@ -1380,6 +1383,7 @@
             
             floDapps.setCustomPrivKeyInput(signIn)
             showPage('loading_page')
+            getRef('emoji_picker').shadowRoot.append(style);
             
             //clear Rendered Elements
             let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container', 'messages_container',
@@ -1950,24 +1954,6 @@
 				return false;
 			}
             
-            //Detect emoji clicks
-            if(e.target.closest('.emoji')){
-                recentEmojis = localStorage.recentEmojis.split(' ').filter(Boolean)
-                const clickedEmoji = e.target.closest('.emoji').textContent
-                getRef('type_message').value += clickedEmoji
-                if(recentEmojis.length > 15 && recentEmojis.indexOf(clickedEmoji) === -1){
-                    recentEmojis = recentEmojis.filter(v => v !== recentEmojis[0])
-                }
-                if(recentEmojis.indexOf(clickedEmoji) === -1)
-                    recentEmojis.push(clickedEmoji)
-                localStorage.recentEmojis = recentEmojis.join(' ')
-                renderRecentEmojis()
-                if(window.innerWidth > 640){
-                    setTimeout(() => {
-                        getRef('type_message').focusIn()
-                    }, 0);
-                }
-            }
             // detect click outside emoji panel and emoji button
             if(isEmojiPickerOpen && (!e.target.closest('#emoji_picker') && !e.target.closest('#emoji_toggle') && !e.target.closest('#type_message'))){
                 toggleEmoji('hide')
@@ -2285,89 +2271,8 @@
             })
             .catch(err => console.error(err))
         }
-
+        
-        const emojis = [
-            "<", "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗","😙", "😚", "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", 
-            "🤓", "😎", "🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡", "🤬", "🤯", "😳", "🥵", "🥶", 
-            "😱", "😨", "😰", "😥", "😓", "🤗", "🤔", "🤭", "🤫", "🤥", "😶", "😐", "😑", "😬", "🙄", "😯", "😦", "😧", "😮", "😲", "🥱", "😴", "🤤", "😪", "😵", "🤐", "🥴",
-            "🤢", "🤮", "🤧", "😷", "🤒", "🤕", "🤑", "🤠", "😈", "👿", "👹", "👺", "🤡", "💩", "👻", "💀", "☠️", "👽", "👾", "🤖", "🎃", "😺", "😸", "😹", "😻", "😼", "😽", 
-            "🙀", "😿", "😾", ">",
-            
-            "<", "👋", "🤚", "🖐", "✋", "🖖", "👌", "🤏", "✌️", "🤞", "🤟", "🤘", "🤙", "👈", "👉", "👆", "🖕", "👇", "☝️", "👍", "👎", "✊", "👊", "🤛", "🤜", "👏", "🙌", "👐", "🤲", "🤝", "🙏", 
-            "✍️", "💅", "🤳", "💪", "🦾", "🦵", "🦿", "🦶", "👣", "👂", "🦻", "👃", "🧠", "🦷", "🦴", "👀", "👅", "👄", "💋", "🩸", ">",
-
-            "<",
-            "👶", "👧", "🧒", "👦", "👩", "🧑", "👨", "👩‍🦱", "👨‍🦱", "👩‍🦰",  "👨‍🦰", "👱‍♀️", "👱", "👱‍♂️", "👩‍🦳", "👨‍🦳", "👩‍🦲", "👨‍🦲", "🧔", "👵", "🧓", "👴", "👲", "👳‍♀️", "👳", 
-            "🧕", "👮‍♀️", "👮", "👷‍♀️", "👷", "👷‍♂️", "💂‍♀️", "💂", "🕵️‍♀️", "🕵️", "🕵️‍♂️", "👩‍⚕️", "👨‍⚕️", "👩‍🌾", "👨‍🌾", "👩‍🍳", "👨‍🍳", "👩‍🎓", "👨‍🎓", "👩‍🎤", "👨‍🎤", 
-            "👩‍🏫", "👨‍🏫", "👩‍🏭", "👨‍🏭", "👩‍💻", "👨‍💻", "👩‍💼", "👨‍💼", "👩‍🔧", "👨‍🔧", "👩‍🔬", "👨‍🔬", "👩‍🎨",  "👨‍🎨", "👩‍🚒", "👨‍🚒", "👩‍✈️", "👨‍✈️", 
-            "👩‍🚀", "👨‍🚀", "👩‍⚖️", "👨‍⚖️", "👰", "🤵", "👸", "🤴", "🦸‍♀️", "🦸", "🦸‍♂️", "🦹‍♀️", "🦹", "🦹‍♂️", "🤶", "🎅", "🧙‍♀️", "🧙", "🧙‍♂️", "🧝‍♀️", "🧝", 
-            "🧝‍♂️", "🧛‍♀️", "🧛", "🧛‍♂️", "🧟‍♀️", "🧟", "🧟‍♂️", "🧞‍♀️", "🧞", "🧞‍♂️", "🧜‍♀️", "🧜", "🧜‍♂️", "🧚‍♀️", "🧚", "🧚‍♂️", "👼", "🤰", "🤱", "🙇‍♀️", "🙇", "🙇‍♂️", "💁‍♀️", "💁", "💁‍♂️", "🙅‍♀️", "🙅", 
-            "🙅‍♂️", "🙆‍♀️", "🙆", "🙆‍♂️", "🙋‍♀️", "🙋", "🙋‍♂️", "🧏‍♀️", "🧏", "🧏‍♂️", "🤦‍♀️", "🤦", "🤦‍♂️", "🤷‍♀️", "🤷", "🤷‍♂️", "🙎‍♀️", "🙎", "🙎‍♂️", "🙍‍♀️", "🙍", "🙍‍♂️", "💇‍♀️", "💇", "💇‍♂️", "💆‍♀️", "💆", "💆‍♂️", "🧖‍♀️", "🧖", "🧖‍♂️", 
-            "💅", "🤳", "💃", "🕺", "👯‍♀️", "👯", "👯‍♂️", "🕴", "👩‍🦽", "👨‍🦽", "👩‍🦼", "👨‍🦼", "🚶‍♀️", "🚶", "🚶‍♂️", "👩‍🦯", "👨‍🦯", "🧎‍♀️", "🧎", "🧎‍♂️", "🏃‍♀️", "🏃", "🏃‍♂️", "🧍‍♀️", "🧍", "🧍‍♂️", "👭", "🧑‍🤝‍🧑", "👬", 
-            "👫", "👩‍❤️‍👩", "💑", "👨‍❤️‍👨", "👩‍❤️‍👨", "👩‍❤️‍💋‍👩", "💏", "👨‍❤️‍💋‍👨", "👩‍❤️‍💋‍👨", "👪", "👨‍👩‍👦", "👨‍👩‍👧", "👨‍👨‍👦", "👨‍👨‍👧", "👩‍👩‍👦", "👩‍👩‍👧", "👨‍👦", "👨‍👦‍👦", "👨‍👧", "👨‍👧‍👦", 
-            "👨‍👧‍👧", "👩‍👦", "👩‍👦‍👦", "👩‍👧", "👩‍👧‍👦", "👩‍👧‍👧", ">",
-
-            "<",
-            "🧳", "🌂", "☂️", "🧵", "🧶", "👓", "🥽", "🥼", "🦺", "👔", "👕", "👖", "🧣", "🧤", "🧥", "🧦", "👗", "👘", "🥻", "🩱", "🩲", "🩳", "👙", "👚", "👛", "👜", "👝", "🎒", "👞", "👟", "🥾", "🥿", 
-            "👠", "👡", "🩰", "👢", "👑", "👒", "🎩", "🎓", "🧢", "💄", "💍", "💼", 
-            ">",
-
-            "<", "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐽", "🐸", "🐵", "🙈", "🙉", "🙊", "🐒", "🐔", "🐧", "🐦", "🐤", "🐣", "🐥", "🦆", "🦅", "🦉", 
-            "🦇", "🐺", "🐗", "🐴", "🦄", "🐝", "🐛", "🦋", "🐌", "🐞", "🐜", "🦟", "🦗", "🕷", "🕸", "🦂", "🐢", "🐍", "🦎", "🦖", "🦕", "🐙", "🦑", "🦐", "🦞", "🦀", "🐡", "🐠", "🐟", 
-            "🐬", "🐳", "🐋", "🦈", "🐊", "🐅", "🐆", "🦓", "🦍", "🦧", "🐘", "🦛", "🦏", "🐪", "🐫", "🦒", "🦘", "🐃", "🐂", "🐄", "🐎", "🐖", "🐏", "🐑", "🦙", "🐐", "🦌", "🐕", "🐩", 
-            "🦮", "🐕‍🦺", "🐈", "🐈‍", "🐓", "🦃", "🦚", "🦜", "🦢", "🦩", "🐇", "🦝", "🦨", "🦡", "🦦", "🦥", "🐁", "🐀", "🦔", "🐾", "🐉", "🐲", "🌵", "🎄", "🌲", "🌳", "🌴", "🌱", "🌿", 
-            "☘️", "🍀", "🎍", "🎋", "🍃", "🍂", "🍁", "🍄", "🐚", "🌾", "💐", "🌷", "🌹", "🥀", "🌺", "🌸", "🌼", "🌻", "🌞", "🌝", "🌛", "🌜", "🌚", "🌕", "🌖", "🌗", "🌘", "🌑", "🌒", 
-            "🌓", "🌔", "🌙", "🌎", "🌍", "🌏", "🪐", "💫", "⭐️", "🌟", "✨", "⚡️", "☄️", "💥", "🔥", "🌈", "☀️", "⛅️", "☁️", "❄️", "☃️", "⛄️", "💨", "💧", "💦", "☔️", "☂️", "🌊", ">",
-            
-            "<", "🍏", "🍎", "🍐", "🍊", "🍋", "🍌", "🍉", "🍇", "🍓", "🍈", "🍒", "🍑", "🥭", "🍍", "🥥", "🥝", "🍅", "🍆", "🥑", "🥦", "🥬", "🥒", "🌽", "🥕", "🧄", "🧅", "🥔", "🍠", "🥐", 
-            "🥯", "🍞", "🥖", "🥨", "🧀", "🥚", "🍳", "🧈", "🥞", "🧇", "🥓", "🥩", "🍗", "🍖", "🦴", "🌭", "🍔", "🍟", "🍕", "🥪", "🥙", "🧆", "🌮", "🌯", "🥗", "🥘", "🥫", "🍝", "🍜", 
-            "🍲", "🍛", "🍣", "🍱", "🥟", "🦪", "🍤", "🍙", "🍚", "🍘", "🍥", "🥠", "🥮", "🍢", "🍡", "🍧", "🍨", "🍦", "🥧", "🧁", "🍰", "🎂", "🍮", "🍭", "🍬", "🍫", "🍿", "🍩", "🍪", 
-            "🌰", "🥜", "🍯", "🥛", "🍼", "☕️", "🍵", "🧃", "🥤", "🍶", "🍺", "🍻", "🥂", "🍷", "🥃", "🍸", "🍹", "🧉", "🍾", "🧊", "🥄", "🍴", "🍽", "🥣", "🥡", "🥢", "🧂", ">",
-            
-            "<", "⚽️", "🏀", "🏈", "⚾️", "🥎", "🎾", "🏐", "🏉", "🥏", "🎱", "🪀", "🏓", "🏸", "🏒", "🏑", "🥍", "🏏", "🥅", "⛳️", "🪁", "🏹", "🎣", "🤿", "🥊", "🥋", "🎽", "🛹", "🛷", "🥌", 
-            "🎿", "🏂", "🪂", "🏋️‍♀️", "🏋️", "🏋️‍♂️", "🤼‍♀️", "🤼", "🤼‍♂️", "🤸‍♀️", "🤸", "🤸‍♂️", "⛹️‍♀️", "⛹️", "⛹️‍♂️", "🤺", "🤾‍♀️", "🤾", "🤾‍♂️", "🏌️‍♀️", "🏌️", "🏌️‍♂️", "🏇", "🧘‍♀️", "🧘", "🧘‍♂️", "🏄‍♀️", "🏄", "🏄‍♂️", "🏊‍♀️", 
-            "🏊", "🏊‍♂️", "🤽‍♀️", "🤽", "🤽‍♂️", "🚣‍♀️", "🚣", "🚣‍♂️", "🧗‍♀️", "🧗", "🧗‍♂️", "🚵‍♀️", "🚵", "🚵‍♂️", "🚴‍♀️", "🚴", "🚴‍♂️", "🏆", "🥇", "🥈", "🥉", "🏅", "🎫", "🎪", "🤹", "🤹‍♂️", "🤹‍♀️", "🎭", "🩰", "🎨", 
-            "🎬", "🎤", "🎧", "🎼", "🎹", "🥁", "🎷", "🎺", "🎸", "🪕", "🎻", "🎲", "🎯", "🎳", "🎮", "🎰", "🧩", ">"
-        ];
-
-        let recentEmojis = []
-        if(localStorage.getItem('recentEmojis') === null){
-            localStorage.setItem('recentEmojis', '')
-        }
-        else{
-            recentEmojis = localStorage.recentEmojis.split(' ').filter(Boolean)
-        }
-        let renderedEmojis = ''
-        let emojiSectionCounter = 0
         let isEmojiPickerOpen = false
-        let emojiSections = ['Smileys', 'Gestures and Body Parts', 'People and Fantasy', 'Clothing and Accessories', 'Animals & Nature', 'Food & Drink', 'Activity and Sports']
-        renderedEmojis += `
-            <section id="recent_emoji_section">
-            </section>`
-        for(emoji of emojis){
-            if(emoji === '<'){
-                renderedEmojis += `<section>
-                                    <header id="${emojiSections[emojiSectionCounter].toLowerCase().replace(/ /g, '_')}" class="section-header">${emojiSections[emojiSectionCounter]}</header>`
-                emojiSectionCounter++                   
-            }
-            else if(emoji === '>')
-                renderedEmojis += `</section>`
-            else
-                renderedEmojis += `<span class="emoji">${emoji}</span>`
-        }
-        getRef('emoji_picker').innerHTML = renderedEmojis
-
-        function renderRecentEmojis(){
-            let emojis = '<header class="section-header">Recent</header>'
-            recentEmojis.reverse().forEach(emoji => {
-                emojis += `<span class="emoji">${emoji}</span>`
-            })
-            getRef('recent_emoji_section').innerHTML = ''
-            if(recentEmojis.length)
-                getRef('recent_emoji_section').innerHTML = emojis
-        }
-        renderRecentEmojis()
-
         function toggleEmoji(mode){
             switch(mode){
                 case 'toggle':
@@ -2386,6 +2291,37 @@
                 scrollToBottom()
         }
 
+        getRef('emoji_picker').addEventListener('emoji-click', e => {
+            const clickedEmoji = e.detail.unicode
+            getRef('type_message').value += clickedEmoji
+            if(window.innerWidth > 640){
+                setTimeout(() => {
+                    getRef('type_message').focusIn()
+                }, 0);
+            }
+        })
+
+        const style = document.createElement('style');
+        style.textContent = `
+        .emoji-menu{
+            border-top: solid rgba(var(--text-color), 0.2) 1px;
+            background: rgba(var(--foreground-color), 0.6);
+        }
+        @media (hover: hover){
+            ::-webkit-scrollbar{
+                width: 0.5rem;
+                height: 0.5rem;
+            }
+            
+            ::-webkit-scrollbar-thumb{
+                background: rgba(var(--text-color), 0.3);
+                border-radius: 1rem;
+                &:hover{
+                    background: rgba(var(--text-color), 0.5);
+                }
+            }
+        }`
+
         function copyToClipboard(element, message, parent = '.copy-row'){
             const parentElement = element.closest(parent)
             const copyTarget = parentElement.querySelector('.copy')