WIP sync

static/css/markdown.css

@@ -1,11 +1,27 @@
 .el-node-markdown {
 	padding-top: 16px;
 
-	h1 {
-		border-bottom: 1px solid #ccc;
+	.heading-container {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 16px;
+		white-space: nowrap;
+		align-items: center;
 		margin-top: 32px;
 		margin-bottom: 8px;
 
+		&:first-child {
+			margin-top: 32px;
+		}
+
+		.line {
+			border-bottom: 1px solid var(--line-color);
+		}
+	}
+
+	h1 {
+		border-bottom: 1px solid #ccc;
+
 		display: inline-block;
 		font-size: 1.25em;
 
@@ -14,24 +30,33 @@
 		background-color: var(--color1);
 		padding: 4px 12px;
 
-		&:first-child {
-			margin-top: 32px;
-		}
+		margin-top: 0px;
+		margin-bottom: 0px;
+
 	}
 
 	h2 {
 		font-size: 1.25em;
-		margin-top: 32px;
+		margin-top: 0px;
 		margin-bottom: 0px;
 		color: var(--color1);
 	}
 
+	h2+.line,
+	h3+.line {
+		border-bottom: none !important;
+	}
+
 	h3:before {
 		font-size: 1.0em;
 		content: "> ";
 		color: var(--color1);
 	}
 
+	a {
+		color: var(--color1);
+	}
+
 	p {
 		line-height: 150%;
 	}

static/css/notes2.css

@@ -307,65 +307,28 @@ button {
 }
 
 n2-syncprogress {
-	--radius: 8px;
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	padding: 8px 16px;
+	z-index: 16384;
+	border-radius: 6px;
+	font-weight: bold;
+	background-color: var(--color1);
+	color: #fff;
 
 	display: grid;
-	grid-area: sync;
-	display: grid;
-	justify-items: center;
+	grid-template-columns: min-content repeat(3, min-content);
+	grid-gap: 8px 8px;
+	white-space: nowrap;
 	align-items: center;
+	justify-items: end;
 
-	position: relative;
-
-	opacity: 0;
-	transition: height 0s 500ms, opacity 500ms linear, visibility 0s 500ms;
-
-	&.show {
-		opacity: 1;
-		transition: visibility, height 0s, opacity 500ms linear;
+	img {
+		grid-row: 1/3;
+		height: 34px;
+		margin-right: 8px;
 	}
-
-	progress {
-		width: 100%;
-		height: 24px;
-		border-radius: 8px;
-	}
-
-	.count {
-		position: absolute;
-		top: 16px;
-		width: 100%;
-		white-space: nowrap;
-		color: #888;
-		text-align: center;
-		font-size: 12pt;
-		font-weight: bold;
-	}
-
-	progress[value]::-webkit-progress-bar {
-		background-color: #eee;
-		box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
-		border-radius: var(--radius);
-	}
-
-	progress[value]::-moz-progress-bar {
-		background-color: #eee;
-		box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
-		border-radius: var(--radius);
-	}
-
-	progress[value]::-webkit-progress-value {
-		background: rgb(186, 95, 89);
-		background: linear-gradient(180deg, rgba(186, 95, 89, 1) 0%, rgba(254, 95, 85, 1) 50%, rgba(186, 95, 89, 1) 100%);
-		border-radius: var(--radius);
-	}
-
-	progress[value]::-moz-progress-value {
-		background: rgb(186, 95, 89);
-		background: linear-gradient(180deg, rgba(186, 95, 89, 1) 0%, rgba(254, 95, 85, 1) 50%, rgba(186, 95, 89, 1) 100%);
-		border-radius: var(--radius);
-	}
-
 }
 
 /* ============================================================= */

static/images/icon_transfer.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.89642mm"
+   height="6.3499999mm"
+   viewBox="0 0 5.89642 6.3499999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_transfer.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="mm"
+     inkscape:zoom="1"
+     inkscape:cx="9.5"
+     inkscape:cy="10"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.39375,-145.78542)">
+    <title
+       id="title1">file-arrow-up-down-outline</title>
+    <path
+       d="m 105.14239,151.22828 c 0.0363,0.21771 0.11189,0.42031 0.21771,0.60475 h -2.36158 c -0.33565,0 -0.60477,-0.26912 -0.60477,-0.60475 v -4.83811 c 0,-0.33261 0.26912,-0.60475 0.60477,-0.60475 h 2.41904 l 1.81428,1.81429 v 1.53912 c -0.0998,-0.0151 -0.19956,-0.0272 -0.30238,-0.0272 -0.10285,0 -0.20259,0.0121 -0.30237,0.0272 v -1.23675 h -1.51191 v -1.51191 h -2.11666 v 4.83811 h 2.14387 m 1.18231,-1.51191 -0.75596,0.90714 h 0.45358 v 1.20952 h 0.60477 v -1.20952 h 0.45356 l -0.75595,-0.90714 m 1.51191,1.51191 v -1.20953 h -0.60477 v 1.20953 h -0.45356 l 0.75595,0.90714 0.75594,-0.90714 z"
+       id="path1"
+       style="stroke-width:0.302381;fill:#ffffff" />
+  </g>
+</svg>

static/js/app.mjs

@@ -199,6 +199,7 @@ export class App {
 		_mbus.dispatch('NODE_UI_OPEN', node)
 		_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
 		_mbus.dispatch('NODE_UNMODIFIED')
+		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
 	}//}}}
 	pageIsVisible(page) {// {{{
 		let classList = document.querySelector('#main-page').classList

static/js/marked_position.mjs

@@ -114,7 +114,12 @@ export class MarkedPosition {
 			renderer: {
 				heading(token) {
 					const content = this.parser.parseInline(token.tokens)
-					return `<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n`
+					return `
+						<div class="heading-container">
+							<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
+							<div class="line"></div>\n
+						</div>
+					`
 				},
 
 				paragraph(token) {

static/js/sidebar.mjs

@@ -346,7 +346,8 @@ export class N2Sidebar extends CustomHTMLElement {
 		}
 
 		if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
-			_mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
+			const nodeVisuallyAbove = this.getLastExpandedNode(siblingBefore)
+			_mbus.dispatch("GO_TO_NODE", { nodeUUID: nodeVisuallyAbove.UUID, dontPush: false, dontExpand: true })
 			return
 		}
 

static/js/sync.mjs

@@ -166,8 +166,9 @@ export class N2SyncProgress extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
-			<progress data-el="progress" min=0 max=137 value=0></progress>
-			<div data-el="count" class="count">0 / 0</div>
+			<img src="/images/${_VERSION}/icon_transfer.svg">
+			<div data-el="download-transferred" class="count">0</div> <div>/</div> <div data-el="download-total">0</div>
+			<div data-el="upload-transferred"   class="count">0</div> <div>/</div> <div data-el="upload-total">0</div>
 		`
 	}// }}}
 	constructor() {//{{{
@@ -211,9 +212,8 @@ export class N2SyncProgress extends CustomHTMLElement {
 		this.render()
 	}//}}}
 	render() {//{{{
-		this.elProgress.max = this.state.nodesToSync
-		this.elProgress.value = this.state.nodesSynced
-		this.elCount.innerText = `${this.state.nodesSynced} / ${this.state.nodesToSync}`
+		this.elDownloadTransferred.innerText = this.state.nodesSynced
+		this.elDownloadTotal.innerText = this.state.nodesToSync
 	}//}}}
 	setSyncState(state) {// {{{
 		if (state)

views/pages/notes2.gotmpl

@@ -22,6 +22,8 @@
 			<n2-pagehistory></n2-pagehistory>
 		</div>
 	</div>
+
+	<n2-syncprogress></n2-syncprogress>
 </div>
 
 <link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">