Team Activity Feed Notification Block for React

Edit PEOPLE (an id, a name and two initials) and ACTIONS (an id, a who that is a person's id, the text after the name and an ISO at in UTC, newest first). FIRST is how many actions show when the page opens. Days, counts and the status line are worked out from that data, and times are clock times in UTC, so the feed reads the same for everyone and never says "ago".

That block narrows a timeline by what kind of thing happened and shows a rail of type tiles. This one narrows a flat feed by who did it: people are the control, the feed is grouped by day, and each row is a person's initials and a sentence. They share only the idea of a typed history.

It reveals the five older actions typed in the same list, keeps the person you chose, says how many are showing and moves focus to the first new row. The button then reads "All shown" and stays in place, quiet. Nothing is fetched and a reload starts again from nine actions. In your app request the next page from showMore and append it.

The feed becomes a designed empty state, in the same box so the page does not move, saying that person has no actions among those showing, with a button that shows everyone. Showing more brings their action in. The chip still says "0 actions" so you know before you press.

The six chips become a row that scrolls sideways inside its band, each wide enough to read the initials, the name and the count, and the feed keeps its own scroller below. The status line, "Show everyone" and "Show 5 more" stay where they are.

Each chip is a toggle button named with the person's full name and their count, the pressed one has a heavier ring and weight as well as its paint, and the feed is a list of days with a heading each inside a scroll region the keyboard can reach. Times are time elements and the single polite status line says whose work is showing.