use extension slot element when rendering trees

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-trees/section-trees.element.ts

@@ -1,20 +1,18 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { map, switchMap, EMPTY, of } from 'rxjs';
-
 import { UmbSectionContext } from '../section.context';
-import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
-
-import '../../tree/tree-extension.element';
+import { ManifestTree } from '@umbraco-cms/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/element';
 
+import './sidebar-menu-item.element.ts';
+
 @customElement('umb-section-trees')
 export class UmbSectionTreesElement extends UmbLitElement {
 	static styles = [UUITextStyles];
 
 	@state()
-	private _treeAliases?: Array<string>;
+	private _currentSectionAlias?: string;
 
 	private _sectionContext?: UmbSectionContext;
 
@@ -23,37 +21,23 @@ export class UmbSectionTreesElement extends UmbLitElement {
 
 		this.consumeContext('umbSectionContext', (instance) => {
 			this._sectionContext = instance;
-			this._observeTrees();
+			this._observeCurrentSection();
 		});
 	}
 
-	private _observeTrees() {
+	private _observeCurrentSection() {
 		if (!this._sectionContext) return;
 
-		this.observe(
-			this._sectionContext?.data.pipe(
-				switchMap((section) => {
-					if (!section) return EMPTY;
-
-					return (
-						umbExtensionsRegistry
-							.extensionsOfType('tree')
-							.pipe(
-								map((trees) =>
-									trees.filter((tree) => tree.meta.sections.includes(section.alias)).map((tree) => tree.alias)
-								)
-							)
-					);
-				})
-			),
-			(treeAliases) => {
-				this._treeAliases = treeAliases || undefined;
-			}
-		);
+		this.observe(this._sectionContext?.data, (section) => {
+			this._currentSectionAlias = section.alias;
+		});
 	}
 
 	render() {
-		return html`${this._treeAliases?.map((treeAlias) => html`<umb-tree alias="${treeAlias}"></umb-tree>`)} `;
+		return html` <umb-extension-slot
+			type="tree"
+			.filter=${(trees: ManifestTree) => trees.meta.sections.includes(this._currentSectionAlias || '')}
+			default-element="umb-sidebar-menu-item"></umb-extension-slot>`;
 	}
 }