added second smaller badge to sync button to indicate status

base/static/index.html

@@ -14,7 +14,7 @@
     <div id="nav-buttons-group">
         <button id="nav-button-reload" title="Refresh module content">
             <i class="fa-solid fa-rotate-right"></i>
-            <span id="notification-badge" class="badge"></span>
+            <span id="sync-badge" class="badge sync-badge"></span>
         </button>
         <button id="nav-button-notifications" title="Notifications">
             <i class="fa-solid fa-bell"></i>

base/static/shell.css

@@ -120,6 +120,10 @@ main {
   position:relative; /* anchor for the badge */
 }
 
+#nav-button-reload{
+  position:relative;
+}
+
 .badge{
   position:absolute;
   top:+4px;
@@ -138,16 +142,24 @@ main {
 }
 
 .badge.visible{
-  display:block;
+    display: block;
+}
+
+.badge.sync-badge{
+  min-width:8px;
+  height:8px;
 }
 
 .badge.sync-requested{
   display:block;
+  background:var(--warn);
 }
 .badge.sync-okay{
   display:block;
+  background:var(--okay);
 }
 .badge.sync-error{
   display:block;
+  background:var(--critical);
 }
 

base/static/shell.js

@@ -176,25 +176,45 @@ document.getElementById("nav-button-reload").onclick = async () => {
     if (!active_tab) {
         return;
     }
-    console.log("syncing backend"); 
+    const badge = document.getElementById("sync-badge");
+    if (!badge) {console.error("sync badge not found."); return;}
+    badge.classList.add("sync-requested");
+
     const res = await fetch(
         `/modules/${active_tab}/sync`,
         {
             method: "POST"
         }
     );
+
     if (!res.ok) {
         console.error("Failed to send sync request!");
         return
     }
 
     const data = await res.json();
-    console.log("success: ", data.success, " response: ", data.msg);
+    const success = data.success
+
+    console.log("success: ", success, " response: ", data.msg);
 
     let now = new Date().toTimeString().slice(0,8);
     last_refreshes[active_tab] = now;
 
     updateLastSyncTooltip()
+
+    // update badge status
+    
+    badge.classList.remove("sync-requested");
+    if (success) {
+        badge.classList.add("sync-okay");
+    } else {
+        badge.classList.add("sync-error");
+    }
+
+    await new Promise(r => setTimeout(r, 2000));
+
+    badge.classList.remove("sync-okay");
+    badge.classList.remove("sync-error");
 };
 
 document.getElementById("nav-button-notifications").onclick = () => {