feat: icon-only toolbar, versioning fixes, history modal, PanelRight repositioning
- Toolbar: remove text labels from all icon buttons (AI, Save, Preview, Convert) all buttons now icon-only with title tooltip for accessibility - Toolbar: reposition PanelRight (info panel toggle) to far right after three-dot menu - Versioning: decouple getNoteHistory/restoreNoteVersion from global userAISettings.noteHistory now checks note.historyEnabled directly — unblocks manual per-note history - Versioning: add 'Sauvegarder cette version' button in Versions tab of info panel calls commitNoteHistory with visual feedback (spinner → success state) - note-document-info-panel: import commitNoteHistory, add isSavingVersion state - notes.ts: fix double guard that silently blocked all history operations
This commit is contained in:
Antigravity
219
memento-note/components/admin-sidebar.tsx
Normal file
219
memento-note/components/admin-sidebar.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
'use client'
|
||||
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { signOut, useSession } from 'next-auth/react'
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Brain,
|
||||
Settings,
|
||||
StickyNote,
|
||||
Shield,
|
||||
ArrowLeft,
|
||||
User,
|
||||
LogOut,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useLanguage } from '@/lib/i18n'
|
||||
import { NotificationPanel } from '@/components/notification-panel'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
|
||||
const ADMIN_NAV_ITEMS = [
|
||||
{
|
||||
titleKey: 'admin.sidebar.dashboard',
|
||||
href: '/admin',
|
||||
icon: LayoutDashboard,
|
||||
},
|
||||
{
|
||||
titleKey: 'admin.sidebar.users',
|
||||
href: '/admin/users',
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
titleKey: 'admin.sidebar.aiManagement',
|
||||
href: '/admin/ai',
|
||||
icon: Brain,
|
||||
},
|
||||
{
|
||||
titleKey: 'admin.sidebar.settings',
|
||||
href: '/admin/settings',
|
||||
icon: Settings,
|
||||
},
|
||||
] as const
|
||||
|
||||
function navItemIsActive(pathname: string | null, href: string): boolean {
|
||||
if (!pathname) return false
|
||||
if (href === '/admin') return pathname === '/admin'
|
||||
if (href === '/admin/ai') return pathname === '/admin/ai' || pathname.startsWith('/admin/ai')
|
||||
return pathname === href || pathname.startsWith(`${href}/`)
|
||||
}
|
||||
|
||||
/**
|
||||
* Barre latérale administration — même vocabulaire visuel que {@link Sidebar}
|
||||
* (fond bureau, panneau vitré, navigation arrondie). Liens en <a> pour
|
||||
* éviter les transitions RSC qui déclenchent React #310 entre groupes de routes.
|
||||
*/
|
||||
export function AdminSidebar({ className }: { className?: string }) {
|
||||
const pathname = usePathname()
|
||||
const { t } = useLanguage()
|
||||
const { data: session } = useSession()
|
||||
const user = session?.user
|
||||
const initial = user?.name
|
||||
? user.name.charAt(0).toUpperCase()
|
||||
: user?.email?.[0]?.toUpperCase() ?? '?'
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
'flex h-full min-h-0 w-64 shrink-0 flex-col sm:w-72 lg:w-80',
|
||||
'border-e border-border/40 bg-white/30 backdrop-blur-md sidebar-shadow dark:border-border/30 dark:bg-sidebar/90',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* Marque + retour app */}
|
||||
<div className="flex flex-col gap-4 p-6 pb-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="shrink-0 rounded-full outline-none ring-offset-background transition-shadow hover:ring-2 hover:ring-primary/30 focus-visible:ring-2 focus-visible:ring-ring"
|
||||
aria-label={t('sidebar.accountMenu') || 'Account menu'}
|
||||
>
|
||||
<div className="flex size-10 items-center justify-center overflow-hidden rounded-full border border-border bg-muted shadow-sm">
|
||||
<Avatar className="size-10 ring-1 ring-border/60">
|
||||
<AvatarImage src={(user as { image?: string } | undefined)?.image} alt="" />
|
||||
<AvatarFallback className="bg-primary/10 font-memento-serif text-lg font-semibold text-primary">
|
||||
{initial}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-52 bg-popover border-border">
|
||||
<DropdownMenuItem asChild className="cursor-pointer">
|
||||
<a href="/settings/profile" className="flex items-center gap-2">
|
||||
<User className="h-4 w-4" />
|
||||
{t('settings.profile')}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild className="cursor-pointer">
|
||||
<a href="/settings" className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
{t('nav.settings')}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer text-destructive focus:text-destructive"
|
||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
{t('auth.signOut')}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
className={cn(
|
||||
'flex min-w-0 flex-1 items-center gap-2 rounded-xl px-2 py-1.5 transition-colors',
|
||||
'hover:bg-white/40 dark:hover:bg-white/10'
|
||||
)}
|
||||
>
|
||||
<div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
|
||||
<StickyNote className="size-4" />
|
||||
</div>
|
||||
<div className="min-w-0 text-left">
|
||||
<p className="truncate font-memento-serif text-[13px] font-semibold tracking-tight text-foreground">
|
||||
MEMENTO
|
||||
</p>
|
||||
<p className="truncate text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{t('admin.adminConsole')}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-xl px-4 py-2.5 text-[13px] font-medium transition-all',
|
||||
'text-muted-foreground hover:bg-white/40 hover:text-foreground dark:hover:bg-white/10'
|
||||
)}
|
||||
>
|
||||
<div className="flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-white/60 dark:bg-white/10">
|
||||
<ArrowLeft className="size-4" />
|
||||
</div>
|
||||
<span>{t('admin.backToApp')}</span>
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1.5 text-xs font-semibold text-primary dark:bg-primary/20">
|
||||
<Shield className="size-3.5 shrink-0" />
|
||||
<span>{t('admin.title')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex-1 overflow-y-auto px-4 pb-4 custom-scrollbar">
|
||||
<p className="mb-3 px-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t('admin.navSection')}
|
||||
</p>
|
||||
<nav className="space-y-1">
|
||||
{ADMIN_NAV_ITEMS.map((item) => {
|
||||
const Icon = item.icon
|
||||
const active = navItemIsActive(pathname, item.href)
|
||||
return (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-xl px-4 py-3 transition-all duration-300',
|
||||
active
|
||||
? 'memento-active-nav text-foreground'
|
||||
: 'text-muted-foreground hover:bg-white/40 hover:text-foreground dark:hover:bg-white/10'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex size-8 shrink-0 items-center justify-center rounded-full border transition-colors',
|
||||
active
|
||||
? 'border-foreground bg-foreground text-background'
|
||||
: 'border-border bg-white/60 dark:bg-white/10'
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
</div>
|
||||
<span className="text-[13px] font-medium">{t(item.titleKey)}</span>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Pied */}
|
||||
<div className="space-y-1 border-t border-border p-5 pt-4">
|
||||
<div className="flex items-center gap-3 px-4 py-2">
|
||||
<NotificationPanel />
|
||||
<span className="text-[13px] font-medium text-muted-foreground">
|
||||
{t('notification.notifications')}
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
href="/settings"
|
||||
className="flex items-center gap-3 rounded-lg px-4 py-2 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-white/30 hover:text-foreground dark:hover:bg-white/10"
|
||||
>
|
||||
<Settings className="size-4" />
|
||||
<span>{t('nav.settings')}</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user