Adds sidebar banner to commit details

src/storage.ts

@@ -201,6 +201,7 @@ export interface WorkspaceStorage {
 		commitDetails: {
 			autolinksExpanded?: boolean;
 			filesAsTree?: boolean;
+			dismissed?: string[];
 		};
 	};
 

src/webviews/apps/commitDetails/commitDetails.html

@@ -44,59 +44,113 @@
 			</div>
 			<main class="commit-details commit-detail-panel__main" id="main" tabindex="-1">
 				<div class="commit-details__top">
-					<ul class="commit-details__authors" aria-label="Authors">
-						<li class="commit-details__author" data-region="author">
-							<skeleton-loader></skeleton-loader>
-						</li>
-					</ul>
-					<a
-						class="commit-details__commit-action"
-						href="#"
-						data-action="pin"
-						aria-label="Pin Commit to View"
-						title="Pin Commit to View"
-						><code-icon icon="pin" data-region="commit-pin"></code-icon
-					></a>
-					<a
-						class="commit-details__commit-action"
-						href="#"
-						data-action="commit-actions"
-						data-action-type="sha"
-						aria-label="Copy SHA
-[⌥] Pick Commit..."
-						title="Copy SHA
-[⌥] Pick Commit..."
-					>
-						<code-icon icon="git-commit"></code-icon>
-						<span class="commit-details__sha" data-region="shortsha"></span
-					></a>
-					<a
-						class="commit-details__commit-action"
-						href="#"
-						data-action="commit-actions"
-						data-action-type="scm"
-						aria-label="Open SCM view"
-						title="Open SCM view"
-						><code-icon icon="source-control"></code-icon
-					></a>
-					<a
-						class="commit-details__commit-action"
-						href="#"
-						data-action="commit-actions"
-						data-action-type="graph"
-						aria-label="Open in Commit Graph"
-						title="Open in Commit Graph"
-						><code-icon icon="graph"></code-icon
-					></a>
-					<a
-						class="commit-details__commit-action"
-						href="#"
-						data-action="commit-actions"
-						data-action-type="more"
-						aria-label="Show Commit Actions"
-						title="Show Commit Actions"
-						><code-icon icon="kebab-vertical"></code-icon
-					></a>
+					<div class="commit-banner" data-region="sidebar-banner">
+						<code-icon class="commit-banner__icon" icon="layout-sidebar-right"></code-icon>
+						<div class="commit-banner__message">
+							<h2>Lock to Sidebar</h2>
+							<p>Drag and drop this component to the sidepanel to lock it into view.</p>
+						</div>
+						<svg
+							class="svg-themed commit-banner__media"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 101 49"
+						>
+							<g opacity=".2" stroke="#E6E8FA" class="svg-themed__outline">
+								<rect x=".5" y=".5" width="99.45" height="48" rx="2.5" />
+								<path d="M82 0v49M15.66 0v49M1.23 35.02h15.92" />
+							</g>
+							<rect
+								x="6.5"
+								y="29.5"
+								width="19"
+								height="14"
+								rx=".5"
+								fill="#2E3346"
+								stroke="#91D3FF"
+								class="svg-themed__view"
+							/>
+							<rect
+								x="85.5"
+								y="4.5"
+								width="11"
+								height="41"
+								rx=".5"
+								fill="#2E3346"
+								stroke="#91D3FF"
+								stroke-dasharray="2 2"
+								class="svg-themed__view"
+							/>
+							<path
+								d="M22.33 31a2.67 2.67 0 1 0 5.34 0 2.67 2.67 0 0 0-5.34 0ZM76 7l-5.09-2.73.18 5.77L76 7ZM25.42 31.28c4.91-7.46 20.77-22.07 46.1-23.64l-.05-1c-25.7 1.59-41.82 16.4-46.89 24.08l.84.56Z"
+								fill="#91D3FF"
+								class="svg-themed__line"
+							/>
+						</svg>
+						<a
+							class="commit-banner__icon commit-details__commit-action"
+							href="#"
+							data-action="dismiss-banner"
+							aria-label="Dismiss banner"
+							title="Dismiss banner"
+							><code-icon icon="chrome-close"></code-icon
+						></a>
+					</div>
+					<div class="commit-details__top-menu">
+						<ul class="commit-details__authors" aria-label="Authors">
+							<li class="commit-details__author" data-region="author">
+								<skeleton-loader></skeleton-loader>
+							</li>
+						</ul>
+						<a
+							class="commit-details__commit-action"
+							href="#"
+							data-action="pin"
+							aria-label="Pin Commit to View"
+							title="Pin Commit to View"
+							><code-icon icon="pin" data-region="commit-pin"></code-icon
+						></a>
+						<a
+							class="commit-details__commit-action"
+							href="#"
+							data-action="commit-actions"
+							data-action-type="sha"
+							aria-label="Copy SHA
+	[⌥] Pick Commit..."
+							title="Copy SHA
+	[⌥] Pick Commit..."
+						>
+							<code-icon icon="git-commit"></code-icon>
+							<span class="commit-details__sha" data-region="shortsha"></span
+						></a>
+						<a
+							class="commit-details__commit-action"
+							href="#"
+							data-action="commit-actions"
+							data-action-type="scm"
+							aria-label="Open SCM view"
+							title="Open SCM view"
+							><code-icon icon="source-control"></code-icon
+						></a>
+						<a
+							class="commit-details__commit-action"
+							href="#"
+							data-action="commit-actions"
+							data-action-type="graph"
+							aria-label="Open in Commit Graph"
+							title="Open in Commit Graph"
+							><code-icon icon="graph"></code-icon
+						></a>
+						<a
+							class="commit-details__commit-action"
+							href="#"
+							data-action="commit-actions"
+							data-action-type="more"
+							aria-label="Show Commit Actions"
+							title="Show Commit Actions"
+							><code-icon icon="kebab-vertical"></code-icon
+						></a>
+					</div>
 				</div>
 				<div class="commit-details__message">
 					<p class="commit-details__message-text" data-region="message">

src/webviews/apps/commitDetails/commitDetails.scss

@@ -98,6 +98,26 @@ ul {
 	max-width: 30rem;
 }
 
+.svg-themed {
+	--svg-outline: var(--color-foreground--50);
+	--svg-foreground: var(--color-link-foreground--lighten-20);
+	--svg-overlay: var(--color-highlight--25);
+
+	&__outline {
+		stroke: var(--svg-outline);
+	}
+
+	&__view {
+		fill: var(--svg-overlay);
+		stroke: var(--svg-foreground);
+	}
+
+	&__line {
+		stroke: var(--svg-foreground);
+		fill: var(--svg-foreground);
+	}
+}
+
 .switch {
 	margin-left: auto;
 	display: inline-flex;
@@ -105,9 +125,11 @@ ul {
 	border-radius: 0.25em;
 	gap: 0.1rem;
 
+	.vscode-high-contrast &,
 	.vscode-dark & {
 		background-color: var(--color-background--lighten-075);
 	}
+	.vscode-high-contrast-light &,
 	.vscode-light & {
 		background-color: var(--color-background--darken-075);
 	}
@@ -136,9 +158,11 @@ ul {
 		&:hover {
 			color: var(--vscode-foreground);
 			text-decoration: none;
+			.vscode-high-contrast &,
 			.vscode-dark & {
 				background-color: var(--color-background--lighten-10);
 			}
+			.vscode-high-contrast-light &,
 			.vscode-light & {
 				background-color: var(--color-background--darken-10);
 			}
@@ -146,9 +170,11 @@ ul {
 
 		&.is-selected {
 			color: var(--vscode-foreground);
+			.vscode-high-contrast &,
 			.vscode-dark & {
 				background-color: var(--color-background--lighten-15);
 			}
+			.vscode-high-contrast-light &,
 			.vscode-light & {
 				background-color: var(--color-background--darken-15);
 			}
@@ -215,15 +241,73 @@ ul {
 	}
 }
 
+.commit-banner {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	justify-content: space-between;
+	padding: 1rem;
+	gap: 0.4rem;
+	font-size: 1.2rem;
+	border-radius: 0.3rem;
+	margin-bottom: 1rem;
+
+	.vscode-high-contrast &,
+	.vscode-dark & {
+		background-color: var(--color-background--lighten-075);
+	}
+
+	.vscode-high-contrast-light &,
+	.vscode-light & {
+		background-color: var(--color-background--darken-075);
+	}
+
+	&__message {
+		flex-basis: 60%;
+		margin: {
+			left: 0.6rem;
+			right: 0.6rem;
+		}
+
+		h2 {
+			font-weight: normal;
+			font-size: inherit;
+			margin: {
+				top: 0;
+				bottom: 0.4rem;
+			}
+		}
+		p {
+			margin: 0;
+			opacity: 0.5;
+			transition: font-size ease 100ms;
+
+			@media (max-width: 350px) {
+				font-size: 0.88em;
+			}
+		}
+	}
+
+	&__media {
+		min-width: 10rem;
+		flex-basis: 40%;
+		max-width: 12rem;
+	}
+
+	&__icon {
+		flex: none;
+
+		&:last-child {
+			transform: translateY(-0.4rem);
+		}
+	}
+}
+
 .commit-details {
 	&__top {
 		position: sticky;
 		top: 0;
 		z-index: 1;
-		display: flex;
-		flex-direction: row;
-		align-items: flex-start;
-		justify-content: space-between;
 		padding: {
 			top: 1rem;
 			left: var(--gitlens-gutter-width);
@@ -231,6 +315,13 @@ ul {
 			bottom: 0.5rem;
 		}
 		background-color: var(--vscode-sideBar-background);
+
+		&-menu {
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: space-between;
+		}
 	}
 
 	&__message {

src/webviews/apps/commitDetails/commitDetails.ts

@@ -70,6 +70,7 @@ export class CommitDetailsApp extends App> {
 			DOM.on<FileChangeListItem, FileChangeListItemDetail>('file-change-list-item', 'file-more-actions', e =>
 				this.onFileMoreActions(e.detail),
 			),
+			DOM.on('[data-action="dismiss-banner"]', 'click', e => this.onDismissBanner(e)),
 			DOM.on('[data-action="commit-actions"]', 'click', e => this.onCommitActions(e)),
 			DOM.on('[data-action="pick-commit"]', 'click', e => this.onPickCommit(e)),
 			DOM.on('[data-action="search-commit"]', 'click', e => this.onSearchCommit(e)),
@@ -126,6 +127,19 @@ export class CommitDetailsApp extends App> {
 		}
 	}
 
+	onDismissBanner(e: MouseEvent) {
+		const dismissed = this.state.preferences?.dismissed ?? [];
+		if (dismissed.includes('sidebar')) {
+			return;
+		}
+		dismissed.push('sidebar');
+		this.state.preferences = { ...this.state.preferences, dismissed: dismissed };
+		const parent = (e.target as HTMLElement)?.closest<HTMLElement>('[data-region="sidebar-banner"]') ?? undefined;
+		this.renderBanner(this.state as CommitState, parent);
+
+		this.sendCommand(PreferencesCommandType, { dismissed: dismissed });
+	}
+
 	private onTreeSetting(e: MouseEvent) {
 		const isTree = (e.target as HTMLElement)?.getAttribute('data-switch-value') === 'list-tree';
 		if (!isTree === this.state.preferences?.filesAsTree) return;
@@ -212,6 +226,7 @@ export class CommitDetailsApp extends App> {
 	renderContent() {
 		if (!this.renderCommit(this.state)) return;
 
+		this.renderBanner(this.state);
 		this.renderActions(this.state);
 		this.renderPin(this.state);
 		this.renderSha(this.state);
@@ -225,6 +240,17 @@ export class CommitDetailsApp extends App> {
 		// }
 	}
 
+	renderBanner(state: CommitState, target?: HTMLElement) {
+		if (!state.preferences?.dismissed?.includes('sidebar')) {
+			return;
+		}
+
+		if (!target) {
+			target = document.querySelector<HTMLElement>('[data-region="sidebar-banner"]') ?? undefined;
+		}
+		target?.remove();
+	}
+
 	renderActions(state: CommitState) {
 		const isHiddenForUncommitted = state.selected?.sha === uncommittedSha ? 'true' : 'false';
 		for (const $el of document.querySelectorAll('[data-action-type="graph"],[data-action-type="more"]')) {

src/webviews/commitDetails/commitDetailsWebviewView.ts

@@ -152,6 +152,7 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 				preferences: {
 					autolinksExpanded: this.container.storage.getWorkspace('views:commitDetails:autolinksExpanded'),
 					filesAsTree: this.container.storage.getWorkspace('views:commitDetails:filesAsTree'),
+					dismissed: this.container.storage.getWorkspace('views:commitDetails:dismissed'),
 				},
 			});
 		}
@@ -476,7 +477,8 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 	private updatePreferences(preferences: SavedPreferences) {
 		if (
 			this._context.preferences?.autolinksExpanded === preferences.autolinksExpanded &&
-			this._context.preferences?.filesAsTree === preferences.filesAsTree
+			this._context.preferences?.filesAsTree === preferences.filesAsTree &&
+			this._context.preferences?.dismissed === preferences.dismissed
 		) {
 			return;
 		}
@@ -495,6 +497,11 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 			changes.filesAsTree = preferences.filesAsTree;
 		}
 
+		if (this._context.preferences?.dismissed !== preferences.dismissed) {
+			void this.container.storage.storeWorkspace('views:commitDetails:dismissed', preferences.dismissed);
+			changes.dismissed = preferences.dismissed;
+		}
+
 		this.updatePendingContext({ preferences: changes });
 	}
 

src/webviews/commitDetails/protocol.ts

@@ -28,6 +28,7 @@ export type CommitDetails = CommitSummary & {
 export type SavedPreferences = {
 	autolinksExpanded?: boolean;
 	filesAsTree?: boolean;
+	dismissed?: string[];
 };
 
 export type State = {
@@ -79,6 +80,7 @@ export const PinCommitCommandType = new IpcCommandType('commit/pin');
 export interface PreferenceParams {
 	autolinksExpanded?: boolean;
 	filesAsTree?: boolean;
+	dismissed?: string[];
 }
 export const PreferencesCommandType = new IpcCommandType<PreferenceParams>('commit/preferences');