Adds open worktree in new window to branch cards

Author: d13

src/webviews/apps/plus/home/components/branch-card.ts

@@ -23,6 +23,7 @@ import type {
 	GetOverviewBranch,
 	OpenInGraphParams,
 	OpenInTimelineParams,
+	OpenWorktreeCommandArgs,
 	State,
 } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
@@ -976,8 +977,13 @@ export class GlBranchCard extends GlBranchCardBase {
 			actions.push(
 				html`<action-item
 					label="Open Worktree"
+					alt-label="Open Worktree in New Window"
 					icon="browser"
+					alt-icon="empty-window"
 					href=${this.createCommandLink('gitlens.home.openWorktree')}
+					alt-href=${this.createCommandLink<OpenWorktreeCommandArgs>('gitlens.home.openWorktree', {
+						location: 'newWindow',
+					})}
 				></action-item>`,
 			);
 		} else {
@@ -1002,8 +1008,13 @@ export class GlBranchCard extends GlBranchCardBase {
 			actions.push(
 				html`<action-item
 					label="Open Worktree"
+					alt-label="Open Worktree in New Window"
 					icon="browser"
+					alt-icon="empty-window"
 					href=${this.createCommandLink('gitlens.home.openWorktree')}
+					alt-href=${this.createCommandLink<OpenWorktreeCommandArgs>('gitlens.home.openWorktree', {
+						location: 'newWindow',
+					})}
 				></action-item>`,
 			);
 

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

@@ -1,5 +1,6 @@
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { getAltKeySymbol } from '@env/platform';
 import { focusOutline } from '../styles/lit/a11y.css';
 import '../overlays/tooltip';
 import '../code-icon';
@@ -55,29 +56,89 @@ export class ActionItem extends LitElement {
 	@property()
 	href?: string;
 
+	@property({ attribute: 'alt-href' })
+	altHref?: string;
+
 	@property()
 	label?: string;
 
+	@property({ attribute: 'alt-label' })
+	altLabel?: string;
+
 	@property()
 	icon = '';
 
+	@property({ attribute: 'alt-icon' })
+	altIcon?: string;
+
 	@property({ type: Boolean })
 	disabled = false;
 
 	@query('a')
 	private defaultFocusEl!: HTMLAnchorElement;
 
+	@state()
+	private isAltKeyPressed = false;
+
+	get effectiveIcon(): string {
+		if (this.isAltKeyPressed && this.altIcon) {
+			return this.altIcon;
+		}
+		return this.icon;
+	}
+
+	get effectiveLabel(): string | undefined {
+		if (!this.label && !this.altLabel) {
+			return undefined;
+		}
+		if (this.altLabel) {
+			if (this.isAltKeyPressed) {
+				return this.altLabel;
+			}
+			return `${this.label}\n[${getAltKeySymbol()}] ${this.altLabel}`;
+		}
+		return this.label;
+	}
+
+	get effectiveHref(): string | undefined {
+		if (this.isAltKeyPressed && this.altHref) {
+			return this.altHref;
+		}
+		return this.href;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		window.addEventListener('keydown', this);
+		window.addEventListener('keyup', this);
+	}
+
+	override disconnectedCallback(): void {
+		super.disconnectedCallback();
+		window.removeEventListener('keydown', this);
+		window.removeEventListener('keyup', this);
+	}
+
+	handleEvent(e: KeyboardEvent) {
+		const isAltKey = e.key === 'Alt' || e.altKey;
+		if (e.type === 'keydown') {
+			this.isAltKeyPressed = isAltKey;
+		} else if (e.type === 'keyup' && isAltKey) {
+			this.isAltKeyPressed = false;
+		}
+	}
+
 	override render(): unknown {
 		return html`
-			<gl-tooltip hoist content="${this.label ?? nothing}">
+			<gl-tooltip hoist content="${this.effectiveLabel ?? nothing}">
 				<a
-					role="${!this.href ? 'button' : nothing}"
-					type="${!this.href ? 'button' : nothing}"
+					role="${!this.effectiveHref ? 'button' : nothing}"
+					type="${!this.effectiveHref ? 'button' : nothing}"
 					aria-label="${this.label ?? nothing}"
 					?disabled=${this.disabled}
-					href=${this.href ?? nothing}
+					href=${this.effectiveHref ?? nothing}
 				>
-					<code-icon icon="${this.icon}"></code-icon>
+					<code-icon icon="${this.effectiveIcon}"></code-icon>
 				</a>
 			</gl-tooltip>
 		`;

src/webviews/home/homeWebview.ts

@@ -91,6 +91,7 @@ import type {
 	IntegrationState,
 	OpenInGraphParams,
 	OpenInTimelineParams,
+	OpenWorktreeCommandArgs,
 	OverviewFilters,
 	OverviewRecentThreshold,
 	OverviewRepository,
@@ -1482,12 +1483,13 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	@log<HomeWebviewProvider['worktreeOpen']>({
 		args: { 0: r => `${r.branchId}, worktree: ${r.worktree?.name}` },
 	})
-	private async worktreeOpen(ref: BranchRef) {
+	private async worktreeOpen(args: OpenWorktreeCommandArgs) {
+		const { location, ...ref } = args;
 		const { branch } = await this.getRepoInfoFromRef(ref);
 		const worktree = await branch?.getWorktree();
 		if (worktree == null) return;
 
-		openWorkspace(worktree.uri);
+		openWorkspace(worktree.uri, location ? { location: location } : undefined);
 	}
 
 	@log<HomeWebviewProvider['switchToBranch']>({ args: { 0: r => r.branchId } })

src/webviews/home/protocol.ts

@@ -13,6 +13,7 @@ import type { Subscription } from '../../plus/gk/models/subscription';
 import type { LaunchpadSummaryResult } from '../../plus/launchpad/launchpadIndicator';
 import type { LaunchpadItem } from '../../plus/launchpad/launchpadProvider';
 import type { LaunchpadGroup } from '../../plus/launchpad/models/launchpad';
+import type { OpenWorkspaceLocation } from '../../system/-webview/vscode/workspaces';
 import type { IpcScope, WebviewState } from '../protocol';
 import { IpcCommand, IpcNotification, IpcRequest } from '../protocol';
 
@@ -353,6 +354,10 @@ export interface BranchRef {
 	};
 }
 
+export interface OpenWorktreeCommandArgs extends BranchRef {
+	location?: OpenWorkspaceLocation;
+}
+
 export interface BranchAndTargetRefs extends BranchRef {
 	mergeTargetId: string;
 	mergeTargetName: string;