From 9b7c03252436881fbe849662a36e9cb46a9af817 Mon Sep 17 00:00:00 2001 From: Serhii Dziupin Date: Wed, 5 Aug 2026 13:37:46 +0300 Subject: [PATCH 1/2] feat(ui): show the changed-files count badge on the Git rail surface Replaces the plain activity dot on the context panel rail's Git button with a numeric badge of the changed-files count from the git store status, so the count is visible at a glance without opening the Git surface. Large counts cap at 99+ to keep the pill within the 36px button. The badge is reflected in the button's accessible label and the hover tooltip. Fixes #2364 --- .../components/layout/ContextPanelRail.tsx | 78 ++++++++++++++----- packages/ui/src/lib/i18n/messages/de.ts | 2 + packages/ui/src/lib/i18n/messages/en.ts | 2 + packages/ui/src/lib/i18n/messages/es.ts | 2 + packages/ui/src/lib/i18n/messages/fr.ts | 2 + packages/ui/src/lib/i18n/messages/ja.ts | 2 + packages/ui/src/lib/i18n/messages/ko.ts | 2 + packages/ui/src/lib/i18n/messages/pl.ts | 2 + packages/ui/src/lib/i18n/messages/pt-BR.ts | 2 + packages/ui/src/lib/i18n/messages/uk.ts | 2 + packages/ui/src/lib/i18n/messages/zh-CN.ts | 2 + packages/ui/src/lib/i18n/messages/zh-TW.ts | 2 + 12 files changed, 80 insertions(+), 20 deletions(-) diff --git a/packages/ui/src/components/layout/ContextPanelRail.tsx b/packages/ui/src/components/layout/ContextPanelRail.tsx index 43692cbb..54b5d78c 100644 --- a/packages/ui/src/components/layout/ContextPanelRail.tsx +++ b/packages/ui/src/components/layout/ContextPanelRail.tsx @@ -49,17 +49,30 @@ type RailItemProps = { showActivityDot: boolean; label: string; description: string; + /** Numeric badge (e.g. the Git changed-files count); takes precedence over the activity dot. */ + badgeCount?: number | null; + /** Accessible label that includes the badge count; falls back to `label`. */ + badgeAriaLabel?: string | null; + /** Extra tooltip line describing the badge; rendered under the description. */ + badgeDescription?: string | null; orderNumber?: number | null; showOrderNumber?: boolean; onSelect: (surface: ContextSurfaceDescriptor) => void; }; +// The badge corner is 16px tall; cap large counts so the pill stays compact +// on the 36px rail button (matching the order-number badge's footprint). +const formatRailBadgeCount = (count: number): string => (count > 99 ? '99+' : String(count)); + const ContextPanelRailItem: React.FC = ({ surface, isActive, showActivityDot, label, description, + badgeCount, + badgeAriaLabel, + badgeDescription, orderNumber, showOrderNumber, onSelect, @@ -68,6 +81,8 @@ const ContextPanelRailItem: React.FC = ({ id: surface.id, }); + const displayBadgeCount = badgeCount != null && badgeCount > 0 ? formatRailBadgeCount(badgeCount) : null; + return (
= ({ {...attributes} {...listeners} onClick={() => onSelect(surface)} - aria-label={label} + aria-label={badgeAriaLabel ?? label} aria-pressed={isActive} className={cn( 'flex h-9 w-9 touch-none select-none items-center justify-center rounded-md transition-colors', @@ -95,12 +110,6 @@ const ContextPanelRailItem: React.FC = ({ ) : ( )} - {showActivityDot && !showOrderNumber ? ( -