No Channels Empty State Block for React

The channels you join stay in the page's state: the rail behind the dialog lists them, nobody is told and a reload empties it, and Start over empties the rail without one. To wire it for real, add the member to each chosen channel where the code says so, take the rail's rows from your response, and show a failure in the dialog's status line.

Shown open in place for the preview, so the block shows its content without a click: on load the dialog is drawn as a plain non-modal element over the stage and nothing is trapped or focused. Pressing Browse channels opens the real Dialog, with its focus trap, Escape to close it and focus back on the button, and the in-place copy stays closed until a reload. In your app keep only the Dialog and its trigger.

It filters the five channels as you type by name or line, ignoring case and accents, and a no-match message takes the list's place. The list sits in a box of one height, so searching never resizes the dialog, and the fifth channel scrolls into view. Enter in the search field keeps the dialog open: it is Join that commits.

It lists the chosen channels in the rail behind the dialog and closes it. With nothing chosen the button stays quiet and says "Pick a channel first" when pressed. Reopening the dialog shows what you joined as Selected, and pressing Cancel or Escape leaves it as it was.

Each Join toggle is named for its channel, such as Join #launch-room, and keeps that name when pressed, so it is read as pressed. Tab runs through the search, the toggles, Cancel and Join. The drawings are hidden from assistive technology and a polite status line says what changed once the dialog has closed.

The in-place dialog docks to the foot of the stage with rounded top corners, its body scrolls and its Join button stays pinned in the footer. The real dialog keeps the catalog's phone layout, which sticks to the bottom of the screen. Nothing scrolls sideways, even at 320 px wide.