[call-me] - feat: add unread message count badge on sidebar button and fix chat notification visibility

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.3.38",
+    "version": "1.3.39",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.3.38",
+            "version": "1.3.39",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.7.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.3.38",
+    "version": "1.3.39",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",

public/client.js

@@ -35,6 +35,7 @@ const chatContent = document.getElementById('chatContent');
 const settingsContent = document.getElementById('settingsContent');
 const chatNotification = document.getElementById('chatNotification');
 const participantCount = document.getElementById('participantCount');
+const messageCount = document.getElementById('messageCount');
 const chatMessages = document.getElementById('chatMessages');
 const chatForm = document.getElementById('chatForm');
 const chatInput = document.getElementById('chatInput');
@@ -596,6 +597,11 @@ function handleListeners() {
         sidebarBtn.addEventListener('click', (e) => {
             e.stopPropagation();
             userSidebar.classList.toggle('active');
+            // Clear message badge when opening sidebar with chat tab active
+            if (userSidebar.classList.contains('active') && currentTab === 'chat') {
+                unreadMessages = 0;
+                updateChatNotification();
+            }
         });
 
         // Utility to handle click outside for any element
@@ -2806,6 +2812,14 @@ function updateChatNotification() {
             chatNotification.classList.add('hidden');
         }
     }
+    if (messageCount) {
+        if (unreadMessages > 0) {
+            messageCount.textContent = unreadMessages > 99 ? '99+' : unreadMessages.toString();
+            messageCount.classList.remove('hidden');
+        } else {
+            messageCount.classList.add('hidden');
+        }
+    }
 }
 
 // Chat form handler
@@ -2856,7 +2870,7 @@ function addChatMessage(msg, isSelf = false) {
     chatMessages.scrollTop = chatMessages.scrollHeight;
 
     // Handle unread message counter
-    if (!isSelf && currentTab !== 'chat') {
+    if (!isSelf && (currentTab !== 'chat' || !userSidebar.classList.contains('active'))) {
         unreadMessages++;
         updateChatNotification();
 
@@ -2903,7 +2917,7 @@ function addFileMessageToChat({ from, name, size, url, isSelf }) {
     chatMessages.scrollTop = chatMessages.scrollHeight;
 
     // Handle unread message counter for received files
-    if (!isSelf && currentTab !== 'chat') {
+    if (!isSelf && (currentTab !== 'chat' || !userSidebar.classList.contains('active'))) {
         unreadMessages++;
         updateChatNotification();
 

public/index.html

@@ -283,6 +283,7 @@
                 >
                     <i class="fas fa-users"></i>
                     <span id="participantCount" class="participant-count hidden">0</span>
+                    <span id="messageCount" class="message-count hidden">0</span>
                 </button>
                 <!-- Button to leave the call -->
                 <button

public/style.css

@@ -1344,6 +1344,10 @@ input {
     display: none;
 }
 
+.sidebar-tab span.chat-notification {
+    display: flex;
+}
+
 .sidebar-tab i,
 .sidebar-tab .chat-notification {
     flex-shrink: 0;
@@ -1397,7 +1401,7 @@ input {
         bounce 0.5s ease-out;
 }
 
-.chat-notification.hidden {
+.sidebar-tab span.chat-notification.hidden {
     display: none;
 }
 
@@ -1427,6 +1431,34 @@ input {
     display: none;
 }
 
+/* Message Count Badge on Sidebar Button */
+.message-count {
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    background: linear-gradient(135deg, var(--danger-color), var(--danger-hover));
+    color: white;
+    border-radius: 50%;
+    min-width: 20px;
+    height: 20px;
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-md);
+    pointer-events: none;
+    z-index: 1;
+    padding: 0 4px;
+    animation:
+        pulse 2s infinite,
+        bounce 0.5s ease-out;
+}
+
+.message-count.hidden {
+    display: none;
+}
+
 #sidebarBtn {
     overflow: visible !important;
 }
@@ -1441,6 +1473,15 @@ input {
         padding: 0 3px;
     }
 
+    .message-count {
+        top: -2px;
+        left: -2px;
+        min-width: 16px;
+        height: 16px;
+        font-size: 10px;
+        padding: 0 3px;
+    }
+
     #roomPage > .row.justify-content-center {
         padding-top: 4px;
     }