Makes entire walkthrough clickable on home

Author: d13

src/webviews/apps/home/components/onboarding.ts

@@ -1,15 +1,15 @@
 import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, query, state } from 'lit/decorators.js';
 import { Commands } from '../../../../constants.commands';
 import { createCommandLink } from '../../../../system/commands';
 import type { State } from '../../../home/protocol';
 import { DismissWalkthroughSection } from '../../../home/protocol';
+import type { GlButton } from '../../shared/components/button';
 import { ipcContext } from '../../shared/context';
 import type { HostIpc } from '../../shared/ipc';
 import { stateContext } from '../context';
 import { homeBaseStyles, walkthroughProgressStyles } from '../home.css';
-import '../../shared/components/button';
 import '../../shared/components/code-icon';
 import '../../shared/components/overlays/tooltip';
 
@@ -25,33 +25,31 @@ export class GlOnboarding extends LitElement {
 	@state()
 	private _ipc!: HostIpc;
 
-	private dismissWalkthroughSection() {
-		this._state.showWalkthroughProgress = false;
-		this.requestUpdate();
-		this._ipc.sendCommand(DismissWalkthroughSection);
-	}
+	@query('#open-walkthrough')
+	private _openWalkthroughButton!: GlButton;
 
 	override render() {
 		if (!this._state.showWalkthroughProgress) {
 			return undefined;
 		}
 
 		return html`
-			<section class="walkthrough-progress">
+			<section class="walkthrough-progress" @click=${(e: MouseEvent) => this.onFallthroughClick(e)}>
 				<header class="walkthrough-progress__title">
 					<span
 						>GitLens Walkthrough
 						(${this._state.walkthroughProgress.doneCount}/${this._state.walkthroughProgress.allCount})</span
 					>
 					<nav>
 						<gl-button
+							id="open-walkthrough"
 							href=${createCommandLink(Commands.OpenWalkthrough, {})}
 							class="walkthrough-progress__button"
 							appearance="toolbar"
 							><code-icon icon="play"></code-icon
 						></gl-button>
 						<gl-button
-							@click=${this.dismissWalkthroughSection.bind(this)}
+							@click=${this.onDismissWalkthrough.bind(this)}
 							class="walkthrough-progress__button"
 							appearance="toolbar"
 							><code-icon icon="x"></code-icon
@@ -65,4 +63,17 @@ export class GlOnboarding extends LitElement {
 			</section>
 		`;
 	}
+
+	private onDismissWalkthrough() {
+		this._state.showWalkthroughProgress = false;
+		this.requestUpdate();
+		this._ipc.sendCommand(DismissWalkthroughSection);
+	}
+
+	private onFallthroughClick(e: MouseEvent) {
+		if ((e.target as HTMLElement)?.closest('gl-button')) {
+			return;
+		}
+		this._openWalkthroughButton.click();
+	}
 }

src/webviews/apps/home/home.css.ts

@@ -369,6 +369,7 @@ export const walkthroughProgressStyles = css`
 		padding-block: 4px;
 		margin-bottom: 16px;
 		align-items: stretch;
+		cursor: pointer;
 	}
 	.walkthrough-progress__title {
 		display: flex;