feat: add dofus Icones on main page

.claude/agents/react-ui-designer.md

@@ -65,6 +65,19 @@ You are fluent in:
 4. **Régression** — Regression analysis (if applicable)
 5. **Code corrigé** — Provide corrected code snippets for all 🔴 and 🟠 issues
 
+## Unit Testing — Mandatory Protocol
+
+After **every** feature implementation or code update, you must:
+
+1. **Run the full test suite** to detect regressions:
+   ```bash
+   cd /home/anthony/Documents/Projects/TougliGui && npm run test
+   ```
+2. **Write or update unit tests** for anything you added or changed. Tests live in `src/__tests__/`. Use Vitest + Testing Library (already configured in the project).
+3. **Report the test results** at the end of your response: number of tests passing, any failures, and which tests you added or modified.
+
+Never consider a task complete without running the tests. If a test fails, fix the issue before reporting done.
+
 ## Behavioral Guidelines
 - **Default language**: Respond in the same language as the user (French or English).
 - **Be decisive**: When multiple valid approaches exist, recommend one and explain briefly why.

src/components/HomeView.tsx

@@ -1,5 +1,40 @@
 import { useStore } from "../store";
 
+// Mapping statique gid (Google Sheets ID) -> URL icône via api.dofusdb.fr
+// Pattern URL : https://api.dofusdb.fr/img/items/{iconId}.png
+const DOFUS_ICON_BASE = "https://api.dofusdb.fr/img/items";
+const GID_TO_ICON: Record<string, string> = {
+  "474870200":  `${DOFUS_ICON_BASE}/23009.png`, // Dofawa
+  "743703882":  `${DOFUS_ICON_BASE}/23025.png`, // Dofus Argenté
+  "103963898":  `${DOFUS_ICON_BASE}/23006.png`, // Dofus Cawotte
+  "1075294690": `${DOFUS_ICON_BASE}/23022.png`, // Dokoko
+  "1567240526": `${DOFUS_ICON_BASE}/23020.png`, // Dofus des Veilleurs
+  "1011508069": `${DOFUS_ICON_BASE}/23002.png`, // Dofus Emeraude
+  "2045137654": `${DOFUS_ICON_BASE}/23001.png`, // Dofus Pourpre
+  "1967508888": `${DOFUS_ICON_BASE}/23032.png`, // Domakuro
+  "1382359191": `${DOFUS_ICON_BASE}/23033.png`, // Dorigami
+  "1413546794": `${DOFUS_ICON_BASE}/23003.png`, // Dofus Turquoise
+  "1641656252": `${DOFUS_ICON_BASE}/23005.png`, // Dofus des Glaces
+  "953522228":  `${DOFUS_ICON_BASE}/23023.png`, // Dofus Abyssal
+  "818597042":  `${DOFUS_ICON_BASE}/23039.png`, // Dofoozbz
+  "1021129660": `${DOFUS_ICON_BASE}/23016.png`, // Dofus Nébuleux
+  "595670723":  `${DOFUS_ICON_BASE}/23004.png`, // Dofus Vulbis
+  "544349966":  `${DOFUS_ICON_BASE}/23008.png`, // Dofus Tacheté
+  "1150302145": `${DOFUS_ICON_BASE}/23024.png`, // Dofus Forgelave
+  "882278553":  `${DOFUS_ICON_BASE}/23007.png`, // Dofus Ebène
+  "200570588":  `${DOFUS_ICON_BASE}/23011.png`, // Dofus Ivoire
+  "1209269839": `${DOFUS_ICON_BASE}/23012.png`, // Dofus Ocre
+  "462784268":  `${DOFUS_ICON_BASE}/23027.png`, // Dofus Argenté Scintillant
+  "1543573905": `${DOFUS_ICON_BASE}/23034.png`, // Dofus Cauchemar
+  "1007491889": `${DOFUS_ICON_BASE}/23035.png`, // Dom de Pin
+  "1047555165": `${DOFUS_ICON_BASE}/23036.png`, // Dofus Sylvestre
+  "2105601828": `${DOFUS_ICON_BASE}/23029.png`, // Dofus Cacao
+  "474510463":  `${DOFUS_ICON_BASE}/23017.png`, // Dokille
+  "62476099":   `${DOFUS_ICON_BASE}/23018.png`, // Dolmanax
+  "1873654554": `${DOFUS_ICON_BASE}/23019.png`, // Dotruche
+  "360188709":  `${DOFUS_ICON_BASE}/23010.png`, // Dofus Kaliptus
+};
+
 export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
   const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();
 
@@ -118,13 +153,70 @@ function Section({ title, guides, onOpen }: {
       }}>
         {title}
       </h2>
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(175px, 1fr))", gap: "8px" }}>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: "8px", paddingTop: "20px" }}>
         {guides.map(g => <GuideCard key={g.gid} guide={g} onOpen={onOpen} />)}
       </div>
     </div>
   );
 }
 
+function DofusIcon({ gid, pct, size = 44 }: { gid: string; pct: number; size?: number }) {
+  const iconUrl = GID_TO_ICON[gid] ?? null;
+  if (!iconUrl) return null;
+
+  // L'icône colorée est clippée du bas vers le haut selon pct.
+  // clipPath: inset(top right bottom left) — on réduit depuis le haut.
+  const filledClip = `inset(${100 - pct}% 0 0 0)`;
+
+  return (
+    <div style={{
+      position: "absolute",
+      top: 0,
+      left: 8,
+      width: size,
+      height: size,
+      filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.6))",
+      zIndex: 2,
+      flexShrink: 0,
+    }}>
+      {/* Calque grisé (base) */}
+      <img
+        src={iconUrl}
+        alt=""
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          filter: "grayscale(1) brightness(0.45)",
+          userSelect: "none",
+          pointerEvents: "none",
+        }}
+      />
+      {/* Calque coloré, progressivement révélé du bas vers le haut */}
+      {pct > 0 && (
+        <img
+          src={iconUrl}
+          alt=""
+          aria-hidden="true"
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            clipPath: filledClip,
+            userSelect: "none",
+            pointerEvents: "none",
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
 function GuideCard({ guide, onOpen }: {
   guide: import("../types").GuideListItem;
   onOpen: (gid: string) => void;
@@ -132,44 +224,62 @@ function GuideCard({ guide, onOpen }: {
   const pct = guide.total_quests > 0 ? Math.round((guide.completed_quests / guide.total_quests) * 100) : 0;
   const isDone = pct === 100 && guide.total_quests > 0;
   const inProgress = guide.completed_quests > 0 && !isDone;
+  const hasIcon = GID_TO_ICON[guide.gid] != null;
 
   const accentColor = isDone ? "#4ade80" : inProgress ? "#f0c040" : "#4a9eff";
+  const borderColor = isDone ? "rgba(74,222,128,0.25)" : "#2d3748";
 
   return (
+    // Wrapper pour permettre à l'icône de déborder vers le haut
+    <div style={{ position: "relative", paddingTop: hasIcon ? "18px" : "0" }}>
+      <DofusIcon gid={guide.gid} pct={pct} size={44} />
+
       <button
         onClick={() => onOpen(guide.gid)}
         style={{
-        background: "#161b22", border: `1px solid ${isDone ? "rgba(74,222,128,0.25)" : "#2d3748"}`,
+          width: "100%",
-        borderRadius: "8px", padding: "12px 14px", cursor: "pointer",
+          background: "#161b22",
-        textAlign: "left", transition: "all 0.15s", position: "relative", overflow: "hidden",
+          border: `1px solid ${borderColor}`,
+          borderRadius: "8px",
+          padding: "10px 12px",
+          cursor: "pointer",
+          textAlign: "left",
+          transition: "border-color 0.15s, background 0.15s",
+          position: "relative",
+          overflow: "hidden",
         }}
         onMouseEnter={e => {
           (e.currentTarget as HTMLElement).style.borderColor = accentColor;
           (e.currentTarget as HTMLElement).style.background = "#1a2233";
         }}
         onMouseLeave={e => {
-        (e.currentTarget as HTMLElement).style.borderColor = isDone ? "rgba(74,222,128,0.25)" : "#2d3748";
+          (e.currentTarget as HTMLElement).style.borderColor = borderColor;
           (e.currentTarget as HTMLElement).style.background = "#161b22";
         }}
       >
-      {/* Indicateur latéral */}
+        {/* Nom + checkmark */}
         <div style={{
-        position: "absolute", left: 0, top: 0, bottom: 0, width: "3px",
+          display: "flex",
-        background: accentColor, opacity: isDone ? 1 : inProgress ? 0.8 : 0.3,
+          justifyContent: "space-between",
-        borderRadius: "8px 0 0 8px",
+          alignItems: "center",
-      }} />
+          marginBottom: "8px",
-
+          paddingLeft: hasIcon ? "46px" : "0",
-      <div style={{ paddingLeft: "4px" }}>
+          minWidth: 0,
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
+        }}>
           <span style={{
             fontSize: "12px", fontWeight: 600, lineHeight: 1.3,
             color: isDone ? "#4ade80" : "#e2e8f0",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            minWidth: 0,
           }}>
             {guide.name}
           </span>
           {isDone && <span style={{ fontSize: "12px", flexShrink: 0 }}>✓</span>}
         </div>
 
+        {/* Barre de progression */}
         <div style={{ height: "3px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginBottom: "6px" }}>
           <div style={{
             height: "100%", width: `${pct}%`,
@@ -178,6 +288,7 @@ function GuideCard({ guide, onOpen }: {
           }} />
         </div>
 
+        {/* Compteur */}
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ fontSize: "10px", color: "#4a5568" }}>
             {guide.completed_quests}/{guide.total_quests} quêtes
@@ -186,7 +297,7 @@ function GuideCard({ guide, onOpen }: {
             {pct}%
           </span>
         </div>
-      </div>
       </button>
+    </div>
   );
 }

src/types.ts

@@ -10,6 +10,7 @@ export interface GuideListItem {
   last_synced_at: string | null;
   total_quests: number;
   completed_quests: number;
+  image_url?: string;
 }
 
 export interface CombatType {