Add checklist creation for filtered game results

website/public/data/site.json

@@ -2808,14 +2808,27 @@
     "hideCompleted": "Masquer les cochés",
     "completed": "Coché",
     "checkCard": "Cocher dans la checklist",
-    "uncheckCard": "Décocher dans la checklist"
+    "uncheckCard": "Décocher dans la checklist",
+    "resultsModalTitle": "Utiliser les résultats visibles",
+    "resultsModalDescription": "Seuls les éléments actuellement visibles sur la page seront utilisés, après application des filtres, du regroupement et du masquage des éléments cochés.",
+    "resultsChecklistLabel": "Nouvelle checklist",
+    "resultsTargetLabel": "Toolbox cible",
+    "resultsNoToolbox": "Liez une toolbox à cette page pour créer directement la checklist.",
+    "resultsCopyLabel": "Copier le format texte",
+    "resultsCreateLabel": "Créer dans la toolbox",
+    "resultsCreatingLabel": "Création…",
+    "resultsClose": "Fermer",
+    "resultsCopied": "Copié dans le presse-papiers.",
+    "resultsCopyError": "Impossible de copier les résultats dans le presse-papiers.",
+    "resultsCreateError": "Impossible de créer la checklist."
   },
   "aniimo": {
     "title": "Aniimos",
     "description": "Filtrez les variantes par nom, éléments, rôle et compétences de logis, puis retournez les cartes pour consulter leurs capacités.",
     "homeDescription": "Recherche par nom, rôle, éléments et compétences de logis.",
-    "copyChecklist": "Copier les Aniimos visibles sans les variantes pour checklist",
-    "copyVariantsChecklist": "Copier toutes les variantes visibles pour checklist",
+    "copyChecklist": "Utiliser les Aniimos visibles sans les variantes pour une checklist",
+    "copyVariantsChecklist": "Utiliser toutes les variantes visibles pour une checklist",
+    "variantsChecklistTitle": "Variantes Aniimo",
     "statsTitle": "Statistiques",
     "statsTotal": "Total",
     "stats": { "hp": "PV", "atk": "Attaque", "p_def": "Déf. phys.", "m_def": "Déf. mag.", "break": "Rupture", "regen": "Régén." },

website/src/features/games/CopyChecklistItemsButton.jsx

@@ -1,7 +1,9 @@
-// Rôle : copie des données filtrées au format compatible avec l'import checklist.
+// Rôle : copie ou crée en checklist les données visibles des pages de jeu.
 /* eslint-disable react-refresh/only-export-components -- expose aussi les formatters publics testés pour l'import checklist. */
-import { useState } from "react";
+import { useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
 import { Icon } from "../../components/Icon.jsx";
+import { lockBodyScroll } from "../../utils/bodyScrollLock.js";
 
 async function copyText(value) {
   try {
@@ -44,8 +46,105 @@ export function formatChecklistImportSections(sections = []) {
     .join("\n\n");
 }
 
-export function CopyChecklistItemsButton({ labels, sections, title = "Copier pour checklist" }) {
+function ChecklistResultsModal({ checklistTitle, content, linkedToolbox, text, onCreate, onClose }) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.key === "Escape" && !creating) onClose();
+    }
+
+    const unlock = lockBodyScroll();
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      unlock();
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [creating, onClose]);
+
+  async function copyItems() {
+    setError("");
+    if (!await copyText(text)) {
+      setError(content.resultsCopyError || "Impossible de copier les résultats dans le presse-papiers.");
+      return;
+    }
+    notify(content.resultsCopied || "Copié dans le presse-papiers.");
+    onClose();
+  }
+
+  async function createChecklist() {
+    if (!linkedToolbox || creating) return;
+    setCreating(true);
+    setError("");
+    try {
+      if (await onCreate()) onClose();
+      else setError(content.resultsCreateError || "Impossible de créer la checklist.");
+    } catch {
+      setError(content.resultsCreateError || "Impossible de créer la checklist.");
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  return createPortal(
+    <div className="confirm-modal-root results-checklist-modal-root">
+      <div className="confirm-backdrop nds-modal-backdrop" onClick={() => !creating && onClose()} />
+      <section className="confirm-modal nds-modal results-checklist-modal" role="dialog" aria-modal="true" aria-labelledby={titleId} aria-describedby={descriptionId}>
+        <header className="results-checklist-modal-header">
+          <h2 id={titleId}>{content.resultsModalTitle || "Utiliser les résultats visibles"}</h2>
+          <button className="nds-icon-button" data-size="sm" type="button" disabled={creating} onClick={onClose} aria-label={content.resultsClose || "Fermer"} title={content.resultsClose || "Fermer"}>
+            <Icon name="close" />
+          </button>
+        </header>
+        <p id={descriptionId} className="results-checklist-modal-description">
+          {content.resultsModalDescription || "Seuls les éléments actuellement visibles sur la page seront utilisés, après application des filtres."}
+        </p>
+        <div className="results-checklist-modal-summary">
+          <span>{content.resultsChecklistLabel || "Checklist"}</span>
+          <strong>{checklistTitle}</strong>
+        </div>
+        {linkedToolbox ? (
+          <div className="results-checklist-modal-target">
+            <span>{content.resultsTargetLabel || "Toolbox cible"}</span>
+            <strong>{linkedToolbox.name}</strong>
+          </div>
+        ) : (
+          <p className="results-checklist-modal-notice nds-inline-notice" data-variant="warning" role="status">
+            <Icon name="link" />
+            <span>{content.resultsNoToolbox || "Liez une toolbox à cette page pour créer directement la checklist."}</span>
+          </p>
+        )}
+        {error && <p className="results-checklist-modal-error nds-inline-notice" data-variant="danger" role="alert"><Icon name="close" /><span>{error}</span></p>}
+        <footer className="nds-modal-footer results-checklist-modal-actions">
+          <button className="nds-button" data-size="sm" type="button" disabled={creating} onClick={() => void copyItems()} autoFocus>
+            <Icon name="copy" />{content.resultsCopyLabel || "Copier le format texte"}
+          </button>
+          <button className="nds-button" data-size="sm" data-variant="primary" type="button" disabled={!linkedToolbox || creating} onClick={() => void createChecklist()}>
+            <span className="module-icon" aria-hidden="true"><span className="module-icon-svg module-icon-checklist" /></span>
+            {creating ? content.resultsCreatingLabel || "Création…" : content.resultsCreateLabel || "Créer dans la toolbox"}
+          </button>
+        </footer>
+      </section>
+    </div>,
+    document.body
+  );
+}
+
+export function CopyChecklistItemsButton({
+  labels,
+  sections,
+  title = "Copier pour checklist",
+  filteredResults = false,
+  checklistTitle = "Checklist",
+  linkedToolbox,
+  content = {},
+  onCreateChecklist
+}) {
   const [copied, setCopied] = useState(false);
+  const [open, setOpen] = useState(false);
   const text = sections ? formatChecklistImportSections(sections) : formatChecklistImportItems(labels);
 
   async function copyItems() {
@@ -55,17 +154,37 @@ export function CopyChecklistItemsButton({ labels, sections, title = "Copier pou
     window.setTimeout(() => setCopied(false), 1400);
   }
 
+  async function createChecklist() {
+    if (!onCreateChecklist) return false;
+    return onCreateChecklist({
+      title: checklistTitle,
+      ...(sections ? { sections } : { items: labels || [] })
+    });
+  }
+
   return (
-    <button
-      className="filter-reset-button results-copy-button nds-icon-button"
-      data-size="xs"
-      type="button"
-      onClick={copyItems}
-      disabled={!text}
-      aria-label={title}
-      title={copied ? "Copié" : title}
-    >
-      <Icon name="copy" />
-    </button>
+    <>
+      <button
+        className="filter-reset-button results-copy-button nds-icon-button"
+        data-size="xs"
+        type="button"
+        onClick={filteredResults ? () => setOpen(true) : copyItems}
+        disabled={!text}
+        aria-label={title}
+        title={copied ? "Copié" : title}
+      >
+        <Icon name="copy" />
+      </button>
+      {filteredResults && open && (
+        <ChecklistResultsModal
+          checklistTitle={checklistTitle}
+          content={content}
+          linkedToolbox={linkedToolbox}
+          text={text}
+          onCreate={createChecklist}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </>
   );
 }

website/src/features/games/aniimo/AniimoPage.jsx

@@ -28,7 +28,15 @@ function AniimoListing({ game, aniimo, filters, setFilters, content }) {
         <div className="game-title-row">
           <h1>{content.title}</h1>
           <span className="results-count aniimo-results-count" role="status"><span data-copy-target={active.grouped || undefined}>{groups.length} / {totalAniimos} {content.title}</span>{" · "}<span data-copy-target={!active.grouped || undefined}>{visible.length} / {aniimo.variants.length} {content.variants.toLowerCase()}</span></span>
-          <CopyChecklistItemsButton labels={active.grouped ? groups.map(([variant]) => t(variant.name)) : visible.map((variant) => `${t(variant.name)} — ${t(variant.form)}`)} title={active.grouped ? content.copyChecklist : content.copyVariantsChecklist} />
+          <CopyChecklistItemsButton
+            labels={active.grouped ? groups.map(([variant]) => t(variant.name)) : visible.map((variant) => `${t(variant.name)} — ${t(variant.form)}`)}
+            title={active.grouped ? content.copyChecklist : content.copyVariantsChecklist}
+            filteredResults
+            checklistTitle={active.grouped ? content.title : content.variantsChecklistTitle}
+            linkedToolbox={checklist.toolbox}
+            content={checklist.content}
+            onCreateChecklist={checklist.createChecklistFromResults}
+          />
         </div>
         <p>{content.description}</p>
       </div>

website/src/features/games/diablo4/Diablo4Listing.jsx

@@ -27,7 +27,15 @@ export function Diablo4Listing({ game, diablo4, filters, setFilters }) {
           <div className="game-title-row">
             <h1>Affixes</h1>
             <span className="results-count">{visible.length} / {diablo4.affixes.length}</span>
-            <CopyChecklistItemsButton labels={visible.map((affix) => affix.label)} title="Copier les affixes visibles pour checklist" />
+            <CopyChecklistItemsButton
+              labels={visible.map((affix) => affix.label)}
+              title="Utiliser les affixes visibles pour une checklist"
+              filteredResults
+              checklistTitle="Affixes"
+              linkedToolbox={checklist.toolbox}
+              content={checklist.content}
+              onCreateChecklist={checklist.createChecklistFromResults}
+            />
           </div>
           <p>Filtrez les affixes par nom et catégories pour retrouver rapidement les statistiques utiles à votre build.</p>
         </div>

website/src/features/games/mhwilds/MhwildsListing.jsx

@@ -29,7 +29,15 @@ export function MhwildsListing({ category, game, mhwilds, filters, setFilters, t
           <div className="game-title-row">
             <h1>{label}</h1>
             <span className="results-count">{visible.length} / {items.length}</span>
-            <CopyChecklistItemsButton labels={visible.map((item) => t(item.name, { capitalize: true }))} title={`Copier les ${label.toLowerCase()} visibles pour checklist`} />
+            <CopyChecklistItemsButton
+              labels={visible.map((item) => t(item.name, { capitalize: true }))}
+              title={`Utiliser les ${label.toLowerCase()} visibles pour une checklist`}
+              filteredResults
+              checklistTitle={label}
+              linkedToolbox={checklist.toolbox}
+              content={checklist.content}
+              onCreateChecklist={checklist.createChecklistFromResults}
+            />
           </div>
           <p>{isMonsters ? "Filtrez les monstres par nom et faiblesses, puis consultez leurs dégâts détaillés." : "Filtrez la faune par nom et zones d'apparition."}</p>
         </div>

website/src/features/games/useGuideChecklist.js

@@ -38,6 +38,7 @@ export function useGuideChecklist(requestedGuideId) {
     content, toolbox, selected, hideCompleted, isCompleted, canToggle, toggleCompleted, guideId, available: entries !== null,
     lists: lists.filter((list) => list.count || list.id === selected?.id),
     isVisible: (key) => !hideCompleted || !isCompleted(key),
+    createChecklistFromResults: (checklist) => actions.createChecklistFromResults(gameId, checklist),
     associate: (moduleId) => guideChecklistStorage.setAssociation(guideId, moduleId ? { toolboxId: toolbox.id, moduleId, hideCompleted } : null),
     toggleHidden: () => guideChecklistStorage.setAssociation(guideId, { ...association, hideCompleted: !hideCompleted })
   };

website/src/features/toolboxes/useToolboxActions.js

@@ -116,37 +116,65 @@ export function useToolboxActions({ store, notify, creationTemplate, setConfirmM
     });
   }
 
-  function createChecklistFromList(gameId, list) {
+  async function createChecklistFromResults(gameId, checklist) {
     const toolboxId = store.links[gameId] || "";
     const toolbox = store.toolboxes.find((item) => item.id === toolboxId);
-    if (!toolbox || !list) return false;
+    if (!toolbox || !checklist) return false;
 
     const moduleId = uid("mod");
-    const sections = (list.categories || []).map((category) => ({
+    const sourceSections = Array.isArray(checklist.sections)
+      ? checklist.sections
+      : [{ title: "", items: checklist.items || [] }];
+    const sections = sourceSections.map((category) => ({
       id: uid("section"),
       title: category.title || "",
       items: (category.items || []).map((item) => ({
         id: uid("item"),
-        label: item.name,
-        qtyTarget: Math.max(1, Number.parseInt(item.quantity, 10) || 1),
+        label: typeof item === "object" && item !== null ? String(item.label || item.name || "").trim() : String(item || "").trim(),
+        qtyTarget: Math.max(1, Number.parseInt(item?.quantity ?? item?.qtyTarget, 10) || 1),
         qtyCurrent: 0
       })).filter((item) => item.label)
     })).filter((section) => section.items.length);
 
     if (!sections.length) return false;
 
+    const title = String(checklist.title || "Checklist").trim() || "Checklist";
+    const updatedAt = new Date().toISOString();
+    const data = compactModuleDataForStorage("checklist", { sections });
+    let created = false;
+    const saved = await store.persistToolboxSnapshot((current) => {
+      if (current.links[gameId] !== toolboxId || !current.toolboxes.some((item) => item.id === toolboxId)) return current;
+      created = true;
+      return {
+        ...current,
+        toolboxes: current.toolboxes.map((item) => item.id === toolboxId
+          ? { ...addModuleToToolboxSpace(item, { id: moduleId, type: "checklist", title }, item.activeSpaceId), updatedAt }
+          : item),
+        moduleData: { ...current.moduleData, [globalModuleKey(toolboxId, moduleId)]: data }
+      };
+    });
+    if (saved && created) notify("Checklist créée dans la toolbox associée.");
+    return Boolean(saved && created);
+  }
+
+  function createChecklistFromList(gameId, list) {
+    const toolboxId = store.links[gameId] || "";
+    const toolbox = store.toolboxes.find((item) => item.id === toolboxId);
+    if (!toolbox || !list) return false;
+
     setConfirmModal({
       title: "Créer une checklist",
       message: `Créer la checklist "${list.title || "Checklist"}" dans la toolbox "${toolbox.name}" ?`,
       confirmLabel: "Créer",
       onResolve: (confirmed) => {
         if (!confirmed) return;
-        const updatedAt = new Date().toISOString();
-        store.setToolboxes((toolboxes) => toolboxes.map((item) => item.id === toolboxId
-          ? { ...addModuleToToolboxSpace(item, { id: moduleId, type: "checklist", title: list.title || "Checklist" }, item.activeSpaceId), updatedAt }
-          : item));
-        store.updateModuleData(toolboxId, moduleId, { sections }, "checklist");
-        notify("Checklist créée dans la toolbox associée.");
+        void createChecklistFromResults(gameId, {
+          title: list.title || "Checklist",
+          sections: (list.categories || []).map((category) => ({
+            title: category.title || "",
+            items: category.items || []
+          }))
+        });
       }
     });
     return true;
@@ -263,6 +291,7 @@ export function useToolboxActions({ store, notify, creationTemplate, setConfirmM
     setLinkModalGameId,
     setDrawerGameId,
     setImage,
+    createChecklistFromResults,
     createChecklistFromList,
     addImageFiles,
     ensureModuleData: store.ensureModuleData,

website/src/styles/games/_lists.scss

@@ -19,6 +19,88 @@
   min-height: 32px;
 }
 
+.results-checklist-modal.nds-modal {
+  width: min(560px, calc(100vw - 32px));
+}
+
+.results-checklist-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.results-checklist-modal-header h2,
+.results-checklist-modal .results-checklist-modal-description,
+.results-checklist-modal .results-checklist-modal-notice,
+.results-checklist-modal .results-checklist-modal-error {
+  margin-bottom: 0;
+}
+
+.results-checklist-modal-description {
+  margin-top: var(--space-3);
+  color: var(--color-text-secondary);
+  line-height: 1.55;
+}
+
+.results-checklist-modal-summary,
+.results-checklist-modal-target {
+  display: grid;
+  gap: 4px;
+  margin-top: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: rgba(5, 7, 17, 0.32);
+}
+
+.results-checklist-modal-summary span,
+.results-checklist-modal-target span {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.results-checklist-modal-summary strong,
+.results-checklist-modal-target strong {
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.results-checklist-modal-notice,
+.results-checklist-modal-error {
+  margin-top: var(--space-4);
+}
+
+.results-checklist-modal-actions {
+  margin-top: var(--space-5);
+}
+
+.results-checklist-modal-actions .module-icon {
+  width: 20px;
+  height: 20px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.results-checklist-modal-actions .module-icon-svg {
+  width: 18px;
+  height: 18px;
+}
+
+@media (max-width: 600px) {
+  .results-checklist-modal-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .results-checklist-modal-actions .nds-button {
+    width: 100%;
+  }
+}
+
 .game-list-help-link {
   width: fit-content;
   margin-top: var(--space-3);