Rename nodes.

static/js/node.mjs

@@ -48,6 +48,7 @@ export class N2NodeUI extends CustomHTMLElement {
 		_mbus.subscribe('NODE_MODIFIED', () => {
 			document.querySelector('#crumbs .crumbs')?.classList.add('node-modified')
 			this.elIconSave.src = `/images/${_VERSION}/icon_save.svg`
+			this.render()
 		})
 
 		_mbus.subscribe('NODE_UNMODIFIED', () => {
@@ -58,6 +59,18 @@ export class N2NodeUI extends CustomHTMLElement {
 		_mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown()))
 		_mbus.subscribe('MARKDOWN_EDIT', ({ detail }) => this.editMarkdown(detail.data))
 
+		this.elName.addEventListener('click', () => {
+			const name = prompt('Change title', this.node.data.Name)
+			if (name === null)
+				return
+
+			try {
+				this.node.setName(name)
+			} catch (err) {
+				console.error(err)
+				alert(err)
+			}
+		})
 		this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
 		this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown()))
 
@@ -150,21 +163,6 @@ export class Node {
 		this._parent = null
 
 		this.reset()
-
-		/*
-		this.RenderMarkdown = signal(nodeData.RenderMarkdown)
-		this.Markdown = false
-		this.ShowChecklist = signal(false)
-		this._content = nodeData.Content
-		this.Crumbs = []
-		this.Files = []
-		this._decrypted = false
-		this._expanded = false // start value for the TreeNode component,
-		this.ChecklistGroups = {}
-		this.ScheduleEvents = signal([])
-		// it doesn't control it afterwards.
-		// Used to expand the crumbs upon site loading.
-		*/
 	}//}}}
 
 	reset() {// {{{
@@ -235,7 +233,15 @@ export class Node {
 	setContent(new_content) {//{{{
 		this._content = new_content
 		this._modified = true
-		_mbus.dispatch('NODE_MODIFIED')
+		_mbus.dispatch('NODE_MODIFIED', { node: this })
+	}//}}}
+	setName(new_name) {// {{{
+		if (new_name.trim() === '')
+			throw new Error(`The name can't be empty`)
+
+		this.data.Name = new_name
+		this._modified = true
+		_mbus.dispatch('NODE_MODIFIED', { node: this })
 	}// }}}
 	async save() {//{{{
 		this.data.Content = this._content

static/js/tree.mjs

@@ -31,6 +31,17 @@ export class N2Tree extends CustomHTMLElement {
 		this.elSync.addEventListener('click', () => _sync.run())
 		this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
 
+		_mbus.subscribe('NODE_MODIFIED', ({ detail })=>{
+			const node = detail.data.node
+			const treenode = this.treeNodeComponents[node.get('UUID')]
+
+			if (!treenode)
+				return
+
+			treenode.node = node
+			treenode.render(true)
+		})
+
 		this.populateFirstLevel()
 	}// }}}
 	render() {// {{{
@@ -46,14 +57,14 @@ export class N2Tree extends CustomHTMLElement {
 		this.rendered = true
 		return this
 	}// }}}
-	reset() {
+	reset() {// {{{
 		console.log('tree reset')
 		this.treeNodeComponents = {}
 		this.treeTrunk = []
 		this.rendered = false
 		this.elTreenodes.replaceChildren()
 		this.populateFirstLevel()
-	}
+	}// }}}
 	populateFirstLevel() {//{{{
 		nodeStore.get(ROOT_NODE)
 			.then(node => node.fetchChildren())