fix(admin-ui): сайдбар в collapsed-mode показывает badge как corner overlay
В collapsed-режиме (56px полоска) рендерили только иконку без label и без badge — счётчик pending записей/драфтов был не виден, юзер не понимал что есть необработанные элементы пока не раскроет сайдбар. Теперь в collapsed: badge → маленький круглый pill в углу иконки (top-right, 16×16, ring-1 от bg чтобы хорошо отделялся от иконки). Cap "99+" если число большое — uniform width. Tooltip на link включает label + (count) при hover. Expanded-mode без изменений — badge справа от label как был.
This commit is contained in:
@@ -583,7 +583,17 @@ function SidebarLink({
|
||||
<Link
|
||||
to={to}
|
||||
onClick={onClick}
|
||||
title={collapsed ? (typeof label === 'string' ? label : undefined) : undefined}
|
||||
// Tooltip в collapsed-mode включает label + текущий badge (если есть),
|
||||
// чтобы юзер видел число при hover на узкой полоске.
|
||||
title={
|
||||
collapsed
|
||||
? typeof label === 'string'
|
||||
? badge !== undefined
|
||||
? `${label} (${badge})`
|
||||
: label
|
||||
: undefined
|
||||
: undefined
|
||||
}
|
||||
className={cn(
|
||||
// text-body = 13px workhorse per handoff (см. styles.css @utility).
|
||||
'group flex items-center rounded-md text-body transition-colors',
|
||||
@@ -593,9 +603,28 @@ function SidebarLink({
|
||||
: 'text-ink-2 hover:text-ink hover:bg-surface-2',
|
||||
)}
|
||||
>
|
||||
<Icon size={collapsed ? 18 : 15} strokeWidth={1.75} className="shrink-0" />
|
||||
{!collapsed && (
|
||||
{/* Icon + corner-badge overlay в collapsed-mode. Wrapper relative нужен
|
||||
для absolute badge'а; в expanded-mode иконка без обёртки + badge
|
||||
справа от label'а как было. */}
|
||||
{collapsed ? (
|
||||
<span className="relative inline-flex items-center justify-center">
|
||||
<Icon size={18} strokeWidth={1.75} className="shrink-0" />
|
||||
{badge !== undefined && (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
'absolute -top-1.5 -right-1.5 inline-flex items-center justify-center',
|
||||
'min-w-[1rem] h-4 px-1 rounded-full text-cap font-mono leading-none',
|
||||
'bg-accent text-on-accent ring-1 ring-surface',
|
||||
)}
|
||||
>
|
||||
{typeof badge === 'number' && badge > 99 ? '99+' : badge}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<Icon size={15} strokeWidth={1.75} className="shrink-0" />
|
||||
<span className="flex-1 truncate">{label}</span>
|
||||
{badge !== undefined && (
|
||||
<span
|
||||
|
||||
Reference in New Issue
Block a user