Adds acct avatar and name to home header card

src/avatars.ts

@@ -194,6 +194,14 @@ function getAvatarUriFromGravatar(
 	return Uri.parse(`https://www.gravatar.com/avatar/${hash}?s=${size}&d=${defaultStyle}`);
 }
 
+export function getAvatarUriFromGravatarEmail(
+	email: string,
+	size: number,
+	defaultStyle: GravatarDefaultStyle = GravatarDefaultStyle.Robot,
+): Uri {
+	return getAvatarUriFromGravatar(md5(email.trim().toLowerCase(), 'hex'), size, defaultStyle);
+}
+
 function getAvatarUriFromGitHubNoReplyAddress(email: string, size: number = 16): Uri | undefined {
 	const parts = getGitHubNoReplyAddressParts(email);
 	if (parts == null || !equalsIgnoreCase(parts.authority, 'github.com')) return undefined;

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

@@ -25,9 +25,9 @@ const template = html`
 			${when(
 				x => x.state === SubscriptionState.Paid,
 				html<HeaderCard>`
-					<a href="command:" aria-label="Manage Account" title="Manage Account"
+					<a href="command:gitlens.plus.manage" aria-label="Manage Account" title="Manage Account"
 						><code-icon icon="account"></code-icon></a
-					>&nbsp;<a href="command:" aria-label="Sign Out" title="Sign Out"
+					>&nbsp;&nbsp;<a href="command:gitlens.plus.logout" aria-label="Sign Out" title="Sign Out"
 						><code-icon icon="sign-out"></code-icon
 					></a>
 				`,
@@ -43,8 +43,8 @@ const template = html`
 			${when(
 				x => x.state === SubscriptionState.FreePlusTrialExpired,
 				html<HeaderCard>`
-					<a href="command:gitlens.plus.purchase">Upgrade to Pro</a>&nbsp;<a
-						href="command:"
+					<a href="command:gitlens.plus.purchase">Upgrade to Pro</a>&nbsp;&nbsp;<a
+						href="command:gitlens.plus.logout"
 						aria-label="Sign Out"
 						title="Sign Out"
 						><code-icon icon="sign-out"></code-icon
@@ -113,6 +113,7 @@ const styles = css`
 	}
 
 	.header-card__image {
+		width: 100%;
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
 	}
@@ -134,6 +135,7 @@ const styles = css`
 		flex-direction: row;
 		justify-content: space-between;
 		flex-wrap: wrap;
+		gap: 0 0.4rem;
 	}
 
 	.progress {

src/webviews/apps/home/home.ts

@@ -74,6 +74,7 @@ export class HomeApp extends App {
 				onIpc(DidChangeSubscriptionNotificationType, msg, params => {
 					this.state.subscription = params.subscription;
 					this.state.completedActions = params.completedActions;
+					this.state.avatar = params.avatar;
 					this.updateState();
 				});
 				break;
@@ -135,10 +136,14 @@ export class HomeApp extends App {
 	}
 
 	private updateHeader(days = this.getDaysRemaining(), forceShowPlus = this.forceShowPlus()) {
-		const { subscription, completedSteps } = this.state;
+		const { subscription, completedSteps, avatar } = this.state;
 
 		const $headerContent = document.getElementById('header-card');
 		if ($headerContent) {
+			if (avatar) {
+				$headerContent.setAttribute('image', avatar);
+			}
+			$headerContent.setAttribute('name', subscription.account?.name ?? '');
 			const steps = this.$steps?.length;
 			let completed = completedSteps?.length;
 			if (forceShowPlus && completedSteps != null && this.$steps != null && steps === completed) {

src/webviews/home/homeWebviewView.ts

@@ -1,5 +1,6 @@
 import type { Disposable } from 'vscode';
 import { window } from 'vscode';
+import { getAvatarUriFromGravatarEmail } from '../../avatars';
 import { configuration } from '../../configuration';
 import { CoreCommands } from '../../constants';
 import type { Container } from '../../container';
@@ -135,9 +136,19 @@ export class HomeWebviewView extends WebviewViewBase {
 			completedActions.push(CompletedActions.DismissedWelcome);
 		}
 
+		const subscriptionState = subscription ?? (await this.container.subscription.getSubscription());
+
+		let avatar;
+		if (subscriptionState.account?.email) {
+			avatar = getAvatarUriFromGravatarEmail(subscriptionState.account.email, 34).toString();
+		} else {
+			avatar = `${this.getWebRoot() ?? ''}/media/gitlens-logo.webp`;
+		}
+
 		return {
 			subscription: subscription ?? (await this.container.subscription.getSubscription()),
 			completedActions: completedActions,
+			avatar: avatar,
 		};
 	}
 
@@ -147,12 +158,14 @@ export class HomeWebviewView extends WebviewViewBase {
 		const sections = this.container.storage.get('home:sections:dismissed', []);
 
 		return {
+			webroot: this.getWebRoot(),
 			subscription: subscriptionState.subscription,
 			completedActions: subscriptionState.completedActions,
 			plusEnabled: configuration.get('plusFeatures.enabled'),
 			visibility: await this.getRepoVisibility(),
 			completedSteps: steps,
 			dismissedSections: sections,
+			avatar: subscriptionState.avatar,
 		};
 	}
 

src/webviews/home/protocol.ts

@@ -8,12 +8,14 @@ export const enum CompletedActions {
 }
 
 export interface State {
+	webroot?: string;
 	subscription: Subscription;
 	completedActions: CompletedActions[];
 	completedSteps?: string[];
 	dismissedSections?: string[];
 	plusEnabled: boolean;
 	visibility: RepositoriesVisibility;
+	avatar?: string;
 }
 
 export interface CompleteStepParams {
@@ -30,6 +32,7 @@ export const DismissSectionCommandType = new IpcCommandType
 export interface DidChangeSubscriptionParams {
 	subscription: Subscription;
 	completedActions: CompletedActions[];
+	avatar?: string;
 }
 export const DidChangeSubscriptionNotificationType = new IpcNotificationType<DidChangeSubscriptionParams>(
 	'subscription/didChange',