From 227fa2208b5e0d7f9a90bcca9bd66e17b01016e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 9 Jun 2026 06:43:07 +0200
Subject: [PATCH] WIP sync

---
 static/css/notes2.css           | 71 ++++++++-------------------------
 static/images/icon_transfer.svg | 49 +++++++++++++++++++++++
 static/js/sync.mjs              | 10 ++---
 views/pages/notes2.gotmpl       |  2 +
 4 files changed, 73 insertions(+), 59 deletions(-)
 create mode 100644 static/images/icon_transfer.svg

diff --git a/static/css/notes2.css b/static/css/notes2.css
index b4d7e02..9805b82 100644
--- a/static/css/notes2.css
+++ b/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);
-	}
-
 }
 
 /* ============================================================= */
diff --git a/static/images/icon_transfer.svg b/static/images/icon_transfer.svg
new file mode 100644
index 0000000..59c900e
--- /dev/null
+++ b/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>
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index 291e0b9..47777f5 100644
--- a/static/js/sync.mjs
+++ b/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)
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 1142eda..422b672 100644
--- a/views/pages/notes2.gotmpl
+++ b/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">