feat(userscript): show pending writes in the panel nav

userscript/manga-bookmark.user.js

@@ -782,6 +782,7 @@
     });
     root.getElementById("backdrop").addEventListener("click", togglePanel);
     root.getElementById("closeBtn").addEventListener("click", togglePanel);
+    root.getElementById("pending").addEventListener("click", () => drain());
 
     for (const [id, tab] of [["tabAll", "all"], ["tabFav", "favorites"], ["tabArc", "archived"]]) {
       root.getElementById(id).addEventListener("click", () => {
@@ -934,6 +935,11 @@
     root.getElementById("panel").classList.toggle("open", panelOpen);
     root.getElementById("backdrop").classList.toggle("open", panelOpen);
 
+    // Silent while everything is synced; honest the moment something is stuck.
+    const pending = root.getElementById("pending");
+    pending.hidden = queueCount() === 0;
+    pending.textContent = "⟳ " + queueCount() + " pending";
+
     // Context header for the current page.
     const ctx = root.getElementById("context");
     ctx.innerHTML = "";
@@ -1132,6 +1138,7 @@
         <a class="chip" href="${WEB_BASE}" target="_blank" rel="noopener">🌐 Web</a>
         <a class="chip" href="https://asurascans.com" target="_blank" rel="noopener">Asura</a>
         <a class="chip" href="https://demonicscans.org" target="_blank" rel="noopener">Demonic</a>
+        <button id="pending" class="chip pending" hidden>⟳ 0 pending</button>
       </div>
       <section id="context"></section>
       <div id="tabs" role="tablist">
@@ -1192,6 +1199,8 @@
       white-space: nowrap;
     }
     .chip:active { opacity: .8; }
+    .chip.pending { background: #4c1d95; border: none; cursor: pointer; }
+    .chip.pending[hidden] { display: none; }
     #context {
       padding: 12px 16px; border-bottom: 1px solid #33333d;
       display: flex; flex-direction: column; gap: 8px;