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
@@ -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