feat(history-panel): add branch visibility modes and richer refs
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
@@ -4929,8 +4929,11 @@
|
||||
{commits}
|
||||
{selectedCommitHash}
|
||||
{localBranchNames}
|
||||
remoteBranchNames={remoteBranches.map((branch) => branch.name)}
|
||||
activeBranch={status?.current_branch ?? ""}
|
||||
activeUpstream={status?.upstream ?? ""}
|
||||
activeAhead={status?.ahead ?? 0}
|
||||
activeBehind={status?.behind ?? 0}
|
||||
repositoryKey={activeRepoPath}
|
||||
{hasRepository}
|
||||
{isBusy}
|
||||
|
||||
+226
-139
@@ -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,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Cherry, ChevronDown, ChevronRight, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, X } from "@lucide/svelte";
|
||||
import { Check, Cherry, ChevronDown, ChevronRight, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
|
||||
import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";
|
||||
|
||||
interface GraphSegment {
|
||||
@@ -22,11 +22,32 @@
|
||||
graphCommit: GitCommit;
|
||||
}
|
||||
|
||||
type BranchVisibilityMode = "focus" | "local" | "all" | "custom";
|
||||
type CommitRefKind = "local" | "remote" | "head";
|
||||
|
||||
interface CommitBranchDecoration {
|
||||
label: string;
|
||||
kind: CommitRefKind;
|
||||
current: boolean;
|
||||
trackedRemote: string;
|
||||
representedBranches: string[];
|
||||
}
|
||||
|
||||
interface CommitRefSummary {
|
||||
branches: CommitBranchDecoration[];
|
||||
tags: string[];
|
||||
other: string[];
|
||||
primaryBranch: CommitBranchDecoration | null;
|
||||
primaryTag: string;
|
||||
overflowCount: number;
|
||||
}
|
||||
|
||||
const GRAPH_COLORS = [
|
||||
"#69a7ff", "#5bd18a", "#d8a74a", "#ba82ff",
|
||||
"#ff7c9f", "#48c7d8", "#c5cf54", "#e18c55",
|
||||
];
|
||||
const GRAPH_LANE = 18;
|
||||
const GRAPH_VISIBILITY_STORAGE_PREFIX = "gitlite.graphVisibility.v1:";
|
||||
const commitDateFormatter = new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
@@ -35,8 +56,11 @@
|
||||
interface Props {
|
||||
commits: GitCommit[];
|
||||
localBranchNames: string[];
|
||||
remoteBranchNames: string[];
|
||||
activeBranch: string;
|
||||
activeUpstream: string;
|
||||
activeAhead: number;
|
||||
activeBehind: number;
|
||||
repositoryKey: string;
|
||||
hasRepository: boolean;
|
||||
isBusy: boolean;
|
||||
@@ -59,8 +83,11 @@
|
||||
let {
|
||||
commits = [],
|
||||
localBranchNames = [],
|
||||
remoteBranchNames = [],
|
||||
activeBranch = "",
|
||||
activeUpstream = "",
|
||||
activeAhead = 0,
|
||||
activeBehind = 0,
|
||||
repositoryKey = "",
|
||||
hasRepository = false,
|
||||
isBusy = false,
|
||||
@@ -80,10 +107,11 @@
|
||||
onSelectCommit = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let hiddenGraphBranches = $state<Set<string>>(new Set());
|
||||
let branchVisibilityMode = $state<BranchVisibilityMode>("focus");
|
||||
let customVisibleBranches = $state<Set<string>>(new Set());
|
||||
let loadedVisibilityRepository = $state("");
|
||||
let branchDialogOpen = $state(false);
|
||||
let userAdjustedBranchFilter = $state(false);
|
||||
let lastDefaultFilterKey = $state("");
|
||||
let expandedRefsCommitHash = $state("");
|
||||
let panelElement = $state<HTMLElement | null>(null);
|
||||
let contextCommit = $state<GitCommit | null>(null);
|
||||
let contextMenuX = $state(0);
|
||||
@@ -232,39 +260,40 @@
|
||||
}
|
||||
|
||||
let localBranchNameSet = $derived(new Set(localBranchNames));
|
||||
let remoteBranchNameSet = $derived(new Set(remoteBranchNames));
|
||||
|
||||
function uniqueStrings(values: string[]): string[] {
|
||||
return [...new Set(values.filter(Boolean))];
|
||||
}
|
||||
|
||||
let graphBranchNames = $derived(uniqueStrings([...localBranchNames, activeUpstream].filter(Boolean)));
|
||||
let graphBranchNames = $derived(uniqueStrings([...localBranchNames, ...remoteBranchNames, activeUpstream].filter(Boolean)));
|
||||
let graphBranchNameSet = $derived(new Set(graphBranchNames));
|
||||
|
||||
function focusBranchNames(): string[] {
|
||||
const focused = uniqueStrings([activeBranch, activeUpstream].filter((branch) => graphBranchNameSet.has(branch)));
|
||||
if (focused.length > 0) return focused;
|
||||
return localBranchNames[0] ? [localBranchNames[0]] : graphBranchNames.slice(0, 1);
|
||||
}
|
||||
|
||||
function branchNamesForMode(): string[] {
|
||||
if (branchVisibilityMode === "focus") return focusBranchNames();
|
||||
if (branchVisibilityMode === "local") return localBranchNames;
|
||||
if (branchVisibilityMode === "all") return graphBranchNames;
|
||||
return graphBranchNames.filter((branch) => customVisibleBranches.has(branch));
|
||||
}
|
||||
|
||||
let visibleGraphBranchNames = $derived(branchNamesForMode());
|
||||
let visibleGraphBranchNameSet = $derived(new Set(visibleGraphBranchNames));
|
||||
|
||||
function branchIsVisible(branch: string): boolean {
|
||||
if (branch === activeUpstream && activeUpstream) {
|
||||
return !activeBranch || !hiddenGraphBranches.has(activeBranch);
|
||||
}
|
||||
return !hiddenGraphBranches.has(branch);
|
||||
}
|
||||
|
||||
function visibleBranchLabels(labels: string[]): string[] {
|
||||
return labels.filter(branchIsVisible);
|
||||
}
|
||||
|
||||
function commitHoverBranchLabels(commit: GitCommit, row: GraphRow | undefined): string[] {
|
||||
const directBranches = graphBranchRefs(commit);
|
||||
if (directBranches.length > 0) return directBranches;
|
||||
|
||||
const containingBranches = row?.branchLabels ?? [];
|
||||
if (containingBranches.length <= 3) return containingBranches;
|
||||
return [...containingBranches.slice(0, 3), `+${containingBranches.length - 3} more`];
|
||||
return visibleGraphBranchNameSet.has(branch);
|
||||
}
|
||||
|
||||
function commitHoverTitle(commit: GitCommit, row: GraphRow | undefined): string {
|
||||
const directBranches = graphBranchRefs(commit);
|
||||
const directBranches = graphBranchRefs(commit).filter(branchIsVisible);
|
||||
if (directBranches.length > 0) return `Branches: ${directBranches.join(", ")}`;
|
||||
|
||||
const containingBranches = row?.branchLabels ?? [];
|
||||
const containingBranches = (row?.branchLabels ?? []).filter(branchIsVisible);
|
||||
if (containingBranches.length === 0) return commit.short_hash;
|
||||
return `Branches containing this commit: ${containingBranches.join(", ")}`;
|
||||
}
|
||||
@@ -284,7 +313,7 @@
|
||||
|
||||
function branchesAreVisible(branches: string[]): boolean {
|
||||
if (graphBranchNames.length === 0) return true;
|
||||
return branches.some(branchIsVisible);
|
||||
return branches.some((branch) => visibleGraphBranchNameSet.has(branch));
|
||||
}
|
||||
|
||||
function rowGraphIsVisible(row: GraphRow | undefined): boolean {
|
||||
@@ -361,20 +390,31 @@
|
||||
}
|
||||
|
||||
function toggleGraphBranch(branch: string) {
|
||||
const next = new Set(hiddenGraphBranches);
|
||||
const next = branchVisibilityMode === "custom"
|
||||
? new Set(customVisibleBranches)
|
||||
: new Set(visibleGraphBranchNames);
|
||||
if (next.has(branch)) next.delete(branch); else next.add(branch);
|
||||
hiddenGraphBranches = next;
|
||||
userAdjustedBranchFilter = true;
|
||||
customVisibleBranches = next;
|
||||
branchVisibilityMode = "custom";
|
||||
}
|
||||
|
||||
function showAllGraphBranches() {
|
||||
hiddenGraphBranches = new Set();
|
||||
userAdjustedBranchFilter = true;
|
||||
branchVisibilityMode = "all";
|
||||
}
|
||||
|
||||
function hideAllGraphBranches() {
|
||||
hiddenGraphBranches = new Set(localBranchNames);
|
||||
userAdjustedBranchFilter = true;
|
||||
customVisibleBranches = new Set();
|
||||
branchVisibilityMode = "custom";
|
||||
}
|
||||
|
||||
function showFocusGraphBranches() {
|
||||
branchVisibilityMode = "focus";
|
||||
}
|
||||
|
||||
function changeBranchVisibilityMode(event: Event) {
|
||||
const value = (event.currentTarget as HTMLSelectElement).value as BranchVisibilityMode;
|
||||
branchVisibilityMode = value;
|
||||
if (value === "custom") openBranchDialog();
|
||||
}
|
||||
|
||||
function openBranchDialog() {
|
||||
@@ -391,6 +431,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCommitRefs(commit: GitCommit) {
|
||||
expandedRefsCommitHash = expandedRefsCommitHash === commit.hash ? "" : commit.hash;
|
||||
}
|
||||
|
||||
function openCommitActionMenu(event: MouseEvent, commit: GitCommit) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@@ -464,6 +508,7 @@
|
||||
function handleWindowKeydown(event: KeyboardEvent) {
|
||||
if (event.key !== "Escape") return;
|
||||
closeCommitContextMenu();
|
||||
expandedRefsCommitHash = "";
|
||||
handleBranchDialogKeydown(event);
|
||||
}
|
||||
|
||||
@@ -491,22 +536,138 @@
|
||||
return labels;
|
||||
}
|
||||
|
||||
function visibleRefs(commit: GitCommit): string[] {
|
||||
return commit.refs.filter((ref) => !localBranchNameSet.has(refLabel(ref)));
|
||||
}
|
||||
|
||||
function refClass(ref: string): string {
|
||||
if (ref.startsWith("HEAD")) return "head";
|
||||
if (ref.startsWith("tag:")) return "tag";
|
||||
if (localBranchNameSet.has(refLabel(ref))) return "branch";
|
||||
if (ref.includes("/")) return "remote";
|
||||
return "branch";
|
||||
}
|
||||
|
||||
function refLabel(ref: string): string {
|
||||
return ref.replace(/^HEAD ->\s*/, "").replace(/^tag:\s*/, "");
|
||||
}
|
||||
|
||||
function isSymbolicRemoteHead(ref: string): boolean {
|
||||
if (ref.startsWith("HEAD ->") || ref.startsWith("tag:")) return false;
|
||||
const label = refLabel(ref);
|
||||
return !localBranchNameSet.has(label) && /(?:^|\/)HEAD(?:\s*->|$)/.test(ref);
|
||||
}
|
||||
|
||||
function branchNameWithoutRemote(branch: string): string {
|
||||
const slash = branch.indexOf("/");
|
||||
return slash === -1 ? branch : branch.slice(slash + 1);
|
||||
}
|
||||
|
||||
function remoteName(branch: string): string {
|
||||
return branch.split("/", 1)[0] ?? branch;
|
||||
}
|
||||
|
||||
function matchingRemoteBranch(local: string, remoteBranches: string[]): string {
|
||||
if (local === activeBranch && activeUpstream && remoteBranches.includes(activeUpstream)) {
|
||||
return activeUpstream;
|
||||
}
|
||||
return remoteBranches.find((remote) => branchNameWithoutRemote(remote) === local) ?? "";
|
||||
}
|
||||
|
||||
function compareBranchDecorations(left: CommitBranchDecoration, right: CommitBranchDecoration): number {
|
||||
const priority = (item: CommitBranchDecoration) => {
|
||||
if (item.label === activeBranch) return 0;
|
||||
if (item.kind === "head") return 1;
|
||||
if (item.kind === "local") return 2;
|
||||
if (item.label === activeUpstream) return 3;
|
||||
return 4;
|
||||
};
|
||||
return priority(left) - priority(right) || left.label.localeCompare(right.label, undefined, { numeric: true });
|
||||
}
|
||||
|
||||
function commitRefSummary(commit: GitCommit): CommitRefSummary {
|
||||
const local = new Set<string>();
|
||||
const remote = new Set<string>();
|
||||
const tags = new Set<string>();
|
||||
const other = new Set<string>();
|
||||
let detachedHead = false;
|
||||
|
||||
for (const ref of commit.refs) {
|
||||
if (isSymbolicRemoteHead(ref)) continue;
|
||||
const label = refLabel(ref);
|
||||
if (!label) continue;
|
||||
if (ref.startsWith("tag:")) {
|
||||
tags.add(label);
|
||||
} else if (localBranchNameSet.has(label)) {
|
||||
local.add(label);
|
||||
} else if (remoteBranchNameSet.has(label) || label === activeUpstream) {
|
||||
remote.add(label);
|
||||
} else if (label === "HEAD") {
|
||||
detachedHead = true;
|
||||
} else {
|
||||
other.add(label);
|
||||
}
|
||||
}
|
||||
|
||||
const remainingRemote = [...remote];
|
||||
const branches: CommitBranchDecoration[] = [...local].map((label) => {
|
||||
const trackedRemote = matchingRemoteBranch(label, remainingRemote);
|
||||
if (trackedRemote) remainingRemote.splice(remainingRemote.indexOf(trackedRemote), 1);
|
||||
return {
|
||||
label,
|
||||
kind: "local",
|
||||
current: label === activeBranch,
|
||||
trackedRemote,
|
||||
representedBranches: trackedRemote ? [label, trackedRemote] : [label],
|
||||
};
|
||||
});
|
||||
|
||||
if (detachedHead) {
|
||||
branches.push({
|
||||
label: "HEAD",
|
||||
kind: "head",
|
||||
current: true,
|
||||
trackedRemote: "",
|
||||
representedBranches: [],
|
||||
});
|
||||
}
|
||||
|
||||
branches.push(...remainingRemote.map((label) => ({
|
||||
label,
|
||||
kind: "remote" as const,
|
||||
current: false,
|
||||
trackedRemote: "",
|
||||
representedBranches: [label],
|
||||
})));
|
||||
|
||||
const sortedBranches = branches.sort(compareBranchDecorations);
|
||||
const primaryBranch = sortedBranches.find(
|
||||
(branch) => branch.kind === "head" || branch.representedBranches.some(branchIsVisible),
|
||||
) ?? null;
|
||||
const sortedTags = [...tags].sort((left, right) => left.localeCompare(right, undefined, { numeric: true }));
|
||||
const sortedOther = [...other].sort((left, right) => left.localeCompare(right));
|
||||
const primaryTag = sortedTags[0] ?? "";
|
||||
|
||||
return {
|
||||
branches: sortedBranches,
|
||||
tags: sortedTags,
|
||||
other: sortedOther,
|
||||
primaryBranch,
|
||||
primaryTag,
|
||||
overflowCount:
|
||||
Math.max(0, sortedBranches.length - (primaryBranch ? 1 : 0))
|
||||
+ Math.max(0, sortedTags.length - (primaryTag ? 1 : 0))
|
||||
+ sortedOther.length,
|
||||
};
|
||||
}
|
||||
|
||||
function branchStatusLabel(branch: CommitBranchDecoration): string {
|
||||
if (branch.trackedRemote) return `✓ ${remoteName(branch.trackedRemote)}`;
|
||||
if (branch.label === activeBranch) {
|
||||
const parts = [];
|
||||
if (activeAhead > 0) parts.push(`↑${activeAhead}`);
|
||||
if (activeBehind > 0) parts.push(`↓${activeBehind}`);
|
||||
return parts.join(" ");
|
||||
}
|
||||
if (branch.label === activeUpstream && activeBehind > 0) return `↓${activeBehind}`;
|
||||
return "";
|
||||
}
|
||||
|
||||
function branchDecorationTitle(branch: CommitBranchDecoration): string {
|
||||
if (branch.trackedRemote) return `${branch.label} · up to date with ${branch.trackedRemote}`;
|
||||
const status = branchStatusLabel(branch);
|
||||
if (status) return `${branch.label} · ${status}`;
|
||||
return branch.kind === "remote" ? `Remote branch ${branch.label}` : `Local branch ${branch.label}`;
|
||||
}
|
||||
|
||||
function formatCommitDate(value: string): string {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
@@ -514,11 +675,60 @@
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const available = new Set(localBranchNames);
|
||||
const nextHidden = new Set([...hiddenGraphBranches].filter((branch) => available.has(branch)));
|
||||
if (nextHidden.size !== hiddenGraphBranches.size) {
|
||||
hiddenGraphBranches = nextHidden;
|
||||
const currentRepository = repositoryKey;
|
||||
if (loadedVisibilityRepository === currentRepository) return;
|
||||
loadedVisibilityRepository = currentRepository;
|
||||
expandedRefsCommitHash = "";
|
||||
|
||||
if (!currentRepository) {
|
||||
branchVisibilityMode = "focus";
|
||||
customVisibleBranches = new Set();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(`${GRAPH_VISIBILITY_STORAGE_PREFIX}${currentRepository}`);
|
||||
if (!stored) {
|
||||
branchVisibilityMode = "focus";
|
||||
customVisibleBranches = new Set();
|
||||
return;
|
||||
}
|
||||
const parsed = JSON.parse(stored) as { mode?: unknown; branches?: unknown };
|
||||
const mode = parsed.mode;
|
||||
branchVisibilityMode = mode === "focus" || mode === "local" || mode === "all" || mode === "custom"
|
||||
? mode
|
||||
: "focus";
|
||||
customVisibleBranches = new Set(
|
||||
Array.isArray(parsed.branches)
|
||||
? parsed.branches.filter((branch): branch is string => typeof branch === "string")
|
||||
: [],
|
||||
);
|
||||
} catch {
|
||||
branchVisibilityMode = "focus";
|
||||
customVisibleBranches = new Set();
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const currentRepository = repositoryKey;
|
||||
const mode = branchVisibilityMode;
|
||||
const branches = [...customVisibleBranches];
|
||||
if (!currentRepository || loadedVisibilityRepository !== currentRepository) return;
|
||||
try {
|
||||
localStorage.setItem(
|
||||
`${GRAPH_VISIBILITY_STORAGE_PREFIX}${currentRepository}`,
|
||||
JSON.stringify({ mode, branches }),
|
||||
);
|
||||
} catch {
|
||||
// The graph still works if storage is unavailable.
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (graphBranchNames.length === 0 || customVisibleBranches.size === 0) return;
|
||||
const available = new Set(graphBranchNames);
|
||||
const next = new Set([...customVisibleBranches].filter((branch) => available.has(branch)));
|
||||
if (next.size !== customVisibleBranches.size) customVisibleBranches = next;
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
@@ -530,36 +740,11 @@
|
||||
});
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const defaultBranch = activeBranch && localBranchNames.includes(activeBranch)
|
||||
? activeBranch
|
||||
: (graphBranchNames[0] ?? "");
|
||||
const defaultFilterKey = `${repositoryKey}::${defaultBranch}`;
|
||||
|
||||
if (!defaultBranch) {
|
||||
if (lastDefaultFilterKey !== defaultFilterKey) {
|
||||
hiddenGraphBranches = new Set();
|
||||
userAdjustedBranchFilter = false;
|
||||
lastDefaultFilterKey = defaultFilterKey;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastDefaultFilterKey !== defaultFilterKey) {
|
||||
userAdjustedBranchFilter = false;
|
||||
lastDefaultFilterKey = defaultFilterKey;
|
||||
}
|
||||
|
||||
if (!userAdjustedBranchFilter) {
|
||||
hiddenGraphBranches = new Set(localBranchNames.filter((branch) => branch !== defaultBranch));
|
||||
}
|
||||
});
|
||||
|
||||
let branchMembership = $derived(branchMembershipByHash(commits));
|
||||
let visibleCommitEntries = $derived(visibleCommitEntriesForGraph(commits, branchMembership));
|
||||
let visibleCommits = $derived(visibleCommitEntries.map((entry) => entry.commit));
|
||||
let graphCommits = $derived(visibleCommitEntries.map((entry) => entry.graphCommit));
|
||||
let visibleBranchCount = $derived(localBranchNames.filter(branchIsVisible).length);
|
||||
let visibleBranchCount = $derived(visibleGraphBranchNames.length);
|
||||
let graph = $derived(computeGraph(graphCommits, branchMembership));
|
||||
let graphRows = $derived(graph.rows);
|
||||
let graphWidth = $derived(Math.max(Math.max(graph.columns, 1) * GRAPH_LANE + 18, 42));
|
||||
@@ -573,17 +758,31 @@
|
||||
<span class="eyebrow">History</span>
|
||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Commits</h2>
|
||||
</div>
|
||||
{#if localBranchNames.length > 0}
|
||||
{#if graphBranchNames.length > 0}
|
||||
<div class="section-head-actions">
|
||||
<label class="graph-visibility-select" title="Choose which branches are shown in the graph">
|
||||
<GitBranch size={13} aria-hidden="true" />
|
||||
<span class="graph-visibility-label">Branches</span>
|
||||
<select
|
||||
aria-label="Branch visibility mode"
|
||||
value={branchVisibilityMode}
|
||||
onchange={changeBranchVisibilityMode}
|
||||
>
|
||||
<option value="focus">Focus</option>
|
||||
<option value="local">Local</option>
|
||||
<option value="all">All</option>
|
||||
<option value="custom">Custom…</option>
|
||||
</select>
|
||||
<ChevronDown size={12} aria-hidden="true" />
|
||||
</label>
|
||||
<button
|
||||
class="graph-branch-dialog-button"
|
||||
type="button"
|
||||
onclick={openBranchDialog}
|
||||
title="Select branches shown in the graph"
|
||||
title="Customize visible branches"
|
||||
aria-label={`${visibleBranchCount} of ${graphBranchNames.length} branches visible. Customize branches.`}
|
||||
>
|
||||
<GitBranch size={13} aria-hidden="true" />
|
||||
Branches
|
||||
<span>{visibleBranchCount}/{localBranchNames.length}</span>
|
||||
<span>{visibleBranchCount}/{graphBranchNames.length}</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -601,8 +800,7 @@
|
||||
{#each visibleCommitEntries as entry, rowIndex (entry.commit.hash)}
|
||||
{@const item = entry.commit}
|
||||
{@const row = graphRows[rowIndex]}
|
||||
{@const hoverBranchRefs = commitHoverBranchLabels(item, row)}
|
||||
{@const otherRefs = visibleRefs(item)}
|
||||
{@const refSummary = commitRefSummary(item)}
|
||||
{@const rowSyncClass = syncClassForBranches(row?.branchLabels ?? [])}
|
||||
<article
|
||||
class="commit-row graph-row"
|
||||
@@ -650,25 +848,102 @@
|
||||
title={commitHoverTitle(item, row)}
|
||||
style={`left:${graphColX(row.dotCol)}px; --dot-color:${row.dotColor}`}
|
||||
></span>
|
||||
{#if hoverBranchRefs.length > 0}
|
||||
<div class="graph-hover-branches" style={`left:${graphColX(row.dotCol) + 13}px`}>
|
||||
{#each hoverBranchRefs as branch}
|
||||
<span
|
||||
class:remote={branch === activeUpstream}
|
||||
class:ahead={activeBranch === branch && rowSyncClass === "ahead"}
|
||||
class:behind={activeUpstream === branch && rowSyncClass === "behind"}
|
||||
title={branch}
|
||||
>
|
||||
<GitBranch size={10} aria-hidden="true" />
|
||||
{branch}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="commit-body">
|
||||
{#if refSummary.primaryBranch || refSummary.primaryTag || refSummary.overflowCount > 0}
|
||||
<div class="commit-ref-area" style={`--ref-lane-color:${row?.dotColor ?? GRAPH_COLORS[0]}`}>
|
||||
<div class="commit-ref-strip" aria-label="Commit references">
|
||||
{#if refSummary.primaryBranch}
|
||||
<span
|
||||
class="compact-ref-chip branch"
|
||||
class:current={refSummary.primaryBranch.current}
|
||||
class:remote={refSummary.primaryBranch.kind === "remote"}
|
||||
title={branchDecorationTitle(refSummary.primaryBranch)}
|
||||
>
|
||||
<i aria-hidden="true"></i>
|
||||
<span>{refSummary.primaryBranch.label}</span>
|
||||
{#if branchStatusLabel(refSummary.primaryBranch)}
|
||||
<small class:up-to-date={Boolean(refSummary.primaryBranch.trackedRemote)}>
|
||||
{#if refSummary.primaryBranch.trackedRemote}<Check size={9} aria-hidden="true" />{/if}
|
||||
{branchStatusLabel(refSummary.primaryBranch).replace(/^✓\s*/, "")}
|
||||
</small>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
{#if refSummary.primaryTag}
|
||||
<span class="compact-ref-chip tag" title={`Tag ${refSummary.primaryTag}`}>
|
||||
<Tag size={10} aria-hidden="true" />
|
||||
<span>{refSummary.primaryTag}</span>
|
||||
</span>
|
||||
{/if}
|
||||
{#if refSummary.overflowCount > 0}
|
||||
<button
|
||||
class="compact-ref-overflow"
|
||||
type="button"
|
||||
onclick={() => toggleCommitRefs(item)}
|
||||
aria-expanded={expandedRefsCommitHash === item.hash}
|
||||
aria-controls={`commit-refs-${item.hash}`}
|
||||
title={`Show ${refSummary.overflowCount} more ${refSummary.overflowCount === 1 ? "reference" : "references"}`}
|
||||
>
|
||||
+{refSummary.overflowCount}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if refSummary.overflowCount > 0 && expandedRefsCommitHash === item.hash}
|
||||
<div class="commit-ref-details" id={`commit-refs-${item.hash}`}>
|
||||
<strong>References on this commit</strong>
|
||||
{#if refSummary.branches.some((branch) => branch.kind !== "remote")}
|
||||
<section>
|
||||
<span>Local</span>
|
||||
<div>
|
||||
{#each refSummary.branches.filter((branch) => branch.kind !== "remote") as branch}
|
||||
<span class="commit-ref-detail-item local" title={branchDecorationTitle(branch)}>
|
||||
<i aria-hidden="true"></i>{branch.label}
|
||||
{#if branch.current}<small>Current</small>{/if}
|
||||
{#if branch.trackedRemote}<small>{branch.trackedRemote}</small>{/if}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{#if refSummary.branches.some((branch) => branch.kind === "remote")}
|
||||
<section>
|
||||
<span>Remote</span>
|
||||
<div>
|
||||
{#each refSummary.branches.filter((branch) => branch.kind === "remote") as branch}
|
||||
<span class="commit-ref-detail-item remote"><i aria-hidden="true"></i>{branch.label}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{#if refSummary.tags.length > 0}
|
||||
<section>
|
||||
<span>Tags</span>
|
||||
<div>
|
||||
{#each refSummary.tags as tag}
|
||||
<span class="commit-ref-detail-item tag"><Tag size={10} aria-hidden="true" />{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{#if refSummary.other.length > 0}
|
||||
<section>
|
||||
<span>Other</span>
|
||||
<div>
|
||||
{#each refSummary.other as ref}
|
||||
<span class="commit-ref-detail-item">{ref}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="commit-card-head">
|
||||
<span class="commit-avatar">
|
||||
{authorInitials(item.author_name)}
|
||||
@@ -690,14 +965,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if otherRefs.length > 0}
|
||||
<div class="ref-list" aria-label="Commit refs">
|
||||
{#each otherRefs as ref}
|
||||
<span class={`ref-chip ${refClass(ref)}`}>{refLabel(ref)}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if item.files.length > 0}
|
||||
<div class="commit-files">
|
||||
<button
|
||||
@@ -837,25 +1104,43 @@
|
||||
</header>
|
||||
|
||||
<div class="branch-filter-summary">
|
||||
<span>{visibleBranchCount} of {localBranchNames.length} branches selected</span>
|
||||
<span>{visibleBranchCount} of {graphBranchNames.length} branches selected</span>
|
||||
<div class="branch-filter-actions">
|
||||
<button type="button" onclick={showAllGraphBranches} disabled={visibleBranchCount === localBranchNames.length}>Show all</button>
|
||||
<button type="button" onclick={showFocusGraphBranches} disabled={branchVisibilityMode === "focus"}>Focus</button>
|
||||
<button type="button" onclick={showAllGraphBranches} disabled={visibleBranchCount === graphBranchNames.length}>Show all</button>
|
||||
<button type="button" onclick={hideAllGraphBranches} disabled={visibleBranchCount === 0}>Hide all</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="branch-filter-dialog-list">
|
||||
{#each localBranchNames as branch}
|
||||
<label class:muted={!branchIsVisible(branch)} class="branch-filter-option" title={branch}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={branchIsVisible(branch)}
|
||||
onchange={() => toggleGraphBranch(branch)}
|
||||
/>
|
||||
<GitBranch size={14} aria-hidden="true" />
|
||||
<span>{branch}</span>
|
||||
</label>
|
||||
{/each}
|
||||
{#if localBranchNames.length > 0}
|
||||
<span class="branch-filter-group-label">Local</span>
|
||||
{#each localBranchNames as branch}
|
||||
<label class:muted={!branchIsVisible(branch)} class="branch-filter-option" title={branch}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={branchIsVisible(branch)}
|
||||
onchange={() => toggleGraphBranch(branch)}
|
||||
/>
|
||||
<GitBranch size={14} aria-hidden="true" />
|
||||
<span>{branch}</span>
|
||||
</label>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if remoteBranchNames.length > 0}
|
||||
<span class="branch-filter-group-label">Remote</span>
|
||||
{#each remoteBranchNames as branch}
|
||||
<label class:muted={!branchIsVisible(branch)} class="branch-filter-option remote" title={branch}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={branchIsVisible(branch)}
|
||||
onchange={() => toggleGraphBranch(branch)}
|
||||
/>
|
||||
<GitBranch size={14} aria-hidden="true" />
|
||||
<span>{branch}</span>
|
||||
</label>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user