add list page and multiples optis

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

@@ -1,11 +1,12 @@
 import { useMemo } from "react";
+import { GameBreadcrumb } from "../GameBreadcrumb.jsx";
 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";
 
-export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
+export function MhwildsListing({ category, game, mhwilds, filters, setFilters, t }) {
   const isMonsters = category === "monsters";
   const filterKey = getMhwildsFilterKey(category, mhwilds);
   const items = isMonsters ? mhwilds.monsters : mhwilds.endemic;
@@ -19,7 +20,7 @@ export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
     <>
       <section className="page-heading game-heading">
         <div>
-          <p className="eyebrow">Monster Hunter Wilds</p>
+          <GameBreadcrumb game={game} />
           <div className="game-title-row">
             <h1>{label}</h1>
             <span className="results-count">{visible.length} / {items.length}</span>

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

@@ -0,0 +1,22 @@
+import { useMemo, useState } from "react";
+import { GameListsPage } from "../GameListsPage.jsx";
+
+export function MhwildsLists({ game, mhwilds, linkedToolboxId, actions }) {
+  const lists = mhwilds.lists || [];
+  const [selectedListId, setSelectedListId] = useState("");
+  const selectedList = useMemo(
+    () => lists.find((list) => list.id === selectedListId) || lists[0] || null,
+    [lists, selectedListId]
+  );
+
+  return (
+    <GameListsPage
+      game={game}
+      lists={lists}
+      selectedListId={selectedList?.id || ""}
+      onSelectList={setSelectedListId}
+      linkedToolboxId={linkedToolboxId}
+      onCreateChecklist={(list) => actions.createChecklistFromList(game.id, list)}
+    />
+  );
+}

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

@@ -23,6 +23,13 @@ export function MhwildsOverview({ game }) {
           <strong>Faune endémique</strong>
           <span>Faune endémique et aquatique filtrable par localisation.</span>
         </a>
+        <a className="feature game-home-card" href="#/games/mhwilds/lists">
+          <span className="game-home-card-icon" aria-hidden="true">
+            <span className="module-icon-svg module-icon-checklist" />
+          </span>
+          <strong>Listes</strong>
+          <span>Données copiables au format checklist pour préparer vos suivis.</span>
+        </a>
       </section>
     </>
   );

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

@@ -1,8 +1,9 @@
 import { MhwildsListing } from "./MhwildsListing.jsx";
+import { MhwildsLists } from "./MhwildsLists.jsx";
 import { MhwildsOverview } from "./MhwildsOverview.jsx";
 
-export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t }) {
-  const activeCategory = category === "monsters" || category === "endemic" ? category : "";
+export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t, links, actions }) {
+  const activeCategory = category === "monsters" || category === "endemic" || category === "lists" ? category : "";
   const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
 
   if (!mhwilds.loaded) {
@@ -33,10 +34,12 @@ export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t })
   }
 
   if (!activeCategory) return <MhwildsOverview game={game} />;
+  if (activeCategory === "lists") return <MhwildsLists game={game} mhwilds={mhwilds} linkedToolboxId={links?.[game.id] || ""} actions={actions} />;
 
   return (
     <MhwildsListing
       category={activeCategory}
+      game={game}
       mhwilds={mhwilds}
       filters={filters}
       setFilters={setFilters}