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

(#4332, #4352)

Author: sergeibbb

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

@@ -20,6 +20,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';
@@ -84,6 +85,13 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 			.uppercase {
 				text-transform: uppercase;
 			}
+
+			gl-breadcrumbs {
+				--gl-tooltip-text-transform: none;
+			}
+			.heading-branch-breadcrumb {
+				text-transform: none;
+			}
 		`,
 	];
 
@@ -146,19 +154,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;