fix: remove selction on resizing or moving the window

feat: dofus icone added to guide view and font changed
feat: add dofus Icones on main page
2026-04-26 15:10:15 +02:00 · 2026-04-26 12:51:16 +02:00 · 2026-04-26 10:58:52 +02:00 · 2026-04-25 23:02:38 +02:00 · 2026-04-25 18:02:08 +02:00
10 changed files with 226 additions and 47 deletions
--- a/.claude/agents/react-ui-designer.md
+++ b/.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.
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -81,4 +81,19 @@ jobs:
      - name: Télécharger les artefacts Windows
        uses: actions/download-artifact@v4
        with:
-          name: w
+          name: windows-build
+          path: artifacts/windows
+
+      - name: Télécharger les artefacts Linux
+        uses: actions/download-artifact@v4
+        with:
+          name: linux-build
+          path: artifacts/linux
+
+      - name: Créer la release GitHub
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            artifacts/windows/**
+            artifacts/linux/**
+          generate_release_notes: true
--- a/src/mocks/@tauri-apps/api/core.ts
+++ b/src/mocks/@tauri-apps/api/core.ts
@ -1 +1,2 @@
+import { vi } from 'vitest';
 export const invoke = vi.fn().mockResolvedValue(null);
--- a/src/components/DofusIconWidget.tsx
+++ b/src/components/DofusIconWidget.tsx
@ -0,0 +1,111 @@
+import { useEffect } from "react";
+
+const DOFUS_SHIMMER_STYLE_ID = "dofus-icon-shimmer";
+
+function injectShimmerStyle() {
+  if (document.getElementById(DOFUS_SHIMMER_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = DOFUS_SHIMMER_STYLE_ID;
+  style.textContent = `
+    @keyframes dofus-shimmer {
+      from { filter: brightness(1); }
+      to   { filter: brightness(1.35); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// 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";
+export 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 function DofusIcon({ gid, pct, size = 44, left = 0 }: { gid: string; pct: number; size?: number; left?: number }) {
+  useEffect(injectShimmerStyle, []);
+
+  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,
+      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",
+            animation: "dofus-shimmer 2s ease-in-out infinite alternate",
+          }}
+        />
+      )}
+    </div>
+  );
+}
--- a/src/components/GuideView.tsx
+++ b/src/components/GuideView.tsx
@ -3,6 +3,7 @@ import { useStore } from "../store";
 import { SectionItem, QuestItem, CombatType } from "../types";
 import QuestDetailPanel from "./QuestDetailPanel";
 import { TextWithCoords } from "./TextWithCoords";
+import { DofusIcon, GID_TO_ICON } from "./DofusIconWidget";

 function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
@ -59,7 +60,7 @@ export default function GuideView() {
    );
  }

-  const { name, effect, recommended_level, resources, sections, combat_legend } = activeGuideData;
+  const { name, effect, recommended_level, resources, sections, combat_legend, gid } = activeGuideData;

  const allQuests = collectAllQuests(sections);
  const completedCount = allQuests.filter(q => completedQuests.has(q)).length;
@ -73,28 +74,43 @@ export default function GuideView() {
        {/* Header */}
        <div style={{ marginBottom: "20px" }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }}>
-            <div style={{ minWidth: 0 }}>
-              <h1 style={{ fontSize: "18px", fontWeight: 700, color: "#f0c040", marginBottom: "2px", wordBreak: "break-word" }}>{name}</h1>
-              {recommended_level && (
-                <div style={{ fontSize: "12px", color: "#94a3b8" }}>
-                  Niv. recommandé : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{recommended_level}</span>
+            {/* Zone gauche : icône + nom + niveau recommandé */}
+            <div style={{ display: "flex", alignItems: "flex-end", gap: "8px", minWidth: 0 }}>
+              {GID_TO_ICON[gid] && (
+                <div style={{ position: "relative", flexShrink: 0, width: 52, height: 52 }}>
+                  <DofusIcon gid={gid} pct={pct} size={52} />
                </div>
              )}
-            </div>
-            <div style={{ textAlign: "right", flexShrink: 0 }}>
-              <div style={{ fontSize: "13px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
-                {completedCount} / {allQuests.length}
+              <div style={{ minWidth: 0 }}>
+                <h1 style={{
+                  fontSize: "18px", fontWeight: 700, color: "#f0c040",
+                  marginBottom: "2px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+                }}>
+                  {name}
+                </h1>
+                {recommended_level && (
+                  <div style={{ fontSize: "12px", color: "#94a3b8" }}>
+                    Niv. recommandé : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{recommended_level}</span>
+                  </div>
+                )}
              </div>
-              <div style={{ fontSize: "11px", color: "#94a3b8" }}>{pct}%</div>
            </div>
          </div>

-          <div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginTop: "10px" }}>
-            <div style={{
-              height: "100%", width: `${pct}%`,
-              background: isDone ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
-              borderRadius: "2px", transition: "width 0.3s ease",
-            }} />
+          <div style={{ marginTop: "10px" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "4px" }}>
+              <span style={{ fontSize: "12px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
+                {completedCount} / {allQuests.length} quêtes
+              </span>
+              <span style={{ fontSize: "11px", color: "#94a3b8" }}>{pct}%</span>
+            </div>
+            <div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
+              <div style={{
+                height: "100%", width: `${pct}%`,
+                background: isDone ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
+                borderRadius: "2px", transition: "width 0.3s ease",
+              }} />
+            </div>
          </div>

          {effect && (
--- a/src/components/HomeView.tsx
+++ b/src/components/HomeView.tsx
@ -1,4 +1,5 @@
 import { useStore } from "../store";
+import { DofusIcon, GID_TO_ICON } from "./DofusIconWidget";

 export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
  const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();
@ -14,7 +15,7 @@ export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; o
    <div className="with-scrollbar" style={{ flex: 1, overflowY: "auto", padding: "20px 24px", minHeight: 0 }}>
      {/* Header */}
      <div style={{ marginBottom: "20px" }}>
-        <h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "2px" }}>
+        <h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "2px", fontFamily: "'Cinzel Decorative', serif" }}>
          Tougli — Guide Dofus
        </h1>
        {activeProfile && (
@ -118,7 +119,7 @@ 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>
@ -132,44 +133,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 (
-    <button
-      onClick={() => onOpen(guide.gid)}
-      style={{
-        background: "#161b22", border: `1px solid ${isDone ? "rgba(74,222,128,0.25)" : "#2d3748"}`,
-        borderRadius: "8px", padding: "12px 14px", cursor: "pointer",
-        textAlign: "left", transition: "all 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.background = "#161b22";
-      }}
-    >
-      {/* Indicateur latéral */}
-      <div style={{
-        position: "absolute", left: 0, top: 0, bottom: 0, width: "3px",
-        background: accentColor, opacity: isDone ? 1 : inProgress ? 0.8 : 0.3,
-        borderRadius: "8px 0 0 8px",
-      }} />
+    // 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} left={8} />

-      <div style={{ paddingLeft: "4px" }}>
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
+      <button
+        onClick={() => onOpen(guide.gid)}
+        style={{
+          width: "100%",
+          background: "#161b22",
+          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 = borderColor;
+          (e.currentTarget as HTMLElement).style.background = "#161b22";
+        }}
+      >
+        {/* Nom + checkmark */}
+        <div style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "8px",
+          paddingLeft: hasIcon ? "46px" : "0",
+          minWidth: 0,
+        }}>
          <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 +197,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 +206,7 @@ function GuideCard({ guide, onOpen }: {
            {pct}%
          </span>
        </div>
-      </div>
-    </button>
+      </button>
+    </div>
  );
 }
--- a/src/components/ResizeHandles.tsx
+++ b/src/components/ResizeHandles.tsx
@ -31,7 +31,7 @@ export default function ResizeHandles() {
      {handles.map(({ edge, style }) => (
        <div
          key={edge}
-          onMouseDown={e => { if (e.button === 0) win.startResizeDragging(edge); }}
+          onMouseDown={e => { if (e.button === 0) { e.preventDefault(); win.startResizeDragging(edge); } }}
          style={{ position: "fixed", zIndex: 9999, ...style }}
        />
      ))}
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@ -23,6 +23,7 @@ export default function TitleBar({ onOpenSettings }: Props) {

  function handleDragMouseDown(e: React.MouseEvent) {
    if (e.button === 0) {
+      e.preventDefault();
      getCurrentWindow().startDragging();
    }
  }
--- a/src/index.css
+++ b/src/index.css
@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import "tailwindcss";

@theme {
--- a/src/types.ts
+++ b/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 {
Author	SHA1	Message	Date
Blomios	4702d9387e	fix: remove selction on resizing or moving the window Some checks failed Release / create-release (push) Has been cancelled Details Release / build-linux (push) Has been cancelled Details Release / build-windows (push) Has been cancelled Details Release / build-macos (push) Has been cancelled Details	2026-04-26 15:10:15 +02:00
Blomios	5a747222fc	feat: dofus icone added to guide view and font changed Some checks failed Release / create-release (push) Has been cancelled Details Release / build-linux (push) Has been cancelled Details Release / build-windows (push) Has been cancelled Details Release / build-macos (push) Has been cancelled Details	2026-04-26 12:51:16 +02:00
Blomios	4f960ff41f	feat: add dofus Icones on main page	2026-04-26 10:58:52 +02:00
Blomios	b0e6d09301	fix: correct artifact names in release job Some checks failed Release / create-release (push) Has been cancelled Details Release / build-linux (push) Has been cancelled Details Release / build-windows (push) Has been cancelled Details Release / build-macos (push) Has been cancelled Details	2026-04-25 23:02:38 +02:00
Blomios	e3095ecf10	fix: add missing vitest import Some checks failed Release / create-release (push) Has been cancelled Details Release / build-linux (push) Has been cancelled Details Release / build-windows (push) Has been cancelled Details Release / build-macos (push) Has been cancelled Details	2026-04-25 18:02:08 +02:00