ux(glossaries): simplify dialog, auto-save detail import, show templates and upload zone directly on main page

frontend/src/app/dashboard/glossaries/CreateGlossaryDialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -11,297 +11,35 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { TermEditor } from './TermEditor';
-import { parseFileToTerms } from './csvUtils';
-import { useGlossaryTemplates } from './useGlossaries';
 import type { GlossaryTermInput } from './types';
-import type { GlossaryTemplate } from './useGlossaries';
 import { useI18n } from '@/lib/i18n';
-import {
-  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 { Loader2, PenLine } from 'lucide-react';
 import { SUPPORTED_LANGUAGES } from './types';
 
 interface CreateGlossaryDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onCreate: (data: { name: string; source_language: string; target_language: string; terms: GlossaryTermInput[] }) => Promise<void>;
-  onImportTemplate: (templateId: string, name?: string) => Promise<void>;
   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({
   open,
   onOpenChange,
   onCreate,
-  onImportTemplate,
   isCreating,
-  isImportingTemplate,
 }: CreateGlossaryDialogProps) {
   const { t } = useI18n();
-  const [activeTab, setActiveTab] = useState<'templates' | 'file' | 'manual'>('templates');
   const [name, setName] = useState('');
-  const [nameAutoFilled, setNameAutoFilled] = useState(false);
   const [sourceLanguage, setSourceLanguage] = useState('fr');
   const [targetLanguage, setTargetLanguage] = useState('multi');
   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(() => {
     setName('');
-    setNameAutoFilled(false);
     setSourceLanguage('fr');
     setTargetLanguage('multi');
     setTerms([{ source: '', target: '' }]);
-    setFileTerms([]);
-    setSelectedTemplate(null);
-    setActiveTab('templates');
   }, []);
 
   const handleOpenChange = useCallback((newOpen: boolean) => {
@@ -309,100 +47,45 @@ export function CreateGlossaryDialog({
     onOpenChange(newOpen);
   }, [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 () => {
     if (!name.trim()) return;
-
-    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());
+    const termsToSave = terms.filter(t => t.source.trim() && t.target.trim());
     await onCreate({ name: name.trim(), source_language: sourceLanguage, target_language: targetLanguage, terms: termsToSave });
     reset();
-  }, [activeTab, selectedTemplate, name, fileTerms, terms, sourceLanguage, targetLanguage, onCreate, onImportTemplate, reset]);
+  }, [name, terms, sourceLanguage, targetLanguage, onCreate, reset]);
 
-  const canSubmit = (() => {
-    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 canSubmit = !!(name.trim() && !isCreating && terms.some(t => t.source.trim() && t.target.trim()));
 
-  const submitLabel = (() => {
-    if (isProcessing) {
-      return activeTab === 'templates'
-        ? t('glossaries.dialog.importing')
-        : t('glossaries.dialog.creating');
-    }
-    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" /> },
-  ];
+  const validTermsCount = terms.filter(t => t.source.trim() && t.target.trim()).length;
+  const submitLabel = isCreating
+    ? t('glossaries.dialog.creating') || 'Création…'
+    : validTermsCount > 0
+    ? t('glossaries.dialog.createBtn', { count: String(validTermsCount) }) || `Créer (${validTermsCount})`
+    : t('glossaries.dialog.createEmpty') || 'Créer vide';
 
   return (
     <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">
-
-        {/* ── Header ────────────────────────────────────── */}
         <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">
-            {t('glossaries.dialog.title')}
+            {t('glossaries.dialog.title') || 'Nouveau glossaire'}
           </DialogTitle>
           <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>
         </DialogHeader>
 
-        {/* ── Name + Languages ──────────────────────────── */}
         <div className="shrink-0 space-y-4 px-8 pt-5">
           <div>
             <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>
             <Input
               id="glossary-name"
               value={name}
-              onChange={(e) => { setName(e.target.value); setNameAutoFilled(false); }}
-              placeholder={t('glossaries.dialog.namePlaceholder')}
-              disabled={isProcessing}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t('glossaries.dialog.namePlaceholder') || 'Mon glossaire'}
+              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"
             />
           </div>
@@ -410,13 +93,13 @@ export function CreateGlossaryDialog({
           <div className="flex items-center gap-3">
             <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">
-                {t('glossaries.edit.sourceLang')}
+                {t('glossaries.edit.sourceLang') || 'Langue source'}
               </Label>
               <select
                 id="glossary-source-lang"
                 value={sourceLanguage}
                 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"
               >
                 {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="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">
-                {t('glossaries.edit.targetLang')}
+                {t('glossaries.edit.targetLang') || 'Langue cible'}
               </Label>
               <select
                 id="glossary-target-lang"
                 value={targetLanguage}
                 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"
               >
                 {SUPPORTED_LANGUAGES.map(l => (
@@ -444,94 +127,28 @@ export function CreateGlossaryDialog({
           </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 role="tabpanel" id="tabpanel-templates" aria-labelledby="tab-templates" hidden={activeTab !== 'templates'}>
-            <div className="space-y-3">
-              {isLoadingTemplates ? (
-                <div className="flex items-center justify-center py-10">
-                  <div className="animate-spin rounded-full h-6 w-6 border-2 border-brand-muted border-t-brand-accent" />
+          <div className="flex items-center gap-1.5 mb-3 text-brand-accent">
+            <PenLine className="size-3.5" />
+            <span className="text-xs font-bold uppercase tracking-wider">
+              {t('glossaries.dialog.tabManual') || 'Saisie manuelle'}
+            </span>
           </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}
+            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">
           <button
             type="button"
             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"
           >
-            {t('glossaries.dialog.cancel')}
+            {t('glossaries.dialog.cancel') || 'Annuler'}
           </button>
           <button
             type="button"
@@ -539,11 +156,10 @@ export function CreateGlossaryDialog({
             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"
           >
-            {isProcessing && <Loader2 className="size-3.5 animate-spin" />}
+            {isCreating && <Loader2 className="size-3.5 animate-spin" />}
             {submitLabel}
           </button>
         </div>
-
       </DialogContent>
     </Dialog>
   );

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

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

frontend/src/app/dashboard/glossaries/page.tsx

@@ -1,23 +1,133 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import {
   BookText, Plus, Library, Calendar, Hash,
   MessageSquare, Save, Trash2, Loader2,
   CheckCircle2, AlertCircle, ArrowRight, Info, ExternalLink, Search,
+  Upload, Scale, Cpu, TrendingUp, HeartPulse, Megaphone, Users, FlaskConical, ShoppingCart, Zap, PenLine
 } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { cn } from '@/lib/utils';
 import { useUser } from '@/app/dashboard/useUser';
 import { useI18n } from '@/lib/i18n';
-import { useGlossaries } from './useGlossaries';
-import type { GlossaryListItem } from './types';
+import { useGlossaries, useGlossaryTemplates } from './useGlossaries';
+import type { GlossaryListItem, GlossaryTermInput } from './types';
 import { ProUpgradePrompt } from './ProUpgradePrompt';
 import { CreateGlossaryDialog } from './CreateGlossaryDialog';
 import { useToast } from '@/components/ui/toast';
 import { SUPPORTED_LANGUAGES } from './types';
 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() {
   const { t } = useI18n();
@@ -32,6 +142,7 @@ export default function GlossariesPage() {
     createGlossary,
     importTemplate,
   } = useGlossaries();
+  const { templates, isLoading: isLoadingTemplates } = useGlossaryTemplates();
   const { toast } = useToast();
   const { settings, updateSettings } = useTranslationStore();
 
@@ -40,6 +151,7 @@ export default function GlossariesPage() {
   const [isSavingPrompt, setIsSavingPrompt] = useState(false);
   const [promptSaved, setPromptSaved] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const [importingPresetId, setImportingPresetId] = useState<string | null>(null);
 
   const isPro = user?.tier === 'pro';
   const isLoading = isLoadingUser || isLoadingGlossaries;
@@ -73,7 +185,7 @@ export default function GlossariesPage() {
     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 {
       await createGlossary(data);
       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 {
       await importTemplate(templateId, name);
-      setCreateDialogOpen(false);
       toast({
         title: t('glossaries.toast.imported'),
         description: name
@@ -107,11 +219,41 @@ export default function GlossariesPage() {
         title: t('glossaries.toast.error'),
         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(() => {
     if (!searchQuery.trim()) return glossaries;
     const q = searchQuery.toLowerCase();
@@ -133,6 +275,8 @@ export default function GlossariesPage() {
     return <ProUpgradePrompt />;
   }
 
+  const isProcessing = isCreating || isImportingTemplate || !!importingPresetId;
+
   return (
     <div className="max-w-6xl mx-auto w-full p-6 lg:p-8">
 
@@ -151,7 +295,7 @@ export default function GlossariesPage() {
         </div>
         <button
           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"
         >
           <Plus size={14} />
@@ -275,6 +419,122 @@ export default function GlossariesPage() {
           </div>
         </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 ────────────────────────────────────── */}
         <section>
           <div className="flex items-center justify-between mb-5 gap-4">
@@ -426,9 +686,7 @@ export default function GlossariesPage() {
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}
         onCreate={handleCreateGlossary}
-        onImportTemplate={handleImportTemplate}
         isCreating={isCreating}
-        isImportingTemplate={isImportingTemplate}
       />
     </div>
   );