Icons and keybindings for creating sub-documents and sibling documents

static/css/notes2.css

@@ -9,7 +9,7 @@
 
 	--line-color: #ccc;
 	--tree-expander: 0px;
-	--functions-width: 150px;
+	--functions-width: 180px;
 }
 
 html {

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>

static/js/app.mjs

@@ -82,19 +82,18 @@ export class App {
 	keyHandler(event) {//{{{
 		let handled = true
 
-		if (event.key == 'F2') {
+		// Most keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
-			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.
-		if (!(event.shiftKey && event.altKey) && !(event.key.toUpperCase() === 'S' && event.ctrlKey))
+		const SHIFT_ALT = event.shiftKey && !event.ctrlKey && event.altKey
-			return
+		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() {//{{{
+	async createNode(createUnderUUID) {//{{{
-		let name = prompt("Name")
+		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 })
 	}//}}}

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)
 	}// }}}