Skip to content

Add peek mode for file tree browser on intermediate screen

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 specifically adds peek mode for file tree browser on intermediate screen.

We've previously, added the expand/collapse for wide screen !199190 (merged) and hide it for compact screen !203934 (merged).

⚠️ , the desired behaviour of this feature will be heavily impacted by the ongoing Project Studio work. So the following list of work will be done in follow ups:

Technical details

  • In the existing useFileTreeBrowserVisibility store:
    • Add additional state fileTreeBrowserIsPeekOn and action to update it
    • Update fileTreeBrowserVisible to fileTreeBrowserIsExpanded
    • Add fileTreeBrowserIsVisible getter
    • Add action to handle toggle click
    • Initialize read from localStorage only for wide viewport
  • Add styling to show file tree browser in peek mode
  • Add new test util for update state for useViewport and adjust current usage

References

See #541102 (comment 2713697785) for discussions on requirements. TLDR, we want to follow the pattern for super sidebar.

Terminology

  • compact screen - < 768px xs + sm breakpoints combined)
  • intermediate screen - 768px - 1199px md + lg breakpoints combined)
  • wide screen - >= 1200px (xl breakpoint)

Screenshots or screen recordings

OPTIONAL: For responsive UI changes, you can use the viewport size table below. Delete this table if not needed or delete rows that are not relevant to your changes.

Viewport size
intermediate CleanShot 2025-09-16 at 17.21.24.mp4
wide CleanShot 2025-09-16 at 17.26.01.mp4

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