From d77b23b58825c494838563ffea2691be6a3013a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Wed, 3 Jun 2026 22:10:37 +0200 Subject: [PATCH 01/81] Layout changes --- static/css/notes2.css | 92 ++++++++++++++++++------------------- static/images/icon_home.svg | 71 ++++++++++++++++++++++++++++ static/js/app.mjs | 14 +++++- static/js/page_node.mjs | 4 +- static/service_worker.js | 1 + 5 files changed, 131 insertions(+), 51 deletions(-) create mode 100644 static/images/icon_home.svg diff --git a/static/css/notes2.css b/static/css/notes2.css index 14f475e..a2dbc11 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -11,6 +11,7 @@ --colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%); --tree-expander: 0px; + --functions-width: 150px; } html { @@ -30,8 +31,7 @@ html { display: grid; grid-template-areas: "tree-expander tree pad1 crumbs crumbs pad2" - "tree-expander tree pad1 name name pad2" - "tree-expander tree pad1 sync functions pad2" + "tree-expander tree pad1 name functions pad2" "tree-expander tree pad1 content content pad2" ; @@ -41,9 +41,9 @@ html { /* Tree */ min-content minmax(32px, 1fr) /* Sync */ - minmax(min-content, calc(900px - 156px)) + minmax(min-content, calc(var(--content-width) - var(--functions-width))) /* Functions */ - 156px + var(--functions-width) /* Content */ minmax(32px, 1fr); @@ -52,8 +52,6 @@ html { min-content /* Name */ min-content - /* Sync */ - 48px /* Content */ 1fr; @@ -80,14 +78,11 @@ html { @media only screen and (max-width: 800px) { #notes2 { grid-template-areas: - "tree-expander pad1 crumbs pad2" - "tree-expander pad1 name pad2" - "tree-expander pad1 functions pad2" - "tree-expander pad1 content pad2" - "tree-expander pad1 blank pad2" - "tree-expander pad1 sync pad2" + "tree-expander pad1 crumbs crumbs pad2" + "tree-expander pad1 name functions pad2" + "tree-expander pad1 content content pad2" ; - grid-template-columns: 32px 16px 1fr 16px; + grid-template-columns: 32px 16px 1fr var(--functions-width) 16px; &.show-tree { grid-template-areas: "tree"; @@ -114,6 +109,7 @@ html { #tree-expander { grid-area: tree-expander; color: #333; + background-color: #eee; font-weight: bold; border-right: 2px solid #ddd; @@ -224,9 +220,6 @@ html { } } -n2-nodeui { -} - [id^="page-"] { display: none; } @@ -265,28 +258,19 @@ n2-nodeui { grid-area: crumbs; display: grid; align-items: start; - justify-items: center; + justify-items: start; height: min-content; - margin: 0 16px 16px 16px; + margin: 0 16px 16px 0px; n2-crumbs { - background: #eaeaea; display: flex; flex-wrap: wrap; - padding: 8px 16px; + align-items: center; + padding: 16px 0px; color: #333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; - &.node-modified { - background-color: var(--color1); - color: var(--color2); - - .crumb:after { - color: var(--color2); - } - } - n2-crumb { margin-right: 8px; cursor: pointer; @@ -299,21 +283,24 @@ n2-nodeui { } } - n2-crumb:after { + + n2-crumb:before { content: ">"; font-weight: bold; color: var(--color1) } - n2-crumb:last-child { - margin-right: 0; - } - n2-crumb:last-child:after { - content: ''; - margin-left: 0px; - } + n2-crumb.home { + &:before { + content: ''; + margin-left: 0px; + } + img { + height: 24px; + } + } } } @@ -385,19 +372,33 @@ n2-syncprogress { n2-nodeui { margin-bottom: 32px; + &.node-modified:before { + content: 'h'; + z-index: 8192; + position: fixed; + top: 0px; + left: 0px; + right: 0px; + height: 4px; + + background-color: var(--color1); + color: var(--color2); + } + .el-name { grid-area: name; color: #333; font-weight: bold; - text-align: center; - font-size: 1.5em; + font-size: 1.75em; margin-top: 8px; margin-bottom: 0px; } .el-functions { grid-area: functions; - width: calc(100% - 32px); + justify-self: end; + align-self: end; + margin-bottom: 6px; } .el-node-content { @@ -405,6 +406,7 @@ n2-nodeui { justify-self: center; word-wrap: break-word; font-family: monospace; + font-size: 1em; color: #333; width: 100%; @@ -418,12 +420,9 @@ n2-nodeui { border-left: none; border-right: none; border-top: 1px solid #e0e0e0; - border-bottom: 1px solid #e0e0e0; + border-bottom: none; + margin-top: 8px; margin-bottom: 32px; - - &:invalid { - padding-top: 16px; - } } .el-node-markdown { @@ -431,11 +430,10 @@ n2-nodeui { display: none; border-top: 1px solid #e0e0e0; - border-bottom: 1px solid #e0e0e0; + margin-top: 8px; margin-bottom: 32px; overflow-wrap: anywhere; - width: calc(100% - 32px); } &.show-markdown { diff --git a/static/images/icon_home.svg b/static/images/icon_home.svg new file mode 100644 index 0000000..3bf96d5 --- /dev/null +++ b/static/images/icon_home.svg @@ -0,0 +1,71 @@ + + + + + + + + + + home-outline + + + + diff --git a/static/js/app.mjs b/static/js/app.mjs index 8ff6229..4978b98 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -237,7 +237,7 @@ class N2Crumbs extends CustomHTMLElement { ) ) - const start = new N2Crumb('Start', ROOT_NODE) + const start = new N2Crumb('', ROOT_NODE) crumbs.push(start) this.replaceChildren(...crumbs.reverse()) @@ -255,8 +255,18 @@ class N2Crumb extends CustomHTMLElement { }// }}} constructor(label, uuid) {// {{{ super() - this.classList.add('crumb') + // The house makes it a bit more graphical than just a bunch of text. + if (uuid === ROOT_NODE) { + const start = document.createElement('div') + start.innerHTML = `` + start.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: ROOT_NODE, dontPush: false, dontExpand: true })) + this.classList.add('home') + this.replaceChildren(start) + return + } + + this.classList.add('crumb') this.label = label this.uuid = uuid diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs index 341f155..81d7c33 100644 --- a/static/js/page_node.mjs +++ b/static/js/page_node.mjs @@ -48,14 +48,14 @@ export class N2PageNodeUI extends CustomHTMLElement { }) _mbus.subscribe('NODE_MODIFIED', () => { - document.querySelector('#crumbs .crumbs')?.classList.add('node-modified') + this.classList.add('node-modified') this.elIconSave.src = `/images/${_VERSION}/icon_save.svg` this.elIconSave.classList.add('colorize') this.renderName() }) _mbus.subscribe('NODE_UNMODIFIED', () => { - document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified') + this.classList.remove('node-modified') this.elIconSave.src = `/images/${_VERSION}/icon_save_disabled.svg` this.elIconSave.classList.remove('colorize') }) diff --git a/static/service_worker.js b/static/service_worker.js index 55a5f09..b6a1a13 100644 --- a/static/service_worker.js +++ b/static/service_worker.js @@ -11,6 +11,7 @@ const CACHED_ASSETS = [ '/images/{{ .VERSION }}/collapsed.svg', '/images/{{ .VERSION }}/expanded.svg', '/images/{{ .VERSION }}/icon_history.svg', + '/images/{{ .VERSION }}/icon_home.svg', '/images/{{ .VERSION }}/icon_markdown_hollow.svg', '/images/{{ .VERSION }}/icon_markdown.svg', '/images/{{ .VERSION }}/icon_refresh.svg', From ee327a6337d607ef8f689fa7cd2080b13f77f52b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Wed, 3 Jun 2026 22:10:51 +0200 Subject: [PATCH 02/81] Bumped to v10 --- main.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.go b/main.go index 156b916..169c3de 100644 --- a/main.go +++ b/main.go @@ -23,7 +23,7 @@ import ( "text/template" ) -const VERSION = "v9" +const VERSION = "v10" const CONTEXT_USER = 1 const SYNC_PAGINATION = 200 From 131c6133ba7901672eaae2036d44f6a53a681dc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Wed, 3 Jun 2026 22:22:29 +0200 Subject: [PATCH 03/81] Fixed path in logo small --- static/images/logo_small.svg | 30 ++++++++++++++++++------------ static/js/tree.mjs | 1 + 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/static/images/logo_small.svg b/static/images/logo_small.svg index cb83d39..47eabde 100644 --- a/static/images/logo_small.svg +++ b/static/images/logo_small.svg @@ -7,7 +7,7 @@ viewBox="0 0 7.5652731 5.2916666" version="1.1" id="svg1" - inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)" + inkscape:version="1.4.2 (ebf0e94, 2025-05-08)" sodipodi:docname="logo_small.svg" 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="16.477217" - inkscape:cx="48.460855" - inkscape:cy="5.2193281" - inkscape:window-width="2190" - inkscape:window-height="1401" - inkscape:window-x="1463" - inkscape:window-y="18" + inkscape:zoom="8.2386085" + inkscape:cx="48.491198" + inkscape:cy="5.219328" + inkscape:window-width="1916" + inkscape:window-height="1161" + inkscape:window-x="0" + inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1" /> + N2 + y="213.81186">N2 diff --git a/static/js/tree.mjs b/static/js/tree.mjs index 04555f6..fc861e4 100644 --- a/static/js/tree.mjs +++ b/static/js/tree.mjs @@ -68,6 +68,7 @@ export class N2Tree extends CustomHTMLElement { font-size: 1.25em; font-weight: bold; cursor: pointer; + margin-left: 16px; } } From 44ee1ac94b3c01e0eae0995d5383c576b1651fbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Thu, 4 Jun 2026 07:47:27 +0200 Subject: [PATCH 04/81] Design changes --- static/css/notes2.css | 36 ++++----------------------------- static/js/tree.mjs | 47 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 50 insertions(+), 33 deletions(-) diff --git a/static/css/notes2.css b/static/css/notes2.css index a2dbc11..5a3e0dd 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -10,6 +10,7 @@ */ --colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%); + --line-color: #ccc; --tree-expander: 0px; --functions-width: 150px; } @@ -111,7 +112,7 @@ html { color: #333; background-color: #eee; font-weight: bold; - border-right: 2px solid #ddd; + border-right: 1px solid var(--line-color); display: grid; justify-items: center; @@ -127,6 +128,7 @@ html { } } + #tree { grid-area: tree; display: grid; @@ -134,33 +136,7 @@ html { color: #444; z-index: 100; - border-right: 2px solid #ddd; - - #logo { - display: grid; - grid-template-columns: min-content 1fr min-content; - align-items: center; - justify-items: start; - cursor: pointer; - padding: 16px; - border-bottom: 1px solid #ccc; - - .el-search { - justify-self: end; - } - - img:first-child { - height: 24px; - margin-right: 8px; - } - } - - .icons { - display: flex; - justify-content: center; - margin: 16px 0px 32px 0px; - gap: 8px; - } + border-right: 1px solid var(--line-color); n2-tree { .el-treenodes { @@ -168,10 +144,6 @@ html { } } - &:focus-within { - n2-tree {} - } - .node { display: grid; grid-template-columns: 40px min-content; diff --git a/static/js/tree.mjs b/static/js/tree.mjs index fc861e4..397dfc9 100644 --- a/static/js/tree.mjs +++ b/static/js/tree.mjs @@ -64,16 +64,61 @@ export class N2Tree extends CustomHTMLElement { this.tmpl.innerHTML = ` +
From 12f8c019f0bd0110bc8097685a6be1660af37b15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Thu, 4 Jun 2026 08:42:54 +0200 Subject: [PATCH 05/81] 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" />folder-open-outlinenotebook-outlinetext-box-outline_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 = ` -