Storage Usage Account Block for React

Edit KINDS (an id, a name, its size in megabytes, whether a button can clear it and a pattern) and CAPACITY. Backups are summed from the typed list BACKUPS, each with a day and a size, and only those older than KEEP_DAYS days from AS_OF can be deleted. Every size, share and sentence is worked out from these: the shares are rounded so that they and the free space add up to 100.

All of it. Confirming recounts this page and says so in the status line; no file, backup or cache is touched. To make it real, send the action to your server in the dialog's confirm handler, update the sizes from what it reports and keep the dialog: clearing a cache is harmless, but deleting backups and emptying a trash cannot be undone, and the page's Undo is only a demo of the sums.

Colours fail for people who cannot tell them apart, and in a theme with one hue they run together. Each part is drawn with a different pattern, and the same pattern is the key beside its name in the rows, so the bar reads in grey. The bar itself is one image with a text alternative that gives every size, and the rows give the same figures as text.

With a fixed English number format, so digits stay ASCII in every language and a right-to-left page: from a gigabyte up they are gigabytes to one decimal, below that whole megabytes. The bar and its figures are kept left to right, since a bar is read from empty to full in any language.

The bar spans the panel, and each row stacks: the pattern, name and words, then size and share at its end, then the button under them at full width. A row whose button has nothing to free waits quietly with the same label and says why if pressed, so rows never change height.

The dialogs are alert dialogs: focus starts on Cancel, Escape closes and focus returns to the button that opened it. Buttons say what they free and from where, the bar is a named image, and the one status line is polite and present from the start. Undo names what it will take back.