work on advanced chat

examples/chat-advanced/app.js

@@ -39,6 +39,7 @@
     elements.avatar = $('avatar');
     elements.roomList = $('roomList');
     elements.userList = $('userList');
+    elements.userCount = $('userCount');
     elements.messages = $('messages');
     elements.messageInput = $('messageInput');
     elements.typingIndicator = $('typingIndicator');
@@ -60,13 +61,13 @@
     elements.btnConfirmCreate = $('btnConfirmCreate');
     elements.btnSend = $('btnSend');
     elements.btnToggleEmoji = $('btnToggleEmoji');
-    elements.btnToggleEmoji = $('btnToggleEmoji');
+    elements.btnEmoji2 = $('btnEmoji2');
     elements.btnSendFile = $('btnSendFile');
     elements.btnClearChat = $('btnClearChat');
     elements.btnBold = $('btnBold');
     elements.btnItalic = $('btnItalic');
     elements.btnCode = $('btnCode');
-    elements.btnEmoji = $('btnEmoji');
+    elements.btnEmoji2 = $('btnEmoji2');
     elements.fileInput = $('fileInput');
     elements.chkNotifications = $('chkNotifications');
     elements.chkSounds = $('chkSounds');
@@ -102,7 +103,7 @@
     elements.messageInput.addEventListener('input', handleTyping);
 
     elements.btnToggleEmoji.addEventListener('click', toggleEmojiPicker);
-    elements.btnEmoji.addEventListener('click', toggleEmojiPicker);
+    elements.btnEmoji2.addEventListener('click', toggleEmojiPicker);
     elements.btnSendFile.addEventListener('click', () => elements.fileInput.click());
     elements.fileInput.addEventListener('change', handleFileSelect);
     elements.btnClearChat.addEventListener('click', clearChat);
@@ -185,10 +186,25 @@
       elements.publicKey.textContent = 'Your ID: ' + pubKey.slice(0, 16) + '...';
       updateAvatar(nickname);
 
+      // Add self to users map
+      state.users.set(pubKey, {
+        nickname: nickname,
+        publicKey: pubKey,
+        status: 'online',
+        lastSeen: Date.now(),
+      });
+
+      // Add default lobby room
+      if (!state.rooms.has('lobby')) {
+        state.rooms.set('lobby', { users: [], topic: 'General discussion' });
+        renderRoomList();
+      }
+
       setStatus('Connected to #' + topic);
       updateConnectionStatus('connected');
 
       broadcastPresence();
+      updateUserList();
 
       showToast('Connected!', 'success');
     } catch (err) {
@@ -202,6 +218,17 @@
   function handleConnection(conn, peerInfo) {
     const connId = 'conn_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8);
 
+    // Add peer to users map immediately using peerInfo
+    if (peerInfo && peerInfo.publicKey) {
+      state.users.set(peerInfo.publicKey, {
+        nickname: 'Peer',
+        publicKey: peerInfo.publicKey,
+        status: 'online',
+        lastSeen: Date.now(),
+      });
+      updateUserList();
+    }
+
     state.connections.set(connId, { conn, peerInfo });
 
     conn.on('data', (data) => handleMessage(connId, data));
@@ -334,6 +361,11 @@
   }
 
   function handleDisconnect(connId) {
+    const conn = state.connections.get(connId);
+    if (conn && conn.peerInfo && conn.peerInfo.publicKey) {
+      state.users.delete(conn.peerInfo.publicKey);
+      updateUserList();
+    }
     state.connections.delete(connId);
   }