Backup and Restore Settings Block for React

Edit SNAPSHOTS, newest first: each has an id, an ISO day and a time, whether it is Scheduled or Manual, its size in gigabytes by part (gb), the rows and files changed since it was taken, which is what a restore would replace. SCOPES lists the parts that can be restored and SPEED is how many gigabytes a minute a restore runs, which sets the time. The impact lines, the sizes and the confirmation word (the snapshot's date) are all computed from these.

So the page shows what a restore asks of you. On load the dialog is drawn in place, a non-modal element over the list, which is inert under it, so nothing is trapped or focused on the docs page. The header's button opens the real alert dialog, with its focus trap, Escape and focus return, and the in-place copy stays closed until a reload. Both share one body and one state. In your app keep the Alert Dialog and drop the in-place copy.

The destructive button is marked aria-disabled until the snapshot's date is typed exactly, with its dashes, and says "Matches." under the field as you reach it. Pressing it early moves focus back to the field. The date, not a word like "restore", is what you type because it is the one thing that tells two snapshots apart, so a restore from the wrong row can't be confirmed by habit. Back returns to the first step with focus on the forward button.

The bar starts at empty on the frame the step opens and is set to full on the next one, so the browser fills it with the Progress component's own CSS transition (set to 2.4 seconds here). The restore is done when that transition ends, and the line under the bar says so. Under reduced motion there is no transition, so the last step shows its end state at once. Closing the dialog during the fill cancels it, since the run is only a simulation.

Everything. Nothing is restored, replaced or paused, and the run only fills a bar; the list marks "Restore simulated" on the snapshot and the status line says nothing was replaced. To make it real, start the restore on your server from the confirm handler, show its real progress in the bar, and replace the typed numbers with the impact your backend computes before it asks. Keep the typed confirmation: a restore throws away newer data.

The in-place dialog docks to the bottom of the stage and its body scrolls while the buttons stay in view, the list shows the date, the type and the size under it in a smaller line, and the real dialog keeps the catalog's phone layout. The footer stacks with the forward button on top.