Drafts Desk Blog Block for React

They change the block's own state and say so. Duplicate adds a copy titled "(copy)" at the top, with the Outline status and no words. Archive removes the row and enables Undo archive, which puts it back where it was. Edit changes nothing and says it would open the draft in the editor. A polite status line under the count reads each result, and nothing is saved in this demo.

It is worked out from the rows: "5 drafts, 2 need an edit" counts the drafts shown and the ones with the Needs edit status, so it changes when you duplicate or archive. The progress bars and the percentage come from each draft's words and target.

Each status has a word and an icon (a list, a pencil, a flag) and the three differ in weight, not hue: Drafting is a filled neutral badge and the other two are outlined. The bars use the foreground colour on a neutral track.

Each row's three-dot button is named for its draft ("Actions for ..."), opens with Enter or Space, moves with the arrow keys and closes with Escape. Each item takes onClick.

The edited time is a time element with a fixed ISO value, formatted in UTC, so it reads the same on the server and in every browser. A copy has no time and says "Copied just now".

The rows stack: the title and status first, the progress bar and word count under them, then the edit time. The menu button stays at the top end of the row, and the count band reserves two lines for the status so nothing shifts.