From 2d0fde7909d38dab04b45484e2234d16fee6bc0d Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Fri, 24 Jul 2026 20:25:45 -0500
Subject: [PATCH] Update list context menu grouping

---
 package.json                    |  2 +-
 src/css/style.css               | 24 +++++++----
 src/js/views/feedDetail.view.js | 44 ++++++++++---------
 src/js/views/listDetail.view.js | 75 ++++++++++++++++++---------------
 4 files changed, 79 insertions(+), 66 deletions(-)

diff --git a/package.json b/package.json
index 931d9f08..a9e7ed83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.18.72",
+  "version": "0.18.73",
   "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 7f106bce..a9e86c59 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -6613,14 +6613,6 @@ button.profile-list-item-button.is-disabled {
   }
 }
 
-context-menu-item:last-child {
-  margin-bottom: 0;
-}
-
-context-menu-item:last-child .context-menu-item {
-  margin-bottom: 0;
-}
-
 .context-menu-label {
   font-size: 13px;
   font-weight: 500;
@@ -6644,6 +6636,14 @@ context-menu-item-group {
   display: block;
 }
 
+context-menu-item:last-child {
+  margin-bottom: 0;
+}
+
+context-menu-item:last-child .context-menu-item {
+  margin-bottom: 0;
+}
+
 .context-menu-item {
   margin-bottom: 12px;
   white-space: nowrap;
@@ -6737,11 +6737,17 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
     border-bottom: none;
   }
 
+  .context-menu > context-menu-item {
+    border-bottom: var(--hair) solid var(--post-border-color);
+    border-radius: 0;
+    overflow: hidden;
+    padding: 4px 0;
+  }
+
   .context-menu-item button {
     background-color: transparent;
     padding: 10px 12px;
     border: none;
-    border-bottom: var(--hair) solid var(--post-border-color);
     font-size: 14px;
   }
 }
diff --git a/src/js/views/feedDetail.view.js b/src/js/views/feedDetail.view.js
index 83360314..0141779c 100644
--- a/src/js/views/feedDetail.view.js
+++ b/src/js/views/feedDetail.view.js
@@ -71,27 +71,29 @@ class FeedDetailView extends View {
                   <span>...</span>
                 </button>
                 <context-menu>
-                  <context-menu-item
-                    data-testid="menu-action-feed-open-in-bsky"
-                    icon="open-line"
-                    @click=${() => {
-                      window.open(feedLink, "_blank");
-                    }}
-                  >
-                    Open in bsky.app
-                  </context-menu-item>
-                  <context-menu-item
-                    data-testid="menu-action-feed-copy-link"
-                    icon="link-line"
-                    @click=${() => {
-                      navigator.clipboard.writeText(feedLink);
-                      showToast("Link copied to clipboard", {
-                        style: "success",
-                      });
-                    }}
-                  >
-                    Copy link to feed
-                  </context-menu-item>
+                  <context-menu-item-group>
+                    <context-menu-item
+                      data-testid="menu-action-feed-open-in-bsky"
+                      icon="open-line"
+                      @click=${() => {
+                        window.open(feedLink, "_blank");
+                      }}
+                    >
+                      Open in bsky.app
+                    </context-menu-item>
+                    <context-menu-item
+                      data-testid="menu-action-feed-copy-link"
+                      icon="link-line"
+                      @click=${() => {
+                        navigator.clipboard.writeText(feedLink);
+                        showToast("Link copied to clipboard", {
+                          style: "success",
+                        });
+                      }}
+                    >
+                      Copy link to feed
+                    </context-menu-item>
+                  </context-menu-item-group>
                 </context-menu>
                 <button
                   class=${classnames("pin-feed-button", {
diff --git a/src/js/views/listDetail.view.js b/src/js/views/listDetail.view.js
index d2a89f34..d7fad0d1 100644
--- a/src/js/views/listDetail.view.js
+++ b/src/js/views/listDetail.view.js
@@ -17,6 +17,7 @@ import { showToast } from "/js/toasts.js";
 import "/js/components/infinite-scroll-container.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/edit-list-details-dialog.js";
 import "/js/components/manage-list-members-dialog.js";
 
@@ -158,27 +159,29 @@ class ListDetailView extends View {
                     <span>...</span>
                   </button>
                   <context-menu>
-                    <context-menu-item
-                      data-testid="menu-action-list-open-in-bsky"
-                      icon="open-line"
-                      @click=${() => {
-                        window.open(listPermalink, "_blank");
-                      }}
-                    >
-                      Open in bsky.app
-                    </context-menu-item>
-                    <context-menu-item
-                      data-testid="menu-action-list-copy-link"
-                      icon="link-line"
-                      @click=${() => {
-                        navigator.clipboard.writeText(listPermalink);
-                        showToast("Link copied to clipboard", {
-                          style: "success",
-                        });
-                      }}
-                    >
-                      Copy link to list
-                    </context-menu-item>
+                    <context-menu-item-group>
+                      <context-menu-item
+                        data-testid="menu-action-list-open-in-bsky"
+                        icon="open-line"
+                        @click=${() => {
+                          window.open(listPermalink, "_blank");
+                        }}
+                      >
+                        Open in bsky.app
+                      </context-menu-item>
+                      <context-menu-item
+                        data-testid="menu-action-list-copy-link"
+                        icon="link-line"
+                        @click=${() => {
+                          navigator.clipboard.writeText(listPermalink);
+                          showToast("Link copied to clipboard", {
+                            style: "success",
+                          });
+                        }}
+                      >
+                        Copy link to list
+                      </context-menu-item>
+                    </context-menu-item-group>
                     ${isCurrentUserList
                       ? html`<context-menu-item
                             data-testid="menu-action-list-add-people"
@@ -187,20 +190,22 @@ class ListDetailView extends View {
                           >
                             Add people to list
                           </context-menu-item>
-                          <context-menu-item
-                            data-testid="menu-action-list-edit"
-                            icon="edit-pen-2-line"
-                            @click=${() => handleEditList(list)}
-                          >
-                            Edit list details
-                          </context-menu-item>
-                          <context-menu-item
-                            data-testid="menu-action-list-delete"
-                            icon="delete-bin-line"
-                            @click=${() => handleDeleteList(list)}
-                          >
-                            Delete list
-                          </context-menu-item>`
+                          <context-menu-item-group>
+                            <context-menu-item
+                              data-testid="menu-action-list-edit"
+                              icon="edit-pen-2-line"
+                              @click=${() => handleEditList(list)}
+                            >
+                              Edit list details
+                            </context-menu-item>
+                            <context-menu-item
+                              data-testid="menu-action-list-delete"
+                              icon="delete-bin-line"
+                              @click=${() => handleDeleteList(list)}
+                            >
+                              Delete list
+                            </context-menu-item>
+                          </context-menu-item-group>`
                       : ""}
                   </context-menu>
                 `
-- 
2.51.2