feat(popup): add main open target for notifications

Add a dedicated open target inside notification-main without changing the current row layout or click behavior.
Cover the new interaction with renderer tests.

Author: euxx

src/popup/notification-renderer.js

@@ -275,6 +275,11 @@ function createNotificationItem(notif, repoHeader, repoFullName) {
   li.dataset.id = notif.id;
   li.dataset.repo = repoFullName;
 
+  async function openNotification() {
+    await sendMessage(MESSAGE_TYPES.OPEN_NOTIFICATION, { notificationId: notif.id });
+    window.close();
+  }
+
   // Build icon class with state information
   const iconClass = buildIconClass(notif);
 
@@ -300,6 +305,10 @@ function createNotificationItem(notif, repoHeader, repoFullName) {
   const mainDiv = document.createElement("div");
   mainDiv.className = "notification-main";
 
+  const openTarget = document.createElement("button");
+  openTarget.type = "button";
+  openTarget.className = "notification-open-target";
+
   const titleDiv = document.createElement("div");
   titleDiv.className = "notification-title";
   const fullTitle = releaseBody ? `${notif.title}\n\n${releaseBody}` : notif.title;
@@ -325,7 +334,8 @@ function createNotificationItem(notif, repoHeader, repoFullName) {
     titleDiv.appendChild(previewSpan);
   }
 
-  mainDiv.appendChild(titleDiv);
+  openTarget.appendChild(titleDiv);
+  mainDiv.appendChild(openTarget);
   contentDiv.appendChild(mainDiv);
 
   // Create metadata area
@@ -445,8 +455,7 @@ function createNotificationItem(notif, repoHeader, repoFullName) {
     if (e.target.closest(".btn-mark-read") || e.target.closest("a")) {
       return;
     }
-    await sendMessage(MESSAGE_TYPES.OPEN_NOTIFICATION, { notificationId: notif.id });
-    window.close();
+    await openNotification();
   });
 
   // Mark as read button with immediate visual feedback

src/popup/popup.css

@@ -800,6 +800,29 @@ body.dark-theme .notification-hover-card {
   color: var(--text-secondary);
 }
 
+.notification-open-target {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  appearance: none;
+  -webkit-appearance: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+.notification-open-target:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--action-focus);
+}
+
 /* Issue states */
 .notification-icon.issue.open {
   color: var(--icon-issue-open);

tests/notification-renderer-open-target.test.js

@@ -0,0 +1,188 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from "vitest";
+
+beforeAll(() => {
+  if (typeof CSS === "undefined" || !CSS.escape) {
+    // @ts-ignore
+    globalThis.CSS = {
+      escape(value) {
+        const str = String(value);
+        const length = str.length;
+        let result = "";
+        for (let i = 0; i < length; i++) {
+          const code = str.charCodeAt(i);
+          if (code === 0x0000) {
+            result += "\uFFFD";
+            continue;
+          }
+          if (
+            (code >= 0x0001 && code <= 0x001f) ||
+            code === 0x007f ||
+            (i === 0 && code >= 0x0030 && code <= 0x0039) ||
+            (i === 1 && code >= 0x0030 && code <= 0x0039 && str.charCodeAt(0) === 0x002d)
+          ) {
+            result += `\\${code.toString(16)} `;
+            continue;
+          }
+          if (
+            code >= 0x80 ||
+            code === 0x2d ||
+            code === 0x5f ||
+            (code >= 0x30 && code <= 0x39) ||
+            (code >= 0x41 && code <= 0x5a) ||
+            (code >= 0x61 && code <= 0x7a)
+          ) {
+            result += str[i];
+          } else {
+            result += `\\${str[i]}`;
+          }
+        }
+        return result;
+      },
+    };
+  }
+});
+
+vi.mock("../src/lib/constants.js", () => ({
+  GITHUB_SITE_BASE: "https://github.com",
+  ANIMATION_DURATION: { FADE_OUT: 0, ERROR_BACKGROUND_FADE: 0 },
+  NOTIFICATION_TYPES: { RELEASE: "Release" },
+  MESSAGE_TYPES: {
+    MARK_AS_READ: "markAsRead",
+    OPEN_NOTIFICATION: "openNotification",
+  },
+  TIME_CONVERSION: { MS_PER_MINUTE: 60000 },
+}));
+
+vi.mock("../src/lib/format-utils.js", () => ({
+  formatReason: vi.fn((reason) => reason),
+  getNotificationStatus: vi.fn(() => "Status"),
+}));
+
+vi.mock("../src/lib/icons.js", () => ({
+  getIconSVGElement: vi.fn(() => {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    return svg;
+  }),
+}));
+
+const sendMessage = vi.fn();
+
+const { initRenderer, renderNotifications, clearNotificationCache } =
+  await import("../src/popup/notification-renderer.js");
+
+function makeNotif(id) {
+  return {
+    id: String(id),
+    title: `Notification ${id}`,
+    reason: "mention",
+    updated_at: new Date().toISOString(),
+    icon: "issue",
+    type: "Issue",
+    url: "https://github.com/owner/repo/issues/1",
+    repository: {
+      full_name: "owner/repo",
+      html_url: "https://github.com/owner/repo",
+    },
+    author: {
+      login: "octocat",
+      avatar_url: "https://avatars.githubusercontent.com/u/1?v=4",
+    },
+  };
+}
+
+describe("notification main open target", () => {
+  let notificationsList;
+  let emptyState;
+  let markAllBtn;
+  let closeSpy;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    clearNotificationCache();
+
+    document.body.innerHTML = `
+      <ul id="notifications-list"></ul>
+      <div id="empty-state" hidden></div>
+      <button id="mark-all-btn"></button>
+    `;
+
+    notificationsList = document.getElementById("notifications-list");
+    emptyState = document.getElementById("empty-state");
+    markAllBtn = document.getElementById("mark-all-btn");
+    closeSpy = vi.spyOn(window, "close").mockImplementation(() => {});
+
+    initRenderer({
+      notificationsList,
+      emptyState,
+      markAllBtn,
+      sendMessage,
+      getShowHoverCards: () => false,
+      onUserAction: vi.fn(),
+      onMarkRepoAsRead: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    closeSpy.mockRestore();
+  });
+
+  it("renders an explicit main open target inside notification-main", () => {
+    renderNotifications([makeNotif(1)]);
+
+    const openTarget = notificationsList.querySelector(
+      '.notification-item[data-id="1"] .notification-main .notification-open-target',
+    );
+
+    expect(openTarget).not.toBeNull();
+    expect(openTarget.tagName).toBe("BUTTON");
+  });
+
+  it("opens the notification from the main target", async () => {
+    renderNotifications([makeNotif(1)]);
+    sendMessage.mockResolvedValueOnce({ success: true });
+
+    const openTarget = notificationsList.querySelector(
+      '.notification-item[data-id="1"] .notification-open-target',
+    );
+    openTarget.click();
+
+    expect(sendMessage).toHaveBeenCalledWith("openNotification", { notificationId: "1" });
+    await vi.waitFor(() => {
+      expect(closeSpy).toHaveBeenCalled();
+    });
+  });
+
+  it("keeps row click behavior unchanged outside the explicit open target", async () => {
+    renderNotifications([makeNotif(1)]);
+    sendMessage.mockResolvedValueOnce({ success: true });
+
+    const item = notificationsList.querySelector('.notification-item[data-id="1"]');
+    item.click();
+
+    expect(sendMessage).toHaveBeenCalledWith("openNotification", { notificationId: "1" });
+    await vi.waitFor(() => {
+      expect(closeSpy).toHaveBeenCalled();
+    });
+  });
+
+  it("keeps the avatar link and mark-as-read button independent from notification open", () => {
+    renderNotifications([makeNotif(1)]);
+
+    const avatarLink = notificationsList.querySelector(
+      '.notification-item[data-id="1"] .author-profile-link',
+    );
+    avatarLink.click();
+    expect(sendMessage).not.toHaveBeenCalledWith("openNotification", { notificationId: "1" });
+
+    const markReadBtn = notificationsList.querySelector(
+      '.notification-item[data-id="1"] .btn-mark-read',
+    );
+    markReadBtn.click();
+
+    expect(sendMessage).toHaveBeenCalledWith("markAsRead", { notificationId: "1" });
+    expect(sendMessage).not.toHaveBeenCalledWith("openNotification", { notificationId: "1" });
+  });
+});