enhancement: add user feedback on success/error

Author: semanticdata

src/options/options.css

@@ -98,4 +98,8 @@ footer p a {
 
 footer p a:hover {
   color: red;
+}
+
+#status {
+  margin-top: 1rem;
 }

src/options/options.html

@@ -28,6 +28,7 @@ <h1 class="nav-title">
     </form>
     <button id="update">Update</button>
     <button id="reset">Reset</button>
+    <div id="status"></div>
   </main>
 
   <footer>

src/options/options.js

@@ -2,31 +2,72 @@ const sidebarToggle = "_execute_sidebar_action";
 
 // Update UI and set value of textbox
 async function updateUI() {
-  let commands = await browser.commands.getAll();
-  for (command of commands) {
-    if (command.name === sidebarToggle) {
-      document.querySelector("#shortcut").value = command.shortcut;
+  try {
+    const commands = await browser.commands.getAll();
+    for (const command of commands) {
+      if (command.name === sidebarToggle) {
+        document.querySelector("#shortcut").value = command.shortcut;
+      }
     }
+  } catch (error) {
+    console.error("Error updating UI:", error);
   }
 }
 
 // Update shortcut to value of textbox
 async function updateShortcut() {
-  await browser.commands.update({
-    name: sidebarToggle,
-    shortcut: document.querySelector("#shortcut").value,
-  });
+  try {
+    await browser.commands.update({
+      name: sidebarToggle,
+      shortcut: document.querySelector("#shortcut").value,
+    });
+    // Provide visual feedback
+    const statusElement = document.querySelector("#status");
+    if (statusElement) {
+      statusElement.textContent = "Shortcut updated successfully!";
+      setTimeout(() => {
+        statusElement.textContent = "";
+      }, 2000);
+    }
+  } catch (error) {
+    console.error("Error updating shortcut:", error);
+    // Show error message
+    const statusElement = document.querySelector("#status");
+    if (statusElement) {
+      statusElement.textContent = "Error updating shortcut. Please try again.";
+      setTimeout(() => {
+        statusElement.textContent = "";
+      }, 2000);
+    }
+  }
 }
 
 // Reset shortcut and update textbox
 async function resetShortcut() {
-  await browser.commands.reset(sidebarToggle);
-  updateUI();
+  try {
+    await browser.commands.reset(sidebarToggle);
+    await updateUI();
+    // Provide visual feedback
+    const statusElement = document.querySelector("#status");
+    if (statusElement) {
+      statusElement.textContent = "Shortcut reset successfully!";
+      setTimeout(() => {
+        statusElement.textContent = "";
+      }, 2000);
+    }
+  } catch (error) {
+    console.error("Error resetting shortcut:", error);
+  }
 }
 
-// Update UI on page load
-document.addEventListener("DOMContentLoaded", updateUI);
+// Initialize event listeners
+function initEventListeners() {
+  document.querySelector("#update").addEventListener("click", updateShortcut);
+  document.querySelector("#reset").addEventListener("click", resetShortcut);
+}
 
-// Act on update and reset buttons
-document.querySelector("#update").addEventListener("click", updateShortcut);
-document.querySelector("#reset").addEventListener("click", resetShortcut);
+// Update UI and set up event listeners on page load
+document.addEventListener("DOMContentLoaded", () => {
+  updateUI();
+  initEventListeners();
+});