Adds inactive selected state to items in Commit Details

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

@@ -157,6 +157,10 @@ export class FileChangeListItem extends FASTElement {
 		this.base?.select(showOptions);
 	}
 
+	deselect() {
+		this.base?.deselect();
+	}
+
 	override focus(options?: FocusOptions | undefined): void {
 		this.base?.focus(options);
 	}

src/webviews/apps/shared/components/list/list-container.ts

@@ -17,6 +17,8 @@ const styles = css`
 type ListItemTypes = ListItem | FileChangeListItem;
 @customElement({ name: 'list-container', template: template, styles: styles })
 export class ListContainer extends FASTElement {
+	private _lastSelected: ListItem | undefined;
+
 	@observable
 	itemNodes?: ListItemTypes[];
 
@@ -33,14 +35,17 @@ export class ListContainer extends FASTElement {
 			?.filter(node => node.nodeType === 1)
 			.map(node => {
 				const keyHandler = this.handleKeydown.bind(this);
+				const beforeSelectHandler = this.handleBeforeSelected.bind(this);
 				const selectHandler = this.handleSelected.bind(this);
 				node.addEventListener('keydown', keyHandler, false);
+				node.addEventListener('select', beforeSelectHandler, false);
 				node.addEventListener('selected', selectHandler, false);
 
 				return {
 					dispose: function () {
 						node?.removeEventListener('keydown', keyHandler, false);
-						node?.addEventListener('selected', selectHandler, false);
+						node?.removeEventListener('select', beforeSelectHandler, false);
+						node?.removeEventListener('selected', selectHandler, false);
 					},
 				};
 			});
@@ -50,8 +55,19 @@ export class ListContainer extends FASTElement {
 		};
 	}
 
+	handleBeforeSelected(e: Event) {
+		if (!e.target) return;
+
+		const target = e.target as ListItem;
+		if (this._lastSelected != null && this._lastSelected !== target) {
+			this._lastSelected.deselect();
+		}
+		this._lastSelected = target;
+	}
+
 	handleSelected(e: CustomEvent<ListItemSelectedDetail>) {
 		if (!e.target || !e.detail.branch) return;
+
 		const target = e.target as ListItem;
 		const level = target.getAttribute('level');
 

src/webviews/apps/shared/components/list/list-item.ts

@@ -69,6 +69,11 @@ const styles = css`
 		background-color: var(--vscode-list-hoverBackground);
 	}
 
+	:host([active]) {
+		color: var(--vscode-list-inactiveSelectionForeground);
+		background-color: var(--vscode-list-inactiveSelectionBackground);
+	}
+
 	:host(:focus-within) {
 		outline: 1px solid var(--vscode-list-focusOutline);
 		outline-offset: -0.1rem;
@@ -132,6 +137,7 @@ const styles = css`
 		left: 0.8rem;
 		width: 0.1rem;
 		transition: border-color 0.1s linear;
+		opacity: 0.4;
 	}
 
 	:host-context(.indentGuides-always) .node--connector::before,
@@ -215,10 +221,13 @@ export class ListItem extends FASTElement {
 	}
 
 	select(_showOptions?: TextDocumentShowOptions, quiet = false) {
+		this.$emit('select');
+
 		// TODO: this needs to be implemented
 		if (this.branch) {
 			this.expanded = !this.expanded;
 		}
+
 		this.active = true;
 		if (!quiet) {
 			window.requestAnimationFrame(() => {
@@ -232,6 +241,10 @@ export class ListItem extends FASTElement {
 		}
 	}
 
+	deselect() {
+		this.active = false;
+	}
+
 	override focus(options?: FocusOptions | undefined): void {
 		this.shadowRoot?.getElementById('item')?.focus(options);
 	}