structure refacto & file documentation

website/src/features/toolboxes/modules/CalculatorModule.jsx

@@ -1,3 +1,4 @@
+// Rôle : fournit l'outil calculateur avec résultats enregistrés en arborescence.
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 

website/src/features/toolboxes/modules/ChecklistModule.jsx

@@ -1,3 +1,4 @@
+// Rôle : fournit l'outil checklist avec quantités, catégories et imports texte.
 import { useCallback, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 import { TextImportModal } from "./TextImportModal.jsx";

website/src/features/toolboxes/modules/CountersModule.jsx

@@ -1,3 +1,4 @@
+// Rôle : fournit l'outil compteurs personnalisables.
 import { useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 

website/src/features/toolboxes/modules/ImageAnnotationModule.jsx

@@ -1,3 +1,4 @@
+// Rôle : fournit l'outil annotation d'images avec marqueurs éditables.
 import { useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 
@@ -84,7 +85,7 @@ export function ImageAnnotationModule({ toolboxId, moduleId, context, editing })
                 <button
                   className="calculator-action-button"
                   type="button"
-                  onClick={() => context.setScreenshot({
+                  onClick={() => context.setImage({
                     dataUrl: data.image,
                     markers,
                     alt: textContent.imageAlt || "Image annotée",

website/src/features/toolboxes/modules/ImagesModule.jsx

@@ -1,21 +1,22 @@
+// Rôle : fournit l'outil images avec import, collage, libellés et annotation rapide.
 import { useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 
-export function ScreenshotsModule({ toolboxId, moduleId, context, editing }) {
-  const data = context.getModuleData(toolboxId, moduleId, { shots: [] });
-  const textContent = context.moduleText?.screenshots || {};
+export function ImagesModule({ toolboxId, moduleId, context, editing }) {
+  const data = context.getModuleData(toolboxId, moduleId, { images: [] });
+  const textContent = context.moduleText?.images || {};
   const [dragOver, setDragOver] = useState(false);
   const pastePlaceholder = textContent.pastePlaceholder || "Coller une image ici";
 
   async function addFiles(files) {
-    if (await context.addScreenshotFiles(toolboxId, moduleId, files)) {
+    if (await context.addImageFiles(toolboxId, moduleId, files)) {
       setDragOver(false);
     }
   }
 
-  function updateShot(shotId, patch) {
+  function updateImage(imageId, patch) {
     context.setModuleData(toolboxId, moduleId, {
-      shots: data.shots.map((shot) => shot.id === shotId ? { ...shot, ...patch } : shot)
+      images: data.images.map((image) => image.id === imageId ? { ...image, ...patch } : image)
     });
   }
 
@@ -66,35 +67,35 @@ export function ScreenshotsModule({ toolboxId, moduleId, context, editing }) {
           </div>
         </div>
       )}
-      <div className="shots">
-        {data.shots.map((shot) => (
-          <figure key={shot.id}>
-            <button className="shot-preview" onClick={() => context.setScreenshot(shot)} aria-label={textContent.previewAriaLabel || "Agrandir l'image"}>
-              <img src={shot.dataUrl} alt={textContent.imageAlt || "Image"} />
+      <div className="images">
+        {data.images.map((image) => (
+          <figure key={image.id}>
+            <button className="image-preview" onClick={() => context.setImage(image)} aria-label={textContent.previewAriaLabel || "Agrandir l'image"}>
+              <img src={image.dataUrl} alt={textContent.imageAlt || "Image"} />
             </button>
             {editing ? (
               <input
-                className="shot-label-input"
-                value={shot.label || ""}
+                className="image-label-input"
+                value={image.label || ""}
                 placeholder={textContent.labelPlaceholder || "Libellé de l'image"}
-                onChange={(event) => updateShot(shot.id, { label: event.target.value })}
+                onChange={(event) => updateImage(image.id, { label: event.target.value })}
                 aria-label={textContent.labelAriaLabel || "Libellé de l'image"}
               />
-            ) : shot.label ? (
-              <figcaption className="shot-label">{shot.label}</figcaption>
+            ) : image.label ? (
+              <figcaption className="image-label">{image.label}</figcaption>
             ) : null}
-            <div className="shot-actions">
+            <div className="image-actions">
               <button
-                className="shot-annotate-button"
+                className="image-annotate-button"
                 type="button"
-                onClick={() => context.createImageAnnotationModule?.(shot.dataUrl)}
+                onClick={() => context.createImageAnnotationModule?.(image.dataUrl)}
                 aria-label={textContent.annotateAriaLabel || "Annoter l'image"}
                 title={textContent.annotateTitle || "Annoter"}
               >
                 <Icon name="map" />
               </button>
-              <button className="shot-delete-button danger" type="button" onClick={() => {
-                context.setModuleData(toolboxId, moduleId, { shots: data.shots.filter((item) => item.id !== shot.id) });
+              <button className="image-delete-button danger" type="button" onClick={() => {
+                context.setModuleData(toolboxId, moduleId, { images: data.images.filter((item) => item.id !== image.id) });
               }} aria-label={textContent.deleteAriaLabel || "Supprimer l'image"} title={textContent.deleteTitle || "Supprimer"}>
                 <Icon name="trash" />
               </button>

website/src/features/toolboxes/modules/LinksModule.jsx

@@ -1,3 +1,4 @@
+// Rôle : fournit l'outil liens avec ajout manuel et import texte.
 import { useCallback, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 import { TextImportModal } from "./TextImportModal.jsx";

website/src/features/toolboxes/modules/NotepadModule.jsx

@@ -1,3 +1,4 @@
+// Rôle : fournit l'outil bloc-notes libre.
 import { useState } from "react";
 
 export function NotepadModule({ toolboxId, moduleId, context }) {

website/src/features/toolboxes/modules/TextImportModal.jsx

@@ -1,3 +1,4 @@
+// Rôle : affiche la modale d'import texte partagée par les outils compatibles.
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Icon } from "../../../components/Icon.jsx";

website/src/features/toolboxes/modules/index.jsx

@@ -1,3 +1,4 @@
+// Rôle : registre des outils toolbox, rendu commun et contrôles d'ajout/réorganisation.
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Icon } from "../../../components/Icon.jsx";
@@ -9,12 +10,12 @@ import { CountersModule } from "./CountersModule.jsx";
 import { ImageAnnotationModule } from "./ImageAnnotationModule.jsx";
 import { LinksModule } from "./LinksModule.jsx";
 import { NotepadModule } from "./NotepadModule.jsx";
-import { ScreenshotsModule } from "./ScreenshotsModule.jsx";
+import { ImagesModule } from "./ImagesModule.jsx";
 
 const MODULE_COMPONENTS = {
   notepad: { label: "Bloc notes", icon: "notepad", Component: NotepadModule, editable: false },
   checklist: { label: "Checklist", icon: "checklist", Component: ChecklistModule, editable: true, scrollable: true },
-  screenshots: { label: "Images", icon: "picture", Component: ScreenshotsModule, editable: true, scrollable: true },
+  images: { label: "Images", icon: "picture", Component: ImagesModule, editable: true, scrollable: true },
   links: { label: "Liens", icon: "link", Component: LinksModule, editable: true, scrollable: true },
   counters: { label: "Compteurs", icon: "abacus", Component: CountersModule, editable: true, scrollable: true },
   calculator: { label: "Calculateur", icon: "calculator", Component: CalculatorModule, editable: false },

website/src/features/toolboxes/modules/textImport.js

@@ -1,3 +1,4 @@
+// Rôle : parse les imports texte en listes exploitables par les outils.
 export function parseColonImportLines(text) {
   return String(text || "")
     .split(/\r?\n/)