authentification nocodebackend ok
This commit is contained in:
283
components/HelpModal.tsx
Normal file
283
components/HelpModal.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import React from 'react';
|
||||
import { X, Keyboard, MousePointerClick, MessageCircle, Sparkles, GitGraph, BookOpen, Command, Globe, Layout, Settings, Lightbulb } from 'lucide-react';
|
||||
import { ViewMode } from '../types';
|
||||
|
||||
interface HelpModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
viewMode: ViewMode;
|
||||
}
|
||||
|
||||
const Kbd: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<kbd className="px-2 py-1 text-xs font-semibold text-slate-800 bg-slate-100 border border-slate-300 rounded-md shadow-[0px_2px_0px_0px_rgba(203,213,225,1)] mx-1 font-mono">
|
||||
{children}
|
||||
</kbd>
|
||||
);
|
||||
|
||||
const HelpModal: React.FC<HelpModalProps> = ({ isOpen, onClose, viewMode }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
const renderContent = () => {
|
||||
switch (viewMode) {
|
||||
case 'ideas':
|
||||
return (
|
||||
<section className="mb-8">
|
||||
<h3 className="text-lg font-bold text-yellow-600 flex items-center gap-2 border-b border-yellow-100 pb-2 mb-4">
|
||||
<Lightbulb size={20} /> Boîte à Idées & Tâches
|
||||
</h3>
|
||||
<div className="text-sm text-slate-600 space-y-4">
|
||||
<p>
|
||||
Un espace de type Kanban pour ne rien oublier. Utilisez-le pour noter des idées fugaces, planifier des recherches ou lister les scènes à écrire.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<MousePointerClick size={16} className="mt-0.5 shrink-0" />
|
||||
<span>
|
||||
<span className="font-semibold text-slate-800">Glisser-Déposer :</span> Déplacez les cartes d'une colonne à l'autre (À faire → En cours → Validé) pour suivre votre progression.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Layout size={16} className="mt-0.5 shrink-0" />
|
||||
<span>
|
||||
<span className="font-semibold text-slate-800">Catégories :</span> Utilisez les catégories (Intrigue, Personnage, Recherche) pour filtrer visuellement vos tâches grâce aux codes couleurs.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'workflow':
|
||||
return (
|
||||
<>
|
||||
{/* Workflow Section */}
|
||||
<section className="mb-8">
|
||||
<h3 className="text-lg font-bold text-indigo-700 flex items-center gap-2 border-b border-indigo-100 pb-2 mb-4">
|
||||
<GitGraph size={20} /> Organisation Narrative
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-slate-600">
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<MousePointerClick size={16} className="mt-0.5 shrink-0" />
|
||||
<span>
|
||||
<span className="font-semibold text-slate-800">Sélection :</span> <Kbd>Ctrl</Kbd> + Clic pour sélectionner plusieurs cartes. Glissez pour déplacer tout un groupe.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Command size={16} className="mt-0.5 shrink-0" />
|
||||
<span>
|
||||
<span className="font-semibold text-slate-800">Copier / Coller :</span> <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> pour copier les nœuds sélectionnés, <Kbd>Ctrl</Kbd> + <Kbd>V</Kbd> pour coller.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Layout size={16} className="mt-0.5 shrink-0" />
|
||||
<span>
|
||||
<span className="font-semibold text-slate-800">Connexions :</span> Tirez depuis le cercle à droite d'une carte pour lier les événements.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Dialogue Intelligent */}
|
||||
<section className="bg-blue-50 p-6 rounded-xl border border-blue-100 mb-8">
|
||||
<h3 className="text-lg font-bold text-blue-800 flex items-center gap-2 border-b border-blue-200 pb-2 mb-4">
|
||||
<MessageCircle size={20} /> Mode Dialogue (Workflow)
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
|
||||
<div>
|
||||
<div className="font-semibold text-slate-800 mb-1">Écriture Rapide</div>
|
||||
<p className="text-slate-600 leading-relaxed mb-3">
|
||||
Tapez un nom et <Kbd>Entrée</Kbd> : le formatage <code>Nom: </code> s'ajoute seul.
|
||||
</p>
|
||||
<p className="text-slate-600 leading-relaxed">
|
||||
Dans un dialogue, <Kbd>Entrée</Kbd> change de ligne et <strong>devine le prochain interlocuteur</strong> automatiquement.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-slate-800 mb-1">Rotation & Insertion</div>
|
||||
<p className="text-slate-600 leading-relaxed mb-3">
|
||||
<Kbd>Tab</Kbd> permute instantanément entre les personnages présents dans la scène.
|
||||
</p>
|
||||
<p className="text-slate-600 leading-relaxed">
|
||||
Utilisez <Kbd>@</Kbd> pour insérer un personnage, <Kbd>#</Kbd> pour un lieu.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
case 'world_building':
|
||||
return (
|
||||
<section className="mb-8">
|
||||
<h3 className="text-lg font-bold text-green-700 flex items-center gap-2 border-b border-green-100 pb-2 mb-4">
|
||||
<Globe size={20} /> Bible du Monde
|
||||
</h3>
|
||||
<div className="text-sm text-slate-600 space-y-4">
|
||||
<p>
|
||||
La bible du monde permet de centraliser toutes les informations sur vos personnages et lieux.
|
||||
Ces informations sont <strong>lues par l'IA</strong> pour assurer la cohérence de l'histoire.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
|
||||
<div className="bg-slate-50 p-4 rounded-lg">
|
||||
<h4 className="font-bold text-slate-800 mb-2">Modèles Personnalisés</h4>
|
||||
<p>
|
||||
Cliquez sur le bouton "Modèles" pour ajouter des champs spécifiques (ex: "Type de Magie", "Allégeance") à tous vos personnages ou lieux.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-slate-50 p-4 rounded-lg">
|
||||
<h4 className="font-bold text-slate-800 mb-2">Contexte Automatique</h4>
|
||||
<p>
|
||||
Le champ "Contexte Narratif" se remplit automatiquement au fur et à mesure que vous écrivez votre histoire et que l'IA détecte l'évolution des personnages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'settings':
|
||||
return (
|
||||
<section className="mb-8">
|
||||
<h3 className="text-lg font-bold text-slate-700 flex items-center gap-2 border-b border-slate-100 pb-2 mb-4">
|
||||
<Settings size={20} /> Paramètres du Livre
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 mb-4">
|
||||
Ces réglages sont cruciaux pour l'Assistant IA. Ils définissent le "ton" de toutes les générations de texte.
|
||||
</p>
|
||||
<ul className="list-disc pl-5 space-y-2 text-sm text-slate-600">
|
||||
<li><strong>Style Guide :</strong> Soyez précis sur le style (ex: "phrases courtes", "beaucoup de métaphores", "humour noir").</li>
|
||||
<li><strong>POV (Point de Vue) :</strong> Définit si l'IA doit écrire en "Je" ou "Il/Elle".</li>
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'write':
|
||||
default:
|
||||
return (
|
||||
<section className="mb-8">
|
||||
<h3 className="text-lg font-bold text-amber-600 flex items-center gap-2 border-b border-amber-100 pb-2 mb-4">
|
||||
<Sparkles size={20} /> Éditeur & Assistant IA
|
||||
</h3>
|
||||
<div className="space-y-4 text-sm text-slate-600">
|
||||
<div className="bg-amber-50 p-4 rounded-lg border border-amber-100">
|
||||
<h4 className="font-bold text-amber-800 mb-2">Menu Contextuel Intelligent</h4>
|
||||
<p>Sélectionnez du texte et faites un <strong>clic droit</strong> pour :</p>
|
||||
<ul className="grid grid-cols-2 gap-2 mt-2 pl-4">
|
||||
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Corriger l'orthographe</li>
|
||||
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Reformuler / Améliorer</li>
|
||||
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Développer (Show, don't tell)</li>
|
||||
<li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Continuer l'écriture</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
<span className="font-semibold text-slate-800">Historique des versions :</span> Activez la marge de droite (icône horloge) pour voir toutes les interventions de l'IA et revenir en arrière si nécessaire.
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold text-slate-800">Chat Latéral :</span> Posez des questions sur votre histoire, demandez des résumés ou des idées de rebondissements. L'IA connaît le contexte de vos chapitres précédents et de vos fiches personnages.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 border-t border-slate-100 pt-4">
|
||||
<h4 className="font-bold text-slate-700 mb-3 flex items-center gap-2">
|
||||
<Keyboard size={16} /> Raccourcis Clavier (Éditeur)
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-slate-50 p-4 rounded-lg border border-slate-100">
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-600">Mettre en Gras</span>
|
||||
<span><Kbd>Ctrl</Kbd> + <Kbd>B</Kbd></span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-600">Mettre en Italique</span>
|
||||
<span><Kbd>Ctrl</Kbd> + <Kbd>I</Kbd></span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-600">Souligner</span>
|
||||
<span><Kbd>Ctrl</Kbd> + <Kbd>U</Kbd></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-600">Tout sélectionner</span>
|
||||
<span><Kbd>Ctrl</Kbd> + <Kbd>A</Kbd></span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-600">Annuler</span>
|
||||
<span><Kbd>Ctrl</Kbd> + <Kbd>Z</Kbd></span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-600">Rétablir</span>
|
||||
<span><Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>Z</Kbd></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-[800px] max-h-[90vh] flex flex-col overflow-hidden">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-slate-900 text-white p-6 flex justify-between items-center shrink-0">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<BookOpen size={24} className="text-blue-400" /> Aide : {
|
||||
viewMode === 'workflow' ? 'Workflow & Dialogues' :
|
||||
viewMode === 'world_building' ? 'Bible du Monde' :
|
||||
viewMode === 'settings' ? 'Paramètres' :
|
||||
viewMode === 'ideas' ? 'Boîte à Idées' :
|
||||
'Éditeur & IA'
|
||||
}
|
||||
</h2>
|
||||
<p className="text-slate-400 text-sm mt-1">Astuces pour l'écran actuel.</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors p-2 hover:bg-slate-800 rounded-full">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="overflow-y-auto p-8">
|
||||
|
||||
{/* Context Specific Content */}
|
||||
{renderContent()}
|
||||
|
||||
{/* General Footer Section (Always visible) */}
|
||||
<div className="border-t border-slate-100 pt-6 mt-6">
|
||||
<h4 className="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">Raccourcis Généraux</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-xs text-slate-600">
|
||||
<div className="flex justify-between">
|
||||
<span>Sauvegarde Automatique</span>
|
||||
<span className="font-mono text-slate-400">Permanente</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Menu Latéral</span>
|
||||
<span>Clic sur le burger</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-slate-200 bg-slate-50 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-900 transition-colors font-medium"
|
||||
>
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpModal;
|
||||
Reference in New Issue
Block a user