FilterButton and ExplorerFilterButton render the same control with different prop names and styling, used across ten tables

[fansilas]

Two filter-pill components live in src/components/:

• src/components/FilterButton.tsx (50 lines)
• src/components/miners/ExplorerFilterButton.tsx (47 lines)

They render the same widget: a small pill with a label, a count, and an active state outlined in a status color. They diverge in two ways that have no functional reason behind them.

Different prop names for the same idea.

// FilterButton
<FilterButton label="Open" isActive={...} count={...} color={...} />

// ExplorerFilterButton
<ExplorerFilterButton label="Open" selected={...} count={...} color={...} />

isActive vs selected. count?: number (optional) vs count: number (required). FilterButton also accepts activeTextColor; ExplorerFilterButton does not.

Different visual rules.

	FilterButton	ExplorerFilterButton
Font size	0.8rem	{ xs: '0.65rem', sm: '0.75rem' }
Padding	px: 2	px: { xs: 1, sm: 1.5 }, py: { xs: 0.5, sm: 0.75 }
Active background	border.subtle	surface.light
Inactive background	transparent	surface.transparent
Inactive text	text.tertiary	text.secondary
Hover background	border.light	border.medium

So the same functional control reads slightly differently to the eye depending on which page rendered it. That shows up the most where both live near each other in the user's flow, since switching between a miner's view (which uses ExplorerFilterButton) and a repository's PR list (which uses FilterButton) silently swaps the filter style.

Spread of usage.

FilterButton (six files):

src/components/issues/IssuesList.tsx:45
src/components/leaderboard/TopRepositoriesTable.tsx:39
src/components/miners/MinerScoreBreakdown.tsx:54
src/components/repositories/RepositoryIssuesTable.tsx:32
src/components/repositories/RepositoryPRsTable.tsx:21
src/pages/WatchlistPage.tsx:103

ExplorerFilterButton (four files):

src/components/miners/MinerIssuesTable.tsx:25
src/components/miners/MinerOpenDiscoveryIssuesByRepo.tsx:29
src/components/miners/MinerPRsTable.tsx:29
src/components/miners/MinerRepositoriesTable.tsx:23

Suggested cleanup.

Pick one as the source of truth (the responsive sizing in ExplorerFilterButton is the better starting point because it adapts on narrow viewports). Add the optional activeTextColor from FilterButton, settle on isActive as the prop name, and migrate all ten call sites. Delete the loser. Net is one component and one consistent filter-pill style across every table in the app.

Related

PR #844 (centralized avatar helpers), PR #611 (shared ECharts theme), PR #545 (DataTable consolidation), and PR #341 (remove dead MinerFocusCard) are the recent consolidation precedents the maintainers have merged. Issue #761 / PR #762 cover unused exported symbols and do not overlap with this work since both FilterButton and ExplorerFilterButton are actively imported.