feat(git): add commit-note support and previews in history
This change adds Git notes support to the history UI. Commits now carry a has_note flag which triggers a note indicator. Notes can be previewed on hover and loaded on demand, then the history can be refreshed after edits. - Adds has_note support on commits and parses from logs. - Renders a note indicator in history rows with a hover preview. - Triggers history refresh after note-related actions.
This commit is contained in:
Christoph Brandau
Notes:
Christoph Brandau
2026-08-13 22:56:29 +02:00
one more test
+156
@@ -2542,6 +2542,107 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.commit-note-indicator {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.commit-note-presence {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
min-height: 18px;
|
||||
padding: 1px 5px 1px 4px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
color: #dcb96c;
|
||||
background: linear-gradient(90deg, rgba(216, 167, 74, 0.11), rgba(216, 167, 74, 0.045));
|
||||
box-shadow: inset 0 -1px 0 rgba(216, 167, 74, 0.22);
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.015em;
|
||||
}
|
||||
.commit-note-presence:hover:not(:disabled) {
|
||||
border-color: rgba(216, 167, 74, 0.24);
|
||||
color: #efd08a;
|
||||
background: linear-gradient(90deg, rgba(216, 167, 74, 0.17), rgba(216, 167, 74, 0.075));
|
||||
}
|
||||
.commit-note-presence:focus-visible {
|
||||
outline: 2px solid rgba(216, 167, 74, 0.32);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.commit-note-tooltip {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
top: calc(100% + 7px);
|
||||
right: 0;
|
||||
display: grid;
|
||||
width: min(270px, calc(100vw - 36px));
|
||||
padding: 9px 10px 10px;
|
||||
border: 1px solid color-mix(in srgb, #d8a74a 24%, var(--color-border));
|
||||
border-radius: 7px;
|
||||
color: var(--color-ink-muted);
|
||||
background: color-mix(in srgb, #d8a74a 4%, var(--color-surface-solid));
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 2px 0 0 rgba(216, 167, 74, 0.5);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(-3px);
|
||||
visibility: hidden;
|
||||
transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
|
||||
}
|
||||
.commit-note-tooltip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 12px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-top: 1px solid color-mix(in srgb, #d8a74a 24%, var(--color-border));
|
||||
border-left: 1px solid color-mix(in srgb, #d8a74a 24%, var(--color-border));
|
||||
background: color-mix(in srgb, #d8a74a 4%, var(--color-surface-solid));
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.commit-note-indicator:hover,
|
||||
.commit-note-indicator:focus-within { z-index: 40; }
|
||||
.commit-note-indicator:hover .commit-note-tooltip,
|
||||
.commit-note-indicator:focus-within .commit-note-tooltip {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
}
|
||||
.commit-note-tooltip-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
color: #dcb96c;
|
||||
font-size: 9px;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.commit-note-tooltip-head small {
|
||||
margin-left: auto;
|
||||
color: var(--color-ink-faint);
|
||||
font-size: 8px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
.commit-note-tooltip-body {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
padding-top: 7px;
|
||||
color: var(--color-ink-muted);
|
||||
font-size: 10.5px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 7;
|
||||
}
|
||||
|
||||
.commit-ref-area {
|
||||
position: relative;
|
||||
@@ -5985,6 +6086,29 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
}
|
||||
.graph-row + .graph-row .commit-body { border-top: 1px solid var(--color-border-subtle); }
|
||||
.graph-row:hover .commit-body { background: var(--color-surface-hover); }
|
||||
.commit-note-rail {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: #d8a74a;
|
||||
box-shadow: 0 0 8px rgba(216, 167, 74, 0.16);
|
||||
opacity: 0.68;
|
||||
pointer-events: none;
|
||||
}
|
||||
.graph-row.has-note .commit-body {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(216, 167, 74, 0.075), rgba(216, 167, 74, 0.025) 36%, transparent 68%),
|
||||
color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-solid));
|
||||
}
|
||||
.graph-row.has-note:hover .commit-body {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(216, 167, 74, 0.105), rgba(216, 167, 74, 0.035) 36%, transparent 68%),
|
||||
var(--color-surface-hover);
|
||||
}
|
||||
.graph-row {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-block-size: 108px;
|
||||
@@ -6219,6 +6343,38 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
background: rgba(235,241,250,0.9);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .graph-row.has-note .commit-body {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(194, 132, 35, 0.09), rgba(194, 132, 35, 0.025) 38%, transparent 68%),
|
||||
rgba(255,255,255,0.76);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .graph-row.has-note:hover .commit-body {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(194, 132, 35, 0.12), rgba(194, 132, 35, 0.035) 38%, transparent 68%),
|
||||
rgba(235,241,250,0.92);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .commit-note-presence {
|
||||
border-color: transparent;
|
||||
color: #986313;
|
||||
background: linear-gradient(90deg, rgba(194, 132, 35, 0.12), rgba(194, 132, 35, 0.05));
|
||||
box-shadow: inset 0 -1px 0 rgba(168, 105, 16, 0.2);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .commit-note-tooltip,
|
||||
:root[data-theme="light"] .commit-note-tooltip::before {
|
||||
background: color-mix(in srgb, #c28423 4%, #ffffff);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .commit-note-tooltip {
|
||||
box-shadow: 0 12px 30px rgba(35, 45, 68, 0.16), inset 2px 0 0 rgba(194, 132, 35, 0.48);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .commit-note-tooltip-head {
|
||||
color: #986313;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .graph-row.merge-row .commit-body {
|
||||
background: rgba(248,244,252,0.82);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user