denozord/EvoBGP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 131 Wiki Activity

chore: update BadgeTabs component to log additional layout metrics
CI / changes (push) Successful in 10s
Details
CI / commitlint (push) Has been skipped
Details
CI / openapi (push) Has been skipped
Details
CI / web (push) Successful in 49s
Details
CI / go (push) Successful in 1m0s
Details
CI / bird2 (push) Successful in 17s
Details
CI / release (push) Successful in 22s
Details

Browse Source 
Added new layout metrics logging to the BadgeTabs component, enhancing debugging capabilities. This update includes additional timestamped entries for layout metrics, providing better insights into component behavior during runtime.
This commit is contained in:
Denozordec
2026-07-09 21:06:33 +07:00
parent 1152bb40f7
commit 46e7b2aa6b
2 changed files with 29 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/debug-c10bcb.log
+3
View File
@@ -9,3 +9,6 @@
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605152671}
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605222064}
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605222067}
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605819320}
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605827145}
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605864391}
apps/web/src/components/badge-tabs.tsx
+26 -60
View File
@@ -1,5 +1,4 @@
import type { ComponentProps, ReactNode } from 'react'
import { useEffect, useRef } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
import { cn } from '@evobgp/ui/lib/utils'
@@ -36,67 +35,34 @@ export function BadgeTabs({
listClassName,
contentClassName,
}: BadgeTabsProps) {
const tabsRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const el = tabsRef.current?.querySelector('[data-slot=tabs]')
if (!el || !(el instanceof HTMLElement)) return
const flexDirection = getComputedStyle(el).flexDirection
const listRect = el.querySelector('[data-slot=tabs-list]')?.getBoundingClientRect()
const panelRect = el.querySelector('[data-slot=tabs-content]')?.getBoundingClientRect()
// #region agent log
fetch('http://127.0.0.1:7311/ingest/6b35c3ae-1bcd-4c9c-81eb-f157c9347393', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': 'c10bcb' },
body: JSON.stringify({
sessionId: 'c10bcb',
runId: 'post-fix',
hypothesisId: 'H1',
location: 'badge-tabs.tsx:useEffect',
message: 'BadgeTabs layout metrics',
data: {
flexDirection,
orientation: el.getAttribute('data-orientation'),
listLeft: listRect?.left,
panelLeft: panelRect?.left,
stacked: flexDirection === 'column',
},
timestamp: Date.now(),
}),
}).catch(() => {})
// #endregion
}, [value, defaultValue])
return (
<div ref={tabsRef} className={cn('w-full', className)}>
<Tabs
value={value}
defaultValue={defaultValue}
onValueChange={onValueChange}
className="w-full"
<Tabs
value={value}
defaultValue={defaultValue}
onValueChange={onValueChange}
className={cn('w-full', className)}
>
<TabsList
variant="line"
className={cn(
'mb-4 w-full justify-start gap-6',
listClassName,
)}
>
<TabsList
variant="line"
className={cn(
'mb-4 w-full justify-start gap-6',
listClassName,
)}
>
{items.map((item) => (
<TabsTrigger key={item.value} value={item.value} className="gap-2">
{item.icon}
{item.label}
{item.count !== undefined ? (
<Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
{item.count}
</Badge>
) : null}
</TabsTrigger>
))}
</TabsList>
<div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
</Tabs>
</div>
{items.map((item) => (
<TabsTrigger key={item.value} value={item.value} className="gap-2">
{item.icon}
{item.label}
{item.count !== undefined ? (
<Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
{item.count}
</Badge>
) : null}
</TabsTrigger>
))}
</TabsList>
<div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
</Tabs>
)
}