fix: compact glossary dropdown, sticky translate button, and mode badge

- Restructure right sidebar as flex-col with scrollable config and
  fixed translate button (never scrolls away)
- Replace expanded GlossarySelector list with compact dropdown (~80px
  instead of ~400px), collapsible templates section, click-outside close
- Add visible Classic/IA mode badge after provider selector with hint
  about glossary availability for Pro users in classic mode

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 { useState, useEffect, useCallback, useRef } from 'react';
-import { BookText, Plus, Loader2, Lock, Check, AlertCircle } from 'lucide-react';
+import { BookText, Plus, Loader2, Check, ChevronDown, X } from 'lucide-react';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
@@ -39,6 +39,9 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
   const [isLoading, setIsLoading] = useState(true);
   const [importingId, setImportingId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [showTemplates, setShowTemplates] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const fetchData = useCallback(async () => {
     try {
@@ -68,13 +71,25 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
+  // 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);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [isOpen]);
+
   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);
+      setIsOpen(false);
       return;
     }
 
@@ -93,13 +108,14 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
       if (res.ok) {
         const data = await res.json();
         const newId = data.data?.id;
-        await fetchData(); // Refresh glossary list
+        await fetchData();
         if (newId) onChange(newId);
+        setIsOpen(false);
       } else {
         const errData = await res.json().catch(() => null);
         setError(errData?.message || `Import failed (${res.status})`);
       }
-    } catch (e) {
+    } catch {
       setError('Network error');
     } finally {
       setImportingId(null);
@@ -116,113 +132,126 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
   const selected = glossaries.find(g => g.id === glossaryId);
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-2 relative" ref={containerRef}>
       <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')} <span className="normal-case tracking-normal font-normal text-brand-dark/25 dark:text-white/25">({sourceFlag}→{targetFlag})</span>
       </label>
 
-      {!isPro ? (
+      {/* Dropdown trigger */}
-        <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">
+      <button
-          <Lock size={12} className="text-brand-dark/30 dark:text-white/30" />
+        type="button"
-          <span className="text-[10px] font-bold text-brand-dark/40 dark:text-white/40">
+        disabled={disabled}
-            {t('translate.glossary.proOnly')}
+        onClick={() => setIsOpen(!isOpen)}
-          </span>
+        className={cn(
-          <span className="ml-auto px-2 py-0.5 bg-brand-accent/10 text-brand-accent text-[8px] font-black uppercase tracking-widest rounded">
+          "w-full px-4 py-3 rounded-xl text-left flex items-center gap-3 transition-all border-2",
-            Pro
+          isOpen
-          </span>
+            ? "border-brand-accent/30 bg-brand-accent/5"
+            : "bg-brand-muted/50 dark:bg-white/5 border-transparent hover:border-brand-accent/15",
+          disabled && "opacity-50 cursor-not-allowed"
+        )}
+      >
+        {selected ? (
+          <>
+            <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">{selected.terms_count} {t('translate.glossary.terms')}</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/20 hover:text-brand-dark hover:bg-brand-muted dark:text-white/20 dark:hover:text-white dark:hover:bg-white/10 transition-colors"
+            >
+              <X size={11} />
+            </button>
+          </>
         ) : (
-        <div className="space-y-3">
+          <>
+            <span className="text-sm">{sourceFlag}</span>
+            <span className="text-[11px] text-brand-dark/40 dark:text-white/40 flex-1">
+              {isLoading ? (
+                <span className="flex items-center gap-1.5"><Loader2 size={10} className="animate-spin" /> {t('translate.glossary.loading')}</span>
+              ) : filteredGlossaries.length > 0 ? (
+                t('translate.glossary.selectGlossary') || 'Sélectionner un glossaire…'
+              ) : (
+                t('translate.glossary.noGlossaries') || 'Aucun glossaire'
+              )}
+            </span>
+          </>
+        )}
+        <ChevronDown size={14} className={cn("shrink-0 text-brand-dark/20 dark:text-white/20 transition-transform", isOpen && "rotate-180")} />
+      </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">
+        <p className="text-[10px] text-red-500 pl-1">{error}</p>
-              <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 */}
+      {/* Dropdown panel */}
-          {!isLoading && filteredGlossaries.length > 0 && (
+      {isOpen && !disabled && (
-            <div className="space-y-1">
+        <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">
-              <span className="text-[8px] font-black text-brand-dark/25 dark:text-white/25 uppercase tracking-[0.2em] pl-1">
+          {/* Glossary list */}
-                {t('translate.glossary.myGlossaries') || 'Mes glossaires'}
+          <div className="max-h-48 overflow-y-auto">
-              </span>
+            {filteredGlossaries.length > 0 ? (
+              <div className="py-1">
                 {filteredGlossaries.map(g => {
                   const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
                   const isSelected = g.id === glossaryId;
                   return (
                     <button
                       key={g.id}
-                    onClick={() => onChange(isSelected ? null : g.id)}
+                      onClick={() => { onChange(isSelected ? null : g.id); if (!isSelected) setIsOpen(false); }}
-                    disabled={disabled}
                       className={cn(
-                      "w-full px-4 py-3.5 text-left rounded-xl transition-all flex items-center gap-3",
+                        "w-full px-4 py-2.5 text-left flex items-center gap-3 transition-colors",
-                      isSelected
+                        isSelected ? "bg-brand-accent/10" : "hover:bg-brand-muted/50 dark:hover:bg-white/5"
-                        ? "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 ? (
-                      <div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
+                        <div className="w-4 h-4 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
-                        <Check size={11} className="text-white" />
+                          <Check size={9} className="text-white" />
                         </div>
                       ) : (
-                      <span className="text-sm">{flag}</span>
+                        <span className="text-xs">{flag}</span>
                       )}
                       <div className="min-w-0 flex-1">
-                      <div className={cn(
+                        <div className={cn("text-[11px] font-bold truncate", isSelected ? "text-brand-accent" : "text-brand-dark/70 dark:text-white/70")}>
-                        "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>
+                      <span className="text-[9px] text-brand-dark/25 dark:text-white/25">{g.terms_count} {t('translate.glossary.terms')}</span>
-                    {isSelected && (
-                      <span className="text-[10px] text-brand-accent/50 hover:text-brand-accent font-bold">✕</span>
-                    )}
                     </button>
                   );
                 })}
               </div>
+            ) : (
+              <p className="px-4 py-3 text-[10px] text-brand-dark/25 dark:text-white/25 italic">
+                {sourceLang !== 'auto'
+                  ? `${t('translate.glossary.noGlossaryForPair') || 'Aucun glossaire pour'} ${sourceFlag}→${targetFlag}`
+                  : (t('translate.glossary.noGlossaries') || 'Aucun glossaire')
+                }
+              </p>
             )}
+          </div>
 
-          {/* Also show selected glossary if filtered out */}
+          {/* Templates section — collapsed by default */}
-          {selected && !filteredGlossaries.find(g => g.id === selected.id) && (
+          {templates.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">
+              <div className="border-t border-black/5 dark:border-white/5">
-                {t('translate.glossary.myGlossaries') || 'Mes glossaires'}
-              </span>
                 <button
-                onClick={() => onChange(null)}
+                  type="button"
-                disabled={disabled}
+                  onClick={() => setShowTemplates(!showTemplates)}
-                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"
+                  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"
                 >
-                <div className="w-5 h-5 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
+                  <Plus size={10} className="text-brand-accent" />
-                  <Check size={11} className="text-white" />
+                  {t('translate.glossary.fromTemplate') || 'Créer depuis un template'}
-                </div>
+                  <ChevronDown size={10} className={cn("ml-auto transition-transform", showTemplates && "rotate-180")} />
-                <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>
-          )}
+              {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">
-          {/* Templates */}
-          {!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'}
-              </span>
-              <div className="grid grid-cols-2 gap-2">
                   {templates.map(tmpl => {
                     const isImporting = importingId === tmpl.id;
                     const existingGlossary = glossaries.find(
@@ -235,37 +264,30 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                         onClick={() => {
                           if (existingGlossary) {
                             onChange(isAlreadySelected ? null : existingGlossary.id);
+                            setIsOpen(false);
                           } else if (!isImporting) {
                             handleImportTemplate(tmpl);
                           }
                         }}
-                      disabled={disabled || isImporting}
+                        disabled={isImporting}
                         className={cn(
-                        "px-3 py-2.5 text-left rounded-xl transition-all flex items-center gap-2 border",
+                          "px-2.5 py-2 rounded-lg text-left flex items-center gap-1.5 transition-all border",
                           isAlreadySelected
-                          ? "bg-brand-accent/10 border-brand-accent/30"
+                            ? "bg-brand-accent/10 border-brand-accent/20"
-                          : existingGlossary
+                            : "bg-transparent border-transparent hover:bg-brand-accent/5 hover:border-brand-accent/10",
-                          ? "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 && "opacity-60"
-                          : isImporting
-                          ? "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" />
+                          <Loader2 size={10} className="text-brand-accent animate-spin shrink-0" />
                         ) : isAlreadySelected ? (
-                        <div className="w-4 h-4 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
+                          <Check size={10} className="text-brand-accent 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" />
+                          <Plus size={10} className="text-brand-accent/50 shrink-0" />
                         )}
                         <span className={cn(
-                        "text-[9px] font-black uppercase tracking-widest truncate",
+                          "text-[9px] font-bold truncate",
-                        isAlreadySelected ? "text-brand-accent" : "text-brand-dark/50 dark:text-white/50"
+                          isAlreadySelected ? "text-brand-accent" : "text-brand-dark/40 dark:text-white/40"
                         )}>
                           {tmpl.name.split('/')[0].trim()}
                         </span>
@@ -273,25 +295,8 @@ export function GlossarySelector({ sourceLang, targetLang, isPro, glossaryId, on
                     );
                   })}
                 </div>
-            </div>
               )}
-
+            </>
-          {/* Loading */}
-          {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 */}
-          {!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}`
-                : (t('translate.glossary.noGlossaries') || 'Aucun glossaire')
-              }
-            </p>
           )}
         </div>
       )}

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

@@ -438,9 +438,9 @@ export default function TranslatePage() {
 
             {/* ── CONFIG (upload / configuring / failed) ──────────── */}
             {(showUpload || showConfiguring || showFailed) && (
-              <div className="space-y-8">
+              <div className="editorial-card bg-white border-none shadow-editorial dark:bg-[#141414] overflow-hidden flex flex-col lg:sticky lg:top-8 lg:max-h-[calc(100vh-6rem)]">
-                <div className="editorial-card bg-white border-none shadow-editorial dark:bg-[#141414] overflow-hidden">
+                {/* Scrollable config content */}
-                  <div className="p-10 pb-6">
+                <div className="flex-1 overflow-y-auto p-10 pb-6">
                   <h4 className="text-[10px] font-black uppercase tracking-[0.3em] mb-10 text-brand-dark/30 border-b border-black/5 pb-6 dark:text-white/30 dark:border-white/5">
                     {t('landing.translate.configuration')}
                   </h4>
@@ -459,6 +459,29 @@ export default function TranslatePage() {
                       isPro={config.isPro}
                     />
 
+                    {/* Active mode badge */}
+                    {config.provider && (
+                      <div className="flex items-center gap-2">
+                        <span className={cn(
+                          "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[9px] font-black uppercase tracking-[0.15em]",
+                          config.mode === 'llm'
+                            ? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
+                            : "bg-brand-muted/50 text-brand-dark/40 dark:bg-white/5 dark:text-white/40 border border-transparent"
+                        )}>
+                          {config.mode === 'llm' ? (
+                            <><Zap size={10} /> Mode IA</>
+                          ) : (
+                            <><Languages size={10} /> Mode Classique</>
+                          )}
+                        </span>
+                        {config.mode === 'classic' && config.isPro && (
+                          <span className="text-[9px] text-brand-dark/20 dark:text-white/20 italic">
+                            Glossaires disponibles en mode IA
+                          </span>
+                        )}
+                      </div>
+                    )}
+
                     {/* Glossary — Pro + LLM mode only */}
                     {config.isPro && config.mode === 'llm' && (
                       <GlossarySelector
@@ -520,8 +543,8 @@ export default function TranslatePage() {
                   </div>
                 </div>
 
-                  {/* ── TRANSLATE BUTTON — sticky at bottom, always visible ── */}
+                {/* ── TRANSLATE BUTTON — fixed at bottom, never scrolls away ── */}
-                  <div className="sticky bottom-0 p-6 pt-4 bg-white dark:bg-[#141414] border-t border-black/5 dark:border-white/5">
+                <div className="shrink-0 p-6 pt-4 bg-white dark:bg-[#141414] border-t border-black/5 dark:border-white/5">
                   <button
                     disabled={!config.isConfigValid || submit.isSubmitting || !upload.file}
                     onClick={handleTranslate}
@@ -545,9 +568,8 @@ export default function TranslatePage() {
                     <p className="text-center text-[10px] text-brand-dark/30 dark:text-white/30 mt-2 font-bold uppercase tracking-widest">↑ Sélectionnez une langue cible</p>
                   )}
                 </div>
-                </div>
 
-                <div className="flex justify-between px-6 text-[9px] font-black uppercase tracking-[0.2em] text-brand-dark/20 dark:text-white/20">
+                <div className="shrink-0 flex justify-between px-6 pb-5 pt-1 text-[9px] font-black uppercase tracking-[0.2em] text-brand-dark/20 dark:text-white/20">
                   <span className="flex items-center gap-2">
                     <ShieldCheck size={12} /> {t('landing.translate.zeroRetention')}
                   </span>