Issue Status Change Notification Block for React

Edit KEY and TITLE, and the three steps (LATEST, BEFORE and the one under them) with a status (open, progress, review or done), a who and an ISO at in UTC. The sentence, both cells and the history are worked out from those steps, and AS_OF is the page's fixed now, so a time reads "09:12 UTC" or "Yesterday 16:40 UTC".

No. Each status is a glyph and a word (Done, In review, In progress, Open), the After cell is heavier and has a foreground border, and the arrow points from Before to After and turns round for right-to-left layouts. The block uses no status colour, so it reads the same in every theme.

It flips in the page: the sentence beside it changes between what you will hear and a note that you will not hear about the issue, and the status line says so. Nothing is subscribed or unsubscribed. In your app save the change from the switch's handler and keep the two sentences, so people know the consequence before they leave a thread.

The notification is about one move, so the history shows the last few as context and no more; a full trail belongs in the activity feed or the audit log. Each line has the status as a glyph and a word, who made it and when; on a phone the time moves under the name so nothing is cut.

The two cells sit side by side with the arrow across the seam, the history lines become two lines tall with the time under the name, and the switch and its sentence keep their place. The sentence reserves its height for the longer wording so flipping the switch never moves the page.

The move is a description list with a term and a definition for each side, the history is a list, the switch is named "Watching, notify me about this issue" and the single polite status line says what changed. Times are time elements.