structure optimisation

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

@@ -2,7 +2,7 @@ import { getCategoryIconStyle, getCategoryLabel } from "./utils.js";
 
 export function Diablo4AffixCard({ affix, categoryMap }) {
   return (
-    <article className="mhwilds-card diablo4-affix-card">
+    <article className="compact-data-card diablo4-affix-card">
       <div className="diablo4-affix-card-body">
         <h2>{affix.label}</h2>
         <div className="diablo4-category-list" aria-label="Catégories">

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

@@ -1,58 +1,18 @@
-import { Icon } from "../../../components/Icon.jsx";
+import { GameFiltersPanel } from "../GameFiltersPanel.jsx";
 import { getCategoryIconStyle, getCategoryId, getCategoryLabel } from "./utils.js";
 
 export function Diablo4Filters({ options, filters, setFilters }) {
-  const selected = new Set(filters.categories || []);
-  const logicLabel = filters.logic === "or" ? "Ou" : "Et";
-
   return (
-    <div className="filter-panel">
-      <div className="filter-panel-head">
-        <div>
-          <p className="eyebrow">Filtres</p>
-          <h2>Catégories</h2>
-        </div>
-        <button
-          className="filter-reset-button"
-          onClick={() => setFilters((state) => ({ ...state, diablo4: { name: "", categories: [], logic: "and" } }))}
-          aria-label="Réinitialiser"
-          title="Réinitialiser"
-        >
-          <Icon name="rubber" />
-        </button>
-      </div>
-      <label className="field compact">
-        <span>Nom</span>
-        <input
-          value={filters.name}
-          placeholder="Rechercher..."
-          onChange={(event) => setFilters((state) => ({ ...state, diablo4: { ...state.diablo4, name: event.target.value } }))}
-        />
-      </label>
-      <div className="filter-logic">
-        <span>Correspondance</span>
-        <button onClick={() => setFilters((state) => ({ ...state, diablo4: { ...state.diablo4, logic: state.diablo4.logic === "and" ? "or" : "and" } }))}>
-          {logicLabel}
-        </button>
-      </div>
-      <div className="filter-options legacy-scrollbar">
-        {options.map((option) => (
-          <label className={`filter-chip diablo4-filter-chip tone-${option.tone || "default"} ${selected.has(getCategoryId(option)) ? "active" : ""}`} key={getCategoryId(option)}>
-            <input
-              type="checkbox"
-              checked={selected.has(getCategoryId(option))}
-              onChange={(event) => setFilters((state) => {
-                const values = new Set(state.diablo4.categories || []);
-                if (event.target.checked) values.add(getCategoryId(option));
-                else values.delete(getCategoryId(option));
-                return { ...state, diablo4: { ...state.diablo4, categories: [...values] } };
-              })}
-            />
-            <span className="diablo4-category-icon" aria-hidden="true" style={getCategoryIconStyle(option)} />
-            <span>{getCategoryLabel(option)}</span>
-          </label>
-        ))}
-      </div>
-    </div>
+    <GameFiltersPanel
+      title="Catégories"
+      filters={filters}
+      selectedKey="categories"
+      options={options}
+      getOptionId={getCategoryId}
+      getOptionLabel={getCategoryLabel}
+      getOptionClassName={(option) => `diablo4-filter-chip tone-${option.tone || "default"}`}
+      renderOptionMedia={(option) => <span className="diablo4-category-icon" aria-hidden="true" style={getCategoryIconStyle(option)} />}
+      onChange={(nextFilters) => setFilters((state) => ({ ...state, diablo4: nextFilters }))}
+    />
   );
 }

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

@@ -13,22 +13,22 @@ export function Diablo4Listing({ diablo4, filters, setFilters }) {
 
   return (
     <>
-      <section className="page-heading mhwilds-heading">
+      <section className="page-heading game-heading">
         <div>
           <p className="eyebrow">Diablo IV</p>
-          <div className="mhwilds-title-row">
+          <div className="game-title-row">
             <h1>Affixes</h1>
             <span className="results-count">{visible.length} / {diablo4.affixes.length}</span>
           </div>
           <p>Filtrez les affixes par nom et catégories pour retrouver rapidement les statistiques utiles à votre build.</p>
         </div>
       </section>
-      <section className="mhwilds-layout diablo4-layout" data-game-category="diablo4-affixes">
-        <aside className="mhwilds-filters">
+      <section className="game-layout diablo4-layout" data-game-category="diablo4-affixes">
+        <aside className="game-filters">
           <Diablo4Filters options={options} filters={activeFilters} setFilters={setFilters} />
         </aside>
-        <section className="mhwilds-results" aria-live="polite">
-          <div className="mhwilds-grid diablo4-affix-grid">
+        <section className="game-results" aria-live="polite">
+          <div className="game-grid diablo4-affix-grid">
             {visible.length ? visible.map((affix) => (
               <Diablo4AffixCard key={affix.id} affix={affix} categoryMap={diablo4.categoryMap} />
             )) : (

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

@@ -10,8 +10,8 @@ export function Diablo4Overview({ game }) {
           <p>Consultez rapidement les affixes et leurs catégories pour préparer vos builds sans quitter votre session.</p>
         </div>
       </section>
-      <section className="mhwilds-home-grid diablo4-home-grid">
-        <a className="feature mhwilds-home-card diablo4-home-card" href="#/games/diablo4/affixes">
+      <section className="game-home-grid diablo4-home-grid">
+        <a className="feature game-home-card diablo4-home-card" href="#/games/diablo4/affixes">
           <span className="diablo4-home-mark" aria-hidden="true" />
           <strong>Affixes</strong>
           <span>Recherche et filtres par catégorie pour retrouver les statistiques utiles.</span>