Fixes wrong state context referenced in graph components

Resolves #4513

Author: d13

src/webviews/apps/plus/graph/gate.ts

@@ -1,17 +1,17 @@
 import { consume } from '@lit/context';
+import { SignalWatcher } from '@lit-labs/signals';
 import { css, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createWebviewCommandLink } from '../../../../system/webview';
-import type { State } from '../../../plus/graph/protocol';
 import { GlElement } from '../../shared/components/element';
 import { linkStyles } from '../shared/components/vscode.css';
-import { stateContext } from './context';
+import { graphStateContext } from './stateProvider';
 import '../../shared/components/feature-badge';
 import '../../shared/components/feature-gate';
 
 @customElement('gl-graph-gate')
-export class GlGraphGate extends GlElement {
+export class GlGraphGate extends SignalWatcher(GlElement) {
 	static override styles = [
 		linkStyles,
 		css`
@@ -23,29 +23,28 @@ export class GlGraphGate extends GlElement {
 		`,
 	];
 
-	@consume({ context: stateContext, subscribe: true })
-	@state()
-	state!: State;
+	@consume({ context: graphStateContext, subscribe: true })
+	graphState!: typeof graphStateContext.__context__;
 
 	override render() {
 		return html`<gl-feature-gate
-			.featurePreview=${this.state.featurePreview}
+			.featurePreview=${this.graphState.featurePreview}
 			featurePreviewCommandLink=${ifDefined(
-				this.state.featurePreview
+				this.graphState.featurePreview
 					? createWebviewCommandLink(
 							'gitlens.plus.continueFeaturePreview',
-							this.state.webviewId,
-							this.state.webviewInstanceId,
-							{ feature: this.state.featurePreview.feature },
+							this.graphState.webviewId,
+							this.graphState.webviewInstanceId,
+							{ feature: this.graphState.featurePreview.feature },
 						)
 					: undefined,
 			)}
 			appearance="alert"
 			featureWithArticleIfNeeded="the Commit Graph"
-			?hidden=${this.state.allowed !== false}
+			?hidden=${this.graphState.allowed !== false}
 			.source=${{ source: 'graph', detail: 'gate' } as const}
-			.state=${this.state.subscription?.state}
-			.webroot=${this.state.webroot}
+			.state=${this.graphState.subscription?.state}
+			.webroot=${this.graphState.webroot}
 		>
 			<p slot="feature">
 				<a href="https://help.gitkraken.com/gitlens/gitlens-features/#commit-graph-pro">Commit Graph</a>

src/webviews/apps/plus/graph/sidebar/sidebar.ts

@@ -1,15 +1,15 @@
 import { consume } from '@lit/context';
 import { Task } from '@lit/task';
+import { SignalWatcher } from '@lit-labs/signals';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import type { State } from '../../../../plus/graph/protocol';
 import { DidChangeNotification, GetCountsRequest } from '../../../../plus/graph/protocol';
 import { ipcContext } from '../../../shared/contexts/ipc';
 import type { Disposable } from '../../../shared/events';
 import type { HostIpc } from '../../../shared/ipc';
 import { emitTelemetrySentEvent } from '../../../shared/telemetry';
-import { stateContext } from '../context';
+import { graphStateContext } from '../stateProvider';
 import '../../../shared/components/code-icon';
 import '../../../shared/components/overlays/tooltip';
 
@@ -31,7 +31,7 @@ const icons: Icon[] = [
 type Counts = Record<IconTypes, number | undefined>;
 
 @customElement('gl-graph-sidebar')
-export class GlGraphSideBar extends LitElement {
+export class GlGraphSideBar extends SignalWatcher(LitElement) {
 	static override styles = css`
 		.sidebar {
 			box-sizing: border-box;
@@ -85,8 +85,8 @@ export class GlGraphSideBar extends LitElement {
 	@consume({ context: ipcContext })
 	private _ipc!: HostIpc;
 
-	@consume({ context: stateContext, subscribe: true })
-	private readonly _state!: State;
+	@consume({ context: graphStateContext, subscribe: true })
+	private readonly _state!: typeof graphStateContext.__context__;
 
 	private _disposable: Disposable | undefined;
 	private _countsTask = new Task(this, {