ux(glossaries): add how-it-works guide, status badges and activation hints

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

@@ -4,9 +4,12 @@ import { useState, useEffect } from 'react';
 import {
   BookText, Plus, Library, Calendar, Hash,
   Zap, Save, Trash2, MessageSquare, Loader2,
-  Wrench, HardHat, Monitor, Scale, Stethoscope, BarChart3,
-  Megaphone, Car, ShoppingCart, FlaskConical, Users,
+  Monitor, Scale, Stethoscope, BarChart3,
+  Megaphone, ShoppingCart, FlaskConical, Users,
+  CheckCircle2, AlertCircle, ArrowRight, MousePointerClick,
+  Info, ExternalLink,
 } from 'lucide-react';
+import Link from 'next/link';
 import { useUser } from '@/app/dashboard/useUser';
 import { useI18n } from '@/lib/i18n';
 import { useGlossaries, useGlossary } from './useGlossaries';
@@ -54,10 +57,10 @@ export default function GlossariesPage() {
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [selectedGlossary, setSelectedGlossary] = useState<GlossaryListItem | null>(null);
-  const [glossaryToEdit, setGlossaryToEdit] = useState<Glossary | null>(null);
   const [glossaryToDelete, setGlossaryToDelete] = useState<{ id: string; name: string } | null>(null);
   const [systemPrompt, setSystemPrompt] = useState(settings.systemPrompt);
   const [isSavingPrompt, setIsSavingPrompt] = useState(false);
+  const [promptSaved, setPromptSaved] = useState(false);
   const [creatingPreset, setCreatingPreset] = useState<string | null>(null);
 
   const { glossary: fullGlossary, isLoading: isLoadingGlossaryDetail } = useGlossary(
@@ -67,16 +70,23 @@ export default function GlossariesPage() {
   const isPro = user?.tier === 'pro';
   const isLoading = isLoadingUser || isLoadingGlossaries;
 
+  // Track whether prompt has unsaved changes
+  const promptHasUnsavedChanges = systemPrompt !== settings.systemPrompt;
+  const promptIsActive = !!settings.systemPrompt?.trim();
+
   useEffect(() => {
     setSystemPrompt(settings.systemPrompt);
-  }, [settings]);
+    setPromptSaved(false);
+  }, [settings.systemPrompt]);
 
   const handleSavePrompt = async () => {
     setIsSavingPrompt(true);
     try {
       updateSettings({ systemPrompt });
       await new Promise(resolve => setTimeout(resolve, 300));
+      setPromptSaved(true);
       toast({ title: t('context.saved'), description: t('context.savedDesc') });
+      setTimeout(() => setPromptSaved(false), 3000);
     } finally { setIsSavingPrompt(false); }
   };
 
@@ -213,7 +223,7 @@ export default function GlossariesPage() {
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center space-y-4">
           <div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-muted border-t-brand-accent mx-auto"></div>
-          <p className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">Loading...</p>
+          <p className="text-xs text-brand-dark/40 dark:text-white/40 font-light">Chargement...</p>
         </div>
       </div>
     );
@@ -237,8 +247,9 @@ export default function GlossariesPage() {
 
   return (
     <div className="max-w-6xl mx-auto w-full p-6 lg:p-8">
+
       {/* ── Editorial Header ───────────────────────────────────── */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-12 gap-6">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-10 gap-6">
         <div>
           <span className="accent-pill mb-3 block w-fit font-medium text-[10px] uppercase tracking-widest">
             {t('glossaries.yourGlossaries') || "Vos Glossaires"}
@@ -260,58 +271,150 @@ export default function GlossariesPage() {
         </button>
       </div>
 
-      <div className="space-y-12">
+      {/* ── Comment ça marche ─────────────────────────────────── */}
+      <div className="mb-10 p-5 rounded-2xl bg-brand-accent/5 dark:bg-brand-accent/10 border border-brand-accent/20 dark:border-brand-accent/15">
+        <div className="flex items-center gap-2 mb-4">
+          <Info size={15} className="text-brand-accent shrink-0" />
+          <span className="text-xs font-bold uppercase tracking-widest text-brand-accent">Comment ces paramètres sont utilisés</span>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          {/* Step 1 */}
+          <div className="flex items-start gap-3">
+            <div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center text-[11px] font-black shrink-0 mt-0.5">1</div>
+            <div>
+              <p className="text-xs font-bold text-brand-dark dark:text-white mb-1">Configurez ici</p>
+              <p className="text-[11px] text-brand-dark/55 dark:text-white/50 font-light leading-relaxed">
+                Rédigez vos instructions de contexte ou créez/importez un glossaire de termes.
+              </p>
+            </div>
+          </div>
+          {/* Arrow */}
+          <div className="hidden sm:flex items-center justify-center">
+            <ArrowRight size={18} className="text-brand-accent/40" />
+          </div>
+          {/* Step 2 */}
+          <div className="flex items-start gap-3">
+            <div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center text-[11px] font-black shrink-0 mt-0.5">2</div>
+            <div>
+              <p className="text-xs font-bold text-brand-dark dark:text-white mb-1">Activez dans Traduire</p>
+              <p className="text-[11px] text-brand-dark/55 dark:text-white/50 font-light leading-relaxed">
+                Sur la page de traduction, dans la colonne de droite, sélectionnez votre glossaire.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 pt-4 border-t border-brand-accent/10 flex items-center justify-between">
+          <p className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light">
+            ⚠️ Les instructions de contexte s'appliquent <strong>automatiquement</strong> à toutes vos traductions IA une fois enregistrées. Les glossaires doivent être <strong>sélectionnés manuellement</strong> sur la page Traduire.
+          </p>
+          <Link
+            href="/dashboard/translate"
+            className="ml-4 shrink-0 flex items-center gap-1.5 text-[11px] font-bold text-brand-accent hover:underline"
+          >
+            Aller à Traduire <ExternalLink size={11} />
+          </Link>
+        </div>
+      </div>
+
+      <div className="space-y-10">
+
         {/* ── System Prompt ────────────────────────────────────── */}
         <section className="editorial-card p-8 lg:p-10 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm">
-          <div className="flex items-center gap-3 mb-6 text-brand-accent">
-            <MessageSquare size={18} />
-            <h3 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">
-              {t('context.instructions.title')}
-            </h3>
+          {/* Header with status badge */}
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-3 text-brand-accent">
+              <MessageSquare size={18} />
+              <h3 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+                {t('context.instructions.title')}
+              </h3>
+            </div>
+            {/* Status badge */}
+            {promptHasUnsavedChanges ? (
+              <span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-amber-600 dark:text-amber-400 bg-amber-500/10 px-3 py-1 rounded-full border border-amber-500/20">
+                <AlertCircle size={11} />
+                Non enregistré
+              </span>
+            ) : promptIsActive ? (
+              <span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-3 py-1 rounded-full border border-emerald-500/20">
+                <CheckCircle2 size={11} />
+                Actif · s'applique à toutes les traductions IA
+              </span>
+            ) : (
+              <span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-brand-dark/30 dark:text-white/30 bg-brand-muted dark:bg-white/5 px-3 py-1 rounded-full border border-black/5 dark:border-white/5">
+                Inactif
+              </span>
+            )}
           </div>
-          <p className="text-xs text-brand-dark/50 dark:text-white/45 mb-6 font-light leading-relaxed">
-            {t('context.instructions.desc')}
-          </p>
+
+          {/* Explanation box */}
+          <div className="mb-5 p-3.5 rounded-xl bg-brand-muted/40 dark:bg-white/[0.03] border border-black/5 dark:border-white/5">
+            <p className="text-[11px] text-brand-dark/60 dark:text-white/50 font-light leading-relaxed">
+              <strong className="font-bold text-brand-dark/80 dark:text-white/80">À quoi ça sert ?</strong> Ces instructions sont envoyées automatiquement à l'IA avant chaque traduction, sans que vous ayez besoin de faire quoi que ce soit sur la page Traduire. Utilisez-les pour guider le style, le registre ou la terminologie générale.
+            </p>
+            <p className="text-[11px] text-brand-accent/80 dark:text-brand-accent/70 font-medium mt-2 italic">
+              Exemple : «&nbsp;Vous traduisez des rapports financiers. Soyez formel, précis et conservez tous les chiffres.&nbsp;»
+            </p>
+          </div>
+
           <textarea
             value={systemPrompt}
-            onChange={e => setSystemPrompt(e.target.value)}
+            onChange={e => { setSystemPrompt(e.target.value); setPromptSaved(false); }}
             placeholder={t('context.instructions.placeholder')}
             className="w-full h-40 p-4 bg-brand-muted/30 dark:bg-white/[0.02] rounded-xl border border-black/5 dark:border-white/10 text-xs focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
           />
-          <div className="flex justify-end mt-4 gap-3">
-            <button
-              onClick={handleClearPrompt}
-              className="px-6 py-2.5 bg-brand-muted dark:bg-white/5 text-brand-dark/50 dark:text-white/40 rounded-lg text-xs font-bold uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all cursor-pointer"
-            >
-              <Trash2 size={12} className="inline mr-1.5" />{t('context.clearAll')}
-            </button>
-            <button
-              onClick={handleSavePrompt}
-              disabled={isSavingPrompt}
-              className="premium-button px-8 py-2.5 text-xs uppercase tracking-widest !rounded-lg flex items-center gap-2 disabled:opacity-50 cursor-pointer font-bold"
-            >
-              {isSavingPrompt ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
-              {isSavingPrompt ? t('context.saving') : t('context.save')}
-            </button>
+          <div className="flex justify-between items-center mt-4">
+            <p className="text-[10px] text-brand-dark/30 dark:text-white/25 font-light">
+              {systemPrompt.length > 0 ? `${systemPrompt.length} caractères` : 'Vide — aucune instruction envoyée à l\'IA'}
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={handleClearPrompt}
+                className="px-5 py-2.5 bg-brand-muted dark:bg-white/5 text-brand-dark/50 dark:text-white/40 rounded-lg text-xs font-bold uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all cursor-pointer"
+              >
+                <Trash2 size={12} className="inline mr-1.5" />Tout effacer
+              </button>
+              <button
+                onClick={handleSavePrompt}
+                disabled={isSavingPrompt || !promptHasUnsavedChanges}
+                className="premium-button px-8 py-2.5 text-xs uppercase tracking-widest !rounded-lg flex items-center gap-2 disabled:opacity-50 cursor-pointer font-bold"
+              >
+                {isSavingPrompt
+                  ? <><Loader2 size={14} className="animate-spin" /> Enregistrement…</>
+                  : promptSaved
+                  ? <><CheckCircle2 size={14} /> Enregistré</>
+                  : <><Save size={14} /> {t('context.save')}</>
+                }
+              </button>
+            </div>
           </div>
         </section>
 
         {/* ── Professional Presets ─────────────────────────────── */}
         <section className="editorial-card p-8 lg:p-10 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm">
-          <div className="flex items-center gap-3 mb-6 text-brand-accent">
+          <div className="flex items-center gap-3 mb-3 text-brand-accent">
             <Zap size={18} />
             <h3 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">
               {t('context.presets.title')}
             </h3>
           </div>
-          <p className="text-xs text-brand-dark/50 dark:text-white/45 mb-6 font-light leading-relaxed">
-            {t('context.presets.desc')}
-          </p>
+
+          {/* Explanation box */}
+          <div className="mb-6 p-3.5 rounded-xl bg-brand-muted/40 dark:bg-white/[0.03] border border-black/5 dark:border-white/5">
+            <p className="text-[11px] text-brand-dark/60 dark:text-white/50 font-light leading-relaxed">
+              <strong className="font-bold text-brand-dark/80 dark:text-white/80">À quoi ça sert ?</strong> Cliquer sur une carte crée un glossaire pré-rempli avec les termes spécialisés du domaine. Ce glossaire apparaîtra dans vos glossaires ci-dessous, et vous pourrez le <strong>sélectionner manuellement</strong> sur la page Traduire pour forcer des traductions de termes précis.
+            </p>
+            <div className="flex items-center gap-2 mt-2.5">
+              <MousePointerClick size={11} className="text-brand-accent shrink-0" />
+              <p className="text-[11px] text-brand-accent/80 font-medium">
+                Cliquez sur une carte → glossaire créé → sélectionnez-le dans Traduire
+              </p>
+            </div>
+          </div>
 
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             {PRESETS.map((p) => {
               const Icon = p.icon;
-              const isCreating = creatingPreset === p.key;
+              const isCreatingThis = creatingPreset === p.key;
               return (
                 <button
                   key={p.key}
@@ -321,9 +424,9 @@ export default function GlossariesPage() {
                 >
                   <div className="flex items-center justify-between mb-2">
                     <div className="p-1.5 bg-brand-accent/10 rounded-lg text-brand-accent group-hover:scale-110 transition-transform">
-                      {isCreating ? <Loader2 size={16} className="animate-spin" /> : <Icon size={16} />}
+                      {isCreatingThis ? <Loader2 size={16} className="animate-spin" /> : <Icon size={16} />}
                     </div>
-                    {isCreating && <span className="text-[10px] text-brand-accent font-bold uppercase">Création...</span>}
+                    {isCreatingThis && <span className="text-[10px] text-brand-accent font-bold uppercase">Création…</span>}
                   </div>
                   <div>
                     <h4 className="text-xs font-bold text-brand-dark dark:text-white mb-1">
@@ -337,66 +440,93 @@ export default function GlossariesPage() {
               );
             })}
           </div>
-
-          <p className="mt-6 text-[10px] text-brand-dark/30 dark:text-white/20 font-bold uppercase tracking-widest italic border-t border-black/5 dark:border-white/5 pt-4">
-            {t('context.presets.hint')}
-          </p>
         </section>
 
         {/* ── Glossary Grid ──────────────────────────────────────── */}
-        {glossaries.length === 0 ? (
-          <div className="editorial-card p-12 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm text-center">
-            <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-xl flex items-center justify-center text-brand-accent mx-auto mb-4">
-              <Library size={24} />
+        <div>
+          <div className="flex items-center justify-between mb-5">
+            <div>
+              <h2 className="text-lg font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+                Vos <span className="italic">glossaires</span>
+              </h2>
+              <p className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light mt-1">
+                {glossaries.length > 0
+                  ? `${glossaries.length} glossaire${glossaries.length > 1 ? 's' : ''} — sélectionnez-en un dans la page Traduire pour l'activer`
+                  : 'Créez votre premier glossaire ou importez un preset ci-dessus'}
+              </p>
             </div>
-            <p className="text-base font-serif font-medium text-brand-dark dark:text-white mb-1">{t('glossaries.empty')}</p>
-            <p className="text-xs text-brand-dark/40 dark:text-white/40 font-light">{t('glossaries.emptyDesc')}</p>
+            {glossaries.length > 0 && (
+              <Link
+                href="/dashboard/translate"
+                className="flex items-center gap-1.5 text-[11px] font-bold text-brand-accent hover:underline shrink-0"
+              >
+                <ExternalLink size={12} />
+                Aller à Traduire pour activer
+              </Link>
+            )}
           </div>
-        ) : (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {glossaries.map((glossary: GlossaryListItem) => {
-              const termCount = glossary.terms_count ?? 0;
-              return (
-                <div
-                  key={glossary.id}
-                  className="editorial-card p-6 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm group hover:-translate-y-1 hover:border-brand-accent/30 transition-all cursor-pointer relative"
-                  onClick={() => handleEditClick(glossary.id)}
-                >
-                  <div className="flex justify-between items-start mb-6">
-                    <div className="w-10 h-10 bg-brand-muted dark:bg-white/10 rounded-xl flex items-center justify-center text-brand-accent group-hover:bg-brand-dark dark:group-hover:bg-white group-hover:text-white dark:group-hover:text-brand-dark transition-all">
-                      <Library size={18} />
+
+          {glossaries.length === 0 ? (
+            <div className="editorial-card p-12 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm text-center">
+              <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-xl flex items-center justify-center text-brand-accent mx-auto mb-4">
+                <Library size={24} />
+              </div>
+              <p className="text-base font-serif font-medium text-brand-dark dark:text-white mb-1">{t('glossaries.empty')}</p>
+              <p className="text-xs text-brand-dark/40 dark:text-white/40 font-light">{t('glossaries.emptyDesc')}</p>
+            </div>
+          ) : (
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {glossaries.map((glossary: GlossaryListItem) => {
+                const termCount = glossary.terms_count ?? 0;
+                return (
+                  <div
+                    key={glossary.id}
+                    className="editorial-card p-6 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm group hover:-translate-y-1 hover:border-brand-accent/30 transition-all cursor-pointer relative"
+                    onClick={() => handleEditClick(glossary.id)}
+                  >
+                    <div className="flex justify-between items-start mb-6">
+                      <div className="w-10 h-10 bg-brand-muted dark:bg-white/10 rounded-xl flex items-center justify-center text-brand-accent group-hover:bg-brand-dark dark:group-hover:bg-white group-hover:text-white dark:group-hover:text-brand-dark transition-all">
+                        <Library size={18} />
+                      </div>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteClick(glossary.id, glossary.name);
+                        }}
+                        className="text-[10px] bg-red-500/10 hover:bg-red-500 hover:text-white text-red-500 px-2.5 py-1 rounded-full font-bold uppercase tracking-wider transition-all cursor-pointer"
+                      >
+                        Supprimer
+                      </button>
+                    </div>
+                    <h3 className="text-lg font-serif font-medium text-brand-dark dark:text-white tracking-tight mb-1 truncate">
+                      {glossary.name}
+                    </h3>
+                    <p className="text-xs text-brand-dark/40 dark:text-white/40 font-medium">
+                      {SUPPORTED_LANGUAGES.find(l => l.code === glossary.source_language)?.flag ?? '🌐'} {SUPPORTED_LANGUAGES.find(l => l.code === glossary.source_language)?.label ?? glossary.source_language}
+                    </p>
+                    <div className="flex justify-between items-center pt-4 mt-5 border-t border-black/5 dark:border-white/10 text-xs text-brand-dark/40 dark:text-white/40">
+                      <span className="flex items-center gap-1">
+                        <Hash size={12} className="text-brand-accent" />
+                        {termCount} {t('glossaries.defineTerms')}
+                      </span>
+                      <span className="flex items-center gap-1 font-mono">
+                        <Calendar size={12} />
+                        {new Date(glossary.created_at).toLocaleDateString()}
+                      </span>
+                    </div>
+                    {/* "How to activate" hint on hover */}
+                    <div className="absolute inset-x-0 bottom-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <div className="mx-3 mb-3 py-1.5 px-3 bg-brand-accent/10 dark:bg-brand-accent/15 rounded-lg flex items-center gap-1.5">
+                        <MousePointerClick size={10} className="text-brand-accent shrink-0" />
+                        <p className="text-[9px] text-brand-accent font-bold uppercase tracking-wider">Sélectionnez-le dans la page Traduire pour l'activer</p>
+                      </div>
                     </div>
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleDeleteClick(glossary.id, glossary.name);
-                      }}
-                      className="text-[10px] bg-red-500/10 hover:bg-red-500 hover:text-white text-red-500 px-2.5 py-1 rounded-full font-bold uppercase tracking-wider transition-all cursor-pointer"
-                    >
-                      Supprimer
-                    </button>
                   </div>
-                  <h3 className="text-lg font-serif font-medium text-brand-dark dark:text-white tracking-tight mb-1 truncate">
-                    {glossary.name}
-                  </h3>
-                  <p className="text-xs text-brand-dark/40 dark:text-white/40 font-medium">
-                    {SUPPORTED_LANGUAGES.find(l => l.code === glossary.source_language)?.flag ?? '🌐'} {SUPPORTED_LANGUAGES.find(l => l.code === glossary.source_language)?.label ?? glossary.source_language}
-                  </p>
-                  <div className="flex justify-between items-center pt-4 mt-6 border-t border-black/5 dark:border-white/10 text-xs text-brand-dark/40 dark:text-white/40">
-                    <span className="flex items-center gap-1">
-                      <Hash size={12} className="text-brand-accent" />
-                      {termCount} {t('glossaries.defineTerms')}
-                    </span>
-                    <span className="flex items-center gap-1 font-mono">
-                      <Calendar size={12} />
-                      {new Date(glossary.created_at).toLocaleDateString()}
-                    </span>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
+                );
+              })}
+            </div>
+          )}
+        </div>
 
         {/* ── About section ──────────────────────────────────────── */}
         <div className="editorial-card p-8 bg-white dark:bg-[#141414] border border-black/5 dark:border-white/5 rounded-2xl shadow-sm">