Fixes update issues with the Home view

Adds a GitLens features section to help avoid GitLens+ feeling like a gate
2 jaren geleden · 2c9a24d5cd
--- 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',
--- 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') %>
--- 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);
--- 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 {
 			},
 		});

 		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 {
 	}

 	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]);
 		}
 	}
 }
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- a/src/webviews/apps/home/partials/views.html
+++ 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>
--- 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>
--- a/src/webviews/apps/shared/appBase.ts
+++ b/src/webviews/apps/shared/appBase.ts
@ -37,11 +37,12 @@ export abstract class App {
 	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();

--- 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 = '';
 	}
 }
--- 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 {
 		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;
 			}
 		}
 	}
 }
--- 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',
--- a/src/webviews/webviewViewBase.ts
+++ b/src/webviews/webviewViewBase.ts
@ -130,9 +130,8 @@ export abstract class WebviewViewBase 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 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);
 	}