feat: implement core application structure, UI components, internationalization, and database seeding.
This commit is contained in:
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
|
||||
import { BookProject, BookSettings } from '@/lib/types';
|
||||
import { GENRES, TONES, POV_OPTIONS, TENSE_OPTIONS } from '@/lib/constants';
|
||||
import { Settings, Book, Feather, Users, Clock, Target, Hash } from 'lucide-react';
|
||||
import { useLanguage } from '@/providers/LanguageProvider';
|
||||
import { TranslationKey } from '@/lib/i18n/translations';
|
||||
|
||||
interface BookSettingsProps {
|
||||
project: BookProject;
|
||||
@@ -23,6 +25,7 @@ const DEFAULT_SETTINGS: BookSettings = {
|
||||
};
|
||||
|
||||
const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate, onDeleteProject }) => {
|
||||
const { t } = useLanguage();
|
||||
const [settings, setSettings] = useState<BookSettings>(project.settings || DEFAULT_SETTINGS);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
|
||||
@@ -51,19 +54,19 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
<Settings size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Paramètres Généraux du Roman</h2>
|
||||
<p className="text-slate-400 text-sm">Définissez l'identité, le ton et les règles de votre œuvre pour guider l'IA.</p>
|
||||
<h2 className="text-2xl font-bold">{t('book_settings.title')}</h2>
|
||||
<p className="text-slate-400 text-sm">{t('book_settings.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 space-y-8">
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-bold text-theme-text flex items-center gap-2 border-b border-theme-border pb-2">
|
||||
<Book size={18} className="text-blue-600" /> Informations de Base
|
||||
<Book size={18} className="text-blue-600" /> {t('book_settings.basic_info')}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Titre du Roman</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.novel_title')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={project.title}
|
||||
@@ -72,7 +75,7 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Nom d'Auteur</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.author_name')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={project.author}
|
||||
@@ -82,58 +85,58 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Synopsis Global</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.global_synopsis')}</label>
|
||||
<textarea
|
||||
value={settings.synopsis}
|
||||
onChange={(e) => handleChange('synopsis', e.target.value)}
|
||||
className="w-full p-3 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none h-24 text-sm transition-colors duration-300"
|
||||
placeholder="De quoi parle votre histoire dans les grandes lignes ?"
|
||||
placeholder={t('book_settings.synopsis_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-bold text-theme-text flex items-center gap-2 border-b border-theme-border pb-2">
|
||||
<Target size={18} className="text-red-500" /> Genre & Public
|
||||
<Target size={18} className="text-red-500" /> {t('book_settings.genre_audience')}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Genre Principal</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.main_genre')}</label>
|
||||
<input
|
||||
type="text"
|
||||
list="genre-suggestions"
|
||||
value={settings.genre}
|
||||
onChange={(e) => handleChange('genre', e.target.value)}
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Fantasy"
|
||||
placeholder={t('book_settings.genre_placeholder')}
|
||||
/>
|
||||
<datalist id="genre-suggestions">
|
||||
{GENRES.map(g => <option key={g} value={g} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Sous-Genre</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.sub_genre')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.subGenre || ''}
|
||||
onChange={(e) => handleChange('subGenre', e.target.value)}
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Dark Fantasy"
|
||||
placeholder={t('book_settings.subgenre_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Public Cible</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.target_audience')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.targetAudience}
|
||||
onChange={(e) => handleChange('targetAudience', e.target.value)}
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Jeune Adulte, Adulte..."
|
||||
placeholder={t('book_settings.audience_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Thèmes Clés</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.key_themes')}</label>
|
||||
<div className="relative">
|
||||
<Hash size={14} className="absolute left-3 top-3 text-theme-muted" />
|
||||
<input
|
||||
@@ -141,7 +144,7 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
value={settings.themes}
|
||||
onChange={(e) => handleChange('themes', e.target.value)}
|
||||
className="w-full pl-9 p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Vengeance, Rédemption, Voyage initiatique..."
|
||||
placeholder={t('book_settings.themes_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,90 +152,90 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-bold text-theme-text flex items-center gap-2 border-b border-theme-border pb-2">
|
||||
<Feather size={18} className="text-purple-600" /> Narration & Style
|
||||
<Feather size={18} className="text-purple-600" /> {t('book_settings.narration_style')}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1 flex items-center gap-1">
|
||||
<Users size={14} /> Point de Vue (POV)
|
||||
<Users size={14} /> {t('book_settings.pov')}
|
||||
</label>
|
||||
<select
|
||||
value={settings.pov}
|
||||
onChange={(e) => handleChange('pov', e.target.value)}
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
>
|
||||
<option value="">Sélectionner...</option>
|
||||
{POV_OPTIONS.map(o => <option key={o} value={o}>{o}</option>)}
|
||||
<option value="">{t('book_settings.select')}</option>
|
||||
{POV_OPTIONS.map(o => <option key={o} value={o}>{t(`pov_options.${o.toLowerCase().replace(/\s+/g, '_')}` as TranslationKey) || o}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1 flex items-center gap-1">
|
||||
<Clock size={14} /> Temps du récit
|
||||
<Clock size={14} /> {t('book_settings.tense')}
|
||||
</label>
|
||||
<select
|
||||
value={settings.tense}
|
||||
onChange={(e) => handleChange('tense', e.target.value)}
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
>
|
||||
<option value="">Sélectionner...</option>
|
||||
{TENSE_OPTIONS.map(o => <option key={o} value={o}>{o}</option>)}
|
||||
<option value="">{t('book_settings.select')}</option>
|
||||
{TENSE_OPTIONS.map(o => <option key={o} value={o}>{t(`tense_options.${o.toLowerCase().replace(/\s+/g, '_')}` as TranslationKey) || o}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Ton Général</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">{t('book_settings.general_tone')}</label>
|
||||
<input
|
||||
type="text"
|
||||
list="tone-suggestions"
|
||||
value={settings.tone}
|
||||
onChange={(e) => handleChange('tone', e.target.value)}
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Sombre, Ironique..."
|
||||
placeholder={t('book_settings.tone_placeholder')}
|
||||
/>
|
||||
<datalist id="tone-suggestions">
|
||||
{TONES.map(t => <option key={t} value={t} />)}
|
||||
{TONES.map(tOption => <option key={tOption} value={tOption} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">
|
||||
Guide de Style & Instructions IA (Prompt Système)
|
||||
{t('book_settings.style_guide')}
|
||||
</label>
|
||||
<p className="text-xs text-theme-muted mb-2">
|
||||
Ces instructions seront envoyées à l'IA à chaque génération. Décrivez ici le style d'écriture désiré (ex: "phrases courtes", "vocabulaire soutenu", "beaucoup de métaphores").
|
||||
{t('book_settings.style_guide_help')}
|
||||
</p>
|
||||
<textarea
|
||||
value={project.styleGuide || ''}
|
||||
onChange={(e) => handleStyleGuideChange(e.target.value)}
|
||||
className="w-full p-3 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none h-32 text-sm font-mono transition-colors duration-300"
|
||||
placeholder="Ex: Utilise un style descriptif et sensoriel. Évite les adverbes. Le narrateur est cynique."
|
||||
placeholder={t('book_settings.style_guide_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4 pt-8 border-t border-red-200">
|
||||
<h3 className="text-lg font-bold text-red-600 flex items-center gap-2 pb-2">
|
||||
<span className="bg-red-100 p-1 rounded">⚠️</span> Zone de Danger
|
||||
<span className="bg-red-100 p-1 rounded">⚠️</span> {t('book_settings.danger_zone')}
|
||||
</h3>
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-6">
|
||||
<h4 className="font-bold text-red-900 mb-2">Supprimer le projet</h4>
|
||||
<h4 className="font-bold text-red-900 mb-2">{t('book_settings.delete_project')}</h4>
|
||||
<p className="text-sm text-red-700 mb-4">
|
||||
Cette action est irréversible. Toutes les données associées à ce projet (chapitres, entités, idées) seront définitivement effacées.
|
||||
{t('book_settings.delete_warning')}
|
||||
</p>
|
||||
{showDeleteConfirm ? (
|
||||
<div className="flex items-center gap-4 bg-theme-panel p-4 rounded border border-red-200">
|
||||
<span className="text-sm font-bold text-theme-text">Êtes-vous sûr ?</span>
|
||||
<span className="text-sm font-bold text-theme-text">{t('book_settings.are_you_sure')}</span>
|
||||
<button
|
||||
onClick={onDeleteProject}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 text-sm font-bold opacity-90 transition-opacity"
|
||||
>
|
||||
Oui, supprimer définitivement
|
||||
{t('book_settings.confirm_delete')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
className="px-4 py-2 bg-theme-bg text-theme-text border border-theme-border rounded hover:opacity-80 text-sm transition-opacity"
|
||||
>
|
||||
Annuler
|
||||
{t('book_settings.cancel')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
@@ -240,7 +243,7 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="px-4 py-2 bg-theme-panel border border-red-300 text-red-600 rounded hover:bg-red-50 text-sm font-bold transition-colors duration-300"
|
||||
>
|
||||
Supprimer ce projet
|
||||
{t('book_settings.delete_button')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user