Adds no branches placeholder to keep the date filter always displayed

Author: nzaytsev

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>`,

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>
 		`;
 	}
 }