fix(ui): show active comment options (#46747)

packages/app/component-tests/line-comment.spec.ts

@@ -0,0 +1,13 @@
+import { expect, story } from "../../storybook/playwright/story"
+
+story("keeps the comment options button pressed while its menu is open", async ({ mount, page }) => {
+  const component = await mount("ui-line-comment--display")
+  const trigger = component.locator('[data-slot="line-comment-v2-overflow"]')
+  const rest = await trigger.evaluate((element) => getComputedStyle(element).backgroundColor)
+
+  await trigger.click()
+
+  await expect(page.getByRole("menu")).toBeVisible()
+  await expect(trigger).toHaveAttribute("data-expanded", "")
+  await expect(trigger).not.toHaveCSS("background-color", rest)
+})

packages/ui/src/data-display/line-comment/line-comment.css

@@ -103,7 +103,7 @@
   background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
-[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"]) {
+[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"], [data-expanded]) {
   background-color: var(--v2-overlay-simple-overlay-pressed);
 }
 

packages/ui/src/data-display/line-comment/line-comment.stories.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { createSignal } from "solid-js"
 import { LineCommentEditor, LineComment, LineCommentOverflowIcon } from "./line-comment"
+import { Menu } from "../../navigation/menu/menu"
 
 const docs = `### Overview
 Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`Button\` ghost + contrast actions).
@@ -35,9 +36,17 @@ export const Display = {
         comment="Consider guarding against empty arrays."
         selection="Comment on line 40"
         actions={
-          <button type="button" data-slot="line-comment-v2-overflow" aria-label="Comment actions">
-            <LineCommentOverflowIcon />
-          </button>
+          <Menu gutter={4}>
+            <Menu.Trigger as="button" type="button" data-slot="line-comment-v2-overflow" aria-label="Comment actions">
+              <LineCommentOverflowIcon />
+            </Menu.Trigger>
+            <Menu.Portal>
+              <Menu.Content>
+                <Menu.Item>Edit</Menu.Item>
+                <Menu.Item>Delete</Menu.Item>
+              </Menu.Content>
+            </Menu.Portal>
+          </Menu>
         }
       />
     </div>