Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 35 Wiki Activity

feat(history-panel): add branch visibility modes and richer refs

Browse Source 
Adds branch visibility modes to the history panel and remote branches.
A data model supports commits and refs including local and remote.
UI tweaks add compact ref chips and a new details panel.

- Implement focus/local/all/custom modes for branch visibility
- Introduce CommitBranchDecoration and CommitRefSummary types
- Wire remote branches and ahead/behind data to UI
This commit is contained in:
Christoph Brandau
2026-08-13 15:02:42 +02:00
parent a823aabbb9
commit 608b3131d2
3 changed files with 631 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+226 -139
View File
@@ -292,21 +292,58 @@
align-items: center;
flex: 0 0 auto;
justify-content: flex-end;
gap: 8px;
gap: 5px;
min-width: 0;
}
.graph-visibility-select {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 28px;
padding: 0 7px;
border: 1px solid rgba(94,110,156,0.2);
border-radius: 6px;
color: var(--color-ink-dim);
background: rgba(255,255,255,0.035);
}
.graph-visibility-select > svg:first-child { color: #76d995; }
.graph-visibility-select > svg:last-child { position: absolute; right: 6px; pointer-events: none; }
.graph-visibility-label {
color: var(--color-ink-faint);
font-size: 9px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.graph-visibility-select select {
min-width: 62px;
height: 24px;
padding: 0 18px 0 2px;
border: 0;
outline: 0;
appearance: none;
color: var(--color-ink);
background: transparent;
box-shadow: none;
cursor: pointer;
font-size: 11px;
font-weight: 800;
}
.graph-visibility-select select:focus { box-shadow: none; }
.graph-branch-dialog-button {
display: inline-flex;
align-items: center;
gap: 6px;
gap: 0;
min-height: 26px;
padding: 0 9px;
overflow: hidden;
border: 1px solid rgba(91,209,138,0.24);
border-radius: 999px;
color: #b6f1c4;
background: rgba(34,68,48,0.28);
padding: 0 5px;
border: 1px solid rgba(94,110,156,0.18);
border-radius: 6px;
color: var(--color-ink-dim);
background: rgba(255,255,255,0.03);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
@@ -314,15 +351,16 @@
}
.graph-branch-dialog-button:hover {
border-color: rgba(91,209,138,0.42);
background: rgba(34,68,48,0.42);
border-color: rgba(91,209,138,0.32);
color: var(--color-ink);
background: rgba(34,68,48,0.24);
}
.graph-branch-dialog-button span {
padding: 1px 5px;
border-radius: 999px;
color: #061021;
background: #6ce18f;
padding: 1px 4px;
border-radius: 4px;
color: #9fdcaf;
background: transparent;
font-size: 10px;
line-height: 1.2;
}
@@ -2492,38 +2530,6 @@
font-size: 10.5px;
font-weight: 700;
}
.commit-local-branches {
display: inline-flex;
flex: 0 1 auto;
flex-wrap: wrap;
gap: 3px;
min-width: 0;
max-width: min(100%, 260px);
}
.commit-branch-chip {
display: inline-flex;
align-items: center;
gap: 3px;
min-width: 0;
max-width: 100%;
height: 17px;
padding: 0 6px 0 5px;
overflow: hidden;
border: 1px solid rgba(91,209,138,0.22);
border-radius: 999px;
color: #a8eeba;
background: rgba(34,68,48,0.42);
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 750;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.commit-branch-chip svg {
flex: 0 0 auto;
color: #76d995;
}
.commit-author {
flex: 1 1 80px;
overflow: hidden;
@@ -2531,30 +2537,153 @@
white-space: nowrap;
}
.ref-list { display: flex; flex-wrap: wrap; gap: 3px; }
.ref-list .ref-chip {
max-width: 100%;
.commit-ref-area { display: grid; gap: 5px; min-width: 0; }
.commit-ref-strip {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
min-height: 19px;
}
.compact-ref-chip {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
max-width: min(58%, 230px);
height: 19px;
padding: 0 6px 0 5px;
overflow: hidden;
padding: 1px 6px;
border-radius: 999px;
color: var(--color-accent);
background: rgba(106,154,255,0.09);
border: 1px solid rgba(106,154,255,0.16);
border: 1px solid rgba(91,209,138,0.2);
border-radius: 5px;
color: #a8eeba;
background: rgba(34,68,48,0.3);
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 750;
line-height: 1;
white-space: nowrap;
}
.compact-ref-chip > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.compact-ref-chip.branch > i,
.commit-ref-detail-item > i {
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--ref-lane-color, #69a7ff);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 18%, transparent);
}
.compact-ref-chip.current {
border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 52%, transparent);
color: #eaf2ff;
background: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 16%, rgba(18,24,36,.92));
}
.compact-ref-chip.remote {
border-color: rgba(122,172,255,0.22);
color: #bcd2ff;
background: rgba(31,43,72,0.52);
}
.compact-ref-chip.tag {
flex: 0 1 auto;
border-color: rgba(224,180,92,0.22);
color: #dbc078;
background: rgba(224,180,92,0.075);
}
.compact-ref-chip.tag svg { flex: 0 0 auto; }
.compact-ref-chip small {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 2px;
padding-left: 4px;
border-left: 1px solid rgba(255,255,255,.12);
color: #f0bd6b;
font-family: var(--font-sans);
font-size: 8.5px;
font-weight: 850;
}
.compact-ref-chip small.up-to-date { color: #7de39b; }
.compact-ref-overflow {
flex: 0 0 auto;
min-width: 29px;
min-height: 19px;
height: 19px;
padding: 0 5px;
border-color: rgba(94,110,156,0.2);
border-radius: 5px;
color: var(--color-ink-dim);
background: rgba(255,255,255,0.035);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 800;
}
.compact-ref-overflow:hover:not(:disabled),
.compact-ref-overflow[aria-expanded="true"] {
border-color: rgba(101,162,255,.34);
color: var(--color-ink);
background: rgba(101,162,255,.1);
}
.commit-ref-details {
display: grid;
gap: 7px;
padding: 8px;
border: 1px solid rgba(94,110,156,.2);
border-radius: 7px;
background: rgba(10,14,21,.68);
box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ref-lane-color, #69a7ff) 65%, transparent);
}
.commit-ref-details > strong {
color: var(--color-ink-muted);
font-size: 10px;
font-weight: 800;
}
.commit-ref-details section {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: start;
gap: 7px;
}
.commit-ref-details section > span {
padding-top: 3px;
color: var(--color-ink-faint);
font-size: 8px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.commit-ref-details section > div { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.commit-ref-detail-item {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
min-height: 20px;
padding: 2px 6px;
overflow: hidden;
border: 1px solid rgba(94,110,156,.18);
border-radius: 5px;
color: var(--color-ink-dim);
background: rgba(255,255,255,.025);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.ref-list .ref-chip.head {
color: #061021;
border-color: rgba(65,209,255,0.48);
background: linear-gradient(135deg, #41d1ff, #7c6cff);
box-shadow: 0 0 14px rgba(65,209,255,0.2);
.commit-ref-detail-item.local { color: #a8eeba; border-color: rgba(91,209,138,.18); }
.commit-ref-detail-item.remote { color: #bcd2ff; border-color: rgba(122,172,255,.2); }
.commit-ref-detail-item.tag { color: #dbc078; border-color: rgba(224,180,92,.2); }
.commit-ref-detail-item small {
color: var(--color-ink-faint);
font-family: var(--font-sans);
font-size: 8px;
font-weight: 800;
}
.ref-list .ref-chip.branch { color: #7ddf9c; background: rgba(78,202,118,0.08); border-color: rgba(78,202,118,0.18); }
.ref-list .ref-chip.remote { color: #aeb6ff; background: rgba(124,108,255,0.08); border-color: rgba(124,108,255,0.18); }
.ref-list .ref-chip.tag { color: #dbc078; background: rgba(224,180,92,0.08); border-color: rgba(224,180,92,0.2); }
.commit-files {
display: grid;
@@ -2620,6 +2749,15 @@
background: rgba(65,209,255,0.08);
color: var(--color-ink);
}
.branch-filter-group-label {
padding: 9px 9px 3px;
color: var(--color-ink-faint);
font-size: 9px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.commit-note-button:not(:disabled) { color: color-mix(in srgb, var(--color-accent) 72%, var(--color-ink-dim)); }
/* --- Git graph --- */
@@ -2727,63 +2865,11 @@
border-color: var(--dot-color, #5a8cf8);
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
.graph-hover-branches {
position: absolute;
z-index: 5;
top: 50%;
display: flex;
flex-wrap: wrap;
gap: 3px;
max-width: 190px;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) translateX(-4px);
transition: opacity 120ms ease, transform 120ms ease;
}
.graph-gutter:hover .graph-hover-branches {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.graph-hover-branches span {
display: inline-flex;
align-items: center;
gap: 3px;
max-width: 180px;
height: 18px;
padding: 0 6px 0 5px;
overflow: hidden;
border: 1px solid rgba(91,209,138,0.28);
border-radius: 999px;
color: #b2f0c2;
background: rgba(14,36,27,0.94);
box-shadow: 0 8px 22px rgba(0,0,0,0.24);
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 750;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.graph-hover-branches span.remote,
.branch-filter-option.remote {
border-color: rgba(122,172,255,0.32);
color: #bcd2ff;
background: rgba(31,43,72,0.88);
}
.graph-hover-branches span.ahead {
border-color: rgba(224,160,64,0.42);
color: #ffd99a;
background: rgba(58,42,20,0.94);
}
.graph-hover-branches span.behind {
border-color: rgba(122,172,255,0.46);
color: #c7dbff;
background: rgba(25,39,70,0.94);
}
.graph-hover-branches svg {
flex: 0 0 auto;
color: #76d995;
}
.commit-body {
display: grid;
gap: 5px;
@@ -5656,7 +5742,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
contain-intrinsic-block-size: 108px;
}
.commit-avatar { border-radius: 50%; }
.commit-kind, .commit-branch-chip, .ref-chip { border-radius: 4px !important; }
.commit-kind, .compact-ref-chip { border-radius: 4px !important; }
.workspace-statusbar {
display: flex;
align-items: center;
@@ -5902,46 +5988,47 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
color: #315fd6;
}
:root[data-theme="light"] .commit-branch-chip,
:root[data-theme="light"] .graph-hover-branches span {
:root[data-theme="light"] .compact-ref-chip.branch {
border-color: rgba(31,128,76,0.22);
color: #146b3b;
background: rgba(224,246,233,0.92);
box-shadow: 0 8px 22px rgba(28,44,74,0.12);
}
:root[data-theme="light"] .graph-hover-branches span.remote,
:root[data-theme="light"] .compact-ref-chip.current {
border-color: color-mix(in srgb, var(--ref-lane-color, #315fd6) 48%, rgba(49,95,214,.2));
color: #18345f;
background: color-mix(in srgb, var(--ref-lane-color, #315fd6) 12%, #f7faff);
}
:root[data-theme="light"] .compact-ref-chip.remote,
:root[data-theme="light"] .branch-filter-option.remote {
border-color: rgba(49,95,214,0.22);
color: #315fd6;
background: rgba(231,237,255,0.92);
}
:root[data-theme="light"] .graph-hover-branches span.ahead {
border-color: rgba(150,98,15,0.28);
color: #96620f;
background: rgba(255,244,224,0.95);
:root[data-theme="light"] .compact-ref-chip.tag,
:root[data-theme="light"] .commit-ref-detail-item.tag {
color: #8b5d0e;
background: rgba(255,244,224,.9);
}
:root[data-theme="light"] .graph-hover-branches span.behind {
border-color: rgba(49,95,214,0.26);
color: #315fd6;
background: rgba(231,237,255,0.95);
:root[data-theme="light"] .compact-ref-overflow,
:root[data-theme="light"] .graph-visibility-select,
:root[data-theme="light"] .graph-branch-dialog-button {
color: #475873;
border-color: rgba(49,95,214,.16);
background: rgba(244,247,252,.9);
}
:root[data-theme="light"] .ref-list .ref-chip.head {
color: #ffffff;
background: linear-gradient(135deg, #0f8fb5, #315fd6);
:root[data-theme="light"] .commit-ref-details {
border-color: rgba(49,95,214,.16);
background: rgba(247,249,253,.94);
}
:root[data-theme="light"] .ref-list .ref-chip.branch {
color: #16723b;
background: rgba(78,202,118,0.12);
}
:root[data-theme="light"] .ref-list .ref-chip.remote {
color: #315fd6;
background: rgba(49,95,214,0.09);
:root[data-theme="light"] .commit-ref-detail-item {
color: #475873;
background: #ffffff;
}
:root[data-theme="light"] .commit-files,