fix(popup): preserve focus after marking notifications read

Move focus to the next available notification open target after marking one as read.
Fall back to the previous notification and cover the behavior with renderer tests.

Author: euxx

src/popup/notification-renderer.js

@@ -275,6 +275,30 @@ function createNotificationItem(notif, repoHeader, repoFullName) {
   li.dataset.id = notif.id;
   li.dataset.repo = repoFullName;
 
+  function getNotificationOpenTarget(item) {
+    return item?.querySelector(".notification-open-target") || null;
+  }
+
+  function getFocusTargetAfterRemoval() {
+    let sibling = li.nextElementSibling;
+    while (sibling) {
+      if (sibling.matches(".notification-item")) {
+        return getNotificationOpenTarget(sibling);
+      }
+      sibling = sibling.nextElementSibling;
+    }
+
+    sibling = li.previousElementSibling;
+    while (sibling) {
+      if (sibling.matches(".notification-item")) {
+        return getNotificationOpenTarget(sibling);
+      }
+      sibling = sibling.previousElementSibling;
+    }
+
+    return null;
+  }
+
   async function openNotification() {
     await sendMessage(MESSAGE_TYPES.OPEN_NOTIFICATION, { notificationId: notif.id });
     window.close();
@@ -478,6 +502,8 @@ function createNotificationItem(notif, repoHeader, repoFullName) {
     void li.offsetHeight;
     li.classList.add("fade-out");
 
+    const nextFocusTarget = getFocusTargetAfterRemoval();
+
     // Restore the notification item to its original state on failure
     function restoreItem() {
       li.classList.remove("marking-read", "fade-out");
@@ -520,6 +546,8 @@ function createNotificationItem(notif, repoHeader, repoFullName) {
           emptyState.hidden = false;
           markAllBtn.disabled = true;
         }
+
+        nextFocusTarget?.focus({ preventScroll: true });
       } else {
         // Failure: restore item
         restoreItem();

tests/notification-renderer-mark-read.test.js

@@ -186,4 +186,40 @@ describe("mark single notification as read — repo header count", () => {
     // Notification should still be present
     expect(notificationsList.querySelector('.notification-item[data-id="1"]')).not.toBeNull();
   });
+
+  it("moves focus to the next notification open target after marking one as read", async () => {
+    renderNotifications([makeNotif(1), makeNotif(2)]);
+
+    sendMessage.mockResolvedValueOnce({ success: true });
+    const btn = notificationsList.querySelector('.notification-item[data-id="1"] .btn-mark-read');
+    btn.focus();
+    btn.click();
+
+    await vi.waitFor(() => {
+      expect(notificationsList.querySelector('.notification-item[data-id="1"]')).toBeNull();
+    });
+
+    const nextOpenTarget = notificationsList.querySelector(
+      '.notification-item[data-id="2"] .notification-open-target',
+    );
+    expect(document.activeElement).toBe(nextOpenTarget);
+  });
+
+  it("falls back to the previous notification open target when the last item is removed", async () => {
+    renderNotifications([makeNotif(1), makeNotif(2)]);
+
+    sendMessage.mockResolvedValueOnce({ success: true });
+    const btn = notificationsList.querySelector('.notification-item[data-id="2"] .btn-mark-read');
+    btn.focus();
+    btn.click();
+
+    await vi.waitFor(() => {
+      expect(notificationsList.querySelector('.notification-item[data-id="2"]')).toBeNull();
+    });
+
+    const previousOpenTarget = notificationsList.querySelector(
+      '.notification-item[data-id="1"] .notification-open-target',
+    );
+    expect(document.activeElement).toBe(previousOpenTarget);
+  });
 });