Adds sha with copy action to commit details

src/webviews/apps/commitDetails/commitDetails.html

@@ -34,8 +34,11 @@
 							class="commit-details__commit-action"
 							href="#"
 							data-action="commit-show-actions"
-							aria-label="Show Commit Actions"
-							title="Show Commit Actions"
+							aria-label="Copy SHA
+[⌥] Show Commit Actions"
+							title="Copy SHA
+[⌥] Show Commit Actions"
+							><span class="commit-details__sha" data-region="shortsha"></span
 							><code-icon icon="kebab-vertical"></code-icon
 						></a>
 					</div>

src/webviews/apps/commitDetails/commitDetails.scss

@@ -223,11 +223,11 @@ ul {
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;
-		width: 20px;
+		// width: 20px;
 		height: 20px;
 		border-radius: 0.25em;
 		color: inherit;
-		padding: 2px;
+		padding: 0.2rem;
 		vertical-align: text-bottom;
 		text-decoration: none;
 
@@ -241,6 +241,11 @@ ul {
 		}
 	}
 
+	&__sha {
+		// padding-top: 0.2rem;
+		margin: 0 0.5rem;
+	}
+
 	&__authors {
 		flex-basis: 100%;
 	}

src/webviews/apps/commitDetails/commitDetails.ts

@@ -107,7 +107,12 @@ export class CommitDetailsApp extends App {
 			return;
 		}
 
-		this.sendCommand(CommitActionsCommandType, undefined);
+		if (e.altKey) {
+			this.sendCommand(CommitActionsCommandType, undefined);
+			return;
+		}
+
+		void navigator.clipboard.writeText(this.state.selected.sha);
 	}
 
 	protected override onMessageReceived(e: MessageEvent) {
@@ -163,6 +168,7 @@ export class CommitDetailsApp extends App {
 			return;
 		}
 
+		this.renderSha();
 		this.renderMessage();
 		this.renderAuthor();
 		this.renderStats();
@@ -174,6 +180,17 @@ export class CommitDetailsApp extends App {
 		}
 	}
 
+	renderSha() {
+		const $els = [...document.querySelectorAll<HTMLElement>('[data-region="shortsha"]')];
+		if ($els.length === 0) {
+			return;
+		}
+
+		$els.forEach($el => {
+			$el.textContent = this.state.selected.shortSha;
+		});
+	}
+
 	renderChoices() {
 		// <nav class="commit-detail-panel__nav" aria-label="list of selected commits" data-region="choices">
 		// 	<p class="commit-detail-panel__commit-count">

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

@@ -47,9 +47,15 @@ export class CommitStats extends LitElement {
 
 	override render() {
 		return html`
-			<span class="stat added"><code-icon icon="diff-added"></code-icon> ${this.added}</span>
-			<span class="stat modified"><code-icon icon="diff-modified"></code-icon> ${this.modified}</span>
-			<span class="stat deleted"><code-icon icon="diff-removed"></code-icon> ${this.removed}</span>
+			<span class="stat added" title="${this.added} added" aria-label="${this.added} added"
+				><code-icon icon="diff-added"></code-icon> ${this.added}</span
+			>
+			<span class="stat modified" title="${this.modified} modified" aria-label="${this.modified} modified"
+				><code-icon icon="diff-modified"></code-icon> ${this.modified}</span
+			>
+			<span class="stat deleted" title="${this.removed} removed" aria-label="${this.removed} removed"
+				><code-icon icon="diff-removed"></code-icon> ${this.removed}</span
+			>
 		`;
 	}
 }