add archive progress styles

bulkArchiveConversations.js

@@ -13,9 +13,20 @@ async function bulkArchiveConversations() {
 
   sendEventAsync("archive", selectedConversations.length);
 
-  for (const element of selectedConversations) {
-    await archiveConversation(element);
+  for (let i = 0; i < selectedConversations.length; i++) {
+    await archiveConversation(selectedConversations[i]);
+    const progress = Math.round(((i + 1) / selectedConversations.length) * 100);
+    chrome.runtime.sendMessage({
+      action: "updateProgress",
+      buttonId: "bulk-archive",
+      progress: progress,
+    });
   }
+
+  chrome.runtime.sendMessage({
+    action: "operationComplete",
+    buttonId: "bulk-archive",
+  });
 }
 
 function getSelectedConversations() {

bulkDeleteConversations.js

@@ -21,11 +21,15 @@ async function bulkDeleteConversations() {
     const progress = Math.round(((i + 1) / selectedConversations.length) * 100);
     chrome.runtime.sendMessage({
       action: "updateProgress",
+      buttonId: "bulk-delete",
       progress: progress,
     });
   }
 
-  chrome.runtime.sendMessage({ action: "deleteComplete" });
+  chrome.runtime.sendMessage({
+    action: "operationComplete",
+    buttonId: "bulk-delete",
+  });
 }
 
 function getSelectedConversations() {

popup.css

@@ -353,8 +353,17 @@ button#bulk-delete {
   transition: background-color 0.3s ease;
 }
 
+button#bulk-archive {
+  background-color: #9b59b6;
+  color: white;
+  position: relative;
+  overflow: hidden;
+  transition: background-color 0.3s ease;
+}
+
 /* New styles for progress bar */
-button#bulk-delete::before {
+button#bulk-delete::before,
+button#bulk-archive::before {
   content: "";
   position: absolute;
   top: 0;
@@ -366,26 +375,34 @@ button#bulk-delete::before {
   transition: transform 0.3s ease-out;
 }
 
-button#bulk-delete::after {
+button#bulk-delete::after,
+button#bulk-archive::after {
   content: attr(data-progress) "%";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: white;
+  color: rgb(149, 20, 20);
   font-weight: bold;
-  z-index: 1;
+  z-index: 100;
 }
 
-button#bulk-delete.progress {
+button#bulk-delete.progress,
+button#bulk-archive.progress {
   cursor: not-allowed;
   background-color: #34495e; /* Darker background when in progress */
 }
 
-button#bulk-delete.progress::before {
+button#bulk-delete.progress::before,
+button#bulk-archive.progress::before {
   transform: translateX(var(--progress, -100%));
 }
 
+button#bulk-delete.progress::before,
+button#bulk-archive.progress::before {
+  animation: pulse 2s infinite;
+}
+
 /* Add a pulsing animation to the progress bar */
 @keyframes pulse {
   0% {
@@ -398,7 +415,3 @@ button#bulk-delete.progress::before {
     opacity: 1;
   }
 }
-
-button#bulk-delete.progress::before {
-  animation: pulse 2s infinite;
-}

popup.js

@@ -21,7 +21,7 @@ function addButtonListener(buttonId, scriptName) {
     chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
       if (tab) {
         if (buttonId === "bulk-delete") {
-          const bulkDeleteButton = document.getElementById("bulk-delete");
+          const bulkDeleteButton = document.getElementById(buttonId);
           bulkDeleteButton.disabled = true;
           bulkDeleteButton.classList.add("progress");
 
@@ -34,18 +34,20 @@ function addButtonListener(buttonId, scriptName) {
   });
 }
 
-function updateProgressBar(progress) {
-  console.log("Updating progress bar:", progress);
-  const bulkDeleteButton = document.getElementById("bulk-delete");
-  bulkDeleteButton.style.setProperty("--progress", `${progress}%`);
-  bulkDeleteButton.setAttribute("data-progress", progress);
+function updateProgressBar(buttonId, progress) {
+  console.log(`Updating progress bar for ${buttonId}:`, progress);
+  const button = document.getElementById(buttonId);
+  button.style.setProperty("--progress", `${progress}%`);
+  button.setAttribute("data-progress", progress);
 
   if (progress === 100 || progress === 0) {
-    bulkDeleteButton.disabled = false;
-    bulkDeleteButton.classList.remove("progress");
-    bulkDeleteButton.textContent = "Bulk Delete"; // Reset button text
+    button.disabled = false;
+    button.classList.remove("progress");
+    button.textContent =
+      buttonId === "bulk-delete" ? "Bulk Delete" : "Bulk Archive";
   } else {
-    bulkDeleteButton.textContent = "Deleting..."; // Change button text during deletion
+    button.textContent =
+      buttonId === "bulk-delete" ? "Deleting..." : "Archiving...";
   }
 }
 
@@ -53,9 +55,12 @@ function updateProgressBar(progress) {
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
   console.log("Received message:", request);
   if (request.action === "updateProgress") {
-    updateProgressBar(request.progress);
-  } else if (request.action === "deleteComplete") {
-    updateProgressBar(0); // This will reset the button text
+    updateProgressBar(request.buttonId, request.progress);
+  } else if (request.action === "operationComplete") {
+    const button = document.getElementById(request.buttonId);
+    button.disabled = false;
+    button.classList.remove("progress");
+    updateProgressBar(request.buttonId, 0);
   }
 });
 
@@ -113,6 +118,9 @@ async function handleBulkArchive() {
   if (localIsPaid) {
     chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
       if (tab) {
+        const bulkArchiveButton = document.getElementById("bulk-archive");
+        bulkArchiveButton.disabled = true;
+        bulkArchiveButton.classList.add("progress");
         loadGlobalsThenExecute(tab.id, "bulkArchiveConversations.js");
       }
     });
@@ -136,6 +144,10 @@ async function handleBulkArchive() {
   if (data.isPaid) {
     chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
       if (tab) {
+        const bulkArchiveButton = document.getElementById("bulk-archive");
+        bulkArchiveButton.disabled = true;
+        bulkArchiveButton.classList.add("progress");
+
         loadGlobalsThenExecute(tab.id, "bulkArchiveConversations.js");
       }
     });