Pinned Message Chat Navbar Block for React

Edit PINS at the top of the file: an id and the text of each. The line, its "Pinned 2 of 3" counter and the spoken sentence all derive from the list, so adding a fourth pin changes the counter to "of 4". Long text is cut with an ellipsis; the full sentence is the button's accessible name.

The pin line is one button whose name is the whole sentence plus "Show the next pin". When you press it, a hidden status region (present from page load, empty until the first press) says the new pin, for example "Pinned 2 of 3: Deliveries move to the side door…". Focus stays on the button, so you can keep pressing it.

All three pins are stacked in one grid cell and the two that aren't current are invisible, so the cell is always as wide and as tall as the widest and tallest pin. Nothing moves when you press.

Voice call and Video call are links to # (point them at your call routes), each named by its own hidden text and a tooltip on hover and focus. Escape closes a tooltip; on hover it appears after a short delay.

Below sm the channel tile gives way to a back arrow link (named "Back to channels") and the member count disappears; below md the avatars go too. The pin line keeps the remaining width and truncates, and the two call links stay.

It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. The tooltips open over the page.