sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact glossary dropdown, sticky translate button, and mode badge
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m10s
Details

Browse Source 
- 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:
sepehr
2026-05-19 21:41:16 +02:00
parent f1dc4c0b0b
commit bacbf6cce8
2 changed files with 286 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
frontend/src/app/dashboard/translate/GlossarySelector.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback, useRef } from 'react';
import { BookText, Plus, Loader2, Lock, Check, AlertCircle } from 'lucide-react'; import { BookText, Plus, Loader2, Check, ChevronDown, X } from 'lucide-react';
import { API_BASE } from '@/lib/config'; import { API_BASE } from '@/lib/config';
import { useI18n } from '@/lib/i18n'; import { useI18n } from '@/lib/i18n';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@@ -39,6 +39,9 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [importingId, setImportingId] = useState<string | null>(null); const [importingId, setImportingId] = useState<string | null>(null);
const [error, setError] = 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 () => { const fetchData = useCallback(async () => {
try { try {
@@ -68,13 +71,25 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
useEffect(() => { fetchData(); }, [fetchData]); 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) => { const handleImportTemplate = async (template: TemplateOption) => {
// If a glossary with this template's name already exists, just select it
const existing = glossaries.find( const existing = glossaries.find(
g => g.name.toLowerCase().includes(template.name.toLowerCase().split('/')[0].trim()) g => g.name.toLowerCase().includes(template.name.toLowerCase().split('/')[0].trim())
); );
if (existing) { if (existing) {
onChange(existing.id); onChange(existing.id);
setIsOpen(false);
return; return;
} }
@@ -93,13 +108,14 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
if (res.ok) { if (res.ok) {
const data = await res.json(); const data = await res.json();
const newId = data.data?.id; const newId = data.data?.id;
await fetchData(); // Refresh glossary list await fetchData();
if (newId) onChange(newId); if (newId) onChange(newId);
setIsOpen(false);
} else { } else {
const errData = await res.json().catch(() => null); const errData = await res.json().catch(() => null);
setError(errData?.message || `Import failed (${res.status})`); setError(errData?.message || `Import failed (${res.status})`);
} }
} catch (e) { } catch {
setError('Network error'); setError('Network error');
} finally { } finally {
setImportingId(null); setImportingId(null);
@@ -116,182 +132,171 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
const selected = glossaries.find(g => g.id === glossaryId); const selected = glossaries.find(g => g.id === glossaryId);
return ( 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"> <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" /> <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> {t('translate.glossary.title')} <span className="normal-case tracking-normal font-normal text-brand-dark/25 dark:text-white/25">({sourceFlag}→{targetFlag})</span>
</label> </label>
{!isPro ? ( {/* Dropdown trigger */}
<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"> <button
<Lock size={12} className="text-brand-dark/30 dark:text-white/30" /> type="button"
<span className="text-[10px] font-bold text-brand-dark/40 dark:text-white/40"> disabled={disabled}
{t('translate.glossary.proOnly')} onClick={() => setIsOpen(!isOpen)}
</span> className={cn(
<span className="ml-auto px-2 py-0.5 bg-brand-accent/10 text-brand-accent text-[8px] font-black uppercase tracking-widest rounded"> "w-full px-4 py-3 rounded-xl text-left flex items-center gap-3 transition-all border-2",
Pro isOpen
</span> ? "border-brand-accent/30 bg-brand-accent/5"
</div> : "bg-brand-muted/50 dark:bg-white/5 border-transparent hover:border-brand-accent/15",
) : ( disabled && "opacity-50 cursor-not-allowed"
<div className="space-y-3"> )}
{/* Error */} >
{error && ( {selected ? (
<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" /> <div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
<span className="text-[10px] text-red-600 dark:text-red-400">{error}</span> <Check size={11} className="text-white" />
</div> </div>
)} <div className="min-w-0 flex-1">
<div className="text-[11px] font-bold truncate text-brand-accent">{selected.name}</div>
{/* My glossaries */} <div className="text-[9px] text-brand-dark/30 dark:text-white/30">{selected.terms_count} {t('translate.glossary.terms')}</div>
{!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> </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 */} {/* Error */}
{selected && !filteredGlossaries.find(g => g.id === selected.id) && ( {error && (
<div className="space-y-1"> <p className="text-[10px] text-red-500 pl-1">{error}</p>
<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>
)}
{/* Templates */} {/* Dropdown panel */}
{!isLoading && templates.length > 0 && ( {isOpen && !disabled && (
<div className="space-y-2 pt-2 border-t border-black/5 dark:border-white/5"> <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">
<span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1"> {/* Glossary list */}
{t('translate.glossary.fromTemplate') || 'Créer depuis un template'} <div className="max-h-48 overflow-y-auto">
</span> {filteredGlossaries.length > 0 ? (
<div className="grid grid-cols-2 gap-2"> <div className="py-1">
{templates.map(tmpl => { {filteredGlossaries.map(g => {
const isImporting = importingId === tmpl.id; const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
const existingGlossary = glossaries.find( const isSelected = g.id === glossaryId;
g => g.name.toLowerCase().includes(tmpl.name.toLowerCase().split('/')[0].trim())
);
const isAlreadySelected = existingGlossary?.id === glossaryId;
return ( return (
<button <button
key={tmpl.id} key={g.id}
onClick={() => { onClick={() => { onChange(isSelected ? null : g.id); if (!isSelected) setIsOpen(false); }}
if (existingGlossary) {
onChange(isAlreadySelected ? null : existingGlossary.id);
} else if (!isImporting) {
handleImportTemplate(tmpl);
}
}}
disabled={disabled || isImporting}
className={cn( className={cn(
"px-3 py-2.5 text-left rounded-xl transition-all flex items-center gap-2 border", "w-full px-4 py-2.5 text-left flex items-center gap-3 transition-colors",
isAlreadySelected isSelected ? "bg-brand-accent/10" : "hover:bg-brand-muted/50 dark:hover:bg-white/5"
? "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"
)} )}
> >
{isImporting ? ( {isSelected ? (
<Loader2 size={12} className="text-brand-accent animate-spin shrink-0" />
) : isAlreadySelected ? (
<div className="w-4 h-4 rounded-full bg-brand-accent flex items-center justify-center shrink-0"> <div className="w-4 h-4 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
<Check size={9} className="text-white" /> <Check size={9} className="text-white" />
</div> </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( <div className="min-w-0 flex-1">
"text-[9px] font-black uppercase tracking-widest truncate", <div className={cn("text-[11px] font-bold truncate", isSelected ? "text-brand-accent" : "text-brand-dark/70 dark:text-white/70")}>
isAlreadySelected ? "text-brand-accent" : "text-brand-dark/50 dark:text-white/50" {g.name}
)}> </div>
{tmpl.name.split('/')[0].trim()} </div>
</span> <span className="text-[9px] text-brand-dark/25 dark:text-white/25">{g.terms_count} {t('translate.glossary.terms')}</span>
</button> </button>
); );
})} })}
</div> </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 */} {/* Templates section — collapsed by default */}
{isLoading && ( {templates.length > 0 && (
<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" /> <div className="border-t border-black/5 dark:border-white/5">
{t('translate.glossary.loading') || 'Chargement...'} <button
</div> 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"
{/* Empty */} >
{!isLoading && filteredGlossaries.length === 0 && !selected && ( <Plus size={10} className="text-brand-accent" />
<p className="text-[10px] text-brand-dark/25 dark:text-white/25 pl-1 italic"> {t('translate.glossary.fromTemplate') || 'Créer depuis un template'}
{sourceLang !== 'auto' <ChevronDown size={10} className={cn("ml-auto transition-transform", showTemplates && "rotate-180")} />
? `${t('translate.glossary.noGlossaryForPair') || 'Aucun glossaire pour'} ${sourceFlag}→${targetFlag}` </button>
: (t('translate.glossary.noGlossaries') || 'Aucun glossaire') </div>
} {showTemplates && (
</p> <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> </div>
)} )}

226
frontend/src/app/dashboard/translate/page.tsx
View File

@@ -438,116 +438,138 @@ export default function TranslatePage() {
{/* ── CONFIG (upload / configuring / failed) ──────────── */} {/* ── CONFIG (upload / configuring / failed) ──────────── */}
{(showUpload || showConfiguring || showFailed) && ( {(showUpload || showConfiguring || showFailed) && (
<div className="space-y-8"> <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)]">
<div className="editorial-card bg-white border-none shadow-editorial dark:bg-[#141414] overflow-hidden"> {/* Scrollable config content */}
<div className="p-10 pb-6"> <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"> <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')} {t('landing.translate.configuration')}
</h4> </h4>
<div className="space-y-8"> <div className="space-y-8">
<LanguageSelector <LanguageSelector
sourceLang={config.sourceLang} targetLang={config.targetLang} sourceLang={config.sourceLang} targetLang={config.targetLang}
languages={config.languages} isLoading={config.isLoadingLanguages} languages={config.languages} isLoading={config.isLoadingLanguages}
error={config.languagesError} onSourceChange={config.setSourceLang} error={config.languagesError} onSourceChange={config.setSourceLang}
onTargetChange={config.setTargetLang} onTargetChange={config.setTargetLang}
/> />
<ProviderSelector <ProviderSelector
provider={config.provider} onProviderChange={config.setProvider} provider={config.provider} onProviderChange={config.setProvider}
availableProviders={config.availableProviders} isLoadingProviders={config.isLoadingProviders} availableProviders={config.availableProviders} isLoadingProviders={config.isLoadingProviders}
isPro={config.isPro} isPro={config.isPro}
/> />
{/* Glossary — Pro + LLM mode only */} {/* Active mode badge */}
{config.isPro && config.mode === 'llm' && ( {config.provider && (
<GlossarySelector <div className="flex items-center gap-2">
sourceLang={config.sourceLang} <span className={cn(
targetLang={config.targetLang} "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[9px] font-black uppercase tracking-[0.15em]",
isPro={config.isPro} config.mode === 'llm'
glossaryId={config.glossaryId} ? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
onChange={config.setGlossaryId} : "bg-brand-muted/50 text-brand-dark/40 dark:bg-white/5 dark:text-white/40 border border-transparent"
disabled={submit.isSubmitting} )}>
/> {config.mode === 'llm' ? (
)} <><Zap size={10} /> Mode IA</>
) : (
{/* PDF mode selector */} <><Languages size={10} /> Mode Classique</>
{isPdf && ( )}
<div className="space-y-2"> </span>
<label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em] block mb-3 dark:text-white/40"> {config.mode === 'classic' && config.isPro && (
{t('dashboard.translate.pdfMode.title')} <span className="text-[9px] text-brand-dark/20 dark:text-white/20 italic">
</label> Glossaires disponibles en mode IA
<div className="grid grid-cols-2 gap-2"> </span>
<button )}
type="button" </div>
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>
)} )}
{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> </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"> <span className="flex items-center gap-2">
<ShieldCheck size={12} /> {t('landing.translate.zeroRetention')} <ShieldCheck size={12} /> {t('landing.translate.zeroRetention')}
</span> </span>