Filter Panel Notification Block for React

Edit NOTES at the top of the file. Each has an id, a kind (which type it counts under), a level (high, medium or low), a title, an ISO at time and whether it was unread when the page opened. KINDS and LEVELS list the filters. A notification passes when it matches every filter that is on: any of the chosen types, any of the chosen priorities, and unread if that is on. Counts, chips and the status line are all worked out from that one rule.

Each type's number is how many notifications it would show under the priority and unread filters that are on, so you see what a tick will do before you press it. With nothing else on they are the type totals; with Low priority on, Security shows 0. The type filters themselves don't change those counts, since ticking two types shows both.

Nothing is saved: the filters live in the page and reset on reload. In your app, keep them in the URL's query string so a filtered list can be shared and survives a refresh, and ask your API for the matching page and the per-type counts instead of filtering a typed list. The chips and Clear all only reset the three pieces of state, so they keep working unchanged.

Removing a chip or pressing Clear all takes away the control that had focus, so focus moves to the list, which scrolls by keyboard. Ticking a type, pressing a priority or flipping the switch keeps focus where it is. When the list is empty its Clear filters button does the same as Clear all and the list takes focus again.

The types are a labelled group of real checkboxes, each named by its type and described by its count. The priorities are toggle buttons whose pressed state is announced, and the unread switch is named. Each chip's remove button says what it removes ("Remove filter: Comments"). Unread rows say "Unread" before the title, and every row names its type and priority in words, never only by its icon. The status line is a polite live region present from the start.

The window keeps its height. The filters become a "Filters (2)" button above the list with the count of what is on; it opens the group, which scrolls inside a short box so the list stays on screen. The chips stay in one row that scrolls sideways, and Clear all stays at its end.