Mention Lenses Notification Block for React

Edit MENTIONS. Each has an id, who tagged (by), an ISO at, the channel, the words before the tag, the token itself and the words after, the kind (you, team or channel) and whether it was unread. The tag is kept apart from the words so the block can mark it without any HTML. LENSES lists the chips; every count is worked out from MENTIONS.

They are one single-choice group. Choosing a chip sets the lens and the list shows only the mentions of that kind; All shows every mention. The counts on the chips do not change when you choose, since they count what each lens holds. The line at the foot is the polite status: it says what the lens holds and how many are unread, and after a jump it says nothing opens in this demo.

In the demo it marks the mention read and says nothing opens. Point it at the message in your app (a link or a route change) in the jump handler. Read state is kept in the page and resets on reload.

The group is one tab stop, and the arrow keys move between chips. Each chip is named with its count ("@you, 3 mentions"), and the chosen chip is a solid foreground fill.

Every kind holds the same three mentions, and every row has a fixed height with its snippet clamped to two lines (three on a phone), so choosing a lens only swaps the rows. The region is exactly three rows tall, and All scrolls inside it. If your kinds hold different counts, keep the region at a fixed height, as it is here, and let the shorter lists leave empty room.

The chips sit in a row that scrolls sideways and is named for a screen reader. Each mention is a two-line row with the tag still visible, and Jump shortens to one word (its name stays "Jump to message by ...").