feat: add onboarding

2026-04-25 10:28:35 +02:00
parent 8358fcb230
commit b6fca292c2
7 changed files with 822 additions and 55 deletions
--- a/src/App.tsx
+++ b/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 {
--- a/src/components/HomeView.tsx
+++ b/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={{
--- a/src/components/ProfileModal.tsx
+++ b/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" }}>
--- a/src/components/TitleBar.tsx
+++ b/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>
        )}