Recently Written · git

commit 9cb786cc7cc09704beed8e6c58e6a527d882e163
equwal <truex@equwal.com>
2026-09-21 05:08:57 -0700

Popup: the add form takes the place of the list; a demo in the README

With the list above it, the form was at the bottom of a long popup and
the user had to scroll to it.

 README.md |  4 ++++
 popup.js  | 22 ++++++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 8461903..7224671 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
 
 Your [sbm](https://github.com/equwal/sbm) bookmarks in the browser.
 
+![bm adds a page in the terminal; the add-on shows it at once and adds another, which bm then shows](https://raw.githubusercontent.com/equwal/sbm-sync/master/demo/sbm-demo.gif)
+
+([MP4](https://github.com/equwal/sbm-sync/raw/master/demo/sbm-demo.mp4), 80 seconds.)
+
 - **Search as you type** in the popup (Alt+Shift+M), with the fuzzy match of
   fzf. Enter opens the first match. Text that is no bookmark opens as an
   address, or as a web search, as in bm.
diff --git a/popup.js b/popup.js
index 5e27ac5..de33da9 100644
--- a/popup.js
+++ b/popup.js
@@ -83,6 +83,14 @@ $("options").addEventListener("click", (e) => {
   window.close();
 });
 
+/** The form takes the place of the list while it is open. */
+function showForm(on) {
+  for (const id of ["search", "list", "add-page"]) $(id).hidden = on;
+  $("add").hidden = !on;
+  if (on) $("empty").hidden = true;
+  else render();
+}
+
 $("add-page").addEventListener("click", async () => {
   const [tab] = await api.tabs.query({ active: true, currentWindow: true });
   $("url").value = tab && tab.url ? tab.url : "";
@@ -90,15 +98,11 @@ $("add-page").addEventListener("click", async () => {
   $("tags").value = "";
   const known = [...new Set(all.flatMap((b) => b.tags))].sort();
   $("known").textContent = known.length ? "Tags in your file: " + known.join(" ") : "";
-  $("add").hidden = false;
-  $("add-page").hidden = true;
+  showForm(true);
   $("tags").focus();
 });
 
-$("cancel").addEventListener("click", () => {
-  $("add").hidden = true;
-  $("add-page").hidden = false;
-});
+$("cancel").addEventListener("click", () => showForm(false));
 
 $("add").addEventListener("submit", async (e) => {
   e.preventDefault();
@@ -109,11 +113,9 @@ $("add").addEventListener("submit", async (e) => {
   };
   try {
     const r = await send({ type: "add", bookmark });
-    $("status").textContent = r.existing ? "Already a bookmark: " + (r.existing.desc || r.existing.url) : "Bookmark added.";
-    $("add").hidden = true;
-    $("add-page").hidden = false;
+    showForm(false);
     await load();
-    if (r.existing) $("status").textContent = "Already a bookmark: " + (r.existing.desc || r.existing.url);
+    $("status").textContent = r.existing ? "Already a bookmark: " + (r.existing.desc || r.existing.url) : "Bookmark added.";
   } catch (err) {
     $("status").textContent = "Cannot add: " + err.message;
   }