From 6d905be1f8375898868fd0081e4f2923d6f104f2 Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@gmail.com>
Date: Sat, 9 May 2026 11:53:38 +0200
Subject: [PATCH] show header faster on page load

---
 copyparty/web/browser.css  |  2 ++
 copyparty/web/browser.html | 18 ++++++++++++--
 copyparty/web/browser.js   | 50 +++++++++++++++++++++++---------------
 3 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index a20c53b4..b30f8384 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1603,6 +1603,7 @@ html:not(.e):not(.d) #up_quick .btn.on {
 	border-radius: 5px;
 
 	border: var(--transparent) solid 1px;
+	color: #07c;
 	color: var(--a);
 	font-size: 1.5em;
 	padding: .15em .4em;
@@ -1855,6 +1856,7 @@ input.ssconf_v {
 #wfp{
 	margin: 0 .3em 0 0;
 	white-space: nowrap;
+	display: flex;
 }
 #wfp a {
 	display: inline-block;
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index d967b735..1b55c506 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -54,7 +54,11 @@
 	<div id="wrap">
 
 		<div id="pathBar">
-			<h2 id="wfp" class="shifted"></h2>
+			<h2 id="wfp" class="shifted">
+				<a href="#" id="gou" class="btn">⬆️</a>
+				<a href="#" id="gop" class="btn">⬅️</a>
+				<a href="#" id="gon" class="btn">➡️</a>
+			</h2>
 			<h1 id="path">
 				{%- for n in vpnodes %}
 				<a href="{{ r }}/{{ n[0] }}">{{ n[1] }}</a>
@@ -62,7 +66,17 @@
 			</h1>
 
 			<div id="actionsArea">
-				<div id="ops"></div>
+				<div id="ops">
+					<a href="#" id="opa_srch" data-perm="read" data-dep="idx" data-dest="search">🔎</a>
+					<a href="#" id="opa_del" data-perm="write" data-dest="unpost">🧯</a>
+					<a href="#" id="opa_up" data-dest="up2k">🚀</a>
+					<a href="#" id="opa_bup" data-perm="write" data-dest="bup">🎈</a>
+					<a href="#" id="opa_mkd" data-perm="write" data-dest="mkdir"><p class="overlay_plus">+</p>📂</a>
+					<a href="#" id="opa_msg" data-dest="msg">📟</a>
+					<a href="#" id="opa_cfg" data-dest="cfg">⚙️</a>
+					<a href="#" id="opa_acc" data-dest="acc"><span id="acc_pfp" class="pfp">👤</span></a>
+					<div id="opdesc"></div>
+				</div>
 
 				<div id="srchfolder_div">
 					<input id="folder_search" type="text" />
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 03fbde1d..d0507f21 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -819,20 +819,32 @@ if (!Ls[lang])
 modal.load();
 
 
-// toolbar
-ebi('ops').innerHTML = (
-	//(IE ? '<span id="noie">' + L.ot_noie + '</span>' : '') +
-	'<a href="#" id="opa_srch" data-perm="read" data-dep="idx" data-dest="search" tt="' + L.ot_search + '">' + (fun_tgl ? '🔎' : 'srch') + '</a>' +
-	(have_del ? '<a href="#" id="opa_del" data-perm="write" data-dest="unpost" tt="' + L.ot_unpost + '">' + (fun_tgl ? '🧯' : 'undo') + '</a>' : '') +
-	'<a href="#" id="opa_up" data-dest="up2k">' + (fun_tgl ? '🚀' : 'upload') + '</a>' +
-	'<a href="#" id="opa_bup" data-perm="write" data-dest="bup" tt="' + L.ot_bup + '">' + (fun_tgl ? '🎈' : 'bup') + '</a>' +
-	'<a href="#" id="opa_mkd" data-perm="write" data-dest="mkdir" tt="' + L.ot_mkdir + '"><p class="overlay_plus">+</p>📂</a>' +
-	//'<a href="#" id="opa_md" data-perm="read write" data-dest="new_md" tt="' + L.ot_md + '"><p class="overlay_plus">+</p>📝</a>' +
-	'<a href="#" id="opa_msg" data-dest="msg" tt="' + L.ot_msg + '">' + (fun_tgl ? '📟' : 'msg') + '</a>' +
-	'<a href="#" id="opa_cfg" data-dest="cfg" tt="' + L.ot_cfg + '">' + (fun_tgl ? '⚙️' : 'conf') + '</a>' +
-	'<a href="#" id="opa_acc" data-dest="acc" tt=""><span id="acc_pfp"' + (fun_tgl ? ' class="pfp"' : '') + '>' + (fun_tgl ? '👤' : 'acc') + '</span></a>' +
-	'<div id="opdesc"></div>'
-);
+var opa = QSA('#ops>a, #wfp>a')
+for(var i = 0; i <opa.length; i++)
+	get_tt(opa[i])
+
+function get_tt(el) {
+	var tlid = 'tt_' + el.id
+	if(!L[tlid] && el.getAttribute('data-dest'))
+		tlid = 'ot_' + el.getAttribute('data-dest')
+	if(!L[tlid])
+		tlid = el.id
+	if(L[tlid])
+		el.setAttribute('tt', L[tlid])
+}
+if(!have_del)
+	ebi('opa_del').style.display = 'none'
+
+if(!fun_tgl){
+	ebi('opa_srch').innerHTML = 'search'
+	ebi('opa_del').innerHTML = 'undo'
+	ebi('opa_up').innerHTML = 'upload'
+	ebi('opa_bup').innerHTML = 'bup'
+	ebi('opa_msg').innerHTML = 'message'
+	ebi('opa_cfg').innerHTML = 'settings'
+	ebi('opa_acc').innerHTML = 'account'
+	clmod(ebi('acc_pfp'), 'pfp', false)
+}
 
 // mkdir + md
 function mktemp(is_dir) {
@@ -4172,10 +4184,10 @@ function eval_hash() {
 	var svg_right = svg_box + '<path d="M13 6L19 12M19 12L13 18M19 12H5" ' + svg_options +'/>';
 	var svg_up = svg_box + '<path d="M12 19V5M18 11L12 5L6 11" ' + svg_options +'/>';
 
-	ebi('wfp').innerHTML = (
-		'<a href="#" id="gop" class="btn" tt="' + L.gop + '">' + svg_left + '</a>' +
-		'<a href="#" id="gon" class="btn" tt="' + L.gon + '">' + svg_right + '</a>' +
-		'<a href="#" id="gou" class="btn" tt="' + L.gou + '">' + svg_up + '</a>');
+	ebi('gop').innerHTML = svg_left;
+	ebi('gon').innerHTML = svg_right;
+	ebi('gou').innerHTML = svg_up;
+	
 	ebi('gop').onclick = function () { tree_neigh(-1); }
 	ebi('gon').onclick = function () { tree_neigh(1); }
 	ebi('gou').onclick = function () { tree_up(true); }
@@ -8800,7 +8812,7 @@ var wfp_debounce = (function () {
 			r.n = 1;
 			clearTimeout(r.t);
 			r.t = setTimeout(r.reset, 300);
-			ebi('wfp').style.opacity = 0.1;
+			//ebi('wfp').style.opacity = 0.1;
 		}
 	};
 	r.show = function () {