Adds threshold filter to the new home view

src/system/iterable.ts

@@ -16,6 +16,12 @@ export function* chunk<T>(source: T[], size: number): Iterable<T[]> {
 	}
 }
 
+export const IterUtils = {
+	notNull: function <T>(x: T | null | undefined): x is T {
+		return Boolean(x);
+	},
+};
+
 export function* chunkByStringLength(source: string[], maxLength: number): Iterable<string[]> {
 	let chunk: string[] = [];
 

src/webviews/apps/home/home.ts

@@ -5,7 +5,7 @@ import { html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import type { State } from '../../home/protocol';
-import { DidFocusAccount } from '../../home/protocol';
+import { DidChangeOverviewFilter, DidFocusAccount } from '../../home/protocol';
 import { OverviewState, overviewStateContext } from '../plus/home/components/overviewState';
 import type { GLHomeAccountContent } from '../plus/shared/components/home-account-content';
 import { GlApp } from '../shared/app';
@@ -51,6 +51,11 @@ export class GlHomeApp extends GlApp<State> {
 				case DidFocusAccount.is(msg):
 					this.accountContentEl.show();
 					break;
+				case DidChangeOverviewFilter.is(msg):
+					this._overviewState.filter.recent = msg.params.filter.recent;
+					this._overviewState.filter.stale = msg.params.filter.stale;
+					this._overviewState.run(true);
+					break;
 			}
 		});
 	}

src/webviews/apps/plus/home/components/branch-section.ts

@@ -21,6 +21,11 @@ export const sectionHeadingStyles = css`
 		margin-block: 0 0.8rem;
 		text-transform: uppercase;
 	}
+	.section-heading.with-actions {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+	}
 `;
 
 @customElement('gl-branch-section')
@@ -40,7 +45,9 @@ export class GlBranchSection extends LitElement {
 	override render() {
 		return html`
 			<div class="section">
-				<h3 class="section-heading">${this.label}</h3>
+				<h3 class="section-heading with-actions">
+					<span>${this.label}</span><slot name="heading-actions"></slot>
+				</h3>
 				<slot></slot>
 				${this.branches.map(branch => html`<gl-branch-card .branch=${branch}></gl-branch-card>`)}
 			</div>

src/webviews/apps/plus/home/components/branch-threshold-filter.ts

@@ -0,0 +1,71 @@
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import type { OverviewRecentThreshold, OverviewStaleThreshold } from '../../../../home/protocol';
+import '../../../shared/components/checkbox/checkbox';
+import '../../../shared/components/code-icon';
+import { GlElement } from '../../../shared/components/element';
+import '../../../shared/components/menu/index';
+import '../../../shared/components/menu/menu-item';
+import '../../../shared/components/menu/menu-list';
+import '../../../shared/components/overlays/popover';
+
+@customElement('gl-branch-threshold-filter')
+export class GlBranchThresholdFilter extends GlElement {
+	static override readonly styles = [
+		css`
+			.date-select {
+				background: none;
+				outline: none;
+				border: none;
+				cursor: pointer;
+				color: var(--vscode-disabledForeground);
+				text-decoration: none !important;
+				font-weight: 500;
+			}
+			.date-select option {
+				color: var(--vscode-foreground);
+				background-color: var(--vscode-dropdown-background);
+			}
+			.date-select:focus {
+				outline: 1px solid var(--vscode-disabledForeground);
+			}
+			.date-select:hover {
+				color: var(--vscode-foreground);
+				text-decoration: underline !important;
+			}
+		`,
+	];
+
+	@property({ type: String }) value: OverviewRecentThreshold | OverviewStaleThreshold | undefined;
+	@property({ type: Array }) options!: { value: OverviewRecentThreshold | OverviewStaleThreshold; label: string }[];
+	private selectDateFilter(threshold: OverviewRecentThreshold | OverviewStaleThreshold) {
+		const event = new CustomEvent('gl-change', {
+			detail: { threshold: threshold },
+		});
+		this.dispatchEvent(event);
+	}
+
+	override render() {
+		if (!this.options) {
+			return;
+		}
+		return html`
+			<select
+				class="date-select"
+				@change=${(e: Event) =>
+					this.selectDateFilter(
+						(e.target as HTMLSelectElement).value as OverviewRecentThreshold | OverviewStaleThreshold,
+					)}
+			>
+				${repeat(
+					this.options,
+					item =>
+						html`<option value="${item.value}" ?selected=${this.value === item.value}>
+							${item.label}
+						</option>`,
+				)}
+			</select>
+		`;
+	}
+}

src/webviews/apps/plus/home/components/overview.ts

@@ -2,11 +2,15 @@ import { consume } from '@lit/context';
 import { SignalWatcher } from '@lit-labs/signals';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import type { GetOverviewResponse } from '../../../../home/protocol';
+import type { GetOverviewResponse, OverviewRecentThreshold } from '../../../../home/protocol';
+import { SetOverviewFilter } from '../../../../home/protocol';
+import { ipcContext } from '../../../shared/context';
+import type { HostIpc } from '../../../shared/ipc';
 import { sectionHeadingStyles } from './branch-section';
 import type { OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
 import '../../../shared/components/skeleton-loader';
+import './branch-threshold-filter';
 
 type Overview = GetOverviewResponse;
 
@@ -51,16 +55,42 @@ export class GlOverview extends SignalWatcher(LitElement) {
 		`;
 	}
 
+	@consume({ context: ipcContext })
+	private readonly _ipc!: HostIpc;
+
+	private onChangeRecentThresholdFilter(e: CustomEvent<{ threshold: OverviewRecentThreshold }>) {
+		if (!this._overviewState.filter.stale || !this._overviewState.filter.recent) {
+			return;
+		}
+		this._ipc.sendCommand(SetOverviewFilter, {
+			stale: this._overviewState.filter.stale,
+			recent: { ...this._overviewState.filter.recent, threshold: e.detail.threshold },
+		});
+	}
+
 	private renderComplete(overview: Overview) {
 		if (overview == null) return nothing;
-
 		const { repository } = overview;
 		return html`
 			<div class="repository">
 				<gl-branch-section
 					label="Recent (${repository.branches.recent.length})"
 					.branches=${repository.branches.recent}
-				></gl-branch-section>
+				>
+					<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;
+						}[]}
+						.value=${this._overviewState.filter.recent?.threshold}
+					></gl-branch-threshold-filter>
+				</gl-branch-section>
 				<gl-branch-section
 					hidden
 					label="Stale (${repository.branches.stale.length})"

src/webviews/apps/plus/home/components/overviewState.ts

@@ -1,17 +1,18 @@
 import { createContext } from '@lit/context';
-import type { GetOverviewResponse } from '../../../../home/protocol';
-import { DidChangeRepositoryWip, GetOverview } from '../../../../home/protocol';
+import { signalObject } from 'signal-utils/object';
+import type { GetOverviewResponse, OverviewFilters } from '../../../../home/protocol';
+import { DidChangeRepositoryWip, GetOverview, GetOverviewFilterState } from '../../../../home/protocol';
 import { AsyncComputedState } from '../../../shared/components/signal-utils';
 import type { Disposable } from '../../../shared/events';
 import type { HostIpc } from '../../../shared/ipc';
 
 export type Overview = GetOverviewResponse;
 
 export class OverviewState extends AsyncComputedState<Overview> {
-	private _disposable: Disposable | undefined;
+	private readonly _disposable: Disposable | undefined;
 
 	constructor(
-		private _ipc: HostIpc,
+		private readonly _ipc: HostIpc,
 		options?: {
 			runImmediately?: boolean;
 			initial?: Overview;
@@ -30,11 +31,17 @@ export class OverviewState extends AsyncComputedState<Overview> {
 					break;
 			}
 		});
+		void this._ipc.sendRequest(GetOverviewFilterState, undefined).then(rsp => {
+			this.filter.recent = rsp.recent;
+			this.filter.stale = rsp.stale;
+		});
 	}
 
 	dispose() {
 		this._disposable?.dispose();
 	}
+
+	filter = signalObject<Partial<OverviewFilters>>({});
 }
 
 export const overviewStateContext = createContext<Overview>('overviewState');

src/webviews/home/homeWebview.ts

@@ -30,12 +30,16 @@ import type {
 	GetOverviewBranch,
 	GetOverviewBranches,
 	GetOverviewResponse,
+	OverviewFilters,
+	OverviewRecentThreshold,
+	OverviewStaleThreshold,
 	State,
 } from './protocol';
 import {
 	CollapseSectionCommand,
 	DidChangeIntegrationsConnections,
 	DidChangeOrgSettings,
+	DidChangeOverviewFilter,
 	DidChangePreviewEnabled,
 	DidChangeRepositories,
 	DidChangeRepositoryWip,
@@ -45,6 +49,8 @@ import {
 	DismissWalkthroughSection,
 	GetLaunchpadSummary,
 	GetOverview,
+	GetOverviewFilterState,
+	SetOverviewFilter,
 } from './protocol';
 import type { HomeWebviewShowingArgs } from './registration';
 
@@ -87,6 +93,16 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		};
 	}
 
+	private _overviewBranchFilter: OverviewFilters = {
+		recent: {
+			threshold: 'OneWeek',
+		},
+		stale: {
+			threshold: 'OneYear',
+			show: false,
+		},
+	};
+
 	onShowing(
 		loading: boolean,
 		_options?: WebviewShowOptions,
@@ -133,6 +149,11 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		];
 	}
 
+	private setOverviewFilter(value: OverviewFilters) {
+		this._overviewBranchFilter = value;
+		void this.host.notify(DidChangeOverviewFilter, { filter: this._overviewBranchFilter });
+	}
+
 	async onMessageReceived(e: IpcMessage) {
 		switch (true) {
 			case CollapseSectionCommand.is(e):
@@ -141,12 +162,18 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			case DismissWalkthroughSection.is(e):
 				this.dismissWalkthrough();
 				break;
+			case SetOverviewFilter.is(e):
+				this.setOverviewFilter(e.params);
+				break;
 			case GetLaunchpadSummary.is(e):
 				void this.host.respond(GetLaunchpadSummary, e, await getLaunchpadSummary(this.container));
 				break;
 			case GetOverview.is(e):
 				void this.host.respond(GetOverview, e, await this.getBranchOverview());
 				break;
+			case GetOverviewFilterState.is(e):
+				void this.host.respond(GetOverviewFilterState, e, this._overviewBranchFilter);
+				break;
 		}
 	}
 
@@ -202,7 +229,6 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	}
 
 	private getWalkthroughDismissed() {
-		console.log({ test: this.container.storage.get('home:walkthrough:dismissed') });
 		return Boolean(this.container.storage.get('home:walkthrough:dismissed'));
 	}
 
@@ -276,7 +302,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			branchesAndWorktrees?.branches,
 			branchesAndWorktrees?.worktrees,
 			this.container,
-			// TODO: add filters
+			this._overviewBranchFilter,
 		);
 		if (overviewBranches == null) return undefined;
 
@@ -427,26 +453,18 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	}
 }
 
-const branchOverviewDefaults = Object.freeze({
-	recent: { threshold: 1000 * 60 * 60 * 24 * 14 },
-	stale: { threshold: 1000 * 60 * 60 * 24 * 365 },
-});
-
-interface BranchOverviewOptions {
-	recent?: {
-		threshold: number;
-	};
-	stale?: {
-		show?: boolean;
-		threshold?: number;
-	};
-}
+const thresholdValues: Record<OverviewStaleThreshold | OverviewRecentThreshold, number> = {
+	OneDay: 1000 * 60 * 60 * 24 * 1,
+	OneWeek: 1000 * 60 * 60 * 24 * 7,
+	OneMonth: 1000 * 60 * 60 * 24 * 30,
+	OneYear: 1000 * 60 * 60 * 24 * 365,
+};
 
 async function getOverviewBranches(
 	branches: GitBranch[],
 	worktrees: GitWorktree[],
 	container: Container,
-	options?: BranchOverviewOptions,
+	options: OverviewFilters,
 ): Promise<GetOverviewBranches | undefined> {
 	if (branches.length === 0) return undefined;
 
@@ -469,7 +487,7 @@ async function getOverviewBranches(
 	const contributorPromises = new Map<string, Promise<BranchContributorOverview | undefined>>();
 
 	const now = Date.now();
-	const recentThreshold = now - (options?.recent?.threshold ?? branchOverviewDefaults.recent.threshold);
+	const recentThreshold = now - thresholdValues[options.recent.threshold];
 
 	for (const branch of branches) {
 		const wt = worktreesByBranch.get(branch.id);
@@ -520,7 +538,7 @@ async function getOverviewBranches(
 	}
 
 	if (options?.stale?.show === true) {
-		const staleThreshold = now - (options?.stale?.threshold ?? branchOverviewDefaults.stale.threshold);
+		const staleThreshold = now - thresholdValues[options.stale.threshold];
 		sortBranches(branches, {
 			missingUpstream: true,
 			orderBy: 'date:asc',