Cookie Inventory Account Block for React

Edit COOKIES. Each has an id, a name, its provider, its category, a one-line purpose, the ISO day it was set and its life in days (0 for a cookie that ends with the visit). The end day is worked out from those, and every date and count comes from the one AS_OF constant, never the clock. The cookie names here are made up. A browser page cannot read cookies set by other origins or marked HttpOnly, so a real inventory comes from your server or your consent tool, not from document.cookie.

Everything: nothing here reads or writes a real cookie or any storage, and the status line says "in this demo". To make it real, have your server clear the cookies of a category when its switch goes off (a browser can only delete cookies the page itself can see), keep the person's choice in your consent record, and update the table from what comes back. Undo then needs its own reverse call, or should be removed.

Held is a cookie the browser has now. Not set is a cookie that was deleted while its category is still allowed, so it can come back on a later visit. Blocked is a cookie whose category is off, so it will not be set at all. Turning a category on again does not bring its cookies back: they return when the site sets them. A row that is not held is tinted and its text stays at full strength, so the state is never only a tint.

Delete swaps that button, in place, for Confirm and Cancel, with focus on Confirm; Escape cancels and returns focus to Delete, and confirming moves focus to the next row's Delete, or to Undo when none is left. Necessary cookies show "Needed" with a lock instead of a button, because deleting them would sign the person out. Clear analytics cookies opens an alert dialog with focus on Keep them; it removes the held analytics cookies and leaves Analytics allowed. Both are single undo steps.

The category cells are two by two, and each cookie is a card of three fixed lines (name and state, what it is for, provider and end day) with its action beside them, so searching, deleting and switching never change the card heights. The foot with the status line and Undo stays pinned to the bottom of the screen. The table and the cards are one list in the markup that the large breakpoint swaps; keyboard and screen reader users get whichever is on screen.

The table has a caption, column heads and a row header per cookie; each switch is named "Allow Analytics cookies"; Delete, Confirm and Cancel name their cookie. State is a word with an icon, and the result of each action is spoken once by a polite status line that exists from the start. Names and dates keep their reading order in a right-to-left page.