Add Search, move Add/Upload File, delete directory & "copy path" functionality to the repo's tree view UI #35911

brymut · 2025-11-10T08:49:31Z

Summary of key changes:

Add search functionality to tree view
Add backend functionality to delete directory
Add context menu for directories with functionality to copy path & delete a directory
Move Add/Upload file dropdown to right for parity with Github UI
Add tree view to the edit/upload & patch UI
Remove redundant repo name from Apply Patch breadcrumb UI

Detailed breakdown:

1. Add search functionality to tree view

Added search to tree view using existing searchfilterRepoFilesWeighted, with new modal to display the search results. User can navigate through search results using keyboard to scroll, select and escape the search on top of using mouse. No matches found notice when no results are found.

Screen.Recording.2025-11-11.at.09.51.16.mov

2. Add backend functionality to delete directory

Modified the DeleteFilePost endpoint to also allow for deletion of whole directories to support the "Delete directory" menu option added to the context menu.

3. Add context menu for directories with functionality to copy path & delete a directory

Added context menu for "Copy path", "Copy Permalink" & "Delete directory" supported by backend change listed above.

Screen.Recording.2025-11-11.at.10.10.41.mov

4. Move Add/Upload file dropdown to right for parity with Github UI

Minor change to move this option to the right since already existed.

5. Add tree view to the edit/upload & patch UI

lunny · 2025-11-11T19:24:56Z

When creating a new file, it currently redirects to the classic “new file” page. Instead, it should open an inline editor similar to GitHub’s implementation, keeping the left tree view visible. The same behavior should apply to Upload Files and Apply Patch actions.
There is no way to add a new file for the root directory in the tree view UI.

brymut · 2025-11-12T09:07:27Z

2. There is no way to add a new file for the root directory in the tree view UI.

You can do so in the main repo page in the code tab, same as to how its done on Github. Since I'm not aware of a way to view the root directory except for in the main repo page on the code tab (same on Github). Or perhaps I'm not understanding what you mean.

brymut · 2025-11-12T10:11:56Z

When creating a new file, it currently redirects to the classic “new file” page. Instead, it should open an inline editor similar to GitHub’s implementation, keeping the left tree view visible. The same behavior should apply to Upload Files and Apply Patch actions.

Added

lunny · 2025-11-12T19:02:47Z

It seems there is a bug that the icon to show/hide tree view will always be hidden.

And maybe the commit box should be move to up right corner like what github did after the tree view introduced to the editor page.

brymut · 2025-11-13T11:12:41Z

It seems there is a bug that the icon to show/hide tree view will always be hidden.

Fixed

And maybe the commit box should be move to up right corner like what github did after the tree view introduced to the editor page.

Moved. Should be more like Github's UX now:

Screen.Recording.2025-11-13.at.14.04.46.mov

lunny · 2025-11-13T17:03:55Z

Great work!

It seems the Delete File UI needs some improvements? The close button in the top-right corner doesn’t seem to work either. Perhaps converting this into a popup dialog would provide a better experience than open in a new page.
The Apply Patch UI seems to need some improvements. There are two “Cancel” buttons and the repository name appears twice. I don’t think this issue is caused by this PR, but since it’s related, it would be better to address them together.

Creating a new file under the root folder is inconvenient because I have to return to the repository’s home page each time. I understand this behavior is inherited from GitHub, but it doesn’t seem like the best design. Could you also add buttons for Create File / Upload File / Apply Patch directly in the file view, so that new items can be created under the same folder as the currently viewed file?

wxiaoguang · 2025-11-18T10:00:36Z

Performance problem, on every page view (onMounted), the file list is loaded by const response = await GET(treeListUrl);
- This request is quite heavy and slow
- In most cases, users don't use the file list and don't need it

silverwind · 2025-11-18T20:40:19Z

web_src/js/components/ViewFileTree.vue

+  return filterRepoFilesWeighted(allFiles.value, searchQuery.value);
+});
+
+const treeLink = computed(() => `${props.repoLink}/src/${props.currentRefNameSubURL}`);


Suggested change

const treeLink = computed(() => `${props.repoLink}/src/${props.currentRefNameSubURL}`);

const treeLink = computed(() => `${props.repoLink}/src/${encodeURIComponent(props.currentRefNameSubURL)}`);

Good practice in case thise string contains url-unsafe characters. Will only work if this does not contain slashes, in which case disregard this suggestion.

Not encodeURIComponent, it needs path segment escaping

Right, we have the pathEscapeSegments function for that.

silverwind · 2025-11-18T20:42:22Z

web_src/js/components/ViewFileTree.vue

+      const rect = searchInputElement.getBoundingClientRect();
+      resultsEl.style.top = `${rect.bottom + 4}px`;
+      resultsEl.style.left = `${rect.left}px`;
+    }


Can this be solved with static tw- classes? Inline styles are problematic because they require CSP style-src: unsafe-inline, so we want to get rid of all of them.

https://v3.tailwindcss.com/docs/top-right-bottom-left

because they require CSP style-src: unsafe-inline

I think we have discussed before, el.style doesn't conflict with any CSP?

(In most cases, modifying the style attribute should be avoided if it can, but it isn't related to CSP)

I think accessing the style attribute in JS after page render may also trigger a CSP error, but needs to be tested.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy#unsafe-inline

I think we are just repeating the history, last time I also showed you the screenshot.

From another perspective, if "style" property is blocked, how can developers show a floating absolutely positioned dialog? How to make a color-picker to use colors freely? DOM standard is designed well and won't make unusable designs.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src

silverwind · 2025-11-18T20:45:20Z

web_src/js/components/ViewFileTree.vue

+        <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>


I'm afraid we need to translate this, so you need to pass down a translation string via data- attributes.

brymut · 2025-11-20T08:31:42Z

duplicate code like "repo-view-file-tree-container + repo-view-file-tree-toggle-show" doesn't look good to me

Not quite sure how to address this, that's the current usage for toggling the file tree visibility before this PR.

if the "go to file" list is shown on the file list page, then should the legacy "go to file" page be removed?

I think still fairly useful for the main repo page in the code tab since there's no tree view there and wouldn't make sense to add it there. And the same backend too. So personally no need to cut it loose just yet.

Could you please have another look @wxiaoguang / @silverwind , I think I've addressed feedback.

wxiaoguang · 2025-11-20T11:32:56Z

making "ViewFileTree.vue" manage an element #file-tree-search which doesn't belong to it looks fragile
* then `Teleport` is used to move the element, then nothing really belongs to the ViewFileTree?

I don't think the "file list" code should be in ViewFileTree, don't see any relation between them.

brymut · 2025-11-20T15:16:54Z

I don't think the "file list" code should be in ViewFileTree, don't see any relation between them.

Sorry about that, I thought I had pushed my refactor of that. Updated.

wxiaoguang · 2025-11-20T17:30:24Z

Can you do one more round review by yourself https://github.com/go-gitea/gitea/pull/35911/files? Just like you review other's code, I think you can find more potential improvements.

At least, some unrelated changes should be reverted, for example:

…r search

…ove editor.

…iew and apply patch ui improvements.

…vice with testing

…ts message.

…ew component.

brymut · 2025-11-21T14:29:59Z

Rebased and had a look again with fresh eyes today. Debounced the search input and fixed an issue with scrolling while searching that I noticed. I've had a look through the changed lines and unless I've developed a blindspot to something in this PR I'm happy to sign off on it as is @wxiaoguang.

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Nov 10, 2025

github-actions bot added modifies/templates This PR modifies the template files modifies/frontend labels Nov 10, 2025

algora-pbc bot added the 🙋 Bounty claim label Nov 10, 2025

algora-pbc bot mentioned this pull request Nov 10, 2025

Feat Request: Add Search, move Add/Upload File, delete directory & "copy path" functionality to the repo's tree view UI #35898

Open

brymut changed the title ~~Add Search, Add/Upload File, delete directory & "copy path" functionality to the repo's tree view UI~~ Add Search, move Add/Upload File, delete directory & "copy path" functionality to the repo's tree view UI Nov 10, 2025

brymut force-pushed the feat-enhance-tree-view branch from 3452673 to 1cf0812 Compare November 10, 2025 09:58

github-actions bot added the modifies/translation label Nov 10, 2025

brymut force-pushed the feat-enhance-tree-view branch 3 times, most recently from ca8791e to 457f17f Compare November 11, 2025 03:59

github-actions bot added the modifies/go Pull requests that update Go code label Nov 11, 2025

brymut force-pushed the feat-enhance-tree-view branch 3 times, most recently from f169aa3 to 809a645 Compare November 11, 2025 07:15

brymut marked this pull request as ready for review November 11, 2025 07:20

lunny added this to the 1.26.0 milestone Nov 11, 2025

brymut force-pushed the feat-enhance-tree-view branch from 809a645 to 0adcc74 Compare November 12, 2025 10:10

brymut force-pushed the feat-enhance-tree-view branch 6 times, most recently from 4540d07 to 57782c3 Compare November 13, 2025 11:04

silverwind reviewed Nov 18, 2025

View reviewed changes

brymut force-pushed the feat-enhance-tree-view branch from 809d088 to d23fff3 Compare November 20, 2025 11:26

brymut requested review from silverwind and wxiaoguang November 20, 2025 11:27

brymut force-pushed the feat-enhance-tree-view branch 4 times, most recently from 7d4a08c to 765fff3 Compare November 21, 2025 14:21

brymut added 13 commits November 21, 2025 17:23

feat(repo): Add file search functionality to repository file tree

b3fb0c3

feat(repo): add tree view context menu actions

c7120de

enhance(repo): fix overflow and scrolling on search results in sideba…

34e73a1

…r search

feat(repo): enable delete directory

0205f4c

feat(repo): Added tree view to adding new file(s) view.

541313b

enhance(repo): move commit_form to modal and commit action buttons ab…

3bdb2ba

…ove editor.

enhance(repo): move delete to modal, add files to directory in file v…

15eec6f

…iew and apply patch ui improvements.

fix: use fomanticQuery instead of jquery

dc7febe

rollback modal changes

96bf745

refactor(Repo): extract directory deletion logic into a dedicated ser…

1ed8c77

…vice with testing

refactor: Lazily load file list for tree search and localize no resul…

d359a16

…ts message.

refactor: Extract file search logic and UI from ViewFileTree into a n…

645c5d6

…ew component.

enhance: debounced input and search result scroll positioning.

140c8cf

brymut force-pushed the feat-enhance-tree-view branch from 765fff3 to 140c8cf Compare November 21, 2025 14:24

	const treeLink = computed(() => `${props.repoLink}/src/${props.currentRefNameSubURL}`);
	const treeLink = computed(() => `${props.repoLink}/src/${encodeURIComponent(props.currentRefNameSubURL)}`);

Uh oh!

Add Search, move Add/Upload File, delete directory & "copy path" functionality to the repo's tree view UI #35911

Are you sure you want to change the base?

Add Search, move Add/Upload File, delete directory & "copy path" functionality to the repo's tree view UI #35911

Conversation

brymut commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of key changes:

Detailed breakdown:

Uh oh!

lunny commented Nov 11, 2025

Uh oh!

brymut commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brymut commented Nov 12, 2025

Uh oh!

lunny commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brymut commented Nov 13, 2025

Uh oh!

lunny commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Nov 18, 2025

Uh oh!

silverwind Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wxiaoguang Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

silverwind Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

silverwind Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wxiaoguang Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

silverwind Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wxiaoguang Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

silverwind Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

brymut commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Nov 20, 2025

Uh oh!

brymut commented Nov 20, 2025

Uh oh!

wxiaoguang commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brymut commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

brymut commented Nov 10, 2025 •

edited

Loading

brymut commented Nov 12, 2025 •

edited

Loading

lunny commented Nov 12, 2025 •

edited

Loading

lunny commented Nov 13, 2025 •

edited

Loading

silverwind Nov 18, 2025 •

edited

Loading

silverwind Nov 18, 2025 •

edited

Loading

wxiaoguang Nov 18, 2025 •

edited

Loading

silverwind Nov 19, 2025 •

edited

Loading

wxiaoguang Nov 19, 2025 •

edited

Loading

brymut commented Nov 20, 2025 •

edited

Loading

wxiaoguang commented Nov 20, 2025 •

edited

Loading

brymut commented Nov 21, 2025 •

edited

Loading