Replace Add Channel ID entry with selectable Slack channel picker

src/space.html

@@ -61,15 +61,8 @@ <h2>Connect to Slack</h2>
   <div id="add-channel-dialog" class="dialog-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="add-channel-title">
     <div class="dialog">
       <h3 id="add-channel-title">Add Channel</h3>
-      <p class="dialog-help">Enter the Slack channel ID (e.g. <code>C01234ABCDE</code>) found in the channel URL under <em>/archives/…</em>.</p>
-      <input
-        type="text"
-        id="add-channel-input"
-        class="dialog-input"
-        placeholder="C01234ABCDE"
-        autocomplete="off"
-        spellcheck="false"
-      />
+      <p class="dialog-help">Pick a Slack channel to add.</p>
+      <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

@@ -14,6 +14,9 @@
 let disableAvatars = false;
 let rateLimitedMode = false;
 let workspaceName = "Slack";
+let addChannelChoices = [];
+let addChannelLoadId = 0;
+const ADD_CHANNEL_BUTTON_TEXT = "Add Channel";
 
 // ---------------------------------------------------------------------------
 // Startup
@@ -53,7 +56,7 @@
   // Wire Add Channel dialog buttons
   document.getElementById("btn-add-channel-cancel").addEventListener("click", hideAddChannelDialog);
   document.getElementById("btn-add-channel-confirm").addEventListener("click", addChannel);
-  document.getElementById("add-channel-input").addEventListener("keydown", (e) => {
+  document.getElementById("add-channel-select").addEventListener("keydown", (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
       addChannel();
@@ -206,7 +209,7 @@
   const sorted = [...channels].sort((a, b) => {
     const au = unreadSet.has(a.id) ? 0 : 1;
     const bu = unreadSet.has(b.id) ? 0 : 1;
     if (au !== bu) return au - bu;
     return a.name.localeCompare(b.name);
   });
 
@@ -216,7 +219,7 @@
     item.setAttribute("role", "option");
     item.dataset.channelId = ch.id;
 
     if (unreadSet.has(ch.id)) item.classList.add("unread");
     if (currentChannel && currentChannel.id === ch.id) item.classList.add("active");
 
     const prefix = ch.is_private ? "🔒" : "#";
@@ -373,21 +376,76 @@
 
 function showAddChannelDialog() {
   const dialog = document.getElementById("add-channel-dialog");
-  document.getElementById("add-channel-input").value = "";
-  document.getElementById("add-channel-error").classList.add("hidden");
+  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_BUTTON_TEXT;
+  errorEl.classList.add("hidden");
   dialog.classList.remove("hidden");
-  document.getElementById("add-channel-input").focus();
+  cancelBtn.focus();
   document.addEventListener("keydown", _onDialogKeydown);
+
+  Promise.all([
+    bg({ type: "get_channels" }),
+    bg({ type: "get_watched_channels" }),
+  ]).then(([chanRes, watchedRes]) => {
+    if (loadId !== addChannelLoadId) { return; } // Ignore stale async responses
+    if (dialog.classList.contains("hidden")) { return; } // Ignore updates for closed dialog
+    if (chanRes.error) {
+      errorEl.textContent = `Could not load channels: ${chanRes.error}`;
+      errorEl.classList.remove("hidden");
+      select.innerHTML = '<option value="">No channels available</option>';
+      return;
+    }
+
+    if (watchedRes.error) {
+      errorEl.textContent = `Could not load watched channels: ${watchedRes.error}`;
+      errorEl.classList.remove("hidden");
+      select.innerHTML = '<option value="">No channels available</option>';
+      return;
+    }
+
+    const watchedIds = new Set((watchedRes.channels || []).map((c) => c.id));
+    addChannelChoices = (chanRes.channels || [])
+      .filter((c) => c.is_member && !watchedIds.has(c.id))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    if (addChannelChoices.length === 0) {
+      select.innerHTML = '<option value="">No channels available</option>';
+      return;
+    }
+
+    select.innerHTML = addChannelChoices
+      .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) { return; } // Ignore stale async responses
+    if (dialog.classList.contains("hidden")) { return; } // Ignore updates for closed dialog
+    errorEl.textContent = `Could not load channels: ${e.message}`;
+    errorEl.classList.remove("hidden");
+    select.innerHTML = '<option value="">No channels available</option>';
+  });
 }
 
 function hideAddChannelDialog() {
   document.getElementById("add-channel-dialog").classList.add("hidden");
+  document.getElementById("btn-add-channel-confirm").textContent = ADD_CHANNEL_BUTTON_TEXT;
+  addChannelLoadId++;
+  addChannelChoices = [];
   document.removeEventListener("keydown", _onDialogKeydown);
 }
 
 async function addChannel() {
-  const input = document.getElementById("add-channel-input").value.trim();
-  if (!input) { return; }
+  const selectedId = document.getElementById("add-channel-select").value;
+  if (!selectedId) { return; }
 
   const errorEl = document.getElementById("add-channel-error");
   const confirmBtn = document.getElementById("btn-add-channel-confirm");
@@ -397,14 +455,12 @@
   errorEl.classList.add("hidden");
 
   try {
-    const res = await bg({ type: "get_channel_info", channelId: input });
-    if (res.error) {
-      errorEl.textContent = `Channel not found: ${res.error}`;
+    const ch = addChannelChoices.find((c) => c.id === selectedId);
+    if (!ch) {
+      errorEl.textContent = "Please pick a valid channel.";
       errorEl.classList.remove("hidden");
       return;
     }
-
-    const ch = res.channel;
     await bg({
       type: "add_watched_channel",
       channel: {
@@ -425,7 +481,7 @@
     errorEl.classList.remove("hidden");
   } finally {
     confirmBtn.disabled = false;
-    confirmBtn.textContent = "Add Channel";
+    confirmBtn.textContent = ADD_CHANNEL_BUTTON_TEXT;
   }
 }
 

tests/e2e/options.spec.js

@@ -420,6 +420,7 @@ test.describe("space.html – v1.2.0 visual appearance", () => {
             { id: "C001", name: "general", is_member: true, is_private: false },
           ],
         },
+        get_watched_channels: { channels: [{ id: "C001", name: "general", is_member: true, is_private: false }] },
         get_unread: { unreadChannels: [] },
       },
     });
@@ -428,9 +429,40 @@ test.describe("space.html – v1.2.0 visual appearance", () => {
     await page.locator(".workspace-menu-btn").click();
     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") });
   });
 
+  test("Add Channel dialog lists addable channels", async ({ page }, testInfo) => {
+    await goToSpace(page, {
+      storageData: { rateLimitedMode: true },
+      responses: {
+        get_token: { token: "SET" },
+        get_workspace_name: { name: "Acme Corp" },
+        get_watched_channels: { channels: [{ id: "C001", name: "general", is_member: true, is_private: false }] },
+        get_channels: {
+          channels: [
+            { id: "C001", name: "general", is_member: true, is_private: false },
+            { id: "C002", name: "random", is_member: true, is_private: false },
+            { id: "C003", name: "private", is_member: true, is_private: true },
+          ],
+        },
+        get_unread: { unreadChannels: [] },
+      },
+    });
+    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("#random");
+    await expect(page.locator("#add-channel-select")).not.toContainText("#general");
+    await page.screenshot({ path: testInfo.outputPath("add-channel-dialog-with-options.png") });
+  });
+
   test("channel context menu opens on right-click", async ({ page }, testInfo) => {
     await goToSpace(page, {
       responses: {