Creating reusable tabs with size and style options

Summary

since we're rendering the tabs for the highlihgt/everything tab like 3 times, we should make a component for it

Request interrupted

it should have a size (default or small) and variant prop (default or icon)

EditedTraceOverview.tsx

Editedpage.tsx

call it TraceViewTabs

Request interrupted

actually call it TraceToggle

EditedTraceToggle.tsx

EditedTraceOverview.tsx

Editedpage.tsx

EditedTraceOverview.tsx

Editedpage.tsx

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)

it looks like we’re setting the filters with client side js, when we could just use links, since the state is managed by urls params/queries

EditedTraceToggle.tsx

EditedTraceOverview.tsx

Editedpage.tsx

The TraceToggle component has been refactored to use Next.js Link components instead of client-side state updates.

Key changes:

TraceToggle.tsx:
- Replaced TabsButton with TabsLink.
- Added createLink prop to generate filter URLs dynamically.
- Removed onChange prop as navigation is now handled via href.
TraceOverview.tsx:
- Added createFilterLink prop to the interface and component.
- Passed createFilterLink down to TraceToggle.
frontend/app/s/[id]/page.tsx:
- Created createFilterLink function using useCallback to generate URLs based on search params.
- Passed createFilterLink to TraceOverview and the mobile TraceToggle.