From 85177b530ccdacc21bc69fb82df0ca50daacd94a Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 25 May 2026 15:02:13 +0300
Subject: [PATCH] =?UTF-8?q?fix(admin-ui):=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1?=
 =?UTF-8?q?=D0=B0=D1=80=20=D0=B2=20collapsed-mode=20=D0=BF=D0=BE=D0=BA?=
 =?UTF-8?q?=D0=B0=D0=B7=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=20badge=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D0=BA=20corner=20overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

В 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 как был.
---
 .../src/components/layout/Sidebar.tsx         | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/ordinis-admin-ui/src/components/layout/Sidebar.tsx b/ordinis-admin-ui/src/components/layout/Sidebar.tsx
index be0ac80..5d180f1 100644
--- a/ordinis-admin-ui/src/components/layout/Sidebar.tsx
+++ b/ordinis-admin-ui/src/components/layout/Sidebar.tsx
@@ -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