design(frontend): align glossaries page typography with translation page editorial style
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m44s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m44s
This commit is contained in:
@@ -223,21 +223,37 @@ export default function GlossariesPage() {
|
||||
return <ProUpgradePrompt />;
|
||||
}
|
||||
|
||||
const renderTitle = (title: string) => {
|
||||
const lastSpaceIndex = title.lastIndexOf(' ');
|
||||
if (lastSpaceIndex === -1) return title;
|
||||
const firstPart = title.substring(0, lastSpaceIndex);
|
||||
const lastWord = title.substring(lastSpaceIndex + 1);
|
||||
return (
|
||||
<>
|
||||
{firstPart} <span className="italic">{lastWord}</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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>
|
||||
<span className="accent-pill mb-4 block w-fit">{t('glossaries.yourGlossaries')}</span>
|
||||
<h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
|
||||
{t('glossaries.title')}
|
||||
<span className="accent-pill mb-3 block w-fit font-medium text-[10px] uppercase tracking-widest">
|
||||
{t('glossaries.yourGlossaries') || "Vos Glossaires"}
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">
|
||||
{renderTitle(t('glossaries.title') || "Glossaires & Contexte")}
|
||||
</h1>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('glossaries.description')}</p>
|
||||
<p className="text-brand-dark/50 dark:text-white/50 text-sm font-light leading-relaxed">
|
||||
{t('glossaries.description') || "Gérez vos glossaires et instructions de contexte pour des traductions plus précises."}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setCreateDialogOpen(true)}
|
||||
disabled={isCreating}
|
||||
className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl flex items-center gap-2 disabled:opacity-50 shrink-0"
|
||||
className="premium-button px-8 py-3 text-xs uppercase tracking-widest !rounded-xl flex items-center gap-2 disabled:opacity-50 shrink-0 cursor-pointer font-bold"
|
||||
>
|
||||
<Plus size={14} />
|
||||
{t('glossaries.createNew')}
|
||||
@@ -246,31 +262,33 @@ export default function GlossariesPage() {
|
||||
|
||||
<div className="space-y-12">
|
||||
{/* ── System Prompt ────────────────────────────────────── */}
|
||||
<section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
|
||||
<div className="flex items-center gap-4 mb-8 text-brand-accent">
|
||||
<MessageSquare size={20} />
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
|
||||
<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>
|
||||
</div>
|
||||
<p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.instructions.desc')}</p>
|
||||
<p className="text-xs text-brand-dark/50 dark:text-white/45 mb-6 font-light leading-relaxed">
|
||||
{t('context.instructions.desc')}
|
||||
</p>
|
||||
<textarea
|
||||
value={systemPrompt}
|
||||
onChange={e => setSystemPrompt(e.target.value)}
|
||||
placeholder={t('context.instructions.placeholder')}
|
||||
className="w-full h-48 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
|
||||
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-6 gap-4">
|
||||
<div className="flex justify-end mt-4 gap-3">
|
||||
<button
|
||||
onClick={handleClearPrompt}
|
||||
className="px-8 py-3 bg-brand-muted dark:bg-white/5 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all"
|
||||
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-2" />{t('context.clearAll')}
|
||||
<Trash2 size={12} className="inline mr-1.5" />{t('context.clearAll')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSavePrompt}
|
||||
disabled={isSavingPrompt}
|
||||
className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3 disabled:opacity-50"
|
||||
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')}
|
||||
@@ -279,16 +297,18 @@ export default function GlossariesPage() {
|
||||
</section>
|
||||
|
||||
{/* ── Professional Presets ─────────────────────────────── */}
|
||||
<section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
|
||||
<div className="flex items-center gap-4 mb-8 text-brand-accent">
|
||||
<Zap size={20} />
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
|
||||
<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">
|
||||
<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-sm text-brand-dark/40 dark:text-white/40 mb-12 font-medium">{t('context.presets.desc')}</p>
|
||||
<p className="text-xs text-brand-dark/50 dark:text-white/45 mb-6 font-light leading-relaxed">
|
||||
{t('context.presets.desc')}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{PRESETS.map((p) => {
|
||||
const Icon = p.icon;
|
||||
const isCreating = creatingPreset === p.key;
|
||||
@@ -297,95 +317,100 @@ export default function GlossariesPage() {
|
||||
key={p.key}
|
||||
onClick={() => handleCreatePresetGlossary(p)}
|
||||
disabled={!!creatingPreset}
|
||||
className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="p-4 bg-brand-muted/40 dark:bg-white/5 hover:bg-brand-accent/5 dark:hover:bg-brand-accent/10 border border-black/5 dark:border-white/5 rounded-xl text-left transition-all hover:border-brand-accent/30 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed group min-h-[105px] flex flex-col justify-between"
|
||||
>
|
||||
<div className="flex justify-center mb-4 text-brand-dark group-hover:text-brand-accent group-hover:scale-125 transition-all">
|
||||
{isCreating ? <Loader2 size={24} className="animate-spin" /> : <Icon size={24} />}
|
||||
<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} />}
|
||||
</div>
|
||||
{isCreating && <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">
|
||||
{p.title}
|
||||
</h4>
|
||||
<p className="text-[10px] text-brand-dark/45 dark:text-white/45 leading-normal font-light">
|
||||
{p.desc}
|
||||
</p>
|
||||
</div>
|
||||
<h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white group-hover:text-white mb-2">
|
||||
{p.title}
|
||||
</h4>
|
||||
<p className="text-[8px] text-brand-dark/30 dark:text-white/30 group-hover:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
|
||||
{p.desc}
|
||||
</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<p className="mt-8 text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest italic border-t border-black/5 dark:border-white/5 pt-6">
|
||||
<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-16 bg-white dark:bg-[#141414] border-none shadow-editorial text-center">
|
||||
<div className="w-16 h-16 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent mx-auto mb-6">
|
||||
<Library size={32} />
|
||||
{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>
|
||||
<p className="text-xl font-black uppercase tracking-tight text-brand-dark dark:text-white mb-2">{t('glossaries.empty')}</p>
|
||||
<p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest">{t('glossaries.emptyDesc')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{glossaries.map((glossary: GlossaryListItem) => {
|
||||
const termCount = glossary.terms_count ?? 0;
|
||||
return (
|
||||
<div
|
||||
key={glossary.id}
|
||||
className="editorial-card p-8 bg-white dark:bg-[#141414] border-none shadow-editorial group hover:-translate-y-2 transition-all cursor-pointer"
|
||||
onClick={() => handleEditClick(glossary.id)}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-10">
|
||||
<div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent group-hover:bg-brand-dark group-hover:text-white transition-all">
|
||||
<Library size={24} />
|
||||
) : (
|
||||
<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-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>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteClick(glossary.id, glossary.name);
|
||||
}}
|
||||
className="text-[8px] bg-red-500/10 text-red-500 px-3 py-1 rounded-full font-black uppercase tracking-widest hover:bg-red-500 hover:text-white transition-all"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black uppercase tracking-tight mb-2 text-brand-dark dark:text-white truncate">
|
||||
{glossary.name}
|
||||
</h3>
|
||||
<p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mb-4">
|
||||
{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-8 border-t border-black/5 dark:border-white/10">
|
||||
<span className="text-[9px] text-brand-dark/30 dark:text-white/30 font-black uppercase tracking-widest flex items-center gap-1.5">
|
||||
<Hash size={10} />
|
||||
{termCount} {t('glossaries.defineTerms')}
|
||||
</span>
|
||||
<span className="text-[9px] text-brand-dark/30 dark:text-white/30 font-black uppercase tracking-widest flex items-center gap-1.5">
|
||||
<Calendar size={10} />
|
||||
{new Date(glossary.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── About section ──────────────────────────────────────── */}
|
||||
<div className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
|
||||
<div className="flex items-center gap-4 text-brand-accent mb-8">
|
||||
<BookText size={20} />
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
|
||||
{t('glossaries.aboutTitle')}
|
||||
</span>
|
||||
{/* ── 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">
|
||||
<div className="flex items-center gap-3 text-brand-accent mb-4">
|
||||
<BookText size={18} />
|
||||
<span className="text-xs font-serif font-medium text-brand-dark dark:text-white tracking-tight">
|
||||
{t('glossaries.aboutTitle')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-brand-dark/50 dark:text-white/40 font-light leading-relaxed mb-3">{t('glossaries.aboutDesc')}</p>
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-brand-dark/60 dark:text-white/60">
|
||||
{t('glossaries.aboutFormat')}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-brand-dark/40 dark:text-white/40 font-medium mb-4">{t('glossaries.aboutDesc')}</p>
|
||||
<p className="text-[10px] font-bold uppercase tracking-tight text-brand-dark/60 dark:text-white/60">
|
||||
{t('glossaries.aboutFormat')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dialogs */}
|
||||
|
||||
@@ -25,7 +25,7 @@ const messages: Record<Locale, Record<string, string>> = {
|
||||
"dashboard.nav.context": "Context",
|
||||
"dashboard.nav.services": "Services",
|
||||
"dashboard.nav.apiKeys": "API Keys",
|
||||
"dashboard.nav.glossaries": "Glossaries",
|
||||
"dashboard.nav.glossaries": "Glossaries & Context",
|
||||
"dashboard.header.title": "Dashboard",
|
||||
"dashboard.header.subtitle": "Manage your translations",
|
||||
"dashboard.header.toggleMenu": "Menu",
|
||||
@@ -844,7 +844,7 @@ const messages: Record<Locale, Record<string, string>> = {
|
||||
"dashboard.nav.context": "Contexte",
|
||||
"dashboard.nav.services": "Services",
|
||||
"dashboard.nav.apiKeys": "Clés API",
|
||||
"dashboard.nav.glossaries": "Glossaires",
|
||||
"dashboard.nav.glossaries": "Glossaires & Contexte",
|
||||
"dashboard.header.title": "Dashboard",
|
||||
"dashboard.header.subtitle": "Gérez vos traductions",
|
||||
"dashboard.header.toggleMenu": "Menu",
|
||||
|
||||
Reference in New Issue
Block a user