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).
- hover peek behaviour will be added in #569507
- refactor to use container queries based solution https://gitlab.com/gitlab-org/gitlab/-/issues/568122
Technical details
- In the existing
useFileTreeBrowserVisibilitystore:- Add additional state
fileTreeBrowserIsPeekOnand action to update it - Update
fileTreeBrowserVisibletofileTreeBrowserIsExpanded - Add
fileTreeBrowserIsVisiblegetter - Add action to handle toggle click
- Initialize read from localStorage only for wide viewport
- Add additional state
- Add styling to show file tree browser in peek mode
- Add new test util for update state for
useViewportand 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+smbreakpoints combined) -
intermediate screen - 768px - 1199px
md+lgbreakpoints combined) -
wide screen - >= 1200px (
xlbreakpoint)
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
- 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)