Archive Retention Table Notification Block for React

Edit ENTRIES (an id, a title, a line of desc and the ISO at time it was archived) and WINDOWS, the menu's choices with the number of days each keeps (zero means for ever). The Auto-deletes cell is deleteWord, which counts days between each row's at and AS_OF, a fixed constant, so the page reads the same on the server and in every time zone and never says "ago". Replace AS_OF with the real date in your app.

Restore, Empty archive and Undo only change the page's lists and reset on reload; nothing is deleted or restored on a server. To make it real, send the id from Restore, send the list of ids from the dialog's confirm handler, and let Undo send the reverse. The retention menu would be saved with the account; deleting at the end of the window is your server's job, and this table only shows when it will happen.

Empty archive opens an alert dialog that says how many notifications it removes and offers Keep them or Empty archive. Escape or Keep them closes it with focus back on the button, and clicking outside does not close it. After you confirm, the table is replaced by an empty state of the same height with an Undo, and focus moves to that Undo a moment after the dialog closes. With nothing left to remove the button says so instead of opening.

The row keeps its place and its height: its cells say "Restored to your inbox" and show an Undo, so nothing below it moves. Undo puts it back as an archived row with its dates. Emptying the archive finishes any receipts (they are already out of the archive), and the dialog counts only the rows still archived.

It is a native table with a caption, column headings and a row heading for each notification, in a labelled region that scrolls by keyboard. The Restore and Undo buttons name the notification they act on. The soon-to-delete state is a word, a clock and a heavier weight, never a color. The status line is a polite live region present from the start. The alert dialog opens with Keep them focused on every target, and Escape closes it.

The table keeps two columns: the notification and its Restore button. The date it was archived and when it will be deleted move into the notification's second line ("Archived Mon 12 Oct. In 18 days."), and the foot's button fills the width. The table's region is one fixed height, so restoring or emptying never moves the foot.