Adds repository picker

Author: d13

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

@@ -1,13 +1,11 @@
 import { consume } from '@lit/context';
 import { SignalWatcher } from '@lit-labs/signals';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
+import { customElement, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import type { GitTrackingState } from '../../../../../git/models/branch';
-import type { GetOverviewBranch, RepositoryChoice, State } from '../../../../home/protocol';
+import type { GetOverviewBranch, State } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
-import { GlElement } from '../../../shared/components/element';
 import { branchCardStyles, sectionHeadingStyles } from './branch-section';
 import type { Overview, OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
@@ -34,6 +32,15 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		`,
 		branchCardStyles,
 		sectionHeadingStyles,
+		css`
+			.is-end {
+				margin-block-end: 0;
+			}
+			.section-heading-action {
+				--button-padding: 0.1rem 0.2rem 0;
+				margin-block: -1rem;
+			}
+		`,
 	];
 
 	@consume<State>({ context: stateContext, subscribe: true })
@@ -80,7 +87,18 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		return html`
 			<h3 class="section-heading section-heading--actions">
 				<span>Active (${activeBranches.length})</span>
-				${when(overview!.choices, () => html`<gl-change-repo .options=${overview!.choices}></gl-change-repo>`)}
+				${when(
+					this._homeState.repositories.openCount > 1,
+					() =>
+						html`<span
+							><gl-button
+								class="section-heading-action"
+								appearance="toolbar"
+								tooltip="Change Repository"
+								@click=${(e: MouseEvent) => this.onChange(e)}
+								><code-icon icon="chevron-down"></code-icon></gl-button
+						></span>`,
+				)}
 			</h3>
 			${activeBranches.map(branch => this.renderRepoBranchCard(overview!.repository.name, branch))}
 		`;
@@ -99,7 +117,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 				${when(state, () => this.renderBranchStateActions(state, upstream))}
 				<p class="branch-item__main">
 					<span class="branch-item__icon">
-						<code-icon icon=${branch.worktree ? 'gl-repositories-view' : 'git-branch'}></code-icon>
+						<code-icon icon=${branch.worktree ? 'gl-worktrees-view' : 'git-branch'}></code-icon>
 					</span>
 					<span class="branch-item__name">${name}</span>
 				</p>
@@ -217,77 +235,14 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 
 		return nothing;
 	}
-}
-
-@customElement('gl-change-repo')
-export class GlChangeRepo extends GlElement {
-	static override styles = [
-		css`
-			.popover::part(body) {
-				padding: 0;
-				font-size: var(--vscode-font-size);
-				background-color: var(--vscode-menu-background);
-			}
-			.trigger {
-				--button-padding: 0.1rem 0.2rem 0;
-				margin-block: -1rem;
-			}
-
-			.option {
-				max-width: 20rem;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.option code-icon {
-				color: var(--color-foreground--50);
-			}
-		`,
-	];
-
-	@consume({ context: overviewStateContext })
-	private _overviewState!: OverviewState;
-
-	@property({ type: Array }) options?: RepositoryChoice[];
-
-	protected getLabel(option: RepositoryChoice) {
-		return option.name;
-	}
-
-	protected onChange(option: RepositoryChoice) {
-		void this.querySelector('gl-popover')?.hide();
-		void this._overviewState.changeRepository(option.path);
-	}
 
-	override render() {
-		if (!this.options) {
-			return;
-		}
-		return html`
-			<gl-popover class="popover" placement="bottom-end" trigger="focus" .distance=${4} .arrow=${false}>
-				<gl-button class="trigger" appearance="toolbar" slot="anchor"
-					><code-icon icon="chevron-down"></code-icon
-				></gl-button>
-				<div slot="content">
-					${repeat(this.options, item => {
-						if (item.selected) {
-							return nothing;
-						}
-						const label = this.getLabel(item);
-						return html`<menu-item class="option" @click=${() => this.onChange(item)}
-							><code-icon icon="repo"></code-icon> ${label}</menu-item
-						>`;
-					})}
-				</div>
-			</gl-popover>
-		`;
+	private onChange(_e: MouseEvent) {
+		void this._overviewState.changeRepository();
 	}
 }
 
 declare global {
 	interface HTMLElementTagNameMap {
 		[activeWorkTagName]: GlActiveWork;
-		'gl-change-repo': GlChangeRepo;
 	}
 }

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

@@ -200,7 +200,7 @@ export class GlBranchCard extends LitElement {
 			return html`<pr-icon state=${branch.pr.state}></pr-icon>`;
 		}
 		if (branch.worktree) {
-			return html`<code-icon icon="gl-repositories-view"></code-icon>`;
+			return html`<code-icon icon="gl-worktrees-view"></code-icon>`;
 		}
 		return html`<code-icon icon="git-branch"></code-icon>`;
 	}

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

@@ -56,8 +56,8 @@ export class OverviewState extends AsyncComputedState<Overview> {
 
 	filter = signalObject<Partial<OverviewFilters>>({});
 
-	async changeRepository(repo: string) {
-		await this._ipc.sendRequest(ChangeOverviewRepository, repo);
+	async changeRepository() {
+		await this._ipc.sendRequest(ChangeOverviewRepository, undefined);
 		this.run(true);
 	}
 }

src/webviews/home/homeWebview.ts

@@ -1,6 +1,7 @@
 import type { ConfigurationChangeEvent } from 'vscode';
 import { Disposable, workspace } from 'vscode';
 import { getAvatarUriFromGravatarEmail } from '../../avatars';
+import { GlyphChars } from '../../constants';
 import type { ContextKeys } from '../../constants.context';
 import type { WebviewTelemetryContext } from '../../constants.telemetry';
 import type { Container } from '../../container';
@@ -16,6 +17,7 @@ import { getOpenedWorktreesByBranch, groupWorktreesByBranch } from '../../git/mo
 import type { Subscription } from '../../plus/gk/account/subscription';
 import type { SubscriptionChangeEvent } from '../../plus/gk/account/subscriptionService';
 import { getLaunchpadSummary } from '../../plus/launchpad/utils';
+import { showRepositoryPicker } from '../../quickpicks/repositoryPicker';
 import { map } from '../../system/iterable';
 import { getSettledValue } from '../../system/promise';
 import { registerCommand } from '../../system/vscode/command';
@@ -33,7 +35,6 @@ import type {
 	OverviewFilters,
 	OverviewRecentThreshold,
 	OverviewStaleThreshold,
-	RepositoryChoice,
 	State,
 } from './protocol';
 import {
@@ -155,9 +156,26 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 
 		return true;
 	}
-	private onOverviewRepositoryChanged(e: string) {
-		this._repositoryChoices = undefined;
-		this.selectRepository(e);
+
+	private async onChooseRepository() {
+		const currentRepo = this.getSelectedRepository();
+		// Ensure that the current repository is always last
+		const repositories = this.container.git.openRepositories.sort(
+			(a, b) =>
+				(a === currentRepo ? 1 : -1) - (b === currentRepo ? 1 : -1) ||
+				(a.starred ? -1 : 1) - (b.starred ? -1 : 1) ||
+				a.index - b.index,
+		);
+
+		const pick = await showRepositoryPicker(
+			`Switch Repository ${GlyphChars.Dot} ${currentRepo?.name}`,
+			'Choose a repository to switch to',
+			repositories,
+		);
+
+		if (pick == null || pick === currentRepo) return;
+
+		this.selectRepository(pick.path);
 	}
 
 	private async onRepositoriesChanged() {
@@ -214,7 +232,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 				void this.host.respond(GetOverviewFilterState, e, this._overviewBranchFilter);
 				break;
 			case ChangeOverviewRepository.is(e):
-				this.onOverviewRepositoryChanged(e.params);
+				await this.onChooseRepository();
 				void this.host.respond(ChangeOverviewRepository, e, undefined);
 				break;
 		}
@@ -354,7 +372,6 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		if (overviewBranches == null) return undefined;
 
 		const result: GetOverviewResponse = {
-			choices: this.getRepositoryChoices(),
 			repository: {
 				name: repo.name,
 				branches: overviewBranches,
@@ -364,23 +381,6 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		return result;
 	}
 
-	private _repositoryChoices: RepositoryChoice[] | undefined;
-	private getRepositoryChoices() {
-		if (this._repositoryChoices == null) {
-			const selectedRepo = this.getSelectedRepository()?.path;
-			this._repositoryChoices = this.container.git.openRepositories.map(r => ({
-				name: r.name,
-				path: r.path,
-				selected: r.path === selectedRepo,
-			}));
-		}
-		if (this._repositoryChoices.length < 2) {
-			return undefined;
-		}
-
-		return this._repositoryChoices;
-	}
-
 	private _repositorySubscription: RepositorySubscription | undefined;
 	private selectRepository(repoPath?: string) {
 		let repo: Repository | undefined;
@@ -483,7 +483,6 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	}
 
 	private notifyDidChangeRepositories() {
-		this._repositoryChoices = undefined;
 		void this.host.notify(DidChangeRepositories, this.getRepositoriesState());
 	}
 

src/webviews/home/protocol.ts

@@ -109,15 +109,8 @@ export interface GetOverviewBranches {
 	stale: GetOverviewBranch[];
 }
 
-export interface RepositoryChoice {
-	name: string;
-	path: string;
-	selected: boolean;
-}
-
 export type GetOverviewResponse =
 	| {
-			choices: RepositoryChoice[] | undefined;
 			repository: {
 				name: string;
 				branches: GetOverviewBranches;
@@ -129,7 +122,7 @@ export const GetOverview = new IpcRequest<GetOverviewRequest, GetOverviewRespons
 export type GetOverviewFilterStateResponse = OverviewFilters;
 export const GetOverviewFilterState = new IpcRequest<void, GetOverviewFilterStateResponse>(scope, 'overviewFilter');
 
-export const ChangeOverviewRepository = new IpcRequest<string, undefined>(scope, 'overview/repository/change');
+export const ChangeOverviewRepository = new IpcRequest<undefined, undefined>(scope, 'overview/repository/change');
 
 // COMMANDS