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] 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