Small UI changes

static/css/notes2.css

@@ -199,6 +199,10 @@ html {
 #main-page {
 	display: contents;
 
+	&:focus-within {
+		background-color: #faf;
+	}
+
 	&.node {
 		#page-node {
 			display: contents;

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"

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

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

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