File Tree Explorer

About this component

A nested set of <ul>/<li> elements with onClick toggles looks like a file tree but has none of the keyboard behavior people expect from one — a real tree view uses roving tabindex, where only one row is ever a Tab stop and arrow keys move a virtual cursor between rows, exactly like VS Code's sidebar or a native OS file picker. Implementing that means flattening the nested Node structure into a visible-rows array every render (skipping any subtree whose parent folder isn't in the expanded set), tracking a single activeIndex against that flattened array, and syncing DOM focus to it from an effect. The non-obvious detail is ArrowLeft on a file: it has to walk backward through the flattened rows looking for the nearest row at a shallower depth, since the parent isn't stored on the node itself — the flattened list is the only place that relationship is recoverable. Caveat: this hand-rolled version doesn't virtualize, so a tree with thousands of expanded rows will re-flatten and re-render the whole visible set on every toggle; for that scale, pair the same expanded-Set logic with a virtualizer.