[call-me] - add participantCount

package-lock.json

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

package.json

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

public/client.js

@@ -34,6 +34,7 @@ const usersContent = document.getElementById('usersContent');
 const chatContent = document.getElementById('chatContent');
 const settingsContent = document.getElementById('settingsContent');
 const chatNotification = document.getElementById('chatNotification');
+const participantCount = document.getElementById('participantCount');
 const chatMessages = document.getElementById('chatMessages');
 const chatForm = document.getElementById('chatForm');
 const chatInput = document.getElementById('chatInput');
@@ -1224,6 +1225,7 @@ function handleNotFound(data) {
     // Remove from user list if present
     allConnectedUsers = allConnectedUsers.filter((u) => u !== username);
     filterUserList(userSearchInput.value || '');
+    updateParticipantCount();
 }
 
 // Handle sign-in response from the server
@@ -1579,6 +1581,7 @@ function handleUsers(data) {
     const currentUsers = data.users.filter((u) => u !== userName);
     allConnectedUsers = currentUsers;
     filterUserList(userSearchInput.value || '');
+    updateParticipantCount();
     if (userSignedIn) {
         currentUsers.forEach((u) => {
             if (!prevUsers.has(u)) {
@@ -2319,6 +2322,19 @@ function switchTab(tabName) {
     }
 }
 
+// Update participant count badge
+function updateParticipantCount() {
+    if (participantCount) {
+        const count = allConnectedUsers.length;
+        if (count > 0) {
+            participantCount.textContent = count > 99 ? '99+' : count.toString();
+            participantCount.classList.remove('hidden');
+        } else {
+            participantCount.classList.add('hidden');
+        }
+    }
+}
+
 // Update chat notification badge
 function updateChatNotification() {
     if (chatNotification) {

public/index.html

@@ -199,6 +199,7 @@
                     data-i18n-title="controls.toggleUsers"
                 >
                     <i class="fas fa-users"></i>
+                    <span id="participantCount" class="participant-count hidden">0</span>
                 </button>
                 <!-- Button to leave the call -->
                 <button

public/style.css

@@ -1324,6 +1324,36 @@ input {
     display: none;
 }
 
+/* Participant Count Badge */
+.participant-count {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-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: bounce 0.5s ease-out;
+}
+
+.participant-count.hidden {
+    display: none;
+}
+
+#sidebarBtn {
+    overflow: visible !important;
+}
+
 @keyframes pulse {
     0%,
     100% {