design: the window can now resize to l=380px

src-tauri/tauri.conf.json

@@ -15,8 +15,8 @@
         "title": "TougliGui",
         "width": 1100,
         "height": 720,
-        "minWidth": 800,
-        "minHeight": 500,
+        "minWidth": 380,
+        "minHeight": 400,
         "decorations": false,
         "transparent": false,
         "backgroundColor": "#0d1117",

src/components/GuideView.tsx

@@ -1,63 +1,84 @@
+import { useState } from "react";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import { useStore } from "../store";
-import { SectionItem, QuestItem } from "../types";
+import { SectionItem, QuestItem, CombatType } from "../types";
+
+function combatIcon(name: string): string {
+  const l = name.toLowerCase();
+  if (l.includes("solo")) return "⚔️";
+  if (l.includes("group") || l.includes("groupe")) return "👥";
+  if (l.includes("boss")) return "💀";
+  if (l.includes("arène") || l.includes("arene")) return "🏟️";
+  return "⚔️";
+}
 
 export default function GuideView() {
   const { activeGuideData, completedQuests, toggleQuest } = useStore();
+  const [resourcesCollapsed, setResourcesCollapsed] = useState(false);
 
   if (!activeGuideData) return null;
 
-  const { name, effect, recommended_level, resources, sections } = activeGuideData;
+  const { name, effect, recommended_level, resources, sections, combat_legend } = activeGuideData;
 
   const allQuests = collectAllQuests(sections);
   const completedCount = allQuests.filter(q => completedQuests.has(q)).length;
   const pct = allQuests.length > 0 ? Math.round((completedCount / allQuests.length) * 100) : 0;
+  const isDone = pct === 100;
 
   return (
     <div style={{ flex: 1, display: "flex", overflow: "hidden", minHeight: 0 }}>
-      {/* Main quest list */}
       <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
-        {/* Guide header */}
+
+        {/* Header */}
         <div style={{ marginBottom: "20px" }}>
-          <h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "4px" }}>
-            {name}
-          </h1>
-          <div style={{ display: "flex", gap: "16px", alignItems: "center", marginBottom: "10px" }}>
+          <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 && (
-              <span style={{
-                fontSize: "11px", background: "rgba(74,158,255,0.15)", color: "#4a9eff",
-                border: "1px solid rgba(74,158,255,0.3)", borderRadius: "4px", padding: "2px 8px",
-              }}>
-                Niveau recommandé : {recommended_level}
-              </span>
-            )}
-            <span style={{ fontSize: "11px", color: "#94a3b8" }}>
-              {completedCount}/{allQuests.length} quêtes · {pct}%
-            </span>
+                <div style={{ fontSize: "12px", color: "#94a3b8" }}>
+                  Niv. recommandé : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{recommended_level}</span>
                 </div>
-          {/* Progress bar */}
-          <div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
+              )}
+            </div>
+            <div style={{ textAlign: "right", flexShrink: 0 }}>
+              <div style={{ fontSize: "13px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
+                {completedCount} / {allQuests.length}
+              </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: pct === 100 ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
+              background: isDone ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
               borderRadius: "2px", transition: "width 0.3s ease",
             }} />
           </div>
+
           {effect && (
             <div style={{
-              marginTop: "10px", background: "rgba(240,192,64,0.05)",
-              border: "1px solid rgba(240,192,64,0.2)", borderRadius: "6px",
-              padding: "8px 12px", fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
+              marginTop: "12px", padding: "10px 14px",
+              background: "rgba(240,192,64,0.04)", borderRadius: "6px",
+              borderLeft: "3px solid rgba(240,192,64,0.4)",
+              fontSize: "12px", color: "#94a3b8", lineHeight: 1.6,
             }}>
-              <span style={{ color: "#f0c040", fontWeight: 600 }}>Effet : </span>
+              <span style={{ color: "#f0c040", fontWeight: 600, fontSize: "11px", display: "block", marginBottom: "3px", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+                ✨ Effet
+              </span>
               {effect}
             </div>
           )}
         </div>
 
+        {/* Légende */}
+        {combat_legend.length > 0 && (
+          <Legend legend={combat_legend} />
+        )}
+
         {/* Sections */}
         {sections.map((section, si) => (
-          <div key={si} style={{ marginBottom: "20px" }}>
+          <div key={si} style={{ marginBottom: "24px" }}>
             <h2 style={{
               fontSize: "11px", fontWeight: 600, color: "#4a5568",
               textTransform: "uppercase", letterSpacing: "0.1em",
@@ -75,20 +96,52 @@ export default function GuideView() {
       {/* Resources panel */}
       {resources.length > 0 && (
         <div style={{
-          width: "200px", flexShrink: 0, background: "#161b22",
-          borderLeft: "1px solid #2d3748", overflowY: "auto", padding: "16px 14px",
+          width: resourcesCollapsed ? "32px" : "190px",
+          flexShrink: 0, background: "#161b22",
+          borderLeft: "1px solid #2d3748",
+          display: "flex", flexDirection: "column",
+          overflow: "hidden",
+          transition: "width 0.2s ease",
         }}>
-          <h3 style={{
-            fontSize: "11px", fontWeight: 600, color: "#4a5568",
-            textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px",
+          {/* Toggle */}
+          <button
+            onClick={() => setResourcesCollapsed(c => !c)}
+            title={resourcesCollapsed ? "Afficher les ressources" : "Masquer les ressources"}
+            style={{
+              width: "100%", height: "36px", flexShrink: 0,
+              background: "transparent", border: "none",
+              borderBottom: "1px solid #2d3748",
+              color: "#4a5568", cursor: "pointer",
+              display: "flex", alignItems: "center",
+              justifyContent: resourcesCollapsed ? "center" : "flex-start",
+              padding: "0 10px", gap: "6px",
+              transition: "all 0.15s",
+            }}
+            onMouseEnter={e => (e.currentTarget.style.color = "#f0c040")}
+            onMouseLeave={e => (e.currentTarget.style.color = "#4a5568")}
+          >
+            <span style={{
+              fontSize: "12px",
+              transform: resourcesCollapsed ? "rotate(180deg)" : "rotate(0deg)",
+              transition: "transform 0.2s ease",
+              display: "inline-block",
             }}>
+              ›
+            </span>
+            {!resourcesCollapsed && (
+              <span style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", whiteSpace: "nowrap" }}>
                 Ressources
-          </h3>
+              </span>
+            )}
+          </button>
+
+          {/* List */}
+          {!resourcesCollapsed && (
+            <div style={{ flex: 1, overflowY: "auto", padding: "10px 14px", scrollbarWidth: "none" }}>
               {resources.map((r, i) => (
                 <div key={i} style={{
                   display: "flex", justifyContent: "space-between", alignItems: "center",
-              padding: "4px 0", borderBottom: "1px solid #1f2937",
-              fontSize: "11px",
+                  padding: "5px 0", borderBottom: "1px solid #1f2937", fontSize: "12px",
                 }}>
                   <span style={{ color: "#94a3b8", flex: 1, marginRight: "8px" }}>{r.name}</span>
                   <span style={{ color: "#f0c040", fontWeight: 700, flexShrink: 0 }}>×{r.quantity}</span>
@@ -97,6 +150,32 @@ export default function GuideView() {
             </div>
           )}
         </div>
+      )}
+    </div>
+  );
+}
+
+function Legend({ legend }: { legend: CombatType[] }) {
+  return (
+    <div style={{
+      marginBottom: "20px", padding: "12px 16px",
+      background: "rgba(255,255,255,0.02)", border: "1px solid #2d3748", borderRadius: "8px",
+    }}>
+      <div style={{
+        fontSize: "11px", fontWeight: 600, color: "#4a5568",
+        textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px",
+      }}>
+        Légende
+      </div>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "16px" }}>
+        {legend.map((ct, i) => (
+          <div key={i} style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+            <span style={{ fontSize: "15px" }}>{combatIcon(ct.name)}</span>
+            <span style={{ fontSize: "12px", color: "#94a3b8" }}>{ct.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 }
 
@@ -121,11 +200,16 @@ function SectionItemView({ item, completedQuests, onToggle }: {
     }
     return (
       <div style={{
-        background: "rgba(74,158,255,0.05)", border: "1px solid rgba(74,158,255,0.15)",
-        borderRadius: "6px", padding: "8px 12px", marginBottom: "4px",
-        fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
+        marginBottom: "6px", padding: "9px 14px",
+        background: "rgba(74,158,255,0.04)",
+        borderLeft: "3px solid rgba(74,158,255,0.35)",
+        borderRadius: "4px",
+        fontSize: "12px", color: "#94a3b8", lineHeight: 1.6,
       }}>
-        ℹ️ {item.text}
+        <span style={{ color: "#4a9eff", fontSize: "10px", fontWeight: 600, display: "block", marginBottom: "2px", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+          Rappel
+        </span>
+        {item.text}
       </div>
     );
   }
@@ -137,10 +221,7 @@ function SectionItemView({ item, completedQuests, onToggle }: {
         borderRadius: "6px", padding: "8px 10px", marginBottom: "6px",
       }}>
         {item.note && (
-          <div style={{
-            fontSize: "10px", color: "#4a9eff", marginBottom: "6px",
-            fontStyle: "italic",
-          }}>
+          <div style={{ fontSize: "11px", color: "#4a9eff", marginBottom: "6px", fontStyle: "italic" }}>
             🔗 {item.note}
           </div>
         )}
@@ -169,18 +250,14 @@ function QuestRow({ quest, completed, onToggle, indent }: {
       onClick={() => onToggle(quest.name)}
       style={{
         display: "flex", alignItems: "flex-start", gap: "8px",
-        padding: indent ? "4px 0" : "5px 6px",
+        padding: indent ? "3px 0" : "4px 6px",
         borderRadius: "5px", cursor: "pointer",
-        marginBottom: indent ? "2px" : "3px",
-        opacity: completed ? 0.6 : 1,
+        marginBottom: indent ? "1px" : "2px",
+        opacity: completed ? 0.5 : 1,
         transition: "all 0.12s",
       }}
-      onMouseEnter={e => {
-        (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.04)";
-      }}
-      onMouseLeave={e => {
-        (e.currentTarget as HTMLElement).style.background = "transparent";
-      }}
+      onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.04)"; }}
+      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = "transparent"; }}
     >
       <input
         type="checkbox"
@@ -190,44 +267,29 @@ function QuestRow({ quest, completed, onToggle, indent }: {
         style={{ marginTop: "2px", flexShrink: 0 }}
       />
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: "flex", alignItems: "center", gap: "5px", flexWrap: "wrap" }}>
+        <div style={{ display: "flex", alignItems: "baseline", flexWrap: "wrap", gap: "2px 8px" }}>
           <span style={{
-            fontSize: "12px", color: completed ? "#4a5568" : "#e2e8f0",
-            textDecoration: completed ? "line-through" : "none",
-            lineHeight: 1.4,
-          }}>
+            fontSize: "12px", lineHeight: 1.4,
+            color: completed ? "#4a5568" : quest.url ? "#93c5fd" : "#e2e8f0",
+            textDecoration: completed ? "line-through" : quest.url ? "underline" : "none",
+            textDecorationColor: "rgba(147,197,253,0.4)",
+            cursor: quest.url ? "pointer" : "default",
+            wordBreak: "break-word",
+          }}
+            onClick={e => {
+              if (quest.url) { e.stopPropagation(); openUrl(quest.url); }
+            }}
+          >
             {quest.name}
           </span>
-          {quest.url && (
-            <span
-              title="Voir sur Dofus Pour Les Noobs"
-              onClick={e => { e.stopPropagation(); openUrl(quest.url!); }}
-              style={{
-                fontSize: "10px", color: "#4a9eff", cursor: "pointer",
-                opacity: 0.7, flexShrink: 0, lineHeight: 1,
-              }}
-              onMouseEnter={e => (e.currentTarget as HTMLElement).style.opacity = "1"}
-              onMouseLeave={e => (e.currentTarget as HTMLElement).style.opacity = "0.7"}
-            >
-              🔗
-            </span>
-          )}
-        </div>
-        {quest.combat_indicators.length > 0 && (
-          <div style={{ display: "flex", flexWrap: "wrap", gap: "3px", marginTop: "3px" }}>
           {quest.combat_indicators.map((ci, i) => (
-              <span key={i} style={{
-                fontSize: "9px", padding: "1px 5px",
-                background: "rgba(74,158,255,0.15)", color: "#4a9eff",
-                border: "1px solid rgba(74,158,255,0.25)", borderRadius: "3px",
-              }}>
-                {ci.combat_type} {ci.count}
+            <span key={i} style={{ fontSize: "11px", color: "#94a3b8", whiteSpace: "nowrap", flexShrink: 0 }}>
+              {combatIcon(ci.combat_type)} x{ci.count}
             </span>
           ))}
         </div>
-        )}
         {quest.note && (
-          <div style={{ fontSize: "10px", color: "#94a3b8", marginTop: "2px", fontStyle: "italic" }}>
+          <div style={{ fontSize: "11px", color: "#4a5568", marginTop: "2px", fontStyle: "italic" }}>
             → {quest.note}
           </div>
         )}
@@ -236,13 +298,12 @@ function QuestRow({ quest, completed, onToggle, indent }: {
   );
 }
 
-function collectAllQuests(sections: import("../types").Section[] | undefined): string[] {
-  if (!sections) return [];
+function collectAllQuests(sections: import("../types").Section[]): string[] {
   const names: string[] = [];
   for (const section of sections) {
     for (const item of section.items) {
       if (item.type === "Quest") names.push(item.name);
-      else if (item.type === "Group") item.quests.forEach((q: import("../types").QuestItem) => names.push(q.name));
+      else if (item.type === "Group") item.quests.forEach((q: QuestItem) => names.push(q.name));
     }
   }
   return names;

src/components/HomeView.tsx

@@ -4,19 +4,17 @@ export default function HomeView() {
   const { guides, openGuide, profiles, activeProfileId } = useStore();
 
   const activeProfile = profiles.find(p => p.id === activeProfileId);
-
   const totalQuests = guides.reduce((s, g) => s + g.total_quests, 0);
   const totalCompleted = guides.reduce((s, g) => s + g.completed_quests, 0);
   const globalPct = totalQuests > 0 ? Math.round((totalCompleted / totalQuests) * 100) : 0;
-
   const completedGuides = guides.filter(g => g.total_quests > 0 && g.completed_quests === g.total_quests);
   const inProgressGuides = guides.filter(g => g.completed_quests > 0 && g.completed_quests < g.total_quests);
 
   return (
     <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px", minHeight: 0 }}>
       {/* Header */}
-      <div style={{ marginBottom: "24px" }}>
-        <h1 style={{ fontSize: "18px", fontWeight: 700, color: "#f0c040", marginBottom: "4px" }}>
+      <div style={{ marginBottom: "20px" }}>
+        <h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "2px" }}>
           Tougli — Guide Dofus
         </h1>
         {activeProfile && (
@@ -32,7 +30,7 @@ export default function HomeView() {
           background: "#161b22", border: "1px solid #2d3748", borderRadius: "10px",
           padding: "16px 20px", marginBottom: "24px",
         }}>
-          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "8px" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" }}>
             <span style={{ fontSize: "13px", color: "#94a3b8" }}>Progression globale</span>
             <span style={{ fontSize: "13px", fontWeight: 700, color: "#f0c040" }}>
               {totalCompleted} / {totalQuests} quêtes ({globalPct}%)
@@ -45,7 +43,7 @@ export default function HomeView() {
               borderRadius: "3px", transition: "width 0.4s ease",
             }} />
           </div>
-          <div style={{ marginTop: "8px", display: "flex", gap: "16px" }}>
+          <div style={{ marginTop: "10px", display: "flex", gap: "20px" }}>
             <Stat label="Complétés" value={completedGuides.length} color="#4ade80" />
             <Stat label="En cours" value={inProgressGuides.length} color="#f0c040" />
             <Stat label="Total" value={guides.length} color="#94a3b8" />
@@ -53,12 +51,12 @@ export default function HomeView() {
         </div>
       )}
 
-      {/* In progress first */}
+      {/* En cours */}
       {inProgressGuides.length > 0 && (
         <Section title="En cours" guides={inProgressGuides} onOpen={openGuide} />
       )}
 
-      {/* All guides grid */}
+      {/* Tous les guides */}
       <Section title="Tous les guides" guides={guides} onOpen={openGuide} />
     </div>
   );
@@ -66,9 +64,9 @@ export default function HomeView() {
 
 function Stat({ label, value, color }: { label: string; value: number; color: string }) {
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+    <div>
       <span style={{ fontSize: "16px", fontWeight: 700, color }}>{value}</span>
-      <span style={{ fontSize: "11px", color: "#4a5568" }}>{label}</span>
+      <span style={{ fontSize: "11px", color: "#4a5568", marginLeft: "4px" }}>{label}</span>
     </div>
   );
 }
@@ -80,13 +78,15 @@ function Section({ title, guides, onOpen }: {
 }) {
   return (
     <div style={{ marginBottom: "24px" }}>
-      <h2 style={{ fontSize: "12px", fontWeight: 600, color: "#4a5568", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px" }}>
+      <h2 style={{
+        fontSize: "11px", fontWeight: 600, color: "#4a5568",
+        textTransform: "uppercase", letterSpacing: "0.1em",
+        marginBottom: "10px", borderBottom: "1px solid #2d3748", paddingBottom: "4px",
+      }}>
         {title}
       </h2>
-      <div style={{
-        display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: "8px",
-      }}>
-        {guides.map(guide => <GuideCard key={guide.gid} guide={guide} onOpen={onOpen} />)}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(175px, 1fr))", gap: "8px" }}>
+        {guides.map(g => <GuideCard key={g.gid} guide={g} onOpen={onOpen} />)}
       </div>
     </div>
   );
@@ -96,53 +96,64 @@ function GuideCard({ guide, onOpen }: {
   guide: import("../types").GuideListItem;
   onOpen: (gid: string) => void;
 }) {
-  const pct = guide.total_quests > 0
-    ? Math.round((guide.completed_quests / guide.total_quests) * 100)
-    : 0;
+  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 accentColor = isDone ? "#4ade80" : inProgress ? "#f0c040" : "#4a9eff";
 
   return (
     <button
       onClick={() => onOpen(guide.gid)}
       style={{
-        background: isDone ? "rgba(74,222,128,0.05)" : "#161b22",
-        border: `1px solid ${isDone ? "rgba(74,222,128,0.3)" : "#2d3748"}`,
+        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",
+        textAlign: "left", transition: "all 0.15s", position: "relative", overflow: "hidden",
       }}
       onMouseEnter={e => {
-        (e.currentTarget as HTMLElement).style.borderColor = isDone ? "rgba(74,222,128,0.6)" : "#f0c040";
-        (e.currentTarget as HTMLElement).style.background = isDone ? "rgba(74,222,128,0.08)" : "#1a2233";
+        (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.3)" : "#2d3748";
-        (e.currentTarget as HTMLElement).style.background = isDone ? "rgba(74,222,128,0.05)" : "#161b22";
+        (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",
+      }} />
+
+      <div style={{ paddingLeft: "4px" }}>
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
           <span style={{
-          fontSize: "12px", fontWeight: 600, color: isDone ? "#4ade80" : "#e2e8f0",
-          lineHeight: 1.3,
+            fontSize: "12px", fontWeight: 600, lineHeight: 1.3,
+            color: isDone ? "#4ade80" : "#e2e8f0",
           }}>
             {guide.name}
           </span>
-        {isDone && <span style={{ fontSize: "14px" }}>✓</span>}
+          {isDone && <span style={{ fontSize: "12px", flexShrink: 0 }}>✓</span>}
         </div>
+
         <div style={{ height: "3px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginBottom: "6px" }}>
           <div style={{
             height: "100%", width: `${pct}%`,
-          background: isDone ? "#4ade80" : pct > 60 ? "#f0c040" : "#4a9eff",
-          borderRadius: "2px",
+            background: accentColor,
+            borderRadius: "2px", transition: "width 0.3s ease",
           }} />
         </div>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
+
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ fontSize: "10px", color: "#4a5568" }}>
             {guide.completed_quests}/{guide.total_quests} quêtes
           </span>
-        <span style={{ fontSize: "10px", fontWeight: 700, color: isDone ? "#4ade80" : "#94a3b8" }}>
+          <span style={{ fontSize: "10px", fontWeight: 700, color: accentColor }}>
             {pct}%
           </span>
         </div>
+      </div>
     </button>
   );
 }

src/components/Sidebar.tsx

@@ -4,6 +4,7 @@ import { useStore } from "../store";
 export default function Sidebar() {
   const { guides, openGuide, activeGuideGid, view } = useStore();
   const [search, setSearch] = useState("");
+  const [collapsed, setCollapsed] = useState(false);
 
   const filtered = guides.filter(g =>
     g.name.toLowerCase().includes(search.toLowerCase())
@@ -11,10 +12,45 @@ export default function Sidebar() {
 
   return (
     <aside style={{
-      width: "220px", flexShrink: 0,
-      background: "#161b22", borderRight: "1px solid #2d3748",
-      display: "flex", flexDirection: "column", overflow: "hidden",
+      width: collapsed ? "32px" : "220px",
+      flexShrink: 0,
+      background: "#161b22",
+      borderRight: "1px solid #2d3748",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      transition: "width 0.2s ease",
     }}>
+      {/* Toggle button */}
+      <button
+        onClick={() => setCollapsed(c => !c)}
+        title={collapsed ? "Ouvrir le menu" : "Réduire le menu"}
+        style={{
+          width: "100%", height: "36px", flexShrink: 0,
+          background: "transparent", border: "none",
+          borderBottom: "1px solid #2d3748",
+          color: "#4a5568", cursor: "pointer",
+          display: "flex", alignItems: "center",
+          justifyContent: collapsed ? "center" : "flex-end",
+          padding: "0 10px",
+          transition: "all 0.15s",
+        }}
+        onMouseEnter={e => (e.currentTarget.style.color = "#f0c040")}
+        onMouseLeave={e => (e.currentTarget.style.color = "#4a5568")}
+      >
+        <span style={{
+          fontSize: "12px",
+          transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
+          transition: "transform 0.2s ease",
+          display: "inline-block",
+        }}>
+          ‹
+        </span>
+      </button>
+
+      {!collapsed && (
+        <>
+          {/* Search */}
           <div style={{ padding: "10px 12px", borderBottom: "1px solid #2d3748" }}>
             <input
               value={search}
@@ -30,6 +66,7 @@ export default function Sidebar() {
             />
           </div>
 
+          {/* Guide list */}
           <div style={{ flex: 1, overflowY: "auto", padding: "8px 0", scrollbarWidth: "none" }}>
             {filtered.length === 0 ? (
               <div style={{ padding: "16px 12px", color: "#4a5568", fontSize: "12px", textAlign: "center" }}>
@@ -47,7 +84,8 @@ export default function Sidebar() {
                     key={guide.gid}
                     onClick={() => openGuide(guide.gid)}
                     style={{
-                  width: "100%", textAlign: "left", background: isActive ? "rgba(240,192,64,0.08)" : "transparent",
+                      width: "100%", textAlign: "left",
+                      background: isActive ? "rgba(240,192,64,0.08)" : "transparent",
                       border: "none", borderLeft: isActive ? "2px solid #f0c040" : "2px solid transparent",
                       padding: "8px 12px", cursor: "pointer", transition: "all 0.12s",
                     }}
@@ -89,6 +127,8 @@ export default function Sidebar() {
               })
             )}
           </div>
+        </>
+      )}
     </aside>
   );
 }