Messages confirmation/erreur ajout mot menu contextuel

src/assets/lexicon_icon.js

@@ -49,11 +49,12 @@ async function getOrCreateLexiconColor(lexiconId, forceReset = false) {
  */
 function createColorCircle(color, size = 32) {
   const circle = document.createElement("div");
+  circle.className = "color-circle";
   circle.style.width = `${size}px`;
   circle.style.height = `${size}px`;
   circle.style.borderRadius = "50%";
   circle.style.backgroundColor = color;
-  circle.style.border = "1px solid black"; // Optionnel
+  circle.style.border = "1px solid black";
   return circle;
 }
 

src/context_menu/custom_context_menu.css

 /* === Conteneur principal du menu contextuel === */
 #whiteBox {
-    position: absolute; 
-    display: none; 
-    min-width: 50px;         
-    max-width: 300px;         
-    background-color: white; 
-    color: #323046;           
-    border: 2px solid #323046;
-    border-radius: 10px;
-    padding: 10px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-    font-family: "Helvetica", sans-serif; 
-    z-index: 10000;
-  }
-  
-  /* === Titre/texte indiquant le mot sélectionné === */
-  #whiteBox #selectedWord {
-    margin: 0;
-    margin-bottom: 8px;
-    font-size: 14px;
-    line-height: 1.3;
-    color: #323046;  
-    font-weight: bold;
-    text-align: center; 
-  }
-  
-  /* === Conteneur des icônes === */
-  #whiteBox .icon-container {
-    position: relative;
-    display: flex;
-    flex-direction: column; 
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-  }
-  
-  #whiteBox .icon-container:hover {
-    background-color: rgba(255, 255, 255, 0.1); 
-    border-radius: 6px;
-  }
-  
-  /* === Les icônes elles-mêmes === */
-  #whiteBox .icon {
-    width: 40px;       
-    height: 40px;
-    transition: transform 0.2s ease;
-    margin : 0 auto;
-    display: block;
-  }
-  
-  #whiteBox .icon:hover {
-    transform: scale(1.15); 
-  }
-  
-  /* === Message (tooltips) === */
-  #whiteBox .tooltip {
-    visibility: hidden;
-    background-color: #333;
-    color: #fff;
-    text-align: center;
-    padding: 6px;
-    border-radius: 5px;
-    position: absolute;
-    bottom: -34px; 
-    left: 50%;
-    transform: translateX(-50%);
-    white-space: nowrap;
-    font-size: 12px;
-    opacity: 0;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
-    z-index: 1000;
-  }
-  
-  #whiteBox .icon-container:hover .tooltip {
-    visibility: visible;
-    opacity: 1;
-  }
-  
+  position: absolute; 
+  display: none; 
+  min-width: 50px;         
+  max-width: 300px;         
+  background-color: white; 
+  color: #323046;           
+  border: 2px solid #323046;
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  font-family: "Helvetica", sans-serif; 
+  z-index: 10000;
+}
+
+/* === Titre/texte indiquant le mot sélectionné === */
+#whiteBox #selectedWord {
+  margin: 0;
+  margin-bottom: 8px;
+  font-size: 14px;
+  line-height: 1.3;
+  color: #323046;  
+  font-weight: bold;
+  text-align: center; 
+}
+
+/* === Conteneur des icônes === */
+#whiteBox .icon-container {
+  position: relative;
+  display: flex;
+  flex-direction: column; 
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
+#whiteBox .icon-container:hover {
+  background-color: rgba(255, 255, 255, 0.1); 
+  border-radius: 6px;
+}
+
+/* === Les icônes elles-mêmes === */
+#whiteBox .icon {
+  width: 40px;       
+  height: 40px;
+  transition: transform 0.2s ease;
+  margin : 0 auto;
+  display: block;
+}
+
+#whiteBox .icon:hover {
+  transform: scale(1.15); 
+}
+
+/* === Message (tooltips) === */
+#whiteBox .tooltip {
+  visibility: hidden;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  padding: 6px;
+  border-radius: 5px;
+  position: absolute;
+  bottom: -34px; 
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  z-index: 1000;
+}
+
+#whiteBox .icon-container:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
\ No newline at end of file
+/* === Style global du lexiconPicker === */
+#lexiconPicker {
+  position: absolute;
+  z-index: 10000;
+  background-color: rgba(255, 255, 255, 0.98);
+  border: 1px solid #ddd;
+  padding: 4px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 150px; 
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;    
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+/* Style pour les icônes de lexique */
+#lexiconPicker .lexicon-option {
+  cursor: pointer;
+  display: inline-flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  transition: border 0.2s ease;
+  flex: 0 0 auto;
+}
+
+/* Effet au survol pour les icônes */
+#lexiconPicker .lexicon-option:hover {
+  border: 2px solid #6e76c7;
+}
+
+/* Classe pour indiquer qu'une icône est sélectionnée */
+#lexiconPicker .lexicon-option.selected {
+  border: 2px solid #323046;
+}
+
+/* Style pour le cercle de couleur (icône interne) */
+#lexiconPicker .color-circle {
+  width: 28px;  /* ajustez la taille si besoin */
+  height: 28px;
+  border-radius: 50%;
+  display: inline-block;
+  /* La couleur de fond sera définie dynamiquement via JS */
+  border: 1px solid black; /* optionnel */
+}
+
+/* Style pour le bouton de confirmation */
+#lexiconPicker button.confirmButton {
+  font-style: italic;
+  font-size: 10px;
+  padding: 6px 10px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  background-color: #323046;
+  color: white;
+  flex-basis: 100%; /* force le bouton à occuper toute la largeur et à passer à la ligne */
+  margin-top: 8px;
+}
+
+#lexiconPicker p {
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+}
+

src/context_menu/custom_context_menu.js

@@ -237,93 +237,80 @@ function createPicker() {
     picker.id = "lexiconPicker";
     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 = "5px";
-    picker.style.borderRadius = "4px";
-    picker.style.boxShadow = "0 2px 10px rgba(0,0,0,0.3)";
-    picker.style.display = "none";
-    
+    picker.style.backgroundColor = "rgba(255, 255, 255, 0.98)";
+    picker.style.border = "1px solid #ddd";
+    picker.style.padding = "8px";
+    picker.style.borderRadius = "8px";
+    picker.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
+    picker.style.width = "220px"; // largeur adaptée pour afficher les icônes sur une ligne
+    picker.style.fontFamily = "Arial, sans-serif";
+    picker.style.fontSize = "10px";
+    // Définir le picker en flex avec direction horizontale
     picker.style.display = "flex";
-    picker.style.flexWrap = "wrap"; 
-    picker.style.gap = "10px"; 
-    picker.style.alignItems = "center"; 
-
+    picker.style.flexDirection = "row"; // IMPORTANT : aligne les éléments en ligne
+    picker.style.flexWrap = "wrap";      // autorise le retour à la ligne si nécessaire
+    picker.style.alignItems = "center";
+    picker.style.justifyContent = "center";
+    picker.style.gap = "5px";
     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.
- * S'il n'existe pas, appelle window.AddWord pour l'ajouter.
  */
 async function showPicker(event, selectedText) {
-  console.log("showPicker appelé avec", event, selectedText);
-  const picker = createPicker();
-  picker.innerHTML = ""; // Vider le picker
-  const selectedLexicons = new Set(); // Stocke les lexiques sélectionnés
+  let picker = document.getElementById("lexiconPicker");
+  if (!picker) {
+    picker = document.createElement("div");
+    picker.id = "lexiconPicker";
+    document.body.appendChild(picker);
+  }
+  picker.innerHTML = ""; 
+  
+  const selectedLexicons = new Set();
 
   try {
     const lexicons = await getLexicons(authToken, "fr");
     console.log("Lexicons récupérés :", lexicons);
 
     if (!Array.isArray(lexicons) || lexicons.length === 0) {
-      picker.innerHTML = "<p>Aucun lexique trouvé.</p>";
+      picker.innerHTML = "<p style='color:#333;'>Aucun lexique trouvé.</p>";
     } else {
+      // Ajout des icônes directement dans le picker
       for (const lex of lexicons) {
         const id = lex.id;
         const name = lex.category === "User"
           ? `Lexique personnel : ${lex.user?.pseudo || "Inconnu"} (${lex.id})`
           : `Lexique de groupe : ${lex.group?.name || "Inconnu"} (${lex.id})`;
 
-        // Obtenir la couleur et créer le cercle
+        // Obtenir la couleur et créer un cercle (l'icône)
         const color = await getOrCreateLexiconColor(id);
-        const circleIcon = createColorCircle(color, 32);
+        const circleIcon = createColorCircle(color, 28); 
 
-        // Créer un conteneur pour l'icône
+        // Création du conteneur pour l'icône
         const iconContainer = document.createElement("div");
         iconContainer.className = "lexicon-option";
         iconContainer.dataset.lexiconId = id;
-        iconContainer.style.margin = "5px";
-        iconContainer.style.cursor = "pointer";
         iconContainer.title = name;
-        iconContainer.style.display = "inline-flex";
-        iconContainer.style.flexDirection = "row";
-        iconContainer.style.alignItems = "center";
-        iconContainer.style.justifyContent = "center";
-        iconContainer.style.border = "2px solid transparent"; 
-
-        // Ajoute le cercle coloré au conteneur
-        iconContainer.appendChild(circleIcon);
-        picker.appendChild(iconContainer);
-
-        // Écouteur de clic pour sélectionner/désélectionner le lexique
         iconContainer.addEventListener("click", () => {
           if (selectedLexicons.has(id)) {
             selectedLexicons.delete(id);
-            iconContainer.style.border = "2px solid transparent"; 
+            iconContainer.classList.remove("selected");
           } else {
             selectedLexicons.add(id);
-            iconContainer.style.border = "2px solid black";
+            iconContainer.classList.add("selected");
           }
         });
+        iconContainer.appendChild(circleIcon);
+        picker.appendChild(iconContainer);
       }
 
-      // Ajouter un bouton de validation
+      // Création du bouton de validation qui passera sur une nouvelle ligne
       const confirmButton = document.createElement("button");
-      confirmButton.textContent = "Ajouter aux lexiques sélectionnés";
-      confirmButton.style.fontStyle = "italic";
-      confirmButton.style.fontSize = "8px";
-      confirmButton.style.marginTop = "10px";
-      confirmButton.style.padding = "5px 10px";
-      confirmButton.style.cursor = "pointer";
-      confirmButton.style.border = "none";
-      confirmButton.style.borderRadius = "4px";
-      confirmButton.style.backgroundColor = "#6e76c7";
-      confirmButton.style.color = "white";
+      confirmButton.className = "confirmButton";
+      confirmButton.textContent = "Ajouter le mot";
 
       confirmButton.addEventListener("click", async () => {
         if (selectedLexicons.size === 0) {
@@ -349,40 +336,32 @@ async function showPicker(event, selectedText) {
           }
         }
 
-        // Affichage des lexiques où le mot existe déjà
         if (existingLexiconIds.size > 0) {
           alert(`⚠️ Le mot "${selectedText}" existe déjà dans les lexiques suivants : ${Array.from(existingLexiconIds).join(", ")}`);
         }
 
-        // Filtrer les lexiques où le mot n'existe pas encore
         const lexiconsToAdd = [...selectedLexicons].filter(id => !existingLexiconIds.has(id));
-
         if (lexiconsToAdd.length === 0) {
           alert(`✅ Le mot "${selectedText}" est déjà présent dans tous les lexiques sélectionnés.`);
           return;
         }
 
-        // Envoi de la requête d'ajout
         try {
           console.log(`📡 Ajout du mot "${selectedText}" dans les lexiques :`, lexiconsToAdd);
           const result = await AddWord(authToken, selectedText, lexiconsToAdd, false);
           console.log("✅ Réponse API :", result);
 
-          // Rafraîchir l'UI après l'ajout
           await new Promise(resolve => setTimeout(resolve, 300));
           browser.runtime.sendMessage({ action: "refreshUI" });
 
-          // Affichage du message de confirmation dans le picker
           picker.innerHTML = `<p style="color: green;">✅ Mot ajouté avec succès dans : ${lexiconsToAdd.join(", ")}.</p>`;
           setTimeout(() => picker.style.display = "none", 2000);
           browser.runtime.sendMessage({
             action: "addWordResult",
-            lexicons:`✅ Mot ajouté avec succès dans : ${lexiconsToAdd.join(", ")}.`
+            lexicons: `✅ Mot ajouté avec succès dans : ${lexiconsToAdd.join(", ")}.`
           });
         } catch (error) {
           console.error("❌ Erreur lors de l'ajout du mot :", error);
-
-          // Affichage du message d'erreur dans le picker
           picker.innerHTML = `<p style="color: red;">❌ Erreur : ${error.message}</p>`;
           setTimeout(() => picker.style.display = "none", 3000);
           browser.runtime.sendMessage({
@@ -401,15 +380,11 @@ async function showPicker(event, selectedText) {
     picker.style.display = "block";
   } catch (error) {
     console.error("❌ Erreur lors de la récupération des lexiques :", error);
-    picker.innerHTML = "<p>Erreur lors du chargement des lexiques.</p>";
+    picker.innerHTML = "<p style='color:#333;'>Erreur lors du chargement des lexiques.</p>";
     picker.style.display = "block";
   }
 }
 
-
-
-
-
 function hideLexiconPicker() {
   const picker = document.getElementById("lexiconPicker");
   if (picker) {