Release Filter Navbar Block for React

NOTES is the source: each note has a category and whether it starts unseen. A category's badge is the notes in that category that are unseen and have not been opened in this session. All's badge is the sum of those. Notes that start already seen never count. Opening a category adds its note ids to the seen list, so the badge drops to zero and stays there. Opening All does not add anything. The badges reserve their width at zero so the row doesn't jump.

No. They are buttons in a nav named Releases, and the open one has aria-current="true". There is no tab panel in this block: the page under the bar is what would change in your app. Tab moves between them. They don't use a tab arrow-key pattern, because a tablist without panels would be a fake control.

Subscribe toggles a local flag. On, the label becomes Subscribed and the polite line says the demo stored nothing. Off, it says the subscription was removed. It does not call a server. The feed is a link to #releases with the accessible name Release feed. Point it at your feed. The feed button renders the link with render, with nativeButton={false}. Subscribe itself is a button. It takes onClick.

Edit VERSION (shown in the badge, hidden below sm) and NOTES. Keep prices and versions as data the badges read, not as a second formatted string. The badge is an outline badge, so it doesn't compete with Subscribe.

The wordmark shrinks to its icon, the version hides, and the filters become a horizontal scroller with a fade at each end. The open filter scrolls into view, instantly when reduced motion is requested. The feed link and Subscribe stay. Nothing wraps onto a second row. The bar is 56 pixels.

Nothing moves on load. The open filter scrolls into view, and a band of light sweeps across Subscribe once on hover and keyboard focus. With reduced motion the scroll is instant and the light fades in where it stands. Clearing a count swaps the digit in place.