Adds sha label to Visual File History

src/plus/webviews/timeline/protocol.ts

@@ -6,6 +6,7 @@ export interface State {
 	emptyMessage?: string;
 	period: Period;
 	title: string;
+	sha?: string;
 	uri?: string;
 
 	dateFormat: string;

src/plus/webviews/timeline/timelineWebview.ts

@@ -225,6 +225,7 @@ export class TimelineWebview extends WebviewBase {
 				emptyMessage: 'No commits found for the specified time period',
 				period: period,
 				title: title,
+				sha: gitUri.shortSha,
 				uri: current.uri.toString(),
 				dateFormat: dateFormat,
 				shortDateFormat: shortDateFormat,
@@ -276,6 +277,7 @@ export class TimelineWebview extends WebviewBase {
 			dataset: dataset,
 			period: period,
 			title: title,
+			sha: gitUri.shortSha,
 			uri: current.uri.toString(),
 			dateFormat: dateFormat,
 			shortDateFormat: shortDateFormat,

src/plus/webviews/timeline/timelineWebviewView.ts

@@ -270,6 +270,7 @@ export class TimelineWebviewView extends WebviewViewBase {
 				emptyMessage: 'No commits found for the specified time period',
 				period: period,
 				title: title,
+				sha: gitUri.shortSha,
 				uri: current.uri.toString(),
 				dateFormat: dateFormat,
 				shortDateFormat: shortDateFormat,
@@ -321,6 +322,7 @@ export class TimelineWebviewView extends WebviewViewBase {
 			dataset: dataset,
 			period: period,
 			title: title,
+			sha: gitUri.shortSha,
 			uri: current.uri.toString(),
 			dateFormat: dateFormat,
 			shortDateFormat: shortDateFormat,

src/webviews/apps/plus/timeline/timeline.html

@@ -13,6 +13,7 @@
 		<div class="container">
 			<section class="header">
 				<h2 data-bind="title"></h2>
+				<h2 data-bind="sha"></h2>
 				<h2 data-bind="description"></h2>
 				<div class="toolbox">
 					<div class="select-container">

src/webviews/apps/plus/timeline/timeline.scss

@@ -101,17 +101,17 @@ span.button-subaction {
 
 .header {
 	display: grid;
-	grid-template-columns: max-content minmax(min-content, 1fr) max-content;
+	grid-template-columns: max-content min-content minmax(min-content, 1fr) max-content;
 	align-items: baseline;
-	grid-template-areas: 'title description toolbox';
+	grid-template-areas: 'title sha description toolbox';
 	justify-content: start;
 	margin-bottom: 1rem;
 
 	@media all and (max-width: 500px) {
 		grid-template-areas:
-			'title description'
+			'title sha description'
 			'empty toolbox';
-		grid-template-columns: max-content minmax(min-content, 1fr);
+		grid-template-columns: max-content min-content minmax(min-content, 1fr);
 	}
 
 	h2[data-bind='title'] {
@@ -119,6 +119,19 @@ span.button-subaction {
 		margin-bottom: 0;
 	}
 
+	h2[data-bind='sha'] {
+		grid-area: sha;
+		font-size: 1.3em;
+		font-weight: 200;
+		margin-left: 1.5rem;
+		opacity: 0.7;
+		white-space: nowrap;
+
+		.sha {
+			margin-left: 0.25rem;
+		}
+	}
+
 	h2[data-bind='description'] {
 		grid-area: description;
 		font-size: 1.3em;

src/webviews/apps/plus/timeline/timeline.ts

@@ -1,4 +1,3 @@
-'use strict';
 /*global*/
 import './timeline.scss';
 import { provideVSCodeDesignSystem, vsCodeButton, vsCodeDropdown, vsCodeOption } from '@vscode/webview-ui-toolkit';
@@ -16,6 +15,7 @@ import { App } from '../../shared/appBase';
 import { DOM } from '../../shared/dom';
 import type { DataPointClickEvent } from './chart';
 import { TimelineChart } from './chart';
+import '../../shared/components/code-icon';
 
 export class TimelineApp extends App<State> {
 	private _chart: TimelineChart | undefined;
@@ -127,7 +127,7 @@ export class TimelineApp extends App {
 			this._chart.onDidClickDataPoint(this.onChartDataPointClicked, this);
 		}
 
-		let { title } = this.state;
+		let { title, sha } = this.state;
 
 		let description = '';
 		const index = title.lastIndexOf('/');
@@ -137,13 +137,38 @@ export class TimelineApp extends App {
 			title = name;
 		}
 
-		for (const [key, value] of Object.entries({ title: title, description: description })) {
+		function updateBoundData(
+			key: string,
+			value: string | undefined,
+			options?: { hideIfEmpty?: boolean; html?: boolean },
+		) {
 			const $el = document.querySelector(`[data-bind="${key}"]`);
 			if ($el != null) {
-				$el.textContent = String(value) || GlyphChars.Space;
+				const empty = value == null || value.length === 0;
+				if (options?.hideIfEmpty) {
+					$el.classList.toggle('hidden', empty);
+				}
+				if (options?.html && !empty) {
+					$el.innerHTML = value;
+				} else {
+					$el.textContent = String(value) || GlyphChars.Space;
+				}
 			}
 		}
 
+		updateBoundData('title', title);
+		updateBoundData('description', description);
+		updateBoundData(
+			'sha',
+			sha
+				? /*html*/ `<code-icon icon="git-commit" size="16"></code-icon><span class="sha">${sha}</span>`
+				: undefined,
+			{
+				hideIfEmpty: true,
+				html: true,
+			},
+		);
+
 		const $periods = document.getElementById('periods') as HTMLSelectElement;
 		if ($periods != null) {
 			const period = this.state?.period;