Community Join Onboarding Block for React

Edit CHANNELS. Each has an id, two typed letters for its tile, a members count, a name, a topic line and a list of threads (a title and a reply count). START lists the channels that are joined when the page opens, and what Save compares against.

Each is a real toggle button, named "Join Show and tell" and, once on, "Joined Show and tell", with a fixed width so the row never changes. Joining changes the draft only, the count and the foot's "1 change not saved yet." follow it, and nothing is posted until you wire Save.

Yes. "What's being said" folds out the channel's two latest threads, each in a row of one height. Any number can be open at once and the panel simply grows; folding them away shrinks it. Tab moves between the fold-out buttons; arrow keys do not.

Save and Discard are always in the tab order and look quiet when nothing changed; pressing one then says "No changes to save." or "No changes to discard." Join all joins everything, and once everything is joined it says "You are in all 4 channels." The foot's line is the panel's one polite status.

The Join button stays beside the name, the topic line wraps under it, and the fold-out text sits under the tile's column. Save and Discard pin to the foot of the screen with the status above them.

Everything: Save says it was saved in this demo and nothing is posted or joined. In your app send the joined ids to your server where save says so, and load the thread titles from each channel.