Modifies issue row when no issue is associated with the active branch

(#4332, #4349)

Author: sergeibbb

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

@@ -5,6 +5,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isSubscriptionTrialOrPaidFromState } from '../../../../../plus/gk/utils/subscription.utils';
+import type { AssociateIssueWithBranchCommandArgs } from '../../../../../plus/startWork/startWork';
 import { createCommandLink } from '../../../../../system/commands';
 import { createWebviewCommandLink } from '../../../../../system/webview';
 import type {
@@ -231,6 +232,11 @@ export class GlActiveBranchCard extends GlBranchCardBase {
 				flex-direction: column;
 				gap: 0.8rem;
 			}
+
+			span.branch-item__missing {
+				color: var(--vscode-descriptionForeground);
+				font-style: italic;
+			}
 		`,
 	];
 
@@ -511,4 +517,30 @@ export class GlActiveBranchCard extends GlBranchCardBase {
 	protected getCollapsedActions(): TemplateResult[] {
 		return [];
 	}
+
+	protected override renderIssuesItem(): TemplateResult | NothingType {
+		const issues = [...(this.issues ?? []), ...(this.autolinks ?? [])];
+		if (!issues.length) {
+			if (!this.expanded) return nothing;
+
+			return html`<div class="branch-item__row" full>
+				<span class="branch-item__missing" full>Current work item</span>
+				<gl-tooltip hoist content="Associate an issue">
+					<a
+						href=${this.createCommandLink<AssociateIssueWithBranchCommandArgs>(
+							'gitlens.associateIssueWithBranch',
+							{
+								branch: this.branch.reference,
+								source: 'home',
+							},
+						)}
+						><span class="branch-item__icon"> <issue-icon></issue-icon> </span
+					></a>
+				</gl-tooltip>
+			</div>`;
+		}
+		return super.renderIssuesItem();
+	}
 }
+
+type NothingType = typeof nothing;