Fixes collapsing repo name on current work item section

Adds an `ignoreFocusWithin` property to the breadcrumb item that lets it to collapse even when it holds the focus after a click. This allows to prevent the breadcrumb item from expanding when focused.
(#4387, #4402)

Author: sergeibbb

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

@@ -156,7 +156,7 @@ 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="collapsed" icon="repo" .ignoreFocusWithin=${true}
 						><gl-repo-button-group
 							.repository=${repo}
 							.icon=${false}

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

@@ -143,6 +143,8 @@ export class GlBreadcrumbItem extends LitElement {
 				transition: max-width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
 			}
 
+			:host([collapsed]) .breadcrumb-item:not(:hover).ignore-focus-within .breadcrumb-label,
+			:host([collapsed]) .breadcrumb-item:not(:hover).ignore-focus-within slot[name='children'],
 			:host([collapsed]) .breadcrumb-item:not(:hover):not(:focus-within) .breadcrumb-label,
 			:host([collapsed]) .breadcrumb-item:not(:hover):not(:focus-within) slot[name='children'] {
 				max-width: 0;
@@ -170,6 +172,9 @@ export class GlBreadcrumbItem extends LitElement {
 	@property()
 	icon?: string;
 
+	@property()
+	ignoreFocusWithin?: boolean;
+
 	@property()
 	iconTooltip?: string;
 
@@ -186,9 +191,15 @@ export class GlBreadcrumbItem extends LitElement {
 	}
 
 	override render() {
-		const { collapsed, collapsible } = this;
-
-		return html`<div class=${classMap({ 'breadcrumb-item': true, collapsible: collapsible })}>
+		const { collapsed, collapsible, ignoreFocusWithin } = this;
+
+		return html`<div
+			class=${classMap({
+				'breadcrumb-item': true,
+				collapsible: collapsible,
+				'ignore-focus-within': ignoreFocusWithin ?? false,
+			})}
+		>
 			<span class="breadcrumb-content">
 				${this.renderIcon(collapsible, collapsed)}
 				<slot class="breadcrumb-label"></slot>