Ouverture auto bloc Lexiques menu contextuel perso bouton ajout

src/context_menu/custom_context_menu.js

@@ -97,7 +97,8 @@ function setupWhiteBoxActions() {
     console.log("🔍 Bouton Ajouter au lexique cliqué avec le mot :", selectedText);
     if (!selectedText) return;
     if (authToken) {
-      await showPicker(e, selectedText);
+      browser.runtime.sendMessage({ action: "openLexiconBlock" });
+      showPicker(e, selectedText);
     } else {
       alert("Vous devez être connecté pour ajouter un mot.");
     }
@@ -234,20 +235,26 @@ function createPicker() {
   if (!picker) {
     picker = document.createElement("div");
     picker.id = "lexiconPicker";
-    // Styles pour le picker
     picker.style.position = "absolute";
     picker.style.zIndex = "10000";
     picker.style.backgroundColor = "rgba(255, 255, 255, 0.95)";
     picker.style.border = "1px solid #ccc";
-    picker.style.padding = "10px";
+    picker.style.padding = "5px";
     picker.style.borderRadius = "4px";
     picker.style.boxShadow = "0 2px 10px rgba(0,0,0,0.3)";
     picker.style.display = "none";
+    
+    picker.style.display = "flex";
+    picker.style.flexWrap = "wrap"; 
+    picker.style.gap = "10px"; 
+    picker.style.alignItems = "center"; 
+
     document.body.appendChild(picker);
   }
   return picker;
 }
 
+
 /**
  * Affiche le picker pour choisir le lexique dans lequel ajouter le mot.
  * Pour chaque lexique, vérifie si le mot existe déjà dans ce lexique en appelant fetchLexiconDefinitions.
@@ -278,9 +285,14 @@ async function showPicker(event, selectedText) {
         const iconContainer = document.createElement("div");
         iconContainer.className = "lexicon-option";
         iconContainer.dataset.lexiconId = id;
-        iconContainer.style.margin = "5px";
+        iconContainer.style.margin = "2px";
         iconContainer.style.cursor = "pointer";
         iconContainer.title = name;
+        iconContainer.style.display = "inline-flex";
+        iconContainer.style.flexDirection = "row"; // Assurez-vous que c'est horizontal
+        iconContainer.style.alignItems = "center"; // Alignement centré
+        iconContainer.style.justifyContent = "center";
+
 
         // Ajoute le cercle coloré au conteneur
         iconContainer.appendChild(circleIcon);
@@ -323,4 +335,40 @@ async function showPicker(event, selectedText) {
   }
 }
 
+function hideLexiconPicker() {
+  const picker = document.getElementById("lexiconPicker");
+  if (picker) {
+    picker.style.display = "none";
+  }
+}
+
 
+document.addEventListener("mouseup", (event) => {
+  const whiteBox = document.getElementById(WHITE_BOX_ID);
+  const picker = document.getElementById("lexiconPicker");
+
+  if (picker && picker.style.display === "block" && !picker.contains(event.target)) {
+    hideLexiconPicker();
+  }
+
+  // Vérifier si le clic est à l'extérieur des éléments
+  if (
+    whiteBox && whiteBox.style.display === "block" && 
+    !whiteBox.contains(event.target) &&
+    (!picker || !picker.contains(event.target))
+  ) {
+    hideWhiteBox();
+    if (picker) picker.style.display = "none";
+  }
+
+  // Vérifier s'il y a du texte sélectionné
+  const selectedText = window.getSelection().toString().trim();
+  if (selectedText) {
+    console.log("Texte sélectionné :", selectedText);
+    showWhiteBox(event, selectedText);
+    browser.runtime.sendMessage({
+      action: "mot_selectionne",
+      selectedText,
+    });
+  }
+});

src/sidebar/sidebar.js

@@ -509,6 +509,10 @@ browser.runtime.onMessage.addListener(async (message) => {
     case "addToLexicon":
       handleAddWordClick();
       break;
+    
+    case "openLexiconBlock":
+      openBlock("menuContent");
+      break;
       
     case "toggleAuth":
       break;