90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
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>
|
||
);
|
||
}
|