From 0c02c30c1e0271bf361957934c383edc872fc3f4 Mon Sep 17 00:00:00 2001
From: Pascal <pascal@debian.pascallim>
Date: Tue, 7 Jan 2025 19:01:58 +0100
Subject: [PATCH] members_load_ok

---
 src/pages/chat/chat.ts | 73 ++++++++++++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts
index e09925e..acf98ef 100755
--- a/src/pages/chat/chat.ts
+++ b/src/pages/chat/chat.ts
@@ -324,28 +324,52 @@ class ChatElement extends HTMLElement {
             this.scrollToBottom(messagesContainer);
         }
 
-    private toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) {
+    private async toggleMembers(roleData: any, roleElement: HTMLElement) {
         let memberList = roleElement.querySelector('.member-list');
         if (memberList) {
-            (memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
+            (memberList as HTMLElement).style.display = 
+                (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
             return;
         }
-    
+
         memberList = document.createElement('ul');
         memberList.className = 'member-list';
-    
-        role.members.forEach(member => {
-            const memberItem = document.createElement('li');
-            memberItem.textContent = member.name;
-    
-            memberItem.onclick = (event) => {
-                event.stopPropagation();
-                this.loadMemberChat(member.id.toString());
-            };
-    
-            memberList.appendChild(memberItem);
-        });
-    
+
+        // Récupérer les membres avec leurs sp_addresses
+        if (roleData.members) {
+            for (const member of roleData.members) {
+                const memberItem = document.createElement('li');
+                memberItem.className = 'member-item';
+                
+                const memberContainer = document.createElement('div');
+                memberContainer.className = 'member-container';
+
+                // Afficher l'adresse SP
+                const addressSpan = document.createElement('span');
+                addressSpan.className = 'member-address';
+                addressSpan.textContent = member.sp_addresses?.[0] || 'No address';
+
+                // Ajouter les emojis pour l'adresse
+                const emojiSpan = document.createElement('span');
+                emojiSpan.className = 'member-emoji';
+                if (member.sp_addresses?.[0]) {
+                    const emojis = await addressToEmoji(member.sp_addresses[0]);
+                    emojiSpan.textContent = emojis;
+                }
+
+                memberContainer.appendChild(addressSpan);
+                memberContainer.appendChild(emojiSpan);
+                memberItem.appendChild(memberContainer);
+                
+                memberItem.onclick = (event) => {
+                    event.stopPropagation();
+                    this.loadMemberChat(member.sp_addresses[0]);
+                };
+
+                memberList.appendChild(memberItem);
+            }
+        }
+
         roleElement.appendChild(memberList);
     }
     
@@ -479,7 +503,22 @@ class ChatElement extends HTMLElement {
         Object.keys(roles).forEach(roleName => {
             const roleItem = document.createElement('li');
             roleItem.className = 'role-item';
-            roleItem.textContent = roleName;
+            
+            const roleContainer = document.createElement('div');
+            roleContainer.className = 'role-item-container';
+            
+            const roleNameSpan = document.createElement('span');
+            roleNameSpan.className = 'role-name';
+            roleNameSpan.textContent = roleName;
+            
+            // Ajouter l'événement de clic
+            roleContainer.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.toggleMembers(roles[roleName], roleItem);
+            });
+            
+            roleContainer.appendChild(roleNameSpan);
+            roleItem.appendChild(roleContainer);
             roleList.appendChild(roleItem);
         });