improvement: notify counter badge added to treatment and tasks tabs for upadted and edited cases.

frontend/src/components/ui/shared/NavBadgePill.tsx

@@ -0,0 +1,17 @@
+interface NavBadgePillProps {
+  count: number;
+  ariaLabel: string;
+}
+
+export function NavBadgePill({ count, ariaLabel }: NavBadgePillProps) {
+  if (count <= 0) return null;
+
+  return (
+    <span
+      className="min-w-[1.25rem] rounded-full bg-badge-warning-bg px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-badge-warning-fg border border-badge-warning-border"
+      aria-label={ariaLabel}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  );
+}

frontend/src/components/ui/shared/Sidebar.tsx

@@ -18,6 +18,9 @@ import {
 import type { OrgTypeName } from '@/components/shared/permissions';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { usePendingConnectionsCount } from '@/lib/hooks/usePendingConnectionsCount';
+import { useTabBadgeCounts } from '@/lib/hooks/useTabBadgeCounts';
+import { badgeCountForPath } from '@/lib/tabBadgeUtils';
+import { NavBadgePill } from '@/components/ui/shared/NavBadgePill';
 import {
   canViewAppointmentsTab,
   canViewCases,
@@ -48,6 +51,7 @@ function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
   const pathname = usePathname();
   const { currentOrganization } = useAuth();
   const pendingConnectionsCount = usePendingConnectionsCount();
+  const tabBadgeCounts = useTabBadgeCounts();
   const orgType = currentOrganization?.type;
 
   const menu = useMemo((): MenuItem[] => {
@@ -119,6 +123,7 @@ function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
           const isActive = pathname === item.path;
           const showPendingBadge =
             item.path === '/organizations' && pendingConnectionsCount > 0;
+          const tabBadgeCount = badgeCountForPath(tabBadgeCounts, item.path);
 
           return (
             <Link
@@ -134,14 +139,13 @@ function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
             >
               <Icon className="w-[18px] h-[18px] icon-flat" />
               <span className="text-sm flex-1">{item.name}</span>
-              {showPendingBadge && (
-                <span
-                  className="min-w-[1.25rem] rounded-full bg-badge-warning-bg px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-badge-warning-fg border border-badge-warning-border"
-                  aria-label={`${pendingConnectionsCount} pending connection requests`}
-                >
-                  {pendingConnectionsCount}
-                </span>
-              )}
+              {showPendingBadge ? (
+                <NavBadgePill
+                  count={pendingConnectionsCount}
+                  ariaLabel={`${pendingConnectionsCount} pending connection requests`}
+                />
+              ) : null}
+              <NavBadgePill count={tabBadgeCount} ariaLabel={`${tabBadgeCount} unread updates`} />
             </Link>
           );
         })}