improve notepad features and add drawing canvas

website/src/features/toolboxes/ToolboxCard.jsx

@@ -1,5 +1,6 @@
 // Rôle : affiche une toolbox dans la liste, avec actions rapides et icône personnalisable.
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
+import { CompactDropdown } from "../../components/CompactDropdown.jsx";
 import { Icon } from "../../components/Icon.jsx";
 import {
   DEFAULT_TOOLBOX_ICON,
@@ -73,54 +74,37 @@ export function ToolboxCard({ toolbox, game, actions, draggingToolboxId, dropTar
 }
 
 export function ToolboxIconPicker({ toolbox, onChange }) {
-  const [open, setOpen] = useState(false);
-  const pickerRef = useRef(null);
   const icon = normalizeToolboxIcon(toolbox.icon);
 
-  useEffect(() => {
-    if (!open) return undefined;
-
-    function handlePointerDown(event) {
-      if (!pickerRef.current?.contains(event.target)) setOpen(false);
-    }
-
-    function handleKeyDown(event) {
-      if (event.key === "Escape") setOpen(false);
-    }
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open]);
-
-  function selectIcon(nextIcon) {
-    onChange(nextIcon);
-    setOpen(false);
-  }
-
   return (
-    <div className="toolbox-icon-picker" ref={pickerRef}>
-      <button
-        className="toolbox-icon-picker-button"
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        aria-label="Changer l'icône de la toolbox"
-        aria-expanded={open}
-        title="Changer l'icône"
-      >
-        <img src={icon} alt="" aria-hidden="true" />
-      </button>
-      {open && (
-        <div className="toolbox-icon-picker-menu" aria-label="Icônes de toolbox">
+    <CompactDropdown
+      className="toolbox-icon-picker"
+      menuClassName="toolbox-icon-picker-menu"
+      label="Icônes de toolbox"
+      renderTrigger={({ open, toggle }) => (
+        <button
+          className="toolbox-icon-picker-button"
+          type="button"
+          onClick={toggle}
+          aria-label="Changer l'icône de la toolbox"
+          aria-expanded={open}
+          title="Changer l'icône"
+        >
+          <img src={icon} alt="" aria-hidden="true" />
+        </button>
+      )}
+    >
+      {({ close }) => (
+        <>
           {TOOLBOX_ICONS.map((path) => (
             <button
               key={path}
               className={path === icon ? "active" : ""}
               type="button"
-              onClick={() => selectIcon(path)}
+              onClick={() => {
+                onChange(path);
+                close();
+              }}
               aria-label={`Utiliser l'icône ${path.split("/").pop().replace(".png", "")}`}
               aria-pressed={path === icon}
               title={path.split("/").pop().replace(".png", "")}
@@ -128,9 +112,9 @@ export function ToolboxIconPicker({ toolbox, onChange }) {
               <img src={path} alt="" aria-hidden="true" loading="lazy" />
             </button>
           ))}
-        </div>
+        </>
       )}
-    </div>
+    </CompactDropdown>
   );
 }