From 131c6133ba7901672eaae2036d44f6a53a681dc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 3 Jun 2026 22:22:29 +0200
Subject: [PATCH 01/79] Fixed path in logo small

---
 static/images/logo_small.svg | 30 ++++++++++++++++++------------
 static/js/tree.mjs           |  1 +
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/static/images/logo_small.svg b/static/images/logo_small.svg
index cb83d39..47eabde 100644
--- a/static/images/logo_small.svg
+++ b/static/images/logo_small.svg
@@ -7,7 +7,7 @@
    viewBox="0 0 7.5652731 5.2916666"
    version="1.1"
    id="svg1"
-   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    sodipodi:docname="logo_small.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -23,13 +23,13 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
-     inkscape:zoom="16.477217"
-     inkscape:cx="48.460855"
-     inkscape:cy="5.2193281"
-     inkscape:window-width="2190"
-     inkscape:window-height="1401"
-     inkscape:window-x="1463"
-     inkscape:window-y="18"
+     inkscape:zoom="8.2386085"
+     inkscape:cx="48.491198"
+     inkscape:cy="5.219328"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1" />
   <defs
@@ -47,17 +47,23 @@
        x="126.73541"
        y="178.59375"
        ry="1.0060203" />
+    <path
+       d="m 114.29355,207.99469 h -0.57869 l -0.72335,-1.79391 v 1.79391 h -0.49188 v -3.03326 h 0.50153 l 0.79568,1.99645 v -1.99645 h 0.49671 z m 2.34365,-0.50635 v 0.50635 h -1.85178 v -0.99823 q 0,-0.78122 0.72817,-0.78122 h 0.48224 q 0.16396,-0.005 0.16396,-0.18325 v -0.40507 q 0,-0.17361 -0.13985,-0.17361 h -0.64137 q -0.0964,0 -0.0964,0.10609 v 0.21701 h -0.4967 v -0.14949 q 0,-0.67996 0.59797,-0.67996 h 0.59797 q 0.65584,0 0.65584,0.63655 v 0.43402 q 0,0.33756 -0.15431,0.52081 h 0.005 q -0.15432,0.18325 -0.6028,0.18325 h -0.40507 q -0.19772,0 -0.19772,0.25076 v 0.51599 z"
+       id="text5"
+       style="font-weight:bold;font-size:4.82235px;font-family:'Forgotten Futurist';-inkscape-font-specification:'Forgotten Futurist, Bold';fill:#ffffff;stroke-width:0.40186"
+       transform="scale(1.1392149,0.87779751)"
+       aria-label="N2" />
     <text
        xml:space="preserve"
        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.82235px;font-family:'Forgotten Futurist';-inkscape-font-specification:'Forgotten Futurist, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;writing-mode:lr-tb;direction:ltr;fill:#ffffff;stroke:none;stroke-width:0.40186"
        x="112.25369"
-       y="207.99469"
-       id="text5"
+       y="213.81186"
+       id="text1"
        transform="scale(1.1392149,0.87779751)"><tspan
          sodipodi:role="line"
-         id="tspan5"
+         id="tspan1"
          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.82235px;font-family:'Forgotten Futurist';-inkscape-font-specification:'Forgotten Futurist, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;stroke:none;stroke-width:0.40186"
          x="112.25369"
-         y="207.99469">N2</tspan></text>
+         y="213.81186">N2</tspan></text>
   </g>
 </svg>
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index 04555f6..fc861e4 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -68,6 +68,7 @@ export class N2Tree extends CustomHTMLElement {
 						font-size: 1.25em;
 						font-weight: bold;
 						cursor: pointer;
+						margin-left: 16px;
 					}
 				}
 			</style>

From 44ee1ac94b3c01e0eae0995d5383c576b1651fbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 4 Jun 2026 07:47:27 +0200
Subject: [PATCH 02/79] Design changes

---
 static/css/notes2.css | 36 ++++-----------------------------
 static/js/tree.mjs    | 47 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index a2dbc11..5a3e0dd 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -10,6 +10,7 @@
 	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
+	--line-color: #ccc;
 	--tree-expander: 0px;
 	--functions-width: 150px;
 }
@@ -111,7 +112,7 @@ html {
 	color: #333;
 	background-color: #eee;
 	font-weight: bold;
-	border-right: 2px solid #ddd;
+	border-right: 1px solid var(--line-color);
 
 	display: grid;
 	justify-items: center;
@@ -127,6 +128,7 @@ html {
 	}
 }
 
+
 #tree {
 	grid-area: tree;
 	display: grid;
@@ -134,33 +136,7 @@ html {
 	color: #444;
 	z-index: 100;
 
-	border-right: 2px solid #ddd;
-
-	#logo {
-		display: grid;
-		grid-template-columns: min-content 1fr min-content;
-		align-items: center;
-		justify-items: start;
-		cursor: pointer;
-		padding: 16px;
-		border-bottom: 1px solid #ccc;
-
-		.el-search {
-			justify-self: end;
-		}
-
-		img:first-child {
-			height: 24px;
-			margin-right: 8px;
-		}
-	}
-
-	.icons {
-		display: flex;
-		justify-content: center;
-		margin: 16px 0px 32px 0px;
-		gap: 8px;
-	}
+	border-right: 1px solid var(--line-color);
 
 	n2-tree {
 		.el-treenodes {
@@ -168,10 +144,6 @@ html {
 		}
 	}
 
-	&:focus-within {
-		n2-tree {}
-	}
-
 	.node {
 		display: grid;
 		grid-template-columns: 40px min-content;
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index fc861e4..397dfc9 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -64,16 +64,61 @@ export class N2Tree extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-tree {
+					anchor-name: --tree;
+
+					#logo {
+						display: grid;
+						grid-template-columns: 1fr min-content;
+						align-items: center;
+						justify-items: start;
+						cursor: pointer;
+						padding: 16px;
+						border-bottom: 1px solid var(--line-color);
+
+						img:first-child {
+							height: 24px;
+							margin-right: 8px;
+						}
+					}
+
+					.icons {
+						display: flex;
+						justify-content: center;
+						margin: 16px 0px 32px 0px;
+						gap: 8px;
+						padding-bottom: 16px;
+						border-bottom: 1px solid var(--line-color);
+					}
+
+
 					.el-hide-tree {
 						font-size: 1.25em;
 						font-weight: bold;
 						cursor: pointer;
 						margin-left: 16px;
 					}
+
+					.focusline {
+						position: fixed;
+						background-color: #a00;
+						top: 0px;
+						left: anchor(--tree left);
+						right: anchor(--tree right);
+						height: 2px;
+						opacity: 0;
+					}
+
+					&:focus-within {
+						.focusline {
+							opacity: 1;
+							background-color: #fff;
+							transition: background-color 150ms;
+						}
+					}
 				}
 			</style>
+			<div class="focusline"></div>
 			<div id="logo">
-				<img src="/images/${_VERSION}/logo_small.svg" />
 				<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
 				<div data-el="hide-tree">&lt;</div>
 			</div>

From 12f8c019f0bd0110bc8097685a6be1660af37b15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 4 Jun 2026 08:42:54 +0200
Subject: [PATCH 03/79] Small UI changes

---
 static/css/notes2.css   |  4 ++++
 static/images/leaf.svg  | 20 +++++++++-------
 static/js/app.mjs       |  1 -
 static/js/page_node.mjs |  6 ++---
 static/js/tree.mjs      | 51 ++++++++++++++++++++++-------------------
 5 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index 5a3e0dd..e1a6972 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -199,6 +199,10 @@ html {
 #main-page {
 	display: contents;
 
+	&:focus-within {
+		background-color: #faf;
+	}
+
 	&.node {
 		#page-node {
 			display: contents;
diff --git a/static/images/leaf.svg b/static/images/leaf.svg
index 306a2a0..9d200c3 100644
--- a/static/images/leaf.svg
+++ b/static/images/leaf.svg
@@ -8,7 +8,7 @@
    version="1.1"
    id="svg1"
    sodipodi:docname="leaf.svg"
-   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
    xml:space="preserve"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -23,13 +23,13 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
-     inkscape:zoom="11.17754"
-     inkscape:cx="8.0965937"
-     inkscape:cy="22.903072"
-     inkscape:window-width="1916"
-     inkscape:window-height="1161"
-     inkscape:window-x="0"
-     inkscape:window-y="18"
+     inkscape:zoom="31.614857"
+     inkscape:cx="5.0609117"
+     inkscape:cy="9.5524708"
+     inkscape:window-width="2190"
+     inkscape:window-height="1401"
+     inkscape:window-x="1463"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1"
      showgrid="false" /><defs
@@ -42,6 +42,10 @@
        id="title1-1">folder-open-outline</title><title
        id="title1-5">notebook-outline</title><title
        id="title1-8">text-box-outline</title><path
+       style="fill:#ffffff;stroke-width:0.264583"
+       d="m 108.3015,148.56838 h 3.95851 v 3.96688 h -3.95851 z"
+       id="path3"
+       sodipodi:nodetypes="ccccc" /><path
        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"
        id="path1"
        style="fill:#ababab;fill-opacity:1;stroke-width:0.264583"
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 4978b98..efdddd1 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -66,7 +66,6 @@ export class App {
 		switch (event.key.toUpperCase()) {
 			case 'T':
 				if (document.activeElement.id === 'tree-nodes') {
-					console.log('take focus')
 					this.nodeUI.takeFocus()
 				} else {
 					this.tree.focus()
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 81d7c33..e26cb86 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -92,7 +92,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 			this.node.setContent(this.elNodeContent.value)
 		})
-		this.elIconHistory.addEventListener('click', ()=>_mbus.dispatch('SHOW_PAGE', { page: 'history' }))
+		this.elIconHistory.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'history' }))
 
 		this.showMarkdown(true)
 	}// }}}
@@ -106,9 +106,9 @@ export class N2PageNodeUI extends CustomHTMLElement {
 	}// }}}
 	takeFocus() {// {{{
 		if (this.showMarkdown()) {
-			this.elNodeMarkdown.focus()
+			this.elNodeMarkdown.focus({ preventScroll: true })
 		} else
-			this.elNodeContent.focus()
+			this.elNodeContent.focus({ preventScroll: true })
 	}// }}}
 
 	contentChanged(event) {//{{{
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index 397dfc9..4e92021 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -64,8 +64,6 @@ export class N2Tree extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-tree {
-					anchor-name: --tree;
-
 					#logo {
 						display: grid;
 						grid-template-columns: 1fr min-content;
@@ -97,27 +95,8 @@ export class N2Tree extends CustomHTMLElement {
 						cursor: pointer;
 						margin-left: 16px;
 					}
-
-					.focusline {
-						position: fixed;
-						background-color: #a00;
-						top: 0px;
-						left: anchor(--tree left);
-						right: anchor(--tree right);
-						height: 2px;
-						opacity: 0;
-					}
-
-					&:focus-within {
-						.focusline {
-							opacity: 1;
-							background-color: #fff;
-							transition: background-color 150ms;
-						}
-					}
 				}
 			</style>
-			<div class="focusline"></div>
 			<div id="logo">
 				<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
 				<div data-el="hide-tree">&lt;</div>
@@ -492,10 +471,35 @@ export class N2TreeNode extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
+			<style>
+				n2-tree:focus-within {
+					.el-name {
+						&.selected {
+							span {
+								position:relative;
+							}
+							span:before {
+								position: absolute;
+								content: '';
+								top: -8px;
+								left: -36px;
+								right: -8px;
+								bottom: -4px;
+								z-index: -1;
+
+								background-color: #f8f8f8;
+								border: 1px solid #ddd;
+								border-radius: 4px;
+							}
+						}
+					}
+				}
+			</style>
+
 			<div data-el="expand-toggle" class="expand-toggle">
 				<img data-el="expand">
 			</div>
-			<div data-el="name" class="name"></div>
+			<div data-el="name" class="name"><span></span></div>
 			<div data-el="children" class="children"></div>
 		`
 	}// }}}
@@ -541,7 +545,8 @@ export class N2TreeNode extends CustomHTMLElement {
 		}
 
 		// Update the name and selected status
-		this.elName.innerText = this.node.get('Name')
+		this.elName.querySelector('span').innerText = this.node.get('Name')
+
 		if (this.tree.isSelected(this.node))
 			this.elName.classList.add('selected')
 		else

From 4ffb6e3a1121bac3d67d9cb26f8dbf800e622fed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 4 Jun 2026 10:17:50 +0200
Subject: [PATCH 04/79] Moved full-page management to separate class

---
 static/css/notes2.css | 45 ++++++++++++++++++++++++++++++++++++++++++-
 static/js/tree.mjs    |  2 +-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index e1a6972..d9b6170 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -140,7 +140,7 @@ html {
 
 	n2-tree {
 		.el-treenodes {
-			margin: 32px;
+			margin: 24px 32px 32px 32px;
 		}
 	}
 
@@ -470,3 +470,46 @@ dialog.op {
 		}
 	}
 }
+
+
+/* ------------------------------------------- *
+ * Whole page is 100vh with scrolling sections *
+ * ------------------------------------------- */
+#app.full-height {
+	#notes2 {
+		height: 100vh;
+
+
+	}
+
+	#tree {
+		n2-tree {
+			.el-treenodes {
+				height: calc(100vh - 64px - 64px);
+				margin: 0px;
+				padding: 12px 32px 32px 32px;
+				overflow-y: auto;
+
+				&::-webkit-scrollbar {
+					display: none;
+				}
+
+				-ms-overflow-style: none;
+				scrollbar-width: none;
+			}
+		}
+	}
+
+	n2-nodeui {
+		.el-node-markdown {
+			overflow-y: scroll;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			-ms-overflow-style: none;
+			scrollbar-width: none;
+		}
+	}
+}
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index 4e92021..928d60d 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -82,7 +82,7 @@ export class N2Tree extends CustomHTMLElement {
 					.icons {
 						display: flex;
 						justify-content: center;
-						margin: 16px 0px 32px 0px;
+						margin-top: 16px;
 						gap: 8px;
 						padding-bottom: 16px;
 						border-bottom: 1px solid var(--line-color);

From 71af26ca1d99d29faec8af40b29ab4b2f3ab519d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 4 Jun 2026 10:18:03 +0200
Subject: [PATCH 05/79] Bumped to v11

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 169c3de..10d578b 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v10"
+const VERSION = "v11"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From 5f068ac0365250583b3363ebda7389b50233d555 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 5 Jun 2026 18:00:10 +0200
Subject: [PATCH 06/79] Work on node history

---
 static/css/notes2.css       | 55 +++++++++++++++++++++++++
 static/images/icon_back.svg | 49 ++++++++++++++++++++++
 static/js/app.mjs           |  3 +-
 static/js/node_store.mjs    | 78 ++++++++++++++++++++++++++---------
 static/js/page_history.mjs  | 81 ++++++++++++++++++++++++++++++++++++-
 5 files changed, 246 insertions(+), 20 deletions(-)
 create mode 100644 static/images/icon_back.svg

diff --git a/static/css/notes2.css b/static/css/notes2.css
index d9b6170..a41afda 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -513,3 +513,58 @@ dialog.op {
 		}
 	}
 }
+
+
+
+
+
+n2-pagehistory {
+	.layout {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 8px;
+		align-items: center;
+
+		.el-back-image,
+		.el-back-text {
+			cursor: pointer;
+		}
+
+		.el-node-name {
+			margin-left: 8px;
+		}
+
+		.el-nodes {
+			grid-column: 1 / -1;
+
+			display: grid;
+			grid-template-columns: min-content 1fr;
+			grid-gap: 4px 8px;
+
+			.history-node {
+				display: contents;
+			}
+		}
+
+		.pagination {
+			grid-column: 1 / -1;
+			margin-top: 16px;
+
+			display: grid;
+			grid-template-columns: repeat(3, min-content);
+			grid-gap: 32px;
+			white-space: nowrap;
+			user-select: none;
+
+			.el-prev {
+				font-weight: bold;
+				cursor: pointer;
+			}
+
+			.el-next {
+				font-weight: bold;
+				cursor: pointer;
+			}
+		}
+	}
+}
diff --git a/static/images/icon_back.svg b/static/images/icon_back.svg
new file mode 100644
index 0000000..504976b
--- /dev/null
+++ b/static/images/icon_back.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="23.999962"
+   height="24"
+   viewBox="0 0 6.3499898 6.35"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_back.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.81067621"
+     inkscape:cx="11.718612"
+     inkscape:cy="12.335381"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-101.82501,-145.32499)">
+    <title
+       id="title1">arrow-left-circle</title>
+    <path
+       d="m 101.82501,148.49999 a 3.1749998,3.1749998 0 0 1 3.175,-3.175 3.1749998,3.1749998 0 0 1 3.17499,3.175 3.1749998,3.1749998 0 0 1 -3.17499,3.175 3.1749998,3.1749998 0 0 1 -3.175,-3.175 m 5.08,-0.3175 H 104.365 l 1.11125,-1.11125 -0.45084,-0.45085 -1.87961,1.8796 1.87961,1.8796 0.45084,-0.45085 -1.11125,-1.11125 h 2.54001 z"
+       id="path1"
+       style="stroke-width:0.3175" />
+  </g>
+</svg>
diff --git a/static/js/app.mjs b/static/js/app.mjs
index efdddd1..11c3007 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -44,7 +44,8 @@ export class App {
 				document.getElementById('node-content')?.focus()
 		})
 
-		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
+		// XXX - _mbus.dispatch('SHOW_PAGE', { page: 'node' })
+		_mbus.dispatch('SHOW_PAGE', { page: 'history' })
 
 		window._sync = new Sync()
 
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index c72445c..d3b95de 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -74,7 +74,7 @@ export class NodeStore {
 			req.onsuccess = (event) => {
 				this.db = event.target.result
 				this.sendQueue = new SimpleNodeStore(this.db, 'send_queue')
-				this.nodesHistory = new SimpleNodeStore(this.db, 'nodes_history')
+				this.nodesHistory = new NodeHistoryStore(this.db, 'nodes_history')
 				this.files = new SimpleNodeStore(this.db, 'files')
 				this.initializeRootNode()
 					.then(() => resolve())
@@ -437,24 +437,66 @@ class SimpleNodeStore {
 	}//}}}
 }
 
-export class StoreFile {
-	static createFromFileObject(f) {
-		const obj = new StoreFile()
-		obj.name = f.name
-		obj.size = f.size
-		obj.mime = f.type
-		return obj
-	}
-	constructor() {
-		this.name = ''
-		this.size = 0
-		this.mime = ''
+class NodeHistoryStore extends SimpleNodeStore {
+	constructor(db, storeName) {//{{{
+		super(db, storeName)
+	}//}}}
+	count(uuid) {//{{{
+		if (uuid === undefined)
+			return super.count()
 
-		this.objectURL = null // URL.createObjectURL(blob)
-	}
-	data() {
-		return {
-		}
+		const index = this.db
+			.transaction(['nodes', this.storeName], 'readonly')
+			.objectStore(this.storeName)
+			.index('byUUID')
+
+		return new Promise((resolve, reject) => {
+			const request = index.count(uuid)
+			request.onsuccess = (event) => resolve(event.target.result)
+			request.onerror = (event) => reject(event.target.error)
+		})
+	}//}}}
+	retrievePage(uuid, perPage, page) {
+		return new Promise((resolve, _reject) => {
+			const cursor = this.db
+				.transaction(['nodes', this.storeName], 'readonly')
+				.objectStore(this.storeName)
+				.index('byUUID')
+				.openCursor(uuid)
+
+			let retrieved = 0
+			let first = true
+			const nodes = []
+
+			cursor.onsuccess = (event) => {
+				const cursor = event.target.result
+				if (!cursor) {
+					resolve(nodes)
+					return
+				}
+
+				// openCursor returns the first value which is only useful
+				// if the first page is requested.
+				if (page == 1 || !first) {
+					retrieved++
+					nodes.push(new Node(cursor.value))
+					if (retrieved === perPage) {
+						resolve(nodes)
+						return
+					}
+					cursor.continue()
+					return
+				}
+
+				// Jump to the start of the requested page.
+				// Minus one since the first record was already returned.
+				if (page > 1 && first) {
+					first = false
+					cursor.advance((perPage * (page - 1)))
+					return
+				}
+			}
+		})
 	}
 }
 
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index a931faa..434f47b 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -1,15 +1,94 @@
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
+	static PAGESIZE = 10
+
 	static {
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
-			<div>History</div>
+			<style>
+				n2-pagehistory {
+					margin-top: 32px;
+
+					.layout {
+					}
+				}
+			</style>
+
+			<div class="layout">
+				<img data-el="back-image" src="/images/${_VERSION}/icon_back.svg" class="colorize">
+				<div data-el="back-text">Back to node</div>
+
+				<img src="/images/${_VERSION}/icon_history.svg" class="colorize">
+				<h1 data-el="node-name"></h1>
+
+				<div data-el="nodes"></div>
+
+
+				<div class="pagination">
+					<div data-el="prev">&lt;</div>
+					<div data-el="page"></div>
+					<div data-el="next">&gt;</div>
+				</div>
+			</div>
 		`
 	}
 
 	constructor() {
 		super()
+
+		// Connect back icon and text to give the user a way back to the node.
+		this.elBackImage.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
+		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
+		this.elPrev.addEventListener('click', ()=>this.prevPage())
+		this.elNext.addEventListener('click', ()=>this.nextPage())
+
+		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
+			await this.useNode(event.detail.data)
+			this.render()
+		})
+	}
+
+	async useNode(node) {
+		this.node = node
+		this.page = 1
+
+		this.nodesTotal = await nodeStore.nodesHistory.count(this.node.UUID)
+		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
+	}
+
+
+	prevPage() {
+		if (this.page == 1)
+			return
+		this.page--
+		this.render()
+	}
+
+	nextPage() {
+		if (this.page >= this.pages)
+			return
+		this.page++
+		this.render()
+	}
+
+	async render() {
+		this.elNodeName.innerText = this.node.get('Name')
+		this.elPage.innerText = `${this.page} / ${this.pages}`
+
+		this.elNodes.innerHTML = ''
+		let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
+		let i = 0
+		for (const n of nodes) {
+			i++
+			const div = document.createElement('div')
+			div.innerHTML = `
+				<div>${N2PageHistory.PAGESIZE * (this.page - 1) + i}</div>
+				<div>${n.get('Updated').replace('T', ' ')}</div>
+			`
+			div.classList.add('history-node')
+			this.elNodes.append(div)
+		}
 	}
 }
 customElements.define('n2-pagehistory', N2PageHistory)

From 65a0225d749febba5ce1d44b5dcb8535f7ff412a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sat, 6 Jun 2026 13:06:48 +0200
Subject: [PATCH 07/79] Formatting of history

---
 static/css/notes2.css      | 42 +++++++++++++++++++++++++----
 static/js/node_store.mjs   |  2 +-
 static/js/page_history.mjs | 54 +++++++++++++++++++++++++++++++-------
 3 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index a41afda..05fa6f2 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -5,9 +5,6 @@
 	--thumbnail-width: 300px;
 	--thumbnail-height: 100px;
 
-	/*
-	--colorize: invert(10%) sepia(61%) saturate(5017%) hue-rotate(323deg) brightness(90%) contrast(109%);
-	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
 	--line-color: #ccc;
@@ -538,8 +535,43 @@ n2-pagehistory {
 			grid-column: 1 / -1;
 
 			display: grid;
-			grid-template-columns: min-content 1fr;
-			grid-gap: 4px 8px;
+			grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
+
+			background-color: var(--line-color);
+			gap: 1px;
+			border: 1px solid var(--line-color);
+
+			&>div>div {
+				padding: 8px 12px;
+				background-color: #fff;
+				white-space: nowrap;
+
+				&.index {
+					text-align: right;
+				}
+
+				&.updated {
+					white-space: initial;
+				}
+
+				.date {
+					white-space: nowrap;
+					font-weight: bold;
+				}
+
+				.time {
+					white-space: nowrap;
+					color: #555;
+				}
+
+				&.name {
+					white-space: initial;
+					/*overflow-wrap: anywhere;*/
+					word-break: break-all;
+					color: var(--color1);
+
+				}
+			}
 
 			.history-node {
 				display: contents;
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index d3b95de..033e5eb 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -462,7 +462,7 @@ class NodeHistoryStore extends SimpleNodeStore {
 				.transaction(['nodes', this.storeName], 'readonly')
 				.objectStore(this.storeName)
 				.index('byUUID')
-				.openCursor(uuid)
+				.openCursor(uuid, 'prev')
 
 			let retrieved = 0
 			let first = true
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index 434f47b..ee662df 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -1,7 +1,7 @@
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
-	static PAGESIZE = 10
+	static PAGESIZE = 25
 
 	static {
 		this.tmpl = document.createElement('template')
@@ -24,7 +24,6 @@ export class N2PageHistory extends CustomHTMLElement {
 
 				<div data-el="nodes"></div>
 
-
 				<div class="pagination">
 					<div data-el="prev">&lt;</div>
 					<div data-el="page"></div>
@@ -37,11 +36,14 @@ export class N2PageHistory extends CustomHTMLElement {
 	constructor() {
 		super()
 
+		this.setAttribute('tabindex', '-1')
+		this.addEventListener('keydown', event => this.keyHandler(event))
+
 		// Connect back icon and text to give the user a way back to the node.
 		this.elBackImage.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
 		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
-		this.elPrev.addEventListener('click', ()=>this.prevPage())
-		this.elNext.addEventListener('click', ()=>this.nextPage())
+		this.elPrev.addEventListener('click', () => this.prevPage())
+		this.elNext.addEventListener('click', () => this.nextPage())
 
 		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
 			await this.useNode(event.detail.data)
@@ -57,6 +59,16 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
 	}
 
+	keyHandler(event) {
+		switch (event.key) {
+			case 'ArrowLeft':
+				this.prevPage()
+				break
+			case 'ArrowRight':
+				this.nextPage()
+				break
+		}
+	}
 
 	prevPage() {
 		if (this.page == 1)
@@ -72,23 +84,45 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.render()
 	}
 
+	formatSize(s) {
+		let div = 1
+		let unit = 'B'
+		if (s >= 1048576) {
+			div = 1048576
+			unit = 'MB'
+		} else if (s >= 1024) {
+			div = 1024
+			unit = 'kB'
+		}
+
+		return new Intl.NumberFormat(undefined, {
+			maximumFractionDigits: 0
+		}).format(Math.round(s / div)) + ' ' + unit
+	}
+
 	async render() {
 		this.elNodeName.innerText = this.node.get('Name')
 		this.elPage.innerText = `${this.page} / ${this.pages}`
 
-		this.elNodes.innerHTML = ''
 		let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
 		let i = 0
-		for (const n of nodes) {
+		let divs = nodes.map(n => {
 			i++
+
+			const date = n.get('Updated').slice(0, 10)
+			const time = n.get('Updated').slice(11, 19)
+
 			const div = document.createElement('div')
 			div.innerHTML = `
-				<div>${N2PageHistory.PAGESIZE * (this.page - 1) + i}</div>
-				<div>${n.get('Updated').replace('T', ' ')}</div>
+				<div class="index">${1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)}</div>
+				<div class="updated"><span class="date">${date}</span> <span class="time">${time}</span></div>
+				<div class="size">${this.formatSize(n.get('Content').length)}</div>
+				<div class="name">${n.get('Name')}</div>
 			`
 			div.classList.add('history-node')
-			this.elNodes.append(div)
-		}
+			return div
+		})
+		this.elNodes.replaceChildren(...divs)
 	}
 }
 customElements.define('n2-pagehistory', N2PageHistory)

From 9506b89453750cab7f8d483dfa33501c4d8cd13a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sat, 6 Jun 2026 14:29:22 +0200
Subject: [PATCH 08/79] Download history to client

---
 main.go                    |  26 ++++++-
 node.go                    |  47 ++++++++++-
 static/css/notes2.css      | 154 ++++++++++++++++++++++---------------
 static/js/node_store.mjs   |  25 +++++-
 static/js/page_history.mjs |  72 +++++++++++++++--
 5 files changed, 249 insertions(+), 75 deletions(-)

diff --git a/main.go b/main.go
index 10d578b..22facee 100644
--- a/main.go
+++ b/main.go
@@ -25,7 +25,7 @@ import (
 
 const VERSION = "v11"
 const CONTEXT_USER = 1
-const SYNC_PAGINATION = 200
+const SYNC_PAGINATION = 20
 
 var (
 	FlagGenerate       bool
@@ -140,6 +140,7 @@ func main() { // {{{
 	http.HandleFunc("/sync/to_server", authenticated(actionSyncToServer))
 
 	http.HandleFunc("/node/retrieve/{uuid}", authenticated(actionNodeRetrieve))
+	http.HandleFunc("/node/history/retrieve/{uuid}/{offset}", authenticated(actionNodeHistoryRetrieve))
 
 	http.HandleFunc("/service_worker.js", pageServiceWorker)
 
@@ -328,6 +329,29 @@ func actionNodeRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
 		"Node": node,
 	})
 } // }}}
+func actionNodeHistoryRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
+	user := getUser(r)
+	var err error
+
+	uuid := r.PathValue("uuid")
+	offset, err := strconv.Atoi(r.PathValue("offset"))
+	if err != nil {
+		responseError(w, err)
+		return
+	}
+
+	nodes, hasMore, err := RetrieveNodeHistory(user.UserID, uuid, offset)
+	if err != nil {
+		responseError(w, err)
+		return
+	}
+
+	responseData(w, map[string]any{
+		"OK":      true,
+		"Nodes":   nodes,
+		"HasMore": hasMore,
+	})
+} // }}}
 func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
 	user := getUser(r)
 
diff --git a/node.go b/node.go
index ffcc89f..4d7da95 100644
--- a/node.go
+++ b/node.go
@@ -3,8 +3,8 @@ package main
 import (
 	// External
 	werr "git.gibonuddevalla.se/go/wrappederror"
-	"github.com/jmoiron/sqlx"
 	"github.com/derektata/lorem/ipsum"
+	"github.com/jmoiron/sqlx"
 
 	// Standard
 	"database/sql"
@@ -248,6 +248,51 @@ func RetrieveNode(userID int, nodeUUID string) (node Node, err error) { // {{{
 
 	return
 } // }}}
+func RetrieveNodeHistory(userID int, nodeUUID string, offset int) (nodes []Node, hasMore bool, err error) { // {{{
+	nodes = []Node{}
+
+	var rows *sqlx.Rows
+	rows, err = db.Queryx(`
+		SELECT
+			uuid,
+			user_id,
+			name,
+			created,
+			updated,
+			content,
+			content_encrypted
+		FROM node_history
+		WHERE
+			user_id = $1 AND
+			uuid = $2
+		LIMIT $3 OFFSET $4
+		`,
+		userID,
+		nodeUUID,
+		SYNC_PAGINATION+1,
+		offset,
+	)
+	if err != nil {
+		err = werr.Wrap(err)
+		return
+	}
+	defer rows.Close()
+
+	for rows.Next() {
+		node := Node{}
+		if err = rows.StructScan(&node); err != nil {
+			err = werr.Wrap(err)
+			return
+		}
+		nodes = append(nodes, node)
+	}
+
+	if len(nodes) > SYNC_PAGINATION {
+		hasMore = true
+		nodes = nodes[0 : len(nodes)-1]
+	}
+	return
+} // }}}
 func NodeCrumbs(nodeUUID string) (nodes []Node, err error) { // {{{
 	var rows *sqlx.Rows
 	rows, err = db.Queryx(`
diff --git a/static/css/notes2.css b/static/css/notes2.css
index 05fa6f2..11b8164 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -516,87 +516,115 @@ dialog.op {
 
 
 n2-pagehistory {
-	.layout {
+
+	.back,
+	.node-name {
 		display: grid;
 		grid-template-columns: min-content 1fr;
 		grid-gap: 8px;
 		align-items: center;
+		margin-bottom: 16px;
+	}
 
-		.el-back-image,
-		.el-back-text {
-			cursor: pointer;
-		}
+	.group-label {
+		font-weight: bold;
+		background-color: #444;
+		color: #fff;
+		padding: 8px 32px;
+		display: inline-block;
+		margin-left: 32px;
+		transform: translateY(14px);
+		border-radius: 6px;
+	}
 
-		.el-node-name {
-			margin-left: 8px;
-		}
+	.group {
+		border: 1px solid #ccc;
+		padding: 32px;
+		margin-bottom: 32px;
+		border-radius: 8px;
+		background-color: #f8f8f8;
 
-		.el-nodes {
-			grid-column: 1 / -1;
+		box-shadow:
+			rgba(0, 0, 0, 0.4) 0px 2px 4px,
+			rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+			rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+	}
 
-			display: grid;
-			grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
+	.el-back-image,
+	.el-back-text {
+		cursor: pointer;
+	}
 
-			background-color: var(--line-color);
-			gap: 1px;
-			border: 1px solid var(--line-color);
+	.el-node-name {
+		margin-left: 8px;
+	}
 
-			&>div>div {
-				padding: 8px 12px;
-				background-color: #fff;
-				white-space: nowrap;
+	.el-nodes {
+		grid-column: 1 / -1;
 
-				&.index {
-					text-align: right;
-				}
+		display: grid;
+		grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
 
-				&.updated {
-					white-space: initial;
-				}
+		background-color: var(--line-color);
+		gap: 1px;
+		border: 1px solid var(--line-color);
 
-				.date {
-					white-space: nowrap;
-					font-weight: bold;
-				}
-
-				.time {
-					white-space: nowrap;
-					color: #555;
-				}
-
-				&.name {
-					white-space: initial;
-					/*overflow-wrap: anywhere;*/
-					word-break: break-all;
-					color: var(--color1);
-
-				}
-			}
-
-			.history-node {
-				display: contents;
-			}
-		}
-
-		.pagination {
-			grid-column: 1 / -1;
-			margin-top: 16px;
-
-			display: grid;
-			grid-template-columns: repeat(3, min-content);
-			grid-gap: 32px;
+		&>div>div {
+			padding: 8px 12px;
+			background-color: #fff;
 			white-space: nowrap;
-			user-select: none;
 
-			.el-prev {
-				font-weight: bold;
-				cursor: pointer;
+			&.index {
+				text-align: right;
 			}
 
-			.el-next {
-				font-weight: bold;
-				cursor: pointer;
+			&.updated {
+				white-space: initial;
 			}
+
+			.date {
+				white-space: nowrap;
+				font-weight: bold;
+			}
+
+			.time {
+				white-space: nowrap;
+				color: #555;
+			}
+
+			&.name {
+				white-space: initial;
+				/*overflow-wrap: anywhere;*/
+				word-break: break-all;
+				color: var(--color1);
+
+			}
+		}
+
+		.history-node {
+			display: contents;
+		}
+	}
+
+	.el-pagination {
+		grid-column: 1 / -1;
+		margin-top: 16px;
+
+		display: grid;
+		grid-template-columns: repeat(3, min-content);
+		grid-gap: 16px;
+		align-items: center;
+		white-space: nowrap;
+		user-select: none;
+
+		.el-prev,
+		.el-next {
+			font-weight: bold;
+			cursor: pointer;
+			border: 1px solid #aaa;
+			background-color: #eee;
+			padding: 8px 16px;
+			border-radius: 4px;
 		}
 	}
 }
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 033e5eb..9e8a672 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -456,7 +456,24 @@ class NodeHistoryStore extends SimpleNodeStore {
 			request.onerror = (event) => reject(event.target.error)
 		})
 	}//}}}
-	retrievePage(uuid, perPage, page) {
+	hasNode(uuid, updated) {
+		return new Promise((resolve, reject) => {
+			const req = this.db
+				.transaction(['nodes', this.storeName], 'readonly')
+				.objectStore(this.storeName)
+				.getKey([uuid, updated])
+
+			req.onsuccess = (event) => {
+				resolve(event.target.result !== undefined)
+			}
+
+			req.onerror = (event) => {
+				console.log(event.target.error)
+				reject(event.target.error)
+			}
+		})
+	}
+	retrievePage(uuid, perPage, page) {// {{{
 		return new Promise((resolve, _reject) => {
 			const cursor = this.db
 				.transaction(['nodes', this.storeName], 'readonly')
@@ -497,10 +514,10 @@ class NodeHistoryStore extends SimpleNodeStore {
 				}
 			}
 		})
-	}
+	}// }}}
 }
 
-export function uuidv7() {
+export function uuidv7() {// {{{
 	// random bytes
 	const value = new Uint8Array(16)
 	crypto.getRandomValues(value)
@@ -524,6 +541,6 @@ export function uuidv7() {
 		.map((b) => b.toString(16).padStart(2, "0"))
 		.join("")
 	return `${str.slice(0, 8)}-${str.slice(8, 12)}-${str.slice(12, 16)}-${str.slice(16, 20)}-${str.slice(20)}`
-}
+}// }}}
 
 // vim: foldmethod=marker
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index ee662df..9149a02 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -1,7 +1,8 @@
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
+import { Node } from './page_node.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
-	static PAGESIZE = 25
+	static PAGESIZE = 15
 
 	static {
 		this.tmpl = document.createElement('template')
@@ -9,22 +10,30 @@ export class N2PageHistory extends CustomHTMLElement {
 			<style>
 				n2-pagehistory {
 					margin-top: 32px;
-
-					.layout {
-					}
 				}
 			</style>
 
-			<div class="layout">
+			<div class="back">
 				<img data-el="back-image" src="/images/${_VERSION}/icon_back.svg" class="colorize">
 				<div data-el="back-text">Back to node</div>
+			</div>
 
+			<div class="node-name">
 				<img src="/images/${_VERSION}/icon_history.svg" class="colorize">
 				<h1 data-el="node-name"></h1>
+			</div>
 
+			<div class="group-label">Actions</div>
+			<div class="group">
+				<button data-el="download-history">Fetch all history from server</button>
+			</div>
+
+
+			<div class="group-label">History</div>
+			<div class="group">
 				<div data-el="nodes"></div>
 
-				<div class="pagination">
+				<div data-el="pagination">
 					<div data-el="prev">&lt;</div>
 					<div data-el="page"></div>
 					<div data-el="next">&gt;</div>
@@ -44,6 +53,7 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
 		this.elPrev.addEventListener('click', () => this.prevPage())
 		this.elNext.addEventListener('click', () => this.nextPage())
+		this.elDownloadHistory.addEventListener('click', () => this.downloadHistory())
 
 		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
 			await this.useNode(event.detail.data)
@@ -104,6 +114,11 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.elNodeName.innerText = this.node.get('Name')
 		this.elPage.innerText = `${this.page} / ${this.pages}`
 
+		if (this.nodesTotal <= N2PageHistory.PAGESIZE)
+			this.elPagination.style.display = 'none'
+		else
+			this.elPagination.style.display = ''
+
 		let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
 		let i = 0
 		let divs = nodes.map(n => {
@@ -124,5 +139,50 @@ export class N2PageHistory extends CustomHTMLElement {
 		})
 		this.elNodes.replaceChildren(...divs)
 	}
+
+	async downloadHistory() {
+		try {
+			const nodes = []
+			let offset = 0
+			let hasMore = true
+
+			while (hasMore) {
+				const history = await this.downloadHistoryPage(offset)
+				hasMore = history.HasMore
+				for (const nodeData of history.Nodes) {
+					nodes.push(new Node(nodeData))
+				}
+				offset = nodes.length
+			}
+
+			let num = 0
+			for (const node of nodes) {
+				const ok = await nodeStore.nodesHistory.hasNode(node.UUID, node.get('Updated'))
+				if (ok) num++
+				await nodeStore.nodesHistory.add(node)
+			}
+			console.log(num)
+
+		} catch (e) {
+			console.error(e)
+			alert(e)
+		}
+	}
+
+	async downloadHistoryPage(offset) {
+		const res = await fetch(`/node/history/retrieve/${this.node.UUID}/${offset}`, {
+			headers: {
+				"Authorization": 'Bearer ' + localStorage.getItem('token'),
+			}
+		})
+		const json = await res.json()
+
+		if (!json.OK) {
+			alert(json.Error)
+			return
+		}
+
+		return json
+	}
 }
 customElements.define('n2-pagehistory', N2PageHistory)

From aeca9d855947b9e5d80e7103761c970da68a92ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sat, 6 Jun 2026 20:21:11 +0200
Subject: [PATCH 09/79] History fetching from server

---
 main.go                    |  20 ++++-
 node.go                    |  20 +++++
 static/css/notes2.css      |  16 ++++
 static/js/page_history.mjs | 158 ++++++++++++++++++++++---------------
 4 files changed, 149 insertions(+), 65 deletions(-)

diff --git a/main.go b/main.go
index 22facee..5bfdc84 100644
--- a/main.go
+++ b/main.go
@@ -25,7 +25,7 @@ import (
 
 const VERSION = "v11"
 const CONTEXT_USER = 1
-const SYNC_PAGINATION = 20
+const SYNC_PAGINATION = 200
 
 var (
 	FlagGenerate       bool
@@ -141,6 +141,7 @@ func main() { // {{{
 
 	http.HandleFunc("/node/retrieve/{uuid}", authenticated(actionNodeRetrieve))
 	http.HandleFunc("/node/history/retrieve/{uuid}/{offset}", authenticated(actionNodeHistoryRetrieve))
+	http.HandleFunc("/node/history/count/{uuid}", authenticated(actionNodeHistoryCount))
 
 	http.HandleFunc("/service_worker.js", pageServiceWorker)
 
@@ -352,6 +353,23 @@ func actionNodeHistoryRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
 		"HasMore": hasMore,
 	})
 } // }}}
+func actionNodeHistoryCount(w http.ResponseWriter, r *http.Request) { // {{{
+	user := getUser(r)
+	var err error
+
+	uuid := r.PathValue("uuid")
+
+	count, err := RetrieveNodeHistoryCount(user.UserID, uuid)
+	if err != nil {
+		responseError(w, err)
+		return
+	}
+
+	responseData(w, map[string]any{
+		"OK":      true,
+		"Count":   count,
+	})
+} // }}}
 func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
 	user := getUser(r)
 
diff --git a/node.go b/node.go
index 4d7da95..0beb1b1 100644
--- a/node.go
+++ b/node.go
@@ -293,6 +293,26 @@ func RetrieveNodeHistory(userID int, nodeUUID string, offset int) (nodes []Node,
 	}
 	return
 } // }}}
+func RetrieveNodeHistoryCount(userID int, nodeUUID string) (count int, err error) { // {{{
+	var row *sql.Row
+	row = db.QueryRow(`
+		SELECT
+			COUNT(*)
+		FROM node_history
+		WHERE
+			user_id = $1 AND
+			uuid = $2
+		`,
+		userID,
+		nodeUUID,
+	)
+	if err = row.Scan(&count); err != nil {
+		err = werr.Wrap(err)
+		return
+	}
+
+	return
+} // }}}
 func NodeCrumbs(nodeUUID string) (nodes []Node, err error) { // {{{
 	var rows *sqlx.Rows
 	rows, err = db.Queryx(`
diff --git a/static/css/notes2.css b/static/css/notes2.css
index 11b8164..f7051f3 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -20,6 +20,10 @@ html {
 	filter: var(--colorize);
 }
 
+button {
+	font-size: 1e m;
+}
+
 /* ------------------------------------- *
 * Default application grid in wide mode *
 * ------------------------------------- */
@@ -550,6 +554,18 @@ n2-pagehistory {
 			rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 	}
 
+	.el-stats {
+		margin-bottom: 16px;
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 8px 12px;
+		white-space: nowrap;
+	}
+
+	.el-fetch-history-progress {
+		margin-top: 16px;
+	}
+
 	.el-back-image,
 	.el-back-text {
 		cursor: pointer;
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index 9149a02..f37cfbb 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -3,8 +3,7 @@ import { Node } from './page_node.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
 	static PAGESIZE = 15
-
-	static {
+	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 			<style>
@@ -26,11 +25,20 @@ export class N2PageHistory extends CustomHTMLElement {
 			<div class="group-label">Actions</div>
 			<div class="group">
 				<button data-el="download-history">Fetch all history from server</button>
+				<div data-el="fetch-history-progress"></div>
 			</div>
 
 
 			<div class="group-label">History</div>
 			<div class="group">
+				<div data-el="stats">
+					<div>History on server:</div>
+					<div data-el="stats-on-server"></div>
+
+					<div>History on client:</div>
+					<div data-el="stats-on-client"></div>
+				</div>
+
 				<div data-el="nodes"></div>
 
 				<div data-el="pagination">
@@ -40,9 +48,9 @@ export class N2PageHistory extends CustomHTMLElement {
 				</div>
 			</div>
 		`
-	}
+	}// }}}
 
-	constructor() {
+	constructor() {// {{{
 		super()
 
 		this.setAttribute('tabindex', '-1')
@@ -53,66 +61,23 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
 		this.elPrev.addEventListener('click', () => this.prevPage())
 		this.elNext.addEventListener('click', () => this.nextPage())
-		this.elDownloadHistory.addEventListener('click', () => this.downloadHistory())
+		this.elDownloadHistory.addEventListener('click', async () => {
+			await this.downloadHistory()
+			await this.useNode(this.node)
+			this.render(true)
+
+		})
 
 		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
 			await this.useNode(event.detail.data)
 			this.render()
 		})
-	}
-
-	async useNode(node) {
-		this.node = node
-		this.page = 1
-
-		this.nodesTotal = await nodeStore.nodesHistory.count(this.node.UUID)
-		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
-	}
-
-	keyHandler(event) {
-		switch (event.key) {
-			case 'ArrowLeft':
-				this.prevPage()
-				break
-			case 'ArrowRight':
-				this.nextPage()
-				break
-		}
-	}
-
-	prevPage() {
-		if (this.page == 1)
-			return
-		this.page--
-		this.render()
-	}
-
-	nextPage() {
-		if (this.page >= this.pages)
-			return
-		this.page++
-		this.render()
-	}
-
-	formatSize(s) {
-		let div = 1
-		let unit = 'B'
-		if (s >= 1048576) {
-			div = 1048576
-			unit = 'MB'
-		} else if (s >= 1024) {
-			div = 1024
-			unit = 'kB'
-		}
-
-		return new Intl.NumberFormat(undefined, {
-			maximumFractionDigits: 0
-		}).format(Math.round(s / div)) + ' ' + unit
-	}
-
-	async render() {
+	}// }}}
+	async render(keepFetchHistoryProgress) {// {{{
 		this.elNodeName.innerText = this.node.get('Name')
 		this.elPage.innerText = `${this.page} / ${this.pages}`
+		this.elStatsOnClient.innerText = `${this.nodesTotal}`
+		this.elStatsOnServer.innerText = `${this.historyOnServerTotal}`
 
 		if (this.nodesTotal <= N2PageHistory.PAGESIZE)
 			this.elPagination.style.display = 'none'
@@ -138,9 +103,59 @@ export class N2PageHistory extends CustomHTMLElement {
 			return div
 		})
 		this.elNodes.replaceChildren(...divs)
-	}
 
-	async downloadHistory() {
+		if (!keepFetchHistoryProgress)
+			this.elFetchHistoryProgress.innerText = ''
+	}// }}}
+
+	async useNode(node) {// {{{
+		this.node = node
+		this.page = 1
+
+		this.nodesTotal = await nodeStore.nodesHistory.count(this.node.UUID)
+		this.historyOnServerTotal = await this.getServerTotal()
+		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
+	}// }}}
+	keyHandler(event) {// {{{
+		switch (event.key) {
+			case 'ArrowLeft':
+				this.prevPage()
+				break
+			case 'ArrowRight':
+				this.nextPage()
+				break
+		}
+	}// }}}
+
+	prevPage() {// {{{
+		if (this.page == 1)
+			return
+		this.page--
+		this.render()
+	}// }}}
+	nextPage() {// {{{
+		if (this.page >= this.pages)
+			return
+		this.page++
+		this.render()
+	}// }}}
+
+	async getServerTotal() {// {{{
+		const res = await fetch(`/node/history/count/${this.node.UUID}`, {
+			headers: {
+				"Authorization": 'Bearer ' + localStorage.getItem('token'),
+			}
+		})
+		const json = await res.json()
+
+		if (!json.OK) {
+			alert(json.Error)
+			return
+		}
+
+		return json.Count
+	}// }}}
+	async downloadHistory() {// {{{
 		try {
 			const nodes = []
 			let offset = 0
@@ -153,6 +168,7 @@ export class N2PageHistory extends CustomHTMLElement {
 					nodes.push(new Node(nodeData))
 				}
 				offset = nodes.length
+				this.elFetchHistoryProgress.innerText = `${nodes.length} fetched.`
 			}
 
 			let num = 0
@@ -161,15 +177,14 @@ export class N2PageHistory extends CustomHTMLElement {
 				if (ok) num++
 				await nodeStore.nodesHistory.add(node)
 			}
-			console.log(num)
 
+			this.elFetchHistoryProgress.innerText = `${nodes.length} fetched - all history fetched.`
 		} catch (e) {
 			console.error(e)
 			alert(e)
 		}
-	}
-
-	async downloadHistoryPage(offset) {
+	}// }}}
+	async downloadHistoryPage(offset) {// {{{
 		const res = await fetch(`/node/history/retrieve/${this.node.UUID}/${offset}`, {
 			headers: {
 				"Authorization": 'Bearer ' + localStorage.getItem('token'),
@@ -183,6 +198,21 @@ export class N2PageHistory extends CustomHTMLElement {
 		}
 
 		return json
-	}
+	}// }}}
+	formatSize(s) {// {{{
+		let div = 1
+		let unit = 'B'
+		if (s >= 1048576) {
+			div = 1048576
+			unit = 'MB'
+		} else if (s >= 1024) {
+			div = 1024
+			unit = 'kB'
+		}
+
+		return new Intl.NumberFormat(undefined, {
+			maximumFractionDigits: 0
+		}).format(Math.round(s / div)) + ' ' + unit
+	}// }}}
 }
 customElements.define('n2-pagehistory', N2PageHistory)

From 28111cc8eb93b9ac8b1bbac45ceb8a2dabc87f64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sat, 6 Jun 2026 21:27:42 +0200
Subject: [PATCH 10/79] Selecting history nodes

---
 static/css/notes2.css      |  81 ++++++++++++++++------------
 static/js/page_history.mjs | 107 ++++++++++++++++++++++++++++++++-----
 2 files changed, 140 insertions(+), 48 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index f7051f3..28ee7a2 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -21,7 +21,8 @@ html {
 }
 
 button {
-	font-size: 1e m;
+	font-size: 1em;
+	padding: 4px 8px;
 }
 
 /* ------------------------------------- *
@@ -546,7 +547,7 @@ n2-pagehistory {
 		padding: 32px;
 		margin-bottom: 32px;
 		border-radius: 8px;
-		background-color: #f8f8f8;
+		background-color: #fafafa;
 
 		box-shadow:
 			rgba(0, 0, 0, 0.4) 0px 2px 4px,
@@ -585,62 +586,72 @@ n2-pagehistory {
 		gap: 1px;
 		border: 1px solid var(--line-color);
 
-		&>div>div {
+		n2-pagehistorynode>* {
 			padding: 8px 12px;
 			background-color: #fff;
 			white-space: nowrap;
+		}
 
-			&.index {
+		n2-pagehistorynode {
+
+			&.selected .el-index:after  {
+				position: absolute;
+				left: -20px;
+
+				content: '>';
+				color: var(--color1);
+				font-weight: bold;
+				margin-right: 8px;
+			}
+
+			.el-index {
+				position: relative;
 				text-align: right;
 			}
 
-			&.updated {
+			.el-updated {
 				white-space: initial;
 			}
 
-			.date {
+			.el-date {
 				white-space: nowrap;
 				font-weight: bold;
 			}
 
-			.time {
+			.el-time {
 				white-space: nowrap;
 				color: #555;
 			}
 
-			&.name {
+			.el-name {
 				white-space: initial;
 				/*overflow-wrap: anywhere;*/
 				word-break: break-all;
 				color: var(--color1);
-
 			}
 		}
-
-		.history-node {
-			display: contents;
-		}
-	}
-
-	.el-pagination {
-		grid-column: 1 / -1;
-		margin-top: 16px;
-
-		display: grid;
-		grid-template-columns: repeat(3, min-content);
-		grid-gap: 16px;
-		align-items: center;
-		white-space: nowrap;
-		user-select: none;
-
-		.el-prev,
-		.el-next {
-			font-weight: bold;
-			cursor: pointer;
-			border: 1px solid #aaa;
-			background-color: #eee;
-			padding: 8px 16px;
-			border-radius: 4px;
-		}
 	}
 }
+
+.el-pagination {
+	grid-column: 1 / -1;
+	margin-top: 16px;
+
+	display: grid;
+	grid-template-columns: repeat(3, min-content);
+	grid-gap: 16px;
+	align-items: center;
+	white-space: nowrap;
+	user-select: none;
+
+	.el-prev,
+	.el-next {
+		font-weight: bold;
+		cursor: pointer;
+		border: 1px solid #aaa;
+		background-color: #eee;
+		padding: 8px 16px;
+		border-radius: 4px;
+	}
+}
+}
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index f37cfbb..37404c7 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -1,5 +1,7 @@
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { Node } from './page_node.mjs'
+import { MarkedPosition } from './marked_position.mjs'
+
 
 export class N2PageHistory extends CustomHTMLElement {
 	static PAGESIZE = 15
@@ -47,11 +49,14 @@ export class N2PageHistory extends CustomHTMLElement {
 					<div data-el="next">&gt;</div>
 				</div>
 			</div>
+
+			<div data-el="markdown-content"></div>
 		`
 	}// }}}
 
 	constructor() {// {{{
 		super()
+		this.selectedNode = null
 
 		this.setAttribute('tabindex', '-1')
 		this.addEventListener('keydown', event => this.keyHandler(event))
@@ -72,6 +77,10 @@ export class N2PageHistory extends CustomHTMLElement {
 			await this.useNode(event.detail.data)
 			this.render()
 		})
+
+		_mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
+			this.selectedNode = event.detail.data.historyNode
+		})
 	}// }}}
 	async render(keepFetchHistoryProgress) {// {{{
 		this.elNodeName.innerText = this.node.get('Name')
@@ -88,24 +97,26 @@ export class N2PageHistory extends CustomHTMLElement {
 		let i = 0
 		let divs = nodes.map(n => {
 			i++
-
-			const date = n.get('Updated').slice(0, 10)
-			const time = n.get('Updated').slice(11, 19)
-
-			const div = document.createElement('div')
-			div.innerHTML = `
-				<div class="index">${1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)}</div>
-				<div class="updated"><span class="date">${date}</span> <span class="time">${time}</span></div>
-				<div class="size">${this.formatSize(n.get('Content').length)}</div>
-				<div class="name">${n.get('Name')}</div>
-			`
-			div.classList.add('history-node')
+			const index = 1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)
+			const div = new N2PageHistoryNode(n, index)
+			div.render()
 			return div
 		})
 		this.elNodes.replaceChildren(...divs)
 
 		if (!keepFetchHistoryProgress)
 			this.elFetchHistoryProgress.innerText = ''
+
+		// Select the first node.
+		if (!this.selectedNode) {
+			this.elNodes.firstElementChild?.select()
+		}
+
+		// Any selected history node is rendered with markdown.
+		/*
+		this.marked = new MarkedPosition()
+		this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
+		*/
 	}// }}}
 
 	async useNode(node) {// {{{
@@ -124,18 +135,33 @@ export class N2PageHistory extends CustomHTMLElement {
 			case 'ArrowRight':
 				this.nextPage()
 				break
+			case 'ArrowUp':
+				const prevNode = this.selectedNode?.previousElementSibling
+				if (prevNode)
+					prevNode.select()
+				break
+			case 'ArrowDown':
+				const nextNode = this.selectedNode?.nextElementSibling
+				if (nextNode)
+					nextNode.select()
+				break
 		}
 	}// }}}
 
 	prevPage() {// {{{
 		if (this.page == 1)
 			return
+
+		// Selecting a node on another page is wrong.
+		this.selectedNode = null
 		this.page--
 		this.render()
 	}// }}}
 	nextPage() {// {{{
 		if (this.page >= this.pages)
 			return
+		// Selecting a node on another page is wrong.
+		this.selectedNode = null
 		this.page++
 		this.render()
 	}// }}}
@@ -199,6 +225,61 @@ export class N2PageHistory extends CustomHTMLElement {
 
 		return json
 	}// }}}
+}
+customElements.define('n2-pagehistory', N2PageHistory)
+
+
+class N2PageHistoryNode extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<div data-el="index"></div>
+			<div data-el="updated"><span data-el="date"></span> <span data-el="time"></span></div>
+			<div data-el="size"></div>
+			<div data-el="name"></div>
+		`
+	}// }}}
+	constructor(node, index) {// {{{
+		super()
+
+		this.node = node
+		this.index = index
+
+		this.style.display = 'contents'
+		this.selected = false
+
+		this.addEventListener('click', () => this.select())
+
+		// Another history node has been selected.
+		_mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
+			if (this.node.get('Updated') == event.detail.data.historyNode.node.get('Updated'))
+				return
+			this.selected = false
+			this.render()
+		})
+	}// }}}
+
+	select() {// {{{
+		this.selected = true
+		// Other nodes are told to unselect and rerender.
+		_mbus.dispatch('HISTORY_NODE_SELECTED', { historyNode: this })
+		this.render()
+	}// }}}
+	render() {// {{{
+		const date = this.node.get('Updated').slice(0, 10)
+		const time = this.node.get('Updated').slice(11, 19)
+
+		if (this.selected)
+			this.classList.add('selected')
+		else
+			this.classList.remove('selected')
+
+		this.elIndex.innerText = this.index
+		this.elDate.innerText = date
+		this.elTime.innerText = time
+		this.elSize.innerText = this.node.get('Content').length
+		this.elName.innerText = this.node.get('Name')
+	}// }}}
 	formatSize(s) {// {{{
 		let div = 1
 		let unit = 'B'
@@ -215,4 +296,4 @@ export class N2PageHistory extends CustomHTMLElement {
 		}).format(Math.round(s / div)) + ' ' + unit
 	}// }}}
 }
-customElements.define('n2-pagehistory', N2PageHistory)
+customElements.define('n2-pagehistorynode', N2PageHistoryNode)

From 7002a00972746ff1d4ff00e8c450e9a0bd36bebf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 7 Jun 2026 09:51:25 +0200
Subject: [PATCH 11/79] Show markdown for selected history node

---
 static/js/page_history.mjs | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index 37404c7..074c0bb 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -50,7 +50,10 @@ export class N2PageHistory extends CustomHTMLElement {
 				</div>
 			</div>
 
-			<div data-el="markdown-content"></div>
+			<div class="group-label">Document</div>
+			<div class="group">
+				<div data-el="node-markdown"></div>
+			</div>
 		`
 	}// }}}
 
@@ -80,6 +83,10 @@ export class N2PageHistory extends CustomHTMLElement {
 
 		_mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
 			this.selectedNode = event.detail.data.historyNode
+
+			// Any selected history node is rendered with markdown.
+			const marked = new MarkedPosition()
+			this.elNodeMarkdown.innerHTML = marked.parse(this.selectedNode?.node.content())
 		})
 	}// }}}
 	async render(keepFetchHistoryProgress) {// {{{
@@ -111,12 +118,6 @@ export class N2PageHistory extends CustomHTMLElement {
 		if (!this.selectedNode) {
 			this.elNodes.firstElementChild?.select()
 		}
-
-		// Any selected history node is rendered with markdown.
-		/*
-		this.marked = new MarkedPosition()
-		this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
-		*/
 	}// }}}
 
 	async useNode(node) {// {{{

From 9c07611f95b581b0d24154771260c3aae1db03cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 7 Jun 2026 11:48:10 +0200
Subject: [PATCH 12/79] Handle page resizes on history, bumped to v12

---
 main.go                    |   2 +-
 static/css/notes2.css      | 217 +++++++++----------------------------
 static/js/app.mjs          |   9 +-
 static/js/page_history.mjs |  62 +++++++----
 static/service_worker.js   |   9 +-
 views/pages/notes2.gotmpl  |   4 +-
 6 files changed, 108 insertions(+), 195 deletions(-)

diff --git a/main.go b/main.go
index 5bfdc84..548585b 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v11"
+const VERSION = "v12"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 
diff --git a/static/css/notes2.css b/static/css/notes2.css
index 28ee7a2..743b4b3 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -32,31 +32,55 @@ button {
 	min-height: 100vh;
 
 	display: grid;
-	grid-template-areas:
-		"tree-expander tree pad1 crumbs  crumbs    pad2"
-		"tree-expander tree pad1 name    functions pad2"
-		"tree-expander tree pad1 content content   pad2"
-	;
 
-	grid-template-columns:
-		/* Tree-expander */
-		var(--tree-expander)
-		/* Tree */
-		min-content minmax(32px, 1fr)
-		/* Sync */
-		minmax(min-content, calc(var(--content-width) - var(--functions-width)))
-		/* Functions */
-		var(--functions-width)
-		/* Content */
-		minmax(32px, 1fr);
+	&.page-node {
+		grid-template-areas:
+			"tree-expander tree pad1 crumbs  crumbs    pad2"
+			"tree-expander tree pad1 name    functions pad2"
+			"tree-expander tree pad1 content content   pad2"
+		;
+
+		grid-template-columns:
+			/* Tree-expander */
+			var(--tree-expander)
+			/* Tree */
+			min-content minmax(32px, 1fr)
+			/* Sync */
+			minmax(min-content, calc(var(--content-width) - var(--functions-width)))
+			/* Functions */
+			var(--functions-width)
+			/* Content */
+			minmax(32px, 1fr);
+
+		grid-template-rows:
+			/* Crumbs */
+			min-content
+			/* Name */
+			min-content
+			/* Content */
+			1fr;
+	}
+
+	&.page-history {
+		grid-template-areas:
+			"tree-expander tree pad1 n2-pagehistory pad2"
+		;
+
+		grid-template-columns:
+			/* Tree-expander */
+			var(--tree-expander)
+			/* Tree */
+			min-content
+			/* pad1 */
+			32px
+			/* Content */
+			1fr
+			/* pad2 */
+			32px;
+
+		grid-template-rows: 1fr;
+	}
 
-	grid-template-rows:
-		/* Crumbs */
-		min-content
-		/* Name */
-		min-content
-		/* Content */
-		1fr;
 
 	/* Tree expander is collapsed as default */
 	--tree-expander: 0px;
@@ -223,11 +247,10 @@ button {
 
 	&.history {
 		#page-history {
-			display: contents;
+			display: grid;
+			grid-area: n2-pagehistory;
 
-			n2-pagehistory {
-				grid-area: content;
-			}
+			n2-pagehistory {}
 		}
 	}
 }
@@ -515,143 +538,3 @@ dialog.op {
 		}
 	}
 }
-
-
-
-
-
-n2-pagehistory {
-
-	.back,
-	.node-name {
-		display: grid;
-		grid-template-columns: min-content 1fr;
-		grid-gap: 8px;
-		align-items: center;
-		margin-bottom: 16px;
-	}
-
-	.group-label {
-		font-weight: bold;
-		background-color: #444;
-		color: #fff;
-		padding: 8px 32px;
-		display: inline-block;
-		margin-left: 32px;
-		transform: translateY(14px);
-		border-radius: 6px;
-	}
-
-	.group {
-		border: 1px solid #ccc;
-		padding: 32px;
-		margin-bottom: 32px;
-		border-radius: 8px;
-		background-color: #fafafa;
-
-		box-shadow:
-			rgba(0, 0, 0, 0.4) 0px 2px 4px,
-			rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
-			rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-	}
-
-	.el-stats {
-		margin-bottom: 16px;
-		display: grid;
-		grid-template-columns: min-content 1fr;
-		grid-gap: 8px 12px;
-		white-space: nowrap;
-	}
-
-	.el-fetch-history-progress {
-		margin-top: 16px;
-	}
-
-	.el-back-image,
-	.el-back-text {
-		cursor: pointer;
-	}
-
-	.el-node-name {
-		margin-left: 8px;
-	}
-
-	.el-nodes {
-		grid-column: 1 / -1;
-
-		display: grid;
-		grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
-
-		background-color: var(--line-color);
-		gap: 1px;
-		border: 1px solid var(--line-color);
-
-		n2-pagehistorynode>* {
-			padding: 8px 12px;
-			background-color: #fff;
-			white-space: nowrap;
-		}
-
-		n2-pagehistorynode {
-
-			&.selected .el-index:after  {
-				position: absolute;
-				left: -20px;
-
-				content: '>';
-				color: var(--color1);
-				font-weight: bold;
-				margin-right: 8px;
-			}
-
-			.el-index {
-				position: relative;
-				text-align: right;
-			}
-
-			.el-updated {
-				white-space: initial;
-			}
-
-			.el-date {
-				white-space: nowrap;
-				font-weight: bold;
-			}
-
-			.el-time {
-				white-space: nowrap;
-				color: #555;
-			}
-
-			.el-name {
-				white-space: initial;
-				/*overflow-wrap: anywhere;*/
-				word-break: break-all;
-				color: var(--color1);
-			}
-		}
-	}
-}
-
-.el-pagination {
-	grid-column: 1 / -1;
-	margin-top: 16px;
-
-	display: grid;
-	grid-template-columns: repeat(3, min-content);
-	grid-gap: 16px;
-	align-items: center;
-	white-space: nowrap;
-	user-select: none;
-
-	.el-prev,
-	.el-next {
-		font-weight: bold;
-		cursor: pointer;
-		border: 1px solid #aaa;
-		background-color: #eee;
-		padding: 8px 16px;
-		border-radius: 4px;
-	}
-}
-}
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 11c3007..0b66c69 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -30,11 +30,18 @@ export class App {
 		})
 
 		_mbus.subscribe('SHOW_PAGE', ({ detail: { data: { page } } }) => {
-			const classList = document.querySelector('#main-page').classList
+			let classList = document.querySelector('#main-page').classList
 			classList.forEach(e =>
 				classList.remove(e)
 			)
 			classList.add(page)
+
+			classList = document.querySelector('#notes2').classList
+			classList.forEach(e => {
+				if (e.startsWith('page-'))
+					classList.remove(e)
+			})
+			classList.add('page-'+page)
 		})
 
 		window.addEventListener('keydown', event => this.keyHandler(event))
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index 074c0bb..acea847 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -24,35 +24,39 @@ export class N2PageHistory extends CustomHTMLElement {
 				<h1 data-el="node-name"></h1>
 			</div>
 
-			<div class="group-label">Actions</div>
-			<div class="group">
-				<button data-el="download-history">Fetch all history from server</button>
-				<div data-el="fetch-history-progress"></div>
-			</div>
-
-
-			<div class="group-label">History</div>
-			<div class="group">
-				<div data-el="stats">
-					<div>History on server:</div>
-					<div data-el="stats-on-server"></div>
-
-					<div>History on client:</div>
-					<div data-el="stats-on-client"></div>
+			<div class="column-1">
+				<div class="group-label">Actions</div>
+				<div class="group">
+					<button data-el="download-history">Fetch all history from server</button>
+					<div data-el="fetch-history-progress"></div>
 				</div>
 
-				<div data-el="nodes"></div>
 
-				<div data-el="pagination">
-					<div data-el="prev">&lt;</div>
-					<div data-el="page"></div>
-					<div data-el="next">&gt;</div>
+				<div class="group-label">History</div>
+				<div class="group">
+					<div data-el="stats">
+						<div>History on server:</div>
+						<div data-el="stats-on-server"></div>
+
+						<div>History on client:</div>
+						<div data-el="stats-on-client"></div>
+					</div>
+
+					<div data-el="nodes"></div>
+
+					<div data-el="pagination">
+						<div data-el="prev">&lt;</div>
+						<div data-el="page"></div>
+						<div data-el="next">&gt;</div>
+					</div>
 				</div>
 			</div>
 
-			<div class="group-label">Document</div>
-			<div class="group">
-				<div data-el="node-markdown"></div>
+			<div class="column-2">
+				<div class="group-label">Document</div>
+				<div class="group">
+					<div data-el="node-markdown"></div>
+				</div>
 			</div>
 		`
 	}// }}}
@@ -129,23 +133,35 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
 	}// }}}
 	keyHandler(event) {// {{{
+		let handled = true
 		switch (event.key) {
 			case 'ArrowLeft':
 				this.prevPage()
 				break
+
 			case 'ArrowRight':
 				this.nextPage()
 				break
+
 			case 'ArrowUp':
 				const prevNode = this.selectedNode?.previousElementSibling
 				if (prevNode)
 					prevNode.select()
 				break
+
 			case 'ArrowDown':
 				const nextNode = this.selectedNode?.nextElementSibling
 				if (nextNode)
 					nextNode.select()
 				break
+
+			default:
+				handled = false
+		}
+
+		if (handled) {
+			event.stopPropagation()
+			event.preventDefault()
 		}
 	}// }}}
 
diff --git a/static/service_worker.js b/static/service_worker.js
index b6a1a13..0689818 100644
--- a/static/service_worker.js
+++ b/static/service_worker.js
@@ -6,6 +6,7 @@ const CACHED_ASSETS = [
 	'/css/{{ .VERSION }}/main.css',
 	'/css/{{ .VERSION }}/markdown.css',
 	'/css/{{ .VERSION }}/notes2.css',
+	'/css/{{ .VERSION }}/page_history.css',
 	'/css/{{ .VERSION }}/theme.css',
 
 	'/images/{{ .VERSION }}/collapsed.svg',
@@ -119,9 +120,13 @@ self.addEventListener('activate', event => {
 })
 
 self.addEventListener('fetch', event => {
-	// console.debug('SERVICE WORKER: fetch', event.request.url)
+	// The fetch event is also seeing requests to other domains.
+	// Just let the browser handle those for itself.
+	const ourDomain = event.request.url.startsWith(self.location.origin)
+	if (!ourDomain)
+		return event
 
-	if ({{ .DevMode }})
+	if (`{{ .DevMode }}` == 'true')
 		return event
 
 	event.respondWith(fetchAsset(event))
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index f15bbb5..1142eda 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -1,5 +1,6 @@
 {{ define "page" }}
-<div id="notes2">
+<!-- page-node -->
+<div id="notes2" class="page-history">
 	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
 	<div id="tree" tabindex=0></div>
 
@@ -24,6 +25,7 @@
 </div>
 
 <link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
+<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/page_history.css">
 
 <script type="module">
 	import {NodeStore} from '/js/{{ .VERSION }}/node_store.mjs'

From b100dc868c2c87d9c12219f315504bac1c2a8be7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 7 Jun 2026 12:15:00 +0200
Subject: [PATCH 13/79] Format size with bytes

---
 static/css/page_history.css | 210 ++++++++++++++++++++++++++++++++++++
 static/js/app.mjs           |   3 +-
 static/js/page_history.mjs  |   2 +-
 3 files changed, 212 insertions(+), 3 deletions(-)
 create mode 100644 static/css/page_history.css

diff --git a/static/css/page_history.css b/static/css/page_history.css
new file mode 100644
index 0000000..bc807df
--- /dev/null
+++ b/static/css/page_history.css
@@ -0,0 +1,210 @@
+#page-history {
+	container-type: inline-size;
+}
+
+/* View when two columns doesn't fit on screen. */
+@container (width < 1100px) {
+	n2-pagehistory {
+		grid-template-columns: 1fr minmax(300px, 900px) 1fr !important;
+
+		.column-2 {
+			grid-column: 2 / 3 !important;
+		}
+	}
+}
+
+/* View when not even one column with well on screen */
+/* Node name is placed on a separate row. */
+@container (width < 500px) {
+	.el-nodes {
+		grid-template-columns: min-content minmax(min-content, max-content) 1fr !important;
+		background-color: unset !important;
+		border: unset !important;
+		gap: unset !important;
+
+		.el-index {
+			border-top-left-radius: 6px;
+			border-left: 1px solid var(--line-color);
+		}
+
+		.el-index, .el-updated, .el-size {
+			border-top: 1px solid var(--line-color);
+		}
+
+		.el-size {
+			text-align: right;
+			border-right: 1px solid var(--line-color);
+			border-top-right-radius: 6px;
+			padding-right: 8px !important;
+		}
+
+		.el-name {
+			grid-column: 1 / -1;
+			padding-bottom: 8px;
+			padding-top: 0px;
+			border-bottom: 1px solid var(--line-color);
+			border-left: 1px solid var(--line-color);
+			border-right: 1px solid var(--line-color);
+			border-bottom-left-radius: 6px;
+			border-bottom-right-radius: 6px;
+			margin-bottom: 16px;
+		}
+
+		n2-pagehistorynode > * {
+			padding-left: 8px !important;
+			padding-right: 0px !important;
+		}
+	}
+}
+
+n2-pagehistory {
+	display: grid;
+	grid-template-rows: min-content min-content min-content;
+	grid-template-columns: 1fr minmax(600px, 800px) minmax(400px, 900px) 1fr;
+	grid-gap: 0px 32px;
+
+	.column-1 {
+		grid-column: 2 / 3;
+	}
+
+	.column-2 {
+		grid-column: 3 / 4;
+		max-width: 900px;
+
+		.group {
+			background-color: #fff;
+		}
+	}
+
+	.back,
+	.node-name {
+		grid-column: 2 / 4;
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 8px;
+		align-items: center;
+	}
+
+	.group-label {
+		font-weight: bold;
+		background-color: #444;
+		color: #fff;
+		padding: 8px 32px;
+		display: inline-block;
+		margin-left: 32px;
+		transform: translateY(14px);
+		border-radius: 6px;
+	}
+
+	.group {
+		border: 1px solid #ccc;
+		padding: 32px;
+		margin-bottom: 32px;
+		border-radius: 8px;
+		background-color: #fafafa;
+
+		box-shadow:
+			rgba(0, 0, 0, 0.4) 0px 2px 4px,
+			rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+			rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+	}
+
+	.el-stats {
+		margin-bottom: 16px;
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 8px 12px;
+		white-space: nowrap;
+	}
+
+	.el-fetch-history-progress {
+		margin-top: 16px;
+	}
+
+	.el-back-image,
+	.el-back-text {
+		cursor: pointer;
+	}
+
+	.el-node-name {
+		margin-left: 8px;
+	}
+
+	.el-nodes {
+		grid-column: 1 / -1;
+
+		display: grid;
+		grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
+
+		background-color: var(--line-color);
+		gap: 1px;
+		border: 1px solid var(--line-color);
+
+		n2-pagehistorynode>* {
+			padding: 8px 12px;
+			background-color: #fff;
+			white-space: nowrap;
+		}
+
+		n2-pagehistorynode {
+
+			&.selected .el-index:after {
+				position: absolute;
+				left: -20px;
+
+				content: '>';
+				color: var(--color1);
+				font-weight: bold;
+				margin-right: 8px;
+			}
+
+			.el-index {
+				position: relative;
+				text-align: right;
+			}
+
+			.el-updated {
+				white-space: initial;
+			}
+
+			.el-date {
+				white-space: nowrap;
+				font-weight: bold;
+			}
+
+			.el-time {
+				white-space: nowrap;
+				color: #555;
+			}
+
+			.el-name {
+				white-space: initial;
+				/*overflow-wrap: anywhere;*/
+				word-break: break-all;
+				color: var(--color1);
+			}
+		}
+	}
+
+	.el-pagination {
+		grid-column: 1 / -1;
+		margin-top: 16px;
+
+		display: grid;
+		grid-template-columns: repeat(3, min-content);
+		grid-gap: 16px;
+		align-items: center;
+		white-space: nowrap;
+		user-select: none;
+
+		.el-prev,
+		.el-next {
+			font-weight: bold;
+			cursor: pointer;
+			border: 1px solid #aaa;
+			background-color: #eee;
+			padding: 8px 16px;
+			border-radius: 4px;
+		}
+	}
+}
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 0b66c69..be3ddeb 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -51,8 +51,7 @@ export class App {
 				document.getElementById('node-content')?.focus()
 		})
 
-		// XXX - _mbus.dispatch('SHOW_PAGE', { page: 'node' })
-		_mbus.dispatch('SHOW_PAGE', { page: 'history' })
+		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
 
 		window._sync = new Sync()
 
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index acea847..b03c810 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -294,7 +294,7 @@ class N2PageHistoryNode extends CustomHTMLElement {
 		this.elIndex.innerText = this.index
 		this.elDate.innerText = date
 		this.elTime.innerText = time
-		this.elSize.innerText = this.node.get('Content').length
+		this.elSize.innerText = this.formatSize(this.node.get('Content').length)
 		this.elName.innerText = this.node.get('Name')
 	}// }}}
 	formatSize(s) {// {{{

From 541b0b1f17b532ef252b26fae9764697c70789c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 7 Jun 2026 12:15:13 +0200
Subject: [PATCH 14/79] Bumped to v13

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 548585b..66a8472 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v12"
+const VERSION = "v13"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From 98270b677b9e304c08d5bd5771c09e68309fd211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 7 Jun 2026 12:25:27 +0200
Subject: [PATCH 15/79] Fixed code wrapping, bumped to v14

---
 main.go                 | 2 +-
 static/css/markdown.css | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 66a8472..e852dd4 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v13"
+const VERSION = "v14"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 
diff --git a/static/css/markdown.css b/static/css/markdown.css
index 631f578..e29ec9e 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -70,6 +70,7 @@
 		border: 1px solid #ccc;
 		padding: 8px;
 		border-radius: 4px;
+		white-space: pre-wrap;
 
 		code {
 			border: unset;

From f647d87e636f175844fabc0ec5a2e8f975017347 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 7 Jun 2026 12:33:08 +0200
Subject: [PATCH 16/79] Refactored node saving and fixed click on save icon

---
 static/js/app.mjs       | 34 +---------------------------------
 static/js/page_node.mjs | 31 +++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index be3ddeb..fdb3db4 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -107,11 +107,7 @@ export class App {
 
 			*/
 			case 'S':
-				this.saveNode()
-				/*
-				else if (this.page.value === 'node-properties')
-					this.nodeProperties.current.save()
-					*/
+				this.nodeUI.saveNode()
 				break
 			/*
 
@@ -147,35 +143,7 @@ export class App {
 		return await nodeStore.get(nodeUUID)
 	}//}}}
 	async saveNode() {//{{{
-		if (!this.currentNode.isModified())
-			return
 
-		/* The node history is a local store for node history.
-		 * This could be provisioned from the server or cleared if
-		 * deemed unnecessary.
-		 *
-		 * The send queue is what will be sent back to the server
-		 * to have a recorded history of the notes.
-		   *
-		 * A setting to be implemented in the future could be to
-		 * not save the history locally at all. */
-		const node = this.currentNode
-
-		// The node is still in its old state and will present
-		// the unmodified content to the node store.
-		const history = nodeStore.nodesHistory.add(node)
-
-		// Prepares the node object for saving.
-		// Sets Updated value to current date and time.
-		await node.save()
-
-		// Updated node is added to the send queue to be stored on server.
-		const sendQueue = nodeStore.sendQueue.add(node)
-
-		// Updated node is saved to the primary node store.
-		const nodeStoreAdding = nodeStore.add([node])
-
-		await Promise.all([history, sendQueue, nodeStoreAdding])
 	}//}}}
 	async createNode() {//{{{
 		let name = prompt("Name")
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index e26cb86..9a82b90 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -93,6 +93,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			this.node.setContent(this.elNodeContent.value)
 		})
 		this.elIconHistory.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'history' }))
+		this.elIconSave.addEventListener('click', ()=>this.saveNode())
 
 		this.showMarkdown(true)
 	}// }}}
@@ -110,6 +111,36 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		} else
 			this.elNodeContent.focus({ preventScroll: true })
 	}// }}}
+	async saveNode() {// {{{
+		if (!this.node.isModified())
+			return
+
+		/* The node history is a local store for node history.
+		 * This could be provisioned from the server or cleared if
+		 * deemed unnecessary.
+		 *
+		 * The send queue is what will be sent back to the server
+		 * to have a recorded history of the notes.
+		   *
+		 * A setting to be implemented in the future could be to
+		 * not save the history locally at all. */
+
+		// The node is still in its old state and will present
+		// the unmodified content to the node store.
+		const history = nodeStore.nodesHistory.add(this.node)
+
+		// Prepares the node object for saving.
+		// Sets Updated value to current date and time.
+		await this.node.save()
+
+		// Updated node is added to the send queue to be stored on server.
+		const sendQueue = nodeStore.sendQueue.add(this.node)
+
+		// Updated node is saved to the primary node store.
+		const nodeStoreAdding = nodeStore.add([this.node])
+
+		await Promise.all([history, sendQueue, nodeStoreAdding])
+	}// }}}
 
 	contentChanged(event) {//{{{
 		this.node.setContent(event.target.value)

From 303c7d9b2d673fed685de2e6801406660948bfad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 7 Jun 2026 12:33:55 +0200
Subject: [PATCH 17/79] Bumped to v15

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index e852dd4..1ba667c 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v14"
+const VERSION = "v15"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From b1c85d96e9cd7809f699bd5544f39f7a9c434486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 10:34:55 +0200
Subject: [PATCH 18/79] Fixed initial node when visiting page

---
 static/js/app.mjs        | 18 ++++++++++++++----
 static/js/node_store.mjs |  4 ++--
 static/js/tree.mjs       | 24 +++++++++++++-----------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index fdb3db4..b444140 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -11,12 +11,22 @@ export class App {
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = document.getElementById('note')
 
+
 		_mbus.subscribe('TREE_TRUNK_FETCHED', async () => {
-			document.getElementById('tree').append(this.tree.render())
+			// Subscribing to the start node existing after the tree trunk is
+			// fetched since the NODE_COMPONENT_EXIST message isn't sent for the
+			// root node itself, and the root node should be selected in the tree
+			// after it is rendered when the site is shown without UUID in the URL.
+			const startNode = await this.getStartNode()
+			_mbus.subscribe(`NODE_COMPONENT_EXIST_${startNode.UUID}`, () => {
+				this.goToNode(startNode.UUID, false, false)
+			})
+
+			document.getElementById('tree').append(await this.tree.render())
 			document.getElementById('tree-nodes')?.focus()
 
-			const startNode = await this.getStartNode()
-			this.goToNode(startNode.UUID, false, false)
+			if (startNode.UUID == ROOT_NODE)
+				this.goToNode(startNode.UUID, false, false)
 		})
 
 		_mbus.subscribe('TREE_NODE_SELECTED', event => {
@@ -41,7 +51,7 @@ export class App {
 				if (e.startsWith('page-'))
 					classList.remove(e)
 			})
-			classList.add('page-'+page)
+			classList.add('page-' + page)
 		})
 
 		window.addEventListener('keydown', event => this.keyHandler(event))
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 9e8a672..bd2a331 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -456,7 +456,7 @@ class NodeHistoryStore extends SimpleNodeStore {
 			request.onerror = (event) => reject(event.target.error)
 		})
 	}//}}}
-	hasNode(uuid, updated) {
+	hasNode(uuid, updated) {// {{{
 		return new Promise((resolve, reject) => {
 			const req = this.db
 				.transaction(['nodes', this.storeName], 'readonly')
@@ -472,7 +472,7 @@ class NodeHistoryStore extends SimpleNodeStore {
 				reject(event.target.error)
 			}
 		})
-	}
+	}// }}}
 	retrievePage(uuid, perPage, page) {// {{{
 		return new Promise((resolve, _reject) => {
 			const cursor = this.db
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index 928d60d..6443455 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -1,6 +1,7 @@
 import { ROOT_NODE } from 'node_store'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { Color, Solver } from './lib/css_colorize.mjs'
+import { Node } from './page_node.mjs'
 
 // TreeExpandedHandler is responsible for collapsing or expanding
 // the node tree, wide view or narrow "mobile" view.
@@ -152,21 +153,21 @@ export class N2Tree extends CustomHTMLElement {
 		let result = solver.solve()
 		// console.log(result.filter)
 	}// }}}
-	render() {// {{{
+	async render() {// {{{
 		if (this.rendered)
 			alert('Tree should only be rendered once.')
 
-		for (const node of this.treeTrunk) {
-			const treenode = new N2TreeNode(this, node)
-			this.treeNodeComponents[node.UUID] = treenode
-			this.elTreenodes.appendChild(treenode.render())
-		}
+
+		this.expandedNodes[ROOT_NODE] = true
+		const startnode = await nodeStore.get(ROOT_NODE)
+		const starttreenode = new N2TreeNode(this, startnode, null)
+		this.treeNodeComponents[startnode.UUID] = starttreenode
+		this.elTreenodes.appendChild(starttreenode.render())
 
 		this.rendered = true
 		return this
 	}// }}}
 	reset() {// {{{
-		console.log('tree reset')
 		this.treeNodeComponents = {}
 		this.treeTrunk = []
 		this.rendered = false
@@ -306,7 +307,7 @@ export class N2Tree extends CustomHTMLElement {
 			return
 		}
 
-		if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) {
+		if (n.isFirstSibling()) {
 			_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: false, dontExpand: true })
 			return
 		}
@@ -358,8 +359,6 @@ export class N2Tree extends CustomHTMLElement {
 
 		if (n.isFirstSibling()) {
 			parent = n.getParent()
-			if (parent?.UUID === ROOT_NODE)
-				return
 			_mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: false, dontExpand: true })
 			return
 		}
@@ -562,7 +561,9 @@ export class N2TreeNode extends CustomHTMLElement {
 		}
 
 		// The expand icon <img> is only changed to not get a flickering when re-rendering.
-		if (!this.node.hasChildren())
+		if (this.node.UUID === ROOT_NODE)
+			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`)
+		else if (!this.node.hasChildren())
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
 		else if (this.tree.getNodeExpanded(this.node.UUID))
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`)
@@ -578,6 +579,7 @@ export class N2TreeNode extends CustomHTMLElement {
 				if (treenode === undefined) {
 					treenode = new N2TreeNode(this.tree, node, this)
 					this.tree.treeNodeComponents[node.UUID] = treenode
+					_mbus.dispatch(`NODE_COMPONENT_EXIST_${node.UUID}`)
 				}
 				return treenode
 			})

From 83abc3f456e6b540a84856d8cd9e610fb7a825f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 10:35:06 +0200
Subject: [PATCH 19/79] Bumped to v16

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 1ba667c..7bd5abd 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v15"
+const VERSION = "v16"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From b3e5d7940338d08bfe43deba30a2ba490ce485fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 16:48:25 +0200
Subject: [PATCH 20/79] Refactored tree to sidebar

---
 static/css/notes2.css               |  6 +++---
 static/js/app.mjs                   | 12 ++++++------
 static/js/{tree.mjs => sidebar.mjs} | 30 ++++++++++++++---------------
 views/layouts/main.gotmpl           |  2 +-
 4 files changed, 25 insertions(+), 25 deletions(-)
 rename static/js/{tree.mjs => sidebar.mjs} (94%)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index 743b4b3..b4d7e02 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -92,7 +92,7 @@ button {
 			border-right: none;
 		}
 
-		n2-tree {
+		n2-sidebar {
 			display: none;
 
 		}
@@ -164,7 +164,7 @@ button {
 
 	border-right: 1px solid var(--line-color);
 
-	n2-tree {
+	n2-sidebar {
 		.el-treenodes {
 			margin: 24px 32px 32px 32px;
 		}
@@ -508,7 +508,7 @@ dialog.op {
 	}
 
 	#tree {
-		n2-tree {
+		n2-sidebar {
 			.el-treenodes {
 				height: calc(100vh - 64px - 64px);
 				margin: 0px;
diff --git a/static/js/app.mjs b/static/js/app.mjs
index b444140..2b5cbe1 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -1,12 +1,12 @@
 import { ROOT_NODE } from 'node_store'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
-import { N2Tree } from 'tree'
+import { N2Sidebar } from 'sidebar'
 import { Node } from 'node'
 
 export class App {
 	constructor() {// {{{
 		this.currentNode = null
-		this.tree = new N2Tree()
+		this.sidebar = new N2Sidebar() // XXX - rename this.tree
 		this.crumbs = new N2Crumbs()
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = document.getElementById('note')
@@ -22,7 +22,7 @@ export class App {
 				this.goToNode(startNode.UUID, false, false)
 			})
 
-			document.getElementById('tree').append(await this.tree.render())
+			document.getElementById('tree').append(await this.sidebar.render())
 			document.getElementById('tree-nodes')?.focus()
 
 			if (startNode.UUID == ROOT_NODE)
@@ -85,7 +85,7 @@ export class App {
 				if (document.activeElement.id === 'tree-nodes') {
 					this.nodeUI.takeFocus()
 				} else {
-					this.tree.focus()
+					this.sidebar.focus()
 				}
 				break
 
@@ -184,7 +184,7 @@ export class App {
 		node.reset() // any modifications are discarded.
 
 		this.currentNode = node
-		this.tree.setSelected(node, dontExpand)
+		this.sidebar.setSelected(node, dontExpand)
 
 		const ancestors = await nodeStore.getNodeAncestry(node)
 		_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
@@ -193,7 +193,7 @@ export class App {
 		_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
 
 		// Scrolls node into view.
-		this.tree.makeVisible(node)
+		this.sidebar.makeVisible(node)
 	}//}}}
 }
 
diff --git a/static/js/tree.mjs b/static/js/sidebar.mjs
similarity index 94%
rename from static/js/tree.mjs
rename to static/js/sidebar.mjs
index 6443455..c0ef99e 100644
--- a/static/js/tree.mjs
+++ b/static/js/sidebar.mjs
@@ -59,12 +59,12 @@ class TreeExpansionHandler {// {{{
 	}
 }// }}}
 
-export class N2Tree extends CustomHTMLElement {
+export class N2Sidebar extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 			<style>
-				n2-tree {
+				n2-sidebar {
 					#logo {
 						display: grid;
 						grid-template-columns: 1fr min-content;
@@ -464,14 +464,14 @@ export class N2Tree extends CustomHTMLElement {
 		treenode?.scrollIntoView({ block: 'nearest' })
 	}// }}}
 }
-customElements.define('n2-tree', N2Tree)
+customElements.define('n2-sidebar', N2Sidebar)
 
 export class N2TreeNode extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 			<style>
-				n2-tree:focus-within {
+				n2-sidebar:focus-within {
 					.el-name {
 						&.selected {
 							span {
@@ -503,18 +503,18 @@ export class N2TreeNode extends CustomHTMLElement {
 		`
 	}// }}}
 
-	constructor(tree, node, parent) {//{{{
+	constructor(sidebar, node, parent) {//{{{
 		super()
 		this.classList.add('node')
 
-		this.tree = tree
+		this.sidebar = sidebar
 		this.node = node
 		this.parent = parent
 
 		this.children_populated = false
 		this.rendered = false
 
-		this.elExpandToggle.addEventListener('click', () => this.tree.setNodeExpanded(this.node, !this.tree.getNodeExpanded(this.node.UUID)))
+		this.elExpandToggle.addEventListener('click', () => this.sidebar.setNodeExpanded(this.node, !this.sidebar.getNodeExpanded(this.node.UUID)))
 		this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
 
 		_mbus.subscribe(`NODE_CHILDREN_FETCHED_${node.UUID}`, () => {
@@ -525,7 +525,7 @@ export class N2TreeNode extends CustomHTMLElement {
 			this.render(true)
 		})
 
-		if (this.node.Level === 0 || this.tree.getNodeExpanded(this.node.UUID))
+		if (this.node.Level === 0 || this.sidebar.getNodeExpanded(this.node.UUID))
 			this.fetchChildren()
 	}// }}}
 	async fetchChildren() {//{{{
@@ -537,16 +537,16 @@ export class N2TreeNode extends CustomHTMLElement {
 			return this
 
 		// Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
-		const expanded = this.node.hasChildren() && this.tree.getNodeExpanded(this.node.UUID)
+		const expanded = this.node.hasChildren() && this.sidebar.getNodeExpanded(this.node.UUID)
 
-		if (!this.children_populated && this.tree.getNodeExpanded(this.parent?.node.UUID)) {
+		if (!this.children_populated && this.sidebar.getNodeExpanded(this.parent?.node.UUID)) {
 			this.node.fetchChildren().then(() => this.children_populated = true)
 		}
 
 		// Update the name and selected status
 		this.elName.querySelector('span').innerText = this.node.get('Name')
 
-		if (this.tree.isSelected(this.node))
+		if (this.sidebar.isSelected(this.node))
 			this.elName.classList.add('selected')
 		else
 			this.elName.classList.remove('selected')
@@ -565,7 +565,7 @@ export class N2TreeNode extends CustomHTMLElement {
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`)
 		else if (!this.node.hasChildren())
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
-		else if (this.tree.getNodeExpanded(this.node.UUID))
+		else if (this.sidebar.getNodeExpanded(this.node.UUID))
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`)
 		else
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/collapsed.svg`)
@@ -575,10 +575,10 @@ export class N2TreeNode extends CustomHTMLElement {
 		let children = []
 		if (expanded)
 			children = this.node.Children.map(node => {
-				let treenode = this.tree.treeNodeComponents[node.UUID]
+				let treenode = this.sidebar.treeNodeComponents[node.UUID]
 				if (treenode === undefined) {
-					treenode = new N2TreeNode(this.tree, node, this)
-					this.tree.treeNodeComponents[node.UUID] = treenode
+					treenode = new N2TreeNode(this.sidebar, node, this)
+					this.sidebar.treeNodeComponents[node.UUID] = treenode
 					_mbus.dispatch(`NODE_COMPONENT_EXIST_${node.UUID}`)
 				}
 				return treenode
diff --git a/views/layouts/main.gotmpl b/views/layouts/main.gotmpl
index ead95a9..c5fbead 100644
--- a/views/layouts/main.gotmpl
+++ b/views/layouts/main.gotmpl
@@ -15,7 +15,7 @@
 				"crypto":     "/js/{{ .VERSION }}/crypto.mjs",
 				"node_store": "/js/{{ .VERSION }}/node_store.mjs",
 				"node":       "/js/{{ .VERSION }}/page_node.mjs",
-				"tree":       "/js/{{ .VERSION }}/tree.mjs"
+				"sidebar":    "/js/{{ .VERSION }}/sidebar.mjs"
 			}
 		}
 		</script>

From 4976a6ebe0e19b731247b4f88cf7e41087d8b627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 20:27:43 +0200
Subject: [PATCH 21/79] Fix quick arrow navigation not collapsing nodes
 correctly

---
 static/js/app.mjs          | 42 ++++++++++++++++++-----
 static/js/node_store.mjs   |  4 +--
 static/js/page_history.mjs |  7 ++--
 static/js/page_node.mjs    |  7 ++--
 static/js/sidebar.mjs      | 69 +++++++++++---------------------------
 5 files changed, 60 insertions(+), 69 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 2b5cbe1..0842b03 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -6,11 +6,16 @@ import { Node } from 'node'
 export class App {
 	constructor() {// {{{
 		this.currentNode = null
-		this.sidebar = new N2Sidebar() // XXX - rename this.tree
+		this.sidebar = new N2Sidebar()
 		this.crumbs = new N2Crumbs()
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = document.getElementById('note')
+		this.showNodeEventSequence = new ShowNodeEventSequence() // discard all GO_TO_NODE events
 
+		this.sidebar.render().then(sidebar => {
+			document.getElementById('tree').append(sidebar)
+			document.getElementById('tree-nodes')?.focus()
+		})
 
 		_mbus.subscribe('TREE_TRUNK_FETCHED', async () => {
 			// Subscribing to the start node existing after the tree trunk is
@@ -18,9 +23,6 @@ export class App {
 			// root node itself, and the root node should be selected in the tree
 			// after it is rendered when the site is shown without UUID in the URL.
 			const startNode = await this.getStartNode()
-			_mbus.subscribe(`NODE_COMPONENT_EXIST_${startNode.UUID}`, () => {
-				this.goToNode(startNode.UUID, false, false)
-			})
 
 			document.getElementById('tree').append(await this.sidebar.render())
 			document.getElementById('tree-nodes')?.focus()
@@ -187,14 +189,36 @@ export class App {
 		this.sidebar.setSelected(node, dontExpand)
 
 		const ancestors = await nodeStore.getNodeAncestry(node)
-		_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
-		_mbus.dispatch('NODE_UI_OPEN', node)
-		_mbus.dispatch('NODE_UNMODIFIED')
-		_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
 
 		// Scrolls node into view.
-		this.sidebar.makeVisible(node)
+		// makeVisible normally expands all ancestor nodes to make the whole chain visible.
+		// This is a bad idea when quickly navigating the tree, since the arrow navigation
+		// has collapsed nodes which the event calling goToNode can come to undo, if the
+		// event processing lags behind.
+		if (!dontExpand)
+			await this.sidebar.makeVisible(node, ancestors)
+
+		_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
+		_mbus.dispatch('NODE_UI_OPEN', { node, eventSequence: this.showNodeEventSequence.next() })
+		_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
+		_mbus.dispatch('NODE_UNMODIFIED')
 	}//}}}
+	pageIsVisible(page) {// {{{
+		let classList = document.querySelector('#main-page').classList
+		return classList.contains(page)
+	}// }}}
+}
+
+class ShowNodeEventSequence {
+	constructor() {
+		this.seq = 0
+	}
+	next() {
+		return ++this.seq
+	}
+	current() {
+		return this.seq
+	}
 }
 
 class N2Crumbs extends CustomHTMLElement {
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index bd2a331..3bd2701 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -199,9 +199,7 @@ export class NodeStore {
 				}
 
 				Promise.all(hasChildrenPromises)
-					.then(() => {
-						resolve(nodes)
-					})
+					.then(() => resolve(nodes))
 			}
 			req.onerror = (event) => reject(event.target.error)
 		})
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index b03c810..44061f6 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -80,8 +80,11 @@ export class N2PageHistory extends CustomHTMLElement {
 
 		})
 
-		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
-			await this.useNode(event.detail.data)
+		_mbus.subscribe('SHOW_PAGE', async (event) => {
+			if(event.detail.data.page != 'history')
+				return
+
+			await this.useNode(_app.nodeUI.node)
 			this.render()
 		})
 
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 9a82b90..a2ebf52 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -42,7 +42,8 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		this.marked = new MarkedPosition()
 
 		_mbus.subscribe('NODE_UI_OPEN', event => {
-			this.node = event.detail.data
+			console.log(event.detail.data.eventSequence, _app.showNodeEventSequence.current())
+			this.node = event.detail.data.node
 			this.showMarkdown(true)
 			this.render()
 		})
@@ -376,10 +377,6 @@ export class Node {
 			this.Children[i]._parent = this
 		}
 
-		// Notify the tree that all children are fetched and ready to process.
-		//_notes2.current.tree.fetchChildrenOn(this.UUID)
-		_mbus.dispatch(`NODE_CHILDREN_FETCHED_${this.UUID}`)
-
 		return this.Children
 	}//}}}
 	setHasChildren(v) {// {{{
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index c0ef99e..9c06e81 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -1,7 +1,6 @@
 import { ROOT_NODE } from 'node_store'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { Color, Solver } from './lib/css_colorize.mjs'
-import { Node } from './page_node.mjs'
 
 // TreeExpandedHandler is responsible for collapsing or expanding
 // the node tree, wide view or narrow "mobile" view.
@@ -145,24 +144,21 @@ export class N2Sidebar extends CustomHTMLElement {
 			treenode.render(true)
 		})
 
-		this.populateFirstLevel()
-
 		/* XXX - set color */
 		let color = new Color(0x80, 0x00, 0x33)
 		let solver = new Solver(color)
 		let result = solver.solve()
-		// console.log(result.filter)
+		console.log(result.filter)
 	}// }}}
 	async render() {// {{{
 		if (this.rendered)
 			alert('Tree should only be rendered once.')
 
-
 		this.expandedNodes[ROOT_NODE] = true
 		const startnode = await nodeStore.get(ROOT_NODE)
 		const starttreenode = new N2TreeNode(this, startnode, null)
 		this.treeNodeComponents[startnode.UUID] = starttreenode
-		this.elTreenodes.appendChild(starttreenode.render())
+		this.elTreenodes.appendChild(await starttreenode.render())
 
 		this.rendered = true
 		return this
@@ -174,27 +170,6 @@ export class N2Sidebar extends CustomHTMLElement {
 		this.elTreenodes.replaceChildren()
 		this.populateFirstLevel()
 	}// }}}
-	populateFirstLevel() {//{{{
-		nodeStore.get(ROOT_NODE)
-			.then(node => node.fetchChildren())
-			.then(children => {
-				this.treeNodeComponents = {}
-				this.treeTrunk = []
-				for (const node of children) {
-					// The root node isn't supposed to be shown in the tree.
-					if (node.UUID === ROOT_NODE)
-						continue
-					if (node.ParentUUID === ROOT_NODE)
-						this.treeTrunk.push(node)
-				}
-				_mbus.dispatch('TREE_TRUNK_FETCHED')
-			})
-			.catch(e => {
-				console.error(e)
-				console.log(e.type, e.error)
-				alert(e.error)
-			})
-	}//}}}
 	getNodeExpanded(UUID) {//{{{
 		if (this.expandedNodes[UUID] === undefined)
 			this.expandedNodes[UUID] = false
@@ -249,6 +224,8 @@ export class N2Sidebar extends CustomHTMLElement {
 			// Holding shift down does it recursively.
 			case Space:
 			case 'Enter':
+				if (n.UUID === ROOT_NODE)
+					return
 				const expanded = this.getNodeExpanded(n.UUID)
 				if (event.shiftKey) {
 					this.recursiveExpand(n, !expanded)
@@ -302,7 +279,7 @@ export class N2Sidebar extends CustomHTMLElement {
 			return
 
 		const expanded = this.getNodeExpanded(n.UUID)
-		if (expanded && n.hasChildren()) {
+		if (expanded && n.hasChildren() && n.UUID !== ROOT_NODE) {
 			this.setNodeExpanded(n, false)
 			return
 		}
@@ -452,15 +429,14 @@ export class N2Sidebar extends CustomHTMLElement {
 		if (!state)
 			await this.setNodeExpanded(node, false)
 	}//}}}
-	async makeVisible(node) {// {{{
+	async makeVisible(node, providedAncestors) {// {{{
 		const treenode = this.treeNodeComponents[node.UUID]
 
-		const ancestors = await nodeStore.getNodeAncestry(node)
+		const ancestors = providedAncestors || await nodeStore.getNodeAncestry(node)
 		for (const ancestor of ancestors.reverse()) {
 			this.setNodeExpanded(ancestor, true)
 		}
 
-		// The ROOT_NODE for example hasn't got a treenode.
 		treenode?.scrollIntoView({ block: 'nearest' })
 	}// }}}
 }
@@ -517,33 +493,25 @@ export class N2TreeNode extends CustomHTMLElement {
 		this.elExpandToggle.addEventListener('click', () => this.sidebar.setNodeExpanded(this.node, !this.sidebar.getNodeExpanded(this.node.UUID)))
 		this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
 
-		_mbus.subscribe(`NODE_CHILDREN_FETCHED_${node.UUID}`, () => {
-			this.render(true)
-		})
-
 		_mbus.subscribe(`NODE_EXPAND_${node.UUID}`, _state => {
 			this.render(true)
 		})
-
-		if (this.node.Level === 0 || this.sidebar.getNodeExpanded(this.node.UUID))
-			this.fetchChildren()
 	}// }}}
-	async fetchChildren() {//{{{
+	async fetchChildren(force_fetch) {//{{{
+		if (this.children_populated && !force_fetch)
+			return
+
 		await this.node.fetchChildren()
 		this.children_populated = true
 	}//}}}
-	render(force_update) {//{{{
+	async render(force_update, force_refetch_children) {//{{{
 		if (this.rendered && force_update !== true)
 			return this
 
-		// Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
-		const expanded = this.node.hasChildren() && this.sidebar.getNodeExpanded(this.node.UUID)
+		if (this.sidebar.getNodeExpanded(this.node.UUID))
+			await this.fetchChildren()
 
-		if (!this.children_populated && this.sidebar.getNodeExpanded(this.parent?.node.UUID)) {
-			this.node.fetchChildren().then(() => this.children_populated = true)
-		}
-
-		// Update the name and selected status
+		// Update the name and selected status.
 		this.elName.querySelector('span').innerText = this.node.get('Name')
 
 		if (this.sidebar.isSelected(this.node))
@@ -552,6 +520,7 @@ export class N2TreeNode extends CustomHTMLElement {
 			this.elName.classList.remove('selected')
 
 		// Update expansion state
+		const expanded = this.node.hasChildren() && this.sidebar.getNodeExpanded(this.node.UUID)
 		if (expanded) {
 			this.elChildren.classList.add('expanded')
 			this.elChildren.classList.remove('collapsed')
@@ -571,7 +540,6 @@ export class N2TreeNode extends CustomHTMLElement {
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/collapsed.svg`)
 
 		// Should children be rendered?
-		this.elChildren.innerHTML = ''
 		let children = []
 		if (expanded)
 			children = this.node.Children.map(node => {
@@ -579,13 +547,14 @@ export class N2TreeNode extends CustomHTMLElement {
 				if (treenode === undefined) {
 					treenode = new N2TreeNode(this.sidebar, node, this)
 					this.sidebar.treeNodeComponents[node.UUID] = treenode
-					_mbus.dispatch(`NODE_COMPONENT_EXIST_${node.UUID}`)
 				}
 				return treenode
 			})
 
+		const renderedChildren = []
 		for (const c of children)
-			this.elChildren.appendChild(c.render())
+			renderedChildren.push(await c.render())
+		this.elChildren.replaceChildren(...renderedChildren)
 
 		this.rendered = true
 		return this

From 697576cb34663fc9597558117249eb7999bbf186 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:24:47 +0200
Subject: [PATCH 22/79] Fix quick navigation having reexpanding nodes

---
 static/js/app.mjs     |  3 +--
 static/js/sidebar.mjs | 10 ++++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 0842b03..7a9ac52 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -195,8 +195,7 @@ export class App {
 		// This is a bad idea when quickly navigating the tree, since the arrow navigation
 		// has collapsed nodes which the event calling goToNode can come to undo, if the
 		// event processing lags behind.
-		if (!dontExpand)
-			await this.sidebar.makeVisible(node, ancestors)
+		await this.sidebar.makeVisible(node, ancestors, dontExpand)
 
 		_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
 		_mbus.dispatch('NODE_UI_OPEN', { node, eventSequence: this.showNodeEventSequence.next() })
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 9c06e81..d1263a3 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -429,12 +429,14 @@ export class N2Sidebar extends CustomHTMLElement {
 		if (!state)
 			await this.setNodeExpanded(node, false)
 	}//}}}
-	async makeVisible(node, providedAncestors) {// {{{
+	async makeVisible(node, providedAncestors, dontExpand) {// {{{
 		const treenode = this.treeNodeComponents[node.UUID]
 
-		const ancestors = providedAncestors || await nodeStore.getNodeAncestry(node)
-		for (const ancestor of ancestors.reverse()) {
-			this.setNodeExpanded(ancestor, true)
+		if (!dontExpand) {
+			const ancestors = providedAncestors || await nodeStore.getNodeAncestry(node)
+			for (const ancestor of ancestors.reverse()) {
+				this.setNodeExpanded(ancestor, true)
+			}
 		}
 
 		treenode?.scrollIntoView({ block: 'nearest' })

From 48ac1a8044000a5f51c2f20a22c65775de10ceea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:33:36 +0200
Subject: [PATCH 23/79] Removed old debugging code

---
 static/js/app.mjs       | 15 +--------------
 static/js/page_node.mjs |  1 -
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 7a9ac52..7904660 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -10,7 +10,6 @@ export class App {
 		this.crumbs = new N2Crumbs()
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = document.getElementById('note')
-		this.showNodeEventSequence = new ShowNodeEventSequence() // discard all GO_TO_NODE events
 
 		this.sidebar.render().then(sidebar => {
 			document.getElementById('tree').append(sidebar)
@@ -198,7 +197,7 @@ export class App {
 		await this.sidebar.makeVisible(node, ancestors, dontExpand)
 
 		_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
-		_mbus.dispatch('NODE_UI_OPEN', { node, eventSequence: this.showNodeEventSequence.next() })
+		_mbus.dispatch('NODE_UI_OPEN', node)
 		_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
 		_mbus.dispatch('NODE_UNMODIFIED')
 	}//}}}
@@ -208,18 +207,6 @@ export class App {
 	}// }}}
 }
 
-class ShowNodeEventSequence {
-	constructor() {
-		this.seq = 0
-	}
-	next() {
-		return ++this.seq
-	}
-	current() {
-		return this.seq
-	}
-}
-
 class N2Crumbs extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index a2ebf52..6665a49 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -42,7 +42,6 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		this.marked = new MarkedPosition()
 
 		_mbus.subscribe('NODE_UI_OPEN', event => {
-			console.log(event.detail.data.eventSequence, _app.showNodeEventSequence.current())
 			this.node = event.detail.data.node
 			this.showMarkdown(true)
 			this.render()

From 92287e2076a5c3c3241e16230ca012e8066e03d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:39:51 +0200
Subject: [PATCH 24/79] Removed old debugging code

---
 static/js/app.mjs     | 4 +++-
 static/js/sidebar.mjs | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 7904660..fcc5add 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -16,7 +16,7 @@ export class App {
 			document.getElementById('tree-nodes')?.focus()
 		})
 
-		_mbus.subscribe('TREE_TRUNK_FETCHED', async () => {
+		_mbus.subscribe('TREE_RENDERED', async () => {
 			// Subscribing to the start node existing after the tree trunk is
 			// fetched since the NODE_COMPONENT_EXIST message isn't sent for the
 			// root node itself, and the root node should be selected in the tree
@@ -28,6 +28,8 @@ export class App {
 
 			if (startNode.UUID == ROOT_NODE)
 				this.goToNode(startNode.UUID, false, false)
+			else
+				this.goToNode(startNode.UUID, false, false)
 		})
 
 		_mbus.subscribe('TREE_NODE_SELECTED', event => {
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index d1263a3..285fd44 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -160,6 +160,11 @@ export class N2Sidebar extends CustomHTMLElement {
 		this.treeNodeComponents[startnode.UUID] = starttreenode
 		this.elTreenodes.appendChild(await starttreenode.render())
 
+		// Notify the application that the initial tree is rendered (with children)
+		// and that initial node selection can take place. App will check URL to
+		// select the correct one.
+		_mbus.dispatch('TREE_RENDERED')
+
 		this.rendered = true
 		return this
 	}// }}}

From cdccbc93066b90dee09e8ead2136326c9700e1c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:43:52 +0200
Subject: [PATCH 25/79] Fixed showing node

---
 static/js/app.mjs       | 3 ---
 static/js/page_node.mjs | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index fcc5add..688b476 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -23,9 +23,6 @@ export class App {
 			// after it is rendered when the site is shown without UUID in the URL.
 			const startNode = await this.getStartNode()
 
-			document.getElementById('tree').append(await this.sidebar.render())
-			document.getElementById('tree-nodes')?.focus()
-
 			if (startNode.UUID == ROOT_NODE)
 				this.goToNode(startNode.UUID, false, false)
 			else
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 6665a49..cca6cf0 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -42,7 +42,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		this.marked = new MarkedPosition()
 
 		_mbus.subscribe('NODE_UI_OPEN', event => {
-			this.node = event.detail.data.node
+			this.node = event.detail.data
 			this.showMarkdown(true)
 			this.render()
 		})

From dc7e70b3f2e80f5d9e18d1f868198efe121b47e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:44:07 +0200
Subject: [PATCH 26/79] Bumped to v17

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 7bd5abd..7c2decc 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v16"
+const VERSION = "v17"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From b77effa58c1f470280b757bc55950272c9cc5b1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:45:54 +0200
Subject: [PATCH 27/79] Fixed service worker, bumped to v18

---
 main.go                  | 2 +-
 static/service_worker.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/main.go b/main.go
index 7c2decc..f533d24 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v17"
+const VERSION = "v18"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 
diff --git a/static/service_worker.js b/static/service_worker.js
index 0689818..8522b20 100644
--- a/static/service_worker.js
+++ b/static/service_worker.js
@@ -43,8 +43,8 @@ const CACHED_ASSETS = [
 	'/js/{{ .VERSION }}/page_history.mjs',
 	'/js/{{ .VERSION }}/page_node.mjs',
 	'/js/{{ .VERSION }}/page_storage.mjs',
+	'/js/{{ .VERSION }}/sidebar.mjs',
 	'/js/{{ .VERSION }}/sync.mjs',
-	'/js/{{ .VERSION }}/tree.mjs',
 ]
 
 async function precache() {

From 2921613d97902029ce9a048dab07a27127bafc21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:51:03 +0200
Subject: [PATCH 28/79] Show node page when switching node

---
 static/js/app.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 688b476..38aebd4 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -199,6 +199,7 @@ export class App {
 		_mbus.dispatch('NODE_UI_OPEN', node)
 		_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
 		_mbus.dispatch('NODE_UNMODIFIED')
+		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
 	}//}}}
 	pageIsVisible(page) {// {{{
 		let classList = document.querySelector('#main-page').classList

From 389c2fe69ac0d2e727f0273868d94ed24ece2865 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 21:59:06 +0200
Subject: [PATCH 29/79] Fixed bug in arrow up

---
 static/js/sidebar.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 285fd44..da05750 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -346,7 +346,8 @@ export class N2Sidebar extends CustomHTMLElement {
 		}
 
 		if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
-			_mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
+			const nodeVisuallyAbove = this.getLastExpandedNode(siblingBefore)
+			_mbus.dispatch("GO_TO_NODE", { nodeUUID: nodeVisuallyAbove.UUID, dontPush: false, dontExpand: true })
 			return
 		}
 

From 805f7ae3180436efb32ffc2deafcbac3f7230286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 22:24:28 +0200
Subject: [PATCH 30/79] Headings with lines to divide the page

---
 static/css/markdown.css       | 37 +++++++++++++++++++++++++++++------
 static/js/marked_position.mjs |  7 ++++++-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/static/css/markdown.css b/static/css/markdown.css
index e29ec9e..bd68c7b 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -1,11 +1,27 @@
 .el-node-markdown {
 	padding-top: 16px;
 
-	h1 {
-		border-bottom: 1px solid #ccc;
+	.heading-container {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 16px;
+		white-space: nowrap;
+		align-items: center;
 		margin-top: 32px;
 		margin-bottom: 8px;
 
+		&:first-child {
+			margin-top: 32px;
+		}
+
+		.line {
+			border-bottom: 1px solid var(--line-color);
+		}
+	}
+
+	h1 {
+		border-bottom: 1px solid #ccc;
+
 		display: inline-block;
 		font-size: 1.25em;
 
@@ -14,24 +30,33 @@
 		background-color: var(--color1);
 		padding: 4px 12px;
 
-		&:first-child {
-			margin-top: 32px;
-		}
+		margin-top: 0px;
+		margin-bottom: 0px;
+
 	}
 
 	h2 {
 		font-size: 1.25em;
-		margin-top: 32px;
+		margin-top: 0px;
 		margin-bottom: 0px;
 		color: var(--color1);
 	}
 
+	h2+.line,
+	h3+.line {
+		border-bottom: none !important;
+	}
+
 	h3:before {
 		font-size: 1.0em;
 		content: "> ";
 		color: var(--color1);
 	}
 
+	a {
+		color: var(--color1);
+	}
+
 	p {
 		line-height: 150%;
 	}
diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 62a6996..175f490 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -114,7 +114,12 @@ export class MarkedPosition {
 			renderer: {
 				heading(token) {
 					const content = this.parser.parseInline(token.tokens)
-					return `<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n`
+					return `
+						<div class="heading-container">
+							<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
+							<div class="line"></div>\n
+						</div>
+					`
 				},
 
 				paragraph(token) {

From 227fa2208b5e0d7f9a90bcca9bd66e17b01016e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 9 Jun 2026 06:43:07 +0200
Subject: [PATCH 31/79] WIP sync

---
 static/css/notes2.css           | 71 ++++++++-------------------------
 static/images/icon_transfer.svg | 49 +++++++++++++++++++++++
 static/js/sync.mjs              | 10 ++---
 views/pages/notes2.gotmpl       |  2 +
 4 files changed, 73 insertions(+), 59 deletions(-)
 create mode 100644 static/images/icon_transfer.svg

diff --git a/static/css/notes2.css b/static/css/notes2.css
index b4d7e02..9805b82 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -307,65 +307,28 @@ button {
 }
 
 n2-syncprogress {
-	--radius: 8px;
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	padding: 8px 16px;
+	z-index: 16384;
+	border-radius: 6px;
+	font-weight: bold;
+	background-color: var(--color1);
+	color: #fff;
 
 	display: grid;
-	grid-area: sync;
-	display: grid;
-	justify-items: center;
+	grid-template-columns: min-content repeat(3, min-content);
+	grid-gap: 8px 8px;
+	white-space: nowrap;
 	align-items: center;
+	justify-items: end;
 
-	position: relative;
-
-	opacity: 0;
-	transition: height 0s 500ms, opacity 500ms linear, visibility 0s 500ms;
-
-	&.show {
-		opacity: 1;
-		transition: visibility, height 0s, opacity 500ms linear;
+	img {
+		grid-row: 1/3;
+		height: 34px;
+		margin-right: 8px;
 	}
-
-	progress {
-		width: 100%;
-		height: 24px;
-		border-radius: 8px;
-	}
-
-	.count {
-		position: absolute;
-		top: 16px;
-		width: 100%;
-		white-space: nowrap;
-		color: #888;
-		text-align: center;
-		font-size: 12pt;
-		font-weight: bold;
-	}
-
-	progress[value]::-webkit-progress-bar {
-		background-color: #eee;
-		box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
-		border-radius: var(--radius);
-	}
-
-	progress[value]::-moz-progress-bar {
-		background-color: #eee;
-		box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
-		border-radius: var(--radius);
-	}
-
-	progress[value]::-webkit-progress-value {
-		background: rgb(186, 95, 89);
-		background: linear-gradient(180deg, rgba(186, 95, 89, 1) 0%, rgba(254, 95, 85, 1) 50%, rgba(186, 95, 89, 1) 100%);
-		border-radius: var(--radius);
-	}
-
-	progress[value]::-moz-progress-value {
-		background: rgb(186, 95, 89);
-		background: linear-gradient(180deg, rgba(186, 95, 89, 1) 0%, rgba(254, 95, 85, 1) 50%, rgba(186, 95, 89, 1) 100%);
-		border-radius: var(--radius);
-	}
-
 }
 
 /* ============================================================= */
diff --git a/static/images/icon_transfer.svg b/static/images/icon_transfer.svg
new file mode 100644
index 0000000..59c900e
--- /dev/null
+++ b/static/images/icon_transfer.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.89642mm"
+   height="6.3499999mm"
+   viewBox="0 0 5.89642 6.3499999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_transfer.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1"
+     inkscape:cx="9.5"
+     inkscape:cy="10"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.39375,-145.78542)">
+    <title
+       id="title1">file-arrow-up-down-outline</title>
+    <path
+       d="m 105.14239,151.22828 c 0.0363,0.21771 0.11189,0.42031 0.21771,0.60475 h -2.36158 c -0.33565,0 -0.60477,-0.26912 -0.60477,-0.60475 v -4.83811 c 0,-0.33261 0.26912,-0.60475 0.60477,-0.60475 h 2.41904 l 1.81428,1.81429 v 1.53912 c -0.0998,-0.0151 -0.19956,-0.0272 -0.30238,-0.0272 -0.10285,0 -0.20259,0.0121 -0.30237,0.0272 v -1.23675 h -1.51191 v -1.51191 h -2.11666 v 4.83811 h 2.14387 m 1.18231,-1.51191 -0.75596,0.90714 h 0.45358 v 1.20952 h 0.60477 v -1.20952 h 0.45356 l -0.75595,-0.90714 m 1.51191,1.51191 v -1.20953 h -0.60477 v 1.20953 h -0.45356 l 0.75595,0.90714 0.75594,-0.90714 z"
+       id="path1"
+       style="stroke-width:0.302381;fill:#ffffff" />
+  </g>
+</svg>
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index 291e0b9..47777f5 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -166,8 +166,9 @@ export class N2SyncProgress extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
-			<progress data-el="progress" min=0 max=137 value=0></progress>
-			<div data-el="count" class="count">0 / 0</div>
+			<img src="/images/${_VERSION}/icon_transfer.svg">
+			<div data-el="download-transferred" class="count">0</div> <div>/</div> <div data-el="download-total">0</div>
+			<div data-el="upload-transferred"   class="count">0</div> <div>/</div> <div data-el="upload-total">0</div>
 		`
 	}// }}}
 	constructor() {//{{{
@@ -211,9 +212,8 @@ export class N2SyncProgress extends CustomHTMLElement {
 		this.render()
 	}//}}}
 	render() {//{{{
-		this.elProgress.max = this.state.nodesToSync
-		this.elProgress.value = this.state.nodesSynced
-		this.elCount.innerText = `${this.state.nodesSynced} / ${this.state.nodesToSync}`
+		this.elDownloadTransferred.innerText = this.state.nodesSynced
+		this.elDownloadTotal.innerText = this.state.nodesToSync
 	}//}}}
 	setSyncState(state) {// {{{
 		if (state)
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 1142eda..422b672 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -22,6 +22,8 @@
 			<n2-pagehistory></n2-pagehistory>
 		</div>
 	</div>
+
+	<n2-syncprogress></n2-syncprogress>
 </div>
 
 <link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">

From 744984fc4627f1591055b10bd0e3280656e92370 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 9 Jun 2026 10:27:16 +0200
Subject: [PATCH 32/79] Better sync

---
 static/css/notes2.css |  4 ++--
 static/js/sync.mjs    | 36 ++++++++++++++++++++++++++++--------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index 9805b82..f55e1a1 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -308,8 +308,8 @@ button {
 
 n2-syncprogress {
 	position: absolute;
-	top: 16px;
-	right: 16px;
+	top: 8px;
+	right: 8px;
 	padding: 8px 16px;
 	z-index: 16384;
 	border-radius: 6px;
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index 47777f5..4db4473 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -17,10 +17,12 @@ export class Sync {
 			const state = await nodeStore.getAppState('latest_sync_node')
 			const oldMax = (state?.value ? state.value : 0)
 
-			let nodeCount = await this.getNodeCount(oldMax)
-			nodeCount += await nodeStore.sendQueue.count()
+			let nodeCountDownload = await this.getNodeCount(oldMax)
+			let nodeCountUpload = await nodeStore.sendQueue.count()
+			console.log(nodeCountUpload)
 
-			_mbus.dispatch('SYNC_COUNT', { count: nodeCount })
+			_mbus.dispatch('SYNC_DOWNLOAD_COUNT', { count: nodeCountDownload })
+			_mbus.dispatch('SYNC_UPLOAD_COUNT', { count: nodeCountUpload })
 
 			await this.nodesFromServer(oldMax)
 				.then(durationNodes => {
@@ -28,6 +30,7 @@ export class Sync {
 					console.log(`Total time: ${Math.round(1000 * durationNodes) / 1000}s`)
 				})
 
+			// Uploads of modified nodes to server.
 			await this.nodesToServer()
 		} finally {
 			_mbus.dispatch('SYNC_DONE')
@@ -175,25 +178,35 @@ export class N2SyncProgress extends CustomHTMLElement {
 		super()
 
 		this.reset()
-		_mbus.subscribe('SYNC_COUNT', event => this.progressHandler(event))
+		_mbus.subscribe('SYNC_DOWNLOAD_COUNT', event => this.progressHandler(event))
+		_mbus.subscribe('SYNC_UPLOAD_COUNT', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_HANDLED', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
+		_mbus.subscribe('SYNC_UPLOADED', event => this.progressHandler(event))
 	}//}}}
 	reset() {//{{{
 		this.state = {
-			nodesToSync: 0,
+			nodesToDownload: 0,
+			nodesToUpload: 0,
 			nodesSynced: 0,
+			nodesUploaded: 0,
 		}
 	}//}}}
 	progressHandler(event) {//{{{
 		const eventData = event.detail.data
 		switch (event.type) {
-			case 'SYNC_COUNT':
-				this.state.nodesToSync = eventData.count
+			case 'SYNC_DOWNLOAD_COUNT':
+				this.state.nodesToDownload = eventData.count
+				this.setSyncState(true)
+				break
+
+			case 'SYNC_UPLOAD_COUNT':
+				this.state.nodesToUpload = eventData.count
 				this.setSyncState(true)
 				break
 
 			case 'SYNC_HANDLED':
+				console.log('SYNC_HANDLED', eventData.handled)
 				this.state.nodesSynced = eventData.handled
 				break
 
@@ -208,12 +221,19 @@ export class N2SyncProgress extends CustomHTMLElement {
 				// Reload the tree nodes to reflect the new/updated nodes.
 				window._app.tree.reset()
 				break
+
+			case 'SYNC_UPLOADED':
+				this.state.nodesUploaded += eventData.count
+				break
 		}
 		this.render()
 	}//}}}
 	render() {//{{{
 		this.elDownloadTransferred.innerText = this.state.nodesSynced
-		this.elDownloadTotal.innerText = this.state.nodesToSync
+		this.elDownloadTotal.innerText = this.state.nodesToDownload
+
+		this.elUploadTransferred.innerText = this.state.nodesUploaded
+		this.elUploadTotal.innerText = this.state.nodesToUpload
 	}//}}}
 	setSyncState(state) {// {{{
 		if (state)

From 25b763703d0c5d0226ad2d67d5b0ad8d1d3c68e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 9 Jun 2026 10:27:22 +0200
Subject: [PATCH 33/79] Bumped to v19

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index f533d24..875fd00 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v18"
+const VERSION = "v19"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From 1f24f1f2f2b85ee352a4dae5f0745ac4effe2f13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 9 Jun 2026 17:03:01 +0200
Subject: [PATCH 34/79] Sync shows/disappears

---
 static/css/markdown.css       | 76 +++++++++++++++++++++--------------
 static/css/notes2.css         | 12 +++++-
 static/js/marked_position.mjs |  2 +-
 static/js/sync.mjs            | 21 +++++-----
 4 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/static/css/markdown.css b/static/css/markdown.css
index bd68c7b..85cde2c 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -4,53 +4,69 @@
 	.heading-container {
 		display: grid;
 		grid-template-columns: min-content 1fr;
-		grid-gap: 16px;
+		grid-gap: 12px;
 		white-space: nowrap;
 		align-items: center;
-		margin-top: 32px;
-		margin-bottom: 8px;
+		margin-bottom: 16px;
 
 		&:first-child {
-			margin-top: 32px;
+			margin-top: 32px !important;
+			.line {
+				display: none !important;
+			}
 		}
 
 		.line {
 			border-bottom: 1px solid var(--line-color);
 		}
-	}
 
-	h1 {
-		border-bottom: 1px solid #ccc;
+		&[data-heading="1"] {
+			margin-top: 64px;
+		}
 
-		display: inline-block;
-		font-size: 1.25em;
+		&[data-heading="2"],
+		&[data-heading="3"] {
+			margin-top: 16px;
 
-		border-radius: 8px;
-		color: #fff;
-		background-color: var(--color1);
-		padding: 4px 12px;
+			.line {
+				display: none;
+			}
+		}
 
-		margin-top: 0px;
-		margin-bottom: 0px;
+		h1 {
+			border-bottom: 1px solid #ccc;
 
-	}
+			display: inline-block;
+			font-size: 1.25em;
 
-	h2 {
-		font-size: 1.25em;
-		margin-top: 0px;
-		margin-bottom: 0px;
-		color: var(--color1);
-	}
+			clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
 
-	h2+.line,
-	h3+.line {
-		border-bottom: none !important;
-	}
+			color: #fff;
+			background-color: var(--color1);
+			padding: 4px 24px 4px 16px;
+
+			margin-top: 0px;
+			margin-bottom: 0px;
+
+		}
+
+		h2 {
+			font-size: 1.25em;
+			margin-top: 16px;
+			margin-bottom: 0px;
+			color: var(--color1);
+		}
+
+		h3 {
+			margin: 0;
+
+			&:before {
+				font-size: 1.0em;
+				content: "> ";
+				color: var(--color1);
+			}
+		}
 
-	h3:before {
-		font-size: 1.0em;
-		content: "> ";
-		color: var(--color1);
 	}
 
 	a {
diff --git a/static/css/notes2.css b/static/css/notes2.css
index f55e1a1..76c660b 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -307,7 +307,8 @@ button {
 }
 
 n2-syncprogress {
-	position: absolute;
+	display: grid;
+	position: fixed;
 	top: 8px;
 	right: 8px;
 	padding: 8px 16px;
@@ -316,8 +317,15 @@ n2-syncprogress {
 	font-weight: bold;
 	background-color: var(--color1);
 	color: #fff;
+	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+
+	opacity: 0;
+	transition: opacity 250ms;
+
+	&.show {
+		opacity: 1;
+	}
 
-	display: grid;
 	grid-template-columns: min-content repeat(3, min-content);
 	grid-gap: 8px 8px;
 	white-space: nowrap;
diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 175f490..311e806 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -115,7 +115,7 @@ export class MarkedPosition {
 				heading(token) {
 					const content = this.parser.parseInline(token.tokens)
 					return `
-						<div class="heading-container">
+						<div class="heading-container" data-heading="${token.depth}">
 							<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
 							<div class="line"></div>\n
 						</div>
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index 4db4473..f0c9296 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -19,7 +19,6 @@ export class Sync {
 
 			let nodeCountDownload = await this.getNodeCount(oldMax)
 			let nodeCountUpload = await nodeStore.sendQueue.count()
-			console.log(nodeCountUpload)
 
 			_mbus.dispatch('SYNC_DOWNLOAD_COUNT', { count: nodeCountDownload })
 			_mbus.dispatch('SYNC_UPLOAD_COUNT', { count: nodeCountUpload })
@@ -81,11 +80,11 @@ export class Sync {
 
 					handled++
 					if (handled % 100 === 0)
-						_mbus.dispatch('SYNC_HANDLED', { handled })
+						_mbus.dispatch('SYNC_DOWNLOADED', { handled })
 				}
 
 			} while (res.Continue)
-			_mbus.dispatch('SYNC_HANDLED', { handled })
+			_mbus.dispatch('SYNC_DOWNLOADED', { handled })
 
 			nodeStore.setAppState('latest_sync_node', currMax)
 		} catch (e) {
@@ -178,11 +177,12 @@ export class N2SyncProgress extends CustomHTMLElement {
 		super()
 
 		this.reset()
+
 		_mbus.subscribe('SYNC_DOWNLOAD_COUNT', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_UPLOAD_COUNT', event => this.progressHandler(event))
-		_mbus.subscribe('SYNC_HANDLED', event => this.progressHandler(event))
-		_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
+		_mbus.subscribe('SYNC_DOWNLOADED', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_UPLOADED', event => this.progressHandler(event))
+		_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
 	}//}}}
 	reset() {//{{{
 		this.state = {
@@ -205,11 +205,14 @@ export class N2SyncProgress extends CustomHTMLElement {
 				this.setSyncState(true)
 				break
 
-			case 'SYNC_HANDLED':
-				console.log('SYNC_HANDLED', eventData.handled)
+			case 'SYNC_DOWNLOADED':
 				this.state.nodesSynced = eventData.handled
 				break
 
+			case 'SYNC_UPLOADED':
+				this.state.nodesUploaded += eventData.count
+				break
+
 			case 'SYNC_DONE':
 				// Hides the progress bar.
 				this.setSyncState(false)
@@ -221,10 +224,6 @@ export class N2SyncProgress extends CustomHTMLElement {
 				// Reload the tree nodes to reflect the new/updated nodes.
 				window._app.tree.reset()
 				break
-
-			case 'SYNC_UPLOADED':
-				this.state.nodesUploaded += eventData.count
-				break
 		}
 		this.render()
 	}//}}}

From be7f5dbf30263173fb5f38ac5d6c522b39821f21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 9 Jun 2026 17:23:44 +0200
Subject: [PATCH 35/79] Sync better

---
 node.go                 |  4 ----
 static/css/markdown.css | 14 ++++++--------
 static/css/notes2.css   |  4 ++++
 static/js/sidebar.mjs   |  4 +---
 static/js/sync.mjs      | 20 +++++++++++++-------
 5 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/node.go b/node.go
index 0beb1b1..c8afe94 100644
--- a/node.go
+++ b/node.go
@@ -54,10 +54,6 @@ type Node struct {
 	Content          string
 	ContentEncrypted string `db:"content_encrypted" json:"-"`
 	Markdown         bool
-
-	// CryptoKeyID    int    `db:"crypto_key_id"`
-	//Files           []File
-	//ChecklistGroups []ChecklistGroup
 }
 
 func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint64, moreRowsExist bool, err error) { // {{{
diff --git a/static/css/markdown.css b/static/css/markdown.css
index 85cde2c..1ecbc94 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -22,6 +22,7 @@
 
 		&[data-heading="1"] {
 			margin-top: 64px;
+			margin-bottom: 32px;
 		}
 
 		&[data-heading="2"],
@@ -33,6 +34,10 @@
 			}
 		}
 
+		h1, h2, h3 {
+			margin: 0;
+		}
+
 		h1 {
 			border-bottom: 1px solid #ccc;
 
@@ -45,21 +50,14 @@
 			background-color: var(--color1);
 			padding: 4px 24px 4px 16px;
 
-			margin-top: 0px;
-			margin-bottom: 0px;
-
 		}
 
 		h2 {
 			font-size: 1.25em;
-			margin-top: 16px;
-			margin-bottom: 0px;
 			color: var(--color1);
 		}
 
 		h3 {
-			margin: 0;
-
 			&:before {
 				font-size: 1.0em;
 				content: "> ";
@@ -85,7 +83,7 @@
 	table {
 		border: 1px solid #ccc;
 		border-collapse: collapse;
-		margin-top: 14px;
+		margin-top: 16px;
 
 		th {
 			text-align: left;
diff --git a/static/css/notes2.css b/static/css/notes2.css
index 76c660b..44618cf 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -326,6 +326,10 @@ n2-syncprogress {
 		opacity: 1;
 	}
 
+	&.ok {
+		background-color: #5aa02c;
+	}
+
 	grid-template-columns: min-content repeat(3, min-content);
 	grid-gap: 8px 8px;
 	white-space: nowrap;
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index da05750..23c78c0 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -117,7 +117,6 @@ export class N2Sidebar extends CustomHTMLElement {
 		this.tabIndex = 0
 
 		this.treeNodeComponents = {}
-		this.treeTrunk = []
 		this.expandedNodes = {} // keyed on UUID
 		this.selectedNode = null
 		this.rendered = false
@@ -170,10 +169,9 @@ export class N2Sidebar extends CustomHTMLElement {
 	}// }}}
 	reset() {// {{{
 		this.treeNodeComponents = {}
-		this.treeTrunk = []
 		this.rendered = false
 		this.elTreenodes.replaceChildren()
-		this.populateFirstLevel()
+		this.render()
 	}// }}}
 	getNodeExpanded(UUID) {//{{{
 		if (this.expandedNodes[UUID] === undefined)
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index f0c9296..35485eb 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -20,6 +20,7 @@ export class Sync {
 			let nodeCountDownload = await this.getNodeCount(oldMax)
 			let nodeCountUpload = await nodeStore.sendQueue.count()
 
+			_mbus.dispatch('SYNC_START')
 			_mbus.dispatch('SYNC_DOWNLOAD_COUNT', { count: nodeCountDownload })
 			_mbus.dispatch('SYNC_UPLOAD_COUNT', { count: nodeCountUpload })
 
@@ -175,9 +176,8 @@ export class N2SyncProgress extends CustomHTMLElement {
 	}// }}}
 	constructor() {//{{{
 		super()
-
 		this.reset()
-
+		_mbus.subscribe('SYNC_START', () => this.reset())
 		_mbus.subscribe('SYNC_DOWNLOAD_COUNT', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_UPLOAD_COUNT', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_DOWNLOADED', event => this.progressHandler(event))
@@ -185,12 +185,14 @@ export class N2SyncProgress extends CustomHTMLElement {
 		_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
 	}//}}}
 	reset() {//{{{
+		this.classList.remove('ok')
 		this.state = {
 			nodesToDownload: 0,
 			nodesToUpload: 0,
-			nodesSynced: 0,
+			nodesDowloaded: 0,
 			nodesUploaded: 0,
 		}
+		this.render()
 	}//}}}
 	progressHandler(event) {//{{{
 		const eventData = event.detail.data
@@ -206,7 +208,7 @@ export class N2SyncProgress extends CustomHTMLElement {
 				break
 
 			case 'SYNC_DOWNLOADED':
-				this.state.nodesSynced = eventData.handled
+				this.state.nodesDowloaded = eventData.handled
 				break
 
 			case 'SYNC_UPLOADED':
@@ -214,23 +216,26 @@ export class N2SyncProgress extends CustomHTMLElement {
 				break
 
 			case 'SYNC_DONE':
+				this.classList.add('ok')
+
 				// Hides the progress bar.
 				this.setSyncState(false)
 
 				// Don't update anything if nothing was synced.
-				if (this.state.nodesSynced === 0)
+				if (this.state.nodesDowloaded === 0)
 					break
 
 				// Reload the tree nodes to reflect the new/updated nodes.
-				window._app.tree.reset()
+				window._app.sidebar.reset()
 				break
 		}
 		this.render()
 	}//}}}
 	render() {//{{{
-		this.elDownloadTransferred.innerText = this.state.nodesSynced
+		this.elDownloadTransferred.innerText = this.state.nodesDowloaded
 		this.elDownloadTotal.innerText = this.state.nodesToDownload
 
+		console.log('setting elUploadTransferred', this.state.nodesUploaded)
 		this.elUploadTransferred.innerText = this.state.nodesUploaded
 		this.elUploadTotal.innerText = this.state.nodesToUpload
 	}//}}}
@@ -238,6 +243,7 @@ export class N2SyncProgress extends CustomHTMLElement {
 		if (state)
 			this.classList.add('show')
 		else
+			// Give the user a chance to see what it ended on.
 			setTimeout(() => this.classList.remove('show'), 1500)
 	}// }}}
 }

From 3e8d5b6d9a58f3e197d8c8b9c5d31cf5ccfbf026 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 10 Jun 2026 08:03:33 +0200
Subject: [PATCH 36/79] Fixes for HistoryUUID

---
 main.go                  |   8 +--
 node.go                  |   6 +-
 sql/00001.sql            |  12 ++--
 sql/00003.sql            |   1 +
 sql/00004.sql            | 135 +++++++++++++++++++++++++++++++++++++++
 static/js/node_store.mjs |  31 ++++++++-
 static/js/page_node.mjs  |   1 +
 7 files changed, 176 insertions(+), 18 deletions(-)
 create mode 100644 sql/00003.sql
 create mode 100644 sql/00004.sql

diff --git a/main.go b/main.go
index 875fd00..664a50e 100644
--- a/main.go
+++ b/main.go
@@ -277,12 +277,6 @@ func actionSyncFromServer(w http.ResponseWriter, r *http.Request) { // {{{
 		return
 	}
 
-	/*
-		Log.Debug("/sync/from_server", "num_nodes", len(nodes), "maxSeq", maxSeq)
-		foo, _ := json.Marshal(nodes)
-		os.WriteFile(fmt.Sprintf("/tmp/nodes-%d.json", offset), foo, 0644)
-	*/
-
 	j, _ := json.Marshal(struct {
 		OK       bool
 		Nodes    []Node
@@ -383,7 +377,7 @@ func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
 		return
 	}
 
-	_, err = db.Exec(`CALL add_nodes($1, $2, $3::jsonb)`, user.UserID, user.ClientUUID, request.NodeData)
+	_, err = db.Exec(`CALL add_nodes($1, $2::uuid, $3::jsonb)`, user.UserID, user.ClientUUID, request.NodeData)
 	if err != nil {
 		Log.Error("sync", "error", err)
 		httpError(w, err)
diff --git a/node.go b/node.go
index c8afe94..6b79769 100644
--- a/node.go
+++ b/node.go
@@ -44,6 +44,7 @@ type Node struct {
 	UUID             string
 	UserID           int    `db:"user_id"`
 	ParentUUID       string `db:"parent_uuid"`
+	HistoryUUID      string `db:"history_uuid"`
 	Name             string
 	Created          time.Time
 	Updated          time.Time
@@ -122,7 +123,7 @@ func Nodes(userID, offset int, synced uint64, clientUUID string) (nodes []Node,
 	rows, err = db.Queryx(`
 		SELECT
 			uuid,
-			COALESCE(parent_uuid, '') AS parent_uuid,
+			COALESCE(parent_uuid, '00000000-0000-0000-0000-000000000000'::uuid) AS parent_uuid,
 			name,
 			created,
 			updated,
@@ -137,7 +138,7 @@ func Nodes(userID, offset int, synced uint64, clientUUID string) (nodes []Node,
 			public.node
 		WHERE
 			user_id = $1 AND
-			client != $5 AND
+			client != $5::uuid AND
 			NOT history AND (
 				created_seq > $4 OR
 				updated_seq > $4 OR
@@ -251,6 +252,7 @@ func RetrieveNodeHistory(userID int, nodeUUID string, offset int) (nodes []Node,
 	rows, err = db.Queryx(`
 		SELECT
 			uuid,
+			history_uuid,
 			user_id,
 			name,
 			created,
diff --git a/sql/00001.sql b/sql/00001.sql
index 7eb8273..4aecc91 100644
--- a/sql/00001.sql
+++ b/sql/00001.sql
@@ -257,7 +257,7 @@ $$;
 CREATE TABLE public.client (
     id integer NOT NULL,
     user_id integer NOT NULL,
-    client_uuid character(36) DEFAULT ''::bpchar NOT NULL,
+    client_uuid uuid DEFAULT '00000000-0000-0000-0000-000000000000'::uuid NOT NULL,
     created timestamp with time zone DEFAULT now() NOT NULL,
     description character varying DEFAULT ''::character varying NOT NULL
 );
@@ -302,8 +302,8 @@ CREATE SEQUENCE public.node_updates
 CREATE TABLE public.node (
     id integer NOT NULL,
     user_id integer NOT NULL,
-    uuid character(36) DEFAULT gen_random_uuid() NOT NULL,
-    parent_uuid character(36),
+    "uuid" uuid DEFAULT gen_random_uuid() NOT NULL,
+    parent_uuid uuid,
     created timestamp with time zone DEFAULT now() NOT NULL,
     updated timestamp with time zone DEFAULT now() NOT NULL,
     deleted timestamp with time zone,
@@ -315,7 +315,7 @@ CREATE TABLE public.node (
     content_encrypted text DEFAULT ''::text NOT NULL,
     markdown boolean DEFAULT false NOT NULL,
     history boolean DEFAULT false NOT NULL,
-    client character(36) DEFAULT ''::bpchar NOT NULL,
+    client uuid DEFAULT '00000000-0000-0000-0000-000000000000'::uuid NOT NULL,
     client_sequence integer,
     CONSTRAINT name_length CHECK ((length(TRIM(BOTH FROM name)) > 0))
 );
@@ -328,7 +328,7 @@ CREATE TABLE public.node (
 CREATE TABLE public.node_history (
     id integer NOT NULL,
     user_id integer NOT NULL,
-    uuid character(36) NOT NULL,
+    "uuid" uuid NOT NULL,
     parents character varying[],
     created timestamp with time zone NOT NULL,
     updated timestamp with time zone NOT NULL,
@@ -336,7 +336,7 @@ CREATE TABLE public.node_history (
     content text NOT NULL,
     content_encrypted text NOT NULL,
     markdown boolean DEFAULT false NOT NULL,
-    client character(36) DEFAULT ''::bpchar NOT NULL,
+    client uuid DEFAULT '00000000-0000-0000-0000-000000000000'::uuid NOT NULL,
     client_sequence integer
 );
 
diff --git a/sql/00003.sql b/sql/00003.sql
new file mode 100644
index 0000000..a0cd4b1
--- /dev/null
+++ b/sql/00003.sql
@@ -0,0 +1 @@
+ALTER TABLE public.node_history ADD history_uuid uuid NULL;
diff --git a/sql/00004.sql b/sql/00004.sql
new file mode 100644
index 0000000..eafbad2
--- /dev/null
+++ b/sql/00004.sql
@@ -0,0 +1,135 @@
+CREATE UNIQUE INDEX node_history_user_id_idx ON public.node_history (user_id,"uuid",history_uuid);
+
+
+ALTER TABLE public.node ALTER COLUMN "uuid" TYPE uuid USING "uuid"::uuid::uuid;
+ALTER TABLE public.node ALTER COLUMN parent_uuid TYPE uuid USING parent_uuid::uuid::uuid;
+ALTER TABLE public.node ALTER COLUMN client TYPE uuid USING client::uuid::uuid;
+
+
+
+CREATE OR REPLACE PROCEDURE public.add_nodes(IN p_user_id integer, IN p_client_uuid uuid, IN p_nodes jsonb)
+ LANGUAGE plpgsql
+AS $procedure$
+
+DECLARE
+	node_data         jsonb;
+	node_updated      timestamptz;
+	db_updated        timestamptz;
+	db_uuid           uuid;
+	db_client         uuid;
+	db_client_seq     int;
+	db_history_uuid   uuid;
+	node_uuid         uuid;
+	node_parent_uuid  uuid;
+	node_history_uuid uuid;
+
+BEGIN
+	RAISE NOTICE '--------------------------';
+	FOR node_data IN SELECT * FROM jsonb_array_elements(p_nodes)
+	LOOP
+		node_uuid         = (node_data->>'UUID')::uuid;
+		node_history_uuid = (node_data->>'HistoryUUID')::uuid;
+		node_updated      = (node_data->>'Updated')::timestamptz;
+
+		
+
+		-- Frontend is using an all-zero UUID to define the root node.
+		-- Database is using NULL.
+		IF node_data->>'ParentUUID' = '00000000-0000-0000-0000-000000000000' THEN
+			node_parent_uuid = NULL;
+		ELSE
+			node_parent_uuid = (node_data->>'ParentUUID')::uuid;
+		END IF;
+
+
+
+		-- Every jode has a new history UUID to keep the history entry uniquely identifiable
+		-- across clients. A history entry could potentially be sent again, but should be
+		-- safe to ignore as every change to a node should have a new history UUID.
+		--
+		-- The current node is also stored as history.
+		INSERT INTO node_history(
+			user_id, "uuid", "history_uuid", parents, created, updated,
+			"name", "content", markdown, "content_encrypted",
+			client, client_sequence
+		)
+		VALUES(
+			p_user_id, -- combined key
+			node_uuid, -- combined key
+			node_history_uuid, -- combined key
+			(jsonb_populate_record(null::json_ancestor_array, node_data))."Ancestors",
+			(node_data->>'Created')::timestamptz,
+			(node_data->>'Updated')::timestamptz,
+			(node_data->>'Name')::varchar,
+			(node_data->>'Content')::text,
+			(node_data->>'Markdown')::bool,
+			'', /* content_encrypted */
+			p_client_uuid,
+			(node_data->>'ClientSequence')::int
+		)
+		ON CONFLICT ("user_id", "uuid", "history_uuid")
+		DO NOTHING;
+
+
+
+		-- Retrieve the current modified timestamp for this node from the database.
+		SELECT
+			uuid, updated, client, client_sequence
+		INTO
+			db_uuid, db_updated, db_client, db_client_seq
+		FROM public."node"
+		WHERE
+			user_id = p_user_id AND
+			uuid::uuid = node_uuid::uuid;
+
+
+
+		-- Is the node not in database? It needs to be created.
+		IF db_uuid IS NULL THEN
+			RAISE NOTICE '01 New node %', node_uuid;
+
+			INSERT INTO public."node" (
+				user_id, "uuid", parent_uuid, created, updated,
+				"name", "content", markdown, "content_encrypted",
+				client, client_sequence
+			)
+			VALUES(
+				p_user_id,
+				node_uuid,
+				node_parent_uuid,
+				(node_data->>'Created')::timestamptz,
+				(node_data->>'Updated')::timestamptz,
+				(node_data->>'Name')::varchar,
+				(node_data->>'Content')::text,
+				(node_data->>'Markdown')::bool,
+				'', /* content_encrypted */
+				p_client_uuid,
+				(node_data->>'ClientSequence')::int
+			);
+
+			CONTINUE;
+
+		END IF;
+
+
+
+		-- Update the public node as well if it was older than incoming node.
+		IF node_updated > db_updated THEN
+			UPDATE public."node"
+			SET
+				updated = (node_data->>'Updated')::timestamptz,
+				updated_seq = nextval('node_updates'),
+				name = (node_data->>'Name')::varchar,
+				content = (node_data->>'Content')::text,
+				markdown = (node_data->>'Markdown')::bool,
+				client = p_client_uuid,
+				client_sequence = (node_data->>'ClientSequence')::int
+			WHERE
+				user_id = p_user_id AND
+				uuid::uuid = node_uuid::uuid;
+		END IF;
+
+	END LOOP;
+END
+$procedure$
+;
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 3bd2701..9920e06 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -57,7 +57,7 @@ export class NodeStore {
 							break
 
 						case 6:
-							nodesHistory = db.createObjectStore('nodes_history', { keyPath: ['UUID', 'Updated'] })
+							nodesHistory = db.createObjectStore('nodes_history', { keyPath: ['UUID', 'HistoryUUID'] })
 							break
 
 						case 7:
@@ -471,13 +471,38 @@ class NodeHistoryStore extends SimpleNodeStore {
 			}
 		})
 	}// }}}
+	test() {
+		const uuid = '019ead99-984c-72b6-98f0-814991473ad6'
+		const lowerBound = [uuid, '']
+		const upperBound = [uuid, 'z']
+		const range = IDBKeyRange.bound(lowerBound, upperBound)
+
+		const cursor = this.db
+			.transaction(['nodes', this.storeName], 'readonly')
+			.objectStore(this.storeName)
+			.openCursor(range, 'prev')
+
+		cursor.onsuccess = (event) => {
+			const cursor = event.target.result
+			if (!cursor)
+				return
+
+			console.log(cursor.value)
+			cursor.continue()
+		}
+	}
+
 	retrievePage(uuid, perPage, page) {// {{{
 		return new Promise((resolve, _reject) => {
+
+			const lowerBound = [uuid, '00000000-0000-0000-0000-000000000000']
+			const upperBound = [uuid, 'ffffffff-ffff-ffff-ffff-ffffffffffff']
+			const range = IDBKeyRange.bound(lowerBound, upperBound)
+
 			const cursor = this.db
 				.transaction(['nodes', this.storeName], 'readonly')
 				.objectStore(this.storeName)
-				.index('byUUID')
-				.openCursor(uuid, 'prev')
+				.openCursor(range, 'prev')
 
 			let retrieved = 0
 			let first = true
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index cca6cf0..2005816 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -422,6 +422,7 @@ export class Node {
 	async save() {//{{{
 		this.data.Content = this._content
 		this.data.Updated = new Date().toISOString()
+		this.data.HistoryUUID = uuidv7() // every time the node is saved a new history UUID identifies the changed node.
 		this._modified = false
 
 		_mbus.dispatch('NODE_UNMODIFIED')

From 95a26e67d5409eca7b0de9e6c046b5f67fbac30f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 10 Jun 2026 16:37:33 +0200
Subject: [PATCH 37/79] Better node saving/history

---
 static/js/app.mjs       |  4 ---
 static/js/page_node.mjs | 56 +++++++++++++++++++++++------------------
 static/js/sync.mjs      |  3 +--
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 38aebd4..4a1faec 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -162,10 +162,6 @@ export class App {
 
 		const nn = Node.create(name, this.currentNode.UUID)
 		nn.save()
-
-		nodeStore.sendQueue.add(nn)
-		nodeStore.add([nn])
-
 	}//}}}
 	async goToNode(nodeUUID, dontPush, dontExpand) {//{{{
 		if (nodeUUID === null || nodeUUID === undefined)
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 2005816..8f4feb1 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -115,31 +115,9 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		if (!this.node.isModified())
 			return
 
-		/* The node history is a local store for node history.
-		 * This could be provisioned from the server or cleared if
-		 * deemed unnecessary.
-		 *
-		 * The send queue is what will be sent back to the server
-		 * to have a recorded history of the notes.
-		   *
-		 * A setting to be implemented in the future could be to
-		 * not save the history locally at all. */
-
-		// The node is still in its old state and will present
-		// the unmodified content to the node store.
-		const history = nodeStore.nodesHistory.add(this.node)
-
-		// Prepares the node object for saving.
-		// Sets Updated value to current date and time.
+		// node.save takes care of both "nodes" and "nodes_history" stores, also adds it to send queue.
+		// Sets "Updated" value to current date and time and generates a new history UUID.
 		await this.node.save()
-
-		// Updated node is added to the send queue to be stored on server.
-		const sendQueue = nodeStore.sendQueue.add(this.node)
-
-		// Updated node is saved to the primary node store.
-		const nodeStoreAdding = nodeStore.add([this.node])
-
-		await Promise.all([history, sendQueue, nodeStoreAdding])
 	}// }}}
 
 	contentChanged(event) {//{{{
@@ -306,7 +284,7 @@ export class Node {
 		return 0
 	}//}}}
 	static create(name, parentUUID) {// {{{
-		return new Node({
+		const node = new Node({
 			UUID: uuidv7(),
 			Created: (new Date()).toISOString(),
 			Content: '',
@@ -315,6 +293,12 @@ export class Node {
 			Markdown: false,
 			History: false,
 		})
+
+		// Newly created node (not constructed from existing data) is considered modified
+		// since node.save returns early if it isn't modified.
+		node._modified = true
+
+		return node
 	}// }}}
 
 	constructor(nodeData, level) {//{{{
@@ -431,6 +415,28 @@ export class Node {
 		// the ancestry path could be interesting.
 		const ancestors = await nodeStore.getNodeAncestry(this)
 		this.data.Ancestors = ancestors.map(a => a.get('Name')).reverse()
+
+		/* The node history is a local store for node history.
+		 * This could be provisioned from the server or cleared if
+		 * deemed unnecessary.
+		 *
+		 * The send queue is what will be sent back to the server
+		 * to have a recorded history of the notes.
+		 *
+		 * A setting to be implemented in the future could be to
+		 * not save the history locally at all. */
+
+		// Current node is added to history. It will be duplicated with the "nodes" store
+		// for simplicity, to hopefully avoid bugs.
+		const history = nodeStore.nodesHistory.add(this)
+
+		// Updated node is added to the send queue to be stored on server.
+		const sendQueue = nodeStore.sendQueue.add(this)
+
+		// Updated node is saved to the primary node store.
+		const nodeStoreAdding = nodeStore.add([this])
+
+		return Promise.all([history, sendQueue, nodeStoreAdding])
 	}//}}}
 }
 
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index 35485eb..b6328aa 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -89,7 +89,7 @@ export class Sync {
 
 			nodeStore.setAppState('latest_sync_node', currMax)
 		} catch (e) {
-			console.log('sync node tree', e)
+			console.error('sync node tree', e)
 		} finally {
 			syncEnd = Date.now()
 			const duration = (syncEnd - syncStart) / 1000
@@ -235,7 +235,6 @@ export class N2SyncProgress extends CustomHTMLElement {
 		this.elDownloadTransferred.innerText = this.state.nodesDowloaded
 		this.elDownloadTotal.innerText = this.state.nodesToDownload
 
-		console.log('setting elUploadTransferred', this.state.nodesUploaded)
 		this.elUploadTransferred.innerText = this.state.nodesUploaded
 		this.elUploadTotal.innerText = this.state.nodesToUpload
 	}//}}}

From c5831382704b0d2c6f3a42d6b04860cef93325bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 10 Jun 2026 17:08:30 +0200
Subject: [PATCH 38/79] Show newly created node

---
 static/js/app.mjs       | 7 ++++++-
 static/js/page_node.mjs | 1 -
 static/js/sidebar.mjs   | 7 +++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 4a1faec..89c0011 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -161,7 +161,12 @@ export class App {
 			return
 
 		const nn = Node.create(name, this.currentNode.UUID)
-		nn.save()
+		await nn.save()
+
+		// Treenode is forcefully rerendered and children refetched to both show the new node
+		// and to get it resorted.
+		const treenode = this.sidebar.getTreeNode(this.currentNode.UUID)
+		treenode.render(true, true)
 	}//}}}
 	async goToNode(nodeUUID, dontPush, dontExpand) {//{{{
 		if (nodeUUID === null || nodeUUID === undefined)
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 8f4feb1..40997e2 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -291,7 +291,6 @@ export class Node {
 			Name: name,
 			ParentUUID: parentUUID,
 			Markdown: false,
-			History: false,
 		})
 
 		// Newly created node (not constructed from existing data) is considered modified
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 23c78c0..8d5bcbd 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -212,6 +212,9 @@ export class N2Sidebar extends CustomHTMLElement {
 	isSelected(node) {//{{{
 		return this.selectedNode?.UUID === node.UUID
 	}//}}}
+	getTreeNode(uuid) {// {{{
+		return this.treeNodeComponents[uuid]
+	}// }}}
 
 	async keyHandler(event) {//{{{
 		let handled = true
@@ -514,8 +517,8 @@ export class N2TreeNode extends CustomHTMLElement {
 		if (this.rendered && force_update !== true)
 			return this
 
-		if (this.sidebar.getNodeExpanded(this.node.UUID))
-			await this.fetchChildren()
+		if (this.sidebar.getNodeExpanded(this.node.UUID) || force_refetch_children)
+			await this.fetchChildren(force_refetch_children)
 
 		// Update the name and selected status.
 		this.elName.querySelector('span').innerText = this.node.get('Name')

From 9ebda044282b9c041e154c9c805d7f23c7b433d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 10 Jun 2026 17:21:29 +0200
Subject: [PATCH 39/79] Node renaming

---
 static/js/app.mjs       |  5 +++++
 static/js/page_node.mjs | 39 ++++++++++++++++++++++++++-------------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 89c0011..0ce2cb0 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -74,6 +74,11 @@ export class App {
 	keyHandler(event) {//{{{
 		let handled = true
 
+		if (event.key == 'F2') {
+			this.nodeUI.renameNode()
+			return
+		}
+
 		// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
 		// Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
 		// Thus, the exception is acceptable to consequent use of alt+shift.
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 40997e2..93f7c7a 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -63,18 +63,7 @@ export class N2PageNodeUI 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.elName.addEventListener('click', async () => this.renameNode())
 		this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
 		this.elNodeContent.addEventListener('paste', async (event) => this.pasteHandler(event))
 		this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown()))
@@ -93,7 +82,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			this.node.setContent(this.elNodeContent.value)
 		})
 		this.elIconHistory.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'history' }))
-		this.elIconSave.addEventListener('click', ()=>this.saveNode())
+		this.elIconSave.addEventListener('click', () => this.saveNode())
 
 		this.showMarkdown(true)
 	}// }}}
@@ -111,6 +100,30 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		} else
 			this.elNodeContent.focus({ preventScroll: true })
 	}// }}}
+	async renameNode() {
+		const name = prompt('Change title', this.node.data.Name)
+		if (name === null)
+			return
+
+		try {
+			// Document isn't only renamed, but also saved at once.
+			// Not really correct, but good enough to not have to implement
+			// a separate way to only rename the document. Since history is
+			// preserved it shouldn't be that horrible.
+			this.node.setName(name)
+			await this.node.save()
+
+			// Re-render the parent treenode forcefully to sort it again.
+			const parentUUID = this.node.ParentUUID
+			if (!parentUUID)
+				return
+			const parentTreeNode = _app.sidebar.getTreeNode(parentUUID)
+			parentTreeNode?.render(true, true)
+		} catch (err) {
+			console.error(err)
+			alert(err)
+		}
+	}
 	async saveNode() {// {{{
 		if (!this.node.isModified())
 			return

From 8a22cf569fcd409e421ce0e6a9eaa246e7678dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 10 Jun 2026 17:24:13 +0200
Subject: [PATCH 40/79] Cleanup

---
 static/js/app.mjs       | 30 ++----------------------------
 static/js/page_node.mjs |  4 ++--
 2 files changed, 4 insertions(+), 30 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 0ce2cb0..112827e 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -87,25 +87,15 @@ export class App {
 
 		switch (event.key.toUpperCase()) {
 			case 'T':
-				if (document.activeElement.id === 'tree-nodes') {
+				if (document.activeElement.id === 'tree-nodes')
 					this.nodeUI.takeFocus()
-				} else {
+				else
 					this.sidebar.focus()
-				}
 				break
 
 			case 'F':
 				_mbus.dispatch('op-search')
 				break
-			/*
-			case 'C':
-				this.showPage('node')
-				break
-
-			case 'E':
-				this.showPage('keys')
-				break
-			*/
 
 			case 'M':
 				globalThis._mbus.dispatch('MARKDOWN_TOGGLE')
@@ -115,25 +105,9 @@ export class App {
 				this.createNode()
 				break
 
-			/*
-			case 'P':
-				this.showPage('node-properties')
-				break
-
-			*/
 			case 'S':
 				this.nodeUI.saveNode()
 				break
-			/*
-
-			case 'U':
-				this.showPage('upload')
-				break
-
-			case 'F':
-				this.showPage('search')
-				break
-				*/
 
 			default:
 				handled = false
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 93f7c7a..963a72b 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -100,7 +100,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		} else
 			this.elNodeContent.focus({ preventScroll: true })
 	}// }}}
-	async renameNode() {
+	async renameNode() {// {{{
 		const name = prompt('Change title', this.node.data.Name)
 		if (name === null)
 			return
@@ -123,7 +123,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			console.error(err)
 			alert(err)
 		}
-	}
+	}// }}}
 	async saveNode() {// {{{
 		if (!this.node.isModified())
 			return

From 31eee4ede57c10124cadfcd59afd8048c44fc78f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 10 Jun 2026 18:21:30 +0200
Subject: [PATCH 41/79] Removed old fields

---
 node.go       |  10 ++--
 sql/00005.sql | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+), 6 deletions(-)
 create mode 100644 sql/00005.sql

diff --git a/node.go b/node.go
index 6b79769..e3a61d5 100644
--- a/node.go
+++ b/node.go
@@ -54,7 +54,6 @@ type Node struct {
 	DeletedSeq       sql.NullInt64 `db:"deleted_seq"`
 	Content          string
 	ContentEncrypted string `db:"content_encrypted" json:"-"`
-	Markdown         bool
 }
 
 func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint64, moreRowsExist bool, err error) { // {{{
@@ -75,7 +74,7 @@ func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint6
 			public.node
 		WHERE
 			user_id = $1 AND 
-			NOT history AND (
+			(
 				created_seq > $4 OR
 				updated_seq > $4 OR
 				deleted_seq > $4
@@ -132,14 +131,13 @@ func Nodes(userID, offset int, synced uint64, clientUUID string) (nodes []Node,
 			updated_seq,
 			deleted_seq,
 			content,
-			content_encrypted,
-			markdown
+			content_encrypted
 		FROM
 			public.node
 		WHERE
 			user_id = $1 AND
 			client != $5::uuid AND
-			NOT history AND (
+			(
 				created_seq > $4 OR
 				updated_seq > $4 OR
 				deleted_seq > $4
@@ -192,7 +190,7 @@ func NodesCount(userID int, synced uint64, clientUUID string) (count int, err er
 		WHERE
 			user_id = $1 AND
 			client != $3 AND
-			NOT history AND (
+			(
 				created_seq > $2 OR
 				updated_seq > $2 OR
 				deleted_seq > $2
diff --git a/sql/00005.sql b/sql/00005.sql
new file mode 100644
index 0000000..b272085
--- /dev/null
+++ b/sql/00005.sql
@@ -0,0 +1,129 @@
+-- Some cleanup of old columns not used anymore.
+DROP INDEX public.node_history_client_idx;
+ALTER TABLE public.node_history DROP COLUMN client_sequence;
+
+ALTER TABLE public.node DROP COLUMN markdown;
+DROP INDEX public.node_history_idx;
+ALTER TABLE public.node DROP COLUMN history;
+ALTER TABLE public.node DROP COLUMN client_sequence;
+
+
+
+CREATE OR REPLACE PROCEDURE public.add_nodes(IN p_user_id integer, IN p_client_uuid uuid, IN p_nodes jsonb)
+ LANGUAGE plpgsql
+AS $procedure$
+
+DECLARE
+	node_data         jsonb;
+	node_updated      timestamptz;
+	db_updated        timestamptz;
+	db_uuid           uuid;
+	db_client         uuid;
+	db_history_uuid   uuid;
+	node_uuid         uuid;
+	node_parent_uuid  uuid;
+	node_history_uuid uuid;
+
+BEGIN
+	FOR node_data IN SELECT * FROM jsonb_array_elements(p_nodes)
+	LOOP
+		node_uuid         = (node_data->>'UUID')::uuid;
+		node_history_uuid = (node_data->>'HistoryUUID')::uuid;
+		node_updated      = (node_data->>'Updated')::timestamptz;
+
+
+
+		-- Frontend is using an all-zero UUID to define the root node.
+		-- Database is using NULL.
+		IF node_data->>'ParentUUID' = '00000000-0000-0000-0000-000000000000' OR node_data->>'ParentUUID' = '' THEN
+			node_parent_uuid = NULL;
+		ELSE
+			node_parent_uuid = (node_data->>'ParentUUID')::uuid;
+		END IF;
+
+
+
+		-- Every jode has a new history UUID to keep the history entry uniquely identifiable
+		-- across clients. A history entry could potentially be sent again, but should be
+		-- safe to ignore as every change to a node should have a new history UUID.
+		--
+		-- The current node is also stored as history.
+		INSERT INTO node_history(
+			user_id, "uuid", "history_uuid", parents, created, updated,
+			"name", "content", "content_encrypted",
+			client
+		)
+		VALUES(
+			p_user_id, -- combined key
+			node_uuid, -- combined key
+			node_history_uuid, -- combined key
+			(jsonb_populate_record(null::json_ancestor_array, node_data))."Ancestors",
+			COALESCE((node_data->>'Created')::timestamptz, NOW()),
+			COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+			(node_data->>'Name')::varchar,
+			(node_data->>'Content')::text,
+			'', /* content_encrypted */
+			p_client_uuid
+		)
+		ON CONFLICT ("user_id", "uuid", "history_uuid")
+		DO NOTHING;
+
+
+
+		-- Retrieve the current modified timestamp for this node from the database.
+		SELECT
+			uuid, updated, client
+		INTO
+			db_uuid, db_updated, db_client
+		FROM public."node"
+		WHERE
+			user_id = p_user_id AND
+			uuid::uuid = node_uuid::uuid;
+
+
+
+		-- Is the node not in database? It needs to be created.
+		IF db_uuid IS NULL THEN
+			RAISE NOTICE '01 New node %', node_uuid;
+
+			INSERT INTO public."node" (
+				user_id, "uuid", parent_uuid, created, updated,
+				"name", "content", "content_encrypted",
+				client
+			)
+			VALUES(
+				p_user_id,
+				node_uuid,
+				node_parent_uuid,
+				COALESCE((node_data->>'Created')::timestamptz, NOW()),
+				COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+				(node_data->>'Name')::varchar,
+				(node_data->>'Content')::text,
+				'', /* content_encrypted */
+				p_client_uuid
+			);
+
+			CONTINUE;
+
+		END IF;
+
+
+
+		-- Update the public node as well if it was older than incoming node.
+		IF node_updated > db_updated THEN
+			UPDATE public."node"
+			SET
+				updated = (node_data->>'Updated')::timestamptz,
+				updated_seq = nextval('node_updates'),
+				name = (node_data->>'Name')::varchar,
+				content = (node_data->>'Content')::text,
+				client = p_client_uuid
+			WHERE
+				user_id = p_user_id AND
+				uuid::uuid = node_uuid::uuid;
+		END IF;
+
+	END LOOP;
+END
+$procedure$
+;

From b3ca0d29d0ea43c93aa8bcafcba60ee19fe0179c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 10 Jun 2026 20:03:31 +0200
Subject: [PATCH 42/79] Root page override

---
 static/css/notes2.css     | 40 +++++++++++++++++++++++++++++++++++++++
 static/js/app.mjs         | 19 ++++++++++++++-----
 static/js/node_store.mjs  | 21 --------------------
 static/js/page_node.mjs   |  5 +++++
 static/js/sidebar.mjs     |  4 ++--
 views/pages/notes2.gotmpl | 10 +++++++++-
 6 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index 44618cf..b57704d 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -230,6 +230,20 @@ button {
 	}
 
 	&.node {
+		&.root-node-override {
+			#page-root {
+				display: contents;
+			}
+
+			#page-node {
+				display: none;
+			}
+		}
+
+		#page-root {
+			display: none;
+		}
+
 		#page-node {
 			display: contents;
 		}
@@ -343,6 +357,32 @@ n2-syncprogress {
 	}
 }
 
+#page-root {
+	& > div {
+		grid-area: content;
+		align-self: start;
+		margin-top: 64px;
+
+		display: grid;
+		justify-items: center;
+
+		/* logo */
+		img {
+			margin-bottom: 16px;
+			height: 32px;
+		}
+
+		.create {
+			border: 2px solid #529b00;
+			padding: 16px 32px;
+			margin-top: 64px;
+			background-color: #d9ffc9;
+			cursor: pointer;
+
+		}
+	}
+}
+
 /* ============================================================= */
 
 n2-nodeui {
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 112827e..7601a90 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -16,26 +16,33 @@ export class App {
 			document.getElementById('tree-nodes')?.focus()
 		})
 
+		const mainPage = document.getElementById('main-page')
+		const determineNodePage = uuid => {
+			if (uuid == ROOT_NODE)
+				mainPage.classList.add('root-node-override')
+			else
+				mainPage.classList.remove('root-node-override')
+		}
+
 		_mbus.subscribe('TREE_RENDERED', async () => {
 			// Subscribing to the start node existing after the tree trunk is
 			// fetched since the NODE_COMPONENT_EXIST message isn't sent for the
 			// root node itself, and the root node should be selected in the tree
 			// after it is rendered when the site is shown without UUID in the URL.
 			const startNode = await this.getStartNode()
-
-			if (startNode.UUID == ROOT_NODE)
-				this.goToNode(startNode.UUID, false, false)
-			else
-				this.goToNode(startNode.UUID, false, false)
+			determineNodePage(startNode.UUID)
+			this.goToNode(startNode.UUID, false, false)
 		})
 
 		_mbus.subscribe('TREE_NODE_SELECTED', event => {
 			const node = event.detail.data
+			determineNodePage(node.UUID)
 			this.goToNode(node.UUID, false, false)
 		})
 
 		_mbus.subscribe('GO_TO_NODE', event => {
 			const node = event.detail.data
+			determineNodePage(node.nodeUUID)
 			this.goToNode(node.nodeUUID, node.dontPush, node.dontExpand)
 		})
 
@@ -61,6 +68,8 @@ export class App {
 				document.getElementById('node-content')?.focus()
 		})
 
+		document.querySelector('#page-root .create').addEventListener('click', () => this.createNode())
+
 		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
 
 		window._sync = new Sync()
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 9920e06..f31a4b6 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -471,27 +471,6 @@ class NodeHistoryStore extends SimpleNodeStore {
 			}
 		})
 	}// }}}
-	test() {
-		const uuid = '019ead99-984c-72b6-98f0-814991473ad6'
-		const lowerBound = [uuid, '']
-		const upperBound = [uuid, 'z']
-		const range = IDBKeyRange.bound(lowerBound, upperBound)
-
-		const cursor = this.db
-			.transaction(['nodes', this.storeName], 'readonly')
-			.objectStore(this.storeName)
-			.openCursor(range, 'prev')
-
-		cursor.onsuccess = (event) => {
-			const cursor = event.target.result
-			if (!cursor)
-				return
-
-			console.log(cursor.value)
-			cursor.continue()
-		}
-	}
-
 	retrievePage(uuid, perPage, page) {// {{{
 		return new Promise((resolve, _reject) => {
 
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 963a72b..28388f8 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -416,6 +416,11 @@ export class Node {
 		_mbus.dispatch('NODE_MODIFIED', { node: this })
 	}// }}}
 	async save() {//{{{
+		// Just safeguarding not using the root node,
+		// which sort of exist but isn't supposed to communicate to server.
+		if (this.UUID == ROOT_NODE)
+			return
+
 		this.data.Content = this._content
 		this.data.Updated = new Date().toISOString()
 		this.data.HistoryUUID = uuidv7() // every time the node is saved a new history UUID identifies the changed node.
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 8d5bcbd..7d73d6a 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -281,7 +281,7 @@ export class N2Sidebar extends CustomHTMLElement {
 		}
 	}//}}}
 	async navigateLeft(n) {//{{{
-		if (n === null || n === undefined)
+		if (n === null || n === undefined || n.UUID == ROOT_NODE)
 			return
 
 		const expanded = this.getNodeExpanded(n.UUID)
@@ -331,7 +331,7 @@ export class N2Sidebar extends CustomHTMLElement {
 		_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
 	}//}}}
 	async navigateUp(n) {//{{{
-		if (n === null || n === undefined)
+		if (n === null || n === undefined || n.UUID == ROOT_NODE)
 			return
 
 		let parent = null
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 422b672..abec2b0 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -10,10 +10,18 @@
 			<n2-pagestorage></n2-pagestorage>
 		</div>
 
+		<div id="page-root">
+			<div>
+				<img src="/images/{{ .VERSION }}/logo.svg">
+				<div> {{ .VERSION }}</div>
+
+				<div class="create">Create note</div>
+			</div>
+		</div>
+
 		<!-- Node editing -->
 		<div id="page-node">
 			<div id="crumbs"></div>
-			<!--n2-syncprogress></n2-syncprogress-->
 			<n2-nodeui id="note"></n2-nodeui>
 		</div>
 

From cc2415a06d9265ef9de9e3187167d0f388a70f8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 11 Jun 2026 09:08:30 +0200
Subject: [PATCH 43/79] Bumped to v20

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 664a50e..9dabb27 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v19"
+const VERSION = "v20"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From 5dac84efdcff92e04c7be3787f21b6174136c9a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 07:12:38 +0200
Subject: [PATCH 44/79] Cleaner CSS page management

---
 static/css/notes2.css | 50 ++++++++++++++++++++++++++-----------------
 static/js/app.mjs     | 19 ++++++++--------
 2 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index b57704d..017124a 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -218,27 +218,16 @@ button {
 	}
 }
 
+
+/* =============== *
+ * PAGE MANAGEMENT *
+ * =============== */
 [id^="page-"] {
 	display: none;
 }
 
-#main-page {
-	display: contents;
-
-	&:focus-within {
-		background-color: #faf;
-	}
-
-	&.node {
-		&.root-node-override {
-			#page-root {
-				display: contents;
-			}
-
-			#page-node {
-				display: none;
-			}
-		}
+#notes2 {
+	&.page-node {
 
 		#page-root {
 			display: none;
@@ -249,7 +238,7 @@ button {
 		}
 	}
 
-	&.storage {
+	&.page-storage {
 		#page-storage {
 			display: contents;
 
@@ -259,7 +248,7 @@ button {
 		}
 	}
 
-	&.history {
+	&.page-history {
 		#page-history {
 			display: grid;
 			grid-area: n2-pagehistory;
@@ -267,6 +256,27 @@ button {
 			n2-pagehistory {}
 		}
 	}
+
+	&.root-node-override {
+		[id^="page-"] {
+			display: none !important;
+		}
+
+		#page-root {
+			display: contents !important;
+		}
+
+	}
+
+}
+
+#main-page {
+	display: contents;
+
+	&:focus-within {
+		background-color: #faf;
+	}
+
 }
 
 #crumbs {
@@ -358,7 +368,7 @@ n2-syncprogress {
 }
 
 #page-root {
-	& > div {
+	&>div {
 		grid-area: content;
 		align-self: start;
 		margin-top: 64px;
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 7601a90..a54be2e 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -4,6 +4,8 @@ import { N2Sidebar } from 'sidebar'
 import { Node } from 'node'
 
 export class App {
+	static PAGES = ['node', 'history', 'storage']
+
 	constructor() {// {{{
 		this.currentNode = null
 		this.sidebar = new N2Sidebar()
@@ -16,12 +18,15 @@ export class App {
 			document.getElementById('tree-nodes')?.focus()
 		})
 
-		const mainPage = document.getElementById('main-page')
+		// Start node shows a system-wide page instead of node editing
+		// since the start node is kind of magic and doesn't fit into
+		// the syncing system.
 		const determineNodePage = uuid => {
+			const el = document.getElementById('notes2')
 			if (uuid == ROOT_NODE)
-				mainPage.classList.add('root-node-override')
+				el.classList.add('root-node-override')
 			else
-				mainPage.classList.remove('root-node-override')
+				el.classList.remove('root-node-override')
 		}
 
 		_mbus.subscribe('TREE_RENDERED', async () => {
@@ -47,13 +52,7 @@ export class App {
 		})
 
 		_mbus.subscribe('SHOW_PAGE', ({ detail: { data: { page } } }) => {
-			let classList = document.querySelector('#main-page').classList
-			classList.forEach(e =>
-				classList.remove(e)
-			)
-			classList.add(page)
-
-			classList = document.querySelector('#notes2').classList
+			const classList = document.getElementById('notes2').classList
 			classList.forEach(e => {
 				if (e.startsWith('page-'))
 					classList.remove(e)

From 73d87d61c48cf5dad66ca3ce49d56eee1ea5af3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 07:13:25 +0200
Subject: [PATCH 45/79] Fixed syncing alert not showing the proper error

---
 static/js/sync.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index b6328aa..fe72c3f 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -158,7 +158,7 @@ export class Sync {
 
 			} catch (e) {
 				console.trace(e)
-				alert(e)
+				alert(e.error)
 				return
 			}
 		}

From 2d036f847a9dd909c1123d531818c58acb27791b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 07:25:02 +0200
Subject: [PATCH 46/79] Better debuggability for node sync problems

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 9dabb27..a85ca72 100644
--- a/main.go
+++ b/main.go
@@ -379,7 +379,7 @@ func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
 
 	_, err = db.Exec(`CALL add_nodes($1, $2::uuid, $3::jsonb)`, user.UserID, user.ClientUUID, request.NodeData)
 	if err != nil {
-		Log.Error("sync", "error", err)
+		Log.Error("sync", "error", err, "user_id", user.UserID, "client_uuid", user.ClientUUID, "node_data", request.NodeData)
 		httpError(w, err)
 		return
 	}

From ffb7f4ac53f7ac933d16dc1a4f6017ecfd1a5c97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 08:27:06 +0200
Subject: [PATCH 47/79] Go to newly created node.

---
 static/js/app.mjs | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index a54be2e..4127b91 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -152,8 +152,9 @@ export class App {
 
 		// Treenode is forcefully rerendered and children refetched to both show the new node
 		// and to get it resorted.
-		const treenode = this.sidebar.getTreeNode(this.currentNode.UUID)
-		treenode.render(true, true)
+		const parentTreenode = this.sidebar.getTreeNode(this.currentNode.UUID)
+		await parentTreenode.render(true, true)
+		_mbus.dispatch('GO_TO_NODE', { nodeUUID: nn.UUID })
 	}//}}}
 	async goToNode(nodeUUID, dontPush, dontExpand) {//{{{
 		if (nodeUUID === null || nodeUUID === undefined)

From 9af733be641a0cd5f5945633347fd4ebbb9edb05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 08:47:24 +0200
Subject: [PATCH 48/79] Icons and keybindings for creating sub-documents and
 sibling documents

---
 static/css/notes2.css               |  2 +-
 static/images/icon_new_document.svg | 49 +++++++++++++++++++++++++++++
 static/js/app.mjs                   | 35 +++++++++++++--------
 static/js/page_node.mjs             | 10 +++++-
 4 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 static/images/icon_new_document.svg

diff --git a/static/css/notes2.css b/static/css/notes2.css
index 017124a..04c9f68 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -9,7 +9,7 @@
 
 	--line-color: #ccc;
 	--tree-expander: 0px;
-	--functions-width: 150px;
+	--functions-width: 180px;
 }
 
 html {
diff --git a/static/images/icon_new_document.svg b/static/images/icon_new_document.svg
new file mode 100644
index 0000000..a105e05
--- /dev/null
+++ b/static/images/icon_new_document.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="21.714331"
+   height="24"
+   viewBox="0 0 5.7452499 6.35"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_new_document.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.74118967"
+     inkscape:cx="8.769685"
+     inkscape:cy="10.793459"
+     inkscape:window-width="1916"
+     inkscape:window-height="1041"
+     inkscape:window-x="1920"
+     inkscape:window-y="1080"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.65833,-145.78542)">
+    <title
+       id="title1">file-document-plus-outline</title>
+    <path
+       d="m 108.40358,150.62351 h -0.90715 v -0.90714 h -0.60476 v 0.90714 h -0.90715 v 0.60477 h 0.90715 v 0.90714 h 0.60476 v -0.90714 h 0.90715 m -5.14048,-5.44286 c -0.33565,0 -0.60477,0.27214 -0.60477,0.60475 v 4.83811 c 0,0.33563 0.26912,0.60475 0.60477,0.60475 h 2.3616 c -0.10892,-0.18747 -0.18446,-0.3931 -0.22075,-0.60475 h -2.14085 v -4.83811 h 2.11666 v 1.51191 h 1.51191 v 1.23372 c 0.0998,-0.0151 0.20259,-0.0242 0.30237,-0.0242 0.10286,0 0.2026,0.009 0.30239,0.0242 v -1.53609 l -1.81428,-1.81429 m -1.81429,3.02381 v 0.60476 h 2.41904 v -0.60476 m -2.41904,1.20952 v 0.60476 h 1.5119 v -0.60476 z"
+       id="path1"
+       style="stroke-width:0.302381" />
+  </g>
+</svg>
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 4127b91..876d11d 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -82,19 +82,18 @@ export class App {
 	keyHandler(event) {//{{{
 		let handled = true
 
-		if (event.key == 'F2') {
-			this.nodeUI.renameNode()
-			return
-		}
-
-		// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
+		// Most keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
 		// Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
 		// Thus, the exception is acceptable to consequent use of alt+shift.
-		if (!(event.shiftKey && event.altKey) && !(event.key.toUpperCase() === 'S' && event.ctrlKey))
-			return
+		const SHIFT_ALT = event.shiftKey && !event.ctrlKey && event.altKey
+		const SHIFT_CTRL_ALT = event.shiftKey && event.ctrlKey && event.altKey
 
 		switch (event.key.toUpperCase()) {
+			case 'F2':
+				this.nodeUI.renameNode()
+				break
 			case 'T':
+				if (!SHIFT_ALT) break
 				if (document.activeElement.id === 'tree-nodes')
 					this.nodeUI.takeFocus()
 				else
@@ -102,18 +101,25 @@ export class App {
 				break
 
 			case 'F':
+				if (!SHIFT_ALT) break
 				_mbus.dispatch('op-search')
 				break
 
 			case 'M':
+				if (!SHIFT_ALT) break
 				globalThis._mbus.dispatch('MARKDOWN_TOGGLE')
 				break
 
 			case 'N':
-				this.createNode()
+				if (SHIFT_ALT)
+					this.createNode()
+				else if (SHIFT_CTRL_ALT) {
+					this.createNode(this.currentNode?.ParentUUID)
+					}
 				break
 
 			case 'S':
+				if (!SHIFT_ALT) break
 				this.nodeUI.saveNode()
 				break
 
@@ -142,17 +148,20 @@ export class App {
 	async saveNode() {//{{{
 
 	}//}}}
-	async createNode() {//{{{
-		let name = prompt("Name")
+	async createNode(createUnderUUID) {//{{{
+		const parentUUID = createUnderUUID ? createUnderUUID : this.currentNode.UUID
+		const p = createUnderUUID ? 'Name for sibling document' : 'Name for sub-document'
+
+		let name = prompt(p)
 		if (!name)
 			return
 
-		const nn = Node.create(name, this.currentNode.UUID)
+		const nn = Node.create(name, parentUUID)
 		await nn.save()
 
 		// Treenode is forcefully rerendered and children refetched to both show the new node
 		// and to get it resorted.
-		const parentTreenode = this.sidebar.getTreeNode(this.currentNode.UUID)
+		const parentTreenode = this.sidebar.getTreeNode(parentUUID)
 		await parentTreenode.render(true, true)
 		_mbus.dispatch('GO_TO_NODE', { nodeUUID: nn.UUID })
 	}//}}}
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 28388f8..b86b172 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -9,10 +9,11 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<style>
 				.el-functions {
 					display: grid;
-					grid-template-columns: 1fr repeat(3, min-content);
+					grid-template-columns: 1fr repeat(4, min-content);
 					grid-gap: 8px;
 					align-items: center;
 					justify-items: end;
+					cursor: pointer;
 
 					img {
 						height: 24px;
@@ -29,6 +30,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 				<img data-el="icon-markdown">
 				<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
 				<img data-el="icon-history"      class="colorize" src="/images/${_VERSION}/icon_history.svg">
+				<img data-el="icon-new-document" class="colorize" src="/images/${_VERSION}/icon_new_document.svg">
 			</div>
 		`
 	}// }}}
@@ -83,6 +85,12 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		})
 		this.elIconHistory.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'history' }))
 		this.elIconSave.addEventListener('click', () => this.saveNode())
+		this.elIconNewDocument.addEventListener('click', event => {
+			if (event.shiftKey)
+				_app.createNode(this.node.ParentUUID)
+			else
+				_app.createNode()
+		})
 
 		this.showMarkdown(true)
 	}// }}}

From 4e495a5c946ec01f3d7534f1815beb10f2094457 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 08:47:39 +0200
Subject: [PATCH 49/79] Bumped to v21

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index a85ca72..7be0087 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v20"
+const VERSION = "v21"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From df399f5d3757e6f4cfae4278799885d27ebe8cd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 07:49:00 +0200
Subject: [PATCH 50/79] Update node content when toggling checkboxes

---
 static/js/marked_position.mjs | 49 ++++++++++++++++++++++-------------
 static/js/page_node.mjs       | 25 ++++++++++++++++++
 2 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 311e806..5f77251 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -92,7 +92,8 @@ function escapeHtmlEntities(html, encode) {// {{{
 
 export class MarkedPosition {
 	constructor() {// {{{
-		window.setpos = (event) => this.setpos(event)
+		window.marked_setpos = (event) => this.setpos(event)
+		window.marked_changecheckbox = (event) => this.changecheckbox(event)
 		this.render()
 	}// }}}
 	setpos(event) {// {{{
@@ -106,6 +107,18 @@ export class MarkedPosition {
 			}
 		})
 	}// }}}
+	changecheckbox(event) {// {{{
+		event.stopPropagation()
+		event.preventDefault()
+
+		_mbus.dispatch('MARKDOWN_CHANGE_CHECKBOX', {
+			checkbox: event.target,
+			position: {
+				start: event.target.closest('[data-offset-start]').dataset.offsetStart,
+				end: event.target.closest('[data-offset-start]').dataset.offsetEnd,
+			}
+		})
+	}// }}}
 	render() {// {{{
 		const markedObject = this
 		this.marked = new Marked()
@@ -116,7 +129,7 @@ export class MarkedPosition {
 					const content = this.parser.parseInline(token.tokens)
 					return `
 						<div class="heading-container" data-heading="${token.depth}">
-							<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
+							<h${token.depth} ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
 							<div class="line"></div>\n
 						</div>
 					`
@@ -124,7 +137,7 @@ export class MarkedPosition {
 
 				paragraph(token) {
 					const content = this.parser.parseInline(token.tokens)
-					return `<p ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</p>\n`
+					return `<p ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</p>\n`
 				},
 
 				list(token) {
@@ -143,7 +156,7 @@ export class MarkedPosition {
 				},
 
 				listitem(token) {
-					return `<li ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parse(token.tokens)}</li>\n`
+					return `<li ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parse(token.tokens)}</li>\n`
 				},
 
 				code(token) {
@@ -152,12 +165,12 @@ export class MarkedPosition {
 					const code = token.text.replace(other.endingNewline, '') + '\n'
 
 					if (!langString) {
-						return `<pre ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code>`
+						return `<pre ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code>`
 							+ (token.escaped ? code : escapeHtmlEntities(code, true))
 							+ '</code></pre>\n'
 					}
 
-					return `<pre ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code class="language-`
+					return `<pre ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code class="language-`
 						+ escapeHtmlEntities(langString)
 						+ '">'
 						+ (token.escaped ? code : escapeHtmlEntities(code, true))
@@ -166,7 +179,7 @@ export class MarkedPosition {
 
 				blockquote(token) {
 					const body = this.parser.parse(token.tokens)
-					return `<blockquote ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">\n${body}</blockquote>\n`
+					return `<blockquote ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">\n${body}</blockquote>\n`
 				},
 
 				html(token) {
@@ -178,13 +191,13 @@ export class MarkedPosition {
 				},
 
 				hr(token) {
-					return `<hr ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">\n`
+					return `<hr ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">\n`
 				},
 
 				checkbox(token) {
-					return `<input ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"`
+					return `<input ondblclick="marked_setpos(event)" onchange="marked_changecheckbox(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"`
 						+ (token.checked ? 'checked="" ' : '')
-						+ 'disabled="" type="checkbox"> '
+						+ 'type="checkbox"> '
 				},
 
 				table(token) {
@@ -227,7 +240,7 @@ export class MarkedPosition {
 					if (token.tokens.length > 0) {
 						const start = token.tokens[0].position.start.offset
 						const end = token.tokens[0].position.end.offset
-						ofs = `ondblclick="setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
+						ofs = `ondblclick="marked_setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
 					}
 
 					const content = this.parser.parseInline(token.tokens);
@@ -239,23 +252,23 @@ export class MarkedPosition {
 				},
 
 				strong(token) {
-					return `<strong ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parseInline(token.tokens)}</strong>`
+					return `<strong ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parseInline(token.tokens)}</strong>`
 				},
 
 				em(token) {
-					return `<em ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parseInline(token.tokens)}</em>`
+					return `<em ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parseInline(token.tokens)}</em>`
 				},
 
 				codespan(token) {
-					return `<code ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${escapeHtmlEntities(token.text, true)}</code>`
+					return `<code ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${escapeHtmlEntities(token.text, true)}</code>`
 				},
 
 				br(token) {
-					return `<br ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">`
+					return `<br ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">`
 				},
 
 				del(token) {
-					return `<del ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parseInline(token.tokens)}</del>`
+					return `<del ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${this.parser.parseInline(token.tokens)}</del>`
 				},
 
 				link(token) {
@@ -265,7 +278,7 @@ export class MarkedPosition {
 						return text
 					}
 					token.href = cleanHref
-					let out = '<a ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}" href="' + token.href + '"'
+					let out = '<a ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}" href="' + token.href + '"'
 					if (token.title) {
 						out += ' title="' + (escapeHtmlEntities(token.title)) + '"'
 					}
@@ -282,7 +295,7 @@ export class MarkedPosition {
 						return escapeHtmlEntities(token.text)
 					}
 					token.href = cleanHref
-					let out = `<n2-file ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}" src="${token.href}" alt="${escapeHtmlEntities(token.text)}"`
+					let out = `<n2-file ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}" src="${token.href}" alt="${escapeHtmlEntities(token.text)}"`
 					if (token.title) {
 						out += ` title="${escapeHtmlEntities(token.title)}"`
 					}
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index b86b172..834e22f 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -64,6 +64,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 		_mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown()))
 		_mbus.subscribe('MARKDOWN_EDIT', ({ detail }) => this.editMarkdown(detail.data))
+		_mbus.subscribe('MARKDOWN_CHANGE_CHECKBOX', ({ detail }) => this.checkboxUpdated(detail.data))
 
 		this.elName.addEventListener('click', async () => this.renameNode())
 		this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
@@ -288,6 +289,30 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 		return lines
 	}// }}}
+	// "marked" sends a messagebus event when checking/unchecking a checkbox.
+	// Updates node and content textarea.
+	checkboxUpdated(eventData) {// {{{
+		const checkbox = eventData.checkbox
+		const pos = eventData.position
+		const content = this.node.content()
+
+		// Basic validation to verify that Marked does what is known and expected at this writing.
+		const mdCheckboxStr = content.slice(pos.start, pos.end)
+		if (!mdCheckboxStr.match(/^\[[ xX]\] $/)) {
+			alert(`Checkbox string didn't pass validation: '${mdCheckboxStr}'`)
+			console.error(`Checkbox string didn't pass validation: '${mdCheckboxStr}'`)
+		}
+
+		// Node is modified with the new value. User has to save manually, otherwise other changes could be saved
+		// when a save wasn't expected.
+		const newValue =`[${checkbox.checked ? 'x' : ' '}] `
+		const modifiedContent = this.node.content().slice(0, pos.start) + newValue + this.node.content().slice(pos.end)
+		this.node.setContent(modifiedContent)
+
+		// Also update the textarea since the node model doesn't know about it.
+		this.elNodeContent.setRangeText(newValue, pos.start, pos.end, 'select')
+
+	}// }}}
 }
 customElements.define('n2-nodeui', N2PageNodeUI)
 

From b45d8c9240c8fea7517796394b7595e82c9557cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 09:36:33 +0200
Subject: [PATCH 51/79] Bumped to v22

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 7be0087..1ce3364 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v21"
+const VERSION = "v22"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From 0001cdebdc427cb1f1dfb0bdf73003807da65f23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 12 Jun 2026 09:41:06 +0200
Subject: [PATCH 52/79] Fixed keyhandler preventing event default on
 non-handled events, bumped to v23

---
 main.go           |  2 +-
 static/js/app.mjs | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/main.go b/main.go
index 1ce3364..ef58317 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v22"
+const VERSION = "v23"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 876d11d..756f486 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -93,7 +93,7 @@ export class App {
 				this.nodeUI.renameNode()
 				break
 			case 'T':
-				if (!SHIFT_ALT) break
+				if (!SHIFT_ALT) { handled = false; break }
 				if (document.activeElement.id === 'tree-nodes')
 					this.nodeUI.takeFocus()
 				else
@@ -101,12 +101,12 @@ export class App {
 				break
 
 			case 'F':
-				if (!SHIFT_ALT) break
+				if (!SHIFT_ALT) { handled = false; break }
 				_mbus.dispatch('op-search')
 				break
 
 			case 'M':
-				if (!SHIFT_ALT) break
+				if (!SHIFT_ALT) { handled = false; break }
 				globalThis._mbus.dispatch('MARKDOWN_TOGGLE')
 				break
 
@@ -115,11 +115,13 @@ export class App {
 					this.createNode()
 				else if (SHIFT_CTRL_ALT) {
 					this.createNode(this.currentNode?.ParentUUID)
-					}
+				} else {
+					handled = false
+				}
 				break
 
 			case 'S':
-				if (!SHIFT_ALT) break
+				if (!SHIFT_ALT) { handled = false; break }
 				this.nodeUI.saveNode()
 				break
 

From 1055404dc0344cfebff5c7004bf4ebc331fad26f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sat, 13 Jun 2026 07:52:07 +0200
Subject: [PATCH 53/79] Fixed ctrl+s

---
 static/js/app.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 756f486..baefe87 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -85,6 +85,7 @@ export class App {
 		// Most keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
 		// Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
 		// Thus, the exception is acceptable to consequent use of alt+shift.
+		const CTRL = !event.shiftKey && event.ctrlKey && !event.altKey
 		const SHIFT_ALT = event.shiftKey && !event.ctrlKey && event.altKey
 		const SHIFT_CTRL_ALT = event.shiftKey && event.ctrlKey && event.altKey
 
@@ -121,7 +122,7 @@ export class App {
 				break
 
 			case 'S':
-				if (!SHIFT_ALT) { handled = false; break }
+				if (!CTRL) { handled = false; break }
 				this.nodeUI.saveNode()
 				break
 

From 61b0ba9adad5aad8e110351fc80e03fe1ca9fd5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 14 Jun 2026 14:36:28 +0200
Subject: [PATCH 54/79] Initial work on drag-and-drop

---
 sql/00006.sql                      | 119 ++++++++++++++++++++++++++
 static/css/notes2.css              |   2 +
 static/images/icon_drag.svg        |  71 ++++++++++++++++
 static/images/icon_drag_ok.svg     |  75 +++++++++++++++++
 static/images/icon_drag_source.svg |  49 +++++++++++
 static/js/app.mjs                  |  57 ++++++++++++-
 static/js/node_store.mjs           |   2 +
 static/js/page_node.mjs            |  15 +++-
 static/js/sidebar.mjs              | 129 ++++++++++++++++++++++++++++-
 views/pages/notes2.gotmpl          |   3 +
 10 files changed, 514 insertions(+), 8 deletions(-)
 create mode 100644 sql/00006.sql
 create mode 100644 static/images/icon_drag.svg
 create mode 100644 static/images/icon_drag_ok.svg
 create mode 100644 static/images/icon_drag_source.svg

diff --git a/sql/00006.sql b/sql/00006.sql
new file mode 100644
index 0000000..56f2acb
--- /dev/null
+++ b/sql/00006.sql
@@ -0,0 +1,119 @@
+CREATE OR REPLACE PROCEDURE public.add_nodes(IN p_user_id integer, IN p_client_uuid uuid, IN p_nodes jsonb)
+ LANGUAGE plpgsql
+AS $procedure$
+
+DECLARE
+	node_data         jsonb;
+	node_updated      timestamptz;
+	db_updated        timestamptz;
+	db_uuid           uuid;
+	db_client         uuid;
+	db_history_uuid   uuid;
+	node_uuid         uuid;
+	node_parent_uuid  uuid;
+	node_history_uuid uuid;
+
+BEGIN
+	FOR node_data IN SELECT * FROM jsonb_array_elements(p_nodes)
+	LOOP
+		node_uuid         = (node_data->>'UUID')::uuid;
+		node_history_uuid = (node_data->>'HistoryUUID')::uuid;
+		node_updated      = (node_data->>'Updated')::timestamptz;
+
+
+
+		-- Frontend is using an all-zero UUID to define the root node.
+		-- Database is using NULL.
+		IF node_data->>'ParentUUID' = '00000000-0000-0000-0000-000000000000' OR node_data->>'ParentUUID' = '' THEN
+			node_parent_uuid = NULL;
+		ELSE
+			node_parent_uuid = (node_data->>'ParentUUID')::uuid;
+		END IF;
+
+
+
+		-- Every jode has a new history UUID to keep the history entry uniquely identifiable
+		-- across clients. A history entry could potentially be sent again, but should be
+		-- safe to ignore as every change to a node should have a new history UUID.
+		--
+		-- The current node is also stored as history.
+		INSERT INTO node_history(
+			user_id, "uuid", "history_uuid", parents, created, updated,
+			"name", "content", "content_encrypted",
+			client
+		)
+		VALUES(
+			p_user_id, -- combined key
+			node_uuid, -- combined key
+			node_history_uuid, -- combined key
+			(jsonb_populate_record(null::json_ancestor_array, node_data))."Ancestors",
+			COALESCE((node_data->>'Created')::timestamptz, NOW()),
+			COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+			(node_data->>'Name')::varchar,
+			(node_data->>'Content')::text,
+			'', /* content_encrypted */
+			p_client_uuid
+		)
+		ON CONFLICT ("user_id", "uuid", "history_uuid")
+		DO NOTHING;
+
+
+
+		-- Retrieve the current modified timestamp for this node from the database.
+		SELECT
+			uuid, updated, client
+		INTO
+			db_uuid, db_updated, db_client
+		FROM public."node"
+		WHERE
+			user_id = p_user_id AND
+			uuid::uuid = node_uuid::uuid;
+
+
+
+		-- Is the node not in database? It needs to be created.
+		IF db_uuid IS NULL THEN
+			RAISE NOTICE '01 New node %', node_uuid;
+
+			INSERT INTO public."node" (
+				user_id, "uuid", parent_uuid, created, updated,
+				"name", "content", "content_encrypted",
+				client
+			)
+			VALUES(
+				p_user_id,
+				node_uuid,
+				node_parent_uuid,
+				COALESCE((node_data->>'Created')::timestamptz, NOW()),
+				COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+				(node_data->>'Name')::varchar,
+				(node_data->>'Content')::text,
+				'', /* content_encrypted */
+				p_client_uuid
+			);
+
+			CONTINUE;
+
+		END IF;
+
+
+
+		-- Update the public node as well if it was older than incoming node.
+		IF node_updated > db_updated THEN
+			UPDATE public."node"
+			SET
+				updated = (node_data->>'Updated')::timestamptz,
+				updated_seq = nextval('node_updates'),
+				parent_uuid = (node_data->>'ParentUUID')::uuid,
+				name = (node_data->>'Name')::varchar,
+				content = (node_data->>'Content')::text,
+				client = p_client_uuid
+			WHERE
+				user_id = p_user_id AND
+				uuid::uuid = node_uuid::uuid;
+		END IF;
+
+	END LOOP;
+END
+$procedure$
+;
diff --git a/static/css/notes2.css b/static/css/notes2.css
index 04c9f68..079e3c1 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -418,6 +418,8 @@ n2-nodeui {
 		font-size: 1.75em;
 		margin-top: 8px;
 		margin-bottom: 0px;
+		white-space: nowrap;
+		width: min-content;
 	}
 
 	.el-functions {
diff --git a/static/images/icon_drag.svg b/static/images/icon_drag.svg
new file mode 100644
index 0000000..02d628e
--- /dev/null
+++ b/static/images/icon_drag.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 6.35 6.35"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="icon_drag.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   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"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="22.627417"
+     inkscape:cx="11.291611"
+     inkscape:cy="10.84967"
+     inkscape:window-width="2190"
+     inkscape:window-height="1401"
+     inkscape:window-x="1463"
+     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(-107.95,-148.16667)"><title
+       id="title1">folder-open</title><title
+       id="title1-1">folder-open-outline</title><title
+       id="title1-5">notebook-outline</title><title
+       id="title1-8">text-box-outline</title><path
+       style="fill:#ffffff;stroke-width:0.264583"
+       d="m 108.3015,148.56838 h 3.95851 v 3.96688 h -3.95851 z"
+       id="path3"
+       sodipodi:nodetypes="ccccc" /><path
+       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"
+       id="path1"
+       style="fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       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 2.64584 v -0.52917 z"
+       id="path2"
+       style="fill:#999999;fill-opacity:1;stroke-width:0.264583"
+       sodipodi:nodetypes="ccccccccccccccc" /><g
+       id="g5"
+       transform="translate(0.26458031,0.26458956)"><g
+         id="g8"
+         transform="matrix(1.2067669,0,0,1.2067669,-23.043599,-31.373186)"><circle
+           style="fill:#800000;fill-opacity:1;stroke:none;stroke-width:1.14487;stroke-dasharray:none;stroke-opacity:1"
+           id="path8"
+           cx="112.05721"
+           cy="152.28557"
+           r="1.5347482" /></g><path
+         style="fill:none;stroke:#ffffff;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+         d="m 111.32748,151.54414 1.71172,1.71172"
+         id="path4" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+         d="m 113.0392,151.54414 -1.71172,1.71172"
+         id="path5" /></g></g></svg>
diff --git a/static/images/icon_drag_ok.svg b/static/images/icon_drag_ok.svg
new file mode 100644
index 0000000..94ba949
--- /dev/null
+++ b/static/images/icon_drag_ok.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 6.35 6.35"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="icon_drag_ok.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   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"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="32"
+     inkscape:cx="13.859375"
+     inkscape:cy="14.890625"
+     inkscape:window-width="2190"
+     inkscape:window-height="1401"
+     inkscape:window-x="1463"
+     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(-107.95,-148.16667)"><title
+       id="title1">folder-open</title><title
+       id="title1-1">folder-open-outline</title><title
+       id="title1-5">notebook-outline</title><title
+       id="title1-8">text-box-outline</title><path
+       style="fill:#ffffff;stroke-width:0.264583"
+       d="m 108.3015,148.56838 h 3.95851 v 3.96688 h -3.95851 z"
+       id="path3"
+       sodipodi:nodetypes="ccccc" /><title
+       id="title1-53">text-box-check-outline</title><path
+       style="stroke-width:0.264583;fill:#999999;fill-opacity:1"
+       d="m 111.65417,149.75417 h -2.64584 V 149.225 h 2.64584"
+       id="path7" /><path
+       style="fill:#999999;fill-opacity:1;stroke-width:0.264583"
+       d="m 109.00833,150.8125 v -0.52916 h 2.64584 v 0.52916"
+       id="path6"
+       sodipodi:nodetypes="cccc" /><path
+       style="fill:#999999;fill-opacity:1;stroke-width:0.313059"
+       d="m 111.65417,151.87084 h -2.64584 v -0.52917 h 2.64584"
+       id="path5"
+       sodipodi:nodetypes="cccc" /><path
+       style="fill:#666666;fill-opacity:1;stroke-width:0.264583"
+       d="m 111.26226,152.92917 h -2.78309 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 c 0.29369,0 0.52917,0.23548 0.52917,0.52917 v 2.7004 c -0.1614,-0.0926 -0.33867,-0.15875 -0.52917,-0.1905 v -2.5099 h -3.70416 V 152.4 h 2.59259 c 0.0318,0.1905 0.0979,0.36777 0.1905,0.52917"
+       id="path4"
+       sodipodi:nodetypes="cssssssccccccc" /><g
+       id="g8"
+       transform="matrix(1.2067669,0,0,1.2067669,-23.043599,-31.373186)"><ellipse
+         style="fill:#338000;fill-opacity:1;stroke:none;stroke-width:1.14488;stroke-dasharray:none;stroke-opacity:1"
+         id="path8"
+         cx="112.27646"
+         cy="152.50487"
+         rx="1.5347482"
+         ry="1.5347837" /><path
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
+         d="m 112.01188,153.31978 -0.72761,-0.79375 0.30692,-0.30692 0.42069,0.42069 0.94985,-0.94985 0.30692,0.37306"
+         id="path1-5" /></g></g></svg>
diff --git a/static/images/icon_drag_source.svg b/static/images/icon_drag_source.svg
new file mode 100644
index 0000000..6378ed9
--- /dev/null
+++ b/static/images/icon_drag_source.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="15.999988"
+   height="15.999988"
+   viewBox="0 0 4.2333301 4.2333301"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="icon_drag_source.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="8.4025252"
+     inkscape:cx="45.522029"
+     inkscape:cy="-1.1306125"
+     inkscape:window-width="2190"
+     inkscape:window-height="1401"
+     inkscape:window-x="1463"
+     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(-187.14773,-188.73523)">
+    <title
+       id="title1">drag-variant</title>
+    <path
+       d="m 191.38106,190.85189 -0.8907,0.89269 -0.49793,-0.49594 0.39279,-0.39675 -0.39279,-0.38881 0.49793,-0.49792 0.8907,0.88673 m -2.11667,-2.11666 0.88674,0.89071 -0.49791,0.49792 -0.38883,-0.39278 -0.39674,0.39278 -0.49594,-0.49792 0.89268,-0.89071 m 0,4.23333 -0.88673,-0.8907 0.49792,-0.49793 0.38881,0.39279 0.39675,-0.39279 0.49594,0.49793 -0.89269,0.8907 m -2.11666,-2.11667 0.89071,-0.89268 0.49792,0.49594 -0.39278,0.39674 0.39278,0.38883 -0.49792,0.49791 -0.89071,-0.88674 m 2.11666,-0.39674 a 0.3967509,0.3967509 0 0 1 0.39675,0.39674 0.3967509,0.3967509 0 0 1 -0.39675,0.39675 0.3967509,0.3967509 0 0 1 -0.39674,-0.39675 0.3967509,0.3967509 0 0 1 0.39674,-0.39674 z"
+       id="path1"
+       style="stroke-width:0.198375" />
+  </g>
+</svg>
diff --git a/static/js/app.mjs b/static/js/app.mjs
index baefe87..8fc43df 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -12,6 +12,7 @@ export class App {
 		this.crumbs = new N2Crumbs()
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = document.getElementById('note')
+		this.dragIcon = new N2DragIcon()
 
 		this.sidebar.render().then(sidebar => {
 			document.getElementById('tree').append(sidebar)
@@ -68,6 +69,7 @@ export class App {
 		})
 
 		document.querySelector('#page-root .create').addEventListener('click', () => this.createNode())
+		document.body.append(this.dragIcon)
 
 		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
 
@@ -78,7 +80,6 @@ export class App {
 		// There a slight delay to initiate sync seems reasonable.
 		setTimeout(() => window._sync.run(), 1000)
 	}// }}}
-
 	keyHandler(event) {//{{{
 		let handled = true
 
@@ -151,6 +152,10 @@ export class App {
 	async saveNode() {//{{{
 
 	}//}}}
+	async moveNode(node, targetNodeUUID) {// {{{
+		node.moveToParent(targetNodeUUID)
+		await node.save()
+	}// }}}
 	async createNode(createUnderUUID) {//{{{
 		const parentUUID = createUnderUUID ? createUnderUUID : this.currentNode.UUID
 		const p = createUnderUUID ? 'Name for sibling document' : 'Name for sub-document'
@@ -239,7 +244,6 @@ class N2Crumbs extends CustomHTMLElement {
 		return this
 	}// }}}
 }
-customElements.define('n2-crumbs', N2Crumbs)
 
 class N2Crumb extends CustomHTMLElement {
 	static {// {{{
@@ -270,7 +274,6 @@ class N2Crumb extends CustomHTMLElement {
 		this.elLink.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: this.uuid, dontPush: false, dontExpand: true }))
 	}// }}}
 }
-customElements.define('n2-crumb', N2Crumb)
 
 function tmpl(html) {// {{{
 	const el = document.createElement('template')
@@ -344,4 +347,52 @@ class OpSearch extends Op {
 	}// }}}
 }
 
+class N2DragIcon extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<style>
+				:host {
+					display: none;
+					position: absolute;
+					z-index: 16384;
+					pointer-events: none;
+				}
+			</style>
+			<img data-el="icon" src="/images/${_VERSION}/icon_drag.svg">
+		`
+	}// }}}
+	constructor() {// {{{
+		super(true)
+
+		document.addEventListener('dragover', e => {
+			this.style.left = `${e.clientX + 8}px`
+			this.style.top = `${e.clientY}px`
+		})
+
+		this.dragTarget = null
+	}// }}}
+	start() {// {{{
+		this.style.display = 'block'
+	}// }}}
+	end() {// {{{
+		this.style.display = 'none'
+	}// }}}
+	icon(name) {// {{{
+		if (name != '')
+			name = '_' + name
+		this.elIcon.setAttribute('src', `/images/${_VERSION}/icon_drag${name}.svg`)
+	}// }}}
+	setTarget(t) {// {{{
+		this.dragTarget = t
+	}// }}}
+	getTarget() {// {{{
+		return this.dragTarget
+	}// }}}
+}
+
+customElements.define('n2-crumbs', N2Crumbs)
+customElements.define('n2-crumb', N2Crumb)
+customElements.define('n2-dragicon', N2DragIcon)
+
 // vim: foldmethod=marker
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index f31a4b6..324f004 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -247,6 +247,7 @@ export class NodeStore {
 					nodeStore = t.objectStore('nodes')
 
 					t.oncomplete = (_event) => {
+						console.log('complete')
 						resolve()
 					}
 
@@ -358,6 +359,7 @@ class SimpleNodeStore {
 			// Node to be moved is first stored in the new queue.
 			const req = store.put(node.data)
 			req.onsuccess = () => {
+				console.log('here')
 				resolve()
 			}
 			req.onerror = (event) => {
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 834e22f..f65afb9 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -422,6 +422,11 @@ export class Node {
 	getParent() {//{{{
 		return this._parent
 	}//}}}
+	moveToParent(newParentUUID) {// {{{
+		this.ParentUUID = newParentUUID
+		this.data.ParentUUID = newParentUUID
+		this._modified = true
+	}// }}}
 	isLastSibling() {//{{{
 		return this._sibling_after === null
 	}//}}}
@@ -463,9 +468,10 @@ export class Node {
 
 		// When stored into database and ancestry was changed,
 		// the ancestry path could be interesting.
+		/*
 		const ancestors = await nodeStore.getNodeAncestry(this)
 		this.data.Ancestors = ancestors.map(a => a.get('Name')).reverse()
-
+		*/
 		/* The node history is a local store for node history.
 		 * This could be provisioned from the server or cleared if
 		 * deemed unnecessary.
@@ -481,12 +487,17 @@ export class Node {
 		const history = nodeStore.nodesHistory.add(this)
 
 		// Updated node is added to the send queue to be stored on server.
+
 		const sendQueue = nodeStore.sendQueue.add(this)
 
 		// Updated node is saved to the primary node store.
 		const nodeStoreAdding = nodeStore.add([this])
 
-		return Promise.all([history, sendQueue, nodeStoreAdding])
+		console.log('waiting')
+		await Promise.all([history, sendQueue, nodeStoreAdding])
+		console.log('waiting done')
+		
+		return
 	}//}}}
 }
 
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 7d73d6a..561de8d 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -449,15 +449,20 @@ export class N2Sidebar extends CustomHTMLElement {
 		treenode?.scrollIntoView({ block: 'nearest' })
 	}// }}}
 }
-customElements.define('n2-sidebar', N2Sidebar)
 
 export class N2TreeNode extends CustomHTMLElement {
+	static DRAG_ICON = new Image()
+	static DRAG_ICON_OK = new Image()
+
 	static {// {{{
+		N2TreeNode.DRAG_ICON.src = `/images/${_VERSION}/leaf.svg`
+		N2TreeNode.DRAG_ICON_OK.src = `/images/${_VERSION}/expanded.svg`
+
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 			<style>
 				n2-sidebar:focus-within {
-					.el-name {
+					& > .el-name {
 						&.selected {
 							span {
 								position:relative;
@@ -478,10 +483,60 @@ export class N2TreeNode extends CustomHTMLElement {
 						}
 					}
 				}
+
+				n2-treenode {
+					& > .el-name {
+						white-space: nowrap;
+						width: min-content;
+					}
+
+					&.drag-source {
+						& > .el-name {
+							position: relative;
+						}
+
+						& > .el-name:after {
+							position: absolute;
+							content: url('/images/${_VERSION}/icon_drag_source.svg');
+							filter: var(--colorize);
+							top: -1px;
+							right: -24px;
+						}
+					}
+
+					&.drag-target {
+						position: relative;
+
+						& > .el-name {
+							anchor-name: --name;
+						}
+
+						& > .el-name:after {
+							content: '';
+							position: absolute;
+
+							border: 2px dashed #888;
+
+							top: calc(anchor(--name top) - 12px);
+							right: calc(anchor(--name right) - 8px);
+							bottom: calc(anchor(--name bottom) - 8px);
+							left: calc(anchor(--name left) - 40px);
+
+							pointer-events: none;
+						}
+
+						& > .el-drag-icon {
+							display: block;
+							top: 0px;
+							left: 0px;
+							z-index: 16384;
+						}
+					}
+				}
 			</style>
 
 			<div data-el="expand-toggle" class="expand-toggle">
-				<img data-el="expand">
+				<img data-el="expand" draggable="false">
 			</div>
 			<div data-el="name" class="name"><span></span></div>
 			<div data-el="children" class="children"></div>
@@ -490,6 +545,7 @@ export class N2TreeNode extends CustomHTMLElement {
 
 	constructor(sidebar, node, parent) {//{{{
 		super()
+		this.setAttribute('draggable', 'true')
 		this.classList.add('node')
 
 		this.sidebar = sidebar
@@ -498,6 +554,7 @@ export class N2TreeNode extends CustomHTMLElement {
 
 		this.children_populated = false
 		this.rendered = false
+		this.dragNode = null
 
 		this.elExpandToggle.addEventListener('click', () => this.sidebar.setNodeExpanded(this.node, !this.sidebar.getNodeExpanded(this.node.UUID)))
 		this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
@@ -505,6 +562,70 @@ export class N2TreeNode extends CustomHTMLElement {
 		_mbus.subscribe(`NODE_EXPAND_${node.UUID}`, _state => {
 			this.render(true)
 		})
+
+		// Drag-and-dropping of nodes
+		this.addEventListener('dragstart', event => this.dragStart(event))
+		this.addEventListener('dragend', event => this.dragEnd(event))
+		this.addEventListener('dragover', event => this.dragOver(event))
+		this.addEventListener('drop', event => this.dragDrop(event))
+		this.elName.addEventListener('dragenter', event => this.dragEnter(event))
+		this.elName.addEventListener('dragleave', event => this.dragLeave(event))
+	}// }}}
+	dragStart(e) {// {{{
+		if (this.node.isModified()) {
+			alert('Save note before moving it.')
+			e.stopPropagation()
+			e.preventDefault()
+			return
+		}
+
+		this.classList.add('drag-source')
+		const blankPixel = new Image()
+		blankPixel.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+		e.dataTransfer.setDragImage(blankPixel, 0, 0)
+		e.dataTransfer.allowedEffects = 'none'
+		e.stopPropagation()
+		_app.dragIcon.start()
+	}// }}}
+	dragEnd(e) {// {{{
+		this.classList.remove('drag-source')
+		_app.dragIcon.end()
+		e.stopPropagation()
+	}// }}}
+	dragOver(e) {// {{{
+		e.dataTransfer.dropEffect = 'move'
+		e.preventDefault()
+	}// }}}
+	async dragDrop(e) {// {{{
+		e.stopPropagation()
+		const moveToNode = _app.dragIcon.getTarget()
+		await _app.moveNode(this.node, moveToNode.node.UUID)
+		return
+
+		_app.sidebar.setNodeExpanded(moveToNode, true)
+		await this.render(true, true)
+		await moveToNode.render(true, true)
+
+		this.dragLeave(e)
+	}// }}}
+	dragEnter(e) {// {{{
+		const targetNode = e.target.closest('n2-treenode')
+		if (targetNode.classList.contains('drag-source'))
+			return
+		e.stopPropagation()
+		_app.dragIcon.icon('ok')
+		this.classList.add('drag-target')
+
+		_app.dragIcon.setTarget(this)
+	}// }}}
+	dragLeave(e) {// {{{
+		e.stopPropagation()
+		e.dataTransfer.dropEffect = 'none'
+		e.dataTransfer.setDragImage(N2TreeNode.DRAG_ICON, -16, 8)
+		_app.dragIcon.icon('')
+		this.classList.remove('drag-target')
+
+		_app.dragIcon.setTarget(null)
 	}// }}}
 	async fetchChildren(force_fetch) {//{{{
 		if (this.children_populated && !force_fetch)
@@ -575,6 +696,8 @@ export class N2TreeNode extends CustomHTMLElement {
 		img.setAttribute('src', newSrc)
 	}// }}}
 }
+
+customElements.define('n2-sidebar', N2Sidebar)
 customElements.define('n2-treenode', N2TreeNode)
 
 // vim: foldmethod=marker
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index abec2b0..381d672 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -1,4 +1,7 @@
 {{ define "page" }}
+
+<!-- Drag and drop elements -->
+
 <!-- page-node -->
 <div id="notes2" class="page-history">
 	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>

From 53d8d16086d8941b35b348ab4008a08513535171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 14 Jun 2026 14:36:52 +0200
Subject: [PATCH 55/79] Initial work on node menu

---
 static/css/notes2.css     |  2 +-
 static/js/page_node.mjs   | 17 ++++++++++++++++-
 views/pages/notes2.gotmpl |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index 079e3c1..dfe4156 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -9,7 +9,7 @@
 
 	--line-color: #ccc;
 	--tree-expander: 0px;
-	--functions-width: 180px;
+	--functions-width: 216px;
 }
 
 html {
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index f65afb9..f6aa681 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -9,7 +9,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<style>
 				.el-functions {
 					display: grid;
-					grid-template-columns: 1fr repeat(4, min-content);
+					grid-template-columns: 1fr repeat(5, min-content);
 					grid-gap: 8px;
 					align-items: center;
 					justify-items: end;
@@ -31,6 +31,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 				<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
 				<img data-el="icon-history"      class="colorize" src="/images/${_VERSION}/icon_history.svg">
 				<img data-el="icon-new-document" class="colorize" src="/images/${_VERSION}/icon_new_document.svg">
+				<img data-el="icon-menu"         class="colorize" src="/images/${_VERSION}/icon_menu.svg" popovertarget="node-menu">
 			</div>
 		`
 	}// }}}
@@ -501,4 +502,18 @@ export class Node {
 	}//}}}
 }
 
+class N2Menu extends CustomHTMLElement {
+	static {
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+		<div id="node-menu" popover>Popover content</div>
+		`
+	}
+
+	constructor() {
+		super()
+	}
+}
+customElements.define('n2-menu', N2Menu)
+
 // vim: foldmethod=marker
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 381d672..a726451 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -6,6 +6,8 @@
 <div id="notes2" class="page-history">
 	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
 	<div id="tree" tabindex=0></div>
+	<n2-menu></n2-menu>
+	<div id="node-menu" popover>Popover content</div>
 
 	<div id="main-page">
 		<!-- Storage stats -->

From 63434678ceb84c88639befcd03ccf8d5861b84eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 14 Jun 2026 14:37:37 +0200
Subject: [PATCH 56/79] Added menu icon

---
 static/images/icon_menu.svg | 51 +++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 static/images/icon_menu.svg

diff --git a/static/images/icon_menu.svg b/static/images/icon_menu.svg
new file mode 100644
index 0000000..e60bdee
--- /dev/null
+++ b/static/images/icon_menu.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="26.666645"
+   height="24"
+   viewBox="0 0 7.0555498 6.35"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_menu.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="2.096401"
+     inkscape:cx="10.255672"
+     inkscape:cy="9.0631517"
+     inkscape:window-width="1916"
+     inkscape:window-height="1041"
+     inkscape:window-x="1920"
+     inkscape:window-y="1080"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-146.57917,-92.339583)">
+    <title
+       id="title1">menu</title>
+    <title
+       id="title1-6">hamburger</title>
+    <path
+       d="m 153.63472,95.867362 c 0,0.391582 -0.31398,0.705554 -0.70555,0.705554 h -5.64445 c -0.38806,0 -0.70555,-0.313972 -0.70555,-0.705554 0,-0.391584 0.31749,-0.705556 0.70555,-0.705556 h 3.175 l 0.88194,0.705556 0.88195,-0.705556 h 0.70556 c 0.39157,0 0.70555,0.3175 0.70555,0.705556 m -3.52778,-3.527779 c -3.175,0 -3.175,2.116667 -3.175,2.116667 h 6.35 c 0,0 0,-2.116667 -3.175,-2.116667 m -3.175,5.291667 c 0,0.585612 0.47272,1.058333 1.05834,1.058333 h 4.23333 c 0.58561,0 1.05833,-0.472721 1.05833,-1.058333 v -0.352778 h -6.35 z"
+       id="path1-2"
+       style="stroke-width:0.352777" />
+  </g>
+</svg>

From 04c936e7309d91c099e23d71b6bc801c8739fe28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 14 Jun 2026 15:02:27 +0200
Subject: [PATCH 57/79] Fixed drag-and-drop with drag source instead of drag
 target

---
 static/js/app.mjs     | 10 +++++-----
 static/js/sidebar.mjs | 14 +++++---------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/static/js/app.mjs b/static/js/app.mjs
index 8fc43df..c556341 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -370,7 +370,7 @@ class N2DragIcon extends CustomHTMLElement {
 			this.style.top = `${e.clientY}px`
 		})
 
-		this.dragTarget = null
+		this.dragSource = null
 	}// }}}
 	start() {// {{{
 		this.style.display = 'block'
@@ -383,11 +383,11 @@ class N2DragIcon extends CustomHTMLElement {
 			name = '_' + name
 		this.elIcon.setAttribute('src', `/images/${_VERSION}/icon_drag${name}.svg`)
 	}// }}}
-	setTarget(t) {// {{{
-		this.dragTarget = t
+	setSource(s) {// {{{
+		this.dragSource = s
 	}// }}}
-	getTarget() {// {{{
-		return this.dragTarget
+	getSource() {// {{{
+		return this.dragSource
 	}// }}}
 }
 
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 561de8d..63c4ddc 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -585,6 +585,7 @@ export class N2TreeNode extends CustomHTMLElement {
 		e.dataTransfer.setDragImage(blankPixel, 0, 0)
 		e.dataTransfer.allowedEffects = 'none'
 		e.stopPropagation()
+		_app.dragIcon.setSource(this)
 		_app.dragIcon.start()
 	}// }}}
 	dragEnd(e) {// {{{
@@ -598,13 +599,12 @@ export class N2TreeNode extends CustomHTMLElement {
 	}// }}}
 	async dragDrop(e) {// {{{
 		e.stopPropagation()
-		const moveToNode = _app.dragIcon.getTarget()
-		await _app.moveNode(this.node, moveToNode.node.UUID)
-		return
+		const sourceNode = _app.dragIcon.getSource()
+		await _app.moveNode(sourceNode.node, this.node.UUID)
 
-		_app.sidebar.setNodeExpanded(moveToNode, true)
+		_app.sidebar.setNodeExpanded(this, true)
 		await this.render(true, true)
-		await moveToNode.render(true, true)
+		await sourceNode.render(true, true)
 
 		this.dragLeave(e)
 	}// }}}
@@ -615,8 +615,6 @@ export class N2TreeNode extends CustomHTMLElement {
 		e.stopPropagation()
 		_app.dragIcon.icon('ok')
 		this.classList.add('drag-target')
-
-		_app.dragIcon.setTarget(this)
 	}// }}}
 	dragLeave(e) {// {{{
 		e.stopPropagation()
@@ -624,8 +622,6 @@ export class N2TreeNode extends CustomHTMLElement {
 		e.dataTransfer.setDragImage(N2TreeNode.DRAG_ICON, -16, 8)
 		_app.dragIcon.icon('')
 		this.classList.remove('drag-target')
-
-		_app.dragIcon.setTarget(null)
 	}// }}}
 	async fetchChildren(force_fetch) {//{{{
 		if (this.children_populated && !force_fetch)

From 658733b1d879cd2eb137c2954aa655e438972d14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 14 Jun 2026 15:22:17 +0200
Subject: [PATCH 58/79] Fixed moving node to root

---
 sql/00007.sql | 119 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 sql/00007.sql

diff --git a/sql/00007.sql b/sql/00007.sql
new file mode 100644
index 0000000..0b79d9c
--- /dev/null
+++ b/sql/00007.sql
@@ -0,0 +1,119 @@
+CREATE OR REPLACE PROCEDURE public.add_nodes(IN p_user_id integer, IN p_client_uuid uuid, IN p_nodes jsonb)
+ LANGUAGE plpgsql
+AS $procedure$
+
+DECLARE
+	node_data         jsonb;
+	node_updated      timestamptz;
+	db_updated        timestamptz;
+	db_uuid           uuid;
+	db_client         uuid;
+	db_history_uuid   uuid;
+	node_uuid         uuid;
+	node_parent_uuid  uuid;
+	node_history_uuid uuid;
+
+BEGIN
+	FOR node_data IN SELECT * FROM jsonb_array_elements(p_nodes)
+	LOOP
+		node_uuid         = (node_data->>'UUID')::uuid;
+		node_history_uuid = (node_data->>'HistoryUUID')::uuid;
+		node_updated      = (node_data->>'Updated')::timestamptz;
+
+
+
+		-- Frontend is using an all-zero UUID to define the root node.
+		-- Database is using NULL.
+		IF node_data->>'ParentUUID' = '00000000-0000-0000-0000-000000000000' OR node_data->>'ParentUUID' = '' THEN
+			node_parent_uuid = NULL;
+		ELSE
+			node_parent_uuid = (node_data->>'ParentUUID')::uuid;
+		END IF;
+
+
+
+		-- Every jode has a new history UUID to keep the history entry uniquely identifiable
+		-- across clients. A history entry could potentially be sent again, but should be
+		-- safe to ignore as every change to a node should have a new history UUID.
+		--
+		-- The current node is also stored as history.
+		INSERT INTO node_history(
+			user_id, "uuid", "history_uuid", parents, created, updated,
+			"name", "content", "content_encrypted",
+			client
+		)
+		VALUES(
+			p_user_id, -- combined key
+			node_uuid, -- combined key
+			node_history_uuid, -- combined key
+			(jsonb_populate_record(null::json_ancestor_array, node_data))."Ancestors",
+			COALESCE((node_data->>'Created')::timestamptz, NOW()),
+			COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+			(node_data->>'Name')::varchar,
+			(node_data->>'Content')::text,
+			'', /* content_encrypted */
+			p_client_uuid
+		)
+		ON CONFLICT ("user_id", "uuid", "history_uuid")
+		DO NOTHING;
+
+
+
+		-- Retrieve the current modified timestamp for this node from the database.
+		SELECT
+			uuid, updated, client
+		INTO
+			db_uuid, db_updated, db_client
+		FROM public."node"
+		WHERE
+			user_id = p_user_id AND
+			uuid::uuid = node_uuid::uuid;
+
+
+
+		-- Is the node not in database? It needs to be created.
+		IF db_uuid IS NULL THEN
+			RAISE NOTICE '01 New node %', node_uuid;
+
+			INSERT INTO public."node" (
+				user_id, "uuid", parent_uuid, created, updated,
+				"name", "content", "content_encrypted",
+				client
+			)
+			VALUES(
+				p_user_id,
+				node_uuid,
+				node_parent_uuid,
+				COALESCE((node_data->>'Created')::timestamptz, NOW()),
+				COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+				(node_data->>'Name')::varchar,
+				(node_data->>'Content')::text,
+				'', /* content_encrypted */
+				p_client_uuid
+			);
+
+			CONTINUE;
+
+		END IF;
+
+
+
+		-- Update the public node as well if it was older than incoming node.
+		IF node_updated > db_updated THEN
+			UPDATE public."node"
+			SET
+				updated = (node_data->>'Updated')::timestamptz,
+				updated_seq = nextval('node_updates'),
+				parent_uuid = node_parent_uuid,
+				name = (node_data->>'Name')::varchar,
+				content = (node_data->>'Content')::text,
+				client = p_client_uuid
+			WHERE
+				user_id = p_user_id AND
+				uuid::uuid = node_uuid::uuid;
+		END IF;
+
+	END LOOP;
+END
+$procedure$
+;

From 960c9e262522befcdd0bcf876e2988f61a3566e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 14 Jun 2026 15:22:35 +0200
Subject: [PATCH 59/79] Bumped to v24

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index ef58317..550b381 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v23"
+const VERSION = "v24"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From edd3d11b098b7573d8922ecb94a3344964b220a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 15 Jun 2026 16:39:56 +0200
Subject: [PATCH 60/79] Fix three layers of safeguards to ensure node doesn't
 become it's own parent

---
 sql/00008.sql           | 123 ++++++++++++++++++++++++++++++++++++++++
 static/js/page_node.mjs |   3 +
 static/js/sidebar.mjs   |  24 +++++---
 3 files changed, 143 insertions(+), 7 deletions(-)
 create mode 100644 sql/00008.sql

diff --git a/sql/00008.sql b/sql/00008.sql
new file mode 100644
index 0000000..2701ba5
--- /dev/null
+++ b/sql/00008.sql
@@ -0,0 +1,123 @@
+CREATE OR REPLACE PROCEDURE public.add_nodes(IN p_user_id integer, IN p_client_uuid uuid, IN p_nodes jsonb)
+ LANGUAGE plpgsql
+AS $procedure$
+
+DECLARE
+	node_data         jsonb;
+	node_updated      timestamptz;
+	db_updated        timestamptz;
+	db_uuid           uuid;
+	db_client         uuid;
+	db_history_uuid   uuid;
+	node_uuid         uuid;
+	node_parent_uuid  uuid;
+	node_history_uuid uuid;
+
+BEGIN
+	FOR node_data IN SELECT * FROM jsonb_array_elements(p_nodes)
+	LOOP
+		node_uuid         = (node_data->>'UUID')::uuid;
+		node_history_uuid = (node_data->>'HistoryUUID')::uuid;
+		node_updated      = (node_data->>'Updated')::timestamptz;
+
+
+
+		-- Frontend is using an all-zero UUID to define the root node.
+		-- Database is using NULL.
+		IF node_data->>'ParentUUID' = '00000000-0000-0000-0000-000000000000' OR node_data->>'ParentUUID' = '' THEN
+			node_parent_uuid = NULL;
+		ELSE
+			node_parent_uuid = (node_data->>'ParentUUID')::uuid;
+		END IF;
+
+		-- Safeguard against being your own parent.
+		IF node_uuid = node_parent_uuid THEN
+			RAISE EXCEPTION 'Node UUID is same as node parent UUID.' USING ERRCODE = 'XPRNT';
+		END IF;
+
+
+		-- Every jode has a new history UUID to keep the history entry uniquely identifiable
+		-- across clients. A history entry could potentially be sent again, but should be
+		-- safe to ignore as every change to a node should have a new history UUID.
+		--
+		-- The current node is also stored as history.
+		INSERT INTO node_history(
+			user_id, "uuid", "history_uuid", parents, created, updated,
+			"name", "content", "content_encrypted",
+			client
+		)
+		VALUES(
+			p_user_id, -- combined key
+			node_uuid, -- combined key
+			node_history_uuid, -- combined key
+			(jsonb_populate_record(null::json_ancestor_array, node_data))."Ancestors",
+			COALESCE((node_data->>'Created')::timestamptz, NOW()),
+			COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+			(node_data->>'Name')::varchar,
+			(node_data->>'Content')::text,
+			'', /* content_encrypted */
+			p_client_uuid
+		)
+		ON CONFLICT ("user_id", "uuid", "history_uuid")
+		DO NOTHING;
+
+
+
+		-- Retrieve the current modified timestamp for this node from the database.
+		SELECT
+			uuid, updated, client
+		INTO
+			db_uuid, db_updated, db_client
+		FROM public."node"
+		WHERE
+			user_id = p_user_id AND
+			uuid::uuid = node_uuid::uuid;
+
+
+
+		-- Is the node not in database? It needs to be created.
+		IF db_uuid IS NULL THEN
+			RAISE NOTICE '01 New node %', node_uuid;
+
+			INSERT INTO public."node" (
+				user_id, "uuid", parent_uuid, created, updated,
+				"name", "content", "content_encrypted",
+				client
+			)
+			VALUES(
+				p_user_id,
+				node_uuid,
+				node_parent_uuid,
+				COALESCE((node_data->>'Created')::timestamptz, NOW()),
+				COALESCE((node_data->>'Updated')::timestamptz, NOW()),
+				(node_data->>'Name')::varchar,
+				(node_data->>'Content')::text,
+				'', /* content_encrypted */
+				p_client_uuid
+			);
+
+			CONTINUE;
+
+		END IF;
+
+
+
+		-- Update the public node as well if it was older than incoming node.
+		IF node_updated > db_updated THEN
+			UPDATE public."node"
+			SET
+				updated = (node_data->>'Updated')::timestamptz,
+				updated_seq = nextval('node_updates'),
+				parent_uuid = node_parent_uuid,
+				name = (node_data->>'Name')::varchar,
+				content = (node_data->>'Content')::text,
+				client = p_client_uuid
+			WHERE
+				user_id = p_user_id AND
+				uuid::uuid = node_uuid::uuid;
+		END IF;
+
+	END LOOP;
+END
+$procedure$
+;
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index f6aa681..339f903 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -424,6 +424,9 @@ export class Node {
 		return this._parent
 	}//}}}
 	moveToParent(newParentUUID) {// {{{
+		if (this.UUID === newParentUUID)
+			throw new Error("New parent UUID is the same as node UUID. Can't be your own parent.")
+
 		this.ParentUUID = newParentUUID
 		this.data.ParentUUID = newParentUUID
 		this._modified = true
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 63c4ddc..becf44d 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -598,15 +598,25 @@ export class N2TreeNode extends CustomHTMLElement {
 		e.preventDefault()
 	}// }}}
 	async dragDrop(e) {// {{{
-		e.stopPropagation()
-		const sourceNode = _app.dragIcon.getSource()
-		await _app.moveNode(sourceNode.node, this.node.UUID)
+		try {
+			e.stopPropagation()
+			const sourceNode = _app.dragIcon.getSource()
 
-		_app.sidebar.setNodeExpanded(this, true)
-		await this.render(true, true)
-		await sourceNode.render(true, true)
+			// Abort if user drops the node back on itself.
+			if (sourceNode.node.UUID === this.node.UUID)
+				return
 
-		this.dragLeave(e)
+			await _app.moveNode(sourceNode.node, this.node.UUID)
+
+			_app.sidebar.setNodeExpanded(this, true)
+			await this.render(true, true)
+			await sourceNode.render(true, true)
+		} catch (e) {
+			console.error(e)
+			alert(e)
+		} finally {
+			this.dragLeave(e)
+		}
 	}// }}}
 	dragEnter(e) {// {{{
 		const targetNode = e.target.closest('n2-treenode')

From d9adfd3a91e38af6b853b0f1a486275bd7597cde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 15 Jun 2026 17:39:01 +0200
Subject: [PATCH 61/79] Preparation for special nodes

---
 sql/00009.sql | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 sql/00009.sql

diff --git a/sql/00009.sql b/sql/00009.sql
new file mode 100644
index 0000000..50487f3
--- /dev/null
+++ b/sql/00009.sql
@@ -0,0 +1,35 @@
+-- Special node such as orphaned and deleted nodes.
+ALTER TABLE public.node ADD special bool DEFAULT false NOT NULL;
+
+
+-- Needs to be dropped in order to drop the index on UUID.
+ALTER TABLE public.node DROP CONSTRAINT node_node_fk;
+
+-- Index was missing user ID.
+DROP INDEX public.node_uuid_idx;
+CREATE UNIQUE INDEX node_user_uuid_idx ON public.node (user_id,"uuid");
+
+-- Restore the "foreign" key of parent UUID back to UUID.
+ALTER TABLE public.node ADD CONSTRAINT node_node_fk FOREIGN KEY (user_id,parent_uuid) REFERENCES public.node(user_id,"uuid") ON DELETE RESTRICT ON UPDATE RESTRICT;
+
+
+-- Auto-create the special nodes for each user.
+CREATE OR REPLACE FUNCTION create_user_nodes()
+RETURNS TRIGGER AS $$
+BEGIN
+	-- NEW holds the row being created.
+	-- No semi-colons omitted here, PL/pgSQL requires them.
+	INSERT INTO public.node (user_id, uuid, parent_uuid, special, name)
+	VALUES
+		(NEW.id, '00000000-0000-0000-0000-000000000000'::uuid, null, true, 'Start'),
+		(NEW.id, '00000000-0000-0000-0000-000000000001'::uuid, null, true, 'Orphaned nodes'),
+		(NEW.id, '00000000-0000-0000-0000-000000000002'::uuid, null, true, 'Deleted nodes');
+
+	RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER trg_after_user_insert
+AFTER INSERT ON public.user
+FOR EACH ROW
+EXECUTE FUNCTION create_user_nodes();

From da7999fb24a1113d6ab5dccff0422e5ef44d2f64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 15 Jun 2026 19:13:27 +0200
Subject: [PATCH 62/79] Work on special pages

---
 node.go                        |   2 +
 static/css/notes2.css          |   5 ++
 static/images/leaf.svg         |   6 +-
 static/images/leaf_deleted.svg |  68 ++++++++++++++
 static/js/node_store.mjs       | 158 +++++++++++++++------------------
 static/js/page_node.mjs        |  17 ++--
 static/js/sidebar.mjs          |  24 ++++-
 7 files changed, 185 insertions(+), 95 deletions(-)
 create mode 100644 static/images/leaf_deleted.svg

diff --git a/node.go b/node.go
index e3a61d5..a25c771 100644
--- a/node.go
+++ b/node.go
@@ -54,6 +54,7 @@ type Node struct {
 	DeletedSeq       sql.NullInt64 `db:"deleted_seq"`
 	Content          string
 	ContentEncrypted string `db:"content_encrypted" json:"-"`
+	Special          bool
 }
 
 func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint64, moreRowsExist bool, err error) { // {{{
@@ -135,6 +136,7 @@ func Nodes(userID, offset int, synced uint64, clientUUID string) (nodes []Node,
 		FROM
 			public.node
 		WHERE
+			NOT special AND
 			user_id = $1 AND
 			client != $5::uuid AND
 			(
diff --git a/static/css/notes2.css b/static/css/notes2.css
index dfe4156..f6af751 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -186,6 +186,11 @@ button {
 			img {
 				width: auto;
 				height: 18px;
+
+				&.deleted {
+					height: 24px;
+					transform: translateX(3px) translateY(3px);
+				}
 			}
 		}
 
diff --git a/static/images/leaf.svg b/static/images/leaf.svg
index 9d200c3..17f4fe2 100644
--- a/static/images/leaf.svg
+++ b/static/images/leaf.svg
@@ -24,12 +24,12 @@
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
      inkscape:zoom="31.614857"
-     inkscape:cx="5.0609117"
-     inkscape:cy="9.5524708"
+     inkscape:cx="5.0450964"
+     inkscape:cy="9.5682862"
      inkscape:window-width="2190"
      inkscape:window-height="1401"
      inkscape:window-x="1463"
-     inkscape:window-y="0"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1"
      showgrid="false" /><defs
diff --git a/static/images/leaf_deleted.svg b/static/images/leaf_deleted.svg
new file mode 100644
index 0000000..fb83cee
--- /dev/null
+++ b/static/images/leaf_deleted.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="24.000015"
+   height="23.999998"
+   viewBox="0 0 6.350004 6.3499995"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="leaf_deleted.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   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"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="22.627417"
+     inkscape:cx="3.292466"
+     inkscape:cy="15.62264"
+     inkscape:window-width="2190"
+     inkscape:window-height="1401"
+     inkscape:window-x="1463"
+     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(-107.95,-148.16667)"><title
+       id="title1">folder-open</title><title
+       id="title1-1">folder-open-outline</title><title
+       id="title1-5">notebook-outline</title><title
+       id="title1-8">text-box-outline</title><path
+       style="fill:#ffffff;stroke-width:0.264583"
+       d="m 108.3015,148.56838 h 3.95851 v 3.96688 h -3.95851 z"
+       id="path3"
+       sodipodi:nodetypes="ccccc" /><path
+       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"
+       id="path1"
+       style="fill:#ababab;fill-opacity:1;stroke-width:0.264583"
+       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" /><title
+       id="title1-9">delete-circle</title><g
+       id="g1"
+       transform="matrix(1.6249303,0,0,1.6249427,-68.307567,-93.38766)"><rect
+         style="fill:#ffffff;stroke:none;stroke-width:0.79375"
+         id="rect1"
+         width="1.5817325"
+         height="1.8579081"
+         x="110.28522"
+         y="150.33034" /><path
+         d="m 111.0761,149.95667 c 0.72034,0 1.30261,0.58227 1.30261,1.30262 0,0.72035 -0.58227,1.3026 -1.30261,1.3026 -0.72035,0 -1.30263,-0.58225 -1.30263,-1.3026 0,-0.72035 0.58227,-1.30262 1.30263,-1.30262 m 0.6513,0.65131 h -0.32566 l -0.13026,-0.13026 h -0.39078 l -0.13027,0.13026 h -0.32565 v 0.26052 h 1.30262 v -0.26052 m -1.0421,1.43288 h 0.78157 a 0.13026143,0.13026143 0 0 0 0.13026,-0.13026 v -0.91184 h -1.04209 v 0.91184 a 0.13026143,0.13026143 0 0 0 0.13026,0.13026 z"
+         id="path1-1"
+         style="fill:#aa0000;stroke-width:0.130261" /></g></g></svg>
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 324f004..488294f 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -1,6 +1,8 @@
 import { Node } from 'node'
 
 export const ROOT_NODE = '00000000-0000-0000-0000-000000000000'
+export const ORPHANED_NODE = '00000000-0000-0000-0000-000000000001'
+export const DELETED_NODE = '00000000-0000-0000-0000-000000000002'
 
 export class NodeStore {
 	constructor() {//{{{
@@ -76,8 +78,7 @@ export class NodeStore {
 				this.sendQueue = new SimpleNodeStore(this.db, 'send_queue')
 				this.nodesHistory = new NodeHistoryStore(this.db, 'nodes_history')
 				this.files = new SimpleNodeStore(this.db, 'files')
-				this.initializeRootNode()
-					.then(() => resolve())
+				resolve()
 			}
 
 			req.onerror = (event) => {
@@ -85,37 +86,6 @@ export class NodeStore {
 			}
 		})
 	}//}}}
-	initializeRootNode() {//{{{
-		return new Promise((resolve, reject) => {
-			// The root node is a magical node which displays as the first node if none is specified.
-			// If not already existing, it will be created.
-			const trx = this.db.transaction('nodes', 'readwrite')
-			const nodes = trx.objectStore('nodes')
-			const getRequest = nodes.get(ROOT_NODE)
-			getRequest.onsuccess = (event) => {
-				// Root node exists - nice!
-				if (event.target.result !== undefined) {
-					resolve(event.target.result)
-					return
-				}
-
-				const putRequest = nodes.put({
-					UUID: ROOT_NODE,
-					Name: 'Notes2',
-					Content: 'Hello, World!',
-					Updated: new Date().toISOString(),
-					ParentUUID: '',
-				})
-				putRequest.onsuccess = (event) => {
-					resolve(event.target.result)
-				}
-				putRequest.onerror = (event) => {
-					reject(event.target.error)
-				}
-			}
-			getRequest.onerror = (event) => reject(event.target.error)
-		})
-	}//}}}
 	purgeCache() {//{{{
 		this.nodes = {}
 	}//}}}
@@ -272,74 +242,92 @@ export class NodeStore {
 	}//}}}
 	get(uuid, suppliedNodestore) {//{{{
 		return new Promise((resolve, reject) => {
+			switch (uuid) {
+				case ROOT_NODE:
+					const rootNode = new Node({ UUID: ROOT_NODE, Name: 'Start', Special: true }, -1)
+					this.nodes[ROOT_NODE] = rootNode
+					resolve(rootNode)
+					return
+				case DELETED_NODE:
+					const deletedNode = new Node({ UUID: DELETED_NODE, Name: 'Deleted nodes', Special: true }, -1)
+					this.nodes[DELETED_NODE] = deletedNode
+					resolve(deletedNode)
+					return
+			}
+
 			// A nodestore can be provided in order to
 			// avoid creating new transactions.
 			let trx
 			let nodeStore = suppliedNodestore
 
 			if (nodeStore === undefined) {
-				trx = this.db.transaction('nodes', 'readonly')
-				nodeStore = trx.objectStore('nodes')
+			trx = this.db.transaction('nodes', 'readonly')
+			nodeStore = trx.objectStore('nodes')
+		}
+
+		const getRequest = nodeStore.get(uuid)
+
+		getRequest.onsuccess = (event) => {
+			// Node not found in IndexedDB.
+			if (event.target.result === undefined) {
+				reject("No such node")
+				return
 			}
+			const node = this.node(uuid, event.target.result, -1)
+			resolve(node)
+		}
+	})
+}//}}}
+getNodeAncestry(node, accumulated) {//{{{
+	return new Promise((resolve, reject) => {
+		if (accumulated === undefined)
+			accumulated = []
 
-			const getRequest = nodeStore.get(uuid)
+		const nodeParentIndex = this.db
+			.transaction('nodes', 'readonly')
+			.objectStore('nodes')
 
-			getRequest.onsuccess = (event) => {
-				// Node not found in IndexedDB.
-				if (event.target.result === undefined) {
-					reject("No such node")
-					return
-				}
-				const node = this.node(uuid, event.target.result, -1)
-				resolve(node)
-			}
-		})
-	}//}}}
-	getNodeAncestry(node, accumulated) {//{{{
-		return new Promise((resolve, reject) => {
-			if (accumulated === undefined)
-				accumulated = []
+		if (node.UUID === ROOT_NODE || node.ParentUUID === ROOT_NODE) {
+			resolve(accumulated)
+			return
+		}
 
-			const nodeParentIndex = this.db
-				.transaction('nodes', 'readonly')
-				.objectStore('nodes')
+		if (node.UUID === DELETED_NODE || node.ParentUUID === DELETED_NODE) {
+			resolve(accumulated)
+			return
+		}
 
-			if (node.UUID === ROOT_NODE || node.ParentUUID === ROOT_NODE) {
-				resolve(accumulated)
+		const getRequest = nodeParentIndex.get(node.ParentUUID)
+		getRequest.onsuccess = (event) => {
+			// Node not found in IndexedDB.
+			// Not expected to happen.
+			const parentNodeData = event.target.result
+			if (parentNodeData === undefined) {
+				reject("No such node")
 				return
 			}
 
-			const getRequest = nodeParentIndex.get(node.ParentUUID)
-			getRequest.onsuccess = (event) => {
-				// Node not found in IndexedDB.
-				// Not expected to happen.
-				const parentNodeData = event.target.result
-				if (parentNodeData === undefined) {
-					reject("No such node")
-					return
-				}
+			const parentNode = this.node(parentNodeData.UUID, parentNodeData, -1)
+			this.getNodeAncestry(parentNode, accumulated.concat(parentNode))
+				.then(accumulated => resolve(accumulated))
+		}
+	})
 
-				const parentNode = this.node(parentNodeData.UUID, parentNodeData, -1)
-				this.getNodeAncestry(parentNode, accumulated.concat(parentNode))
-					.then(accumulated => resolve(accumulated))
-			}
-		})
+}//}}}
+newTransaction(objectStore, mode) {// {{{
+	return this.db.transaction(objectStore, mode)
+}// }}}
 
-	}//}}}
-	newTransaction(objectStore, mode) {// {{{
-		return this.db.transaction(objectStore, mode)
-	}// }}}
-
-	nodeCount() {//{{{
-		return new Promise((resolve, reject) => {
-			const t = this.db.transaction('nodes', 'readwrite')
-			const nodeStore = t.objectStore('nodes')
-			const countReq = nodeStore.count()
-			countReq.onsuccess = event => {
-				resolve(event.target.result)
-			}
-		})
-	}//}}}
+nodeCount() {//{{{
+	return new Promise((resolve, reject) => {
+		const t = this.db.transaction('nodes', 'readwrite')
+		const nodeStore = t.objectStore('nodes')
+		const countReq = nodeStore.count()
+		countReq.onsuccess = event => {
+			resolve(event.target.result)
+		}
+	})
+}//}}}
 }
 
 class SimpleNodeStore {
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 339f903..403456b 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -46,7 +46,10 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 		_mbus.subscribe('NODE_UI_OPEN', event => {
 			this.node = event.detail.data
-			this.showMarkdown(true)
+
+
+			if (!this.node.isSpecial())
+				this.showMarkdown(true)
 			this.render()
 		})
 
@@ -437,6 +440,9 @@ export class Node {
 	isFirstSibling() {//{{{
 		return this._sibling_before === null
 	}//}}}
+	isSpecial() {// {{{
+		return this.data.Special
+	}// }}}
 	content() {//{{{
 		/* TODO - implement crypto
 		if (this.CryptoKeyID != 0 && !this._decrypted)
@@ -506,16 +512,15 @@ export class Node {
 }
 
 class N2Menu extends CustomHTMLElement {
-	static {
+	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 		<div id="node-menu" popover>Popover content</div>
 		`
-	}
-
-	constructor() {
+	}// }}}
+	constructor() {// {{{
 		super()
-	}
+	}// }}}
 }
 customElements.define('n2-menu', N2Menu)
 
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index becf44d..4162208 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -1,4 +1,5 @@
-import { ROOT_NODE } from 'node_store'
+import { ROOT_NODE, ORPHANED_NODE , DELETED_NODE} from 'node_store'
+import { Node } from 'node'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { Color, Solver } from './lib/css_colorize.mjs'
 
@@ -156,8 +157,15 @@ export class N2Sidebar extends CustomHTMLElement {
 		this.expandedNodes[ROOT_NODE] = true
 		const startnode = await nodeStore.get(ROOT_NODE)
 		const starttreenode = new N2TreeNode(this, startnode, null)
+
+		const deletednode = await nodeStore.get(DELETED_NODE)
+		const deletedtreenode = new SpecialNodeDeleted(this, deletednode, null)
+
 		this.treeNodeComponents[startnode.UUID] = starttreenode
+		this.treeNodeComponents[deletednode.UUID] = deletedtreenode
+
 		this.elTreenodes.appendChild(await starttreenode.render())
+		this.elTreenodes.appendChild(await deletedtreenode.render())
 
 		// Notify the application that the initial tree is rendered (with children)
 		// and that initial node selection can take place. App will check URL to
@@ -668,6 +676,12 @@ export class N2TreeNode extends CustomHTMLElement {
 		// The expand icon <img> is only changed to not get a flickering when re-rendering.
 		if (this.node.UUID === ROOT_NODE)
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`)
+
+		else if (this.node.UUID === '00000000-0000-0000-0000-000000000002') {
+			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf_deleted.svg`)
+			this.elExpand.classList.add('deleted')
+		}
+
 		else if (!this.node.hasChildren())
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
 		else if (this.sidebar.getNodeExpanded(this.node.UUID))
@@ -703,7 +717,15 @@ export class N2TreeNode extends CustomHTMLElement {
 	}// }}}
 }
 
+class SpecialNodeDeleted extends N2TreeNode {
+	constructor(sidebar, node, parent) {//{{{
+		super(sidebar, node, parent)
+		this.removeAttribute('draggable')
+	}//}}}
+}
+
 customElements.define('n2-sidebar', N2Sidebar)
 customElements.define('n2-treenode', N2TreeNode)
+customElements.define('n2-specialnodedeleted', SpecialNodeDeleted)
 
 // vim: foldmethod=marker

From 15bd742ef70f6756449dc645a1f53ae7201c7e58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 06:54:10 +0200
Subject: [PATCH 63/79] More work on special pages

---
 static/images/leaf_orphaned.svg |  61 ++++++++++++++
 static/js/node_store.mjs        | 138 ++++++++++++++++----------------
 static/js/sidebar.mjs           |  28 ++++++-
 3 files changed, 158 insertions(+), 69 deletions(-)
 create mode 100644 static/images/leaf_orphaned.svg

diff --git a/static/images/leaf_orphaned.svg b/static/images/leaf_orphaned.svg
new file mode 100644
index 0000000..8b1cc37
--- /dev/null
+++ b/static/images/leaf_orphaned.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="24.000015"
+   height="23.999998"
+   viewBox="0 0 6.350004 6.3499995"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="leaf_orphaned.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"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="22.627417"
+     inkscape:cx="3.2924659"
+     inkscape:cy="15.600543"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     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(-107.95,-148.16667)"><title
+       id="title1">folder-open</title><title
+       id="title1-1">folder-open-outline</title><title
+       id="title1-5">notebook-outline</title><title
+       id="title1-8">text-box-outline</title><path
+       style="fill:#ffffff;stroke-width:0.264583"
+       d="m 108.3015,148.56838 h 3.95851 v 3.96688 h -3.95851 z"
+       id="path3"
+       sodipodi:nodetypes="ccccc" /><path
+       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"
+       id="path1"
+       style="fill:#ababab;fill-opacity:1;stroke-width:0.264583"
+       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" /><title
+       id="title1-9">delete-circle</title><title
+       id="title1-53">ghost</title><path
+       d="m 112.39499,150.28334 a 1.9050024,1.9050024 0 0 0 -1.905,1.905 v 2.32833 l 0.635,-0.635 0.635,0.635 0.635,-0.635 0.635,0.635 0.635,-0.635 0.63501,0.635 v -2.32833 a 1.9050024,1.9050024 0 0 0 -1.90501,-1.905 m -0.635,1.27 a 0.42333387,0.42333387 0 0 1 0.42334,0.42333 0.42333387,0.42333387 0 0 1 -0.42334,0.42334 0.42333387,0.42333387 0 0 1 -0.42333,-0.42334 0.42333387,0.42333387 0 0 1 0.42333,-0.42333 m 1.27,0 a 0.42333387,0.42333387 0 0 1 0.42334,0.42333 0.42333387,0.42333387 0 0 1 -0.42334,0.42334 0.42333387,0.42333387 0 0 1 -0.42333,-0.42334 0.42333387,0.42333387 0 0 1 0.42333,-0.42333 z"
+       id="path1-5"
+       style="fill:#005190;fill-opacity:1;stroke-width:0.264583" /></g></svg>
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 488294f..6be8f82 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -15,6 +15,8 @@ export class NodeStore {
 		this.sendQueue = null
 		this.nodesHistory = null
 		this.files = null
+
+		this.initializeSpecialNodes()
 	}//}}}
 	initializeDB() {//{{{
 		return new Promise((resolve, reject) => {
@@ -86,9 +88,11 @@ export class NodeStore {
 			}
 		})
 	}//}}}
-	purgeCache() {//{{{
-		this.nodes = {}
-	}//}}}
+	initializeSpecialNodes() {// {{{
+		this.nodes[ROOT_NODE] = new Node({ UUID: ROOT_NODE, Name: 'Start', Special: true }, -1)
+		this.nodes[DELETED_NODE] = new Node({ UUID: DELETED_NODE, Name: 'Deleted nodes', Special: true }, -1)
+		this.nodes[ORPHANED_NODE] = new Node({ UUID: ORPHANED_NODE, Name: 'Orphaned nodes', Special: true }, -1)
+	}// }}}
 
 	node(uuid, dataIfUndefined, newLevel) {//{{{
 		let n = this.nodes[uuid]
@@ -244,14 +248,9 @@ export class NodeStore {
 		return new Promise((resolve, reject) => {
 			switch (uuid) {
 				case ROOT_NODE:
-					const rootNode = new Node({ UUID: ROOT_NODE, Name: 'Start', Special: true }, -1)
-					this.nodes[ROOT_NODE] = rootNode
-					resolve(rootNode)
-					return
 				case DELETED_NODE:
-					const deletedNode = new Node({ UUID: DELETED_NODE, Name: 'Deleted nodes', Special: true }, -1)
-					this.nodes[DELETED_NODE] = deletedNode
-					resolve(deletedNode)
+				case ORPHANED_NODE:
+					resolve(this.nodes[uuid])
 					return
 			}
 
@@ -261,73 +260,78 @@ export class NodeStore {
 			let nodeStore = suppliedNodestore
 
 			if (nodeStore === undefined) {
-			trx = this.db.transaction('nodes', 'readonly')
-			nodeStore = trx.objectStore('nodes')
-		}
-
-		const getRequest = nodeStore.get(uuid)
-
-		getRequest.onsuccess = (event) => {
-			// Node not found in IndexedDB.
-			if (event.target.result === undefined) {
-				reject("No such node")
-				return
+				trx = this.db.transaction('nodes', 'readonly')
+				nodeStore = trx.objectStore('nodes')
 			}
-			const node = this.node(uuid, event.target.result, -1)
-			resolve(node)
-		}
-	})
-}//}}}
-getNodeAncestry(node, accumulated) {//{{{
-	return new Promise((resolve, reject) => {
-		if (accumulated === undefined)
-			accumulated = []
 
-		const nodeParentIndex = this.db
-			.transaction('nodes', 'readonly')
-			.objectStore('nodes')
+			const getRequest = nodeStore.get(uuid)
 
-		if (node.UUID === ROOT_NODE || node.ParentUUID === ROOT_NODE) {
-			resolve(accumulated)
-			return
-		}
+			getRequest.onsuccess = (event) => {
+				// Node not found in IndexedDB.
+				if (event.target.result === undefined) {
+					reject("No such node")
+					return
+				}
+				const node = this.node(uuid, event.target.result, -1)
+				resolve(node)
+			}
+		})
+	}//}}}
+	getNodeAncestry(node, accumulated) {//{{{
+		return new Promise((resolve, reject) => {
+			if (accumulated === undefined)
+				accumulated = []
 
-		if (node.UUID === DELETED_NODE || node.ParentUUID === DELETED_NODE) {
-			resolve(accumulated)
-			return
-		}
+			const nodeParentIndex = this.db
+				.transaction('nodes', 'readonly')
+				.objectStore('nodes')
 
-		const getRequest = nodeParentIndex.get(node.ParentUUID)
-		getRequest.onsuccess = (event) => {
-			// Node not found in IndexedDB.
-			// Not expected to happen.
-			const parentNodeData = event.target.result
-			if (parentNodeData === undefined) {
-				reject("No such node")
+			if (node.UUID === ROOT_NODE || node.ParentUUID === ROOT_NODE) {
+				resolve(accumulated)
 				return
 			}
 
-			const parentNode = this.node(parentNodeData.UUID, parentNodeData, -1)
-			this.getNodeAncestry(parentNode, accumulated.concat(parentNode))
-				.then(accumulated => resolve(accumulated))
-		}
-	})
+			if (node.UUID === DELETED_NODE || node.ParentUUID === DELETED_NODE) {
+				resolve(accumulated)
+				return
+			}
 
-}//}}}
-newTransaction(objectStore, mode) {// {{{
-	return this.db.transaction(objectStore, mode)
-}// }}}
+			if (node.UUID === ORPHANED_NODE || node.ParentUUID === ORPHANED_NODE) {
+				resolve(accumulated)
+				return
+			}
 
-nodeCount() {//{{{
-	return new Promise((resolve, reject) => {
-		const t = this.db.transaction('nodes', 'readwrite')
-		const nodeStore = t.objectStore('nodes')
-		const countReq = nodeStore.count()
-		countReq.onsuccess = event => {
-			resolve(event.target.result)
-		}
-	})
-}//}}}
+			const getRequest = nodeParentIndex.get(node.ParentUUID)
+			getRequest.onsuccess = (event) => {
+				// Node not found in IndexedDB.
+				// Not expected to happen.
+				const parentNodeData = event.target.result
+				if (parentNodeData === undefined) {
+					reject("No such node")
+					return
+				}
+
+				const parentNode = this.node(parentNodeData.UUID, parentNodeData, -1)
+				this.getNodeAncestry(parentNode, accumulated.concat(parentNode))
+					.then(accumulated => resolve(accumulated))
+			}
+		})
+
+	}//}}}
+	newTransaction(objectStore, mode) {// {{{
+		return this.db.transaction(objectStore, mode)
+	}// }}}
+
+	nodeCount() {//{{{
+		return new Promise((resolve, reject) => {
+			const t = this.db.transaction('nodes', 'readwrite')
+			const nodeStore = t.objectStore('nodes')
+			const countReq = nodeStore.count()
+			countReq.onsuccess = event => {
+				resolve(event.target.result)
+			}
+		})
+	}//}}}
 }
 
 class SimpleNodeStore {
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 4162208..06b2943 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -1,4 +1,4 @@
-import { ROOT_NODE, ORPHANED_NODE , DELETED_NODE} from 'node_store'
+import { ROOT_NODE, ORPHANED_NODE, DELETED_NODE } from 'node_store'
 import { Node } from 'node'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { Color, Solver } from './lib/css_colorize.mjs'
@@ -161,11 +161,22 @@ export class N2Sidebar extends CustomHTMLElement {
 		const deletednode = await nodeStore.get(DELETED_NODE)
 		const deletedtreenode = new SpecialNodeDeleted(this, deletednode, null)
 
+		const orphanednode = await nodeStore.get(ORPHANED_NODE)
+		const orphanedtreenode = new SpecialNodeOrphaned(this, orphanednode, null)
+
+		startnode._sibling_after = deletednode
+		deletednode._sibling_before = startnode
+
+		deletednode._sibling_after = orphanednode
+		orphanednode._sibling_before = deletednode
+
 		this.treeNodeComponents[startnode.UUID] = starttreenode
 		this.treeNodeComponents[deletednode.UUID] = deletedtreenode
+		this.treeNodeComponents[orphanednode.UUID] = orphanedtreenode
 
 		this.elTreenodes.appendChild(await starttreenode.render())
 		this.elTreenodes.appendChild(await deletedtreenode.render())
+		this.elTreenodes.appendChild(await orphanedtreenode.render())
 
 		// Notify the application that the initial tree is rendered (with children)
 		// and that initial node selection can take place. App will check URL to
@@ -677,11 +688,16 @@ export class N2TreeNode extends CustomHTMLElement {
 		if (this.node.UUID === ROOT_NODE)
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`)
 
-		else if (this.node.UUID === '00000000-0000-0000-0000-000000000002') {
+		else if (this.node.UUID === DELETED_NODE) {
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf_deleted.svg`)
 			this.elExpand.classList.add('deleted')
 		}
 
+		else if (this.node.UUID === ORPHANED_NODE) {
+			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf_orphaned.svg`)
+			this.elExpand.classList.add('deleted')
+		}
+
 		else if (!this.node.hasChildren())
 			this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
 		else if (this.sidebar.getNodeExpanded(this.node.UUID))
@@ -724,8 +740,16 @@ class SpecialNodeDeleted extends N2TreeNode {
 	}//}}}
 }
 
+class SpecialNodeOrphaned extends N2TreeNode {
+	constructor(sidebar, node, parent) {//{{{
+		super(sidebar, node, parent)
+		this.removeAttribute('draggable')
+	}//}}}
+}
+
 customElements.define('n2-sidebar', N2Sidebar)
 customElements.define('n2-treenode', N2TreeNode)
 customElements.define('n2-specialnodedeleted', SpecialNodeDeleted)
+customElements.define('n2-specialnodeorphaned', SpecialNodeOrphaned)
 
 // vim: foldmethod=marker

From e71516fd76ff9c947e4f7a99e9bcb7a76eadb885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 08:27:01 +0200
Subject: [PATCH 64/79] Working node menu

---
 static/css/notes2.css     |   5 +-
 static/js/page_node.mjs   | 122 +++++++++++++++++++++++++++++---------
 views/pages/notes2.gotmpl |   2 -
 3 files changed, 98 insertions(+), 31 deletions(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index f6af751..43dedb5 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -9,7 +9,10 @@
 
 	--line-color: #ccc;
 	--tree-expander: 0px;
-	--functions-width: 216px;
+	--functions-width: 150px;
+
+	--menu-color: #fff;
+	--menu-item-hover-color: #f4f4f4;
 }
 
 html {
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 403456b..2106ada 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -2,14 +2,70 @@ import { ROOT_NODE, uuidv7 } from 'node_store'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { MarkedPosition } from './marked_position.mjs'
 
+class N2NodeMenu extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+		<style>
+			n2-nodemenu {
+				margin: 8px 0;
+				padding: 0;
+				position-anchor: --node-menu;
+				box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+
+				top: anchor(bottom);
+				right: anchor(right);
+				left: auto;
+
+				white-space: nowrap;
+
+				.menu-item {
+					padding: 8px 16px 8px 8px;
+					border-bottom: 1px solid var(--line-color);
+
+					display: grid;
+					grid-template-columns: min-content 1fr;
+					grid-gap: 16px;
+					align-items: center;
+
+					&:last-child {
+						border-bottom: unset;
+					}
+
+					&:hover {
+						background-color: var(--menu-item-hover-color);
+					}
+				}
+			}
+		</style>
+		<div class="node-menu">
+			<div class="menu-item" data-el="format-tables">
+				<img class="colorize" src="/images/${_VERSION}/icon_table.svg">
+				<div>Format tables</div>
+			</div>
+
+			<div class="menu-item" data-el="history">
+				<img class="colorize" src="/images/${_VERSION}/icon_history.svg">
+				<div>History</div>
+			</div>
+
+		</div>
+		`
+	}// }}}
+	constructor() {// {{{
+		super()
+	}// }}}
+}
+customElements.define('n2-nodemenu', N2NodeMenu)
+
 export class N2PageNodeUI extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 			<style>
-				.el-functions {
+				n2-nodeui > .el-functions {
 					display: grid;
-					grid-template-columns: 1fr repeat(5, min-content);
+					grid-template-columns: 1fr repeat(3, min-content);
 					grid-gap: 8px;
 					align-items: center;
 					justify-items: end;
@@ -18,6 +74,14 @@ export class N2PageNodeUI extends CustomHTMLElement {
 					img {
 						height: 24px;
 					}
+
+					.el-menu {
+						anchor-name: --node-menu;
+						border: 0;
+						padding: 0;
+						background-color: unset;
+					}
+
 				}
 			</style>
 			<div data-el="name"></div>
@@ -28,11 +92,13 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<div data-el="functions">
 				<img data-el="icon-save" src="/images/${_VERSION}/icon_save_disabled.svg">
 				<img data-el="icon-markdown">
-				<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
-				<img data-el="icon-history"      class="colorize" src="/images/${_VERSION}/icon_history.svg">
 				<img data-el="icon-new-document" class="colorize" src="/images/${_VERSION}/icon_new_document.svg">
-				<img data-el="icon-menu"         class="colorize" src="/images/${_VERSION}/icon_menu.svg" popovertarget="node-menu">
+				<button data-el="menu" popovertarget="node-functions-menu">
+					<img data-el="icon-menu" class="colorize" src="/images/${_VERSION}/icon_menu.svg">
+				</button>
+				<n2-nodemenu data-el="node-menu" id="node-functions-menu" popover></n2-nodemenu>
 			</div>
+
 		`
 	}// }}}
 
@@ -41,7 +107,6 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		this.node = null
 
 		this.style.display = 'contents'
-		this.classList.add('show-markdown') // TODO Should probably be moved to settings.
 		this.marked = new MarkedPosition()
 
 		_mbus.subscribe('NODE_UI_OPEN', event => {
@@ -70,11 +135,27 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		_mbus.subscribe('MARKDOWN_EDIT', ({ detail }) => this.editMarkdown(detail.data))
 		_mbus.subscribe('MARKDOWN_CHANGE_CHECKBOX', ({ detail }) => this.checkboxUpdated(detail.data))
 
+		// Binding the node rename handler.
 		this.elName.addEventListener('click', async () => this.renameNode())
+
+		// Bind handlers for content keyboard input and paste.
 		this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
 		this.elNodeContent.addEventListener('paste', async (event) => this.pasteHandler(event))
+
+		// Bind node icon handlers.
+		this.elIconSave.addEventListener('click', () => this.saveNode())
 		this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown()))
-		this.elIconTableFormat.addEventListener('click', event => {
+		this.elIconNewDocument.addEventListener('click', event => {
+			if (event.shiftKey)
+				_app.createNode(this.node.ParentUUID)
+			else
+				_app.createNode()
+		})
+
+		// Bind node menu items to handlers.
+		this.elNodeMenu.elFormatTables.addEventListener('click', event => {
+			this.elNodeMenu.hidePopover()
+
 			if (!event.shiftKey)
 				this.elNodeContent.value = this.formatAllTables(this.elNodeContent.value)
 			else {
@@ -88,15 +169,12 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 			this.node.setContent(this.elNodeContent.value)
 		})
-		this.elIconHistory.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'history' }))
-		this.elIconSave.addEventListener('click', () => this.saveNode())
-		this.elIconNewDocument.addEventListener('click', event => {
-			if (event.shiftKey)
-				_app.createNode(this.node.ParentUUID)
-			else
-				_app.createNode()
+		this.elNodeMenu.elHistory.addEventListener('click', () => {
+			_mbus.dispatch('SHOW_PAGE', { page: 'history' })
 		})
 
+		// Default is to always show markdown.
+		this.classList.add('show-markdown') // TODO Should probably be moved to settings.
 		this.showMarkdown(true)
 	}// }}}
 	renderName() {// {{{
@@ -309,7 +387,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 		// Node is modified with the new value. User has to save manually, otherwise other changes could be saved
 		// when a save wasn't expected.
-		const newValue =`[${checkbox.checked ? 'x' : ' '}] `
+		const newValue = `[${checkbox.checked ? 'x' : ' '}] `
 		const modifiedContent = this.node.content().slice(0, pos.start) + newValue + this.node.content().slice(pos.end)
 		this.node.setContent(modifiedContent)
 
@@ -506,22 +584,10 @@ export class Node {
 		console.log('waiting')
 		await Promise.all([history, sendQueue, nodeStoreAdding])
 		console.log('waiting done')
-		
+
 		return
 	}//}}}
 }
 
-class N2Menu extends CustomHTMLElement {
-	static {// {{{
-		this.tmpl = document.createElement('template')
-		this.tmpl.innerHTML = `
-		<div id="node-menu" popover>Popover content</div>
-		`
-	}// }}}
-	constructor() {// {{{
-		super()
-	}// }}}
-}
-customElements.define('n2-menu', N2Menu)
 
 // vim: foldmethod=marker
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index a726451..381d672 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -6,8 +6,6 @@
 <div id="notes2" class="page-history">
 	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
 	<div id="tree" tabindex=0></div>
-	<n2-menu></n2-menu>
-	<div id="node-menu" popover>Popover content</div>
 
 	<div id="main-page">
 		<!-- Storage stats -->

From dbd3872f0fd90c9f672fcc64d572a56f080c8316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 08:35:58 +0200
Subject: [PATCH 65/79] Fixed flashing history page

---
 views/pages/notes2.gotmpl | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 381d672..d54c71d 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -1,9 +1,12 @@
 {{ define "page" }}
+<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
+<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/page_history.css">
+
 
 <!-- Drag and drop elements -->
 
 <!-- page-node -->
-<div id="notes2" class="page-history">
+<div id="notes2" class="page-node">
 	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
 	<div id="tree" tabindex=0></div>
 
@@ -37,9 +40,6 @@
 	<n2-syncprogress></n2-syncprogress>
 </div>
 
-<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
-<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/page_history.css">
-
 <script type="module">
 	import {NodeStore} from '/js/{{ .VERSION }}/node_store.mjs'
 

From d1c3b9e9634d01f21a5bfd7b44c2e90fc3578028 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 08:48:26 +0200
Subject: [PATCH 66/79] Fixed better font settings

---
 static/css/notes2.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/static/css/notes2.css b/static/css/notes2.css
index 43dedb5..2d9f074 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -13,6 +13,8 @@
 
 	--menu-color: #fff;
 	--menu-item-hover-color: #f4f4f4;
+
+	--font-monospace: "Liberation Mono", monospace;
 }
 
 html {
@@ -23,6 +25,10 @@ html {
 	filter: var(--colorize);
 }
 
+textarea {
+	font-family: var(--font-monospace);
+}
+
 button {
 	font-size: 1em;
 	padding: 4px 8px;
@@ -441,7 +447,6 @@ n2-nodeui {
 		grid-area: content;
 		justify-self: center;
 		word-wrap: break-word;
-		font-family: monospace;
 		font-size: 1em;
 		color: #333;
 
@@ -465,6 +470,10 @@ n2-nodeui {
 		grid-area: content;
 		display: none;
 
+		font-family: var(--font-monospace);
+		font-size: 1em;
+		font-weight: 400;
+
 		border-top: 1px solid #e0e0e0;
 		margin-top: 8px;
 		margin-bottom: 32px;

From 86fcbbb68fb8a282850e8651ddf2bb1a266e6601 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 08:53:15 +0200
Subject: [PATCH 67/79] Fixed selected node highlighting

---
 static/js/sidebar.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 06b2943..129b9d1 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -481,7 +481,9 @@ export class N2TreeNode extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-sidebar:focus-within {
-					& > .el-name {
+					n2-specialnodedeleted > .el-name,
+					n2-specialnodeorphaned > .el-name,
+					n2-treenode > .el-name {
 						&.selected {
 							span {
 								position:relative;

From 58ece3f823fb008b7a24fa627d9afef34fd34f67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 08:53:43 +0200
Subject: [PATCH 68/79] Bumped to v25

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 550b381..2917566 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v24"
+const VERSION = "v25"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From ecf68132a17cd87a80e0851eaabb554acd67c8bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 08:54:04 +0200
Subject: [PATCH 69/79] Bumped to v26

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index 2917566..d7b71af 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v25"
+const VERSION = "v26"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From b0a95c938290032e5e7c357681c271b8cf04bafb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 09:37:10 +0200
Subject: [PATCH 70/79] Copy code

---
 static/css/markdown.css       | 13 +++++++++++++
 static/css/notes2.css         |  3 +++
 static/js/marked_position.mjs | 29 ++++++++++++++++++++++++++---
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/static/css/markdown.css b/static/css/markdown.css
index 1ecbc94..832d4a2 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -102,6 +102,11 @@
 		border: 1px solid #ccc;
 		padding: 2px 4px;
 		border-radius: 4px;
+
+		&.copy {
+			border: var(--markdown-copy-border);
+			background-color: var(--markdown-copy-background);
+		}
 	}
 
 	pre {
@@ -111,6 +116,14 @@
 		border-radius: 4px;
 		white-space: pre-wrap;
 
+		&.copy {
+			border: var(--markdown-copy-border);
+			background-color: var(--markdown-copy-background);
+			code {
+				background-color: inherit !important;
+			}
+		}
+
 		code {
 			border: unset;
 			padding: unset;
diff --git a/static/css/notes2.css b/static/css/notes2.css
index 2d9f074..a48a319 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -15,6 +15,9 @@
 	--menu-item-hover-color: #f4f4f4;
 
 	--font-monospace: "Liberation Mono", monospace;
+
+	--markdown-copy-border: 1px solid #0a0;
+	--markdown-copy-background: #e3f4d7;
 }
 
 html {
diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 5f77251..63f76f7 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -94,6 +94,7 @@ export class MarkedPosition {
 	constructor() {// {{{
 		window.marked_setpos = (event) => this.setpos(event)
 		window.marked_changecheckbox = (event) => this.changecheckbox(event)
+		window.marked_copy_to_clipboard = (event) => this.copy_to_clipboard(event)
 		this.render()
 	}// }}}
 	setpos(event) {// {{{
@@ -119,6 +120,28 @@ export class MarkedPosition {
 			}
 		})
 	}// }}}
+	async copy_to_clipboard(event) {// {{{
+		if (!event.shiftKey)
+			return
+
+		try {
+			// Stop text selections on the page to the mouse pointer.
+			// Old selections are remove as well to give a cleaner view
+			// of the copied text/highlighting.
+			event.preventDefault()
+			event.stopPropagation()
+			window.getSelection().removeAllRanges()
+
+			const text = event.target.innerText
+			await navigator.clipboard.writeText(text)
+			event.target.classList.add('copy')
+			setTimeout(()=>event.target.classList.remove('copy'), 250)
+		} catch (err) {
+			console.error('Failed to copy: ', err)
+			alert('Failed to copy: ', err)
+		}
+	}// }}}
+
 	render() {// {{{
 		const markedObject = this
 		this.marked = new Marked()
@@ -165,12 +188,12 @@ export class MarkedPosition {
 					const code = token.text.replace(other.endingNewline, '') + '\n'
 
 					if (!langString) {
-						return `<pre ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code>`
+						return `<pre ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code>`
 							+ (token.escaped ? code : escapeHtmlEntities(code, true))
 							+ '</code></pre>\n'
 					}
 
-					return `<pre ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code class="language-`
+					return `<pre ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code class="language-`
 						+ escapeHtmlEntities(langString)
 						+ '">'
 						+ (token.escaped ? code : escapeHtmlEntities(code, true))
@@ -260,7 +283,7 @@ export class MarkedPosition {
 				},
 
 				codespan(token) {
-					return `<code ondblclick="marked_setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${escapeHtmlEntities(token.text, true)}</code>`
+					return `<code ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${escapeHtmlEntities(token.text, true)}</code>`
 				},
 
 				br(token) {

From 7c461279382b57c84aeddda7857dd9de3c1b653f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 09:37:20 +0200
Subject: [PATCH 71/79] Bumped to v27

---
 main.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.go b/main.go
index d7b71af..e9bd88d 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v26"
+const VERSION = "v27"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

From c36b4ace13ec589631b1072993d64ad3095ad32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 09:43:31 +0200
Subject: [PATCH 72/79] Nicer code copy, bumped to v28

---
 main.go                       |  2 +-
 static/js/marked_position.mjs | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/main.go b/main.go
index e9bd88d..5d8bf68 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v27"
+const VERSION = "v28"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 
diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 63f76f7..8c81eb4 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -94,7 +94,7 @@ export class MarkedPosition {
 	constructor() {// {{{
 		window.marked_setpos = (event) => this.setpos(event)
 		window.marked_changecheckbox = (event) => this.changecheckbox(event)
-		window.marked_copy_to_clipboard = (event) => this.copy_to_clipboard(event)
+		window.marked_copy_to_clipboard = (event, tagname) => this.copy_to_clipboard(event, tagname)
 		this.render()
 	}// }}}
 	setpos(event) {// {{{
@@ -120,7 +120,7 @@ export class MarkedPosition {
 			}
 		})
 	}// }}}
-	async copy_to_clipboard(event) {// {{{
+	async copy_to_clipboard(event, tagname) {// {{{
 		if (!event.shiftKey)
 			return
 
@@ -134,8 +134,11 @@ export class MarkedPosition {
 
 			const text = event.target.innerText
 			await navigator.clipboard.writeText(text)
-			event.target.classList.add('copy')
-			setTimeout(()=>event.target.classList.remove('copy'), 250)
+
+			const tagClasslist = event.target.closest(tagname).classList
+			tagClasslist.add('copy')
+			setTimeout(()=>tagClasslist.remove('copy'), 250)
+
 		} catch (err) {
 			console.error('Failed to copy: ', err)
 			alert('Failed to copy: ', err)
@@ -143,7 +146,6 @@ export class MarkedPosition {
 	}// }}}
 
 	render() {// {{{
-		const markedObject = this
 		this.marked = new Marked()
 		this.marked.use(markedTokenPosition())
 		this.marked.use({
@@ -188,12 +190,12 @@ export class MarkedPosition {
 					const code = token.text.replace(other.endingNewline, '') + '\n'
 
 					if (!langString) {
-						return `<pre ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code>`
+						return `<pre ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event, 'pre')" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code>`
 							+ (token.escaped ? code : escapeHtmlEntities(code, true))
 							+ '</code></pre>\n'
 					}
 
-					return `<pre ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code class="language-`
+					return `<pre ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event, 'pre')" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}"><code class="language-`
 						+ escapeHtmlEntities(langString)
 						+ '">'
 						+ (token.escaped ? code : escapeHtmlEntities(code, true))
@@ -283,7 +285,7 @@ export class MarkedPosition {
 				},
 
 				codespan(token) {
-					return `<code ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${escapeHtmlEntities(token.text, true)}</code>`
+					return `<code ondblclick="marked_setpos(event)" onmousedown="marked_copy_to_clipboard(event, 'code')" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${escapeHtmlEntities(token.text, true)}</code>`
 				},
 
 				br(token) {

From d6d8b64bb93fafb89c27850c22dc5fa26d1576a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 09:59:01 +0200
Subject: [PATCH 73/79] Fixed recursive open of nodes, bumped to v29

---
 main.go               |  2 +-
 static/js/sidebar.mjs | 28 ++++++++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/main.go b/main.go
index 5d8bf68..213d1ed 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v28"
+const VERSION = "v29"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 129b9d1..9c2b8c8 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -197,9 +197,8 @@ export class N2Sidebar extends CustomHTMLElement {
 			this.expandedNodes[UUID] = false
 		return this.expandedNodes[UUID]
 	}//}}}
-	setNodeExpanded(node, value) {//{{{
+	async setNodeExpanded(node, value) {//{{{
 		let expanded = this.expandedNodes[node.UUID]
-
 		if (expanded === undefined) {
 			this.expandedNodes[node.UUID] = false
 			expanded = false
@@ -446,14 +445,20 @@ export class N2Sidebar extends CustomHTMLElement {
 		return currNode
 	}//}}}
 	async recursiveExpand(node, state) {//{{{
+		if (!state) {
+			await this.setNodeExpanded(node, false)
+			return
+		}
+
 		if (state)
 			await this.setNodeExpanded(node, true)
 
+		// An expanded node needs to have its children fetched.
+		if (!node.hasFetchedChildren())
+			await node.fetchChildren()
+
 		for (const child of node.Children)
 			await this.recursiveExpand(child, state)
-
-		if (!state)
-			await this.setNodeExpanded(node, false)
 	}//}}}
 	async makeVisible(node, providedAncestors, dontExpand) {// {{{
 		const treenode = this.treeNodeComponents[node.UUID]
@@ -577,7 +582,7 @@ export class N2TreeNode extends CustomHTMLElement {
 		this.rendered = false
 		this.dragNode = null
 
-		this.elExpandToggle.addEventListener('click', () => this.sidebar.setNodeExpanded(this.node, !this.sidebar.getNodeExpanded(this.node.UUID)))
+		this.elExpandToggle.addEventListener('click', event => this.expandNode(event))
 		this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
 
 		_mbus.subscribe(`NODE_EXPAND_${node.UUID}`, _state => {
@@ -592,6 +597,7 @@ export class N2TreeNode extends CustomHTMLElement {
 		this.elName.addEventListener('dragenter', event => this.dragEnter(event))
 		this.elName.addEventListener('dragleave', event => this.dragLeave(event))
 	}// }}}
+
 	dragStart(e) {// {{{
 		if (this.node.isModified()) {
 			alert('Save note before moving it.')
@@ -654,6 +660,16 @@ export class N2TreeNode extends CustomHTMLElement {
 		_app.dragIcon.icon('')
 		this.classList.remove('drag-target')
 	}// }}}
+
+	async expandNode(event) {// {{{
+		const expanded = _app.sidebar.getNodeExpanded(this.node.UUID)
+
+		if (event.shiftKey) {
+			_app.sidebar.recursiveExpand(this.node, !expanded)
+		} else {
+			_app.sidebar.setNodeExpanded(this.node, !expanded)
+		}
+	}// }}}
 	async fetchChildren(force_fetch) {//{{{
 		if (this.children_populated && !force_fetch)
 			return

From 0fe5cd78b3ccd25f1a1822743947398a1e496afa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 10:08:36 +0200
Subject: [PATCH 74/79] Removed vi keybindings to enable search at a later
 date.

---
 static/js/sidebar.mjs | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 9c2b8c8..227ff82 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -258,38 +258,31 @@ export class N2Sidebar extends CustomHTMLElement {
 				}
 				break
 
-			case 'g':
 			case 'Home':
 				this.navigateTop()
 				break
 
-			case 'G':
 			case 'End':
 				this.navigateBottom()
 				break
 
-			case 'j':
 			case 'ArrowDown':
 				await this.navigateDown(this.selectedNode)
 				break
 
-			case 'k':
 			case 'ArrowUp':
 				await this.navigateUp(this.selectedNode)
 				break
 
-			case 'h':
 			case 'ArrowLeft':
 				await this.navigateLeft(this.selectedNode)
 				break
 
-			case 'l':
 			case 'ArrowRight':
 				await this.navigateRight(this.selectedNode)
 				break
 
 			default:
-				// nonsole.log(event.key)
 				handled = false
 		}
 

From ea3bdaca03f70741d046af6a04a50d7fba92dc51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 10:10:16 +0200
Subject: [PATCH 75/79] Select leaf nodes on icon

---
 static/js/sidebar.mjs | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 227ff82..63c2b75 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -575,7 +575,12 @@ export class N2TreeNode extends CustomHTMLElement {
 		this.rendered = false
 		this.dragNode = null
 
-		this.elExpandToggle.addEventListener('click', event => this.expandNode(event))
+		this.elExpandToggle.addEventListener('click', event => {
+			if (this.node.hasChildren())
+				this.expandNode(event)
+			else
+				_mbus.dispatch('TREE_NODE_SELECTED', this.node)
+		})
 		this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
 
 		_mbus.subscribe(`NODE_EXPAND_${node.UUID}`, _state => {

From f5cbfb0b220039e1ab1489781cff5177fa37de76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 10:12:48 +0200
Subject: [PATCH 76/79] Fixed regression of recursive expansion toggle

---
 static/js/sidebar.mjs | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 63c2b75..71a9371 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -438,11 +438,6 @@ export class N2Sidebar extends CustomHTMLElement {
 		return currNode
 	}//}}}
 	async recursiveExpand(node, state) {//{{{
-		if (!state) {
-			await this.setNodeExpanded(node, false)
-			return
-		}
-
 		if (state)
 			await this.setNodeExpanded(node, true)
 
@@ -452,6 +447,9 @@ export class N2Sidebar extends CustomHTMLElement {
 
 		for (const child of node.Children)
 			await this.recursiveExpand(child, state)
+
+		if (!state)
+			await this.setNodeExpanded(node, false)
 	}//}}}
 	async makeVisible(node, providedAncestors, dontExpand) {// {{{
 		const treenode = this.treeNodeComponents[node.UUID]

From 1a712fb7a914eb578d699fb892b8ad62e0e1c54c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 16 Jun 2026 10:20:15 +0200
Subject: [PATCH 77/79] Fix home/end to account for special pages

---
 static/js/sidebar.mjs | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 71a9371..07e8678 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -248,8 +248,6 @@ export class N2Sidebar extends CustomHTMLElement {
 			// Holding shift down does it recursively.
 			case Space:
 			case 'Enter':
-				if (n.UUID === ROOT_NODE)
-					return
 				const expanded = this.getNodeExpanded(n.UUID)
 				if (event.shiftKey) {
 					this.recursiveExpand(n, !expanded)
@@ -404,23 +402,26 @@ export class N2Sidebar extends CustomHTMLElement {
 	}//}}}
 	async navigateTop() {//{{{
 		const root = await nodeStore.get(ROOT_NODE)
-		if (root.Children.length === 0)
-			return
-		_mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[0]?.UUID, dontPush: false, dontExpand: true })
+		_mbus.dispatch("GO_TO_NODE", { nodeUUID: root.UUID, dontPush: false, dontExpand: true })
 	}//}}}
 	async navigateBottom() {//{{{
-		const root = await nodeStore.get(ROOT_NODE)
-		if (root.Children.length === 0)
-			return
+		const orphaned = await nodeStore.get(ORPHANED_NODE)
 
-		const toplevel = root.Children[root.Children.length - 1]
+		if (!orphaned.hasChildren() || this.getNodeExpanded(orphaned.UUID)) {
+			_mbus.dispatch("GO_TO_NODE", { nodeUUID: orphaned.UUID, dontPush: false, dontExpand: true })
+			return
+		}
+
+		/* TODO - fix this when orphaned nodes are implemented.
+		const toplevel = orphaned.Children[orphaned.Children.length - 1]
 		const toplevelExpanded = this.getNodeExpanded(toplevel?.UUID)
 
 		if (toplevelExpanded) {
 			const lastnode = this.getLastExpandedNode(toplevel)
 			_mbus.dispatch("GO_TO_NODE", { nodeUUID: lastnode?.UUID, dontPush: false, dontExpand: true })
 		} else
-			_mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[root.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
+			_mbus.dispatch("GO_TO_NODE", { nodeUUID: orphaned.Children[orphaned.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
+		*/
 	}//}}}
 
 	getParentWithNextSibling(node) {//{{{

From 81d02b82dc30c59c5523792f09a0950e5c6ad702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 18 Jun 2026 09:21:23 +0200
Subject: [PATCH 78/79] Small refactor for user preferences

---
 authentication/pkg.go          | 27 +++++++++------
 main.go                        | 27 ++++++++++++---
 sql/00010.sql                  |  1 +
 static/css/notes2.css          | 18 ++++++----
 static/images/icon_menu.svg    | 61 ++++++++++++++++++----------------
 static/js/api.mjs              | 45 ++++++++++---------------
 static/js/page_preferences.mjs | 32 ++++++++++++++++++
 static/js/page_storage.mjs     |  5 ++-
 static/js/sidebar.mjs          |  1 +
 static/js/sync.mjs             |  5 +--
 user.go                        | 27 ---------------
 user/pkg.go                    | 57 +++++++++++++++++++++++++++++++
 views/pages/notes2.gotmpl      |  8 +++--
 13 files changed, 202 insertions(+), 112 deletions(-)
 create mode 100644 sql/00010.sql
 create mode 100644 static/js/page_preferences.mjs
 delete mode 100644 user.go
 create mode 100644 user/pkg.go

diff --git a/authentication/pkg.go b/authentication/pkg.go
index 9eb6245..c0b9a2e 100644
--- a/authentication/pkg.go
+++ b/authentication/pkg.go
@@ -8,6 +8,9 @@ import (
 	"github.com/jmoiron/sqlx"
 	"github.com/lib/pq"
 
+	// Internal
+	appUser "notes2/user"
+
 	// Standard
 	"database/sql"
 	"encoding/hex"
@@ -27,12 +30,6 @@ type Manager struct {
 	ExpireDays int
 }
 
-type User struct {
-	ID       int
-	Username string
-	Name     string
-}
-
 func httpError(w http.ResponseWriter, err error) { // {{{
 	j, _ := json.Marshal(struct {
 		OK    bool
@@ -165,16 +162,16 @@ func (mngr *Manager) AuthenticationHandler(w http.ResponseWriter, r *http.Reques
 	mngr.log.Info("authentication", "username", request.Username, "status", "accepted")
 	j, _ := json.Marshal(struct {
 		OK    bool
-		User  User
+		User  appUser.User
 		Token string
 	}{true, user, token})
 	w.Write(j)
 } // }}}
 
-func (mngr *Manager) Authenticate(username, password string) (authenticated bool, user User, err error) { // {{{
+func (mngr *Manager) Authenticate(username, password string) (authenticated bool, user appUser.User, err error) { // {{{
 	var row *sql.Row
 	row = mngr.db.QueryRow(`
-                  SELECT id, username, name
+                  SELECT id, username, name, preferences
                   FROM public.user
                   WHERE
                           LOWER(username) = LOWER($1) AND
@@ -183,13 +180,21 @@ func (mngr *Manager) Authenticate(username, password string) (authenticated bool
 		username,
 		password,
 	)
-	err = row.Scan(&user.ID, &user.Username, &user.Name)
+	var data []byte
+	err = row.Scan(&user.ID, &user.Username, &user.Name, &data)
 	if err != nil && err.Error() == "sql: no rows in result set" {
 		err = nil
 		authenticated = false
 		return
 	}
 	if err != nil {
+		authenticated = false
+		return
+	}
+
+	err = json.Unmarshal(data, &user.Preferences)
+	if err != nil {
+		authenticated = false
 		return
 	}
 
@@ -278,7 +283,7 @@ func (mngr *Manager) ChangePassword(username, currentPassword, newPassword strin
 	changed = (rowsAffected == 1)
 	return
 } // }}}
-func (mngr *Manager) NewClientUUID(user User) (clientUUID string, err error) { // {{{
+func (mngr *Manager) NewClientUUID(user appUser.User) (clientUUID string, err error) { // {{{
 	// Each client session has its own UUID.
 	// Loop through until a unique one is established.
 	var proposedClientUUID string
diff --git a/main.go b/main.go
index 213d1ed..86e52e9 100644
--- a/main.go
+++ b/main.go
@@ -4,6 +4,7 @@ import (
 	// Internal
 	"notes2/authentication"
 	"notes2/html_template"
+	appUser "notes2/user"
 	"os"
 
 	// Standard
@@ -134,6 +135,7 @@ func main() { // {{{
 	http.HandleFunc("/offline", pageOffline)
 
 	http.HandleFunc("/user/authenticate", AuthManager.AuthenticationHandler)
+	http.HandleFunc("/user/preferences", authenticated(actionUserPreferences))
 
 	http.HandleFunc("/sync/from_server/count/{sequence}", authenticated(actionSyncFromServerCount))
 	http.HandleFunc("/sync/from_server/{sequence}/{offset}", authenticated(actionSyncFromServer))
@@ -178,7 +180,7 @@ func authenticated(fn func(http.ResponseWriter, *http.Request)) func(http.Respon
 		}
 
 		// User object is added to the context for the next handler.
-		user := NewUser(claims)
+		user := appUser.NewUser(claims)
 		r = r.WithContext(context.WithValue(r.Context(), CONTEXT_USER, user))
 
 		Log.Debug("webserver", "op", "request", "method", r.Method, "url", r.URL.String(), "username", user.Username, "client", user.ClientUUID)
@@ -360,8 +362,8 @@ func actionNodeHistoryCount(w http.ResponseWriter, r *http.Request) { // {{{
 	}
 
 	responseData(w, map[string]any{
-		"OK":      true,
-		"Count":   count,
+		"OK":    true,
+		"Count": count,
 	})
 } // }}}
 func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
@@ -389,6 +391,20 @@ func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
 	})
 } // }}}
 
+func actionUserPreferences(w http.ResponseWriter, r *http.Request) { // {{{
+	user := getUser(r)
+	prefs, err := user.Preferences()
+	if err != nil {
+		httpError(w, err)
+		return
+	}
+
+	responseData(w, map[string]any{
+		"OK":          true,
+		"Preferences": prefs,
+	})
+} // }}}
+
 func createNewUser(username string) { // {{{
 	reader := bufio.NewReader(os.Stdin)
 
@@ -431,7 +447,8 @@ func changePassword(username string) { // {{{
 
 	fmt.Printf("\nPassword changed\n")
 } // }}}
-func getUser(r *http.Request) UserSession { // {{{
-	user, _ := r.Context().Value(CONTEXT_USER).(UserSession)
+func getUser(r *http.Request) appUser.UserSession { // {{{
+	user, _ := r.Context().Value(CONTEXT_USER).(appUser.UserSession)
+	user.Db = db
 	return user
 } // }}}
diff --git a/sql/00010.sql b/sql/00010.sql
new file mode 100644
index 0000000..ecd8ab4
--- /dev/null
+++ b/sql/00010.sql
@@ -0,0 +1 @@
+ALTER TABLE public."user" ADD preferences jsonb DEFAULT '{}' NOT NULL;
diff --git a/static/css/notes2.css b/static/css/notes2.css
index a48a319..f8d46eb 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -73,9 +73,10 @@ button {
 			1fr;
 	}
 
-	&.page-history {
+	/* The other pages just gets the whole page without dividing it up. */
+	&:not(.page-node) {
 		grid-template-areas:
-			"tree-expander tree pad1 n2-pagehistory pad2"
+			"tree-expander tree pad1 n2-page pad2"
 		;
 
 		grid-template-columns:
@@ -245,7 +246,6 @@ button {
 
 #notes2 {
 	&.page-node {
-
 		#page-root {
 			display: none;
 		}
@@ -260,7 +260,7 @@ button {
 			display: contents;
 
 			n2-pagestorage {
-				grid-area: content;
+				grid-area: n2-page;
 			}
 		}
 	}
@@ -268,9 +268,14 @@ button {
 	&.page-history {
 		#page-history {
 			display: grid;
-			grid-area: n2-pagehistory;
+			grid-area: n2-page;
+		}
+	}
 
-			n2-pagehistory {}
+	&.page-preferences {
+		#page-preferences {
+			display: grid !important;
+			grid-area: n2-page;
 		}
 	}
 
@@ -282,7 +287,6 @@ button {
 		#page-root {
 			display: contents !important;
 		}
-
 	}
 
 }
diff --git a/static/images/icon_menu.svg b/static/images/icon_menu.svg
index e60bdee..cfdd1e8 100644
--- a/static/images/icon_menu.svg
+++ b/static/images/icon_menu.svg
@@ -2,18 +2,18 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="26.666645"
-   height="24"
-   viewBox="0 0 7.0555498 6.35"
+   width="12"
+   height="23.999981"
+   viewBox="0 0 3.1750001 6.349995"
    version="1.1"
    id="svg1"
-   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
    sodipodi:docname="icon_menu.svg"
+   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">
-  <sodipodi:namedview
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
      id="namedview1"
      pagecolor="#ffffff"
      bordercolor="#000000"
@@ -23,29 +23,34 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
-     inkscape:zoom="2.096401"
-     inkscape:cx="10.255672"
-     inkscape:cy="9.0631517"
-     inkscape:window-width="1916"
-     inkscape:window-height="1041"
-     inkscape:window-x="1920"
-     inkscape:window-y="1080"
+     inkscape:zoom="11.859035"
+     inkscape:cx="8.6010372"
+     inkscape:cy="17.32856"
+     inkscape:window-width="2190"
+     inkscape:window-height="1401"
+     inkscape:window-x="1463"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-146.57917,-92.339583)">
-    <title
-       id="title1">menu</title>
-    <title
-       id="title1-6">hamburger</title>
-    <path
-       d="m 153.63472,95.867362 c 0,0.391582 -0.31398,0.705554 -0.70555,0.705554 h -5.64445 c -0.38806,0 -0.70555,-0.313972 -0.70555,-0.705554 0,-0.391584 0.31749,-0.705556 0.70555,-0.705556 h 3.175 l 0.88194,0.705556 0.88195,-0.705556 h 0.70556 c 0.39157,0 0.70555,0.3175 0.70555,0.705556 m -3.52778,-3.527779 c -3.175,0 -3.175,2.116667 -3.175,2.116667 h 6.35 c 0,0 0,-2.116667 -3.175,-2.116667 m -3.175,5.291667 c 0,0.585612 0.47272,1.058333 1.05834,1.058333 h 4.23333 c 0.58561,0 1.05833,-0.472721 1.05833,-1.058333 v -0.352778 h -6.35 z"
-       id="path1-2"
-       style="stroke-width:0.352777" />
-  </g>
-</svg>
+     transform="translate(-147.15925,-92.339586)"><title
+       id="title1">menu</title><title
+       id="title1-6">hamburger</title><circle
+       style="fill:#000000;stroke:none;stroke-width:0.264583"
+       id="path3"
+       cx="149.55338"
+       cy="93.120461"
+       r="0.78087437" /><circle
+       style="fill:#000000;stroke:none;stroke-width:0.264583"
+       id="circle4"
+       cx="149.55338"
+       cy="97.908707"
+       r="0.78087437" /><circle
+       style="fill:#000000;stroke:none;stroke-width:0.264583"
+       id="circle5"
+       cx="149.55338"
+       cy="95.514587"
+       r="0.78087437" /></g></svg>
diff --git a/static/js/api.mjs b/static/js/api.mjs
index 3fff10a..26a19de 100644
--- a/static/js/api.mjs
+++ b/static/js/api.mjs
@@ -1,7 +1,7 @@
 export class API {
 	// query resolves into the JSON data produced by the application, or an exception with 'type' and 'error' properties.
 	static async query(method, path, request) {
-		return new Promise((resolve, reject) => {
+		try {
 			const body = JSON.stringify(request)
 			const headers = {}
 
@@ -12,33 +12,22 @@ export class API {
 				headers.Authorization = `Bearer ${token}`
 			}
 
-			fetch(path, { method, headers, body })
-				.then(response => {
-					// An HTTP communication level error occured.
-					if (!response.ok || response.status != 200)
-						return reject({
-							type: 'http',
-							error: response,
-						})
-					return response.json()
-				})
-				.then(json => {
-					// Application level response are handled here.
-					if (!json.OK)
-						return reject({
-							type: 'application',
-							error: json.Error,
-							application: json,
-						})
-					resolve(json)
-				})
-				.catch(err =>
-					// Catch any other errors from fetch.
-					reject({
-						type: 'http',
-						error: err,
-					}))
-		})
+			const res = await fetch(path, { method, headers, body })
+			// An HTTP communication level error occured.
+			if (!res.ok || res.status != 200)
+				throw new Error('HTTP error', { cause: { type: 'http', error: res, }})
+
+			// Application level response are handled here.
+			const json = await res.json()
+			if (!json.OK)
+				throw new Error(json.Error, { cause: { type: 'application', application: json, }})
+
+			return json
+
+		} catch (err) {
+			// Catch any other errors from fetch.
+			throw new Error(err.message, { cause: { type: 'http', error: err, }})
+		}
 	}
 
 	static hasAuthenticationToken() {//{{{
diff --git a/static/js/page_preferences.mjs b/static/js/page_preferences.mjs
new file mode 100644
index 0000000..273523c
--- /dev/null
+++ b/static/js/page_preferences.mjs
@@ -0,0 +1,32 @@
+import { CustomHTMLElement } from "./lib/custom_html_element.mjs"
+import { API } from './api.mjs'
+
+export class N2PagePreferences extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<h1>Preferences</h1>
+		`
+	}// }}}
+	constructor() {// {{{
+		super()
+		window._mbus.subscribe('SHOW_PAGE', event => {
+			if (event.detail.data?.page == 'preferences')
+				this.render()
+		})
+	}// }}}
+	async render() {// {{{
+	}// }}}
+	getPreferences() {
+		API.query('GET', '/user/preferences')
+	}
+}
+customElements.define('n2-pagepreferences', N2PagePreferences)
+
+// Preferences is a set of preferences, of which there can be many named.
+class Preferences {
+	constructor(name, data) {
+		this.name = name
+		this.data = data
+	}
+}
diff --git a/static/js/page_storage.mjs b/static/js/page_storage.mjs
index 931a718..a007130 100644
--- a/static/js/page_storage.mjs
+++ b/static/js/page_storage.mjs
@@ -13,7 +13,10 @@ export class N2PageStorage extends CustomHTMLElement {
 	constructor() {
 		super()
 
-		window._mbus.subscribe('SHOW_PAGE', () => this.render())
+		window._mbus.subscribe('SHOW_PAGE', event => {
+			if (event.detail.data?.page == 'storage')
+				this.render()
+		})
 	}
 	async render() {
 		const countNodes = await globalThis.nodeStore.nodeCount()
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 07e8678..6cd5814 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -128,6 +128,7 @@ export class N2Sidebar extends CustomHTMLElement {
 		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.elSettings.addEventListener('click', ()=> _mbus.dispatch('SHOW_PAGE', { page: 'preferences' }))
 		this.elHideTree.addEventListener('click', event => {
 			event.stopPropagation()
 			_mbus.dispatch('TREE_EXPANSION', { expand: false })
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index fe72c3f..daa603f 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -90,6 +90,7 @@ export class Sync {
 			nodeStore.setAppState('latest_sync_node', currMax)
 		} catch (e) {
 			console.error('sync node tree', e)
+			alert(e.message)
 		} finally {
 			syncEnd = Date.now()
 			const duration = (syncEnd - syncStart) / 1000
@@ -157,8 +158,8 @@ export class Sync {
 				_mbus.dispatch('SYNC_UPLOADED', { count: nodesToSend.length })
 
 			} catch (e) {
-				console.trace(e)
-				alert(e.error)
+				console.error(e)
+				alert(e.message)
 				return
 			}
 		}
diff --git a/user.go b/user.go
deleted file mode 100644
index b1c2abf..0000000
--- a/user.go
+++ /dev/null
@@ -1,27 +0,0 @@
-package main
-
-import (
-	// External
-	"github.com/golang-jwt/jwt/v5"
-)
-
-type UserSession struct {
-	UserID         int
-	Username   string
-	Password   string
-	Name       string
-	ClientUUID string
-}
-
-func NewUser(claims jwt.MapClaims) (u UserSession) {
-	uid, _ := claims["uid"].(float64)
-	name, _ := claims["name"].(string)
-	username, _ := claims["login"].(string)
-	clientUUID, _ := claims["cid"].(string)
-
-	u.UserID = int(uid)
-	u.Username = username
-	u.Name = name
-	u.ClientUUID = clientUUID
-	return
-}
diff --git a/user/pkg.go b/user/pkg.go
new file mode 100644
index 0000000..4810df0
--- /dev/null
+++ b/user/pkg.go
@@ -0,0 +1,57 @@
+package user
+
+import (
+	// External
+	"github.com/golang-jwt/jwt/v5"
+	"github.com/jmoiron/sqlx"
+
+	// Standard
+	"encoding/json"
+)
+
+type User struct {
+	ID          int
+	Username    string
+	Name        string
+	Preferences map[string]UserPreferences
+}
+
+type UserSession struct {
+	UserID     int
+	Username   string
+	Password   string
+	Name       string
+	ClientUUID string
+	Db         *sqlx.DB
+}
+
+type UserPreferences struct {
+	DownloadImages bool
+	DownloadFiles  bool
+}
+
+func NewUser(claims jwt.MapClaims) (u UserSession) {
+	uid, _ := claims["uid"].(float64)
+	name, _ := claims["name"].(string)
+	username, _ := claims["login"].(string)
+	clientUUID, _ := claims["cid"].(string)
+
+	u.UserID = int(uid)
+	u.Username = username
+	u.Name = name
+	u.ClientUUID = clientUUID
+	return
+}
+
+func (u UserSession) Preferences() (prefs map[string]UserPreferences, err error) {
+	row := u.Db.QueryRow(`SELECT preferences FROM public.user WHERE id=$1`, u.UserID)
+
+	var data []byte
+	err = row.Scan(&data)
+	if err != nil {
+		return
+	}
+
+	err = json.Unmarshal(data, &prefs)
+	return
+}
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index d54c71d..2755aea 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -32,9 +32,10 @@
 		</div>
 
 		<!-- History -->
-		<div id="page-history">
-			<n2-pagehistory></n2-pagehistory>
-		</div>
+		<n2-pagehistory id="page-history"></n2-pagehistory>
+
+		<!-- Preferences -->
+		<n2-pagepreferences id="page-preferences"></n2-pagepreferences>
 	</div>
 
 	<n2-syncprogress></n2-syncprogress>
@@ -46,6 +47,7 @@
 	import {App} from "/js/{{ .VERSION }}/app.mjs"
 	import {API} from 'api'
 	import {Sync} from 'sync'
+	import { } from '/js/{{ .VERSION }}/page_preferences.mjs'
 	import { } from '/js/{{ .VERSION }}/page_storage.mjs'
 	import { } from '/js/{{ .VERSION }}/page_history.mjs'
 	import { } from '/js/{{ .VERSION }}/file.mjs'

From 74851b9c4d31d124a7d23be11c4b479d3df9ac1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Sun, 21 Jun 2026 10:59:38 +0200
Subject: [PATCH 79/79] Prefs managing mostly done

---
 main.go                               |  48 ++++-
 static/css/notes2.css                 |   2 +-
 static/js/app.mjs                     |  14 ++
 static/js/lib/custom_html_element.mjs |  56 +++---
 static/js/page_preferences.mjs        | 269 +++++++++++++++++++++++++-
 user/pkg.go                           |   6 +
 6 files changed, 344 insertions(+), 51 deletions(-)

diff --git a/main.go b/main.go
index 86e52e9..6e3cf94 100644
--- a/main.go
+++ b/main.go
@@ -135,7 +135,8 @@ func main() { // {{{
 	http.HandleFunc("/offline", pageOffline)
 
 	http.HandleFunc("/user/authenticate", AuthManager.AuthenticationHandler)
-	http.HandleFunc("/user/preferences", authenticated(actionUserPreferences))
+	http.HandleFunc("GET /user/preferences", authenticated(actionUserGetPreferences))
+	http.HandleFunc("POST /user/preferences", authenticated(actionUserSetPreferences))
 
 	http.HandleFunc("/sync/from_server/count/{sequence}", authenticated(actionSyncFromServerCount))
 	http.HandleFunc("/sync/from_server/{sequence}/{offset}", authenticated(actionSyncFromServer))
@@ -268,7 +269,7 @@ func actionSyncFromServer(w http.ResponseWriter, r *http.Request) { // {{{
 	// The purpose of the Client UUID is to avoid
 	// sending nodes back once again to a client that
 	// just created or modified it.
-	user := getUser(r)
+	user := getUserSession(r)
 	changedFrom, _ := strconv.Atoi(r.PathValue("sequence"))
 	offset, _ := strconv.Atoi(r.PathValue("offset"))
 
@@ -291,7 +292,7 @@ func actionSyncFromServerCount(w http.ResponseWriter, r *http.Request) { // {{{
 	// The purpose of the Client UUID is to avoid
 	// sending nodes back once again to a client that
 	// just created or modified it.
-	user := getUser(r)
+	user := getUserSession(r)
 	changedFrom, _ := strconv.Atoi(r.PathValue("sequence"))
 
 	count, err := NodesCount(user.UserID, uint64(changedFrom), user.ClientUUID)
@@ -311,7 +312,7 @@ func actionSyncFromServerCount(w http.ResponseWriter, r *http.Request) { // {{{
 	w.Write(j)
 } // }}}
 func actionNodeRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
-	user := getUser(r)
+	user := getUserSession(r)
 	var err error
 
 	uuid := r.PathValue("uuid")
@@ -327,7 +328,7 @@ func actionNodeRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
 	})
 } // }}}
 func actionNodeHistoryRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
-	user := getUser(r)
+	user := getUserSession(r)
 	var err error
 
 	uuid := r.PathValue("uuid")
@@ -350,7 +351,7 @@ func actionNodeHistoryRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
 	})
 } // }}}
 func actionNodeHistoryCount(w http.ResponseWriter, r *http.Request) { // {{{
-	user := getUser(r)
+	user := getUserSession(r)
 	var err error
 
 	uuid := r.PathValue("uuid")
@@ -367,7 +368,7 @@ func actionNodeHistoryCount(w http.ResponseWriter, r *http.Request) { // {{{
 	})
 } // }}}
 func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
-	user := getUser(r)
+	user := getUserSession(r)
 
 	body, _ := io.ReadAll(r.Body)
 	var request struct {
@@ -391,8 +392,8 @@ func actionSyncToServer(w http.ResponseWriter, r *http.Request) { // {{{
 	})
 } // }}}
 
-func actionUserPreferences(w http.ResponseWriter, r *http.Request) { // {{{
-	user := getUser(r)
+func actionUserGetPreferences(w http.ResponseWriter, r *http.Request) { // {{{
+	user := getUserSession(r)
 	prefs, err := user.Preferences()
 	if err != nil {
 		httpError(w, err)
@@ -404,6 +405,33 @@ func actionUserPreferences(w http.ResponseWriter, r *http.Request) { // {{{
 		"Preferences": prefs,
 	})
 } // }}}
+func actionUserSetPreferences(w http.ResponseWriter, r *http.Request) { // {{{
+	session := getUserSession(r)
+
+	// Verify the "default" profile is still there.
+	var newPrefs map[string]appUser.UserPreferences
+	body, _ := io.ReadAll(r.Body)
+	err := json.Unmarshal(body, &newPrefs)
+	if err != nil {
+		httpError(w, err)
+		return
+	}
+
+	if _, found := newPrefs["default"]; !found {
+		httpError(w, fmt.Errorf("'default' profile missing."))
+		return
+	}
+
+	err = session.SetPreferences(newPrefs)
+	if err != nil {
+		httpError(w, err)
+		return
+	}
+
+	responseData(w, map[string]any{
+		"OK": true,
+	})
+} // }}}
 
 func createNewUser(username string) { // {{{
 	reader := bufio.NewReader(os.Stdin)
@@ -447,7 +475,7 @@ func changePassword(username string) { // {{{
 
 	fmt.Printf("\nPassword changed\n")
 } // }}}
-func getUser(r *http.Request) appUser.UserSession { // {{{
+func getUserSession(r *http.Request) appUser.UserSession { // {{{
 	user, _ := r.Context().Value(CONTEXT_USER).(appUser.UserSession)
 	user.Db = db
 	return user
diff --git a/static/css/notes2.css b/static/css/notes2.css
index f8d46eb..7fdea0b 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -274,7 +274,7 @@ button {
 
 	&.page-preferences {
 		#page-preferences {
-			display: grid !important;
+			display: block;
 			grid-area: n2-page;
 		}
 	}
diff --git a/static/js/app.mjs b/static/js/app.mjs
index c556341..90bad39 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -2,6 +2,7 @@ import { ROOT_NODE } from 'node_store'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { N2Sidebar } from 'sidebar'
 import { Node } from 'node'
+import { N2PreferenceSet } from './page_preferences.mjs'
 
 export class App {
 	static PAGES = ['node', 'history', 'storage']
@@ -14,6 +15,8 @@ export class App {
 		this.nodeUI = document.getElementById('note')
 		this.dragIcon = new N2DragIcon()
 
+		this.preferences = this.getPreferences()
+
 		this.sidebar.render().then(sidebar => {
 			document.getElementById('tree').append(sidebar)
 			document.getElementById('tree-nodes')?.focus()
@@ -61,6 +64,11 @@ export class App {
 			classList.add('page-' + page)
 		})
 
+		_mbus.subscribe('DEVICE_PREFERENCE_SET_UPDATED', ()=>{
+			this.preferences = this.getPreferences()
+			console.log(this.preferences.data)
+		})
+
 		window.addEventListener('keydown', event => this.keyHandler(event))
 		window.addEventListener('popstate', event => this.popState(event))
 		document.getElementById('notes2').addEventListener('click', event => {
@@ -211,6 +219,12 @@ export class App {
 		let classList = document.querySelector('#main-page').classList
 		return classList.contains(page)
 	}// }}}
+	getPreferences() {// {{{
+		const devPrefSet = localStorage.getItem('device_preference_set') || 'default'
+		const userData = localStorage.getItem('user') || '{"default": {}}'
+		const user = JSON.parse(userData)
+		return new N2PreferenceSet(devPrefSet, user.Preferences[devPrefSet])
+	}// }}}
 }
 
 class N2Crumbs extends CustomHTMLElement {
diff --git a/static/js/lib/custom_html_element.mjs b/static/js/lib/custom_html_element.mjs
index 2cec808..d1fb7ae 100644
--- a/static/js/lib/custom_html_element.mjs
+++ b/static/js/lib/custom_html_element.mjs
@@ -1,7 +1,17 @@
+/* Use data-el or data-field attribute.
+ * Element with data-el="hum-ding" is accessible as this.elHumDing and fields with
+ * data-field="long-dong" as this.fieldLongDong.
+ *
+ * All field values can be retrieved with fieldValues() and uses the data-field attribute
+ * as LongDong as key.
+ */
+
 export class CustomHTMLElement extends HTMLElement {
 	constructor(useShadow) {// {{{
 		super()
 
+		this._fields = new Map()
+
 		const workOn = useShadow ? this.attachShadow({ mode: 'open' }) : this
 		workOn.appendChild(this.constructor.tmpl.content.cloneNode(true))
 		workOn.querySelectorAll('*').forEach(el => {
@@ -9,6 +19,7 @@ export class CustomHTMLElement extends HTMLElement {
 			if (field !== undefined) {
 				const fieldName = this.toElementName('field', field)
 				this[fieldName] = el
+				this._fields.set(this.toElementName('', field), el)
 			}
 
 			const name = el.dataset.el
@@ -19,39 +30,22 @@ export class CustomHTMLElement extends HTMLElement {
 			}
 		})
 	}// }}}
+	allFields() {// {{{
+		return this._fields
+	}// }}}
+	fieldValues() {// {{{
+		const state = {}
+		for (const [name, field] of this._fields) {
+			if (field.tagName.toLowerCase() == 'input' && field.getAttribute('type').toLowerCase() == 'checkbox')
+				state[name] = field.checked
+			else
+				state[name] = field.value
+
+		}
+		return state
+	}// }}}
 	toElementName(prefix, str) {// {{{
 		str = prefix + '-' + str
 		return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
 	}// }}}
 }
-
-export class StupidPreactCustomHTMLElement extends HTMLElement {
-	constructor() {// {{{
-		super()
-
-		// Stupid stuff because of Preact.
-		this.clonedNodes = this.constructor.tmpl.content.cloneNode(true)
-		this.clonedNodes.querySelectorAll('*').forEach(el => {
-			const field = el.dataset.field
-			if (field !== undefined) {
-				const fieldName = this.toElementName('field', field)
-				this[fieldName] = el
-			}
-
-			const name = el.dataset.el
-			if (name !== undefined) {
-				const elName = this.toElementName('el', name)
-				this[elName] = el
-				el.classList.add('el-' + name)
-			}
-		})
-	}// }}}
-	toElementName(prefix, str) {// {{{
-		str = prefix + '-' + str
-		return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
-	}// }}}
-	connectedCallback() {// {{{
-		// Stupid stuff because of Preact.
-		this.appendChild(this.clonedNodes)
-	}// }}}
-}
diff --git a/static/js/page_preferences.mjs b/static/js/page_preferences.mjs
index 273523c..9655278 100644
--- a/static/js/page_preferences.mjs
+++ b/static/js/page_preferences.mjs
@@ -5,28 +5,279 @@ export class N2PagePreferences extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
+			<style>
+				.el-sets {
+					display: grid;
+					grid-template-columns: min-content;
+					grid-gap: 32px;
+				}
+
+				:host > div {
+					margin-bottom: 32px;
+				}
+
+				.dev-pref-set {
+					display: grid;
+					grid-template-columns: min-content min-content;
+					grid-gap: 16px;
+					align-items: center;
+					white-space: nowrap;
+				}
+			</style>
 			<h1>Preferences</h1>
+
+			<div>Changes preferences to not download images or files on the device doesn't remove the already downloaded data.</div>
+
+			<div class="dev-pref-set">
+				<div>Device preference set</div>
+				<select data-el="dev-preference-set"></select>
+			</div>
+
+			<div data-el="sets"></div>
+
+			<button data-el="new-set">New set</button>
+			<button data-el="save" disabled>Save</button>
 		`
 	}// }}}
 	constructor() {// {{{
-		super()
-		window._mbus.subscribe('SHOW_PAGE', event => {
-			if (event.detail.data?.page == 'preferences')
+		super(true)
+		this.sets = []
+
+		this.elNewSet.addEventListener('click', () => this.newSet())
+		this.elSave.addEventListener('click', () => this.save())
+		this.elDevPreferenceSet.addEventListener('change', event=>this.changePreferenceSet(event))
+
+		window._mbus.subscribe('SHOW_PAGE', async event => {
+			if (event.detail.data?.page == 'preferences') {
+				this.sets = await this.getPreferenceSets()
 				this.render()
+			}
 		})
+
+		window._mbus.subscribe('PREFERENCE_SET_MODIFIED', () => this.preferencesModified())
+		window._mbus.subscribe('PREFERENCE_SET_DELETE', event => this.preferencesDelete(event.detail.data.set))
+	}// }}}
+	sortSets(a, b) {// {{{
+		if (a.name == 'default') return -1
+		if (b.name == 'default') return 1
+
+		if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
+		if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
+
+		return 0
 	}// }}}
 	async render() {// {{{
+		try {
+			this.sets.sort(this.sortSets)
+			this.elSets.replaceChildren(...this.sets)
+			
+			const setNames = this.sets.entries().map(([i, set]) => {
+				const optn = document.createElement('option')
+				optn.innerText = set.name
+				return optn
+			})
+			this.elDevPreferenceSet.replaceChildren(...setNames)
+		} catch (e) {
+			console.error(e)
+			alert(e.message)
+		}
+	}// }}}
+	async getPreferenceSets() {// {{{
+		const userData = localStorage.getItem('user')
+		if (userData === null)
+			throw new Error('Could not find user in localStorage')
+
+		const user = JSON.parse(userData)
+		const prefsData = user.Preferences
+
+		if (prefsData === undefined)
+			throw new Error('User object is missing preferences')
+
+		if (!prefsData.hasOwnProperty('default'))
+			throw new Error('The "default" preferences set is missing')
+
+		return Object.keys(prefsData).map(name => new N2PreferenceSet(name, prefsData[name]))
+	}// }}}
+	async retrieveServerPreferences() {// {{{
+		try {
+			API.query('GET', '/user/preferences')
+		} catch (e) {
+			console.error(e)
+			alert(`Error retrieving preferences: ${e.message}`)
+		}
+	}// }}}
+	changePreferenceSet(event) {// {{{
+		this.preferencesModified()
+	}// }}}
+	newSet() {// {{{
+		let name = prompt("Name for new preference set")
+		if (!name)
+			return
+
+		name = name.trim()
+		if (name === '')
+			return
+
+		if (name == 'default') {
+			alert(`Name can't be "default".`)
+			return
+		}
+
+		const exists = this.sets.some(s => s.name.toLowerCase() == name.toLowerCase())
+		if (exists) {
+			alert(`Set with name "${name}" already exist.`)
+			return
+		}
+
+		this.sets.push(new N2PreferenceSet(name, {}))
+		this.preferencesModified()
+		this.render()
+	}// }}}
+	preferencesModified() {// {{{
+		this.elSave.removeAttribute('disabled')
+	}// }}}
+	preferencesDelete(deleteSet) {// {{{
+		if (deleteSet.name == 'default') {
+			alert("Can't delete the default set.")
+			return
+		}
+
+		if (!confirm(`Confirm deleting "${deleteSet.name}"`))
+			return
+
+		this.sets = this.sets.filter(set => {
+			return !(set.name === deleteSet.name)
+		})
+
+		this.preferencesModified()
+		this.render()
+	}// }}}
+	async save() {// {{{
+		try {
+			let newPrefs = {}
+			this.sets.forEach(s => {
+				const setState = s.getState()
+				newPrefs[setState.name] = setState.state
+			})
+
+			// Throws exception on both HTTP and application errors.
+			await API.query('POST', '/user/preferences', newPrefs)
+
+			const userData = localStorage.getItem('user')
+			const user = JSON.parse(userData)
+			user.Preferences = newPrefs
+			localStorage.setItem('user', JSON.stringify(user))
+			localStorage.setItem('device_preference_set', this.elDevPreferenceSet.value)
+			_mbus.dispatch('DEVICE_PREFERENCE_SET_UPDATED')
+		} catch (e) {
+			console.error(e)
+			alert(e.message)
+		} finally {
+			this.elSave.setAttribute('disabled', true)
+		}
+
 	}// }}}
-	getPreferences() {
-		API.query('GET', '/user/preferences')
-	}
 }
 customElements.define('n2-pagepreferences', N2PagePreferences)
 
 // Preferences is a set of preferences, of which there can be many named.
-class Preferences {
-	constructor(name, data) {
+export class N2PreferenceSet extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<style>
+				:host {
+					border: 1px solid var(--line-color);
+					padding: 16px;
+
+					display: grid;
+					grid-template-columns: min-content 1fr;
+					justify-items: start;
+					align-items: center;
+					grid-gap: 8px 16px;
+					white-space: nowrap;
+					user-select: none;
+
+					.header {
+						grid-column: 1 / -1;
+						width: 100%;
+
+						display: grid;
+						grid-template-columns: 1fr min-content;
+
+						.el-name {
+							font-weight: bold;
+							margin-bottom: 32px;
+							cursor: pointer;
+							color: var(--color1);
+						}
+
+						.el-delete {
+							cursor: pointer;
+						}
+					}
+				}
+
+			</style>
+
+			<div class="header">
+				<div data-el="name"></div>
+				<div data-el="delete">✘</div>
+			</div>
+
+			<div><label for="download-images">Download images on device</label></div>
+			<input data-field="download-images" type="checkbox" id="download-images">
+
+			<div><label for="download-files">Download files on device</label></div>
+			<input data-field="download-files" type="checkbox" id="download-files">
+		`
+	}// }}}
+	constructor(name, data) {// {{{
+		super(true)
 		this.name = name
 		this.data = data
-	}
+		this.render()
+
+		// Enable the save button when settings are modified.
+		this.allFields().forEach(f =>
+			f.addEventListener('input', () => _mbus.dispatch('PREFERENCE_SET_MODIFIED'))
+		)
+
+		this.elName.addEventListener('click', () => this.updateName())
+		this.elDelete.addEventListener('click', () => this.deleteSet())
+	}// }}}
+	updateName() {// {{{
+		if (this.name == 'default') {
+			alert('Can not change name of the default profile.')
+			return
+		}
+
+		const name = prompt("Change name", this.name)
+		if (!name)
+			return
+
+		this.name = name
+		this.render()
+		_mbus.dispatch('PREFERENCE_SET_MODIFIED')
+	}// }}}
+	deleteSet() {// {{{
+		_mbus.dispatch('PREFERENCE_SET_DELETE', { set: this })
+	}// }}}
+	render() {// {{{
+		this.elName.innerText = this.name
+
+		this.fieldDownloadImages.checked = this.data.DownloadImages
+		this.fieldDownloadFiles.checked = this.data.DownloadFiles
+	}// }}}
+	getState() {// {{{
+		const name = this.name.trim()
+		if (name === '')
+			throw new Error('Name can not be empty.')
+
+		return {
+			name: this.name.trim(),
+			state: this.fieldValues(),
+		}
+	}// }}}
 }
+customElements.define('n2-preferenceset', N2PreferenceSet)
diff --git a/user/pkg.go b/user/pkg.go
index 4810df0..bcdfac8 100644
--- a/user/pkg.go
+++ b/user/pkg.go
@@ -55,3 +55,9 @@ func (u UserSession) Preferences() (prefs map[string]UserPreferences, err error)
 	err = json.Unmarshal(data, &prefs)
 	return
 }
+
+func (u UserSession) SetPreferences(prefs map[string]UserPreferences) (err error) {
+	j, _ := json.Marshal(prefs)
+	_, err = u.Db.Exec(`UPDATE public.user SET preferences=$2 WHERE id=$1`, u.UserID, j)
+	return
+}