Closes #4083 shows switch and open worktree actions when collapsed

Author: d13

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

@@ -399,4 +399,8 @@ export class GlActiveBranchCard extends GlBranchCardBase {
 			></action-item>`,
 		];
 	}
+
+	protected getCollapsedActions(): TemplateResult[] {
+		return [];
+	}
 }

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

@@ -130,19 +130,17 @@ export const branchCardStyles = css`
 		gap: 0.6rem;
 	}
 
-	/*
-	.branch-item__actions {
+	.branch-item__collapsed-actions {
 		position: absolute;
 		right: 0.4rem;
 		bottom: 0.4rem;
 		padding: 0.2rem 0.4rem;
 		background-color: var(--gl-card-hover-background);
 	}
 
-	.branch-item:not(:focus-within):not(:hover) .branch-item__actions {
+	.branch-item:not(:focus-within):not(:hover) .branch-item__collapsed-actions {
 		${srOnlyStyles}
 	}
-	*/
 
 	.pill {
 		--gl-pill-border: color-mix(in srgb, transparent 80%, var(--color-foreground));
@@ -623,6 +621,16 @@ export abstract class GlBranchCardBase extends GlElement {
 		return html`<action-nav>${actions}</action-nav>`;
 	}
 
+	protected abstract getCollapsedActions(): TemplateResult[];
+	protected renderCollapsedActions(): TemplateResult | NothingType {
+		if (this.expanded) return nothing;
+
+		const actions = this.getCollapsedActions?.();
+		if (!actions?.length) return nothing;
+
+		return html`<action-nav class="branch-item__collapsed-actions">${actions}</action-nav>`;
+	}
+
 	protected createCommandLink<T>(command: GlCommands, args?: T | any): string {
 		return createCommandLink<T>(command, args ?? this.branchRef);
 	}
@@ -843,10 +851,35 @@ export class GlBranchCard extends GlBranchCardBase {
 				<div class="branch-item__container">
 					${this.renderBranchItem(this.renderBranchActions())}${this.renderPrItem()}${this.renderIssuesItem()}
 				</div>
+				${this.renderCollapsedActions()}
 			</gl-card>
 		`;
 	}
 
+	protected getCollapsedActions(): TemplateResult[] {
+		const actions = [];
+
+		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>`,
+			);
+		}
+
+		return actions;
+	}
+
 	protected getBranchActions(): TemplateResult[] {
 		const actions = [];