Design change.

static/css/markdown.css

@@ -19,6 +19,7 @@
 
 	h2 {
 		font-size: 1.25em;
+		margin-top: 32px;
 		margin-bottom: 0px;
 		color: var(--color1);
 	}
@@ -29,6 +30,10 @@
 		color: var(--color1);
 	}
 
+	p {
+		line-height: 150%;
+	}
+
 	img {
 		max-width: var(--thumbnail-width);
 		max-height: var(--thumbnail-height);

static/css/notes2.css

@@ -52,18 +52,22 @@ html {
 #tree {
 	grid-area: tree;
 	display: grid;
-	padding: 16px 0px 16px 16px;
+	background-color: #fafafa;
-	color: #ddd;
+	color: #444;
 	z-index: 100;
-	border-left: 2px solid #333;
+
+	border-right: 1px solid #ddd;
 
 	n2-tree {
-		border: 2px solid #333;
+		/*border: 2px solid #f8f8f8;*/
+		padding: 16px 48px 16px 24px;
 	}
 
 	&:focus-within {
 		n2-tree {
+			/*
 			border: 2px solid #fe5f55;
+			*/
 		}
 
 	}
@@ -95,18 +99,20 @@ html {
 
 	.node {
 		display: grid;
-		grid-template-columns: 24px min-content;
+		grid-template-columns: 40px min-content;
 		grid-template-rows:
 			min-content 1fr;
 		margin-top: 12px;
-
+		align-items: center;
 
 		.expand-toggle {
 			user-select: none;
+			cursor: pointer;
+			justify-self: center;
 
 			img {
-				width: 16px;
+				width: auto;
-				height: 16px;
+				height: 18px;
 			}
 		}
 
@@ -128,8 +134,8 @@ html {
 
 		.children {
 			padding-left: 24px;
-			margin-left: 8px;
+			margin-left: 18px;
-			border-left: 1px solid #444;
+			border-left: 1px solid #ddd;
 			grid-column: 1 / -1;
 
 			&.collapsed {
@@ -141,9 +147,12 @@ html {
 
 #tree-nodes {
 	padding: 16px 32px;
-	background-color: #333;
+	/*
 	border-radius: 8px;
+*/
+	/*
 	box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
+	*/
 }
 
 #crumbs {

static/images/collapsed.svg

@@ -2,73 +2,49 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="399.99997"
+   width="24.999989"
-   height="399.99997"
+   height="20.000013"
-   viewBox="0 0 105.83332 105.83333"
+   viewBox="0 0 6.6145802 5.2916702"
    version="1.1"
-   id="svg8"
+   id="svg1"
-   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
    sodipodi:docname="collapsed.svg"
-   xml:space="preserve"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  <sodipodi:namedview
-   xmlns:cc="http://creativecommons.org/ns#"
+     id="namedview1"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
-     id="defs2" /><sodipodi:namedview
-     id="base"
      pagecolor="#ffffff"
-     bordercolor="#666666"
+     bordercolor="#000000"
-     borderopacity="1.0"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="304.05591"
-     inkscape:cy="298.39905"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:window-width="1916"
-     inkscape:window-height="1404"
-     inkscape:window-x="0"
-     inkscape:window-y="16"
-     inkscape:window-maximized="0"
-     inkscape:showpageshadow="true"
      inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d6d6d6"
+     inkscape:deskcolor="#d1d1d1"
-     showborder="true" /><metadata
+     inkscape:document-units="px"
-     id="metadata5"><rdf:RDF><cc:Work
+     inkscape:zoom="4.8373092"
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+     inkscape:cx="6.201795"
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
+     inkscape:cy="-12.40359"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="false" />
+  <defs
+     id="defs1" />
+  <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-42.756321,-24.613384)"><rect
+     transform="translate(-102.39375,-146.31458)">
-       style="color:#000000;overflow:visible;fill:#537979;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
+    <title
-       id="rect5470"
+       id="title1">folder-outline</title>
-       width="105.83333"
+    <path
-       height="105.83333"
+       d="m 108.34687,150.94479 h -5.29166 v -3.30729 h 5.29166 m 0,-0.66146 h -2.64584 l -0.66145,-0.66146 h -1.98437 c -0.36711,0 -0.66146,0.29435 -0.66146,0.66146 v 3.96875 a 0.66145729,0.66145729 0 0 0 0.66146,0.66146 h 5.29166 a 0.66145729,0.66145729 0 0 0 0.66146,-0.66146 v -3.30729 c 0,-0.36711 -0.29767,-0.66146 -0.66146,-0.66146 z"
-       x="42.756321"
+       id="path1"
-       y="24.613384"
+       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#71c837;fill-opacity:1;stroke-width:0.330728;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" />
-       rx="21.166666"
+  </g>
-       ry="21.166666" /><rect
+</svg>
-       style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
-       id="rect6360"
-       width="63.5"
-       height="18.520834"
-       x="63.922985"
-       y="68.26963"
-       rx="5.2916665"
-       ry="5.2916665" /><rect
-       style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
-       id="rect10171"
-       width="63.5"
-       height="18.520834"
-       x="-109.28004"
-       y="86.412567"
-       rx="5.2916665"
-       ry="5.2916665"
-       transform="rotate(-90)" /></g></svg>

static/images/expanded.svg

@@ -2,64 +2,43 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="399.99997"
+   width="26.499931"
-   height="399.99997"
+   height="20.000013"
-   viewBox="0 0 105.83332 105.83333"
+   viewBox="0 0 7.0114402 5.2916702"
    version="1.1"
-   id="svg8"
+   id="svg1"
-   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
    sodipodi:docname="expanded.svg"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    xml:space="preserve"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     id="namedview1"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
-     id="defs2" /><sodipodi:namedview
-     id="base"
      pagecolor="#ffffff"
-     bordercolor="#666666"
+     bordercolor="#000000"
-     borderopacity="1.0"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="304.05591"
-     inkscape:cy="298.39905"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:window-width="1916"
-     inkscape:window-height="1404"
-     inkscape:window-x="0"
-     inkscape:window-y="16"
-     inkscape:window-maximized="0"
-     inkscape:showpageshadow="true"
      inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d6d6d6"
+     inkscape:deskcolor="#d1d1d1"
-     showborder="true" /><metadata
+     inkscape:document-units="px"
-     id="metadata5"><rdf:RDF><cc:Work
+     inkscape:zoom="11.17754"
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+     inkscape:cx="20.845374"
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
+     inkscape:cy="26.929003"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-42.756321,-24.613384)"><rect
+     transform="translate(-101.33542,-147.10833)"><title
-       style="color:#000000;overflow:visible;fill:#537979;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
+       id="title1">folder-open</title><title
-       id="rect5470"
+       id="title1-1">folder-open-outline</title><path
-       width="105.83333"
+       d="m 102.69141,149.0927 -0.69454,2.64584 v -3.30729 h 5.62239 a 0.6614573,0.6614573 0 0 0 -0.66146,-0.66146 h -2.3151 l -0.66146,-0.66146 h -1.98437 a 0.6614573,0.6614573 0 0 0 -0.66145,0.66146 v 3.96875 a 0.6614573,0.6614573 0 0 0 0.66145,0.66146 h 4.96093 c 0.29766,0 0.56224,-0.19844 0.62839,-0.4961 l 0.76067,-2.8112 h -5.65545 m 4.26639,2.64584 h -4.29947 l 0.52916,-1.98438 h 4.29948 z"
-       height="105.83333"
+       id="path1"
-       x="42.756321"
+       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#71c837;fill-opacity:1;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" /></g></svg>
-       y="24.613384"
-       rx="21.166666"
-       ry="21.166666" /><rect
-       style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
-       id="rect6360"
-       width="63.5"
-       height="18.520834"
-       x="63.922985"
-       y="68.26963"
-       rx="5.2916665"
-       ry="5.2916665" /></g></svg>

static/images/leaf.svg

@@ -2,56 +2,51 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="399.99997"
+   width="18"
-   height="399.99997"
+   height="18"
-   viewBox="0 0 105.83332 105.83333"
+   viewBox="0 0 4.7625 4.7625"
    version="1.1"
-   id="svg8"
+   id="svg1"
-   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
    sodipodi:docname="leaf.svg"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    xml:space="preserve"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     id="namedview1"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
-     id="defs2" /><sodipodi:namedview
-     id="base"
      pagecolor="#ffffff"
-     bordercolor="#666666"
+     bordercolor="#000000"
-     borderopacity="1.0"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="303.34881"
-     inkscape:cy="297.69195"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:window-width="1916"
-     inkscape:window-height="1404"
-     inkscape:window-x="0"
-     inkscape:window-y="16"
-     inkscape:window-maximized="0"
-     inkscape:showpageshadow="true"
      inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d6d6d6"
+     inkscape:deskcolor="#d1d1d1"
-     showborder="true" /><metadata
+     inkscape:document-units="px"
-     id="metadata5"><rdf:RDF><cc:Work
+     inkscape:zoom="11.17754"
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+     inkscape:cx="8.0965937"
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
+     inkscape:cy="22.903072"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showgrid="false" /><defs
+     id="defs1" /><g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-42.756321,-24.613384)"><rect
+     transform="translate(-107.95,-148.16667)"><title
-       style="color:#000000;overflow:visible;fill:#555555;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
+       id="title1">folder-open</title><title
-       id="rect5470"
+       id="title1-1">folder-open-outline</title><title
-       width="105.83333"
+       id="title1-5">notebook-outline</title><title
-       height="105.83333"
+       id="title1-8">text-box-outline</title><path
-       x="42.756321"
+       d="m 108.47917,148.16667 c -0.29369,0 -0.52917,0.23548 -0.52917,0.52917 V 152.4 c 0,0.29369 0.23548,0.52917 0.52917,0.52917 h 3.70416 c 0.29369,0 0.52917,-0.23548 0.52917,-0.52917 v -3.70416 c 0,-0.29369 -0.23548,-0.52917 -0.52917,-0.52917 h -3.70416 m 0,0.52917 h 3.70416 V 152.4 h -3.70416 v -3.70416"
-       y="24.613384"
+       id="path1"
-       rx="21.166666"
+       style="fill:#ababab;fill-opacity:1;stroke-width:0.264583"
-       ry="21.166666" /></g></svg>
+       sodipodi:nodetypes="cssssssscccccc" /><path
+       d="m 109.00833,149.225 v 0.52917 h 2.64584 V 149.225 h -2.64584 m 0,1.05834 v 0.52916 h 2.64584 v -0.52916 h -2.64584 m 0,1.05833 v 0.52917 h 1.85209 v -0.52917 z"
+       id="path2"
+       style="fill:#c7c7c7;fill-opacity:1;stroke-width:0.264583"
+       sodipodi:nodetypes="ccccccccccccccc" /></g></svg>

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())