Kanban Status Changelog Block for React

Edit COLUMNS at the top of the file. Each column has a stage (its word and how full its square is) and its ideas; an idea has an id, an area, a title, a line, its votes and, once shipped, the version it landed in. The counts in the column heads come from the number of ideas, and the sentence in the header counts them all. A fourth stage is one more column in the list; change md:grid-cols-3 to match.

It changes the block's own state and nothing else. The button is a toggle: pressed, it adds one to the count and fills in; pressed again, it takes the vote back. The votes in the data are everyone else's votes, so your own press always moves the number by exactly one. Nothing is sent anywhere, a refresh clears it, and the status line under the board says so. To keep votes, send them to your backend from the handler.

Each column head has a small square, empty for Planned, half full for In progress and full for Shipped, beside the stage's name, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the square. A shipped card also says which release it landed in.

Each column is a section with an h3, its cards are a real list and each card's title is an h4. Every vote button has a name ("Vote for Offline edits") and says whether it is pressed; Tab moves from button to button and Space or Enter presses one. The status line is a live region, present from load, so each vote is announced.

Below md the three columns stack, and each head stays at the top of the screen while its own cards pass under it, so you always know which stage you are reading. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the columns run from the right, each vote button sits at its card's end edge, and version numbers stay left to right.

The header and the board fade up once on load, with CSS transitions, and a vote button changes colour when pressed. With reduced motion the entrance is off and the block simply appears. Nothing loops.