From 5baba9e723395261b2b093fbe0efd28a723f3529 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Sat, 1 Aug 2026 00:46:15 -0500
Subject: [PATCH] Add mute/leave buttons to 1-1 chats

---
 package.json                                  |   2 +-
 src/css/style.css                             |  10 +
 src/js/components/context-menu-item.js        |  10 +-
 src/js/views/chatDetail.view.js               | 101 +++++++-
 tests/e2e/mockServer.js                       |  11 +
 tests/e2e/specs/views/chatDetail.view.test.js | 229 ++++++++++++++++++
 6 files changed, 354 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index bd253e93..74277e87 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.18.139",
+  "version": "0.18.140",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
diff --git a/src/css/style.css b/src/css/style.css
index 95a541e4..5d3cc9f7 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -7066,6 +7066,16 @@ context-menu-item > button > svg.context-menu-item-icon {
   display: block;
 }
 
+context-menu-item > button.context-menu-item-style-danger {
+  color: var(--error-color);
+}
+
+context-menu-item
+  > button.context-menu-item-style-danger
+  > .context-menu-item-icon {
+  color: var(--error-color);
+}
+
 context-menu-item > a {
   padding: 14px 16px;
   width: 100%;
diff --git a/src/js/components/context-menu-item.js b/src/js/components/context-menu-item.js
index 043f5160..b7a24880 100644
--- a/src/js/components/context-menu-item.js
+++ b/src/js/components/context-menu-item.js
@@ -4,7 +4,7 @@ import "/js/components/app-icon.js";
 
 class ContextMenuItem extends Component {
   static get observedAttributes() {
-    return ["disabled", "icon"];
+    return ["disabled", "icon", "item-style"];
   }
 
   connectedCallback() {
@@ -15,6 +15,7 @@ class ContextMenuItem extends Component {
     this.innerHTML = "";
     this.disabled = this.getAttribute("disabled") !== null;
     this.icon = this.getAttribute("icon");
+    this.itemStyle = this.getAttribute("item-style");
     this.render();
     this._initialized = true;
   }
@@ -27,6 +28,8 @@ class ContextMenuItem extends Component {
       this.disabled = this.getAttribute("disabled") !== null;
     } else if (name === "icon") {
       this.icon = this.getAttribute("icon");
+    } else if (name === "item-style") {
+      this.itemStyle = this.getAttribute("item-style");
     }
     this.render();
   }
@@ -40,8 +43,11 @@ class ContextMenuItem extends Component {
   }
 
   render() {
+    const buttonClass = this.itemStyle
+      ? `context-menu-item-style-${this.itemStyle}`
+      : "";
     render(
-      html`<button ?disabled=${this.disabled}>
+      html`<button class=${buttonClass} ?disabled=${this.disabled}>
         ${this._children}
         ${this._iconElement
           ? this._iconElement
diff --git a/src/js/views/chatDetail.view.js b/src/js/views/chatDetail.view.js
index 01502e10..33af1e6a 100644
--- a/src/js/views/chatDetail.view.js
+++ b/src/js/views/chatDetail.view.js
@@ -29,6 +29,7 @@ import {
 } from "/js/templates/postEmbed.template.js";
 import { CHAT_MESSAGES_PAGE_SIZE } from "/js/config.js";
 import { showToast } from "/js/toasts.js";
+import { confirmModal } from "/js/modals/confirm.modal.js";
 import {
   wait,
   raf,
@@ -54,6 +55,7 @@ import "/js/components/emoji-picker-dialog.js";
 import "/js/components/reactions-dialog.js";
 import "/js/components/context-menu.js";
 import "/js/components/context-menu-item.js";
+import "/js/components/context-menu-item-group.js";
 import "/js/components/app-icon.js";
 class ChatDetailView extends View {
   async render({
@@ -79,6 +81,7 @@ class ChatDetailView extends View {
     const state = new ReactiveStore("chatDetailView");
     state.$loadingEnabled = new Signal.State(false);
     state.$isSendingMessage = new Signal.State(false);
+    state.$isMuteSaving = new Signal.State(false);
     state.$activeMessageId = new Signal.State(null);
     state.$paletteMessageId = new Signal.State(null);
     state.$reactionsDialogMessageId = new Signal.State(null);
@@ -589,6 +592,56 @@ class ChatDetailView extends View {
       }
     }
 
+    async function handleToggleMute(convo, muted) {
+      state.$isMuteSaving.set(true);
+      try {
+        await dataLayer.mutations.setConvoMuted(convo, muted);
+        showToast(muted ? "Conversation muted" : "Conversation unmuted");
+      } catch (err) {
+        console.error(err);
+        showToast(
+          muted
+            ? "Failed to mute conversation"
+            : "Failed to unmute conversation",
+          { style: "error" },
+        );
+      } finally {
+        state.$isMuteSaving.set(false);
+      }
+    }
+
+    async function handleLeave(convo) {
+      const didLeave = await confirmModal(
+        "Are you sure you want to leave this conversation? It will be removed from your inbox.",
+        {
+          title: "Leave conversation",
+          confirmButtonText: "Leave conversation",
+          confirmButtonStyle: "danger",
+          pendingText: "Leaving",
+          onConfirm: async () => {
+            try {
+              await dataLayer.mutations.leaveConvo(convo);
+            } catch (err) {
+              if (
+                err instanceof ApiError &&
+                err.data?.error === "InvalidConvo"
+              ) {
+                showToast("Conversation not found.", { style: "error" });
+                throw err;
+              }
+              console.error(err);
+              showToast("Could not leave conversation", { style: "error" });
+              throw err;
+            }
+          },
+        },
+      );
+      if (didLeave) {
+        router.go("/messages");
+        showToast("Left conversation");
+      }
+    }
+
     function groupMessages(messages, currentUserDid) {
       const groups = [];
       let currentGroup = null;
@@ -1380,6 +1433,7 @@ class ChatDetailView extends View {
         convoRequestStatus.error || messagesRequestStatus.error;
       const hasMore = !!messagesData?.cursor;
       const isSendingMessage = state.$isSendingMessage.get();
+      const isMuteSaving = state.$isMuteSaving.get();
       const isLocked = !!groupDetails && groupDetails.lockStatus !== "unlocked";
       const canReactNow = !!convo && convo.status !== "disabled" && !isLocked;
       const convoPermalink = getPermalinkForConvo(convoId);
@@ -1390,6 +1444,8 @@ class ChatDetailView extends View {
         stagedReply && stagedReply.sender
           ? getMemberProfile(convo, stagedReply.sender.did)
           : null;
+      const otherMember =
+        !groupDetails && convo ? getOtherMember(currentUser, convo) : null;
       let title = "";
       let subtitle = "";
       if (groupDetails) {
@@ -1397,12 +1453,9 @@ class ChatDetailView extends View {
         subtitle = `${groupDetails.memberCount} ${
           groupDetails.memberCount === 1 ? "member" : "members"
         }`;
-      } else {
-        const otherMember = getOtherMember(currentUser, convo);
-        if (otherMember) {
-          title = getDisplayName(otherMember);
-          subtitle = otherMember?.handle ? `@${otherMember.handle}` : "";
-        }
+      } else if (otherMember) {
+        title = getDisplayName(otherMember);
+        subtitle = otherMember?.handle ? `@${otherMember.handle}` : "";
       }
 
       render(
@@ -1465,6 +1518,42 @@ class ChatDetailView extends View {
                       Group chat settings
                     </context-menu-item>`
                   : ""}
+                ${convo && !groupDetails
+                  ? html`
+                      <context-menu-item-group>
+                        ${otherMember
+                          ? html`<context-menu-item
+                              data-testid="menu-action-go-to-profile"
+                              icon="user-line"
+                              @click=${() => {
+                                router.go(linkToProfile(otherMember));
+                              }}
+                            >
+                              Go to profile
+                            </context-menu-item>`
+                          : ""}
+                        <context-menu-item
+                          data-testid="menu-action-mute"
+                          data-teststate=${convo.muted ? "muted" : "unmuted"}
+                          icon=${convo.muted ? "bell-line" : "bell-off-line"}
+                          ?disabled=${isMuteSaving}
+                          @click=${() => handleToggleMute(convo, !convo.muted)}
+                        >
+                          ${convo.muted
+                            ? "Unmute conversation"
+                            : "Mute conversation"}
+                        </context-menu-item>
+                      </context-menu-item-group>
+                      <context-menu-item
+                        data-testid="menu-action-leave"
+                        icon="door-exit-line"
+                        item-style="danger"
+                        @click=${() => handleLeave(convo)}
+                      >
+                        Leave conversation
+                      </context-menu-item>
+                    `
+                  : ""}
               </context-menu>
             `,
           })}
diff --git a/tests/e2e/mockServer.js b/tests/e2e/mockServer.js
index 2a5fbc63..33a691b4 100644
--- a/tests/e2e/mockServer.js
+++ b/tests/e2e/mockServer.js
@@ -32,6 +32,7 @@ export class MockServer {
     this.sendMessageFailure = null;
     this.createRecordFailures = new Map();
     this.convoForMembersError = null;
+    this.leaveConvoError = null;
     this.typeaheadProfiles = [];
     this.typeaheadDelayMs = 0;
     this.externalLinkCards = new Map();
@@ -1191,6 +1192,16 @@ export class MockServer {
     });
 
     await page.route("**/xrpc/chat.bsky.convo.leaveConvo*", (route) => {
+      if (this.leaveConvoError) {
+        return route.fulfill({
+          status: 400,
+          contentType: "application/json",
+          body: JSON.stringify({
+            error: this.leaveConvoError,
+            message: this.leaveConvoError,
+          }),
+        });
+      }
       const body = route.request().postDataJSON();
       this.convos = this.convos.filter((c) => c.id !== body?.convoId);
       return route.fulfill({
diff --git a/tests/e2e/specs/views/chatDetail.view.test.js b/tests/e2e/specs/views/chatDetail.view.test.js
index 12253524..27576219 100644
--- a/tests/e2e/specs/views/chatDetail.view.test.js
+++ b/tests/e2e/specs/views/chatDetail.view.test.js
@@ -954,6 +954,235 @@ test.describe("Chat detail view", () => {
     ).toHaveCount(0);
   });
 
+  test("should show mute and leave menu items for 1-1 chats", async ({
+    page,
+  }) => {
+    const mockServer = new MockServer();
+    const alice = createProfile({
+      did: "did:plc:alice1",
+      handle: "alice.bsky.social",
+      displayName: "Alice",
+    });
+    const convo = createConvo({
+      id: "convo-1",
+      otherMember: alice,
+    });
+    mockServer.addConvos([convo]);
+    await mockServer.setup(page);
+
+    await login(page);
+    await page.goto("/messages/convo-1");
+
+    const chatDetailView = page.locator("#chat-detail-view");
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+
+    const muteItem = chatDetailView.locator('[data-testid="menu-action-mute"]');
+    await expect(muteItem).toBeVisible();
+    await expect(muteItem).toHaveAttribute("data-teststate", "unmuted");
+    await expect(muteItem).toContainText("Mute conversation");
+    await expect(
+      chatDetailView.locator('[data-testid="menu-action-leave"]'),
+    ).toBeVisible();
+  });
+
+  test("should navigate to profile from the chat menu", async ({ page }) => {
+    const mockServer = new MockServer();
+    const alice = createProfile({
+      did: "did:plc:alice1",
+      handle: "alice.bsky.social",
+      displayName: "Alice",
+    });
+    const convo = createConvo({
+      id: "convo-1",
+      otherMember: alice,
+    });
+    mockServer.addConvos([convo]);
+    await mockServer.setup(page);
+
+    await login(page);
+    await page.goto("/messages/convo-1");
+
+    const chatDetailView = page.locator("#chat-detail-view");
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+    await chatDetailView
+      .locator('[data-testid="menu-action-go-to-profile"]')
+      .click();
+
+    await expect(page).toHaveURL(/\/profile\/alice\.bsky\.social/, {
+      timeout: 10000,
+    });
+  });
+
+  test("should not show mute and leave menu items for group chats", async ({
+    page,
+  }) => {
+    const mockServer = new MockServer();
+    const alice = createProfile({
+      did: "did:plc:alice1",
+      handle: "alice.bsky.social",
+      displayName: "Alice",
+    });
+    const convo = createGroupConvo({
+      id: "convo-1",
+      name: "Cool Group",
+      otherMembers: [alice],
+    });
+    mockServer.addConvos([convo]);
+    await mockServer.setup(page);
+
+    await login(page);
+    await page.goto("/messages/convo-1");
+
+    const chatDetailView = page.locator("#chat-detail-view");
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+    await expect(
+      chatDetailView.locator('[data-testid="menu-action-group-chat-details"]'),
+    ).toBeVisible();
+    await expect(
+      chatDetailView.locator('[data-testid="menu-action-mute"]'),
+    ).toHaveCount(0);
+    await expect(
+      chatDetailView.locator('[data-testid="menu-action-leave"]'),
+    ).toHaveCount(0);
+  });
+
+  test("should mute a 1-1 conversation from the chat menu", async ({
+    page,
+  }) => {
+    const mockServer = new MockServer();
+    const alice = createProfile({
+      did: "did:plc:alice1",
+      handle: "alice.bsky.social",
+      displayName: "Alice",
+    });
+    const convo = createConvo({
+      id: "convo-1",
+      otherMember: alice,
+    });
+    mockServer.addConvos([convo]);
+    await mockServer.setup(page);
+
+    await login(page);
+    await page.goto("/messages/convo-1");
+
+    const chatDetailView = page.locator("#chat-detail-view");
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+    await chatDetailView.locator('[data-testid="menu-action-mute"]').click();
+
+    await expect(page.locator('[data-testid="toast"]')).toContainText(
+      "Conversation muted",
+    );
+    await expect(
+      chatDetailView.locator('[data-testid="header-muted-icon"]'),
+    ).toBeVisible();
+
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+    const muteItem = chatDetailView.locator('[data-testid="menu-action-mute"]');
+    await expect(muteItem).toHaveAttribute("data-teststate", "muted");
+    await expect(muteItem).toContainText("Unmute conversation");
+  });
+
+  test("should unmute a 1-1 conversation from the chat menu", async ({
+    page,
+  }) => {
+    const mockServer = new MockServer();
+    const alice = createProfile({
+      did: "did:plc:alice1",
+      handle: "alice.bsky.social",
+      displayName: "Alice",
+    });
+    const convo = createConvo({
+      id: "convo-1",
+      otherMember: alice,
+      muted: true,
+    });
+    mockServer.addConvos([convo]);
+    await mockServer.setup(page);
+
+    await login(page);
+    await page.goto("/messages/convo-1");
+
+    const chatDetailView = page.locator("#chat-detail-view");
+    await expect(
+      chatDetailView.locator('[data-testid="header-muted-icon"]'),
+    ).toBeVisible();
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+    await chatDetailView.locator('[data-testid="menu-action-mute"]').click();
+
+    await expect(page.locator('[data-testid="toast"]')).toContainText(
+      "Conversation unmuted",
+    );
+    await expect(
+      chatDetailView.locator('[data-testid="header-muted-icon"]'),
+    ).toHaveCount(0);
+  });
+
+  test("should leave a 1-1 conversation from the chat menu", async ({
+    page,
+  }) => {
+    const mockServer = new MockServer();
+    const alice = createProfile({
+      did: "did:plc:alice1",
+      handle: "alice.bsky.social",
+      displayName: "Alice",
+    });
+    const convo = createConvo({
+      id: "convo-1",
+      otherMember: alice,
+    });
+    mockServer.addConvos([convo]);
+    await mockServer.setup(page);
+
+    await login(page);
+    await page.goto("/messages/convo-1");
+
+    const chatDetailView = page.locator("#chat-detail-view");
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+    await chatDetailView.locator('[data-testid="menu-action-leave"]').click();
+
+    await page.locator('[data-testid="modal-confirm-button"]').click();
+
+    await expect(page).toHaveURL(/\/messages$/, { timeout: 10000 });
+    await expect(page.locator('[data-testid="toast"]')).toContainText(
+      "Left conversation",
+    );
+  });
+
+  test("should keep the leave modal open when leaveConvo fails", async ({
+    page,
+  }) => {
+    const mockServer = new MockServer();
+    const alice = createProfile({
+      did: "did:plc:alice1",
+      handle: "alice.bsky.social",
+      displayName: "Alice",
+    });
+    const convo = createConvo({
+      id: "convo-1",
+      otherMember: alice,
+    });
+    mockServer.addConvos([convo]);
+    mockServer.leaveConvoError = "InvalidConvo";
+    await mockServer.setup(page);
+
+    await login(page);
+    await page.goto("/messages/convo-1");
+
+    const chatDetailView = page.locator("#chat-detail-view");
+    await chatDetailView.locator('[data-testid="chat-menu-button"]').click();
+    await chatDetailView.locator('[data-testid="menu-action-leave"]').click();
+
+    await page.locator('[data-testid="modal-confirm-button"]').click();
+
+    await expect(page.locator('[data-testid="toast"]')).toContainText(
+      "Conversation not found",
+    );
+    await expect(
+      page.locator('[data-testid="modal-confirm-button"]'),
+    ).toBeVisible();
+    await expect(page).not.toHaveURL(/\/messages$/);
+  });
+
   test("should not offer group chat details when the session lacks the members scope", async ({
     page,
   }) => {
-- 
2.51.2