structure refacto & file documentation

website/src/components/ToolboxModals.jsx

@@ -0,0 +1,72 @@
+// Rôle : fournit les modales globales liées aux toolboxes et confirmations.
+import { useEffect, useState } from "react";
+import { lockBodyScroll } from "../utils/bodyScrollLock.js";
+
+function useModalScrollLock() {
+  useEffect(() => lockBodyScroll(), []);
+}
+
+export function ConfirmModal({ title, message, confirmLabel = "Confirmer", cancelLabel = "Annuler", danger = false, onClose }) {
+  useModalScrollLock();
+  return (
+    <div className="confirm-modal-root">
+      <div className="confirm-backdrop" onClick={() => onClose(false)} />
+      <section className="confirm-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title" aria-describedby="confirm-message">
+        <header><h2 id="confirm-title">{title}</h2></header>
+        <p id="confirm-message">{message}</p>
+        <footer>
+          <button onClick={() => onClose(false)}>{cancelLabel}</button>
+          <button className={danger ? "danger confirm-danger" : "primary"} onClick={() => onClose(true)}>{confirmLabel}</button>
+        </footer>
+      </section>
+    </div>
+  );
+}
+
+export function NotificationToast({ message }) {
+  return (
+    <div className="notification-toast" role="status" aria-live="polite">
+      {message}
+    </div>
+  );
+}
+
+export function CreateToolboxModal({ gameId, initialName = "", onClose }) {
+  useModalScrollLock();
+  const [name, setName] = useState(initialName);
+  return (
+    <div className="confirm-modal-root">
+      <div className="confirm-backdrop" onClick={() => onClose("")} />
+      <section className="confirm-modal toolbox-create-modal" role="dialog" aria-modal="true" aria-labelledby="toolbox-create-title">
+        <header><h2 id="toolbox-create-title">{gameId ? "Créer et associer une toolbox" : "Nouvelle toolbox"}</h2></header>
+        <form onSubmit={(event) => {
+          event.preventDefault();
+          if (name.trim()) onClose(name.trim());
+        }}>
+          <label className="field"><span>Nom</span><input name="name" autoComplete="off" placeholder="Nom de la toolbox" required value={name} onChange={(event) => setName(event.target.value)} autoFocus /></label>
+          <footer><button type="button" onClick={() => onClose("")}>Annuler</button><button className="primary" type="submit">Créer</button></footer>
+        </form>
+      </section>
+    </div>
+  );
+}
+
+export function LinkToolboxModal({ toolboxes, selectedId, onClose }) {
+  useModalScrollLock();
+  const [toolboxId, setToolboxId] = useState(selectedId);
+  return (
+    <div className="confirm-modal-root">
+      <div className="confirm-backdrop" onClick={() => onClose(null)} />
+      <section className="confirm-modal toolbox-link-modal" role="dialog" aria-modal="true" aria-labelledby="toolbox-link-title">
+        <header><h2 id="toolbox-link-title">Lier une toolbox</h2></header>
+        <form onSubmit={(event) => {
+          event.preventDefault();
+          onClose(toolboxId);
+        }}>
+          <label className="field"><span>Toolbox associée</span><select value={toolboxId} onChange={(event) => setToolboxId(event.target.value)} autoFocus><option value="">Aucune</option>{toolboxes.map((toolbox) => <option key={toolbox.id} value={toolbox.id}>{toolbox.name}</option>)}</select></label>
+          <footer><button type="button" onClick={() => onClose(null)}>Annuler</button><button className="primary" type="submit">Valider</button></footer>
+        </form>
+      </section>
+    </div>
+  );
+}