From f204b0e3a6d01f9dea8a61bf2e59ce23d8084d3e Mon Sep 17 00:00:00 2001
From: nzaytsev <nikolai.zaytsev@gitkraken.com>
Date: Fri, 15 Nov 2024 10:39:59 +0700
Subject: [PATCH 1/3] Adds no branches placeholder to keep the date filter
 always displayed

---
 .../plus/home/components/branch-section.ts    | 14 ++++-
 .../apps/plus/home/components/overview.ts     | 63 ++++++++-----------
 2 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/src/webviews/apps/plus/home/components/branch-section.ts b/src/webviews/apps/plus/home/components/branch-section.ts
index bc19c2feb2eae..1f916b0a28b89 100644
--- a/src/webviews/apps/plus/home/components/branch-section.ts
+++ b/src/webviews/apps/plus/home/components/branch-section.ts
@@ -57,12 +57,20 @@ export class GlBranchSection extends LitElement {
 	@property({ type: Array }) branches!: GetOverviewBranch[];
 	@property({ type: Boolean }) isFetching = false;
 
+	private renderSectionLabel() {
+		if (this.isFetching) {
+			return this.label;
+		}
+		if (!this.branches.length) {
+			return `No ${this.label} branches`;
+		}
+		return `${this.label} (${this.branches.length})`;
+	}
+
 	override render() {
 		return html`
 			<gl-section>
-				<span slot="heading"
-					>${this.label}${when(!this.isFetching, () => html` (${this.branches.length})`)}</span
-				>
+				<span slot="heading">${this.renderSectionLabel()}</span>
 				<span slot="heading-actions"><slot name="heading-actions"></slot></span>
 				${this.branches.map(
 					branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts
index 0545da29d8198..867e0a50f0904 100644
--- a/src/webviews/apps/plus/home/components/overview.ts
+++ b/src/webviews/apps/plus/home/components/overview.ts
@@ -95,42 +95,33 @@ export class GlOverview extends SignalWatcher(LitElement) {
 		if (overview == null) return nothing;
 		const { repository } = overview;
 		return html`
-			${when(
-				repository.branches.recent.length > 0,
-				() => html`
-					<gl-branch-section
-						label="Recent"
-						.isFetching=${isFetching}
-						.repo=${repository.path}
-						.branches=${repository.branches.recent}
-					>
-						<gl-branch-threshold-filter
-							slot="heading-actions"
-							@gl-change=${this.onChangeRecentThresholdFilter.bind(this)}
-							.options=${[
-								{ value: 'OneDay', label: '1 day' },
-								{ value: 'OneWeek', label: '1 week' },
-								{ value: 'OneMonth', label: '1 month' },
-							] satisfies {
-								value: OverviewRecentThreshold;
-								label: string;
-							}[]}
-							.disabled=${isFetching}
-							.value=${this._overviewState.filter.recent?.threshold}
-						></gl-branch-threshold-filter>
-					</gl-branch-section>
-				`,
-			)}
-			${when(
-				repository.branches.stale.length > 0,
-				() => html`
-					<gl-branch-section
-						label="Stale (${repository.branches.stale.length})"
-						.repo=${repository.path}
-						.branches=${repository.branches.stale}
-					></gl-branch-section>
-				`,
-			)}
+			<gl-branch-section
+				label="Recent"
+				.isFetching=${isFetching}
+				.repo=${repository.path}
+				.branches=${repository.branches.recent}
+			>
+				<gl-branch-threshold-filter
+					slot="heading-actions"
+					@gl-change=${this.onChangeRecentThresholdFilter.bind(this)}
+					.options=${[
+						{ value: 'OneDay', label: '1 day' },
+						{ value: 'OneWeek', label: '1 week' },
+						{ value: 'OneMonth', label: '1 month' },
+					] satisfies {
+						value: OverviewRecentThreshold;
+						label: string;
+					}[]}
+					.disabled=${isFetching}
+					.value=${this._overviewState.filter.recent?.threshold}
+				></gl-branch-threshold-filter>
+			</gl-branch-section>
+			<gl-branch-section
+				label="Stale"
+				?hidden=${this._overviewState.filter.stale?.show !== true}
+				.repo=${repository.path}
+				.branches=${repository.branches.stale}
+			></gl-branch-section>
 		`;
 	}
 }

From 452a44f5291330f6b440f02c1ce49e9b0d946bf9 Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Fri, 15 Nov 2024 10:39:56 -0500
Subject: [PATCH 2/3] Prevents rendering stale section

---
 .../apps/plus/home/components/overview.ts        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts
index 867e0a50f0904..a3e35ebc6be83 100644
--- a/src/webviews/apps/plus/home/components/overview.ts
+++ b/src/webviews/apps/plus/home/components/overview.ts
@@ -116,12 +116,16 @@ export class GlOverview extends SignalWatcher(LitElement) {
 					.value=${this._overviewState.filter.recent?.threshold}
 				></gl-branch-threshold-filter>
 			</gl-branch-section>
-			<gl-branch-section
-				label="Stale"
-				?hidden=${this._overviewState.filter.stale?.show !== true}
-				.repo=${repository.path}
-				.branches=${repository.branches.stale}
-			></gl-branch-section>
+			${when(
+				this._overviewState.filter.stale?.show === true,
+				() => html`
+					<gl-branch-section
+						label="Stale"
+						.repo=${repository.path}
+						.branches=${repository.branches.stale}
+					></gl-branch-section>
+				`,
+			)}
 		`;
 	}
 }

From 5db66d61d281341db5d86c8fe2729024fe7345ae Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Fri, 15 Nov 2024 10:51:39 -0500
Subject: [PATCH 3/3] Updates empty state for branch sections

---
 .../apps/plus/home/components/branch-section.ts    | 14 ++++++++++----
 src/webviews/apps/plus/home/components/overview.ts |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/webviews/apps/plus/home/components/branch-section.ts b/src/webviews/apps/plus/home/components/branch-section.ts
index 1f916b0a28b89..b52b4849049a5 100644
--- a/src/webviews/apps/plus/home/components/branch-section.ts
+++ b/src/webviews/apps/plus/home/components/branch-section.ts
@@ -58,12 +58,10 @@ export class GlBranchSection extends LitElement {
 	@property({ type: Boolean }) isFetching = false;
 
 	private renderSectionLabel() {
-		if (this.isFetching) {
+		if (this.isFetching || this.branches.length === 0) {
 			return this.label;
 		}
-		if (!this.branches.length) {
-			return `No ${this.label} branches`;
-		}
+
 		return `${this.label} (${this.branches.length})`;
 	}
 
@@ -75,6 +73,14 @@ export class GlBranchSection extends LitElement {
 				${this.branches.map(
 					branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
 				)}
+				${when(
+					this.branches.length > 0,
+					() =>
+						this.branches.map(
+							branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
+						),
+					() => html`<p>No ${this.label} branches</p>`,
+				)}
 			</gl-section>
 		`;
 	}
diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts
index a3e35ebc6be83..2c8683d38bb12 100644
--- a/src/webviews/apps/plus/home/components/overview.ts
+++ b/src/webviews/apps/plus/home/components/overview.ts
@@ -96,7 +96,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 		const { repository } = overview;
 		return html`
 			<gl-branch-section
-				label="Recent"
+				label="recent"
 				.isFetching=${isFetching}
 				.repo=${repository.path}
 				.branches=${repository.branches.recent}
@@ -120,7 +120,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 				this._overviewState.filter.stale?.show === true,
 				() => html`
 					<gl-branch-section
-						label="Stale"
+						label="stale"
 						.repo=${repository.path}
 						.branches=${repository.branches.stale}
 					></gl-branch-section>