Storage Almost Full Notification Block for React

Edit ITEMS (id, type, name, last change in UTC, size in GB, five per type), KINDS (the types, with rest, the space of that type not in the list) and CAPACITY. The segment widths, the totals, the percentage and "Free up" are worked out from them.

Each type is a different weight of the foreground, from solid to a pale tint, and the legend names every one with its size in gigabytes. The bar has a text description with all four sizes for screen readers.

The toggle group always has one type pressed (it never goes empty), and each file row is a checkbox in a label, so the whole row ticks it. The ticked files of every type count, which is why the status line says how many are ticked and how many gigabytes that frees.

Delete selected opens the dialog, and Delete removes the files from the lists in this page only: the bar, the totals and the lists update, and nothing is sent. With nothing ticked it answers "Tick at least one file first." In your app call your delete endpoint from confirm and drop the ids it reports as gone.

The legend wraps to two columns and the type chips sit in a two by two grid. The list keeps its five-row height, even after files are deleted or a type runs out, so nothing jumps, and the foot with the status line and Delete selected stays pinned to the bottom.