Adds AMA banner to home

Author: d13

src/webviews/apps/home/components/ama-banner.ts

@@ -0,0 +1,74 @@
+import { consume } from '@lit/context';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import type { State } from '../../../home/protocol';
+import { CollapseSectionCommand } from '../../../home/protocol';
+import { linkBase } from '../../shared/components/styles/lit/base.css';
+import { ipcContext } from '../../shared/context';
+import type { HostIpc } from '../../shared/ipc';
+import { stateContext } from '../context';
+import '../../shared/components/button';
+import '../../shared/components/code-icon';
+import '../../shared/components/card/card';
+
+@customElement('gl-ama-banner')
+export class GlAmaBanner extends LitElement {
+	static override styles = [
+		linkBase,
+		css`
+			:host {
+				margin-inline: 1.2rem;
+			}
+			h4 {
+				font-weight: normal;
+				margin-block-end: 0.4em;
+			}
+
+			p {
+				margin-block: 0;
+				color: var(--vscode-descriptionForeground);
+			}
+		`,
+	];
+
+	@consume<State>({ context: stateContext, subscribe: true })
+	@state()
+	private _state!: State;
+
+	@consume<HostIpc>({ context: ipcContext, subscribe: true })
+	@state()
+	private _ipc!: HostIpc;
+
+	@state()
+	private closed = false;
+
+	override render() {
+		if (this.closed || this._state.amaBannerCollapsed === true) return nothing;
+
+		return html`
+			<gl-card indicator="info">
+				<h4>Live AMA w/ the creator of GitLens</h4>
+				<p>
+					Feb 13 @ 1pm EST &mdash;
+					<a
+						href="https://www.gitkraken.com/lp/gitlensama?utm_source=githubdisucssion&utm_medium=hyperlink&utm_campaign=GLAMA&utm_id=GLAMA"
+						>Register now</a
+					>
+				</p>
+				<gl-button slot="actions" appearance="toolbar" tooltip="Dismiss" @click=${() => this.onClose()}
+					><code-icon icon="close"></code-icon
+				></gl-button>
+			</gl-card>
+		`;
+	}
+
+	private onClose() {
+		this.closed = true;
+		this._state.amaBannerCollapsed = true;
+
+		this._ipc.sendCommand(CollapseSectionCommand, {
+			section: 'feb2025AmaBanner',
+			collapsed: true,
+		});
+	}
+}

src/webviews/apps/home/home.ts

@@ -18,6 +18,7 @@ import '../plus/home/components/active-work';
 import '../plus/home/components/launchpad';
 import '../plus/home/components/overview';
 import './components/feature-nav';
+import './components/ama-banner';
 import './components/integration-banner';
 import './components/preview-banner';
 import './components/promo-banner';
@@ -59,6 +60,7 @@ export class GlHomeApp extends GlApp<State> {
 		return html`
 			<div class="home scrollable">
 				<gl-home-header class="home__header"></gl-home-header>
+				${when(this.state?.amaBannerCollapsed === false, () => html`<gl-ama-banner></gl-ama-banner>`)}
 				${when(!this.state?.previewEnabled, () => html`<gl-preview-banner></gl-preview-banner>`)}
 				<gl-repo-alerts class="home__alerts"></gl-repo-alerts>
 				<main class="home__main scrollable" id="main">

src/webviews/apps/shared/components/card/card.css.ts

@@ -140,6 +140,7 @@ export const cardStyles = css`
 		);
 	}
 
+	.card.is-info,
 	.card.is-branch-changes {
 		border-inline-start-color: var(--gl-card-indicator-border, color-mix(in lab, #1a79ff 80%, transparent));
 	}

src/webviews/apps/shared/components/card/card.ts

@@ -18,6 +18,7 @@ export class GlCard extends LitElement {
 	indicator?:
 		| 'base'
 		| 'active'
+		| 'info'
 		| 'cherry-picking'
 		| 'merging'
 		| 'rebasing'

src/webviews/home/homeWebview.ts

@@ -601,6 +601,12 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		return this.container.storage.get('home:sections:collapsed')?.includes('newHomePreview') ?? false;
 	}
 
+	private getAmaBannerCollapsed() {
+		if (Date.now() >= new Date('2025-02-13T13:00:00-05:00').getTime()) return true;
+
+		return this.container.storage.get('home:sections:collapsed')?.includes('feb2025AmaBanner') ?? false;
+	}
+
 	private getIntegrationBannerCollapsed() {
 		return this.container.storage.get('home:sections:collapsed')?.includes('integrationBanner') ?? false;
 	}
@@ -659,6 +665,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			showWalkthroughProgress: !this.getWalkthroughDismissed(),
 			previewEnabled: this.getPreviewEnabled(),
 			newInstall: getContext('gitlens:install:new', false),
+			amaBannerCollapsed: this.getAmaBannerCollapsed(),
 		};
 	}
 

src/webviews/home/protocol.ts

@@ -36,6 +36,7 @@ export interface State extends WebviewState {
 	showWalkthroughProgress?: boolean;
 	previewEnabled: boolean;
 	newInstall: boolean;
+	amaBannerCollapsed: boolean;
 }
 
 export interface IntegrationState extends IntegrationDescriptor {