list optimization

website/src/features/games/GameListsPage.jsx

@@ -9,6 +9,14 @@ function getChecklistSections(list) {
   }));
 }
 
+function SymbolText({ text }) {
+  return String(text || "").split(/([♂♀])/g).map((part, index) => (
+    part === "♂" || part === "♀"
+      ? <span className="game-list-symbol" key={index}>{part}</span>
+      : part
+  ));
+}
+
 export function GameListsPage({ game, lists, selectedListId, onSelectList, linkedToolboxId, onCreateChecklist }) {
   const selectedList = lists.find((list) => list.id === selectedListId) || lists[0] || null;
   const selectedSections = getChecklistSections(selectedList);
@@ -30,7 +38,7 @@ export function GameListsPage({ game, lists, selectedListId, onSelectList, linke
           <section className="game-list-selector" aria-label="Listes disponibles">
             {lists.map((list) => (
               <article className={`game-list-selector-item ${selectedList?.id === list.id ? "active" : ""}`} key={list.id}>
-                <button type="button" onClick={() => onSelectList(list.id)}>
+                <button className="game-list-select-button" type="button" onClick={() => onSelectList(list.id)}>
                   <strong>{list.title}</strong>
                   <small>{list.itemCount} éléments</small>
                 </button>
@@ -62,7 +70,7 @@ export function GameListsPage({ game, lists, selectedListId, onSelectList, linke
               {selectedList.categories.map((category) => (
                 <article className="game-list-category" key={category.id}>
                   <header>
-                    <h3>{category.title}</h3>
+                    <h3><SymbolText text={category.title} /></h3>
                     <div className="game-list-actions">
                       <span className="results-count">{category.items.length}</span>
                       <CopyChecklistItemsButton sections={[getChecklistSections({ categories: [category] })[0]]} title={`Copier ${category.title.toLowerCase()} pour checklist`} />
@@ -72,7 +80,7 @@ export function GameListsPage({ game, lists, selectedListId, onSelectList, linke
                     {category.items.map((item) => (
                       <li key={`${selectedList.id}-${category.id}-${item.name}-${item.description}`}>
                         <div className="game-list-item-title">
-                          <strong>{item.name}</strong>
+                          <strong><SymbolText text={item.name} /></strong>
                           {item.hasQuantity && item.quantity !== 1 ? <em>x{item.quantity}</em> : null}
                         </div>
                         {item.description ? <span>{item.description}</span> : null}