style / tools optis & new tools calculator

website/src/features/games/CopyChecklistItemsButton.jsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Icon } from "../../components/Icon.jsx";
+
+async function copyText(value) {
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function formatChecklistImportItems(labels) {
+  return labels
+    .map((label) => String(label || "").trim())
+    .filter(Boolean)
+    .map((label) => `${label}:1`)
+    .join("\n");
+}
+
+export function CopyChecklistItemsButton({ labels, title = "Copier pour checklist" }) {
+  const [copied, setCopied] = useState(false);
+  const text = formatChecklistImportItems(labels);
+
+  async function copyItems() {
+    if (!text || !await copyText(text)) return;
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  }
+
+  return (
+    <button
+      className="filter-reset-button results-copy-button"
+      type="button"
+      onClick={copyItems}
+      disabled={!text}
+      aria-label={title}
+      title={copied ? "Copié" : title}
+    >
+      <Icon name="copy" />
+    </button>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { CopyChecklistItemsButton } from "../CopyChecklistItemsButton.jsx";
 import { Diablo4AffixCard } from "./Diablo4AffixCard.jsx";
 import { Diablo4Filters } from "./Diablo4Filters.jsx";
 import { getCategoryLabel, getFilteredDiablo4Affixes } from "./utils.js";
@@ -19,6 +20,7 @@ export function Diablo4Listing({ 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" />
           </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

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { EndemicCard } from "./cards/EndemicCard.jsx";
 import { MonsterCard } from "./cards/MonsterCard.jsx";
+import { CopyChecklistItemsButton } from "../CopyChecklistItemsButton.jsx";
 import { MhwildsFilters } from "./MhwildsFilters.jsx";
 import { getFilteredMhwildsItems, getMhwildsFilterKey, getUniqueConditionValues } from "./utils.js";
 
@@ -22,6 +23,7 @@ export function MhwildsListing({ category, 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`} />
           </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>