Updates autolinks section

- saves expanded state for the autolinks pane
- adds a count of autolinks in the pane header

src/storage.ts

@@ -120,6 +120,7 @@ export const enum WorkspaceStorageKeys {
 	ViewsRepositoriesAutoRefresh = 'gitlens:views:repositories:autoRefresh',
 	ViewsSearchAndCompareKeepResults = 'gitlens:views:searchAndCompare:keepResults',
 	ViewsSearchAndComparePinnedItems = 'gitlens:views:searchAndCompare:pinned',
+	ViewsCommitDetailsAutolinksExpanded = 'gitlens:views:commitDetails:autolinksExpanded',
 
 	Deprecated_DisallowConnectionPrefix = 'gitlens:disallow:connection:',
 	Deprecated_PinnedComparisons = 'gitlens:pinned:comparisons',

src/webviews/apps/commitDetails/commitDetails.html

@@ -73,6 +73,7 @@
 
 				<webview-pane collapsable expanded data-region="rich-pane">
 					<span slot="title">Autolinks</span>
+					<span slot="subtitle" data-region="autolink-count"></span>
 					<div class="commit-details__rich" data-region="rich-info" aria-hidden="true">
 						<p>
 							<code-icon icon="info"></code-icon>&nbsp;Use autolinks to identify external references, like

src/webviews/apps/commitDetails/commitDetails.ts

@@ -15,10 +15,12 @@ import {
 	OpenFileOnRemoteCommandType,
 	PickCommitCommandType,
 	PinCommitCommandType,
+	PreferencesCommandType,
 	SearchCommitCommandType,
 } from '../../commitDetails/protocol';
 import { App } from '../shared/appBase';
 import type { FileChangeItem, FileChangeItemEventDetail } from '../shared/components/commit/file-change-item';
+import type { WebviewPane, WebviewPaneExpandedChangeEventDetail } from '../shared/components/webview-pane';
 import { DOM } from '../shared/dom';
 import './commitDetails.scss';
 import '../shared/components/codicon';
@@ -81,6 +83,11 @@ export class CommitDetailsApp extends App<Serialized<State>> {
 				}
 			}),
 			DOM.on('[data-action="commit-actions-pin"]', 'click', e => this.onTogglePin(e)),
+			DOM.on<WebviewPane, WebviewPaneExpandedChangeEventDetail>(
+				'[data-region="rich-pane"]',
+				'expanded-change',
+				e => this.onExpandedChange(e.detail),
+			),
 		];
 
 		return disposables;
@@ -122,6 +129,12 @@ export class CommitDetailsApp extends App<Serialized<State>> {
 		}
 	}
 
+	private onExpandedChange(e: WebviewPaneExpandedChangeEventDetail) {
+		this.sendCommand(PreferencesCommandType, {
+			autolinksExpanded: e.expanded,
+		});
+	}
+
 	private onTogglePin(e: MouseEvent) {
 		e.preventDefault();
 		this.sendCommand(PinCommitCommandType, { pin: !this.state.pinned });
@@ -410,21 +423,30 @@ export class CommitDetailsApp extends App<Serialized<State>> {
 	}
 
 	renderPullRequestAndAutolinks(state: CommitState) {
-		const $el = document.querySelector<HTMLElement>('[data-region="autolinks"]');
+		const $el = document.querySelector<WebviewPane>('[data-region="rich-pane"]');
 		if ($el == null) {
 			return;
 		}
 
-		const $info = document.querySelector<HTMLElement>('[data-region="rich-info"]');
+		$el.expanded = this.state.preferences?.autolinksExpanded ?? true;
+
+		const $info = $el.querySelector('[data-region="rich-info"]');
+		const $autolinks = $el.querySelector('[data-region="autolinks"]');
 		if (state.pullRequest != null || state.autolinkedIssues?.length) {
-			$el.setAttribute('aria-hidden', 'false');
+			$autolinks?.setAttribute('aria-hidden', 'false');
 			$info?.setAttribute('aria-hidden', 'true');
 			this.renderPullRequest(state);
 			this.renderIssues(state);
 		} else {
-			$el.setAttribute('aria-hidden', 'true');
+			$autolinks?.setAttribute('aria-hidden', 'true');
 			$info?.setAttribute('aria-hidden', 'false');
 		}
+
+		const $count = $el.querySelector('[data-region="autolink-count"]');
+		if ($count == null) return;
+
+		const count = (state.pullRequest != null ? 1 : 0) + (state.autolinkedIssues?.length ?? 0);
+		$count.innerHTML = `${count === 0 ? 'none' : count} found`;
 	}
 
 	renderPullRequest(state: CommitState) {

src/webviews/apps/shared/components/webview-pane.ts

@@ -2,6 +2,10 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import './codicon';
 
+export interface WebviewPaneExpandedChangeEventDetail {
+	expanded: boolean;
+}
+
 @customElement('webview-pane')
 export class WebviewPane extends LitElement {
 	static override styles = css`
@@ -72,7 +76,8 @@ export class WebviewPane extends LitElement {
 			padding-top: 0.6rem;
 		}
 
-		:host([collapsable]:not([expanded])) .content {
+		:host([collapsable]:not([expanded])) .content,
+		:host([collapsable][expanded='false']) .content {
 			display: none;
 		}
 	`;
@@ -114,5 +119,15 @@ export class WebviewPane extends LitElement {
 
 	private toggleExpanded() {
 		this.expanded = !this.expanded;
+
+		this.dispatchEvent(
+			new CustomEvent<WebviewPaneExpandedChangeEventDetail>('expanded-change', {
+				detail: {
+					expanded: this.expanded,
+				},
+				bubbles: true,
+				composed: true,
+			}),
+		);
 	}
 }

src/webviews/commitDetails/commitDetailsWebviewView.ts

@@ -9,6 +9,7 @@ import type { GitFileChange } from '../../git/models/file';
 import { GitFile } from '../../git/models/file';
 import type { IssueOrPullRequest } from '../../git/models/issue';
 import type { PullRequest } from '../../git/models/pullRequest';
+import { WorkspaceStorageKeys } from '../../storage';
 import { executeCommand } from '../../system/command';
 import { debug } from '../../system/decorators/log';
 import type { Deferrable } from '../../system/function';
@@ -24,7 +25,7 @@ import type { ViewNode } from '../../views/nodes/viewNode';
 import type { IpcMessage } from '../protocol';
 import { onIpc } from '../protocol';
 import { WebviewViewBase } from '../webviewViewBase';
-import type { CommitDetails, FileActionParams, State } from './protocol';
+import type { CommitDetails, FileActionParams, SavedPreferences, State } from './protocol';
 import {
 	AutolinkSettingsCommandType,
 	CommitActionsCommandType,
@@ -36,13 +37,14 @@ import {
 	OpenFileOnRemoteCommandType,
 	PickCommitCommandType,
 	PinCommitCommandType,
+	PreferencesCommandType,
 	SearchCommitCommandType,
 } from './protocol';
 
 interface Context {
 	pinned: boolean;
 	commit: GitCommit | undefined;
-
+	preferences: SavedPreferences | undefined;
 	richStateLoaded: boolean;
 	formattedMessage: string | undefined;
 	autolinkedIssues: IssueOrPullRequest[] | undefined;
@@ -66,6 +68,11 @@ export class CommitDetailsWebviewView extends WebviewViewBase<State, Serialized<
 		this._context = {
 			pinned: false,
 			commit: undefined,
+			preferences: {
+				autolinksExpanded: this.container.storage.getWorkspace(
+					WorkspaceStorageKeys.ViewsCommitDetailsAutolinksExpanded,
+				),
+			},
 			richStateLoaded: false,
 			formattedMessage: undefined,
 			autolinkedIssues: undefined,
@@ -193,6 +200,9 @@ export class CommitDetailsWebviewView extends WebviewViewBase<State, Serialized<
 			case PinCommitCommandType.method:
 				onIpc(PinCommitCommandType, e, params => this.updatePinned(params.pin ?? false, true));
 				break;
+			case PreferencesCommandType.method:
+				onIpc(PreferencesCommandType, e, params => this.updatePreferences(params));
+				break;
 		}
 	}
 
@@ -264,6 +274,7 @@ export class CommitDetailsWebviewView extends WebviewViewBase<State, Serialized<
 			pinned: current.pinned,
 			includeRichContent: current.richStateLoaded,
 			// commits: commitChoices,
+			preferences: current.preferences,
 			selected: details,
 			autolinkedIssues: current.autolinkedIssues,
 			pullRequest: current.pullRequest,
@@ -375,6 +386,17 @@ export class CommitDetailsWebviewView extends WebviewViewBase<State, Serialized<
 		this.updateState(immediate);
 	}
 
+	private updatePreferences(preferences: SavedPreferences) {
+		if (this._context.preferences?.autolinksExpanded === preferences.autolinksExpanded) return;
+
+		void this.container.storage.storeWorkspace(
+			WorkspaceStorageKeys.ViewsCommitDetailsAutolinksExpanded,
+			preferences.autolinksExpanded,
+		);
+
+		this.updatePendingContext({ preferences: { autolinksExpanded: preferences.autolinksExpanded } });
+	}
+
 	private updatePendingContext(context: Partial<Context>, force: boolean = false): boolean {
 		let changed = false;
 		for (const [key, value] of Object.entries(context)) {

src/webviews/commitDetails/protocol.ts

@@ -22,8 +22,13 @@ export type CommitDetails = CommitSummary & {
 	stats?: GitCommitStats;
 };
 
+export type SavedPreferences = {
+	autolinksExpanded?: boolean;
+};
+
 export type State = {
 	pinned: boolean;
+	preferences?: SavedPreferences;
 	// commits?: CommitSummary[];
 	includeRichContent?: boolean;
 
@@ -65,6 +70,11 @@ export interface PinParams {
 }
 export const PinCommitCommandType = new IpcCommandType<PinParams>('commit/pin');
 
+export interface PreferenceParams {
+	autolinksExpanded: boolean;
+}
+export const PreferencesCommandType = new IpcCommandType<PreferenceParams>('commit/preferences');
+
 // NOTIFICATIONS
 
 export interface DidChangeStateParams {