Adds new context to home

Author: d13

src/webviews/apps/home/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from '@lit/context';
+import type { State } from '../../home/protocol';
+
+export const stateContext = createContext<State>('state');

src/webviews/apps/home/home.html

@@ -21,6 +21,7 @@
 		data-placement="#{placement}"
 		data-vscode-context='{ "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
 	>
+		<gl-home-app name="HomeView" placement="#{placement}" state="#{state}"></gl-home-app>
 		<header class="home__header" id="header" hidden>
 			<div id="no-repo-alert" class="alert alert--info mb-0" aria-hidden="true" hidden>
 				<h1 class="alert__title">No repository detected</h1>

src/webviews/apps/home/home.ts

@@ -1,5 +1,6 @@
 /*global*/
 import './home.scss';
+import { html } from 'lit';
 import type { Disposable } from 'vscode';
 import { getApplicablePromo } from '../../../plus/gk/account/promos';
 import type { State } from '../../home/protocol';
@@ -13,17 +14,30 @@ import {
 import type { IpcMessage } from '../../protocol';
 import { ExecuteCommand } from '../../protocol';
 import type { AccountContent } from '../plus/account/components/account-content';
+import { GlApp } from '../shared/app';
 import { App } from '../shared/appBase';
 import type { GlFeatureBadge } from '../shared/components/feature-badge';
 import type { GlPromo } from '../shared/components/promo';
 import { DOM } from '../shared/dom';
+import type { HostIpc } from '../shared/ipc';
+import { HomeStateProvider } from './stateProvider';
 import '../shared/components/button';
 import '../shared/components/code-icon';
 import '../shared/components/feature-badge';
 import '../shared/components/overlays/tooltip';
 import '../shared/components/promo';
 import '../plus/account/components/account-content';
 
+export class GlHomeApp extends GlApp<State> {
+	protected override createStateProvider(state: State, ipc: HostIpc) {
+		return new HomeStateProvider(this, state, ipc);
+	}
+
+	override render() {
+		return html`<account-content id="account-content"></account-content>`;
+	}
+}
+
 export class HomeApp extends App<State> {
 	constructor() {
 		super('HomeApp');

src/webviews/apps/home/stateProvider.ts

@@ -0,0 +1,41 @@
+import { ContextProvider } from '@lit/context';
+import type { ReactiveControllerHost } from 'lit';
+import type { State } from '../../home/protocol';
+import { DidChangeSubscription } from '../../home/protocol';
+import type { Disposable } from '../shared/events';
+import type { HostIpc } from '../shared/ipc';
+import { stateContext } from './context';
+
+type ReactiveElementHost = Partial<ReactiveControllerHost> & HTMLElement;
+
+export class HomeStateProvider implements Disposable {
+	private readonly disposable: Disposable;
+	private readonly provider: ContextProvider<{ __context__: State }, ReactiveElementHost>;
+	private readonly state: State;
+
+	constructor(
+		host: ReactiveElementHost,
+		state: State,
+		private readonly _ipc: HostIpc,
+	) {
+		this.state = state;
+		this.provider = new ContextProvider(host, { context: stateContext, initialValue: state });
+
+		this.disposable = this._ipc.onReceiveMessage(msg => {
+			switch (true) {
+				case DidChangeSubscription.is(msg):
+					this.state.subscription = msg.params.subscription;
+					this.state.avatar = msg.params.avatar;
+					this.state.organizationsCount = msg.params.organizationsCount;
+					this.state.timestamp = Date.now();
+
+					this.provider.setValue(this.state, true);
+					break;
+			}
+		});
+	}
+
+	dispose() {
+		this.disposable.dispose();
+	}
+}