Modification fonction màj extension

src/popup/popup.html

@@ -271,12 +271,6 @@
       border-color: #8d5c70;
     }
 
-    /* #stats-options {
-      border: 1px solid #555;
-      border-radius: 8px;
-      align-items: center;
-    } */
-
     .option-row.auto-add-row {
       position: relative;
       display: flex;

src/popup/popup.js

@@ -75,118 +75,122 @@ async function updateLanguageSelection() {
 }
 
 // ==========================
-// Gestion des options et des statistiques
+// Gestion principale de l'extension
 // ==========================
-async function updateOptionsUI() {
+async function updateExtension() {
+  // Récupération de tous les états nécessaires
   const accessToken = await getAccessToken();
+  const { 
+    extensionActive, 
+    isTrackingActive, 
+    autoAdd, 
+    threshold,
+    pyodideSimplemmaReady 
+  } = await browser.storage.local.get([
+    "extensionActive",
+    "isTrackingActive",
+    "autoAdd",
+    "threshold",
+    "pyodideSimplemmaReady"
+  ]) || { 
+    extensionActive: false, 
+    isTrackingActive: false,
+    autoAdd: false,
+    threshold: 10,
+    pyodideSimplemmaReady: false
+  };
+
   const isLoggedIn = !!accessToken;
-  const statsOptions = document.getElementById("stats-options");
 
-  if (statsOptions) {
-    statsOptions.style.display = isLoggedIn ? "block" : "none";
+  // Mise à jour du bouton d'activation de l'extension
+  const toggleExtensionBtn = document.getElementById("toggleExtensionBtn");
+  if (toggleExtensionBtn) {
+    toggleExtensionBtn.textContent = extensionActive ? "Désactiver l'analyse" : "Activer l'analyse";
+    toggleExtensionBtn.style.opacity = isLoggedIn ? "1" : "0.5";
+    toggleExtensionBtn.disabled = !isLoggedIn;
+    toggleExtensionBtn.title = isLoggedIn ? "" : "Connectez-vous pour activer l'analyse";
+    toggleExtensionBtn.onclick = handleToggleExtension; // Ajout de l'écouteur d'événements
   }
 
-  const autoAddContainer = document.getElementById("auto-add")?.parentElement;
-  const autoAddCheckbox = document.getElementById("auto-add");
-  const autoAddOptions = document.getElementById("auto-add-options");
-  const thresholdInput = document.getElementById("threshold");
-  const saveOptionsBtn = document.getElementById("save-options");
+  // Mise à jour des options de statistiques
+  const statsOptions = document.getElementById("stats-options");
   const toggleStatsBtn = document.getElementById("toggleStatsBtn");
   const openStats = document.getElementById("open-stats");
 
-  // // Affichage de l'option "Ajout automatique" selon la connexion
-  // if (autoAddContainer) {
-  //   autoAddContainer.style.display = isLoggedIn ? "block" : "none";
-  // }
-
-  // Chargement des préférences
-  const { isTrackingActive, autoAdd, threshold } = await browser.storage.local.get([
-    "isTrackingActive",
-    "autoAdd",
-    "threshold"
-  ]) || { isTrackingActive: false };
+  if (statsOptions) {
+    statsOptions.style.display = (isLoggedIn && extensionActive) ? "block" : "none";
+  }
 
-  // Gestion du bouton de statistiques
   if (toggleStatsBtn) {
-    if (!isLoggedIn) {
-      toggleStatsBtn.style.opacity = "0.5";
-      toggleStatsBtn.title = "Connectez-vous pour activer les statistiques";
-      if (openStats) openStats.style.display = "none";
-    } else {
-      toggleStatsBtn.style.opacity = "1";
-      toggleStatsBtn.title = "";
-      if (openStats) openStats.style.display = "block";
-    }
+    const isEnabled = isLoggedIn && extensionActive;
+    toggleStatsBtn.style.opacity = isEnabled ? "1" : "0.5";
+    toggleStatsBtn.disabled = !isEnabled;
+    toggleStatsBtn.title = !isLoggedIn ? "Connectez-vous pour activer les statistiques" : 
+                          !extensionActive ? "Activez l'analyse pour utiliser les statistiques" : "";
     toggleStatsBtn.textContent = isTrackingActive ? "Désactiver les statistiques" : "Activer les statistiques";
   }
 
-  // Affichage des options statistiques
-  if (statsOptions) {
-    statsOptions.classList.toggle("hidden", !isTrackingActive);
+  if (openStats) {
+    openStats.style.display = (isLoggedIn && extensionActive && isTrackingActive) ? "block" : "none";
   }
 
-  if (isLoggedIn) {
-    if (autoAddCheckbox) {
-      autoAddCheckbox.checked = autoAdd || false;
-    }
-    if (thresholdInput && threshold !== undefined) {
-      thresholdInput.value = threshold;
-    }
-    if (autoAddOptions) {
-      autoAddOptions.classList.toggle("hidden", !autoAdd);
-    }
-    if (saveOptionsBtn) {
-      saveOptionsBtn.classList.toggle("hidden", !autoAdd);
-    }
-  } else {
-    if (autoAddCheckbox) {
-      autoAddCheckbox.checked = false;
-    }
-    if (autoAddOptions) {
-      autoAddOptions.classList.add("hidden");
-    }
-    if (saveOptionsBtn) {
-      saveOptionsBtn.classList.add("hidden");
-    }
+  // Mise à jour des options d'ajout automatique
+  const autoAddContainer = document.getElementById("auto-add")?.parentElement;
+  const autoAddCheckbox = document.getElementById("auto-add");
+  const autoAddOptions = document.getElementById("auto-add-options");
+  const saveOptionsBtn = document.getElementById("save-options");
+
+  if (autoAddContainer) {
+    autoAddContainer.style.display = (isLoggedIn && extensionActive) ? "block" : "none";
   }
-}
 
-// ==========================
-// Gestion de l'activation/désactivation de l'extension
-// ==========================
-async function updateExtensionToggleButton() {
-  const { accessToken, extensionActive } = await browser.storage.local.get(["accessToken", "extensionActive"]);
-  const toggleButton = document.getElementById("toggleExtensionBtn");
+  if (autoAddCheckbox && isLoggedIn) {
+    autoAddCheckbox.checked = autoAdd;
+  }
 
-  if (!toggleButton) {
-    console.error("❌ Le bouton d'activation de l'analyse n'a pas été trouvé.");
-    return;
+  if (autoAddOptions) {
+    autoAddOptions.classList.toggle("hidden", !autoAdd);
   }
 
-  if (!accessToken) {
-    toggleButton.textContent = "Activer l'analyse";
-    toggleButton.style.opacity = "0.5";
-    toggleButton.title = "Connectez-vous pour activer l'analyse";
-  } else {
-    toggleButton.style.opacity = "1";
-    toggleButton.textContent = extensionActive ? "Désactiver l'analyse" : "Activer l'analyse";
-    toggleButton.title = "";
+  if (saveOptionsBtn) {
+    saveOptionsBtn.classList.toggle("hidden", !autoAdd);
   }
 
-  // Ajout d'un écouteur unique
-  if (!toggleButton.dataset.listenerAdded) {
-    toggleButton.addEventListener("click", handleToggleExtension);
-    toggleButton.dataset.listenerAdded = "true";
+  // Mise à jour du message de chargement Pyodide
+  const statusContainer = document.getElementById('pyodide-loading');
+  if (statusContainer) {
+    if (!isLoggedIn) {
+      statusContainer.innerHTML = "";
+    } else if (!pyodideSimplemmaReady && extensionActive && isTrackingActive) {
+      statusContainer.innerHTML = "<p style='color: black; text-align: center; font-size: 11px;'>Chargement de l'extension en cours, veuillez patienter...</p>";
+    } else if (pyodideSimplemmaReady && extensionActive && isTrackingActive) {
+      statusContainer.innerHTML = "<p style='color: black; text-align: center; font-size: 11px;'>C'est prêt !</p>";
+      setTimeout(() => {
+        statusContainer.innerHTML = "";
+      }, 2000);
+    } else {
+      statusContainer.innerHTML = "";
+    }
   }
-}
 
-function handleToggleExtension() {
-  getAccessToken().then(accessToken => {
-    if (!accessToken) return;
-    proceedToggleExtension();
+  // Mise à jour de la sélection des langues
+  await updateLanguageSelection();
+
+  log("Interface mise à jour complètement", {
+    isLoggedIn,
+    extensionActive,
+    isTrackingActive,
+    autoAdd,
+    pyodideSimplemmaReady
   });
 }
 
+async function handleToggleExtension() {
+  const accessToken = await getAccessToken();
+  if (!accessToken) return;
+  await proceedToggleExtension();
+}
+
 async function proceedToggleExtension() {
   const { extensionActive, isTrackingActive } = await browser.storage.local.get({
     extensionActive: false,
@@ -195,63 +199,25 @@ async function proceedToggleExtension() {
   const newState = !extensionActive;
   await browser.storage.local.set({ extensionActive: newState });
 
-  const toggleButton = document.getElementById("toggleExtensionBtn");
-  if (toggleButton) {
-    toggleButton.textContent = newState ? "Désactiver l'analyse" : "Activer l'analyse";
-  }
-
-  browser.runtime.sendMessage({ action: "toggleExtension", isActive: newState });
-  
   if (!newState) {
     await browser.storage.local.set({ isTrackingActive: false });
-    // Si les statistiques étaient activées, ouvrir la page stats
     if (isTrackingActive) window.open("stats.html", "_blank");
     browser.runtime.sendMessage({ action: "closeSidebarBlocks" });
   }
 
-  await updateOptionsUI();
-}
-
-async function displayLoadingMessage() {
-  const statusContainer = document.getElementById('pyodide-loading');
-  if (!statusContainer) return;
-  
-  const { pyodideSimplemmaReady } = await browser.storage.local.get("pyodideSimplemmaReady");
-  const accessToken = await getAccessToken();
-
-  if (!accessToken) {
-    statusContainer.innerHTML = "";
-  } else if (!pyodideSimplemmaReady) {
-    statusContainer.innerHTML = "<p style='color: gray; text-align: center; font-size: 10px;'>Activation en cours, veuillez patienter...</p>";
-  } else {
-    statusContainer.innerHTML = "";
-  }
+  browser.runtime.sendMessage({ action: "toggleExtension", isActive: newState });
+  await updateExtension();
 }
 
-
 // ==========================
 // Écouteurs d'événements
 // ==========================
 document.addEventListener("DOMContentLoaded", async () => {
   await updateConnectionButton();
-  await updateOptionsUI();
-  await updateLanguageSelection();
-  await updateExtensionToggleButton();
+  await updateExtension();
 });
 
-document.addEventListener("DOMContentLoaded", () => {
-  displayLoadingMessage();
-  const loadingCheck = setInterval(async () => {
-    await displayLoadingMessage();
-    const { pyodideSimplemmaReady } = await browser.storage.local.get("pyodideSimplemmaReady");
-    if (pyodideSimplemmaReady) {
-      clearInterval(loadingCheck);
-    }
-  }, 500);
-});
-
-
-// Gestion des statistiques et options
+// Gestion des statistiques
 document.getElementById("toggleStatsBtn")?.addEventListener("click", async () => {
   const accessToken = await getAccessToken();
   if (!accessToken) return;
@@ -262,39 +228,34 @@ document.getElementById("toggleStatsBtn")?.addEventListener("click", async () =>
 
   if (!newState) {
     await browser.storage.local.set({ autoAdd: false });
-    document.getElementById("auto-add").checked = false;
-    document.getElementById("auto-add-options").classList.add("hidden");
-    document.getElementById("save-options").classList.add("hidden");
   }
 
-  document.getElementById("toggleStatsBtn").textContent = newState ? "Désactiver les statistiques" : "Activer les statistiques";
-  document.getElementById("stats-options").classList.toggle("hidden", !newState);
-
   browser.runtime.sendMessage({ command: "toggle-stats", isActive: newState });
   if (newState) {
-    log("[Popup] Demande d'initialisation de Pyodide et Simplemma");
     browser.runtime.sendMessage({ command: "pyodide-simplemma" });
   }
+  
+  await updateExtension();
 });
 
-// Gestion du changement de l'option d'ajout automatique
+// Gestion de l'ajout automatique
 document.getElementById("auto-add")?.addEventListener("change", async () => {
   const isChecked = document.getElementById("auto-add").checked;
   document.getElementById("auto-add-options").classList.toggle("hidden", !isChecked);
   document.getElementById("save-options").classList.toggle("hidden", !isChecked);
   if (!isChecked) {
     await browser.storage.local.set({ autoAdd: false });
+    await updateExtension();
   }
 });
 
-// Sauvegarde des options utilisateur
+// Sauvegarde des options
 document.getElementById("save-options")?.addEventListener("click", async () => {
   const autoAdd = document.getElementById("auto-add").checked;
   const threshold = parseInt(document.getElementById("threshold").value, 10);
   const selectedLanguages = Array.from(document.querySelectorAll("#language-selection .lang-option.selected"))
-                                .map(option => option.dataset.value);
+    .map(option => option.dataset.value);
 
-  // Vérification : si auto-add est activé, au moins une langue doit être sélectionnée
   const errorMessage = document.getElementById("error-message");
   if (autoAdd && selectedLanguages.length === 0) {
     errorMessage?.classList.remove("hidden");
@@ -307,40 +268,36 @@ document.getElementById("save-options")?.addEventListener("click", async () => {
     threshold,
     trackedLanguages: selectedLanguages
   });
-  log("Options sauvegardées :", { autoAdd, threshold, trackedLanguages: selectedLanguages });
+  
+  await updateExtension();
+  log("Options sauvegardées et interface mise à jour");
 });
 
-// Bouton pour ouvrir la page des statistiques
+// Ouverture des statistiques
 document.getElementById("open-stats")?.addEventListener("click", () => {
   window.open("stats.html", "_blank");
 });
 
 // ==========================
-// Réception des messages du background
+// Gestion des messages et du stockage
 // ==========================
 browser.runtime.onMessage.addListener(async (message) => {
   log("📩 Message reçu dans popup.js :", message);
-
   if (message.action === "updateUI") {
-    log("🔄 Mise à jour de l'UI du popup...");
-    await updateConnectionButton();
-    await updateOptionsUI();
-    await updateLanguageSelection();
+    await updateExtension();
   } else if (message.action === "notify") {
     alert(message.message);
   }
 });
 
-// Actualisation de l'UI en cas de changement dans le stockage local
 browser.storage.onChanged.addListener((changes, area) => {
-  if (area === "local" && changes.accessToken) {
-    updateConnectionButton();
-    updateExtensionToggleButton();
+  if (area === "local") {
+    updateExtension();
   }
 });
 
 // ==========================
-// Gestion de l'affichage de notifications (optionnelle)
+// Gestion des notifications
 // ==========================
 function showNotification(message) {
   const notificationBox = document.getElementById("extension-notification");