Adds branch actions to home

Author: d13

src/webviews/apps/plus/home/components/active-work.ts

@@ -7,7 +7,7 @@ import type { GitTrackingState } from '../../../../../git/models/branch';
 import { createWebviewCommandLink } from '../../../../../system/webview';
 import type { GetOverviewBranch, State } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
-import { branchCardStyles, sectionHeadingStyles } from './branch-section';
+import { branchCardStyles, createCommandLink, sectionHeadingStyles } from './branch-section';
 import type { Overview, OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
 import '../../../shared/components/button';
@@ -83,12 +83,13 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	}
 
 	private renderComplete(overview: Overview) {
-		const activeBranches = overview?.repository?.branches?.active;
+		const repo = overview?.repository;
+		const activeBranches = repo?.branches?.active;
 		if (!activeBranches) return html`<span>None</span>`;
 
 		return html`
 			<h3 class="section-heading section-heading--actions">
-				<span><code-icon icon="repo" class="heading-icon"></code-icon> ${overview.repository.name}</span>
+				<span><code-icon icon="repo" class="heading-icon"></code-icon> ${overview!.repository.name}</span>
 				${when(
 					this._homeState.repositories.openCount > 1,
 					() =>
@@ -102,11 +103,11 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 						></span>`,
 				)}
 			</h3>
-			${activeBranches.map(branch => this.renderRepoBranchCard(branch))}
+			${activeBranches.map(branch => this.renderRepoBranchCard(branch, repo.path))}
 		`;
 	}
 
-	private renderRepoBranchCard(branch: GetOverviewBranch) {
+	private renderRepoBranchCard(branch: GetOverviewBranch, repo: string) {
 		const { name, pr, state, workingTreeState, upstream } = branch;
 		return html`
 			<gl-card class="branch-item" active>
@@ -127,10 +128,57 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 					</p>`;
 				})}
 				${when(workingTreeState, () => this.renderStatus(workingTreeState, state))}
+				${this.renderActions(branch, repo)}
 			</gl-card>
 		`;
 	}
 
+	private renderActions(branch: GetOverviewBranch, repo: string) {
+		const branchRefs = {
+			repoPath: repo,
+			branchId: branch.id,
+		};
+		const actions = [];
+		if (branch.pr) {
+			actions.push(
+				html`<action-item
+					label="Open Pull Request Changes"
+					icon="request-changes"
+					href=${createCommandLink('gitlens.home.openPullRequestComparison', branchRefs)}
+				></action-item>`,
+			);
+			actions.push(
+				html`<action-item
+					label="Open Pull Request on Remote"
+					icon="globe"
+					href=${createCommandLink('gitlens.home.openPullRequestOnRemote', branchRefs)}
+				></action-item>`,
+			);
+		} else {
+			actions.push(
+				html`<action-item
+					label="Create Pull Request..."
+					icon="git-pull-request-create"
+					href=${createCommandLink('gitlens.home.createPullRequest', branchRefs)}
+				></action-item>`,
+			);
+		}
+
+		// branch actions
+		actions.push(
+			html`<action-item
+				label="Fetch"
+				icon="gl-repo-fetch"
+				href=${createCommandLink('gitlens.home.fetch', branchRefs)}
+			></action-item>`,
+		);
+
+		if (!actions.length) {
+			return nothing;
+		}
+		return html`<action-nav class="branch-item__actions">${actions}</action-nav>`;
+	}
+
 	private renderBranchStateActions(state?: GitTrackingState, upstream?: { name: string; missing: boolean }) {
 		if (upstream?.missing !== false) {
 			return html`<div>

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

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import type { Commands } from '../../../../../constants.commands';
 import type { GitTrackingState } from '../../../../../git/models/branch';
 import type { GetOverviewBranch } from '../../../../home/protocol';
 import '../../../shared/components/code-icon';
@@ -11,6 +12,8 @@ import '../../../shared/components/commit/commit-stats';
 import '../../../shared/components/formatted-date';
 import '../../../shared/components/pills/tracking';
 import '../../../shared/components/rich/pr-icon';
+import '../../../shared/components/actions/action-item';
+import '../../../shared/components/actions/action-nav';
 
 type OverviewBranch = GetOverviewBranch;
 
@@ -54,14 +57,17 @@ export class GlSection extends LitElement {
 @customElement('gl-branch-section')
 export class GlBranchSection extends LitElement {
 	@property({ type: String }) label!: string;
+	@property() repo!: string;
 	@property({ type: Array }) branches!: GetOverviewBranch[];
 
 	override render() {
 		return html`
 			<gl-section>
 				<span slot="heading">${this.label}</span>
 				<span slot="heading-actions"><slot name="heading-actions"></slot></span>
-				${this.branches.map(branch => html`<gl-branch-card .branch=${branch}></gl-branch-card>`)}
+				${this.branches.map(
+					branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
+				)}
 			</gl-section>
 		`;
 	}
@@ -80,13 +86,16 @@ export const branchCardStyles = css`
 		/* background-color: var(--vscode-gitDecoration-untrackedResourceForeground); */
 	}
 
-	/* .branch-item {} */
+	.branch-item {
+		position: relative;
+	}
 
 	.branch-item__main {
 		display: flex;
 		/* flex-direction: column; */
 		/* align-items: center; */
 		gap: 0.4rem;
+		margin-block-end: 0;
 	}
 
 	.branch-item__icon {
@@ -118,6 +127,7 @@ export const branchCardStyles = css`
 		/* align-items: center; */
 		font-size: 0.9em;
 		color: var(--vscode-descriptionForeground);
+		margin-block-end: 0;
 	}
 	.branch-item__details > * {
 		margin-block: 0;
@@ -165,15 +175,37 @@ export const branchCardStyles = css`
 		overflow: hidden;
 		margin-inline-start: auto;
 	}
+
+	.branch-item__actions {
+		position: absolute;
+		right: 0.4rem;
+		bottom: 0.4rem;
+		padding: 0.2rem 0.4rem;
+		background-color: var(--gl-card-background);
+	}
+
+	.branch-item:not(:focus-within):not(:hover) .branch-item__actions {
+		display: none;
+	}
 `;
 
 @customElement('gl-branch-card')
 export class GlBranchCard extends LitElement {
 	static override styles = branchCardStyles;
 
+	@property()
+	repo!: string;
+
 	@property({ type: Object })
 	branch!: GetOverviewBranch;
 
+	get branchRefs() {
+		return {
+			repoPath: this.repo,
+			branchId: this.branch.id,
+		};
+	}
+
 	override render() {
 		const { name, pr, opened: active, timestamp: date, state, workingTreeState } = this.branch;
 		return html`
@@ -207,6 +239,7 @@ export class GlBranchCard extends LitElement {
 							html`<formatted-date .date=${new Date(date!)} class="branch-item__date"></formatted-date>`,
 					)}
 				</div>
+				${this.renderActions()}
 			</gl-card>
 		`;
 	}
@@ -291,4 +324,73 @@ export class GlBranchCard extends LitElement {
 
 		return nothing;
 	}
+
+	private renderActions() {
+		const actions = [];
+		if (this.branch.pr) {
+			actions.push(
+				html`<action-item
+					label="Open Pull Request Changes"
+					icon="request-changes"
+					href=${this.createCommandLink('gitlens.home.openPullRequestComparison')}
+				></action-item>`,
+			);
+			actions.push(
+				html`<action-item
+					label="Open Pull Request on Remote"
+					icon="globe"
+					href=${this.createCommandLink('gitlens.home.openPullRequestOnRemote')}
+				></action-item>`,
+			);
+		} else {
+			actions.push(
+				html`<action-item
+					label="Create Pull Request..."
+					icon="git-pull-request-create"
+					href=${this.createCommandLink('gitlens.home.createPullRequest')}
+				></action-item>`,
+			);
+		}
+		if (this.branch.worktree) {
+			actions.push(
+				html`<action-item
+					label="Open Worktree"
+					icon="browser"
+					href=${this.createCommandLink('gitlens.home.openWorktree')}
+				></action-item>`,
+			);
+		} else {
+			actions.push(
+				html`<action-item
+					label="Switch to Branch..."
+					icon="gl-switch"
+					href=${this.createCommandLink('gitlens.home.switchToBranch')}
+				></action-item>`,
+			);
+		}
+
+		// branch actions
+		actions.push(
+			html`<action-item
+				label="Fetch"
+				icon="gl-repo-fetch"
+				href=${this.createCommandLink('gitlens.home.fetch')}
+			></action-item>`,
+		);
+
+		if (!actions.length) {
+			return nothing;
+		}
+		return html`<action-nav class="branch-item__actions">${actions}</action-nav>`;
+	}
+
+	private createCommandLink(command: string) {
+		return createCommandLink(command, this.branchRefs);
+	}
+}
+
+export function createCommandLink<T>(command: Commands | string, args: T) {
+	if (args == null) return `command:${command}`;
+
+	return `command:${command}?${encodeURIComponent(typeof args === 'string' ? args : JSON.stringify(args))}`;
 }

src/webviews/apps/plus/home/components/overview.ts

@@ -89,6 +89,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 			<div class="repository">
 				<gl-branch-section
 					label="Recent (${repository.branches.recent.length})"
+					.repo=${repository.path}
 					.branches=${repository.branches.recent}
 				>
 					<gl-branch-threshold-filter
@@ -108,6 +109,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 				<gl-branch-section
 					hidden
 					label="Stale (${repository.branches.stale.length})"
+					.repo=${repository.path}
 					.branches=${repository.branches.stale}
 				></gl-branch-section>
 			</div>