Adds repo provider icon to active work in home

Author: d13

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

@@ -90,6 +90,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 			gl-breadcrumbs {
 				--gl-tooltip-text-transform: none;
 			}
+
 			.heading-branch-breadcrumb {
 				text-transform: none;
 			}
@@ -103,6 +104,9 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	@consume({ context: activeOverviewStateContext })
 	private _activeOverviewState!: ActiveOverviewState;
 
+	@state()
+	private repoCollapsed = true;
+
 	get isPro() {
 		return isSubscriptionTrialOrPaidFromState(this._homeState.subscription.state);
 	}
@@ -156,13 +160,13 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		return html`
 			<gl-section ?loading=${isFetching}>
 				<gl-breadcrumbs slot="heading">
-					<gl-breadcrumb-item collapsibleState="collapsed" icon="repo"
+					<gl-breadcrumb-item collapsibleState="none" class="heading-repo-breadcrumb"
 						><gl-repo-button-group
 							.repository=${repo}
-							.icon=${false}
 							?disabled=${!hasMultipleRepositories}
 							?hasMultipleRepositories=${hasMultipleRepositories}
 							.source=${{ source: 'graph' } as const}
+							?expandable=${true}
 							@gl-click=${this.onRepositorySelectorClicked}
 							><span slot="tooltip">
 								Switch to Another Repository...

src/webviews/apps/shared/components/repo-button-group.ts

@@ -38,19 +38,32 @@ export class GlRepoButtonGroup extends GlElement {
 		refButtonBaseStyles,
 		truncatedButtonStyles,
 		css`
-			:host([icons='1']) {
+			:host([icons='1']:not([expandable])) {
 				min-width: 7rem;
 			}
 
-			:host([icons='2']) {
+			:host([icons='2']:not([expandable])) {
 				min-width: 9.4rem;
 			}
 
+			:host([icons='2'][expandable]) {
+				min-width: 5.6rem;
+			}
+
 			.indicator-dot {
 				--gl-indicator-color: green;
 				--gl-indicator-size: 0.4rem;
 				margin-left: -0.2rem;
 			}
+
+			/* :host([expandable]) .truncated-button {
+				transition: max-width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+			} */
+
+			:host([expandable]:not(:hover, :focus-within)) .truncated-button {
+				min-width: 0;
+				max-width: 0;
+			}
 		`,
 		pickerIconStyles,
 	];
@@ -73,6 +86,9 @@ export class GlRepoButtonGroup extends GlElement {
 	@property({ type: Object })
 	source?: Source;
 
+	@property({ type: Boolean, reflect: true })
+	expandable = false;
+
 	@property({ type: Number, reflect: true })
 	get icons() {
 		if (this.repository?.provider === undefined) return undefined;
@@ -138,7 +154,7 @@ export class GlRepoButtonGroup extends GlElement {
 		const { provider } = repo;
 		const connectedIntegration = provider.integration?.connected;
 
-		return html`<gl-popover placement="bottom">
+		return html`<gl-popover placement="bottom" trigger="hover click focus">
 				<gl-button
 					slot="anchor"
 					part="provider-icon"