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:
Zimin A.N.
2026-05-25 15:02:13 +03:00
parent b828225b28
commit 85177b530c
@@ -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