From ac0dcfc5a1b488cfff8b93162198dc69c63410bc Mon Sep 17 00:00:00 2001
From: RushaliPadhiary <padhiary.rushali@gmail.com>
Date: Wed, 30 Jul 2025 13:12:10 +0530
Subject: [PATCH 1/7] refactor(emoji-picker): redesign emoji UI [only base work
 is done]

---
 src/icons/clock.svg |   3 +
 src/icons/star.svg  |   3 +
 src/index.html      |  35 +++++-
 src/js/emoji.js     |  24 ++++
 src/main.js         | 281 +++++++++++++++++++++++++++++---------------
 src/styles.css      | 155 +++++++++++++++++++++++-
 6 files changed, 399 insertions(+), 102 deletions(-)
 create mode 100644 src/icons/clock.svg
 create mode 100644 src/icons/star.svg

diff --git a/src/icons/clock.svg b/src/icons/clock.svg
new file mode 100644
index 0000000..337bd3b
--- /dev/null
+++ b/src/icons/clock.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M22.7 11.5L20.7005 13.5L18.7 11.5M20.9451 13C20.9814 12.6717 21 12.338 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C14.8273 21 17.35 19.6963 19 17.6573M12 7V12L15 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
\ No newline at end of file
diff --git a/src/icons/star.svg b/src/icons/star.svg
new file mode 100644
index 0000000..0d240cc
--- /dev/null
+++ b/src/icons/star.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M11.2827 3.45332C11.5131 2.98638 11.6284 2.75291 11.7848 2.67831C11.9209 2.61341 12.0791 2.61341 12.2152 2.67831C12.3717 2.75291 12.4869 2.98638 12.7174 3.45332L14.9041 7.88328C14.9721 8.02113 15.0061 8.09006 15.0558 8.14358C15.0999 8.19096 15.1527 8.22935 15.2113 8.25662C15.2776 8.28742 15.3536 8.29854 15.5057 8.32077L20.397 9.03571C20.9121 9.11099 21.1696 9.14863 21.2888 9.27444C21.3925 9.38389 21.4412 9.5343 21.4215 9.68377C21.3988 9.85558 21.2124 10.0372 20.8395 10.4004L17.3014 13.8464C17.1912 13.9538 17.136 14.0076 17.1004 14.0715C17.0689 14.128 17.0487 14.1902 17.0409 14.2545C17.0321 14.3271 17.0451 14.403 17.0711 14.5547L17.906 19.4221C17.994 19.9355 18.038 20.1922 17.9553 20.3445C17.8833 20.477 17.7554 20.57 17.6071 20.5975C17.4366 20.6291 17.2061 20.5078 16.7451 20.2654L12.3724 17.9658C12.2361 17.8942 12.168 17.8584 12.0962 17.8443C12.0327 17.8318 11.9673 17.8318 11.9038 17.8443C11.832 17.8584 11.7639 17.8942 11.6277 17.9658L7.25492 20.2654C6.79392 20.5078 6.56341 20.6291 6.39297 20.5975C6.24468 20.57 6.11672 20.477 6.04474 20.3445C5.962 20.1922 6.00603 19.9355 6.09407 19.4221L6.92889 14.5547C6.95491 14.403 6.96793 14.3271 6.95912 14.2545C6.95132 14.1902 6.93111 14.128 6.89961 14.0715C6.86402 14.0076 6.80888 13.9538 6.69859 13.8464L3.16056 10.4004C2.78766 10.0372 2.60121 9.85558 2.57853 9.68377C2.55879 9.5343 2.60755 9.38389 2.71125 9.27444C2.83044 9.14863 3.08797 9.11099 3.60304 9.03571L8.49431 8.32077C8.64642 8.29854 8.72248 8.28742 8.78872 8.25662C8.84736 8.22935 8.90016 8.19096 8.94419 8.14358C8.99391 8.09006 9.02793 8.02113 9.09597 7.88328L11.2827 3.45332Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 488121d..c4a016a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -37,11 +37,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;">
diff --git a/src/js/emoji.js b/src/js/emoji.js
index ae2f523..3cb0eb6 100644
--- a/src/js/emoji.js
+++ b/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
 }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 5ece820..419fe9c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -99,7 +99,6 @@ const domPopupInput = document.getElementById('popupInput');
 const picker = document.querySelector('.emoji-picker');
 /** @type {HTMLInputElement} */
 const emojiSearch = document.getElementById('emoji-search-input');
-const emojiResults = document.getElementById('emoji-results');
 
 /**
  * The current reaction reference - i.e: a message being reacted to.
@@ -122,21 +121,8 @@ function openEmojiPanel(e) {
     const strReaction = e.target.classList.contains('add-reaction') ? e.target.parentElement.parentElement.id : '';
     const fClickedInputOrReaction = isDefaultPanel || strReaction;
     if (fClickedInputOrReaction && picker.style.display !== `block`) {
-        // Render our most used emojis by default
-        let nDisplayedEmojis = 0;
-        emojiResults.innerHTML = ``;
-        for (const cEmoji of getMostUsedEmojis()) {
-            // Only display 8
-            if (nDisplayedEmojis >= 8) break;
-            // Push it in to the results
-            const spanEmoji = document.createElement('span');
-            spanEmoji.textContent = cEmoji.emoji;
-            emojiResults.appendChild(spanEmoji);
-            nDisplayedEmojis++;
-        }
-
-        // Twemojify!
-        twemojify(emojiResults);
+        // Load emoji sections
+        loadEmojiSections();
 
         // Setup the picker UI
         /** @type {DOMRect} */
@@ -144,16 +130,20 @@ function openEmojiPanel(e) {
 
         // Display the picker
         picker.style.display = `block`;
+        picker.style.height = 'auto';
+        picker.style.overflow = 'hidden';
 
         // Compute its position based on the element calling it
         const pickerRect = picker.getBoundingClientRect();
         if (isDefaultPanel) {
-            // Note: No idea why the 5px extra height is needed, but this prevents the picker from overlapping too much with the chat box
-            picker.style.top = `${document.body.clientHeight - pickerRect.height - rect.height - 5}px`
+            // Center the picker above the input
+            picker.style.top = `${document.body.clientHeight - pickerRect.height - rect.height - 5}px`;
             picker.classList.add('emoji-picker-message-type');
-            // Set it to the right side always for the default panel
-            picker.style.right = `0px`;
-            // Change the emoji button to a wink while the panel is open (removed on close)
+            picker.style.left = '50%';
+            picker.style.right = 'auto';
+            picker.style.transform = 'translateX(-50%)';
+            
+            // Change the emoji button to a wink while the panel is open
             domChatMessageInputEmoji.innerHTML = `<span class="icon icon-wink-face"></span>`;
         } else {
             picker.classList.remove('emoji-picker-message-type');
@@ -182,18 +172,19 @@ function openEmojiPanel(e) {
             
             // If it would overflow the right side, align to right edge
             if (willOverflowRight) {
-                picker.style.right = `0px`;
-                picker.style.left = ``;
+                picker.style.right = `10px`;
+                picker.style.left = `auto`;
+                picker.style.transform = 'none';
             } else {
                 // Position it next to the triggering element
                 picker.style.left = `${xPos}px`;
-                picker.style.right = ``;
+                picker.style.right = `auto`;
+                picker.style.transform = 'none';
             }
         }
 
         // If this is a Reaction, let's cache the Reference ID
         if (strReaction) {
-            // Message IDs are stored on the parent of the React button
             strCurrentReactionReference = strReaction;
         } else {
             strCurrentReactionReference = '';
@@ -212,35 +203,147 @@ function openEmojiPanel(e) {
     }
 }
 
-// Listen for emoji searches
+function loadEmojiSections() {
+    // Load recent emojis
+    const recentsGrid = document.getElementById('emoji-recents-grid');
+    recentsGrid.innerHTML = '';
+    getMostUsedEmojis().slice(0, 24).forEach(emoji => {
+        const span = document.createElement('span');
+        span.textContent = emoji.emoji;
+        span.title = emoji.name;
+        recentsGrid.appendChild(span);
+    });
+    
+    // Load favorite emojis
+    const favoritesGrid = document.getElementById('emoji-favorites-grid');
+    favoritesGrid.innerHTML = '';
+    arrFavoriteEmojis.slice(0, 24).forEach(emoji => {
+        const span = document.createElement('span');
+        span.textContent = emoji.emoji;
+        span.title = emoji.name;
+        favoritesGrid.appendChild(span);
+    });
+    
+    // Load all emojis
+    const allGrid = document.getElementById('emoji-all-grid');
+    allGrid.innerHTML = '';
+    arrEmojis.forEach(emoji => {
+        const span = document.createElement('span');
+        span.textContent = emoji.emoji;
+        span.title = emoji.name;
+        allGrid.appendChild(span);
+    });
+    
+    // Twemojify all emojis
+    twemojify(recentsGrid);
+    twemojify(favoritesGrid);
+    twemojify(allGrid);
+}
+
+// Update the emoji search event listener
 emojiSearch.addEventListener('input', (e) => {
-    // Search for the requested emojis and render them, if it's empty, just use our favorites
-    let nDisplayedEmojis = 0;
-    emojiResults.innerHTML = ``;
-    for (const cEmoji of emojiSearch.value ? searchEmojis(emojiSearch.value) : getMostUsedEmojis()) {
-        // Only display 8
-        if (nDisplayedEmojis >= 8) break;
-        // Push it in to the results
-        const spanEmoji = document.createElement('span');
-        spanEmoji.textContent = cEmoji.emoji;
-        // In searches; the first emoji gets a special tag denoting 'Enter' key selection
-        if (emojiSearch.value) {
-            if (nDisplayedEmojis === 0) {
-                spanEmoji.style.opacity = 1;
-            } else {
-                spanEmoji.style.opacity = 0.75;
-            }
+    const search = e.target.value.toLowerCase();
+    
+    if (search) {
+        // Hide all sections and show search results
+        document.querySelectorAll('.emoji-section').forEach(section => {
+            section.style.display = 'none';
+        });
+        
+        const results = searchEmojis(search);
+        const resultsContainer = document.createElement('div');
+        resultsContainer.className = 'emoji-section';
+        resultsContainer.innerHTML = `
+            <div class="emoji-section-header">Search Results</div>
+            <div class="emoji-grid" id="emoji-search-results"></div>
+        `;
+        
+        const existingResults = document.getElementById('emoji-search-results-container');
+        if (existingResults) {
+            existingResults.remove();
+        }
+        
+        resultsContainer.id = 'emoji-search-results-container';
+        document.querySelector('.emoji-main').prepend(resultsContainer);
+        
+        const resultsGrid = document.getElementById('emoji-search-results');
+        resultsGrid.innerHTML = '';
+        
+        results.slice(0, 48).forEach(emoji => {
+            const span = document.createElement('span');
+            span.textContent = emoji.emoji;
+            span.title = emoji.name;
+            resultsGrid.appendChild(span);
+        });
+        
+        twemojify(resultsGrid);
+    } else {
+        // Show all sections when search is cleared
+        document.querySelectorAll('.emoji-section').forEach(section => {
+            section.style.display = 'block';
+        });
+        
+        const existingResults = document.getElementById('emoji-search-results-container');
+        if (existingResults) {
+            existingResults.remove();
         }
-        emojiResults.appendChild(spanEmoji);
-        nDisplayedEmojis++;
     }
+});
 
-    // Twemojify!
-    twemojify(emojiResults);
+// Update the category button click handler
+document.querySelectorAll('.emoji-category-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+        e.stopPropagation(); // Prevent closing the picker
+        const category = btn.dataset.category;
+        
+        // Update active state
+        document.querySelectorAll('.emoji-category-btn').forEach(b => {
+            b.classList.toggle('active', b === btn);
+        });
+        
+        // Scroll to the selected section
+        const section = document.getElementById(`emoji-${category}`);
+        section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+});
 
-    // If there's none, sad!
-    if (nDisplayedEmojis === 0) {
-        emojiResults.textContent = `No emojis found`;
+// Emoji selection handler
+picker.addEventListener('click', (e) => {
+    if (e.target.tagName === 'SPAN' && e.target.parentElement.classList.contains('emoji-grid')) {
+        const emoji = e.target.textContent;
+        const cEmoji = arrEmojis.find(e => e.emoji === emoji);
+        
+        if (cEmoji) {
+            // Register usage
+            cEmoji.used++;
+            addToRecentEmojis(cEmoji);
+            
+            // Handle the emoji selection
+            if (strCurrentReactionReference) {
+                // Reaction handling 
+                for (const cChat of arrChats) {
+                    const cMsg = cChat.messages.find(a => a.id === strCurrentReactionReference);
+                    if (!cMsg) continue;
+
+                    const strReceiverPubkey = cChat.id;
+                    const spanReaction = document.createElement('span');
+                    spanReaction.classList.add('reaction');
+                    spanReaction.textContent = `${cEmoji.emoji} 1`;
+                    twemojify(spanReaction);
+
+                    const divMessage = document.getElementById(cMsg.id);
+                    divMessage.querySelector(`.msg-extras span`).replaceWith(spanReaction);
+                    invoke('react', { referenceId: strCurrentReactionReference, npub: strReceiverPubkey, emoji: cEmoji.emoji });
+                }
+            } else {
+                // Add to message input
+                domChatMessageInput.value += cEmoji.emoji;
+            }
+            
+            // Close the picker
+            picker.style.display = ``;
+            domChatMessageInput.focus();
+        }
     }
 });
 
@@ -249,11 +352,24 @@ emojiSearch.onkeydown = async (e) => {
     if ((e.code === 'Enter' || e.code === 'NumpadEnter')) {
         e.preventDefault();
 
+        // Find the first emoji in search results or recent emojis
+        let emojiElement;
+        if (emojiSearch.value) {
+            emojiElement = document.querySelector('#emoji-search-results span:first-child');
+        } else {
+            emojiElement = document.querySelector('#emoji-recents-grid span:first-child');
+        }
+
+        if (!emojiElement) return;
+
         // Register the selection in the emoji-dex
-        const cEmoji = arrEmojis.find(a => a.emoji === emojiResults.firstElementChild.firstElementChild.alt);
+        const cEmoji = arrEmojis.find(a => a.emoji === emojiElement.textContent);
+        if (!cEmoji) return;
+        
         cEmoji.used++;
+        addToRecentEmojis(cEmoji);
 
-        // If this is a Reaction - let's send it!
+        // If this is a Reaction - use the original reaction handling
         if (strCurrentReactionReference) {
             // Grab the referred message to find it's chat pubkey
             for (const cChat of arrChats) {
@@ -278,7 +394,7 @@ emojiSearch.onkeydown = async (e) => {
                 invoke('react', { referenceId: strCurrentReactionReference, npub: strReceiverPubkey, emoji: cEmoji.emoji });
             }
         } else {
-            // Add it to the message input
+            // Add to message input
             domChatMessageInput.value += cEmoji.emoji;
         }
 
@@ -306,52 +422,25 @@ emojiSearch.onkeydown = async (e) => {
     }
 };
 
-// Emoji selection
-picker.addEventListener('click', (e) => {
-    if (e.target.tagName === 'IMG') {
-        // Register the click in the emoji-dex
-        const cEmoji = arrEmojis.find(a => a.emoji === e.target.alt);
-        cEmoji.used++;
-
-        // If this is a Reaction - let's send it!
-        if (strCurrentReactionReference) {
-            // Grab the referred message to find it's chat pubkey
-            for (const cChat of arrChats) {
-                const cMsg = cChat.messages.find(a => a.id === strCurrentReactionReference);
-                if (!cMsg) continue;
-
-                // Found the message!
-                const strReceiverPubkey = cChat.id;
-
-                // Add a 'decoy' reaction for good UX (no waiting for the network to register the reaction)
-                const spanReaction = document.createElement('span');
-                spanReaction.classList.add('reaction');
-                spanReaction.textContent = `${cEmoji.emoji} 1`;
-                twemojify(spanReaction);
-
-                // Replace the Reaction button
-                // DOM Tree: msg-(them/me) -> msg-extras -> add-reaction
-                const divMessage = document.getElementById(cMsg.id);
-                divMessage.querySelector(`.msg-extras span`).replaceWith(spanReaction);
-
-                // Send the Reaction to the network
-                invoke('react', { referenceId: strCurrentReactionReference, npub: strReceiverPubkey, emoji: cEmoji.emoji });
+// Add contextmenu event for right-click to favorite
+picker.addEventListener('contextmenu', (e) => {
+    if (e.target.tagName === 'SPAN' && e.target.parentElement.classList.contains('emoji-grid')) {
+        e.preventDefault();
+        const emoji = e.target.textContent;
+        const emojiData = arrEmojis.find(e => e.emoji === emoji);
+        
+        if (emojiData) {
+            const added = toggleFavoriteEmoji(emojiData);
+            if (added) {
+                // Visual feedback for adding to favorites
+                e.target.style.transform = 'scale(1.3)';
+                e.target.style.backgroundColor = 'rgba(255, 215, 0, 0.3)';
+                setTimeout(() => {
+                    e.target.style.transform = '';
+                    e.target.style.backgroundColor = '';
+                }, 500);
             }
-        } else {
-            // Add it to the message input
-            domChatMessageInput.value += cEmoji.emoji;
         }
-
-        // Reset the UI state
-        emojiSearch.value = '';
-        picker.classList.remove('active');
-        strCurrentReactionReference = '';
-
-        // Change the emoji button to the regular face
-        domChatMessageInputEmoji.innerHTML = `<span class="icon icon-smile-face"></span>`;
-
-        // Bring the focus back to the chat
-        domChatMessageInput.focus();
     }
 });
 
diff --git a/src/styles.css b/src/styles.css
index 228acdf..48eedde 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -131,6 +131,14 @@
   mask-image: url("./icons/volume-max.svg");
 }
 
+.icon-clock {
+  mask-image: url("./icons/clock.svg");
+}
+
+.icon-star {
+  mask-image: url("./icons/star.svg");
+}
+
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;
@@ -1060,13 +1068,17 @@ body {
   position: absolute;
   z-index: 1000;
   padding: 10px;
-  width: 200px;
-  max-height: 200px;
-  overflow-y: auto;
+  width: 90%;
+  max-width: 400px;
+  height: auto;
+  left: 50%;
+  transform: translateX(-50%);
   border-radius: 8px;
   border-style: solid;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .emoji-picker-message-type {
@@ -1074,6 +1086,143 @@ body {
   border-right: none;
   border-radius: 0;
   border-top-left-radius: 8px;
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.emoji-picker-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  height: calc(100% - 50px);
+}
+
+.emoji-sidebar {
+  width: 40px; 
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.emoji-category-btn {
+  width: 30px; 
+  height: 30px; 
+  margin: 5px 0;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 16px; 
+}
+
+.emoji-category-btn .icon {
+  width: 16px; 
+  height: 16px; 
+}
+
+.emoji-category-btn:hover {
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.emoji-category-btn.active {
+  opacity: 1;
+  background-color: rgba(89, 252, 179, 0.2);
+}
+
+.emoji-main {
+  flex: 1;
+  padding: 8px;
+  margin-left: 40px; 
+  height: 300px;
+  overflow-y: auto; 
+  overflow-x: hidden; 
+}
+
+.emoji-section {
+  margin-bottom: 12px; 
+}
+
+.emoji-section-header {
+  padding: 8px 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+.emoji-section-header span {
+  margin-right: 8px;
+}
+
+.emoji-section-header .icon-chevron-down {
+  margin-left: auto;
+  opacity: 0.5;
+  transition: transform 0.2s ease;
+  font-size: 12px;
+}
+
+.emoji-section-header:hover .icon-chevron-down {
+  opacity: 1;
+}
+
+.emoji-section.collapsed .emoji-section-header .icon-chevron-down {
+  transform: rotate(-90deg);
+}
+
+.emoji-section.collapsed .emoji-grid {
+  display: none;
+}
+
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr); 
+  gap: 4px; 
+  margin-top: 4px; 
+}
+
+.emoji-grid span {
+  cursor: pointer;
+  font-size: 24px;
+  text-align: center;
+  padding: 5px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.emoji-grid span:hover {
+  background-color: rgba(89, 252, 179, 0.2);
+  transform: scale(1.1);
+}
+
+.emoji-search-container {
+  padding: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.emoji-search-container input {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background-color: rgba(1, 1, 1, 0.5);
+  border: none;
 }
 
 .emoji-picker input {

From 70ee363b4503ac3c62758ec86f68b54eadc4ca01 Mon Sep 17 00:00:00 2001
From: RushaliPadhiary <padhiary.rushali@gmail.com>
Date: Tue, 30 Sep 2025 13:49:58 +0530
Subject: [PATCH 2/7] feat: add chat menu with customizable options and action
 buttons with theme support

---
 src/icons/menu.svg              |   3 +
 src/icons/self-destruct-msg.svg |   3 +
 src/icons/share.svg             |   3 +
 src/index.html                  |  40 +++++++++
 src/main.js                     | 139 ++++++++++++++++++++++++++++-
 src/styles.css                  | 151 ++++++++++++++++++++++++++++++++
 6 files changed, 336 insertions(+), 3 deletions(-)
 create mode 100644 src/icons/menu.svg
 create mode 100644 src/icons/self-destruct-msg.svg
 create mode 100644 src/icons/share.svg

diff --git a/src/icons/menu.svg b/src/icons/menu.svg
new file mode 100644
index 0000000..b3c83a0
--- /dev/null
+++ b/src/icons/menu.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
\ No newline at end of file
diff --git a/src/icons/self-destruct-msg.svg b/src/icons/self-destruct-msg.svg
new file mode 100644
index 0000000..2f1a89a
--- /dev/null
+++ b/src/icons/self-destruct-msg.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
+                    <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAQAElEQVR4AeydCdxtU/3/H/8kpJQ0/1TKkDQYkshcUgoZigaaJJI0UTQhDUpp0KgRlSaRojSgCZVUxkyZCRVSSqr/533dc+/z3Oec5+xzzh6+a63PfX2/d+2zz95rfdd77ees717j/5vyPxMwARMwARMwgeII2AEorsidYRMwARMwAROYmrID4KfABEzABEzABAokYAegwEJ3lk3ABEzABMomQO7tAEDBagImYAImYAKFEbADUFiBO7smYAImYAKlE7gr/3YA7uLg/03ABEzABEygKAJ2AIoqbmfWBEzABEygdAK9/NsB6JFwaAImYAImYAIFEbADUFBhO6smYAImYAKlE1iYfzsAC1n4yARMwARMwASKIWAHoJiidkZNwARMwARKJzA9/3YAptPwsQmYgAmYgAkUQsAOQCEF7WyagAmYgAmUTmBm/u0AzOThTyZgAiZgAiZQBAE7AEUUszNpAiZgAiZQOoFF828HYFEi/mwCJmACJmACBRCwA1BAITuLJmACJmACpROYnX87ALOZ+IwJmIAJmIAJZE/ADkD2RewMmoAJmIAJlE6gX/7tAPSj4nMmYAImYAImkDkBOwCZF7CzZwImYAImUDqB/vm3A9Cfi8+agAmYgAmYQNYE7ABkXbzOnAmYgAmYQOkEBuXfDsAgMj5vAiZgAiZgAhkTsAOQceE6ayZgAiZgAqUTGJx/OwCD2fgbEzABEzABE8iWgB2AbIvWGTMBEzABEyidwFz5twMwFx1/ZwImYAImYAKZErADkGnBOlsmYAImYAKlE5g7/3YA5ubjb03ABEzABEwgSwJ2ALIsVmfKBEzABEygdALD8m8HYBghf28CJmACJmACGRKwA5BhoTpLJmACJmACpRMYnn87AMMZ+QoTMAETMAETyI6AHYDsitQZMgETMAETKJ1AlfzbAahCydeYgAmYgAmYQGYE7ABkVqDOjgmYgAmYQOkEquXfDkA1Tr7KBEzABEzABLIiYAcgq+J0ZkzABEzABEonUDX/dgCqkvJ1JmACJmACJpARATsAGRWms2ICJmACJlA6ger5twNQnZWvNAETMAETMIFsCNgByKYonRETMAETMIHSCYySfzsAo9DytSZgAiZgAiaQCQE7AJkUpLNhAiZgAiZQOoHR8m8H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pRNw/vMiYAcgr/J0bkzABEzABEygEgE7AJUw+SITMAETKJ2A858bATsAuZWo82MCJmACJmACFQjYAagAyZeYgAmYQOkEnP/8CNgByK9MnSMTMAETMAETGErADsBQRL7ABEzABEon4PznSMAOQI6l6jyZgAmYgAmYwBACdgCGAPLXJmACJlA6Aec/TwJ2APIsV+fKBEzABEzABOYkYAdgTjz+0gRMwARKJ+D850rADkCuJet8mYAJmIAJmMAcBOwAzAHHX5mACZhA6QSc/3wJ2AHIt2ydMxMwARMwARMYSMAOwEA0/sIETMAESifg/OdMwA5AzqXrvJmACZiACZjAAAJ2AAaA8WkTMAETKJ2A8583ATsAeZevc2cCJmACJmACfQnYAeiLxSdNwARMoHQCzn/uBOwA5F7Czp8JmIAJmIAJ9CFgB6APFJ8yARMwgdIJOP/5E7ADkH8ZO4cmYAImYAImMIuAHYBZSHzCBEzABEon4PyXQMAOQAlo/FOVAAABo0lEQVSl7DyagAmYgAmYwCIE7AAsAsQfTcAETKB0As5/GQTsAJRRzs6lCZiACZiACcwgYAdgBg5/MAETMIHSCTj/pRCwA1BKSTufJmACJmACJjCNgB2AaTB8aAImYAKlE3D+yyFgB6CcsnZOTcAETMAETGABATsAC1D4wARMwARKJ+D8l0TADkBJpe28moAJmIAJmMB8AnYA5oNwYAImYAKlE3D+yyJgB6Cs8nZuTcAETMAETGAeATsA8zD4PxMwARMonYDzXxoBOwCllbjzawImYAImYAIiYAdAECwmYAImUDoB5788AnYAyitz59gETMAETMAEpuwA+CEwARMwgeIJGECJBOwAlFjqzrMJmIAJmEDxBOwAFP8IGIAJmEDpBJz/MgnYASiz3J1rEzABEzCBwgnYASj8AXD2TcAESifg/JdKwA5AqSXvfJuACZiACRRNwA5A0cXvzJuACZROwPkvl4AdgHLL3jk3ARMwARMomIAdgIIL31k3ARMonYDzXzIBOwAll77zbgImYAImUCwBOwDFFr0zbgImUDoB579sAv8fAAD//5qDNy4AAAAGSURBVAMAOCJqtZwt7YAAAAAASUVORK5CYII=" x="0" y="0" width="512" height="512"/>
+                  </svg>
\ No newline at end of file
diff --git a/src/icons/share.svg b/src/icons/share.svg
new file mode 100644
index 0000000..4e5fff0
--- /dev/null
+++ b/src/icons/share.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M20.7914 12.6074C21.0355 12.3981 21.1575 12.2935 21.2023 12.169C21.2415 12.0598 21.2415 11.9402 21.2023 11.831C21.1575 11.7065 21.0355 11.6018 20.7914 11.3926L12.3206 4.13196C11.9004 3.77176 11.6903 3.59166 11.5124 3.58725C11.3578 3.58342 11.2101 3.65134 11.1124 3.77122C11 3.90915 11 4.18589 11 4.73936V9.03462C8.86532 9.40807 6.91159 10.4897 5.45971 12.1139C3.87682 13.8845 3.00123 16.1759 3 18.551V19.1629C4.04934 17.8989 5.35951 16.8765 6.84076 16.1659C8.1467 15.5394 9.55842 15.1683 11 15.0705V19.2606C11 19.8141 11 20.0908 11.1124 20.2288C11.2101 20.3486 11.3578 20.4166 11.5124 20.4127C11.6903 20.4083 11.9004 20.2282 12.3206 19.868L20.7914 12.6074Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 8000e9a..2a175a1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -146,6 +146,46 @@ <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-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-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">
 
diff --git a/src/main.js b/src/main.js
index a3971a0..b31e3ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -74,6 +74,16 @@ const domChatMessageInputCancel = document.getElementById('chat-input-cancel');
 const domChatMessageInputEmoji = document.getElementById('chat-input-emoji');
 const domChatMessageInputVoice = document.getElementById('chat-input-voice');
 
+const domChatMenuBtn = document.getElementById('chat-menu-btn');
+const domChatMenuPopup = document.getElementById('chat-menu-popup');
+const domChatMenuSelfDestruct = document.getElementById('chat-menu-self-destruct');
+const domChatMenuNickname = document.getElementById('chat-menu-nickname');
+const domChatMenuShare = document.getElementById('chat-menu-share');
+const domChatMenuGift = document.getElementById('chat-menu-gift');
+const domChatMenuBlock = document.getElementById('chat-menu-block');
+const domChatMenuRemove = document.getElementById('chat-menu-remove');
+const domChatMenuReport = document.getElementById('chat-menu-report');
+
 const domChatNew = document.getElementById('chat-new');
 const domChatNewBackBtn = document.getElementById('chat-new-back-text-btn');
 const domShareNpub = document.getElementById('share-npub');
@@ -311,8 +321,8 @@ document.querySelectorAll('.emoji-category-btn').forEach(btn => {
 // Emoji selection handler
 picker.addEventListener('click', (e) => {
     if (e.target.tagName === 'SPAN' && e.target.parentElement.classList.contains('emoji-grid')) {
-        const emoji = e.target.textContent;
-        const cEmoji = arrEmojis.find(e => e.emoji === emoji);
+        const emoji = e.target.getAttribute('title');
+        const cEmoji = arrEmojis.find(e => e.name === emoji);
         
         if (cEmoji) {
             // Register usage
@@ -364,7 +374,7 @@ emojiSearch.onkeydown = async (e) => {
         if (!emojiElement) return;
 
         // Register the selection in the emoji-dex
-        const cEmoji = arrEmojis.find(a => a.emoji === emojiElement.textContent);
+        const cEmoji = arrEmojis.find(a => a.name === emojiElement.getAttribute('title'));
         if (!cEmoji) return;
         
         cEmoji.used++;
@@ -1244,6 +1254,129 @@ async function setupRustListeners() {
     });
 }
 
+// Toggle chat menu popup
+domChatMenuBtn.onclick = (e) => {
+    e.stopPropagation();
+    const isVisible = domChatMenuPopup.style.display === 'block';
+    domChatMenuPopup.style.display = isVisible ? 'none' : 'block';
+};
+
+// Close menu when clicking outside
+document.addEventListener('click', (e) => {
+    if (domChatMenuPopup.style.display === 'block' && 
+        !domChatMenuPopup.contains(e.target) && 
+        e.target !== domChatMenuBtn && 
+        !domChatMenuBtn.contains(e.target)) {
+        domChatMenuPopup.style.display = 'none';
+    }
+});
+
+// Self-Destructing Messages
+domChatMenuSelfDestruct.onclick = () => {
+    domChatMenuPopup.style.display = 'none';
+    popupConfirm(
+        'Self-Destructing Messages',
+        'This feature allows messages to automatically delete after a set time period.',
+        true,
+        '',
+        'vector_warning.svg'
+    );
+};
+
+// Change Nickname
+domChatMenuNickname.onclick = async () => {
+    domChatMenuPopup.style.display = 'none';
+    const profile = getProfile(strOpenChat);
+    if (!profile) return;
+    
+    const nick = await popupConfirm('Choose a Nickname', '', false, 'Nickname');
+    if (nick === false) return;
+    
+    if (nick.length >= 30) {
+        return popupConfirm(
+            'Woah woah!',
+            'A ' + nick.length + '-character nickname seems excessive!',
+            true,
+            '',
+            'vector_warning.svg'
+        );
+    }
+    
+    await invoke('set_nickname', { npub: profile.id, nickname: nick });
+};
+
+// Share a Profile
+domChatMenuShare.onclick = () => {
+    domChatMenuPopup.style.display = 'none';
+    const profile = getProfile(strOpenChat);
+    if (!profile) return;
+    
+    popupConfirm(
+        'Share Profile',
+        'Share this profile with others.',
+        true,
+        '',
+        'vector_warning.svg'
+    );
+};
+
+// Send a Gift
+domChatMenuGift.onclick = () => {
+    domChatMenuPopup.style.display = 'none';
+    popupConfirm(
+        'Send a Gift',
+        'Send digital gifts to your contact.',
+        true,
+        '',
+        'vector_warning.svg'
+    );
+};
+
+// Block
+domChatMenuBlock.onclick = () => {
+    domChatMenuPopup.style.display = 'none';
+    const profile = getProfile(strOpenChat);
+    if (!profile) return;
+    
+    popupConfirm(
+        'Block User',
+        'Blocking will prevent this user from contacting you.',
+        true,
+        '',
+        'vector_warning.svg'
+    );
+};
+
+// Remove
+domChatMenuRemove.onclick = () => {
+    domChatMenuPopup.style.display = 'none';
+    const profile = getProfile(strOpenChat);
+    if (!profile) return;
+    
+    popupConfirm(
+        'Remove Chat',
+        'This will delete all messages from this conversation. This action cannot be undone.',
+        true,
+        '',
+        'vector_warning.svg'
+    );
+};
+
+// Report
+domChatMenuReport.onclick = () => {
+    domChatMenuPopup.style.display = 'none';
+    const profile = getProfile(strOpenChat);
+    if (!profile) return;
+    
+    popupConfirm(
+        'Report User',
+        'Report this user for violating community guidelines.',
+        true,
+        '',
+        'vector_warning.svg'
+    );
+};
+
 /**
  * A flag that indicates when Vector is still in it's initiation sequence
  */
diff --git a/src/styles.css b/src/styles.css
index f993471..fed7adb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -697,6 +697,153 @@ body {
   font-weight: 100;
 }
 
+/* Chat menu button*/
+.chat-menu-btn {
+  position: absolute;
+  top: 15px;
+  right: 10px;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  background-color: transparent;
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.chat-menu-btn:hover {
+  opacity: 0.8;
+}
+
+.chat-menu-btn .icon {
+  background-color: var(--icon-color-primary);
+}
+
+.icon-menu {
+  mask-image: url("./icons/menu.svg");
+}
+
+.icon-self-destruct-msg {
+  mask-image: url("./icons/self-destruct-msg.svg");
+}
+
+.icon-share {
+  mask-image: url("./icons/share.svg");
+}
+
+.icon-report {
+  mask-image: url("./icons/vector_warning.svg");
+}
+
+/* Chat menu popup*/
+.chat-menu-popup {
+  position: absolute;
+  top: 62px;
+  right: 10px;
+  width: 280px;
+  border-radius: 12px;
+  padding: 8px;
+  z-index: 1000;
+  background-color: #000000;
+  border: 1px solid var(--icon-color-primary);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+/* Menu options*/
+.chat-menu-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 12px 16px;
+  margin-bottom: 4px;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.chat-menu-option:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: var(--icon-color-primary);
+}
+
+/* Theme-sensitive on hover*/
+.chat-menu-option:hover span:last-child {
+  color: var(--icon-color-primary);
+}
+
+.chat-menu-option .icon {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  margin-right: 10px;
+  background-color: var(--icon-color-primary);
+  flex-shrink: 0;
+}
+
+.chat-menu-option span:last-child {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-align: left;
+  flex: 1;
+  transition: color 0.2s ease;
+}
+
+/* Action buttons row*/
+.chat-menu-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--icon-color-primary);
+}
+
+.chat-menu-action-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 6px;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  background-color: rgba(128, 128, 128, 0.3);
+}
+
+.chat-menu-action-btn:hover {
+  background-color: rgba(128, 128, 128, 0.5);
+  border: 1px solid var(--icon-color-primary);
+}
+
+.chat-menu-action-btn .icon {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  margin-bottom: 4px;
+  background-color: var(--icon-color-primary);
+}
+
+.chat-menu-action-btn span:last-child {
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+}
+
+.chat-menu-action-btn:hover span:last-child {
+  color: var(--icon-color-primary);
+}
+
+/* Report button*/
+.chat-menu-report-btn .icon {
+  background-color: #ff1493;
+}
+
 .chats {
   display: flex;
   justify-content: center;
@@ -1231,6 +1378,10 @@ body {
   transform: scale(1.1);
 }
 
+.emoji-grid span img {
+  pointer-events: none;
+}
+
 .emoji-search-container {
   padding: 8px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);

From 1061bbadc23f171f209ee9dd03250b0f3c9f68b4 Mon Sep 17 00:00:00 2001
From: RushaliPadhiary <padhiary.rushali@gmail.com>
Date: Tue, 30 Sep 2025 20:31:18 +0530
Subject: [PATCH 3/7] feat: add context menu for message actions with emoji
 quick reactions

---
 src/icons/forward.svg |   3 +
 src/icons/pin.svg     |   3 +
 src/main.js           | 319 ++++++++++++++++++++++++++++++++++++++++++
 src/styles.css        | 177 +++++++++++++++++++++++
 4 files changed, 502 insertions(+)
 create mode 100644 src/icons/forward.svg
 create mode 100644 src/icons/pin.svg

diff --git a/src/icons/forward.svg b/src/icons/forward.svg
new file mode 100644
index 0000000..ba4ff96
--- /dev/null
+++ b/src/icons/forward.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M21 9H7.5C5.01472 9 3 11.0147 3 13.5C3 15.9853 5.01472 18 7.5 18H12M21 9L17 5M21 9L17 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
\ No newline at end of file
diff --git a/src/icons/pin.svg b/src/icons/pin.svg
new file mode 100644
index 0000000..4e27509
--- /dev/null
+++ b/src/icons/pin.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M8.3767 15.6163L2.71985 21.2732M11.6944 6.64181L10.1335 8.2027C10.0062 8.33003 9.94252 8.39369 9.86999 8.44427C9.80561 8.48917 9.73616 8.52634 9.66309 8.555C9.58077 8.58729 9.49249 8.60495 9.31592 8.64026L5.65145 9.37315C4.69915 9.56361 4.223 9.65884 4.00024 9.9099C3.80617 10.1286 3.71755 10.4213 3.75771 10.7109C3.8038 11.0434 4.14715 11.3867 4.83387 12.0735L11.9196 19.1592C12.6063 19.8459 12.9497 20.1893 13.2821 20.2354C13.5718 20.2755 13.8645 20.1869 14.0832 19.9928C14.3342 19.7701 14.4294 19.2939 14.6199 18.3416L15.3528 14.6771C15.3881 14.5006 15.4058 14.4123 15.4381 14.33C15.4667 14.2569 15.5039 14.1875 15.5488 14.1231C15.5994 14.0505 15.663 13.9869 15.7904 13.8596L17.3512 12.2987C17.4326 12.2173 17.4734 12.1766 17.5181 12.141C17.5578 12.1095 17.5999 12.081 17.644 12.0558C17.6936 12.0274 17.7465 12.0048 17.8523 11.9594L20.3467 10.8904C21.0744 10.5785 21.4383 10.4226 21.6035 10.1706C21.7481 9.95025 21.7998 9.68175 21.7474 9.42348C21.6875 9.12813 21.4076 8.84822 20.8478 8.28839L15.7047 3.14526C15.1448 2.58543 14.8649 2.30552 14.5696 2.24565C14.3113 2.19329 14.0428 2.245 13.8225 2.38953C13.5705 2.55481 13.4145 2.91866 13.1027 3.64636L12.0337 6.14071C11.9883 6.24653 11.9656 6.29944 11.9373 6.34905C11.9121 6.39313 11.8836 6.43522 11.852 6.47496C11.8165 6.51971 11.7758 6.56041 11.6944 6.64181Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index b31e3ae..9b290d9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3718,3 +3718,322 @@ function softChatScroll() {
 }
 
 window.onresize = adjustSize;
+
+// Message Context Menu Implementation
+
+let contextMenu = null;
+let contextMenuTarget = null;
+let longPressTimer = null;
+const LONG_PRESS_DURATION = 500; // milliseconds
+
+/**
+ * Creates the context menu element
+ */
+function createContextMenu() {
+    if (contextMenu) return contextMenu;
+    
+    const menu = document.createElement('div');
+    menu.className = 'msg-context-menu';
+    menu.id = 'msg-context-menu';
+    
+    // Quick emoji reactions row
+    const emojiRow = document.createElement('div');
+    emojiRow.className = 'msg-context-emoji-row';
+    
+    // Get 5 most used emojis
+    const topEmojis = getMostUsedEmojis().slice(0, 5);
+    
+    topEmojis.forEach(emojiData => {
+        const btn = document.createElement('button');
+        btn.className = 'msg-context-emoji-btn btn';
+        btn.innerHTML = emojiData.emoji;
+        btn.dataset.emoji = emojiData.emoji;
+        btn.dataset.emojiName = emojiData.name;
+        twemojify(btn);
+        emojiRow.appendChild(btn);
+    });
+    
+    // Add "more emojis" button
+    const moreBtn = document.createElement('button');
+    moreBtn.className = 'msg-context-emoji-btn btn';
+    moreBtn.innerHTML = '<span class="icon icon-smile-face"></span>';
+    moreBtn.dataset.action = 'more-emojis';
+    emojiRow.appendChild(moreBtn);
+    
+    menu.appendChild(emojiRow);
+    
+    // Actions
+    const actionsDiv = document.createElement('div');
+    actionsDiv.className = 'msg-context-actions';
+    
+    const actions = [
+        { icon: 'edit', label: 'Edit Message', action: 'edit' },
+        { icon: 'reply', label: 'Reply', action: 'reply' },
+        { icon: 'forward', label: 'Forward', action: 'forward' },
+        { icon: 'copy-text', label: 'Copy Text', action: 'copy' },
+        { icon: 'pin', label: 'Pin Message', action: 'pin' },
+        { icon: 'delete', label: 'Delete Message', action: 'delete', className: 'delete-action' }
+    ];
+    
+    actions.forEach(actionData => {
+        const actionBtn = document.createElement('div');
+        actionBtn.className = `msg-context-action btn ${actionData.className || ''}`;
+        actionBtn.dataset.action = actionData.action;
+        actionBtn.innerHTML = `
+            <span class="icon icon-${actionData.icon}"></span>
+            <span>${actionData.label}</span>
+        `;
+        actionsDiv.appendChild(actionBtn);
+    });
+    
+    menu.appendChild(actionsDiv);
+    document.body.appendChild(menu);
+    
+    contextMenu = menu;
+    return menu;
+}
+
+/**
+ * Shows the context menu for a message
+ */
+function showContextMenu(messageElement) {
+    const menu = createContextMenu();
+    contextMenuTarget = messageElement;
+    
+    // Add active state to message
+    messageElement.classList.add('context-active');
+    
+    // Show the menu (it slides up from bottom via CSS)
+    menu.classList.add('visible');
+}
+
+/**
+ * Hides the context menu
+ */
+function hideContextMenu() {
+    if (!contextMenu) return;
+    
+    contextMenu.classList.remove('visible');
+    
+    // Remove active state from message
+    if (contextMenuTarget) {
+        contextMenuTarget.classList.remove('context-active');
+        contextMenuTarget = null;
+    }
+}
+
+/**
+ * Handles context menu action clicks
+ */
+function handleContextAction(action, messageElement) {
+    const messageId = messageElement.id;
+    
+    switch (action) {
+        case 'edit':
+            // TODO: Implement edit functionality
+            popupConfirm('Edit Message', 'Edit functionality coming soon!', true, '', 'vector_warning.svg');
+            break;
+            
+        case 'reply':
+            // Use existing reply functionality
+            const replyEvent = { target: messageElement };
+            selectReplyingMessage(replyEvent);
+            break;
+            
+        case 'forward':
+            // TODO: Implement forward functionality
+            popupConfirm('Forward Message', 'Forward functionality coming soon!', true, '', 'vector_warning.svg');
+            break;
+            
+        case 'copy':
+            // Copy message text to clipboard
+            const messageText = messageElement.querySelector('p')?.textContent;
+            if (messageText) {
+                navigator.clipboard.writeText(messageText).then(() => {
+                    // Could show a brief "Copied!" toast here
+                });
+            }
+            break;
+            
+        case 'pin':
+            // TODO: Implement pin functionality
+            popupConfirm('Pin Message', 'Are you sure you want to pin this message?', true, '', 'vector_warning.svg');
+            break;
+            
+        case 'delete':
+            // TODO: Implement delete functionality
+            popupConfirm('Delete Message', 'Are you sure you want to delete this message?', false, '', 'vector_warning.svg')
+                .then(confirmed => {
+                    if (confirmed) {
+                        // Call delete function
+                    }
+                });
+            break;
+            
+        case 'more-emojis':
+            // Set the reaction reference
+            strCurrentReactionReference = messageId;
+            
+            // Create the proper DOM structure that openEmojiPanel expects
+            // It looks for: target.classList.contains('add-reaction') and then gets parentElement.parentElement.id
+            const msgExtras = document.createElement('div');
+            msgExtras.className = 'msg-extras';
+            
+            const addReactionBtn = document.createElement('span');
+            addReactionBtn.classList.add('add-reaction');
+            msgExtras.appendChild(addReactionBtn);
+            
+            const msgContainer = document.createElement('div');
+            msgContainer.id = messageId;
+            msgContainer.appendChild(msgExtras);
+            
+            // Create a proper mouse event
+            const fakeEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window
+            });
+            
+            // Override the target to be our add-reaction button
+            Object.defineProperty(fakeEvent, 'target', {
+                value: addReactionBtn,
+                enumerable: true
+            });
+            
+            // Hide context menu first
+            hideContextMenu();
+            
+            // Open the emoji panel
+            openEmojiPanel(fakeEvent);
+            return; // Return early since we already hid the menu
+            
+        default:
+            // Handle emoji reactions
+            if (action.startsWith('emoji:')) {
+                const emoji = action.substring(6);
+                handleEmojiReaction(messageId, emoji);
+            }
+    }
+    
+    hideContextMenu();
+}
+
+/**
+ * Handles emoji reaction selection
+ */
+function handleEmojiReaction(messageId, emoji) {
+    const cEmoji = arrEmojis.find(e => e.emoji === emoji);
+    if (!cEmoji) return;
+    
+    // Register usage
+    cEmoji.used++;
+    addToRecentEmojis(cEmoji);
+    
+    // Find the message in chats
+    for (const cChat of arrChats) {
+        const cMsg = cChat.messages.find(a => a.id === messageId);
+        if (!cMsg) continue;
+        
+        const strReceiverPubkey = cChat.id;
+        const spanReaction = document.createElement('span');
+        spanReaction.classList.add('reaction');
+        spanReaction.textContent = `${cEmoji.emoji} 1`;
+        twemojify(spanReaction);
+        
+        const divMessage = document.getElementById(cMsg.id);
+        const existingReaction = divMessage.querySelector('.msg-extras span');
+        if (existingReaction) {
+            existingReaction.replaceWith(spanReaction);
+        }
+        
+        invoke('react', { 
+            referenceId: messageId, 
+            npub: strReceiverPubkey, 
+            emoji: cEmoji.emoji 
+        });
+        
+        break;
+    }
+}
+
+/**
+ * Initialize context menu event listeners
+ */
+function initContextMenu() {
+    // Touch events for long-press
+    document.addEventListener('touchstart', (e) => {
+        const messageElement = e.target.closest('.msg-me, .msg-them');
+        if (!messageElement) return;
+        
+        longPressTimer = setTimeout(() => {
+            showContextMenu(messageElement);
+            // Prevent default to avoid text selection
+            e.preventDefault();
+        }, LONG_PRESS_DURATION);
+    }, { passive: false });
+    
+    document.addEventListener('touchend', () => {
+        if (longPressTimer) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+        }
+    });
+    
+    document.addEventListener('touchmove', () => {
+        if (longPressTimer) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+        }
+    });
+    
+    // Right-click for desktop
+    document.addEventListener('contextmenu', (e) => {
+        const messageElement = e.target.closest('.msg-me, .msg-them');
+        if (!messageElement) return;
+        
+        e.preventDefault();
+        showContextMenu(messageElement);
+    });
+    
+    // Click outside to close
+    document.addEventListener('click', (e) => {
+        if (!contextMenu || !contextMenu.classList.contains('visible')) return;
+        
+        if (!contextMenu.contains(e.target) && !e.target.closest('.emoji-picker')) {
+            hideContextMenu();
+        }
+    });
+    
+    // Handle context menu clicks
+    document.addEventListener('click', (e) => {
+        if (!contextMenu) return;
+        
+        // Emoji button click
+        const emojiBtn = e.target.closest('.msg-context-emoji-btn');
+        if (emojiBtn && contextMenuTarget) {
+            e.stopPropagation(); // Prevent click from bubbling
+            
+            if (emojiBtn.dataset.action === 'more-emojis') {
+                handleContextAction('more-emojis', contextMenuTarget);
+            } else if (emojiBtn.dataset.emoji) {
+                handleEmojiReaction(contextMenuTarget.id, emojiBtn.dataset.emoji);
+                hideContextMenu();
+            }
+            return;
+        }
+        
+        // Action button click
+        const actionBtn = e.target.closest('.msg-context-action');
+        if (actionBtn && contextMenuTarget) {
+            e.stopPropagation(); // Prevent click from bubbling
+            handleContextAction(actionBtn.dataset.action, contextMenuTarget);
+        }
+    });
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initContextMenu);
+} else {
+    initContextMenu();
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index fed7adb..b5124ea 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -139,6 +139,15 @@
   mask-image: url("./icons/star.svg");
 }
 
+
+.icon-forward {
+  mask-image: url("./icons/forward.svg");
+}
+
+.icon-pin {
+  mask-image: url("./icons/pin.svg");
+}
+
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;
@@ -844,6 +853,174 @@ body {
   background-color: #ff1493;
 }
 
+/* Message Context Menu */
+.msg-context-menu {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(100%);
+  background: rgba(0, 0, 0, 0.95);
+  border: 1px solid var(--icon-color-primary);
+  border-radius: 12px 12px 0 0;
+  padding: 12px;
+  z-index: 2000;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+  opacity: 0;
+}
+
+.msg-context-menu.visible {
+  transform: translateX(-50%) translateY(0);
+  pointer-events: auto;
+  opacity: 1;
+}
+
+/* Quick Emoji Reactions Row */
+.msg-context-emoji-row {
+  display: flex;
+  gap: 8px;
+  padding: 8px 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  margin-bottom: 8px;
+  justify-content: space-between;
+}
+
+.msg-context-emoji-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 24px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.msg-context-emoji-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--icon-color-primary);
+  transform: scale(1.1);
+}
+
+.msg-context-emoji-btn .emoji {
+  width: 26px !important;
+  height: 26px !important;
+}
+
+.msg-context-emoji-btn .icon {
+  width: 22px;
+  height: 22px;
+  background-color: var(--icon-color-primary);
+}
+
+/* Context Menu Actions */
+.msg-context-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: stretch;
+}
+
+.msg-context-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 12px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.03);
+  text-align: left;
+}
+
+.msg-context-action:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--icon-color-primary);
+}
+
+.msg-context-action:hover span:last-child {
+  color: var(--icon-color-primary);
+}
+
+.msg-context-action .icon {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  margin-right: 12px;
+  background-color: var(--icon-color-primary);
+  flex-shrink: 0;
+}
+
+.msg-context-action span:last-child {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  transition: color 0.2s ease;
+  text-align: left;
+  flex: 1;
+}
+
+/* Delete action should be red */
+.msg-context-action.delete-action {
+  border-color: rgba(255, 82, 82, 0.2);
+}
+
+.msg-context-action.delete-action:hover {
+  background: rgba(255, 82, 82, 0.1);
+  border-color: #ff5252;
+}
+
+.msg-context-action.delete-action .icon {
+  background-color: #ff5252;
+}
+
+.msg-context-action.delete-action span:last-child {
+  color: #ff5252;
+}
+
+.msg-context-action.delete-action:hover span:last-child {
+  color: #ff5252;
+}
+
+/* Hide the old hover-based extras */
+.msg-extras .hideable {
+  display: none !important;
+}
+
+/* Touch/long-press highlight */
+.msg-me.context-active,
+.msg-them.context-active {
+  background: rgba(89, 252, 179, 0.1);
+  border-radius: 8px;
+  padding: 4px;
+  margin: -4px;
+}
+
+.msg-me.context-active p,
+.msg-them.context-active p {
+  border-color: var(--icon-color-primary);
+  box-shadow: 0 0 12px rgba(89, 252, 179, 0.3);
+}
+
+.icon-copy-text {
+  mask-image: url("./icons/copy.svg");
+}
+
+.icon-delete {
+  mask-image: url("./icons/trash.svg");
+}
+
 .chats {
   display: flex;
   justify-content: center;

From d43f9142c34ead37b0bc0dbf308d4281d0bfef99 Mon Sep 17 00:00:00 2001
From: RushaliPadhiary <padhiary.rushali@gmail.com>
Date: Wed, 1 Oct 2025 12:03:26 +0530
Subject: [PATCH 4/7] style: reduce spacing in context menu and chat header
 menu

---
 src/styles.css | 63 +++++++++++++++++++++++++-------------------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index b5124ea..254ddb8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -746,7 +746,6 @@ body {
 .icon-report {
   mask-image: url("./icons/vector_warning.svg");
 }
-
 /* Chat menu popup*/
 .chat-menu-popup {
   position: absolute;
@@ -754,7 +753,7 @@ body {
   right: 10px;
   width: 280px;
   border-radius: 12px;
-  padding: 8px;
+  padding: 6px;
   z-index: 1000;
   background-color: #000000;
   border: 1px solid var(--icon-color-primary);
@@ -766,8 +765,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 12px 16px;
-  margin-bottom: 4px;
+  padding: 10px 12px;
+  margin-bottom: 2px;
   border-radius: 8px;
   transition: all 0.2s ease;
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -785,8 +784,8 @@ body {
 }
 
 .chat-menu-option .icon {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   position: relative;
   margin-right: 10px;
   background-color: var(--icon-color-primary);
@@ -805,9 +804,9 @@ body {
 /* Action buttons row*/
 .chat-menu-actions {
   display: flex;
-  gap: 6px;
-  margin-top: 8px;
-  padding-top: 8px;
+  gap: 4px;
+  margin-top: 6px;
+  padding-top: 6px;
   border-top: 1px solid var(--icon-color-primary);
 }
 
@@ -817,7 +816,7 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 8px 6px;
+  padding: 6px 4px;
   border-radius: 8px;
   transition: all 0.2s ease;
   border: 1px solid transparent;
@@ -830,15 +829,15 @@ body {
 }
 
 .chat-menu-action-btn .icon {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   position: relative;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
   background-color: var(--icon-color-primary);
 }
 
 .chat-menu-action-btn span:last-child {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   text-align: center;
   color: #ffffff;
@@ -862,7 +861,7 @@ body {
   background: rgba(0, 0, 0, 0.95);
   border: 1px solid var(--icon-color-primary);
   border-radius: 12px 12px 0 0;
-  padding: 12px;
+  padding: 10px;
   z-index: 2000;
   width: 90%;
   max-width: 500px;
@@ -883,16 +882,16 @@ body {
 /* Quick Emoji Reactions Row */
 .msg-context-emoji-row {
   display: flex;
-  gap: 8px;
-  padding: 8px 4px;
+  gap: 6px;
+  padding: 6px 4px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   justify-content: space-between;
 }
 
 .msg-context-emoji-btn {
-  width: 44px;
-  height: 44px;
+  width: 42px;
+  height: 42px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -901,7 +900,7 @@ body {
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  font-size: 24px;
+  font-size: 22px;
   padding: 0;
   flex-shrink: 0;
 }
@@ -913,13 +912,13 @@ body {
 }
 
 .msg-context-emoji-btn .emoji {
-  width: 26px !important;
-  height: 26px !important;
+  width: 24px !important;
+  height: 24px !important;
 }
 
 .msg-context-emoji-btn .icon {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   background-color: var(--icon-color-primary);
 }
 
@@ -927,7 +926,7 @@ body {
 .msg-context-actions {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 3px;
   align-items: stretch;
 }
 
@@ -935,7 +934,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 12px 12px;
+  padding: 10px 12px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -957,7 +956,7 @@ body {
   width: 20px;
   height: 20px;
   position: relative;
-  margin-right: 12px;
+  margin-right: 10px;
   background-color: var(--icon-color-primary);
   flex-shrink: 0;
 }
@@ -978,19 +977,19 @@ body {
 
 .msg-context-action.delete-action:hover {
   background: rgba(255, 82, 82, 0.1);
-  border-color: #ff5252;
+  border-color: #ff1493;
 }
 
 .msg-context-action.delete-action .icon {
-  background-color: #ff5252;
+  background-color: #ff1493;
 }
 
 .msg-context-action.delete-action span:last-child {
-  color: #ff5252;
+  color: #ff1493;
 }
 
 .msg-context-action.delete-action:hover span:last-child {
-  color: #ff5252;
+  color: #ff1493;
 }
 
 /* Hide the old hover-based extras */

From ba1051fc939b96bc8f66d9a6b78b919055d1159a Mon Sep 17 00:00:00 2001
From: RushaliPadhiary <padhiary.rushali@gmail.com>
Date: Wed, 1 Oct 2025 12:52:50 +0530
Subject: [PATCH 5/7] feat: Add chat menu options for wallpaper and mute action
 button

---
 src/icons/brush.svg |  3 ++
 src/index.html      | 84 +++++++++++++++++++++++++--------------------
 src/main.js         | 53 ++++++++++++++++++++++++++++
 src/styles.css      | 13 +++++++
 4 files changed, 115 insertions(+), 38 deletions(-)
 create mode 100644 src/icons/brush.svg

diff --git a/src/icons/brush.svg b/src/icons/brush.svg
new file mode 100644
index 0000000..f521122
--- /dev/null
+++ b/src/icons/brush.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M20 10V3.6C20 3.03995 20 2.75992 19.891 2.54601C19.7951 2.35785 19.6422 2.20487 19.454 2.10899C19.2401 2 18.9601 2 18.4 2H5.6C5.03995 2 4.75992 2 4.54601 2.10899C4.35785 2.20487 4.20487 2.35785 4.10899 2.54601C4 2.75992 4 3.03995 4 3.6V10M20 10H4M20 10V10.2C20 11.8802 20 12.7202 19.673 13.362C19.3854 13.9265 18.9265 14.3854 18.362 14.673C17.7202 15 16.8802 15 15.2 15H8.8C7.11984 15 6.27976 15 5.63803 14.673C5.07354 14.3854 4.6146 13.9265 4.32698 13.362C4 12.7202 4 11.8802 4 10.2V10M14.5 15V19.5C14.5 20.8807 13.3807 22 12 22C10.6193 22 9.5 20.8807 9.5 19.5V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 2a175a1..bc75d2f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -146,45 +146,53 @@ <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-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-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="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">
diff --git a/src/main.js b/src/main.js
index 9b290d9..177c043 100644
--- a/src/main.js
+++ b/src/main.js
@@ -77,10 +77,12 @@ const domChatMessageInputVoice = document.getElementById('chat-input-voice');
 const domChatMenuBtn = document.getElementById('chat-menu-btn');
 const domChatMenuPopup = document.getElementById('chat-menu-popup');
 const domChatMenuSelfDestruct = document.getElementById('chat-menu-self-destruct');
+const domChatMenuWallpaper = document.getElementById('chat-menu-wallpaper');
 const domChatMenuNickname = document.getElementById('chat-menu-nickname');
 const domChatMenuShare = document.getElementById('chat-menu-share');
 const domChatMenuGift = document.getElementById('chat-menu-gift');
 const domChatMenuBlock = document.getElementById('chat-menu-block');
+const domChatMenuMute = document.getElementById('chat-menu-mute');
 const domChatMenuRemove = document.getElementById('chat-menu-remove');
 const domChatMenuReport = document.getElementById('chat-menu-report');
 
@@ -1259,6 +1261,11 @@ domChatMenuBtn.onclick = (e) => {
     e.stopPropagation();
     const isVisible = domChatMenuPopup.style.display === 'block';
     domChatMenuPopup.style.display = isVisible ? 'none' : 'block';
+    
+    // Update mute button state based on current chat
+    if (!isVisible && strOpenChat) {
+        updateMuteButtonUI(strOpenChat);
+    }
 };
 
 // Close menu when clicking outside
@@ -1283,6 +1290,21 @@ domChatMenuSelfDestruct.onclick = () => {
     );
 };
 
+// Change Wallpaper
+domChatMenuWallpaper.onclick = () => {
+    domChatMenuPopup.style.display = 'none';
+    const profile = getProfile(strOpenChat);
+    if (!profile) return;
+    
+    popupConfirm(
+        'Change Wallpaper',
+        'Select a new wallpaper for this chat.',
+        true,
+        '',
+        'vector_warning.svg'
+    );
+};
+
 // Change Nickname
 domChatMenuNickname.onclick = async () => {
     domChatMenuPopup.style.display = 'none';
@@ -1347,6 +1369,37 @@ domChatMenuBlock.onclick = () => {
     );
 };
 
+// Helper function to update mute button UI based on profile state
+function updateMuteButtonUI(npub) {
+    const profile = getProfile(npub);
+    if (!profile) return;
+    
+    const isMuted = profile.muted || false;
+    const muteIcon = domChatMenuMute.querySelector('.icon');
+    const muteText = domChatMenuMute.querySelector('span:last-child');
+    
+    if (isMuted) {
+        muteIcon.classList.remove('icon-volume-max');
+        muteIcon.classList.add('icon-volume-mute');
+        muteText.textContent = 'Unmute';
+        domChatMenuMute.classList.add('muted');
+    } else {
+        muteIcon.classList.remove('icon-volume-mute');
+        muteIcon.classList.add('icon-volume-max');
+        muteText.textContent = 'Mute';
+        domChatMenuMute.classList.remove('muted');
+    }
+}
+
+// Mute/Unmute 
+domChatMenuMute.onclick = async () => {
+    domChatMenuPopup.style.display = 'none';
+    const profile = getProfile(strOpenChat);
+    if (!profile) return;
+    
+    await invoke('toggle_muted', { npub: profile.id });
+};
+
 // Remove
 domChatMenuRemove.onclick = () => {
     domChatMenuPopup.style.display = 'none';
diff --git a/src/styles.css b/src/styles.css
index 254ddb8..3274850 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -739,6 +739,10 @@ body {
   mask-image: url("./icons/self-destruct-msg.svg");
 }
 
+.icon-brush {
+  mask-image: url("./icons/brush.svg");
+}
+
 .icon-share {
   mask-image: url("./icons/share.svg");
 }
@@ -746,6 +750,15 @@ body {
 .icon-report {
   mask-image: url("./icons/vector_warning.svg");
 }
+
+.icon-volume-max {
+  mask-image: url("./icons/volume-max.svg");
+}
+
+.icon-volume-mute {
+  mask-image: url("./icons/volume-mute.svg");
+}
+
 /* Chat menu popup*/
 .chat-menu-popup {
   position: absolute;

From 9cd490d2cc160b52b7e6896462fb66b88cf5700c Mon Sep 17 00:00:00 2001
From: RushaliPadhiary <padhiary.rushali@gmail.com>
Date: Wed, 1 Oct 2025 13:00:55 +0530
Subject: [PATCH 6/7] chore: Update forward.svg icon

---
 src/icons/forward.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/icons/forward.svg b/src/icons/forward.svg
index ba4ff96..f6b48b5 100644
--- a/src/icons/forward.svg
+++ b/src/icons/forward.svg
@@ -1,3 +1,3 @@
 <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M21 9H7.5C5.01472 9 3 11.0147 3 13.5C3 15.9853 5.01472 18 7.5 18H12M21 9L17 5M21 9L17 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M4 20V18.6C4 15.2397 4 13.5595 4.65396 12.2761C5.2292 11.1471 6.14708 10.2292 7.27606 9.65396C8.55953 9 10.2397 9 13.6 9H20M20 9L15 14M20 9L15 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
\ No newline at end of file

From daf98cf34178b020449525690364d9f5386d236e Mon Sep 17 00:00:00 2001
From: RushaliPadhiary <padhiary.rushali@gmail.com>
Date: Tue, 14 Oct 2025 09:38:07 +0530
Subject: [PATCH 7/7] remove forward option from the context menu

---
 src/icons/forward.svg | 3 ---
 src/main.js           | 6 ------
 src/styles.css        | 5 -----
 3 files changed, 14 deletions(-)
 delete mode 100644 src/icons/forward.svg

diff --git a/src/icons/forward.svg b/src/icons/forward.svg
deleted file mode 100644
index f6b48b5..0000000
--- a/src/icons/forward.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M4 20V18.6C4 15.2397 4 13.5595 4.65396 12.2761C5.2292 11.1471 6.14708 10.2292 7.27606 9.65396C8.55953 9 10.2397 9 13.6 9H20M20 9L15 14M20 9L15 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 361eed2..391b9f9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4705,7 +4705,6 @@ function createContextMenu() {
     const actions = [
         { icon: 'edit', label: 'Edit Message', action: 'edit' },
         { icon: 'reply', label: 'Reply', action: 'reply' },
-        { icon: 'forward', label: 'Forward', action: 'forward' },
         { icon: 'copy-text', label: 'Copy Text', action: 'copy' },
         { icon: 'pin', label: 'Pin Message', action: 'pin' },
         { icon: 'delete', label: 'Delete Message', action: 'delete', className: 'delete-action' }
@@ -4776,11 +4775,6 @@ function handleContextAction(action, messageElement) {
             selectReplyingMessage(replyEvent);
             break;
             
-        case 'forward':
-            // TODO: Implement forward functionality
-            popupConfirm('Forward Message', 'Forward functionality coming soon!', true, '', 'vector_warning.svg');
-            break;
-            
         case 'copy':
             // Copy message text to clipboard
             const messageText = messageElement.querySelector('p')?.textContent;
diff --git a/src/styles.css b/src/styles.css
index 6d8e4ec..ffa0c3d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -139,11 +139,6 @@
   mask-image: url("./icons/star.svg");
 }
 
-
-.icon-forward {
-  mask-image: url("./icons/forward.svg");
-}
-
 .icon-pin {
   mask-image: url("./icons/pin.svg");
 }