Static dir configuration and tree view of notes

static/css/main.css

@@ -158,6 +158,9 @@ header .menu {
   border-radius: 8px;
   height: 48px;
 }
+.tree {
+  padding: 16px;
+}
 @media only screen and (max-width: 100ex) {
   .node-content {
     width: 100%;

static/js/node.mjs

@@ -7,6 +7,7 @@ export class NodeUI extends Component {
 	constructor() {//{{{
 		super()
 		this.menu = signal(false)
+		this.tree = signal(null)
 		this.node = signal(null)
 		this.nodeContent = createRef()
 		window.addEventListener('popstate', evt=>{
@@ -21,6 +22,11 @@ export class NodeUI extends Component {
 			return
 
 		let node = this.node.value
+		let tree = this.tree.value
+
+		let treeHTML = html`Tree`
+		if(tree !== null)
+			treeHTML = this.renderTree(tree)
 
 		let crumbs = [
 			html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
@@ -58,6 +64,10 @@ export class NodeUI extends Component {
 			<div class="crumbs">${crumbs}</crumbs>
 
 			${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
+			<div class="tree" onclick=${()=>this.retrieveTree()} style="color: #000">
+				<div class="node">Start</div>
+				${treeHTML}
+			</div>
 
 			${node.ID > 0 ? html`
 				<div class="node-name">${node.Name}</div>
@@ -146,6 +156,16 @@ export class NodeUI extends Component {
 		})
 		.catch(this.props.app.responseError)
 	}//}}}
+	retrieveTree() {//{{{
+		this.props.app.request('/node/tree', { StartNodeID: this.node.value.ID })
+		.then(res=>{
+			this.tree.value = res.Nodes
+		})
+		.catch(this.props.app.responseError)
+	}//}}}
+	renderTree(tree) {//{{{
+		return tree.map(node=>html`<div class="node" style="margin-left: ${(node.Level+1) * 32}px">${node.Name}</div>`)
+	}//}}}
 }
 
 class NodeContent extends Component {

static/less/main.less

@@ -188,6 +188,10 @@ header {
 	}
 }
 
+.tree {
+	padding: 16px;
+}
+
 @media only screen and (max-width: 100ex) {
 	.node-content {
 		width: 100%;