Update loadAllMembers() to add the member labels functionnality

src/pages/chat/chat.ts

@@ -400,15 +400,15 @@ class ChatElement extends HTMLElement {
     }
 
     private async loadAllMembers() {
-        console.log('🎯 Loading all members');
         const groupList = this.shadowRoot?.querySelector('#group-list');
         if (!groupList) return;
 
         const service = await Services.getInstance();
         const members = await service.getAllMembers();
-        console.log("MEMBERS: ", members);
+        const database = await Database.getInstance();
+        const db = database.db;
 
-        const memberList = document.createElement('div');
+        const memberList = document.createElement('ul');
         memberList.className = 'member-list active';
 
         for (const [processId, member] of Object.entries(members)) { 
@@ -422,19 +422,52 @@ class ChatElement extends HTMLElement {
             emojiSpan.className = 'member-emoji';
             
             const emojis = await addressToEmoji(processId);
-            emojiSpan.textContent = `Member : ${emojis}`;
+            emojiSpan.dataset.emojis = emojis;
+    
+            const transaction = db.transaction("labels", "readonly");
+            const store = transaction.objectStore("labels");
+            const request = store.get(emojis);
+    
+            request.onsuccess = () => {
+                const label = request.result;
+                emojiSpan.textContent = label ? `${label.label} (${emojis})` : `Member (${emojis})`;
+            };
+    
+            request.onerror = () => {
+                emojiSpan.textContent = `Member (${emojis})`;
+            };
 
             memberContainer.appendChild(emojiSpan);
             memberItem.appendChild(memberContainer);
-            memberList.appendChild(memberItem);
 
             memberItem.addEventListener('click', async () => {
-                try {
                     await this.loadMemberChat(processId);
-                } catch (error) {
-                    console.error('Error loading member chat:', error);
-                }
             });
+    
+            const editLabelButton = document.createElement('span');
+            editLabelButton.className = 'edit-label-button';
+            editLabelButton.textContent = "✏️";
+    
+            editLabelButton.addEventListener("dblclick", async (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+    
+                const newLabel = prompt("Set a new name for the member:");
+                if (!newLabel) return;
+    
+                const editTransaction = db.transaction("labels", "readwrite");
+                const editStore = editTransaction.objectStore("labels");
+    
+                const labelObject = { emoji: emojis, label: newLabel };
+                const putRequest = editStore.put(labelObject);
+    
+                putRequest.onsuccess = () => {
+                    emojiSpan.textContent = `${newLabel} : ${emojis}`;
+                };
+            });
+    
+            memberList.appendChild(memberItem);
+            memberList.appendChild(editLabelButton);
         }
 
         groupList.appendChild(memberList);
@@ -449,7 +482,7 @@ class ChatElement extends HTMLElement {
         const recipientAddresses = memberAddresses.sp_addresses;
         for (const [processId, process] of Object.entries(processes)) {
             const description = await service.getDescription(processId, process);
-            console.log('Process description:', description);
+            // console.log('Process description:', description);
             if (description !== "dm") {
                 continue;
             }