static/css/notes2.css

@@ -218,16 +218,27 @@ button {
 	}
 }
 
-
-/* =============== *
- * PAGE MANAGEMENT *
- * =============== */
 [id^="page-"] {
 	display: none;
 }
 
-#notes2 {
+#main-page {
-	&.page-node {
+	display: contents;
+
+	&:focus-within {
+		background-color: #faf;
+	}
+
+	&.node {
+		&.root-node-override {
+			#page-root {
+				display: contents;
+			}
+
+			#page-node {
+				display: none;
+			}
+		}
 
 		#page-root {
 			display: none;
@@ -238,7 +249,7 @@ button {
 		}
 	}
 
-	&.page-storage {
+	&.storage {
 		#page-storage {
 			display: contents;
 
@@ -248,7 +259,7 @@ button {
 		}
 	}
 
-	&.page-history {
+	&.history {
 		#page-history {
 			display: grid;
 			grid-area: n2-pagehistory;
@@ -256,27 +267,6 @@ 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 {
@@ -368,7 +358,7 @@ n2-syncprogress {
 }
 
 #page-root {
-	&>div {
+	& > div {
 		grid-area: content;
 		align-self: start;
 		margin-top: 64px;

static/js/app.mjs

@@ -4,8 +4,6 @@ import { N2Sidebar } from 'sidebar'
 import { Node } from 'node'
 
 export class App {
-	static PAGES = ['node', 'history', 'storage']
-
 	constructor() {// {{{
 		this.currentNode = null
 		this.sidebar = new N2Sidebar()
@@ -18,15 +16,12 @@ export class App {
 			document.getElementById('tree-nodes')?.focus()
 		})
 
-		// Start node shows a system-wide page instead of node editing
+		const mainPage = document.getElementById('main-page')
-		// 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)
-				el.classList.add('root-node-override')
+				mainPage.classList.add('root-node-override')
 			else
-				el.classList.remove('root-node-override')
+				mainPage.classList.remove('root-node-override')
 		}
 
 		_mbus.subscribe('TREE_RENDERED', async () => {
@@ -52,7 +47,13 @@ export class App {
 		})
 
 		_mbus.subscribe('SHOW_PAGE', ({ detail: { data: { page } } }) => {
-			const classList = document.getElementById('notes2').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)

static/js/sync.mjs

@@ -158,7 +158,7 @@ export class Sync {
 
 			} catch (e) {
 				console.trace(e)
-				alert(e.error)
+				alert(e)
 				return
 			}
 		}