fix: address add-channel picker review feedback

Agent-Logs-Url: https://github.com/gortazar/thunderbird-slack-provider/sessions/a2b942e7-1eb1-40d8-a067-47480e6b0b9f

Co-authored-by: gortazar <203272+gortazar@users.noreply.github.com>

Author: Copilot

src/space.html

@@ -62,7 +62,7 @@ <h2>Connect to Slack</h2>
     <div class="dialog">
       <h3 id="add-channel-title">Add Channel</h3>
       <p class="dialog-help">Pick a Slack channel to add.</p>
-      <select id="add-channel-select" class="dialog-input"></select>
+      <select id="add-channel-select" class="dialog-input" aria-label="Channel to add"></select>
       <div id="add-channel-error" class="error-msg hidden"></div>
       <div class="dialog-actions">
         <button id="btn-add-channel-cancel" class="btn btn-secondary">Cancel</button>

src/space.js

@@ -15,6 +15,7 @@ let disableAvatars = false;
 let rateLimitedMode = false;
 let workspaceName = "Slack";
 let addChannelChoices = [];
+let addChannelLoadId = 0;
 
 // ---------------------------------------------------------------------------
 // Startup
@@ -377,18 +378,22 @@ function showAddChannelDialog() {
   const select = document.getElementById("add-channel-select");
   const errorEl = document.getElementById("add-channel-error");
   const confirmBtn = document.getElementById("btn-add-channel-confirm");
+  const cancelBtn = document.getElementById("btn-add-channel-cancel");
+  const loadId = ++addChannelLoadId;
   select.innerHTML = '<option value="">Loading channels...</option>';
   select.disabled = true;
   confirmBtn.disabled = true;
+  confirmBtn.textContent = "Add Channel";
   errorEl.classList.add("hidden");
   dialog.classList.remove("hidden");
-  select.focus();
+  cancelBtn.focus();
   document.addEventListener("keydown", _onDialogKeydown);
 
   Promise.all([
     bg({ type: "get_channels" }),
     bg({ type: "get_watched_channels" }),
   ]).then(([chanRes, watchedRes]) => {
+    if (loadId !== addChannelLoadId || dialog.classList.contains("hidden")) { return; }
     if (chanRes.error) {
       errorEl.textContent = `Could not load channels: ${chanRes.error}`;
       errorEl.classList.remove("hidden");
@@ -414,11 +419,13 @@ function showAddChannelDialog() {
     }
 
     select.innerHTML = addChannelChoices
-      .map((c) => `<option value="${escHtml(c.id)}">#${escHtml(c.name)}</option>`)
+      .map((c) => `<option value="${escHtml(c.id)}">${c.is_private ? "🔒 " : "#"}${escHtml(c.name)}</option>`)
       .join("");
     select.disabled = false;
     confirmBtn.disabled = false;
+    select.focus();
   }).catch((e) => {
+    if (loadId !== addChannelLoadId || dialog.classList.contains("hidden")) { return; }
     errorEl.textContent = `Could not load channels: ${e.message}`;
     errorEl.classList.remove("hidden");
     select.innerHTML = '<option value="">No channels available</option>';
@@ -427,6 +434,8 @@ function showAddChannelDialog() {
 
 function hideAddChannelDialog() {
   document.getElementById("add-channel-dialog").classList.add("hidden");
+  document.getElementById("btn-add-channel-confirm").textContent = "Add Channel";
+  addChannelLoadId++;
   addChannelChoices = [];
   document.removeEventListener("keydown", _onDialogKeydown);
 }

tests/e2e/options.spec.js

@@ -430,8 +430,10 @@ test.describe("space.html – v1.2.0 visual appearance", () => {
     await page.locator(".context-menu-item").filter({ hasText: "Add Channel" }).click();
     await expect(page.locator("#add-channel-dialog")).not.toHaveClass(/hidden/);
     await expect(page.locator("#add-channel-select")).toBeVisible();
+    await expect(page.locator("#add-channel-select")).toHaveAttribute("aria-label", "Channel to add");
     await expect(page.locator("#add-channel-select")).toContainText("No channels available");
     await expect(page.locator("#btn-add-channel-confirm")).toBeDisabled();
+    await expect(page.locator("#btn-add-channel-confirm")).toHaveText("Add Channel");
     await page.screenshot({ path: testInfo.outputPath("add-channel-dialog.png") });
   });
 
@@ -455,7 +457,7 @@ test.describe("space.html – v1.2.0 visual appearance", () => {
     await page.locator(".workspace-header").hover();
     await page.locator(".workspace-menu-btn").click();
     await page.locator(".context-menu-item").filter({ hasText: "Add Channel" }).click();
-    await expect(page.locator("#add-channel-select")).toContainText("#private");
+    await expect(page.locator("#add-channel-select")).toContainText("🔒 private");
     await expect(page.locator("#add-channel-select")).toContainText("#random");
     await expect(page.locator("#add-channel-select")).not.toContainText("#general");
     await page.screenshot({ path: testInfo.outputPath("add-channel-dialog-with-options.png") });