feat: add onboarding

src/App.tsx

@@ -8,16 +8,33 @@ import ResizeHandles from "./components/ResizeHandles";
 import HomeView from "./components/HomeView";
 import GuideView from "./components/GuideView";
 import SettingsPanel from "./components/SettingsPanel";
+import ProfileModal from "./components/ProfileModal";
 import SyncOverlay from "./components/SyncOverlay";
 
 export default function App() {
   const { loadProfiles, loadGuides, openGuide, setResourcesPanelCollapsed, view, syncing, syncGuides } = useStore();
   const [showSettings, setShowSettings] = useState(false);
+  const [needsProfile, setNeedsProfile] = useState(false);
   const [needsSync, setNeedsSync] = useState(false);
 
+  async function runPhase2() {
+    const has = await invoke<boolean>("has_guides");
+    if (!has) {
+      setNeedsSync(true);
+    } else {
+      await loadGuides();
+      const lastGuide = await invoke<string | null>("get_setting", { key: "active_guide" });
+      if (lastGuide) {
+        try {
+          await openGuide(lastGuide);
+          setResourcesPanelCollapsed(true);
+        } catch { /* guide may no longer exist */ }
+      }
+    }
+  }
+
   useEffect(() => {
     async function init() {
-      // Restore window size
       const [savedW, savedH] = await Promise.all([
         invoke<string | null>("get_setting", { key: "window_width" }),
         invoke<string | null>("get_setting", { key: "window_height" }),
@@ -28,20 +45,13 @@ export default function App() {
 
       await loadProfiles();
 
-      const has = await invoke<boolean>("has_guides");
-      if (!has) {
-        setNeedsSync(true);
-      } else {
-        await loadGuides();
-        // Restore last viewed guide
-        const lastGuide = await invoke<string | null>("get_setting", { key: "active_guide" });
-        if (lastGuide) {
-          try {
-            await openGuide(lastGuide);
-            setResourcesPanelCollapsed(true);
-          } catch { /* guide may no longer exist */ }
-        }
+      const profiles = useStore.getState().profiles;
+      if (profiles.length === 0) {
+        setNeedsProfile(true);
+        return;
       }
+
+      await runPhase2();
     }
     init();
 
@@ -83,7 +93,13 @@ export default function App() {
     };
   }, []);
 
+  async function handleProfileCreated() {
+    setNeedsProfile(false);
+    await runPhase2();
+  }
+
   async function handleInitialSync() {
+    if (!needsSync) return;
     setNeedsSync(false);
     await syncGuides();
   }
@@ -94,44 +110,13 @@ export default function App() {
       <TitleBar onOpenSettings={() => setShowSettings(s => !s)} />
       <div className="app-body">
         <main className="app-main">
-          {view === "home" ? <HomeView /> : <GuideView />}
+          {view === "home" ? <HomeView needsSync={needsSync} onSync={handleInitialSync} /> : <GuideView />}
         </main>
       </div>
 
       {showSettings && <SettingsPanel onClose={() => setShowSettings(false)} />}
       {syncing && !showSettings && <SyncOverlay />}
-      {needsSync && (
-        <div style={{
-          position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
-          display: "flex", alignItems: "center", justifyContent: "center",
-          zIndex: 100, borderRadius: "10px"
-        }}>
-          <div style={{
-            background: "#161b22", border: "1px solid #f0c040", borderRadius: "12px",
-            padding: "40px 48px", maxWidth: "440px", textAlign: "center",
-            display: "flex", flexDirection: "column", gap: "16px"
-          }}>
-            <div style={{ fontSize: "40px" }}>⚔️</div>
-            <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040" }}>
-              Bienvenue dans TougliGui
-            </h2>
-            <p style={{ color: "#94a3b8", fontSize: "14px", lineHeight: 1.6 }}>
-              Première utilisation — synchronisation du guide Tougli depuis Google Sheets.
-              <br />Cela peut prendre quelques secondes.
-            </p>
-            <button
-              onClick={handleInitialSync}
-              style={{
-                background: "#f0c040", color: "#0d1117", border: "none",
-                padding: "10px 24px", borderRadius: "8px", fontWeight: 700,
-                fontSize: "14px", cursor: "pointer", marginTop: "8px"
-              }}
-            >
-              Synchroniser maintenant
-            </button>
-          </div>
-        </div>
-      )}
+      {needsProfile && <ProfileModal blocking onClose={handleProfileCreated} />}
 
       <style>{`
         .app-shell {