Replace repository with a breadcrumb repo+branch in heading of active item

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Automatically stashes (and pops) uncommitted changes on Pull ([#4296](https://github.com/gitkraken/vscode-gitlens/issues/4296))
 - Removes the option to associate an issue from cards in the RECENT section of the _Home_ view ([#4333](https://github.com/gitkraken/vscode-gitlens/issues/4333))
 - Combines the "Create Pull Request" and "Create with AI" buttons into a split button ([#4330](https://github.com/gitkraken/vscode-gitlens/issues/4330))
+- On the _Home_ view in the active branch card replaces repository with a breadcrumb that has both the repository and current branch, where the repository is collapsible and is hidden by default ([#4332](https://github.com/gitkraken/vscode-gitlens/issues/4332))
 
 ### Fixed
 

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

@@ -21,6 +21,7 @@ import { linkStyles, ruleStyles } from '../../shared/components/vscode.css';
 import { branchCardStyles, GlBranchCardBase } from './branch-card';
 import type { ActiveOverviewState } from './overviewState';
 import { activeOverviewStateContext } from './overviewState';
+import '../../../shared/components/breadcrumbs';
 import '../../../shared/components/button';
 import '../../../shared/components/code-icon';
 import '../../../shared/components/skeleton-loader';
@@ -85,6 +86,13 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 			.uppercase {
 				text-transform: uppercase;
 			}
+
+			gl-breadcrumbs {
+				--gl-tooltip-text-transform: none;
+			}
+			.heading-branch-breadcrumb {
+				text-transform: none;
+			}
 		`,
 	];
 
@@ -147,19 +155,26 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 
 		return html`
 			<gl-section ?loading=${isFetching}>
-				<gl-repo-button-group
-					slot="heading"
-					.repository=${repo}
-					?disabled=${!hasMultipleRepositories}
-					?hasMultipleRepositories=${hasMultipleRepositories}
-					.source=${{ source: 'graph' } as const}
-					@gl-click=${this.onRepositorySelectorClicked}
-					><span slot="tooltip">
-						Switch to Another Repository...
-						<hr />
-						${repo.name}
-					</span></gl-repo-button-group
-				>
+				<gl-breadcrumbs slot="heading">
+					<gl-breadcrumb-item collapsibleState="collapsed" icon="repo"
+						><gl-repo-button-group
+							.repository=${repo}
+							.icon=${false}
+							?disabled=${!hasMultipleRepositories}
+							?hasMultipleRepositories=${hasMultipleRepositories}
+							.source=${{ source: 'graph' } as const}
+							@gl-click=${this.onRepositorySelectorClicked}
+							><span slot="tooltip">
+								Switch to Another Repository...
+								<hr />
+								${repo.name}
+							</span></gl-repo-button-group
+						></gl-breadcrumb-item
+					>
+					<gl-breadcrumb-item collapsibleState="none" icon="git-branch" class="heading-branch-breadcrumb"
+						>${activeBranch.name}</gl-breadcrumb-item
+					>
+				</gl-breadcrumbs>
 				<span class="section-heading-actions" slot="heading-actions">
 					<gl-button
 						aria-busy="${ifDefined(isFetching)}"

src/webviews/apps/shared/components/breadcrumbs.ts

@@ -45,7 +45,7 @@ export class GlBreadcrumbs extends LitElement {
 				margin-right 0.3s cubic-bezier(0.25, 1, 0.5, 1);
 		}
 
-		::slotted(gl-breadcrumb-item[collapsed]:not(:hover):not(:last-of-type))::after {
+		::slotted(gl-breadcrumb-item[collapsed]:not(:hover):not(:focus-within):not(:last-of-type))::after {
 			left: -1.2rem;
 			margin-right: -1.2rem;
 		}

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

@@ -31,6 +31,10 @@ export class GlTooltip extends LitElement {
 			z-index: 1;
 		}
 
+		:host {
+			text-transform: var(--gl-tooltip-text-transform, inherit);
+		}
+
 		:host([data-current-placement^='top']) sl-tooltip::part(base__arrow) {
 			border-top-width: 0;
 			border-left-width: 0;