Moves secondary actions to menu in home active section

Author: d13

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

@@ -26,6 +26,7 @@ import '../../../shared/components/skeleton-loader';
 import '../../../shared/components/card/card';
 import '../../../shared/components/commit/commit-stats';
 import '../../../shared/components/menu/menu-item';
+import '../../../shared/components/menu/menu-label';
 import '../../../shared/components/overlays/popover';
 import '../../../shared/components/overlays/tooltip';
 import '../../../shared/components/pills/tracking';
@@ -62,6 +63,10 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 			.uppercase {
 				text-transform: uppercase;
 			}
+
+			menu-item {
+				margin-inline: 0.5rem;
+			}
 		`,
 	];
 
@@ -250,14 +255,67 @@ export class GlActiveBranchCard extends GlBranchCardBase {
 		`;
 	}
 
+	private renderActionsMenu() {
+		const aiEnabled = this._homeState.orgSettings.ai && this._homeState.aiEnabled;
+		const isFetching = this.busy;
+		const workingTreeState = this.wip?.workingTreeState;
+		const hasWip =
+			workingTreeState != null &&
+			workingTreeState.added + workingTreeState.changed + workingTreeState.deleted > 0;
+
+		const actions = [];
+
+		if (hasWip && aiEnabled) {
+			actions.push(
+				html`<menu-item ?disabled=${isFetching} href=${this.createCommandLink('gitlens.ai.explainWip:home')}
+					>Explain Working Changes (Preview)</menu-item
+				>`,
+			);
+		}
+
+		if (aiEnabled) {
+			actions.push(
+				html`<menu-item ?disabled=${isFetching} href=${this.createCommandLink('gitlens.ai.explainBranch:home')}
+					>Explain Branch (Preview)</menu-item
+				>`,
+			);
+		}
+
+		if (hasWip) {
+			actions.push(
+				html`<menu-item ?disabled=${isFetching} href=${this.createCommandLink('gitlens.home.createCloudPatch')}
+					>Share as Cloud Patch</menu-item
+				>`,
+			);
+		}
+
+		if (actions.length === 0) return undefined;
+
+		return html`<gl-popover
+			appearance="menu"
+			trigger="click focus"
+			placement="bottom-end"
+			.arrow=${false}
+			distance="0"
+		>
+			<gl-button slot="anchor" appearance="toolbar" tooltipPlacement="top" tooltip="Additional Actions">
+				<code-icon icon="ellipsis"></code-icon>
+			</gl-button>
+			<div slot="content">
+				<menu-label>Actions</menu-label>
+				${actions}
+			</div>
+		</gl-popover>`;
+	}
+
 	private renderBranchStateActions() {
 		const { name, upstream } = this.branch;
 
 		const actions: TemplateResult[] = [];
 
 		const wrappedActions = () => {
-			if (actions.length === 0) return undefined;
-			return html`<div><button-container>${actions}</button-container></div>`;
+			if (actions.length === 0) return this.renderActionsMenu();
+			return html`<div><button-container>${actions}${this.renderActionsMenu()}</button-container></div>`;
 		};
 
 		const isFetching = this.busy;
@@ -280,40 +338,8 @@ export class GlActiveBranchCard extends GlBranchCardBase {
 						tooltip="Generate Message &amp; Commit..."
 						><code-icon icon="sparkle" slot="prefix"></code-icon>Commit
 					</gl-button>
-					<gl-button
-						aria-busy=${ifDefined(isFetching)}
-						?disabled=${isFetching}
-						href=${this.createCommandLink('gitlens.ai.explainWip:home')}
-						appearance="secondary"
-						tooltip="Explain Working Changes (Preview)"
-						><code-icon icon="sparkle" slot="prefix"></code-icon>WIP
-					</gl-button>
 				`);
 			}
-
-			actions.push(html`
-				<gl-button
-					aria-busy=${ifDefined(isFetching)}
-					?disabled=${isFetching}
-					href=${this.createCommandLink('gitlens.home.createCloudPatch')}
-					appearance="secondary"
-					tooltip="Share as Cloud Patch"
-					><code-icon icon="gl-cloud-patch-share"></code-icon>
-				</gl-button>
-			`);
-		}
-
-		if (this._homeState.orgSettings.ai && this._homeState.aiEnabled) {
-			actions.push(html`
-				<gl-button
-					aria-busy=${ifDefined(isFetching)}
-					?disabled=${isFetching}
-					href=${this.createCommandLink('gitlens.ai.explainBranch:home')}
-					appearance="secondary"
-					tooltip="Explain Branch (Preview)"
-					><code-icon icon="sparkle" slot="prefix"></code-icon>Branch
-				</gl-button>
-			`);
 		}
 
 		if (this.wip?.pausedOpStatus != null) {

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

@@ -46,6 +46,10 @@ import '../../../shared/components/branch-icon';
 import './merge-target-status';
 
 export const branchCardStyles = css`
+	* {
+		box-sizing: border-box;
+	}
+
 	gl-avatar-list {
 		--gl-avatar-size: 2.4rem;
 		margin-block: -0.4rem;

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

@@ -19,6 +19,8 @@ export class MenuItem extends LitElement {
 				text-align: left;
 				height: auto;
 				line-height: 2.2rem;
+				-webkit-font-smoothing: auto;
+				border-radius: var(--menu-item-radius, 0.3rem);
 			}
 
 			:host([role='option']:hover) {

src/webviews/apps/shared/components/menu/menu-label.ts

@@ -18,6 +18,7 @@ export class MenuLabel extends LitElement {
 				color: var(--vscode-menu-foreground);
 				opacity: 0.6;
 				user-select: none;
+				-webkit-font-smoothing: auto;
 			}
 		`,
 	];

src/webviews/apps/shared/components/overlays/popover.ts

@@ -173,6 +173,13 @@ export class GlPopover extends GlElement {
 				width: max-content;
 			}
 
+			:host([appearance='menu']) {
+				--sl-tooltip-padding: 0 var(--sl-spacing-2x-small) var(--sl-spacing-2x-small);
+				--sl-tooltip-font-size: var(--vscode-font-size);
+				--sl-tooltip-background-color: var(--vscode-menu-background);
+				--arrow-color: var(--vscode-menu-background);
+			}
+
 			/* .popover::part(hover-bridge) {
 			background: tomato;
 			opacity: 1;
@@ -223,6 +230,9 @@ export class GlPopover extends GlElement {
 	@property({ type: Boolean })
 	hoist = false;
 
+	@property({ reflect: true })
+	appearance?: 'menu';
+
 	get currentPlacement(): SlPopup['placement'] {
 		return (this.popup?.getAttribute('data-current-placement') ?? this.placement) as SlPopup['placement'];
 	}
@@ -290,7 +300,7 @@ export class GlPopover extends GlElement {
 			<div
 				part="body"
 				id="popover"
-				class="popover__body scrollable"
+				class="popover__body scrollable ${this.appearance === 'menu' ? 'is-menu' : ''}"
 				role="tooltip"
 				aria-live=${this.open ? 'polite' : 'off'}
 			>