feat: add first version of TougliGui with same features as on google sheet

src/components/GuideView.tsx

@@ -0,0 +1,249 @@
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { useStore } from "../store";
+import { SectionItem, QuestItem } from "../types";
+
+export default function GuideView() {
+  const { activeGuideData, completedQuests, toggleQuest } = useStore();
+
+  if (!activeGuideData) return null;
+
+  const { name, effect, recommended_level, resources, sections } = 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;
+
+  return (
+    <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
+      {/* Main quest list */}
+      <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
+        {/* Guide 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>
+          {/* Progress bar */}
+          <div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
+            <div style={{
+              height: "100%", width: `${pct}%`,
+              background: pct === 100 ? "#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,
+            }}>
+              <span style={{ color: "#f0c040", fontWeight: 600 }}>Effet : </span>
+              {effect}
+            </div>
+          )}
+        </div>
+
+        {/* Sections */}
+        {sections.map((section, si) => (
+          <div key={si} style={{ marginBottom: "20px" }}>
+            <h2 style={{
+              fontSize: "11px", fontWeight: 600, color: "#4a5568",
+              textTransform: "uppercase", letterSpacing: "0.1em",
+              marginBottom: "8px", borderBottom: "1px solid #2d3748", paddingBottom: "4px",
+            }}>
+              {section.name}
+            </h2>
+            {section.items.map((item, ii) => (
+              <SectionItemView key={ii} item={item} completedQuests={completedQuests} onToggle={toggleQuest} />
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* Resources panel */}
+      {resources.length > 0 && (
+        <div style={{
+          width: "200px", flexShrink: 0, background: "#161b22",
+          borderLeft: "1px solid #2d3748", overflowY: "auto", padding: "16px 14px",
+        }}>
+          <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",
+            }}>
+              <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>
+  );
+}
+
+function SectionItemView({ item, completedQuests, onToggle }: {
+  item: SectionItem;
+  completedQuests: Set<string>;
+  onToggle: (name: string) => void;
+}) {
+  if (item.type === "Instruction") {
+    if (item.text.startsWith("__ZONE__:")) {
+      const zone = item.text.replace("__ZONE__:", "");
+      return (
+        <div style={{
+          display: "flex", alignItems: "center", gap: "8px",
+          padding: "8px 0 4px", marginBottom: "2px",
+        }}>
+          <div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
+          <span style={{ fontSize: "11px", color: "#4a9eff", fontWeight: 600, flexShrink: 0 }}>{zone}</span>
+          <div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
+        </div>
+      );
+    }
+    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,
+      }}>
+        ℹ️ {item.text}
+      </div>
+    );
+  }
+
+  if (item.type === "Group") {
+    return (
+      <div style={{
+        background: "rgba(255,255,255,0.02)", border: "1px solid #2d3748",
+        borderRadius: "6px", padding: "8px 10px", marginBottom: "6px",
+      }}>
+        {item.note && (
+          <div style={{
+            fontSize: "10px", color: "#4a9eff", marginBottom: "6px",
+            fontStyle: "italic",
+          }}>
+            🔗 {item.note}
+          </div>
+        )}
+        {item.quests.map((q, i) => (
+          <QuestRow key={i} quest={q} indent completed={completedQuests.has(q.name)} onToggle={onToggle} />
+        ))}
+      </div>
+    );
+  }
+
+  if (item.type === "Quest") {
+    return <QuestRow quest={item} completed={completedQuests.has(item.name)} onToggle={onToggle} />;
+  }
+
+  return null;
+}
+
+function QuestRow({ quest, completed, onToggle, indent }: {
+  quest: QuestItem;
+  completed: boolean;
+  onToggle: (name: string) => void;
+  indent?: boolean;
+}) {
+  return (
+    <div
+      onClick={() => onToggle(quest.name)}
+      style={{
+        display: "flex", alignItems: "flex-start", gap: "8px",
+        padding: indent ? "4px 0" : "5px 6px",
+        borderRadius: "5px", cursor: "pointer",
+        marginBottom: indent ? "2px" : "3px",
+        opacity: completed ? 0.6 : 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";
+      }}
+    >
+      <input
+        type="checkbox"
+        checked={completed}
+        onChange={() => onToggle(quest.name)}
+        onClick={e => e.stopPropagation()}
+        style={{ marginTop: "2px", flexShrink: 0 }}
+      />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "5px", flexWrap: "wrap" }}>
+          <span style={{
+            fontSize: "12px", color: completed ? "#4a5568" : "#e2e8f0",
+            textDecoration: completed ? "line-through" : "none",
+            lineHeight: 1.4,
+          }}>
+            {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>
+            ))}
+          </div>
+        )}
+        {quest.note && (
+          <div style={{ fontSize: "10px", color: "#94a3b8", marginTop: "2px", fontStyle: "italic" }}>
+            → {quest.note}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function collectAllQuests(sections: import("../types").Section[] | undefined): string[] {
+  if (!sections) return [];
+  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));
+    }
+  }
+  return names;
+}

src/components/HomeView.tsx

@@ -0,0 +1,148 @@
+import { useStore } from "../store";
+
+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" }}>
+      {/* Header */}
+      <div style={{ marginBottom: "24px" }}>
+        <h1 style={{ fontSize: "18px", fontWeight: 700, color: "#f0c040", marginBottom: "4px" }}>
+          Tougli — Guide Dofus
+        </h1>
+        {activeProfile && (
+          <p style={{ fontSize: "13px", color: "#94a3b8" }}>
+            Profil actif : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{activeProfile.name}</span>
+          </p>
+        )}
+      </div>
+
+      {/* Global progress */}
+      {guides.length > 0 && (
+        <div style={{
+          background: "#161b22", border: "1px solid #2d3748", borderRadius: "10px",
+          padding: "16px 20px", marginBottom: "24px",
+        }}>
+          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "8px" }}>
+            <span style={{ fontSize: "13px", color: "#94a3b8" }}>Progression globale</span>
+            <span style={{ fontSize: "13px", fontWeight: 700, color: "#f0c040" }}>
+              {totalCompleted} / {totalQuests} quêtes ({globalPct}%)
+            </span>
+          </div>
+          <div style={{ height: "6px", background: "#2d3748", borderRadius: "3px", overflow: "hidden" }}>
+            <div style={{
+              height: "100%", width: `${globalPct}%`,
+              background: "linear-gradient(90deg, #4a9eff, #f0c040)",
+              borderRadius: "3px", transition: "width 0.4s ease",
+            }} />
+          </div>
+          <div style={{ marginTop: "8px", display: "flex", gap: "16px" }}>
+            <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" />
+          </div>
+        </div>
+      )}
+
+      {/* In progress first */}
+      {inProgressGuides.length > 0 && (
+        <Section title="En cours" guides={inProgressGuides} onOpen={openGuide} />
+      )}
+
+      {/* All guides grid */}
+      <Section title="Tous les guides" guides={guides} onOpen={openGuide} />
+    </div>
+  );
+}
+
+function Stat({ label, value, color }: { label: string; value: number; color: string }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+      <span style={{ fontSize: "16px", fontWeight: 700, color }}>{value}</span>
+      <span style={{ fontSize: "11px", color: "#4a5568" }}>{label}</span>
+    </div>
+  );
+}
+
+function Section({ title, guides, onOpen }: {
+  title: string;
+  guides: import("../types").GuideListItem[];
+  onOpen: (gid: string) => void;
+}) {
+  return (
+    <div style={{ marginBottom: "24px" }}>
+      <h2 style={{ fontSize: "12px", fontWeight: 600, color: "#4a5568", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px" }}>
+        {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>
+    </div>
+  );
+}
+
+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 isDone = pct === 100 && guide.total_quests > 0;
+
+  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"}`,
+        borderRadius: "8px", padding: "12px 14px", cursor: "pointer",
+        textAlign: "left", transition: "all 0.15s",
+      }}
+      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";
+      }}
+      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";
+      }}
+    >
+      <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,
+        }}>
+          {guide.name}
+        </span>
+        {isDone && <span style={{ fontSize: "14px" }}>✓</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",
+        }} />
+      </div>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <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" }}>
+          {pct}%
+        </span>
+      </div>
+    </button>
+  );
+}

src/components/ProfileModal.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { useStore } from "../store";
+
+export default function ProfileModal({ onClose }: { onClose: () => void }) {
+  const { profiles, activeProfileId, setActiveProfile, createProfile, deleteProfile } = useStore();
+  const [newName, setNewName] = useState("");
+  const [error, setError] = useState("");
+
+  async function handleCreate() {
+    const name = newName.trim();
+    if (!name) return;
+    if (profiles.find(p => p.name === name)) {
+      setError("Un profil avec ce nom existe déjà.");
+      return;
+    }
+    await createProfile(name);
+    setNewName("");
+    setError("");
+  }
+
+  async function handleDelete(id: string) {
+    if (profiles.length <= 1) {
+      setError("Vous ne pouvez pas supprimer le dernier profil.");
+      return;
+    }
+    await deleteProfile(id);
+  }
+
+  return (
+    <div style={{
+      position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)",
+      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50,
+    }} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
+      <div style={{
+        background: "#161b22", border: "1px solid #2d3748", borderRadius: "12px",
+        padding: "24px", width: "360px", maxHeight: "500px",
+        display: "flex", flexDirection: "column", gap: "16px",
+      }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <h2 style={{ fontSize: "16px", fontWeight: 700, color: "#f0c040" }}>Profils</h2>
+          <button onClick={onClose} style={{ background: "none", border: "none", color: "#94a3b8", cursor: "pointer", fontSize: "16px" }}>✕</button>
+        </div>
+
+        {/* Profile list */}
+        <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: "6px" }}>
+          {profiles.map(profile => (
+            <div key={profile.id} style={{
+              display: "flex", alignItems: "center", gap: "8px",
+              background: profile.id === activeProfileId ? "rgba(240,192,64,0.08)" : "#1a2233",
+              border: `1px solid ${profile.id === activeProfileId ? "rgba(240,192,64,0.4)" : "#2d3748"}`,
+              borderRadius: "8px", padding: "10px 12px",
+            }}>
+              <button
+                onClick={() => { setActiveProfile(profile.id); onClose(); }}
+                style={{
+                  flex: 1, background: "none", border: "none", textAlign: "left",
+                  cursor: "pointer",
+                }}
+              >
+                <div style={{ fontSize: "13px", fontWeight: 600, color: profile.id === activeProfileId ? "#f0c040" : "#e2e8f0" }}>
+                  {profile.id === activeProfileId && "✓ "}{profile.name}
+                </div>
+                <div style={{ fontSize: "10px", color: "#4a5568", marginTop: "2px" }}>
+                  Créé le {new Date(profile.created_at).toLocaleDateString("fr-FR")}
+                </div>
+              </button>
+              {profiles.length > 1 && (
+                <button
+                  onClick={() => handleDelete(profile.id)}
+                  style={{
+                    background: "none", border: "none", color: "#f87171",
+                    cursor: "pointer", padding: "4px", borderRadius: "4px", fontSize: "12px",
+                  }}
+                  title="Supprimer ce profil"
+                >
+                  🗑
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Create new profile */}
+        <div style={{ borderTop: "1px solid #2d3748", paddingTop: "12px" }}>
+          <p style={{ fontSize: "11px", color: "#4a5568", marginBottom: "8px" }}>Nouveau profil</p>
+          <div style={{ display: "flex", gap: "8px" }}>
+            <input
+              value={newName}
+              onChange={e => { setNewName(e.target.value); setError(""); }}
+              onKeyDown={e => e.key === "Enter" && handleCreate()}
+              placeholder="Nom du profil…"
+              style={{
+                flex: 1, background: "#0d1117", border: "1px solid #2d3748",
+                borderRadius: "6px", padding: "7px 10px", color: "#e2e8f0",
+                fontSize: "12px", outline: "none",
+              }}
+              onFocus={e => (e.target.style.borderColor = "#f0c040")}
+              onBlur={e => (e.target.style.borderColor = "#2d3748")}
+            />
+            <button
+              onClick={handleCreate}
+              disabled={!newName.trim()}
+              style={{
+                background: "#f0c040", color: "#0d1117", border: "none",
+                borderRadius: "6px", padding: "7px 14px", fontWeight: 700,
+                fontSize: "12px", cursor: newName.trim() ? "pointer" : "default",
+                opacity: newName.trim() ? 1 : 0.4,
+              }}
+            >
+              Créer
+            </button>
+          </div>
+          {error && <p style={{ fontSize: "11px", color: "#f87171", marginTop: "6px" }}>{error}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Sidebar.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { useStore } from "../store";
+
+export default function Sidebar() {
+  const { guides, openGuide, activeGuideGid, view } = useStore();
+  const [search, setSearch] = useState("");
+
+  const filtered = guides.filter(g =>
+    g.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <aside style={{
+      width: "220px", flexShrink: 0,
+      background: "#161b22", borderRight: "1px solid #2d3748",
+      display: "flex", flexDirection: "column", overflow: "hidden",
+    }}>
+      <div style={{ padding: "10px 12px", borderBottom: "1px solid #2d3748" }}>
+        <input
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Rechercher un Dofus…"
+          style={{
+            width: "100%", background: "#0d1117", border: "1px solid #2d3748",
+            borderRadius: "6px", padding: "6px 10px", color: "#e2e8f0",
+            fontSize: "12px", outline: "none",
+          }}
+          onFocus={e => (e.target.style.borderColor = "#f0c040")}
+          onBlur={e => (e.target.style.borderColor = "#2d3748")}
+        />
+      </div>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: "8px 0" }}>
+        {filtered.length === 0 ? (
+          <div style={{ padding: "16px 12px", color: "#4a5568", fontSize: "12px", textAlign: "center" }}>
+            Aucun guide synchronisé
+          </div>
+        ) : (
+          filtered.map(guide => {
+            const pct = guide.total_quests > 0
+              ? Math.round((guide.completed_quests / guide.total_quests) * 100)
+              : 0;
+            const isActive = guide.gid === activeGuideGid && view === "guide";
+
+            return (
+              <button
+                key={guide.gid}
+                onClick={() => openGuide(guide.gid)}
+                style={{
+                  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",
+                }}
+                onMouseEnter={e => {
+                  if (!isActive) (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.03)";
+                }}
+                onMouseLeave={e => {
+                  if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent";
+                }}
+              >
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                  <span style={{
+                    fontSize: "12px", fontWeight: isActive ? 600 : 400,
+                    color: isActive ? "#f0c040" : "#e2e8f0",
+                    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+                    maxWidth: "140px",
+                  }}>
+                    {guide.name}
+                  </span>
+                  <span style={{
+                    fontSize: "10px", color: pct === 100 ? "#4ade80" : "#94a3b8",
+                    fontWeight: 600, flexShrink: 0,
+                  }}>
+                    {pct}%
+                  </span>
+                </div>
+                <div style={{
+                  marginTop: "4px", height: "2px", background: "#2d3748",
+                  borderRadius: "1px", overflow: "hidden",
+                }}>
+                  <div style={{
+                    height: "100%", width: `${pct}%`,
+                    background: pct === 100 ? "#4ade80" : pct > 50 ? "#f0c040" : "#4a9eff",
+                    transition: "width 0.3s ease",
+                  }} />
+                </div>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </aside>
+  );
+}

src/components/SyncOverlay.tsx

@@ -0,0 +1,47 @@
+import { useStore } from "../store";
+
+export default function SyncOverlay() {
+  const { syncProgress } = useStore();
+  const { current = 0, total = 29, label = "…" } = syncProgress ?? {};
+  const pct = total > 0 ? Math.round((current / total) * 100) : 0;
+
+  return (
+    <div style={{
+      position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      zIndex: 200, borderRadius: "10px",
+    }}>
+      <div style={{
+        background: "#161b22", border: "1px solid #2d3748", borderRadius: "12px",
+        padding: "28px 40px", display: "flex", flexDirection: "column",
+        alignItems: "center", gap: "14px", minWidth: "320px",
+      }}>
+        <div style={{ fontSize: "28px", animation: "spin 1s linear infinite" }}>↻</div>
+
+        <div style={{ width: "100%", textAlign: "center" }}>
+          <p style={{ fontSize: "14px", fontWeight: 600, color: "#e2e8f0", marginBottom: "4px" }}>
+            Synchronisation en cours…
+          </p>
+          <p style={{ fontSize: "12px", color: "#94a3b8" }}>
+            {current}/{total} — <span style={{ color: "#f0c040" }}>{label}</span>
+          </p>
+        </div>
+
+        {/* Progress bar */}
+        <div style={{ width: "100%", height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
+          <div style={{
+            height: "100%",
+            width: `${pct}%`,
+            background: "linear-gradient(90deg, #4a9eff, #f0c040)",
+            borderRadius: "2px",
+            transition: "width 0.3s ease",
+          }} />
+        </div>
+
+        <p style={{ fontSize: "11px", color: "#4a5568" }}>
+          {pct}% — Google Sheets CSV
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/TitleBar.tsx

@@ -0,0 +1,141 @@
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { useStore } from "../store";
+
+interface Props {
+  onOpenProfiles: () => void;
+}
+
+export default function TitleBar({ onOpenProfiles }: Props) {
+  const { alwaysOnTop, toggleAlwaysOnTop, syncing, syncGuides, view, closeGuide, activeGuideData } = useStore();
+
+  function handleDragMouseDown(e: React.MouseEvent) {
+    if (e.button === 0) {
+      getCurrentWindow().startDragging();
+    }
+  }
+
+  async function handleClose() {
+    await getCurrentWindow().close();
+  }
+
+  async function handleMinimize() {
+    await getCurrentWindow().minimize();
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex", alignItems: "center", height: "40px",
+        background: "#0d1117", borderBottom: "1px solid #2d3748",
+        padding: "0 12px", gap: "8px", flexShrink: 0,
+        userSelect: "none",
+      }}
+    >
+      {/* Zone draggable — appel direct à startDragging() */}
+      <div
+        onMouseDown={handleDragMouseDown}
+        style={{
+          display: "flex", alignItems: "center", gap: "8px", flex: 1,
+          cursor: "grab", userSelect: "none",
+        }}
+      >
+        <img src="/logo_tougli.png" style={{ pointerEvents: "none", width: "24px", height: "24px", objectFit: "contain" }} />
+        <span style={{ pointerEvents: "none", fontSize: "13px", fontWeight: 700, color: "#f0c040", letterSpacing: "0.05em" }}>
+          TougliGui
+        </span>
+        {view === "guide" && activeGuideData && (
+          <>
+            <span style={{ pointerEvents: "none", color: "#4a5568", fontSize: "12px" }}>›</span>
+            <span style={{ pointerEvents: "none", fontSize: "12px", color: "#94a3b8" }}>{activeGuideData.name}</span>
+          </>
+        )}
+      </div>
+
+      {/* Boutons — pas de drag, interactions normales */}
+      <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+        {view === "guide" && (
+          <TitleButton onClick={closeGuide} title="Retour à l'accueil">
+            ← Accueil
+          </TitleButton>
+        )}
+
+        <TitleButton onClick={onOpenProfiles} title="Gérer les profils">
+          👤
+        </TitleButton>
+
+        <TitleButton
+          onClick={syncGuides}
+          title="Synchroniser avec Google Sheets"
+          disabled={syncing}
+        >
+          {syncing ? <SpinIcon /> : "↻"}
+        </TitleButton>
+
+        <TitleButton
+          onClick={toggleAlwaysOnTop}
+          title={alwaysOnTop ? "Désactiver fenêtre flottante" : "Activer fenêtre flottante"}
+          active={alwaysOnTop}
+        >
+          📌
+        </TitleButton>
+
+        <div style={{ width: "1px", height: "16px", background: "#2d3748", margin: "0 4px" }} />
+
+        <TitleButton onClick={handleMinimize} title="Réduire">—</TitleButton>
+        <TitleButton onClick={handleClose} title="Fermer" danger>✕</TitleButton>
+      </div>
+    </div>
+  );
+}
+
+function TitleButton({
+  children, onClick, title, active, danger, disabled
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+  title?: string;
+  active?: boolean;
+  danger?: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      disabled={disabled}
+      style={{
+        background: active ? "rgba(240,192,64,0.15)" : "transparent",
+        border: active ? "1px solid rgba(240,192,64,0.4)" : "1px solid transparent",
+        color: active ? "#f0c040" : danger ? "#f87171" : "#94a3b8",
+        padding: "3px 8px",
+        borderRadius: "5px",
+        cursor: disabled ? "default" : "pointer",
+        fontSize: "12px",
+        fontWeight: 500,
+        transition: "all 0.15s",
+        display: "flex", alignItems: "center", gap: "4px",
+        opacity: disabled ? 0.5 : 1,
+      }}
+      onMouseEnter={e => {
+        if (!disabled) {
+          const el = e.currentTarget;
+          el.style.background = active ? "rgba(240,192,64,0.25)" : danger ? "rgba(248,113,113,0.1)" : "rgba(255,255,255,0.05)";
+          el.style.color = active ? "#f0c040" : danger ? "#f87171" : "#e2e8f0";
+        }
+      }}
+      onMouseLeave={e => {
+        const el = e.currentTarget;
+        el.style.background = active ? "rgba(240,192,64,0.15)" : "transparent";
+        el.style.color = active ? "#f0c040" : danger ? "#f87171" : "#94a3b8";
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SpinIcon() {
+  return (
+    <span style={{ display: "inline-block", animation: "spin 1s linear infinite" }}>↻</span>
+  );
+}