fix(glossary): hide create section by default when glossaries exist - only shown on demand via toggle button
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 3m11s

This commit is contained in:
2026-06-20 19:07:30 +02:00
parent 4a8f33d36f
commit 9b354befe3

View File

@@ -153,6 +153,7 @@ export default function GlossariesPage() {
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [importingPresetId, setImportingPresetId] = useState<string | null>(null); const [importingPresetId, setImportingPresetId] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<'glossaries' | 'context'>('glossaries'); const [activeTab, setActiveTab] = useState<'glossaries' | 'context'>('glossaries');
const [showCreateSection, setShowCreateSection] = useState(false);
const isPro = user?.tier === 'pro'; const isPro = user?.tier === 'pro';
const isLoading = isLoadingUser || isLoadingGlossaries; const isLoading = isLoadingUser || isLoadingGlossaries;
@@ -583,17 +584,41 @@ export default function GlossariesPage() {
)} )}
</section> </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 ─────────────────────────── */} {/* ── 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"> <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="mb-6">
<div className="flex items-center gap-2 text-brand-accent mb-2"> <div className="flex items-center justify-between gap-4 mb-2">
<Zap size={18} /> <div className="flex items-center gap-2 text-brand-accent">
<h2 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight"> <Zap size={18} />
{t('glossaries.presets.whatForBold') || 'Créer un nouveau glossaire'} <h2 className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">
</h2> 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> </div>
<p className="text-xs text-brand-dark/50 dark:text-white/40 font-light"> <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> </p>
</div> </div>
@@ -699,6 +724,7 @@ export default function GlossariesPage() {
</div> </div>
</div> </div>
</section> </section>
)}
</div> </div>
)} )}
</div> </div>