Adds stashes to minimap

Tweaks marker colors on minimap & scrollbar
Tweaks minimap colors and fixes minimap region overlays

Co-authored-by: Ramin Tadayon <ramin.tadayon@gitkraken.com>

src/system/color.ts

@@ -359,16 +359,20 @@ export class HSVA {
 }
 
 export class Color {
-	static fromHex(hex: string): Color {
-		return parseHexColor(hex) || Color.red;
-	}
-
 	static from(value: string | Color): Color {
 		if (value instanceof Color) return value;
 
 		return parseColor(value) || Color.red;
 	}
 
+	static fromCssVariable(variable: string, css: { getPropertyValue(property: string): string }): Color {
+		return parseColor(css.getPropertyValue(variable).trim()) || Color.red;
+	}
+
+	static fromHex(hex: string): Color {
+		return parseHexColor(hex) || Color.red;
+	}
+
 	static equals(a: Color | null, b: Color | null): boolean {
 		if (!a && !b) {
 			return true;

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -71,6 +71,7 @@ import type {
 	GraphMinimapSearchResultMarker,
 	GraphMinimapStats,
 	GraphMinimap as GraphMinimapType,
+	StashMarker,
 } from './minimap/minimap';
 import { GraphMinimap } from './minimap/react';
 
@@ -369,6 +370,7 @@ export function GraphWrapper({
 		let markers;
 		let headMarkers;
 		let remoteMarkers;
+		let stashMarker: StashMarker | undefined;
 		let tagMarkers;
 		let row: GraphRow;
 		let stat;
@@ -440,6 +442,16 @@ export function GraphWrapper({
 				}
 			}
 
+			if (row.type === 'stash-node') {
+				stashMarker = { type: 'stash', name: row.message };
+				markers = markersByDay.get(day);
+				if (markers == null) {
+					markersByDay.set(day, [stashMarker]);
+				} else {
+					markers.push(stashMarker);
+				}
+			}
+
 			if (row.tags?.length) {
 				rankedShas.tag = row.sha;
 

src/webviews/apps/plus/graph/graph.scss

@@ -34,9 +34,82 @@ body {
 		}
 	}
 
+	--color-graph-contrast-border: var(--vscode-list-focusOutline);
+	--color-graph-selected-row: var(--vscode-list-activeSelectionBackground);
+	--color-graph-hover-row: var(--vscode-list-hoverBackground);
+	--color-graph-text-selected-row: var(--vscode-list-activeSelectionForeground);
+	--color-graph-text-dimmed-selected: var(--vscode-list-activeSelectionForeground);
+	--color-graph-text-dimmed: var(--vscode-list-activeSelectionForeground);
+
+	--color-graph-text-hovered: var(--vscode-list-hoverForeground);
+	--color-graph-text-selected: var(--vscode-editor-foreground, var(--vscode-foreground));
+	--color-graph-text-normal: var(--color-graph-text-selected);
+	--color-graph-text-secondary: var(--color-graph-text-selected);
+	--color-graph-text-disabled: var(--color-graph-text-selected);
+
 	--color-graph-stats-added: var(--vscode-gitDecoration-addedResourceForeground);
 	--color-graph-stats-deleted: var(--vscode-gitDecoration-deletedResourceForeground);
 	--color-graph-stats-files: var(--vscode-gitDecoration-modifiedResourceForeground);
+
+	--color-graph-minimap-line0: var(--vscode-progressBar-background);
+	--color-graph-minimap-focusLine: var(--vscode-foreground);
+	--color-graph-minimap-visibleAreaBackground: var(--vscode-scrollbarSlider-background);
+
+	--color-graph-scroll-marker-head: hsl(125, 96%, 46%);
+	--color-graph-scroll-marker-highlights: hsl(61, 100%, 52%);
+	--color-graph-scroll-marker-local-branches: hsl(207, 62%, 50%);
+	--color-graph-scroll-marker-remote-branches: hsl(207, 52%, 35%);
+	--color-graph-scroll-marker-stashes: hsl(300, 40%, 50%);
+	--color-graph-scroll-marker-tags: hsl(39, 40%, 30%);
+	--color-graph-scroll-marker-upstream: hsl(125, 90%, 36%);
+	--color-graph-minimap-marker-upstream: hsl(125, 90%, 36%);
+
+	&.vscode-light,
+	&.vscode-high-contrast-light {
+		--color-graph-scroll-marker-head: hsl(125, 96%, 40%);
+		--color-graph-scroll-marker-highlights: hsl(50, 100%, 48%);
+		--color-graph-scroll-marker-local-branches: hsl(207, 80%, 55%);
+		--color-graph-scroll-marker-remote-branches: hsl(207, 70%, 65%);
+		--color-graph-scroll-marker-stashes: hsl(300, 70%, 65%);
+		--color-graph-scroll-marker-tags: hsl(28, 50%, 65%);
+		--color-graph-scroll-marker-upstream: hsl(125, 50%, 70%);
+		--color-graph-minimap-marker-upstream: hsl(125, 50%, 70%);
+	}
+
+	--color-graph-minimap-marker-head: var(--color-graph-scroll-marker-head);
+	--color-graph-minimap-tip-headBackground: var(--color-graph-scroll-marker-head);
+	--color-graph-minimap-tip-headBorder: var(--color-graph-scroll-marker-head);
+	--color-graph-minimap-tip-headForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
+
+	--color-graph-minimap-marker-highlights: var(--color-graph-scroll-marker-highlights);
+
+	--color-graph-minimap-marker-local-branches: var(--color-graph-scroll-marker-local-branches);
+	--color-graph-minimap-tip-branchBackground: var(--color-graph-scroll-marker-local-branches);
+	--color-graph-minimap-tip-branchBorder: var(--color-graph-scroll-marker-local-branches);
+	--color-graph-minimap-tip-branchForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
+
+	--color-graph-minimap-marker-remote-branches: var(--color-graph-scroll-marker-remote-branches);
+	--color-graph-minimap-tip-remoteBackground: var(--color-graph-scroll-marker-remote-branches);
+	--color-graph-minimap-tip-remoteBorder: var(--color-graph-scroll-marker-remote-branches);
+	--color-graph-minimap-tip-remoteForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
+
+	--color-graph-scroll-marker-selection: var(--vscode-editorCursor-foreground);
+	--color-graph-minimap-marker-selection: var(--color-graph-scroll-marker-selection);
+
+	--color-graph-minimap-marker-stashes: var(--color-graph-scroll-marker-stashes);
+	--color-graph-minimap-tip-stashBackground: var(--color-graph-scroll-marker-stashes);
+	--color-graph-minimap-tip-stashBorder: var(--color-graph-scroll-marker-stashes);
+	--color-graph-minimap-tip-stashForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
+
+	--color-graph-minimap-marker-tags: var(--color-graph-scroll-marker-tags);
+	--color-graph-minimap-tip-tagBackground: var(--color-graph-scroll-marker-tags);
+	--color-graph-minimap-tip-tagBorder: var(--color-graph-scroll-marker-tags);
+	--color-graph-minimap-tip-tagForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
+
+	--color-graph-minimap-tip-upstreamBackground: var(--color-graph-scroll-marker-upstream);
+	--color-graph-minimap-tip-upstreamBorder: var(--color-graph-scroll-marker-upstream);
+	--color-graph-minimap-tip-upstreamForeground: var(--vscode-editor-foreground, var(--vscode-foreground));
+
 	--graph-stats-bar-height: 40%;
 	--graph-stats-bar-border-radius: 3px;
 }
@@ -607,6 +680,7 @@ button:not([disabled]),
 		flex: none;
 		z-index: 2000;
 		position: relative;
+		margin-right: 2px;
 	}
 
 	&__footer {

src/webviews/apps/plus/graph/graph.tsx

@@ -324,26 +324,6 @@ export class GraphApp extends App {
 	}
 
 	protected override onThemeUpdated(e: ThemeChangeEvent) {
-		const backgroundColor = Color.from(e.colors.background);
-		const backgroundLuminance = backgroundColor.getRelativeLuminance();
-
-		const foregroundColor = Color.from(e.colors.foreground);
-		const foregroundLuminance = foregroundColor.getRelativeLuminance();
-
-		const themeLuminance = (luminance: number) => {
-			let min;
-			let max;
-			if (foregroundLuminance > backgroundLuminance) {
-				max = foregroundLuminance;
-				min = backgroundLuminance;
-			} else {
-				min = foregroundLuminance;
-				max = backgroundLuminance;
-			}
-			const percent = luminance / 1;
-			return percent * (max - min) + min;
-		};
-
 		const bodyStyle = document.body.style;
 		bodyStyle.setProperty('--graph-theme-opacity-factor', e.isLightTheme ? '0.5' : '1');
 
@@ -364,129 +344,151 @@ export class GraphApp extends App {
 			'--color-graph-background2',
 			e.isLightTheme ? darken(e.colors.background, 10) : lighten(e.colors.background, 10),
 		);
-		let color = e.computedStyle.getPropertyValue('--vscode-list-focusOutline').trim();
-		bodyStyle.setProperty('--color-graph-contrast-border', color);
-		color = e.computedStyle.getPropertyValue('--vscode-list-activeSelectionBackground').trim();
-		bodyStyle.setProperty('--color-graph-selected-row', color);
-		color = e.computedStyle.getPropertyValue('--vscode-list-hoverBackground').trim();
-		bodyStyle.setProperty('--color-graph-hover-row', color);
-		color = e.computedStyle.getPropertyValue('--vscode-list-activeSelectionForeground').trim();
-		bodyStyle.setProperty('--color-graph-text-selected-row', color);
+
+		const color = e.computedStyle.getPropertyValue('--color-graph-text-selected-row').trim();
 		bodyStyle.setProperty('--color-graph-text-dimmed-selected', opacity(color, 50));
 		bodyStyle.setProperty('--color-graph-text-dimmed', opacity(e.colors.foreground, 20));
-		color = e.computedStyle.getPropertyValue('--vscode-list-hoverForeground').trim();
-		bodyStyle.setProperty('--color-graph-text-hovered', color);
-		bodyStyle.setProperty('--color-graph-text-selected', e.colors.foreground);
+
 		bodyStyle.setProperty('--color-graph-text-normal', opacity(e.colors.foreground, 85));
 		bodyStyle.setProperty('--color-graph-text-secondary', opacity(e.colors.foreground, 65));
 		bodyStyle.setProperty('--color-graph-text-disabled', opacity(e.colors.foreground, 50));
 
-		// minimap and scroll markers
+		const backgroundColor = Color.from(e.colors.background);
+		const foregroundColor = Color.from(e.colors.foreground);
 
-		const resultColor = Color.fromHex('#ffff00');
-		const headColor = Color.fromHex('#00ff00');
-		const branchColor = Color.fromHex('#ff7f50');
-		const tagColor = Color.fromHex('#15a0bf');
-		const stashColor = Color.fromHex('#800080');
+		const backgroundLuminance = backgroundColor.getRelativeLuminance();
+		const foregroundLuminance = foregroundColor.getRelativeLuminance();
 
-		color = e.computedStyle.getPropertyValue('--vscode-progressBar-background').trim();
-		const activityColor = Color.from(color);
-		// bodyStyle.setProperty('--color-graph-minimap-line0', color);
-		bodyStyle.setProperty('--color-graph-minimap-line0', activityColor.luminance(themeLuminance(0.5)).toString());
+		const themeLuminance = (luminance: number) => {
+			let min;
+			let max;
+			if (foregroundLuminance > backgroundLuminance) {
+				max = foregroundLuminance;
+				min = backgroundLuminance;
+			} else {
+				min = foregroundLuminance;
+				max = backgroundLuminance;
+			}
+			const percent = luminance / 1;
+			return percent * (max - min) + min;
+		};
 
-		bodyStyle.setProperty(
-			'--color-graph-minimap-focusLine',
-			backgroundColor.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.2)).toString(),
-		);
+		// minimap and scroll markers
 
-		color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-background').trim();
+		let c = Color.fromCssVariable('--color-graph-minimap-visibleAreaBackground', e.computedStyle);
 		bodyStyle.setProperty(
 			'--color-graph-minimap-visibleAreaBackground',
-			Color.from(color)
-				.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15))
-				.toString(),
+			c.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.1)).toString(),
 		);
 
-		color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-hoverBackground').trim();
-		bodyStyle.setProperty(
-			'--color-graph-minimap-visibleAreaHoverBackground',
-			Color.from(color)
-				.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15))
-				.toString(),
-		);
+		if (!e.isLightTheme) {
+			c = Color.fromCssVariable('--color-graph-minimap-tip-headForeground', e.computedStyle);
+			bodyStyle.setProperty('--color-graph-minimap-tip-headForeground', c.opposite().toString());
 
-		color = Color.from(e.computedStyle.getPropertyValue('--vscode-list-activeSelectionBackground').trim())
-			.luminance(themeLuminance(e.isLightTheme ? 0.45 : 0.32))
-			.toString();
-		// color = e.computedStyle.getPropertyValue('--vscode-editorCursor-foreground').trim();
-		bodyStyle.setProperty('--color-graph-minimap-selectedMarker', color);
-		bodyStyle.setProperty('--color-graph-scroll-marker-selection', color);
-		bodyStyle.setProperty('--color-graph-minimap-highlightedMarker', opacity(color, 60));
+			c = Color.fromCssVariable('--color-graph-minimap-tip-upstreamForeground', e.computedStyle);
+			bodyStyle.setProperty('--color-graph-minimap-tip-upstreamForeground', c.opposite().toString());
 
-		bodyStyle.setProperty(
-			'--color-graph-minimap-resultMarker',
-			resultColor.luminance(themeLuminance(0.6)).toString(),
-		);
-		bodyStyle.setProperty(
-			'--color-graph-scroll-marker-highlights',
-			resultColor.luminance(themeLuminance(0.6)).toString(),
-		);
-
-		const pillLabel = foregroundColor.luminance(themeLuminance(e.isLightTheme ? 0 : 1)).toString();
-		const headBackground = headColor.luminance(themeLuminance(e.isLightTheme ? 0.9 : 0.2)).toString();
-		const headBorder = headColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
-		const headMarker = headColor.luminance(themeLuminance(0.5)).toString();
-
-		bodyStyle.setProperty('--color-graph-minimap-headBackground', headBackground);
-		bodyStyle.setProperty('--color-graph-minimap-headBorder', headBorder);
-		bodyStyle.setProperty('--color-graph-minimap-headForeground', pillLabel);
-		bodyStyle.setProperty('--color-graph-minimap-headMarker', opacity(headMarker, 80));
-		bodyStyle.setProperty('--color-graph-scroll-marker-head', opacity(headMarker, 90));
-
-		bodyStyle.setProperty('--color-graph-minimap-upstreamBackground', headBackground);
-		bodyStyle.setProperty('--color-graph-minimap-upstreamBorder', headBorder);
-		bodyStyle.setProperty('--color-graph-minimap-upstreamForeground', pillLabel);
-		bodyStyle.setProperty('--color-graph-minimap-upstreamMarker', opacity(headMarker, 60));
-		bodyStyle.setProperty('--color-graph-scroll-marker-upstream', opacity(headMarker, 60));
-
-		const branchBackground = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.3)).toString();
-		const branchBorder = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
-		const branchMarker = branchColor.luminance(themeLuminance(0.6)).toString();
-
-		bodyStyle.setProperty('--color-graph-minimap-branchBackground', branchBackground);
-		bodyStyle.setProperty('--color-graph-minimap-branchBorder', branchBorder);
-		bodyStyle.setProperty('--color-graph-minimap-branchForeground', pillLabel);
-		bodyStyle.setProperty('--color-graph-minimap-branchMarker', opacity(branchMarker, 70));
-		bodyStyle.setProperty('--color-graph-scroll-marker-local-branches', opacity(branchMarker, 90));
-
-		bodyStyle.setProperty('--color-graph-minimap-remoteBackground', opacity(branchBackground, 80));
-		bodyStyle.setProperty('--color-graph-minimap-remoteBorder', opacity(branchBorder, 80));
-		bodyStyle.setProperty('--color-graph-minimap-remoteForeground', pillLabel);
-		bodyStyle.setProperty('--color-graph-minimap-remoteMarker', opacity(branchMarker, 30));
-		bodyStyle.setProperty('--color-graph-scroll-marker-remote-branches', opacity(branchMarker, 60));
-
-		bodyStyle.setProperty(
-			'--color-graph-minimap-tagBackground',
-			tagColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.2)).toString(),
-		);
-		bodyStyle.setProperty(
-			'--color-graph-minimap-tagBorder',
-			tagColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(),
-		);
-		bodyStyle.setProperty('--color-graph-minimap-tagForeground', pillLabel);
-		bodyStyle.setProperty(
-			'--color-graph-minimap-tagMarker',
-			opacity(tagColor.luminance(themeLuminance(0.5)).toString(), 60),
-		);
-		bodyStyle.setProperty(
-			'--color-graph-scroll-marker-tags',
-			opacity(tagColor.luminance(themeLuminance(0.9)).toString(), 90),
-		);
+			c = Color.fromCssVariable('--color-graph-minimap-tip-branchForeground', e.computedStyle);
+			bodyStyle.setProperty('--color-graph-minimap-tip-branchForeground', c.opposite().toString());
+		}
 
-		bodyStyle.setProperty(
-			'--color-graph-scroll-marker-stashes',
-			opacity(stashColor.luminance(themeLuminance(0.9)).toString(), 90),
-		);
+		// const highlightsColor = Color.from(
+		// 	e.computedStyle.getPropertyValue('--color-graph-scroll-marker-highlights').trim(),
+		// );
+		// const branchColor = Color.from(
+		// 	e.computedStyle.getPropertyValue('--color-graph-scroll-marker-local-branches').trim(),
+		// );
+		// const remoteBranchColor = Color.from(
+		// 	e.computedStyle.getPropertyValue('--color-graph-scroll-marker-remote-branches').trim(),
+		// );
+		// const stashColor = Color.from(e.computedStyle.getPropertyValue('--color-graph-scroll-marker-stashes').trim());
+		// const tagColor = Color.from(e.computedStyle.getPropertyValue('--color-graph-scroll-marker-tags').trim());
+
+		// color = e.computedStyle.getPropertyValue('--vscode-progressBar-background').trim();
+		// const activityColor = Color.from(color);
+		// bodyStyle.setProperty('--color-graph-minimap-line0', activityColor.luminance(themeLuminance(0.5)).toString());
+
+		// bodyStyle.setProperty(
+		// 	'--color-graph-minimap-focusLine',
+		// 	backgroundColor.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.2)).toString(),
+		// );
+
+		// color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-background').trim();
+		// bodyStyle.setProperty(
+		// 	'--color-graph-minimap-visibleAreaBackground',
+		// 	Color.from(color)
+		// 		.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15))
+		// 		.toString(),
+		// );
+
+		// bodyStyle.setProperty(
+		// 	'--color-graph-scroll-marker-highlights',
+		// 	highlightsColor.luminance(themeLuminance(e.isLightTheme ? 0.6 : 1.0)).toString(),
+		// );
+
+		// const pillLabel = foregroundColor.luminance(themeLuminance(e.isLightTheme ? 0 : 1)).toString();
+		// const headBackground = headColor.luminance(themeLuminance(e.isLightTheme ? 0.9 : 0.2)).toString();
+		// const headBorder = headColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
+		// const headMarker = headColor.luminance(themeLuminance(0.5)).toString();
+
+		// bodyStyle.setProperty('--color-graph-minimap-headBackground', headBackground);
+		// bodyStyle.setProperty('--color-graph-minimap-headBorder', headBorder);
+		// bodyStyle.setProperty('--color-graph-minimap-headForeground', pillLabel);
+
+		// bodyStyle.setProperty('--color-graph-scroll-marker-head', opacity(headMarker, 90));
+
+		// bodyStyle.setProperty('--color-graph-minimap-upstreamBackground', headBackground);
+		// bodyStyle.setProperty('--color-graph-minimap-upstreamBorder', headBorder);
+		// bodyStyle.setProperty('--color-graph-minimap-upstreamForeground', pillLabel);
+		// bodyStyle.setProperty('--color-graph-scroll-marker-upstream', opacity(headMarker, 60));
+
+		// const branchBackground = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.3)).toString();
+		// const branchBorder = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
+		// const branchMarker = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.6)).toString();
+
+		// bodyStyle.setProperty('--color-graph-minimap-branchBackground', branchBackground);
+		// bodyStyle.setProperty('--color-graph-minimap-branchBorder', branchBorder);
+		// bodyStyle.setProperty('--color-graph-minimap-branchForeground', pillLabel);
+		// bodyStyle.setProperty('--color-graph-scroll-marker-local-branches', opacity(branchMarker, 90));
+
+		// const remoteBranchBackground = remoteBranchColor
+		// 	.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.3))
+		// 	.toString();
+		// const remoteBranchBorder = remoteBranchColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
+		// const remoteBranchMarker = remoteBranchColor.luminance(themeLuminance(e.isLightTheme ? 0.3 : 0.6)).toString();
+
+		// bodyStyle.setProperty('--color-graph-minimap-remoteBackground', opacity(remoteBranchBackground, 80));
+		// bodyStyle.setProperty('--color-graph-minimap-remoteBorder', opacity(remoteBranchBorder, 80));
+		// bodyStyle.setProperty('--color-graph-minimap-remoteForeground', pillLabel);
+		// bodyStyle.setProperty('--color-graph-scroll-marker-remote-branches', opacity(remoteBranchMarker, 70));
+
+		// bodyStyle.setProperty(
+		// 	'--color-graph-minimap-stashBackground',
+		// 	stashColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.2)).toString(),
+		// );
+		// bodyStyle.setProperty(
+		// 	'--color-graph-minimap-stashBorder',
+		// 	stashColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(),
+		// );
+		// bodyStyle.setProperty('--color-graph-minimap-stashForeground', pillLabel);
+		// bodyStyle.setProperty(
+		// 	'--color-graph-scroll-marker-stashes',
+		// 	opacity(stashColor.luminance(themeLuminance(e.isLightTheme ? 0.5 : 0.9)).toString(), 90),
+		// );
+
+		// bodyStyle.setProperty(
+		// 	'--color-graph-minimap-tagBackground',
+		// 	tagColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.2)).toString(),
+		// );
+		// bodyStyle.setProperty(
+		// 	'--color-graph-minimap-tagBorder',
+		// 	tagColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(),
+		// );
+		// bodyStyle.setProperty('--color-graph-minimap-tagForeground', pillLabel);
+		// bodyStyle.setProperty(
+		// 	'--color-graph-scroll-marker-tags',
+		// 	opacity(tagColor.luminance(themeLuminance(e.isLightTheme ? 0.3 : 0.5)).toString(), 60),
+		// );
 
 		if (e.isInitializing) return;
 

src/webviews/apps/plus/graph/minimap/minimap.ts

@@ -19,13 +19,19 @@ export interface RemoteMarker {
 	current?: boolean;
 }
 
+export interface StashMarker {
+	type: 'stash';
+	name: string;
+	current?: undefined;
+}
+
 export interface TagMarker {
 	type: 'tag';
 	name: string;
 	current?: undefined;
 }
 
-export type GraphMinimapMarker = BranchMarker | RemoteMarker | TagMarker;
+export type GraphMinimapMarker = BranchMarker | RemoteMarker | StashMarker | TagMarker;
 
 export interface GraphMinimapSearchResultMarker {
 	type: 'search-result';
@@ -85,6 +91,10 @@ const styles = css`
 	}
 
 	/*-- Grid --*/
+	.bb-grid {
+		pointer-events: none;
+	}
+
 	.bb-xgrid-focus line {
 		stroke: var(--color-graph-minimap-focusLine);
 	}
@@ -122,23 +132,24 @@ const styles = css`
 
 	/*-- Regions --*/
 
+	.bb-regions {
+		pointer-events: none;
+	}
+
+	.bb-region > rect:not([x]) {
+		display: none;
+	}
+
 	.bb-region.visible-area {
 		fill: var(--color-graph-minimap-visibleAreaBackground);
-		/* transform: translateY(26px); */
 		transform: translateY(-4px);
-		z-index: 0;
 	}
 	.bb-region.visible-area > rect {
-		/* height: 10px; */
 		height: 100%;
 	}
 
-	/* :host(:hover) .bb-region.visible-area {
-		fill: var(--color-graph-minimap-visibleAreaHoverBackground);
-	} */
-
 	.bb-region.marker-result {
-		fill: var(--color-graph-minimap-resultMarker);
+		fill: var(--color-graph-minimap-marker-highlights);
 		transform: translate(-1px, -4px);
 		z-index: 10;
 	}
@@ -148,53 +159,83 @@ const styles = css`
 	}
 
 	.bb-region.marker-head {
-		fill: var(--color-graph-minimap-headMarker);
-		transform: translate(0px, -4px);
-		z-index: 5;
+		fill: var(--color-graph-minimap-marker-head);
+		stroke: var(--color-graph-minimap-marker-head);
+		transform: translate(-1px, -4px);
 	}
 	.bb-region.marker-head > rect {
-		width: 2px;
+		width: 1px;
 		height: 100%;
 	}
 
+	.bb-region.marker-head-arrow-left {
+		fill: var(--color-graph-minimap-marker-head);
+		stroke: var(--color-graph-minimap-marker-head);
+		transform: translate(-5px, -5px) skewX(45deg);
+	}
+	.bb-region.marker-head-arrow-left > rect {
+		width: 3px;
+		height: 3px;
+	}
+
+	.bb-region.marker-head-arrow-right {
+		fill: var(--color-graph-minimap-marker-head);
+		stroke: var(--color-graph-minimap-marker-head);
+		transform: translate(1px, -5px) skewX(-45deg);
+	}
+	.bb-region.marker-head-arrow-right > rect {
+		width: 3px;
+		height: 3px;
+	}
+
 	.bb-region.marker-upstream {
-		fill: var(--color-graph-minimap-upstreamMarker);
-		transform: translate(0px, -4px);
-		z-index: 4;
+		fill: var(--color-graph-minimap-marker-upstream);
+		stroke: var(--color-graph-minimap-marker-upstream);
+		transform: translate(-1px, -4px);
 	}
 	.bb-region.marker-upstream > rect {
-		width: 2px;
+		width: 1px;
 		height: 100%;
 	}
 
 	.bb-region.marker-branch {
-		fill: var(--color-graph-minimap-branchMarker);
-		transform: translate(-2px, 26px);
-		z-index: 3;
+		fill: var(--color-graph-minimap-marker-local-branches);
+		stroke: var(--color-graph-minimap-marker-local-branches);
+		transform: translate(-2px, 32px);
 	}
 	.bb-region.marker-branch > rect {
-		width: 2px;
-		height: 10px;
+		width: 3px;
+		height: 3px;
 	}
 
 	.bb-region.marker-remote {
-		fill: var(--color-graph-minimap-remoteMarker);
-		transform: translate(-3px, 31px);
-		z-index: 2;
+		fill: var(--color-graph-minimap-marker-remote-branches);
+		stroke: var(--color-graph-minimap-marker-remote-branches);
+		transform: translate(-2px, 26px);
 	}
 	.bb-region.marker-remote > rect {
-		width: 2px;
-		height: 4px;
+		width: 3px;
+		height: 3px;
+	}
+
+	.bb-region.marker-stash {
+		fill: var(--color-graph-minimap-marker-stashes);
+		stroke: var(--color-graph-minimap-marker-stashes);
+		transform: translate(-2px, 32px);
+	}
+	.bb-region.marker-stash > rect {
+		width: 3px;
+		height: 3px;
 	}
 
 	.bb-region.marker-tag {
-		fill: var(--color-graph-minimap-tagMarker);
-		transform: translate(1px, 31px);
-		z-index: 1;
+		fill: var(--color-graph-minimap-marker-tags);
+		stroke: var(--color-graph-minimap-marker-tags);
+		transform: translate(-2px, 26px);
 	}
 	.bb-region.marker-tag > rect {
-		width: 1px;
-		height: 4px;
+		width: 3px;
+		height: 3px;
 	}
 
 	/*-- Zoom region --*/
@@ -295,36 +336,56 @@ const styles = css`
 	.bb-tooltip .refs .branch {
 		border-radius: 3px;
 		padding: 0 4px;
-		background-color: var(--color-graph-minimap-branchBackground);
-		border: 1px solid var(--color-graph-minimap-branchBorder);
-		color: var(--color-graph-minimap-branchForeground);
+		background-color: var(--color-graph-minimap-tip-branchBackground);
+		border: 1px solid var(--color-graph-minimap-tip-branchBorder);
+		color: var(--color-graph-minimap-tip-branchForeground);
 	}
 	.bb-tooltip .refs .branch.current {
-		background-color: var(--color-graph-minimap-headBackground);
-		border: 1px solid var(--color-graph-minimap-headBorder);
-		color: var(--color-graph-minimap-headForeground);
+		background-color: var(--color-graph-minimap-tip-headBackground);
+		border: 1px solid var(--color-graph-minimap-tip-headBorder);
+		color: var(--color-graph-minimap-tip-headForeground);
 	}
 	.bb-tooltip .refs .remote {
 		border-radius: 3px;
 		padding: 0 4px;
-		background-color: var(--color-graph-minimap-remoteBackground);
-		border: 1px solid var(--color-graph-minimap-remoteBorder);
-		color: var(--color-graph-minimap-remoteForeground);
+		background-color: var(--color-graph-minimap-tip-remoteBackground);
+		border: 1px solid var(--color-graph-minimap-tip-remoteBorder);
+		color: var(--color-graph-minimap-tip-remoteForeground);
 	}
 	.bb-tooltip .refs .remote.current {
-		background-color: var(--color-graph-minimap-upstreamBackground);
-		border: 1px solid var(--color-graph-minimap-upstreamBorder);
-		color: var(--color-graph-minimap-upstreamForeground);
+		background-color: var(--color-graph-minimap-tip-upstreamBackground);
+		border: 1px solid var(--color-graph-minimap-tip-upstreamBorder);
+		color: var(--color-graph-minimap-tip-upstreamForeground);
+	}
+	.bb-tooltip .refs .stash {
+		border-radius: 3px;
+		padding: 0 4px;
+		background-color: var(--color-graph-minimap-tip-stashBackground);
+		border: 1px solid var(--color-graph-minimap-tip-stashBorder);
+		color: var(--color-graph-minimap-tip-stashForeground);
 	}
 	.bb-tooltip .refs .tag {
 		border-radius: 3px;
 		padding: 0 4px;
-		background-color: var(--color-graph-minimap-tagBackground);
-		border: 1px solid var(--color-graph-minimap-tagBorder);
-		color: var(--color-graph-minimap-tagForeground);
+		background-color: var(--color-graph-minimap-tip-tagBackground);
+		border: 1px solid var(--color-graph-minimap-tip-tagBorder);
+		color: var(--color-graph-minimap-tip-tagForeground);
 	}
 `;
 
+const markerZOrder = [
+	'marker-result',
+	'marker-head-arrow-left',
+	'marker-head-arrow-right',
+	'marker-head',
+	'marker-upstream',
+	'marker-branch',
+	'marker-stash',
+	'marker-remote',
+	'marker-tag',
+	'visible-area',
+];
+
 @customElement({ name: 'graph-minimap', template: template, styles: styles })
 export class GraphMinimap extends FASTElement {
 	chart!: HTMLDivElement;
@@ -460,19 +521,37 @@ export class GraphMinimap extends FASTElement {
 		if (this._markerRegions == null) {
 			if (this.markers != null) {
 				const regions = flatMap(this.markers, ([day, markers]) =>
-					map<GraphMinimapMarker, RegionOptions>(
-						markers,
-						m =>
-							({
-								axis: 'x',
-								start: day,
-								end: day,
-								class: m.current
-									? m.type === 'branch'
-										? 'marker-head'
-										: 'marker-upstream'
-									: `marker-${m.type}`,
-							} satisfies RegionOptions),
+					flatMap<GraphMinimapMarker, RegionOptions>(markers, m =>
+						m.current && m.type === 'branch'
+							? [
+									{
+										axis: 'x',
+										start: day,
+										end: day,
+										class: 'marker-head',
+									} satisfies RegionOptions,
+									{
+										axis: 'x',
+										start: day,
+										end: day,
+										class: 'marker-head-arrow-left',
+									} satisfies RegionOptions,
+									{
+										axis: 'x',
+										start: day,
+										end: day,
+										class: 'marker-head-arrow-right',
+									} satisfies RegionOptions,
+							  ]
+							: [
+									{
+										axis: 'x',
+										start: day,
+										end: day,
+										class:
+											m.current && m.type === 'remote' ? 'marker-upstream' : `marker-${m.type}`,
+									} satisfies RegionOptions,
+							  ],
 					),
 				);
 				this._markerRegions = regions;
@@ -488,14 +567,16 @@ export class GraphMinimap extends FASTElement {
 			let regions: Iterable<RegionOptions> = this.getMarkerRegions();
 
 			if (this.visibleDays != null) {
-				regions = union(regions, [this.getVisibleAreaRegion(this.visibleDays)]);
+				regions = union([this.getVisibleAreaRegion(this.visibleDays)], regions);
 			}
 
 			if (this.searchResults != null) {
 				regions = union(regions, this.getSearchResultsRegions(this.searchResults));
 			}
 
-			this._regions = [...regions];
+			this._regions = [...regions].sort(
+				(a, b) => markerZOrder.indexOf(b.class ?? '') - markerZOrder.indexOf(a.class ?? ''),
+			);
 		}
 		return this._regions;
 	}
@@ -782,6 +863,8 @@ export class GraphMinimap extends FASTElement {
 							groups = groupByMap(markers, m => m.type);
 						}
 
+						const stashesCount = groups?.get('stash')?.length ?? 0;
+
 						return /*html*/ `<div class="bb-tooltip">
 							<div class="header">
 								<span class="header--title">${formatDate(date, 'MMMM Do, YYYY')}</span>
@@ -840,6 +923,7 @@ export class GraphMinimap extends FASTElement {
 										)
 										.join('') ?? ''
 								}
+								${stashesCount ? /*html*/ `<span class="stash">${pluralize('stash', stashesCount, { plural: 'stashes' })}</span>` : ''}
 								${
 									groups
 										?.get('tag')
@@ -885,10 +969,11 @@ export class GraphMinimap extends FASTElement {
 					const grid = this.$.main.selectAll<Element, any>('.bb-grid').node();
 					grid?.removeAttribute('clip-path');
 
-					// Move the regions to be on top of the bars
-					const bars = this.$.main.selectAll<Element, any>('.bb-chart-bars').node();
+					// Move the grid & chart to be behind the regions
 					const regions = this.$.main.selectAll<Element, any>('.bb-regions').node();
-					bars?.insertAdjacentElement('afterend', regions!);
+					regions?.insertAdjacentElement('beforebegin', grid!);
+					const chart = this.$.main.selectAll<Element, any>('.bb-chart').node();
+					regions?.insertAdjacentElement('beforebegin', chart!);
 				},
 			});
 		} else {