feat(blame): add search functionality to blame dialog

This update introduces a search bar to the blame dialog, allowing users to filter blame lines based on their input. The search highlights matching text segments, improving the usability of the blame feature for navigating large files.

- Implemented a search bar for filtering blame lines
- Added visual feedback for matched search terms
- Enhanced overall user experience in the blame dialog
This commit is contained in:
Christoph Brandau
2026-07-08 14:20:51 +02:00
parent de6f497e35
commit c9a93f1d0a
2 changed files with 163 additions and 23 deletions
+45
View File
@@ -3120,6 +3120,45 @@
font-weight: 800;
}
.blame-search-bar {
position: relative;
display: flex;
align-items: center;
min-height: 38px;
padding: 6px 10px;
border-bottom: 1px solid var(--color-border-subtle);
background: #111321;
}
.blame-search-bar svg {
position: absolute;
left: 20px;
color: var(--color-ink-faint);
pointer-events: none;
}
.blame-search-bar input {
width: 100%;
height: 26px;
padding: 0 34px;
border: 1px solid var(--color-border-subtle);
border-radius: 6px;
background: #0b0e18;
color: var(--color-ink);
font-size: 12px;
}
.blame-search-clear {
position: absolute;
right: 14px;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: var(--color-ink-faint);
}
.blame-search-clear svg {
position: static;
}
.blame-column-headers {
grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
}
@@ -3233,6 +3272,12 @@
.blame-group:hover .blame-line-code {
background: #151a2b;
}
.blame-search-hit {
padding: 0 1px;
border-radius: 3px;
background: rgba(240,182,72,0.28);
color: #f3d487;
}
.global-search-body {
display: grid;