fix: compact glossary dropdown, sticky translate button, and mode badge
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m10s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m10s
- Restructure right sidebar as flex-col with scrollable config and fixed translate button (never scrolls away) - Replace expanded GlossarySelector list with compact dropdown (~80px instead of ~400px), collapsible templates section, click-outside close - Add visible Classic/IA mode badge after provider selector with hint about glossary availability for Pro users in classic mode Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { BookText, Plus, Loader2, Lock, Check, AlertCircle } from 'lucide-react';
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { BookText, Plus, Loader2, Check, ChevronDown, X } from 'lucide-react';
|
||||
import { API_BASE } from '@/lib/config';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -39,6 +39,9 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [importingId, setImportingId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [showTemplates, setShowTemplates] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
@@ -68,13 +71,25 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
|
||||
|
||||
useEffect(() => { fetchData(); }, [fetchData]);
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setIsOpen(false);
|
||||
setShowTemplates(false);
|
||||
}
|
||||
}
|
||||
if (isOpen) document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [isOpen]);
|
||||
|
||||
const handleImportTemplate = async (template: TemplateOption) => {
|
||||
// If a glossary with this template's name already exists, just select it
|
||||
const existing = glossaries.find(
|
||||
g => g.name.toLowerCase().includes(template.name.toLowerCase().split('/')[0].trim())
|
||||
);
|
||||
if (existing) {
|
||||
onChange(existing.id);
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -93,13 +108,14 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const newId = data.data?.id;
|
||||
await fetchData(); // Refresh glossary list
|
||||
await fetchData();
|
||||
if (newId) onChange(newId);
|
||||
setIsOpen(false);
|
||||
} else {
|
||||
const errData = await res.json().catch(() => null);
|
||||
setError(errData?.message || `Import failed (${res.status})`);
|
||||
}
|
||||
} catch (e) {
|
||||
} catch {
|
||||
setError('Network error');
|
||||
} finally {
|
||||
setImportingId(null);
|
||||
@@ -116,182 +132,171 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
|
||||
const selected = glossaries.find(g => g.id === glossaryId);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2 relative" ref={containerRef}>
|
||||
<label className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-[0.2em] block">
|
||||
<BookText size={10} className="inline mr-1.5 text-brand-accent" />
|
||||
{t('translate.glossary.title')} <span className="normal-case tracking-normal font-normal text-brand-dark/25 dark:text-white/25">({sourceFlag}→{targetFlag})</span>
|
||||
</label>
|
||||
|
||||
{!isPro ? (
|
||||
<div className="px-5 py-4 bg-brand-muted/50 dark:bg-white/5 rounded-2xl border border-black/5 dark:border-white/10 flex items-center gap-3 opacity-70">
|
||||
<Lock size={12} className="text-brand-dark/30 dark:text-white/30" />
|
||||
<span className="text-[10px] font-bold text-brand-dark/40 dark:text-white/40">
|
||||
{t('translate.glossary.proOnly')}
|
||||
</span>
|
||||
<span className="ml-auto px-2 py-0.5 bg-brand-accent/10 text-brand-accent text-[8px] font-black uppercase tracking-widest rounded">
|
||||
Pro
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="px-4 py-3 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/30 rounded-xl flex items-center gap-2">
|
||||
<AlertCircle size={12} className="text-red-500 shrink-0" />
|
||||
<span className="text-[10px] text-red-600 dark:text-red-400">{error}</span>
|
||||
{/* Dropdown trigger */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={cn(
|
||||
"w-full px-4 py-3 rounded-xl text-left flex items-center gap-3 transition-all border-2",
|
||||
isOpen
|
||||
? "border-brand-accent/30 bg-brand-accent/5"
|
||||
: "bg-brand-muted/50 dark:bg-white/5 border-transparent hover:border-brand-accent/15",
|
||||
disabled && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
{selected ? (
|
||||
<>
|
||||
<div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
|
||||
<Check size={11} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* My glossaries */}
|
||||
{!isLoading && filteredGlossaries.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
|
||||
{t('translate.glossary.myGlossaries') || 'Mes glossaires'}
|
||||
</span>
|
||||
{filteredGlossaries.map(g => {
|
||||
const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
|
||||
const isSelected = g.id === glossaryId;
|
||||
return (
|
||||
<button
|
||||
key={g.id}
|
||||
onClick={() => onChange(isSelected ? null : g.id)}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"w-full px-4 py-3.5 text-left rounded-xl transition-all flex items-center gap-3",
|
||||
isSelected
|
||||
? "bg-brand-accent/10 border-2 border-brand-accent/30 shadow-sm"
|
||||
: "bg-brand-muted/50 dark:bg-white/5 border-2 border-transparent hover:border-brand-accent/15 hover:bg-brand-accent/5",
|
||||
disabled && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
{isSelected ? (
|
||||
<div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
|
||||
<Check size={11} className="text-white" />
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-sm">{flag}</span>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className={cn(
|
||||
"text-[11px] font-bold truncate",
|
||||
isSelected ? "text-brand-accent" : "text-brand-dark/70 dark:text-white/70"
|
||||
)}>
|
||||
{g.name}
|
||||
</div>
|
||||
<div className="text-[9px] text-brand-dark/30 dark:text-white/30 font-normal normal-case">
|
||||
{g.terms_count} {t('translate.glossary.terms')}
|
||||
</div>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<span className="text-[10px] text-brand-accent/50 hover:text-brand-accent font-bold">✕</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[11px] font-bold truncate text-brand-accent">{selected.name}</div>
|
||||
<div className="text-[9px] text-brand-dark/30 dark:text-white/30">{selected.terms_count} {t('translate.glossary.terms')}</div>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); onChange(null); }}
|
||||
className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-brand-dark/20 hover:text-brand-dark hover:bg-brand-muted dark:text-white/20 dark:hover:text-white dark:hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<X size={11} />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-sm">{sourceFlag}</span>
|
||||
<span className="text-[11px] text-brand-dark/40 dark:text-white/40 flex-1">
|
||||
{isLoading ? (
|
||||
<span className="flex items-center gap-1.5"><Loader2 size={10} className="animate-spin" /> {t('translate.glossary.loading')}</span>
|
||||
) : filteredGlossaries.length > 0 ? (
|
||||
t('translate.glossary.selectGlossary') || 'Sélectionner un glossaire…'
|
||||
) : (
|
||||
t('translate.glossary.noGlossaries') || 'Aucun glossaire'
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<ChevronDown size={14} className={cn("shrink-0 text-brand-dark/20 dark:text-white/20 transition-transform", isOpen && "rotate-180")} />
|
||||
</button>
|
||||
|
||||
{/* Also show selected glossary if filtered out */}
|
||||
{selected && !filteredGlossaries.find(g => g.id === selected.id) && (
|
||||
<div className="space-y-1">
|
||||
<span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
|
||||
{t('translate.glossary.myGlossaries') || 'Mes glossaires'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => onChange(null)}
|
||||
disabled={disabled}
|
||||
className="w-full px-4 py-3.5 text-left rounded-xl transition-all flex items-center gap-3 bg-brand-accent/10 border-2 border-brand-accent/30 shadow-sm"
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
|
||||
<Check size={11} className="text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[11px] font-bold truncate text-brand-accent">{selected.name}</div>
|
||||
<div className="text-[9px] text-brand-dark/30 dark:text-white/30 font-normal normal-case">
|
||||
{selected.terms_count} {t('translate.glossary.terms')}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] text-brand-accent/50 hover:text-brand-accent font-bold">✕</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<p className="text-[10px] text-red-500 pl-1">{error}</p>
|
||||
)}
|
||||
|
||||
{/* Templates */}
|
||||
{!isLoading && templates.length > 0 && (
|
||||
<div className="space-y-2 pt-2 border-t border-black/5 dark:border-white/5">
|
||||
<span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
|
||||
{t('translate.glossary.fromTemplate') || 'Créer depuis un template'}
|
||||
</span>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{templates.map(tmpl => {
|
||||
const isImporting = importingId === tmpl.id;
|
||||
const existingGlossary = glossaries.find(
|
||||
g => g.name.toLowerCase().includes(tmpl.name.toLowerCase().split('/')[0].trim())
|
||||
);
|
||||
const isAlreadySelected = existingGlossary?.id === glossaryId;
|
||||
{/* Dropdown panel */}
|
||||
{isOpen && !disabled && (
|
||||
<div className="absolute left-0 right-0 z-30 mt-1 bg-white dark:bg-[#1a1a1a] border border-black/10 dark:border-white/10 rounded-2xl shadow-xl overflow-hidden">
|
||||
{/* Glossary list */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{filteredGlossaries.length > 0 ? (
|
||||
<div className="py-1">
|
||||
{filteredGlossaries.map(g => {
|
||||
const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
|
||||
const isSelected = g.id === glossaryId;
|
||||
return (
|
||||
<button
|
||||
key={tmpl.id}
|
||||
onClick={() => {
|
||||
if (existingGlossary) {
|
||||
onChange(isAlreadySelected ? null : existingGlossary.id);
|
||||
} else if (!isImporting) {
|
||||
handleImportTemplate(tmpl);
|
||||
}
|
||||
}}
|
||||
disabled={disabled || isImporting}
|
||||
key={g.id}
|
||||
onClick={() => { onChange(isSelected ? null : g.id); if (!isSelected) setIsOpen(false); }}
|
||||
className={cn(
|
||||
"px-3 py-2.5 text-left rounded-xl transition-all flex items-center gap-2 border",
|
||||
isAlreadySelected
|
||||
? "bg-brand-accent/10 border-brand-accent/30"
|
||||
: existingGlossary
|
||||
? "bg-brand-muted/30 dark:bg-white/5 border-black/5 dark:border-white/5 hover:border-brand-accent/20 hover:bg-brand-accent/5"
|
||||
: isImporting
|
||||
? "bg-brand-accent/5 border-brand-accent/20"
|
||||
: "bg-brand-muted/50 dark:bg-white/5 border-transparent hover:border-brand-accent/20 hover:bg-brand-accent/5",
|
||||
disabled && "opacity-50 cursor-not-allowed"
|
||||
"w-full px-4 py-2.5 text-left flex items-center gap-3 transition-colors",
|
||||
isSelected ? "bg-brand-accent/10" : "hover:bg-brand-muted/50 dark:hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
{isImporting ? (
|
||||
<Loader2 size={12} className="text-brand-accent animate-spin shrink-0" />
|
||||
) : isAlreadySelected ? (
|
||||
{isSelected ? (
|
||||
<div className="w-4 h-4 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
|
||||
<Check size={9} className="text-white" />
|
||||
</div>
|
||||
) : existingGlossary ? (
|
||||
<Check size={12} className="text-brand-dark/30 dark:text-white/30 shrink-0" />
|
||||
) : (
|
||||
<Plus size={12} className="text-brand-accent shrink-0" />
|
||||
<span className="text-xs">{flag}</span>
|
||||
)}
|
||||
<span className={cn(
|
||||
"text-[9px] font-black uppercase tracking-widest truncate",
|
||||
isAlreadySelected ? "text-brand-accent" : "text-brand-dark/50 dark:text-white/50"
|
||||
)}>
|
||||
{tmpl.name.split('/')[0].trim()}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className={cn("text-[11px] font-bold truncate", isSelected ? "text-brand-accent" : "text-brand-dark/70 dark:text-white/70")}>
|
||||
{g.name}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[9px] text-brand-dark/25 dark:text-white/25">{g.terms_count} {t('translate.glossary.terms')}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<p className="px-4 py-3 text-[10px] text-brand-dark/25 dark:text-white/25 italic">
|
||||
{sourceLang !== 'auto'
|
||||
? `${t('translate.glossary.noGlossaryForPair') || 'Aucun glossaire pour'} ${sourceFlag}→${targetFlag}`
|
||||
: (t('translate.glossary.noGlossaries') || 'Aucun glossaire')
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Loading */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center gap-2 px-4 py-3 text-[10px] text-brand-dark/30 dark:text-white/30">
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
{t('translate.glossary.loading') || 'Chargement...'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty */}
|
||||
{!isLoading && filteredGlossaries.length === 0 && !selected && (
|
||||
<p className="text-[10px] text-brand-dark/25 dark:text-white/25 pl-1 italic">
|
||||
{sourceLang !== 'auto'
|
||||
? `${t('translate.glossary.noGlossaryForPair') || 'Aucun glossaire pour'} ${sourceFlag}→${targetFlag}`
|
||||
: (t('translate.glossary.noGlossaries') || 'Aucun glossaire')
|
||||
}
|
||||
</p>
|
||||
{/* Templates section — collapsed by default */}
|
||||
{templates.length > 0 && (
|
||||
<>
|
||||
<div className="border-t border-black/5 dark:border-white/5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowTemplates(!showTemplates)}
|
||||
className="w-full px-4 py-2.5 flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-brand-dark/30 dark:text-white/30 hover:text-brand-accent transition-colors"
|
||||
>
|
||||
<Plus size={10} className="text-brand-accent" />
|
||||
{t('translate.glossary.fromTemplate') || 'Créer depuis un template'}
|
||||
<ChevronDown size={10} className={cn("ml-auto transition-transform", showTemplates && "rotate-180")} />
|
||||
</button>
|
||||
</div>
|
||||
{showTemplates && (
|
||||
<div className="border-t border-black/5 dark:border-white/5 p-2 grid grid-cols-2 gap-1.5 max-h-32 overflow-y-auto">
|
||||
{templates.map(tmpl => {
|
||||
const isImporting = importingId === tmpl.id;
|
||||
const existingGlossary = glossaries.find(
|
||||
g => g.name.toLowerCase().includes(tmpl.name.toLowerCase().split('/')[0].trim())
|
||||
);
|
||||
const isAlreadySelected = existingGlossary?.id === glossaryId;
|
||||
return (
|
||||
<button
|
||||
key={tmpl.id}
|
||||
onClick={() => {
|
||||
if (existingGlossary) {
|
||||
onChange(isAlreadySelected ? null : existingGlossary.id);
|
||||
setIsOpen(false);
|
||||
} else if (!isImporting) {
|
||||
handleImportTemplate(tmpl);
|
||||
}
|
||||
}}
|
||||
disabled={isImporting}
|
||||
className={cn(
|
||||
"px-2.5 py-2 rounded-lg text-left flex items-center gap-1.5 transition-all border",
|
||||
isAlreadySelected
|
||||
? "bg-brand-accent/10 border-brand-accent/20"
|
||||
: "bg-transparent border-transparent hover:bg-brand-accent/5 hover:border-brand-accent/10",
|
||||
isImporting && "opacity-60"
|
||||
)}
|
||||
>
|
||||
{isImporting ? (
|
||||
<Loader2 size={10} className="text-brand-accent animate-spin shrink-0" />
|
||||
) : isAlreadySelected ? (
|
||||
<Check size={10} className="text-brand-accent shrink-0" />
|
||||
) : (
|
||||
<Plus size={10} className="text-brand-accent/50 shrink-0" />
|
||||
)}
|
||||
<span className={cn(
|
||||
"text-[9px] font-bold truncate",
|
||||
isAlreadySelected ? "text-brand-accent" : "text-brand-dark/40 dark:text-white/40"
|
||||
)}>
|
||||
{tmpl.name.split('/')[0].trim()}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -438,116 +438,138 @@ export default function TranslatePage() {
|
||||
|
||||
{/* ── CONFIG (upload / configuring / failed) ──────────── */}
|
||||
{(showUpload || showConfiguring || showFailed) && (
|
||||
<div className="space-y-8">
|
||||
<div className="editorial-card bg-white border-none shadow-editorial dark:bg-[#141414] overflow-hidden">
|
||||
<div className="p-10 pb-6">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] mb-10 text-brand-dark/30 border-b border-black/5 pb-6 dark:text-white/30 dark:border-white/5">
|
||||
{t('landing.translate.configuration')}
|
||||
</h4>
|
||||
<div className="editorial-card bg-white border-none shadow-editorial dark:bg-[#141414] overflow-hidden flex flex-col lg:sticky lg:top-8 lg:max-h-[calc(100vh-6rem)]">
|
||||
{/* Scrollable config content */}
|
||||
<div className="flex-1 overflow-y-auto p-10 pb-6">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] mb-10 text-brand-dark/30 border-b border-black/5 pb-6 dark:text-white/30 dark:border-white/5">
|
||||
{t('landing.translate.configuration')}
|
||||
</h4>
|
||||
|
||||
<div className="space-y-8">
|
||||
<LanguageSelector
|
||||
sourceLang={config.sourceLang} targetLang={config.targetLang}
|
||||
languages={config.languages} isLoading={config.isLoadingLanguages}
|
||||
error={config.languagesError} onSourceChange={config.setSourceLang}
|
||||
onTargetChange={config.setTargetLang}
|
||||
/>
|
||||
<div className="space-y-8">
|
||||
<LanguageSelector
|
||||
sourceLang={config.sourceLang} targetLang={config.targetLang}
|
||||
languages={config.languages} isLoading={config.isLoadingLanguages}
|
||||
error={config.languagesError} onSourceChange={config.setSourceLang}
|
||||
onTargetChange={config.setTargetLang}
|
||||
/>
|
||||
|
||||
<ProviderSelector
|
||||
provider={config.provider} onProviderChange={config.setProvider}
|
||||
availableProviders={config.availableProviders} isLoadingProviders={config.isLoadingProviders}
|
||||
isPro={config.isPro}
|
||||
/>
|
||||
<ProviderSelector
|
||||
provider={config.provider} onProviderChange={config.setProvider}
|
||||
availableProviders={config.availableProviders} isLoadingProviders={config.isLoadingProviders}
|
||||
isPro={config.isPro}
|
||||
/>
|
||||
|
||||
{/* Glossary — Pro + LLM mode only */}
|
||||
{config.isPro && config.mode === 'llm' && (
|
||||
<GlossarySelector
|
||||
sourceLang={config.sourceLang}
|
||||
targetLang={config.targetLang}
|
||||
isPro={config.isPro}
|
||||
glossaryId={config.glossaryId}
|
||||
onChange={config.setGlossaryId}
|
||||
disabled={submit.isSubmitting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* PDF mode selector */}
|
||||
{isPdf && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em] block mb-3 dark:text-white/40">
|
||||
{t('dashboard.translate.pdfMode.title')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPdfMode('layout')}
|
||||
className={cn(
|
||||
'flex flex-col items-start rounded-2xl border-2 p-3 text-start transition-all',
|
||||
pdfMode === 'layout'
|
||||
? 'border-brand-accent bg-brand-accent/5'
|
||||
: 'border-black/5 bg-brand-muted/30 hover:border-brand-accent/20 dark:border-white/10 dark:bg-white/5'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
|
||||
<FileText className="size-4 text-brand-accent" />
|
||||
{t('dashboard.translate.pdfMode.preserveLayout')}
|
||||
</div>
|
||||
<p className="mt-1 text-[9px] text-brand-dark/50 font-bold uppercase tracking-widest leading-relaxed dark:text-white/40">
|
||||
{t('dashboard.translate.pdfMode.preserveLayoutDesc')}
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPdfMode('text_only')}
|
||||
className={cn(
|
||||
'flex flex-col items-start rounded-2xl border-2 p-3 text-start transition-all',
|
||||
pdfMode === 'text_only'
|
||||
? 'border-brand-accent bg-brand-accent/5'
|
||||
: 'border-black/5 bg-brand-muted/30 hover:border-brand-accent/20 dark:border-white/10 dark:bg-white/5'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
|
||||
<Languages className="size-4 text-brand-accent" />
|
||||
{t('dashboard.translate.pdfMode.textOnly')}
|
||||
</div>
|
||||
<p className="mt-1 text-[9px] text-brand-dark/50 font-bold uppercase tracking-widest leading-relaxed dark:text-white/40">
|
||||
{t('dashboard.translate.pdfMode.textOnlyDesc')}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── TRANSLATE BUTTON — sticky at bottom, always visible ── */}
|
||||
<div className="sticky bottom-0 p-6 pt-4 bg-white dark:bg-[#141414] border-t border-black/5 dark:border-white/5">
|
||||
<button
|
||||
disabled={!config.isConfigValid || submit.isSubmitting || !upload.file}
|
||||
onClick={handleTranslate}
|
||||
className={cn(
|
||||
'w-full py-5 rounded-2xl text-[13px] font-black uppercase tracking-[0.2em] flex items-center justify-center gap-3 transition-all duration-200',
|
||||
config.isConfigValid && upload.file && !submit.isSubmitting
|
||||
? 'bg-brand-dark text-white hover:bg-brand-dark/90 shadow-lg shadow-brand-dark/20 dark:bg-brand-accent dark:text-brand-dark dark:hover:bg-brand-accent/90'
|
||||
: 'bg-black/5 dark:bg-white/5 text-brand-dark/25 dark:text-white/25 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{submit.isSubmitting ? (
|
||||
<><Loader2 className="size-5 animate-spin" />Envoi en cours...</>
|
||||
) : (
|
||||
<><ArrowRight size={20} />Lancer la traduction</>
|
||||
)}
|
||||
</button>
|
||||
{!upload.file && (
|
||||
<p className="text-center text-[10px] text-brand-dark/30 dark:text-white/30 mt-2 font-bold uppercase tracking-widest">↑ Déposez d'abord un fichier</p>
|
||||
{/* Active mode badge */}
|
||||
{config.provider && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn(
|
||||
"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[9px] font-black uppercase tracking-[0.15em]",
|
||||
config.mode === 'llm'
|
||||
? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
|
||||
: "bg-brand-muted/50 text-brand-dark/40 dark:bg-white/5 dark:text-white/40 border border-transparent"
|
||||
)}>
|
||||
{config.mode === 'llm' ? (
|
||||
<><Zap size={10} /> Mode IA</>
|
||||
) : (
|
||||
<><Languages size={10} /> Mode Classique</>
|
||||
)}
|
||||
</span>
|
||||
{config.mode === 'classic' && config.isPro && (
|
||||
<span className="text-[9px] text-brand-dark/20 dark:text-white/20 italic">
|
||||
Glossaires disponibles en mode IA
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{upload.file && !config.targetLang && (
|
||||
<p className="text-center text-[10px] text-brand-dark/30 dark:text-white/30 mt-2 font-bold uppercase tracking-widest">↑ Sélectionnez une langue cible</p>
|
||||
|
||||
{/* Glossary — Pro + LLM mode only */}
|
||||
{config.isPro && config.mode === 'llm' && (
|
||||
<GlossarySelector
|
||||
sourceLang={config.sourceLang}
|
||||
targetLang={config.targetLang}
|
||||
isPro={config.isPro}
|
||||
glossaryId={config.glossaryId}
|
||||
onChange={config.setGlossaryId}
|
||||
disabled={submit.isSubmitting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* PDF mode selector */}
|
||||
{isPdf && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em] block mb-3 dark:text-white/40">
|
||||
{t('dashboard.translate.pdfMode.title')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPdfMode('layout')}
|
||||
className={cn(
|
||||
'flex flex-col items-start rounded-2xl border-2 p-3 text-start transition-all',
|
||||
pdfMode === 'layout'
|
||||
? 'border-brand-accent bg-brand-accent/5'
|
||||
: 'border-black/5 bg-brand-muted/30 hover:border-brand-accent/20 dark:border-white/10 dark:bg-white/5'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
|
||||
<FileText className="size-4 text-brand-accent" />
|
||||
{t('dashboard.translate.pdfMode.preserveLayout')}
|
||||
</div>
|
||||
<p className="mt-1 text-[9px] text-brand-dark/50 font-bold uppercase tracking-widest leading-relaxed dark:text-white/40">
|
||||
{t('dashboard.translate.pdfMode.preserveLayoutDesc')}
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPdfMode('text_only')}
|
||||
className={cn(
|
||||
'flex flex-col items-start rounded-2xl border-2 p-3 text-start transition-all',
|
||||
pdfMode === 'text_only'
|
||||
? 'border-brand-accent bg-brand-accent/5'
|
||||
: 'border-black/5 bg-brand-muted/30 hover:border-brand-accent/20 dark:border-white/10 dark:bg-white/5'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
|
||||
<Languages className="size-4 text-brand-accent" />
|
||||
{t('dashboard.translate.pdfMode.textOnly')}
|
||||
</div>
|
||||
<p className="mt-1 text-[9px] text-brand-dark/50 font-bold uppercase tracking-widest leading-relaxed dark:text-white/40">
|
||||
{t('dashboard.translate.pdfMode.textOnlyDesc')}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between px-6 text-[9px] font-black uppercase tracking-[0.2em] text-brand-dark/20 dark:text-white/20">
|
||||
{/* ── TRANSLATE BUTTON — fixed at bottom, never scrolls away ── */}
|
||||
<div className="shrink-0 p-6 pt-4 bg-white dark:bg-[#141414] border-t border-black/5 dark:border-white/5">
|
||||
<button
|
||||
disabled={!config.isConfigValid || submit.isSubmitting || !upload.file}
|
||||
onClick={handleTranslate}
|
||||
className={cn(
|
||||
'w-full py-5 rounded-2xl text-[13px] font-black uppercase tracking-[0.2em] flex items-center justify-center gap-3 transition-all duration-200',
|
||||
config.isConfigValid && upload.file && !submit.isSubmitting
|
||||
? 'bg-brand-dark text-white hover:bg-brand-dark/90 shadow-lg shadow-brand-dark/20 dark:bg-brand-accent dark:text-brand-dark dark:hover:bg-brand-accent/90'
|
||||
: 'bg-black/5 dark:bg-white/5 text-brand-dark/25 dark:text-white/25 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{submit.isSubmitting ? (
|
||||
<><Loader2 className="size-5 animate-spin" />Envoi en cours...</>
|
||||
) : (
|
||||
<><ArrowRight size={20} />Lancer la traduction</>
|
||||
)}
|
||||
</button>
|
||||
{!upload.file && (
|
||||
<p className="text-center text-[10px] text-brand-dark/30 dark:text-white/30 mt-2 font-bold uppercase tracking-widest">↑ Déposez d'abord un fichier</p>
|
||||
)}
|
||||
{upload.file && !config.targetLang && (
|
||||
<p className="text-center text-[10px] text-brand-dark/30 dark:text-white/30 mt-2 font-bold uppercase tracking-widest">↑ Sélectionnez une langue cible</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="shrink-0 flex justify-between px-6 pb-5 pt-1 text-[9px] font-black uppercase tracking-[0.2em] text-brand-dark/20 dark:text-white/20">
|
||||
<span className="flex items-center gap-2">
|
||||
<ShieldCheck size={12} /> {t('landing.translate.zeroRetention')}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user