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

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

I think the right side is already very full

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 ;)

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

1. Rewrite it with modern <script setup>.
2. 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.

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

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

please press on resolve on resolved comments

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

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?

Ok guys, @wxiaoguang @bircni @silverwind please let me know if there is anything else for me to fix and what are next steps toward merging this branch.

I still want the search button on the left

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?

Yes. There are 7 files in total, all of them .yml or .md files, but the filter only shows 2 files.

Review

Bugs

1. getExtension operates on full path, not basename — data-new-filename contains relative paths like web_src/js/features/repo-diff.ts. The function uses lastIndexOf('.') on the full path. For a file like v2.0/Makefile, it would extract .0/Makefile as the "extension". Need to extract the basename first:

   const basename = filename.substring(filename.lastIndexOf('/') + 1);

2. Missing data-search locale string — The search input uses locale.search as placeholder, but no data-search attribute is defined in box.tmpl and no locale key exists in locale_en-US.json. The placeholder will be missing.

Design issues

3. Explicit "Apply" button is unusual UX — Every other filter/dropdown in Gitea applies immediately on change. Having to click "Apply" is an extra step that feels out of place. Consider applying on close or on each checkbox toggle.

4. aria-expanded is on the wrong element — It should be on the trigger button, not the menu panel. The menu should have role="menu".

5. v-cloak is unnecessary — This is a Vue 2 pattern for hiding un-compiled templates. With Vue 3's <script setup> and the component being mounted by createApp, the template is already compiled before DOM insertion.

6. Backdrop div for click-outside — Using a full-screen invisible div is heavyweight. A capture-phase document click listener checking el.contains(event.target) is simpler and doesn't interfere with other click handlers or z-index stacking.

Nits

7. Data attribute naming inconsistency — data-filter_by_file_extension uses underscores while all others use hyphens. Should be data-filter-by-file-extension.

8. Excessive JSDoc comments — Functions like selectAll, deselectAll, applyFilter are self-explanatory. The block comment on onKeyDown restates what the code does. Remove docs that don't add value beyond the function name.

9. v-if + v-for on same level — The v-if="filteredExtensions.length > 0" wrapping div and the v-for template could be simplified — v-for on an empty array already renders nothing.

This comment was written by Claude Opus 4.6.