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

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" }}>
-            {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={{ 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>
+                </div>
+              )}
+            </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>
-          {/* Progress bar */}
-          <div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
+
+          <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,31 +96,89 @@ 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",
-          }}>
-            Ressources
-          </h3>
-          {resources.map((r, i) => (
-            <div key={i} style={{
-              display: "flex", justifyContent: "space-between", alignItems: "center",
-              padding: "4px 0", borderBottom: "1px solid #1f2937",
-              fontSize: "11px",
+          {/* 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 style={{ color: "#94a3b8", flex: 1, marginRight: "8px" }}>{r.name}</span>
-              <span style={{ color: "#f0c040", fontWeight: 700, flexShrink: 0 }}>×{r.quantity}</span>
+              ›
+            </span>
+            {!resourcesCollapsed && (
+              <span style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", whiteSpace: "nowrap" }}>
+                Ressources
+              </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: "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>
+                </div>
+              ))}
             </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>
+  );
+}
+
 function SectionItemView({ item, completedQuests, onToggle }: {
   item: SectionItem;
   completedQuests: Set<string>;
@@ -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"}
-            >
-              🔗
+          {quest.combat_indicators.map((ci, i) => (
+            <span key={i} style={{ fontSize: "11px", color: "#94a3b8", whiteSpace: "nowrap", flexShrink: 0 }}>
+              {combatIcon(ci.combat_type)} x{ci.count}
             </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>
-            ))}
-          </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;