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

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>
   );