Tagged Categories Reviews Block for React

Edit TAGS (an id and a label each) and REVIEWS at the top of the file; each review lists the ids of its tags. The counts, the bar widths (against the most-used tag), the average and the matches are all worked out from them, so adding a tag or a review needs no other change. The list shows PAGE matches at a time (five), newest first.

With it off, a review matches when it carries any of the chosen tags; with it on, only when it carries all of them. With no tag chosen every review shows, and the Switch changes nothing. The live line says which rule applied, for screen readers: "Showing 2 of 12 reviews, tagged all of Value, Variety".

An unseen copy of the five tallest reviews sits in the same grid cell as the live list and the empty state, so the cell is always as tall as a full list. The status line and Clear button keep their places, and the tag cells have a fixed size.

The sidebar becomes a row of tag cells that scrolls sideways, then the Switch, then the reviews, so the tags and the first review share the first screen. The cells keep their bars, counts and checks, and pressing one never moves the page.

Tab into the tags, move with the arrow keys and press Space or Enter to choose or drop a tag. Each tag's name says its count ("Value: 4 of 12 reviews") and whether it is pressed. Clear returns focus to the first tag.

Yes. The cells, the bars (which fill from the start), the check, the pills and the review columns follow the page's direction, and counts and dates are isolated so their digits keep their order.