This is a continuation of the File Explorer exercises. You should complete the previous File Explorer question before attempting this one.

In the previous exercise, you implemented a nested DOM structure to display files and directories hierarchically.

Another approach is to use a flat list of items, where each item receives the correct amount of padding based on its depth in the hierarchy. This approach allows easier traversal, rendering control, and is more compatible with virtualization in large directories.

Each item in the flat list represents either a file or a directory.
The indentation of each item is determined by its level in the hierarchy.
The current depth should be passed recursively so descendant items know how much padding to render.

Example of a flat list:

<ul>
  <li>docs</li>
  <li style="padding-left: 16px">foo.md</li>
  <li style="padding-left: 16px">bar.md</li>
  <li>README.md</li>
</ul>

Note: Bullets should be hidden (e.g., using list-style: none) to make the items flush left.

Advantages of a Flat List Approach

Easier to traverse programmatically.
Provides better control over rendering and layout.
Compatible with virtualization for large directories (render only visible items).
Used in editors like VS Code, which positions items absolutely and renders only those that are visible.