add sidebar menu item + tree manifests

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts

@@ -1,11 +1,10 @@
-import { UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN } from '../data-type.tree.store';
+import { UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN } from './data-type.tree.store';
 import type { ManifestTree, ManifestTreeItemAction } from '@umbraco-cms/models';
 
 const tree: ManifestTree = {
 	type: 'tree',
 	alias: 'Umb.Tree.DataTypes',
 	name: 'Data Types Tree',
-	weight: 100,
 	meta: {
 		storeAlias: UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN.toString(),
 	},

src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts

@@ -0,0 +1,12 @@
+import { manifests as templateManifests } from './templates/manifests';
+
+import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
+
+const registerExtensions = (manifests: Array<ManifestTypes>) => {
+	manifests.forEach((manifest) => {
+		if (umbExtensionsRegistry.isRegistered(manifest.alias)) return;
+		umbExtensionsRegistry.register(manifest);
+	});
+};
+
+registerExtensions([...templateManifests]);

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/manifests.ts

@@ -0,0 +1,4 @@
+import { manifests as sidebarMenuItemManifests } from './sidebar-menu-item/manifests';
+import { manifests as treeManifests } from './tree/manifests';
+
+export const manifests = [...sidebarMenuItemManifests, ...treeManifests];

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts

@@ -0,0 +1,17 @@
+import type { ManifestSidebarMenuItem } from '@umbraco-cms/models';
+
+const sidebarMenuItem: ManifestSidebarMenuItem = {
+	type: 'sidebarMenuItem',
+	alias: 'Umb.SidebarMenuItem.Templates',
+	name: 'Templates Sidebar Menu Item',
+	weight: 40,
+	loader: () => import('./templates-sidebar-menu-item.element'),
+	meta: {
+		label: 'Templates',
+		icon: 'umb:folder',
+		sections: ['Umb.Section.Settings'],
+		entityType: 'template',
+	},
+};
+
+export const manifests = [sidebarMenuItem];

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/templates-sidebar-menu-item.element.ts

@@ -0,0 +1,40 @@
+import { html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-templates-sidebar-menu-item')
+export class UmbTemplatesSidebarMenuItemElement extends UmbLitElement {
+	@state()
+	private _renderTree = false;
+
+	private _onShowChildren() {
+		this._renderTree = true;
+	}
+
+	private _onHideChildren() {
+		this._renderTree = false;
+	}
+
+	// TODO: check if root has children before settings the has-children attribute
+	// TODO: how do we want to cache the tree? (do we want to rerender every time the user opens the tree)?
+	// TODO: can we make this reusable?
+	render() {
+		return html`<umb-tree-item
+			label="Templates"
+			icon="umb:folder"
+			entity-type="template"
+			@show-children=${this._onShowChildren}
+			@hide-children=${this._onHideChildren}
+			has-children>
+			${this._renderTree ? html`<umb-tree alias="Umb.Tree.Templates"></umb-tree>` : nothing}
+		</umb-tree-item> `;
+	}
+}
+
+export default UmbTemplatesSidebarMenuItemElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-templates-sidebar-menu-item': UmbTemplatesSidebarMenuItemElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/tree/manifests.ts

@@ -0,0 +1,15 @@
+import { UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN } from './template.tree.store';
+import type { ManifestTree, ManifestTreeItemAction } from '@umbraco-cms/models';
+
+const tree: ManifestTree = {
+	type: 'tree',
+	alias: 'Umb.Tree.Templates',
+	name: 'Templates Tree',
+	meta: {
+		storeAlias: UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN.toString(),
+	},
+};
+
+const treeItemActions: Array<ManifestTreeItemAction> = [];
+
+export const manifests = [tree, ...treeItemActions];