From e7007bef89d188e2425ed5fb1d80692764d6c992 Mon Sep 17 00:00:00 2001
From: sal <sal@salmutt.dev>
Date: Wed, 4 Mar 2026 22:58:19 -0600
Subject: [PATCH] Replace confirm dialogs with inline confirmation bars in
 popup

---
 popup/popup.css |  6 ++++
 popup/popup.js  | 87 +++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 7e4c381..334e632 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -21,6 +21,12 @@ h1 { padding: 10px 12px 6px; font-size: 15px; font-weight: 600; border-bottom: 1
 .regen:hover { border-color: #888; color: #ddd; }
 .del { background: none; border: none; color: #664444; font-size: 15px; cursor: pointer; flex-shrink: 0; padding: 0 2px; line-height: 1; }
 .del:hover { color: #ff613d; }
+.confirm-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #2a1a1a; border-bottom: 1px solid #663333; }
+.confirm-msg { flex: 1; font-size: 11px; color: #ffaa88; }
+.confirm-yes { background: #663333; border: 1px solid #884444; color: #ff613d; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
+.confirm-yes:hover { background: #884444; color: #ff8866; }
+.confirm-no { background: none; border: 1px solid #555; color: #aaa; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
+.confirm-no:hover { border-color: #888; color: #ddd; }
 .actions { padding: 8px 12px; border-top: 1px solid #333; }
 #regen-all { width: 100%; padding: 6px; background: #333; border: 1px solid #555; color: #ccc; border-radius: 4px; cursor: pointer; font-size: 12px; }
 #regen-all:hover { background: #444; color: #fff; }
diff --git a/popup/popup.js b/popup/popup.js
index 616421f..f475549 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -79,15 +79,43 @@ async function loadContainers() {
     del.className = "del";
     del.textContent = "\u00D7";
     del.title = "Delete container";
-    del.addEventListener("click", async () => {
-      if (!confirm(`Delete container "${c.name}"? This removes all cookies and data for this site.`)) return;
-      await browser.runtime.sendMessage({
-        type: "deleteContainer",
-        cookieStoreId: c.cookieStoreId
+    del.addEventListener("click", () => {
+      // Show inline confirmation
+      const existing = row.nextElementSibling;
+      if (existing && existing.classList.contains("confirm-bar")) {
+        existing.remove();
+        return;
+      }
+      // Remove any open panels
+      if (existing && existing.classList.contains("vector-panel")) existing.remove();
+
+      const bar = document.createElement("div");
+      bar.className = "confirm-bar";
+      const msg = document.createElement("span");
+      msg.className = "confirm-msg";
+      msg.textContent = `Delete "${c.name}"?`;
+      bar.appendChild(msg);
+
+      const yes = document.createElement("button");
+      yes.className = "confirm-yes";
+      yes.textContent = "Delete";
+      yes.addEventListener("click", async () => {
+        await browser.runtime.sendMessage({
+          type: "deleteContainer",
+          cookieStoreId: c.cookieStoreId
+        });
+        bar.remove();
+        row.remove();
       });
-      const panel = row.nextElementSibling;
-      if (panel && panel.classList.contains("vector-panel")) panel.remove();
-      row.remove();
+      bar.appendChild(yes);
+
+      const no = document.createElement("button");
+      no.className = "confirm-no";
+      no.textContent = "Cancel";
+      no.addEventListener("click", () => bar.remove());
+      bar.appendChild(no);
+
+      row.after(bar);
     });
     row.appendChild(del);
 
@@ -184,15 +212,40 @@ document.getElementById("prune").addEventListener("click", async (e) => {
   }, 1200);
 });
 
-document.getElementById("reset").addEventListener("click", async (e) => {
-  if (!confirm("Remove all ContainSite containers and data? You will need to log in to all sites again.")) return;
-  e.target.textContent = "Resetting...";
-  await browser.runtime.sendMessage({ type: "resetAll" });
-  e.target.textContent = "Done!";
-  setTimeout(() => {
-    e.target.textContent = "Reset All";
-    loadContainers();
-  }, 1200);
+document.getElementById("reset").addEventListener("click", (e) => {
+  const actions = e.target.closest(".actions");
+  const existing = actions.querySelector(".confirm-bar");
+  if (existing) { existing.remove(); return; }
+
+  const bar = document.createElement("div");
+  bar.className = "confirm-bar";
+  const msg = document.createElement("span");
+  msg.className = "confirm-msg";
+  msg.textContent = "Remove all containers and data?";
+  bar.appendChild(msg);
+
+  const yes = document.createElement("button");
+  yes.className = "confirm-yes";
+  yes.textContent = "Reset";
+  yes.addEventListener("click", async () => {
+    bar.remove();
+    e.target.textContent = "Resetting...";
+    await browser.runtime.sendMessage({ type: "resetAll" });
+    e.target.textContent = "Done!";
+    setTimeout(() => {
+      e.target.textContent = "Reset All";
+      loadContainers();
+    }, 1200);
+  });
+  bar.appendChild(yes);
+
+  const no = document.createElement("button");
+  no.className = "confirm-no";
+  no.textContent = "Cancel";
+  no.addEventListener("click", () => bar.remove());
+  bar.appendChild(no);
+
+  actions.appendChild(bar);
 });
 
 document.getElementById("search").addEventListener("input", (e) => {