From 9a2ccd27ca6a08f5e41c318e5fa96626f2f0e2e7 Mon Sep 17 00:00:00 2001
From: Timo <6156589+Shik3i@users.noreply.github.com>
Date: Wed, 22 Apr 2026 11:18:32 +0200
Subject: [PATCH] fix: resolve duplicate peerList IDs and refine server
 deduplication emission

---
 extension/popup.html |  2 +-
 extension/popup.js   | 12 ++++++++++--
 server/index.js      |  1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/extension/popup.html b/extension/popup.html
index c991287..1aacfb8 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -286,7 +286,7 @@
 
         <div style="margin-bottom: 20px;">
             <label>Peers in Room</label>
-            <div id="peerList" class="info-card">
+            <div id="peerListSync" class="info-card">
                 <div style="text-align:center; color: var(--text-muted); font-size: 12px;">No peers connected</div>
             </div>
         </div>
diff --git a/extension/popup.js b/extension/popup.js
index c10b953..ad4d494 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -41,6 +41,8 @@ const elements = {
     sectionActive: document.getElementById('section-active'),
     activeRoomId: document.getElementById('activeRoomId'),
     activeServer: document.getElementById('activeServer'),
+    peerList: document.getElementById('peerList'),
+    peerListSync: document.getElementById('peerListSync'),
     playBtn: document.getElementById('playBtn'),
     pauseBtn: document.getElementById('pauseBtn')
 };
@@ -110,14 +112,14 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {
 }
 
 function updatePeerList(peers) {
-    if (!peers || !elements.peerList) return;
+    if (!peers) return;
     
     // UI Throttle: Only re-render if the peer state actually changed
     const currentPeersJson = JSON.stringify(peers);
     if (currentPeersJson === lastPeersJson) return;
     lastPeersJson = currentPeersJson;
 
-    elements.peerList.innerHTML = peers.map(p => {
+    const html = peers.map(p => {
         const id = escapeHtml(typeof p === 'object' ? p.peerId : p);
         const titleText = (typeof p === 'object' && p.tabTitle) ? escapeHtml(p.tabTitle) : '';
         const title = titleText ? `<div style="font-size:10px; color:var(--text-muted);">${titleText}</div>` : '';
@@ -131,6 +133,12 @@ function updatePeerList(peers) {
             </div>
         `;
     }).join('');
+
+    const emptyHtml = '<div style="text-align:center; color: var(--text-muted); font-size: 12px;">No peers connected</div>';
+    
+    if (elements.peerList) elements.peerList.innerHTML = html || emptyHtml;
+    if (elements.peerListSync) elements.peerListSync.innerHTML = html || emptyHtml;
+
     // Re-populate tabs to update Star Matching when peers change
     populateTabs(peers);
 }
diff --git a/server/index.js b/server/index.js
index fb02e78..99d012f 100644
--- a/server/index.js
+++ b/server/index.js
@@ -228,6 +228,7 @@ io.on('connection', (socket) => {
                         room.peers.delete(sid);
                         room.peerIds.delete(sid);
                         room.peerData.delete(sid);
+                        socket.to(roomId).emit(EVENTS.PEER_STATUS, { peerId: data.peerId, status: 'left' });
                         log('ROOM', `Deduplicated peer ${peerId} from room ${roomId}`);
                     }
                 }