feat: multilingual glossary templates + inline GlossarySelector rewrite

- Enriched 8 glossary templates with 18,191 translations across 11 languages
  using LLM batch generation + back-translation validation (99.98% confirmed)
- Rewrote GlossarySelector as inline section with template creation
- Fixed sidebar duplicate (single Glossaries link with proOnly flag)
- Added glossaryId reset when sourceLang changes
- Always show GlossarySelector (locked with Pro badge for free users)
- Added source_language flag on glossary cards
- Redirected /dashboard/context to /dashboard/glossaries
- Updated import endpoint to read translations from templates
- Added enrichment script (scripts/enrich_glossary_templates.py)
- Added 6 i18n keys across all 13 locales

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 } from 'react';
-import { BookText, ChevronDown } from 'lucide-react';
+import { useState, useEffect, useCallback } from 'react';
+import { BookText, Plus, Loader2, Lock, Check } from 'lucide-react';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
@@ -14,112 +14,245 @@ interface GlossaryOption {
   terms_count: number;
 }
 
+interface TemplateOption {
+  id: string;
+  name: string;
+  description: string;
+  source_lang: string;
+  target_lang: string;
+  terms_count: number;
+}
+
 interface GlossarySelectorProps {
+  sourceLang: string;
+  targetLang: string;
+  isPro: boolean;
   glossaryId: string | null;
   onChange: (id: string | null) => void;
   disabled?: boolean;
 }
 
-export function GlossarySelector({ glossaryId, onChange, disabled }: GlossarySelectorProps) {
+export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, onChange, disabled }: GlossarySelectorProps) {
   const { t } = useI18n();
   const [glossaries, setGlossaries] = useState<GlossaryOption[]>([]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
+  const [templates, setTemplates] = useState<TemplateOption[]>([]);
+  const [isLoadingGlossaries, setIsLoadingGlossaries] = useState(true);
+  const [isLoadingTemplates, setIsLoadingTemplates] = useState(true);
+  const [importingId, setImportingId] = useState<string | null>(null);
 
-  useEffect(() => {
-    const fetchGlossaries = 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();
-          setGlossaries(data.data || []);
-        }
-      } catch {
-        // ignore
-      } finally {
-        setIsLoading(false);
+  const fetchGlossaries = 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();
+        setGlossaries(data.data || []);
       }
-    };
-    fetchGlossaries();
+    } catch {
+      // ignore
+    } finally {
+      setIsLoadingGlossaries(false);
+    }
   }, []);
 
-  const selected = glossaries.find(g => g.id === glossaryId);
-  const sourceFlag = SUPPORTED_LANGUAGES.find(l => l.code === selected?.source_language)?.flag ?? '';
+  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();
+        setTemplates(data.data || []);
+      }
+    } catch {
+      // ignore
+    } finally {
+      setIsLoadingTemplates(false);
+    }
+  }, []);
 
-  if (isLoading || glossaries.length === 0) return null;
+  useEffect(() => { fetchGlossaries(); }, [fetchGlossaries]);
+  useEffect(() => { fetchTemplates(); }, [fetchTemplates]);
+
+  const handleImportTemplate = async (template: TemplateOption) => {
+    const token = localStorage.getItem('token');
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (token) headers['Authorization'] = `Bearer ${token}`;
+
+    setImportingId(template.id);
+    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();
+        if (newId) onChange(newId);
+      }
+    } catch {
+      // ignore
+    } finally {
+      setImportingId(null);
+    }
+  };
+
+  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);
+
+  const selected = glossaries.find(g => g.id === glossaryId);
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-4">
       <label className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-[0.2em] block">
         <BookText size={10} className="inline mr-1.5 text-brand-accent" />
-        {t('translate.glossary.title')}
+        {t('translate.glossary.title')} <span className="normal-case tracking-normal font-normal text-brand-dark/25 dark:text-white/25">({sourceFlag}→{targetFlag})</span>
       </label>
 
-      <div className="relative">
-        <button
-          onClick={() => !disabled && setIsOpen(!isOpen)}
-          disabled={disabled}
-          className={cn(
-            "w-full px-5 py-4 bg-brand-muted dark:bg-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest border border-black/5 dark:border-white/10 flex items-center justify-between gap-3 transition-all",
-            isOpen && "ring-2 ring-brand-accent/20 border-brand-accent/30",
-            disabled && "opacity-50 cursor-not-allowed"
-          )}
-        >
-          <span className={cn(
-            "truncate",
-            selected ? "text-brand-dark dark:text-white" : "text-brand-dark/30 dark:text-white/30"
-          )}>
-            {selected ? (
-              <>{sourceFlag} {selected.name} <span className="text-brand-dark/30 dark:text-white/30 font-normal normal-case">({selected.terms_count} {t('translate.glossary.terms')})</span></>
-            ) : (
-              t('translate.glossary.select')
-            )}
+      {!isPro ? (
+        <div className="px-5 py-4 bg-brand-muted/50 dark:bg-white/5 rounded-2xl border border-black/5 dark:border-white/10 flex items-center gap-3 opacity-70">
+          <Lock size={12} className="text-brand-dark/30 dark:text-white/30" />
+          <span className="text-[10px] font-bold text-brand-dark/40 dark:text-white/40">
+            {t('translate.glossary.proOnly')}
           </span>
-          <ChevronDown size={14} className={cn(
-            "text-brand-accent shrink-0 transition-transform",
-            isOpen && "rotate-180"
-          )} />
-        </button>
+          <span className="ml-auto px-2 py-0.5 bg-brand-accent/10 text-brand-accent text-[8px] font-black uppercase tracking-widest rounded">
+            Pro
+          </span>
+        </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>
+            </div>
+          )}
 
-        {isOpen && (
-          <div className="absolute z-50 top-full left-0 right-0 mt-2 bg-white dark:bg-[#1a1a1a] rounded-2xl border border-black/10 dark:border-white/10 shadow-xl max-h-64 overflow-y-auto">
-            {/* None option */}
-            <button
-              onClick={() => { onChange(null); setIsOpen(false); }}
-              className={cn(
-                "w-full px-5 py-3 text-left text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted dark:hover:bg-white/5 transition-colors",
-                !glossaryId ? "text-brand-accent" : "text-brand-dark/30 dark:text-white/30"
-              )}
-            >
-              {t('translate.glossary.none')}
-            </button>
+          {/* My glossaries */}
+          {!isLoadingGlossaries && 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>
+              {filteredGlossaries.map(g => {
+                const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
+                return (
+                  <button
+                    key={g.id}
+                    onClick={() => onChange(g.id === glossaryId ? 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",
+                      g.id === glossaryId
+                        ? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
+                        : "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",
+                      disabled && "opacity-50 cursor-not-allowed"
+                    )}
+                  >
+                    <span>{flag}</span>
+                    <span className="truncate">{g.name}</span>
+                    <span className="ml-auto text-brand-dark/25 dark:text-white/25 font-normal normal-case shrink-0">
+                      {g.terms_count} {t('translate.glossary.terms')}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
 
-            {glossaries.map((g) => {
-              const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
-              return (
-                <button
-                  key={g.id}
-                  onClick={() => { onChange(g.id); setIsOpen(false); }}
-                  className={cn(
-                    "w-full px-5 py-3 text-left text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted dark:hover:bg-white/5 transition-colors border-t border-black/5 dark:border-white/5",
-                    glossaryId === g.id ? "text-brand-accent" : "text-brand-dark dark:text-white"
-                  )}
-                >
-                  <span className="mr-2">{flag}</span>
-                  {g.name}
-                  <span className="ml-2 text-brand-dark/30 dark:text-white/30 font-normal normal-case">
-                    ({g.terms_count} {t('translate.glossary.terms')})
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        )}
-      </div>
+          {/* Templates */}
+          {!isLoadingTemplates && 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'}
+              </span>
+              <div className="grid grid-cols-2 gap-2">
+                {templates.map(tmpl => {
+                  const isImporting = importingId === tmpl.id;
+                  const alreadyExists = glossaries.some(
+                    g => g.name.toLowerCase().includes(tmpl.name.toLowerCase().split('/')[0].trim())
+                  );
+                  return (
+                    <button
+                      key={tmpl.id}
+                      onClick={() => !alreadyExists && !isImporting && handleImportTemplate(tmpl)}
+                      disabled={disabled || isImporting || alreadyExists}
+                      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"
+                          : 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",
+                        disabled && "opacity-50 cursor-not-allowed"
+                      )}
+                    >
+                      {isImporting ? (
+                        <Loader2 size={12} className="text-brand-accent animate-spin shrink-0" />
+                      ) : alreadyExists ? (
+                        <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"
+                      )}>
+                        {tmpl.name.split('/')[0].trim()}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Loading */}
+          {(isLoadingGlossaries || isLoadingTemplates) && (
+            <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 && (
+            <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}`
+                : (t('translate.glossary.noGlossaries') || 'Aucun glossaire')
+              }
+            </p>
+          )}
+        </div>
+      )}
     </div>
   );
 }