Search Results Notification Block for React

Edit NOTES at the top of the file. Each has an id, a kind (comment, mention, review or update), a title, a body line, and an ISO at time. CHIPS lists the type chips. A notification matches when its title or body holds the query, ignoring case and accents, and the marks use the same rule, so what is listed is exactly what is marked. Every count is worked out from the list, and times are shown against AS_OF.

The search runs over the typed list in the page; nothing is sent and nothing is stored. For a large inbox, search on your server and pass the matches to Result: keep SearchHighlightText for the marks, since it highlights whatever text you hand it. The chip counts would then come from your API's facets for the query. Results don't open anything here; in your app each title would link to its notification.

Pressing / while focus is anywhere inside the block, except in a text field, moves focus to the search field; the block binds nothing on the rest of the page, so it never fights a site's own search. Escape in the field, or the Clear button, empties the query and keeps focus in the field. The slash hint hides on phones, where there is no keyboard.

Each chip says how many results it would show for the current query, so you can see where the matches are before pressing one: "invoice" finds one mention, one comment, one review and two updates, and each chip says so. The chip you pressed filters the results to its type, and the count line says how many are shown.

The field is named and sits in a search landmark. Each chip says its type and its count, "Updates, 2 results", and the pressed one is announced as pressed. The marks are real mark elements, so they read in forced-colors and in print. A polite status line speaks the count about half a second after you stop typing, rather than on every key, and the visible count is hidden from assistive technology so it isn't read twice.

The panel fills the width. The chips stay in one row that scrolls sideways, so a pressed chip never wraps to a second line and moves the results. The slash hint is hidden, the results keep their fixed height, and each row keeps two lines for the title and one for the line under it.