Updates show account view command to the account on home

Author: d13

src/commands/showView.ts

@@ -2,6 +2,7 @@ import { Commands } from '../constants.commands';
 import type { Container } from '../container';
 import type { GraphWebviewShowingArgs } from '../plus/webviews/graph/registration';
 import { command } from '../system/vscode/command';
+import type { HomeWebviewShowingArgs } from '../webviews/home/registration';
 import type { CommandContext } from './base';
 import { Command } from './base';
 
@@ -39,7 +40,10 @@ export class ShowViewCommand extends Command {
 		const command = context.command as Commands;
 		switch (command) {
 			case Commands.ShowAccountView:
-				return this.container.accountView.show();
+				return this.container.homeView.show(
+					undefined,
+					...([{ focusAccount: true }, ...args] as HomeWebviewShowingArgs),
+				);
 			case Commands.ShowBranchesView:
 				return this.container.branchesView.show();
 			case Commands.ShowCommitDetailsView:
@@ -55,7 +59,7 @@ export class ShowViewCommand extends Command {
 			case Commands.ShowGraphView:
 				return this.container.graphView.show(undefined, ...(args as GraphWebviewShowingArgs));
 			case Commands.ShowHomeView:
-				return this.container.homeView.show();
+				return this.container.homeView.show(undefined, ...(args as HomeWebviewShowingArgs));
 			case Commands.ShowLaunchpadView:
 				return this.container.launchpadView.show();
 			case Commands.ShowLineHistoryView:

src/container.ts

@@ -91,6 +91,7 @@ import {
 	registerCommitDetailsWebviewView,
 	registerGraphDetailsWebviewView,
 } from './webviews/commitDetails/registration';
+import type { HomeWebviewShowingArgs } from './webviews/home/registration';
 import { registerHomeWebviewView } from './webviews/home/registration';
 import { RebaseEditorProvider } from './webviews/rebase/rebaseEditor';
 import { registerSettingsWebviewCommands, registerSettingsWebviewPanel } from './webviews/settings/registration';
@@ -628,7 +629,7 @@ export class Container {
 		return this._graphView;
 	}
 
-	private readonly _homeView: WebviewViewProxy<[]>;
+	private readonly _homeView: WebviewViewProxy<HomeWebviewShowingArgs>;
 	get homeView() {
 		return this._homeView;
 	}

src/webviews/apps/home/home.ts

@@ -1,10 +1,13 @@
 /*global*/
 import './home.scss';
 import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query } from 'lit/decorators.js';
 import type { State } from '../../home/protocol';
+import { DidFocusAccount } from '../../home/protocol';
+import type { GLHomeAccountContent } from '../plus/shared/components/home-account-content';
 import { GlApp } from '../shared/app';
 import { scrollableBase } from '../shared/components/styles/lit/base.css';
+import type { Disposable } from '../shared/events';
 import type { HostIpc } from '../shared/ipc';
 import { homeBaseStyles, homeStyles } from './home.css';
 import { HomeStateProvider } from './stateProvider';
@@ -17,13 +20,35 @@ import './components/onboarding';
 @customElement('gl-home-app')
 export class GlHomeApp extends GlApp<State> {
 	static override styles = [homeBaseStyles, scrollableBase, homeStyles];
+	private disposable: Disposable | undefined;
+
+	@query('#account-content')
+	private accountContentEl!: GLHomeAccountContent;
 
 	private badgeSource = { source: 'home', detail: 'badge' };
 
 	protected override createStateProvider(state: State, ipc: HostIpc) {
 		return new HomeStateProvider(this, state, ipc);
 	}
 
+	override connectedCallback(): void {
+		super.connectedCallback();
+
+		this.disposable = this._ipc.onReceiveMessage(msg => {
+			switch (true) {
+				case DidFocusAccount.is(msg):
+					this.accountContentEl.show();
+					break;
+			}
+		});
+	}
+
+	override disconnectedCallback(): void {
+		super.disconnectedCallback();
+
+		this.disposable?.dispose();
+	}
+
 	override render() {
 		return html`
 			<div class="home scrollable">

src/webviews/apps/plus/shared/components/home-account-content.ts

@@ -1,6 +1,6 @@
 import { consume } from '@lit/context';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, query, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { urls } from '../../../../../constants';
 import type { Promo } from '../../../../../plus/gk/account/promos';
@@ -15,6 +15,7 @@ import {
 import { pluralize } from '../../../../../system/string';
 import type { State } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
+import type { GlAccordion } from '../../../shared/components/accordion/accordion';
 import { elementBase, linkBase } from '../../../shared/components/styles/lit/base.css';
 import '../../../shared/components/accordion/accordion';
 import '../../../shared/components/button';
@@ -159,6 +160,9 @@ export class GLHomeAccountContent extends LitElement {
 		`,
 	];
 
+	@query('#accordion')
+	private accordionEl!: GlAccordion;
+
 	@consume<State>({ context: stateContext, subscribe: true })
 	@state()
 	private _state!: State;
@@ -206,7 +210,7 @@ export class GLHomeAccountContent extends LitElement {
 	}
 
 	override render() {
-		return html`<gl-accordion>
+		return html`<gl-accordion id="accordion">
 			<div class="header" slot="header">
 				${this.hasAccount && this._state.avatar
 					? html`<img class="header__media" src=${this._state.avatar} />`
@@ -395,4 +399,13 @@ export class GLHomeAccountContent extends LitElement {
 	private renderPromo(promo: Promo | undefined) {
 		return html`<gl-promo .promo=${promo}></gl-promo>`;
 	}
+
+	override focus() {
+		this.accordionEl.focus();
+	}
+
+	show() {
+		this.accordionEl.open = true;
+		this.accordionEl.focus();
+	}
 }

src/webviews/home/homeWebview.ts

@@ -7,24 +7,28 @@ import type { SubscriptionChangeEvent } from '../../plus/gk/account/subscription
 import { registerCommand } from '../../system/vscode/command';
 import { getContext, onDidChangeContext } from '../../system/vscode/context';
 import type { IpcMessage } from '../protocol';
-import type { WebviewHost, WebviewProvider } from '../webviewProvider';
+import type { WebviewHost, WebviewProvider, WebviewShowingArgs } from '../webviewProvider';
+import type { WebviewShowOptions } from '../webviewsController';
 import type { CollapseSectionParams, DidChangeRepositoriesParams, State } from './protocol';
 import {
 	CollapseSectionCommand,
 	DidChangeIntegrationsConnections,
 	DidChangeOrgSettings,
 	DidChangeRepositories,
 	DidChangeSubscription,
+	DidFocusAccount,
 } from './protocol';
+import type { HomeWebviewShowingArgs } from './registration';
 
 const emptyDisposable = Object.freeze({
 	dispose: () => {
 		/* noop */
 	},
 });
 
-export class HomeWebviewProvider implements WebviewProvider<State> {
+export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWebviewShowingArgs> {
 	private readonly _disposable: Disposable;
+	private _pendingFocusAccount = false;
 
 	constructor(
 		private readonly container: Container,
@@ -45,6 +49,23 @@ export class HomeWebviewProvider implements WebviewProvider<State> {
 		this._disposable.dispose();
 	}
 
+	onShowing(
+		loading: boolean,
+		_options?: WebviewShowOptions,
+		...args: WebviewShowingArgs<HomeWebviewShowingArgs, State>
+	) {
+		const [arg] = args as HomeWebviewShowingArgs;
+		if (arg?.focusAccount === true) {
+			if (!loading && this.host.ready && this.host.visible) {
+				queueMicrotask(() => void this.host.notify(DidFocusAccount, undefined));
+				return true;
+			}
+			this._pendingFocusAccount = true;
+		}
+
+		return true;
+	}
+
 	private onChangeConnectionState() {
 		this.notifyDidChangeOnboardingIntegration();
 	}
@@ -73,6 +94,14 @@ export class HomeWebviewProvider implements WebviewProvider<State> {
 		this.notifyDidChangeRepositories();
 	}
 
+	onReady() {
+		if (this._pendingFocusAccount === true) {
+			this._pendingFocusAccount = false;
+
+			void this.host.notify(DidFocusAccount, undefined);
+		}
+	}
+
 	private onCollapseSection(params: CollapseSectionParams) {
 		const collapsed = this.container.storage.get('home:sections:collapsed');
 		if (collapsed == null) {

src/webviews/home/protocol.ts

@@ -54,3 +54,5 @@ export interface DidChangeOrgSettingsParams {
 	orgSettings: State['orgSettings'];
 }
 export const DidChangeOrgSettings = new IpcNotification<DidChangeOrgSettingsParams>(scope, 'org/settings/didChange');
+
+export const DidFocusAccount = new IpcNotification<undefined>(scope, 'account/didFocus');

src/webviews/home/registration.ts

@@ -1,8 +1,10 @@
 import type { WebviewsController } from '../webviewsController';
 import type { State } from './protocol';
 
+export type HomeWebviewShowingArgs = [{ focusAccount: boolean }];
+
 export function registerHomeWebviewView(controller: WebviewsController) {
-	return controller.registerWebviewView<State>(
+	return controller.registerWebviewView<State, State, HomeWebviewShowingArgs>(
 		{
 			id: 'gitlens.views.home',
 			fileName: 'home.html',