From 0cc98bf0521ef7c333f555b65ae2769de7834e66 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 15 Feb 2026 20:02:04 +0100
Subject: [PATCH] [call-me] - add participantCount

---
 package-lock.json |  4 ++--
 package.json      |  2 +-
 public/client.js  | 16 ++++++++++++++++
 public/index.html |  1 +
 public/style.css  | 30 ++++++++++++++++++++++++++++++
 5 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 57c6ff1..f80036c 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 7114a42..47b88f4 100755
--- a/package.json
+++ b/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",
diff --git a/public/client.js b/public/client.js
index f11c207..fb37d6b 100755
--- a/public/client.js
+++ b/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) {
diff --git a/public/index.html b/public/index.html
index 6b9fa7d..43b2a88 100755
--- a/public/index.html
+++ b/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
diff --git a/public/style.css b/public/style.css
index 56e2cf2..0bed836 100644
--- a/public/style.css
+++ b/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% {