blomios/TougliGui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add onboarding

Browse Source
This commit is contained in:
Blomios
2026-04-25 10:28:35 +02:00
parent 8358fcb230
commit b6fca292c2
7 changed files with 822 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ProfileModal.tsx
View File

@ -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" }}>