Skip to content

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 pinia store 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 ⬅️ this MR
Hide toggle on narrow screens (<lg) ⬅️ this MR
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 CleanShot 2025-07-29 at 13.53.05.png
Expanded CleanShot 2025-07-29 at 13.53.30.png
Collapsed CleanShot 2025-07-29 at 13.53.44.png
Narrow screen CleanShot 2025-07-29 at 14.06.38.png

How to set up and validate locally

  1. Enable the repository_file_tree_browser flag
  2. 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

Merge request reports

Loading