Updates home view content

- updates verbiage for GL+ and GL Pro
- updates features section
- updates descriptions for GL+ features
- updates header link layout and styling

Co-authored-by: Eric Amodio <eamodio@gmail.com>

src/webviews/apps/home/components/header-card.ts

@@ -14,36 +14,31 @@ const template = html`
 		${when(x => x.name !== '', html<HeaderCard>`<span class="foreground">${x => x.name}</span>`)}
 	</h1>
 	<p class="header-card__account">
-		<span class="status">${x => x.planName}</span>
+		<span class="status"
+			><span
+				class="repo-access${x => (x.isPro ? ' is-pro' : '')}"
+				title="You have access to GitLens+ features on ${x => (x.isPro ? 'any repo' : 'local & public repos')}"
+				>✨</span
+			>${x => x.planName}</span
+		>
 		<span>
 			${when(
-				x => x.state === SubscriptionState.Free,
+				x => !x.hasAccount,
 				html<HeaderCard>`
-					<a title="Sign in to GitLens+" href="command:gitlens.plus.loginOrSignUp">Sign In</a>
+					<a class="action" title="Sign in to GitLens+" href="command:gitlens.plus.loginOrSignUp">Sign In</a>
 				`,
 			)}
 			${when(
-				x => x.state === SubscriptionState.Paid,
+				x => x.hasAccount,
 				html<HeaderCard>`
-					<a href="command:gitlens.plus.manage" aria-label="Manage Account" title="Manage Account"
+					<a
+						class="action is-icon"
+						href="command:gitlens.plus.manage"
+						aria-label="Manage Account"
+						title="Manage Account"
 						><code-icon icon="account"></code-icon></a
-					>&nbsp;&nbsp;<a href="command:gitlens.plus.logout" aria-label="Sign Out" title="Sign Out"
-						><code-icon icon="sign-out"></code-icon
-					></a>
-				`,
-			)}
-			${when(
-				x => [SubscriptionState.FreeInPreviewTrial, SubscriptionState.FreePlusInTrial].includes(x.state),
-				html<HeaderCard>`${x => x.daysRemaining}`,
-			)}
-			${when(
-				x => x.state === SubscriptionState.FreePreviewTrialExpired,
-				html<HeaderCard>`<a href="command:gitlens.plus.loginOrSignUp">Extend Trial</a>`,
-			)}
-			${when(
-				x => x.state === SubscriptionState.FreePlusTrialExpired,
-				html<HeaderCard>`
-					<a href="command:gitlens.plus.purchase">Upgrade to Pro</a>&nbsp;&nbsp;<a
+					>&nbsp;<a
+						class="action is-icon"
 						href="command:gitlens.plus.logout"
 						aria-label="Sign Out"
 						title="Sign Out"
@@ -51,22 +46,6 @@ const template = html`
 					></a>
 				`,
 			)}
-			${when(
-				x => x.state === SubscriptionState.VerificationRequired,
-				html<HeaderCard>`
-					<a
-						href="command:gitlens.plus.resendVerification"
-						title="Resend Verification Email"
-						aria-label="Resend Verification Email"
-						>Verify</a
-					>&nbsp;<a
-						href="command:gitlens.plus.validate"
-						title="Refresh Verification Status"
-						aria-label="Refresh Verification Status"
-						><code-icon icon="sync"></code-icon
-					></a>
-				`,
-			)}
 		</span>
 	</p>
 	<div
@@ -76,8 +55,36 @@ const template = html`
 		aria-valuenow="${x => x.progressNow}"
 		aria-label="${x => x.progressNow} of ${x => x.progressMax} steps completed"
 	>
-		<div ${ref('progressNode')} class="progress__indicator poo"></div>
+		<div ${ref('progressNode')} class="progress__indicator"></div>
 	</div>
+	<span class="actions">
+		${when(
+			x => x.state === SubscriptionState.FreePreviewTrialExpired,
+			html<HeaderCard>`<a class="action" href="command:gitlens.plus.loginOrSignUp">Extend Trial</a>`,
+		)}
+		${when(
+			x => x.state === SubscriptionState.FreePlusTrialExpired,
+			html<HeaderCard>`<a class="action" href="command:gitlens.plus.purchase">Upgrade to Pro</a>`,
+		)}
+		${when(
+			x => x.state === SubscriptionState.VerificationRequired,
+			html<HeaderCard>`
+				<a
+					class="action"
+					href="command:gitlens.plus.resendVerification"
+					title="Resend Verification Email"
+					aria-label="Resend Verification Email"
+					>Verify</a
+				>&nbsp;<a
+					class="action"
+					href="command:gitlens.plus.validate"
+					title="Refresh Verification Status"
+					aria-label="Refresh Verification Status"
+					>Refresh</a
+				>
+			`,
+		)}
+	</span>
 `;
 
 const styles = css`
@@ -134,6 +141,7 @@ const styles = css`
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
+		align-items: center;
 		flex-wrap: wrap;
 		gap: 0 0.4rem;
 	}
@@ -172,6 +180,50 @@ const styles = css`
 	.status {
 		color: var(--color-foreground--75);
 	}
+
+	.repo-access {
+		font-size: 1.1em;
+		margin-right: 0.2rem;
+		cursor: help;
+	}
+	.repo-access:not(.is-pro) {
+		filter: grayscale(1) brightness(0.7);
+	}
+
+	.actions {
+		position: absolute;
+		right: 1rem;
+		top: 0.8rem;
+	}
+
+	.action {
+		display: inline-block;
+		padding: 0.2rem 0.6rem;
+		border-radius: 0.3rem;
+		color: var(--color-foreground--75);
+	}
+	.action.is-icon {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		width: 2.2rem;
+		height: 2.2rem;
+		padding: 0;
+	}
+	.action:hover {
+		text-decoration: none;
+		color: var(--color-foreground);
+	}
+
+	:host-context(.vscode-high-contrast) .action:hover,
+	:host-context(.vscode-dark) .action:hover {
+		background-color: var(--color-background--lighten-10);
+	}
+
+	:host-context(.vscode-high-contrast-light) .action:hover,
+	:host-context(.vscode-light) .action:hover {
+		background-color: var(--color-background--darken-10);
+	}
 `;
 
 @customElement({ name: 'header-card', template: template, styles: styles })
@@ -232,21 +284,40 @@ export class HeaderCard extends FASTElement {
 	get planName() {
 		switch (this.state) {
 			case SubscriptionState.Free:
-				return 'GitLens+ (Local & Public Repos)';
-			case SubscriptionState.FreeInPreviewTrial:
-			case SubscriptionState.FreePlusInTrial:
-				return 'GitLens+ Pro Trial';
 			case SubscriptionState.FreePreviewTrialExpired:
-				return 'GitLens+ (Local & Public Repos)';
 			case SubscriptionState.FreePlusTrialExpired:
-				return 'GitLens+ (Local & Public Repos)';
+				return 'GitLens Free';
+			case SubscriptionState.FreeInPreviewTrial:
+			case SubscriptionState.FreePlusInTrial:
+				return `GitLens Pro (Trial ${this.daysRemaining})`;
 			case SubscriptionState.VerificationRequired:
-				return 'GitLens+ (Unverified)';
+				return `${this.plan} (Unverified)`;
 			default:
 				return this.plan;
 		}
 	}
 
+	get hasAccount() {
+		switch (this.state) {
+			case SubscriptionState.Free:
+			case SubscriptionState.FreePreviewTrialExpired:
+			case SubscriptionState.FreeInPreviewTrial:
+				return false;
+		}
+		return true;
+	}
+
+	get isPro() {
+		switch (this.state) {
+			case SubscriptionState.Free:
+			case SubscriptionState.FreePreviewTrialExpired:
+			case SubscriptionState.FreePlusTrialExpired:
+			case SubscriptionState.VerificationRequired:
+				return false;
+		}
+		return true;
+	}
+
 	updateProgressWidth() {
 		this.progressNode.style.width = this.progress;
 	}

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

@@ -1,4 +1,4 @@
-import { attr, css, customElement, FASTElement, html, when } from '@microsoft/fast-element';
+import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element';
 import { SubscriptionState } from '../../../../subscription';
 import { pluralize } from '../../../../system/string';
 import { numberConverter } from '../../shared/components/converters/number-converter';
@@ -9,11 +9,11 @@ const template = html`
 		x => x.state === SubscriptionState.Free,
 		html<PlusContent>`
 			<p>Adds all-new, completely optional, features that enhance your GitLens experience.</p>
-			<p>These features are free for local and public repos with no account required.</p>
+			<p>These features are free for local and public repos, no account required.</p>
 
 			<p class="mb-1">
 				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.startPreviewTrial')}"
-					>Try GitLens+ for private repositories</vscode-button
+					>Try GitLens+ Pro for private repos</vscode-button
 				>
 			</p>
 			<p>
@@ -24,29 +24,33 @@ const template = html`
 	${when(
 		x => x.state === SubscriptionState.Paid,
 		html<PlusContent>`
-			<p>GitLens+ adds all-new, completely optional, features that enhance your current GitLens experience.</p>
-			<p>These features are free for local and public repos with no account required.</p>
+			<h3>Welcome to ${x => x.planName}!</h3>
+			<p>
+				You have access to
+				<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a>
+				on any repo.
+			</p>
 		`,
 	)}
 	${when(
 		x => [SubscriptionState.FreeInPreviewTrial, SubscriptionState.FreePlusInTrial].includes(x.state),
 		html<PlusContent>`
-			<h3>GitLens+ Trial</h3>
+			<h3>GitLens Pro Trial</h3>
 			<p>
 				You have ${x => x.daysRemaining} left in your
-				<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ trial</a>. Once
-				your trial ends, you'll need a paid plan to continue to use GitLens+ features on this and other private
-				repos.
+				<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens Pro trial</a>.
+				Once your trial ends, you'll continue to have access to GitLens+ features on local and public repos,
+				while private repo s="nx">access will need GitLens Pro.
 			</p>
 		`,
 	)}
 	${when(
 		x => x.state === SubscriptionState.FreePreviewTrialExpired,
 		html<PlusContent>`
-			<h3>Extend Your GitLens+ Trial</h3>
+			<h3>Extend Your GitLens Pro Trial</h3>
 			<p>
-				Your free trial has ended, please sign in to extend your trial of GitLens+ features on private repos by
-				an additional 7-days.
+				Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional 7-days of GitLens+
+				features on private repos.
 			</p>
 			<p class="mb-1">
 				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}"
@@ -58,14 +62,14 @@ const template = html`
 	${when(
 		x => x.state === SubscriptionState.FreePlusTrialExpired,
 		html<PlusContent>`
-			<h3>GitLens+ Trial Expired</h3>
+			<h3>GitLens Pro Trial Expired</h3>
 			<p>
-				Your free trial has ended, please upgrade your account to continue to use GitLens+ features, including
-				the Commit Graph, on this and other private repos.
+				Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use GitLens+ features on
+				private repos.
 			</p>
 			<p class="mb-1">
 				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}"
-					>Upgrade Your Account</vscode-button
+					>Upgrade to Pro</vscode-button
 				>
 			</p>
 		`,
@@ -74,7 +78,9 @@ const template = html`
 		x => x.state === SubscriptionState.VerificationRequired,
 		html<PlusContent>`
 			<h3>Please verify your email</h3>
-			<p class="alert__message">Please verify the email for the account you created.</p>
+			<p class="alert__message">
+				Before you can also use GitLens+ features on private repos, please verify your email address.
+			</p>
 			<p class="mb-1">
 				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.resendVerification')}"
 					>Resend Verification Email</vscode-button
@@ -137,6 +143,9 @@ export class PlusContent extends FASTElement {
 	state: SubscriptionState = SubscriptionState.Free;
 
 	@attr
+	plan = '';
+
+	@attr
 	visibility: 'local' | 'public' | 'mixed' | 'private' = 'public';
 
 	get daysRemaining() {
@@ -150,6 +159,23 @@ export class PlusContent extends FASTElement {
 		return ['local', 'public'].includes(this.visibility);
 	}
 
+	@volatile
+	get planName() {
+		switch (this.state) {
+			case SubscriptionState.Free:
+			case SubscriptionState.FreePreviewTrialExpired:
+			case SubscriptionState.FreePlusTrialExpired:
+				return 'GitLens Free';
+			case SubscriptionState.FreeInPreviewTrial:
+			case SubscriptionState.FreePlusInTrial:
+				return 'GitLens Pro (Trial)';
+			case SubscriptionState.VerificationRequired:
+				return `${this.plan} (Unverified)`;
+			default:
+				return this.plan;
+		}
+	}
+
 	fireAction(command: string) {
 		this.$emit('action', command);
 	}

src/webviews/apps/home/home.html

@@ -125,10 +125,10 @@
 					<div class="activitybar-banner">
 						<ul>
 							<li>
-								Find GitLens features by opening the
+								Find many features by opening the
 								<a href="command:workbench.view.scm">Source Control Side Bar</a>
 							</li>
-							<li>Keep an eye out for feature updates and new components here.</li>
+							<li>Your central hub for the latest feature updates and support information</li>
 						</ul>
 						<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 76">
 							<rect x="42.5" y=".5" width="40" height="75" rx="16.5" stroke="url(#a)" />
@@ -227,7 +227,10 @@
 					<card-section class="gl-plus-banner" no-heading>
 						<div class="centered">
 							<p class="type-tight">
-								<span class="logo"><span class="foreground">Git</span>Lens+</span>
+								<span class="logo"
+									><span class="foreground">Git</span>Lens+
+									<span class="foreground">Features</span></span
+								>
 							</p>
 							<plus-content id="plus-content"></plus-content>
 						</div>
@@ -246,15 +249,18 @@
 							alt="Commit Graph illustration"
 							class="mb-1"
 					/></a>
-					<p class="mb-0">
+					<p>
 						The
 						<a
 							title="Learn more about the Visual File History"
 							href="command:gitlens.openWalkthrough?%22gitlens.plus%7Cgitlens.plus.commitGraph%22"
 							>Commit Graph</a
 						>
-						helps you to easily visualize branch structure and commit history. Not only does it help you
-						verify your changes, but also easily see changes made by others and when.
+						helps you easily visualize and keep track of all work in progress.
+					</p>
+					<p class="mb-0">
+						Use our rich search to find exactly what your looking.It's powerful filters can search by a
+						specific commit, message, author, a changed file or files, or even a specific code change.
 					</p>
 				</card-section>
 				<card-section dismissable id="visual-file-history">
@@ -267,7 +273,7 @@
 							alt="Visual File History illustration"
 							class="mb-1"
 					/></a>
-					<p class="mb-0">
+					<p>
 						The
 						<a
 							title="Learn more about the Visual File History"
@@ -277,6 +283,10 @@
 						allows you to quickly see the evolution of a file, including when changes were made, how large
 						they were, and who made them.
 					</p>
+					<p class="mb-0">
+						Use it to quickly find when the most impactful changes were made to a file or who best to talk
+						to about file changes (and more).
+					</p>
 				</card-section>
 				<card-section dismissable id="worktrees">
 					<span slot="heading">Introducing Worktrees</span>
@@ -288,13 +298,18 @@
 							alt="Worktrees illustration"
 							class="mb-1"
 					/></a>
-					<p class="mb-0">
+					<p>
 						<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.
+						help you multitask quickly by allowing you to easily work on different branches of a repository
+						simultaneously.
+					</p>
+					<p class="mb-0">
+						Avoid interrupting your work in progress when needing to checkout a PR. Simply create a worktree
+						and have both simultaneously.
 					</p>
 				</card-section>
 			</div>

src/webviews/apps/home/home.ts

@@ -165,6 +165,7 @@ export class HomeApp extends App {
 			$plusContent.setAttribute('days', days.toString());
 			$plusContent.setAttribute('state', subscription.state.toString());
 			$plusContent.setAttribute('visibility', visibility);
+			$plusContent.setAttribute('plan', subscription.plan.effective.name);
 		}
 	}