Implement in-line message settings and chat settings Menu

src/index.html

@@ -40,11 +40,40 @@ <h2 id="popupTitle"></h2>
     </div>
 
     <main class="container">
-      <!-- The Global emoji picker popup -->
-      <div class="emoji-picker" tabindex="-1">
+    <!-- The Global emoji picker popup -->
+     <div class="emoji-picker" tabindex="-1">
+      <div class="emoji-search-container">
         <input id="emoji-search-input" placeholder="Search...">
-        <div id="emoji-results"></div>
       </div>
+      <div class="emoji-picker-content">
+        <div class="emoji-sidebar">
+          <button class="emoji-category-btn active" data-category="recents">
+            <span class="icon icon-clock"></span>
+          </button>
+          <button class="emoji-category-btn" data-category="favorites">
+            <span class="icon icon-star"></span>
+          </button>
+          <button class="emoji-category-btn" data-category="all">
+            <span class="icon icon-smile-face"></span>
+          </button>
+        </div>
+        <div class="emoji-main">
+          <div class="emoji-section" id="emoji-recents">
+            <div class="emoji-section-header">Recently Used</div>
+            <div class="emoji-grid" id="emoji-recents-grid"></div>
+          </div>
+          <div class="emoji-section" id="emoji-favorites">
+            <div class="emoji-section-header">Favorites</div>
+            <div class="emoji-grid" id="emoji-favorites-grid"></div>
+          </div>
+          <div class="emoji-section" id="emoji-all">
+            <div class="emoji-section-header">Emojis</div>
+            <div class="emoji-grid" id="emoji-all-grid"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
 
 <div id="profile" class="chats" style="display: none;">
   <div style="height: 60px; background-color: #161616;">
@@ -137,6 +166,54 @@ <h3 style="color: #f7f4f4; margin: 0; text-align: center;">nPub Key</h3>
         </div>
         <h3 id="chat-contact"></h3>
         <span class="cutoff chat-contact-status" id="chat-contact-status"></span>
+
+        <!--Chat menu button -->
+        <div id="chat-menu-btn" class="btn chat-menu-btn">
+          <span class="icon icon-menu"></span>
+        </div>
+
+        <!-- Chat menu popup -->
+         <div id="chat-menu-popup" class="chat-menu-popup" style="display: none;">
+          <div class="chat-menu-option btn" id="chat-menu-self-destruct">
+            <span class="icon icon-self-destruct-msg"></span>
+            <span>Enable Self-Destructing Messages</span>
+          </div>
+          <div class="chat-menu-option btn" id="chat-menu-wallpaper">
+            <span class="icon icon-brush"></span>
+            <span>Change Wallpaper</span>
+          </div>
+          <div class="chat-menu-option btn" id="chat-menu-nickname">
+            <span class="icon icon-edit-user"></span>
+            <span>Change Nickname</span>
+          </div>
+          <div class="chat-menu-option btn" id="chat-menu-share">
+            <span class="icon icon-share"></span>
+            <span>Share Profile</span>
+          </div>
+          <div class="chat-menu-option btn" id="chat-menu-gift">
+            <span class="icon icon-gift"></span>
+            <span>Send a Gift</span>
+          </div>
+          <div class="chat-menu-actions">
+            <div class="chat-menu-action-btn btn" id="chat-menu-block">
+              <span class="icon icon-cancel"></span>
+              <span>Block</span>
+            </div>
+            <div class="chat-menu-action-btn btn" id="chat-menu-mute">
+              <span class="icon icon-volume-max"></span>
+              <span>Mute</span>
+            </div>
+            <div class="chat-menu-action-btn btn" id="chat-menu-remove">
+              <span class="icon icon-trash"></span>
+              <span>Remove</span>
+            </div>
+            <div class="chat-menu-action-btn btn chat-menu-report-btn" id="chat-menu-report">
+              <span class="icon icon-report"></span>
+              <span>Report</span>
+            </div>
+          </div>
+        </div>
+
         <div id="msg-top-fade" class="fadeout-top-msgs"></div>
         <div id="chat-messages" class="chat-messages">
 

src/js/emoji.js

@@ -1325,6 +1325,9 @@ const arrEmojis = [
     { emoji: '🛒', name: 'shopping cart trolley store supermarket' }
 ];
 
+let arrFavoriteEmojis = JSON.parse(localStorage.getItem('favoriteEmojis') || '[]');
+let arrRecentEmojis = JSON.parse(localStorage.getItem('recentEmojis') || '[]');
+
 // Apply some runtime changes to our EmojiDEX
 for (cEmoji of arrEmojis) {
     // Force everything in to lowercase
@@ -1517,4 +1520,25 @@ function isoToFlagEmoji(isoCode) {
  */
 function twemojify(domElement) {
     twemoji.parse(domElement, { callback: (icon, _) => '/twemoji/svg/' + icon + '.svg' });
+}
+
+function addToRecentEmojis(emoji) {
+  // Remove if already exists
+  arrRecentEmojis = arrRecentEmojis.filter(e => e.emoji !== emoji.emoji);
+  // Add to beginning
+  arrRecentEmojis.unshift(emoji);
+  // Keep only last 20
+  arrRecentEmojis = arrRecentEmojis.slice(0, 20);
+  localStorage.setItem('recentEmojis', JSON.stringify(arrRecentEmojis));
+}
+
+function toggleFavoriteEmoji(emoji) {
+  const index = arrFavoriteEmojis.findIndex(e => e.emoji === emoji.emoji);
+  if (index >= 0) {
+    arrFavoriteEmojis.splice(index, 1);
+  } else {
+    arrFavoriteEmojis.push(emoji);
+  }
+  localStorage.setItem('favoriteEmojis', JSON.stringify(arrFavoriteEmojis));
+  return index < 0; // Returns true if added, false if removed
 }