Filter Popovers Navbar Block for React

Inside one group any ticked choice matches, so Urgent and High shows both. Across groups every group with a choice must match, so Urgent plus Ana shows the urgent cards that are Ana's. The number beside each choice is how many of the 24 sample cards carry it whatever else is ticked, and the "n of 24 cards" figure is the result of the current filters. The sample is example data in the CODES list: replace it with your own query.

Each pill is a button that reports whether its popover is open. Enter or Space opens it, Tab moves through the checkboxes, Space ticks one, and Escape closes it and returns focus to the pill. The count on a pill is read as part of its name ("Priority 2 selected"). The popovers are not modal: clicking away closes one.

It clears every group at once and says so. It is always in the layout but invisible and disabled while nothing is ticked, so the pills don't move when a filter appears.

It chooses Board, List or Timeline and says which is on in a polite line. It doesn't draw the board: put your own view components behind the view state. From md it sits in the bar as a segment group; on a phone it is the last group in the drawer.

Below lg the pills hide and a Filters button, with the number ticked, opens a drawer from the bottom: three groups in two columns, the view switch below md, and Clear filters. The board's title and star stay in the bar at every width, and the wordmark is its icon until xl. The drawer closes on Escape and focus returns to Filters.

The chevron on an open pill turns, the popovers fade in, and the drawer slides up; with reduced motion the chevron turns at once and the panels appear without a transition. The star fills when it is pressed.