feat: add count badges to all SpanDetailsDrawer tabs

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -1,7 +1,7 @@
 .span-details-drawer {
 	display: flex;
 	flex-direction: column;
-	width: 330px;
+	width: 450px;
 	border-left: 1px solid var(--bg-slate-400);
 	overflow-y: auto;
 
@@ -176,6 +176,34 @@
 				justify-content: center;
 				width: 100%;
 				padding: 4px 8px;
+				margin-right: 8px;
+				gap: 4px;
+
+				.tab-label {
+					display: flex;
+					align-items: center;
+				}
+
+				.count-badge {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					min-width: 20px;
+					height: 20px;
+					padding: 0 6px;
+					border-radius: 10px;
+					background: rgba(171, 189, 255, 0.1);
+					color: var(--bg-vanilla-400);
+					font-variant-numeric: lining-nums tabular-nums slashed-zero;
+					font-feature-settings: 'dlig' on, 'salt' on;
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px;
+					letter-spacing: -0.065px;
+					text-transform: uppercase;
+				}
 			}
 
 			.attributes-tab-btn:hover,

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -54,7 +54,10 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 						icon={<Bookmark size="14" />}
 						className="attributes-tab-btn"
 					>
-						Attributes
+						<span className="tab-label">Attributes</span>
+						<span className="count-badge">
+							{Object.keys(span.tagMap || {}).length}
+						</span>
 					</Button>
 				),
 				key: 'attributes',
@@ -63,7 +66,8 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 			{
 				label: (
 					<Button type="text" icon={<Anvil size="14" />} className="events-tab-btn">
-						Events
+						<span className="tab-label">Events</span>
+						<span className="count-badge">{span.event?.length || 0}</span>
 					</Button>
 				),
 				key: 'events',
@@ -82,7 +86,14 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 						icon={<Link2 size="14" />}
 						className="linked-spans-tab-btn"
 					>
-						Links
+						<span className="tab-label">Links</span>
+						<span className="count-badge">
+							{
+								(
+									span.references?.filter((ref: any) => ref.refType !== 'CHILD_OF') || []
+								).length
+							}
+						</span>
 					</Button>
 				),
 				key: 'linked-spans',