switch_tab_ok

public/style/chat.css

@@ -312,6 +312,7 @@ body {
 .tabs {
     display: flex;
     margin: 20px 0px;
+    gap: 10px;
 }
 
 .tabs button {

src/pages/chat/chat.ts

@@ -641,10 +641,39 @@ class ChatElement extends HTMLElement {
         return null;
     }
 
+    private switchTab(tabType: string, tabs: NodeListOf<Element>) {
+        // Mettre à jour les classes des onglets
+        tabs.forEach(tab => {
+            tab.classList.toggle('active', tab.getAttribute('data-tab') === tabType);
+        });
+
+        // Supprimer le contenu existant sauf les onglets
+        const groupList = this.shadowRoot?.querySelector('#group-list');
+        if (!groupList) return;
+
+        const children = Array.from(groupList.children);
+        children.forEach(child => {
+            if (!child.classList.contains('tabs')) {
+                groupList.removeChild(child);
+            }
+        });
+
+        // Charger le contenu approprié
+        switch (tabType) {
+            case 'processes':
+                this.loadAllProcesses();
+                break;
+            case 'members':
+                this.loadAllMembers();
+                break;
+            default:
+                console.error('Unknown tab type:', tabType);
+        }
+    }
+
     //Load all processes
     private async loadAllProcesses() {
         console.log('🎯 Loading all processes');
-        const processes: any[] = [];
         const dbRequest = indexedDB.open('4nk');
         
         return new Promise((resolve, reject) => {
@@ -673,11 +702,6 @@ class ChatElement extends HTMLElement {
                     
                     groupList.innerHTML = '';
 
-                    /*<div class="tabs">
-                        <button class="tab active" data-tab="processes">Processus</button>
-                        <button class="tab" data-tab="members">Membres</button>
-                    </div>*/
-
                     const tabContent = document.createElement('div');
                     tabContent.className = 'tabs';
                     tabContent.innerHTML = `
@@ -686,6 +710,17 @@ class ChatElement extends HTMLElement {
                     `;
                     groupList.appendChild(tabContent);
 
+                    // Ajouter les event listeners
+                    const tabs = tabContent.querySelectorAll('.tab');
+                    tabs.forEach(tab => {
+                        tab.addEventListener('click', () => {
+                            const tabType = tab.getAttribute('data-tab');
+                            if (tabType) {
+                                this.switchTab(tabType, tabs);
+                            }
+                        });
+                    });
+
                     for (const process of processResult) {
                         //console.log('🎯 Processing process:', process);
                         const li = document.createElement('li');
@@ -1138,14 +1173,11 @@ class ChatElement extends HTMLElement {
         }
     }
 
+    
+
 }
 
 customElements.define('chat-element', ChatElement);
 export { ChatElement };
 
-/*TODO 
-- Faire un onglet Process/Membres
-- Connexion au relay - voir le uncheck, avoir la liste des membres
-- Adress et ProcessId
-*/