structure refacto & file documentation

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

@@ -1,107 +0,0 @@
-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 || {};
-  const [dragOver, setDragOver] = useState(false);
-  const pastePlaceholder = textContent.pastePlaceholder || "Coller une image ici";
-
-  async function addFiles(files) {
-    if (await context.addScreenshotFiles(toolboxId, moduleId, files)) {
-      setDragOver(false);
-    }
-  }
-
-  function updateShot(shotId, patch) {
-    context.setModuleData(toolboxId, moduleId, {
-      shots: data.shots.map((shot) => shot.id === shotId ? { ...shot, ...patch } : shot)
-    });
-  }
-
-  return (
-    <>
-      {editing && (
-        <div className="module-add-panel">
-          <label
-            className={`dropzone ${dragOver ? "is-drag-over" : ""}`}
-            onDragOver={(event) => {
-              event.preventDefault();
-              event.dataTransfer.dropEffect = "copy";
-              setDragOver(true);
-            }}
-            onDragLeave={() => setDragOver(false)}
-            onDrop={(event) => {
-              event.preventDefault();
-              addFiles(event.dataTransfer.files);
-            }}
-          >
-            <input type="file" accept="image/*" multiple hidden onChange={(event) => addFiles(event.target.files)} />
-            {textContent.addImages || "Ajouter des images"}
-          </label>
-          <div
-            className="paste-target"
-            contentEditable
-            suppressContentEditableWarning
-            role="textbox"
-            aria-label={textContent.pasteAriaLabel || "Coller une image depuis le presse-papiers"}
-            onFocus={(event) => {
-              if (event.currentTarget.textContent.trim() === pastePlaceholder) event.currentTarget.textContent = "";
-            }}
-            onBlur={(event) => {
-              if (!event.currentTarget.textContent.trim()) event.currentTarget.textContent = pastePlaceholder;
-            }}
-            onPaste={(event) => {
-              const files = [...(event.clipboardData?.items || [])]
-                .filter((item) => item.type.startsWith("image/"))
-                .map((item) => item.getAsFile())
-                .filter(Boolean);
-              if (!files.length) return;
-              event.preventDefault();
-              event.currentTarget.textContent = pastePlaceholder;
-              addFiles(files);
-            }}
-          >
-            {pastePlaceholder}
-          </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"} />
-            </button>
-            {editing ? (
-              <input
-                className="shot-label-input"
-                value={shot.label || ""}
-                placeholder={textContent.labelPlaceholder || "Libellé de l'image"}
-                onChange={(event) => updateShot(shot.id, { label: event.target.value })}
-                aria-label={textContent.labelAriaLabel || "Libellé de l'image"}
-              />
-            ) : shot.label ? (
-              <figcaption className="shot-label">{shot.label}</figcaption>
-            ) : null}
-            <div className="shot-actions">
-              <button
-                className="shot-annotate-button"
-                type="button"
-                onClick={() => context.createImageAnnotationModule?.(shot.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) });
-              }} aria-label={textContent.deleteAriaLabel || "Supprimer l'image"} title={textContent.deleteTitle || "Supprimer"}>
-                <Icon name="trash" />
-              </button>
-            </div>
-          </figure>
-        ))}
-      </div>
-    </>
-  );
-}