Files
office_translator/frontend/src/app/dashboard/DashboardSidebar.tsx
sepehr 3f45ccdf50
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m58s
feat(ui): vague 4 — la zone de dépôt répond, l'or devient lisible, tarifs binaires, avant/après réel
Zone de dépôt : le contour s'allume en doré et la carte s'agrandit
quand on la survole avec un fichier (l'information existait, elle
n'était jamais affichée).

Or lisible : nouveau jeton « or encre » (#8B6F47) pour les textes,
l'or clair reste aux traits, fonds et au mode sombre ; 52 textes dorés
convertis, pastille comprises ; plus aucun texte sous 10 px
(8,5 px → 11 px dans le sélecteur de moteurs).

Tarifs : le choix redevient binaire — les trois abonnements payants en
grandes cartes, le gratuit en ligne discrète au-dessus, le sur mesure
en ligne dorée dessous. Le tableau comparatif complet reste dessous.

Accueil : le mur de six cartes génériques est remplacé par un vrai
avant/après — une page « Cahier des charges — Traitement d'air » à
côté de sa traduction anglaise, structure identique au mot près
(terme technique en gras des deux côtés), sceau « Même mise en page,
mot pour mot » entre les deux, et trois preuves précises (SmartArt
reconstruits, séries de graphiques traduites, tables des matières
régénérées) à la place des promesses vagues.
2026-08-30 23:27:53 +02:00

88 lines
3.4 KiB
TypeScript

'use client';
import Link from 'next/link';
import { LogOut } from 'lucide-react';
import { useUser } from './useUser';
import { useLogout } from './useLogout';
import { DashboardNavLinks } from './DashboardNavLinks';
import { getInitials, translateTier } from './utils';
import { ThemeToggle } from '@/components/ui/theme-toggle';
import { useI18n } from '@/lib/i18n';
export function DashboardSidebar() {
const { data: user, isLoading } = useUser();
const { logout } = useLogout();
const { t } = useI18n();
return (
<aside className="hidden w-72 shrink-0 border-r border-black/5 dark:border-white/5 bg-white dark:bg-[#141414] lg:flex lg:flex-col">
{/* Brand */}
<div className="flex items-center gap-3 px-6 py-6">
<div className="flex size-9 items-center justify-center rounded-xl bg-brand-dark text-white font-bold text-sm">
W
</div>
<span className="text-sm font-bold tracking-tight text-brand-dark dark:text-white">
{t('auth.brandName')}
</span>
</div>
{/* Navigation */}
<nav className="flex-1 overflow-y-auto px-3 py-2">
<div className="flex flex-col gap-1">
<DashboardNavLinks />
</div>
</nav>
{/* Upgrade link for free users */}
{(!user?.tier || user.tier === 'free') && (
<div className="px-6 py-2">
<Link
href="/pricing"
className="text-[10px] font-black uppercase tracking-widest text-brand-goldink dark:text-brand-accent hover:text-brand-dark dark:hover:text-white transition-colors"
>
{t('dashboard.sidebar.upgradeToPro', { defaultValue: 'Passer Pro →' })}
</Link>
</div>
)}
{/* User section */}
<div className="border-t border-black/5 dark:border-white/5">
{!isLoading && user && (
<div className="px-6 py-4">
<div className="flex items-center gap-3 mb-3">
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-[11px]">
{getInitials(user.name)}
</div>
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<span className="truncate text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
{user.name}
</span>
<span className="truncate text-[10px] text-brand-dark/60 dark:text-white/60">
{user.email}
</span>
</div>
</div>
<div className="flex items-center gap-2 mb-3">
<span className="px-2.5 py-0.5 rounded-full border border-brand-accent/30 text-brand-goldink dark:text-brand-accent text-[10px] font-black uppercase">
{translateTier(t, user.tier)}
</span>
</div>
</div>
)}
<div className="flex items-center gap-2 px-6 py-3">
<ThemeToggle />
<button
className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-brand-dark/40 dark:text-white/40 hover:text-red-500 transition-colors"
onClick={logout}
>
<LogOut size={14} />
{t('dashboard.sidebar.signOut')}
</button>
</div>
</div>
</aside>
);
}