From 2c9a24d5cdef6423d76937e4a2a3e384141c8fc9 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Tue, 29 Mar 2022 01:28:28 -0400
Subject: [PATCH] Fixes update issues with the Home view Adds a GitLens
 features section to help avoid GitLens+ feeling like a gate

---
 src/storage.ts                                     |   2 +
 src/webviews/apps/home/home.html                   |  11 +-
 src/webviews/apps/home/home.scss                   |  37 ++---
 src/webviews/apps/home/home.ts                     | 152 ++++++++++++++-------
 src/webviews/apps/home/partials/links.html         | 128 +++++++++--------
 .../home/partials/state.free-preview-expired.html  |  50 ++++---
 .../apps/home/partials/state.free-preview.html     |  99 +++++++-------
 src/webviews/apps/home/partials/state.free.html    |  89 ++++++------
 src/webviews/apps/home/partials/state.paid.html    |  22 ++-
 .../home/partials/state.plus-trial-expired.html    |  32 ++---
 .../apps/home/partials/state.plus-trial.html       |  38 +++---
 .../apps/home/partials/state.verify-email.html     |  10 +-
 src/webviews/apps/home/partials/views.html         |  13 ++
 src/webviews/apps/home/partials/welcome.html       |  40 +++---
 src/webviews/apps/shared/appBase.ts                |   5 +-
 src/webviews/apps/shared/dom.ts                    |  12 +-
 src/webviews/home/homeWebviewView.ts               |  85 ++++++++----
 src/webviews/home/protocol.ts                      |   9 +-
 src/webviews/webviewViewBase.ts                    |  11 +-
 19 files changed, 467 insertions(+), 378 deletions(-)
 create mode 100644 src/webviews/apps/home/partials/views.html
diff --git a/src/storage.ts b/src/storage.ts
index 351b066..ed683eb 100644
--- a/src/storage.ts
+++ b/src/storage.ts
@@ -72,6 +72,8 @@ export const enum StorageKeys {
 	Avatars = 'gitlens:avatars',
 	PendingWelcomeOnFocus = 'gitlens:pendingWelcomeOnFocus',
 	PendingWhatsNewOnFocus = 'gitlens:pendingWhatsNewOnFocus',
+	HomeViewActionsCompleted = 'gitlens:home:actions:completed',
+
 	Version = 'gitlens:version',
 
 	MigratedAuthentication = 'gitlens:plus:migratedAuthentication',
diff --git a/src/webviews/apps/home/home.html b/src/webviews/apps/home/home.html
index 029373e..58c076d 100644
--- a/src/webviews/apps/home/home.html
+++ b/src/webviews/apps/home/home.html
@@ -6,8 +6,14 @@
 
 	<body class="preload">
 		<div id="container" class="container">
-			<div id="slot1"></div>
-			<div id="slot2" class="divider"></div>
+			<div class="content">
+				<section id="slot1"></section>
+				<section id="slot2"></section>
+				<section id="slot3"></section>
+			</div>
+			<div>
+				<section id="slot-footer"></section>
+			</div>
 		</div>
 		#{endOfBody}
 		<style nonce="#{cspNonce}">
@@ -20,6 +26,7 @@
 
 	<!-- prettier-ignore -->
 	<%= require('html-loader?{"esModule":false}!./partials/welcome.html') %>
+	<%= require('html-loader?{"esModule":false}!./partials/views.html') %>
 	<%= require('html-loader?{"esModule":false}!./partials/links.html') %>
 	<%= require('html-loader?{"esModule":false}!./partials/state.free.html') %>
 	<%= require('html-loader?{"esModule":false}!./partials/state.free-preview.html') %>
diff --git a/src/webviews/apps/home/home.scss b/src/webviews/apps/home/home.scss
index 75818c9..6cc9845 100644
--- a/src/webviews/apps/home/home.scss
+++ b/src/webviews/apps/home/home.scss
@@ -19,10 +19,17 @@ body {
 .container {
 	display: grid;
 	font-size: 1.3em;
-	grid-template-rows: auto repeat(2, min-content);
+	grid-template-rows: auto min-content;
 	min-height: 100%;
 }
 
+.content {
+	--slots: 3;
+	display: grid;
+	// repeat needs to match the number of slots
+	grid-template-rows: repeat(var(--slots), min-content);
+}
+
 section {
 	display: flex;
 	flex-direction: column;
@@ -74,33 +81,17 @@ p {
 	margin: 1rem 2rem 1rem 1rem;
 }
 
+.link--preview {
+	align-self: center;
+	max-width: 400px;
+	margin: 1rem 2rem 0 0;
+}
+
 .divider {
 	border-top: 1px solid var(--divider-background);
 	margin-top: 2rem;
 }
 
-.welcome {
-	grid-template-rows: repeat(3, min-content);
-	display: flex;
-	flex-direction: column;
-
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0 3rem;
-	}
-
-	li {
-		margin: 0 0 1rem 0;
-	}
-
-	.link--preview {
-		align-self: center;
-		max-width: 400px;
-		margin: 1rem 2rem 0 0;
-	}
-}
-
 .links {
 	display: grid;
 	grid-template-columns: repeat(3, auto);
diff --git a/src/webviews/apps/home/home.ts b/src/webviews/apps/home/home.ts
index c6b7d15..6546259 100644
--- a/src/webviews/apps/home/home.ts
+++ b/src/webviews/apps/home/home.ts
@@ -3,14 +3,14 @@ import './home.scss';
 import { provideVSCodeDesignSystem, vsCodeButton } from '@vscode/webview-ui-toolkit';
 import { Disposable } from 'vscode';
 import { getSubscriptionTimeRemaining, SubscriptionState } from '../../../subscription';
-import { DidChangeSubscriptionNotificationType, State } from '../../home/protocol';
+import { CompletedActions, DidChangeSubscriptionNotificationType, State } from '../../home/protocol';
 import { ExecuteCommandType, IpcMessage, onIpc } from '../../protocol';
 import { App } from '../shared/appBase';
 import { DOM } from '../shared/dom';
 
 export class HomeApp extends App<State> {
-	private $slot1!: HTMLDivElement;
-	private $slot2!: HTMLDivElement;
+	private $slots!: HTMLElement[];
+	private $footer!: HTMLElement;
 
 	constructor() {
 		super('HomeApp');
@@ -23,8 +23,12 @@ export class HomeApp extends App<State> {
 			},
 		});
 
-		this.$slot1 = document.getElementById('slot1') as HTMLDivElement;
-		this.$slot2 = document.getElementById('slot2') as HTMLDivElement;
+		this.$slots = [
+			document.getElementById('slot1') as HTMLDivElement,
+			document.getElementById('slot2') as HTMLDivElement,
+			document.getElementById('slot3') as HTMLDivElement,
+		];
+		this.$footer = document.getElementById('slot-footer') as HTMLDivElement;
 
 		this.updateState();
 	}
@@ -64,60 +68,106 @@ export class HomeApp extends App<State> {
 	}
 
 	private updateState() {
-		const { subscription, welcomeVisible } = this.state;
+		const { subscription, completedActions } = this.state;
+
+		const viewsVisible = !completedActions.includes(CompletedActions.OpenedSCM);
+		const welcomeVisible = !completedActions.includes(CompletedActions.DismissedWelcome);
+
+		let index = 0;
+
 		if (subscription.account?.verified === false) {
-			DOM.insertTemplate('state:verify-email', this.$slot1);
-			DOM.insertTemplate(welcomeVisible ? 'welcome' : 'links', this.$slot2);
+			DOM.insertTemplate('state:verify-email', this.$slots[index++]);
+			DOM.insertTemplate(welcomeVisible ? 'welcome' : 'links', this.$slots[index++]);
+		} else {
+			switch (subscription.state) {
+				case SubscriptionState.Free:
+					if (welcomeVisible) {
+						DOM.insertTemplate('welcome', this.$slots[index++]);
+						DOM.resetSlot(this.$footer);
+					} else {
+						DOM.insertTemplate('links', this.$footer);
+					}
+
+					if (viewsVisible) {
+						DOM.insertTemplate('views', this.$slots[index++]);
+					}
+
+					DOM.insertTemplate('state:free', this.$slots[index++]);
+
+					break;
+				case SubscriptionState.FreeInPreview: {
+					if (viewsVisible) {
+						DOM.insertTemplate('views', this.$slots[index++]);
+					}
+
+					const remaining = getSubscriptionTimeRemaining(subscription, 'days') ?? 0;
+					DOM.insertTemplate('state:free-preview', this.$slots[index++], {
+						bindings: {
+							previewDays: `${remaining === 1 ? `${remaining} day` : `${remaining} days`}`,
+						},
+					});
+
+					break;
+				}
+				case SubscriptionState.FreePreviewExpired:
+					if (viewsVisible) {
+						DOM.insertTemplate('views', this.$slots[index++]);
+					}
+
+					DOM.insertTemplate('state:free-preview-expired', this.$slots[index++]);
+
+					break;
+				case SubscriptionState.FreePlusInTrial: {
+					if (viewsVisible) {
+						DOM.insertTemplate('views', this.$slots[index++]);
+					}
+
+					const remaining = getSubscriptionTimeRemaining(subscription, 'days') ?? 0;
+					DOM.insertTemplate('state:plus-trial', this.$slots[index++], {
+						bindings: {
+							plan: subscription.plan.effective.name,
+							trialDays: `${remaining === 1 ? `${remaining} day` : `${remaining} days`}`,
+						},
+					});
+
+					break;
+				}
+				case SubscriptionState.FreePlusTrialExpired:
+					if (viewsVisible) {
+						DOM.insertTemplate('views', this.$slots[index++]);
+					}
 
-			return;
-		}
+					DOM.insertTemplate('state:plus-trial-expired', this.$slots[index++]);
 
-		const $container = document.getElementById('container') as HTMLDivElement;
-		$container.classList.toggle('welcome', welcomeVisible);
+					break;
+				case SubscriptionState.Paid:
+					if (viewsVisible) {
+						DOM.insertTemplate('views', this.$slots[index++]);
+					}
 
-		switch (subscription.state) {
-			case SubscriptionState.Free:
+					DOM.insertTemplate('state:paid', this.$slots[index++], {
+						bindings: { plan: subscription.plan.effective.name },
+					});
+
+					break;
+			}
+
+			if (subscription.state !== SubscriptionState.Free) {
 				if (welcomeVisible) {
-					DOM.insertTemplate('welcome', this.$slot1);
-					DOM.insertTemplate('state:free', this.$slot2);
+					DOM.insertTemplate('welcome', this.$slots[index++]);
+					DOM.resetSlot(this.$footer);
 				} else {
-					DOM.insertTemplate('state:free', this.$slot1);
-					DOM.insertTemplate('links', this.$slot2);
+					DOM.insertTemplate('links', this.$footer);
 				}
-				break;
-			case SubscriptionState.FreeInPreview: {
-				const remaining = getSubscriptionTimeRemaining(subscription, 'days') ?? 0;
-				DOM.insertTemplate('state:free-preview', this.$slot1, {
-					bindings: {
-						previewDays: `${remaining === 1 ? `${remaining} day` : `${remaining} days`}`,
-					},
-				});
-				DOM.insertTemplate(welcomeVisible ? 'welcome' : 'links', this.$slot2);
-				break;
-			}
-			case SubscriptionState.FreePreviewExpired:
-				DOM.insertTemplate('state:free-preview-expired', this.$slot1);
-				DOM.insertTemplate(welcomeVisible ? 'welcome' : 'links', this.$slot2);
-				break;
-			case SubscriptionState.FreePlusInTrial: {
-				const remaining = getSubscriptionTimeRemaining(subscription, 'days') ?? 0;
-				DOM.insertTemplate('state:plus-trial', this.$slot1, {
-					bindings: {
-						plan: subscription.plan.effective.name,
-						trialDays: `${remaining === 1 ? `${remaining} day` : `${remaining} days`}`,
-					},
-				});
-				DOM.insertTemplate(welcomeVisible ? 'welcome' : 'links', this.$slot2);
-				break;
 			}
-			case SubscriptionState.FreePlusTrialExpired:
-				DOM.insertTemplate('state:plus-trial-expired', this.$slot1);
-				DOM.insertTemplate(welcomeVisible ? 'welcome' : 'links', this.$slot2);
-				break;
-			case SubscriptionState.Paid:
-				DOM.insertTemplate('state:paid', this.$slot1, { bindings: { plan: subscription.plan.effective.name } });
-				DOM.insertTemplate(welcomeVisible ? 'welcome' : 'links', this.$slot2);
-				break;
+		}
+
+		for (let i = 1; i < index; i++) {
+			this.$slots[i].classList.add('divider');
+		}
+
+		for (let i = index; i < this.$slots.length; i++) {
+			DOM.resetSlot(this.$slots[i]);
 		}
 	}
 }
diff --git a/src/webviews/apps/home/partials/links.html b/src/webviews/apps/home/partials/links.html
index dd8c1c7..27f0a70 100644
--- a/src/webviews/apps/home/partials/links.html
+++ b/src/webviews/apps/home/partials/links.html
@@ -1,67 +1,65 @@
-<template id="links">
-	<section>
-		<div class="links">
-			<div class="links__group">
-				<h4>Get Started</h4>
-				<ul>
-					<li>
-						<a href="command:gitlens.getStarted" appearance="secondary">Walkthrough</a>
-					</li>
-					<li>
-						<a href="command:gitlens.plus.learn" appearance="secondary">GitLens+ features walkthrough</a>
-					</li>
-					<li>
-						<a href="command:gitlens.showWelcomePage?%22quick-setup%22" appearance="secondary"
-							>Quick&nbsp;setup</a
-						>
-					</li>
-					<li>
-						<a href="command:gitlens.showSettingsPage" appearance="secondary"
-							>Interactive&nbsp;settings&nbsp;editor</a
-						>
-					</li>
-					<li>
-						<a href="command:gitlens.home.toggleWelcome">Restore&nbsp;welcome</a>
-					</li>
-				</ul>
-			</div>
-			<div class="links__group">
-				<h4>Help</h4>
-				<ul>
-					<li>
-						<i class="codicon codicon-book"></i>
-						<a href="https://github.com/gitkraken/vscode-gitlens#readme">Documentation</a>
-					</li>
-					<li>
-						<i class="codicon codicon-comment-discussion"></i>
-						<a href="https://github.com/gitkraken/vscode-gitlens/discussions">Questions</a>
-					</li>
-					<li>
-						<i class="codicon codicon-issues"></i>
-						<a href="https://github.com/gitkraken/vscode-gitlens/issues">Issues</a>
-					</li>
-					<li>
-						<i class="codicon codicon-comment"></i>
-						<a href="https://gitkraken.slack.com">Slack</a>
-					</li>
-					<li>
-						<i class="codicon codicon-twitter"></i>
-						<a href="https://twitter.com/gitlens">Twitter</a>
-					</li>
-				</ul>
-			</div>
-			<div class="links__group">
-				<h4>Resources</h4>
-				<ul>
-					<li><a href="https://gitlens.amod.io">Website</a></li>
-					<li><a href="https://gitlens.amod.io/#whats-new">What's new</a></li>
-					<li>
-						<a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">Marketplace</a>
-					</li>
-					<li><a href="https://github.com/gitkraken/vscode-gitlens">GitHub</a></li>
-					<li><a href="https://github.com/gitkraken/vscode-gitlens/blob/main/LICENSE">License</a></li>
-				</ul>
-			</div>
+<template id="links" class="divider">
+	<div class="links">
+		<div class="links__group">
+			<h4>Get Started</h4>
+			<ul>
+				<li>
+					<a href="command:gitlens.getStarted" appearance="secondary">Walkthrough</a>
+				</li>
+				<li>
+					<a href="command:gitlens.plus.learn" appearance="secondary">GitLens+ features walkthrough</a>
+				</li>
+				<li>
+					<a href="command:gitlens.showWelcomePage?%22quick-setup%22" appearance="secondary"
+						>Quick&nbsp;setup</a
+					>
+				</li>
+				<li>
+					<a href="command:gitlens.showSettingsPage" appearance="secondary"
+						>Interactive&nbsp;settings&nbsp;editor</a
+					>
+				</li>
+				<li>
+					<a href="command:gitlens.home.toggleWelcome">Restore&nbsp;welcome</a>
+				</li>
+			</ul>
 		</div>
-	</section>
+		<div class="links__group">
+			<h4>Help</h4>
+			<ul>
+				<li>
+					<i class="codicon codicon-book"></i>
+					<a href="https://github.com/gitkraken/vscode-gitlens#readme">Documentation</a>
+				</li>
+				<li>
+					<i class="codicon codicon-comment-discussion"></i>
+					<a href="https://github.com/gitkraken/vscode-gitlens/discussions">Questions</a>
+				</li>
+				<li>
+					<i class="codicon codicon-issues"></i>
+					<a href="https://github.com/gitkraken/vscode-gitlens/issues">Issues</a>
+				</li>
+				<li>
+					<i class="codicon codicon-comment"></i>
+					<a href="https://gitkraken.slack.com">Slack</a>
+				</li>
+				<li>
+					<i class="codicon codicon-twitter"></i>
+					<a href="https://twitter.com/gitlens">Twitter</a>
+				</li>
+			</ul>
+		</div>
+		<div class="links__group">
+			<h4>Resources</h4>
+			<ul>
+				<li><a href="https://gitlens.amod.io">Website</a></li>
+				<li><a href="https://gitlens.amod.io/#whats-new">What's new</a></li>
+				<li>
+					<a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">Marketplace</a>
+				</li>
+				<li><a href="https://github.com/gitkraken/vscode-gitlens">GitHub</a></li>
+				<li><a href="https://github.com/gitkraken/vscode-gitlens/blob/main/LICENSE">License</a></li>
+			</ul>
+		</div>
+	</div>
 </template>
diff --git a/src/webviews/apps/home/partials/state.free-preview-expired.html b/src/webviews/apps/home/partials/state.free-preview-expired.html
index ca73549..b116c79 100644
--- a/src/webviews/apps/home/partials/state.free-preview-expired.html
+++ b/src/webviews/apps/home/partials/state.free-preview-expired.html
@@ -1,28 +1,26 @@
 <template id="state:free-preview-expired">
-	<section>
-		<h3>Continue using GitLens+ Features</h3>
-		<p>
-			Your trial of
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a>
-			has ended. Don't worry, all other GitLens features are always accessible.
-		</p>
-		<p>
-			Sign in to use GitLens+ features on public repos and get an additional 7-day free trial for both public and
-			private repos.
-		</p>
-		<vscode-button data-action="command:gitlens.plus.loginOrSignUp">Sign in to GitLens+</vscode-button>
-		<p>
-			Or, <a title="Upgrade your account" href="command:gitlens.plus.purchase">upgrade your account</a> to use
-			GitLens+ features on both public and private repos.
-		</p>
-		<p>
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn"
-				>Learn more about GitLens+ features</a
-			>
-		</p>
-		<p>
-			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an
-			account, and will continue to evolve and be invested in.
-		</p>
-	</section>
+	<h3>Continue using GitLens+ Features</h3>
+	<p>
+		Your trial of
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a>
+		has ended. Don't worry, all other GitLens features are always accessible.
+	</p>
+	<p>
+		Sign in to use GitLens+ features on public repos and get an additional 7-day free trial for both public and
+		private repos.
+	</p>
+	<vscode-button data-action="command:gitlens.plus.loginOrSignUp">Sign in to GitLens+</vscode-button>
+	<p>
+		Or, <a title="Upgrade your account" href="command:gitlens.plus.purchase">upgrade your account</a> to use
+		GitLens+ features on both public and private repos.
+	</p>
+	<p>
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn"
+			>Learn more about GitLens+ features</a
+		>
+	</p>
+	<p>
+		<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an account,
+		and will continue to evolve and be invested in.
+	</p>
 </template>
diff --git a/src/webviews/apps/home/partials/state.free-preview.html b/src/webviews/apps/home/partials/state.free-preview.html
index df35249..a639241 100644
--- a/src/webviews/apps/home/partials/state.free-preview.html
+++ b/src/webviews/apps/home/partials/state.free-preview.html
@@ -1,53 +1,50 @@
 <template id="state:free-preview">
-	<section>
-		<h3>Trying GitLens+ Features</h3>
-		<p>
-			You have <span data-bind="previewDays">3 days</span> left in your
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a>
-			trial. Once your trial ends, you'll need a free account to continue using GitLens+ features on public repos.
-			Don't worry, all other GitLens features are always accessible.
-		</p>
-		<vscode-button data-action="command:gitlens.plus.loginOrSignUp">Sign in to GitLens+</vscode-button>
-		<p>
-			Or, <a title="Upgrade your account" href="command:gitlens.plus.purchase">upgrade your account</a> to use
-			GitLens+ features on both public and private repos.
-		</p>
-		<h3>GitLens+</h3>
-		<p>
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+</a> adds all-new,
-			completely optional, features that enhance your current GitLens experience when you sign in with a free
-			account.
-		</p>
-		<p>
-			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an
-			account, and will continue to evolve and be invested in.
-		</p>
-		<p style="margin-bottom: 1rem">The first new GitLens+ features are the Visual File History and Worktrees.</p>
-		<h4>Visual File History</h4>
-		<img
-			class="image--preview"
-			src="#{root}/images/docs/visual-file-history-hover.png"
-			alt="Visual File History screenshot"
-		/>
-		<p class="feature-desc">
-			The
-			<a
-				title="Learn more about the Visual File History"
-				href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.visualFileHistory%22"
-				>Visual File History</a
-			>
-			allows you to quickly see the evolution of a file, including when changes were made, how large they were,
-			and who made them.
-		</p>
-		<h4>Worktrees</h4>
-		<img class="image--preview" src="#{root}/images/docs/worktrees-view.png" alt="Worktrees screenshot" />
-		<p class="feature-desc">
-			<a
-				title="Learn more about worktrees"
-				href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.worktrees%22"
-				>Worktrees</a
-			>
-			allow you to easily work on different branches of a repository simultaneously.
-		</p>
-	</section>
+	<h3>Trying GitLens+ Features</h3>
+	<p>
+		You have <span data-bind="previewDays">3 days</span> left in your
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a>
+		trial. Once your trial ends, you'll need a free account to continue using GitLens+ features on public repos.
+		Don't worry, all other GitLens features are always accessible.
+	</p>
+	<vscode-button data-action="command:gitlens.plus.loginOrSignUp">Sign in to GitLens+</vscode-button>
+	<p>
+		Or, <a title="Upgrade your account" href="command:gitlens.plus.purchase">upgrade your account</a> to use
+		GitLens+ features on both public and private repos.
+	</p>
+	<h3>GitLens+</h3>
+	<p>
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+</a> adds all-new,
+		completely optional, features that enhance your current GitLens experience when you sign in with a free account.
+	</p>
+	<p>
+		<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an account,
+		and will continue to evolve and be invested in.
+	</p>
+	<p style="margin-bottom: 1rem">The first new GitLens+ features are the Visual File History and Worktrees.</p>
+	<h4>Visual File History</h4>
+	<img
+		class="image--preview"
+		src="#{root}/images/docs/visual-file-history-hover.png"
+		alt="Visual File History screenshot"
+	/>
+	<p class="feature-desc">
+		The
+		<a
+			title="Learn more about the Visual File History"
+			href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.visualFileHistory%22"
+			>Visual File History</a
+		>
+		allows you to quickly see the evolution of a file, including when changes were made, how large they were, and
+		who made them.
+	</p>
+	<h4>Worktrees</h4>
+	<img class="image--preview" src="#{root}/images/docs/worktrees-view.png" alt="Worktrees screenshot" />
+	<p class="feature-desc">
+		<a
+			title="Learn more about worktrees"
+			href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.worktrees%22"
+			>Worktrees</a
+		>
+		allow you to easily work on different branches of a repository simultaneously.
+	</p>
 </template>
diff --git a/src/webviews/apps/home/partials/state.free.html b/src/webviews/apps/home/partials/state.free.html
index b094115..a358483 100644
--- a/src/webviews/apps/home/partials/state.free.html
+++ b/src/webviews/apps/home/partials/state.free.html
@@ -1,48 +1,45 @@
 <template id="state:free">
-	<section>
-		<h3>Introducing GitLens+</h3>
-		<p>
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+</a> adds all-new,
-			completely optional, features that enhance your current GitLens experience when you sign in with a free
-			account.
-		</p>
-		<p>
-			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an
-			account, and will continue to evolve and be invested in.
-		</p>
-		<vscode-button data-action="command:gitlens.plus.startPreviewTrial">Try GitLens+ features now</vscode-button>
-		<p>
-			Try
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a> now,
-			without an account, for 3 days on public and private repos, or
-			<a title="Sign in to GitLens+" href="command:gitlens.plus.loginOrSignUp">sign in</a> for use on public repos.
-		</p>
-		<p style="margin-bottom: 1rem">The first new GitLens+ features are the Visual File History and Worktrees.</p>
-		<h4>Visual File History</h4>
-		<img
-			class="image--preview"
-			src="#{root}/images/docs/visual-file-history-hover.png"
-			alt="Visual File History screenshot"
-		/>
-		<p class="feature-desc">
-			The
-			<a
-				title="Learn more about the Visual File History"
-				href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.visualFileHistory%22"
-				>Visual File History</a
-			>
-			allows you to quickly see the evolution of a file, including when changes were made, how large they were,
-			and who made them.
-		</p>
-		<h4>Worktrees</h4>
-		<img class="image--preview" src="#{root}/images/docs/worktrees-view.png" alt="Worktrees screenshot" />
-		<p class="feature-desc">
-			<a
-				title="Learn more about worktrees"
-				href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.worktrees%22"
-				>Worktrees</a
-			>
-			allow you to easily work on different branches of a repository simultaneously.
-		</p>
-	</section>
+	<h3>Introducing GitLens+</h3>
+	<p>
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+</a> adds all-new,
+		completely optional, features that enhance your current GitLens experience when you sign in with a free account.
+	</p>
+	<p>
+		<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an account,
+		and will continue to evolve and be invested in.
+	</p>
+	<vscode-button data-action="command:gitlens.plus.startPreviewTrial">Try GitLens+ features now</vscode-button>
+	<p>
+		Try
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a> now,
+		without an account, for 3 days on public and private repos, or
+		<a title="Sign in to GitLens+" href="command:gitlens.plus.loginOrSignUp">sign in</a> for use on public repos.
+	</p>
+	<p style="margin-bottom: 1rem">The first new GitLens+ features are the Visual File History and Worktrees.</p>
+	<h4>Visual File History</h4>
+	<img
+		class="image--preview"
+		src="#{root}/images/docs/visual-file-history-hover.png"
+		alt="Visual File History screenshot"
+	/>
+	<p class="feature-desc">
+		The
+		<a
+			title="Learn more about the Visual File History"
+			href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.visualFileHistory%22"
+			>Visual File History</a
+		>
+		allows you to quickly see the evolution of a file, including when changes were made, how large they were, and
+		who made them.
+	</p>
+	<h4>Worktrees</h4>
+	<img class="image--preview" src="#{root}/images/docs/worktrees-view.png" alt="Worktrees screenshot" />
+	<p class="feature-desc">
+		<a
+			title="Learn more about worktrees"
+			href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.worktrees%22"
+			>Worktrees</a
+		>
+		allow you to easily work on different branches of a repository simultaneously.
+	</p>
 </template>
diff --git a/src/webviews/apps/home/partials/state.paid.html b/src/webviews/apps/home/partials/state.paid.html
index 446eeaa..48be277 100644
--- a/src/webviews/apps/home/partials/state.paid.html
+++ b/src/webviews/apps/home/partials/state.paid.html
@@ -1,14 +1,12 @@
 <template id="state:paid">
-	<section>
-		<h3 data-bind="plan">GitLens+ Pro</h3>
-		<p>Thank you for purchasing <span data-bind="plan">GitLens+ Pro</span>!</p>
-		<p>
-			Your <span data-bind="plan">GitLens+ Pro</span> account gives you access to use
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a> on
-			both public and private repos.
-		</p>
-		<p>
-			<a title="Manage your account" href="command:gitlens.plus.manage">Manage your account</a>
-		</p>
-	</section>
+	<h3 data-bind="plan">GitLens+ Pro</h3>
+	<p>Thank you for purchasing <span data-bind="plan">GitLens+ Pro</span>!</p>
+	<p>
+		Your <span data-bind="plan">GitLens+ Pro</span> account gives you access to use
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a> on both
+		public and private repos.
+	</p>
+	<p>
+		<a title="Manage your account" href="command:gitlens.plus.manage">Manage your account</a>
+	</p>
 </template>
diff --git a/src/webviews/apps/home/partials/state.plus-trial-expired.html b/src/webviews/apps/home/partials/state.plus-trial-expired.html
index 3d1cda7..ce4cb56 100644
--- a/src/webviews/apps/home/partials/state.plus-trial-expired.html
+++ b/src/webviews/apps/home/partials/state.plus-trial-expired.html
@@ -1,19 +1,17 @@
 <template id="state:plus-trial-expired">
-	<section>
-		<h3>GitLens+</h3>
-		<p>
-			Your GitLens+ account gives you access to use
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a> on
-			public repos.
-		</p>
-		<p>
-			<a title="Manage your account" href="command:gitlens.plus.manage">Manage your account</a>
-		</p>
-		<p>Upgrade your account for access to GitLens+ features on private repos.</p>
-		<vscode-button data-action="command:gitlens.plus.purchase">Upgrade your account</vscode-button>
-		<p>
-			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an
-			account, and will continue to evolve and be invested in.
-		</p>
-	</section>
+	<h3>GitLens+</h3>
+	<p>
+		Your GitLens+ account gives you access to use
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a> on public
+		repos.
+	</p>
+	<p>
+		<a title="Manage your account" href="command:gitlens.plus.manage">Manage your account</a>
+	</p>
+	<p>Upgrade your account for access to GitLens+ features on private repos.</p>
+	<vscode-button data-action="command:gitlens.plus.purchase">Upgrade your account</vscode-button>
+	<p>
+		<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an account,
+		and will continue to evolve and be invested in.
+	</p>
 </template>
diff --git a/src/webviews/apps/home/partials/state.plus-trial.html b/src/webviews/apps/home/partials/state.plus-trial.html
index 72348b4..726423f 100644
--- a/src/webviews/apps/home/partials/state.plus-trial.html
+++ b/src/webviews/apps/home/partials/state.plus-trial.html
@@ -1,22 +1,20 @@
 <template id="state:plus-trial">
-	<section>
-		<h3><span data-bind="plan">GitLens+ Pro</span> Trial</h3>
-		<p>
-			You have <span data-bind="trialDays">7 days</span> left in your
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a>
-			trial on both public and private repos. Once your trial ends, you can continue using GitLens+ features on
-			public repos.
-		</p>
-		<p>Upgrade your account for access to GitLens+ features on both public and private repos.</p>
-		<vscode-button data-action="command:gitlens.plus.purchase">Upgrade your account</vscode-button>
-		<p>
-			<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn"
-				>Learn more about GitLens+ features</a
-			>
-		</p>
-		<p>
-			<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an
-			account, and will continue to evolve and be invested in.
-		</p>
-	</section>
+	<h3><span data-bind="plan">GitLens+ Pro</span> Trial</h3>
+	<p>
+		You have <span data-bind="trialDays">7 days</span> left in your
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a>
+		trial on both public and private repos. Once your trial ends, you can continue using GitLens+ features on public
+		repos.
+	</p>
+	<p>Upgrade your account for access to GitLens+ features on both public and private repos.</p>
+	<vscode-button data-action="command:gitlens.plus.purchase">Upgrade your account</vscode-button>
+	<p>
+		<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn"
+			>Learn more about GitLens+ features</a
+		>
+	</p>
+	<p>
+		<i class="codicon codicon-info"></i>&nbsp;All other GitLens features are always accessible, without an account,
+		and will continue to evolve and be invested in.
+	</p>
 </template>
diff --git a/src/webviews/apps/home/partials/state.verify-email.html b/src/webviews/apps/home/partials/state.verify-email.html
index 7d5e3f7..af7fb17 100644
--- a/src/webviews/apps/home/partials/state.verify-email.html
+++ b/src/webviews/apps/home/partials/state.verify-email.html
@@ -1,8 +1,6 @@
 <template id="state:verify-email">
-	<section>
-		<h3>Please verify your email</h3>
-		<p>To use GitLens+ features, please verify the email for the account you created.</p>
-		<vscode-button data-action="command:gitlens.plus.resendVerification">Resend verification email</vscode-button>
-		<vscode-button data-action="command:gitlens.plus.validate">Refresh verification status</vscode-button>
-	</section>
+	<h3>Please verify your email</h3>
+	<p>To use GitLens+ features, please verify the email for the account you created.</p>
+	<vscode-button data-action="command:gitlens.plus.resendVerification">Resend verification email</vscode-button>
+	<vscode-button data-action="command:gitlens.plus.validate">Refresh verification status</vscode-button>
 </template>
diff --git a/src/webviews/apps/home/partials/views.html b/src/webviews/apps/home/partials/views.html
new file mode 100644
index 0000000..d9dc118
--- /dev/null
+++ b/src/webviews/apps/home/partials/views.html
@@ -0,0 +1,13 @@
+<template id="views">
+	<h3>Where are the GitLens features?</h3>
+	<p>
+		GitLens is integrated into many aspects of VS Code, from directly within the editor area to many feature views
+		in the side bar. These feature views,
+		<a href="command:gitlens.showCommitsView" title="Open Commits view">Commits</a>,
+		<a href="command:gitlens.showFileHistoryView" title="Open File History view">File History</a>,
+		<a href="command:gitlens.showBranchesView" title="Open Branches view">Branches</a>, etc., are shown on the
+		<a href="command:gitlens.home.showSCM" title="Open Source Control side bar">Source Control side bar</a>, by
+		default.
+	</p>
+	<vscode-button data-action="command:gitlens.home.showSCM">Open Source Control side bar</vscode-button>
+</template>
diff --git a/src/webviews/apps/home/partials/welcome.html b/src/webviews/apps/home/partials/welcome.html
index 88f5a00..ca3fccb 100644
--- a/src/webviews/apps/home/partials/welcome.html
+++ b/src/webviews/apps/home/partials/welcome.html
@@ -1,23 +1,21 @@
 <template id="welcome">
-	<section class="welcome">
-		<h3>Welcome to GitLens 12</h3>
-		<a class="link--preview" title="See What's New" href="command:gitlens.showWelcomePage">
-			<img class="image--preview" src="#{webroot}/media/gitlens-12-card.webp" alt="What's new" />
-		</a>
-		<p>
-			GitLens <b>supercharges</b> Git inside VS Code and unlocks the <b>untapped knowledge</b> within each
-			repository. It helps you to <b>visualize code authorship</b> at a glance via Git blame annotations and
-			CodeLens, <b>seamlessly navigate and explore</b> Git repositories, <b>gain valuable insights</b> via rich
-			visualizations and powerful comparison commands, and so much more.
-		</p>
-		<vscode-button data-action="command:gitlens.showWelcomePage">Quick setup</vscode-button>
-		<vscode-button data-action="command:gitlens.getStarted">Get started walkthrough</vscode-button>
-		<p>
-			Use the quick setup experience to personalize GitLens to meet your needs, or jump over to the getting
-			started walkthrough to familiarize yourself with the rich features GitLens provides.
-		</p>
-		<vscode-button data-action="command:gitlens.home.toggleWelcome" appearance="secondary"
-			>Dismiss welcome</vscode-button
-		>
-	</section>
+	<h3>Welcome to GitLens 12</h3>
+	<a class="link--preview" title="See What's New" href="command:gitlens.showWelcomePage">
+		<img class="image--preview" src="#{webroot}/media/gitlens-12-card.webp" alt="What's new" />
+	</a>
+	<p>
+		GitLens <b>supercharges</b> Git inside VS Code and unlocks the <b>untapped knowledge</b> within each repository.
+		It helps you to <b>visualize code authorship</b> at a glance via Git blame annotations and CodeLens,
+		<b>seamlessly navigate and explore</b> Git repositories, <b>gain valuable insights</b> via rich visualizations
+		and powerful comparison commands, and so much more.
+	</p>
+	<vscode-button data-action="command:gitlens.showWelcomePage">Quick setup</vscode-button>
+	<vscode-button data-action="command:gitlens.getStarted">Get started walkthrough</vscode-button>
+	<p>
+		Use the quick setup experience to personalize GitLens to meet your needs, or jump over to the getting started
+		walkthrough to familiarize yourself with the rich features GitLens provides.
+	</p>
+	<vscode-button data-action="command:gitlens.home.toggleWelcome" appearance="secondary"
+		>Dismiss welcome</vscode-button
+	>
 </template>
diff --git a/src/webviews/apps/shared/appBase.ts b/src/webviews/apps/shared/appBase.ts
index 6b1c5d2..c7a0c7c 100644
--- a/src/webviews/apps/shared/appBase.ts
+++ b/src/webviews/apps/shared/appBase.ts
@@ -37,11 +37,12 @@ export abstract class App<State = void> {
 	protected state: State;
 
 	constructor(protected readonly appName: string) {
-		this.log(`${this.appName}.ctor`);
-
 		this.state = (window as any).bootstrap;
 		(window as any).bootstrap = undefined;
 
+		this.log(`${this.appName}()`);
+		// this.log(`${this.appName}(${this.state ? JSON.stringify(this.state) : ''})`);
+
 		this._api = acquireVsCodeApi();
 		initializeAndWatchThemeColors();
 
diff --git a/src/webviews/apps/shared/dom.ts b/src/webviews/apps/shared/dom.ts
index 9080b8b..911cbef 100644
--- a/src/webviews/apps/shared/dom.ts
+++ b/src/webviews/apps/shared/dom.ts
@@ -72,11 +72,12 @@ export namespace DOM {
 
 	export function insertTemplate(
 		id: string,
-		$slot: HTMLDivElement,
+		$slot: HTMLElement,
 		options?: { bindings?: Record<string, unknown>; visible?: Record<string, boolean> },
 	): void {
-		const $template = (document.getElementById(id) as HTMLTemplateElement)?.content.cloneNode(true);
-		$slot.replaceChildren($template);
+		const $template = document.getElementById(id) as HTMLTemplateElement;
+		$slot.replaceChildren($template?.content.cloneNode(true));
+		$slot.className = $template.className;
 
 		if (options?.visible != null) {
 			const $els = $slot.querySelectorAll<HTMLElement>(`[data-visible]`);
@@ -105,4 +106,9 @@ export namespace DOM {
 			}
 		}
 	}
+
+	export function resetSlot($slot: HTMLElement) {
+		$slot.replaceChildren();
+		$slot.className = '';
+	}
 }
diff --git a/src/webviews/home/homeWebviewView.ts b/src/webviews/home/homeWebviewView.ts
index 85b8270..8249bae 100644
--- a/src/webviews/home/homeWebviewView.ts
+++ b/src/webviews/home/homeWebviewView.ts
@@ -1,11 +1,13 @@
 import { commands, Disposable, window } from 'vscode';
+import { CoreCommands } from '../../constants';
 import type { Container } from '../../container';
 import type { SubscriptionChangeEvent } from '../../plus/subscription/subscriptionService';
 import { ensurePlusFeaturesEnabled } from '../../plus/subscription/utils';
-import { SyncedStorageKeys } from '../../storage';
+import { StorageKeys, SyncedStorageKeys } from '../../storage';
 import type { Subscription } from '../../subscription';
+import { executeCoreCommand } from '../../system/command';
 import { WebviewViewBase } from '../webviewViewBase';
-import { DidChangeSubscriptionNotificationType, State } from './protocol';
+import { CompletedActions, DidChangeSubscriptionNotificationType, State } from './protocol';
 
 export class HomeWebviewView extends WebviewViewBase<State> {
 	constructor(container: Container) {
@@ -35,47 +37,76 @@ export class HomeWebviewView extends WebviewViewBase<State> {
 		void this.validateSubscription();
 	}
 
-	private _validating: Promise<void> | undefined;
-	private async validateSubscription(): Promise<void> {
-		if (this._validating == null) {
-			this._validating = this.container.subscription.validate();
-			try {
-				void (await this._validating);
-			} finally {
-				this._validating = undefined;
-			}
-		}
-	}
-
 	protected override registerCommands(): Disposable[] {
 		return [
 			commands.registerCommand(`${this.id}.refresh`, () => this.refresh(), this),
 			commands.registerCommand('gitlens.home.toggleWelcome', async () => {
-				const welcomeVisible = this.container.storage.get(SyncedStorageKeys.HomeViewWelcomeVisible, true);
-				await this.container.storage.store(SyncedStorageKeys.HomeViewWelcomeVisible, !welcomeVisible);
+				const welcomeVisible = !this.welcomeVisible;
+				await this.container.storage.store(SyncedStorageKeys.HomeViewWelcomeVisible, welcomeVisible);
+				if (welcomeVisible) {
+					await this.container.storage.store(StorageKeys.HomeViewActionsCompleted, []);
+				}
 
-				const subscription = await this.container.subscription.getSubscription();
-				void this.notifyDidChangeData(subscription);
+				void this.notifyDidChangeData();
+			}),
+
+			commands.registerCommand('gitlens.home.showSCM', async () => {
+				const completedActions = this.container.storage.get<CompletedActions[]>(
+					StorageKeys.HomeViewActionsCompleted,
+					[],
+				);
+				if (!completedActions.includes(CompletedActions.OpenedSCM)) {
+					completedActions.push(CompletedActions.OpenedSCM);
+					await this.container.storage.store(StorageKeys.HomeViewActionsCompleted, completedActions);
+
+					void this.notifyDidChangeData();
+				}
+
+				await executeCoreCommand(CoreCommands.ShowSCM);
 			}),
 		];
 	}
 
 	protected override async includeBootstrap(): Promise<State> {
-		const subscription = await this.container.subscription.getSubscription();
+		return this.getState();
+	}
+
+	private get welcomeVisible(): boolean {
+		return this.container.storage.get(SyncedStorageKeys.HomeViewWelcomeVisible, true);
+	}
+
+	private async getState(subscription?: Subscription): Promise<State> {
+		// Make sure to make a copy of the array otherwise it will be live to the storage value
+		const completedActions = [
+			...this.container.storage.get<CompletedActions[]>(StorageKeys.HomeViewActionsCompleted, []),
+		];
+		if (!this.welcomeVisible) {
+			completedActions.push(CompletedActions.DismissedWelcome);
+		}
+
 		return {
-			subscription: subscription,
-			welcomeVisible: this.container.storage.get(SyncedStorageKeys.HomeViewWelcomeVisible, true),
+			subscription: subscription ?? (await this.container.subscription.getSubscription()),
+			completedActions: completedActions,
 		};
 	}
 
-	private notifyDidChangeData(subscription: Subscription) {
+	private notifyDidChangeData(subscription?: Subscription) {
 		if (!this.isReady) return false;
 
-		return window.withProgress({ location: { viewId: this.id } }, () =>
-			this.notify(DidChangeSubscriptionNotificationType, {
-				subscription: subscription,
-				welcomeVisible: this.container.storage.get(SyncedStorageKeys.HomeViewWelcomeVisible, true),
-			}),
+		return window.withProgress({ location: { viewId: this.id } }, async () =>
+			this.notify(DidChangeSubscriptionNotificationType, await this.getState(subscription)),
 		);
 	}
+
+	private _validating: Promise<void> | undefined;
+	private async validateSubscription(): Promise<void> {
+		if (this._validating == null) {
+			this._validating = this.container.subscription.validate();
+			try {
+				void (await this._validating);
+			} finally {
+				this._validating = undefined;
+			}
+		}
+	}
 }
diff --git a/src/webviews/home/protocol.ts b/src/webviews/home/protocol.ts
index 5833fb3..5149da6 100644
--- a/src/webviews/home/protocol.ts
+++ b/src/webviews/home/protocol.ts
@@ -1,14 +1,19 @@
 import type { Subscription } from '../../subscription';
 import { IpcNotificationType } from '../protocol';
 
+export const enum CompletedActions {
+	DismissedWelcome = 'dismissed:welcome',
+	OpenedSCM = 'opened:scm',
+}
+
 export interface State {
 	subscription: Subscription;
-	welcomeVisible: boolean;
+	completedActions: CompletedActions[];
 }
 
 export interface DidChangeSubscriptionParams {
 	subscription: Subscription;
-	welcomeVisible: boolean;
+	completedActions: CompletedActions[];
 }
 export const DidChangeSubscriptionNotificationType = new IpcNotificationType<DidChangeSubscriptionParams>(
 	'subscription/didChange',
diff --git a/src/webviews/webviewViewBase.ts b/src/webviews/webviewViewBase.ts
index 1b3ce95..a3a6877 100644
--- a/src/webviews/webviewViewBase.ts
+++ b/src/webviews/webviewViewBase.ts
@@ -130,9 +130,8 @@ export abstract class WebviewViewBase<State> implements WebviewViewProvider, Dis
 			...(this.registerCommands?.() ?? []),
 		);
 
-		webviewView.webview.html = await this.getHtml(webviewView.webview);
-
-		this.onViewVisibilityChanged();
+		await this.refresh();
+		this.onVisibilityChanged?.(true);
 	}
 
 	protected async refresh(): Promise<void> {
@@ -147,9 +146,13 @@ export abstract class WebviewViewBase<State> implements WebviewViewProvider, Dis
 		this._view = undefined;
 	}
 
-	private onViewVisibilityChanged() {
+	private async onViewVisibilityChanged() {
 		const visible = this.visible;
 		Logger.debug(`WebviewView(${this.id}).onViewVisibilityChanged`, `visible=${visible}`);
+
+		if (visible) {
+			await this.refresh();
+		}
 		this.onVisibilityChanged?.(visible);
 	}
 
