Move guide checklist controls into a collapsible header toggle

website/src/features/toolboxes/ToolboxPages.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { GuidedTooltipTour } from "../../components/GuidedTooltipTour.jsx";
 import { Icon } from "../../components/Icon.jsx";
 import { ImportButton } from "../../components/ImportButton.jsx";
-import { CurrentGuideChecklistControls } from "../games/GuideChecklistControls.jsx";
+import { useGuideChecklist } from "../games/useGuideChecklist.js";
 import { StorageQuota } from "../../components/StorageQuota.jsx";
 import { ToastPositionSwitch } from "../../components/ToastPositionSwitch.jsx";
 import { useGroupedReorder } from "../../hooks/useGroupedReorder.js";
@@ -180,7 +180,7 @@ function shouldShowTutorial(toolbox, pendingTutorialToolboxId) {
   return toolbox?.tutorial === true || pendingTutorialToolboxId === toolbox?.id;
 }
 
-function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, storageUsage, storageReady = true, getModuleData, updateToolbox, updateModuleData, addImageFiles, pendingTutorialToolboxId = "", setPendingTutorialToolboxId }) {
+function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, storageUsage, storageReady = true, getModuleData, updateToolbox, updateModuleData, addImageFiles, pendingTutorialToolboxId = "", setPendingTutorialToolboxId, guideChecklist }) {
   const toolboxId = toolbox.id;
   const moduleColumns = embedded || Number(toolbox.moduleColumns) === 1 ? 1 : 2;
   const toolboxGameCover = getGameCardCover(toolboxGame);
@@ -194,6 +194,7 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
     if (previousTutorial.toolboxId !== toolboxId || tutorialRequested) setShowTutorial(tutorialRequested);
   }
   const moduleContext = {
+    guideChecklist,
     getModuleData,
     ensureModuleData: actions.ensureModuleData,
     isModuleDataReady: actions.isModuleDataReady,
@@ -341,6 +342,8 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
 }
 
 export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, actions, storageUsage, storageReady = true, getModuleData, updateToolbox, updateModuleData, addImageFiles }) {
+  const checklist = useGuideChecklist();
+  const guideChecklist = checklist.available && checklist.guideId.split("/")[0] === gameId ? checklist : undefined;
   const selectedId = links[gameId] || "";
   const toolbox = toolboxes.find((item) => item.id === selectedId);
   const [width, setWidth] = useState("");
@@ -400,8 +403,7 @@ export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, act
             </div>
             <button className="drawer-close-button nds-icon-button" data-size="sm" onClick={() => actions.setDrawerGameId("")} aria-label="Fermer" title="Fermer"><Icon name="close" /></button>
           </header>
-          <CurrentGuideChecklistControls gameId={gameId} />
-          {toolbox ? <ToolboxView siteContent={siteContent} toolbox={toolbox} toolboxGame={game} embedded actions={actions} storageUsage={storageUsage} storageReady={storageReady} getModuleData={getModuleData} updateToolbox={updateToolbox} updateModuleData={updateModuleData} addImageFiles={addImageFiles} /> : (
+          {toolbox ? <ToolboxView siteContent={siteContent} toolbox={toolbox} toolboxGame={game} embedded actions={actions} storageUsage={storageUsage} storageReady={storageReady} getModuleData={getModuleData} updateToolbox={updateToolbox} updateModuleData={updateModuleData} addImageFiles={addImageFiles} guideChecklist={guideChecklist} /> : (
             <div className="empty nds-empty-state"><p>Aucune toolbox associée à cette page jeu.</p><button className="nds-button" data-size="sm" data-variant="primary" onClick={() => actions.setCreateModal({ gameId })}>Créer et associer</button></div>
           )}
           <StorageQuota usage={storageUsage} />

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

@@ -1,7 +1,11 @@
-// Rôle : attend les médias persistés avant de monter un outil éditable et propose une reprise locale en cas d'échec.
+// Rôle : affiche le chargement des outils et attend leurs médias persistés, avec reprise locale en cas d'échec.
 import { useEffect, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 
+export function ModuleLoadingFallback({ label }) {
+  return <div className="module-loading-fallback">Chargement de {label}...</div>;
+}
+
 export function ModuleDataGate({ context, toolboxId, moduleId, children }) {
   const ready = context.isModuleDataReady?.(toolboxId, moduleId) ?? true;
   const load = context.ensureModuleData;

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

@@ -1,20 +1,18 @@
 // Rôle : rend les modules d'une toolbox, leur shell commun et leur réorganisation.
 import { Suspense, useMemo, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { GuideChecklistControls, GuideChecklistToggle } from "../../games/GuideChecklistControls.jsx";
+import { useGuideChecklistPanel } from "../../games/useGuideChecklist.js";
 import { useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
 import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
 import { supportsTextExchange } from "./textImport.js";
 import { MODULE_COMPONENTS } from "./toolboxModuleComponents.jsx";
-import { ModuleDataGate } from "./ModuleDataGate.jsx";
+import { ModuleDataGate, ModuleLoadingFallback } from "./ModuleDataGate.jsx";
 
 const MODULE_COLUMN_IDS = ["left", "right"];
 
-function getModuleMap(modules) {
-  return new Map(modules.map((module) => [module.id, module]));
-}
-
 function getModulesByIds(modules, ids) {
-  const moduleMap = getModuleMap(modules);
+  const moduleMap = new Map(modules.map((module) => [module.id, module]));
   return (Array.isArray(ids) ? ids : []).map((id) => moduleMap.get(id)).filter(Boolean);
 }
 
@@ -157,6 +155,7 @@ function ModuleShell({ toolbox, module, context, reorder, itemGroup = "", onRena
   const label = definition.label || module.type;
   const [editing, setEditing] = useState(false);
   const [textExchangeOpen, setTextExchangeOpen] = useState(false);
+  const guidePanel = useGuideChecklistPanel(context.guideChecklist, module);
   const hasAddPanel = definition.editable && definition.addable !== false;
   const hasTextExchange = supportsTextExchange(module.type);
   const scrollable = definition.scrollable && module.scrollable === true;
@@ -242,6 +241,7 @@ function ModuleShell({ toolbox, module, context, reorder, itemGroup = "", onRena
               <Icon name="add" />
             </button>
           )}
+          <GuideChecklistToggle checklist={context.guideChecklist} panel={guidePanel} label={module.title || label} />
           {hasTextExchange && (
             <button
               className={`module-exchange-button nds-icon-button ${textExchangeOpen ? "active" : ""}`}
@@ -264,6 +264,7 @@ function ModuleShell({ toolbox, module, context, reorder, itemGroup = "", onRena
         </div>
       </header>
       <div className={`module-content ${scrollable ? "is-scrollable legacy-scrollbar" : ""}`}>
+        <GuideChecklistControls checklist={context.guideChecklist} {...guidePanel} />
         <Suspense fallback={<ModuleLoadingFallback label={label} />}>
           <ModuleDataGate key={`${toolbox.id}:${module.id}`} context={context} toolboxId={toolbox.id} moduleId={module.id}>
             <Component {...componentProps} />
@@ -274,10 +275,6 @@ function ModuleShell({ toolbox, module, context, reorder, itemGroup = "", onRena
   );
 }
 
-function ModuleLoadingFallback({ label }) {
-  return <div className="module-loading-fallback">Chargement de {label}...</div>;
-}
-
 function EditableModuleTitle({ value, fallback, onSave, tutorialTarget = "" }) {
   const inlineEdit = useInlineEdit({
     value,