Cleaner CSS page management

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;

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)