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/glossaries/TermEditor.tsx

@@ -1,22 +1,20 @@
 'use client';
 
-import { memo, useCallback, useMemo } from 'react';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { ArrowRight, Plus, Trash2 } from 'lucide-react';
-import type { GlossaryTermInput, GlossaryTermInputWithId } from './types';
-import { MAX_TERMS_PER_GLOSSARY, generateTermId } from './types';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { Plus, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+import type { GlossaryTermInput } from './types';
+import { MAX_TERMS_PER_GLOSSARY, SUPPORTED_LANGUAGES } from './types';
 import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
 
 interface TermEditorProps {
   terms: GlossaryTermInput[];
   onChange: (terms: GlossaryTermInput[]) => void;
   disabled?: boolean;
+  sourceLanguage?: string;
 }
 
-// Generate stable IDs for terms based on index and content hash
 function getTermKey(term: GlossaryTermInput, index: number): string {
-  // Create a stable key from content to help React reconciliation
   const contentHash = `${term.source}-${term.target}`.slice(0, 50);
   return `term-${index}-${contentHash}`;
 }
@@ -25,98 +23,210 @@ export const TermEditor = memo(function TermEditor({
   terms,
   onChange,
   disabled = false,
+  sourceLanguage = 'fr',
 }: TermEditorProps) {
   const { t } = useI18n();
-  // Generate stable keys for current terms
+
   const termKeys = useMemo(() => {
     return terms.map((term, index) => getTermKey(term, index));
   }, [terms]);
 
+  const translationLangs = useMemo(() => {
+    return SUPPORTED_LANGUAGES.filter(l => l.code !== sourceLanguage);
+  }, [sourceLanguage]);
+
   const addTerm = useCallback(() => {
     if (terms.length >= MAX_TERMS_PER_GLOSSARY) return;
-    onChange([...terms, { source: '', target: '' }]);
+    onChange([...terms, { source: '', target: '', translations: {} }]);
   }, [terms, onChange]);
 
   const removeTerm = useCallback((index: number) => {
     onChange(terms.filter((_, i) => i !== index));
   }, [terms, onChange]);
 
-  const updateTerm = useCallback((index: number, field: 'source' | 'target', value: string) => {
+  const updateField = useCallback((index: number, field: 'source' | 'target', value: string) => {
     const newTerms = [...terms];
     newTerms[index] = { ...newTerms[index], [field]: value };
     onChange(newTerms);
   }, [terms, onChange]);
 
+  const updateTranslation = useCallback((index: number, langCode: string, value: string) => {
+    const newTerms = [...terms];
+    const term = newTerms[index];
+    const translations = { ...(term.translations || {}) };
+    if (value.trim()) {
+      translations[langCode] = value;
+    } else {
+      delete translations[langCode];
+    }
+    newTerms[index] = { ...term, translations };
+    onChange(newTerms);
+  }, [terms, onChange]);
+
   const maxTermsReached = terms.length >= MAX_TERMS_PER_GLOSSARY;
+  const validTermsCount = terms.filter(t => t.source.trim() && t.target.trim()).length;
+
+  const sourceLabel = SUPPORTED_LANGUAGES.find(l => l.code === sourceLanguage)?.flag ?? '🌐';
 
   return (
-    <div className="space-y-3">
-      <div className="mb-2 grid grid-cols-[1fr_32px_1fr_36px] items-center gap-2 px-1">
-        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          {t('glossaries.termEditor.sourceTerm')}
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <span className="text-[9px] font-black uppercase tracking-widest text-brand-dark/30">
+          {validTermsCount} / {terms.length} {t('glossaries.dialog.terms')}
         </span>
-        <span />
-        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          {t('glossaries.termEditor.targetTranslation')}
-        </span>
-        <span />
       </div>
 
-      <div className="flex flex-col gap-2">
-        {terms.map((term, index) => (
-          <div
-            key={termKeys[index]}
-            className="group grid grid-cols-[1fr_32px_1fr_36px] items-center gap-2"
-          >
-            <Input
-              value={term.source}
-              onChange={(e) => updateTerm(index, 'source', e.target.value)}
-              placeholder="Source term..."
-              className="font-mono text-xs"
-              aria-label={`Source term ${index + 1}`}
+      {/* Term rows */}
+      <div className="space-y-4">
+        {terms.map((term, index) => {
+          const translations = term.translations || {};
+          const filledCount = Object.keys(translations).filter(k => translations[k]?.trim()).length;
+
+          return (
+            <TermRow
+              key={termKeys[index]}
+              term={term}
+              index={index}
               disabled={disabled}
+              sourceFlag={sourceLabel}
+              sourceLanguage={sourceLanguage}
+              translationLangs={translationLangs}
+              filledTranslations={filledCount}
+              onUpdateField={updateField}
+              onUpdateTranslation={updateTranslation}
+              onRemove={removeTerm}
             />
-            <div className="flex items-center justify-center">
-              <ArrowRight className="size-3.5 text-muted-foreground" />
-            </div>
-            <Input
-              value={term.target}
-              onChange={(e) => updateTerm(index, 'target', e.target.value)}
-              placeholder="Translation..."
-              className="font-mono text-xs"
-              aria-label={`Target translation ${index + 1}`}
-              disabled={disabled}
-            />
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              onClick={() => removeTerm(index)}
-              disabled={disabled}
-              className="opacity-0 group-hover:opacity-100 transition-opacity"
-              aria-label={`Remove term ${index + 1}`}
-            >
-              <Trash2 className="size-3.5 text-muted-foreground hover:text-destructive" />
-            </Button>
-          </div>
-        ))}
+          );
+        })}
       </div>
 
-      <Button
-        variant="outline"
-        size="sm"
+      {/* Add button */}
+      <button
         onClick={addTerm}
         disabled={disabled || maxTermsReached}
-        className="mt-3 gap-1.5 border-dashed"
+        className="w-full py-4 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest text-brand-dark/30 dark:text-white/30 hover:text-brand-dark dark:hover:text-white hover:border-brand-accent/30 transition-all disabled:opacity-40 flex items-center justify-center gap-2"
       >
-        <Plus className="size-3.5" />
+        <Plus size={14} />
         {t('glossaries.termEditor.addTerm')}
-      </Button>
+      </button>
 
       {maxTermsReached && (
-        <p className="text-xs text-amber-600">
+        <p className="text-[9px] font-black uppercase tracking-widest text-amber-600">
           {t('glossaries.termEditor.maxReached', { max: String(MAX_TERMS_PER_GLOSSARY) })}
         </p>
       )}
     </div>
   );
 });
+
+/* ── Individual Term Row with expandable translations ── */
+
+interface TermRowProps {
+  term: GlossaryTermInput;
+  index: number;
+  disabled: boolean;
+  sourceFlag: string;
+  sourceLanguage: string;
+  translationLangs: { code: string; label: string; flag: string }[];
+  filledTranslations: number;
+  onUpdateField: (index: number, field: 'source' | 'target', value: string) => void;
+  onUpdateTranslation: (index: number, langCode: string, value: string) => void;
+  onRemove: (index: number) => void;
+}
+
+const TermRow = memo(function TermRow({
+  term,
+  index,
+  disabled,
+  sourceFlag,
+  sourceLanguage,
+  translationLangs,
+  filledTranslations,
+  onUpdateField,
+  onUpdateTranslation,
+  onRemove,
+}: TermRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const translations = term.translations || {};
+
+  // Auto-expand if there are existing translations
+  const hasExisting = Object.keys(translations).some(k => translations[k]?.trim());
+
+  return (
+    <div className="rounded-2xl border border-black/5 dark:border-white/10 bg-white dark:bg-white/5 overflow-hidden">
+      {/* Main row: source + default target */}
+      <div className="grid grid-cols-[1fr_24px_1fr_32px] items-center gap-2 p-4">
+        <input
+          value={term.source}
+          onChange={(e) => onUpdateField(index, 'source', e.target.value)}
+          placeholder={`${sourceFlag} Source...`}
+          className="font-mono text-xs bg-transparent outline-none w-full placeholder:text-brand-dark/20 dark:placeholder:text-white/20"
+          disabled={disabled}
+          aria-label={`Source term ${index + 1}`}
+        />
+        <span className="text-brand-dark/20 dark:text-white/20 text-center">→</span>
+        <input
+          value={term.target}
+          onChange={(e) => onUpdateField(index, 'target', e.target.value)}
+          placeholder="Translation..."
+          className="font-mono text-xs bg-transparent outline-none w-full placeholder:text-brand-dark/20 dark:placeholder:text-white/20"
+          disabled={disabled}
+          aria-label={`Target translation ${index + 1}`}
+        />
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className={cn(
+              "p-1 rounded-lg transition-all",
+              expanded ? "bg-brand-accent/10 text-brand-accent" : "text-brand-dark/20 hover:text-brand-accent",
+              hasExisting && !expanded && "text-brand-accent/60"
+            )}
+            title="Translations"
+          >
+            {expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+          </button>
+          <button
+            onClick={() => onRemove(index)}
+            disabled={disabled}
+            className="p-1 rounded-lg text-brand-dark/20 hover:text-red-500 transition-all opacity-0 group-hover:opacity-100"
+            aria-label={`Remove term ${index + 1}`}
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+      </div>
+
+      {/* Expanded: multilingual translations grid */}
+      {expanded && (
+        <div className="px-4 pb-4 pt-2 border-t border-black/5 dark:border-white/5">
+          <p className="text-[8px] font-black uppercase tracking-widest text-brand-dark/20 dark:text-white/20 mb-3">
+            Translations ({filledTranslations}/{translationLangs.length})
+          </p>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+            {translationLangs.map((lang) => (
+              <div
+                key={lang.code}
+                className={cn(
+                  "flex items-center gap-2 rounded-xl border px-3 py-2 transition-all",
+                  translations[lang.code]?.trim()
+                    ? "border-brand-accent/20 bg-brand-accent/5"
+                    : "border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/5"
+                )}
+              >
+                <span className="text-sm shrink-0">{lang.flag}</span>
+                <input
+                  value={translations[lang.code] || ''}
+                  onChange={(e) => onUpdateTranslation(index, lang.code, e.target.value)}
+                  placeholder={lang.code.toUpperCase()}
+                  className="font-mono text-[11px] bg-transparent outline-none w-full min-w-0 placeholder:text-brand-dark/15 dark:placeholder:text-white/15"
+                  disabled={disabled}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});