No Threads Empty State Block for React

Everything: the thread joins a list in the page's state, nobody is notified and nothing is saved, so a reload empties it and Start over empties it without one. To wire it for real, send the title, the details and the chosen starter to your API where the code says so, add the row from the response, and show a failure in the status line under the button.

It writes a sample title for that kind into the title field and changes what the details field asks for, such as "Say what you have tried so far" for a question. The title is yours to edit before you start the thread, and a thread started without a starter is a plain thread. The sketch of a kind turns solid once a thread of that kind is on the list.

So the page behaves the same each time: the list holds a place for the next thread, drawn as a dashed row, and the demo lists three. At three the button says why it is quiet and Start over clears the list. In your app let the list grow and keep the dashed row for the empty state only.

Nothing is added: the field says "Add a title to start the thread" and takes focus. Typing clears the message. Titles are trimmed and limited to 80 characters.

The starters are one group named Pick a starter, so one Tab stop reaches it and the arrow keys move between the cards. Then come the title, the details, Start thread and Start over. One polite status line under the button says what changed, such as "Thread started in this demo. Nobody was notified." The sketches are hidden from assistive technology and each card's name and line are real text.

The starters become rows with the sketch at the start, and the Start thread button sits in a foot pinned to the bottom of the screen, so it is always in reach while you write. The list is under the form and grows downwards, so the heading never moves. Nothing scrolls sideways, even at 320 px wide.