structure optimisation

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

@@ -1,54 +1,21 @@
-import { Icon } from "../../../components/Icon.jsx";
+import { GameFiltersPanel } from "../GameFiltersPanel.jsx";
 import { assetPath } from "./utils.js";
 
 export function MhwildsFilters({ category, filterKey, options, filters, setFilters, t }) {
   const activeFilters = filters[category];
-  const selected = new Set(activeFilters[filterKey] || []);
-  const logicLabel = activeFilters.logic === "or" ? t("or", { capitalize: true }) : t("and", { capitalize: true });
-  const updateCategory = (updater) => setFilters((state) => ({ ...state, [category]: updater(state[category]) }));
 
   return (
-    <div className="filter-panel">
-      <div className="filter-panel-head">
-        <div>
-          <p className="eyebrow">Filtres</p>
-          <h2>{category === "monsters" ? t("weaknesses", { capitalize: true }) : t("locations", { capitalize: true })}</h2>
-        </div>
-        <button
-          className="filter-reset-button"
-          onClick={() => updateCategory(() => ({ name: "", [filterKey]: [], logic: "and" }))}
-          aria-label={t("reset", { capitalize: true })}
-          title={t("reset", { capitalize: true })}
-        >
-          <Icon name="rubber" />
-        </button>
-      </div>
-      <label className="field compact">
-        <span>{t("name", { capitalize: true })}</span>
-        <input value={activeFilters.name} placeholder="Rechercher..." onChange={(event) => updateCategory((state) => ({ ...state, name: event.target.value }))} />
-      </label>
-      <div className="filter-logic">
-        <span>Correspondance</span>
-        <button onClick={() => updateCategory((state) => ({ ...state, logic: state.logic === "and" ? "or" : "and" }))}>{logicLabel}</button>
-      </div>
-      <div className="filter-options legacy-scrollbar">
-        {options.map((option) => (
-          <label className={`filter-chip ${selected.has(option) ? "active" : ""}`} key={option}>
-            <input
-              type="checkbox"
-              checked={selected.has(option)}
-              onChange={(event) => updateCategory((state) => {
-                const values = new Set(state[filterKey]);
-                if (event.target.checked) values.add(option);
-                else values.delete(option);
-                return { ...state, [filterKey]: [...values] };
-              })}
-            />
-            <img src={assetPath(option)} alt="" />
-            <span>{t(option, { capitalize: true })}</span>
-          </label>
-        ))}
-      </div>
-    </div>
+    <GameFiltersPanel
+      title={category === "monsters" ? t("weaknesses", { capitalize: true }) : t("locations", { capitalize: true })}
+      nameLabel={t("name", { capitalize: true })}
+      resetLabel={t("reset", { capitalize: true })}
+      logicLabels={{ and: t("and", { capitalize: true }), or: t("or", { capitalize: true }) }}
+      filters={activeFilters}
+      selectedKey={filterKey}
+      options={options}
+      getOptionLabel={(option) => t(option, { capitalize: true })}
+      renderOptionMedia={(option) => <img src={assetPath(option)} alt="" />}
+      onChange={(nextFilters) => setFilters((state) => ({ ...state, [category]: nextFilters }))}
+    />
   );
 }

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

@@ -16,10 +16,10 @@ export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
 
   return (
     <>
-      <section className="page-heading mhwilds-heading">
+      <section className="page-heading game-heading">
         <div>
           <p className="eyebrow">Monster Hunter Wilds</p>
-          <div className="mhwilds-title-row">
+          <div className="game-title-row">
             <h1>{label}</h1>
             <span className="results-count">{visible.length} / {items.length}</span>
           </div>
@@ -30,12 +30,12 @@ export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
           <a className={`button ${!isMonsters ? "primary" : ""}`} href="#/games/mhwilds/endemic">Faune</a>
         </div>
       </section>
-      <section className="mhwilds-layout" data-mhwilds-category={category}>
-        <aside className="mhwilds-filters">
+      <section className="game-layout" data-mhwilds-category={category}>
+        <aside className="game-filters">
           <MhwildsFilters category={category} filterKey={filterKey} options={options} filters={filters} setFilters={setFilters} t={t} />
         </aside>
-        <section className="mhwilds-results" aria-live="polite">
-          <div className={`mhwilds-grid ${isMonsters ? "monster-grid" : "endemic-grid"}`}>
+        <section className="game-results" aria-live="polite">
+          <div className={`game-grid ${isMonsters ? "monster-grid" : "endemic-grid"}`}>
             {visible.length ? visible.map((item) => (
               isMonsters
                 ? <MonsterCard key={item.name} monster={item} t={t} />

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

@@ -12,13 +12,13 @@ export function MhwildsOverview({ game }) {
           <p>Consultez rapidement les monstres, faiblesses, afflictions, hitzones et emplacements de faune endémique.</p>
         </div>
       </section>
-      <section className="mhwilds-home-grid">
-        <a className="feature mhwilds-home-card" href="#/games/mhwilds/monsters">
+      <section className="game-home-grid">
+        <a className="feature game-home-card" href="#/games/mhwilds/monsters">
           <img src={assetPath("arkveld")} alt="" />
           <strong>Monstres</strong>
           <span>Recherche, filtres par faiblesse et tableau de dégâts par partie.</span>
         </a>
-        <a className="feature mhwilds-home-card" href="#/games/mhwilds/endemic">
+        <a className="feature game-home-card" href="#/games/mhwilds/endemic">
           <img src={assetPath("vigorwasp")} alt="" />
           <strong>Faune endémique</strong>
           <span>Faune endémique et aquatique filtrable par localisation.</span>