feat(diff): Add search and extension filter to diff sidebar (#37068)

Adds a search box and a file-extension filter to the pull request diff
sidebar, so reviewers can narrow a large diff down to the files they
care about.

Both filters apply to the file tree and to the diff itself. The
extension menu follows GitHub: extensions sorted alphabetically,
dotfiles and extension-less files in their own buckets, and the
selection kept in the same `file-filters[]` query parameter, so a
filtered view is shareable and survives a reload.

The menu can list every extension in a diff, so `createTippy` gains an
opt-in `limitSizeToViewport` option that caps a popup to the space left
in the viewport and scrolls its content. Popups that do not ask for it
are unchanged.

Closes https://github.com/go-gitea/gitea/issues/27256
Signed-off-by: silverwind <me@silverwind.io>
Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Nicolas <bircni@icloud.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
McMichalK
2026-08-23 18:31:22 +02:00
committed by GitHub
parent 4852091e85
commit 2bcf950b78
28 changed files with 914 additions and 133 deletions
+18
View File
@@ -30,6 +30,24 @@ Gitea's private styles use `g-` prefix.
.interact-bg:hover { background: var(--color-hover) !important; }
.interact-bg:active { background: var(--color-active) !important; }
/* primary-color dot centered on the top-right corner of the element */
.indicator-dot {
position: relative;
}
.indicator-dot::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-primary);
border: 1px solid var(--color-secondary);
transform: translate(50%, -50%);
}
@media (max-width: 767.98px) {
/* double selector so it wins over .tw-flex (old .gt-df) etc */
.not-mobile.not-mobile {
+17 -1
View File
@@ -14,6 +14,18 @@
max-width: calc(100vw - 32px);
}
/* opt-in via createTippy's "limitSizeToViewport" */
[data-tippy-limit-size] .tippy-box {
display: flex;
flex-direction: column;
max-width: var(--tippy-max-width, none);
max-height: var(--tippy-max-height, none);
}
[data-tippy-limit-size] .tippy-content {
overflow: auto;
}
.tippy-box {
position: relative;
background-color: var(--color-menu);
@@ -91,7 +103,7 @@
background: var(--color-hover);
}
.tippy-box[data-theme="menu"] .item:focus {
.tippy-box[data-theme="menu"] .item:focus-visible {
background: var(--color-hover);
}
@@ -99,6 +111,10 @@
background: var(--color-active);
}
.tippy-box[data-theme="menu"] .divider {
margin: 4px 0; /* fit the menu's vertical padding */
}
/* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
.tippy-box[data-theme="box-with-header"] {
+16 -5
View File
@@ -1549,27 +1549,38 @@ tbody.commit-list {
#diff-container {
display: flex;
padding-top: 4px; /* for box-shadow from .diff-file-box */
gap: var(--page-spacing);
}
#diff-file-boxes {
#diff-boxes-column {
flex: 1;
max-width: 100%;
min-width: 0;
}
#diff-file-boxes {
display: flex;
flex-direction: column;
gap: 8px;
}
#diff-file-tree {
flex: 0 0 20%;
max-width: 380px;
flex: 0 0 256px;
min-width: 0;
line-height: inherit;
position: sticky;
padding-top: 0;
top: 47px;
max-height: calc(100vh - 47px);
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
}
@media (min-width: 1201px) {
#diff-file-tree {
flex-basis: 320px;
}
}
.ui.message.unicode-escape-prompt {