refactor: Lazily load file list for tree search and localize no results message.

Author: brymut

services/repository/files/delete.go

@@ -1,8 +1,11 @@
+// Copyright 2025 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
 package files
 
 import (
 	"context"
-	"fmt"
+	"errors"
 
 	repo_model "code.gitea.io/gitea/models/repo"
 	user_model "code.gitea.io/gitea/models/user"
@@ -24,7 +27,7 @@ type DeleteRepoFileOptions struct {
 // DeleteRepoFile deletes a file or directory in the given repository
 func DeleteRepoFile(ctx context.Context, repo *repo_model.Repository, doer *user_model.User, opts *DeleteRepoFileOptions) (*structs.FilesResponse, error) {
 	if opts.TreePath == "" {
-		return nil, fmt.Errorf("path cannot be empty")
+		return nil, errors.New("path cannot be empty")
 	}
 
 	// If no branch name is set, assume the default branch

services/repository/files/delete_test.go

@@ -1,3 +1,6 @@
+// Copyright 2025 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
 package files
 
 import (

templates/repo/view_file_tree.tmpl

@@ -17,4 +17,5 @@
 	data-tree-path="{{$.TreePath}}"
 	data-current-ref-name-sub-url="{{.RefTypeNameSubURL}}"
 	data-tree-list-url="{{.RepoLink}}/tree-list/{{.RefTypeNameSubURL}}"
+	data-no-results-text="{{ctx.Locale.Tr "repo.find_file.no_matching"}}"
 ></div>

web_src/css/repo/file-actions.css

@@ -1,24 +1,19 @@
 /* Repository file actions dropdown */
 .ui.dropdown.repo-add-file > .menu,
 .ui.dropdown.repo-file-actions-dropdown > .menu {
-  margin-top: 4px !important;
+  margin-top: 4px;
 }
 
 .ui.dropdown.repo-file-actions-dropdown > .menu {
   min-width: 200px;
 }
 
-.ui.dropdown.repo-file-actions-dropdown > .menu > .divider {
-  margin: 0.5rem 0;
-}
-
 .ui.dropdown.repo-file-actions-dropdown > .menu > .item.danger,
 .ui.dropdown.repo-file-actions-dropdown > .menu > .item.danger svg {
-  color: var(--color-red) !important;
+  color: var(--color-red);
 }
 
-.ui.dropdown.repo-file-actions-dropdown > .menu > .item.danger:hover,
-.ui.dropdown.repo-file-actions-dropdown > .menu > .item.danger:hover svg {
-  color: var(--color-red) !important;
-  background: var(--color-red-badge-hover-bg) !important;
+.ui.dropdown.repo-file-actions-dropdown > .menu > .item.danger:hover {
+  color: var(--color-red);
+  background: var(--color-red-badge-hover-bg);
 }

web_src/js/components/ViewFileTree.vue

@@ -12,11 +12,14 @@ const searchResults = useTemplateRef('searchResults');
 const searchQuery = ref('');
 const allFiles = ref<string[]>([]);
 const selectedIndex = ref(0);
+const isLoadingFileList = ref(false);
+const hasLoadedFileList = ref(false);
 
 const props = defineProps({
   repoLink: {type: String, required: true},
   treePath: {type: String, required: true},
   currentRefNameSubURL: {type: String, required: true},
+  noResultsText: {type: String, required: true},
 });
 
 const store = createViewFileTreeStore(props);
@@ -26,7 +29,7 @@ const filteredFiles = computed(() => {
   return filterRepoFilesWeighted(allFiles.value, searchQuery.value);
 });
 
-const treeLink = computed(() => `${props.repoLink}/src/${props.currentRefNameSubURL}`);
+const treeLink = computed(() => `${props.repoLink}/src/${pathEscapeSegments(props.currentRefNameSubURL)}`);
 
 let searchInputElement: HTMLInputElement | null = null;
 
@@ -90,19 +93,33 @@ const handleClickOutside = (e: MouseEvent) => {
   }
 };
 
+const loadFileListForSearch = async () => {
+  if (hasLoadedFileList.value || isLoadingFileList.value) return;
+  
+  isLoadingFileList.value = true;
+  try {
+    const treeListUrl = elRoot.value.closest('#view-file-tree')?.getAttribute('data-tree-list-url');
+    if (treeListUrl) {
+      const response = await GET(treeListUrl);
+      allFiles.value = await response.json();
+      hasLoadedFileList.value = true;
+    }
+  } finally {
+    isLoadingFileList.value = false;
+  }
+};
+
+const handleSearchFocus = () => {
+  loadFileListForSearch();
+};
+
 onMounted(async () => {
   store.rootFiles = await store.loadChildren('', props.treePath);
   elRoot.value.closest('.is-loading')?.classList?.remove('is-loading');
   
-  // Load all files for search
-  const treeListUrl = elRoot.value.closest('#view-file-tree')?.getAttribute('data-tree-list-url');
-  if (treeListUrl) {
-    const response = await GET(treeListUrl);
-    allFiles.value = await response.json();
-  }
-  
   searchInputElement = document.querySelector('#file-tree-search');
   if (searchInputElement) {
+    searchInputElement.addEventListener('focus', handleSearchFocus);
     searchInputElement.addEventListener('input', handleSearchInput);
     searchInputElement.addEventListener('keydown', handleKeyDown);
     document.addEventListener('click', handleClickOutside);
@@ -129,6 +146,7 @@ watch(searchQuery, async () => {
 
 onUnmounted(() => {
   if (searchInputElement) {
+    searchInputElement.removeEventListener('focus', handleSearchFocus);
     searchInputElement.removeEventListener('input', handleSearchInput);
     searchInputElement.removeEventListener('keydown', handleKeyDown);
     document.removeEventListener('click', handleClickOutside);
@@ -168,7 +186,7 @@ function handleSearchResultClick(filePath: string) {
         <div class="file-tree-no-results-content">
           <!-- eslint-disable-next-line vue/no-v-html -->
           <span v-html="svg('octicon-search', 24)"/>
-          <span>No matching files found</span>
+          <span>{{ props.noResultsText }}</span>
         </div>
       </div>
     </Teleport>

web_src/js/features/repo-view-file-tree.ts

@@ -33,5 +33,6 @@ export async function initRepoViewFileTree() {
     repoLink: fileTree.getAttribute('data-repo-link'),
     treePath: fileTree.getAttribute('data-tree-path'),
     currentRefNameSubURL: fileTree.getAttribute('data-current-ref-name-sub-url'),
+    noResultsText: fileTree.getAttribute('data-no-results-text'),
   }).mount(fileTree);
 }