fix: glossary selector — clear selected state, error feedback, click existing templates to select

- Round check icon on selected glossary (unmissable)
- Error banner when import fails (no more silent spinner)
- Click template that already exists = select it (no re-import)
- Single fetch for glossaries + templates (faster load)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { BookText, Plus, Loader2, Lock, Check } from 'lucide-react';
+import { BookText, Plus, Loader2, Lock, Check, AlertCircle } from 'lucide-react';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
@@ -36,69 +36,72 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
   const { t } = useI18n();
   const [glossaries, setGlossaries] = useState<GlossaryOption[]>([]);
   const [templates, setTemplates] = useState<TemplateOption[]>([]);
-  const [isLoadingGlossaries, setIsLoadingGlossaries] = useState(true);
-  const [isLoadingTemplates, setIsLoadingTemplates] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
   const [importingId, setImportingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const fetchGlossaries = useCallback(async () => {
+  const fetchData = useCallback(async () => {
     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?per_page=100`, { headers });
-      if (res.ok) {
-        const data = await res.json();
+
+      const [glossaryRes, templateRes] = await Promise.all([
+        fetch(`${API_BASE}/api/v1/glossaries?per_page=100`, { headers }),
+        fetch(`${API_BASE}/api/v1/glossaries/templates/list`, { headers }),
+      ]);
+
+      if (glossaryRes.ok) {
+        const data = await glossaryRes.json();
         setGlossaries(data.data || []);
       }
-    } catch {
-      // ignore
-    } finally {
-      setIsLoadingGlossaries(false);
-    }
-  }, []);
-
-  const fetchTemplates = useCallback(async () => {
-    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/templates/list`, { headers });
-      if (res.ok) {
-        const data = await res.json();
+      if (templateRes.ok) {
+        const data = await templateRes.json();
         setTemplates(data.data || []);
       }
     } catch {
       // ignore
     } finally {
-      setIsLoadingTemplates(false);
+      setIsLoading(false);
     }
   }, []);
 
-  useEffect(() => { fetchGlossaries(); }, [fetchGlossaries]);
-  useEffect(() => { fetchTemplates(); }, [fetchTemplates]);
+  useEffect(() => { fetchData(); }, [fetchData]);
 
   const handleImportTemplate = async (template: TemplateOption) => {
+    // If a glossary with this template's name already exists, just select it
+    const existing = glossaries.find(
+      g => g.name.toLowerCase().includes(template.name.toLowerCase().split('/')[0].trim())
+    );
+    if (existing) {
+      onChange(existing.id);
+      return;
+    }
+
     const token = localStorage.getItem('token');
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-    };
+    const headers: Record<string, string> = { 'Content-Type': 'application/json' };
     if (token) headers['Authorization'] = `Bearer ${token}`;
 
     setImportingId(template.id);
+    setError(null);
     try {
       const res = await fetch(`${API_BASE}/api/v1/glossaries/import`, {
         method: 'POST',
         headers,
         body: JSON.stringify({ template_id: template.id }),
       });
+
       if (res.ok) {
         const data = await res.json();
         const newId = data.data?.id;
-        await fetchGlossaries();
+        await fetchData(); // Refresh glossary list
         if (newId) onChange(newId);
+      } else {
+        const errData = await res.json().catch(() => null);
+        setError(errData?.message || `Import failed (${res.status})`);
       }
-    } catch {
-      // ignore
+    } catch (e) {
+      setError('Network error');
     } finally {
       setImportingId(null);
     }
@@ -107,7 +110,6 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
   const sourceFlag = SUPPORTED_LANGUAGES.find(l => l.code === sourceLang)?.flag ?? '';
   const targetFlag = SUPPORTED_LANGUAGES.find(l => l.code === targetLang)?.flag ?? '';
 
-  // Filter glossaries by source language (show all if auto)
   const filteredGlossaries = sourceLang === 'auto'
     ? glossaries
     : glossaries.filter(g => g.source_language === sourceLang);
@@ -133,46 +135,20 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
         </div>
       ) : (
         <div className="space-y-3">
-          {/* Selected glossary indicator */}
-          {selected && (
-            <div className="px-5 py-4 bg-brand-accent/5 dark:bg-brand-accent/10 border border-brand-accent/20 rounded-2xl flex items-center gap-3">
-              <Check size={14} className="text-brand-accent shrink-0" />
-              <span className="text-[10px] font-black uppercase tracking-widest text-brand-dark dark:text-white truncate">
-                {selected.name}
-              </span>
-              <span className="text-[9px] text-brand-dark/30 dark:text-white/30 font-normal normal-case ml-auto shrink-0">
-                ({selected.terms_count} {t('translate.glossary.terms')})
-              </span>
-              <button
-                onClick={() => onChange(null)}
-                disabled={disabled}
-                className="text-[9px] text-brand-dark/30 dark:text-white/30 hover:text-brand-dark dark:hover:text-white transition-colors ml-2"
-              >
-                ✕
-              </button>
+          {/* Error */}
+          {error && (
+            <div className="px-4 py-3 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/30 rounded-xl flex items-center gap-2">
+              <AlertCircle size={12} className="text-red-500 shrink-0" />
+              <span className="text-[10px] text-red-600 dark:text-red-400">{error}</span>
             </div>
           )}
 
           {/* My glossaries */}
-          {!isLoadingGlossaries && (filteredGlossaries.length > 0 || selected) && (
+          {!isLoading && filteredGlossaries.length > 0 && (
             <div className="space-y-1">
               <span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
                 {t('translate.glossary.myGlossaries') || 'Mes glossaires'}
               </span>
-              {selected && !filteredGlossaries.find(g => g.id === selected.id) && (
-                <button
-                  className="w-full px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest rounded-xl transition-all flex items-center gap-2 bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
-                  onClick={() => onChange(null)}
-                  disabled={disabled}
-                >
-                  <Check size={12} className="shrink-0" />
-                  <span className="truncate">{selected.name}</span>
-                  <span className="ml-auto text-brand-accent/60 font-normal normal-case shrink-0">
-                    {selected.terms_count} {t('translate.glossary.terms')}
-                  </span>
-                  <span className="text-brand-accent/50 ml-1">✕</span>
-                </button>
-              )}
               {filteredGlossaries.map(g => {
                 const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
                 const isSelected = g.id === glossaryId;
@@ -182,27 +158,33 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                     onClick={() => onChange(isSelected ? null : g.id)}
                     disabled={disabled}
                     className={cn(
-                      "w-full px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest rounded-xl transition-all flex items-center gap-2",
+                      "w-full px-4 py-3.5 text-left rounded-xl transition-all flex items-center gap-3",
                       isSelected
-                        ? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20 shadow-sm"
-                        : "bg-brand-muted/50 dark:bg-white/5 text-brand-dark/60 dark:text-white/60 hover:bg-brand-accent/5 hover:text-brand-dark dark:hover:text-white border border-transparent",
+                        ? "bg-brand-accent/10 border-2 border-brand-accent/30 shadow-sm"
+                        : "bg-brand-muted/50 dark:bg-white/5 border-2 border-transparent hover:border-brand-accent/15 hover:bg-brand-accent/5",
                       disabled && "opacity-50 cursor-not-allowed"
                     )}
                   >
                     {isSelected ? (
-                      <Check size={12} className="shrink-0" />
+                      <div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
+                        <Check size={11} className="text-white" />
+                      </div>
                     ) : (
-                      <span>{flag}</span>
+                      <span className="text-sm">{flag}</span>
                     )}
-                    <span className="truncate">{g.name}</span>
-                    <span className={cn(
-                      "ml-auto font-normal normal-case shrink-0",
-                      isSelected ? "text-brand-accent/60" : "text-brand-dark/25 dark:text-white/25"
-                    )}>
-                      {g.terms_count} {t('translate.glossary.terms')}
-                    </span>
+                    <div className="min-w-0 flex-1">
+                      <div className={cn(
+                        "text-[11px] font-bold truncate",
+                        isSelected ? "text-brand-accent" : "text-brand-dark/70 dark:text-white/70"
+                      )}>
+                        {g.name}
+                      </div>
+                      <div className="text-[9px] text-brand-dark/30 dark:text-white/30 font-normal normal-case">
+                        {g.terms_count} {t('translate.glossary.terms')}
+                      </div>
+                    </div>
                     {isSelected && (
-                      <span className="text-brand-accent/50 ml-1">✕</span>
+                      <span className="text-[10px] text-brand-accent/50 hover:text-brand-accent font-bold">✕</span>
                     )}
                   </button>
                 );
@@ -210,8 +192,33 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
             </div>
           )}
 
+          {/* Also show selected glossary if filtered out */}
+          {selected && !filteredGlossaries.find(g => g.id === selected.id) && (
+            <div className="space-y-1">
+              <span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
+                {t('translate.glossary.myGlossaries') || 'Mes glossaires'}
+              </span>
+              <button
+                onClick={() => onChange(null)}
+                disabled={disabled}
+                className="w-full px-4 py-3.5 text-left rounded-xl transition-all flex items-center gap-3 bg-brand-accent/10 border-2 border-brand-accent/30 shadow-sm"
+              >
+                <div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
+                  <Check size={11} className="text-white" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-[11px] font-bold truncate text-brand-accent">{selected.name}</div>
+                  <div className="text-[9px] text-brand-dark/30 dark:text-white/30 font-normal normal-case">
+                    {selected.terms_count} {t('translate.glossary.terms')}
+                  </div>
+                </div>
+                <span className="text-[10px] text-brand-accent/50 hover:text-brand-accent font-bold">✕</span>
+              </button>
+            </div>
+          )}
+
           {/* Templates */}
-          {!isLoadingTemplates && templates.length > 0 && (
+          {!isLoading && templates.length > 0 && (
             <div className="space-y-2 pt-2 border-t border-black/5 dark:border-white/5">
               <span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
                 {t('translate.glossary.fromTemplate') || 'Créer depuis un template'}
@@ -219,36 +226,47 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
               <div className="grid grid-cols-2 gap-2">
                 {templates.map(tmpl => {
                   const isImporting = importingId === tmpl.id;
-                  const alreadyExists = glossaries.some(
+                  const existingGlossary = glossaries.find(
                     g => g.name.toLowerCase().includes(tmpl.name.toLowerCase().split('/')[0].trim())
                   );
+                  const isAlreadySelected = existingGlossary?.id === glossaryId;
                   return (
                     <button
                       key={tmpl.id}
-                      onClick={() => !alreadyExists && !isImporting && handleImportTemplate(tmpl)}
-                      disabled={disabled || isImporting || alreadyExists}
+                      onClick={() => {
+                        if (existingGlossary) {
+                          onChange(isAlreadySelected ? null : existingGlossary.id);
+                        } else if (!isImporting) {
+                          handleImportTemplate(tmpl);
+                        }
+                      }}
+                      disabled={disabled || isImporting}
                       className={cn(
                         "px-3 py-2.5 text-left rounded-xl transition-all flex items-center gap-2 border",
-                        alreadyExists
-                          ? "bg-brand-muted/30 dark:bg-white/5 border-black/5 dark:border-white/5 opacity-40 cursor-default"
+                        isAlreadySelected
+                          ? "bg-brand-accent/10 border-brand-accent/30"
+                          : existingGlossary
+                          ? "bg-brand-muted/30 dark:bg-white/5 border-black/5 dark:border-white/5 hover:border-brand-accent/20 hover:bg-brand-accent/5"
                           : isImporting
-                          ? "bg-brand-accent/5 border-brand-accent/20 cursor-wait"
-                          : "bg-brand-muted/50 dark:bg-white/5 border-transparent hover:border-brand-accent/20 hover:bg-brand-accent/5 cursor-pointer",
+                          ? "bg-brand-accent/5 border-brand-accent/20"
+                          : "bg-brand-muted/50 dark:bg-white/5 border-transparent hover:border-brand-accent/20 hover:bg-brand-accent/5",
                         disabled && "opacity-50 cursor-not-allowed"
                       )}
                     >
                       {isImporting ? (
                         <Loader2 size={12} className="text-brand-accent animate-spin shrink-0" />
-                      ) : alreadyExists ? (
+                      ) : isAlreadySelected ? (
+                        <div className="w-4 h-4 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
+                          <Check size={9} className="text-white" />
+                        </div>
+                      ) : existingGlossary ? (
                         <Check size={12} className="text-brand-dark/30 dark:text-white/30 shrink-0" />
                       ) : (
                         <Plus size={12} className="text-brand-accent shrink-0" />
                       )}
                       <span className={cn(
                         "text-[9px] font-black uppercase tracking-widest truncate",
-                        alreadyExists
-                          ? "text-brand-dark/30 dark:text-white/30"
-                          : "text-brand-dark/60 dark:text-white/60"
+                        isAlreadySelected ? "text-brand-accent" : "text-brand-dark/50 dark:text-white/50"
                       )}>
                         {tmpl.name.split('/')[0].trim()}
                       </span>
@@ -260,15 +278,15 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
           )}
 
           {/* Loading */}
-          {(isLoadingGlossaries || isLoadingTemplates) && (
+          {isLoading && (
             <div className="flex items-center gap-2 px-4 py-3 text-[10px] text-brand-dark/30 dark:text-white/30">
               <Loader2 size={12} className="animate-spin" />
               {t('translate.glossary.loading') || 'Chargement...'}
             </div>
           )}
 
-          {/* Empty state */}
-          {!isLoadingGlossaries && filteredGlossaries.length === 0 && !selected && (
+          {/* Empty */}
+          {!isLoading && filteredGlossaries.length === 0 && !selected && (
             <p className="text-[10px] text-brand-dark/25 dark:text-white/25 pl-1 italic">
               {sourceLang !== 'auto'
                 ? `${t('translate.glossary.noGlossaryForPair') || 'Aucun glossaire pour'} ${sourceFlag}→${targetFlag}`