Search Reviews Block for React

Replace REVIEWS at the top of the file. Each review has an id, name, rating from 1 to 5, an ISO date, a title, a body, a helpful count and a verified flag. The suggestions are mined from the same list: every word of four letters or more that three or more reviews use, minus the short list in COMMON, most used first. The average, the per-star counts, the matches and the order are all worked out from it too.

A review matches when its title or text contains the whole query, ignoring case and accents (so "glaze" finds "Glaze"). Best match counts how often the query occurs, with a title hit worth three; with an empty query it lists the most helpful first. Ties go to the newest review. The marks come from the same comparison, so the rows you see are exactly the ones the count describes.

Both. Each chip's number is how many matches that star rating has for the current query, and pressing a chip narrows the rows to it. Type a new word and the numbers change at once. "All" is always available, and the live line says how many reviews match with the star you chose.

An unseen copy of the four tallest reviews sits in the same grid cell as the live rows and the empty state, so the cell is always as tall as a full list. The star chips and the order segment sit in one row that scrolls sideways on a phone, and the status line has a fixed height.

Press "/" to jump to the field, type, and use the arrow keys to move through the suggestions; Enter puts the highlighted word in the field. Escape closes the popup. Highlighting a suggestion never rewrites what you typed. Tab goes on to the star chips and the order segment, which use the arrow keys.

Yes. The field, its icons, the chips and the rows follow the page's direction, stars are mirrored so they fill from the start, and the counts, dates and the quoted query are isolated so their characters keep their order.