Basic Task List Block for React

Replace START with your tasks. Each has an id, a title, a done flag and an optional ISO due date. Due labels are worked out against the AS_OF constant, a fixed "today" that keeps the server and every visitor in agreement; point it at the current date when you use real data.

Everything. Adding, ticking, deleting, clearing and undoing change state on the page and nothing is sent anywhere, so the list resets when you reload. In your app write each change from add, toggle, remove, clearDone and undo to your own store, and load the initial list from it.

Deleting a task or clearing the done ones removes them and shows one line, for example "Deleted 'Order paint samples'", with an Undo button. Undo puts them back at the same positions they had, not at the end. The line holds one removal; adding a task or removing another replaces it. There is no toast, so nothing disappears on a timer.

Each checkbox is named by its task title, the delete button names the task it removes, and the add field has a label. A single polite status message announces what changed ("Added 'x' at the top", "3 archived. Undo is available"). Done is shown by the checkbox, a muted color and a strike through the title, never by color alone, and Clear done stays focusable and answers when nothing is done.

Deleting or clearing every task shows an empty state in the space the list held, so the add field and the foot don't move. Its button moves focus to the add field.

The add field and its button stay in one row on the first screen. Each task is two lines, the title and then its due date, with the delete button at the end, and a long list scrolls inside a named region instead of lengthening the page.