Category Setup Onboarding Block for React

As one flat list of categories, each with an id, a name and the parent it sits under (an empty string for the top level). The tree's nodes, the drawn sidebar and every count are worked out from that list by small helpers for each level, so there are no recursive components or types, which is what keeps the block portable to Vue, Svelte and Solid. The tree goes three levels deep (DEPTH); a fourth is refused in words. Reordering swaps a category with its next or previous sibling in the list and its topics follow, because they refer to it by parent.

An empty name, one over 32 characters, a name that already exists under the same parent (ignoring capitals), a fourth level, a 25th category, moving the first category up or the last one down, and renaming to the same name. Each says why in the line above the edit buttons, which is always reserved so nothing moves, and focus goes to the control that needs fixing.

Each add, rename, move and delete keeps the list and the pick as they were. Undo, which is always on the screen and quiet while there is nothing to undo, puts back the last one and the status says what was undone (“Undid deleting.”), so a deleted category with its topics can be recovered one step at a time. Save categories and Discard work on the whole list, not on single steps.

The tree is one tab stop: the arrow keys walk it and open and close its branches, Home and End jump, and the picked category follows. Rename, Add, the three actions and Undo follow in the tab order; Enter in the name field renames and Enter in the add field adds, without sending the whole form.

Everything: the categories live in the tab and Save categories only says they were kept in this demo. In your app save the list on your server where submit says so, keep the same parent links, and check the rules again on the server (the screen only checks what it shows).

The drawn sidebar is dropped (the count above the tree stays), the tree keeps its frame, the two fields stack, and the foot pins to the bottom of the screen with Discard and Save categories side by side.