fix emoji picker toggling

static/app.js

@@ -451,10 +451,24 @@ class UIManager {
         document.getElementById('chat-section').style.display = 'none';
         document.getElementById('users-list').innerHTML = '<div class="no-users"></div>';
     }
+    static handleClickOutsideEmojiPicker(event) {
+        const emojiPicker = document.getElementById('emoji-picker');
+        if (!emojiPicker.contains(event.target)) {
+            UIManager.closeEmojiPicker();
+        }
+    }
 
-    static toggleEmojiPicker() {
+    static closeEmojiPicker() {
+        const emojiPicker = document.getElementById('emoji-picker');
+        if (emojiPicker) {
+            emojiPicker.remove();
+            document.removeEventListener('click', UIManager.handleClickOutsideEmojiPicker);
+            return;
+        }
+    }
+
+    static openEmojiPicker() {
         if (document.getElementById('emoji-picker')) {
-            document.getElementById('emoji-picker').remove();
             return;
         }
 
@@ -512,17 +526,24 @@ class UIManager {
                 this.style.backgroundColor = 'transparent';
             })
 
-            // TODO: when clicking outside of the emoji picker, close it
-            // using click event listener causes it to fire tons of times
+            setTimeout(() => {
+                document.addEventListener('click', UIManager.handleClickOutsideEmojiPicker);
+            }, 0);
 
             emojiPicker.appendChild(emojiSpan);
         });
 
 
-        // if (chatInputContainer) {
         chatInputContainer.style.position = 'relative';
         chatInputContainer.appendChild(emojiPicker);
-        // }
+    }
+
+    static toggleEmojiPicker() {
+        if (document.getElementById('emoji-picker')) {
+            UIManager.closeEmojiPicker();
+        } else {
+            UIManager.openEmojiPicker();
+        }
     }
 
     static async loadSettingsButton() {