The user wanted to create a reusable tabs feature to avoid rendering the same tabs multiple times. They aimed to include options for size and style variations in this feature. Additionally, they considered simplifying filter management by using links instead of client-side scripts, relying on URL parameters for state control.
since we're rendering the tabs for the highlihgt/everything tab like 3 times, we should make a component for it
it should have a size (default or small) and variant prop (default or icon)
call it TraceViewTabs
actually call it TraceToggle
The highlights/everything tab logic has been extracted into a new reusable component called TraceToggle (located at frontend/components/filters/TraceToggle.tsx). It supports size ("default" or "small") and variant ("default" or "icon") props as requested.
The component is now used in:
TraceOverview.tsx (both in the main header and the mini header)frontend/app/s/[id]/page.tsx (for mobile view)The TraceToggle component has been refactored to use Next.js Link components instead of client-side state updates.
Key changes:
TraceToggle.tsx:
TabsButton with TabsLink.createLink prop to generate filter URLs dynamically.onChange prop as navigation is now handled via href.TraceOverview.tsx:
createFilterLink prop to the interface and component.createFilterLink down to TraceToggle.frontend/app/s/[id]/page.tsx:
createFilterLink function using useCallback to generate URLs based on search params.createFilterLink to TraceOverview and the mobile TraceToggle.