Badge Counter Wall Features Block for React

Edit CHANNELS at the top of the file: each entry has a name, an icon from Lucide, the unread count, the change over the last hour and the age of the oldest message. Everything else is derived: the "No change this hour" line, the arrow, and the "6 of 8 channels have unread" status.

Pass the counts from your own state or a subscription and keep the rest as it is. The digits are Sliding Number columns that roll to each new value, and with reduced motion they change in place. Group large counts with the grouping prop so "1,284" keeps its comma.

It is a toggle group in multiple-selection mode, so each button is a real toggle button that reports whether it is pressed. A small handler keeps exactly one pressed: pressing the pressed button does nothing, and pressing the other one moves the selection. Arrow keys move between the buttons.

Yes. A quiet cell never fades its text: its title, count and icon switch to the muted text colour, which keeps its contrast, its icon tile loses its fill and the cell takes a soft tint. The status line under the toggle is a polite live region, so a screen reader hears how many channels remain.

Yes. The signed change ("+12 this hour") sits in a bidirectional isolate so the sign stays in front of the number, the arrows point up and down and do not mirror, and the cells follow the page's direction.

The wall goes two across, with the cells' padding stepped down. The toggle sits under the header text, and nothing scrolls sideways at 320 pixels.