Add auth and connection useEffects

app/dashboard/folders/page.tsx

@@ -333,6 +333,102 @@ export default function FoldersPage() {
     { id: "gray", name: "Gris", class: "text-gray-600 bg-gray-100" },
   ]
 
+  // 4NK Integration useEffects
+  useEffect(() => {
+    const userStore = UserStore.getInstance();
+    const connected = userStore.isConnected();
+    const pairingId = userStore.getUserPairingId();
+    
+    console.log('Initialisation 4NK:', { connected, pairingId });
+    
+    setIsConnected(connected);
+    setUserPairingId(pairingId);
+    setPairingIdInitialized(true);
+  }, []);
+
+  useEffect(() => {
+    if (isConnected) {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      messageBus.isReady().then(() => {
+        messageBus.getProcesses().then((processes: any) => {
+          setProcesses(processes);
+        });
+      });
+    }
+  }, [isConnected]);
+
+  useEffect(() => {
+    if (isConnected && processes !== null) {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      messageBus.isReady().then(() => {
+        messageBus.getMyProcesses().then((res: string[]) => {
+          setMyProcesses(res);
+        })
+      });
+    }
+  }, [isConnected, processes]);
+
+  // useEffect pour écouter les changements dans sessionStorage et récupérer le userPairingId
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      console.log('Storage change détecté:', e.key, e.newValue ? 'ajouté' : 'supprimé');
+      
+      // Si un token d'accès vient d'être ajouté
+      if (e.key === 'accessToken' && e.newValue) {
+        console.log('Token d\'accès détecté, récupération du userPairingId...');
+        
+        // Attendre un peu que les deux tokens soient bien en place
+        setTimeout(() => {
+          const userStore = UserStore.getInstance();
+          if (userStore.isConnected() && !userStore.getUserPairingId()) {
+            console.log('Tokens confirmés, récupération userPairingId...');
+            const messageBus = MessageBus.getInstance(iframeUrl);
+            messageBus.isReady().then(() => {
+              messageBus.getUserPairingId().then((retrievedPairingId: string) => {
+                console.log('UserPairingId récupéré via storage event:', retrievedPairingId);
+                userStore.pair(retrievedPairingId);
+                setUserPairingId(retrievedPairingId);
+                setIsConnected(true);
+                showNotification("success", `UserPairingId récupéré: ${retrievedPairingId.substring(0, 8)}...`);
+              }).catch((error) => {
+                console.error('Erreur récupération userPairingId via storage:', error);
+              });
+            });
+          }
+        }, 500);
+      }
+    };
+
+    // Écouter les changements de sessionStorage
+    window.addEventListener('storage', handleStorageChange);
+    
+    // Vérification initiale au chargement
+    const userStore = UserStore.getInstance();
+    if (userStore.isConnected()) {
+      const existingPairingId = userStore.getUserPairingId();
+      if (existingPairingId) {
+        console.log('UserPairingId existant trouvé:', existingPairingId);
+        setUserPairingId(existingPairingId);
+        setIsConnected(true);
+      } else {
+        console.log('Tokens existants mais pas de userPairingId, récupération...');
+        const messageBus = MessageBus.getInstance(iframeUrl);
+        messageBus.isReady().then(() => {
+          messageBus.getUserPairingId().then((retrievedPairingId: string) => {
+            console.log('UserPairingId récupéré au chargement:', retrievedPairingId);
+            userStore.pair(retrievedPairingId);
+            setUserPairingId(retrievedPairingId);
+            setIsConnected(true);
+          });
+        });
+      }
+    }
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []); // Une seule fois au montage
+
   useEffect(() => {
     // Simuler le chargement des dossiers
     const loadFolders = () => {