## Problem The File Tree Browser (FTB) components have been growing and we should start looking into how we can split them before they become harder to maintain. The main `tree_list.vue` component now starts its template at line 363, indicating it's getting bigger and would benefit from being split into smaller, more focused components. Context: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/210274#note_2853919984 ## Current State - `app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue` is starting to grow with the template beginning at line 363 - Several utility functions are embedded within components that could be extracted - Mixed responsibilities within single components ## Proposed Refactoring ### Extract Filter Bar Component The filter functionality could be moved to a dedicated component to improve separation of concerns. ### Extract Utility Functions Several functions in `tree_list.vue` could be moved to utility modules: - `isCurrentPath(path)` - Compares a path with the current route path - `getDirectoryContents(path)` - Simple getter that returns cached directory contents - `shouldRenderShowMore(itemPath, parentPath)` - Determines if "show more" should be rendered based on pagination state - `siblingInfo(item)` - Calculates sibling information for accessibility attributes - `filterInputTooltipTarget()` - Returns the filter input element reference - `processDirectories({ trees, path, level })` - Transforms tree data into list items - `processFiles({ blobs, path, level })` - Transforms blob data into list items - `processSubmodules({ submodules, path, level })` - Transforms submodule data into list items ### Extract Popover Component In `file_tree_browser_toggle.vue`, the popover functionality could be moved to a dedicated component for better reusability. ## Benefits - **Improved maintainability**: Smaller, focused components are easier to understand and modify - **Better developer experience**: Future work on FTB features will be easier with a cleaner codebase - **Enhanced reusability**: Extracted utilities and components can be reused across the codebase ## Acceptance Criteria - [ ] Extract filter bar into a separate component - [ ] Move utility functions to appropriate utility modules - [ ] Extract popover functionality from `file_tree_browser_toggle.vue` - [ ] Ensure all existing functionality remains intact - [ ] Update tests to cover the new component structure ## Priority This refactoring should be completed before the FTB rollout to ensure we maintain a good developer experience as the feature continues to evolve. Related to !210274