Digest View Notification Block for React

Edit ITEMS at the top of the file. Each has an id, a kind (mention, alert or update), a title and an ISO at time. PERIODS and KINDS name the tabs and the sections. An item belongs to a period when its day falls on today, on yesterday, or on or after this week's Monday, all worked out from AS_OF, so the counts in the cells and the "+N more" lines are derived and never typed. TOP sets how many items a section lists.

The email switch only changes the status line, and says so: nothing is emailed and nothing is saved. To make it real, send the switch's value to your notification settings and have your mail job build the same digest from the same list for each recipient. The "+N more" text is not a control here; in your app it would link to the full list for that kind.

Today has 6 items and This week has 24, but each section lists at most three, so the periods differ by a few rows. An unseen copy of the longest period sits in the same grid cell as the open one, so the panel is always as tall as the longest and the foot never moves. The row heights are fixed too, so a long title can't change them.

The three cells are Sliding Number components outside the tab panels, so the same instance gets a new value when you change tabs and its digits roll to it. With reduced motion on, the digits change in place. Each cell also carries its number as text for a screen reader, so the count is read once, not as a column of digits.

The tabs are real tabs: arrow keys move along them and Tab moves into the panel. Each section is a labelled list under its own heading, with the period in its name ("Mentions, Today"). The summary cells are a list, each saying its label and number in text. The status line is a polite live region present from the start, and the switch has a name that says the time.

The tab list scrolls sideways if it must, the three cells stay three across at every width, and the sections stack as they do on a desktop. Each item keeps a fixed row of two lines for the title and a narrow time column, and the foot stacks the switch over its status line.