sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(glossary): clarify selection flow - compact banner, Utiliser button, hide create section by default
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m27s
Details

Browse Source
This commit is contained in:
sepehr
2026-06-20 19:18:46 +02:00
parent 9b354befe3
commit 299173fff7
1 changed files with 18 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/app/dashboard/glossaries/page.tsx
View File

@@ -301,43 +301,21 @@ export default function GlossariesPage() {
</div> </div>
</div> </div>
{/* ── How it works ───────────────────────────────────────── */} {/* ── Bandeau usage ──────────────────────────────────── */}
<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="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="flex items-center gap-2 mb-4"> <div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center shrink-0">
<Info size={15} className="text-brand-accent shrink-0" /> <Info size={13} />
<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>
</div> </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> </div>
{/* ── Tab Switcher ───────────────────────────────────────── */} {/* ── 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"> <div className="flex gap-2 pt-4 border-t border-black/5 dark:border-white/10 mt-auto shrink-0 w-full">
<Link <Link
href={`/dashboard/glossaries/${glossary.id}`} 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>
<Link <Link
href={`/dashboard/translate?glossaryId=${glossary.id}`} 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" 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> </Link>
</div> </div>
</div> </div>
@@ -584,7 +562,7 @@ export default function GlossariesPage() {
)} )}
</section> </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 && ( {glossaries.length > 0 && !showCreateSection && (
<div className="flex justify-center"> <div className="flex justify-center">
<button <button