Adds virtualized tree with keyboard nav support

- Replaces tree with lit-labs/virtualizer for better perf
- Implements keyboard nav (arrow keys, Home/End, Enter/Space, Tab)
- Adds type-ahead search functionality for quick item location
- Improves action button focus handling and Tab navigation

Author: eamodio

ThirdPartyNotices.txt

@@ -5,36 +5,37 @@ This project incorporates components from the projects listed below.
 
 1. @gk-nzaytsev/fast-string-truncated-width version 1.1.0 (https://github.com/nzaytsev/fast-string-truncated-width)
 2. @lit-labs/signals version 0.1.3 (https://github.com/lit/lit)
-3. @lit/context version 1.1.6 (https://github.com/lit/lit)
-4. @lit/react version 1.0.8 (https://github.com/lit/lit)
-5. @lit/task version 1.0.3 (https://github.com/lit/lit)
-6. @octokit/graphql version 9.0.1 (https://github.com/octokit/graphql.js)
-7. @octokit/request-error version 7.0.0 (https://github.com/octokit/request-error.js)
-8. @octokit/request version 10.0.3 (https://github.com/octokit/request.js)
-9. @octokit/types version 14.1.0 (https://github.com/octokit/types.ts)
-10. @opentelemetry/api version 1.9.0 (https://github.com/open-telemetry/opentelemetry-js)
-11. @opentelemetry/exporter-trace-otlp-http version 0.205.0 (https://github.com/open-telemetry/opentelemetry-js)
-12. @opentelemetry/resources version 2.1.0 (https://github.com/open-telemetry/opentelemetry-js)
-13. @opentelemetry/sdk-trace-base version 2.1.0 (https://github.com/open-telemetry/opentelemetry-js)
-14. @opentelemetry/semantic-conventions version 1.37.0 (https://github.com/open-telemetry/opentelemetry-js)
-15. @shoelace-style/shoelace version 2.20.1 (https://github.com/shoelace-style/shoelace)
-16. @vscode/codicons version 0.0.40 (https://github.com/microsoft/vscode-codicons)
-17. billboard.js version 3.17.0 (https://github.com/naver/billboard.js)
-18. diff2html version 3.4.52 (https://github.com/rtfpessoa/diff2html)
-19. driver.js version 1.3.6 (https://github.com/kamranahmedse/driver.js)
-20. https-proxy-agent version 5.0.1 (https://github.com/TooTallNate/node-https-proxy-agent)
-21. iconv-lite version 0.6.3 (https://github.com/ashtuchkin/iconv-lite)
-22. lit version 3.3.1 (https://github.com/lit/lit)
-23. marked version 16.3.0 (https://github.com/markedjs/marked)
-24. microsoft/vscode (https://github.com/microsoft/vscode)
-25. node-fetch version 2.7.0 (https://github.com/bitinn/node-fetch)
-26. os-browserify version 0.3.0 (https://github.com/CoderPuppy/os-browserify)
-27. path-browserify version 1.0.1 (https://github.com/browserify/path-browserify)
-28. react-dom version 19.0.0 (https://github.com/facebook/react)
-29. react version 19.0.0 (https://github.com/facebook/react)
-30. signal-utils version 0.21.1 (https://github.com/proposal-signals/signal-utils)
-31. slug version 11.0.0 (https://github.com/Trott/slug)
-32. sortablejs version 1.15.6 (https://github.com/SortableJS/Sortable)
+3. @lit-labs/virtualizer version 2.1.1 (https://github.com/lit/lit)
+4. @lit/context version 1.1.6 (https://github.com/lit/lit)
+5. @lit/react version 1.0.8 (https://github.com/lit/lit)
+6. @lit/task version 1.0.3 (https://github.com/lit/lit)
+7. @octokit/graphql version 9.0.1 (https://github.com/octokit/graphql.js)
+8. @octokit/request-error version 7.0.0 (https://github.com/octokit/request-error.js)
+9. @octokit/request version 10.0.3 (https://github.com/octokit/request.js)
+10. @octokit/types version 14.1.0 (https://github.com/octokit/types.ts)
+11. @opentelemetry/api version 1.9.0 (https://github.com/open-telemetry/opentelemetry-js)
+12. @opentelemetry/exporter-trace-otlp-http version 0.205.0 (https://github.com/open-telemetry/opentelemetry-js)
+13. @opentelemetry/resources version 2.1.0 (https://github.com/open-telemetry/opentelemetry-js)
+14. @opentelemetry/sdk-trace-base version 2.1.0 (https://github.com/open-telemetry/opentelemetry-js)
+15. @opentelemetry/semantic-conventions version 1.37.0 (https://github.com/open-telemetry/opentelemetry-js)
+16. @shoelace-style/shoelace version 2.20.1 (https://github.com/shoelace-style/shoelace)
+17. @vscode/codicons version 0.0.40 (https://github.com/microsoft/vscode-codicons)
+18. billboard.js version 3.17.0 (https://github.com/naver/billboard.js)
+19. diff2html version 3.4.52 (https://github.com/rtfpessoa/diff2html)
+20. driver.js version 1.3.6 (https://github.com/kamranahmedse/driver.js)
+21. https-proxy-agent version 5.0.1 (https://github.com/TooTallNate/node-https-proxy-agent)
+22. iconv-lite version 0.6.3 (https://github.com/ashtuchkin/iconv-lite)
+23. lit version 3.3.1 (https://github.com/lit/lit)
+24. marked version 16.3.0 (https://github.com/markedjs/marked)
+25. microsoft/vscode (https://github.com/microsoft/vscode)
+26. node-fetch version 2.7.0 (https://github.com/bitinn/node-fetch)
+27. os-browserify version 0.3.0 (https://github.com/CoderPuppy/os-browserify)
+28. path-browserify version 1.0.1 (https://github.com/browserify/path-browserify)
+29. react-dom version 19.0.0 (https://github.com/facebook/react)
+30. react version 19.0.0 (https://github.com/facebook/react)
+31. signal-utils version 0.21.1 (https://github.com/proposal-signals/signal-utils)
+32. slug version 11.0.0 (https://github.com/Trott/slug)
+33. sortablejs version 1.15.6 (https://github.com/SortableJS/Sortable)
 
 %% @gk-nzaytsev/fast-string-truncated-width NOTICES AND INFORMATION BEGIN HERE
 =========================================
@@ -97,6 +98,40 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 =========================================
 END OF  @lit-labs/signals NOTICES AND INFORMATION
 
+%% @lit-labs/virtualizer NOTICES AND INFORMATION BEGIN HERE
+=========================================
+BSD 3-Clause License
+
+Copyright (c) 2017, Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+=========================================
+END OF  @lit-labs/virtualizer NOTICES AND INFORMATION
+
 %% @lit/context NOTICES AND INFORMATION BEGIN HERE
 =========================================
 BSD 3-Clause License

package.json

@@ -25051,6 +25051,7 @@
 		"@gitkraken/shared-web-components": "0.1.1-rc.15",
 		"@gk-nzaytsev/fast-string-truncated-width": "1.1.0",
 		"@lit-labs/signals": "0.1.3",
+		"@lit-labs/virtualizer": "2.1.1",
 		"@lit/context": "1.1.6",
 		"@lit/react": "1.0.8",
 		"@lit/task": "1.0.3",

pnpm-lock.yaml

@@ -21,7 +21,7 @@ export class ActionItem extends LitElement {
 			width: 2rem;
 			height: 2rem;
 			border-radius: 0.5rem;
-			color: inherit;
+			color: var(--vscode-icon-foreground);
 			padding: 0.2rem;
 			vertical-align: text-bottom;
 			text-decoration: none;
@@ -32,7 +32,8 @@ export class ActionItem extends LitElement {
 			${focusOutline}
 		}
 
-		:host(:hover) {
+		:host(:hover),
+		:host(:focus-within) {
 			background-color: var(--vscode-toolbar-hoverBackground);
 		}
 
@@ -47,6 +48,11 @@ export class ActionItem extends LitElement {
 
 		a {
 			color: inherit;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
 		}
 		a:focus {
 			outline: none;
@@ -147,13 +153,24 @@ export class ActionItem extends LitElement {
 					aria-label="${this.effectiveLabel ?? nothing}"
 					?disabled=${this.disabled}
 					href=${this.effectiveHref ?? nothing}
+					tabindex="0"
+					@keydown=${this.handleLinkKeydown}
 				>
 					<code-icon icon="${this.effectiveIcon}"></code-icon>
 				</a>
 			</gl-tooltip>
 		`;
 	}
 
+	private handleLinkKeydown = (e: KeyboardEvent) => {
+		// Handle Space and Enter for button-role links without href
+		if (!this.effectiveHref && (e.key === ' ' || e.key === 'Enter')) {
+			e.preventDefault();
+			// Trigger a click event
+			(e.target as HTMLElement).click();
+		}
+	};
+
 	override focus(options?: FocusOptions): void {
 		this.defaultFocusEl.focus(options);
 	}

src/webviews/apps/shared/components/actions/action-item.ts

@@ -33,15 +33,17 @@ export class ActionNav extends LitElement {
 	private handleSlotChange(_e: Event) {
 		this._slotSubscriptionsDisposer?.();
 
-		if (this.actionNodes.length < 2) return;
+		if (this.actionNodes.length < 1) return;
 
 		const handleKeydown = this.handleKeydown.bind(this);
 		const size = `${this.actionNodes.length}`;
 		const subs = this.actionNodes.map((element, i) => {
 			element.setAttribute('aria-posinset', `${i + 1}`);
 			element.setAttribute('aria-setsize', size);
 			element.setAttribute('tabindex', i === 0 ? '0' : '-1');
-			element.addEventListener('keydown', handleKeydown, false);
+			if (this.actionNodes.length >= 2) {
+				element.addEventListener('keydown', handleKeydown, false);
+			}
 			return {
 				dispose: () => {
 					element?.removeEventListener('keydown', handleKeydown, false);
@@ -55,10 +57,18 @@ export class ActionNav extends LitElement {
 	}
 
 	private handleKeydown(e: KeyboardEvent) {
-		if (!e.target || this.actionNodes == null || this.actionNodes.length < 2) return;
+		if (!e.target || this.actionNodes == null) return;
 		const target = e.target as HTMLElement;
 		const posinset = parseInt(target.getAttribute('aria-posinset') ?? '0', 10);
 
+		// Only handle arrow keys, not Tab
+		if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') {
+			return;
+		}
+
+		// Handle arrow key navigation between action buttons
+		if (this.actionNodes.length < 2) return;
+
 		let $next: HTMLElement | null = null;
 		if (e.key === 'ArrowLeft') {
 			const next = posinset === 1 ? this.actionNodes.length - 1 : posinset - 2;
@@ -70,6 +80,8 @@ export class ActionNav extends LitElement {
 		if ($next == null || $next === target) {
 			return;
 		}
+		e.preventDefault();
+		e.stopPropagation();
 		target.setAttribute('tabindex', '-1');
 		$next.setAttribute('tabindex', '0');
 		$next.focus();