From 9b354befe3223551a2dbadebda92dc53fe73d61f Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sat, 20 Jun 2026 19:07:30 +0200
Subject: [PATCH] fix(glossary): hide create section by default when glossaries
 exist - only shown on demand via toggle button

---
 .../src/app/dashboard/glossaries/page.tsx     | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/dashboard/glossaries/page.tsx b/frontend/src/app/dashboard/glossaries/page.tsx
index 48e370e..3c708ed 100644
--- a/frontend/src/app/dashboard/glossaries/page.tsx
+++ b/frontend/src/app/dashboard/glossaries/page.tsx
@@ -153,6 +153,7 @@ export default function GlossariesPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [importingPresetId, setImportingPresetId] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<'glossaries' | 'context'>('glossaries');
+  const [showCreateSection, setShowCreateSection] = useState(false);
 
   const isPro = user?.tier === 'pro';
   const isLoading = isLoadingUser || isLoadingGlossaries;
@@ -583,17 +584,41 @@ export default function GlossariesPage() {
               )}
             </section>
 
+            {/* ── Bouton Ajouter (visible seulement si l'utilisateur a déjà des glossaires) ── */}
+            {glossaries.length > 0 && !showCreateSection && (
+              <div className="flex justify-center">
+                <button
+                  onClick={() => setShowCreateSection(true)}
+                  className="flex items-center gap-2 px-6 py-3 rounded-xl border border-dashed border-brand-accent/40 text-brand-accent text-xs font-bold uppercase tracking-widest hover:bg-brand-accent/5 transition-all cursor-pointer"
+                >
+                  <Plus size={14} />
+                  Ajouter un glossaire
+                </button>
+              </div>
+            )}
+
             {/* ── Section 2 : Créer ou Importer ─────────────────────────── */}
+            {(glossaries.length === 0 || showCreateSection) && (
             <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="mb-6">
-                <div className="flex items-center gap-2 text-brand-accent mb-2">
-                  <Zap size={18} />
-                  <h2 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">
-                    {t('glossaries.presets.whatForBold') || 'Créer un nouveau glossaire'}
-                  </h2>
+                <div className="flex items-center justify-between gap-4 mb-2">
+                  <div className="flex items-center gap-2 text-brand-accent">
+                    <Zap size={18} />
+                    <h2 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+                      Ajouter un glossaire
+                    </h2>
+                  </div>
+                  {showCreateSection && (
+                    <button
+                      onClick={() => setShowCreateSection(false)}
+                      className="text-[10px] font-bold uppercase tracking-wider text-brand-dark/30 dark:text-white/25 hover:text-brand-dark dark:hover:text-white transition-colors cursor-pointer"
+                    >
+                      Fermer ✕
+                    </button>
+                  )}
                 </div>
                 <p className="text-xs text-brand-dark/50 dark:text-white/40 font-light">
-                  {t('glossaries.presets.whatForDesc') || 'Choisissez un modèle professionnel pré-rempli ou importez vos propres termes.'}
+                  Choisissez un modèle professionnel, importez un fichier CSV ou créez manuellement.
                 </p>
               </div>
 
@@ -699,6 +724,7 @@ export default function GlossariesPage() {
                 </div>
               </div>
             </section>
+            )}
           </div>
         )}
       </div>