Add file tree browser toggle functionality
What does this MR do and why?
This is part of a bigger effort to implement a file tree browser (FTB) in the repository. This MR:
- adds a toggle button to show/hide the file tree browser
- button appears in two places: in the main header area when the file tree is hidden, and within the file tree itself when it's visible
- create a new global
piniastore that remembers whether the file tree should be visible or hidden, saving this preference in the browser's local storage so it persists between sessions - hide the file tree on narrow screens (like mobile devices) but show it by default on wider screens
Also update to always show the header "Files".
References
Implementation Plan
| Task | MR |
|---|---|
| Add toggle component |
|
| Hide toggle on narrow screens (<lg) |
|
Add logic to support md breakpoint in useViewport
|
follow up |
Auto-collapse it on md-xl viewpoints and show in a panel |
follow up |
Screenshots or screen recordings
| Project overview | ![]() |
| Expanded | ![]() |
| Collapsed | ![]() |
| Narrow screen | ![]() |
How to set up and validate locally
- Enable the
repository_file_tree_browserflag - Navigate to either the repository blob viewer or tree list
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #541102 (closed)
Edited by Chaoyue Zhao



