feat(translate): refonte complete du composant GlossarySelector (Etape 4)

frontend/src/app/dashboard/translate/GlossarySelector.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { BookText, Plus, Loader2, Check, ChevronDown, X } from 'lucide-react';
+import { BookText, Plus, Loader2, Check, ChevronDown, X, Globe } from 'lucide-react';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
+import { Switch } from '@/components/ui/switch';
 import { SUPPORTED_LANGUAGES } from '../glossaries/types';
 
 interface GlossaryOption {
@@ -37,12 +38,20 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
   const [glossaries, setGlossaries] = useState<GlossaryOption[]>([]);
   const [templates, setTemplates] = useState<TemplateOption[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isGlossaryEnabled, setIsGlossaryEnabled] = useState(!!glossaryId);
+  const [selectedGlossaryDetail, setSelectedGlossaryDetail] = useState<any>(null);
+  const [isLoadingDetail, setIsLoadingDetail] = useState(false);
   const [importingId, setImportingId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isOpen, setIsOpen] = useState(false);
-  const [showTemplates, setShowTemplates] = useState(true);
+  const [showTemplates, setShowTemplates] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Form states for adding term
+  const [newSource, setNewSource] = useState('');
+  const [newTarget, setNewTarget] = useState('');
+  const [isAddingTerm, setIsAddingTerm] = useState(false);
+
   const fetchData = useCallback(async () => {
     try {
       const token = localStorage.getItem('token');
@@ -69,14 +78,42 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
     }
   }, []);
 
+  const fetchGlossaryDetail = useCallback(async (id: string) => {
+    setIsLoadingDetail(true);
+    try {
+      const token = localStorage.getItem('token');
+      const headers: Record<string, string> = {};
+      if (token) headers['Authorization'] = `Bearer ${token}`;
+
+      const res = await fetch(`${API_BASE}/api/v1/glossaries/${id}`, { headers });
+      if (res.ok) {
+        const data = await res.json();
+        setSelectedGlossaryDetail(data.data || null);
+      }
+    } catch {
+      // ignore
+    } finally {
+      setIsLoadingDetail(false);
+    }
+  }, []);
+
   useEffect(() => { fetchData(); }, [fetchData]);
 
+  // Synchronize glossary detail and enablement state with props
+  useEffect(() => {
+    if (glossaryId) {
+      setIsGlossaryEnabled(true);
+      fetchGlossaryDetail(glossaryId);
+    } else {
+      setSelectedGlossaryDetail(null);
+    }
+  }, [glossaryId, fetchGlossaryDetail]);
+
   // Close dropdown on outside click
   useEffect(() => {
     function handleClick(e: MouseEvent) {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
         setIsOpen(false);
-        setShowTemplates(false);
       }
     }
     if (isOpen) document.addEventListener('mousedown', handleClick);
@@ -89,6 +126,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
     );
     if (existing) {
       onChange(existing.id);
+      setIsGlossaryEnabled(true);
       setIsOpen(false);
       return;
     }
@@ -109,7 +147,10 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
         const data = await res.json();
         const newId = data.data?.id;
         await fetchData();
-        if (newId) onChange(newId);
+        if (newId) {
+          onChange(newId);
+          setIsGlossaryEnabled(true);
+        }
         setIsOpen(false);
       } else {
         const errData = await res.json().catch(() => null);
@@ -122,6 +163,61 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
     }
   };
 
+  const handleAddTerm = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!glossaryId || !newSource.trim() || !newTarget.trim()) return;
+
+    setIsAddingTerm(true);
+    setError(null);
+    try {
+      const token = localStorage.getItem('token');
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+      if (token) headers['Authorization'] = `Bearer ${token}`;
+
+      // Fetch latest terms
+      const detailRes = await fetch(`${API_BASE}/api/v1/glossaries/${glossaryId}`, { headers });
+      let currentTerms = [];
+      if (detailRes.ok) {
+        const detailData = await detailRes.json();
+        currentTerms = detailData.data?.terms || [];
+      }
+
+      const mappedTerms = currentTerms.map((t: any) => ({
+        source: t.source,
+        target: t.target,
+        translations: t.translations || {}
+      }));
+
+      // Append
+      const updatedTerms = [...mappedTerms, { source: newSource.trim(), target: newTarget.trim(), translations: {} }];
+
+      const res = await fetch(`${API_BASE}/api/v1/glossaries/${glossaryId}`, {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify({
+          terms: updatedTerms
+        })
+      });
+
+      if (res.ok) {
+        setNewSource('');
+        setNewTarget('');
+        // Refresh details
+        fetchGlossaryDetail(glossaryId);
+        fetchData();
+      } else {
+        const errData = await res.json().catch(() => null);
+        setError(errData?.message || 'Erreur lors de l\'ajout du terme');
+      }
+    } catch {
+      setError('Erreur réseau');
+    } finally {
+      setIsAddingTerm(false);
+    }
+  };
+
   const sourceFlag = SUPPORTED_LANGUAGES.find(l => l.code === sourceLang)?.flag ?? '';
   const targetFlag = SUPPORTED_LANGUAGES.find(l => l.code === targetLang)?.flag ?? '';
 
@@ -129,28 +225,61 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
     ? glossaries
     : glossaries.filter(g => g.source_language === sourceLang);
 
-  // If filtering by source language yields nothing, show all glossaries
   const filteredGlossaries = langFiltered.length > 0 ? langFiltered : glossaries;
-
   const selected = glossaries.find(g => g.id === glossaryId);
 
   return (
-    <div className="space-y-2 relative" ref={containerRef}>
-      <label className="text-[11px] font-black text-brand-dark/50 dark:text-white/50 uppercase tracking-[0.15em] block">
-        <BookText size={12} className="inline mr-1.5 text-brand-accent" />
-        {t('translate.glossary.title')} <span className="normal-case tracking-normal font-normal text-brand-dark/40 dark:text-white/40">({sourceFlag}→{targetFlag})</span>
-      </label>
+    <div className="space-y-4 text-left" ref={containerRef}>
+      {/* Header with Switch */}
+      <div className="flex items-center justify-between pb-2 border-b border-black/5 dark:border-white/5">
+        <div className="flex items-center gap-1.5 min-w-0">
+          <BookText size={13} className="text-brand-accent shrink-0" />
+          <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-dark dark:text-white truncate">
+            {t('translate.glossary.title') || 'Glossaire personnel'}
+          </span>
+          <span className="text-[9px] text-brand-dark/40 dark:text-white/40 shrink-0 font-medium font-mono">
+            ({sourceFlag || 'AUTO'}➔{targetFlag})
+          </span>
+        </div>
         
+        {isPro && (
+          <Switch
+            checked={isGlossaryEnabled}
+            onCheckedChange={(checked) => {
+              setIsGlossaryEnabled(checked);
+              if (!checked) {
+                onChange(null);
+              }
+            }}
+            disabled={disabled}
+            aria-label="Activer le glossaire"
+          />
+        )}
+      </div>
+
+      {/* Pro limitation message */}
+      {!isPro && (
+        <div className="p-3.5 rounded-2xl bg-brand-muted/20 border border-brand-dark/5 dark:bg-white/5 dark:border-white/5 text-center">
+          <p className="text-[10px] text-brand-dark/50 dark:text-white/40 leading-relaxed font-light">
+            {t('translate.glossary.proOnly') || 'Passez Pro pour appliquer vos glossaires terminologiques.'}
+          </p>
+        </div>
+      )}
+
+      {/* Enabled glossary selector details */}
+      {isPro && isGlossaryEnabled && (
+        <div className="space-y-3.5">
           {/* Dropdown trigger */}
+          <div className="relative">
             <button
               type="button"
               disabled={disabled}
               onClick={() => setIsOpen(!isOpen)}
               className={cn(
-          "w-full px-4 py-3 rounded-xl text-left flex items-center gap-3 transition-all border-2",
+                "w-full px-4 py-3 rounded-2xl text-left flex items-center gap-3 transition-all border-2",
                 isOpen
-            ? "border-brand-accent/30 bg-brand-accent/5"
-            : "bg-brand-muted/50 dark:bg-white/5 border-transparent hover:border-brand-accent/15",
+                  ? "border-brand-accent bg-brand-muted/20 dark:bg-zinc-800/40"
+                  : "bg-white dark:bg-[#141414] border-brand-dark/10 dark:border-white/10 hover:border-brand-accent/20",
                 disabled && "opacity-50 cursor-not-allowed"
               )}
             >
@@ -160,44 +289,44 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                     <Check size={11} className="text-white" />
                   </div>
                   <div className="min-w-0 flex-1">
-              <div className="text-[11px] font-bold truncate text-brand-accent">{selected.name}</div>
-              <div className="text-[11px] text-brand-dark/50 dark:text-white/50">{selected.terms_count} {t('translate.glossary.terms')}</div>
+                    <div className="text-[11px] font-bold truncate text-brand-accent leading-tight">{selected.name}</div>
+                    <div className="text-[9px] text-brand-dark/50 dark:text-white/50 uppercase tracking-wider font-semibold mt-0.5">{selected.terms_count} {t('translate.glossary.terms') || 'termes'}</div>
                   </div>
                   <button
                     type="button"
                     onClick={(e) => { e.stopPropagation(); onChange(null); }}
-              className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-brand-dark/40 hover:text-brand-dark hover:bg-brand-muted dark:text-white/40 dark:hover:text-white dark:hover:bg-white/10 transition-colors"
+                    className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-brand-dark/45 hover:text-brand-dark hover:bg-brand-muted dark:text-white/45 dark:hover:text-white dark:hover:bg-white/10 transition-colors"
                   >
                     <X size={11} />
                   </button>
                 </>
               ) : (
                 <>
-            <span className="text-sm">{sourceFlag}</span>
-            <span className="text-[11px] text-brand-dark/40 dark:text-white/40 flex-1">
+                  <Globe className="size-4 text-brand-dark/35 dark:text-white/30 shrink-0" />
+                  <span className="text-[11px] text-brand-dark/45 dark:text-white/40 flex-1 leading-none font-medium">
                     {isLoading ? (
-                <span className="flex items-center gap-1.5"><Loader2 size={10} className="animate-spin" /> {t('translate.glossary.loading')}</span>
+                      <span className="flex items-center gap-1.5"><Loader2 size={10} className="animate-spin" /> {t('translate.glossary.loading') || 'Chargement...'}</span>
                     ) : filteredGlossaries.length > 0 ? (
                       t('translate.glossary.selectGlossary') || 'Sélectionner un glossaire…'
                     ) : (
-                t('translate.glossary.noGlossaries') || 'Aucun glossaire'
+                      t('translate.glossary.noGlossaries') || 'Aucun glossaire disponible'
                     )}
                   </span>
                 </>
               )}
-        <ChevronDown size={14} className={cn("shrink-0 text-brand-dark/40 dark:text-white/40 transition-transform", isOpen && "rotate-180")} />
+              <ChevronDown size={14} className={cn("shrink-0 text-brand-dark/35 dark:text-white/30 transition-transform duration-200", isOpen && "rotate-180")} />
             </button>
 
-      {/* Error */}
+            {/* Error panel */}
             {error && (
-        <p className="text-[11px] text-red-500 pl-1">{error}</p>
+              <p className="text-[10px] text-red-500 pl-1 mt-1 font-medium">{error}</p>
             )}
 
             {/* Dropdown panel */}
             {isOpen && !disabled && (
-        <div className="absolute left-0 right-0 z-30 mt-1 bg-white dark:bg-[#1a1a1a] border border-black/10 dark:border-white/10 rounded-2xl shadow-xl overflow-hidden">
+              <div className="absolute left-0 right-0 z-30 mt-1 bg-white dark:bg-[#1a1a1a] border border-brand-dark/10 dark:border-white/10 rounded-2xl shadow-xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
                 {/* Glossary list */}
-          <div className="max-h-48 overflow-y-auto">
+                <div className="max-h-48 overflow-y-auto divide-y divide-brand-dark/5 dark:divide-white/5">
                   {filteredGlossaries.length > 0 ? (
                     <div className="py-1">
                       {filteredGlossaries.map(g => {
@@ -209,7 +338,7 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                             onClick={() => { onChange(isSelected ? null : g.id); if (!isSelected) setIsOpen(false); }}
                             className={cn(
                               "w-full px-4 py-2.5 text-left flex items-center gap-3 transition-colors",
-                        isSelected ? "bg-brand-accent/10" : "hover:bg-brand-muted/50 dark:hover:bg-white/5"
+                              isSelected ? "bg-brand-accent/5" : "hover:bg-brand-muted/40 dark:hover:bg-white/5"
                             )}
                           >
                             {isSelected ? (
@@ -217,44 +346,43 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                                 <Check size={9} className="text-white" />
                               </div>
                             ) : (
-                        <span className="text-xs">{flag}</span>
+                              <span className="text-[10.5px] font-mono shrink-0">{flag || '🌐'}</span>
                             )}
                             <div className="min-w-0 flex-1">
-                        <div className={cn("text-[11px] font-bold truncate", isSelected ? "text-brand-accent" : "text-brand-dark/70 dark:text-white/70")}>
+                              <div className={cn("text-[11px] font-bold truncate", isSelected ? "text-brand-accent" : "text-brand-dark/75 dark:text-white/75")}>
                                 {g.name}
                               </div>
                             </div>
-                      <span className="text-[10px] text-brand-dark/45 dark:text-white/45">{g.terms_count} {t('translate.glossary.terms')}</span>
+                            <span className="text-[9px] text-brand-dark/45 dark:text-white/45 font-mono uppercase font-bold">{g.terms_count} {t('translate.glossary.terms') || 't'}</span>
                           </button>
                         );
                       })}
                     </div>
                   ) : (
-              <p className="px-4 py-3 text-[10px] text-brand-dark/25 dark:text-white/25 italic">
+                    <p className="px-4 py-4 text-[10px] text-brand-dark/40 dark:text-white/30 italic text-center font-light">
                       {sourceLang !== 'auto'
-                  ? `${t('translate.glossary.noGlossaryForPair') || 'Aucun glossaire pour'} ${sourceFlag}→${targetFlag}`
+                        ? `${t('translate.glossary.noGlossaryForPair') || 'Aucun glossaire pour'} ${sourceFlag}➔${targetFlag}`
                         : (t('translate.glossary.noGlossaries') || 'Aucun glossaire')
                       }
                     </p>
                   )}
                 </div>
 
-          {/* Templates section — collapsed by default */}
+                {/* Templates shortcut button */}
                 {templates.length > 0 && (
-            <>
-              <div className="border-t border-black/5 dark:border-white/5">
+                  <div className="border-t border-brand-dark/5 dark:border-white/5 bg-brand-muted/10 dark:bg-white/[0.01]">
                     <button
                       type="button"
-                  onClick={() => setShowTemplates(!showTemplates)}
-                  className="w-full px-4 py-2.5 flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-brand-dark/30 dark:text-white/30 hover:text-brand-accent transition-colors"
+                      onClick={() => { setShowTemplates(!showTemplates); }}
+                      className="w-full px-4 py-2.5 flex items-center gap-2 text-[9px] font-bold uppercase tracking-widest text-brand-dark/45 dark:text-white/40 hover:text-brand-accent transition-colors"
                     >
-                  <Plus size={10} className="text-brand-accent" />
+                      <Plus size={11} className="text-brand-accent" />
                       {t('translate.glossary.fromTemplate') || 'Créer depuis un template'}
-                  <ChevronDown size={10} className={cn("ml-auto transition-transform", showTemplates && "rotate-180")} />
+                      <ChevronDown size={11} className={cn("ml-auto transition-transform duration-200", showTemplates && "rotate-180")} />
                     </button>
-              </div>
+                    
                     {showTemplates && (
-                <div className="border-t border-black/5 dark:border-white/5 p-2 grid grid-cols-2 gap-1.5 max-h-32 overflow-y-auto">
+                      <div className="border-t border-brand-dark/5 dark:border-white/5 p-2 grid grid-cols-2 gap-1.5 max-h-32 overflow-y-auto bg-brand-muted/20 dark:bg-transparent">
                         {templates.map(tmpl => {
                           const isImporting = importingId === tmpl.id;
                           const existingGlossary = glossaries.find(
@@ -274,10 +402,10 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                               }}
                               disabled={isImporting}
                               className={cn(
-                          "px-2.5 py-2 rounded-lg text-left flex items-center gap-1.5 transition-all border",
+                                "px-2.5 py-1.5 rounded-xl text-left flex items-center gap-1.5 transition-all border",
                                 isAlreadySelected
-                            ? "bg-brand-accent/10 border-brand-accent/20"
-                            : "bg-transparent border-transparent hover:bg-brand-accent/5 hover:border-brand-accent/10",
+                                  ? "bg-brand-accent/15 border-brand-accent/25"
+                                  : "bg-white dark:bg-[#141414] border-brand-dark/5 dark:border-white/5 hover:border-brand-accent/20",
                                 isImporting && "opacity-60"
                               )}
                             >
@@ -289,8 +417,8 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                                 <Plus size={10} className="text-brand-accent/50 shrink-0" />
                               )}
                               <span className={cn(
-                          "text-[9px] font-bold truncate",
-                          isAlreadySelected ? "text-brand-accent" : "text-brand-dark/40 dark:text-white/40"
+                                "text-[9px] font-semibold truncate",
+                                isAlreadySelected ? "text-brand-accent" : "text-brand-dark/65 dark:text-white/60"
                               )}>
                                 {tmpl.name.split('/')[0].trim()}
                               </span>
@@ -299,7 +427,78 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                         })}
                       </div>
                     )}
-            </>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Active Glossary detail section (Preview & Add inline) */}
+          {selected && (
+            <div className="p-3.5 rounded-2xl border border-brand-dark/10 dark:border-white/10 bg-brand-muted/20 dark:bg-white/[0.02] space-y-3.5">
+              {/* Preview header */}
+              <div className="flex items-center justify-between text-[9px] font-bold uppercase tracking-wider text-brand-dark/45 dark:text-white/40">
+                <span>Aperçu des termes</span>
+                <span>{selectedGlossaryDetail?.terms?.length || selected.terms_count} au total</span>
+              </div>
+
+              {/* Dynamic scrollable terms preview */}
+              <div className="rounded-xl border border-brand-dark/5 dark:border-white/5 bg-white dark:bg-[#141414] max-h-28 overflow-y-auto px-3 py-1.5 divide-y divide-brand-dark/[0.03] dark:divide-white/[0.03]">
+                {isLoadingDetail ? (
+                  <div className="flex items-center justify-center py-4 gap-2 text-[10px] text-brand-dark/40 dark:text-white/30 font-light">
+                    <Loader2 size={11} className="animate-spin text-brand-accent" /> Chargement des termes...
+                  </div>
+                ) : selectedGlossaryDetail?.terms && selectedGlossaryDetail.terms.length > 0 ? (
+                  selectedGlossaryDetail.terms.map((t: any, i: number) => (
+                    <div key={t.id || i} className="flex justify-between items-center py-1.5 text-[10px]">
+                      <span className="font-semibold text-brand-dark/75 dark:text-white/70 truncate pr-2 max-w-[110px]" title={t.source}>
+                        {t.source}
+                      </span>
+                      <span className="text-[8px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest shrink-0">➔</span>
+                      <span className="font-light text-brand-dark/65 dark:text-white/60 truncate pl-2 max-w-[110px]" title={t.target}>
+                        {t.target}
+                      </span>
+                    </div>
+                  ))
+                ) : (
+                  <p className="py-4 text-[10px] text-brand-dark/40 dark:text-white/30 italic text-center font-light">Aucun terme dans ce glossaire.</p>
+                )}
+              </div>
+
+              {/* Form to add a new term inline */}
+              <form onSubmit={handleAddTerm} className="pt-2 border-t border-brand-dark/5 dark:border-white/5 flex gap-2">
+                <input
+                  type="text"
+                  required
+                  placeholder="Source..."
+                  value={newSource}
+                  onChange={(e) => setNewSource(e.target.value)}
+                  disabled={isAddingTerm}
+                  className="flex-1 min-w-0 bg-white dark:bg-[#141414] border border-brand-dark/10 dark:border-white/10 rounded-xl px-2.5 py-1.5 text-[10px] placeholder:text-brand-dark/30 dark:placeholder:text-white/30 focus:border-brand-accent focus:outline-none transition-colors"
+                />
+                <input
+                  type="text"
+                  required
+                  placeholder="Cible..."
+                  value={newTarget}
+                  onChange={(e) => setNewTarget(e.target.value)}
+                  disabled={isAddingTerm}
+                  className="flex-1 min-w-0 bg-white dark:bg-[#141414] border border-brand-dark/10 dark:border-white/10 rounded-xl px-2.5 py-1.5 text-[10px] placeholder:text-brand-dark/30 dark:placeholder:text-white/30 focus:border-brand-accent focus:outline-none transition-colors"
+                />
+                <button
+                  type="submit"
+                  disabled={isAddingTerm || !newSource.trim() || !newTarget.trim()}
+                  className="shrink-0 w-8 h-8 rounded-xl bg-brand-dark dark:bg-white text-white dark:text-brand-dark flex items-center justify-center hover:opacity-90 active:scale-[0.96] transition-all disabled:opacity-30 disabled:cursor-not-allowed shadow-sm"
+                  title="Ajouter le terme au glossaire"
+                >
+                  {isAddingTerm ? (
+                    <Loader2 size={12} className="animate-spin" />
+                  ) : (
+                    <Plus size={14} />
+                  )}
+                </button>
+              </form>
+            </div>
           )}
         </div>
       )}