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

ux(glossaries): simplify dialog, auto-save detail import, show templates and upload zone directly on main page
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m6s
Details

Browse Source
This commit is contained in:
sepehr
2026-06-20 12:27:07 +02:00
parent d505b479cd
commit 1fe714aa1a
3 changed files with 314 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

452
frontend/src/app/dashboard/glossaries/CreateGlossaryDialog.tsx
View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import { useState, useCallback, useRef } from 'react'; import { useState, useCallback } from 'react';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -11,297 +11,35 @@ import {
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { TermEditor } from './TermEditor'; import { TermEditor } from './TermEditor';
import { parseFileToTerms } from './csvUtils';
import { useGlossaryTemplates } from './useGlossaries';
import type { GlossaryTermInput } from './types'; import type { GlossaryTermInput } from './types';
import type { GlossaryTemplate } from './useGlossaries';
import { useI18n } from '@/lib/i18n'; import { useI18n } from '@/lib/i18n';
import { import { Loader2, PenLine } from 'lucide-react';
Upload,
FileText,
BookOpen,
PenLine,
CheckCircle2,
AlertCircle,
Loader2,
X,
Scale,
Cpu,
TrendingUp,
HeartPulse,
Megaphone,
Users,
FlaskConical,
ShoppingCart,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { SUPPORTED_LANGUAGES } from './types'; import { SUPPORTED_LANGUAGES } from './types';
interface CreateGlossaryDialogProps { interface CreateGlossaryDialogProps {
open: boolean; open: boolean;
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
onCreate: (data: { name: string; source_language: string; target_language: string; terms: GlossaryTermInput[] }) => Promise<void>; onCreate: (data: { name: string; source_language: string; target_language: string; terms: GlossaryTermInput[] }) => Promise<void>;
onImportTemplate: (templateId: string, name?: string) => Promise<void>;
isCreating: boolean; isCreating: boolean;
isImportingTemplate: boolean;
}
const TEMPLATE_ICONS: Record<string, React.ReactNode> = {
legal: <Scale className="size-5" />,
technology: <Cpu className="size-5" />,
finance: <TrendingUp className="size-5" />,
medical: <HeartPulse className="size-5" />,
marketing: <Megaphone className="size-5" />,
hr: <Users className="size-5" />,
scientific: <FlaskConical className="size-5" />,
ecommerce: <ShoppingCart className="size-5" />,
};
type FileStatus = 'idle' | 'parsing' | 'success' | 'error';
const MAX_FILE_SIZE_MB = 5;
function TemplateCard({
template,
onSelect,
isLoading,
isSelected,
termsLabel,
}: {
template: GlossaryTemplate;
onSelect: (t: GlossaryTemplate) => void;
isLoading: boolean;
isSelected: boolean;
termsLabel: string;
}) {
const icon = TEMPLATE_ICONS[template.id] ?? <BookOpen className="size-5" />;
return (
<button
type="button"
onClick={() => onSelect(template)}
disabled={isLoading}
className={cn(
'editorial-card flex flex-col gap-2 p-4 text-start transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer group',
'hover:shadow-md hover:-translate-y-0.5',
isSelected
? 'ring-2 ring-brand-accent ring-offset-1 border-brand-accent/40'
: 'border-black/5 dark:border-white/5 hover:border-brand-accent/30'
)}
>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2.5">
<div className="w-8 h-8 rounded-lg bg-brand-accent/10 dark:bg-brand-accent/15 flex items-center justify-center text-brand-accent shrink-0">
{icon}
</div>
<span className="text-sm font-serif font-semibold text-brand-dark dark:text-white leading-tight tracking-tight">
{template.name.split(' - ')[0]}
</span>
</div>
<span className="accent-pill !px-2.5 !py-0.5 !text-[10px] shrink-0">
{template.terms_count} {termsLabel}
</span>
</div>
<p className="text-[11px] text-brand-dark/50 dark:text-white/40 font-light leading-relaxed line-clamp-2">
{template.description}
</p>
{isSelected && (
<div className="absolute -top-1.5 -right-1.5 z-10">
<CheckCircle2 className="size-5 text-brand-accent bg-white dark:bg-[#141414] rounded-full" />
</div>
)}
</button>
);
}
function FileUploadZone({
onTermsParsed,
disabled,
}: {
onTermsParsed: (terms: GlossaryTermInput[], filename: string) => void;
disabled: boolean;
}) {
const { t } = useI18n();
const fileInputRef = useRef<HTMLInputElement>(null);
const [isDragging, setIsDragging] = useState(false);
const [status, setStatus] = useState<FileStatus>('idle');
const [errorMsg, setErrorMsg] = useState('');
const [parsedFile, setParsedFile] = useState<{ name: string; count: number } | null>(null);
const processFile = useCallback(async (file: File) => {
const ext = file.name.split('.').pop()?.toLowerCase();
const allowed = ['csv', 'xlsx', 'xls', 'ods', 'txt', 'tsv'];
if (!ext || !allowed.includes(ext)) {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorFormat'));
return;
}
if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorSize', { max: String(MAX_FILE_SIZE_MB) }));
return;
}
setStatus('parsing');
setErrorMsg('');
try {
const terms = await parseFileToTerms(file);
if (terms.length === 0) {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorEmpty'));
return;
}
setStatus('success');
setParsedFile({ name: file.name, count: terms.length });
onTermsParsed(terms, file.name);
} catch {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorRead'));
}
}, [onTermsParsed, t]);
const handleDrop = useCallback((e: React.DragEvent) => {
e.preventDefault();
setIsDragging(false);
const file = e.dataTransfer.files[0];
if (file) processFile(file);
}, [processFile]);
const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) processFile(file);
e.target.value = '';
}, [processFile]);
const reset = () => {
setStatus('idle');
setParsedFile(null);
setErrorMsg('');
};
return (
<div className="space-y-4">
<div
onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
onDragLeave={() => setIsDragging(false)}
onDrop={handleDrop}
onClick={() => !disabled && fileInputRef.current?.click()}
className={cn(
'relative flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed p-8 text-center transition-all cursor-pointer',
isDragging ? 'border-brand-accent bg-brand-accent/5' : 'border-brand-dark/10 dark:border-white/10 hover:border-brand-accent/50 hover:bg-brand-muted/30 dark:hover:bg-white/[0.02]',
disabled && 'opacity-50 cursor-not-allowed',
status === 'success' && 'border-emerald-400/50 bg-emerald-50 dark:bg-emerald-900/10',
status === 'error' && 'border-destructive/30 bg-destructive/5'
)}
>
<input
ref={fileInputRef}
type="file"
accept=".csv,.xlsx,.xls,.ods,.txt,.tsv"
className="hidden"
onChange={handleFileChange}
disabled={disabled}
/>
{status === 'parsing' && (
<>
<Loader2 className="size-8 animate-spin text-brand-accent" />
<p className="text-xs text-brand-dark/50 dark:text-white/40 font-light">{t('glossaries.dialog.parsing')}</p>
</>
)}
{status === 'success' && parsedFile && (
<>
<CheckCircle2 className="size-8 text-emerald-600" />
<div>
<p className="text-xs font-bold text-emerald-700 dark:text-emerald-400">
{t('glossaries.dialog.termsImported', { count: String(parsedFile.count) })}
</p>
<p className="text-[11px] text-brand-dark/40 dark:text-white/30 mt-0.5 font-light">{parsedFile.name}</p>
</div>
<button
type="button"
onClick={(e) => { e.stopPropagation(); reset(); }}
className="gap-1.5 text-[11px] font-bold uppercase tracking-wider text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white transition-colors cursor-pointer"
>
<X className="size-3 inline mr-1" />{t('glossaries.dialog.changeFile')}
</button>
</>
)}
{status === 'error' && (
<>
<AlertCircle className="size-8 text-destructive" />
<p className="text-xs font-medium text-destructive">{errorMsg}</p>
<button
type="button"
onClick={(e) => { e.stopPropagation(); reset(); }}
className="gap-1.5 text-[11px] font-bold uppercase tracking-wider text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white transition-colors cursor-pointer"
>
<X className="size-3 inline mr-1" />{t('glossaries.dialog.retry')}
</button>
</>
)}
{status === 'idle' && (
<>
<div className="w-12 h-12 rounded-xl bg-brand-muted dark:bg-white/10 flex items-center justify-center text-brand-accent">
<Upload className="size-6" />
</div>
<div>
<p className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">{t('glossaries.dialog.dropTitle')}</p>
<p className="text-[11px] text-brand-dark/40 dark:text-white/30 mt-1 font-light">{t('glossaries.dialog.dropOr')}</p>
</div>
<p className="text-[11px] text-brand-dark/35 dark:text-white/25 font-light">{t('glossaries.dialog.dropFormats')}</p>
</>
)}
</div>
<div className="rounded-xl bg-brand-muted/40 dark:bg-white/[0.03] border border-black/5 dark:border-white/5 p-3.5 text-[11px] text-brand-dark/60 dark:text-white/50 font-light space-y-1">
<p className="font-bold text-brand-dark/80 dark:text-white/80 text-xs">{t('glossaries.dialog.formatTitle')}</p>
<p className="leading-relaxed">{t('glossaries.dialog.formatDesc')}</p>
<div className="font-mono bg-white dark:bg-[#141414] rounded-lg border border-black/5 dark:border-white/5 px-3 py-2 mt-1.5 text-[11px]">
<div className="text-brand-dark/30 dark:text-white/25">source,target</div>
<div className="text-brand-dark dark:text-white">server,server</div>
<div className="text-brand-dark dark:text-white">database,database</div>
</div>
<p className="mt-1.5 italic text-brand-dark/40 dark:text-white/30">{t('glossaries.dialog.formatNote')}</p>
</div>
</div>
);
} }
export function CreateGlossaryDialog({ export function CreateGlossaryDialog({
open, open,
onOpenChange, onOpenChange,
onCreate, onCreate,
onImportTemplate,
isCreating, isCreating,
isImportingTemplate,
}: CreateGlossaryDialogProps) { }: CreateGlossaryDialogProps) {
const { t } = useI18n(); const { t } = useI18n();
const [activeTab, setActiveTab] = useState<'templates' | 'file' | 'manual'>('templates');
const [name, setName] = useState(''); const [name, setName] = useState('');
const [nameAutoFilled, setNameAutoFilled] = useState(false);
const [sourceLanguage, setSourceLanguage] = useState('fr'); const [sourceLanguage, setSourceLanguage] = useState('fr');
const [targetLanguage, setTargetLanguage] = useState('multi'); const [targetLanguage, setTargetLanguage] = useState('multi');
const [terms, setTerms] = useState<GlossaryTermInput[]>([{ source: '', target: '' }]); const [terms, setTerms] = useState<GlossaryTermInput[]>([{ source: '', target: '' }]);
const [fileTerms, setFileTerms] = useState<GlossaryTermInput[]>([]);
const [selectedTemplate, setSelectedTemplate] = useState<GlossaryTemplate | null>(null);
const { templates, isLoading: isLoadingTemplates } = useGlossaryTemplates();
const isProcessing = isCreating || isImportingTemplate;
const reset = useCallback(() => { const reset = useCallback(() => {
setName(''); setName('');
setNameAutoFilled(false);
setSourceLanguage('fr'); setSourceLanguage('fr');
setTargetLanguage('multi'); setTargetLanguage('multi');
setTerms([{ source: '', target: '' }]); setTerms([{ source: '', target: '' }]);
setFileTerms([]);
setSelectedTemplate(null);
setActiveTab('templates');
}, []); }, []);
const handleOpenChange = useCallback((newOpen: boolean) => { const handleOpenChange = useCallback((newOpen: boolean) => {
@@ -309,100 +47,45 @@ export function CreateGlossaryDialog({
onOpenChange(newOpen); onOpenChange(newOpen);
}, [onOpenChange, reset]); }, [onOpenChange, reset]);
const handleTemplateSelect = useCallback((template: GlossaryTemplate) => {
setSelectedTemplate(template);
if (!name || nameAutoFilled) {
setName(template.name.split(' - ')[0]);
setNameAutoFilled(true);
}
}, [name, nameAutoFilled]);
const handleFileTermsParsed = useCallback((parsed: GlossaryTermInput[], filename: string) => {
setFileTerms(parsed);
if (!name || nameAutoFilled) {
const baseName = filename.replace(/\.[^.]+$/, '').replace(/[_-]/g, ' ');
setName(baseName);
setNameAutoFilled(true);
}
}, [name, nameAutoFilled]);
const handleSubmit = useCallback(async () => { const handleSubmit = useCallback(async () => {
if (!name.trim()) return; if (!name.trim()) return;
const termsToSave = terms.filter(t => t.source.trim() && t.target.trim());
if (activeTab === 'templates' && selectedTemplate) {
await onImportTemplate(selectedTemplate.id, name.trim());
reset();
return;
}
const termsToSave = activeTab === 'file'
? fileTerms
: terms.filter(t => t.source.trim() && t.target.trim());
await onCreate({ name: name.trim(), source_language: sourceLanguage, target_language: targetLanguage, terms: termsToSave }); await onCreate({ name: name.trim(), source_language: sourceLanguage, target_language: targetLanguage, terms: termsToSave });
reset(); reset();
}, [activeTab, selectedTemplate, name, fileTerms, terms, sourceLanguage, targetLanguage, onCreate, onImportTemplate, reset]); }, [name, terms, sourceLanguage, targetLanguage, onCreate, reset]);
const canSubmit = (() => { const canSubmit = !!(name.trim() && !isCreating && terms.some(t => t.source.trim() && t.target.trim()));
if (!name.trim() || isProcessing) return false;
if (activeTab === 'templates') return !!selectedTemplate;
if (activeTab === 'file') return fileTerms.length > 0;
return terms.some(t => t.source.trim() && t.target.trim());
})();
const submitLabel = (() => { const validTermsCount = terms.filter(t => t.source.trim() && t.target.trim()).length;
if (isProcessing) { const submitLabel = isCreating
return activeTab === 'templates' ? t('glossaries.dialog.creating') || 'Création…'
? t('glossaries.dialog.importing') : validTermsCount > 0
: t('glossaries.dialog.creating'); ? t('glossaries.dialog.createBtn', { count: String(validTermsCount) }) || `Créer (${validTermsCount})`
} : t('glossaries.dialog.createEmpty') || 'Créer vide';
if (activeTab === 'templates') {
return selectedTemplate
? t('glossaries.dialog.importBtn', { count: String(selectedTemplate.terms_count) })
: t('glossaries.dialog.selectPrompt');
}
if (activeTab === 'file') {
return fileTerms.length > 0
? t('glossaries.dialog.importBtn', { count: String(fileTerms.length) })
: t('glossaries.dialog.dropTitle');
}
const count = terms.filter(t => t.source.trim() && t.target.trim()).length;
return count > 0
? t('glossaries.dialog.createBtn', { count: String(count) })
: t('glossaries.dialog.createEmpty');
})();
const tabs = [
{ id: 'templates' as const, label: t('glossaries.dialog.tabTemplates'), icon: <BookOpen className="size-3.5" /> },
{ id: 'file' as const, label: t('glossaries.dialog.tabFile'), icon: <FileText className="size-3.5" /> },
{ id: 'manual' as const, label: t('glossaries.dialog.tabManual'), icon: <PenLine className="size-3.5" /> },
];
return ( return (
<Dialog open={open} onOpenChange={handleOpenChange}> <Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="sm:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden !rounded-2xl border-black/5 dark:border-white/5 bg-white dark:bg-[#141414] shadow-editorial p-0"> <DialogContent className="sm:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden !rounded-2xl border-black/5 dark:border-white/5 bg-white dark:bg-[#141414] shadow-editorial p-0">
{/* ── Header ────────────────────────────────────── */}
<DialogHeader className="shrink-0 px-8 pt-8 pb-0"> <DialogHeader className="shrink-0 px-8 pt-8 pb-0">
<DialogTitle className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight"> <DialogTitle className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
{t('glossaries.dialog.title')} {t('glossaries.dialog.title') || 'Nouveau glossaire'}
</DialogTitle> </DialogTitle>
<DialogDescription className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light"> <DialogDescription className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light">
{t('glossaries.dialog.description')} {t('glossaries.dialog.description') || 'Créez un glossaire pour vos traductions'}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
{/* ── Name + Languages ──────────────────────────── */}
<div className="shrink-0 space-y-4 px-8 pt-5"> <div className="shrink-0 space-y-4 px-8 pt-5">
<div> <div>
<Label htmlFor="glossary-name" className="text-xs font-bold text-brand-dark/70 dark:text-white/60 uppercase tracking-wider"> <Label htmlFor="glossary-name" className="text-xs font-bold text-brand-dark/70 dark:text-white/60 uppercase tracking-wider">
{t('glossaries.dialog.nameLabel')} {t('glossaries.dialog.nameLabel') || 'Nom'}
</Label> </Label>
<Input <Input
id="glossary-name" id="glossary-name"
value={name} value={name}
onChange={(e) => { setName(e.target.value); setNameAutoFilled(false); }} onChange={(e) => setName(e.target.value)}
placeholder={t('glossaries.dialog.namePlaceholder')} placeholder={t('glossaries.dialog.namePlaceholder') || 'Mon glossaire'}
disabled={isProcessing} disabled={isCreating}
className="mt-1.5 bg-brand-muted/30 dark:bg-white/[0.03] border-black/5 dark:border-white/10 rounded-xl focus:ring-brand-accent/20 focus:border-brand-accent/30" className="mt-1.5 bg-brand-muted/30 dark:bg-white/[0.03] border-black/5 dark:border-white/10 rounded-xl focus:ring-brand-accent/20 focus:border-brand-accent/30"
/> />
</div> </div>
@@ -410,13 +93,13 @@ export function CreateGlossaryDialog({
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="glossary-source-lang" className="text-[10px] font-bold text-brand-dark/50 dark:text-white/40 uppercase tracking-wider mb-1.5 block"> <Label htmlFor="glossary-source-lang" className="text-[10px] font-bold text-brand-dark/50 dark:text-white/40 uppercase tracking-wider mb-1.5 block">
{t('glossaries.edit.sourceLang')} {t('glossaries.edit.sourceLang') || 'Langue source'}
</Label> </Label>
<select <select
id="glossary-source-lang" id="glossary-source-lang"
value={sourceLanguage} value={sourceLanguage}
onChange={e => setSourceLanguage(e.target.value)} onChange={e => setSourceLanguage(e.target.value)}
disabled={isProcessing} disabled={isCreating}
className="w-full h-10 rounded-xl border border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/[0.03] px-3 text-sm text-brand-dark dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all" className="w-full h-10 rounded-xl border border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/[0.03] px-3 text-sm text-brand-dark dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all"
> >
{SUPPORTED_LANGUAGES.map(l => ( {SUPPORTED_LANGUAGES.map(l => (
@@ -427,13 +110,13 @@ export function CreateGlossaryDialog({
<div className="pt-5 text-brand-accent font-bold text-lg">→</div> <div className="pt-5 text-brand-accent font-bold text-lg">→</div>
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="glossary-target-lang" className="text-[10px] font-bold text-brand-dark/50 dark:text-white/40 uppercase tracking-wider mb-1.5 block"> <Label htmlFor="glossary-target-lang" className="text-[10px] font-bold text-brand-dark/50 dark:text-white/40 uppercase tracking-wider mb-1.5 block">
{t('glossaries.edit.targetLang')} {t('glossaries.edit.targetLang') || 'Langue cible'}
</Label> </Label>
<select <select
id="glossary-target-lang" id="glossary-target-lang"
value={targetLanguage} value={targetLanguage}
onChange={e => setTargetLanguage(e.target.value)} onChange={e => setTargetLanguage(e.target.value)}
disabled={isProcessing} disabled={isCreating}
className="w-full h-10 rounded-xl border border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/[0.03] px-3 text-sm text-brand-dark dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all" className="w-full h-10 rounded-xl border border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/[0.03] px-3 text-sm text-brand-dark dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all"
> >
{SUPPORTED_LANGUAGES.map(l => ( {SUPPORTED_LANGUAGES.map(l => (
@@ -444,94 +127,28 @@ export function CreateGlossaryDialog({
</div> </div>
</div> </div>
{/* ── Tab Navigation ────────────────────────────── */}
<div className="shrink-0 px-8 mt-5">
<div role="tablist" className="flex gap-1 p-1 rounded-xl bg-brand-muted/50 dark:bg-white/[0.03] border border-black/5 dark:border-white/5">
{tabs.map((tab) => (
<button
key={tab.id}
type="button"
role="tab"
aria-selected={activeTab === tab.id}
aria-controls={`tabpanel-${tab.id}`}
id={`tab-${tab.id}`}
onClick={() => setActiveTab(tab.id)}
className={cn(
'flex-1 flex items-center justify-center gap-1.5 py-2 px-3 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all cursor-pointer',
activeTab === tab.id
? 'bg-white dark:bg-[#1a1a1a] text-brand-dark dark:text-white shadow-sm border border-black/5 dark:border-white/10'
: 'text-brand-dark/40 dark:text-white/30 hover:text-brand-dark/70 dark:hover:text-white/60'
)}
>
{tab.icon}
{tab.label}
</button>
))}
</div>
</div>
{/* ── Tab Content ───────────────────────────────── */}
<div className="flex-1 overflow-y-auto px-8 pt-5 min-h-0"> <div className="flex-1 overflow-y-auto px-8 pt-5 min-h-0">
<div className="flex items-center gap-1.5 mb-3 text-brand-accent">
<div role="tabpanel" id="tabpanel-templates" aria-labelledby="tab-templates" hidden={activeTab !== 'templates'}> <PenLine className="size-3.5" />
<div className="space-y-3"> <span className="text-xs font-bold uppercase tracking-wider">
{isLoadingTemplates ? ( {t('glossaries.dialog.tabManual') || 'Saisie manuelle'}
<div className="flex items-center justify-center py-10"> </span>
<div className="animate-spin rounded-full h-6 w-6 border-2 border-brand-muted border-t-brand-accent" />
</div>
) : (
<>
<p className="text-[11px] text-brand-dark/45 dark:text-white/35 font-light">
{t('glossaries.dialog.templatesDesc')}
</p>
<div className="grid gap-3 sm:grid-cols-2">
{templates.map((template) => (
<div key={template.id} className="relative">
<TemplateCard
template={template}
onSelect={handleTemplateSelect}
isLoading={isProcessing}
isSelected={selectedTemplate?.id === template.id}
termsLabel={t('glossaries.dialog.terms')}
/>
</div>
))}
</div>
{templates.length === 0 && !isLoadingTemplates && (
<p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-8 font-light">
{t('glossaries.dialog.templatesEmpty')}
</p>
)}
</>
)}
</div>
</div>
<div role="tabpanel" id="tabpanel-file" aria-labelledby="tab-file" hidden={activeTab !== 'file'}>
<FileUploadZone
onTermsParsed={handleFileTermsParsed}
disabled={isProcessing}
/>
</div>
<div role="tabpanel" id="tabpanel-manual" aria-labelledby="tab-manual" hidden={activeTab !== 'manual'}>
<TermEditor
terms={terms}
onChange={setTerms}
disabled={isProcessing}
/>
</div> </div>
<TermEditor
terms={terms}
onChange={setTerms}
disabled={isCreating}
/>
</div> </div>
{/* ── Footer ────────────────────────────────────── */}
<div className="shrink-0 px-8 py-5 border-t border-black/5 dark:border-white/5 flex justify-end gap-3"> <div className="shrink-0 px-8 py-5 border-t border-black/5 dark:border-white/5 flex justify-end gap-3">
<button <button
type="button" type="button"
onClick={() => handleOpenChange(false)} onClick={() => handleOpenChange(false)}
disabled={isProcessing} disabled={isCreating}
className="px-5 py-2.5 bg-brand-muted dark:bg-white/5 text-brand-dark/50 dark:text-white/40 rounded-xl text-[11px] font-bold uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all cursor-pointer disabled:opacity-50" className="px-5 py-2.5 bg-brand-muted dark:bg-white/5 text-brand-dark/50 dark:text-white/40 rounded-xl text-[11px] font-bold uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all cursor-pointer disabled:opacity-50"
> >
{t('glossaries.dialog.cancel')} {t('glossaries.dialog.cancel') || 'Annuler'}
</button> </button>
<button <button
type="button" type="button"
@@ -539,11 +156,10 @@ export function CreateGlossaryDialog({
disabled={!canSubmit} disabled={!canSubmit}
className="premium-button px-8 py-2.5 text-[11px] uppercase tracking-widest !rounded-xl flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer font-bold" className="premium-button px-8 py-2.5 text-[11px] uppercase tracking-widest !rounded-xl flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer font-bold"
> >
{isProcessing && <Loader2 className="size-3.5 animate-spin" />} {isCreating && <Loader2 className="size-3.5 animate-spin" />}
{submitLabel} {submitLabel}
</button> </button>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

14
frontend/src/app/dashboard/glossaries/[id]/page.tsx
View File

@@ -237,6 +237,7 @@ export default function GlossaryDetailPage() {
const handleImportClick = () => fileInputRef.current?.click(); const handleImportClick = () => fileInputRef.current?.click();
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
if (!glossary) return;
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (!file) return; if (!file) return;
e.target.value = ''; e.target.value = '';
@@ -260,17 +261,24 @@ export default function GlossaryDetailPage() {
}); });
return; return;
} }
// Auto-save immediately to DB
await updateGlossary(glossary.id, {
name: name.trim(),
source_language: sourceLanguage,
target_language: targetLanguage,
terms: parsed,
});
setTerms(parsed); setTerms(parsed);
toast({ toast({
title: t('glossaries.detail.importedTitle') || 'Importé', title: t('glossaries.detail.importedTitle') || 'Importé',
description: t('glossaries.detail.importedDesc', { count: String(parsed.length) }) || description: t('glossaries.detail.importedDesc', { count: String(parsed.length) }) ||
`${parsed.length} termes importés.`, `${parsed.length} termes importés et enregistrés.`,
}); });
} catch { } catch {
toast({ toast({
variant: 'destructive', variant: 'destructive',
title: t('glossaries.detail.importErrorTitle') || 'Erreur', title: t('glossaries.toast.error') || 'Erreur',
description: t('glossaries.detail.importErrorDesc') || 'Impossible de lire le fichier.', description: t('glossaries.toast.errorUpdate') || 'Impossible de mettre à jour le glossaire.',
}); });
} }
}; };

280
frontend/src/app/dashboard/glossaries/page.tsx
View File

@@ -1,23 +1,133 @@
'use client'; 'use client';
import { useState, useEffect, useMemo } from 'react'; import { useState, useEffect, useMemo, useRef } from 'react';
import { import {
BookText, Plus, Library, Calendar, Hash, BookText, Plus, Library, Calendar, Hash,
MessageSquare, Save, Trash2, Loader2, MessageSquare, Save, Trash2, Loader2,
CheckCircle2, AlertCircle, ArrowRight, Info, ExternalLink, Search, CheckCircle2, AlertCircle, ArrowRight, Info, ExternalLink, Search,
Upload, Scale, Cpu, TrendingUp, HeartPulse, Megaphone, Users, FlaskConical, ShoppingCart, Zap, PenLine
} from 'lucide-react'; } from 'lucide-react';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useUser } from '@/app/dashboard/useUser'; import { useUser } from '@/app/dashboard/useUser';
import { useI18n } from '@/lib/i18n'; import { useI18n } from '@/lib/i18n';
import { useGlossaries } from './useGlossaries'; import { useGlossaries, useGlossaryTemplates } from './useGlossaries';
import type { GlossaryListItem } from './types'; import type { GlossaryListItem, GlossaryTermInput } from './types';
import { ProUpgradePrompt } from './ProUpgradePrompt'; import { ProUpgradePrompt } from './ProUpgradePrompt';
import { CreateGlossaryDialog } from './CreateGlossaryDialog'; import { CreateGlossaryDialog } from './CreateGlossaryDialog';
import { useToast } from '@/components/ui/toast'; import { useToast } from '@/components/ui/toast';
import { SUPPORTED_LANGUAGES } from './types'; import { SUPPORTED_LANGUAGES } from './types';
import { useTranslationStore } from '@/lib/store'; import { useTranslationStore } from '@/lib/store';
import { parseFileToTerms } from './csvUtils';
const TEMPLATE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
legal: Scale,
technology: Cpu,
finance: TrendingUp,
medical: HeartPulse,
marketing: Megaphone,
hr: Users,
scientific: FlaskConical,
ecommerce: ShoppingCart,
};
function FileUploadZone({
onTermsParsed,
disabled,
t,
}: {
onTermsParsed: (terms: GlossaryTermInput[], filename: string) => void;
disabled: boolean;
t: (key: string, params?: any) => string;
}) {
const fileInputRef = useRef<HTMLInputElement>(null);
const [isDragging, setIsDragging] = useState(false);
const [status, setStatus] = useState<'idle' | 'parsing' | 'success' | 'error'>('idle');
const [errorMsg, setErrorMsg] = useState('');
const processFile = async (file: File) => {
const ext = file.name.split('.').pop()?.toLowerCase();
const allowed = ['csv', 'xlsx', 'xls', 'ods', 'txt', 'tsv'];
if (!ext || !allowed.includes(ext)) {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorFormat') || 'Format non supporté');
return;
}
if (file.size > 5 * 1024 * 1024) {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorSize', { max: '5' }) || 'Fichier trop volumineux (max 5MB)');
return;
}
setStatus('parsing');
setErrorMsg('');
try {
const terms = await parseFileToTerms(file);
if (terms.length === 0) {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorEmpty') || 'Fichier vide');
return;
}
setStatus('success');
onTermsParsed(terms, file.name);
setTimeout(() => setStatus('idle'), 2000);
} catch {
setStatus('error');
setErrorMsg(t('glossaries.dialog.errorRead') || 'Erreur de lecture');
}
};
return (
<div
onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
onDragLeave={() => setIsDragging(false)}
onDrop={(e) => { e.preventDefault(); setIsDragging(false); const file = e.dataTransfer.files[0]; if (file) processFile(file); }}
onClick={() => !disabled && fileInputRef.current?.click()}
className={cn(
'editorial-card flex flex-col items-center justify-center gap-3 p-6 text-center transition-all cursor-pointer min-h-[140px]',
isDragging ? 'border-brand-accent bg-brand-accent/5' : 'border-black/5 dark:border-white/5 hover:border-brand-accent/30 hover:bg-brand-muted/30 dark:hover:bg-white/[0.02]',
disabled && 'opacity-50 cursor-not-allowed',
status === 'error' && 'border-destructive/30 bg-destructive/5'
)}
>
<input
ref={fileInputRef}
type="file"
accept=".csv,.xlsx,.xls,.ods,.txt,.tsv"
className="hidden"
onChange={(e) => { const file = e.target.files?.[0]; if (file) processFile(file); e.target.value = ''; }}
disabled={disabled}
/>
{status === 'parsing' ? (
<>
<Loader2 className="size-6 animate-spin text-brand-accent" />
<p className="text-[11px] text-brand-dark/50 dark:text-white/40 font-light">{t('glossaries.dialog.parsing') || 'Analyse…'}</p>
</>
) : status === 'error' ? (
<>
<AlertCircle className="size-6 text-destructive" />
<p className="text-[11px] font-medium text-destructive leading-tight">{errorMsg}</p>
<span className="text-[9px] font-bold uppercase tracking-wider text-brand-dark/40 dark:text-white/35">{t('glossaries.dialog.retry') || 'Réessayer'}</span>
</>
) : status === 'success' ? (
<>
<CheckCircle2 className="size-6 text-emerald-600 animate-bounce" />
<p className="text-[11px] font-bold text-emerald-700 dark:text-emerald-400">{t('glossaries.toast.imported') || 'Importé avec succès'}</p>
</>
) : (
<>
<div className="w-10 h-10 rounded-xl bg-brand-accent/10 dark:bg-brand-accent/15 flex items-center justify-center text-brand-accent shrink-0 animate-pulse">
<Upload className="size-5" />
</div>
<div>
<p className="text-xs font-serif font-semibold text-brand-dark dark:text-white leading-tight tracking-tight">{t('glossaries.dialog.tabFile') || 'Glissez un fichier CSV'}</p>
<p className="text-[10px] text-brand-dark/40 dark:text-white/30 mt-1 font-light leading-snug">{t('glossaries.dialog.dropFormats') || 'Format supporté: CSV, Excel'}</p>
</div>
</>
)}
</div>
);
}
export default function GlossariesPage() { export default function GlossariesPage() {
const { t } = useI18n(); const { t } = useI18n();
@@ -32,6 +142,7 @@ export default function GlossariesPage() {
createGlossary, createGlossary,
importTemplate, importTemplate,
} = useGlossaries(); } = useGlossaries();
const { templates, isLoading: isLoadingTemplates } = useGlossaryTemplates();
const { toast } = useToast(); const { toast } = useToast();
const { settings, updateSettings } = useTranslationStore(); const { settings, updateSettings } = useTranslationStore();
@@ -40,6 +151,7 @@ export default function GlossariesPage() {
const [isSavingPrompt, setIsSavingPrompt] = useState(false); const [isSavingPrompt, setIsSavingPrompt] = useState(false);
const [promptSaved, setPromptSaved] = useState(false); const [promptSaved, setPromptSaved] = useState(false);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [importingPresetId, setImportingPresetId] = useState<string | null>(null);
const isPro = user?.tier === 'pro'; const isPro = user?.tier === 'pro';
const isLoading = isLoadingUser || isLoadingGlossaries; const isLoading = isLoadingUser || isLoadingGlossaries;
@@ -73,7 +185,7 @@ export default function GlossariesPage() {
setSystemPrompt(''); setSystemPrompt('');
}; };
const handleCreateGlossary = async (data: { name: string; source_language: string; target_language: string; terms: { source: string; target: string; translations?: Record<string, string> }[] }) => { const handleCreateGlossary = async (data: { name: string; source_language: string; target_language: string; terms: GlossaryTermInput[] }) => {
try { try {
await createGlossary(data); await createGlossary(data);
setCreateDialogOpen(false); setCreateDialogOpen(false);
@@ -91,10 +203,10 @@ export default function GlossariesPage() {
} }
}; };
const handleImportTemplate = async (templateId: string, name?: string) => { const handleImportPreset = async (templateId: string, name?: string) => {
setImportingPresetId(templateId);
try { try {
await importTemplate(templateId, name); await importTemplate(templateId, name);
setCreateDialogOpen(false);
toast({ toast({
title: t('glossaries.toast.imported'), title: t('glossaries.toast.imported'),
description: name description: name
@@ -107,11 +219,41 @@ export default function GlossariesPage() {
title: t('glossaries.toast.error'), title: t('glossaries.toast.error'),
description: t('glossaries.toast.errorImport'), description: t('glossaries.toast.errorImport'),
}); });
throw error; } finally {
setImportingPresetId(null);
} }
}; };
// Filtered list (search) const handleFileTermsImport = async (parsedTerms: GlossaryTermInput[], filename: string) => {
try {
const baseName = filename.replace(/\.[^.]+$/, '').replace(/[_-]/g, ' ');
await createGlossary({
name: baseName,
source_language: 'fr',
target_language: 'multi',
terms: parsedTerms,
});
toast({
title: t('glossaries.toast.created'),
description: t('glossaries.toast.createdDesc', { name: baseName }),
});
} catch (error) {
toast({
variant: 'destructive',
title: t('glossaries.toast.error'),
description: t('glossaries.toast.errorCreate'),
});
}
};
const importedTemplateIds = useMemo(() => {
return new Set(
glossaries
.map((g: GlossaryListItem) => g.template_id)
.filter(Boolean) as string[]
);
}, [glossaries]);
const filteredGlossaries = useMemo(() => { const filteredGlossaries = useMemo(() => {
if (!searchQuery.trim()) return glossaries; if (!searchQuery.trim()) return glossaries;
const q = searchQuery.toLowerCase(); const q = searchQuery.toLowerCase();
@@ -133,6 +275,8 @@ export default function GlossariesPage() {
return <ProUpgradePrompt />; return <ProUpgradePrompt />;
} }
const isProcessing = isCreating || isImportingTemplate || !!importingPresetId;
return ( return (
<div className="max-w-6xl mx-auto w-full p-6 lg:p-8"> <div className="max-w-6xl mx-auto w-full p-6 lg:p-8">
@@ -151,7 +295,7 @@ export default function GlossariesPage() {
</div> </div>
<button <button
onClick={() => setCreateDialogOpen(true)} onClick={() => setCreateDialogOpen(true)}
disabled={isCreating || isImportingTemplate} disabled={isProcessing}
className="premium-button px-8 py-3 text-xs uppercase tracking-widest !rounded-xl flex items-center gap-2 disabled:opacity-50 shrink-0 cursor-pointer font-bold" className="premium-button px-8 py-3 text-xs uppercase tracking-widest !rounded-xl flex items-center gap-2 disabled:opacity-50 shrink-0 cursor-pointer font-bold"
> >
<Plus size={14} /> <Plus size={14} />
@@ -275,6 +419,122 @@ export default function GlossariesPage() {
</div> </div>
</section> </section>
{/* ── Nouveau Glossaire / Création Directe ─────────────────────── */}
<section className="editorial-card p-8 lg:p-10 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm">
<div className="mb-6">
<div className="flex items-center gap-2 text-brand-accent mb-2">
<Zap size={18} />
<h2 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">
{t('glossaries.presets.whatForBold') || 'Créer un nouveau glossaire'}
</h2>
</div>
<p className="text-xs text-brand-dark/50 dark:text-white/40 font-light">
{t('glossaries.presets.whatForDesc') || 'Choisissez un modèle professionnel pré-rempli ou importez vos propres termes.'}
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Grille des Modèles (2/3 de largeur) */}
<div className="lg:col-span-2 space-y-3">
<div className="flex items-center gap-1.5 text-brand-accent">
<BookText size={14} />
<span className="text-[10px] font-bold uppercase tracking-wider">{t('context.presets.title') || 'Modèles professionnels'}</span>
</div>
{isLoadingTemplates ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="size-6 animate-spin text-brand-muted" />
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{templates.map((template) => {
const Icon = TEMPLATE_ICONS[template.id] || BookText;
const isImported = importedTemplateIds.has(template.id);
const isProcessingThis = importingPresetId === template.id;
return (
<button
key={template.id}
disabled={isImported || isProcessing}
onClick={() => handleImportPreset(template.id, template.name)}
className={cn(
'relative p-4 rounded-xl text-left border transition-all cursor-pointer min-h-[110px] flex flex-col justify-between group',
isImported
? 'bg-emerald-500/5 dark:bg-emerald-500/5 border-emerald-500/20 dark:border-emerald-500/10 opacity-80 cursor-default'
: 'bg-brand-muted/40 dark:bg-white/5 hover:bg-brand-accent/5 dark:hover:bg-brand-accent/10 border-black/5 dark:border-white/5 hover:border-brand-accent/30'
)}
>
<div className="flex items-center justify-between gap-2 w-full">
<div className="p-1.5 bg-brand-accent/10 rounded-lg text-brand-accent group-hover:scale-110 transition-transform">
{isProcessingThis ? <Loader2 size={16} className="animate-spin" /> : <Icon className="size-4" />}
</div>
{isImported ? (
<span className="flex items-center gap-1 text-[9px] font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full border border-emerald-500/20">
<CheckCircle2 size={9} /> {t('glossaries.presets.alreadyImported') || 'Importé'}
</span>
) : (
<span className="accent-pill !px-2.5 !py-0.5 !text-[9px] lowercase font-light">
{template.terms_count} {t('glossaries.defineTerms') || 'termes'}
</span>
)}
</div>
<div className="mt-3">
<p className="text-xs font-serif font-bold text-brand-dark dark:text-white leading-tight">
{template.name.split(' - ')[0]}
</p>
<p className="text-[10px] text-brand-dark/45 dark:text-white/35 font-light leading-normal mt-1 line-clamp-2">
{template.description}
</p>
</div>
</button>
);
})}
</div>
)}
</div>
{/* Fichier & Manuel (1/3 de largeur) */}
<div className="space-y-5">
{/* Import Fichier */}
<div className="space-y-2.5">
<div className="flex items-center gap-1.5 text-brand-accent">
<Upload size={14} />
<span className="text-[10px] font-bold uppercase tracking-wider">{t('glossaries.dialog.tabFile') || 'Importer un fichier'}</span>
</div>
<FileUploadZone
onTermsParsed={handleFileTermsImport}
disabled={isProcessing}
t={t}
/>
</div>
{/* Création Manuelle */}
<div className="space-y-2.5">
<div className="flex items-center gap-1.5 text-brand-accent">
<PenLine size={14} />
<span className="text-[10px] font-bold uppercase tracking-wider">{t('glossaries.dialog.tabManual') || 'Création manuelle'}</span>
</div>
<button
onClick={() => setCreateDialogOpen(true)}
disabled={isProcessing}
className="editorial-card w-full flex items-center justify-between p-5 text-left transition-all hover:border-brand-accent/30 hover:bg-brand-muted/30 dark:hover:bg-white/[0.02] cursor-pointer group border-black/5 dark:border-white/5"
>
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-lg bg-brand-accent/10 dark:bg-brand-accent/15 flex items-center justify-center text-brand-accent shrink-0 group-hover:scale-110 transition-transform">
<Plus size={16} />
</div>
<div>
<p className="text-xs font-serif font-bold text-brand-dark dark:text-white leading-tight">{t('glossaries.createNew') || 'Créer manuellement'}</p>
<p className="text-[10px] text-brand-dark/40 dark:text-white/35 mt-1 font-light leading-tight">{t('glossaries.dialog.createEmpty') || 'À partir de zéro'}</p>
</div>
</div>
<ArrowRight className="size-4 text-brand-dark/30 dark:text-white/20 group-hover:text-brand-accent group-hover:translate-x-1 transition-all" />
</button>
</div>
</div>
</div>
</section>
{/* ── Your Glossaries ────────────────────────────────────── */} {/* ── Your Glossaries ────────────────────────────────────── */}
<section> <section>
<div className="flex items-center justify-between mb-5 gap-4"> <div className="flex items-center justify-between mb-5 gap-4">
@@ -426,9 +686,7 @@ export default function GlossariesPage() {
open={createDialogOpen} open={createDialogOpen}
onOpenChange={setCreateDialogOpen} onOpenChange={setCreateDialogOpen}
onCreate={handleCreateGlossary} onCreate={handleCreateGlossary}
onImportTemplate={handleImportTemplate}
isCreating={isCreating} isCreating={isCreating}
isImportingTemplate={isImportingTemplate}
/> />
</div> </div>
); );