From f5c4d3e17d6e5c67890c8e79da9047c71b773ed2 Mon Sep 17 00:00:00 2001
From: Pascal <pascal@debian.pascallim>
Date: Tue, 7 Jan 2025 18:44:16 +0100
Subject: [PATCH] roles_ok_css_KO

---
 src/pages/chat/chat.ts | 86 ++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts
index f9cc23d..a8f5e11 100755
--- a/src/pages/chat/chat.ts
+++ b/src/pages/chat/chat.ts
@@ -30,6 +30,12 @@ interface LocalNotification {
     time: string;
 }
 
+interface Process {
+    encrypted_pcd: {
+        roles: Record<string, any>;
+    };
+}
+
 export function initChat() {
     const chatElement = document.createElement('chat-element');
     const container = document.querySelector('.container');
@@ -409,15 +415,38 @@ class ChatElement extends HTMLElement {
     }
 
 
-    private loadGroupList(processId: string): void {
+    private async loadGroupList(processId: string): Promise<void> {
         console.log('🔍 Loading group list with processId:', processId);
         const groupList = this.shadowRoot?.querySelector('#group-list');
-        if (!groupList) {
-            console.error('❌ Group list element not found');
+        if (!groupList) return;
+
+        groupList.innerHTML = '';
+
+        const dbRequest = window.indexedDB.open('4nk');
+        const db = await new Promise<IDBDatabase>((resolve, reject) => {
+            dbRequest.onsuccess = () => resolve(dbRequest.result);
+            dbRequest.onerror = () => reject(dbRequest.error);
+        });
+
+        const transaction = db.transaction(['processes'], 'readonly');
+        const processStore = transaction.objectStore('processes');
+        const processRequest = processStore.get(processId);
+
+        const process = await new Promise<any>((resolve, reject) => {
+            processRequest.onsuccess = () => {
+                console.log('🔍 Process found:', processRequest.result);
+                resolve(processRequest.result);
+            };
+            processRequest.onerror = () => reject(processRequest.error);
+        });
+
+        if (!process?.states?.[0]?.encrypted_pcd?.roles) {
+            console.error('❌ Process structure invalid:', process);
             return;
         }
 
-        groupList.innerHTML = '';
+        const roles = process.states[0].encrypted_pcd.roles;
+        console.log('🔑 Roles found:', roles);
 
         const li = document.createElement('li');
         li.className = 'group-list-item';
@@ -426,66 +455,33 @@ class ChatElement extends HTMLElement {
         const container = document.createElement('div');
         container.className = 'group-item-container';
         
-        const emojiSpan = document.createElement('span');
-        emojiSpan.className = 'process-emoji';
-        
         const nameSpan = document.createElement('span');
-        nameSpan.textContent = `Process : `;
+        nameSpan.textContent = ` Process : `;
         nameSpan.className = 'process-name';
         
-        // Ajouter les emojis de l'adresse
-        addressToEmoji(processId).then(emojis => {
+        await addressToEmoji(processId).then(emojis => {
+            const emojiSpan = document.createElement('span');
+            emojiSpan.className = 'process-emoji';
             emojiSpan.textContent = emojis;
-        });
-
-        // Ajouter l'événement de clic pour afficher/masquer les rôles
-        container.addEventListener('click', (event) => {
-            event.stopPropagation();
-            const roleList = li.querySelector('.role-list') as HTMLElement;
-            if (roleList) {
-                roleList.style.display = roleList.style.display === 'none' ? 'block' : 'none';
-            }
+            container.appendChild(emojiSpan);
         });
         
         container.appendChild(nameSpan);
-        container.appendChild(emojiSpan);
         li.appendChild(container);
 
+        // Créer et ajouter la liste des rôles
         const roleList = document.createElement('ul');
         roleList.className = 'role-list';
-        roleList.style.display = 'none';
 
-        const defaultRoles = ['Owner', 'Member', 'Validator'];
-        defaultRoles.forEach(roleName => {
+        Object.keys(roles).forEach(roleName => {
             const roleItem = document.createElement('li');
             roleItem.className = 'role-item';
-            
-            const roleContainer = document.createElement('div');
-            roleContainer.className = 'role-item-container';
-            
-            const roleNameSpan = document.createElement('span');
-            roleNameSpan.className = 'role-name';
-            roleNameSpan.textContent = roleName;
-            
-            //const folderIcon = document.createElement('span');
-            //folderIcon.className = 'folder-icon';
-            
-            roleContainer.appendChild(roleNameSpan);
-            //roleContainer.appendChild(folderIcon);
-            roleItem.appendChild(roleContainer);
-            
-            roleItem.addEventListener('click', (event) => {
-                event.stopPropagation();
-                this.toggleMembers({ members: [] }, roleItem);
-            });
-
+            roleItem.textContent = roleName;
             roleList.appendChild(roleItem);
         });
 
         li.appendChild(roleList);
         groupList.appendChild(li);
-        
-        console.log('✅ Group list item added for process:', processId);
     }