Adds stash following to commit details view

src/webviews/apps/commitDetails/commitDetails.scss

@@ -128,48 +128,25 @@ ul {
 	}
 }
 
-.pull-request,
-.issue {
-	display: grid;
+.commit-stashed {
+	display: flex;
 	gap: 0.25rem 0.5rem;
 	justify-content: start;
+	align-items: center;
 
-	&__icon {
-		grid-column: 1;
-		grid-row: 1 / 3;
-		color: var(--vscode-gitlens-mergedPullRequestIconColor);
-	}
-	&__title {
-		grid-column: 2;
-		grid-row: 1;
-		margin: 0;
-		font-size: 1.5rem;
-	}
-	&__date {
-		grid-column: 2;
-		grid-row: 2;
-		margin: 0;
-		font-size: 1.2rem;
-	}
-}
-
-.commit-author {
-	display: grid;
-	gap: 0.25rem 0.5rem;
-	justify-content: start;
-
-	&__avatar {
-		grid-column: 1;
-		grid-row: 1 / 3;
+	&__media {
+		width: 3.6rem;
+		height: 3.6rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
-	&__name {
-		grid-column: 2;
-		grid-row: 1;
-		font-size: 1.5rem;
+	&__media &__icon {
+		width: 2.8rem;
+		height: 2.8rem;
+		font-size: 2.8rem;
 	}
 	&__date {
-		grid-column: 2;
-		grid-row: 2;
 		font-size: 1.2rem;
 	}
 }

src/webviews/apps/commitDetails/commitDetails.ts

@@ -330,11 +330,12 @@ export class CommitDetailsApp extends App> {
 		}
 
 		if (state.selected.files?.length) {
+			const stashAttr = state.selected.isStash ? 'stash ' : '';
 			$el.innerHTML = state.selected.files
 				.map(
 					(file: Record<string, any>) => `
 						<li class="change-list__item">
-							<file-change-item class="commit-details__file" status="${file.status}" path="${file.path}" repo-path="${file.repoPath}" icon="${file.icon.dark}"></file-change-item>
+							<file-change-item class="commit-details__file" ${stashAttr}status="${file.status}" path="${file.path}" repo-path="${file.repoPath}" icon="${file.icon.dark}"></file-change-item>
 						</li>
 					`,
 				)
@@ -351,7 +352,15 @@ export class CommitDetailsApp extends App> {
 			return;
 		}
 
-		if (state.selected.author != null) {
+		if (state.selected?.isStash === true) {
+			$el.innerHTML = `
+				<div class="commit-stashed">
+					<span class="commit-stashed__media"><code-icon class="commit-stashed__icon" icon="inbox"></code-icon></span>
+					<span class="commit-stashed__date">stashed <formatted-date date=${state.selected.author.date} dateFormat="${state.dateFormat}"></formatted-date></span>
+				</div>
+			`;
+			$el.setAttribute('aria-hidden', 'false');
+		} else if (state.selected?.author != null) {
 			$el.innerHTML = `
 				<commit-identity
 					name="${state.selected.author.name}"

src/webviews/apps/shared/components/commit/commit-identity.ts

@@ -46,7 +46,7 @@ export class CommitIdentity extends LitElement {
 	date = '';
 
 	@property()
-	avatar = 'https://www.gravatar.com/avatar/?s=16&d=robohash';
+	avatar = 'https://www.gravatar.com/avatar/?s=64&d=robohash';
 
 	@property()
 	dateFormat = 'MMMM Do, YYYY h:mma';

src/webviews/apps/shared/components/commit/file-change-item.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { FileShowOptions } from '../../../../commitDetails/protocol';
 import '../codicon';
@@ -156,6 +156,9 @@ export class FileChangeItem extends LitElement {
 	@property()
 	icon = '';
 
+	@property({ type: Boolean, reflect: true })
+	stash = false;
+
 	private renderIcon() {
 		if (this.icon !== '') {
 			return html`<img class="change-list__status-icon" src="${this.icon}" />`;
@@ -181,7 +184,8 @@ export class FileChangeItem extends LitElement {
 
 		return html`
 			<a id="item" class="change-list__link" @click=${this.onComparePrevious} href="#">
-				<span class="change-list__status" aria-label="${statusName}">${this.renderIcon()}</span
+				<span class="change-list__status" title="${statusName}" aria-label="${statusName}"
+					>${this.renderIcon()}</span
 				><span class="change-list__filename">${fileName}</span>
 				<small class="change-list__path">${filePath}</small>
 			</a>
@@ -200,21 +204,23 @@ export class FileChangeItem extends LitElement {
 					title="Open Changes with Working File"
 					aria-label="Open Changes with Working File"
 					><code-icon icon="git-compare"></code-icon></a
-				><a
-					class="change-list__action"
-					@click=${this.onOpenFileOnRemote}
-					href="#"
-					title="Open on remote"
-					aria-label="Open on remote"
-					><code-icon icon="globe"></code-icon></a
-				><a
-					class="change-list__action"
-					@click=${this.onMoreActions}
-					href="#"
-					title="Show more actions"
-					aria-label="Show more actions"
-					><code-icon icon="ellipsis"></code-icon
-				></a>
+				>${!this.stash
+					? html`<a
+								class="change-list__action"
+								@click=${this.onOpenFileOnRemote}
+								href="#"
+								title="Open on remote"
+								aria-label="Open on remote"
+								><code-icon icon="globe"></code-icon></a
+							><a
+								class="change-list__action"
+								@click=${this.onMoreActions}
+								href="#"
+								title="Show more actions"
+								aria-label="Show more actions"
+								><code-icon icon="ellipsis"></code-icon
+							></a>`
+					: nothing}
 			</nav>
 		`;
 	}

src/webviews/commitDetails/commitDetailsWebviewView.ts

@@ -21,6 +21,8 @@ import type { LinesChangeEvent } from '../../trackers/lineTracker';
 import { CommitFileNode } from '../../views/nodes/commitFileNode';
 import { CommitNode } from '../../views/nodes/commitNode';
 import { FileRevisionAsCommitNode } from '../../views/nodes/fileRevisionAsCommitNode';
+import { StashFileNode } from '../../views/nodes/stashFileNode';
+import { StashNode } from '../../views/nodes/stashNode';
 import type { ViewNode } from '../../views/nodes/viewNode';
 import type { IpcMessage } from '../protocol';
 import { onIpc } from '../protocol';
@@ -134,12 +136,13 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 
 		if (this._pinned || !this.visible) return;
 
-		const { lineTracker, commitsView, graphWebview } = this.container;
+		const { lineTracker, commitsView, graphWebview, stashesView } = this.container;
 		this._visibilityDisposable = Disposable.from(
 			lineTracker.subscribe(this, lineTracker.onDidChangeActiveLines(this.onActiveLinesChanged, this)),
 			commitsView.onDidChangeVisibility(this.onCommitsViewVisibilityChanged, this),
 			commitsView.onDidChangeSelection(this.onCommitsViewSelectionChanged, this),
 			graphWebview.onDidChangeSelection(this.onGraphWebviewSelectionChanged, this),
+			stashesView.onDidChangeSelection(this.onStashesViewSelectionChanged, this),
 		);
 
 		const commit = this.getBestCommit();
@@ -223,6 +226,13 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 		}
 	}
 
+	private onStashesViewSelectionChanged(e: TreeViewSelectionChangeEvent<ViewNode>) {
+		const node = e.selection?.[0];
+		if (node != null && (node instanceof StashNode || node instanceof StashFileNode)) {
+			this.updateCommit(node.commit);
+		}
+	}
+
 	private onGraphWebviewSelectionChanged(e: GraphSelectionChangeEvent) {
 		this.updateCommit(e.selection[0]);
 	}
@@ -527,6 +537,7 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 		return {
 			sha: commit.sha,
 			shortSha: commit.shortSha,
+			isStash: commit.refType === 'stash',
 			// summary: commit.summary,
 			message: formattedMessage ?? encodeMarkup(commit.message ?? commit.summary),
 			author: { ...commit.author, avatar: authorAvatar.toString(true) },

src/webviews/commitDetails/protocol.ts

@@ -15,6 +15,7 @@ export type CommitSummary = {
 	message: string;
 	author: GitCommitIdentityShape & { avatar: string | undefined };
 	// committer: GitCommitIdentityShape & { avatar: string | undefined };
+	isStash: boolean;
 };
 
 export type CommitDetails = CommitSummary & {