No Folders Empty State Block for React

The folders live in the page's state: reload and the tree is empty, and Start over empties it without a reload. Nothing is saved or sent. To wire it for real, create the folder with your API where the code says so, add its tile from the response, and load a folder's children when it is opened instead of reading them from the list.

They are the demo's own limits, so the shelf can keep its size and the breadcrumb its single line. At the third level, and in a folder that holds four, New folder stays in the tab order and says why instead of doing nothing. The limits are the two constants at the top of the file; with your own data let the shelf grow and scroll.

The name field takes up to 20 characters. Enter keeps the folder, an empty name or a name that is already used in the folder is refused with a line that says so, and Escape drops the field and puts focus back on New folder. Pressing New folder again while the field is open keeps the name too, which is the same as Enter.

The breadcrumb is a navigation landmark whose last step is the current page, Up and the breadcrumb steps go back, and every tile is a button named for its folder and what it holds, such as Open Design, 2 folders inside. Opening a folder moves focus to the message heading, which names the new place, and going back puts focus on the tile you came from. One polite status line says what changed.

The slots are two across in two rows, the breadcrumb truncates its names instead of wrapping and the message band stacks the drawing above the text, with New folder under it. The page never scrolls sideways, even at 320 px wide.

No. The shelf always has four slots of one height, whether they are dashed, filled or holding the name field, and the status line reserves its lines, so opening a folder or adding one never moves the bands below.