From 993bbf59f3184d70747ea4cc84db5efccca7422d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 29 Apr 2026 14:48:27 +0200
Subject: [PATCH] Upgraded the TreeNative component to a custom HTML component

---
 static/js/app.mjs  |  4 ++--
 static/js/tree.mjs | 46 +++++++++++++++++++++++++---------------------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 7926368..1e63b57 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -1,12 +1,12 @@
 import { ROOT_NODE } from 'node_store'
-import { TreeNative } from 'tree'
+import { N2Tree } from 'tree'
 import { NodeUINative, Node } from 'node'
 import { SyncProgress } from 'sync'
 
 export class App {
 	constructor() {// {{{
 		this.currentNode = null
-		this.treeNative = new TreeNative()
+		this.treeNative = new N2Tree()
 		this.crumbs = new Crumbs()
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = new NodeUINative(document.getElementById('note'))
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index 43649cc..c76369f 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -1,46 +1,49 @@
 import { ROOT_NODE } from 'node_store'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 
-export class TreeNative {
+export class N2Tree extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<div data-el="logo" id="logo"><img src="/images/${_VERSION}/logo.svg" /></div>
+			<div class="icons">
+				<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
+				<img data-el="sync"   class='sync'   src="/images/${_VERSION}/icon_refresh.svg" />
+			</div>
+		`
+	}// }}}
+
 	constructor() {// {{{
+		super()
+
+		this.id = 'tree-nodes'
+		this.tabIndex = 0
+
 		this.treeNodeComponents = {}
 		this.treeTrunk = []
 		this.expandedNodes = {} // keyed on UUID
 		this.selectedNode = null
 		this.rendered = false
 
+		this.addEventListener('keydown', event => this.keyHandler(event))
+		this.elSearch.addEventListener('click', () => _mbus.dispatch('op-search'))
+		this.elSync.addEventListener('click', () => _sync.run())
+		this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
+
 		this.populateFirstLevel()
 	}// }}}
 	render() {// {{{
 		if (this.rendered)
 			alert('Tree should only be rendered once.')
 
-		const tmpl = document.createElement('template')
-		tmpl.innerHTML = `
-			<div id="tree-nodes" tabindex=0>
-				<div id="logo"><img src="/images/${_VERSION}/logo.svg" /></div>
-				<div class="icons">
-					<img class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
-					<img class='sync'   src="/images/${_VERSION}/icon_refresh.svg" />
-				</div>
-			<div>`
-
-		const treeEl = tmpl.content.getElementById('tree-nodes')
-
-		treeEl.addEventListener('keydown', event => this.keyHandler(event))
-		tmpl.content.querySelector('.icons .search').addEventListener('click', () => _mbus.dispatch('op-search'))
-		tmpl.content.querySelector('.icons .sync').addEventListener('click', () => _sync.run())
-
-		tmpl.content.getElementById('logo').addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
-
 		for (const node of this.treeTrunk) {
 			const treenode = new N2TreeNode(this, node)
 			this.treeNodeComponents[node.UUID] = treenode
-			treeEl.appendChild(treenode.render())
+			this.appendChild(treenode.render())
 		}
 
 		this.rendered = true
-		return tmpl.content
+		return this
 	}// }}}
 	populateFirstLevel() {//{{{
 		nodeStore.get(ROOT_NODE)
@@ -330,6 +333,7 @@ export class TreeNative {
 		treenode?.scrollIntoView({ block: 'nearest' })
 	}// }}}
 }
+customElements.define('n2-tree', N2Tree)
 
 export class N2TreeNode extends CustomHTMLElement {
 	static {// {{{