From 299173fff74cf2e2b1e84796e5c4d870732895f3 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sat, 20 Jun 2026 19:18:46 +0200
Subject: [PATCH] ux(glossary): clarify selection flow - compact banner,
 Utiliser button, hide create section by default

---
 .../src/app/dashboard/glossaries/page.tsx     | 58 ++++++-------------
 1 file changed, 18 insertions(+), 40 deletions(-)

diff --git a/frontend/src/app/dashboard/glossaries/page.tsx b/frontend/src/app/dashboard/glossaries/page.tsx
index 3c708ed..73019ab 100644
--- a/frontend/src/app/dashboard/glossaries/page.tsx
+++ b/frontend/src/app/dashboard/glossaries/page.tsx
@@ -301,43 +301,21 @@ export default function GlossariesPage() {
         </div>
       </div>
 
-      {/* ── How it works ───────────────────────────────────────── */}
-      <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">{t('glossaries.howItWorks.title')}</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">{t('glossaries.howItWorks.step1Title')}</p>
-              <p className="text-[11px] text-brand-dark/55 dark:text-white/50 font-light leading-relaxed">
-                {t('glossaries.howItWorks.step1Desc')}
-              </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">{t('glossaries.howItWorks.step2Title')}</p>
-              <p className="text-[11px] text-brand-dark/55 dark:text-white/50 font-light leading-relaxed">
-                {t('glossaries.howItWorks.step2Desc')}
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="mt-4 pt-4 border-t border-brand-accent/10">
-          <p className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light">
-            {t('glossaries.howItWorks.warning')}
-          </p>
+      {/* ── Bandeau usage ──────────────────────────────────── */}
+      <div className="mb-8 flex items-center gap-3 p-4 rounded-xl bg-brand-accent/5 dark:bg-brand-accent/10 border border-brand-accent/15">
+        <div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center shrink-0">
+          <Info size={13} />
         </div>
+        <p className="text-[11px] text-brand-dark/70 dark:text-white/60 font-light leading-relaxed flex-1">
+          <strong className="font-bold text-brand-dark dark:text-white">Pour utiliser un glossaire dans une traduction :</strong>{' '}
+          cliquez sur <span className="font-bold text-brand-accent">«&nbsp;Utiliser&nbsp;»</span> sur la carte souhaitée. Vous serez redirigé sur la page Traduire avec ce glossaire déjà sélectionné.
+        </p>
+        <Link
+          href="/dashboard/translate"
+          className="shrink-0 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-brand-accent hover:underline whitespace-nowrap"
+        >
+          Aller traduire <ArrowRight size={11} />
+        </Link>
       </div>
 
       {/* ── Tab Switcher ───────────────────────────────────────── */}
@@ -566,15 +544,15 @@ export default function GlossariesPage() {
                         <div className="flex gap-2 pt-4 border-t border-black/5 dark:border-white/10 mt-auto shrink-0 w-full">
                           <Link
                             href={`/dashboard/glossaries/${glossary.id}`}
-                            className="flex-1 text-center py-2 rounded-lg bg-brand-muted/65 dark:bg-white/5 hover:bg-brand-accent/10 text-brand-dark/70 dark:text-white/60 hover:text-brand-accent text-[10px] font-bold uppercase tracking-wider transition-all"
+                            className="flex-none px-3 py-2 rounded-lg bg-brand-muted/65 dark:bg-white/5 hover:bg-brand-accent/10 text-brand-dark/60 dark:text-white/50 hover:text-brand-accent text-[10px] font-bold uppercase tracking-wider transition-all"
                           >
-                            Détails / Éditer
+                            Éditer
                           </Link>
                           <Link
                             href={`/dashboard/translate?glossaryId=${glossary.id}`}
                             className="flex-1 text-center py-2 rounded-lg bg-brand-accent hover:bg-brand-accent/90 text-white text-[10px] font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-1.5"
                           >
-                            Traduire
+                            Utiliser <ArrowRight size={11} />
                           </Link>
                         </div>
                       </div>
@@ -584,7 +562,7 @@ export default function GlossariesPage() {
               )}
             </section>
 
-            {/* ── Bouton Ajouter (visible seulement si l'utilisateur a déjà des glossaires) ── */}
+            {/* ── Bouton Ajouter (visible quand l'utilisateur a déjà des glossaires) ── */}
             {glossaries.length > 0 && !showCreateSection && (
               <div className="flex justify-center">
                 <button