fix(admin): secure routes, add real IP detection, SMTP header validation, and fix Next.js layout hydration mismatch
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m5s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m5s
This commit is contained in:
@@ -20,8 +20,10 @@ export default function AdminLayout({
|
||||
const [isChecking, setIsChecking] = useState(true);
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
const [persistHydrated, setPersistHydrated] = useState(false);
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
const unsub = useTranslationStore.persist.onFinishHydration(() => {
|
||||
setPersistHydrated(true);
|
||||
});
|
||||
@@ -31,6 +33,10 @@ export default function AdminLayout({
|
||||
return unsub;
|
||||
}, []);
|
||||
|
||||
if (!isMounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const verifyToken = useCallback(async (token: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/v1/admin/verify`, {
|
||||
|
||||
@@ -25,14 +25,14 @@ import { useTranslationStore } from '@/lib/store';
|
||||
import { API_BASE } from '@/lib/config';
|
||||
|
||||
const PRESETS = [
|
||||
{ key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor, templateId: 'technology' },
|
||||
{ key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale, templateId: 'legal' },
|
||||
{ key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope, templateId: 'medical' },
|
||||
{ key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3, templateId: 'finance' },
|
||||
{ key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone, templateId: 'marketing' },
|
||||
{ key: 'hr', title: 'RH / Ressources Humaines', desc: 'Contrats, politiques, recrutement', icon: Users, templateId: 'hr' },
|
||||
{ key: 'scientific', title: 'Scientifique / Recherche', desc: 'Publications, thèses, articles', icon: FlaskConical, templateId: 'scientific' },
|
||||
{ key: 'ecommerce', title: 'E-commerce / Vente', desc: 'Boutiques en ligne, catalogues, CRM', icon: ShoppingCart, templateId: 'ecommerce' },
|
||||
{ key: 'it', titleKey: 'glossaries.presets.it.title', descKey: 'glossaries.presets.it.desc', icon: Monitor, templateId: 'technology' },
|
||||
{ key: 'legal', titleKey: 'glossaries.presets.legal.title', descKey: 'glossaries.presets.legal.desc', icon: Scale, templateId: 'legal' },
|
||||
{ key: 'medical', titleKey: 'glossaries.presets.medical.title', descKey: 'glossaries.presets.medical.desc', icon: Stethoscope, templateId: 'medical' },
|
||||
{ key: 'finance', titleKey: 'glossaries.presets.finance.title', descKey: 'glossaries.presets.finance.desc', icon: BarChart3, templateId: 'finance' },
|
||||
{ key: 'marketing', titleKey: 'glossaries.presets.marketing.title', descKey: 'glossaries.presets.marketing.desc', icon: Megaphone, templateId: 'marketing' },
|
||||
{ key: 'hr', titleKey: 'glossaries.presets.hr.title', descKey: 'glossaries.presets.hr.desc', icon: Users, templateId: 'hr' },
|
||||
{ key: 'scientific', titleKey: 'glossaries.presets.scientific.title', descKey: 'glossaries.presets.scientific.desc', icon: FlaskConical, templateId: 'scientific' },
|
||||
{ key: 'ecommerce', titleKey: 'glossaries.presets.ecommerce.title', descKey: 'glossaries.presets.ecommerce.desc', icon: ShoppingCart, templateId: 'ecommerce' },
|
||||
];
|
||||
|
||||
export default function GlossariesPage() {
|
||||
@@ -120,7 +120,7 @@ export default function GlossariesPage() {
|
||||
toast({
|
||||
title: t('context.presets.created'),
|
||||
description: t('context.presets.createdDesc', {
|
||||
name: glossary?.name ?? preset.title,
|
||||
name: glossary?.name ?? t(preset.titleKey),
|
||||
count: String(glossary?.terms?.length ?? 0),
|
||||
}),
|
||||
});
|
||||
@@ -228,7 +228,7 @@ export default function GlossariesPage() {
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-muted border-t-brand-accent mx-auto"></div>
|
||||
<p className="text-xs text-brand-dark/40 dark:text-white/40 font-light">Chargement...</p>
|
||||
<p className="text-xs text-brand-dark/40 dark:text-white/40 font-light">{t('glossaries.loading')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -280,16 +280,16 @@ export default function GlossariesPage() {
|
||||
<div className="mb-10 p-5 rounded-2xl bg-brand-accent/5 dark:bg-brand-accent/10 border border-brand-accent/20 dark:border-brand-accent/15">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Info size={15} className="text-brand-accent shrink-0" />
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-brand-accent">Comment ces paramètres sont utilisés</span>
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-brand-accent">{t('glossaries.howItWorks.title')}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{/* Step 1 */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center text-[11px] font-black shrink-0 mt-0.5">1</div>
|
||||
<div>
|
||||
<p className="text-xs font-bold text-brand-dark dark:text-white mb-1">Configurez ici</p>
|
||||
<p className="text-xs font-bold text-brand-dark dark:text-white mb-1">{t('glossaries.howItWorks.step1Title')}</p>
|
||||
<p className="text-[11px] text-brand-dark/55 dark:text-white/50 font-light leading-relaxed">
|
||||
Rédigez vos instructions de contexte ou créez/importez un glossaire de termes.
|
||||
{t('glossaries.howItWorks.step1Desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -301,22 +301,22 @@ export default function GlossariesPage() {
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center text-[11px] font-black shrink-0 mt-0.5">2</div>
|
||||
<div>
|
||||
<p className="text-xs font-bold text-brand-dark dark:text-white mb-1">Activez dans Traduire</p>
|
||||
<p className="text-xs font-bold text-brand-dark dark:text-white mb-1">{t('glossaries.howItWorks.step2Title')}</p>
|
||||
<p className="text-[11px] text-brand-dark/55 dark:text-white/50 font-light leading-relaxed">
|
||||
Sur la page de traduction, dans la colonne de droite, sélectionnez votre glossaire.
|
||||
{t('glossaries.howItWorks.step2Desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-brand-accent/10 flex items-center justify-between">
|
||||
<p className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light">
|
||||
⚠️ Les instructions de contexte s'appliquent <strong>automatiquement</strong> à toutes vos traductions IA une fois enregistrées. Les glossaires doivent être <strong>sélectionnés manuellement</strong> sur la page Traduire.
|
||||
{t('glossaries.howItWorks.warning')}
|
||||
</p>
|
||||
<Link
|
||||
href="/dashboard/translate"
|
||||
className="ml-4 shrink-0 flex items-center gap-1.5 text-[11px] font-bold text-brand-accent hover:underline"
|
||||
>
|
||||
Aller à Traduire <ExternalLink size={11} />
|
||||
{t('glossaries.howItWorks.goToTranslate')} <ExternalLink size={11} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -337,16 +337,16 @@ export default function GlossariesPage() {
|
||||
{promptHasUnsavedChanges ? (
|
||||
<span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-amber-600 dark:text-amber-400 bg-amber-500/10 px-3 py-1 rounded-full border border-amber-500/20">
|
||||
<AlertCircle size={11} />
|
||||
Non enregistré
|
||||
{t('glossaries.status.unsaved')}
|
||||
</span>
|
||||
) : promptIsActive ? (
|
||||
<span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-3 py-1 rounded-full border border-emerald-500/20">
|
||||
<CheckCircle2 size={11} />
|
||||
Actif · s'applique à toutes les traductions IA
|
||||
{t('glossaries.status.active')}
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-brand-dark/30 dark:text-white/30 bg-brand-muted dark:bg-white/5 px-3 py-1 rounded-full border border-black/5 dark:border-white/5">
|
||||
Inactif
|
||||
{t('glossaries.status.inactive')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -354,10 +354,10 @@ export default function GlossariesPage() {
|
||||
{/* Explanation box */}
|
||||
<div className="mb-5 p-3.5 rounded-xl bg-brand-muted/40 dark:bg-white/[0.03] border border-black/5 dark:border-white/5">
|
||||
<p className="text-[11px] text-brand-dark/60 dark:text-white/50 font-light leading-relaxed">
|
||||
<strong className="font-bold text-brand-dark/80 dark:text-white/80">À quoi ça sert ?</strong> Ces instructions sont envoyées automatiquement à l'IA avant chaque traduction, sans que vous ayez besoin de faire quoi que ce soit sur la page Traduire. Utilisez-les pour guider le style, le registre ou la terminologie générale.
|
||||
<strong className="font-bold text-brand-dark/80 dark:text-white/80">{t('glossaries.instructions.whatForBold')}</strong> {t('glossaries.instructions.whatForDesc')}
|
||||
</p>
|
||||
<p className="text-[11px] text-brand-accent/80 dark:text-brand-accent/70 font-medium mt-2 italic">
|
||||
Exemple : « Vous traduisez des rapports financiers. Soyez formel, précis et conservez tous les chiffres. »
|
||||
{t('glossaries.instructions.example')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -369,14 +369,14 @@ export default function GlossariesPage() {
|
||||
/>
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<p className="text-[10px] text-brand-dark/30 dark:text-white/25 font-light">
|
||||
{systemPrompt.length > 0 ? `${systemPrompt.length} caractères` : 'Vide — aucune instruction envoyée à l\'IA'}
|
||||
{systemPrompt.length > 0 ? t('glossaries.instructions.charCount', { count: systemPrompt.length }) : t('glossaries.instructions.emptyHint')}
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleClearPrompt}
|
||||
className="px-5 py-2.5 bg-brand-muted dark:bg-white/5 text-brand-dark/50 dark:text-white/40 rounded-lg text-xs font-bold uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all cursor-pointer"
|
||||
>
|
||||
<Trash2 size={12} className="inline mr-1.5" />Tout effacer
|
||||
<Trash2 size={12} className="inline mr-1.5" />{t('glossaries.instructions.clearAll')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSavePrompt}
|
||||
@@ -384,9 +384,9 @@ export default function GlossariesPage() {
|
||||
className="premium-button px-8 py-2.5 text-xs uppercase tracking-widest !rounded-lg flex items-center gap-2 disabled:opacity-50 cursor-pointer font-bold"
|
||||
>
|
||||
{isSavingPrompt
|
||||
? <><Loader2 size={14} className="animate-spin" /> Enregistrement…</>
|
||||
? <><Loader2 size={14} className="animate-spin" /> {t('glossaries.instructions.saving')}</>
|
||||
: promptSaved
|
||||
? <><CheckCircle2 size={14} /> Enregistré</>
|
||||
? <><CheckCircle2 size={14} /> {t('glossaries.instructions.saved')}</>
|
||||
: <><Save size={14} /> {t('context.save')}</>
|
||||
}
|
||||
</button>
|
||||
@@ -406,12 +406,12 @@ export default function GlossariesPage() {
|
||||
{/* Explanation box */}
|
||||
<div className="mb-6 p-3.5 rounded-xl bg-brand-muted/40 dark:bg-white/[0.03] border border-black/5 dark:border-white/5">
|
||||
<p className="text-[11px] text-brand-dark/60 dark:text-white/50 font-light leading-relaxed">
|
||||
<strong className="font-bold text-brand-dark/80 dark:text-white/80">À quoi ça sert ?</strong> Cliquer sur une carte crée un glossaire pré-rempli avec les termes spécialisés du domaine. Ce glossaire apparaîtra dans vos glossaires ci-dessous, et vous pourrez le <strong>sélectionner manuellement</strong> sur la page Traduire pour forcer des traductions de termes précis.
|
||||
<strong className="font-bold text-brand-dark/80 dark:text-white/80">{t('glossaries.presets.whatForBold')}</strong> {t('glossaries.presets.whatForDesc')}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-2.5">
|
||||
<MousePointerClick size={11} className="text-brand-accent shrink-0" />
|
||||
<p className="text-[11px] text-brand-accent/80 font-medium">
|
||||
Cliquez sur une carte → glossaire créé → sélectionnez-le dans Traduire
|
||||
{t('glossaries.presets.clickHint')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -431,14 +431,14 @@ export default function GlossariesPage() {
|
||||
<div className="p-1.5 bg-brand-accent/10 rounded-lg text-brand-accent group-hover:scale-110 transition-transform">
|
||||
{isCreatingThis ? <Loader2 size={16} className="animate-spin" /> : <Icon size={16} />}
|
||||
</div>
|
||||
{isCreatingThis && <span className="text-[10px] text-brand-accent font-bold uppercase">Création…</span>}
|
||||
{isCreatingThis && <span className="text-[10px] text-brand-accent font-bold uppercase">{t('glossaries.presets.creating')}</span>}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-brand-dark dark:text-white mb-1">
|
||||
{p.title}
|
||||
{t(p.titleKey)}
|
||||
</h4>
|
||||
<p className="text-[10px] text-brand-dark/45 dark:text-white/45 leading-normal font-light">
|
||||
{p.desc}
|
||||
{t(p.descKey)}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
@@ -452,18 +452,18 @@ export default function GlossariesPage() {
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div>
|
||||
<h2 className="text-lg font-serif font-medium text-brand-dark dark:text-white tracking-tight">
|
||||
Vos <span className="italic">glossaires</span>
|
||||
{t('glossaries.grid.title')} <span className="italic">{t('glossaries.grid.titleHighlight')}</span>
|
||||
</h2>
|
||||
<p className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light mt-1">
|
||||
{glossaries.length > 0
|
||||
? `${glossaries.length} glossaire${glossaries.length > 1 ? 's' : ''} — cliquez sur une carte pour la modifier`
|
||||
: 'Créez votre premier glossaire ou importez un preset ci-dessus'}
|
||||
? t('glossaries.grid.countWithAction', { count: glossaries.length, plural: glossaries.length > 1 ? 's' : '' })
|
||||
: t('glossaries.grid.emptyAction')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{currentTargetInfo && (
|
||||
<span className="flex items-center gap-1.5 text-[10px] font-bold text-brand-dark/50 dark:text-white/40 bg-brand-muted dark:bg-white/5 border border-black/5 dark:border-white/5 px-3 py-1.5 rounded-full">
|
||||
<span>Traduction active :</span>
|
||||
<span>{t('glossaries.grid.activeTranslation')}</span>
|
||||
<span>{currentTargetInfo.flag} {currentTargetInfo.label}</span>
|
||||
</span>
|
||||
)}
|
||||
@@ -473,7 +473,7 @@ export default function GlossariesPage() {
|
||||
className="flex items-center gap-1.5 text-[11px] font-bold text-brand-accent hover:underline shrink-0"
|
||||
>
|
||||
<ExternalLink size={12} />
|
||||
Aller à Traduire pour activer
|
||||
{t('glossaries.grid.goToTranslate')}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
@@ -512,12 +512,12 @@ export default function GlossariesPage() {
|
||||
{/* Match / mismatch badge */}
|
||||
{matchesTarget && (
|
||||
<div className="absolute top-3 right-3 flex items-center gap-1 bg-brand-accent/10 text-brand-accent px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider">
|
||||
<CheckCircle2 size={9} /> Compatible
|
||||
<CheckCircle2 size={9} /> {t('glossaries.badge.compatible')}
|
||||
</div>
|
||||
)}
|
||||
{mismatch && (
|
||||
<div className="absolute top-3 right-3 flex items-center gap-1 bg-amber-500/10 text-amber-600 dark:text-amber-400 px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider">
|
||||
<AlertCircle size={9} /> Autre cible
|
||||
<AlertCircle size={9} /> {t('glossaries.badge.otherTarget')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -556,7 +556,7 @@ export default function GlossariesPage() {
|
||||
onClick={() => handleEditClick(glossary.id)}
|
||||
className="flex-1 py-2 px-3 rounded-lg bg-brand-muted/60 dark:bg-white/5 hover:bg-brand-accent/10 dark:hover:bg-brand-accent/15 text-brand-dark/70 dark:text-white/60 hover:text-brand-accent text-[10px] font-bold uppercase tracking-wider transition-all cursor-pointer flex items-center justify-center gap-1.5"
|
||||
>
|
||||
<Save size={10} /> Modifier les termes
|
||||
<Save size={10} /> {t('glossaries.card.editTerms')}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
@@ -565,7 +565,7 @@ export default function GlossariesPage() {
|
||||
}}
|
||||
className="py-2 px-3 rounded-lg bg-red-500/5 hover:bg-red-500 hover:text-white text-red-500 text-[10px] font-bold uppercase tracking-wider transition-all cursor-pointer flex items-center gap-1.5"
|
||||
>
|
||||
<Trash2 size={10} /> Supprimer
|
||||
<Trash2 size={10} /> {t('glossaries.card.delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -162,10 +162,10 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
setIsOpen(false);
|
||||
} else {
|
||||
const errData = await res.json().catch(() => null);
|
||||
setError(errData?.message || `Import failed (${res.status})`);
|
||||
setError(errData?.message || t('translate.glossary.importFailed').replace('{status}', String(res.status)));
|
||||
}
|
||||
} catch {
|
||||
setError('Network error');
|
||||
setError(t('translate.glossary.networkError'));
|
||||
} finally {
|
||||
setImportingId(null);
|
||||
}
|
||||
@@ -217,10 +217,10 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
fetchData();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => null);
|
||||
setError(errData?.message || 'Erreur lors de l\'ajout du terme');
|
||||
setError(errData?.message || t('translate.glossary.addTermError'));
|
||||
}
|
||||
} catch {
|
||||
setError('Erreur réseau');
|
||||
setError(t('translate.glossary.networkError'));
|
||||
} finally {
|
||||
setIsAddingTerm(false);
|
||||
}
|
||||
@@ -316,7 +316,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
{mode === 'classic' ? (
|
||||
<div className="p-2.5 bg-brand-dark/5 dark:bg-white/5 rounded-lg text-center">
|
||||
<span className="text-xs font-black uppercase opacity-45 block">
|
||||
Moteur neutre sans glossaire (IA uniquement)
|
||||
{t('translate.glossary.classicMode') || 'Moteur neutre sans glossaire (IA uniquement)'}
|
||||
</span>
|
||||
</div>
|
||||
) : !isPro ? (
|
||||
@@ -330,7 +330,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
|
||||
{/* Help Info text */}
|
||||
<p className="text-[10.5px] text-brand-dark/60 dark:text-white/40 leading-normal font-light">
|
||||
Le glossaire force la traduction de termes précis. Choisissez un glossaire dont la <strong>langue source</strong> correspond à la langue d'origine de votre document.
|
||||
{t('translate.glossary.helpText') || 'Le glossaire force la traduction de termes précis. Choisissez un glossaire dont la langue source correspond à la langue d\'origine de votre document.'}
|
||||
</p>
|
||||
|
||||
{/* Mismatch Warning — source language */}
|
||||
@@ -338,7 +338,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
<div className="flex items-start gap-1.5 p-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-600 dark:text-amber-400 text-[10px] leading-normal font-medium animate-fade-in">
|
||||
<span className="shrink-0 text-amber-500">⚠️</span>
|
||||
<span>
|
||||
<strong>Attention :</strong> Ce glossaire utilise la langue source <strong>{getFlag(selected.source_language)} {selected.source_language.toUpperCase()}</strong>, mais votre document est configuré en <strong>{getFlag(sourceLang)} {sourceLang.toUpperCase()}</strong>.
|
||||
<strong>{t('translate.glossary.sourceWarning') || 'Attention :'} Ce glossaire utilise la langue source</strong> <strong>{getFlag(selected.source_language)} {selected.source_language.toUpperCase()}</strong>, {t('translate.glossary.sourceWarningBut') || 'mais votre document est configuré en'} <strong>{getFlag(sourceLang)} {sourceLang.toUpperCase()}</strong>.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -348,7 +348,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
<div className="flex items-start gap-1.5 p-2 rounded-lg bg-red-500/10 border border-red-500/20 text-red-600 dark:text-red-400 text-[10px] leading-normal font-medium animate-fade-in">
|
||||
<span className="shrink-0">🎯</span>
|
||||
<span>
|
||||
<strong>Incompatibilité de cible :</strong> Ce glossaire est prévu pour traduire vers <strong>{getFlag(selected.target_language)} {selected.target_language.toUpperCase()}</strong>, mais votre document cible <strong>{targetFlag} {targetLang.toUpperCase()}</strong>. Les termes risquent de ne pas être pertinents.
|
||||
<strong>{t('translate.glossary.targetWarning') || 'Incompatibilité de cible :'}</strong> <strong>{getFlag(selected.target_language)} {selected.target_language.toUpperCase()}</strong>, {t('translate.glossary.targetWarningBut') || 'mais votre document cible'} <strong>{targetFlag} {targetLang.toUpperCase()}</strong>. {t('translate.glossary.targetWarningEnd') || 'Les termes risquent de ne pas être pertinents.'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -367,12 +367,12 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
>
|
||||
<div className="text-left min-w-0 flex-1 pr-2">
|
||||
<span className="text-xs font-bold text-brand-dark dark:text-white tracking-tight block truncate">
|
||||
{selected ? selected.name : (isLoading ? "Chargement..." : "Sélectionner un glossaire...")}
|
||||
{selected ? selected.name : (isLoading ? t('translate.glossary.loading') || 'Chargement...' : t('translate.glossary.selectPlaceholder') || 'Sélectionner un glossaire...')}
|
||||
</span>
|
||||
<span className="text-[10px] font-extrabold uppercase tracking-wider text-brand-dark/40 dark:text-white/40 block mt-0.5">
|
||||
{selected
|
||||
? `${getFlag(selected.source_language)} ➜ ${selected.target_language === 'multi' ? '🌐 MULTILINGUE' : getFlag(selected.target_language || targetLang)} • ${selected.terms_count} termes`
|
||||
: (filteredGlossaries.length > 0 || filteredTemplates.length > 0 ? "Sélectionnez un glossaire" : "Aucun glossaire disponible")
|
||||
? `${getFlag(selected.source_language)} ➜ ${selected.target_language === 'multi' ? `🌐 ${t('translate.glossary.multilingual') || 'MULTILINGUE'}` : getFlag(selected.target_language || targetLang)} • ${selected.terms_count} ${t('translate.glossary.terms') || 'termes'}`
|
||||
: (filteredGlossaries.length > 0 || filteredTemplates.length > 0 ? t('translate.glossary.select') || 'Sélectionnez un glossaire' : t('translate.glossary.noGlossaryAvailable') || 'Aucun glossaire disponible')
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
@@ -391,7 +391,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
{sourceLang !== 'auto' && (glossaries.length > 0 || templates.length > 0) && (
|
||||
<div className="px-2 py-1.5 border-b border-black/[0.03] dark:border-white/[0.03] flex justify-between items-center mb-1">
|
||||
<span className="text-[10px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">
|
||||
Filtrer par langue ({sourceFlag})
|
||||
{t('translate.glossary.filterByLang') || 'Filtrer par langue'} ({sourceFlag})
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@@ -401,7 +401,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
filterByLang ? "bg-brand-accent/10 text-brand-accent" : "bg-brand-dark/10 dark:bg-white/10 text-brand-dark/50 dark:text-white/50"
|
||||
)}
|
||||
>
|
||||
{filterByLang ? "Actif" : "Inactif"}
|
||||
{filterByLang ? t('translate.glossary.active') || 'Actif' : t('translate.glossary.inactive') || 'Inactif'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -410,7 +410,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
{filteredGlossaries.length > 0 && (
|
||||
<div className="mb-2">
|
||||
<div className="px-2 py-1 text-[10px] font-bold text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">
|
||||
Mes Glossaires
|
||||
{t('translate.glossary.myGlossaries') || 'Mes Glossaires'}
|
||||
</div>
|
||||
{filteredGlossaries.map(g => {
|
||||
const flag = getFlag(g.source_language);
|
||||
@@ -433,7 +433,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
<div className="text-left min-w-0 flex-1 pr-2">
|
||||
<span className="text-xs font-bold block leading-none truncate">{g.name}</span>
|
||||
<span className="text-[10px] uppercase tracking-wider text-brand-dark/40 dark:text-white/45 font-bold block mt-1">
|
||||
{flag} ➜ {g.target_language === 'multi' ? '🌐 MULTILINGUE' : getFlag(g.target_language || targetLang)} • {g.terms_count} termes
|
||||
{flag} ➜ {g.target_language === 'multi' ? `🌐 ${t('translate.glossary.multilingual') || 'MULTILINGUE'}` : getFlag(g.target_language || targetLang)} • {g.terms_count} {t('translate.glossary.terms') || 'termes'}
|
||||
</span>
|
||||
</div>
|
||||
{isSelected && <Check size={12} className="text-brand-accent shrink-0" />}
|
||||
@@ -447,7 +447,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
{filteredTemplates.length > 0 && (
|
||||
<div>
|
||||
<div className="px-2 py-1 text-[10px] font-bold text-brand-dark/40 dark:text-white/40 uppercase tracking-widest border-t border-black/[0.03] dark:border-white/[0.03] pt-2 mt-1">
|
||||
Modèles disponibles
|
||||
{t('translate.glossary.availableTemplates') || 'Modèles disponibles'}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-0.5">
|
||||
{filteredTemplates.map(tmpl => {
|
||||
@@ -457,7 +457,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
);
|
||||
const isAlreadySelected = existingGlossary?.id === glossaryId;
|
||||
const flag = getFlag(tmpl.source_lang);
|
||||
const tFlag = tmpl.target_lang === 'multi' ? '🌐 MULTILINGUE' : getFlag(tmpl.target_lang);
|
||||
const tFlag = tmpl.target_lang === 'multi' ? `🌐 ${t('translate.glossary.multilingual') || 'MULTILINGUE'}` : getFlag(tmpl.target_lang);
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -481,10 +481,10 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
>
|
||||
<div className="text-left min-w-0 flex-1 pr-2">
|
||||
<span className="text-xs font-bold block leading-none truncate">
|
||||
{isImporting ? 'Importation...' : tmpl.name.split('/')[0].trim()}
|
||||
{isImporting ? t('translate.glossary.importing') || 'Importation...' : tmpl.name.split('/')[0].trim()}
|
||||
</span>
|
||||
<span className="text-[10px] uppercase tracking-wider text-brand-dark/40 dark:text-white/45 font-bold block mt-1">
|
||||
{flag} ➜ {tFlag} • {tmpl.terms_count} termes {existingGlossary ? '(Importé)' : ''}
|
||||
{flag} ➜ {tFlag} • {tmpl.terms_count} {t('translate.glossary.terms') || 'termes'} {existingGlossary ? t('translate.glossary.imported') || '(Importé)' : ''}
|
||||
</span>
|
||||
</div>
|
||||
{isImporting ? (
|
||||
@@ -503,14 +503,14 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
{filteredGlossaries.length === 0 && filteredTemplates.length === 0 && (
|
||||
<div className="px-2.5 py-4 text-center">
|
||||
<p className="text-xs text-brand-dark/45 dark:text-white/45 italic mb-3 font-light">
|
||||
Aucun glossaire ni modèle pour la langue source {sourceFlag || sourceLang.toUpperCase()}.
|
||||
{t('translate.glossary.noGlossaryForSource') || 'Aucun glossaire ni modèle pour la langue source'} {sourceFlag || sourceLang.toUpperCase()}.
|
||||
</p>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<a
|
||||
href={`/dashboard/glossaries?new=true&source=${sourceLang}`}
|
||||
className="w-full py-2 px-2 bg-brand-dark dark:bg-white text-white dark:text-brand-dark hover:opacity-90 rounded-lg text-xs font-bold uppercase tracking-wider block text-center transition-opacity cursor-pointer"
|
||||
>
|
||||
Créer un glossaire {sourceLang === 'auto' ? '' : sourceLang.toUpperCase()} ➔
|
||||
{t('translate.glossary.createGlossary') || 'Créer un glossaire'} {sourceLang === 'auto' ? '' : sourceLang.toUpperCase()} ➔
|
||||
</a>
|
||||
{filterByLang && (glossaries.length > 0 || templates.length > 0) && (
|
||||
<button
|
||||
@@ -518,7 +518,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
onClick={() => setFilterByLang(false)}
|
||||
className="w-full py-2 px-2 bg-brand-muted dark:bg-white/5 hover:bg-brand-muted/70 text-brand-dark dark:text-white rounded-lg text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
>
|
||||
Afficher tous les glossaires
|
||||
{t('translate.glossary.showAll') || 'Afficher tous les glossaires'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -533,16 +533,16 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
<div className="bg-white/80 dark:bg-[#1a1a1a]/40 rounded-lg p-2.5 border border-black/[0.02] dark:border-white/[0.02] space-y-2">
|
||||
<div className="flex justify-between items-center border-b border-black/[0.02] dark:border-white/[0.02] pb-1">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-brand-dark/30 dark:text-white/30 block">
|
||||
Aperçu des correspondances actives :
|
||||
{t('translate.glossary.activePreview') || 'Aperçu des correspondances actives :'}
|
||||
</span>
|
||||
<span className="text-xs font-bold text-brand-dark/40 dark:text-white/40">
|
||||
{selectedGlossaryDetail?.terms?.length || selected.terms_count} au total
|
||||
{selectedGlossaryDetail?.terms?.length || selected.terms_count} {t('translate.glossary.total') || 'au total'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isLoadingDetail ? (
|
||||
<div className="flex items-center justify-center py-3 gap-1.5 text-xs text-brand-dark/40 dark:text-white/30 font-light">
|
||||
<Loader2 size={12} className="animate-spin text-brand-accent" /> Chargement...
|
||||
<Loader2 size={12} className="animate-spin text-brand-accent" /> {t('translate.glossary.loading') || 'Chargement...'}
|
||||
</div>
|
||||
) : selectedGlossaryDetail?.terms && selectedGlossaryDetail.terms.length > 0 ? (
|
||||
<div className="grid grid-cols-1 gap-1 max-h-[120px] overflow-y-auto pr-1">
|
||||
@@ -560,12 +560,12 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
})}
|
||||
{selectedGlossaryDetail.terms.length > 4 && (
|
||||
<span className="text-[10px] text-brand-dark/40 dark:text-white/40 block text-right font-medium mt-1">
|
||||
+ {selectedGlossaryDetail.terms.length - 4} autres termes
|
||||
+ {selectedGlossaryDetail.terms.length - 4} {t('translate.glossary.moreTerms') || 'autres termes'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="py-3 text-xs text-brand-dark/40 dark:text-white/30 italic text-center font-light">Aucun terme dans ce glossaire.</p>
|
||||
<p className="py-3 text-xs text-brand-dark/40 dark:text-white/30 italic text-center font-light">{t('translate.glossary.noTerms') || 'Aucun terme dans ce glossaire.'}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -576,7 +576,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Terme Source"
|
||||
placeholder={t('translate.glossary.sourceTerm') || 'Terme Source'}
|
||||
value={newSource}
|
||||
onChange={(e) => setNewSource(e.target.value)}
|
||||
disabled={isAddingTerm || disabled}
|
||||
@@ -586,7 +586,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Traduction"
|
||||
placeholder={t('translate.glossary.translation') || 'Traduction'}
|
||||
value={newTarget}
|
||||
onChange={(e) => setNewTarget(e.target.value)}
|
||||
disabled={isAddingTerm || disabled}
|
||||
@@ -596,7 +596,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
type="submit"
|
||||
disabled={isAddingTerm || disabled || !newSource.trim() || !newTarget.trim()}
|
||||
className="px-3 bg-brand-dark dark:bg-white text-white dark:text-brand-dark rounded-lg flex items-center justify-center disabled:opacity-35 transition-colors cursor-pointer shrink-0"
|
||||
title="Ajouter le terme"
|
||||
title={t('translate.glossary.addTerm') || 'Ajouter le terme'}
|
||||
>
|
||||
{isAddingTerm ? (
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
@@ -610,7 +610,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, mode, glossary
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2.5 bg-brand-dark/5 dark:bg-white/5 rounded-lg text-center animate-fade-in">
|
||||
<span className="text-xs font-black uppercase opacity-40">Moteur neutre sans glossaire appliqué</span>
|
||||
<span className="text-xs font-black uppercase opacity-40">{t('translate.glossary.disabledMode') || 'Moteur neutre sans glossaire appliqué'}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user