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

2026-04-21 22:02:20 +02:00
parent 79d5c4baaa
commit f571d8bb3f
53 changed files with 12416 additions and 0 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { useStore } from "./store";
+import TitleBar from "./components/TitleBar";
+import Sidebar from "./components/Sidebar";
+import HomeView from "./components/HomeView";
+import GuideView from "./components/GuideView";
+import ProfileModal from "./components/ProfileModal";
+import SyncOverlay from "./components/SyncOverlay";
+
+export default function App() {
+  const { loadProfiles, loadGuides, view, syncing, syncGuides } = useStore();
+  const [showProfileModal, setShowProfileModal] = useState(false);
+  const [needsSync, setNeedsSync] = useState(false);
+
+  useEffect(() => {
+    async function init() {
+      await loadProfiles();
+      const has = await invoke<boolean>("has_guides");
+      if (!has) {
+        setNeedsSync(true);
+      } else {
+        await loadGuides();
+      }
+    }
+    init();
+  }, []);
+
+  async function handleInitialSync() {
+    setNeedsSync(false);
+    await syncGuides();
+  }
+
+  return (
+    <div className="app-shell">
+      <TitleBar onOpenProfiles={() => setShowProfileModal(true)} />
+      <div className="app-body">
+        <Sidebar />
+        <main className="app-main">
+          {view === "home" ? <HomeView /> : <GuideView />}
+        </main>
+      </div>
+
+      {showProfileModal && <ProfileModal onClose={() => setShowProfileModal(false)} />}
+      {syncing && <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>
+      )}
+
+      <style>{`
+        .app-shell {
+          display: flex; flex-direction: column; height: 100vh;
+          background: #0d1117; overflow: hidden;
+        }
+        .app-body { display: flex; flex: 1; overflow: hidden; }
+        .app-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
+      `}</style>
+    </div>
+  );
+}