From e994c13ccff5bb01b6295f78a5f564e4c6d9e229 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Mon, 21 Feb 2022 00:34:41 -0500
Subject: [PATCH] Splits home view into partials

---
 src/webviews/apps/home/home.html                   | 290 +--------------------
 src/webviews/apps/home/partials/links.html         |  67 +++++
 .../home/partials/state.free-preview-expired.html  |  24 ++
 .../apps/home/partials/state.free-preview.html     |  26 ++
 src/webviews/apps/home/partials/state.free.html    |  30 +++
 src/webviews/apps/home/partials/state.paid.html    |  19 ++
 .../home/partials/state.plus-trial-expired.html    |  20 ++
 .../apps/home/partials/state.plus-trial.html       |  23 ++
 .../apps/home/partials/state.verify-email.html     |  11 +
 src/webviews/apps/home/partials/welcome.html       |  43 +++
 src/webviews/apps/settings/settings.html           |  23 --
 11 files changed, 273 insertions(+), 303 deletions(-)
 create mode 100644 src/webviews/apps/home/partials/links.html
 create mode 100644 src/webviews/apps/home/partials/state.free-preview-expired.html
 create mode 100644 src/webviews/apps/home/partials/state.free-preview.html
 create mode 100644 src/webviews/apps/home/partials/state.free.html
 create mode 100644 src/webviews/apps/home/partials/state.paid.html
 create mode 100644 src/webviews/apps/home/partials/state.plus-trial-expired.html
 create mode 100644 src/webviews/apps/home/partials/state.plus-trial.html
 create mode 100644 src/webviews/apps/home/partials/state.verify-email.html
 create mode 100644 src/webviews/apps/home/partials/welcome.html

diff --git a/src/webviews/apps/home/home.html b/src/webviews/apps/home/home.html
index bf5ed1e..d32940e 100644
--- a/src/webviews/apps/home/home.html
+++ b/src/webviews/apps/home/home.html
@@ -19,284 +19,14 @@
 		</style>
 	</body>
 
-	<template id="welcome">
-		<section class="welcome">
-			<h3>Welcome to GitLens 12</h3>
-			<p>
-				GitLens <b>supercharges</b> Git inside VS Code and <b>unlocks</b> the untapped <b>knowledge</b> within
-				each repository. While GitLens is both very <b>powerful</b> and feature rich, it is <b>intuitive</b> and
-				highly customizable to meet your needs.
-			</p>
-			<p>
-				Jump over to the getting started experience to familiarize yourself with the features GitLens provides.
-			</p>
-			<vscode-button data-action="command:gitlens.getStarted">Get started walkthrough</vscode-button>
-			<p>Or, you can use the GitLens welcome experience to get setup quickly.</p>
-			<vscode-button data-action="command:gitlens.showWelcomePage">Welcome (Quick Setup)</vscode-button>
-			<ul>
-				<li>
-					To <a href="command:gitlens.showSettingsPage">view all GitLens settings</a>, run
-					<i
-						><a href="command:workbench.action.quickOpen?%22>GitLens%3A%20Open%20Settings%22"
-							>GitLens: Open Settings</a
-						></i
-					>
-					from the Command Palette.
-				</li>
-				<li>
-					<a href="command:gitlens.showSettingsPage%23views">GitLens side bar views</a>
-					for commits, branches, etc. are shown within the
-					<a href="command:workbench.scm.focus">Source Control side bar</a> by default.
-				</li>
-				<li>
-					To <a href="command:gitlens.setViewsLayout">display the side bar views here</a> in the GitLens side
-					bar, run
-					<i
-						><a href="command:workbench.action.quickOpen?%22>GitLens%3A%20Set%20Views%20Layout%22"
-							>GitLens: Set Views Layout</a
-						></i
-					>
-					from the Command Palette, or drag & drop them individually.
-				</li>
-			</ul>
-			<vscode-button data-action="command:gitlens.home.toggleWelcome" appearance="secondary"
-				>Dismiss welcome</vscode-button
-			>
-		</section>
-	</template>
-
-	<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.premium.learn" appearance="secondary"
-								>Premium 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/eamodio/vscode-gitlens#readme">Documentation</a>
-						</li>
-						<li>
-							<i class="codicon codicon-comment-discussion"></i>
-							<a href="https://github.com/eamodio/vscode-gitlens/discussions">Questions</a>
-						</li>
-						<li>
-							<i class="codicon codicon-issues"></i>
-							<a href="https://github.com/eamodio/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/eamodio/vscode-gitlens">GitHub</a></li>
-						<li><a href="https://github.com/eamodio/vscode-gitlens/blob/main/LICENSE">License</a></li>
-					</ul>
-				</div>
-			</div>
-		</section>
-	</template>
-
-	<template id="state:free">
-		<section>
-			<h3>Try GitLens Premium Features</h3>
-			<p>
-				Premium features like
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
-					>Git Worktrees</a
-				>
-				and
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
-					>Visual File History</a
-				>
-				are available with a free account, with many more features coming soon, including a commit graph and
-				GitHub Enterprise integration. Access to premium features for private repos is available with a paid
-				account.
-			</p>
-			<p>
-				You can try these premium features for free, without an account, for 3 days. All non-premium features
-				will continue to be free without an account.
-			</p>
-			<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
-			<vscode-button data-action="command:gitlens.premium.startPreviewTrial"
-				>Try premium features now</vscode-button
-			>
-			<vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button>
-			<span class="button-subaction"
-				>Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span
-			>
-			<vscode-button data-action="command:gitlens.premium.showPlans" appearance="secondary"
-				>View paid plans</vscode-button
-			>
-		</section>
-	</template>
-
-	<template id="state:free-preview">
-		<section>
-			<h3>Trying Premium Features</h3>
-			<p>
-				You are currently trying premium GitLens features, like
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
-					>Git Worktrees</a
-				>
-				and
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
-					>Visual File History</a
-				>, for <span data-bind="previewDays">3 more days</span>.
-			</p>
-			<p>
-				After that time, a free account will be required to continue using these premium features for public
-				code, or you can puchase a paid plan to access premium features for private repos.
-			</p>
-			<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
-			<vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button>
-			<span class="button-subaction"
-				>Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span
-			>
-			<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
-			<p>All non-premium features will continue to be free without an account.</p>
-		</section>
-	</template>
-
-	<template id="state:free-preview-expired">
-		<section>
-			<h3>Continue using Premium Features</h3>
-			<p>
-				Premium GitLens features like
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
-					>Git Worktrees</a
-				>
-				and
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
-					>Visual File History</a
-				>, a commit graph (coming soon), and GitHub Enterprise integration (coming soon) are only available with
-				an account.
-			</p>
-			<p>Create a free account to continue trialing premium features for all code for an additional 7 days.</p>
-			<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
-			<vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button>
-			<span class="button-subaction"
-				>Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span
-			>
-			<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
-			<p>All non-premium features will continue to be free without an account.</p>
-		</section>
-	</template>
-
-	<template id="state:plus-trial">
-		<section>
-			<h3>Premium Feature Trial</h3>
-			<p>
-				You are currently trialing premium GitLens features like
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
-					>Git Worktrees</a
-				>
-				and
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
-					>Visual File History</a
-				>
-				for both public and private repos. In <span data-bind="trialDays">7 days</span>, accessing these premium
-				features for private repos will require a paid account.
-			</p>
-			<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
-			<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
-			<p>
-				With your free account, you will continue to have access to premium features for public repos, as well
-				as all non-premium features.
-			</p>
-		</section>
-	</template>
-
-	<template id="state:verify-email">
-		<section>
-			<h3>Please verify your email</h3>
-			<p>To continue using premium GitLens features, please verify the email for the account you created.</p>
-			<vscode-button data-action="command:gitlens.premium.resendVerification"
-				>Resend verification email</vscode-button
-			>
-			<vscode-button data-action="command:gitlens.premium.validate">Refresh verification status</vscode-button>
-			<p>All non-premium features will continue to be free without an account.</p>
-		</section>
-	</template>
-
-	<template id="state:plus-trial-expired">
-		<section>
-			<h3>GitLens Free+</h3>
-			<p>
-				With your free account, you have access to GitLens Free+, which unlocks premium features like
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
-					>Git Worktrees</a
-				>
-				and
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
-					>Visual File History</a
-				>
-				for public repos. More premium features like a commit graph and GitHub Enterprise integration are coming
-				soon.
-			</p>
-			<p>Access to premium features for private repos requires a paid plan.</p>
-			<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
-			<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
-		</section>
-	</template>
-
-	<template id="state:paid">
-		<section>
-			<h3 data-bind="plan">GitLens Pro</h3>
-			<p>
-				Thank you for purchasing <span data-bind="plan">GitLens Pro</span>! With a
-				<span data-bind="plan">GitLens Pro</span> account, you can access premium features like
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
-					>Git Worktrees</a
-				>
-				and
-				<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
-					>Visual File History</a
-				>
-				for all of your code.
-			</p>
-			<p>Additional premium featues like a commit graph and GitHub Enterprise integration are coming soon.</p>
-			<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
-		</section>
-	</template>
+	<!-- prettier-ignore -->
+	<%= require('html-loader?{"esModule":false}!./partials/welcome.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') %>
+	<%= require('html-loader?{"esModule":false}!./partials/state.free-preview-expired.html') %>
+	<%= require('html-loader?{"esModule":false}!./partials/state.plus-trial.html') %>
+	<%= require('html-loader?{"esModule":false}!./partials/state.plus-trial-expired.html') %>
+	<%= require('html-loader?{"esModule":false}!./partials/state.paid.html') %>
+	<%= require('html-loader?{"esModule":false}!./partials/state.verify-email.html') %>
 </html>
diff --git a/src/webviews/apps/home/partials/links.html b/src/webviews/apps/home/partials/links.html
new file mode 100644
index 0000000..859af62
--- /dev/null
+++ b/src/webviews/apps/home/partials/links.html
@@ -0,0 +1,67 @@
+<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.premium.learn" appearance="secondary">Premium 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/eamodio/vscode-gitlens#readme">Documentation</a>
+					</li>
+					<li>
+						<i class="codicon codicon-comment-discussion"></i>
+						<a href="https://github.com/eamodio/vscode-gitlens/discussions">Questions</a>
+					</li>
+					<li>
+						<i class="codicon codicon-issues"></i>
+						<a href="https://github.com/eamodio/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/eamodio/vscode-gitlens">GitHub</a></li>
+					<li><a href="https://github.com/eamodio/vscode-gitlens/blob/main/LICENSE">License</a></li>
+				</ul>
+			</div>
+		</div>
+	</section>
+</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
new file mode 100644
index 0000000..554cd80
--- /dev/null
+++ b/src/webviews/apps/home/partials/state.free-preview-expired.html
@@ -0,0 +1,24 @@
+<template id="state:free-preview-expired">
+	<section>
+		<h3>Continue using Premium Features</h3>
+		<p>
+			Premium GitLens features like
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
+				>Git Worktrees</a
+			>
+			and
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
+				>Visual File History</a
+			>, a commit graph (coming soon), and GitHub Enterprise integration (coming soon) are only available with an
+			account.
+		</p>
+		<p>Create a free account to continue trialing premium features for all code for an additional 7 days.</p>
+		<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
+		<vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button>
+		<span class="button-subaction"
+			>Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span
+		>
+		<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
+		<p>All non-premium features will continue to be free without an account.</p>
+	</section>
+</template>
diff --git a/src/webviews/apps/home/partials/state.free-preview.html b/src/webviews/apps/home/partials/state.free-preview.html
new file mode 100644
index 0000000..db76f4e
--- /dev/null
+++ b/src/webviews/apps/home/partials/state.free-preview.html
@@ -0,0 +1,26 @@
+<template id="state:free-preview">
+	<section>
+		<h3>Trying Premium Features</h3>
+		<p>
+			You are currently trying premium GitLens features, like
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
+				>Git Worktrees</a
+			>
+			and
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
+				>Visual File History</a
+			>, for <span data-bind="previewDays">3 more days</span>.
+		</p>
+		<p>
+			After that time, a free account will be required to continue using these premium features for public code,
+			or you can puchase a paid plan to access premium features for private repos.
+		</p>
+		<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
+		<vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button>
+		<span class="button-subaction"
+			>Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span
+		>
+		<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
+		<p>All non-premium features will continue to be free without an account.</p>
+	</section>
+</template>
diff --git a/src/webviews/apps/home/partials/state.free.html b/src/webviews/apps/home/partials/state.free.html
new file mode 100644
index 0000000..c553747
--- /dev/null
+++ b/src/webviews/apps/home/partials/state.free.html
@@ -0,0 +1,30 @@
+<template id="state:free">
+	<section>
+		<h3>Try GitLens Premium Features</h3>
+		<p>
+			Premium features like
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
+				>Git Worktrees</a
+			>
+			and
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
+				>Visual File History</a
+			>
+			are available with a free account, with many more features coming soon, including a commit graph and GitHub
+			Enterprise integration. Access to premium features for private repos is available with a paid account.
+		</p>
+		<p>
+			You can try these premium features for free, without an account, for 3 days. All non-premium features will
+			continue to be free without an account.
+		</p>
+		<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
+		<vscode-button data-action="command:gitlens.premium.startPreviewTrial">Try premium features now</vscode-button>
+		<vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button>
+		<span class="button-subaction"
+			>Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span
+		>
+		<vscode-button data-action="command:gitlens.premium.showPlans" appearance="secondary"
+			>View paid plans</vscode-button
+		>
+	</section>
+</template>
diff --git a/src/webviews/apps/home/partials/state.paid.html b/src/webviews/apps/home/partials/state.paid.html
new file mode 100644
index 0000000..5e793a8
--- /dev/null
+++ b/src/webviews/apps/home/partials/state.paid.html
@@ -0,0 +1,19 @@
+<template id="state:paid">
+	<section>
+		<h3 data-bind="plan">GitLens Pro</h3>
+		<p>
+			Thank you for purchasing <span data-bind="plan">GitLens Pro</span>! With a
+			<span data-bind="plan">GitLens Pro</span> account, you can access premium features like
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
+				>Git Worktrees</a
+			>
+			and
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
+				>Visual File History</a
+			>
+			for all of your code.
+		</p>
+		<p>Additional premium featues like a commit graph and GitHub Enterprise integration are coming soon.</p>
+		<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
+	</section>
+</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
new file mode 100644
index 0000000..3d3e36e
--- /dev/null
+++ b/src/webviews/apps/home/partials/state.plus-trial-expired.html
@@ -0,0 +1,20 @@
+<template id="state:plus-trial-expired">
+	<section>
+		<h3>GitLens Free+</h3>
+		<p>
+			With your free account, you have access to GitLens Free+, which unlocks premium features like
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
+				>Git Worktrees</a
+			>
+			and
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
+				>Visual File History</a
+			>
+			for public repos. More premium features like a commit graph and GitHub Enterprise integration are coming
+			soon.
+		</p>
+		<p>Access to premium features for private repos requires a paid plan.</p>
+		<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
+		<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
+	</section>
+</template>
diff --git a/src/webviews/apps/home/partials/state.plus-trial.html b/src/webviews/apps/home/partials/state.plus-trial.html
new file mode 100644
index 0000000..7e2b692
--- /dev/null
+++ b/src/webviews/apps/home/partials/state.plus-trial.html
@@ -0,0 +1,23 @@
+<template id="state:plus-trial">
+	<section>
+		<h3>Premium Feature Trial</h3>
+		<p>
+			You are currently trialing premium GitLens features like
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.worktrees%22"
+				>Git Worktrees</a
+			>
+			and
+			<a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22"
+				>Visual File History</a
+			>
+			for both public and private repos. In <span data-bind="trialDays">7 days</span>, accessing these premium
+			features for private repos will require a paid account.
+		</p>
+		<vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button>
+		<vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button>
+		<p>
+			With your free account, you will continue to have access to premium features for public repos, as well as
+			all non-premium features.
+		</p>
+	</section>
+</template>
diff --git a/src/webviews/apps/home/partials/state.verify-email.html b/src/webviews/apps/home/partials/state.verify-email.html
new file mode 100644
index 0000000..1a15e00
--- /dev/null
+++ b/src/webviews/apps/home/partials/state.verify-email.html
@@ -0,0 +1,11 @@
+<template id="state:verify-email">
+	<section>
+		<h3>Please verify your email</h3>
+		<p>To continue using premium GitLens features, please verify the email for the account you created.</p>
+		<vscode-button data-action="command:gitlens.premium.resendVerification"
+			>Resend verification email</vscode-button
+		>
+		<vscode-button data-action="command:gitlens.premium.validate">Refresh verification status</vscode-button>
+		<p>All non-premium features will continue to be free without an account.</p>
+	</section>
+</template>
diff --git a/src/webviews/apps/home/partials/welcome.html b/src/webviews/apps/home/partials/welcome.html
new file mode 100644
index 0000000..2f6ac52
--- /dev/null
+++ b/src/webviews/apps/home/partials/welcome.html
@@ -0,0 +1,43 @@
+<template id="welcome">
+	<section class="welcome">
+		<h3>Welcome to GitLens 12</h3>
+		<p>
+			GitLens <b>supercharges</b> Git inside VS Code and <b>unlocks</b> the untapped <b>knowledge</b> within each
+			repository. While GitLens is both very <b>powerful</b> and feature rich, it is <b>intuitive</b> and highly
+			customizable to meet your needs.
+		</p>
+		<p>Jump over to the getting started experience to familiarize yourself with the features GitLens provides.</p>
+		<vscode-button data-action="command:gitlens.getStarted">Get started walkthrough</vscode-button>
+		<p>Or, you can use the GitLens welcome experience to get setup quickly.</p>
+		<vscode-button data-action="command:gitlens.showWelcomePage">Welcome (Quick Setup)</vscode-button>
+		<ul>
+			<li>
+				To <a href="command:gitlens.showSettingsPage">view all GitLens settings</a>, run
+				<i
+					><a href="command:workbench.action.quickOpen?%22>GitLens%3A%20Open%20Settings%22"
+						>GitLens: Open Settings</a
+					></i
+				>
+				from the Command Palette.
+			</li>
+			<li>
+				<a href="command:gitlens.showSettingsPage%23views">GitLens side bar views</a>
+				for commits, branches, etc. are shown within the
+				<a href="command:workbench.scm.focus">Source Control side bar</a> by default.
+			</li>
+			<li>
+				To <a href="command:gitlens.setViewsLayout">display the side bar views here</a> in the GitLens side bar,
+				run
+				<i
+					><a href="command:workbench.action.quickOpen?%22>GitLens%3A%20Set%20Views%20Layout%22"
+						>GitLens: Set Views Layout</a
+					></i
+				>
+				from the Command Palette, or drag & drop them individually.
+			</li>
+		</ul>
+		<vscode-button data-action="command:gitlens.home.toggleWelcome" appearance="secondary"
+			>Dismiss welcome</vscode-button
+		>
+	</section>
+</template>
diff --git a/src/webviews/apps/settings/settings.html b/src/webviews/apps/settings/settings.html
index da80925..4ef0feb 100644
--- a/src/webviews/apps/settings/settings.html
+++ b/src/webviews/apps/settings/settings.html
@@ -65,51 +65,28 @@
 			<div class="content__area content__area--full-scroll">
 				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/current-line.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/code-lens.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/status-bar.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/hovers.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.commits.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.repositories.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.file-history.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.line-history.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.branches.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.remotes.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.stashes.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.tags.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.worktrees.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.contributors.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/views.searchAndCompare.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/blame.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/changes.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/heatmap.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/rebase-editor.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/dates.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/menus.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/shortcuts.html') %>
-				<!-- prettier-ignore -->
 				<%= require('html-loader?{"esModule":false}!./partials/modes.html') %>
 			</div>