Filter by file extension by McMichalK · Pull Request #37068 · go-gitea/gitea

McMichalK · 2026-04-01T09:09:59Z

Add file extension filter for pull request diffs

Introduces a new dropdown filter in the PR diff toolbar that allows reviewers to show/hide files based on their extensions. This helps focus on specific file types during code review (e.g., viewing only .ts files when reviewing TypeScript changes, or hiding .test.js files when reviewing implementation).

Closes: Feature of file filter in PR page #27256

Usage

Open a pull request
Click the filter icon (🔽) in the diff toolbar, next to the commit filter
Select/deselect file extensions to show/hide (files without extensions appear as (no extension))
Use the "Select all" / "Deselect all" buttons for quick toggling
Click "Apply" to update the diff view

How it works

The filter scans all files in the PR diff and extracts their extensions
Files are grouped by extension with a count displayed
Clicking "Apply" adds the .tw-hidden CSS class to non-matching files, instantly hiding them
The button shows a subtle outline indicator when a filter is active
Filter state is ephemeral (resets on page reload) — appropriate for per-PR review sessions

Keyboard Navigation

For users who prefer keyboard navigation:

Arrow Down/Up: Navigate through checkboxes and buttons
Escape: Close the dropdown menu
Space: Toggle checkboxes (native HTML behavior)
Enter: Activate buttons (native HTML behavior)

Technical Details

Vue 3 component (DiffFileExtensionFilter.vue) following the same pattern as the existing commit filter
Event listeners use capture-phase for dropdown compatibility with other elements
All UI uses Tailwind CSS and Fomantic-UI classes consistent with Gitea's design system
Fully accessible with ARIA attributes and semantic HTML
Code passes all linting and formatting checks

Testing

Navigate to any pull request with multiple file types
Click the filter button and verify the extension list appears
Test checkbox toggling and the "Select all"/"Deselect all" buttons
Click "Apply" and verify files are hidden/shown correctly
Verify the button shows a visible outline when filtering is active
Close the dropdown and reopen—checkboxes should reflect current view state
Test keyboard navigation: use arrow keys to navigate, Escape to close

Screenshots

Filter by extension dropdown:

State when files are filtered out:

Note: This implementation uses AI assistance (GitHub Copilot). All code has been reviewed and tested against Gitea's contribution guidelines and passes all linting checks.

There is new button in pull request diff template, which opens dropbox containing list of all unique extensions that the diff contains. List is created with checkmarks that can be checked/unchecked to filter out files with specific extension. There is also "select all" and "deselect all" buttons. To apply the change and filter out the files user have to click on "Apply" button. If any extensions were filtered out, then button which opens the dropbox is outlined to signal some files were filtered out.

…FileExtensionFilter

…Filter

wxiaoguang · 2026-04-01T09:14:27Z

Rewrite it with modern <script setup>.
There is a "loading more" button if the file list exceeds the limit, you need to sync the state after more files are loaded.

bircni · 2026-04-01T10:03:05Z

Can we also move the filter to the left, above the files and also add the search bar?

bircni · 2026-04-01T10:04:17Z

I think the right side is already very full

McMichalK · 2026-04-01T10:32:15Z

Can we also move the filter to the left, above the files and also add the search bar?

My thinking was: there is already one feature filtering the diff - filtering by commits, so I've added similar feature nearby to let user have those side by side.

I think the right side is already very full

Also, as a daily gitea user, which is doing couple PR reviews per day, I do not agree that right side is very crowded right now, because everything is well placed.

I'm open to discussion tho ;)

…ng for loading more files and general code cleaning

…onFilter

McMichalK · 2026-04-01T16:23:52Z

In recent changes I've fixed the code for those issues:

Rewrite it with modern <script setup>.

There is a "loading more" button if the file list exceeds the limit, you need to sync the state after more files are loaded.

And I also added the search box, as suggested. I did not changed the position of the button, waiting for more voices for this change.

bircni · 2026-04-01T18:03:27Z

And I also added the search box, as suggested. I did not changed the position of the button, waiting for more voices for this change.

@silverwind whats your opinion on that?
I would really like to have file sorting above the files not at the right side

bircni

Please do a proper pass over the AI-generated output before requesting review.

bircni · 2026-04-01T18:45:37Z

web_src/js/components/DiffFileExtensionFilter.vue

+ */
+function getExtension(filename: string): string {
+  const lastDot = filename.lastIndexOf('.');
+  if (lastDot === -1 || lastDot === 0) {


Files like .gitignore, .eslintrc, .env all map to '(no extension)', mixing them with files that truly have no extension (e.g., Makefile, Dockerfile). A common convention is to treat the full name as the "extension" for dotfiles, or at minimum use a separate label.

Follow Golang's approach: always include the dot in ext name.

'.zip', '.html', '.env'

web_src/js/components/DiffFileExtensionFilter.vue

bircni · 2026-04-01T18:46:46Z

web_src/js/components/DiffFileExtensionFilter.vue

+/**
+ * Filter extensions based on search query
+ * Matches against extension name (e.g., ".ts", ".go")
+ */


why so many unnecessary docs?

I documented all the functions by default, cause there were no clues about documenting the functions in the guidelines I belive. Is it a problem?

If a function is designed clear enough (clear name, clear arguments, clear logic), it doesn't need to duplicate the comment.

Comments are used to explain more than function name itself and provide more useful information.

But TBH, for this function, even after read the comment, I don't know how it works.

I think you can show some examples: "if searchQuery=.., then return ..., otherwise, return ..."

bircni · 2026-04-01T18:47:25Z

templates/repo/diff/box.tmpl

 			{{template "repo/diff/whitespace_dropdown" .}}
 			{{template "repo/diff/options_dropdown" .}}
 			{{if .PageIsPullFiles}}
+				<div id="diff-extension-filter" data-filter_by_file_extension="{{ctx.Locale.Tr "repo.pulls.filter_by_file_extension"}}" data-select_all="{{ctx.Locale.Tr "repo.pulls.select_all_file_extensions"}}" data-deselect_all="{{ctx.Locale.Tr "repo.pulls.deselect_all_file_extensions"}}" data-apply="{{ctx.Locale.Tr "repo.pulls.apply_file_extension_filter"}}">


data-filter_by_file_extension
mix of _ and -

bircni · 2026-04-01T18:48:39Z

web_src/js/components/DiffFileExtensionFilter.vue

+  select_all: el.getAttribute('data-select_all') ?? 'Select all',
+  deselect_all: el.getAttribute('data-deselect_all') ?? 'Deselect all',
+  apply: el.getAttribute('data-apply') ?? 'Apply',
+  search: el.getAttribute('data-search') ?? 'Search extensions...',


It's just defensive approach to not cause potential TypeScript error, but I do noticed that the other vue component was leaving locale records without defaults.

No need to be too defensive.

If programming error happens, make it exposed as early as possible, no need to hide faults.

bircni · 2026-04-01T18:50:29Z

web_src/js/components/DiffFileExtensionFilter.vue

+function getExtension(filename: string): string {
+  const lastDot = filename.lastIndexOf('.');
+  if (lastDot === -1 || lastDot === 0) {
+    return '(no extension)';


hard coded ?

silverwind · 2026-04-02T00:00:01Z

web_src/js/components/DiffFileExtensionFilter.vue

+                    v-model="ext.checked"
+                  >
+                  <label :for="`ext-filter-${ext.ext}`" class="tw-cursor-pointer">
+                    <span class="tw-font-mono">{{ ext.ext }}</span>


No monospace font in non-code please.

silverwind · 2026-04-02T00:00:14Z

web_src/js/components/DiffFileExtensionFilter.vue

+            </template>
+          </div>
+          <div v-if="filteredExtensions.length === 0" class="tw-py-4 tw-text-center tw-text-text-light-2">
+            {{ locale.no_results ?? 'No extensions found' }}


Need to translate.

silverwind · 2026-04-02T00:01:47Z

web_src/js/components/DiffFileExtensionFilter.vue

+}
+
+onMounted(() => {
+  document.body.addEventListener('click', onBodyClick, true);


Body listener is too broad. Register listener at a closer parent inside the component.

McMichalK · 2026-04-04T23:50:50Z

@silverwind @wxiaoguang @bircni I've made edits based on your comments :)

bircni · 2026-04-05T15:55:01Z

please press on resolve on resolved comments

Excellencedev · 2026-04-05T16:29:25Z

please press on resolve on resolved comments

I think its better to let the maintainer resolve it themselves in case they may not see something as actually fixed

lunny · 2026-04-05T20:40:05Z

stats is not right.

McMichalK · 2026-04-06T12:33:03Z

stats is not right.

@lunny Can you share more details, I see you have 7 files in pull request and extension filter is showing two, so I would like to know which other files were not calculated. Or you have something else in mind?

McMichalK added 7 commits March 31, 2026 08:30

Code cleanup and self review

cf2c438

Fix event listener handling and improve button click behavior in Diff…

f66a78a

…FileExtensionFilter

Small visual fix for buttons in dropdown

d939757

Enhance keyboard navigation and focus management in DiffFileExtension…

402c244

…Filter

code cleaning

55cb58e

Code cleaning, small issues fix

4e79902

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 1, 2026

github-actions bot added modifies/templates This PR modifies the template files modifies/frontend labels Apr 1, 2026

wxiaoguang marked this pull request as draft April 1, 2026 09:14

McMichalK added 6 commits April 1, 2026 14:28

Refactor DiffFileExtensionFilter to use Composition API, added handli…

9aa1e69

…ng for loading more files and general code cleaning

Fix type assertion for element selection in DiffFileExtensionFilter

5560fe6

Update outline color for active filter button in DiffFileExtensionFilter

8f34cb3

Implement search functionality for file extensions in DiffFileExtensi…

86fc0e7

…onFilter

ESLint compliance fix, code cleaning

f377fca

lint-frontend fix

2547f59

McMichalK marked this pull request as ready for review April 1, 2026 16:25

bircni suggested changes Apr 1, 2026

View reviewed changes

GiteaBot added lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Apr 1, 2026

silverwind reviewed Apr 2, 2026

View reviewed changes

code review changes

24d9041

Uh oh!

Conversation

McMichalK commented Apr 1, 2026

Add file extension filter for pull request diffs

Usage

How it works

Keyboard Navigation

Technical Details

Testing

Screenshots

Uh oh!

wxiaoguang commented Apr 1, 2026

Uh oh!

bircni commented Apr 1, 2026

Uh oh!

bircni commented Apr 1, 2026

Uh oh!

McMichalK commented Apr 1, 2026

Uh oh!

McMichalK commented Apr 1, 2026

Uh oh!

bircni commented Apr 1, 2026

Uh oh!

bircni left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

McMichalK commented Apr 4, 2026

Uh oh!

bircni commented Apr 5, 2026

Uh oh!

Excellencedev commented Apr 5, 2026

Uh oh!

lunny commented Apr 5, 2026

Uh oh!

McMichalK commented Apr 6, 2026 • 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!

7 participants

McMichalK commented Apr 6, 2026 •

edited

Loading