feat: add onboarding

src/components/HomeView.tsx

@@ -1,7 +1,7 @@
 import { useStore } from "../store";
 
-export default function HomeView() {
-  const { guides, openGuide, profiles, activeProfileId } = useStore();
+export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
+  const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();
 
   const activeProfile = profiles.find(p => p.id === activeProfileId);
   const totalQuests = guides.reduce((s, g) => s + g.total_quests, 0);
@@ -24,6 +24,39 @@ export default function HomeView() {
         )}
       </div>
 
+      {/* First-time sync CTA */}
+      {needsSync && (
+        <div style={{
+          background: "rgba(240,192,64,0.06)", border: "1px solid rgba(240,192,64,0.35)",
+          borderRadius: "10px", padding: "20px 24px", marginBottom: "24px",
+          display: "flex", flexDirection: "column", alignItems: "center", gap: "12px",
+          textAlign: "center",
+        }}>
+          <div style={{ fontSize: "11px", fontWeight: 600, color: "#f0c040", textTransform: "uppercase", letterSpacing: "0.1em" }}>
+            Première utilisation
+          </div>
+          <p style={{ fontSize: "13px", color: "#94a3b8", lineHeight: 1.6, margin: 0 }}>
+            Aucun guide chargé. Synchronisez pour récupérer les données depuis Google Sheets.
+          </p>
+          <button
+            onClick={onSync}
+            disabled={!onSync || syncing}
+            style={{
+              background: "#f0c040", color: "#0d1117", border: "none",
+              padding: "9px 24px", borderRadius: "8px", fontWeight: 700,
+              fontSize: "13px", cursor: onSync && !syncing ? "pointer" : "default",
+              display: "flex", alignItems: "center", gap: "8px",
+              opacity: onSync && !syncing ? 1 : 0.5,
+            }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
+            </svg>
+            Synchroniser les guides
+          </button>
+        </div>
+      )}
+
       {/* Global progress */}
       {guides.length > 0 && (
         <div style={{

src/components/ProfileModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useStore } from "../store";
 
-export default function ProfileModal({ onClose }: { onClose: () => void }) {
+export default function ProfileModal({ onClose, blocking }: { onClose: () => void; blocking?: boolean }) {
   const { profiles, activeProfileId, setActiveProfile, createProfile, deleteProfile } = useStore();
   const [newName, setNewName] = useState("");
   const [error, setError] = useState("");
@@ -16,6 +16,7 @@ export default function ProfileModal({ onClose }: { onClose: () => void }) {
     await createProfile(name);
     setNewName("");
     setError("");
+    if (blocking) onClose();
   }
 
   async function handleDelete(id: string) {
@@ -30,18 +31,23 @@ export default function ProfileModal({ onClose }: { onClose: () => void }) {
     <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(); }}>
+    }} onClick={e => { if (!blocking && 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>
+          <h2 style={{ fontSize: "16px", fontWeight: 700, color: "#f0c040" }}>
+            {blocking ? "Bienvenue — créez votre profil" : "Profils"}
+          </h2>
+          {!blocking && (
+            <button onClick={onClose} style={{ background: "none", border: "none", color: "#94a3b8", cursor: "pointer", fontSize: "16px" }}>✕</button>
+          )}
         </div>
 
-        {/* Profile list */}
+        {/* Profile list — masquée en mode blocking (aucun profil existant) */}
+        {!blocking && (
         <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: "6px" }}>
           {profiles.map(profile => (
             <div key={profile.id} style={{
@@ -79,6 +85,7 @@ export default function ProfileModal({ onClose }: { onClose: () => void }) {
             </div>
           ))}
         </div>
+        )}
 
         {/* Create new profile */}
         <div style={{ borderTop: "1px solid #2d3748", paddingTop: "12px" }}>

src/components/TitleBar.tsx

@@ -72,7 +72,9 @@ export default function TitleBar({ onOpenSettings }: Props) {
       <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
         {view === "guide" && (
           <TitleButton onClick={closeGuide} title="Retour à l'accueil">
-            ← Accueil
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+            </svg>
           </TitleButton>
         )}