feat: multilingual glossary UI, translate selector, context fusion

- TermEditor: rewritten with expandable multilingual translation grid
  (13 languages), editorial styling, source/target + translations JSON
- GlossarySelector: new component in translate page config panel,
  fetches user glossaries, shows flag + term count, Pro+LLM only
- useTranslationConfig: added glossaryId state
- useTranslationSubmit: sends glossary_id to backend
- Context page: removed textarea glossary, presets now create API
  glossaries via template import, added link to Glossaries page
- i18n: added 12 keys × 13 locales for glossary/translate/context

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

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

@@ -2,40 +2,40 @@
 
 import { useState, useEffect } from 'react';
 import {
-  Zap, Save, Brain, BookOpen, Trash2, Crown, Loader2,
+  Zap, Save, Crown, Loader2, Trash2,
   Wrench, HardHat, Monitor, Scale, Stethoscope, BarChart3,
-  Megaphone, Car, MessageSquare, Database,
+  Megaphone, Car, MessageSquare, BookOpen, CheckCircle2,
 } from 'lucide-react';
 import { useTranslationStore } from '@/lib/store';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
+import { useToast } from '@/components/ui/toast';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
 
 const PRESETS = [
-  { key: 'hvac', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: Wrench },
-  { key: 'construction', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: HardHat },
-  { key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor },
-  { key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale },
-  { key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope },
-  { key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3 },
-  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone },
-  { key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car },
+  { key: 'hvac', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: Wrench, templateId: 'hvac' },
+  { key: 'construction', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: HardHat, templateId: 'construction' },
+  { key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor, templateId: 'technology' },
+  { key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale, templateId: 'legal' },
+  { key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope, templateId: 'medical' },
+  { key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3, templateId: 'finance' },
+  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone, templateId: 'marketing' },
+  { key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car, templateId: 'automotive' },
 ];
 
 export default function ContextGlossaryPage() {
   const { t } = useI18n();
-  const { settings, updateSettings, applyPreset, clearContext } = useTranslationStore();
+  const { settings, updateSettings } = useTranslationStore();
+  const { toast } = useToast();
   const [isSaving, setIsSaving] = useState(false);
   const [isPro, setIsPro] = useState(false);
+  const [creatingPreset, setCreatingPreset] = useState<string | null>(null);
 
-  const [localSettings, setLocalSettings] = useState({
-    systemPrompt: settings.systemPrompt,
-    glossary: settings.glossary,
-  });
+  const [systemPrompt, setSystemPrompt] = useState(settings.systemPrompt);
 
   useEffect(() => {
-    setLocalSettings({ systemPrompt: settings.systemPrompt, glossary: settings.glossary });
+    setSystemPrompt(settings.systemPrompt);
   }, [settings]);
 
   useEffect(() => {
@@ -66,24 +66,60 @@ export default function ContextGlossaryPage() {
   const handleSave = async () => {
     setIsSaving(true);
     try {
-      updateSettings(localSettings);
+      updateSettings({ systemPrompt });
       await new Promise(resolve => setTimeout(resolve, 500));
+      toast({ title: t('context.saved'), description: t('context.savedDesc') });
     } finally { setIsSaving(false); }
   };
 
-  const handleApplyPreset = (key: string) => {
-    applyPreset(key);
-    setTimeout(() => {
-      setLocalSettings({
-        systemPrompt: useTranslationStore.getState().settings.systemPrompt,
-        glossary: useTranslationStore.getState().settings.glossary,
-      });
-    }, 0);
+  const handleClear = () => {
+    updateSettings({ systemPrompt: '' });
+    setSystemPrompt('');
   };
 
-  const handleClear = () => {
-    clearContext();
-    setLocalSettings({ systemPrompt: '', glossary: '' });
+  const handleCreatePresetGlossary = async (preset: typeof PRESETS[0]) => {
+    setCreatingPreset(preset.key);
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) return;
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      };
+
+      // Import the template as a new glossary via the API
+      const params = new URLSearchParams({ template_id: preset.templateId });
+      const res = await fetch(`${API_BASE}/api/v1/glossaries/import?${params.toString()}`, {
+        method: 'POST',
+        headers,
+      });
+
+      if (res.ok) {
+        const result = await res.json();
+        const glossary = result.data;
+        toast({
+          title: t('context.presets.created'),
+          description: t('context.presets.createdDesc', {
+            name: glossary?.name ?? preset.title,
+            count: String(glossary?.terms?.length ?? 0),
+          }),
+        });
+      } else {
+        toast({
+          variant: 'destructive',
+          title: t('glossaries.toast.error'),
+          description: t('glossaries.toast.errorCreate'),
+        });
+      }
+    } catch {
+      toast({
+        variant: 'destructive',
+        title: t('glossaries.toast.error'),
+        description: t('glossaries.toast.errorImport'),
+      });
+    } finally {
+      setCreatingPreset(null);
+    }
   };
 
   if (!isPro) {
@@ -130,14 +166,20 @@ export default function ContextGlossaryPage() {
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
             {PRESETS.map((p) => {
               const Icon = p.icon;
+              const isCreating = creatingPreset === p.key;
               return (
                 <button
                   key={p.key}
-                  onClick={() => handleApplyPreset(p.key)}
-                  className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1"
+                  onClick={() => handleCreatePresetGlossary(p)}
+                  disabled={!!creatingPreset}
+                  className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <div className="flex justify-center mb-4 text-brand-dark group-hover:text-brand-accent group-hover:scale-125 transition-all">
-                    <Icon size={24} />
+                    {isCreating ? (
+                      <Loader2 size={24} className="animate-spin" />
+                    ) : (
+                      <Icon size={24} />
+                    )}
                   </div>
                   <h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white group-hover:text-white mb-2">
                     {p.title}
@@ -145,10 +187,18 @@ export default function ContextGlossaryPage() {
                   <p className="text-[8px] text-brand-dark/30 dark:text-white/30 group-hover:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
                     {p.desc}
                   </p>
+                  <span className="inline-flex items-center gap-1 mt-3 px-3 py-1 rounded-full bg-brand-accent/10 text-brand-accent text-[8px] font-black uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">
+                    <BookOpen size={10} />
+                    {t('context.presets.createGlossary')}
+                  </span>
                 </button>
               );
             })}
           </div>
+
+          <p className="mt-8 text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest italic border-t border-black/5 dark:border-white/5 pt-6">
+            {t('context.presets.hint')}
+          </p>
         </section>
 
         {/* ── Context Instructions ──────────────────────────────── */}
@@ -161,8 +211,8 @@ export default function ContextGlossaryPage() {
           </div>
           <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.instructions.desc')}</p>
           <textarea
-            value={localSettings.systemPrompt}
-            onChange={e => setLocalSettings({ ...localSettings, systemPrompt: e.target.value })}
+            value={systemPrompt}
+            onChange={e => setSystemPrompt(e.target.value)}
             placeholder={t('context.instructions.placeholder')}
             className="w-full h-48 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
           />
@@ -184,41 +234,27 @@ export default function ContextGlossaryPage() {
           </div>
         </section>
 
-        {/* ── Technical Glossary ────────────────────────────────── */}
-        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
-          <div className="flex items-center gap-4 mb-8 text-brand-accent">
-            <Database size={20} />
-            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
-              {t('context.glossary.title')}
-            </h3>
-          </div>
-          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.glossary.desc')}</p>
-          <textarea
-            value={localSettings.glossary}
-            onChange={e => setLocalSettings({ ...localSettings, glossary: e.target.value })}
-            placeholder={"pression statique=static pressure\nrécupérateur de chaleur=heat recovery unit"}
-            className="w-full h-64 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm font-mono focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
-          />
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-6 gap-4">
-            <span className="text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest">
-              {localSettings.glossary
-                ? `${localSettings.glossary.split('\n').filter(l => l.includes('=')).length} ${t('context.glossary.terms')}`
-                : `0 ${t('context.glossary.terms')}`}
-            </span>
-            <div className="flex gap-4">
-              <button className="px-8 py-3 bg-brand-muted dark:bg-white/5 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all">
-                {t('context.clearAll')}
-              </button>
-              <button
-                onClick={handleSave}
-                disabled={isSaving}
-                className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3 disabled:opacity-50"
-              >
-                {isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
-                {isSaving ? t('context.saving') : t('context.save')}
-              </button>
+        {/* ── Glossary link ────────────────────────────────────── */}
+        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+          <div className="flex items-center gap-6">
+            <div className="w-14 h-14 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent shrink-0">
+              <BookOpen size={28} />
+            </div>
+            <div>
+              <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">
+                {t('context.glossary.title')}
+              </h3>
+              <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
+                {t('context.glossary.desc')}
+              </p>
             </div>
           </div>
+          <Link href="/dashboard/glossaries">
+            <button className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl flex items-center gap-3">
+              <BookOpen size={14} />
+              {t('context.glossary.manage')}
+            </button>
+          </Link>
         </section>
       </div>
     </div>